*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080a14; --panel:#111524; --line:#242b45;
  --txt:#e8ecf8; --dim:#7c88ab;
  --l0:#ff4d8d; --l1:#3ddcff; --l2:#ffc247; --l3:#a77bff;
  --gold:#ffd45e; --ok:#5eff9f;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt)}
body{
  font:16px/1.5 -apple-system,"PingFang SC",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#app{position:relative;height:100%;width:100%}

.screen{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:24px;text-align:center;
}
.screen.active{display:flex}

h1{font-size:26px;font-weight:600;letter-spacing:.02em;word-break:break-all}
.meta{color:var(--dim);font-size:13px}
.tip{color:var(--dim);font-size:12px}
kbd{
  display:inline-block;min-width:22px;margin:0 2px;padding:2px 5px;
  border:1px solid var(--line);border-radius:5px;background:var(--panel);
  font:600 11px/1 ui-monospace,monospace;
}

/* 难度选择 */
.diffs{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.diff{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"n c" "h c";
  gap:2px 12px;padding:14px 18px;text-align:left;
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);color:var(--txt);font:inherit;cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s;
}
.diff:active{transform:scale(.98)}
.diff[aria-checked="true"]{border-color:var(--gold);background:#191d30}
.dname{grid-area:n;font-size:17px;font-weight:600}
.dhint{grid-area:h;font-size:12px;color:var(--dim)}
.dnum{grid-area:c;align-self:center;font:600 20px/1 ui-monospace,monospace;color:var(--gold)}
.diff[data-diff="easy"][aria-checked="true"]{border-color:var(--ok)}
.diff[data-diff="hard"][aria-checked="true"]{border-color:var(--l0)}

button{font:inherit;cursor:pointer}
.primary,#back,#quit{
  padding:13px 34px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--txt);font-size:16px;
  transition:transform .1s;
}
.primary{background:var(--gold);color:#1a1405;border-color:transparent;font-weight:600}
.primary:active,#back:active,#quit:active{transform:scale(.96)}
.primary[disabled]{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* 游戏中 */
#play{gap:0;justify-content:flex-start;padding:0}
#hud{
  display:flex;align-items:center;width:100%;padding:10px 16px 6px;
  font-variant-numeric:tabular-nums;
}
.hud-l,.hud-r{display:flex;flex-direction:column;min-width:96px}
.hud-r{align-items:flex-end}
.hud-c{flex:1;text-align:center}
#score,#acc{font:600 20px/1 ui-monospace,monospace}
.lbl{font-size:9px;letter-spacing:.14em;color:var(--dim);margin-top:3px}
#combo{font:700 30px/1 ui-monospace,monospace;color:var(--gold);display:inline-block}
#combo.pop{animation:pop .18s ease-out}
#combo.burst{animation:cburst .62s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{transform:scale(1.35)}to{transform:scale(1)}}
@keyframes cburst{
  0%{transform:scale(1);text-shadow:none}
  25%{transform:scale(1.75);text-shadow:0 0 26px var(--gold),0 0 52px var(--gold)}
  100%{transform:scale(1);text-shadow:0 0 10px rgba(255,212,94,.4)}
}

#progress{width:100%;height:2px;background:var(--line)}
#progress-bar{display:block;height:100%;width:0;background:var(--gold)}

#stage{flex:1;width:100%;display:block;touch-action:none}

#judge{
  position:absolute;left:0;right:0;bottom:26%;
  font:800 28px/.9 -apple-system,sans-serif;letter-spacing:.045em;pointer-events:none;
  opacity:0;transform:translateY(9px) scale(.76);
  text-shadow:0 2px 0 rgba(0,0,0,.42),0 0 20px currentColor;
}
#judge.show{opacity:1;animation:jd .46s cubic-bezier(.16,.85,.28,1)}
#judge[data-kind="perfect"]{font-size:32px;letter-spacing:.07em}
#judge[data-kind="miss"]{font-size:24px;letter-spacing:.11em}
@keyframes jd{
  0%{opacity:0;transform:translateY(13px) scale(.55)}
  22%{opacity:1;transform:translateY(0) scale(1.17)}
  48%{opacity:1;transform:translateY(-3px) scale(1)}
  100%{opacity:0;transform:translateY(-18px) scale(.93)}
}

#bigfx{
  position:absolute;left:0;right:0;top:38%;text-align:center;pointer-events:none;
  font:900 46px/1 ui-monospace,-apple-system,monospace;letter-spacing:.06em;
  opacity:0;z-index:6;
  text-shadow:0 0 18px currentColor,0 0 46px currentColor,0 3px 0 rgba(0,0,0,.4);
}
#bigfx.show{animation:bigfx 1.1s cubic-bezier(.15,.9,.25,1)}
@keyframes bigfx{
  0%{opacity:0;transform:scale(.4) rotate(-4deg)}
  14%{opacity:1;transform:scale(1.28) rotate(1.5deg)}
  30%{transform:scale(.98) rotate(0)}
  62%{opacity:1;transform:scale(1.04)}
  100%{opacity:0;transform:scale(1.5)}
}

#pause{
  position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:14px;
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:rgba(17,21,36,.85);color:var(--dim);font-size:11px;
}

#overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:rgba(8,10,20,.93);backdrop-filter:blur(6px);
}
#overlay[hidden]{display:none}
#overlay p{font-size:20px}

/* 结算 */
#rank{
  font:700 76px/1 ui-monospace,monospace;color:var(--gold);
  text-shadow:0 0 40px rgba(255,212,94,.35);
}
#r-score{font:600 34px/1 ui-monospace,monospace}
#r-badge{
  font:700 13px/1 ui-monospace,monospace;letter-spacing:.16em;
  padding:5px 14px;border:1px solid currentColor;border-radius:999px;
}
#rank[data-rank="SSS"]{animation:sssGlow 1.6s ease-in-out infinite}
@keyframes sssGlow{
  0%,100%{text-shadow:0 0 30px currentColor}
  50%{text-shadow:0 0 58px currentColor,0 0 96px currentColor}
}

#ranks{width:100%;max-width:340px;text-align:left}
#ranks summary{
  cursor:pointer;color:var(--dim);font-size:13px;padding:6px 2px;
  list-style:none;
}
#ranks summary::-webkit-details-marker{display:none}
#ranks summary::before{content:"▸ ";transition:transform .15s}
#ranks[open] summary::before{content:"▾ "}
#rank-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
#rank-table th{
  text-align:left;padding:4px 8px;width:52px;
  font:700 13px/1 ui-monospace,monospace;
}
#rank-table td{padding:4px 8px;color:var(--dim)}
#rank-table tr+tr th,#rank-table tr+tr td{border-top:1px solid var(--line)}

#r-table{border-collapse:collapse;font-size:14px;min-width:230px}
#r-table th,#r-table td{padding:7px 14px;border-bottom:1px solid var(--line)}
#r-table th{text-align:left;color:var(--dim);font-weight:400;letter-spacing:.06em}
#r-table td{text-align:right;font:600 15px/1 ui-monospace,monospace}

@media (min-width:760px){
  #stage{max-width:520px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

@media (max-width:480px){
  .screen{padding:20px 16px;gap:16px}
  h1{font-size:24px}
  .meta{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .diffs,#ranks{width:calc(100vw - 32px);max-width:340px}
  .diff{min-width:0;padding:13px 15px}
  .tip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}