/* The menu pages: landing, home, song page, results and the rest to come. They are real scrolling DOM in #app,
   outside the 1280x720 stage (src/style.css), ported from the approved prototypes in prototypes/.
   Everything is scoped under #app so the stage screens keep their own sizes. The shared parts (sheet, plate, card, btn,
   tag, stamp, label, note, slip, board, bar, stars) come first; each page then adds only its own layout.
   Readability rule (owner, 2026-10-10): sentences are full ink at 17px or more; only small uppercase labels use ink at
   reduced opacity, never grey on paper; halftone dots stay faint under text; short text a player must act on sits on a
   clean .slip. Nothing is smaller than 14px. */

#app {
  --fade: rgba(11,11,10,.9);
  --fs-s: 14px; --fs-m: 17px; --fs-l: 19px;
  --l1: #27E0A0; --l2: #FF48B0; --l3: #FFE100; --l4: #7C5CFF; --l5: #FF8A1F;   /* lane inks, for board avatars */
  --off: 6px; --pad: clamp(18px, 4vw, 48px);
  --dots: radial-gradient(rgba(11,11,10,.1) 1px, transparent 1.5px) 0 0 / 6px 6px;
  --dots-light: radial-gradient(rgba(242,239,230,.13) 1px, transparent 1.5px) 0 0 / 6px 6px;
  position: fixed; inset: 0; z-index: 5; overflow-x: hidden; overflow-y: auto; -webkit-text-size-adjust: 100%;
  font: var(--fs-m)/1.55 var(--body); color: var(--tar); user-select: text;
  background-color: var(--tar);
  background-image: radial-gradient(rgba(232,228,218,.24) 1px, transparent 1.4px), radial-gradient(rgba(232,228,218,.15) .8px, transparent 1.2px), radial-gradient(rgba(232,228,218,.22) 1.3px, transparent 1.8px);
  background-size: 37px 41px, 23px 19px, 71px 53px; background-position: 0 0, 11px 7px, 5px 29px;
}
#app[hidden] { display: none; }
#app img, #app svg, #app canvas { display: block; max-width: 100%; }
#app button { font: inherit; color: inherit; border: 0; padding: 0; cursor: pointer; background: none; }
#app a { color: var(--tar); text-underline-offset: 3px; }
#app a:hover, #app a:focus { background: var(--acid); outline: none; }
#app :focus { outline: none; }
#app a[href], #app button, #app input, #app summary, #app [tabindex] { scroll-margin: 110px 0 90px; }
#app h1, #app h2, #app h3, #app p, #app ul, #app ol, #app dl, #app dd, #app figure { margin: 0; }
#app ul, #app ol { padding: 0; list-style: none; }
#app .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; position: relative; }
#app .only-phone { display: none; }
#app [hidden] { display: none !important; }

/* ---------- top strip: wordmark, four places, level and streak ---------- */
#app .top { position: sticky; top: 0; z-index: 50; background: var(--tar) var(--dots-light); box-shadow: 0 4px 0 var(--pink); }
#app .top .wrap { display: flex; align-items: center; gap: 22px; min-height: 66px; padding-top: 6px; padding-bottom: 6px; }
#app .brand { font: 34px/1 var(--head); letter-spacing: 2px; color: var(--ink); text-decoration: none; text-shadow: 3px 3px 0 var(--pink); white-space: nowrap; transform: rotate(-1.2deg); }
#app .brand:hover, #app .brand:focus { background: none; color: var(--acid); }
#app .top nav { display: flex; gap: 6px; margin-left: 10px; }
#app .top nav a { display: block; padding: 7px 18px 3px; font: 24px/1.15 var(--head); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); text-decoration: none; }
#app .top nav a:hover, #app .top nav a:focus { background: var(--hot); color: var(--ink); }
#app .top nav a[aria-current] { color: var(--tar); background: var(--acid) var(--dots); transform: rotate(-1.5deg); box-shadow: 4px 3px 0 var(--pink); }
#app .top .chips { margin-left: auto; display: flex; align-items: center; gap: 16px; }
#app .chip { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; padding: 4px 8px 2px; }
#app .chip:hover, #app .chip:focus { background: var(--hot); color: var(--ink); }
#app .chip b { font: 26px/1 var(--head); letter-spacing: 1px; font-weight: 400; }
#app .chip small { font-size: var(--fs-s); letter-spacing: 1px; line-height: 1.1; display: block; }
#app .chip .mini { display: block; width: 78px; height: 11px; border: 2px solid var(--ink); }
#app .chip .mini i { display: block; height: 100%; background: var(--acid); }
#app .chip.streak b { color: var(--acid); }
#app .chip .spark { width: 16px; height: 22px; background: var(--acid); clip-path: polygon(50% 0, 100% 62%, 78% 100%, 22% 100%, 0 62%, 22% 48%); }
#app .top.landing .wrap { min-height: 60px; }
#app .top.landing nav { margin-left: auto; }
#app .top.landing nav a.quiet { font-size: 20px; }

/* ---------- sheet: a torn photocopied page. src/sheet.js sets --clip and the tape ---------- */
#app .sheet { position: relative; isolation: isolate; padding: var(--pad); margin: 22px 0; }
#app .sheet::before, #app .sheet::after { content: ""; position: absolute; inset: -9px; z-index: -1; clip-path: var(--clip, none); pointer-events: none; }
#app .sheet::before {
  background:
    radial-gradient(ellipse 150px 70px at var(--s1x, 6%) var(--s1y, 94%), rgba(110,106,94,.2), transparent 70%),
    radial-gradient(ellipse 120px 90px at var(--s2x, 97%) var(--s2y, 12%), rgba(110,106,94,.18), transparent 70%),
    radial-gradient(ellipse 200px 60px at var(--s3x, 60%) var(--s3y, 100%), rgba(110,106,94,.16), transparent 70%),
    var(--dots), var(--paper);
}
#app .sheet::after {   /* the halftone dots swell toward one corner, as on the game's sheets */
  background: radial-gradient(rgba(11,11,10,.3) 1.7px, transparent 2.2px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse at var(--hx, 100%) var(--hy, 0%), #000, transparent 38%); mask-image: radial-gradient(ellipse at var(--hx, 100%) var(--hy, 0%), #000, transparent 38%);
  opacity: .28;
}
#app .sheet.dark { color: var(--ink); --fade: rgba(242,239,230,.92); }
#app .sheet.dark::before { background: radial-gradient(ellipse 160px 80px at var(--s1x, 8%) var(--s1y, 92%), rgba(242,239,230,.07), transparent 70%), var(--dots-light), var(--block); }
#app .sheet.dark::after { background: radial-gradient(rgba(242,239,230,.12) 1.7px, transparent 2.2px) 0 0 / 9px 9px; }
#app .sheet.dark a { color: var(--ink); }
#app .sheet.dark a:hover, #app .sheet.dark a:focus { color: var(--tar); }
#app .sheet.flat::before, #app .sheet.flat::after { clip-path: none; inset: 0; }
#app .sheet.tilt-l { transform: rotate(-.35deg); } #app .sheet.tilt-r { transform: rotate(.3deg); }
#app .sheet.enter { animation: pg-enter .22s ease-out both; }
@keyframes pg-enter { from { opacity: 0; transform: translateY(10px) rotate(-.8deg); } }

#app .tape { position: absolute; z-index: 5; width: 96px; height: 26px; background: linear-gradient(180deg, rgba(255,255,255,.2) 0 28%, transparent 28% 100%), var(--tape); box-shadow: 0 2px 4px rgba(0,0,0,.35); transform: rotate(var(--r, -8deg)); clip-path: polygon(0 0, 3% 28%, 0 52%, 3% 78%, 0 100%, 100% 100%, 97% 74%, 100% 48%, 97% 24%, 100% 0); pointer-events: none; }
#app .tape.tl { left: -26px; top: -6px; } #app .tape.tr { right: -26px; top: -6px; } #app .tape.bl { left: -26px; bottom: -6px; } #app .tape.br { right: -26px; bottom: -6px; }
#app .tape.tc { left: 42%; top: -14px; --r: 2deg; }

/* ---------- parts shared by every page ---------- */
#app .label { font-size: var(--fs-m); letter-spacing: 2px; color: var(--fade); text-transform: uppercase; }
#app .note { font-size: var(--fs-m); line-height: 1.5; letter-spacing: 0; color: inherit; font-family: var(--body); }
#app .prose { font: var(--fs-l)/1.6 var(--body); max-width: 62ch; }
#app .prose p + p { margin-top: 12px; }
#app .slip { background: var(--ink); color: var(--tar); border: 3px solid var(--tar); box-shadow: 4px 4px 0 var(--pink); padding: 12px 16px; }
#app .slip .note { color: var(--tar); }
#app .small-print { font-size: var(--fs-s); letter-spacing: 1px; color: inherit; text-transform: uppercase; }
#app .scrawl { display: inline-block; font: italic 30px/1.1 var(--mark); letter-spacing: 2px; color: var(--pink); text-shadow: 1px 1px 0 var(--tar); }
#app .sheet.dark .scrawl { text-shadow: none; }
#app .h-xl, #app .h-l, #app .h-m { font-family: var(--head); font-weight: 400; text-transform: uppercase; letter-spacing: 2px; line-height: 1; }
#app .h-xl { font-size: clamp(52px, 8.4vw, 112px); text-shadow: 5px 4px 0 var(--pink); }
#app .h-l { font-size: clamp(40px, 5.6vw, 72px); text-shadow: 4px 3px 0 var(--pink); line-height: 1.04; }
#app .h-m { font-size: clamp(28px, 3.2vw, 38px); text-shadow: 3px 2px 0 var(--pink); }
#app .sheet.dark .h-xl, #app .sheet.dark .h-l, #app .sheet.dark .h-m { text-shadow: 4px 3px 0 var(--hot); }
#app .h-s { font: 24px/1.1 var(--head); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
#app .sec-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }

#app .plate { background: var(--paper) var(--dots); border: 4px solid var(--tar); box-shadow: var(--off) var(--off) 0 var(--pink); padding: 18px 20px; position: relative; color: var(--tar); }
#app .card { position: relative; background: var(--sheet) var(--dots); border: 3px solid var(--tar); box-shadow: 4px 4px 0 var(--soft); padding: 14px; color: var(--tar); }
#app .card:focus-within, #app a.card:focus, #app button.card:focus, #app a.card:hover, #app button.card:hover { border-color: var(--pink); box-shadow: 6px 6px 0 var(--pink); background-color: var(--ink); }
#app a.card, #app button.card { display: block; text-decoration: none; color: var(--tar); text-align: left; width: 100%; }
#app a.card:focus, #app a.card:hover, #app button.card:focus, #app button.card:hover { transform: translate(-4px, -6px); background-color: var(--ink); }
#app .sheet.dark .card, #app .sheet.dark .plate { color: var(--tar); --fade: rgba(11,11,10,.9); }
#app .sheet.dark a.card, #app .sheet.dark a.card:hover, #app .sheet.dark a.card:focus { color: var(--tar); }

#app .btn { position: relative; display: inline-block; padding: 10px 32px 7px; font: 28px/1.2 var(--head); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--ink); background: var(--block) var(--dots-light); outline: none; cursor: pointer; white-space: nowrap; }
#app a.btn { color: var(--ink); }
#app a.btn:hover, #app a.btn:focus, #app .btn:hover, #app .btn:focus { background-color: var(--hot); color: var(--ink); }
#app .btn.primary:focus { background-color: var(--block); }
#app .btn.primary:hover { background-color: var(--hot); }
#app .btn.sm { font-size: 22px; padding: 7px 20px 4px; }
#app .btn.big { font-size: clamp(40px, 6vw, 60px); padding: 14px clamp(30px, 6vw, 76px) 10px; }
#app .btn.huge { font-size: clamp(54px, 8vw, 100px); padding: .16em .55em .1em; letter-spacing: 4px; box-shadow: 9px 9px 0 var(--pink); }
#app .btn.opt, #app a.btn.opt { color: var(--tar); background: var(--paper) var(--dots); border: 3px solid var(--tar); padding: 8px 28px 5px; }
#app .btn.sm.opt { padding: 5px 18px 2px; }
#app .btn.opt:hover, #app .btn.opt:focus, #app a.btn.opt:hover, #app a.btn.opt:focus { background-color: var(--paper); color: var(--tar); }
#app .btn.opt.sel { color: var(--ink); background: var(--tar) var(--dots-light); box-shadow: 5px 4px 0 var(--pink); }
#app .btn.opt.sel:hover, #app .btn.opt.sel:focus { background-color: var(--tar); color: var(--ink); }
#app .btn.opt:focus:not(.sel) { box-shadow: 4px 4px 0 var(--pink); border-color: var(--hot); }
#app .btn:disabled { opacity: .3; cursor: default; }
/* the acid ellipse: always on the primary action until focus moves to something else, and on any focused button */
#app .btn:focus::after, #app .btn.primary::after { content: ""; position: absolute; left: -22px; right: -22px; top: -14px; bottom: -14px; border: 4px solid var(--acid); border-radius: 50%; transform: rotate(-2deg); pointer-events: none; }
#app .btn.huge:focus::after, #app .btn.huge.primary::after { left: -.28em; right: -.28em; top: -.16em; bottom: -.14em; border-width: 6px; }
#app:has(a:focus, button:focus):not(:has(.primary:focus)) .btn.primary::after { display: none; }
#app .btn.primary:focus::after, #app .btn.primary::after { display: block; }
#app .btn.opt.sel::after, #app .btn.opt.sel:focus::after { border-radius: 50%; }
#app .sheet.dark .btn { background-color: var(--tar); }
#app .sheet.dark .btn.opt { color: var(--ink); background: none; border-color: var(--ink); }
#app .sheet.dark .btn.opt.sel { background-color: var(--ink); color: var(--tar); }
#app .sheet.dark a.btn:focus, #app .sheet.dark a.btn:hover { color: var(--ink); }
#app .sheet.dark .btn.opt.sel:hover, #app .sheet.dark .btn.opt.sel:focus { color: var(--tar); background-color: var(--ink); }
#app .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; }
#app .link { font-size: var(--fs-m); letter-spacing: 2px; text-transform: uppercase; background: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#app .link:hover, #app .link:focus { background: var(--acid); }
#app .sheet.dark .link:hover, #app .sheet.dark .link:focus { color: var(--tar); }

#app .tag { display: inline-block; padding: 2px 9px 0; font: var(--fs-s)/17px var(--mono); letter-spacing: 2px; color: var(--ink); background: var(--tar); transform: rotate(-3deg); white-space: nowrap; text-transform: uppercase; }
#app .tag.pink { color: var(--tar); background: var(--pink); }
#app .tag.acid { padding: 3px 16px 1px; font: italic 28px/1.15 var(--mark); letter-spacing: 2px; color: var(--tar); background: var(--acid) var(--dots); transform: rotate(-1deg); }
#app .tag.acid.sm { font-size: 20px; padding: 2px 10px 0; }
#app .tag.paper { color: var(--tar); background: var(--paper); border: 2px solid var(--tar); }
#app .stamp { display: inline-block; padding: 4px 14px 2px; font: 26px/1.1 var(--mark); letter-spacing: 2px; transform: rotate(-3deg); white-space: nowrap; text-transform: uppercase; }
#app .stamp.pink { color: var(--pink); border: 3px solid var(--pink); }
#app .sheet:not(.dark) .stamp.pink { color: #D4268D; border-color: #D4268D; }
#app .stamp.block { color: var(--tar); background: var(--acid); box-shadow: var(--off) var(--off) 0 var(--pink); }
#app .stamp.ink { color: var(--tar); border: 3px solid var(--tar); }
#app .sheet.dark .stamp.ink { color: var(--ink); border-color: var(--ink); }
#app .you-tag { display: inline-block; margin-left: 8px; padding: 0 7px; font: var(--fs-s)/16px var(--mono); letter-spacing: 2px; color: var(--ink); background: var(--tar); transform: rotate(2deg); }
#app .house { display: inline-block; vertical-align: -1px; margin-left: 8px; width: 15px; height: 14px; background: var(--tar); opacity: .5; cursor: help; clip-path: polygon(50% 0, 100% 46%, 87% 46%, 87% 100%, 60% 100%, 60% 66%, 40% 66%, 40% 100%, 13% 100%, 13% 46%, 0 46%); }
#app .sheet.dark .house { background: var(--ink); opacity: .6; }
#app .legend { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-m); color: inherit; }
#app .legend .house { margin: 0; opacity: .7; }

/* cover: canvas drawn by src/cover.js, or the song's own picture, taped */
#app .cover { position: relative; background: var(--block) var(--dots-light); border: 3px solid var(--tar); flex: none; width: 96px; aspect-ratio: 1; transform: rotate(-2deg); overflow: visible; }
#app .cover canvas, #app .cover img { width: 100%; height: 100%; object-fit: cover; }
#app .cover img { filter: contrast(1.1) grayscale(.15); }
#app .cover.l { width: 100%; max-width: 300px; border-width: 4px; box-shadow: var(--off) var(--off) 0 var(--pink); }
#app .cover.m { width: 120px; }
#app .cover.s { width: 56px; border-width: 2px; }
#app .cover.tape-on::before { content: ""; position: absolute; z-index: 3; left: 28%; top: -15px; width: 38%; max-width: 100px; height: 24px; background: var(--tape); box-shadow: 0 2px 4px rgba(0,0,0,.3); transform: rotate(3deg); clip-path: polygon(0 0, 3% 28%, 0 52%, 3% 78%, 0 100%, 100% 100%, 97% 74%, 100% 48%, 97% 24%, 100% 0); }

#app .stars { display: inline-flex; gap: 3px; vertical-align: middle; }
#app .stars i { width: 17px; height: 16px; background: var(--tar); clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 36%, 38% 35%); position: relative; }
#app .stars i:not(.on) { background: var(--soft); }
#app .stars i:not(.on)::after { content: ""; position: absolute; inset: 2px; background: var(--sheet); clip-path: inherit; }
#app .stars.big i { width: 30px; height: 28px; } #app .stars.big i:not(.on)::after { inset: 4px; }
#app .sheet.dark .card .stars i.on, #app .sheet.dark .plate .stars i.on { background: var(--tar); }

#app .sq { display: inline-flex; gap: 3px; vertical-align: middle; }
#app .sq i { width: 12px; height: 12px; border: 2px solid var(--tar); }
#app .sq i.on { background: var(--tar); }

/* xp / progress bar: ink box, acid fill, pink end mark */
#app .bar { position: relative; height: 28px; border: 3px solid var(--tar); background: var(--paper); }
#app .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 50) * 1%); background: var(--acid) var(--dots); }
#app .bar i + i { left: calc(var(--from, 0) * 1%); width: calc(var(--v, 50) * 1% - var(--from, 0) * 1%); }
#app .bar u { position: absolute; top: -8px; bottom: -8px; left: calc(var(--v, 50) * 1%); width: 3px; background: var(--pink); }
#app .sheet.dark .bar { border-color: var(--ink); background: var(--tar); }

/* big numerals */
#app .num { font: 84px/1 var(--head); letter-spacing: 1px; }
#app .stat { display: flex; flex-direction: column; gap: 4px; }
#app .stat b { font: 400 clamp(40px, 5vw, 58px)/1 var(--head); letter-spacing: 1px; }
#app .stat .label { font-size: var(--fs-s); }
#app .ring { position: relative; display: inline-grid; place-items: center; padding: 14px 40px 6px; }
#app .ring::before { content: ""; position: absolute; inset: 0; border: 7px solid var(--acid); border-radius: 50%; transform: rotate(-4deg); pointer-events: none; }
#app .sheet:not(.dark) .ring::before { border-color: var(--acid); box-shadow: 0 0 0 2px var(--tar); }
#app .ring > * { position: relative; }
#app .ring.fill::before { background: rgba(214,255,0,.28); }
#app .sheet.dark .ring.fill::before { background: none; }

/* table / board rows */
#app .board { width: 100%; border-collapse: collapse; font-size: var(--fs-l); }
#app .board th { padding: 6px 10px 5px; font: 400 var(--fs-s)/1.2 var(--mono); letter-spacing: 3px; text-align: left; color: var(--fade); text-transform: uppercase; border-bottom: 3px solid var(--tar); }
#app .board td { padding: 9px 10px 6px; border-bottom: 2px dashed rgba(11,11,10,.35); vertical-align: middle; }
#app .board .r { width: 56px; font: 24px/1 var(--head); letter-spacing: 1px; }
#app .board .p { font: 22px/1.1 var(--head); letter-spacing: 1px; text-transform: uppercase; }
#app .board .n, #app .board th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#app .board tr.you td { background: var(--acid) var(--dots); border-bottom: 3px solid var(--tar); border-top: 3px solid var(--tar); }
#app .board tr.you td:first-child { border-left: 3px solid var(--tar); } #app .board tr.you td:last-child { border-right: 3px solid var(--tar); }
#app .board tr.gap td { text-align: center; padding: 4px; color: var(--fade); letter-spacing: 8px; border-bottom: 0; }
#app .board tr.zone td { padding: 3px 10px; font-size: var(--fs-s); letter-spacing: 3px; color: #D4268D; text-transform: uppercase; border-bottom: 3px dashed var(--pink); }
#app .av { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; vertical-align: middle; font: 18px/1 var(--head); color: var(--tar); border: 2px solid var(--tar); border-radius: 50%; box-shadow: 2px 2px 0 var(--pink); }
#app .sheet.dark .board th { border-bottom-color: var(--ink); } #app .sheet.dark .board td { border-bottom-color: rgba(242,239,230,.3); }
#app .sheet.dark .av { border-color: var(--ink); }
#app .sheet.dark .board tr.you td { color: var(--tar); border-color: var(--acid); }
#app .sheet.dark .board tr.you .you-tag { color: var(--acid); }
#app .sheet.dark .board tr.you .house { background: var(--tar); }
#app .sheet.dark .board tr.you .av { border-color: var(--tar); }

/* print furniture: each screen picks one of its own */
#app .barcode { display: inline-block; vertical-align: top; }
#app .barcode i { display: block; width: 130px; height: 44px; background: repeating-linear-gradient(90deg, var(--tar) 0 2px, transparent 2px 5px, var(--tar) 5px 6px, transparent 6px 8px, var(--tar) 8px 12px, transparent 12px 13px, var(--tar) 13px 14px, transparent 14px 18px, var(--tar) 18px 19px, transparent 19px 21px); }
#app .barcode span { display: block; margin-top: 3px; font-size: var(--fs-s); letter-spacing: 4px; }
#app .datestamp { display: inline-block; padding: 5px 12px 3px; font: var(--fs-m)/1.2 var(--mono); letter-spacing: 3px; color: var(--hot); border: 3px solid var(--hot); border-radius: 6px; transform: rotate(-5deg); text-transform: uppercase; }
#app .sheet.dark .datestamp { color: var(--pink); border-color: var(--pink); }
#app .pageno { font: 56px/1 var(--head); letter-spacing: 2px; color: transparent; -webkit-text-stroke: 2px var(--tar); transform: rotate(4deg); display: inline-block; }
#app .crop { position: absolute; width: 34px; height: 34px; z-index: 1; pointer-events: none; }
#app .crop::before, #app .crop::after { content: ""; position: absolute; background: var(--tar); }
#app .crop::before { left: 0; top: 16px; width: 34px; height: 2px; } #app .crop::after { left: 16px; top: 0; width: 2px; height: 34px; }

/* the print footer */
#app footer.foot { max-width: 1240px; margin: 36px auto 0; padding: 20px 16px 50px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; color: var(--ink); font-size: var(--fs-s); letter-spacing: 2px; text-transform: uppercase; }
#app footer.foot a, #app footer.foot button { color: var(--ink); font-size: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; }
#app footer.foot a:hover, #app footer.foot a:focus, #app footer.foot button:hover, #app footer.foot button:focus { color: var(--tar); background: var(--acid); }
#app footer.foot .keys { margin-left: auto; color: var(--ink); }

/* keycaps and the lane shapes */
#app .key { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 3px 8px 0; font: 26px/1 var(--head); color: var(--tar); border: 3px solid var(--tar); background: var(--paper); box-shadow: 3px 3px 0 var(--pink); }
#app .k1 { background: var(--l1); } #app .k2 { background: var(--l2); } #app .k3 { background: var(--l3); } #app .k4 { background: var(--l4); color: var(--ink); } #app .k5 { background: var(--l5); }
#app .keys-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* app toast and drop target (the stage has its own, scaled with the stage) */
#app .toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; max-width: calc(100vw - 32px); transform: translateX(-50%); padding: 8px 20px 5px; font: 24px/1.2 var(--head); letter-spacing: 2px; text-align: center; background: var(--acid); color: var(--tar); box-shadow: 4px 4px 0 var(--pink); opacity: 0; transition: opacity .15s; pointer-events: none; }
#app .toast.on { opacity: 1; }
#app .drop { position: fixed; inset: 16px; z-index: 90; display: none; align-items: center; justify-content: center; text-align: center; padding: 20px; background: rgba(11,11,10,.85); font: clamp(34px, 7vw, 80px)/1.05 var(--head); color: var(--acid); border: 8px dashed var(--acid); pointer-events: none; }
#app .drop.on { display: flex; }

/* a quiet, honest placeholder where online data would be */
#app .quiet-slip { margin: 22px 0; max-width: 640px; transform: rotate(-.4deg); }
#app .quiet-slip b { display: block; font: 22px/1.2 var(--head); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }

/* ================= landing ================= */
#app .pg-landing .hero { margin-top: 26px; padding-top: clamp(26px, 3.4vw, 42px); padding-bottom: clamp(30px, 3.4vw, 44px); }
#app .pg-landing .hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px 36px; align-items: center; }
#app .pg-landing .free { display: inline-block; font: italic 28px/1 var(--mark); letter-spacing: 3px; color: #D4268D; transform: rotate(-2.5deg); margin-bottom: 10px; }
#app .pg-landing h1 .wm { display: block; font: 400 clamp(54px, 8.2vw, 108px)/.95 var(--head); letter-spacing: 2px; text-shadow: 6px 5px 0 var(--pink); white-space: nowrap; }
#app .pg-landing h1 .pitch { display: inline; margin-top: 18px; font: italic 400 clamp(22px, 2.3vw, 29px)/1.6 var(--mark); letter-spacing: 2px; padding: 3px 14px 1px; background: var(--acid) var(--dots); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#app .pg-landing .pitch-line { display: block; margin-top: 12px; transform: rotate(-1deg); }
#app .pg-landing .play { margin-top: clamp(26px, 2.6vw, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; }
#app .pg-landing .timing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
#app .pg-landing .what { margin-top: 14px; font-size: var(--fs-l); }
#app .pg-landing .art { position: relative; justify-self: center; width: min(100%, 372px); transform: rotate(2.6deg); }
#app .pg-landing .art .hw { background: var(--tar); padding: 6px 4px 0; border: 5px solid var(--tar); box-shadow: 10px 10px 0 var(--pink); }
#app .pg-landing .art .tape { z-index: 6; }
#app .pg-landing .art .stamp { position: absolute; z-index: 7; }
#app .pg-landing .art .s1 { right: -22px; top: 70px; transform: rotate(7deg); }
#app .pg-landing .art .s2 { left: -30px; bottom: 120px; transform: rotate(-6deg); font-size: 22px; background: var(--paper); }
#app .pg-landing .art .cap { position: absolute; z-index: 7; left: 14px; top: -22px; }
#app .pg-landing .steps { counter-reset: s; display: grid; gap: 16px; }
#app .pg-landing .steps li { counter-increment: s; position: relative; padding-left: 62px; min-height: 48px; }
#app .pg-landing .steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 46px; height: 46px; display: grid; place-items: center; padding-top: 3px; font: 28px/1 var(--head); color: var(--tar); background: var(--acid) var(--dots); border: 3px solid var(--tar); border-radius: 50%; transform: rotate(-6deg); }
#app .pg-landing .steps b { font: 22px/1.2 var(--head); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; display: block; }
#app .pg-landing .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#app .pg-landing .vs .plate { padding: 20px 22px; }
#app .pg-landing .vs h3 { font: 400 40px/1 var(--head); letter-spacing: 2px; text-shadow: 3px 3px 0 var(--pink); margin-bottom: 10px; }
#app .pg-landing .faq dt { font: 24px/1.2 var(--head); letter-spacing: 1px; text-transform: uppercase; margin-top: 18px; }
#app .pg-landing .faq dd { margin: 4px 0 0; font-size: var(--fs-l); max-width: 66ch; }
#app .pg-landing .phone-note { display: none; margin-top: 18px; transform: rotate(-.6deg); }
#app .pg-landing .phone-note .note { margin: 6px 0 10px; }

/* ================= home ================= */
#app .pg-home .top-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0 26px; align-items: start; }
#app .pg-home .col { display: flex; flex-direction: column; }
#app .pg-home .cont-grid { display: grid; grid-template-columns: 250px 1fr; gap: 24px 34px; align-items: center; margin-top: 14px; }
#app .pg-home .cont-grid .cover { transform: rotate(-2.5deg); }
#app .pg-home .cont-grid h1 { font: 400 clamp(46px, 6vw, 84px)/.98 var(--head); letter-spacing: 2px; text-transform: uppercase; text-shadow: 5px 4px 0 var(--pink); overflow-wrap: anywhere; }
#app .pg-home .cont-grid .by { font-size: 22px; margin: 8px 0 12px; }
#app .pg-home .tags { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#app .pg-home .prog { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 18px; }
#app .pg-home .prog .sq i { width: 18px; height: 18px; }
#app .pg-home .best { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
#app .pg-home .best b { font: 400 32px/1 var(--head); letter-spacing: 1px; }
#app .pg-home .replay { display: flex !important; align-items: center; gap: 14px; margin-top: 30px; padding: 10px 14px; transform: rotate(-.4deg); }
#app .pg-home .replay b { font: 22px/1.1 var(--head); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
#app .pg-home .streak-num { font: 400 96px/1 var(--head); }
#app .pg-home .week { display: flex; gap: 7px; margin: 18px 0 12px; }
#app .pg-home .week div { flex: 1; text-align: center; font-size: var(--fs-s); letter-spacing: 1px; }
#app .pg-home .week i { display: block; height: 26px; margin-bottom: 5px; border: 3px solid var(--ink); }
#app .pg-home .week i.on { background: var(--acid); border-color: var(--acid); }
#app .pg-home .week i.today { border-style: dashed; border-color: var(--pink); }
#app .pg-home .lvl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#app .pg-home .ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 2px dashed var(--soft); }
#app .pg-home .league-head { display: grid; grid-template-columns: 124px 1fr; gap: 20px; align-items: center; margin-bottom: 14px; }
#app .pg-home .tierart { aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; padding: 8px; background: var(--block) var(--dots-light); border: 3px solid var(--tar); box-shadow: 5px 5px 0 var(--pink); color: var(--ink); font: 400 30px/1 var(--head); letter-spacing: 1px; text-transform: uppercase; transform: rotate(-2deg); }

/* ================= song page ================= */
#app .pg-song .song-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 30px 50px; align-items: start; }
#app .pg-song .facts { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: var(--fs-m); }
#app .pg-song .facts dt { color: var(--fade); letter-spacing: 2px; text-transform: uppercase; font-size: var(--fs-s); padding-top: 3px; }
#app .pg-song .facts dd { margin: 0; text-transform: uppercase; letter-spacing: 1px; overflow-wrap: anywhere; }
#app .pg-song .byline { font-size: 24px; margin: 8px 0 14px; overflow-wrap: anywhere; }
#app .pg-song h1 { overflow-wrap: anywhere; }
#app .pg-song .opts { display: flex; flex-wrap: wrap; gap: 16px 18px; margin: 8px 0 22px; }
#app .pg-song .opts .btn.opt { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 7px 24px 4px; min-width: 112px; }
#app .pg-song .opts .btn.opt small { font: var(--fs-s)/1.3 var(--mono); letter-spacing: 1px; }
#app .pg-song .help { min-height: 24px; margin: -10px 0 22px; }
#app .pg-song .bestbox { display: grid; grid-template-columns: auto 1fr; gap: 6px 26px; align-items: center; margin: 4px 0 30px; transform: rotate(-.4deg); }
#app .pg-song .bestbox .score { font: 400 54px/1 var(--head); letter-spacing: 1px; }
#app .pg-song .bestbox .unplayed { font: 400 40px/1 var(--head); text-transform: uppercase; grid-column: 1 / -1; }
#app .pg-song .go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 34px; }
#app .pg-song .tagrow { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 22px; }
#app .pg-song .controls { margin-top: 34px; max-width: 540px; }
#app .pg-song .controls summary { cursor: pointer; font: 22px/1.2 var(--head); letter-spacing: 2px; text-transform: uppercase; padding: 4px 0; list-style: none; display: inline-block; }
#app .pg-song .controls summary::-webkit-details-marker { display: none; }
#app .pg-song .controls summary::after { content: "  +"; }
#app .pg-song .controls[open] summary::after { content: "  -"; }
#app .pg-song .controls summary:focus { background: var(--acid); }
#app .pg-song .controls table { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: var(--fs-m); }
#app .pg-song .controls td { padding: 6px 10px; border-bottom: 1px solid rgba(11,11,10,.35); }
#app .pg-song .controls td:first-child, #app .pg-song .controls td:nth-child(2) { font: 19px var(--head); letter-spacing: 1px; white-space: nowrap; }
#app .pg-song .controls tr:last-child td { border-bottom: 0; }
#app .pg-song .slip { margin: 0 0 22px; max-width: 560px; }
#app .pg-song .acc-col { text-align: right; }

/* ================= results ================= */
#app .pg-results .res-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 30px; align-items: start; }
#app .pg-results .rv { animation: pg-pop .38s cubic-bezier(.2, 1.4, .5, 1) both; animation-delay: var(--d, 0s); }
@keyframes pg-pop { from { opacity: 0; transform: scale(1.2) rotate(-4deg); } }
#app .pg-results .whoplate { display: flex; align-items: center; gap: 16px; padding: 12px 16px; transform: rotate(-.4deg); --off: 5px; }
#app .pg-results .whoplate h1 { font: 400 34px/1 var(--head); letter-spacing: 2px; text-transform: uppercase; overflow-wrap: anywhere; }
#app .pg-results .whoplate .tags { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
#app .pg-results .stamps { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; min-height: 70px; margin-top: 6px; padding-left: 6px; }
#app .pg-results .stamps .stamp { font-size: 34px; }
#app .pg-results .scoreblock { text-align: center; margin: 4px 0 8px; }
#app .pg-results .scoreblock .ring { padding: 20px 56px 10px; }
#app .pg-results .scoreblock .big { font: 400 clamp(56px, 10vw, 120px)/1 var(--head); letter-spacing: 2px; text-shadow: 5px 5px 0 var(--pink); }
#app .pg-results .prevline { margin-top: 14px; text-align: center; }
#app .pg-results .sub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
#app .pg-results .sub-stats .stat b { font-size: clamp(32px, 4vw, 46px); }
#app .pg-results .secs { display: flex; gap: 5px; height: 54px; align-items: stretch; margin: 10px 0 6px; }
#app .pg-results .secs i { display: block; flex: 1; min-width: 0; border: 2px solid var(--tar); background: linear-gradient(0deg, var(--tar) calc(var(--f) * 1%), transparent 0); }
#app .pg-results .secs i.weak { border-color: #D4268D; background: linear-gradient(0deg, var(--pink) calc(var(--f) * 1%), transparent 0); }
#app .pg-results .secs i.none { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--soft) 6px 8px); }
#app .pg-results .secs i:focus { box-shadow: 4px 4px 0 var(--pink); transform: translate(-2px, -3px); }
#app .pg-results .progress .card { margin-bottom: 18px; }
#app .pg-results .pcard { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: end; }
#app .pg-results .pcard .big { font: 400 clamp(44px, 5vw, 60px)/1 var(--head); letter-spacing: 1px; }
#app .pg-results .delta { font: 28px/1 var(--head); letter-spacing: 1px; color: #0a7a4f; }
#app .pg-results .from-to { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; font: 400 clamp(34px, 4vw, 46px)/1 var(--head); }
#app .pg-results .from-to s { color: var(--fade); text-decoration-thickness: 3px; font-size: .72em; }
#app .pg-results .from-to .arrow { width: 40px; height: 18px; background: var(--pink); clip-path: polygon(0 35%, 62% 35%, 62% 0, 100% 50%, 62% 100%, 62% 65%, 0 65%); align-self: center; }
#app .pg-results .xpbar { margin: 14px 0 6px; }
#app .pg-results .xpbar .bar i + i { background: var(--pink); }
#app .pg-results .hist { display: flex; align-items: flex-end; gap: 4px; height: 90px; position: relative; margin: 10px 0 0; border-bottom: 3px solid var(--tar); }
#app .pg-results .hist i { flex: 1; background: var(--tar); min-height: 3px; }
#app .pg-results .hist i.mid { background: var(--pink); }
#app .pg-results .hist u { position: absolute; bottom: 0; top: -6px; width: 4px; background: var(--acid); border: 1px solid var(--tar); left: calc(50% + var(--avg) * 1%); text-decoration: none; }
#app .pg-results .hist-labels { display: flex; justify-content: space-between; font-size: var(--fs-s); letter-spacing: 3px; color: var(--fade); margin-top: 4px; }
#app .pg-results .hint { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 30px; align-items: center; margin-top: 30px; transform: rotate(-.2deg); }
#app .pg-results .hint b { font: 400 clamp(26px, 3.2vw, 36px)/1.1 var(--head); letter-spacing: 1px; text-transform: uppercase; }
#app .pg-results .actions { position: sticky; bottom: 14px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; margin: 34px -10px 0; padding: 22px 26px 10px; background: var(--paper) var(--dots); border: 4px solid var(--tar); box-shadow: 6px 6px 0 var(--pink); }
#app .pg-results .actions .btn.big { font-size: 38px; padding: 8px 44px 5px; }
#app .pg-results .nextline { font-size: var(--fs-m); margin-top: 8px; }

/* ================= account screen ================= */
#app .pg-account .sheet { max-width: 760px; margin-left: auto; margin-right: auto; margin-top: 40px; }
#app .field { width: 100%; padding: 8px 14px 5px; font: 24px/1.3 var(--mono); color: var(--tar); background: var(--paper) var(--dots); border: 4px solid var(--tar); border-radius: 0; box-shadow: var(--off) var(--off) 0 var(--pink); appearance: none; }
#app .field:focus { box-shadow: var(--off) var(--off) 0 var(--acid); border-color: var(--tar); }
#app .acct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin: 8px 0 26px; }
#app .acct-row .field { flex: 1 1 260px; width: auto; min-width: 0; }
#app .pg-account .slip { margin: 16px 0 0; }
#app .pg-account .slip:empty { display: none; }
#app .pg-account .prose { margin: 14px 0 22px; }
#app .chip.acct b { font-size: 20px; letter-spacing: 2px; white-space: nowrap; }

/* ================= leagues: my league, weekly challenge, rating boards ================= */
#app .pg-leagues .subnav { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 26px; }
#app .pg-leagues h1.h-l { font-size: clamp(46px, 6.4vw, 88px); margin: 4px 0 12px; }
#app .pg-leagues .lead { max-width: 62ch; margin: 12px 0 16px; color: var(--tar); }
#app .pg-leagues .tagrow { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
#app .pg-leagues .opts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
#app .pg-leagues .btn-row { margin-top: 26px; }
#app .pg-leagues .lg-head { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 26px 40px; align-items: start; }
#app .pg-leagues .tierart { aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; padding: 8px; background: var(--block) var(--dots-light); border: 3px solid var(--tar); box-shadow: 5px 5px 0 var(--pink); color: var(--ink); font: 400 38px/1 var(--head); letter-spacing: 1px; text-transform: uppercase; transform: rotate(-2deg); margin-top: 40px; }
#app .pg-leagues .ladder { display: flex; align-items: flex-end; gap: 6px; height: 262px; margin: 40px 0 6px; }
#app .pg-leagues .ladder div { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; background: var(--tar) var(--dots-light); color: var(--ink); height: calc(124px + var(--i) * 17px); position: relative; }
#app .pg-leagues .ladder b { font: 400 22px/1 var(--head); letter-spacing: 2px; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); padding-bottom: 6px; }
#app .pg-leagues .ladder .here { background: var(--acid) var(--dots); color: var(--tar); box-shadow: 5px 4px 0 var(--pink); z-index: 2; }
#app .pg-leagues .ladder .here::after { content: "YOU"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-4deg); padding: 0 8px; font: var(--fs-s)/18px var(--mono); letter-spacing: 2px; color: var(--ink); background: var(--tar); }
#app .pg-leagues .board tr.zone-row td { padding: 6px 10px 4px; font: italic 22px/1.1 var(--mark); letter-spacing: 2px; text-transform: uppercase; border-bottom: 0; }
#app .pg-leagues .board tr.zone-up td { color: #0a7a4f; border-top: 4px dashed #0a7a4f; }
#app .pg-leagues .board tr.zone-down td { color: #D4268D; border-top: 4px dashed #D4268D; }
#app .pg-leagues .board tr.gap td { letter-spacing: 3px; text-transform: uppercase; font-size: var(--fs-s); }
#app .pg-leagues .ch-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
#app .pg-leagues .ch-head .stamp { font-size: 30px; }
#app .pg-leagues .tickets { display: grid; gap: 30px; margin-top: 26px; }
#app .pg-leagues .ticket { position: relative; display: grid; grid-template-columns: 92px 150px minmax(0, 1fr) 270px; color: var(--ink); background: var(--block) var(--dots-light); box-shadow: 6px 6px 0 var(--pink); }
#app .pg-leagues .ticket:nth-child(1) { transform: rotate(-.5deg); } #app .pg-leagues .ticket:nth-child(2) { transform: rotate(.4deg); } #app .pg-leagues .ticket:nth-child(3) { transform: rotate(-.3deg); }
#app .pg-leagues .ticket::before, #app .pg-leagues .ticket::after { content: ""; position: absolute; left: 80px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); }
#app .pg-leagues .ticket::before { top: -14px; } #app .pg-leagues .ticket::after { bottom: -14px; }
#app .pg-leagues .ticket .tn { display: grid; place-items: center; font: 400 76px/1 var(--head); color: var(--acid); border-right: 3px dashed var(--ink); padding-top: 8px; }
#app .pg-leagues .ticket .cv { padding: 22px 0 22px 22px; }
#app .pg-leagues .ticket .cover { width: 112px; }
#app .pg-leagues .ticket .mid { padding: 22px 24px; min-width: 0; }
#app .pg-leagues .ticket .kind { font-size: var(--fs-s); letter-spacing: 3px; color: var(--acid); text-transform: uppercase; }
#app .pg-leagues .ticket h2 { font: 400 clamp(32px, 3.8vw, 46px)/1 var(--head); letter-spacing: 1px; text-transform: uppercase; margin: 4px 0; text-shadow: 3px 2px 0 var(--hot); overflow-wrap: anywhere; }
#app .pg-leagues .ticket .label { color: var(--ink); }
#app .pg-leagues .ticket .you { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
#app .pg-leagues .ticket .you b { font: 400 34px/1 var(--head); letter-spacing: 1px; }
#app .pg-leagues .ticket .side { padding: 20px 22px; border-left: 3px dashed var(--ink); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#app .pg-leagues .ticket .side ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: var(--fs-m) var(--mono); }
#app .pg-leagues .ticket .side li { display: flex; justify-content: space-between; gap: 10px; }
#app .pg-leagues .ticket .side li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .pg-leagues .ticket .side .btn { margin-top: auto; align-self: flex-start; background: var(--paper); color: var(--tar); }
#app .pg-leagues .ticket .stars i.on { background: var(--acid); } #app .pg-leagues .ticket .stars i:not(.on) { background: rgba(242,239,230,.55); } #app .pg-leagues .ticket .stars i:not(.on)::after { background: var(--block); }
#app .pg-leagues .ticket .house { background: var(--ink); opacity: .7; }
#app .pg-leagues .top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 26px 0 30px; align-items: end; }
#app .pg-leagues .top3 .card { text-align: center; padding: 16px 10px 14px; }
#app .pg-leagues .top3 .card.me { background-color: var(--acid); }
#app .pg-leagues .top3 .rk { font: 400 56px/1 var(--head); text-shadow: 3px 3px 0 var(--pink); }
#app .pg-leagues .top3 .nm { font: 400 24px/1.1 var(--head); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; overflow-wrap: anywhere; }
#app .pg-leagues .top3 .rt { font: 400 30px/1 var(--head); margin-top: 8px; }
#app .pg-leagues .top3 .card:nth-child(1) { order: 2; padding-bottom: 28px; transform: rotate(.5deg); } #app .pg-leagues .top3 .card:nth-child(2) { order: 1; transform: rotate(-1deg); } #app .pg-leagues .top3 .card:nth-child(3) { order: 3; transform: rotate(1deg); }
#app .pg-leagues .top3 .card:nth-child(1) .rk { font-size: 76px; }

/* ================= browse ================= */
#app .pg-browse .head-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; }
#app .pg-browse .subnav { display: flex; flex-wrap: wrap; gap: 10px 12px; }
#app .pg-browse .subnav b { font: var(--fs-m) var(--mono); margin-left: 6px; }
#app .pg-browse .datestamp { display: inline-block; padding: 5px 12px 3px; font: var(--fs-m)/1.2 var(--mono); letter-spacing: 3px; color: var(--hot); border: 3px solid var(--hot); border-radius: 6px; transform: rotate(-5deg); text-transform: uppercase; }
#app .pg-browse .searchrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; margin-bottom: 30px; }
#app .pg-browse .searchrow .field { font: 400 38px/1.2 var(--head); letter-spacing: 2px; text-transform: uppercase; padding-top: 10px; transform: rotate(-.3deg); }
#app .pg-browse .searchrow .field::placeholder { color: var(--fade); opacity: 1; }
#app .pg-browse .searchrow .field::-webkit-search-cancel-button { display: none; }
#app .pg-browse .count-line { padding-top: 14px; margin-bottom: 26px; border-top: 2px dashed var(--soft); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
#app .pg-browse .shelf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 34px 0 22px; }
#app .pg-browse .shelf-head:first-child { margin-top: 0; }
#app .pg-browse .shelf-head .link { margin-left: auto; }
#app .pg-browse .cards { display: grid; gap: 30px 24px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-bottom: 30px; }
#app .pg-browse .cell { position: relative; }
#app .pg-browse .cell:nth-child(3n+1) { transform: rotate(-.5deg); } #app .pg-browse .cell:nth-child(3n+2) { transform: translateY(8px) rotate(.4deg); } #app .pg-browse .cell:nth-child(3n) { transform: translateY(-3px) rotate(-.25deg); }
#app .pg-browse .card.song { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: start; width: 100%; min-height: 148px; text-align: left; }
#app .pg-browse .song .cover { grid-row: span 2; }
#app .pg-browse .song .name { font: 400 25px/1.05 var(--head); letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
#app .pg-browse .song .by { font-size: var(--fs-m); overflow-wrap: anywhere; }
#app .pg-browse .song .foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 400 19px/1 var(--head); letter-spacing: 1px; margin-top: 2px; }
#app .pg-browse .song .go { display: none; position: absolute; right: -12px; bottom: -14px; z-index: 3; padding: 4px 18px 0; font: 400 26px/1.2 var(--head); letter-spacing: 3px; color: var(--ink); background: var(--tar) var(--dots-light); transform: rotate(-3deg); }
#app .pg-browse .song:focus .go, #app .pg-browse .song:hover .go { display: block; }
#app .pg-browse .song:focus, #app .pg-browse .song:hover { transform: translate(-4px, -8px); }
#app .pg-browse .rm { position: absolute; left: -10px; top: -10px; z-index: 5; width: 34px; height: 34px; font: 400 20px/32px var(--head); text-align: center; color: var(--ink); background: var(--tar); transform: rotate(-4deg); }
#app .pg-browse .rm:hover, #app .pg-browse .rm:focus { background: var(--pink); color: var(--tar); outline: none; box-shadow: 0 0 0 3px var(--acid); }
#app .pg-browse .ask { position: absolute; inset: -6px; z-index: 6; display: flex; flex-wrap: wrap; align-content: center; gap: 10px 12px; padding: 14px 16px; background: var(--ink) var(--dots); border: 3px solid var(--tar); box-shadow: 6px 6px 0 var(--pink); }
#app .pg-browse .ask span { flex-basis: 100%; font-size: var(--fs-m); }
#app .pg-browse .add-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 36px 22px; text-align: center; color: var(--tar); background: var(--paper) var(--dots); border: 4px dashed var(--tar); transform: rotate(.3deg); }
#app .pg-browse .add-zone b { font: 400 clamp(36px, 5vw, 56px)/1 var(--head); letter-spacing: 3px; text-transform: uppercase; }
#app .pg-browse .add-zone .note { max-width: 56ch; }
#app .pg-browse .add-zone:hover, #app .pg-browse .add-zone:focus { border-style: solid; background-color: var(--ink); box-shadow: var(--off) var(--off) 0 var(--pink); outline: none; }
#app .pg-browse .ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; margin: 26px 0 34px; padding: 0; list-style: none; }
#app .pg-browse .ways li { padding-left: 18px; position: relative; }
#app .pg-browse .ways li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; background: var(--pink); }
#app .pg-browse .lead { max-width: 64ch; margin-bottom: 24px; color: var(--tar); }
#app .pg-browse .song .mono { font: var(--fs-s) var(--mono); letter-spacing: 1px; }
#app .pg-browse .hits { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
#app .pg-browse .hit { display: flex; align-items: center; gap: 14px 20px; width: 100%; padding: 10px 16px 8px; text-align: left; color: var(--tar); background: var(--ink) var(--dots); border: 3px solid var(--tar); }
#app .pg-browse .hit:hover, #app .pg-browse .hit:focus { outline: none; border-color: var(--hot); box-shadow: 5px 5px 0 var(--pink); }
#app .pg-browse .hit .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#app .pg-browse .hit .who b { font: 400 22px/1.1 var(--head); letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
#app .pg-browse .hit .who span { font-size: var(--fs-m); overflow-wrap: anywhere; }
#app .pg-browse .hit .end { display: flex; align-items: center; gap: 12px; font: 400 20px/1 var(--head); white-space: nowrap; }
#app .pg-browse .hit .go { padding: 3px 12px 0; font: 400 20px/1.2 var(--head); letter-spacing: 2px; color: var(--ink); background: var(--tar); }
#app .pg-browse .empty { padding: 36px; margin-bottom: 26px; border: 4px dashed var(--tar); text-align: center; font: 400 44px/1.1 var(--head); text-transform: uppercase; }

/* ================= settings ================= */
#app .pg-settings .sheet { max-width: 1000px; margin-left: auto; margin-right: auto; }
#app .pg-settings h1.h-l { font-size: clamp(46px, 6.4vw, 88px); margin: 4px 0 18px; }
#app .pg-settings .block { padding: 6px 0 28px; }
#app .pg-settings .block + .block { border-top: 3px dashed var(--soft); padding-top: 26px; }
#app .pg-settings .lead { max-width: 60ch; margin-top: 8px; color: var(--tar); }
#app .pg-settings .offset { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 16px 0 12px; }
#app .pg-settings .offset .num { font-size: 72px; }
#app .pg-settings .offset .num small { font-size: .4em; }
#app .pg-settings .set { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 10px 36px; align-items: center; margin-top: 18px; }
#app .pg-settings .set .name { font: 400 26px/1.1 var(--head); letter-spacing: 1px; text-transform: uppercase; }
#app .pg-settings .set .name small { display: block; margin-top: 4px; font: var(--fs-m)/1.4 var(--mono); letter-spacing: 0; text-transform: none; -webkit-text-stroke: .35px currentColor; }
#app .pg-settings .val { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 16px; align-items: center; }
#app .pg-settings .val output { font: 400 34px/1 var(--head); text-align: right; letter-spacing: 1px; }
#app .pg-settings input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: none; cursor: pointer; }
#app .pg-settings input[type=range]::-webkit-slider-runnable-track { height: 14px; background: var(--paper); border: 3px solid var(--tar); }
#app .pg-settings input[type=range]::-moz-range-track { height: 8px; background: var(--paper); border: 3px solid var(--tar); }
#app .pg-settings input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 34px; margin-top: -12px; background: var(--acid); border: 3px solid var(--tar); box-shadow: 4px 3px 0 var(--pink); }
#app .pg-settings input[type=range]::-moz-range-thumb { width: 20px; height: 28px; background: var(--acid); border: 3px solid var(--tar); border-radius: 0; box-shadow: 4px 3px 0 var(--pink); }
#app .pg-settings input[type=range]:focus { outline: none; }
#app .pg-settings input[type=range]:focus::-webkit-slider-thumb { background: var(--pink); box-shadow: 0 0 0 4px var(--acid); }
#app .pg-settings input[type=range]:focus::-moz-range-thumb { background: var(--pink); box-shadow: 0 0 0 4px var(--acid); }
#app .pg-settings .prev { position: relative; height: 70px; overflow: hidden; background: var(--tar); border: 4px solid var(--tar); box-shadow: 5px 5px 0 var(--pink); }
#app .pg-settings .prev i { position: absolute; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--l1); border: 5px solid var(--ink); animation: note-slide var(--dur, 1.2s) linear infinite; }
#app .pg-settings .prev i:nth-child(2) { background: var(--l3); animation-delay: calc(var(--dur, 1.2s) * -.33); } #app .pg-settings .prev i:nth-child(3) { background: var(--l2); animation-delay: calc(var(--dur, 1.2s) * -.66); }
#app .pg-settings .prev u { position: absolute; right: 22px; top: 0; bottom: 0; width: 5px; background: var(--ink); }
@keyframes note-slide { from { left: -50px; } to { left: 100%; } }
#app .pg-settings .keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#app .pg-settings .keyrow .note { margin: 0 8px; }
#app .pg-settings .k1 { background: var(--l1); } #app .pg-settings .k2 { background: var(--l2); } #app .pg-settings .k3 { background: var(--l3); } #app .pg-settings .k4 { background: var(--l4); color: var(--ink); } #app .pg-settings .k5 { background: var(--l5); }
#app .pg-settings .block > .note { margin-top: 18px; }
#app .pg-settings .nm-row { display: flex; gap: 14px; align-items: center; }
#app .pg-settings .nm-row .field { flex: 1; min-width: 0; }
#app .pg-settings #nm-msg { margin-top: 16px; max-width: 60ch; }
#app .pg-settings .btn-row { margin-top: 24px; }

/* ================= supporter ================= */
#app .pg-supporter h1.h-l { font-size: clamp(46px, 6.4vw, 88px); margin: 4px 0 14px; }
#app .pg-supporter .lead { font-size: var(--fs-l); max-width: 62ch; color: var(--tar); }
#app .pg-supporter #sup-now { margin-top: 18px; max-width: 62ch; }
#app .pg-supporter .perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 26px; }
#app .pg-supporter .perk { position: relative; padding: 20px 22px; }
#app .pg-supporter .perk h3 { font: 400 30px/1.05 var(--head); letter-spacing: 1px; text-transform: uppercase; text-shadow: 3px 2px 0 var(--pink); margin-bottom: 8px; }
#app .pg-supporter .perk .note { color: var(--tar); margin-bottom: 12px; }
#app .pg-supporter .perk:nth-child(odd) { transform: rotate(-.5deg); } #app .pg-supporter .perk:nth-child(even) { transform: rotate(.5deg); }
#app .pg-supporter .never { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
#app .pg-supporter .never div { padding: 18px 16px 14px; border: 4px solid var(--ink); position: relative; }
#app .pg-supporter .never div::before { content: "NO"; position: absolute; right: -8px; top: -16px; padding: 0 12px; font: italic 26px/1.2 var(--mark); color: var(--tar); background: var(--acid); transform: rotate(5deg); }
#app .pg-supporter .never b { font: 400 26px/1.05 var(--head); letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 6px; }
#app .pg-supporter .join { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; }
#app .pg-supporter .join .note { max-width: 44ch; }
#app .pg-supporter .join .btn[disabled] { opacity: .75; cursor: default; }
#app .pg-supporter .btn-row { margin-top: 26px; }

/* a player's name on a board opens their profile */
#app .board button.pl { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; padding: 0; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
#app .board button.pl:hover, #app .board button.pl:focus { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; outline: none; }

/* ================= profile: the passport ================= */
#app .pg-profile .passport { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
#app .pg-profile .pg { padding: 6px clamp(4px, 2vw, 26px); min-width: 0; }
#app .pg-profile .pg + .pg { border-left: 3px dashed var(--soft); padding-left: clamp(18px, 3vw, 40px); }
#app .pg-profile .pg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#app .pg-profile .pageno { font-size: 44px; }
#app .pg-profile .id { display: flex; gap: 20px; align-items: center; margin: 14px 0 20px; }
#app .pg-profile .portrait { position: relative; width: 138px; aspect-ratio: 3 / 4; flex: none; display: grid; place-items: center; background: var(--l1) var(--dots); border: 4px solid var(--tar); box-shadow: 6px 6px 0 var(--pink); transform: rotate(-2.5deg); font: 400 84px/1 var(--head); color: var(--tar); text-shadow: 4px 3px 0 var(--pink); overflow: hidden; }
#app .pg-profile .portrait::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(11,11,10,.35) 2.2px, transparent 2.8px) 0 0 / 10px 10px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); }
#app .pg-profile .portrait span { position: relative; }
#app .pg-profile .id h1 { font: 400 clamp(36px, 4vw, 50px)/1 var(--head); letter-spacing: 2px; text-transform: uppercase; text-shadow: 4px 3px 0 var(--pink); overflow-wrap: anywhere; }
#app .pg-profile .tagrow { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 10px; }
#app .pg-profile .tagrow .stamp { font-size: 22px; }
#app .pg-profile .bar.thin { height: 16px; margin-bottom: 6px; }
#app .pg-profile .vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-top: 18px; }
#app .pg-profile .keep { margin-top: 30px; transform: rotate(-.5deg); --off: 5px; }
#app .pg-profile .keep .note { margin: 6px 0 14px; }
#app .pg-profile .mrz { margin-top: 24px; font-size: var(--fs-s); letter-spacing: 3px; color: var(--fade); word-break: break-all; line-height: 1.5; }
#app .pg-profile .stamps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; margin-top: 14px; }
#app .pg-profile .st { display: grid; place-items: center; text-align: center; aspect-ratio: 1; padding: 10px; font: italic 24px/1 var(--mark); letter-spacing: 1px; text-transform: uppercase; position: relative; overflow-wrap: anywhere; }
#app .pg-profile .st.got { color: var(--c); border: 4px solid var(--c); transform: rotate(var(--r)); }
#app .pg-profile .st.got.r { border-radius: 50%; } #app .pg-profile .st.got.h { border-radius: 12px; border-style: double; border-width: 6px; }
#app .pg-profile .st.got::after { content: ""; position: absolute; inset: 5px; border: 2px solid var(--c); opacity: .6; border-radius: inherit; }
#app .pg-profile .st.no { color: var(--fade); border: 3px dashed var(--soft); border-radius: 50%; font-size: 22px; }
#app .pg-profile .st.no b { font: 400 40px/1 var(--head); color: var(--soft); display: block; }
#app .pg-profile .g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 50px; align-items: start; }
#app .pg-profile .runs td.n { font-size: var(--fs-m); }
#app .pg-profile .runs .p { font-size: 19px; overflow-wrap: anywhere; }
#app .pg-profile .bests { display: grid; gap: 14px; }
#app .pg-profile .card.best { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; }
#app .pg-profile .card.best b { flex: 1; overflow-wrap: anywhere; }
#app .pg-profile .btn-row { margin-top: 26px; }

/* ================= responsive ================= */
@media (max-width: 1120px) { #app .top .chip small { display: none; } #app .top nav a { padding-left: 12px; padding-right: 12px; } }   /* the strip also holds the sign-in link now */
@media (max-width: 960px) {
  #app .top nav a { padding: 7px 11px 3px; font-size: 21px; }
  #app .top .chip small { display: none; }
  #app .pg-landing h1 .wm { font-size: clamp(54px, 12vw, 110px); }
  #app .pg-landing .hero-grid { grid-template-columns: 1fr; }
  #app .pg-landing .art { width: min(78%, 340px); margin: 14px auto 0; }
  #app .pg-home .top-grid { grid-template-columns: minmax(0, 1fr); }
  #app .pg-results .res-grid { grid-template-columns: minmax(0, 1fr); }
  #app .pg-results .hint { grid-template-columns: minmax(0, 1fr); }
  #app .pg-leagues .ticket { grid-template-columns: 70px minmax(0, 1fr); }
  #app .pg-leagues .ticket .cv { display: none; }
  #app .pg-leagues .ticket .side { grid-column: 1 / -1; border-left: 0; border-top: 3px dashed var(--ink); }
  #app .pg-leagues .ticket::before, #app .pg-leagues .ticket::after { left: 58px; }
  #app .pg-leagues .ticket .tn { font-size: 56px; }
}
@media (max-width: 860px) {
  #app .pg-supporter .perks, #app .pg-supporter .never { grid-template-columns: minmax(0, 1fr); }
  #app .pg-profile .passport, #app .pg-profile .g2 { grid-template-columns: minmax(0, 1fr); }
  #app .pg-profile .pg + .pg { border-left: 0; border-top: 3px dashed var(--soft); padding: 28px 4px 0; margin-top: 24px; }
  #app .pg-song .song-grid { grid-template-columns: minmax(0, 1fr); }
  #app .pg-song .song-grid .cover.l { max-width: 220px; }
}
@media (max-width: 720px) {
  #app .only-phone { display: block; } #app .not-phone { display: none !important; }
  #app .top { position: static; }
  #app .top .wrap { flex-wrap: wrap; gap: 6px 12px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  #app .brand { font-size: 28px; }
  #app .top .chips { margin-left: auto; gap: 4px; }
  #app .top .chips .mini { width: 52px; }
  #app .top nav { order: 3; width: 100%; margin: 4px 0 0; gap: 4px; }
  #app .top nav a { flex: 1; text-align: center; padding: 6px 2px 3px; font-size: 20px; letter-spacing: 1px; }
  #app .top.landing nav { order: 0; width: auto; margin-left: auto; }
  #app .top.landing nav a { flex: none; padding: 6px 12px 3px; }
  #app .top.landing nav a.quiet { display: none; }
  #app .sheet { margin: 18px 0; }
  #app .tape.tl, #app .tape.bl { left: -10px; } #app .tape.tr, #app .tape.br { right: -10px; }
  #app .btn { white-space: normal; }
  #app .btn.huge { white-space: nowrap; }
  #app .board { font-size: var(--fs-m); } #app .board td { padding: 8px 6px 5px; } #app .board .r { width: 40px; }
  #app footer.foot .keys { margin-left: 0; display: none; }
  #app .pg-landing .vs { grid-template-columns: 1fr; }
  #app .pg-landing .play { gap: 16px; margin-top: 24px; }
  #app .pg-landing .phone-note { display: block; }
  #app .pg-leagues .lg-head { grid-template-columns: minmax(0, 1fr); }
  #app .pg-settings .set { grid-template-columns: minmax(0, 1fr); } #app .pg-settings .val { grid-template-columns: minmax(0, 1fr) 56px; }
  #app .pg-settings .key { min-width: 38px !important; height: 40px; font-size: 22px; }
  #app .pg-browse .searchrow { grid-template-columns: minmax(0, 1fr); } #app .pg-browse .searchrow .field { font-size: 22px; letter-spacing: 1px; }
  #app .pg-browse .ways { grid-template-columns: minmax(0, 1fr); } #app .pg-browse .hit { flex-wrap: wrap; } #app .pg-browse .hit .end { width: 100%; justify-content: space-between; } #app .pg-browse .cell { transform: none !important; }
  #app .pg-profile .id { flex-wrap: wrap; } #app .pg-profile .stamps-grid { gap: 16px 8px; } #app .pg-profile .st { font-size: 19px; padding: 6px; }
  #app .pg-profile .st.no b { font-size: 30px; } #app .pg-profile .runs .col-m { display: none; }
  #app .pg-leagues .tierart { max-width: 160px; margin-top: 0; }
  #app .pg-leagues .ladder { height: 250px; }
  #app .pg-leagues .ladder b { font-size: 16px; letter-spacing: 1px; }
  #app .pg-leagues .top3 { gap: 8px; } #app .pg-leagues .top3 .rk { font-size: 40px; } #app .pg-leagues .top3 .card:nth-child(1) .rk { font-size: 52px; }
  #app .pg-leagues .top3 .nm { font-size: 18px; } #app .pg-leagues .top3 .rt { font-size: 22px; }
  #app .pg-landing .art .s1 { right: -8px; } #app .pg-landing .art .s2 { left: -12px; }
  #app .pg-landing .hero .tape.tr { display: none; }
  #app .pg-home .cont-grid { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  #app .pg-home .replay { flex-wrap: wrap; }
  #app .pg-home .cont-grid .cover { width: 190px; max-width: 190px; }
  #app .pg-home .league-head { grid-template-columns: 96px 1fr; }
  #app .pg-home .streak-num { font-size: 80px; }
  #app .pg-song .board .acc-col, #app .pg-song .board th.acc-col { display: none; }
  #app .pg-song .board .p { font-size: 19px; overflow-wrap: anywhere; }
  #app .av { width: 28px; height: 28px; margin-right: 6px; font-size: 15px; }
  #app .pg-song .opts .btn.opt { min-width: 0; padding: 7px 14px 4px; flex: 1 1 40%; }
  #app .pg-song .bestbox { grid-template-columns: minmax(0, 1fr); }
  #app .pg-song .bestbox .score { font-size: 44px; }
  #app .pg-results .scoreblock .ring { padding: 14px 24px 6px; }
  #app .pg-results .sub-stats { gap: 8px; } #app .pg-results .sub-stats .stat b { font-size: 28px; }
  #app .pg-results .stamps .stamp { font-size: 28px; }
  #app .pg-results .actions .btn.big { width: 100%; }
  #app .pg-results .actions { position: static; margin: 28px 0 0; padding: 22px 16px 16px; }
}
@media (hover: none) and (pointer: coarse) { #app .pg-landing .phone-note { display: block; } }
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation: none !important; transition: none !important; }
}

/* Body text weight (owner, 2026-10-10): Share Tech Mono has a single thin weight, so running text gets a hair of
   stroke in its own colour to thicken it, at the same size. Display type (Anton, Bangers), big numerals, buttons,
   stamps, tabs and board names are left alone. */
#app .note, #app .prose, #app p, #app dd, #app li, #app td, #app .label, #app .small-print, #app .legend, #app .by, #app .tag:not(.acid), #app footer.foot, #app .chip small { -webkit-text-stroke: .35px currentColor; }
#app .h-xl, #app .h-l, #app .h-m, #app .h-s, #app .btn, #app .stamp, #app .tag.acid, #app .scrawl, #app .num, #app .stat b, #app .big, #app .from-to, #app .board .r, #app .board .p, #app .key, #app .tab, #app .pill, #app .name, #app b.h-s,
#app .controls td:first-child, #app .controls td:nth-child(2), #app .steps b, #app .quiet-slip b, #app .toast, #app .drop, #app .brand, #app .top nav a, #app .chip b { -webkit-text-stroke: 0; }