:root {
  --bg: #0c0616;
  --ink: #f6eefc;
  --dim: #a596b8;
  --faint: rgba(255, 255, 255, 0.08);
  --coral: #ff6a3d;
  --mint: #6ff5d2;
  --gold: #ffc46b;
  --violet: #7a4dff;
  --panel: rgba(16, 9, 28, 0.78);
  --font: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; user-select: none; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
body.playing { cursor: none; }
.hidden { display: none !important; }

#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 45%, rgba(8,2,16,0.85) 100%); }
#flashlayer { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 60%, rgba(255,140,90,0.0) 30%, rgba(255,106,61,0.35) 100%); }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 4vh 4vw; background: linear-gradient(180deg, rgba(12,6,22,0.35), rgba(12,6,22,0.7)); }
.panel { background: var(--panel); border: 1px solid var(--faint); border-radius: 4px; padding: 28px 32px; backdrop-filter: blur(6px); position: relative;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.small { color: var(--dim); font-size: 14px; letter-spacing: 0.04em; }

.brand { text-align: center; }
.logo { display: inline-flex; align-items: center; gap: 14px; font-size: 64px; letter-spacing: 0.18em; line-height: 1; }
.brand.big .logo { font-size: 96px; }
.logo .l1 { font-weight: 300; color: var(--ink); }
.logo .l2 { font-weight: 700; color: var(--coral); text-shadow: 0 0 28px rgba(255,106,61,0.55); }
.logo .slash { width: 6px; height: 1.15em; background: linear-gradient(180deg, #fff, var(--mint)); transform: skewX(-24deg); box-shadow: 0 0 18px var(--mint), 0 0 4px #fff; border-radius: 2px; }
.tag { margin-top: 12px; color: var(--dim); letter-spacing: 0.32em; text-transform: uppercase; font-size: 13px; }
.press { font-size: 22px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mint); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ---------- menu ---------- */
.menu-body { display: flex; gap: 28px; align-items: stretch; width: min(1100px, 92vw); }
.songs { flex: 1.5; display: flex; flex-direction: column; gap: 14px; }
.song { all: unset; cursor: pointer; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 18px; padding: 18px 22px; background: var(--panel); border: 1px solid var(--faint); border-left: 3px solid transparent; transition: transform .12s, border-color .12s, background .12s; }
.song .num { font-size: 40px; font-weight: 300; color: var(--dim); }
.song .t { font-size: 26px; letter-spacing: 0.06em; }
.song .m { color: var(--dim); font-size: 14px; margin-top: 4px; letter-spacing: 0.04em; }
.song .bpm { text-align: right; font-size: 13px; color: var(--dim); letter-spacing: 0.12em; }
.song .bpm b { display: block; font-size: 24px; color: var(--ink); font-weight: 400; letter-spacing: 0.04em; }
.song.sel { border-left-color: var(--accent, var(--coral)); background: linear-gradient(90deg, rgba(255,106,61,0.14), var(--panel) 60%); }
.song.sel .num { color: var(--accent, var(--coral)); }
.song.hover, .song:hover { border-color: rgba(255,255,255,0.22); }

.side { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.label { color: var(--dim); text-transform: uppercase; letter-spacing: 0.28em; font-size: 12px; }
.diffs { display: flex; gap: 8px; margin-bottom: 8px; }
.diff { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 12px 0; border: 1px solid var(--faint); font-size: 17px; letter-spacing: 0.1em; color: var(--dim); transition: all .12s; }
.diff.sel { color: #160b10; background: var(--mint); border-color: var(--mint); box-shadow: 0 0 18px rgba(111,245,210,0.35); }
.diff.hover, .diff:hover { border-color: rgba(255,255,255,0.3); }
.best { font-size: 15px; color: var(--ink); min-height: 66px; line-height: 1.55; margin-bottom: 6px; }
.best .row { display: flex; justify-content: space-between; color: var(--dim); }
.best .row b { color: var(--ink); font-weight: 400; }
.best .row.cur b { color: var(--gold); }
button.nav { font-family: var(--font); cursor: pointer; }
.primary { all: unset; cursor: pointer; text-align: center; padding: 16px 0; font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase; color: #1a0a06; background: var(--coral); box-shadow: 0 0 26px rgba(255,106,61,0.45); transition: transform .1s, box-shadow .1s; }
.primary.hover, .primary:hover, .primary.focus { transform: scale(1.03); box-shadow: 0 0 40px rgba(255,106,61,0.75); }
.help { color: var(--dim); font-size: 13px; line-height: 1.6; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--faint); }
.help summary { cursor: pointer; text-transform: uppercase; letter-spacing: 0.28em; font-size: 12px; }
.help summary:hover { color: var(--ink); }
#help { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 6px; }
#help div { display: flex; justify-content: space-between; gap: 8px; }
#help b { color: var(--ink); font-weight: 400; text-align: right; }

/* ---------- list panels ---------- */
.list-panel { display: flex; flex-direction: column; gap: 12px; min-width: 340px; text-align: center; }
.list-panel h2, .calib-panel h2 { margin: 0 0 8px; font-weight: 300; font-size: 40px; letter-spacing: 0.2em; text-transform: uppercase; }
.list-panel .nav:not(.primary), .res-actions .nav:not(.primary) { all: unset; cursor: pointer; padding: 13px 0; text-align: center; border: 1px solid var(--faint); letter-spacing: 0.16em; text-transform: uppercase; font-size: 17px; color: var(--ink); flex: 1; }
.nav.focus:not(.primary), .nav.hover:not(.primary) { border-color: var(--mint) !important; color: var(--mint) !important; box-shadow: 0 0 16px rgba(111,245,210,0.25); }

/* ---------- calibration ---------- */
.calib-panel { text-align: center; max-width: 560px; }
.calib-panel p { color: var(--dim); font-size: 18px; line-height: 1.6; }
.calib-panel p b { color: var(--mint); font-weight: 400; }
.calib-song { margin-top: 10px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-size: 14px; }
.phone-art { position: relative; width: 70px; height: 130px; margin: 6px auto 22px; border: 2px solid var(--ink); border-radius: 14px; transform: perspective(300px) rotateX(48deg); }
.phone-art .screenline { position: absolute; left: 50%; bottom: 12px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--mint); box-shadow: 0 0 12px var(--mint); animation: breathe 1.2s infinite; }
.phone-art .beam { position: absolute; left: 50%; top: -90px; width: 3px; height: 90px; margin-left: -1.5px; background: linear-gradient(0deg, var(--mint), transparent); box-shadow: 0 0 12px var(--mint); }

/* ---------- results ---------- */
.results-panel { min-width: min(640px, 90vw); }
.res-head { display: flex; align-items: center; gap: 24px; }
.grade { font-size: 110px; font-weight: 700; line-height: 0.9; color: var(--gold); text-shadow: 0 0 40px rgba(255,196,107,0.5); min-width: 100px; text-align: center; }
.grade.fail { color: var(--coral); text-shadow: 0 0 40px rgba(255,106,61,0.5); font-size: 64px; }
.res-title { font-size: 30px; letter-spacing: 0.08em; }
.res-sub { color: var(--dim); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; margin-top: 6px; }
.res-score { margin: 22px 0 18px; font-size: 64px; font-weight: 300; letter-spacing: 0.06em; display: flex; align-items: baseline; gap: 18px; }
.res-score em { font-style: normal; font-size: 15px; letter-spacing: 0.2em; color: var(--mint); text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 22px; }
.stats div { border-top: 1px solid var(--faint); padding-top: 10px; }
.stats b { display: block; font-size: 26px; font-weight: 400; }
.stats span { color: var(--dim); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.res-actions { display: flex; gap: 12px; }
.res-actions .nav { flex: 1; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.hud-top { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: min(520px, 60vw); text-align: center; }
.hud-song { font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.hud-song em { font-style: normal; color: var(--mint); margin-left: 12px; }
.progress { margin-top: 8px; height: 2px; background: rgba(255,255,255,0.1); }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); box-shadow: 0 0 8px #fff; }
.hud-left { position: absolute; left: 3vw; bottom: 7vh; }
.score { font-size: clamp(36px, 6svh, 54px); font-weight: 300; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.mult { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.mult span { font-size: 26px; color: var(--gold); min-width: 44px; }
.multbar { width: 120px; height: 4px; background: rgba(255,255,255,0.12); }
.multbar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .1s; }
.hud-right { position: absolute; right: 3vw; bottom: 7vh; text-align: right; }
.combo { font-size: clamp(44px, 8svh, 72px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; transition: transform .08s; }
.combo.bump { transform: scale(1.15); }
.combo-label { color: var(--dim); letter-spacing: 0.4em; text-transform: uppercase; font-size: 13px; }
.hud-bottom { position: absolute; bottom: 3.2vh; left: 50%; transform: translateX(-50%); width: min(460px, 50vw); text-align: center; }
.energy-label { color: var(--dim); letter-spacing: 0.4em; text-transform: uppercase; font-size: 11px; margin-bottom: 6px; }
.energy { height: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.energy i { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, var(--coral), var(--gold) 50%, var(--mint)); box-shadow: 0 0 12px rgba(111,245,210,0.4); transition: width .15s; }
.energy.low i { animation: lowe .5s infinite alternate; }
@keyframes lowe { to { opacity: 0.35; } }

#pops { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: pop .75s ease-out forwards; text-shadow: 0 0 14px rgba(0,0,0,0.8); }
.pop b { display: block; font-size: 30px; font-weight: 400; color: var(--ink); }
.pop span { display: block; font-size: 13px; letter-spacing: 0.3em; color: var(--mint); }
.pop.top b { color: var(--gold); text-shadow: 0 0 18px rgba(255,196,107,0.7); }
.pop.bad b, .pop.miss b { color: var(--coral); font-size: 20px; letter-spacing: 0.2em; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }

#banner { position: fixed; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; font-size: 44px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 300; opacity: 0; }
#banner.show { animation: banner 1.4s ease-out forwards; }
#banner.fail { color: var(--coral); }
@keyframes banner { 0% { opacity: 0; letter-spacing: 0.8em; } 20% { opacity: 1; letter-spacing: 0.3em; } 75% { opacity: 1; } 100% { opacity: 0; } }

#toast { position: fixed; left: 50%; bottom: 14vh; transform: translateX(-50%); padding: 10px 18px; background: var(--panel); border: 1px solid var(--coral); color: var(--ink); letter-spacing: 0.08em; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.show { opacity: 1; }

#cursor { position: fixed; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--mint); border-radius: 50%; box-shadow: 0 0 14px var(--mint); pointer-events: none; display: none; z-index: 10; }
#cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; }

@media (max-width: 860px) {
  .menu-body { flex-direction: column; }
  .logo { font-size: 40px; } .brand.big .logo { font-size: 52px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}
.notice { border: 1px solid rgba(255,106,61,0.55); background: rgba(255,106,61,0.10); color: var(--ink); font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; }
.notice[hidden] { display: none; }
.notice b, .pair b { color: var(--mint); font-weight: 600; }
body.playing .mimic-badge { display: none; }
.rumble { all: unset; cursor: pointer; color: var(--dim); font-size: 12px; line-height: 1.4; }
.rumble::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); margin-right: 7px; vertical-align: 1px; }
.rumble.on { color: var(--mint); cursor: default; }
.rumble.on::before { background: var(--mint); box-shadow: 0 0 8px var(--mint); }

/* ---------- campaign / free play ---------- */
#menu { gap: 16px; padding-top: 3vh; }
.brand.compact .logo { font-size: 44px; }
.tabs { display: flex; gap: 6px; }
.tab { all: unset; cursor: pointer; padding: 9px 26px; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.tab b { color: var(--gold); font-weight: 400; letter-spacing: 0.08em; margin-left: 8px; }
.tab.sel { color: var(--ink); border-bottom-color: var(--mint); }
.tab.hover, .tab:hover { color: var(--ink); }
.songs { overflow-y: auto; gap: 8px; padding: 2px 10px 2px 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
.song { padding: 10px 18px; grid-template-columns: 52px 1fr auto; }
.song .num { font-size: 28px; }
.song .t { font-size: 21px; }
.song .m { font-size: 13px; margin-top: 2px; }
.song .bpm b { font-size: 20px; }
.song.locked { opacity: 0.45; }
.song.locked .t::after { content: ""; }
.lock { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--faint); padding: 4px 8px; }
.stars { display: inline-flex; gap: 4px; }
.stars i { width: 16px; height: 16px; background: rgba(255,255,255,0.14); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: var(--gold); filter: drop-shadow(0 0 6px rgba(255,196,107,0.8)); }
.side { overflow-y: auto; }
#detail { display: flex; flex-direction: column; gap: 6px; }
.d-title { font-size: 28px; letter-spacing: 0.08em; }
.d-song { font-size: 16px; color: var(--ink); }
.d-song span { color: var(--dim); }
.d-meta { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.d-new { margin-top: 4px; align-self: flex-start; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #160b10; background: var(--gold); padding: 4px 9px; }
.d-intro { font-size: 15px; line-height: 1.5; color: var(--ink); }
.d-feat { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); margin-bottom: 4px; }
.d-best { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); margin-bottom: 6px; }
.d-best b { color: var(--ink); font-weight: 400; }
.mods { display: flex; gap: 8px; }
.mod { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 8px 0; border: 1px solid var(--faint); transition: all .12s; }
.mod b { display: block; font-weight: 400; font-size: 14px; letter-spacing: 0.08em; color: var(--ink); }
.mod span { font-size: 11px; color: var(--dim); letter-spacing: 0.12em; }
.mod.sel { border-color: var(--gold); background: rgba(255,196,107,0.12); box-shadow: 0 0 14px rgba(255,196,107,0.25); }
.mod.sel span { color: var(--gold); }
.mod.locked { opacity: 0.45; }
.mod.hover, .mod:hover { border-color: rgba(255,255,255,0.3); }
.primary.disabled { background: rgba(255,255,255,0.12); color: var(--dim); box-shadow: none; }

/* ---------- calibration extras ---------- */
.calib-intro { color: var(--ink); font-size: 17px; line-height: 1.5; margin: 10px 0 4px; }
.calib-panel .loading { font-style: normal; color: var(--gold); }
.calib-panel .loading.err { color: var(--coral); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 8px; }
.lg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dim); letter-spacing: 0.04em; }
.lg i { width: 14px; height: 14px; display: inline-block; }
.lg.crystal i { background: linear-gradient(135deg, #d9f6ff, #5fb8e8 50%, #1b3a6b); border: 1px solid #f4fdff; }
.lg.mine i { background: #ff2d55; border-radius: 50%; box-shadow: 0 0 8px #ff2d55; }
.lg.arc i { height: 4px; width: 18px; background: var(--mint); box-shadow: 0 0 8px var(--mint); border-radius: 2px; }
.lg.wall i { background: rgba(255,79,160,0.35); border: 1px solid #ff8ac4; }
.lg.chain i { width: 20px; height: 8px; background: repeating-linear-gradient(90deg, #ffd2b8 0 5px, transparent 5px 8px); }

/* ---------- HUD extras ---------- */
.hud-mods { margin-top: 6px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.surge { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.surge span { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); min-width: 44px; }
.surgebar { width: 120px; height: 4px; background: rgba(255,255,255,0.12); }
.surgebar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), #fff); transition: width .1s; }
.surge.on span { color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.surge.on .surgebar i { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.pop.link b { font-size: 18px; color: #ffd2b8; }
#walllayer { position: fixed; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(255,45,85,0.55); }

/* ---------- results extras ---------- */
.res-stars { margin-top: 10px; display: flex; gap: 8px; }
.res-stars i { width: 30px; height: 30px; background: rgba(255,255,255,0.12); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.res-stars i.on { background: var(--gold); animation: starIn .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes starIn { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }
.unlock { color: var(--mint); letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; margin: -6px 0 14px; }
.unlock div { margin-bottom: 4px; }
.unlock:empty { display: none; }
.stats { grid-template-columns: repeat(6, 1fr); }
.stats.extra b { font-size: 20px; color: var(--mint); }
.res-actions .primary { font-size: 18px; padding: 13px 0; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(3, 1fr); } .menu-body { height: auto; } }
.credit { margin-top: 14px; font-size: 11px; letter-spacing: 0.12em; color: var(--dim); }

/* ---------- Mimic family: the same badge and device hint bar in every Mimic game ---------- */
.mimic-badge { position: fixed; top: 14px; right: 16px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px;
  background: rgba(8, 10, 14, 0.66); border: 1px solid rgba(255, 255, 255, 0.16); color: #e9edf2; pointer-events: none; backdrop-filter: blur(6px);
  font: 600 12px/1 Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.mimic-badge b { font-weight: 700; color: #fff; padding-right: 9px; border-right: 1px solid rgba(255, 255, 255, 0.2); letter-spacing: 0.2em; }
.mimic-badge i { width: 8px; height: 8px; border-radius: 50%; background: #8a929c; flex: none; }
.mimic-badge.on i { background: #4ee6a8; box-shadow: 0 0 8px #4ee6a8; }
.mimic-badge.warn i { background: #ffb13b; box-shadow: 0 0 8px #ffb13b; }
.mimic-badge.warn span { color: #ffd38a; }
.mimic-badge.hidden, .mimic-hint.hidden { display: none; }
.mimic-hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 18px; padding: 8px 16px; border-radius: 999px;
  background: rgba(8, 10, 14, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); color: #c9d0d8; pointer-events: none; backdrop-filter: blur(6px);
  font: 500 13px/1 Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif; letter-spacing: 0.04em; white-space: nowrap; }
.mimic-hint span { display: flex; align-items: center; gap: 7px; }
.mimic-hint kbd { font: 700 11px/1 Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #0b0d10;
  background: #e9edf2; border-radius: 4px; padding: 4px 6px 3px; }
#hud:not(.hidden) ~ #mhint { bottom: 96px; }
.calib-panel h2 { white-space: nowrap; font-size: 34px; letter-spacing: 0.14em; }

/* ---------- fit: every screen inside one viewport, laptop screens under browser chrome included ---------- */
/* bottom padding keeps panels clear of the device hint bar */
.screen { gap: clamp(12px, 3svh, 28px); padding: clamp(14px, 4svh, 40px) 4vw calc(clamp(14px, 4svh, 40px) + 40px); }
.panel { padding: clamp(16px, 3.4svh, 28px) clamp(20px, 2.4vw, 32px); max-height: 100%; }
.brand.big .logo { font-size: clamp(46px, min(6.4vw, 12svh), 96px); }
.press { font-size: clamp(17px, 2.6svh, 22px); }
.pair { max-width: 640px; text-align: center; line-height: 1.5; }
.tag { margin-top: clamp(6px, 1.4svh, 12px); }

#menu { gap: clamp(8px, 1.8svh, 16px); padding-top: clamp(14px, 3svh, 32px); }
.brand.compact .logo { font-size: clamp(28px, 5.4svh, 44px); }
.tabs { display: grid; grid-template-columns: repeat(2, 230px); gap: 6px; }
.tab { text-align: center; padding: clamp(6px, 1.2svh, 9px) 0; }
.menu-body { flex: 0 1 600px; min-height: 0; width: min(1240px, 94vw); gap: clamp(16px, 2vw, 28px); }
/* songs: a grid whose rows share the height, so the whole list is always on screen */
.songs { flex: 1.6; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: clamp(5px, 1svh, 8px) 10px; padding: 2px; overflow: hidden; }
@media (min-height: 800px) { .songs[data-tab="free"] { grid-template-columns: 1fr; } }
.song { padding: 0 14px; min-height: 0; grid-template-columns: 40px 1fr auto; gap: 12px; overflow: hidden; }
.song .num { font-size: clamp(20px, 3.4svh, 28px); }
.song .t { font-size: clamp(16px, 2.6svh, 21px); white-space: nowrap; }
.song .m { font-size: 12px; white-space: nowrap; }
.song > div:nth-child(2) { min-width: 0; }
.song .bpm { font-size: 11px; letter-spacing: 0.08em; }
.song .bpm b { font-size: clamp(15px, 2.4svh, 20px); }
.song .stars i { width: 13px; height: 13px; }
.side { flex: 1; gap: clamp(6px, 1.3svh, 12px); min-width: 0; }
.d-title { font-size: clamp(20px, 3.4svh, 28px); }
.d-intro { font-size: 14px; line-height: 1.45; }
.primary { padding: clamp(9px, 1.9svh, 16px) 0; font-size: clamp(18px, 2.6svh, 22px); }
.diff { padding: clamp(7px, 1.4svh, 12px) 0; font-size: 16px; }
.best { min-height: 0; line-height: 1.45; }
.mod { padding: clamp(5px, 1svh, 8px) 0; }

.list-panel h2, .calib-panel h2 { font-size: clamp(26px, 5svh, 40px); }
.list-panel .nav:not(.primary) { padding: clamp(9px, 1.8svh, 13px) 0; }
.calib-panel { max-width: 600px; }
.calib-panel p { font-size: clamp(15px, 2.3svh, 18px); line-height: 1.5; margin: clamp(6px, 1.4svh, 16px) 0; }
.calib-intro { font-size: clamp(14px, 2.2svh, 17px); }
.phone-art { width: clamp(42px, 8svh, 70px); height: clamp(78px, 15svh, 130px); margin: clamp(30px, 8svh, 96px) auto clamp(8px, 2svh, 22px); border-radius: clamp(9px, 1.6svh, 14px); }
.phone-art .beam { top: clamp(-90px, -7svh, -30px); height: clamp(30px, 7svh, 90px); }
.credit { margin-top: clamp(6px, 1.4svh, 14px); }

.results-panel { width: min(760px, 92vw); }
.res-head { gap: clamp(14px, 2vw, 24px); }
.grade { font-size: clamp(60px, 12svh, 110px); min-width: 80px; }
.grade.fail { font-size: clamp(40px, 7svh, 64px); }
.res-title { font-size: clamp(22px, 3.6svh, 30px); }
.res-stars i { width: clamp(20px, 3.4svh, 30px); height: clamp(20px, 3.4svh, 30px); }
.res-score { margin: clamp(8px, 2.4svh, 22px) 0 clamp(8px, 2svh, 18px); font-size: clamp(38px, 7svh, 64px); }
.stats { gap: 10px; margin-bottom: clamp(10px, 2.4svh, 22px); }
.stats div { padding-top: clamp(5px, 1svh, 10px); }
.stats b { font-size: clamp(19px, 3svh, 26px); }
.stats span { font-size: 11px; letter-spacing: 0.1em; }
.stats.extra { grid-template-columns: repeat(5, 1fr); }
/* result buttons share one width whatever their labels */
.res-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }

@media (max-height: 799px) { .song .mood { display: none; } }
@media (max-height: 760px) {
  .d-intro, .d-song span { display: none; }
  .best .row:not(.cur) { display: none; }
  .tag { display: none; }
}
/* short screens: the top-right Mimic badge already says no phone is paired */
@media (max-height: 700px) { .notice { display: none !important; } }
@media (max-height: 640px) {
  .calib-intro { display: none; }
  .song .m { display: none; }
}

/* ---------- settings ---------- */
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setlink { all: unset; cursor: pointer; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.72); padding: 4px 0 4px 10px; border: 0 !important; box-shadow: none !important; }
.setlink.hover, .setlink:hover, .setlink.focus { color: var(--mint); }
.settings-panel { width: min(520px, 92vw); gap: clamp(6px, 1.4svh, 12px); }
.set-row { display: grid; grid-template-columns: 1fr 44px 92px 44px; align-items: center; gap: 8px; text-align: left; letter-spacing: 0.12em; text-transform: uppercase; font-size: 15px; color: var(--dim); }
.set-row b { text-align: center; color: var(--ink); font-weight: 400; letter-spacing: 0.1em; }
.list-panel .set-row .nav.step { padding: clamp(5px, 1.2svh, 9px) 0; font-size: 13px; letter-spacing: 0; color: var(--dim); }
.set-note { min-height: 1.4em; margin: 2px 0 0; color: var(--dim); }
/* ---------- polish: panels, motion, feedback ---------- */
/* the clipped corners get their own bevel line so the frame reads as one piece */
.panel { background:
  linear-gradient(225deg, transparent 14.8px, rgba(255,255,255,0.14) 14.8px 16.2px, transparent 16.2px) right top / 22px 22px no-repeat border-box,
  linear-gradient(45deg, transparent 14.8px, rgba(255,255,255,0.14) 14.8px 16.2px, transparent 16.2px) left bottom / 22px 22px no-repeat border-box,
  linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 40%),
  var(--panel); }

/* screens rise in; the menu's cards cascade on arrival only */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.screen:not(#menu) > * { animation: rise .34s cubic-bezier(.2, .8, .2, 1) both; }
.screen:not(#menu) > *:nth-child(2) { animation-delay: .06s; }
.screen:not(#menu) > *:nth-child(3) { animation-delay: .12s; }
.screen { animation: fadeIn .25s ease-out both; }
#menu.enter .brand, #menu.enter .tabs { animation: rise .4s cubic-bezier(.2, .8, .2, 1) both; }
#menu.enter .song { animation: rise .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms + 60ms); }
#menu.enter .side { animation: rise .45s cubic-bezier(.2, .8, .2, 1) .12s both; }

/* song cards: accent-coloured, lift on hover, the selection glows in its song's colour */
.song { position: relative; transition: transform .16s cubic-bezier(.2, .8, .2, 1), border-color .16s, background .16s, box-shadow .16s; }
.song::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--coral)); opacity: 0; transform: scaleY(0.3); transition: opacity .16s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.song.hover, .song:hover { transform: translateX(3px); background: linear-gradient(90deg, rgba(255,255,255,0.05), var(--panel) 70%); }
.song.hover::after, .song:hover::after { opacity: 0.55; transform: scaleY(0.6); }
.song.sel { border-left-color: transparent; border-color: color-mix(in srgb, var(--accent, var(--coral)) 45%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, var(--coral)) 22%, transparent), var(--panel) 75%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent, var(--coral)) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--coral)) 18%, transparent); }
.song.sel::after { opacity: 1; transform: none; box-shadow: 0 0 12px var(--accent, var(--coral)); }
.song.sel .num { color: var(--accent, var(--coral)); text-shadow: 0 0 14px color-mix(in srgb, var(--accent, var(--coral)) 60%, transparent); }
.song.sel .t { color: #fff; }
.song.locked.hover, .song.locked:hover { transform: none; }

/* detail panel: the stage's colour on top, its number as a watermark in the free space */
#menu .side { border-top: 2px solid var(--accent, var(--coral)); }
#menu .side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--coral)) 16%, transparent), transparent); }
.d-num { position: absolute; right: 18px; bottom: 66px; font-size: clamp(70px, 17svh, 170px); font-weight: 700; line-height: 0.8; letter-spacing: -0.02em; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent, var(--coral)) 34%, transparent); }
#detail { position: static; }
#menu .side > *:not(#detail) { position: relative; z-index: 1; }
#detail > *:not(.d-num) { position: relative; z-index: 1; }
.d-title { color: #fff; }
.primary { position: relative; overflow: hidden; }
.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); animation: sheen 3.2s ease-in-out infinite; pointer-events: none; }
.primary.disabled::after { display: none; }
@keyframes sheen { 0%, 62% { left: -40%; } 100% { left: 130%; } }
.tab { transition: color .14s, border-color .14s; }
.mod, .diff { transition: border-color .14s, background .14s, box-shadow .14s, transform .14s; }
.mod.hover, .mod:hover, .diff.hover, .diff:hover { transform: translateY(-1px); }

/* calibration takes the song's colour */
.calib-song { color: var(--accent, var(--gold)); }
.phone-art .beam { animation: beam 1.2s ease-in-out infinite; transform-origin: bottom; }
@keyframes beam { 0%, 100% { opacity: 0.55; transform: scaleY(0.85); } 50% { opacity: 1; transform: scaleY(1); } }

/* list buttons */
.list-panel .nav:not(.primary), .res-actions .nav:not(.primary) { transition: border-color .14s, color .14s, background .14s, box-shadow .14s; }
.nav.focus:not(.primary), .nav.hover:not(.primary) { background: rgba(111,245,210,0.07); }

/* ---------- HUD feedback ---------- */
.score { text-shadow: 0 0 18px rgba(0,0,0,0.6); }
.mult span { font-weight: 700; display: inline-block; }
.mult.up span { animation: multUp .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes multUp { 0% { transform: scale(1.9); color: #fff; text-shadow: 0 0 24px var(--gold); } 100% { transform: scale(1); } }
.combo { transition: transform .08s, color .3s, text-shadow .3s; }
.hud-right[data-tier="1"] .combo { color: var(--mint); text-shadow: 0 0 18px rgba(111,245,210,0.45); }
.hud-right[data-tier="2"] .combo { color: var(--gold); text-shadow: 0 0 24px rgba(255,196,107,0.6); }
.hud-right[data-tier="3"] .combo { color: #fff; text-shadow: 0 0 10px #ffd27a, 0 0 30px var(--coral), 0 0 60px rgba(255,106,61,0.5); }
.hud-right[data-tier="1"] .combo-label { color: var(--mint); }
.hud-right[data-tier="2"] .combo-label, .hud-right[data-tier="3"] .combo-label { color: var(--gold); }
.hud-right.tierup .combo { animation: tierUp .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tierUp { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.hud-right.broke::after { content: "combo lost"; position: absolute; right: 0; top: -26px; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--coral); white-space: nowrap; animation: lost 0.9s ease-out forwards; }
.hud-right.broke .combo { animation: shake .4s; }
@keyframes lost { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes shake { 0%, 100% { transform: none; color: var(--coral); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.progress { position: relative; height: 3px; border-radius: 2px; }
.progress i { background: linear-gradient(90deg, rgba(255,255,255,0.4), #fff); position: relative; border-radius: 2px; }
.progress i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px var(--mint); }

/* cut call-outs: colour says how good, at a glance */
.pop b { font-weight: 600; letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
.pop span { font-weight: 600; margin-top: 1px; text-shadow: 0 1px 8px rgba(0,0,0,0.9); }
.pop.top b { font-size: 36px; }
.pop.top span { color: var(--gold); }
.pop.sharp b { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.55), 0 2px 10px rgba(0,0,0,0.8); }
.pop.sharp span { color: #fff; }
.pop.clean span { color: var(--mint); }
.pop.ok b { font-size: 24px; color: #d9cfe8; }
.pop.ok span { color: #b8aacc; }
.pop.top, .pop.sharp { animation-name: popBig; }
@keyframes popBig { 0% { opacity: 0; transform: translate(-50%, -30%) scale(1.5); } 12% { opacity: 1; transform: translate(-50%, -60%) scale(0.96); } 22% { transform: translate(-50%, -70%) scale(1.04); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
#banner { top: 15%; text-shadow: 0 0 30px rgba(255,255,255,0.35), 0 2px 16px rgba(0,0,0,0.7); }

/* ---------- results ---------- */
.results-panel > * { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.results-panel > .res-score { animation-delay: .25s; }
.results-panel > .unlock { animation-delay: .35s; }
.results-panel > .stats { animation: none; }
.results-panel > .res-actions { animation-delay: .9s; }
.stats div { animation: rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.stats div:nth-child(1) { animation-delay: .45s; } .stats div:nth-child(2) { animation-delay: .5s; } .stats div:nth-child(3) { animation-delay: .55s; }
.stats div:nth-child(4) { animation-delay: .6s; } .stats div:nth-child(5) { animation-delay: .65s; } .stats div:nth-child(6) { animation-delay: .7s; }
.stats.extra div { animation-delay: .78s; }
.grade { animation: stamp .55s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.4); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }
.grade[data-g="S"] { color: #fff6dc; text-shadow: 0 0 18px #ffd27a, 0 0 44px rgba(255,196,107,0.8), 0 0 90px rgba(255,106,61,0.45); }
.grade[data-g="A"] { color: var(--mint); text-shadow: 0 0 36px rgba(111,245,210,0.55); }
.grade[data-g="B"] { color: #9fc7ff; text-shadow: 0 0 36px rgba(120,170,255,0.5); }
.grade[data-g="C"], .grade[data-g="D"] { color: #c9b8e0; text-shadow: 0 0 30px rgba(180,150,230,0.35); }
.res-score span { font-variant-numeric: tabular-nums; }
.res-score em.isbest { color: #160b10; background: var(--mint); padding: 5px 10px 4px; box-shadow: 0 0 18px rgba(111,245,210,0.5); animation: rise .4s cubic-bezier(.2, 1.4, .4, 1) 1.5s both; }
.results-panel { border-top: 2px solid var(--gold); }
.results-panel:has(.grade.fail) { border-top-color: var(--coral); }

@media (prefers-reduced-motion: reduce) {
  .screen, .screen > *, #menu.enter .song, #menu.enter .side, .results-panel > *, .stats div, .grade, .primary::after { animation: none !important; }
}
.logo .slash { animation: slashGlow 2.4s ease-in-out infinite; }
@keyframes slashGlow { 0%, 100% { box-shadow: 0 0 18px var(--mint), 0 0 4px #fff; } 50% { box-shadow: 0 0 30px var(--mint), 0 0 60px rgba(111,245,210,0.45), 0 0 6px #fff; } }
.brand.big .logo .l1, .brand.big .logo .l2 { animation: logoIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.brand.big .logo .l2 { animation-delay: .12s; }
@keyframes logoIn { from { opacity: 0; letter-spacing: 0.5em; filter: blur(6px); } to { opacity: 1; letter-spacing: 0.18em; filter: none; } }
/* call-outs belong to play: never bleed over pause or results */
body:not(.playing) #banner, body:not(.playing) #pops { visibility: hidden; }