:root {
  color-scheme: dark;
  --bg: #05060c;
  --panel: rgba(7, 10, 23, 0.86);
  --line: rgba(255,255,255,.14);
  --cyan: #5df6ff;
  --violet: #a57cff;
  --pink: #ff5bbd;
  --white: #f5fbff;
  --muted: #a6afc3;
  --danger: #ff536f;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100dvh; overscroll-behavior: none; }
button { font: inherit; }
.app { min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(circle at 50% 20%, #111735 0, #070914 38%, #03040a 100%); }
.stage { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; background: #070914; isolation: isolate; touch-action: manipulation; }
#camera, #gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#camera { object-fit: contain; object-position: center center; transform: scaleX(-1); filter: saturate(.72) contrast(1.08) brightness(.6); background:#05060c; }
#gameCanvas { z-index: 2; pointer-events: none; }
.vignette { position:absolute; inset:0; z-index:3; pointer-events:none; background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(2,3,12,.22) 68%, rgba(1,2,8,.8) 100%); }
.scanlines { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.12; background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.13) 4px); mix-blend-mode:overlay; }
.hud { position:absolute; z-index:6; top: max(10px, env(safe-area-inset-top)); left:12px; right:12px; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:8px; pointer-events:none; }
.hud-chip { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hud-chip strong { font-size:clamp(18px,5vw,26px); letter-spacing:.05em; line-height:1; text-shadow:0 0 18px rgba(93,246,255,.42); }
.hud-right { text-align:right; align-items:flex-end; }
.hud-label { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.22em; }
.hud-center { text-align:center; min-width:92px; }
.logo-mini { font-weight:950; letter-spacing:-.05em; font-size:13px; }
.logo-mini span { color:var(--cyan); }
.combo { margin-top:4px; display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid rgba(93,246,255,.35); background:rgba(4,10,20,.55); color:var(--cyan); font-size:12px; font-weight:900; }
.charge-wrap { position:absolute; z-index:6; top: calc(max(10px, env(safe-area-inset-top)) + 50px); left:50%; transform:translateX(-50%); width:min(52vw,220px); pointer-events:none; }
.charge-wrap span { display:block; text-align:center; color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.18em; margin-bottom:4px; }
.charge-track { height:5px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(0,0,0,.45); overflow:hidden; }
.charge-fill { width:0%; height:100%; background:linear-gradient(90deg,var(--violet),var(--pink),var(--cyan)); box-shadow:0 0 14px var(--cyan); transition:width .16s linear; }
.charge-wrap.ready .charge-track { box-shadow:0 0 18px rgba(93,246,255,.75); }
.phase-label { position:absolute; z-index:6; top:calc(max(10px, env(safe-area-inset-top)) + 72px); left:50%; transform:translateX(-50%); padding:3px 9px; border:1px solid rgba(93,246,255,.18); border-radius:999px; background:rgba(4,7,16,.45); color:rgba(216,230,244,.72); font-size:7px; font-weight:950; letter-spacing:.19em; white-space:nowrap; pointer-events:none; transition:color .18s ease,border-color .18s ease,box-shadow .18s ease; }
.phase-label[data-phase="1"] { color:#d8ccff; border-color:rgba(165,124,255,.38); }
.phase-label[data-phase="2"] { color:#9ff8ff; border-color:rgba(93,246,255,.42); box-shadow:0 0 16px rgba(93,246,255,.10); }
.phase-label[data-phase="3"] { color:#ff9fd6; border-color:rgba(255,91,189,.52); box-shadow:0 0 20px rgba(255,91,189,.16); }
.status-pill { position:absolute; z-index:6; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); padding:7px 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(4,7,16,.66); backdrop-filter:blur(12px); color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.12em; white-space:nowrap; pointer-events:none; }
.status-pill.locked { color:#a9ffda; border-color:rgba(84,255,170,.36); }
.status-pill.lost { color:#ffd89f; border-color:rgba(255,186,86,.36); }
.screen { position:absolute; inset:0; z-index:10; display:none; place-items:center; padding:calc(72px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(2,4,11,.34),rgba(2,4,11,.68)); overflow:auto; }
.screen.active { display:grid; }
.panel { width:min(100%,430px); background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:22px 18px 18px; box-shadow:0 24px 80px rgba(0,0,0,.42); backdrop-filter:blur(18px); }
.intro-panel { align-self:center; }
.eyebrow { color:var(--cyan); font-size:10px; font-weight:900; letter-spacing:.23em; text-align:center; }
h1 { margin:3px 0 0; text-align:center; font-size:clamp(48px,15vw,76px); line-height:.92; letter-spacing:-.075em; font-weight:1000; }
h1 span { color:var(--cyan); text-shadow:0 0 30px rgba(93,246,255,.35); }
.tagline { margin:10px auto 18px; max-width:300px; color:#dce4f2; text-align:center; font-size:14px; line-height:1.35; }
.how-grid { display:grid; gap:8px; }
.how-card { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.035); }
.how-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,rgba(165,124,255,.18),rgba(93,246,255,.14)); border:1px solid rgba(93,246,255,.18); color:var(--cyan); font-size:20px; font-weight:900; }
.how-card strong, .how-card span { display:block; }
.how-card strong { font-size:11px; letter-spacing:.1em; }
.how-card span { margin-top:2px; color:var(--muted); font-size:11px; line-height:1.25; }
.setup-note { margin:12px 0; padding:10px 11px; border-left:2px solid var(--violet); background:rgba(165,124,255,.07); }
.setup-note strong, .setup-note span { display:block; }
.setup-note strong { color:#d9ccff; font-size:9px; letter-spacing:.15em; }
.setup-note span { margin-top:3px; color:#c2c9d9; font-size:11px; line-height:1.32; }
.primary-btn { width:100%; min-height:58px; border:0; border-radius:16px; padding:11px 16px; color:#020711; background:linear-gradient(115deg,var(--cyan),#93f7ff 46%,#c8b7ff 100%); box-shadow:0 10px 34px rgba(93,246,255,.16); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.primary-btn:active { transform:translateY(1px) scale(.995); }
.primary-btn:focus-visible { outline:3px solid white; outline-offset:3px; }
.btn-main,.btn-sub { display:block; }
.btn-main { font-size:14px; font-weight:1000; letter-spacing:.04em; }
.btn-sub { margin-top:2px; opacity:.64; font-size:9px; font-weight:750; letter-spacing:.03em; }
.fineprint { margin:9px 2px 0; color:#778096; font-size:9px; text-align:center; line-height:1.35; }
.compact-panel { text-align:center; max-width:330px; }
.compact-panel h2, .result-panel h2 { margin:10px 0 6px; font-size:22px; letter-spacing:-.03em; }
.compact-panel p { margin:0; color:var(--muted); font-size:13px; line-height:1.4; }
.loader { width:44px; height:44px; margin:auto; border-radius:50%; border:3px solid rgba(255,255,255,.11); border-top-color:var(--cyan); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.tracking-orb { width:48px; height:48px; margin:auto; border-radius:50%; border:2px solid var(--cyan); box-shadow:0 0 0 10px rgba(93,246,255,.06),0 0 30px rgba(93,246,255,.3); animation:pulse 1.1s ease-in-out infinite alternate; }
@keyframes pulse { to { transform:scale(.86); opacity:.7; } }
.body-meter { margin:16px 0 0; height:7px; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(0,0,0,.35); }
.body-meter-fill { width:0%; height:100%; background:linear-gradient(90deg,var(--violet),var(--cyan)); transition:width .12s linear; }
.countdown { position:absolute; z-index:12; inset:0; display:none; place-items:center; font-size:clamp(90px,34vw,180px); font-weight:1000; letter-spacing:-.08em; color:white; text-shadow:0 0 60px var(--cyan); pointer-events:none; }
.countdown.active { display:grid; }
.toast { position:absolute; z-index:8; left:50%; top:24%; transform:translate(-50%,-50%) scale(.92); opacity:0; max-width:80%; padding:8px 13px; border:1px solid rgba(93,246,255,.35); border-radius:999px; background:rgba(3,7,16,.72); color:var(--cyan); font-size:11px; font-weight:950; letter-spacing:.11em; text-align:center; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.result-panel { max-width:350px; text-align:center; }
.result-panel h2 { color:var(--cyan); }
.final-score { margin:8px 0 16px; font-size:clamp(52px,16vw,78px); line-height:1; font-weight:1000; letter-spacing:-.06em; }
.result-row { display:flex; align-items:center; justify-content:space-between; padding:9px 2px; border-top:1px solid rgba(255,255,255,.1); color:var(--muted); font-size:11px; font-weight:850; letter-spacing:.08em; }
.result-row strong { color:white; font-size:14px; }
.result-panel .primary-btn { margin-top:14px; }
.error-mark { display:grid; place-items:center; width:46px; height:46px; margin:auto; border-radius:50%; color:white; background:var(--danger); font-size:24px; font-weight:1000; }
.error-panel .primary-btn { margin-top:16px; }
.desktop-note { display:none; }
@media (min-width: 700px) and (min-height:700px) {
  .app { padding:20px; }
  .stage { width:min(430px,calc(100vw - 40px)); min-height:0; height:min(860px,calc(100dvh - 70px)); border:1px solid rgba(255,255,255,.13); border-radius:28px; box-shadow:0 28px 100px rgba(0,0,0,.55); }
  .desktop-note { display:block; position:fixed; bottom:5px; color:#6f778b; font-size:10px; }
}
@media (max-height:700px) {
  .screen { align-items:start; }
  .panel { margin:auto; }
  .intro-panel { padding-top:16px; }
  h1 { font-size:48px; }
  .how-card { padding:7px 9px; }
  .how-icon { width:32px; height:32px; }
  .tagline { margin-bottom:10px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
.phase-label[data-phase="boss"] { color:#ffb2c4; border-color:rgba(255,83,111,.68); box-shadow:0 0 22px rgba(255,83,111,.22); background:rgba(28,3,12,.62); }

/* v7 judge-ready game-feel layer */
.calibration-frame { position:absolute; z-index:5; left:10%; right:10%; top:18%; bottom:15%; border:1px dashed rgba(93,246,255,.34); border-radius:34% 34% 22% 22% / 18% 18% 12% 12%; opacity:0; pointer-events:none; transition:opacity .2s ease; box-shadow:inset 0 0 40px rgba(93,246,255,.025); }
.calibration-frame::before,.calibration-frame::after { content:""; position:absolute; top:28%; width:26%; height:1px; background:linear-gradient(90deg,transparent,rgba(165,124,255,.55)); }
.calibration-frame::before { left:-2%; transform:rotate(-8deg); }
.calibration-frame::after { right:-2%; transform:scaleX(-1) rotate(-8deg); }
.calibration-label { position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); width:max-content; max-width:86vw; color:rgba(190,230,238,.72); font-size:8px; font-weight:900; letter-spacing:.16em; text-align:center; }
.stage[data-state="ready"] .calibration-frame { opacity:.72; }

.impact-flash { position:absolute; inset:0; z-index:7; opacity:0; pointer-events:none; background:rgba(255,255,255,.68); mix-blend-mode:screen; }
.impact-flash.hit { animation:impactFlash .16s ease-out; }
.impact-flash.heavy { background:rgba(181,134,255,.74); animation:impactFlashHeavy .28s ease-out; }
.impact-flash.danger { background:rgba(255,58,92,.72); animation:impactFlashHeavy .3s ease-out; }
@keyframes impactFlash { 0%{opacity:.5} 100%{opacity:0} }
@keyframes impactFlashHeavy { 0%{opacity:.7} 45%{opacity:.18} 100%{opacity:0} }
.stage.shake-hit { animation:shakeHit .16s linear; }
.stage.shake-heavy { animation:shakeHeavy .28s linear; }
@keyframes shakeHit { 0%,100%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,-1px)} }
@keyframes shakeHeavy { 0%,100%{transform:translate(0)} 15%{transform:translate(-5px,2px)} 35%{transform:translate(4px,-3px)} 55%{transform:translate(-3px,-2px)} 75%{transform:translate(3px,2px)} }

.score-pop-layer { position:absolute; inset:0; z-index:8; overflow:hidden; pointer-events:none; }
.score-pop { position:absolute; transform:translate(-50%,-50%); color:#fff; font-size:clamp(13px,4vw,18px); font-weight:1000; letter-spacing:.04em; text-shadow:0 2px 10px #000,0 0 18px currentColor; white-space:nowrap; animation:scoreRise .72s cubic-bezier(.2,.7,.2,1) forwards; }
.score-pop.gold { color:#ffe189; }
.score-pop.violet { color:#d5c1ff; }
.score-pop.danger { color:#ff9cb0; }
@keyframes scoreRise { 0%{opacity:0;transform:translate(-50%,-30%) scale(.7)} 16%{opacity:1;transform:translate(-50%,-50%) scale(1.13)} 100%{opacity:0;transform:translate(-50%,-135%) scale(.94)} }

.combo.combo-pop { animation:comboPop .28s ease-out; }
@keyframes comboPop { 0%{transform:scale(.76)} 60%{transform:scale(1.2);box-shadow:0 0 24px rgba(93,246,255,.55)} 100%{transform:scale(1)} }

.event-banner { position:absolute; z-index:13; left:50%; top:43%; width:min(90%,360px); transform:translate(-50%,-50%) scale(.88); padding:18px 14px; border-top:1px solid rgba(255,83,111,.7); border-bottom:1px solid rgba(255,83,111,.7); background:linear-gradient(90deg,transparent,rgba(20,2,11,.88) 15%,rgba(20,2,11,.88) 85%,transparent); opacity:0; text-align:center; pointer-events:none; }
.event-banner.show { animation:eventBanner 1.35s cubic-bezier(.2,.7,.2,1) both; }
.event-banner .event-kicker,.event-banner .event-sub { display:block; color:#ff9db2; font-size:8px; font-weight:950; letter-spacing:.2em; }
.event-banner strong { display:block; margin:3px 0; color:#fff; font-size:clamp(30px,9vw,46px); font-weight:1000; letter-spacing:-.055em; text-shadow:0 0 28px rgba(255,83,111,.5); }
.event-banner .event-sub { color:#d8cbd1; letter-spacing:.09em; }
@keyframes eventBanner { 0%{opacity:0;transform:translate(-50%,-50%) scale(.78)} 14%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)} }

.tutorial-ribbon { position:absolute; z-index:7; left:50%; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 42px); transform:translateX(-50%) translateY(8px); width:min(84%,330px); padding:8px 11px; border:1px solid rgba(93,246,255,.24); border-radius:12px; background:rgba(3,7,16,.72); backdrop-filter:blur(10px); opacity:0; text-align:center; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
.tutorial-ribbon.show { opacity:1; transform:translateX(-50%) translateY(0); }
.tutorial-ribbon strong,.tutorial-ribbon span { display:block; }
.tutorial-ribbon strong { color:#dffcff; font-size:10px; font-weight:1000; letter-spacing:.11em; }
.tutorial-ribbon span { margin-top:2px; color:#9aaec2; font-size:9px; font-weight:750; }

@media (prefers-reduced-motion: reduce) {
  .stage.shake-hit,.stage.shake-heavy { animation:none !important; }
  .score-pop { animation:scoreRise .001ms linear forwards !important; }
}


/* v8 release-candidate presentation + compatibility layer */
.preflight-status { margin:10px 0 8px; min-height:20px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:5px 9px; color:#8f9aae; background:rgba(255,255,255,.025); font-size:8px; font-weight:900; letter-spacing:.11em; text-align:center; }
.preflight-status[data-state="ready"] { color:#b9fbff; border-color:rgba(93,246,255,.24); background:rgba(93,246,255,.055); }
.preflight-status[data-state="warn"] { color:#ffd0d8; border-color:rgba(255,83,111,.3); background:rgba(255,83,111,.07); }
.rotate-hint { display:none; position:absolute; z-index:30; inset:0; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:28px; color:white; background:rgba(3,4,12,.94); text-align:center; pointer-events:none; }
.rotate-hint strong { color:var(--cyan); font-size:18px; letter-spacing:.08em; }
.rotate-hint span { max-width:300px; color:#aeb8ca; font-size:12px; line-height:1.4; }
.noscript-warning { position:fixed; inset:auto 10px 10px; z-index:100; margin:0; padding:10px; border:1px solid rgba(255,83,111,.5); border-radius:12px; color:white; background:#260711; font:700 12px/1.35 system-ui,sans-serif; text-align:center; }
@media (orientation: landscape) and (max-width: 900px) and (pointer: coarse) {
  .rotate-hint { display:flex; }
}