.arcade {
  --console: #e8ebdf;
  --console-edge: #b6bca8;
  --console-ink: #3b4439;
  --game-bg: #f3f6ec;
  --game-ink: #33483b;
  --game-muted: #7c8e7e;
  --game-grid: #e5ebdd;
  --game-accent: #4273bd;
  --active-accent: var(--blue);
  --slither-bg: #17212b;
  --slither-grid: #243342;
  --slither-edge: #75404b;
  --slither-ink: #f5f7fc;
  --slither-muted: #aec0d2;
  --slither-violet: #b29aff;
  --slither-blue: #77c5ef;
  --slither-coral: #f799a6;
  --slither-acid: #c6e78c;
  --slither-sand: #f4ce85;
  font-size: 14px;
}
[data-theme="dark"] .arcade {
  --console: #353b32;
  --console-edge: #59624f;
  --console-ink: #d0d7c5;
  --game-bg: #161e1b;
  --game-ink: #d9e7cd;
  --game-muted: #869d8d;
  --game-grid: #23332a;
  --game-accent: #92b9f2;
}
.arcade [hidden] { display: none !important; }
.arcade button, .arcade input { font-family: inherit; }
.arcade [data-control], #game-canvas { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.arcade button { min-height: 44px; }
.arcade-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 36px; color: var(--muted); font-size: 12px; text-decoration: none; }
.arcade-back:hover { color: var(--ink); }
.arcade-intro { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 36px; }
.arcade h1 { font-size: clamp(32px, 4.2vw, 54px); margin-bottom: 14px; }
.arcade .lead { font-size: 15px; }
.arcade-intro-note { display: flex; align-items: center; gap: 16px; line-height: 1.8; font-size: 12px; color: var(--muted); }
.arcade-intro-note strong { color: var(--ink); font-weight: 500; }
.arcade-intro-note svg { width: 42px; height: 42px; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.arcade-games { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 44px; }
.arcade-game { min-width: 0; min-height: 138px !important; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 9px; padding: 16px 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; text-align: left; font-size: 12px; transition: background .16s, border-color .16s; }
.arcade-game[data-accent="blue"] { --tab: var(--blue); }
.arcade-game[data-accent="acid"] { --tab: var(--acid); }
.arcade-game[data-accent="coral"] { --tab: var(--coral); }
.arcade-game[data-accent="violet"] { --tab: var(--violet); }
.arcade-game[data-accent="sand"] { --tab: var(--sand); }
.arcade-game:hover { border-color: var(--line-strong); background: var(--subtle); }
.arcade-game[aria-pressed="true"] { background: color-mix(in srgb, var(--tab) 20%, var(--surface)); border-color: var(--ink); }
.arcade-game-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 500; }
.arcade-game-icon { display: grid; place-items: center; width: 40px; height: 34px; color: var(--ink); }
.arcade-game-icon svg { width: 38px; height: 30px; }
.arcade-game > strong { font-size: 16px; font-weight: 600; }
.arcade-game-tag { display: flex; justify-content: space-between; color: var(--muted); font-weight: 400; font-size: 11px; }
.arcade-game[aria-pressed="true"] .arcade-game-tag { color: var(--ink); }
.arcade-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px; }
.arcade-play { min-width: 0; }
.arcade-game-intro { width: calc(100% - 348px); }
.arcade-game-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.arcade-game-heading h2 { margin: 0; font-size: 28px; }
.arcade-description { margin: 12px 0 24px; color: var(--muted); line-height: 1.6; font-size: 13px; }
.handheld { position: relative; padding: 24px 15px 18px; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; gap: 13px; border: 1px solid var(--console-edge); border-bottom-width: 5px; border-radius: 44px 44px 60px 60px; background: linear-gradient(155deg, color-mix(in srgb, var(--console) 87%, white), var(--console) 50%); color: var(--console-ink); box-shadow: 0 12px 0 -7px color-mix(in srgb, var(--console-edge) 30%, transparent), 0 16px 25px -20px #0006; }
.handheld-center { min-width: 0; }
.handheld-brand { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 5px 11px; font-size: 10px; letter-spacing: .01em; }
.handheld-brand b { font-weight: 700; font-style: italic; }
.handheld-brand > span:last-child { display: flex; align-items: center; gap: 5px; font-size: 7px; letter-spacing: .12em; }
.handheld-brand i { width: 4px; height: 4px; background: #588856; border-radius: 50%; }
.game-display { padding: 7px; background: #28352c; border-radius: 12px; box-shadow: inset 0 2px 4px #0005; }
.game-hud { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 30px; padding: 6px 10px 0; border-radius: 5px 5px 0 0; background: var(--game-bg); color: var(--game-ink); font: 10px/1.2 ui-monospace, monospace; }
.game-hud > span { width: 30%; }
.game-hud > span:last-child { text-align: right; }
.game-hud strong { font-size: 16px; font-weight: 600; white-space: nowrap; }
.game-hud small { color: inherit; font: 9px ui-monospace, monospace; }
.game-progress { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px 4px; background: var(--game-bg); color: var(--game-ink); font: 9px/1.5 ui-monospace, monospace; }
.game-viewport { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 0 0 5px 5px; background: var(--game-bg); }
#game-canvas { grid-area: 1 / 1; align-self: center; display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; outline-offset: -4px; touch-action: none; }
/* Active keyboard focus is shown in the HUD, without outlining the playfield. */
#game-canvas.is-playing:focus-visible { outline: none; }
.arcade[data-selected-game="slither"] #game-canvas.is-playing { cursor: crosshair; }
.game-hud.has-keyboard-focus #game-status { text-decoration: underline; text-underline-offset: 3px; }
.game-overlay { position: relative; grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: color-mix(in srgb, var(--game-bg) 94%, transparent); color: var(--game-ink); text-align: center; }
.game-overlay > * { flex-shrink: 0; }
.game-overlay:focus { outline: none; }
.game-viewport.is-result { display: grid; grid-template-columns: minmax(0, 1fr); }
.game-viewport.is-result #game-canvas { grid-area: 1 / 1; align-self: center; }
.game-viewport.is-result .game-overlay { display: grid; grid-template-columns: minmax(0, 320px); justify-content: center; align-content: center; justify-items: stretch; gap: 16px; min-width: 0; padding: 24px; background: var(--game-bg); }
.game-viewport.is-result .game-overlay > * { min-width: 0; }
.game-viewport.is-result h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.game-viewport.is-result #overlay-description { max-width: none; font-size: 12px; line-height: 1.6; text-wrap: pretty; }
.game-viewport.is-result .overlay-mark { display: none; }
.game-viewport.is-result #game-start { margin-top: 0; background: transparent; color: var(--game-ink); text-decoration: underline; text-underline-offset: 4px; }
.game-overlay h3 { margin: 0; font-size: clamp(16px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.04em; }
.game-overlay p { margin: 0; max-width: 280px; font-size: 11px; line-height: 1.7; }
.overlay-mark { display: grid; place-items: center; width: 52px; height: 42px; margin-bottom: 5px; }
.overlay-mark svg { width: 50px; height: 40px; }
.arcade .arcade-primary { display: inline-flex; gap: 16px; justify-content: center; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 7px; background: var(--ink); color: var(--on-primary); font-size: 12px; font-weight: 600; }
.arcade-primary:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }
.game-overlay .arcade-primary { margin-top: 4px; background: var(--game-ink); color: var(--game-bg); }
.handheld-left, .handheld-right { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.handheld-label { font: 7px ui-monospace, monospace; letter-spacing: .05em; }
.dpad { display: grid; grid-template-columns: repeat(3, 24px); grid-template-rows: repeat(3, 24px); filter: drop-shadow(0 2px 0 #0006); }
.arcade .dpad button { min-height: 24px; width: 24px; padding: 0; border-radius: 3px; background: #3b4439; color: #e4e8df; font: 17px/1 sans-serif; touch-action: none; position: relative; }
/* Larger invisible hit targets retain a compact, recognisable controller. */
.dpad button::after { content: ""; position: absolute; inset: -10px; }
.dpad button[data-control="up"] { grid-area: 1 / 2; }
.dpad button[data-control="left"] { grid-area: 2 / 1; }
.dpad button[data-control="right"] { grid-area: 2 / 3; }
.dpad button[data-control="down"] { grid-area: 3 / 2; }
.dpad-center { grid-area: 2 / 2; background: #3b4439; }
.dpad button:active, .dpad button.is-pressed { background: #1c261d; }
.handheld-speaker { display: flex; gap: 4px; transform: rotate(-20deg); }
.handheld-speaker i { display: block; width: 3px; height: 18px; border-radius: 3px; background: var(--console-edge); }
.arcade .console-action, .arcade .console-secondary { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #3b4439; border-radius: 50%; font-size: 17px; font-weight: 600; touch-action: none; box-shadow: 0 3px 0 #0004; }
.arcade .console-action { background: var(--active-accent); color: #202020; align-self: flex-end; }
.arcade .console-secondary { background: var(--console-edge); color: var(--console-ink); margin-top: -20px; align-self: flex-start; }
.console-action:active, .console-secondary:active { box-shadow: none; transform: translateY(2px); }
.handheld-bottom { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin: 8px 4px 0; gap: 8px; font: 8px ui-monospace, monospace; }
.arcade .handheld-bottom button { background: transparent; color: var(--console-ink); border-radius: 4px; padding: 0 8px; font-size: 10px; gap: 5px; }
.arcade-controls { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.arcade-controls > span:first-child { display: flex; gap: 8px; align-items: center; }
.arcade-controls svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.arcade-feedback { min-height: 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.arcade-feedback.is-error { color: var(--danger); }
.arcade-save { width: 100%; margin: 0; text-align: center; }
#record-form { display: grid; gap: 12px; margin: 0; }
#record-form label { display: block; margin: 0; font-size: 12px; font-weight: 600; text-align: left; }
.record-input-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.record-input-row input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 16px; }
#record-form .arcade-primary { width: 100%; margin: 0; }
.game-overlay #record-error { max-width: none; margin: 0; color: var(--danger); font-size: 12px; line-height: 1.6; }
#record-error:empty { display: none; }
#record-privacy { display: block; color: var(--game-ink); font-size: 11px; line-height: 1.6; text-wrap: pretty; }
.game-overlay #save-copy { max-width: none; margin: 0; font-size: 12px; line-height: 1.8; text-align: center; }
.arcade-leaders { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.leader-heading { display: flex; align-items: center; gap: 10px; }
.leader-trophy { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--acid); color: var(--accent-ink); flex: 0 0 auto; }
.leader-heading svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.leader-heading h2 { font-size: 17px; margin: 0 0 3px; font-weight: 600; letter-spacing: -.04em; }
.leader-heading p { color: var(--muted); font-size: 10px; margin: 0; }
.arcade #leaders-refresh { min-width: 44px; padding: 0; background: transparent; color: var(--muted); margin-left: auto; }
#leaders-refresh svg { width: 17px; height: 17px; }
.leader-caption { margin: 28px 0 14px; font-size: 10px; color: var(--muted); }
.leader-table { width: 100%; table-layout: fixed; font-size: 11px; }
#leader-list[aria-busy="true"] { opacity: .55; }
.leader-table th, .leader-table td { padding: 14px 4px; text-align: left; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.leader-table th { color: var(--muted); font-size: 10px; font-weight: 500; }
.leader-table th:first-child { position: static; background: transparent; }
.leader-table th:first-child, .leader-table td:first-child { width: 28px; color: var(--muted); font-variant-numeric: tabular-nums; }
.leader-table th:last-child, .leader-table td:last-child { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.leader-table td:last-child { font-weight: 700; }
.leader-table td { vertical-align: middle; }
.leader-name { display: block; line-height: 1.5; }
.leader-group { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.leader-table tr:first-child td { color: var(--ink); }
.leader-table tr:first-child td:first-child { color: var(--ink); }
.leaders-empty { min-height: 272px; padding: 40px 0; text-align: center; }
.leaders-empty > span { display: grid; place-items: center; margin: 0 auto 18px; width: 54px; height: 54px; border: 1px dashed var(--line-strong); border-radius: 50%; font-size: 25px; color: var(--muted); }
.leaders-empty h3 { font-size: 16px; margin: 0 0 10px; }
.leaders-empty p { color: var(--muted); font-size: 12px; line-height: 1.8; }
#leaders-message { min-height: 16px; font-size: 11px; color: var(--muted); line-height: 1.7; }
.leader-pagination { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; gap: 8px; }
.arcade .leader-pagination button { padding: 0 4px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 500; }
#leaders-page { color: var(--muted); font: 10px ui-monospace, monospace; }
.leader-footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 18px; }
.leader-footer > span { font-size: 24px; }
.leader-footer p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.arcade-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.arcade button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (min-width: 1440px) { .arcade-layout { gap: 36px; } .arcade-game-intro { width: calc(100% - 356px); } }
@media (max-width: 1100px) {
  .arcade-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
  .arcade-game-intro { width: calc(100% - 310px); }
  .handheld { grid-template-columns: 56px minmax(0, 1fr) 48px; padding: 20px 12px 12px; gap: 8px; border-radius: 34px 34px 45px 45px; }
  .dpad { grid-template-columns: repeat(3, 19px); grid-template-rows: repeat(3, 24px); }
  .arcade .dpad button { width: 19px; }
  .arcade-leaders { padding: 18px; }
  .handheld-label { font-size: 6px; }
  .game-overlay { gap: 7px; padding: 10px; }
  .overlay-mark { width: 38px; height: 28px; margin: 0; }
  .overlay-mark svg { width: 36px; height: 28px; }
  .game-overlay p { font-size: 10px; }
}
@media (max-width: 900px) {
  .arcade-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .arcade-game-intro { width: 100%; }
  .arcade-leaders { padding: 24px; }
  .arcade-games { gap: 8px; }
  .arcade-game { padding: 12px; min-height: 126px !important; }
  .arcade-game > strong { font-size: 13px; }
  .arcade-intro-note { display: none; }
  .handheld { grid-template-columns: 72px minmax(0, 1fr) 64px; gap: 13px; padding: 24px 18px 14px; }
  .dpad { grid-template-columns: repeat(3, 24px); }
  .arcade .dpad button { width: 24px; }
  .game-overlay { gap: 12px; }
  .game-overlay h3 { font-size: 24px; }
  .game-overlay p { font-size: 12px; }
  .overlay-mark, .overlay-mark svg { width: 50px; height: 40px; }
}
@media (max-width: 600px) {
  .arcade-back { margin-bottom: 26px; }
  .arcade-intro { margin-bottom: 26px; }
  .arcade .lead { font-size: 13px; }
  .arcade-games { display: flex; overflow-x: auto; gap: 8px; margin-bottom: 30px; padding: 3px 3px 10px; scrollbar-width: thin; }
  .arcade-game { flex: 0 0 140px; min-height: 125px !important; }
  .arcade-game-heading h2 { font-size: 24px; }
  .arcade-description { font-size: 12px; margin-bottom: 18px; }
  /* A portrait Game Boy layout: bezel, screen, thumb controls, then service row. */
  .handheld { --dpad-key: 44px; --action-key: 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 20px; max-width: 440px; margin-inline: auto; padding: 20px 16px 24px; border-radius: 28px 28px 52px 28px; scroll-margin-top: 0; box-shadow: inset 0 1px 0 #fff2, 0 8px 0 -3px color-mix(in srgb, var(--console-edge) 55%, var(--console)), 0 16px 24px -16px #0008; }
  .handheld-center { display: contents; }
  .handheld-brand { grid-area: 1 / 1 / 2 / 3; margin: 0 4px; font-size: 12px; }
  .handheld-brand > span:last-child { font-size: 9px; gap: 6px; }
  .handheld-brand i { width: 5px; height: 5px; box-shadow: 0 0 6px #58885660; }
  .handheld-left { grid-area: 3 / 1; align-items: flex-start; gap: 0; }
  .handheld-left > .handheld-label { display: none; }
  .handheld-right { grid-area: 3 / 2; flex-direction: row-reverse; justify-self: end; justify-content: space-between; align-items: center; width: calc(var(--action-key) * 2 + 8px); height: 96px; gap: 8px; }
  .handheld-right > .handheld-label { display: none; }
  .arcade .console-action, .arcade .console-secondary { flex: 0 0 var(--action-key); width: var(--action-key); height: var(--action-key); min-height: var(--action-key); font: 600 24px/1 ui-monospace, monospace; box-shadow: inset 0 2px 1px #fff3, 0 4px 0 #0005; }
  .arcade .console-action { align-self: flex-start; }
  .arcade .console-secondary { align-self: flex-end; margin: 0; }
  .dpad { grid-template-columns: repeat(3, var(--dpad-key)); grid-template-rows: repeat(3, var(--dpad-key)); gap: 0; }
  .arcade .dpad button { width: var(--dpad-key); height: var(--dpad-key); min-height: var(--dpad-key); border-radius: 4px; font-size: 24px; }
  .dpad button[data-control="up"] { border-radius: 5px 5px 0 0; }
  .dpad button[data-control="left"] { border-radius: 5px 0 0 5px; }
  .dpad button[data-control="right"] { border-radius: 0 5px 5px 0; }
  .dpad button[data-control="down"] { border-radius: 0 0 5px 5px; }
  .dpad button::after { inset: 0; }
  .dpad-center { position: relative; }
  .dpad-center::after { content: ""; position: absolute; inset: 13px; border: 1px solid #ffffff24; border-radius: 50%; box-shadow: inset 0 1px 2px #0004; }
  .game-display { grid-area: 2 / 1 / 3 / 3; padding: 10px; border-radius: 16px 16px 24px 16px; }
  .game-hud { min-height: 32px; padding-inline: 8px; font-size: 10px; }
  .game-progress { flex-wrap: wrap; padding: 6px 8px; font-size: 10px; }
  .handheld-bottom { grid-area: 4 / 1 / 5 / 3; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; min-height: 44px; margin: 0 4px; font-size: 9px; }
  .arcade .handheld-bottom button { min-height: 44px; font-size: 11px; }
  .handheld-bottom .handheld-speaker { justify-self: end; gap: 5px; }
  .handheld-bottom .handheld-speaker i { width: 4px; height: 24px; background: color-mix(in srgb, var(--console-ink) 50%, var(--console)); box-shadow: inset 0 1px 1px #0004; }
  #game-canvas { height: auto; aspect-ratio: 4 / 5; }
  .game-overlay { gap: 8px; padding: 10px; }
  .game-overlay h3 { font-size: 21px; }
  .game-overlay p { font-size: 10px; max-width: 230px; }
  .overlay-mark, .overlay-mark svg { width: 36px; height: 29px; }
  .game-overlay .arcade-primary { padding: 8px 14px; font-size: 11px; }
  .arcade-controls { margin-top: 16px; font-size: 10px; }
  .arcade-controls > span:last-child { display: none; }
  .game-viewport.is-result .game-overlay { padding: 24px 16px; }
  .arcade-leaders { padding: 20px; }
}
@media (max-width: 360px) {
  .handheld { --action-key: 48px; padding-inline: 12px; column-gap: 8px; }
  .game-overlay { gap: 5px; }
  .overlay-mark { display: none; }
  .game-overlay h3 { font-size: 18px; }
}
@media (max-width: 600px) and (max-height: 740px) and (orientation: portrait) {
  .handheld { row-gap: 12px; padding-block: 16px 20px; }
}
@media (min-width: 601px) and (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  .handheld { grid-template-columns: 140px minmax(0, 1fr) 150px; gap: 10px; padding: 10px 8px; }
  .handheld-left > .handheld-label, .handheld-right > .handheld-label, .handheld-speaker { display: none; }
  .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 4px; }
  .arcade .dpad button { width: 44px; min-height: 44px; border-radius: 7px; font-size: 28px; }
  .dpad button::after { inset: 0; }
  .handheld-right { flex-direction: row-reverse; gap: 10px; }
  .arcade .console-action { width: 80px; height: 80px; font-size: 30px; align-self: center; }
  .arcade .console-secondary { width: 60px; height: 60px; font-size: 24px; margin: 14px 0 0; align-self: center; }
  #game-canvas { height: max(160px, calc(100svh - 220px)); aspect-ratio: auto; }
  .handheld-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) { .arcade *, .arcade *::before, .arcade *::after { transition: none !important; scroll-behavior: auto !important; } }

.arena-live { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; font-size: 12px; }
.arena-live-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.arena-live p { margin: 8px 0; color: var(--muted); line-height: 1.6; }
.arena-live ol { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-left: 22px; margin: 8px 0 0; }
.arena-live li { padding-right: 4px; }
@media (max-width: 600px) { .arena-live { padding: 12px; } .arena-live-top { flex-direction: column; } }

/* Five cards on desktop; native swipe and explicit controls share the same track. */
.arcade-carousel { margin-bottom: 36px; min-width: 0; }
.arcade-games { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; margin: 0; padding: 4px 0; }
.arcade-games::-webkit-scrollbar { display: none; width: 0; height: 0; }
.arcade-game { flex: 0 0 calc((100% - 48px) / 5); scroll-snap-align: start; --card-color: #8fbaff; }
.arcade-game[data-accent="blue"] { --card-color: #80b8ff; }
.arcade-game[data-accent="violet"] { --card-color: #b09aff; }
.arcade-game[data-accent="acid"] { --card-color: #cced54; }
.arcade-game[data-accent="sand"] { --card-color: #ffc64b; }
.arcade-game[data-accent="coral"] { --card-color: #ff9383; }
.arcade-game[data-accent="mint"] { --card-color: #51dfbc; }
.arcade-game[aria-pressed="true"] { color: #122238; background: var(--card-color); border-color: #122238; }
.arcade-game[aria-pressed="true"] :is(.arcade-game-top, .arcade-game-tag, .arcade-game-icon) { color: inherit; }
.arcade-slider-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.arcade-slider-controls > span { margin-right: 8px; color: var(--muted); font: 11px ui-monospace, monospace; }
.arcade-slider-controls button { width: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 50%; font-size: 19px; }
.arcade-slider-controls button:disabled { opacity: .35; cursor: default; }
.arcade[data-selected-game="room"] .arcade-layout { display: none; }
.arcade[data-selected-game="room"] .arcade-game-intro { width: 100%; }
.breakroom { --forest-bg: #eef4e6; --forest-panel: #f8faf1; --forest-line: #c2d1b4; --forest-text: #29412f; --forest-muted: #5b7059; --forest-fern: #4b7b43; --forest-water: #397d91; --forest-coral: #ba7168; --forest-ochre: #87671d; }
.room-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#room-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; font-size: 12px; }
.room-copy-label { display: grid; }
.room-copy-label > span { grid-area: 1 / 1; white-space: nowrap; }
#room-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#room-copy .room-copy-success, #room-copy.is-copied .room-copy-default { visibility: hidden; }
#room-copy.is-copied .room-copy-success { visibility: visible; }
#room-copy.is-copied { background: #51dfbc; color: #122238; }
.room-shell { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--forest-line); border-radius: 20px; background: var(--forest-bg); }
.room-stage { position: relative; height: min(66vw, 650px); min-height: 500px; overflow: hidden; isolation: isolate; background: var(--forest-bg); scroll-margin-top: 8px; }
#room-canvas { display: block; width: 100%; height: 100%; outline-offset: -4px; touch-action: none; }
/* Show active keyboard focus in the HUD instead of outlining the whole scene. */
.is-connected #room-canvas:focus-visible { outline: none; }
.is-connected #room-canvas:focus-visible ~ .room-hud #room-online { text-decoration: underline; text-underline-offset: 3px; }
.room-welcome { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 20px; padding: clamp(24px, 5vw, 70px); background: linear-gradient(90deg,#eef4e6f5 0%,#eef4e6e0 40%,#eef4e650 100%); color: var(--forest-text); }
.room-badge { display: flex; align-items: center; gap: 8px; font: 10px ui-monospace, monospace; letter-spacing: .06em; color: var(--forest-muted); }
.room-badge i { width: 6px; height: 6px; border-radius: 50%; background: #7deac9; box-shadow: 0 0 12px #7deac955; }
.room-welcome h3 { font-size: clamp(30px, 4.5vw, 56px); line-height: 1.12; letter-spacing: -.045em; margin: 0; }
.room-welcome h3 span { color: var(--forest-fern); }
.room-welcome > p { max-width: 420px; margin: 0; font-size: 13px; line-height: 1.8; color: #4b624c; }
#room-form { margin-top: 4px; }
#room-form .arcade-primary { min-height: 48px; padding: 12px 24px; background: #dceacb; color: #27402d; font-size: 13px; }
.room-welcome .room-error { font-size: 12px; color: #a53e38; }
.room-hud { position: absolute; inset: 14px 14px auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.room-hud span, .room-hud button { padding: 8px 11px; border: 1px solid #b0c2a2; border-radius: 7px; background: #f8faf1eb; color: var(--forest-text); font: 11px ui-monospace, monospace; }
.room-hud button { pointer-events: auto; min-height: 44px; }
.room-player-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.room-zone-hud { position: absolute; inset: 64px auto auto 16px; display: flex; flex-direction: column; gap: 5px; max-width: 68%; pointer-events: none; color: #29412f; text-shadow: 0 1px 2px #fff9; }
.room-zone-hud strong { font-size: 17px; }
.room-zone-hud span { font-size: 11px; color: #435e45; }
.room-zone-hud[data-mode="bomb"] strong { color: #fff; text-shadow: 0 1px 3px #29412fcc; }
.room-zone-hud[data-mode="hockey"] strong { color: var(--forest-water); }
.room-minimap { position: absolute; right: 14px; bottom: 14px; width: 125px; padding: 6px; background: #eef4e6d9; border: 1px solid #b0c2a2; border-radius: 9px; pointer-events: none; }
.room-minimap svg { display: block; width: 100%; }
.room-minimap svg > rect:first-child { fill: #e1ebd2; stroke: #b0c2a2; stroke-width: .4; }
.map-gaps { fill: #b9dff3; stroke: #947029; stroke-width: .6; }.map-hockey { fill: #8cb9c280; stroke: #397d91; stroke-width: .5; }.map-bomb { fill: #cdbb7280; stroke: #87671d; stroke-width: .5; }
.room-minimap > span { display: block; color: #425c42; text-align: center; font-size: 7px; }
.room-names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: layout paint style; }
.room-name { position: absolute; left: 0; top: 0; background: #f1f6e9db; color: #29412f; border: 1px solid #b0c2a2; border-radius: 8px; padding: 3px 6px; font-size: 10px; white-space: nowrap; will-change: transform; }
.room-status-row { margin: 12px 0 24px; }
#room-status { flex: 1; min-width: 180px; margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.room-touch { position: absolute; inset: auto 16px 16px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.room-stick { position: relative; width: 108px; height: 108px; border: 1px solid #7e986c99; background: #e1ebd299; border-radius: 50%; touch-action: none; pointer-events: auto; }
.room-stick span { display: block; position: absolute; left: 34px; top: 34px; width: 38px; height: 38px; border-radius: 50%; background: #f4f8e9d9; box-shadow: 0 0 12px #69875b20; }
.room-actions { display: flex; align-items: flex-end; gap: 10px; }
.room-actions button { pointer-events: auto; touch-action: none; border: 1px solid #dceacb; border-radius: 50%; width: 64px; height: 64px; background: #e2eddaed; color: #2e4a30; font-size: 11px; padding: 0; user-select: none; }
.room-actions > button:last-child { width: 76px; height: 76px; background: #dceacb; color: #27402d; }
.room-actions button:active, #room-copy:active { filter: brightness(.85); }
@media (max-width: 900px) { .arcade-game { flex-basis: calc((100% - 24px) / 4); }.room-minimap { bottom: auto; top: 112px; width: 100px; }.room-stage { height: 620px; } }
@media (max-width: 600px) { .arcade-games { margin: 0; padding: 4px 0; }.arcade-game { flex-basis: 140px; }.arcade-carousel { margin-bottom: 26px; }.arcade[data-selected-game="room"] .arcade-game-heading { gap: 12px; }#room-copy { font-size: 11px; padding: 8px 10px; }.room-stage { min-height: 520px; height: 72svh; max-height: 680px; }.room-shell { border-radius: 14px; }.room-welcome { padding: 22px 18px; gap: 20px; background: linear-gradient(90deg,#eef4e6f5,#eef4e6a6); }.room-welcome h3 { font-size: 34px; }.room-welcome > p { font-size: 12px; }.room-hud { inset: 10px 9px auto; gap: 4px; }.room-hud span,.room-hud button { font-size: 9px; padding: 7px; }.room-zone-hud { top: 62px; left: 12px; max-width: 90%; }.room-zone-hud strong { font-size: 15px; }.room-zone-hud span { font-size: 10px; }.room-minimap { width: 85px; top: 110px; right: 10px; } }

/* Action feedback stays beside the E hint and the touch action. */
.room-action-hud { display: none; position: absolute; left: 16px; bottom: 18px; grid-template-columns: 1fr auto; gap: 7px 14px; min-width: 170px; padding: 11px 13px; border: 1px solid #a4b99c; border-radius: 10px; background: #f8faf1f2; color: #29412f; font: 12px ui-monospace, monospace; pointer-events: none; }
.is-connected .room-action-hud { display: grid; }
.room-action-hud progress { grid-column: 1 / -1; }
.room-action-hud progress, .room-touch-action progress { display: block; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 6px; background: #c9d6c2; accent-color: #397d70; }
.room-action-hud progress::-webkit-progress-bar, .room-touch-action progress::-webkit-progress-bar { background: #c9d6c2; border-radius: 6px; }
.room-action-hud progress::-webkit-progress-value, .room-touch-action progress::-webkit-progress-value { background: #397d70; border-radius: 6px; }
.room-action-hud progress::-moz-progress-bar, .room-touch-action progress::-moz-progress-bar { background: #397d70; border-radius: 6px; }
.room-touch-action { display: grid; justify-items: center; gap: 9px; width: 72px; }
.room-touch-action progress { width: 64px; }
.room-actions button:disabled { opacity: .6; }
.room-countdown { position: absolute; z-index: 3; top: 46%; left: 50%; transform: translate(-50%,-50%); display: grid; justify-items: center; gap: 6px; min-width: 175px; padding: 16px 22px; border: 1px solid #b0c2a2; border-radius: 16px; background: #f8faf1ee; color: #29412f; pointer-events: none; }
.room-countdown span { font-size: 13px; }.room-countdown strong { font: 700 58px/1 ui-monospace, monospace; }

.room-zone-hud[data-mode="kart"] strong { color: #345b69; }
.map-kart { fill: none; stroke: #718b95; stroke-linejoin: round; stroke-linecap: round; }.map-kart-pit { fill: #d78b73; }
.room-race-hud { position: absolute; right: 16px; bottom: 20px; display: grid; gap: 9px; min-width: 145px; padding: 13px; border: 1px solid #9eb6b6; border-radius: 10px; background: #f8faf1ed; color: #294b55; font: 12px ui-monospace, monospace; pointer-events: none; }
.room-race-hud > span { display: flex; justify-content: space-between; gap: 16px; }.room-race-hud strong { font-size: 15px; }
.room-race-results { position: absolute; z-index: 3; left: 50%; top: 43%; transform: translate(-50%,-50%); width: min(330px,82%); padding: 20px; background: #f8faf1f5; border: 1px solid #9eb6b6; border-radius: 14px; color: #294b55; pointer-events: none; }
.room-race-results ol { margin: 12px 0; padding-left: 24px; max-height: 190px; overflow-y: auto; font-size: 12px; line-height: 1.9; }.room-race-results > span { font-size: 10px; }


.room-zone-hud[data-mode="kart"] { padding: 8px 10px; border: 1px solid #9eb6b6; border-radius: 10px; background: #f8faf1ed; text-shadow: none; }
.room-touch-hint { display: none; }
#room-race-speed.is-boosting { color: #176d80; font-weight: 700; }
.room-actions button.is-boosting { opacity: 1; background: #bee8e9; border-color: #397d91; box-shadow: 0 0 0 3px #397d9133; }
@media (max-width: 900px), (pointer: coarse) {
  .room-keyboard-hint { display: none; }.room-touch-hint { display: inline; }
  .room-race-hud { top: 62px; bottom: auto; left: auto; right: 10px; display: grid; width: 112px; min-width: 0; padding: 9px; gap: 6px; font-size: 11px; }
  .room-race-hud > span { align-items: center; gap: 6px; }.room-race-hud strong { font-size: 12px; }
  .room-zone-hud[data-mode="kart"] { top: 62px; left: 10px; max-width: calc(100% - 140px); box-sizing: border-box; }
  .room-zone-hud[data-mode="kart"] strong { font-size: 14px; }
  .room-zone-hud[data-mode="kart"] span { font-size: 11px; line-height: 1.45; }
  .room-hud button { min-height: 44px; }
}
#room-map-paths { fill: none; stroke: #b9a476; stroke-width: 1.7; stroke-linecap: round; }
@media (max-width: 900px) and (orientation: landscape) and (max-height: 600px) {
  .room-stage { min-height: 200px; height: calc(100svh - var(--site-header-height, 78px) - 32px); max-height: 500px; }
  .room-minimap { top: 62px; width: 80px; }
  .room-zone-hud { max-width: calc(100% - 126px); }
  .room-touch { bottom: 10px; }.room-stick { width: 88px; height: 88px; }.room-stick span { left: 24px; top: 24px; }
  .room-actions > button:last-child { width: 64px; height: 64px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .room-player-actions { flex-basis: 100%; justify-content: flex-end; }
  .room-zone-hud, .room-zone-hud[data-mode="kart"], .room-race-hud { top: 116px; }
  .room-minimap { top: 166px; }
}