*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:#05030c; color:#fff;
  font-family:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none; }
canvas{ position:fixed; inset:0; width:100%; height:100%; display:block; }
[hidden]{ display:none !important; }

/* ---- HUD ---- */
#hud{ position:fixed; inset:0; pointer-events:none; }
.top{ position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:flex-start;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 0; }
.time{ font-size:30px; letter-spacing:.02em; text-shadow:0 0 12px rgba(120,160,255,.6); font-variant-numeric:tabular-nums; }
.time.low{ color:#ff6a6a; text-shadow:0 0 14px rgba(255,60,60,.8); }
.score{ font-size:30px; text-shadow:0 0 12px rgba(255,200,90,.6); font-variant-numeric:tabular-nums; }
.score small,.cn small,.rscore small{ font-size:.5em; margin-left:.15em; opacity:.8; }
.quit{ position:absolute; right:16px; top:calc(env(safe-area-inset-top) + 58px); pointer-events:auto;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; font-size:20px; }

.combo{ position:absolute; left:0; right:0; top:22%; text-align:center; }
.cn{ font-size:64px; line-height:1; color:#fff;
  text-shadow:0 0 18px rgba(255,120,200,.9), 0 0 40px rgba(255,80,40,.6); font-variant-numeric:tabular-nums; }
.cn.pop{ animation:pop .18s ease-out; }
@keyframes pop{ 0%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.mult{ margin-top:4px; font-size:22px; color:#ffd36b; text-shadow:0 0 10px rgba(255,180,60,.8); }
.gauge{ width:140px; height:5px; margin:10px auto 0; border-radius:3px; background:rgba(255,255,255,.15); overflow:hidden; }
.gauge i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff4fa0,#ffd36b); }
.combo.fever .cn{ color:#ffe9a8; text-shadow:0 0 18px rgba(255,220,90,1), 0 0 50px rgba(255,60,160,.9); }

.ready{ position:absolute; left:0; right:0; top:45%; text-align:center; font-size:28px;
  text-shadow:0 0 16px rgba(255,140,200,.9); animation:blink 1s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.35; } }

.banner{ position:fixed; left:0; right:0; top:58%; text-align:center; pointer-events:none;
  font-size:44px; color:#fff; opacity:0; text-shadow:0 0 20px #ff4fa0, 0 0 50px #ffb340; }
.banner.show{ animation:banner 1.3s ease-out forwards; }
@keyframes banner{ 0%{ opacity:0; transform:scale(2.2); } 15%{ opacity:1; transform:scale(1); }
  70%{ opacity:1; } 100%{ opacity:0; transform:translateY(-30px) scale(.95); } }

/* ---- 画面 ---- */
.screen{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px 16px; text-align:center; pointer-events:none; }
.screen .btn{ pointer-events:auto; }
h1{ font-size:clamp(64px,20vw,120px); line-height:1; letter-spacing:.02em; font-weight:400; }
h1 span{ display:inline-block; }
h1 .d{ color:#ff5aa8; text-shadow:0 0 24px rgba(255,90,168,.9); }
h1 .p{ color:#ffd04a; text-shadow:0 0 24px rgba(255,200,70,.9); }
h1 .h{ display:block; font-size:.62em; margin-top:.08em; color:#fff; text-shadow:0 0 22px rgba(140,180,255,.9); }
.tag{ font-size:17px; opacity:.9; text-shadow:0 0 10px #000; }
.btns{ display:flex; flex-direction:column; gap:10px; width:min(280px,100%); margin-top:10px; }
.btn{ font:inherit; font-size:18px; color:#fff; padding:14px 18px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.3); background:rgba(20,12,40,.55); backdrop-filter:blur(4px); }
.btn.main{ border:none; background:linear-gradient(90deg,#ff3f93,#ff9a3c); box-shadow:0 0 24px rgba(255,90,140,.6); font-size:20px; }
.btn.ghost{ background:transparent; border-color:rgba(255,255,255,.15); font-size:15px; padding:10px; }
.btn:active{ transform:scale(.96); }
.best{ font-size:15px; opacity:.85; }
.best b{ color:#ffd36b; font-weight:400; }
.hint{ font-size:12px; opacity:.55; font-family:system-ui,sans-serif; }

.rlabel{ font-size:15px; opacity:.7; }
#rank{ font-size:clamp(34px,10vw,56px); font-weight:400; color:#ffe9a8; text-shadow:0 0 22px rgba(255,170,60,.9); }
.rscore{ font-size:52px; text-shadow:0 0 16px rgba(255,120,200,.8); font-variant-numeric:tabular-nums; }
.rnew{ color:#ff7ab8; font-size:18px; animation:blink .8s ease-in-out infinite; }
.rstats{ display:flex; gap:22px; font-size:14px; }
.rstats dt{ opacity:.65; font-size:12px; }
.rstats dd{ font-size:22px; }
#result{ background:radial-gradient(ellipse at center, rgba(5,3,12,.55), rgba(5,3,12,0) 70%); }