/* 千鳥 CHIDORI — dark cinematic shell */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --ink: #cfe8ff; --accent: #7fd0ff; --bg: #06080d; }

html, body { height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: "Hiragino Sans", "PingFang SC", -apple-system, sans-serif; color: var(--ink); }

#cam { display: none; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; pointer-events: none;
}
.title { font-size: 22px; font-weight: 800; letter-spacing: .1em; text-shadow: 0 0 18px rgba(127,208,255,.6); }
.title span { font-size: 11px; font-weight: 500; letter-spacing: .3em; opacity: .65; margin-left: 8px; }
.rec {
  pointer-events: auto; cursor: pointer;
  font-size: 12px; letter-spacing: .12em; padding: 8px 14px; border-radius: 999px;
  color: var(--ink); background: rgba(10, 16, 26, .55); border: 1px solid rgba(127,208,255,.35);
  backdrop-filter: blur(6px);
}
.rec.on { color: #fff; background: #c22; border-color: #f66; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- pose guide ---------- */
.guide {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 22px 14px; border-radius: 18px;
  background: rgba(8, 13, 22, .62); border: 1px solid rgba(127,208,255,.22);
  backdrop-filter: blur(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.guide.hidden { opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; }
.pose-demo { width: 178px; height: 105px; }
.pose-demo .hand-grip { animation: grip 2.6s ease-in-out infinite; transform-origin: 60px 66px; }
@keyframes grip { 0%, 18% { transform: translate(-26px, 18px) rotate(-8deg); opacity: .35; } 45%, 82% { transform: none; opacity: 1; } 100% { transform: translate(-26px, 18px) rotate(-8deg); opacity: .35; } }
.spark { fill: var(--accent); opacity: 0; }
.pose-demo .s1 { animation: spark 2.4s infinite .5s; }
.pose-demo .s2 { animation: spark 2.4s infinite .8s; }
.pose-demo .s3 { animation: spark 2.4s infinite 1.1s; }
@keyframes spark { 45%, 75% { opacity: 1; } 100% { opacity: 0; } }
.guide-text { font-size: 13.5px; line-height: 1.7; text-align: center; opacity: .92; }
.guide-text b { color: var(--accent); }

.ring { width: 44px; height: 44px; transform: rotate(-90deg); }
#ringFg {
  fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  filter: drop-shadow(0 0 6px var(--accent));
}

/* ---------- permission card ---------- */
.perm {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse at 50% 40%, #0c1626 0%, var(--bg) 70%);
}
.perm[hidden] { display: none; }
.perm p { font-size: 15px; letter-spacing: .06em; opacity: .9; }
.perm button {
  font-size: 15px; padding: 12px 32px; border-radius: 999px; cursor: pointer;
  color: #05121f; background: var(--accent); border: none; font-weight: 700; letter-spacing: .08em;
  box-shadow: 0 0 34px rgba(127,208,255,.45);
}
.demo-link { font-size: 12.5px; color: var(--ink); opacity: .6; text-decoration: none; }
.demo-link:hover { opacity: 1; }

.hint {
  position: fixed; right: 18px; bottom: 16px; z-index: 10;
  font-size: 11.5px; letter-spacing: .08em; opacity: 0; transition: opacity .5s;
}
.hint.show { opacity: .55; }