/* Beats To Beats: portrait only. The shell is a phone-width column (max 480px) centered on wider screens; every
   screen fits 375x812 with no sideways scroll. The play field is a canvas (play.js); nothing here animates a CSS
   filter or blur (Gridlock 4.46.1: the iPhone redraws those every frame). Name effects animate colour and
   text-shadow only. Lane colours: cyan, magenta, amber, green. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/Fredoka-latin.woff2) format('woff2')}
:root{
  --font:'Fredoka',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ink:#0b1020;--navy:#0e1730;--panel:#152040;--panel-hi:#1b2850;--line:#2a3658;
  --cream:#fdf6e3;--muted:#a9b4d0;--amber:#ffb627;--led:#ffb627;--yellow:#ffd23f;--cyan:#4fd8ff;--magenta:#ff5fa2;--green:#3ddc84;--red:#ff4d5e;
  --lane0:#4fd8ff;--lane1:#ff5fa2;--lane2:#ffb627;--lane3:#3ddc84;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);color:var(--cream);background:var(--navy);
  -webkit-tap-highlight-color:transparent;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:var(--cyan)}
.shell{display:flex;flex-direction:column;width:100%;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;
  padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px)}
@media (min-width:600px){.shell{box-shadow:0 0 0 1px var(--line);min-height:calc(100dvh - 24px);margin:12px auto;border-radius:18px;
  padding-top:12px;padding-bottom:14px}}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 10px}
.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:700;font-size:18px;letter-spacing:.2px}
.by{font-size:11px;color:var(--muted)}
.coins{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font-weight:600}
.coins span{color:var(--amber)}
.coins b{font-weight:700;min-width:1.2em;text-align:right}

/* screens */
.screens{flex:1;display:flex;flex-direction:column;min-height:0}
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
.screen[hidden]{display:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 14px;display:flex;flex-direction:column;gap:12px;
  flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.panel-head h2{margin:0;font-size:22px;font-weight:700;line-height:1.1}
.eyebrow{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);font-weight:600}
.muted{color:var(--muted);margin:0}
.small{font-size:13px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.row.center{justify-content:center}
.latency-box b{min-width:3.6em;text-align:right;font-size:16px;padding:8px 0}
.btn{border:0;border-radius:12px;padding:12px 18px;background:var(--amber);color:var(--ink);font-weight:700;font-size:16px;line-height:1}
.btn:disabled{opacity:.5;cursor:default}
.btn.small{padding:9px 13px;font-size:14px}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.btn.danger{background:var(--red);color:#fff}
.error{color:#ff9aa5;margin:4px 0 0;font-size:13px;min-height:1em}

/* main screen */
.hero{text-align:center;padding:10px 0 6px}
.hero-bars{display:flex;justify-content:center;gap:6px;height:52px;align-items:flex-end;margin-bottom:8px}
.hero-bars i{display:block;width:12px;border-radius:6px 6px 2px 2px;animation:bar 1.1s ease-in-out infinite}
.hero-bars i:nth-child(1){background:var(--lane0);height:30px}
.hero-bars i:nth-child(2){background:var(--lane1);height:48px;animation-delay:.15s}
.hero-bars i:nth-child(3){background:var(--lane2);height:38px;animation-delay:.3s}
.hero-bars i:nth-child(4){background:var(--lane3);height:22px;animation-delay:.45s}
@keyframes bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
.hero-title{margin:0;font-size:32px;font-weight:700;letter-spacing:.3px}
.hero-sub{margin:4px 0 0;color:var(--muted);font-size:14px}
.menu{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.menu-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px 16px}
.menu-btn.play{background:linear-gradient(135deg,#243a7a,#1b2850);border-color:#3a56a8}
.menu-btn:active{background:var(--panel-hi)}
.mb-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:var(--amber);font-size:18px;flex:none}
.menu-btn.play .mb-icon{background:var(--amber);color:var(--ink)}
.mb-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mb-text b{font-size:18px}
.mb-text small{color:var(--muted);font-size:13px}
.code-prompt{margin-top:12px;border:1px solid #3a56a8;background:#172a60;border-radius:14px;padding:12px 14px;font-size:14px}
.code-prompt p{margin:0 0 8px}
.foot{margin-top:auto;padding-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.foot a{color:var(--muted)}
.game-version{margin:6px 0 0;font-size:12px}

/* lobby */
.countdown{font-size:56px;font-weight:700;text-align:center;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.seats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.seats li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel-hi);border-radius:12px}
.seats li .dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}
.seats li.bot .dot{background:var(--muted)}
.seats li.empty{opacity:.5;border:1px dashed var(--line);background:transparent}
.seats li.me{box-shadow:inset 0 0 0 1px var(--amber)}
.seats li .ready{margin-left:auto;font-size:12px;font-weight:600;color:var(--green);white-space:nowrap}
.lobby-foot{margin-top:auto;padding-top:8px}
/* Ready and Leave stay on screen when the seats fill up (owner, 2026-10-19): the lobby is exactly the screen's
   height, its panel scrolls, and the buttons stick to the panel's bottom over what scrolls under them */
.shell:has(#s-lobby:not([hidden])){height:100vh;height:100dvh}
@media (min-width:600px){.shell:has(#s-lobby:not([hidden])){height:calc(100dvh - 24px)}}
#s-lobby .lobby-foot{position:sticky;bottom:-16px;z-index:2;margin:auto -14px -16px;padding:10px 14px 14px;
  background:linear-gradient(180deg,rgba(16,15,46,0),rgba(16,15,46,.96) 30%)}
.lobby-foot .btn{min-width:7em;text-align:center}
#lobby-ready.is-ready{background:var(--green)}
.tag{font-size:11px;letter-spacing:1px;padding:2px 6px;border-radius:6px;background:var(--ink);color:var(--muted);font-weight:600}

/* play */
.screen.play{gap:6px}
.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.hud-left{display:flex;flex-direction:column;min-width:0}
.hud-song{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.hud-diff{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.hud-mid{display:flex;flex-direction:column;align-items:center;line-height:1}
.hud-score{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--amber)}
.hud-acc{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* the song's progress, and the streak multiplier beside it (its little bar fills toward the next step) */
.hud-prog{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.prog-time{font-size:11px;color:var(--muted);min-width:2.6em;text-align:center;flex:none}
.prog-track{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;min-width:0}
.prog-track i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--amber))}
.hud-mult{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;padding:3px 7px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);--mc:#a9b4d0}
.hud-mult b{font-size:17px;line-height:1;color:var(--mc)}
.hud-mult .mult-next{display:block;width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.hud-mult .mult-next i{display:block;height:100%;width:0;background:var(--mc)}
.hud-mult.max{border-color:var(--mc)}
.hud-mult.bump b{animation:multbump .25s ease-out}
@keyframes multbump{from{transform:scale(1.35)}to{transform:none}}
body.reduce-motion .hud-mult.bump b{animation:none}
.hud-quit{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:16px;flex:none}
.field-wrap{position:relative;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:var(--ink);border:1px solid var(--line)}
#field{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.field-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  background:rgba(11,16,32,.92)}
.field-cover[hidden]{display:none}
.field-cover b{font-size:20px}
.field-cover span{color:var(--muted);font-size:14px}
.rivals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 10px;font-size:12px;min-height:44px}
.rivals li{display:flex;align-items:center;gap:6px;min-width:0;font-variant-numeric:tabular-nums}
.rivals li .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rivals li b{color:var(--amber);font-weight:600}
.rivals li .combo{color:var(--muted);min-width:3em;text-align:right}
.rivals li.me .pname{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.rivals li.absent{opacity:.45}

/* watch: the list of songs in progress */
.watch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.watch-row{width:100%;text-align:left;border:1px solid var(--line);background:var(--panel-hi);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.watch-row:active{background:#223060}
.wr-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.wr-top b{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-diff{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--amber);font-weight:600}
.wr-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wr-seats{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:12px;line-height:1.3}
.wr-seats .pname{background:var(--ink)}
.wr-count{font-size:12px;color:var(--muted)}

/* spectating: the hud like the play screen's, then the 2 x 5 grid of tiles or one field large */
.screen.spectate{gap:6px}
.hud-quit.sound{color:var(--cream)}
.hud-quit.sound[aria-pressed="true"]{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.spec-time{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--amber)}
.spec-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px}
.tile{display:flex;flex-direction:column;min-height:0;min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink);padding:0;text-align:left;color:inherit}
.tile:active{border-color:var(--amber)}
.tile.absent{opacity:.45}
.tile-head{display:flex;align-items:center;gap:4px;padding:4px 7px;font-size:11px;background:var(--panel);min-height:24px;font-variant-numeric:tabular-nums}
.tile-head .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tile-head .pname:not(.flair){padding:0 3px}
.tile-head b{color:var(--amber);font-weight:600}
.tile-head .combo{color:var(--muted);min-width:2.4em;text-align:right}
.tile-field{position:relative;flex:1;min-height:0}
.tile-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.spec-focus{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.spec-focus-head{display:flex;align-items:center;gap:8px;font-size:15px;font-variant-numeric:tabular-nums;min-height:24px}
.spec-focus-head .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.spec-focus-head b{color:var(--amber)}
.spec-focus-head .combo{color:var(--muted)}
#spec-field{position:absolute;inset:0;display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.spec-hint{text-align:center;margin:0}
.spec-end{flex:1;min-height:0;display:flex;flex-direction:column}

/* results */
.grade-row{display:flex;align-items:center;gap:16px}
.grade{font-size:72px;font-weight:700;line-height:1;width:92px;text-align:center;color:var(--amber)}
.grade.g-SSS,.grade.g-SS{font-size:60px;width:auto;min-width:92px;letter-spacing:-2px}
.grade.g-SSS{color:#fff3c4;text-shadow:0 0 18px rgba(255,182,39,.75),0 0 2px #ffb627}
.grade.g-SS{color:#ffe08a;text-shadow:0 0 12px rgba(255,182,39,.45)}
.g-S{color:var(--amber)}.g-A{color:var(--green)}.g-B{color:var(--cyan)}.g-C{color:var(--cream)}.g-D{color:var(--muted)}
.gr.g-SSS,.gr.g-SS{color:#ffe08a}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badges:empty{display:none}
.badge{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:rgba(61,220,132,.16);color:var(--green)}
.badge.gold{background:rgba(255,182,39,.2);color:#ffe08a}
.badge.best{background:rgba(79,216,255,.16);color:var(--cyan)}
.res-more{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.res-more li{display:flex;justify-content:space-between;padding:6px 10px;background:var(--panel-hi);border-radius:10px;color:var(--muted)}
.res-more li b{color:var(--cream);font-variant-numeric:tabular-nums}
/* difficulty: four chips */
.diff-box{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.diff-label{font-size:13px;color:var(--muted);font-weight:600}
.diff-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.diff-chip{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 2px;font-size:14px;font-weight:600;
  color:var(--muted);min-width:0}
.diff-chip[aria-pressed="true"]{color:var(--ink);border-color:transparent}
.diff-chip:disabled{cursor:default}
.diff-chip:disabled:not([aria-pressed="true"]){opacity:.45}
.diff-chip.d-easy[aria-pressed="true"]{background:var(--green)}
.diff-chip.d-normal[aria-pressed="true"]{background:var(--cyan)}
.diff-chip.d-hard[aria-pressed="true"]{background:var(--amber)}
.diff-chip.d-expert[aria-pressed="true"]{background:var(--magenta)}
.diff-tag{margin-left:auto;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);flex:none}
.diff-tag.d-easy{color:var(--green)}.diff-tag.d-normal{color:var(--cyan)}.diff-tag.d-hard{color:var(--amber)}.diff-tag.d-expert{color:var(--magenta)}
.standings .who{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.standings .who .diff-tag{margin-left:0}
.seats li.bot.joined{animation:botin .35s ease-out}
@keyframes botin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.grade-stats{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.grade-stats b{font-size:30px;font-variant-numeric:tabular-nums}
.grade-stats span{color:var(--muted);font-size:14px}
.counts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.counts li{background:var(--panel-hi);border-radius:10px;padding:8px 4px;font-size:12px;color:var(--muted)}
.counts li b{display:block;font-size:20px;color:var(--cream);font-variant-numeric:tabular-nums}
.counts li.P b{color:var(--amber)}.counts li.G b{color:var(--green)}.counts li.O b{color:var(--cyan)}.counts li.M b{color:var(--red)}
.coin-line{margin:0;font-weight:600;color:var(--amber)}
.coin-line.none{color:var(--muted);font-weight:400}
.standings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.standings li{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel-hi);border-radius:10px;font-size:14px;font-variant-numeric:tabular-nums}
.standings li.me{box-shadow:inset 0 0 0 1px var(--amber)}
.standings .rank{width:1.5em;color:var(--muted)}
.standings .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.standings .sc{font-weight:600}
.standings .ac{color:var(--muted);min-width:4em;text-align:right}
.standings .gr{font-weight:700;min-width:2.2em;text-align:center}

/* shop */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600}
.tabs button[aria-selected="true"]{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.item{border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--panel-hi);display:flex;flex-direction:column;gap:6px}
.item.worn{border-color:var(--amber)}
.item-preview{height:56px;border-radius:10px;background:var(--ink);display:grid;place-items:center;overflow:hidden;position:relative}
.item-preview canvas{width:100%;height:100%;display:block}
.item-name{font-weight:600;font-size:14px;line-height:1.1}
.item-rarity{font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600}
.r-free{color:var(--muted)}.r-common{color:#cbd5e1}.r-uncommon{color:var(--green)}.r-rare{color:var(--cyan)}.r-epic{color:#c084fc}.r-legendary{color:var(--amber)}.r-mythical{color:#ff7ab8}.r-celestial{color:#ffe6b3}
.item .btn{margin-top:auto;padding:8px 10px;font-size:13px}

/* settings */
.field{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.field>span,.field>label{font-weight:600;font-size:15px;display:flex;justify-content:space-between}
.field input[type=text]{flex:1;min-width:0;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--ink);color:var(--cream)}
.field input[type=range]{width:100%;accent-color:var(--amber)}
.field.check{flex-direction:row;align-items:center;gap:10px}
.field.check input{width:22px;height:22px;accent-color:var(--amber)}
.field.check span{font-weight:600}
.code-box{font-size:22px;letter-spacing:1px;font-weight:700;text-align:center;padding:12px 6px;border-radius:12px;background:var(--ink);border:1px dashed var(--amber);
  font-variant-numeric:tabular-nums;word-break:break-all;-webkit-user-select:all;user-select:all}
.save-status{margin:0;font-size:13px;color:var(--muted)}
.save-status b{color:var(--cream)}
.save-status.ok b{color:var(--green)}
.save-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.save-form label{font-size:14px;color:var(--muted)}
#save-input{font-size:16px;letter-spacing:.5px;text-transform:uppercase;min-width:0;width:100%}

/* covers and dialogs */
.cover{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(11,16,32,.96);padding:24px;text-align:center}
.cover[hidden]{display:none}
.cover>div{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:320px}
.cover b{font-size:22px}
.cover span{color:var(--muted);font-size:15px}
.cover.rotate{display:none}
@media (orientation:landscape) and (max-height:520px){.cover.rotate{display:flex}}
.dlg{border:1px solid var(--line);border-radius:18px;background:#1a1d24;color:var(--cream);padding:18px 16px;width:min(92vw,400px);max-width:92vw}
.dlg::backdrop{background:rgba(5,8,16,.7)}
.dlg h3{margin:0 0 6px;font-size:20px}
.dlg input[type=text]{width:100%;font-size:16px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--ink);color:var(--cream);margin-top:8px}
.dlg .row.end{margin-top:12px}
.dlg .btn{background:var(--amber)}
/* songs: the library, the upload screen, the lobby's pick */
.upload-cta{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.upload-cta p{margin:0}
.song-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.song-row{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--panel-hi);border-radius:12px;min-width:0}
.song-row.up{border-left:3px solid var(--magenta)}
.song-row[role=button]{cursor:pointer}
.song-row[role=button]:active{background:#223060}
.song-row.rot{color:var(--muted);font-weight:600}
.sr-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.sr-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sr-len{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.sr-meta{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.sr-status{color:var(--amber);font-size:12px}
.sr-acts{display:flex;justify-content:flex-end}
.pick-dlg .pick-list{max-height:60vh;overflow-y:auto}
.song-search{display:block;width:100%;box-sizing:border-box;margin:10px 0 2px;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--ink);color:var(--cream)}
.song-search::placeholder{color:var(--muted)}
.lobby-song{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 8px;padding:8px 10px;
  background:var(--panel-hi);border-radius:12px}
.lobby-song span{min-width:0;overflow-wrap:anywhere}
.lobby-song .btn{flex:none}
.field input[type=file]{font-size:14px;max-width:100%}
.up-progress{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.up-progress i{display:block;height:100%;width:0;background:var(--cyan)}
.field.check.up-rights>span{display:block;font-weight:400;font-size:14px;line-height:1.35;min-width:0}
.up-rights input{flex:none}
.latency-row{align-items:center;gap:6px}
.latency-row .step{width:38px;padding-left:0;padding-right:0;font-size:18px;flex:none}
.latency-box{display:flex;align-items:center;gap:4px;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:0 8px;flex:none}
.latency-box input{width:3.6em;border:0;background:transparent;font-size:16px;font-weight:700;text-align:right;padding:8px 0;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.latency-box input::-webkit-outer-spin-button,.latency-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.latency-box .unit{color:var(--muted);font-size:13px}
.cal-pad{display:block;width:100%;height:260px;margin:12px 0;border-radius:18px;border:2px solid var(--amber);background:#0b1020;overflow:hidden;
  touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.cal-pad canvas{display:block;width:100%;height:100%}
.cal-pad.hit{background:var(--amber);color:var(--ink)}
.cal-result{margin:0;min-height:1.4em;font-size:15px}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 24px);transform:translateX(-50%);z-index:60;background:#1a1d24;border:1px solid var(--amber);color:var(--cream);
  padding:10px 16px;border-radius:12px;font-size:14px;max-width:min(92vw,420px);text-align:center}
.toast[hidden]{display:none}

/* names: a player wears Gridlock's flair (../gridlock/flair.css, drawn by ../gridlock/flair.js, since 1.4.0):
   .flair[data-fc] paints the letters and [data-fe] moves something round them. A name in flair keeps flair.css's
   padding and margin (the room its effect draws in), so only a plain name gets .pname's. */
.pname{display:inline-block;max-width:100%;border-radius:6px;line-height:1.3}
.pname:not(.flair){padding:0 4px}
.pname.flair{max-width:calc(100% + 14px)}
@media (prefers-reduced-motion:reduce){.hero-bars i{animation:none}}
body.reduce-motion .hero-bars i,body.reduce-motion .flair .fl-t,body.reduce-motion .flair .fl-l,body.reduce-motion .flair .fl-m,
body.reduce-motion .flair::before,body.reduce-motion .flair::after,body.reduce-motion .flair .fl-p,body.reduce-motion .flair .fl-p *,
body.reduce-motion .flair .fl-p::before{animation:none!important}
/* the shop's rarity filter under the tabs of the two flair tabs */
.tiers button{padding:5px 10px;font-size:12px}
.tiers button[aria-pressed="true"]{background:var(--panel-hi);color:var(--cream);border-color:var(--cream)}
.results .panel-head .btn{flex:none;align-self:flex-start}

/* ---- 1.6.0: the stage look (owner, 2026-10-19: "can we make this game look more like a AAA game?") ----------
   A night-stage world: deep indigo with drifting violet, magenta and cyan light, a neon grid floor running toward
   the player, heavy slanted titles, glass panels lit along the top edge, and glossy buttons. Everything that moves
   moves with transform or opacity only (no filters, no backdrop blur: the iPhone redraws those every frame), and
   Settings > Reduce motion stops it. */
:root{
  --ink:#06071a;--navy:#090b22;--panel:rgba(24,22,64,.72);--panel-hi:rgba(44,40,104,.55);--line:rgba(150,140,255,.18);
  --violet:#7c5cff;--hot:#ff3d9a;--ice:#22d3ee;
  --glass:linear-gradient(180deg,rgba(52,46,128,.62),rgba(16,15,46,.86));
  --edge:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(150,140,255,.16),0 18px 40px -22px rgba(0,0,0,.9);
}
html{background:#06071a}
body{background:transparent}   /* the stage lights (z-index -1, -2) paint between the page's colour and the content */
body::before{content:'';position:fixed;inset:-25% -25% auto -25%;height:150%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 26% at 22% 18%,rgba(124,92,255,.42),transparent 70%),
    radial-gradient(34% 24% at 82% 30%,rgba(255,61,154,.30),transparent 70%),
    radial-gradient(44% 30% at 50% 78%,rgba(34,211,238,.20),transparent 72%);
  animation:stage-drift 16s ease-in-out infinite alternate}
@keyframes stage-drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
/* the floor: a grid in perspective, rolling toward the player */
body::after{content:'';position:fixed;left:-60%;right:-60%;bottom:-60px;height:52vh;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(124,92,255,.55) 2px,transparent 2px),linear-gradient(90deg,rgba(124,92,255,.38) 2px,transparent 2px);
  background-size:56px 56px;transform-origin:50% 100%;transform:perspective(260px) rotateX(62deg) translate3d(0,0,0);
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  animation:floor-run 1.4s linear infinite;opacity:.55}
@keyframes floor-run{to{transform:perspective(260px) rotateX(62deg) translate3d(0,56px,0)}}
body.reduce-motion::before,body.reduce-motion::after{animation:none}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
@media (min-width:600px){.shell{box-shadow:0 0 0 1px var(--line),0 30px 80px -30px rgba(124,92,255,.5);background:rgba(6,7,26,.35)}}

/* type: heavy upright caps for titles, a slant for the big moments */
.brand-name{font-size:17px;letter-spacing:.6px;text-transform:uppercase}
.coins{background:var(--glass);border:0;box-shadow:var(--edge)}
.coins span{color:#ffd166;text-shadow:0 0 8px rgba(255,209,102,.8)}
.eyebrow{color:var(--ice);letter-spacing:2.5px;text-shadow:0 0 10px rgba(34,211,238,.55)}
.panel-head h2{font-size:24px;text-transform:uppercase;letter-spacing:.5px}

/* the title screen */
.hero{padding:18px 0 8px}
.hero-bars{height:58px;gap:7px}
.hero-bars i{width:13px;box-shadow:0 0 14px currentColor}
.hero-bars i:nth-child(1){color:var(--lane0)}.hero-bars i:nth-child(2){color:var(--lane1)}.hero-bars i:nth-child(3){color:var(--lane2)}.hero-bars i:nth-child(4){color:var(--lane3)}
.hero-title{font-size:44px;line-height:.95;text-transform:uppercase;letter-spacing:1px;transform:skewX(-8deg);color:#fff;
  text-shadow:0 2px 0 #ff3d9a,0 4px 0 #7c5cff,0 6px 0 #2a1a6e,0 0 28px rgba(124,92,255,.85),0 0 60px rgba(255,61,154,.35)}
.hero-sub{margin-top:12px;color:#c6c9f2;letter-spacing:.2px}

/* buttons: glossy, lit from above, pressed in when tapped */
.btn{background:linear-gradient(180deg,#ffe08a 0%,#ffb627 48%,#ff8f1f 100%);color:#1a0f00;text-transform:uppercase;letter-spacing:.6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(120,50,0,.25),0 8px 20px -8px rgba(255,159,28,.8);
  transition:transform .08s ease-out}
.btn:active:not(:disabled){transform:translateY(2px) scale(.98)}
.btn.ghost{background:rgba(255,255,255,.04);color:#e6e8ff;box-shadow:inset 0 0 0 1px rgba(170,160,255,.35)}
.btn.danger{background:linear-gradient(180deg,#ff7a88,#ff3d5a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -8px rgba(255,61,90,.8)}
#lobby-ready.is-ready{background:linear-gradient(180deg,#9dffc6,#3ddc84 50%,#1fae63);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px -8px rgba(61,220,132,.9)}

/* the menu: glass cards, a coloured tile per item, the big Play card lit up */
.menu{gap:10px}
.menu-btn{position:relative;overflow:hidden;background:var(--glass);border:0;box-shadow:var(--edge);border-radius:18px;transition:transform .1s ease-out}
.menu-btn::after{content:'›';margin-left:auto;font-size:26px;line-height:1;color:rgba(200,200,255,.45)}
.menu-btn:active{transform:scale(.98);background:var(--glass)}
.mb-icon{width:44px;height:44px;border-radius:14px;color:#fff;font-size:19px;
  background:linear-gradient(145deg,#3b2fa0,#1a1650);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(150,140,255,.25)}
#btn-songs .mb-icon{background:linear-gradient(145deg,#ff5fa2,#8a1d5a)}
#btn-shop .mb-icon{background:linear-gradient(145deg,#ffb627,#a5530a)}
#btn-settings .mb-icon{background:linear-gradient(145deg,#4fd8ff,#145a8a)}
#btn-watch .mb-icon{background:linear-gradient(145deg,#3ddc84,#11643a)}
.mb-text b{font-size:19px;text-transform:uppercase;letter-spacing:.6px}
.mb-text small{color:#b9bce6}
.menu-btn.play{padding:18px 16px;background:linear-gradient(120deg,#ff3d9a 0%,#7c5cff 55%,#22d3ee 120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 34px -12px rgba(255,61,154,.75),0 0 0 1px rgba(255,255,255,.12)}
.menu-btn.play:active{background:linear-gradient(120deg,#ff3d9a 0%,#7c5cff 55%,#22d3ee 120%)}
.menu-btn.play .mb-icon{background:#fff;color:#7c2cff;box-shadow:0 0 18px rgba(255,255,255,.7)}
.menu-btn.play .mb-text b{font-size:24px;transform:skewX(-8deg);text-shadow:0 2px 0 rgba(60,0,80,.35)}
.menu-btn.play .mb-text small{color:rgba(255,255,255,.88)}
.menu-btn.play::after{color:#fff}
/* a sheen sweeping across the Play card now and then */
.menu-btn.play::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(0) skewX(-18deg);
  animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(560%) skewX(-18deg)}}
body.reduce-motion .menu-btn.play::before{animation:none;opacity:0}

/* difficulty: a lit segmented switch */
.diff-label{text-transform:uppercase;letter-spacing:1.5px;font-size:12px;color:#a8acdc}
.diff-chip{background:rgba(255,255,255,.04);border:0;box-shadow:inset 0 0 0 1px rgba(150,140,255,.2);text-transform:uppercase;font-size:13px;letter-spacing:.5px}
.diff-chip[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px -4px rgba(255,255,255,.6)}
.diff-chip.d-easy[aria-pressed="true"]{background:linear-gradient(180deg,#8dffbf,#3ddc84);color:#04210f}
.diff-chip.d-normal[aria-pressed="true"]{background:linear-gradient(180deg,#a5efff,#4fd8ff);color:#03202b}
.diff-chip.d-hard[aria-pressed="true"]{background:linear-gradient(180deg,#ffe08a,#ffb627);color:#2a1700}
.diff-chip.d-expert[aria-pressed="true"]{background:linear-gradient(180deg,#ff9cc6,#ff3d9a);color:#2b0016}

/* panels and rows */
.panel{background:var(--glass);border:0;box-shadow:var(--edge);border-radius:22px}
.seats li,.standings li,.res-more li,.song-row,.lobby-song,.credits-list li,.counts li,.item,.watch-row{background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(150,140,255,.14)}
.item{border:0}
.seats li{border-left:3px solid var(--violet)}
.seats li.me{box-shadow:inset 0 0 0 1px rgba(255,209,102,.7),0 0 18px -6px rgba(255,209,102,.8)}
.seats li.bot{border-left-color:rgba(160,165,210,.4)}
.standings li.me{box-shadow:inset 0 0 0 1px rgba(255,209,102,.7)}
.item.worn{box-shadow:inset 0 0 0 1px #ffd166,0 0 20px -8px #ffd166}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,#ffe08a,#ffb627);border-color:transparent;box-shadow:0 0 14px -4px #ffb627}

/* the lobby clock: a big number in a turning ring of the lane colours */
.countdown{position:relative;isolation:isolate;flex:none;width:128px;height:128px;margin:6px auto;display:grid;place-items:center;font-size:58px;color:#fff;
  text-shadow:0 0 18px rgba(124,92,255,.9),0 3px 0 #2a1a6e}
.countdown::before{content:'';position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,#120f38 0 60%,transparent 61%),conic-gradient(#22d3ee,#7c5cff,#ff3d9a,#ffb627,#3ddc84,#22d3ee);
  box-shadow:0 0 30px -4px rgba(124,92,255,.8);animation:ring-turn 4s linear infinite}
@keyframes ring-turn{to{transform:rotate(360deg)}}
body.reduce-motion .countdown::before{animation:none}

/* the play screen: a glass HUD, a glowing progress bar, the field with a lit edge */
.hud{padding:4px 2px}
.hud-song{text-transform:uppercase;letter-spacing:.4px}
.hud-diff{color:var(--ice)}
.hud-score{font-size:28px;color:#fff;transform:skewX(-8deg);text-shadow:0 2px 0 #ff3d9a,0 0 16px rgba(255,61,154,.6)}
.prog-track{height:7px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(150,140,255,.2)}
.prog-track i{background:linear-gradient(90deg,#22d3ee,#7c5cff,#ff3d9a,#ffb627);box-shadow:0 0 12px rgba(255,61,154,.8)}
.hud-mult{background:var(--glass);border:0;box-shadow:var(--edge)}
.hud-mult.max{box-shadow:var(--edge),0 0 18px -4px var(--mc)}
.hud-quit{background:var(--glass);border:0;box-shadow:var(--edge);color:#d8dbff}
.field-wrap{background:#05061a;border:0;border-radius:18px;box-shadow:0 0 0 1px rgba(150,140,255,.22),0 0 40px -12px rgba(124,92,255,.7)}

/* the scoreboard in the field's top-left corner: every player by score, rows sliding to their new places */
.board{position:absolute;top:8px;left:8px;width:min(46%,176px);margin:0;padding:0;list-style:none;pointer-events:none;z-index:1;
  font-size:12px;font-variant-numeric:tabular-nums}
.board li{position:absolute;left:0;right:0;top:0;height:19px;display:flex;align-items:center;gap:5px;padding:0 6px 0 0;border-radius:6px;
  background:linear-gradient(90deg,rgba(10,10,36,.8),rgba(10,10,36,.4));transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}
.board li .rank{flex:none;width:18px;height:19px;display:grid;place-items:center;border-radius:6px 0 0 6px;font-weight:700;font-size:11px;
  background:rgba(124,92,255,.55);color:#fff}
.board li.lead .rank{background:linear-gradient(180deg,#ffe08a,#ffb627);color:#2a1700}
.board li .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:19px}
.board li .pname.flair{max-width:none;padding:0 2px;margin:0}
.board li b{flex:none;color:#ffd166;font-weight:600}
.board li.me{background:linear-gradient(90deg,rgba(255,61,154,.6),rgba(124,92,255,.3));box-shadow:inset 0 0 0 1px rgba(255,209,102,.6)}
.board li.absent{opacity:.45}
body.reduce-motion .board li{transition:none}

/* results: the grade as the hero, lit */
.grade{font-size:84px;transform:skewX(-8deg);text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 26px currentColor}
.grade.g-SSS,.grade.g-SS{font-size:66px}
.counts li b{font-size:22px}
.dlg{background:linear-gradient(180deg,#221c5a,#0e0c2e);border:0;box-shadow:var(--edge),0 30px 80px -20px rgba(0,0,0,.9)}
.toast{background:#191446;border-color:var(--violet);box-shadow:0 0 24px -6px rgba(124,92,255,.8)}