@font-face { font-family: "RB Pixel"; src: url(assets/fonts/rb-pixel.ttf) format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "RB Pixel"; src: url(assets/fonts/rb-pixel-bold.ttf) format("truetype"); font-weight: 700; font-display: block; }

:root {
  color-scheme: dark;
  /* LCD */
  --lcd-hi: #b9d67c;
  --lcd: #a3c464;
  --lcd-lo: #8eb253;
  --ink: #1d2b12;         /* keep in sync with INK in src/render.js */
  --ink-dim: #3f5a1f;
  /* play area */
  --night: #0a1308;
  --night-2: #0f1c0c;
  --glow: #c9ff5a;
  --green: #9fd067;
  /* room */
  --room: #0b0e0c;
  --fs: 20px;              /* LCD text: 2 CSS px per font pixel (crisp) */
  --u: 2px;                /* one LCD pixel */
  --font: "RB Pixel", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.3, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
textarea, input[type=text], input[type=password] { -webkit-user-select: text; user-select: text; }
body { background: radial-gradient(ellipse at 50% 40%, #1a2416 0%, var(--room) 70%); color: var(--ink);
  font-family: var(--font); font-size: var(--fs); -webkit-font-smoothing: none; font-smooth: never; }
button { font: inherit; color: inherit; }

/* ---------- play area: the 8-bit canvas lives on the LCD ---------- */
#stage { display: block; margin: 0 auto; image-rendering: pixelated; touch-action: none; }

/* ---------- the frame: a Nokia 3410-ish body around the LCD that runs off the bottom of the window (so the viewport cuts it
   and the two soft keys). layout() zeroes --bz/--tp and drops .framed on small screens so the LCD is fullscreen ---------- */
#phone { position: fixed; z-index: 3; left: 0; top: 0; width: 100vw; height: 100vh; --bz: 0px; --tp: 0px; --bb: 0px; --lh: 100vh;
  background: linear-gradient(90deg, #1a2032, #2e3850 12%, #323c55 50%, #29324a 90%, #171c29);
  border-radius: calc(var(--bz) * 3.2) calc(var(--bz) * 3.2) 0 0 / calc(var(--bz) * 3.6) calc(var(--bz) * 3.6) 0 0;
  box-shadow: 0 calc(var(--bz) * .6) calc(var(--bz) * 2) #0008, inset 0 0 0 calc(var(--bz) / 9) #0006;
  transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .3s; }
#phone.no-anim { transition: none; }
#phone::before { content: ""; position: absolute; left: 50%; top: calc(var(--tp) * .38); width: calc(var(--tp) * 2); height: calc(var(--tp) * .2);
  transform: translateX(-50%); border-radius: 99px; background: #0a0d16; box-shadow: inset 0 1px 2px #000a, 0 1px 0 #fff2; }
/* the two soft keys under the LCD: only their tops show, the window edge cuts them off */
.navkey { position: absolute; top: calc(var(--tp) + var(--lh) + var(--bz) * .8); width: 30%; height: calc(var(--bz) * 4); padding: 0; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-radius: 99px / 70%; background: linear-gradient(180deg, #4a5878, #2a3350 55%, #1b2238);
  box-shadow: inset 0 1px 0 #fff3, 0 2px 4px #0008; }
.navkey:active { filter: brightness(.7); }
.navkey.l { left: calc(var(--bz) * 1.2); transform: rotate(-4deg); }
.navkey.r { right: calc(var(--bz) * 1.2); transform: rotate(4deg); }
#phone:not(.framed)::before, #phone:not(.framed) .navkey { display: none; }

/* ---------- LCD ---------- */
.lcd { position: absolute; left: var(--bz); top: var(--tp); right: var(--bz); bottom: var(--bb); border-radius: calc(var(--bz) * .6);
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink); line-height: 1.2; isolation: isolate;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(ellipse at 40% 25%, var(--lcd-hi), var(--lcd) 55%, var(--lcd-lo));
  box-shadow: inset 0 0 0 2px #0004, inset 0 6px 16px #0005; }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, #0000 0 calc(var(--u) - 0.5px), #2a3a1a10 calc(var(--u) - 0.5px) var(--u)),
              repeating-linear-gradient(90deg, #0000 0 calc(var(--u) - 0.5px), #2a3a1a10 calc(var(--u) - 0.5px) var(--u)); }

.statusbar { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 4px; min-height: 34px; }
/* the title (with the picker's ◄ ► right beside it) sits in the middle; signal and battery take the two ends */
.st-title { flex: 0 1 auto; min-width: 0; text-align: center; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-signal { margin-right: auto; }
#st-battery { margin-left: auto; }
.screens { position: relative; flex: 1; min-height: 0; container-type: inline-size; }
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 6px;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.screen[hidden], .menu-only[hidden], [hidden] { display: none !important; }
/* Screens that read swipes (onSwipe): the browser must not claim the drag, or it cancels the pointer before pointerup. */
#menu, #stats, #tutorial { touch-action: none; }
#message, #select, #settings, #results { touch-action: pan-y; }

.softbar { display: flex; align-items: stretch; border-top: var(--u) solid var(--ink); margin: 0 8px 6px; }
.softbar button { flex: 1; background: none; border: 0; padding: 4px 4px 2px; font-weight: 700; cursor: pointer; text-align: left; min-height: 30px; }
.softbar button + button { text-align: right; border-left: var(--u) solid var(--ink); }
.softbar button:empty { visibility: hidden; }
.softbar button:active { background: var(--ink); color: var(--lcd); }
.softbar.solo button:first-child { text-align: center; }
.softbar button:empty + button { border-left-color: transparent; }
.softbar.solo button + button { display: none; }

.spr { display: inline-block; vertical-align: middle; background: currentColor; flex: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

h2 { margin: 2px 0 6px; font-size: var(--fs); font-weight: 700; }
.sub { margin: 0 0 6px; }
.lbl { display: block; color: var(--ink-dim); margin: 8px 0 2px; }
.hint { color: var(--ink-dim); margin: 4px 0; }
#glyphs:not([hidden]), #sounds:not([hidden]) { display: flex; flex-direction: column; overflow-y: hidden; }
#gl-body, #snd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 4px; scroll-padding: 6px; }
#gl-hint, #snd-hint { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; margin-bottom: 8px; }
.gl-cell { background: transparent; border: var(--u) solid var(--ink-dim); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; min-width: 0; }
.gl-ch { display: inline-flex; gap: 6px; }
.snd-cell { font: inherit; color: inherit; min-height: 2.4em; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
#snd-body .gl-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
/* the focused cell is marked by a frame drawn outside it, so the icon itself is never covered */
.gl-cell { position: relative; overflow: visible; }
#glyphs .gl-cell:focus, #glyphs .menu > .gl-cell:focus, #sounds .gl-cell:focus { background: transparent; color: inherit; outline: none; animation: none; }
.gl-cell:focus::after { content: ""; position: absolute; inset: calc(var(--u) * -3); border: calc(var(--u) * 2) solid var(--ink); pointer-events: none; }
#m-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center { text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
p { margin: 6px 0; }
b { font-weight: 700; }

/* Nokia list: the focused item is drawn inverted */
.menu { display: flex; flex-direction: column; margin: 2px 0; }
.menu > button, .menu > .item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left;
  background: none; border: 0; padding: 3px 6px; min-height: 30px; cursor: pointer; color: var(--ink); border-radius: 0; }
.menu > .item { cursor: default; }
.menu > button:hover, .menu > .item:hover { box-shadow: inset 0 0 0 var(--u) var(--ink); }
.menu > button:focus, .menu > .item:focus-within, .menu > .hl { background: var(--ink); color: var(--lcd); outline: none; }
.menu > .hl input[type=checkbox]:checked { box-shadow: inset 0 0 0 3px var(--ink); }
.menu > button:disabled, .menu > button[aria-disabled] { opacity: .45; cursor: default; }
.menu > button:disabled:focus, .menu > button[aria-disabled]:focus { opacity: .7; }
.item input[type=range] { flex-basis: 100%; }
.item b, .item span { margin-left: auto; }
#pf-name-row { flex-wrap: nowrap; }
#pf-name-row span { margin-left: 0; }
#pf-name-row input { flex: 1; min-width: 0; box-sizing: border-box; background: none; border: var(--u) solid currentColor; color: inherit; font: inherit; padding: 2px 4px; }
#pf-name-row button { flex: none; background: none; border: var(--u) solid currentColor; color: inherit; font: inherit; padding: 1px 8px; cursor: pointer; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 2px 0 4px; background: transparent;
  color: inherit; cursor: pointer; --seg: repeating-linear-gradient(90deg, #000 0 6px, #0000 6px 8px); }
input[type=range]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
input[type=range]::-webkit-slider-runnable-track { height: 14px; -webkit-mask: var(--seg); mask: var(--seg);
  background: linear-gradient(90deg, currentColor var(--p, 50%), #0003 var(--p, 50%));
  background: linear-gradient(90deg, currentColor var(--p, 50%), color-mix(in srgb, currentColor 22%, transparent) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 14px; mask: var(--seg);
  background: linear-gradient(90deg, currentColor var(--p, 50%), #0003 var(--p, 50%));
  background: linear-gradient(90deg, currentColor var(--p, 50%), color-mix(in srgb, currentColor 22%, transparent) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 14px; background: transparent; }
input[type=range]::-moz-range-thumb { width: 0; height: 0; border: 0; background: transparent; }
input[type=range]:disabled { opacity: .4; }
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; border: var(--u) solid currentColor; color: inherit; /* not the UA's FieldText: white under color-scheme: dark in Chromium */
  background: transparent; flex: none; cursor: pointer; }
input[type=checkbox]:checked { background: currentColor; box-shadow: inset 0 0 0 3px var(--lcd); }
.menu > .item:focus-within input[type=checkbox]:checked { box-shadow: inset 0 0 0 3px var(--ink); }
input[type=checkbox]:focus { outline: none; }

textarea { width: 100%; background: #0000; color: var(--ink); border: var(--u) solid var(--ink); border-radius: 0; padding: 6px;
  font: inherit; resize: none; min-height: 112px; }
textarea:focus { outline: none; box-shadow: inset 0 0 0 var(--u) var(--ink); }
textarea::placeholder { color: var(--ink-dim); }
#status { word-break: break-word; }
#status { min-height: 1.2em; margin: 4px 0; }
#status.err { font-weight: 700; }

/* ---------- title / boot ---------- */
.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
#title { justify-content: flex-end; padding-bottom: 4%; }
.loading { display: flex; align-items: center; justify-content: center; }
.ld-bars { display: flex; gap: calc(var(--u) * 2); }
.ld-bars i { width: calc(var(--u) * 3); height: calc(var(--u) * 6); background: var(--ink); opacity: .15;
  animation: ld-wave 1s steps(2) infinite; animation-delay: calc(var(--n, 0) * .1s); }
.ld-bars i:nth-child(2) { --n: 1; } .ld-bars i:nth-child(3) { --n: 2; } .ld-bars i:nth-child(4) { --n: 3; }
.ld-bars i:nth-child(5) { --n: 4; } .ld-bars i:nth-child(6) { --n: 5; } .ld-bars i:nth-child(7) { --n: 6; } .ld-bars i:nth-child(8) { --n: 7; }
@keyframes ld-wave { 50% { opacity: 1; height: calc(var(--u) * 10); } }
.boot-version { font-size: calc(var(--fs) * .7); opacity: .6; margin: 0; }
.boot-build { margin-top: 2px; opacity: .45; }
.boot-version a { color: inherit; text-decoration: none; pointer-events: auto; }
.boot-version a:hover, .boot-version a:focus-visible { text-decoration: underline; opacity: 1; }
.hint-tap { display: none; }
@media (pointer: coarse) { .hint-key { display: none; } .hint-tap { display: inline; } } /* touch screens: "Tap" instead of "Press any key" */
.blink { font-weight: 700; animation: blink 1.1s steps(1) infinite; }
#title.wait .blink { visibility: hidden; animation: none; }
@keyframes blink { 50% { visibility: hidden; } }
@keyframes hello-in { from { clip-path: inset(0 100% 0 0); } }
.st-title.hello { animation: hello-in .5s steps(var(--chars, 10)) both; }
#welcome { justify-content: flex-end; padding-bottom: 14%; }
#welcome-msg { margin: 0; padding: 0 6px; background: var(--lcd); }
#welcome-msg.ok { animation: none; }

/* ---------- main menu: a vertical carousel, one big item at a time (3310) ---------- */
.mm { display: flex; flex-direction: column; overflow: hidden; padding-right: calc(var(--u) * 10); }
/* backdrop: the item's pattern tile, faint, drifting one tile pixel per step (main.js sets --tile) */
.mm-bg { position: absolute; inset: 0; pointer-events: none; background: var(--ink); opacity: .08;
  -webkit-mask-image: var(--tile); mask-image: var(--tile); -webkit-mask-size: calc(var(--u) * 32); mask-size: calc(var(--u) * 32);
  -webkit-mask-repeat: repeat; mask-repeat: repeat; animation: mm-drift 8s steps(16) infinite; }
.mm-bg.swap { animation: mm-drift 8s steps(16) infinite, mm-bg-in .2s steps(2); }
@keyframes mm-drift { from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: calc(var(--u) * 32) calc(var(--u) * 32); mask-position: calc(var(--u) * 32) calc(var(--u) * 32); } }
@keyframes mm-bg-in { from { opacity: 0; } }
.mm-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.mm-hero { flex: 1; min-height: 0; align-self: stretch; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }
.mm-title { font-weight: 700; font-size: calc(var(--fs) * 2); line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mm-title.sm { font-size: calc(var(--fs) * 1.5); }
.mm-title.type { animation: hello-in .24s steps(var(--chars, 8)) both; }
.mm-icon.pop { animation: mm-pop .21s steps(1, end); }
@keyframes mm-pop { 0% { scale: .7; } 34% { scale: 1.12; } 67% { scale: 1.04; } 100% { scale: 1; } }
.mm-hint { min-height: 1.2em; font-weight: 700; }
/* the items before and after: dithered, half size, cut off by the LCD edge (--pk is their icon height) */
.mm-peek { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mm-peek span { color: var(--ink-dim); white-space: nowrap; }
.mm-peek.prev { margin-top: calc(var(--pk, 0px) * -.4); }
.mm-peek.next { margin-bottom: calc(var(--pk, 0px) * -.4); }
.mm-peek:hover span { color: var(--ink); }
.mm.short .mm-peek .spr { display: none; }
.mm.short .mm-peek { margin: 0; }
/* scrolling: the strip arrives from one slot away (--slot) in chunky steps */
.mm-body.from-below { animation: mm-from-below .18s steps(4, end); }
.mm-body.from-above { animation: mm-from-above .18s steps(4, end); }
@keyframes mm-from-below { from { transform: translateY(var(--slot, 40px)); } }
@keyframes mm-from-above { from { transform: translateY(calc(var(--slot, 40px) * -1)); } }
/* Select: the next screen opens out of the middle */
.screen.launch-in { animation: mm-launch .18s steps(4, end); }
@keyframes mm-launch { from { clip-path: inset(36% 36%); } to { clip-path: inset(0); } }
/* scrollbar: item number on top, a rail with a tick per item, and a bracket thumb that steps between them (--n items, --i current) */
.mm-scroll { position: absolute; z-index: 1; right: calc(var(--u) * 2); top: 0; bottom: calc(var(--u) * 3); width: calc(var(--u) * 8);
  display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.mm-scroll b { line-height: 1.1; }
.mm-scroll b.flip { animation: mm-flip .12s steps(1, end); }
@keyframes mm-flip { from { visibility: hidden; } }
.mm-rail { position: relative; flex: 1; width: var(--u); margin-right: calc(var(--u) * 2); background: var(--ink); }
.mm-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--u) * -1); width: calc(var(--u) * 3);
  background: repeating-linear-gradient(180deg, var(--ink) 0 var(--u), transparent var(--u) calc(100% / var(--n, 6))); }
.mm-rail i { position: absolute; left: calc(var(--u) * -3); width: calc(var(--u) * 3); height: calc(100% / var(--n, 6)); top: calc(var(--i, 0) * 100% / var(--n, 6));
  border: var(--u) solid var(--ink); border-right: 0; background: var(--lcd); transition: top .15s steps(3, end); }

/* ---------- stats ---------- */
#stats { display: flex; flex-direction: column; }
.st-tabs .arrow { cursor: pointer; }
.stat-page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.stat-page > * { flex: none; }
.stat-page > :first-child { margin-top: auto; }
.stat-page > :last-child { margin-bottom: auto; }
.stat-page table { margin: 4px auto; }
.st-big { font-size: calc(var(--fs) * 2); font-weight: 700; text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-fav, .st-row { display: flex; gap: 6px; min-width: 0; white-space: nowrap; }
.st-fav { justify-content: center; }
.st-fav .ic, .st-fav .n, .st-row .rk, .st-row .n { flex: none; }
.st-row .st-name { flex: 1; }
.st-row .n { margin-left: auto; }
.st-row .rk { min-width: 3ch; text-align: right; }
.st-top { display: flex; flex-direction: column; gap: 3px; }
.st-name { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gbars { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 5); margin: 6px 0; }
.gbar { display: flex; flex-direction: column; align-items: center; }
.gbar i { display: block; width: calc(var(--u) * 8); height: calc(var(--h) * var(--u) * 28); min-height: var(--u); background: var(--ink);
  transform-origin: bottom; animation: bar-grow .4s steps(4) both; }
.gbar b { margin-top: var(--u); border-top: var(--u) solid var(--ink); padding: 0 calc(var(--u) * 2); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.mixbar { display: flex; height: calc(var(--u) * 7); border: var(--u) solid var(--ink); margin: 4px 0; animation: mix-in .4s steps(6) both; }
@keyframes mix-in { from { clip-path: inset(0 100% 0 0); } }
.mixbar i { display: block; height: 100%; }
.sw { display: inline-block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border: var(--u) solid var(--ink); margin-right: 6px; vertical-align: -2px; }
/* 1-bit fills: solid, checker dither, sparse dots, empty */
.mixbar .perfect, .sw.perfect { background: var(--ink); }
.mixbar .great, .sw.great { background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / calc(var(--u) * 2) calc(var(--u) * 2); }
.mixbar .good, .sw.good { background: repeating-linear-gradient(180deg, var(--ink) 0 var(--u), transparent 0 calc(var(--u) * 2)); } /* horizontal lines vs. great's checker */
.mixbar .miss { background: transparent; }

/* ---------- messages ---------- */
.inbox .msg-row { flex-wrap: nowrap; }
.msg-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row.new .t { font-weight: 700; }
.msg-row .v { flex: none; }
.sms { display: flex; flex-direction: column; overflow: hidden; }
.sms-head { border-bottom: var(--u) solid var(--ink); padding-bottom: 2px; margin-bottom: 4px; }
.sms-head .hint { margin: 0; }
.sms-body { flex: 1; min-height: 0; overflow-y: auto; white-space: pre-line; outline: none;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }

/* ---------- profile ---------- */
.pf-card { display: flex; align-items: center; gap: 10px; border: var(--u) solid var(--ink); padding: 6px 8px; margin: 6px 0; }

/* ---------- song select ---------- */
#select { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.sel-head { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sel-head { justify-content: space-between; }
.sel-head .sel-cat { flex: 1 1 auto; min-width: 0; }
.sel-head .chip { display: inline-flex; align-items: center; gap: 6px; flex: none; background: none; border: 0; padding: 4px 6px; cursor: pointer; color: inherit; text-decoration: underline dotted; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar .arrow { flex: none; font: inherit; color: inherit; background: none; border: 0; padding: 0 4px; cursor: pointer; }
.sel-sub .chip { background: none; border: 0; padding: 4px 6px; cursor: pointer; color: inherit; text-decoration: underline dotted; }
.seg { display: flex; gap: 2px; }
.seg button { background: none; border: var(--u) solid transparent; padding: 1px 6px; cursor: pointer; min-height: 0; }
.seg button.sel { background: var(--ink); color: var(--lcd); font-weight: 700; }
.seg button.has-fc::after, .seg button.has-ap::after { content: "✓"; margin-left: 2px; }
.seg button.has-ap::after { content: "★"; }
.sel-cat { font-weight: 700; display: flex; justify-content: center; min-width: 0; white-space: nowrap; }
/* Settings tabs: a pager like Stats (only the current tab shows, between arrows) so any label fits the LCD */
#set-tabs { margin: 0 0 2px; }
#set-tabs button, #r-tabs button { display: none; padding: 0 4px; }
#set-tabs button.sel, #r-tabs button.sel { display: block; min-height: 0; }
#set-tabs button:focus, #r-tabs button:focus { outline: none; box-shadow: inset 0 0 0 var(--u) var(--ink); }
#set-tabs .arrow, #r-tabs .arrow { cursor: pointer; }
#set-tabs .arrow.off, #r-tabs .arrow.off { opacity: .35; cursor: default; }
.dp-tabs { display: flex; justify-content: center; gap: 6px; margin: 2px 0 0; }
.dp-tabs .sel { background: var(--ink); color: var(--lcd); font-weight: 700; padding: 0 4px; }
.dp-line, .ln { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dp-line { flex: 1; }
.dp-panel { min-height: 3.2em; }
.sel-detail .dp-panel { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.vscroll { animation: vmq var(--dur, 4s) ease-in-out infinite alternate; }
@keyframes vmq { 0%, 15% { transform: translateY(0); } 85%, 100% { transform: translateY(var(--dy)); } }
.sel-detail .top { margin: 0; }
.dp-seg { justify-content: center; margin: 2px 0; }
.sel-sub { display: flex; justify-content: center; align-items: center; color: var(--ink-dim); margin: 2px 0 4px; white-space: nowrap; overflow: hidden; }
.song-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.song-list { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; border-top: var(--u) solid var(--ink); border-bottom: var(--u) solid var(--ink);
  scrollbar-width: none; }
.song-list::-webkit-scrollbar { display: none; }
/* Own scroll thumb: the native bar is too faint on the LCD. */
.sel-thumb { position: absolute; right: 0; width: calc(var(--u) * 2); background: var(--ink); pointer-events: none; margin-top: var(--u); }
.song-wrap.thumb .song-row { padding-right: calc(var(--u) * 5); }
/* A-Z strip: touch only, while the list is sorted by title. */
.sel-az { display: none; position: absolute; right: 0; top: var(--u); bottom: var(--u); width: calc(var(--fs) * 0.9); flex-direction: column; justify-content: space-between;
  align-items: center; touch-action: none; background: var(--lcd); border-left: var(--u) solid var(--ink); font-size: calc(var(--fs) * 0.8); line-height: 1; user-select: none; }
.sel-az span { pointer-events: none; }
@media (pointer: coarse) { .song-wrap.az .sel-az { display: flex; } .song-wrap.az .sel-thumb { display: none; } .song-wrap.az .song-row { padding-right: calc(var(--fs) * 1.1); } }
.sel-search { display: flex; align-items: center; gap: 4px; border-top: var(--u) solid var(--ink); padding: 2px 4px; }
.sel-search[hidden] { display: none; }
.sel-search input { flex: 1; min-width: 0; font: inherit; background: #0000; color: var(--ink); border: var(--u) solid var(--ink); border-radius: 0; padding: 2px 4px; }
.sel-search input:focus { outline: none; box-shadow: inset 0 0 0 var(--u) var(--ink); }
.sel-cat { cursor: pointer; }
.st-title.tap { cursor: pointer; }
/* Category hub */
#hub { display: flex; flex-direction: column; overflow: hidden; }
.hub-grid { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: none; }
.hub-card { display: flex; align-items: center; gap: 6px; min-height: 28px; flex: none; padding: 2px 6px; text-align: left; background: none; color: var(--ink);
  border: var(--u) solid var(--ink); cursor: pointer; min-width: 0; }
.hub-card .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-card .n { flex: none; color: var(--ink-dim); }
.hub-card.cur, .hub-card:focus { background: var(--ink); color: var(--lcd); outline: none; }
.hub-card.cur .n, .hub-card:focus .n { color: inherit; }
@media (pointer: coarse) { .hub-card { min-height: 48px; } }
.song-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 2px 6px;
  min-height: 28px; cursor: pointer; color: var(--ink); contain: layout style; content-visibility: auto; contain-intrinsic-block-size: auto 28px; }
.song-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-row .b { flex: none; font-weight: 700; }
.song-row .badge, .sel-info .badge, .sd-stats .badge { font-size: calc(var(--fs) * .6); padding: 0 2px; margin-left: 3px; vertical-align: middle; }
.song-row.cur { background: var(--ink); color: var(--lcd); }
.song-row.cur .spr.cat { cursor: pointer; }
.song-row:focus { outline: none; }
.song-row:hover:not(.cur) { box-shadow: inset 0 0 0 var(--u) var(--ink); }
.song-list .empty { margin: 12px; text-align: center; }
.sel-info { padding: 3px 2px 4px; min-height: 2.4em; }
/* Picker body: list (+ details beside it on wide LCDs; on narrow ones the details are a view of their own, via Select) */
.sel-main { flex: 1; min-height: 0; display: flex; }
.sel-left { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sel-detail { display: none; flex: none; flex-direction: column; width: 46%; min-height: 0; overflow: hidden; padding: 2px 8px 4px; border-left: var(--u) solid var(--ink); }
.sd-head { display: flex; align-items: center; gap: 8px; }
.sel-detail h2 { flex: 1; min-width: 0; margin: 2px 0 0; font-size: calc(var(--fs) * 1.4); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-fav { position: relative; line-height: 0; flex: none; background: none; border: 0; padding: 2px; cursor: pointer; color: inherit; opacity: .3; }
.sd-fav.on, .sd-fav.beat, .sd-fav.playing { opacity: 1; }
.sd-fav.playing > .spr { visibility: hidden; }
.sd-sub { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.sd-sub .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#select.detail .sel-left { display: none; }
#select.detail .sel-detail { display: flex; flex: 1; width: auto; border-left: 0; }
.sd-stars { flex: none; }
.sd-mods { position: relative; }
/* the modifier explanation: a bubble over the board that fades by itself (JS removes .show after the fade) */
.sd-hint { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; margin: 2px 0 0; padding: 3px 8px; background: var(--ink); color: var(--lcd); border-radius: 3px;
  white-space: normal; text-align: left; pointer-events: none; opacity: 0; }
.sd-hint.show { animation: hint-fade 4.5s ease-out forwards; }
@keyframes hint-fade { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sd-hint.show { animation: none; opacity: 1; } }
.sd-stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0 12px; margin: 4px 0; align-items: center; }
.sd-stats dt { color: var(--ink-dim); }
.sd-stats dd { margin: 0; font-weight: 700; }
.sd-modhead { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; border-top: var(--u) dotted var(--ink); padding-top: 4px; }
.sd-modhead .chip { background: none; border: 0; color: inherit; cursor: pointer; }
.sd-modhead .chip.on { font-weight: 700; text-decoration: underline; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.sd-chips button { flex: 1 0 17%; display: flex; flex-direction: column; align-items: center; background: none; color: inherit; border: var(--u) solid var(--ink); padding: 2px 0 1px; cursor: pointer; }
.sd-chips button b { line-height: 1.1; }
.sd-chips button span { font-size: calc(var(--fs) * .6); color: var(--ink-dim); }
.sd-chips button.on { background: var(--ink); color: var(--lcd); }
.sd-chips button.cur { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--lcd), 0 0 0 var(--u) var(--ink); }
.sd-chips button.on span { color: inherit; }
.sel-tabs { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; scroll-behavior: smooth; }
/* half-width spacers so the current tab can always sit in the middle while the others scroll around it */
.sel-tabs::before, .sel-tabs::after { content: ""; flex: 0 0 50%; }
.sel-tabs::-webkit-scrollbar { display: none; }
.sel-tabs button { background: none; border: 0; color: inherit; padding: 0 6px; cursor: pointer; flex: none; }
.sel-tabs button.sel { background: var(--ink); color: var(--lcd); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sel-tabs { scroll-behavior: auto; } }
@container (min-width: 800px) {
  .sel-detail { display: flex; }
  #select .sel-info { display: none; }
}
.sel-info > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-info .stars-bar { margin-right: 6px; }
.badge { display: inline-block; padding: 0 3px; margin-left: 4px; border: var(--u) solid currentColor; font-size: var(--fs); line-height: 1; }
.badge.mod { font-size: calc(var(--fs) - 1px); }
.badge.ap { background: var(--ink); color: var(--lcd); border-color: var(--ink); }
.song-row.cur .badge.ap { background: var(--lcd); color: var(--ink); border-color: var(--lcd); }

/* stars: 5 glyphs, the "on" layer clipped to the rating */
.stars { margin: 4px 0; }
.stars-bar { position: relative; display: inline-block; white-space: nowrap; line-height: 1; vertical-align: middle; }
.stars-bar .off { color: color-mix(in srgb, currentColor 28%, transparent); }
.stars-bar .on { position: absolute; left: 0; top: 0; overflow: hidden; }
.rating { font-weight: 700; display: inline-block; margin-left: 6px; }

/* ---------- details ---------- */
.cover { display: block; margin: 4px auto 6px; }
#dp-cover { margin: 0 auto 2px; }
.d-best { min-height: 1.2em; }
.top { margin: 0 0 6px; padding-left: 1.6em; }
.top li { margin: 0; height: calc(var(--fs) * 1.35); overflow: hidden; padding: 0 3px 0 calc(3px + var(--u)); } /* every row the same height; long ones run as a marquee */

/* ---------- now playing ---------- */
.np { padding: 0; overflow: hidden; }
/* Pause: a modal box over the dimmed playfield */
#pause { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--lcd) 72%, transparent); z-index: 4; }
#pause .menu { min-width: min(70%, calc(var(--fs) * 14)); padding: 10px; background: var(--lcd); border: calc(var(--u) * 2) solid var(--ink); box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--ink); }
.np-count { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: calc(var(--u) * 2); background: var(--lcd); border: var(--u) solid var(--ink); padding: calc(var(--u) * 3) calc(var(--u) * 6);
  pointer-events: none; white-space: nowrap; font-weight: 700; -webkit-font-smoothing: auto; font-smooth: auto; }
.np-count-n { font-size: calc(var(--u) * 24); line-height: 1; }

/* ---------- results ---------- */
#results { display: flex; flex-direction: column; overflow: hidden; }
.r-tabs { justify-content: center; margin: 2px 0; }
.r-pages { flex: 1; min-height: 0; overflow: hidden; }
.r-page { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; }
.r-page[hidden] { display: none; }
.r-page { overflow-y: auto; } /* safe centre: from the top once the world top 10 outgrows the screen */
.r-foot { margin: 2px 0 0; }
.menu.r-foot > button { padding-top: 0; padding-bottom: 0; min-height: 0; line-height: 1.35; }
.grade { font-size: calc(var(--fs) * 3); font-weight: 700; line-height: 1; }
.big { font-size: calc(var(--fs) * 1.5); font-weight: 700; }
.grade.stamp { animation: grade-stamp .3s steps(1) 1; }
@keyframes grade-stamp { 0% { transform: scale(2.4); } 25% { transform: scale(1.6); } 50% { transform: scale(0.85); } 75% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* menu focus: a two-step "blink-in" as the row inverts */
.menu > button:focus, .menu > .hl { animation: row-in .1s steps(1) 1; }
@keyframes row-in { 0% { background: transparent; color: var(--ink); } 50% { background: var(--ink); color: var(--lcd); } }
#st-signal.blip { animation: sig-blip .3s steps(1) 2; }
@keyframes sig-blip { 0% { visibility: hidden; } 50% { visibility: visible; } }
.banner { font-weight: 700; }
.banner.celebrate { position: relative; display: inline-block; animation: fc-pop .6s steps(6) 1; }
.banner.celebrate::before, .banner.celebrate::after { content: ""; position: absolute; top: 50%; width: var(--u); height: var(--u);
  background: var(--ink); animation: fc-sparkle .9s steps(5) 1 both; }
.banner.celebrate::before { left: 0;
  box-shadow: calc(var(--u) * 4) calc(var(--u) * -6) 0 var(--ink), calc(var(--u) * -4) calc(var(--u) * 5) 0 var(--ink),
              calc(var(--u) * 10) calc(var(--u) * 4) 0 var(--ink); }
.banner.celebrate::after { right: 0;
  box-shadow: calc(var(--u) * -4) calc(var(--u) * -5) 0 var(--ink), calc(var(--u) * 4) calc(var(--u) * 6) 0 var(--ink),
              calc(var(--u) * -10) calc(var(--u) * 3) 0 var(--ink); }
.banner.ap.celebrate::before, .banner.ap.celebrate::after { animation-iteration-count: 3; }
@keyframes fc-pop { 0% { transform: scale(.4); } 50% { transform: scale(1.3); } 70% { visibility: hidden; } 85% { visibility: visible; } 100% { transform: scale(1); } }
@keyframes fc-sparkle { 0% { transform: scale(0); opacity: 1; } 60% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.newbest { font-weight: 700; }
table { margin: 4px auto 6px; border-collapse: collapse; width: 100%; max-width: 360px; }
td { padding: 0 4px; }
td + td { text-align: right; font-weight: 700; }
.hist { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 40px; margin: 2px auto; }
.hist div { width: 12px; background: var(--ink-dim); min-height: 2px; }
.hist div.mid { background: var(--ink); }
.hist-label { text-align: center; margin-top: 6px; }

/* ---------- calibration ---------- */
.pad { margin: 8px auto; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  user-select: none; touch-action: none; --pulse: 0; border: calc(var(--u) * 2) solid var(--ink);
  background: color-mix(in srgb, var(--ink) calc(var(--pulse) * 70%), transparent);
  color: color-mix(in srgb, var(--lcd) calc(var(--pulse) * 100%), var(--ink)); cursor: pointer;
  transform: scale(calc(1 + var(--pulse) * 0.06)); }
.nudge { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 4px 0; }
.nudge button { background: none; border: var(--u) solid var(--ink); padding: 2px 10px; cursor: pointer; min-height: 30px; }
.nudge button:focus { background: var(--ink); color: var(--lcd); outline: none; }
@media (prefers-reduced-motion: reduce) { .pad { transform: none; } }

/* ---------- tutorial ---------- */
#tut-body p, #tp-body p { margin: 4px 0; }
#tut-body b, #tp-body b { font-weight: 700; }
.tut-demo { display: flex; justify-content: center; gap: 12px; margin: 4px 0 6px; color: var(--ink); }
.tut-demo svg { width: 38%; max-width: 110px; height: auto; border: 1px solid var(--ink-dim); }
/* progress row sits above the title and uses fixed-size boxes, so nothing shifts between lessons */
.tut-progress { display: flex; gap: calc(var(--u) * 3); height: calc(var(--u) * 5); margin: 2px 0 6px; }
.tut-progress i { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border: var(--u) solid var(--ink); box-sizing: border-box; }
.tut-progress i.done { background: var(--ink); }
.tut-progress i.cur { background: var(--ink); box-shadow: inset 0 0 0 var(--u) var(--lcd); }

/* ---------- pop-ups ---------- */
.toast { position: fixed; z-index: 20; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(90vw, 320px);
  background: var(--lcd); color: var(--ink); border: var(--u) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 12px; text-align: center; font-weight: 700; pointer-events: none; }
.toast.on-lcd { bottom: auto; transform: translate(-50%, -50%); }
/* Heart control animations (see playHeart in main.js), inside the element that holds the resting heart.
   Added: the heart beats three times. Removed: it beats once, then cracks into two halves and pixel shards (the .26s delay
   matches HEART_CRACK_MS). Only translate/scale/rotate/opacity are animated. */
.fx { position: absolute; left: 50%; top: 50%; color: var(--ink); line-height: 0; pointer-events: none; }
.fx > span, .fx > i { position: absolute; left: 0; top: 0; }
.fx .spr { translate: -50% -50%; }
.beat > .spr { animation: heart-beat3 .475s ease-out both; }
.fx-whole { animation: heart-beat1 .26s ease-out both; }
.fx-half { animation: .3s cubic-bezier(.3, 0, .8, .6) .26s forwards; opacity: 0; } /* forwards, not both: the delay must keep the base opacity 0 */
.fx-half.l { animation-name: half-l; }
.fx-half.r { animation-name: half-r; }
.fx-shard { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: currentColor; opacity: 0; animation: shard .25s steps(5) .26s forwards; animation-delay: calc(.26s + var(--n) * .01s); }
.gl-pop { display: inline-block; position: relative; line-height: 0; }
.gl-pop.playing > .spr { visibility: hidden; }
@keyframes heart-beat3 {
  0%, 18%, 43%, 70%, 100% { scale: 1; }
  8%, 33%, 58% { scale: 1.3; }
}
@keyframes heart-beat1 {
  0%, 60%, 100% { scale: 1; }
  25% { scale: 1.3; }
  80% { scale: 1.18; }
  98% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes half-l { 0% { opacity: 1; translate: 0 0; rotate: 0deg; } 100% { opacity: 0; translate: -16px 26px; rotate: -32deg; } }
@keyframes half-r { 0% { opacity: 1; translate: 0 0; rotate: 0deg; } 100% { opacity: 0; translate: 16px 30px; rotate: 38deg; } }
@keyframes shard { 0% { opacity: 1; translate: 0 0; rotate: 0deg; } 100% { opacity: 0; translate: var(--dx) calc(var(--dy) + 14px); rotate: var(--rot); } }
@media (prefers-reduced-motion: reduce) {
  .beat > .spr { animation: none; }
  .fx-half.l, .fx-half.r { animation: fx-fade .3s ease-out both; }
  .fx-whole, .fx-shard { display: none; }
}
@keyframes fx-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- keys legend (menus, wide screens) ---------- */
.legend { position: fixed; z-index: 2; top: 50%; transform: translateY(-50%); width: 260px; color: #9fb08c; font-size: var(--fs);
  line-height: 1.5; opacity: 0; visibility: hidden; transition: opacity .3s; }
body.legend-on .legend:not(.sel-keys) { opacity: .85; visibility: visible; }
.legend .lg-play, body:is([data-mode="play"], [data-mode="pause"]) .legend .lg-menu { display: none; }
body:is([data-mode="play"], [data-mode="pause"]) .legend .lg-play { display: block; }
.legend b { display: block; color: #c4d6a8; margin-bottom: 6px; }
.legend p { color: #6f8060; margin-top: 10px; }
.legend kbd { display: inline-block; min-width: 22px; text-align: center; border: var(--u) solid #6f8060; border-bottom-width: 4px;
  border-radius: 4px; padding: 0 4px; margin-right: 4px; font: inherit; color: #c4d6a8; }

body.selkeys-on.in-select .sel-keys { opacity: .85; visibility: visible; }

/* ---------- marquee for overlong titles ---------- */
.scrolls { text-overflow: clip; }
.mq { display: inline-block; vertical-align: top; }
.scrolls .mq { animation: mq var(--mq-dur, 2s) linear infinite alternate; }
@keyframes mq { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(calc(-1 * var(--mq-dist, 0px))); } }

/* ---------- gamepad focus ring for things outside lists ---------- */
.using-pad .nudge button:focus, textarea:focus-visible { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #phone { transition: none !important; }
  .blink, .ld-bars i { animation: none; }
  .scrolls { text-overflow: ellipsis; }
  .scrolls .mq, .vscroll { animation: none; }
  .banner.celebrate, .banner.celebrate::before, .banner.celebrate::after { animation: none; }
  .grade.stamp, .menu > button:focus, .menu > .hl, #st-signal.blip { animation: none; }
  .st-title.hello, .gbar i, .mixbar { animation: none; }
  .mm-bg, .mm-body.from-below, .mm-body.from-above, .mm-icon.pop, .mm-title.type, .mm-scroll b.flip, .screen.launch-in { animation: none; }
  .mm-rail i { transition: none; }
}

/* ---------- composer ---------- */
#comp-edit { outline: none; }
.comp-notes { display: flex; flex-wrap: wrap; gap: 2px 4px; min-height: 3.6em; margin: 4px 0; align-content: flex-start; }
.comp-notes span { padding: 0 3px; border: var(--u) solid transparent; }
.comp-notes span.cur { border-color: var(--ink); }
.comp-notes span.rest { color: var(--ink-dim); }
.comp-notes span.caret { padding: 0; border: 0; border-left: calc(var(--u) * 2) solid var(--ink); height: 1.1em; align-self: center; }
.comp-move { margin: 4px 0; }
.comp-move button { border-color: var(--ink); }
.comp-help { font-size: 0.8em; }
#comp-menu input[type=text] { width: 100%; box-sizing: border-box; background: none; border: var(--u) solid var(--ink); color: inherit; font: inherit; padding: 2px 4px; }
/* Same box for both cursor buttons regardless of glyph width in the pixel font. */
.comp-move button { box-sizing: border-box; width: 3em; min-width: 3em; height: 1.8em; padding: 0; text-align: center; line-height: 1; }

/* ---------- easter eggs: idle cameos + overlay (decorative, never interactive) ---------- */
.cameo { position: absolute; left: 0; top: 0; color: var(--ink); opacity: .5; pointer-events: none; image-rendering: pixelated; }
.lcd.flash { filter: invert(1); }
/* the sign-in intro paints the whole LCD, behind the status bar and the screens */
.welcome-fx { position: absolute; left: 0; top: 0; z-index: -1; color: var(--ink); pointer-events: none; image-rendering: pixelated; }
.gag { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; pointer-events: none; padding: 8px; }
.gag-title { font-weight: 700; }
/* wide LCDs: the IMEI / gag panels scale up with the screen */
@container (min-width: 800px) { .gag { font-size: calc(var(--fs) * 1.6); gap: .4em; } .gag-bar i { width: 18px; height: 26px; } }
.gag-text { white-space: pre-line; }
.gag-link { color: var(--ink); text-decoration: underline; }
.gag-art[hidden] { display: none; } /* .spr's inline-block would override [hidden] */
.gag-bar { display: flex; gap: 2px; }
.gag-bar:empty { display: none; }
.gag-bar i { width: 10px; height: 14px; border: var(--u) solid var(--ink); }
.gag-bar i.on { background: var(--ink); }

.cameo-debug { position: fixed; top: 8px; right: 8px; z-index: 30; display: flex; flex-direction: column; gap: 4px;
  padding: 8px; background: #000a; color: #fff; font: 12px/1.2 monospace; border-radius: 6px; }
.cameo-debug button { font: inherit; padding: 4px 8px; cursor: pointer; text-align: left; }
.net-debug { position: fixed; left: 4px; bottom: 4px; z-index: 9999; max-width: calc(100vw - 8px); margin: 0; padding: 4px 6px;
  font: 11px/1.3 ui-monospace, monospace; color: #9cf; background: rgba(0, 0, 0, .7); pointer-events: none;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.top li.gap { list-style: none; }
/* leaderboard rows: #rank, score, name (marquee), pills */
.top:has(.brow) { padding-left: 0; list-style: none; }
.top li.brow { display: flex; align-items: center; gap: .3em; list-style: none; text-align: left; }
.brow .rk { flex: none; width: 2.2em; font-weight: 700; }
.brow .sc { flex: none; min-width: 3.6em; }
.brow .nm { flex: 1; min-width: 0; }
.brow .pl { flex: none; width: 3.2em; } /* FC / mods: just wide enough for one pill, longer ones run as a marquee */
.brow .sc + .pl { flex: 1; width: auto; } /* local rows have no name column: the pills take the freed width */
.top li.brow.gap .rk { width: auto; }
.top li.cur { background: color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: inset 3px 0 0 var(--ink); font-weight: 700; }
.top .badge { margin: 0 0 0 3px; padding: 0 2px; font-size: calc(var(--fs) * .6); vertical-align: middle; }
.top .badge.mod { font-size: calc(var(--fs) * .6); }
.nm.dev { color: var(--ink); background: linear-gradient(90deg, var(--ink), var(--ink-dim), #5f7f2f, var(--ink-dim), var(--ink)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: dev-wave 3s steps(8) infinite; }
@keyframes dev-wave { to { background-position: -200% 0; } }
@supports not (background-clip: text) { .nm.dev { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; } }
@media (prefers-reduced-motion: reduce) { .nm.dev { animation: none; } }

/* progress bar (difficulty calculation) */
.bar { height: 8px; margin: 4px 0; border: var(--u) solid var(--ink); }
.bar > i { display: block; height: 100%; width: 0; background: var(--ink); }

/* ---------- touch ---------- */
.comp-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 4px 0; }
.comp-pad button { min-height: 32px; padding: 0; border: var(--u) solid var(--ink); background: none; }
.comp-pad button:active { background: var(--ink); color: var(--lcd); }
@media (pointer: coarse) { .comp-help.keys-only { display: none; } }
@media (pointer: coarse) { input[type=range] { height: 28px; } }

/* Larger touch targets (>= 44px) on coarse pointers */
@media (pointer: coarse) {
  .softbar button, .menu > button, .song-row, .comp-pad button, .nudge button { min-height: 44px; }
  .seg button { min-height: 44px; padding: 0 6px; }
  #set-tabs .arrow, #r-tabs .arrow { padding: 10px 14px; }
}

/* results: score chart, board */
.r-chartbox { position: relative; width: 100%; height: calc(var(--fs) * 5); flex: none; }
#r-chart { display: block; image-rendering: pixelated; }
.r-boardbox { flex: 1; min-height: 0; overflow: hidden; width: 100%; }
.r-page[data-page="3"] { align-items: stretch; }
/* Results on a wide LCD: nothing scrolls. Score | stats on top; the chart (and timing) and the one leaderboard share what is left. */
@container (min-width: 800px) {
  #r-tabs { display: none; }
  .r-pages { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; overflow: hidden; }
  .r-page { height: auto; min-height: 0; overflow: hidden; border: var(--u) solid var(--ink); border-radius: 4px; padding: 6px 8px; justify-content: center; }
  .r-page[data-page="0"] { grid-column: 1; grid-row: 1; }
  .r-page[data-page="1"] { grid-column: 2; grid-row: 1; }
  .r-page[data-page="2"] { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .r-page[data-page="3"] { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .r-page .grade { font-size: calc(var(--fs) * 3.5); }
  .r-page .big { font-size: calc(var(--fs) * 1.8); }
  .r-chartbox { flex: 1; height: auto; min-height: calc(var(--fs) * 3); }
  .menu.r-foot { flex-direction: row; gap: 8px; }
  .menu.r-foot > button { flex: 1; justify-content: center; text-align: center; border: var(--u) solid var(--ink); }
}

/* narrow details view: the sort / category rows belong to the list, and a vertical swipe changes the song */
#select.detail .sel-head, #select.detail .sel-sub, #select.detail .sel-search { display: none; }
#select.detail .sel-detail { touch-action: none; }

/* stats on a wide LCD: all six pages as panels, nothing scrolls by hand */
.stat-all { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-all[hidden] { display: none; }
.stat-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: var(--u) solid var(--ink); border-radius: 4px; padding: 4px 8px; }
.stat-panel h3 { margin: 0 0 2px; font-size: inherit; text-align: center; border-bottom: var(--u) dotted var(--ink); }
.stat-all .stat-page { overflow: hidden; }
.stat-all .st-scroll { flex: 1 1 0; min-height: 0; overflow: hidden; }
.stat-all .st-big { font-size: calc(var(--fs) * 1.5); }

/* text screens on a wide LCD: one step bigger (the --u2 / --fs2 pair is set by layout() in whole device pixels) */
@container (min-width: 800px) {
  #inbox, #message, #profile, #admin, #composer, #custom, #hub, #pause, #menu { --u: var(--u2); --fs: var(--fs2); font-size: var(--fs); }
}

/* settings on a wide LCD: every tab is a panel, two columns */
.set-h { display: none; }
@container (min-width: 800px) {
  #settings { display: flex; flex-direction: column; overflow: hidden; }
  .set-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(min-content, 1fr)); grid-auto-flow: column; gap: 8px; overflow-y: auto; scrollbar-width: none; }
  .set-panel { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; border: var(--u) solid var(--ink); border-radius: 4px; padding: 4px 8px; min-width: 0; }
  .set-panel .item.check { justify-content: flex-start; gap: 10px; }
  .set-panel .item.check span { margin-left: 0; }
  #settings > .menu { display: none; } /* the soft Back button does it */
  .set-panel[hidden] { display: none; }
  .set-h { display: block; margin: 0 0 2px; font-size: inherit; text-align: center; border-bottom: var(--u) dotted var(--ink); }
}

/* title screen: language toggle in the top right corner */
.title-lang { position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; background: none; border: 0; color: inherit; cursor: pointer; opacity: .75; font-size: calc(var(--fs) * .8); }
.title-lang:hover, .title-lang:focus-visible { opacity: 1; }
#set-lang { display: flex; align-items: center; gap: 8px; }
@container (min-width: 800px) {
  #tutprompt, #loginprompt { --u: var(--u3); --fs: var(--fs3); font-size: var(--fs); display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 0 5%; }
  #tutprompt[hidden], #loginprompt[hidden] { display: none; }
}
@container (min-width: 800px) {
  /* short menus and the lesson cards: the bigger step (5/3) so they don't sit in a corner of a big LCD */
  #tutorial, #mysongs, #songmenu, #calib { --u: var(--u3); --fs: var(--fs3); font-size: var(--fs); }
}
/* the gag / IMEI panel shows on the bare LCD (its own background), so what is under it is hidden instead of covered */
body.gag-on .screens > :not(#gag), body.gag-on .lcd > canvas { visibility: hidden; }