:root{
  --night:#05061a; --ink:#e9e6ff; --gold:#f2cf5b;
  --glass:rgba(18,22,58,.38); --glass-down:rgba(60,66,140,.55); --rim:rgba(233,230,255,.38);
  --pixel:"DotGothic16","Hiragino Kaku Gothic ProN","Noto Sans JP",monospace;
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--ink);font-family:var(--pixel);
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#cv{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
button{font-family:var(--pixel);color:var(--ink);background:var(--glass);border:2px solid var(--rim);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* hud */
.hud{position:fixed;top:calc(var(--st) + 8px);left:calc(var(--sl) + 16px);pointer-events:none;display:flex;flex-direction:column;gap:2px;text-shadow:0 2px 0 rgba(5,6,26,.8)}
.hud .now{font-size:clamp(26px,5vw,38px);line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hud .now small{font-size:.5em;margin-left:4px;opacity:.8}
.hud .b{font-size:12px;letter-spacing:.12em;color:var(--gold);opacity:.85;font-variant-numeric:tabular-nums}
body[data-state="title"] .hud{visibility:hidden}
#banner{position:fixed;left:0;right:0;top:28%;text-align:center;font-size:clamp(30px,7vw,52px);color:var(--gold);letter-spacing:.08em;pointer-events:none;opacity:0;text-shadow:0 3px 0 rgba(5,6,26,.85)}
#banner.go{animation:pop 1.3s ease-out}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.8)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
#tap{position:fixed;right:calc(var(--sr) + 22px);bottom:calc(var(--sb) + 16px);width:clamp(76px,13vw,96px);height:clamp(76px,13vw,96px);border-radius:50%;
  border:2px solid rgba(242,207,91,.55);display:grid;place-items:center;color:var(--gold);font-size:13px;letter-spacing:.12em;pointer-events:none;background:rgba(18,22,58,.25)}
#tap.down{background:rgba(242,207,91,.25)}
body:not([data-state="play"]) #tap{display:none}

/* panels */
.panel{position:fixed;inset:0;display:none;place-items:center;text-align:center;pointer-events:none;padding:16px}
.panel>div{display:flex;flex-direction:column;align-items:center;gap:10px}
body[data-state="title"] #title,body[data-state="over"] #over{display:grid}
#title{place-items:start center;padding-top:calc(var(--st) + 5vh)}
#title>div{background:rgba(7,9,32,.66);border-radius:16px;padding:14px 26px;gap:8px}
#title h1{margin:0;font-weight:400;font-size:clamp(22px,4.6vw,38px);letter-spacing:.14em;text-shadow:0 3px 0 rgba(5,6,26,.85)}
#title .go{font-size:15px;letter-spacing:.2em;animation:blink 1.4s steps(2) infinite}
#title .sub{font-size:12px;opacity:.75;letter-spacing:.06em}
#tBest{color:var(--gold);font-size:13px;letter-spacing:.12em;min-height:1em}
@keyframes blink{50%{opacity:.25}}
#over>div{background:rgba(7,9,32,.78);border:2px solid var(--rim);border-radius:16px;padding:18px 28px;pointer-events:auto}
#over .t{font-size:14px;letter-spacing:.2em;opacity:.8}
#over .s{font-size:clamp(40px,8vw,60px);line-height:1;font-variant-numeric:tabular-nums}
#over .s small{font-size:.4em;margin-left:6px}
#oNew{color:var(--gold);font-size:14px;letter-spacing:.16em;animation:blink .8s steps(2) infinite}
#over .bb{font-size:12px;color:var(--gold);opacity:.85;letter-spacing:.1em}
#over .row{display:flex;gap:10px;margin-top:4px}
#over .row button{padding:10px 20px;border-radius:10px;font-size:15px;letter-spacing:.08em;min-width:110px}
#again{border-color:var(--gold);color:var(--gold)}
body.paused::after{content:"PAUSE";position:fixed;inset:0;display:grid;place-items:center;font-size:28px;letter-spacing:.3em;background:rgba(5,6,26,.45);pointer-events:none}

/* top menu */
.menu{position:fixed;top:calc(var(--st) + 8px);right:calc(var(--sr) + 10px);display:flex;gap:6px}
.menu button{min-width:44px;height:36px;padding:0 10px;font-size:13px;border-radius:10px;border-width:1.5px}
.menu button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}

/* portrait hint */
#rot{position:fixed;inset:0;display:none;place-items:center;background:rgba(5,6,26,.82);text-align:center;padding:24px}
#rot p{margin:0 0 6px;font-size:17px;letter-spacing:.06em}
#rot small{display:block;opacity:.7;margin-bottom:18px;font-size:12px}
#rot .phone{width:44px;height:72px;border:3px solid var(--ink);border-radius:8px;margin:0 auto 18px;animation:turn 2.4s ease-in-out infinite}
#rotGo{padding:10px 18px;border-radius:10px;font-size:14px}
@keyframes turn{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait){body:not(.dismiss) #rot{display:grid}}
@media (prefers-reduced-motion:reduce){#rot .phone{animation:none;transform:rotate(-90deg)}}