.small-buttons{display:grid;grid-template-columns:1.35fr 1fr;gap:8px}
.leaderboard-overlay{padding:14px;touch-action:pan-y}
.leaderboard-panel{max-height:100%;overflow:auto;padding:18px;touch-action:pan-y;overscroll-behavior:contain}
.leaderboard-panel h2,:root[data-arcade="on"] .leaderboard-panel h2{font-size:28px;line-height:1.2;margin-bottom:14px}
.leaderboard-panel .leaderboard-status{min-height:0;margin-bottom:12px;font-size:14px}
.leaderboard-stat{padding:8px 0;margin-bottom:12px}.leaderboard-stat span{font-size:12px}
.web-name{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}.web-name input{font:16px Arial;flex:1 1 9em;width:auto;min-width:9em;padding:10px;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:0;touch-action:manipulation}
.web-name button{width:auto;min-height:44px;padding:8px 12px;font-size:12px}
.web-name-label{font-size:14px;font-weight:bold;display:block}.web-name-help{font-size:12px;color:var(--copy);margin:0 0 12px}
.web-board-scroll{max-height:32dvh;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;margin:0 0 12px}
.web-board{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.web-board th,.web-board td{padding:8px 4px;text-align:left;border-bottom:1px solid var(--item-border)}
.web-board th{font-size:12px}.web-board td:last-child,.web-board th:last-child{text-align:right}.web-board td:nth-child(2){overflow-wrap:anywhere}
.web-board tr[data-you]{font-weight:bold;background:var(--item)}
.overlay .web-run-note{font:12px/1.4 Arial,sans-serif;margin:10px 0 0;color:var(--copy)}
.overlay .web-playing{flex-basis:100%;font:bold 12px/1.4 Arial,sans-serif;margin:4px 0 0;color:var(--copy)}
#webRotate{display:none;position:fixed;inset:0;z-index:100;background:var(--paper);color:var(--ink);place-content:center;text-align:center;padding:24px;font:18px/1.5 Arial,sans-serif}
#webRotate strong{font-family:Impact,'Arial Black',sans-serif;font-size:40px;line-height:1.1;margin-bottom:14px}
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px){#webRotate{display:grid}}
@media(max-width:360px){.leaderboard-panel{padding:12px}.small-buttons{gap:5px}.small-buttons button{padding:12px 5px}}

.overlay .web-run-note[data-tone="warn"]{color:var(--ink);font-weight:bold}
#startButton[aria-busy="true"]{opacity:.8}
.overlay .web-end-dive{display:block;margin:14px auto 0;min-height:40px;padding:10px 18px;background:transparent;color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:11px;letter-spacing:.1em}
.overlay .web-run-note{white-space:pre-line;text-wrap:pretty;max-width:40ch}
.overlay.web-stall #overlayText .web-line{display:block;text-wrap:balance}
.overlay .web-run-note{flex-basis:100%}
.overlay.web-stall{align-items:flex-start;padding-top:clamp(28px,14vh,140px)}
#game.web-dim{filter:grayscale(1) opacity(.22)}
.overlay .web-end-dive:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);background:var(--ink);color:var(--paper)}
:root[data-arcade="on"] .overlay .web-end-dive{background:var(--arc-btnface);border-color:var(--arc-btnborder);color:var(--arc-btntext);box-shadow:3px 3px 0 var(--arc-btnshadow);text-shadow:none}
/* Desktop layout. desktop.js puts class "pc" on <html> for a wide window with a mouse;
   nothing below applies otherwise, so phones and narrow windows are untouched. */
.pc-only,.pc-keys,.pc-hints{display:none}
html.pc .pc-only{display:block}

/* ---- the board takes the whole window height; score left, controls right ---- */
html.pc body{padding:14px 28px;align-items:stretch}
html.pc .app{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:var(--pcgap,40px);align-items:start}
html.pc .stage{grid-column:2;grid-row:1/4;align-self:center;margin:0}
html.pc canvas{cursor:default}
html.pc .footer{display:none}

html.pc .masthead{grid-column:1;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:stretch;gap:34px;width:min(var(--pcrail,300px),340px);margin:0;text-align:left}
html.pc .brand{font-size:min(76px,calc(var(--pcrail,300px)/4.1))}
html.pc .tag{font-size:clamp(9px,calc(var(--pcrail,300px)/28),12px);white-space:normal;line-height:1.5;margin-top:10px}
html.pc .scoreboard{display:grid;grid-template-columns:minmax(0,1fr);width:auto;row-gap:22px;text-align:left}
html.pc .metric{padding-top:14px;border-top:3px solid var(--ink)}
html.pc .metric b{font-size:min(64px,calc(var(--pcrail,300px)/4.6))}
html.pc .metric span{font-size:11px;margin-top:10px}

html.pc .controls{grid-column:3;grid-row:1;justify-self:start;display:flex;flex-direction:column;align-items:stretch;gap:22px;width:min(var(--pcrail,300px),340px);margin:0}
html.pc .meter-label{font-size:11px;margin-bottom:9px}
html.pc .meter-track{height:18px}
html.pc .small-buttons{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
html.pc .small-buttons button{padding:15px 12px;font-size:12px;letter-spacing:.12em}

/* ---- key legends ---- */
html.pc .pc-keys,html.pc .pc-hints{display:block;width:min(var(--pcrail,300px),340px);align-self:end;font:700 12px/1.3 Arial,Helvetica,sans-serif;color:var(--copy)}
html.pc .pc-keys{grid-column:1;grid-row:3;justify-self:end}
html.pc .pc-hints{grid-column:3;grid-row:3;justify-self:start}
.pc-panel{container-type:inline-size}
.pc-panel h2{margin:0 0 6px;font:900 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.2em;color:var(--ink)}
.pc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-height:46px;padding:9px 0;border-top:2px solid var(--item-border)}
.pc-caps{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}
.pc-caps i{font:700 10px/1 Arial,Helvetica,sans-serif;font-style:normal;color:var(--muted);padding:0 2px}
.pc-label{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--ink);text-align:right;white-space:nowrap}
.pc-panel kbd{display:inline-block;min-width:26px;padding:6px 7px 5px;border:2px solid var(--ink);background:var(--panel-soft);box-shadow:2px 2px 0 var(--ink);font:900 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.04em;text-align:center;color:var(--ink)}

/* ---- the menus grow with the board ---- */
/* zoom: percentages inside a zoomed box already account for it (height:100% still fills the board). */
html.pc .overlay-inner,html.pc .leaderboard-panel{zoom:var(--pcui,1)}
html.pc .overlay p{max-width:none}
html.pc .gesture-cell small{display:block;margin-top:5px;font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--ink)}
html.pc .gesture-cell:last-child small{color:var(--red)}

/* ---- arcade cabinet in the wide layout ---- */
html.pc[data-arcade="on"] .brand{font-size:min(34px,calc(var(--pcrail,300px)/8.6));letter-spacing:-.06em}
html.pc[data-arcade="on"] .tag{font-size:clamp(5px,calc(var(--pcrail,300px)/50),7px);line-height:1.9}
html.pc[data-arcade="on"] .masthead{grid-template-columns:none}
html.pc[data-arcade="on"] .scoreboard{display:grid;grid-row:auto;width:auto;column-gap:0;row-gap:22px}
html.pc[data-arcade="on"] .metric{display:flex;flex-direction:column-reverse;align-items:stretch;gap:12px}
html.pc[data-arcade="on"] .metric b{order:0;font-size:min(22px,calc(var(--pcrail,300px)/13))}
html.pc[data-arcade="on"] .metric span{order:0;font-size:8px;margin-top:0}
html.pc[data-arcade="on"] .small-buttons button{padding:13px 10px;font-size:9px}
html.pc[data-arcade="on"] .meter-label{font-size:7px}
html.pc[data-arcade="on"] .meter-label span:first-child::before{font-size:7px}
html.pc[data-arcade="on"] .pc-panel h2{font-family:'Press Start 2P',monospace;font-size:7px;letter-spacing:.12em;color:var(--arc-gold)}
html.pc[data-arcade="on"] .pc-label{font-family:'Press Start 2P',monospace;font-size:7px;letter-spacing:.04em;color:var(--muted)}
html.pc[data-arcade="on"] .pc-panel kbd{font-family:'Press Start 2P',monospace;font-size:7px;border-color:var(--arc-btnborder);background:var(--arc-btnface);color:var(--arc-neon);box-shadow:2px 2px 0 var(--arc-btnshadow)}
html.pc[data-arcade="on"] .pc-panel kbd.ar{font-family:Arial,Helvetica,sans-serif;font-size:11px;padding:5px 7px 4px}
/* narrow rails (a ~1000 px window): the label goes under the keys instead of beside them */
@container (max-width:270px){.pc-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 0}.pc-label{text-align:left}}