@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/ArchivoBlack-Regular.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/plexmono-600.woff2') format('woff2')}
/* DOPE BASH on a desktop: one game language on top of the art bible's kit (bash.html). White
   type with a hard black outline, square navy panels with a light line and a hard shadow, key-cap
   buttons with words, orange for the logo, the clock and the selected key, gold for cups only.
   Sizes use --k (1 px of a 1440 x 900 screen) and --side (the corner columns). */

:root { --corner: max(calc(8 * var(--k)), 6px); }
/* ---- keys and focus: one selected look for the keyboard, the controller (.focus) and the mouse
   or DOM focus (:focus) */
button { cursor: pointer; }
.cap { font-size: clamp(16px, calc(24 * var(--k)), 34px); padding: calc(13 * var(--k)) calc(24 * var(--k)); min-height: 44px; }
.cap.small { font-size: clamp(13px, calc(18 * var(--k)), 26px); padding: calc(9 * var(--k)) calc(16 * var(--k)); }
.cap.focus, .cap:focus-visible { background: var(--orange); outline-color: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(0,0,0,.75); }
.cap:focus { outline-color: #fff; }
/* a key that would start a match before a press counts (bash-intent.js): dim, with a bar that
   fills while the screen settles (0.9 s) */
.arming { position: relative; filter: saturate(.25) brightness(.75); cursor: progress; }
.arming::after { content: ""; position: absolute; left: 6px; bottom: 6px; height: 5px; width: 0; background: #fff; box-shadow: 0 0 0 1px #000; animation: arming .9s linear forwards; }
body.reduced .arming::after { width: calc(100% - 12px); }
@keyframes arming { to { width: calc(100% - 12px); } }

/* ---- the title: a column of entries, each a key and its caption (what the key starts). PLAY SOLO
   and PLAY WITH FRIENDS are the two primaries, of one size; the column takes any number of them */
.title .play { bottom: max(calc(62 * var(--k)), 40px); display: grid; grid-auto-flow: row; justify-items: stretch; gap: calc(14 * var(--k)); width: max-content; max-width: calc(100vw - 2 * var(--side)); }
.title .play .entry { display: grid; justify-items: stretch; gap: calc(6 * var(--k)); }
.title .play .entry > .cap { font-size: clamp(17px, calc(24 * var(--k)), 38px); padding: calc(12 * var(--k)) calc(30 * var(--k)); min-width: 0; animation: none; }
.title .play .entry > .cap.press { font-size: clamp(20px, calc(32 * var(--k)), 50px); padding-block: calc(15 * var(--k)); }
.title .cap-note { display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--k)); min-height: 28px; }
.title .play small, .title [data-k="me"] { font: 600 max(13px, calc(14 * var(--k)))/1.2 var(--m); letter-spacing: .1em; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.title .logo { top: max(calc(44 * var(--k)), 24px); }
.title .logo b { font-size: clamp(64px, calc(150 * var(--k)), 230px); -webkit-text-stroke-width: clamp(9px, calc(15 * var(--k)), 22px); }
.title .logo small { margin-top: calc(12 * var(--k)); font-size: clamp(20px, calc(38 * var(--k)), 56px); }
.title .logo .goal { margin-top: calc(16 * var(--k)); font-size: clamp(13px, calc(18 * var(--k)), 26px); }
.title .play .change { font-size: max(12px, calc(14 * var(--k))); padding: 5px 10px; min-height: 32px; -webkit-text-stroke: 3px #000; }
.title [data-k="me"] { display: block; text-align: center; }
.title .foot small { font: 400 max(12px, calc(14 * var(--k)))/1 var(--f); letter-spacing: .08em; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.ml small, .ml em { font-size: max(12px, calc(13 * var(--k))); color: #DCE6F8; }
.ml em { color: var(--gold); }

/* ---- the corner columns: left, the M key's mark (sound off); right, the pause or room key and
   the connection's quiet mark. Both stay out of the HUD row and the hints */
.pausebtn, .net-key { position: absolute; left: auto; right: var(--corner); top: calc(34 * var(--k)); width: calc(var(--side) - 2 * var(--corner) - 2px); min-height: 48px; padding: 2px 0; display: grid; justify-items: center; align-content: start; gap: calc(6 * var(--k)); background: none; border: 0; box-shadow: none; outline: none; font: inherit; }
.net-key { position: static; width: 100%; }
:is(.pausebtn, .net-key, .mutemark) span { font: 400 max(12px, calc(12 * var(--k)))/1.05 var(--f); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; letter-spacing: .05em; text-align: center; }
:is(.pausebtn, .net-key) kbd { min-width: 34px; height: 32px; }
:is(.pausebtn, .net-key):is(:hover, :focus-visible, .focus) kbd { background: var(--orange); color: #000; outline: 3px solid #fff; }
.online-playing .pausebtn { display: none; }
.mutemark { position: fixed; z-index: 35; left: var(--corner); top: calc(34 * var(--k)); width: calc(var(--side) - 2 * var(--corner) - 2px); display: grid; justify-items: center; gap: calc(6 * var(--k)); pointer-events: none; }
.mutemark kbd { min-width: 34px; height: 32px; background: var(--red); color: #fff; }
.mutemark span { font-size: max(11px, calc(12 * var(--k))); }

/* ---- coat select and difficulty */
.select .hint { font: 600 max(13px, calc(15 * var(--k)))/1.35 var(--m); color: var(--label); background: var(--navy2); border: 3px solid #000; outline: 2px solid var(--line); outline-offset: -5px; padding: 10px 16px; }
.lvl small { font-size: max(13px, calc(15 * var(--k))); color: var(--label); }
.lvl.focus small { color: #000; }

/* ---- how to play: the panel, and the card that ends it */
.tpanel small { font-size: max(13px, calc(14 * var(--k))); color: var(--label); }
.tpanel p { font-size: max(15px, calc(24 * var(--k))); }
.tpanel { left: var(--side); transform: none; width: min(980px, calc(100vw - 2 * var(--side) - 150px)); }
.tut .skip { top: max(calc(200 * var(--u)), 86px); right: var(--side); }
.tutdone.on p { margin: 0; text-align: center; font: 400 max(16px, calc(26 * var(--k)))/1.25 var(--f); color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.tutdone .nav { position: static; transform: none; }

/* ---- the round card and the results: the cupboard counts cups with the HUD's trophy */
:is(.roundcard, .results) small { font-size: max(13px, calc(15 * var(--k))); color: var(--label); }
.cupboard { gap: calc(8 * var(--k)); padding: calc(12 * var(--k)) calc(14 * var(--k)); background: rgba(11,21,48,.94); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line), 6px 6px 0 2px rgba(0,0,0,.55); }
.cb { position: relative; gap: calc(12 * var(--k)); padding: calc(4 * var(--k)) calc(8 * var(--k)) calc(4 * var(--k)) calc(4 * var(--k)); }
.cb img { width: max(30px, calc(44 * var(--k))); height: max(30px, calc(44 * var(--k))); border: 3px solid var(--c); outline: 2px solid #000; }
.cb b { color: #fff; -webkit-text-stroke: 5px #000; font-size: max(15px, calc(24 * var(--k))); min-width: calc(150 * var(--k)); }
.cb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(6 * var(--k)); background: var(--c); display: none; }
.cb em { font: 400 max(11px, calc(13 * var(--k)))/1 var(--f); font-style: normal; color: #000; background: #fff; border: 2px solid #000; padding: 4px 7px; letter-spacing: .06em; }
.cb .cups { margin-left: auto; display: flex; gap: calc(4 * var(--k)); }
.cb .cups i { width: max(22px, calc(30 * var(--k))); height: max(22px, calc(30 * var(--k))); border: 0; background: none; }
.cb.me { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 6px 6px 0 2px var(--orange); }
.md { opacity: .7; } .md.got { opacity: 1; }
.md b { font-size: max(13px, calc(16 * var(--k))); }
.md small { font-size: max(12px, calc(12 * var(--k))) !important; color: var(--label) !important; }
.streak { font-size: max(13px, calc(15 * var(--k))); color: var(--gold); text-shadow: 2px 2px 0 #000; }
.results .taphint { color: var(--label); }
/* a short screen: the medals keep their names; only a new medal keeps its line */
@media (max-height: 780px) { .results.on { gap: 10px; } .earned .md { padding: 6px 8px; } .earned .md small { display: none; } .earned .md.new small { display: block; } .cb img { width: 30px; height: 30px; } .cb { padding-block: 2px; } }

/* the round card stands under the HUD row: the plates stay readable beside it */
.roundcard.on:not(.tutdone) { top: calc(150 * var(--k)); }

/* ---- pause and settings: a slider row (the cells, then the value in words), a switch row (an
   ON or OFF plate), an action row (OPEN ▸) */
.settings .list { min-width: min(86vw, 640px); }
@media (max-height: 700px) { .settings.on { gap: 10px; } .settings > b { font-size: 34px; } .settings .list { gap: 7px; } .settings .row2 { min-height: 38px; padding-block: 6px; } .settings .ctl { padding: 5px 10px; } .settings .ctl span { line-height: 1.15; } }
.row2 { width: 100%; text-align: left; }
.row2 > span { flex: 1; }
.slider .vol { cursor: pointer; padding: 6px 0; touch-action: none; }
.slider .vol u { width: max(14px, calc(18 * var(--k))); height: max(20px, calc(24 * var(--k))); border: 2px solid #000; }
.slider .vol u:first-child { border-left-width: 4px; } .slider .vol u:last-child { border-right-width: 4px; }
.slider .val { font: 400 max(14px, calc(18 * var(--k)))/1 var(--f); font-style: normal; min-width: 3.6em; text-align: right; color: #fff; }
.switch .tog, .act .tog { min-width: 3.4em; justify-content: center; padding: 4px 8px; font-size: max(13px, calc(16 * var(--k))); border: 2px solid #000; background: #1B2440; color: #C9D6EE; -webkit-text-stroke: 0; }
.switch.on .tog { background: var(--green); color: #000; }
.act .tog { background: #F2F4FF; color: #000; }
.mutenote { margin: 0; display: flex; align-items: center; gap: 10px; font: 400 max(13px, calc(15 * var(--k)))/1.2 var(--f); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.mutenote kbd { background: var(--red); color: #fff; }
.ctl { font-size: max(13px, calc(13 * var(--k))); color: var(--label); background: var(--navy2); }
.ctl small { color: var(--orange); }
.ctl.cur { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }

/* ---- the connection: quiet in the corner when good, a loud banner under the HUD when not */
.online-status { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.net-corner { position: absolute; right: var(--corner); top: calc(34 * var(--k)); width: calc(var(--side) - 2 * var(--corner) - 2px); display: grid; justify-items: center; gap: calc(8 * var(--k)); pointer-events: auto; }
.net-sig { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.net-sig i { width: 4px; background: #3A4466; border: 1px solid #000; }
.net-sig i:nth-child(1) { height: 40%; } .net-sig i:nth-child(2) { height: 60%; } .net-sig i:nth-child(3) { height: 80%; } .net-sig i:nth-child(4) { height: 100%; }
.net-sig[data-bars="1"] i:nth-child(-n+1), .net-sig[data-bars="2"] i:nth-child(-n+2) { background: var(--orange); }
.net-sig[data-bars="3"] i:nth-child(-n+3), .net-sig[data-bars="4"] i { background: #F2F4FF; }
.net-banner { display: none; position: absolute; left: 50%; top: calc(150 * var(--k)); translate: -50% 0; max-width: calc(100vw - 2 * var(--side)); align-items: center; gap: calc(14 * var(--k)); padding: calc(12 * var(--k)) calc(22 * var(--k)) calc(12 * var(--k)) calc(14 * var(--k)); background: #2A0B09; border: 3px solid #000; box-shadow: 0 0 0 3px var(--orange), 7px 7px 0 3px rgba(0,0,0,.6); animation: drop .18s steps(3, end); }
.online-status:is(.interrupted, .shown) .net-banner { display: flex; }
/* watching or sitting out: a calm banner (no fault) in the ice colours */
.online-status.info .net-banner { background: rgba(11,21,48,.96); box-shadow: 0 0 0 3px var(--line), 7px 7px 0 3px rgba(0,0,0,.6); }
.online-status.info .net-ic { background: var(--ice); color: #000; }
.online-status.info .net-message small { color: var(--label); }
.online-status.lost .net-banner { box-shadow: 0 0 0 3px var(--red), 7px 7px 0 3px rgba(0,0,0,.6); }
.net-ic { flex: none; display: grid; place-items: center; width: max(30px, calc(40 * var(--k))); height: max(30px, calc(40 * var(--k))); background: var(--orange); border: 3px solid #000; font: 400 max(20px, calc(26 * var(--k)))/1 var(--f); color: #000; }
.lost .net-ic { background: var(--red); color: #fff; }
.net-message b { display: block; font: 400 max(18px, calc(28 * var(--k)))/1 var(--f); color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; letter-spacing: .03em; white-space: nowrap; }
.net-message small { display: block; margin-top: 6px; font: 600 max(13px, calc(15 * var(--k)))/1.25 var(--m); color: #FFE2C4; }
.net-message small:empty { display: none; }
@keyframes drop { from { translate: -50% -12px; opacity: 0; } }

/* ---- the room: a dialog over the game's own scene (no blur, no dashboard) */
.online-shell { position: fixed; inset: 0; z-index: 30; pointer-events: auto; overflow: auto; font-family: var(--f); color: #fff; }
.online-panel { position: absolute; color: #fff; }
.online-panel :is(h1, p) { margin: 0; }
.room-brand { display: block; font: 400 max(22px, calc(34 * var(--k)))/.86 var(--f); color: var(--orange); -webkit-text-stroke: 5px var(--brown); paint-order: stroke fill; text-shadow: 3px 3px 0 rgba(0,0,0,.6); transform: rotate(-3deg); }
.room-brand span { display: block; }
.online-tag, .eyebrow { font: 400 max(12px, calc(14 * var(--k)))/1.2 var(--f); letter-spacing: .08em; color: var(--ice); -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.online-panel header { display: flex; align-items: center; gap: calc(18 * var(--k)); }
.online-panel h1 { font: 400 max(28px, calc(52 * var(--k)))/1.02 var(--f); color: #fff; -webkit-text-stroke: 7px #000; paint-order: stroke fill; text-shadow: 4px 4px 0 rgba(0,0,0,.6); letter-spacing: .01em; overflow-wrap: anywhere; }
.online-panel h1 em { font-style: normal; color: var(--orange); }
.online-panel p { font: 600 max(14px, calc(15 * var(--k)))/1.5 var(--m); color: var(--label); text-shadow: 2px 2px 0 #000; }
.online-panel p.face { font: 400 max(17px, calc(26 * var(--k)))/1 var(--f); color: var(--orange); -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
/* the room's keys: the kit's key caps; the main action is the big one */
:is(.room-primary, .room-secondary, .room-close, .invite-copy) { font: 400 max(15px, calc(20 * var(--k)))/1.1 var(--f); color: #fff; background: var(--navy2); border: 3px solid #000; outline: 3px solid var(--line); outline-offset: -6px; box-shadow: 4px 4px 0 rgba(0,0,0,.7); -webkit-text-stroke: 4px #000; paint-order: stroke fill; letter-spacing: .03em; padding: calc(12 * var(--k)) calc(20 * var(--k)); min-height: 44px; text-align: center; }
.room-primary { font-size: max(18px, calc(28 * var(--k))); padding: calc(15 * var(--k)) calc(28 * var(--k)); }
:is(.room-primary, .room-secondary, .room-close, .invite-copy):is(:focus, :hover:not(:disabled)) { background: var(--orange); outline-color: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(0,0,0,.75); }
:is(.room-primary, .room-secondary):disabled { cursor: default; background: #141C33; color: #C9D6EE; outline: 3px dashed #5D6E8F; box-shadow: none; transform: none; }
.online-panel label { display: grid; gap: 8px; font: 400 max(12px, calc(14 * var(--k)))/1.2 var(--f); letter-spacing: .08em; color: var(--ice); }
.online-panel input, .menu-feedback input { width: 100%; box-sizing: border-box; border: 3px solid #000; outline: 2px solid var(--line); outline-offset: -5px; background: #060B1C; padding: 12px 14px; color: #fff; font: 400 max(16px, calc(20 * var(--k)))/1.2 var(--f); letter-spacing: .04em; text-transform: uppercase; border-radius: 0; user-select: text; -webkit-user-select: text; }
.online-panel input::placeholder { color: #7D8DAE; }
.online-panel input:focus, .menu-feedback input:focus { outline: 3px solid var(--orange); outline-offset: -3px; }
.online-panel input[aria-invalid="true"] { outline: 3px solid var(--red); }
.code-error, .room-error { font: 400 max(13px, calc(15 * var(--k)))/1.35 var(--f); letter-spacing: .03em; color: #FFE2C4; -webkit-text-stroke: 3px #000; paint-order: stroke fill; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.code-error { color: #FFB4A8; } .code-error:not(:empty)::before { content: "! "; }
.code-error:empty, .room-error:empty { display: none; }
.online-panel footer { margin-top: calc(16 * var(--k)); padding-top: calc(12 * var(--k)); border-top: 2px solid rgba(159,179,217,.35); }
.keys { display: flex; flex-wrap: wrap; gap: calc(8 * var(--k)) calc(18 * var(--k)); }
.keys span { display: flex; align-items: center; gap: 4px; font: 400 max(12px, calc(14 * var(--k)))/1 var(--f); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.keys kbd { min-width: 28px; height: 28px; margin-right: 2px; }
.keys kbd.wide { min-width: 64px; }

/* the entry: a kit panel on the left; DOPE stands on the floe beside it */
.online-panel[data-stage="entry"] { left: var(--side); top: 50%; translate: 0 -50%; width: min(max(600px, calc(600 * var(--k))), calc(100vw - 2 * var(--side))); max-height: calc(100vh - 24px); overflow: auto; padding: calc(22 * var(--k)) calc(28 * var(--k)) calc(18 * var(--k)); background: rgba(11,21,48,.95); border: 3px solid #000; box-shadow: 0 0 0 3px var(--line), 8px 8px 0 3px rgba(0,0,0,.6); }
[data-stage="entry"] header { margin-bottom: calc(18 * var(--k)); }
[data-stage="entry"] .room-close { margin-left: auto; }
.online-entry { display: grid; gap: calc(18 * var(--k)); }
.room-intro { display: grid; gap: calc(10 * var(--k)); }
.entry-form { display: grid; gap: calc(12 * var(--k)); }
.entry-form > small { font: 600 max(13px, calc(14 * var(--k)))/1.4 var(--m); color: var(--label); }
.form-divider { display: flex; gap: 10px; align-items: center; font: 400 max(12px, calc(13 * var(--k)))/1 var(--f); letter-spacing: .08em; color: var(--label); }
.form-divider::before, .form-divider::after { content: ''; height: 2px; background: rgba(159,179,217,.45); flex: 1; }
.join-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.join-form .code-error { grid-column: 1 / -1; }
.join-form label { grid-column: 1; } .join-form button { grid-column: 2; grid-row: 1; min-width: calc(110 * var(--k)); }

/* the lobby on the stage: the four dogs stand on the select plinths, a seat plate under each */
.online-panel.is-stage { inset: 0; }
.is-stage header { position: absolute; left: var(--side); right: var(--side); top: calc(22 * var(--k)); }
.is-stage .room-close { margin-left: auto; }
.is-stage .room-heading > div { position: absolute; left: var(--side); top: calc(84 * var(--k)); display: grid; gap: calc(6 * var(--k)); max-width: 52vw; }
.is-stage .eyebrow { display: none; }
.is-stage h1 { font-size: max(26px, calc(44 * var(--k))); }
.is-stage .invite-copy { position: absolute; right: var(--side); top: calc(96 * var(--k)); }
.is-stage .room-seats { position: absolute; inset: 0; pointer-events: none; }
.is-stage .room-seat { position: absolute; top: var(--seats-top, 62%); translate: -50% 0; }
.is-stage .room-seat img, .is-stage .seat-score { display: none; }
.is-stage .room-bottom { position: absolute; left: var(--side); right: var(--side); bottom: calc(24 * var(--k)); }
.is-stage .room-error { position: absolute; right: var(--side); bottom: calc(24 * var(--k) + max(64px, 98 * var(--k))); max-width: 60vw; text-align: right; }
.is-stage footer { display: none; }
/* the ticket: the room code, big; a click copies the invite link */
.invite-copy { display: grid; justify-items: start; gap: 6px; padding: calc(10 * var(--k)) calc(16 * var(--k)); -webkit-text-stroke: 0; }
.invite-copy small { font: 600 max(12px, calc(13 * var(--k)))/1 var(--m); letter-spacing: .14em; color: var(--label); text-shadow: none; }
.invite-copy b { font: 400 max(24px, calc(36 * var(--k)))/1 var(--f); letter-spacing: .12em; color: var(--gold); -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.invite-copy span { font: 400 max(13px, calc(15 * var(--k)))/1 var(--f); letter-spacing: .05em; color: #000; background: #F2F4FF; border: 2px solid #000; padding: 6px 9px; box-shadow: 0 3px 0 #000; }
.invite-copy:is(:focus, :hover) b { color: #fff; }
.invite-copy:is(:focus, :hover) small { color: #000; }
/* a seat plate: who and HOST on tabs, the name on a strip in the coat colour, READY in words */
.room-seat { position: relative; min-width: 0; background: rgba(11,21,48,.94); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line), 5px 5px 0 2px rgba(0,0,0,.55); }
.room-seat.is-you { box-shadow: 0 0 0 3px #fff, 7px 7px 0 3px var(--orange); }
.seat-top { position: absolute; left: 6px; bottom: calc(100% + 3px); display: flex; gap: 4px; }
.seat-top small { display: none; }
:is(.seat-role, .seat-host) { font: 400 max(11px, calc(13 * var(--k)))/1 var(--f); letter-spacing: .06em; padding: 5px 8px 4px; border: 2px solid #000; border-bottom: 0; background: var(--navy2); color: #fff; white-space: nowrap; }
.seat-role[data-who="you"] { background: #fff; color: #000; }
.seat-role[data-who="bot"] { background: #1B2440; color: #C9D6EE; }
.seat-role[data-who="away"] { background: repeating-linear-gradient(135deg, #7A1D16 0 5px, #2A0B09 5px 10px); }
.seat-host { background: var(--orange); color: #000; }
.seat-sit { font: 400 max(11px, calc(13 * var(--k)))/1 var(--f); letter-spacing: .06em; padding: 5px 8px 4px; border: 2px solid #000; border-bottom: 0; background: #fff; color: #000; white-space: nowrap; }
.room-seat.is-sitting .seat-status { color: var(--label); }
.room-seat.is-sitting .seat-status::before { display: none; }
.seat-info { display: grid; min-width: 0; }
.seat-name { display: block; padding: 0 10px; height: max(28px, calc(36 * var(--k))); line-height: max(28px, calc(36 * var(--k))); background: var(--seat); border-bottom: 3px solid #000; font: 400 max(13px, calc(21 * var(--k)))/max(28px, calc(36 * var(--k))) var(--f); color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 2px 2px 0 rgba(0,0,0,.5); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-align: center; }
.seat-tag { display: block; padding: 5px 10px 0; font: 600 max(12px, calc(13 * var(--k)))/1 var(--m); letter-spacing: .1em; color: var(--label); text-align: center; }
.seat-coat { display: none; }
.seat-status { padding: calc(10 * var(--k)) 10px calc(11 * var(--k)); font: 400 max(13px, calc(17 * var(--k)))/1 var(--f); letter-spacing: .04em; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; text-align: center; white-space: nowrap; }
.room-seat.is-ready .seat-status { color: var(--green); }
.room-seat:not(.is-ready) .seat-status::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .45em; border: 3px dashed #fff; vertical-align: -.05em; }
.room-seat.is-away .seat-status { color: #FFC07A; }
.seat-score { display: flex; gap: 4px; }
.online-panel .seat-note { margin: 0; text-shadow: none; font: 400 max(13px, calc(16 * var(--k)))/1.2 var(--f); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; text-align: center; }
.is-stage .seat-note { position: absolute; left: 0; right: 0; top: var(--note-top, 80%); }
[data-stage="lobby"]:not(.is-stage) .seat-note { grid-column: 1 / -1; }
[data-stage="results"] .seat-note { display: none; }
.seat-score:empty { display: none; }
/* a rating change on the results (the leaderboard): up, down, or a reason (none) */
.seat-delta { font: 400 max(13px, calc(16 * var(--k)))/1 var(--f); letter-spacing: .03em; -webkit-text-stroke: 4px #000; paint-order: stroke fill; white-space: nowrap; }
.seat-delta.up { color: var(--green); } .seat-delta.up::before { content: "▲ "; }
.seat-delta.down { color: #FF8A7E; } .seat-delta.down::before { content: "▼ "; }
.seat-delta.none { color: var(--label); font-size: max(12px, calc(13 * var(--k))); }
/* the bottom bar: the match line left; the ranked badge, the waiting line and the action right */
.room-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(18 * var(--k)); }
.room-bottom p { display: grid; gap: 6px; }
.room-bottom p b { font: 400 max(15px, calc(20 * var(--k)))/1.1 var(--f); color: var(--ice); -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.room-bottom p span { font: 600 max(12px, calc(13 * var(--k)))/1.3 var(--m); letter-spacing: .08em; color: #fff; }
[data-room="ranked"] { justify-self: end; font: 400 max(13px, calc(15 * var(--k)))/1 var(--f); letter-spacing: .05em; color: #000; background: var(--gold); border: 2px solid #000; padding: 6px 9px; -webkit-text-stroke: 0; }
.room-action { display: grid; gap: calc(10 * var(--k)); justify-items: end; text-align: right; max-width: 60%; }
.room-action > span { font: 400 max(13px, calc(15 * var(--k)))/1.3 var(--f); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; overflow-wrap: anywhere; }
.room-action button { min-width: calc(300 * var(--k)); }

/* the lobby as a flat panel (a small screen, or no stage): the same pieces in a kit panel */
.online-panel[data-stage="lobby"]:not(.is-stage) { left: 50%; top: 50%; translate: -50% -50%; width: min(1100px, calc(100vw - 2 * var(--side))); max-height: calc(100vh - 24px); overflow: auto; padding: calc(20 * var(--k)) calc(26 * var(--k)) calc(16 * var(--k)); background: rgba(11,21,48,.95); border: 3px solid #000; box-shadow: 0 0 0 3px var(--line), 8px 8px 0 3px rgba(0,0,0,.6); }
[data-stage="lobby"]:not(.is-stage) header { margin-bottom: calc(14 * var(--k)); }
[data-stage="lobby"]:not(.is-stage) .room-close { margin-left: auto; }
[data-stage="lobby"]:not(.is-stage) .room-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
[data-stage="lobby"]:not(.is-stage) .room-heading > div { display: grid; gap: 6px; }
[data-stage="lobby"]:not(.is-stage) .room-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: calc(34 * var(--k)) 0 calc(18 * var(--k)); }
[data-stage="lobby"]:not(.is-stage) .room-seat img { display: block; width: 100%; max-width: 96px; aspect-ratio: 1; margin: 8px auto 0; image-rendering: pixelated; border: 3px solid var(--seat); outline: 2px solid #000; }
[data-stage="lobby"]:not(.is-stage) .room-error { margin-top: 10px; }
@media (max-height: 700px) { [data-stage="lobby"]:not(.is-stage) .room-seat img { display: none; } [data-stage="lobby"]:not(.is-stage) .seat-name { margin-top: 0; } [data-stage="lobby"]:not(.is-stage) h1 { font-size: 28px; } [data-stage="lobby"]:not(.is-stage) .room-seats { margin: 26px 0 10px; row-gap: 8px; } [data-stage="lobby"]:not(.is-stage) footer { margin-top: 8px; padding-top: 8px; } }

/* the results: a card on the half of the screen away from the winner; the winner turns to the
   camera on the other half (bash.js presentWinner) */
.online-panel[data-stage="results"] { right: var(--side); top: 50%; translate: 0 -50%; width: min(max(520px, calc(560 * var(--k))), calc(50vw - var(--side) - 16px)); max-height: calc(100vh - 24px); overflow: auto; padding: calc(18 * var(--k)) calc(22 * var(--k)); background: rgba(11,21,48,.95); border: 3px solid #000; box-shadow: 0 0 0 3px var(--line), 8px 8px 0 3px rgba(0,0,0,.6); }
.online-panel[data-stage="results"].left { right: auto; left: var(--side); }
[data-stage="results"] header { position: absolute; top: calc(14 * var(--k)); right: calc(18 * var(--k)); }
[data-stage="results"] :is(.room-brand, .online-tag) { display: none; }
[data-stage="results"] .room-close { white-space: nowrap; font-size: max(13px, calc(15 * var(--k))); padding: 8px 12px; min-height: 36px; }
[data-stage="results"] .eyebrow { display: block; min-height: 36px; padding-right: 150px; }
[data-stage="results"] .room-heading { display: grid; gap: calc(12 * var(--k)); }
[data-stage="results"] .room-heading > div { display: grid; gap: 6px; }
[data-stage="results"] h1 { color: var(--gold); font-size: max(26px, calc(42 * var(--k))); }
[data-stage="results"] .invite-copy { grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; gap: 12px; padding: 8px 12px; }
[data-stage="results"] .invite-copy b { font-size: max(18px, calc(22 * var(--k))); }
[data-stage="results"] .invite-copy span { justify-self: end; }
[data-stage="results"] .room-seats { display: grid; gap: calc(10 * var(--k)); margin: calc(14 * var(--k)) 0 calc(14 * var(--k)); }
[data-stage="results"] .room-seat { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "img info info score" "img tabs status delta"; column-gap: 10px; row-gap: 5px; align-items: center; padding: 6px 10px 6px 6px; }
[data-stage="results"] .room-seat img { grid-area: img; display: block; width: max(34px, calc(46 * var(--k))); height: max(34px, calc(46 * var(--k))); image-rendering: pixelated; border: 3px solid var(--seat); outline: 2px solid #000; }
[data-stage="results"] .seat-top { position: static; grid-area: tabs; }
[data-stage="results"] :is(.seat-role, .seat-host), [data-stage="results"] .room-seat.is-winner .seat-top::after { border-bottom: 2px solid #000; padding: 4px 6px 3px; font-size: max(11px, calc(12 * var(--k))); }
[data-stage="results"] .seat-info { grid-area: info; display: flex; align-items: center; gap: 8px; }
[data-stage="results"] .seat-info .seat-name { flex: 1; min-width: 0; }
[data-stage="results"] .seat-name { height: auto; line-height: 1.45; text-align: left; border: 2px solid #000; font-size: max(13px, calc(18 * var(--k))); }
[data-stage="results"] .seat-tag { flex: none; padding: 0; }
[data-stage="results"] .seat-status { grid-area: status; padding: 0; text-align: left; font-size: max(12px, calc(14 * var(--k))); }
[data-stage="results"] .seat-score { grid-area: score; }
[data-stage="results"] .seat-score i { width: max(22px, calc(28 * var(--k))); height: max(22px, calc(28 * var(--k))); }
[data-stage="results"] .seat-delta { grid-area: delta; justify-self: end; }
[data-stage="results"] .invite-copy span { white-space: nowrap; }
@media (max-width: 1100px) { [data-stage="results"] .invite-copy { grid-template-columns: auto 1fr; } [data-stage="results"] .invite-copy small { display: none; } }
[data-stage="results"] .invite-copy small { white-space: nowrap; }
.room-seat.is-away .seat-status::before { display: none; }
@media (max-height: 800px) { .online-panel[data-stage="results"] { max-height: calc(100vh - 12px); } [data-stage="results"] .room-bottom { gap: 8px; } [data-stage="results"] .room-seat { padding-block: 4px; } [data-stage="results"] .invite-copy { padding: 6px 10px; } [data-stage="results"] .room-action { gap: 6px; } [data-stage="results"] h1 { font-size: 26px; } [data-stage="results"] .room-heading { gap: 8px; } [data-stage="results"] .room-seat img { width: 34px; height: 34px; } [data-stage="results"] .room-seats { gap: 6px; margin: 10px 0; } [data-stage="results"] .room-primary { padding-block: 10px; } }
.room-seat.is-winner { box-shadow: 0 0 0 3px var(--gold), 6px 6px 0 3px rgba(0,0,0,.6); }
.room-seat.is-winner .seat-top::after { content: "WINNER"; font: 400 max(11px, calc(13 * var(--k)))/1 var(--f); letter-spacing: .06em; padding: 5px 8px 4px; border: 2px solid #000; border-bottom: 0; background: var(--gold); color: #000; }
[data-stage="results"] .room-bottom { display: grid; gap: 12px; }
[data-stage="results"] .room-bottom p { display: none; }
[data-stage="results"] .room-action { max-width: none; justify-items: stretch; text-align: left; }
[data-stage="results"] [data-room="ranked"] { justify-self: start; }
[data-stage="results"] .room-action button { min-width: 0; }
[data-stage="results"] .room-error { margin-top: 10px; }
[data-stage="results"] footer { display: none; }

/* ---- the room menu in a match: the pause screen's look; the match keeps going behind it */
.online-menu { position: fixed; z-index: 40; top: 50%; left: 50%; translate: -50% -50%; width: min(440px, calc(100vw - 2 * var(--side))); display: grid; gap: calc(14 * var(--k)); padding: calc(24 * var(--k)) calc(26 * var(--k)); background: rgba(11,21,48,.96); border: 3px solid #000; box-shadow: 0 0 0 3px var(--line), 8px 8px 0 3px rgba(0,0,0,.6), 0 0 0 100vmax rgba(6,11,28,.62); font-family: var(--f); color: #fff; }
.online-menu > small { font: 600 max(12px, calc(13 * var(--k)))/1 var(--m); letter-spacing: .14em; color: var(--label); }
.online-menu > b { font: 400 max(22px, calc(34 * var(--k)))/1.05 var(--f); color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.online-menu p { margin: 0 0 4px; font: 600 max(13px, calc(14 * var(--k)))/1.5 var(--m); color: var(--label); }
.online-menu :is(.room-primary, .room-secondary) { width: 100%; }
.online-menu [data-menu="resume"], .online-menu [data-menu="retry"] { font-size: max(17px, calc(24 * var(--k))); }
.menu-feedback { font: 400 max(13px, calc(14 * var(--k)))/1.4 var(--f); letter-spacing: .03em; color: #FFE2C4; -webkit-text-stroke: 3px #000; paint-order: stroke fill; overflow-wrap: anywhere; }
.menu-feedback:empty { display: none; }
.menu-feedback input { margin-top: 8px; font-size: 13px; text-transform: none; }

/* ---- the leaderboard: the title and the season, the list as the hero, YOUR RECORD as its own
   card, HOW RANKING WORKS beside the list (or behind its key on a narrow screen) */
.scr.board.on { display: grid; grid-template-columns: minmax(0, 820px) minmax(260px, 340px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top" "main how" "nav nav"; justify-content: center; column-gap: calc(24 * var(--k)); row-gap: calc(14 * var(--k)); padding: calc(28 * var(--k)) var(--side) calc(24 * var(--k)); background: rgba(6,11,28,.78); pointer-events: auto; }
.board-top { grid-area: top; display: flex; align-items: baseline; justify-content: center; gap: calc(18 * var(--k)); }
.scr.board h2 { position: static; transform: none; font-size: max(30px, calc(60 * var(--k))); }
.board-season { font: 400 max(13px, calc(16 * var(--k)))/1 var(--f); letter-spacing: .08em; color: #000; background: var(--gold); border: 2px solid #000; padding: 6px 10px; }
.board-main { grid-area: main; min-height: 0; display: flex; flex-direction: column; gap: 8px; background: rgba(11,21,48,.95); border: 3px solid #000; box-shadow: 0 0 0 3px var(--line), 8px 8px 0 3px rgba(0,0,0,.6); padding: calc(12 * var(--k)) calc(14 * var(--k)); }
.board-head, .board-row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 6em 6em 5em; gap: 10px; align-items: center; }
.board-head { padding: 0 12px 4px; border-bottom: 2px solid rgba(159,179,217,.35); font: 400 max(12px, calc(13 * var(--k)))/1 var(--f); letter-spacing: .08em; color: var(--label); }
.board-head span:nth-child(n+3), .board-row > :nth-child(n+3) { text-align: right; }
.board-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 4px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.board-row { padding: 8px 12px; background: var(--navy2); border: 2px solid #000; font: 400 max(14px, calc(18 * var(--k)))/1.1 var(--f); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.board-rank { font: inherit; color: var(--gold); text-align: right; }
.board-name { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.board-tag { font: 600 max(12px, calc(13 * var(--k)))/1 var(--m); color: var(--label); -webkit-text-stroke: 0; }
.board-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.board-tag, .board-you { flex: none; }
.board-you { font: 400 max(11px, calc(12 * var(--k)))/1 var(--f); font-style: normal; color: #000; background: #fff; border: 2px solid #000; padding: 3px 6px; -webkit-text-stroke: 0; }
.board-row.me { outline: 3px solid #fff; outline-offset: -1px; box-shadow: 5px 5px 0 1px var(--orange); }
.board-state { margin: 0; padding: calc(18 * var(--k)) 16px; text-align: center; font: 400 max(15px, calc(20 * var(--k)))/1.35 var(--f); color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.board-state:empty { display: none; }
.scr.board:is([data-state="loading"], [data-state="empty"], [data-state="offline"], [data-state="error"]) :is(.board-head, .board-list) { display: none; }
.scr.board:is([data-state="loading"], [data-state="empty"], [data-state="offline"], [data-state="error"]) .board-main { justify-content: center; }
.scr.board[data-state="loading"] .board-state::before { content: ""; display: block; width: 120px; height: 12px; margin: 0 auto 14px; border: 3px solid #000; outline: 2px solid var(--line); background: linear-gradient(90deg, var(--orange) 0 30%, var(--navy2) 30%); }
.scr.board[data-state="empty"] .board-state { color: var(--gold); font-size: max(18px, calc(26 * var(--k))); }
.scr.board:is([data-state="offline"], [data-state="error"]) .board-main { box-shadow: 0 0 0 3px var(--red), 8px 8px 0 3px rgba(0,0,0,.6); }
.scr.board:is([data-state="offline"], [data-state="error"]) .board-state::before { content: "!"; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px; background: var(--red); border: 3px solid #000; color: #fff; }
/* YOUR RECORD: the own row in a card of its own, under the list */
.board-card { display: grid; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 2px solid rgba(159,179,217,.35); }
.board-card > small { font: 400 max(12px, calc(13 * var(--k)))/1 var(--f); letter-spacing: .08em; color: var(--label); }
.board-row.pinned { background: #14213F; }
.board-why { grid-column: 3 / -1; font: 400 max(13px, calc(15 * var(--k)))/1.25 var(--f); color: var(--gold); text-align: right; white-space: normal; }
/* HOW RANKING WORKS: short numbered lines, left aligned, beside the list */
.board-how { grid-area: how; align-self: start; display: grid; gap: 10px; padding: calc(14 * var(--k)) calc(16 * var(--k)); background: rgba(11,21,48,.95); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line), 6px 6px 0 2px rgba(0,0,0,.55); max-height: 100%; overflow-y: auto; }
.board-how > b { font: 400 max(15px, calc(18 * var(--k)))/1.1 var(--f); color: var(--ice); -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.board-rules { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 8px; font: 600 max(13px, calc(14 * var(--k)))/1.45 var(--m); color: var(--label); text-align: left; list-style: decimal; }
.board-rules li::marker { color: var(--gold); }
.scr.board .nav { grid-area: nav; position: static; transform: none; justify-self: center; }
.scr.board .how-toggle { display: none; }
@media (max-width: 1240px) {
  .scr.board.on { grid-template-columns: minmax(0, 860px); grid-template-areas: "top" "main" "nav"; }
  .scr.board .board-how { display: none; }
  .scr.board.how-open { grid-template-areas: "top" "how" "nav"; }
  .scr.board.how-open .board-main { display: none; }
  .scr.board.how-open .board-how { display: grid; }
  .scr.board .how-toggle { display: inline-block; }
}

/* ---- the player record: one panel in sections; the recovery code with its warning; START OVER
   in a danger look; the limits as short lines */
.scr.record.on { display: grid; align-content: safe center; justify-items: center; gap: calc(14 * var(--k)); padding: 20px var(--side); background: rgba(6,11,28,.8); pointer-events: auto; overflow-y: auto; }
.scr.record > b { font: 400 max(28px, calc(48 * var(--k)))/1 var(--f); color: #fff; -webkit-text-stroke: 8px #000; paint-order: stroke fill; text-shadow: 5px 5px 0 rgba(0,0,0,.6); }
.record-panel { width: min(760px, calc(100vw - 2 * var(--side))); display: grid; gap: calc(10 * var(--k)); padding: calc(14 * var(--k)) calc(20 * var(--k)); background: rgba(11,21,48,.95); border: 3px solid #000; box-shadow: 0 0 0 3px var(--line), 8px 8px 0 3px rgba(0,0,0,.6); }
.record-panel > section { display: grid; gap: 8px; padding-bottom: calc(10 * var(--k)); border-bottom: 2px solid rgba(159,179,217,.3); }
.record-panel h3 { margin: 0; font: 400 max(14px, calc(16 * var(--k)))/1 var(--f); letter-spacing: .06em; color: var(--ice); -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.record-name, .record-panel > .record-recover { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.scr.record label { display: grid; gap: 6px; flex: 1; min-width: 220px; font: 400 max(12px, calc(14 * var(--k)))/1.2 var(--f); letter-spacing: .08em; color: var(--ice); }
.scr.record input { width: 100%; box-sizing: border-box; border: 3px solid #000; outline: 2px solid var(--line); outline-offset: -5px; background: #060B1C; padding: 10px 12px; color: #fff; font: 400 max(16px, calc(19 * var(--k)))/1.2 var(--f); letter-spacing: .04em; border-radius: 0; user-select: text; -webkit-user-select: text; }
.scr.record [name="record-name"] { text-transform: uppercase; }
.scr.record input:is(.focus, :focus) { outline: 3px solid var(--orange); outline-offset: -3px; }
.record-tag { font: 600 max(16px, calc(20 * var(--k)))/2 var(--m); color: var(--gold); }
.record-stats { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.record-stats li { display: grid; justify-items: center; gap: 4px; min-width: 76px; padding: 8px 10px; background: var(--navy2); border: 2px solid #000; outline: 2px solid rgba(159,179,217,.45); outline-offset: -4px; }
.record-stats b { font: 400 max(16px, calc(22 * var(--k)))/1 var(--f); color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.record-stats small { font: 600 max(12px, calc(12 * var(--k)))/1 var(--m); letter-spacing: .08em; color: var(--label); }
.record-stats .record-place b { color: var(--gold); font-size: max(13px, calc(15 * var(--k))); }
.record-stats .record-none { display: block; font: 600 13px/1.5 var(--m); color: var(--label); }
.record-warn { font: 400 max(13px, calc(14 * var(--k)))/1.3 var(--f); letter-spacing: .03em; color: #000; background: var(--gold); border: 2px solid #000; padding: 6px 10px; justify-self: start; }
:is(.record-code, .record-oldcode) code { font: 600 max(14px, calc(15 * var(--k)))/1.4 var(--m); background: #060B1C; border: 2px dashed var(--line); padding: 8px 10px; overflow-wrap: anywhere; color: #fff; user-select: all; -webkit-user-select: all; }
.record-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cap.danger:not(.focus):not(:focus-visible) { outline-color: #FF8A7E; }
.record-limits { margin: 0; padding: 0 0 0 1.2em; display: grid; gap: 4px; font: 600 max(13px, calc(13 * var(--k)))/1.45 var(--m); color: var(--label); }
.scr.record .nav { position: static; transform: none; }
.scr.record .board-state { padding: 0; font-size: max(14px, calc(16 * var(--k))); text-align: left; color: var(--gold); }
/* the passkeys: one row each (added on, last use, SYNCED or THIS DEVICE ONLY) with REMOVE; the SWITCH question */
.record-keylist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.record-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--navy2); border: 2px solid #000; outline: 2px solid rgba(159,179,217,.45); outline-offset: -4px; }
.record-key span { display: grid; gap: 4px; min-width: 0; }
.record-key b { font: 400 max(14px, calc(15 * var(--k)))/1.15 var(--f); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.record-key small { font: 600 max(12px, calc(12 * var(--k)))/1.2 var(--m); letter-spacing: .06em; color: var(--label); }
.record-keylist .record-none { font: 600 13px/1.5 var(--m); color: var(--label); }
.record-panel > .record-switch { padding: 10px 12px; border: 3px solid #000; box-shadow: 0 0 0 3px var(--gold); }
.record-switch p { margin: 0; font: 400 max(14px, calc(17 * var(--k)))/1.3 var(--f); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.record-oldcode { display: grid; gap: 8px; }

/* ---- the ledger parts of the lobby and the title */
.title [data-k="me"] { position: absolute; right: var(--side); top: calc(34 * var(--k)); max-width: 40vw; text-align: right; padding: 6px 12px; background: rgba(11,21,48,.9); border: 2px solid #000; outline: 2px solid var(--line); outline-offset: -4px; text-shadow: none; }
.seat-tag:empty { display: none; }
.save-record { display: grid; gap: 8px; margin: 14px 0 0; padding: 12px 16px; background: rgba(11,21,48,.96); border: 3px solid #000; box-shadow: 0 0 0 3px var(--gold), 6px 6px 0 3px rgba(0,0,0,.6); }
.is-stage .save-record { position: absolute; left: var(--side); top: calc(190 * var(--k)); width: min(520px, 40vw); z-index: 2; }
.save-record b { font: 400 max(17px, calc(22 * var(--k)))/1.1 var(--f); color: var(--gold); -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.online-panel .save-record p { font-size: max(13px, calc(13 * var(--k))); }
.save-record small { font: 400 max(13px, calc(13 * var(--k)))/1.3 var(--f); color: #000; background: var(--gold); border: 2px solid #000; padding: 5px 8px; justify-self: start; }
.save-record code { font: 600 14px/1.4 var(--m); background: #060B1C; border: 2px dashed var(--line); padding: 8px 10px; overflow-wrap: anywhere; color: #fff; user-select: all; -webkit-user-select: all; }
.save-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.save-record .room-primary { font-size: max(16px, calc(21 * var(--k))); padding: calc(11 * var(--k)) calc(20 * var(--k)); }
/* (with a passkey offer the card is taller: COPY CODE stands beside the code) */
.save-record.keyed { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.save-record.keyed > * { grid-column: 1 / -1; }
.save-record.keyed > :is(code, [data-online="save-backup"]) { grid-column: auto; }
.online-panel .save-record .save-too { margin: 0; font: 400 max(13px, calc(14 * var(--k)))/1.3 var(--f); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.save-feedback { font: 400 max(13px, calc(14 * var(--k)))/1.3 var(--f); color: var(--green); -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.save-feedback:empty { display: none; }
[data-room="ranked"]:empty { display: none; }

/* ---- phones (portrait). The title stacks from the top down: the logo, DOPE on the ice, the menu,
   and a last row with the footer and SETTINGS. The desktop rules above made the logo and the menu
   overlap on a phone; tools/phone-layout-check.mjs measures this at four phone sizes. */
body.portrait .title .logo { top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) rotate(-3deg); }
body.portrait .title .logo b { font-size: clamp(46px, 16vw, 76px); -webkit-text-stroke-width: 9px; }
body.portrait .title .logo small { margin-top: 6px; font-size: clamp(15px, 4.6vw, 22px); -webkit-text-stroke-width: 4px; }
body.portrait .title .logo .goal { margin-top: 8px; font-size: clamp(12px, 3.6vw, 16px); -webkit-text-stroke-width: 3px; max-width: 92vw; }
body.portrait .title .logo .goal span { display: block; }
body.portrait .title .play { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px); width: min(90vw, 380px); gap: 8px; }
body.portrait .title .play .entry { gap: 4px; }
body.portrait .title .play .entry > .cap { font-size: 17px; padding: 9px 12px; }
body.portrait .title .play .entry > .cap.press { font-size: 21px; padding-block: 11px; }
body.portrait .title .play small { font-size: 11px; }
body.portrait .title .cap-note { min-height: 0; flex-wrap: wrap; gap: 6px; }
body.portrait .title .play .change { min-height: 28px; padding: 3px 8px; }
body.portrait .title .foot { bottom: max(10px, env(safe-area-inset-bottom)); justify-content: space-between; padding: 0 14px; }
body.portrait .title .foot small { font-size: 11px; -webkit-text-stroke-width: 3px; }
body.portrait .title .foot .cap { position: static; }
body.portrait .title .foot .input { display: none; }

/* a short phone (iPhone SE, small Android): DOPE stands lower on the screen than the free band, so
   the menu drops the two descriptions it can lose (the PLAY SOLO line keeps CHANGE) */
@media (max-height: 780px) {
  body.portrait .title .play .entry:not(:first-child) .cap-note { display: none; }
  body.portrait .title .play { gap: 7px; }
  body.portrait .title .play .entry > .cap { padding-block: 8px; }
}