/* Shared game container, adapted from the owner's game-window reference.
   Game renderers retain their own artwork and logical canvas dimensions. */
body.arcade-open {
  --window-ink: #18171d;
  --window-bg: #18171d;
  --window-panel: #25232e;
  --window-pink: #ff5472;
  --window-yellow: #ffc83d;
  --window-cyan: #b6aee2;
  --window-paper: #f8f4e9;
  --focus: #ffc928;
}
body.arcade-open #arcade-play {
  position: fixed; inset: 0; z-index: 20; display: block; height: 100dvh;
  padding: 14px 18px 12px; overflow: hidden; background: var(--window-bg); color: #fff;
}
.arcade-window {display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; min-height: 0; margin: auto;}
.arcade-window-bar {display: flex; align-items: center; gap: 24px; flex-shrink: 0; min-height: 60px; padding: 7px 14px; background: var(--window-paper); color: var(--window-ink); border: 2px solid var(--window-ink); border-radius: 16px; box-shadow: 3px 3px 0 #000;}
.arcade-window-brand {display: inline-flex; align-items: center; flex-shrink: 0;}
.arcade-window-brand b {font-size: 1.125rem; font-weight: 900; letter-spacing: -.055em;}
.arcade-window-brand b>span {color: #a4263d;}
.arcade-window-navigation,.arcade-window-actions {display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
body.arcade-open #arcade-play .btn {min-height: 44px; border: 2px solid var(--window-ink); border-radius: 999px; padding: 9px 12px; font-family: inherit; font-size: .8125rem; font-weight: 900; line-height: 1.3; letter-spacing: .025em; color: var(--window-ink); background: var(--window-paper); box-shadow: none;}
body.arcade-open #arcade-play .btn:hover:not(:disabled) {background: var(--window-cyan); color: var(--window-ink); filter: none;}
body.arcade-open #arcade-play .btn:focus-visible {outline: 3px solid var(--window-cyan); outline-offset: 2px;}
body.arcade-open #arcade-play .btn:disabled {background: #d2cbda; color: #4b4554; opacity: .8;}
body.arcade-open #arcade-play #arcade-pause {background: var(--window-yellow);}
body.arcade-open #arcade-lobby>span {margin-left: 6px; font-size: 1rem; line-height: 1;}
body.arcade-open .arcade-play-layout {position: relative; display: grid; grid-template-columns: minmax(0,1fr) 290px; flex: 1; min-height: 0; gap: 16px; margin: 0;}
.arcade-cabinet {position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); min-width: 0; min-height: 0; padding: 8px; border: 2px solid #ffffff40; border-radius: 18px; background: var(--window-panel); box-shadow: none;}
body.arcade-open .arcade-play-heading {display: block; flex: 1; min-width: 0; min-height: 0; height: auto; padding: 0; margin: 0; background: none; border: 0; grid-column: auto; grid-row: auto; z-index: auto; font-family: inherit;}
body.arcade-open .arcade-play-heading h2 {font: 900 clamp(14px,1.4vw,20px)/1.15 Arial,Helvetica,sans-serif; text-transform: uppercase; letter-spacing: -.025em; white-space: normal; overflow-wrap: anywhere; overflow: visible; color: var(--window-ink); margin: 0;}
body.arcade-open .arcade-play-heading .eyebrow {display: block; margin: 0 0 3px; color: #3d1027; font-size: .625rem; font-weight: 700; line-height: 1.3; letter-spacing: .035em;}
body.arcade-open .arcade-stage {position: relative; grid-column: 1; grid-row: 1; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; align-items: stretch; justify-content: stretch; min-width: 0; min-height: 0; width: 100%; height: auto; align-self: stretch; flex: none; background: #191820; border: 1px solid #ffffff20; border-radius: 12px; box-shadow: none; overflow: hidden;}
.arcade-viewport {position: relative; min-width: 0; min-height: 0;}
body.arcade-open .arcade-stage canvas {position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; outline: none;}
/* The HUD shares the canvas frame, but has a safe edge of its own. It cannot
   cover a paddle, enemy, minimap or a renderer's existing game-specific HUD. */
.arcade-hud {display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px; background: var(--window-panel); border-top: 1px solid #ffffff30;}
body.arcade-open .arcade-run-score {position: static; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex: 1; min-width: 0; grid-column: auto; grid-row: auto; gap: 8px; padding: 0; margin: 0; pointer-events: none;}
body.arcade-open .arcade-run-score>span {display: block; min-width: 0; padding: 6px 8px; text-align: center; background: #16151c66; border: 1px solid #ffffff50; border-radius: 9px; color: #ded9ee; font-size: .625rem; line-height: 1.3; letter-spacing: .05em; font-weight: 900;}
body.arcade-open .arcade-run-score b {display: block; color: #fff; font-size: 1.125rem; line-height: 1.2; font-weight: 900; letter-spacing: -.025em; margin-top: 2px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;}
body.arcade-open #arcade-play .arcade-window-actions .btn,body.arcade-open #arcade-standings {display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0;}
body.arcade-open #arcade-sound {display: inline-block;}
body.arcade-open #arcade-help {font-size: 1.125rem;}
body.arcade-open #arcade-play #arcade-fullscreen {background: var(--window-yellow);}
.fullscreen-exit {display: none;}
.arcade-expanded .fullscreen-enter {display: none;}
.arcade-expanded .fullscreen-exit {display: block;}
body.arcade-open #arcade-close-standings {display: none;}
.arcade-scoreboard {
  min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--window-paper); color: var(--window-ink);
  border: 2px solid #ffffff40; border-radius: 18px; box-shadow: none;
  scrollbar-color: #aaa094 var(--window-paper);
}
body.arcade-open :is(.lb-panel,.lb-personal) {
  display: block; width: auto; height: auto; flex: none; padding: 20px 16px;
  background: var(--window-paper); color: var(--window-ink);
  border: 0; overflow: visible; font-family: inherit;
}
body.arcade-open .lb-heading {color: #a4263d; font-size: .6875rem; font-weight: 900; letter-spacing: .04em; align-items: start;}
body.arcade-open .lb-heading>div {min-width: 0; overflow-wrap: anywhere;}
body.arcade-open .lb-count {font-size: .625rem; color: #59525b; white-space: nowrap; line-height: 1.5;}
.lb-title-row {display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 2px solid var(--window-ink); padding-bottom: 14px; margin: 6px 0 14px;}
body.arcade-open .lb-title {font: 900 1.35rem/1.1 Arial,Helvetica,sans-serif; letter-spacing: -.04em; text-transform: uppercase; color: var(--window-ink); margin: 0;}
.lb-trophy {display: block; width: 26px; height: 26px; flex-shrink: 0; color: #a4263d;}
body.arcade-open :is(.lb-rule,.lb-foot,.lb-empty,.lb-chase,.lb-practice,.lb-own-rank,.lb-connection) {font-size: .75rem; line-height: 1.55; color: #59525b; margin: 0 0 14px;}
body.arcade-open .lb-practice {background: #ebe3f5; color: #3f2d56; border-left: 3px solid #8a58c0; padding: 8px 10px;}
body.arcade-open .lb-table {margin: 16px 0 0; border: 0;}
body.arcade-open .lb-table tbody {display: grid; gap: 10px;}
body.arcade-open .lb-table tr {grid-template-columns: 28px minmax(0,1fr) minmax(66px,auto); grid-template-rows: auto auto; gap: 1px 8px; padding: 9px; align-items: center; background: #fff; border: 2px solid var(--window-ink); border-radius: 12px; color: var(--window-ink);}
body.arcade-open .lb-table tr.lb-you {background: #ffdfe5;}
body.arcade-open .lb-table td {font-size: .8125rem; border: 0;}
body.arcade-open .lb-position {display: grid; place-items: center; align-self: center; width: 28px; min-height: 28px; grid-row: 1 / 3; background: #f0e9dd; color: #a4263d; border-radius: 8px; font-weight: 900; line-height: 1.2; padding: 5px 2px!important;}
body.arcade-open .lb-first .lb-position {background: var(--window-ink); color: var(--window-yellow);}
body.arcade-open .lb-name,body.arcade-open .lb-first .lb-name {font-size: .8125rem; font-weight: 900; line-height: 1.3; color: var(--window-ink);}
body.arcade-open .lb-player {grid-column: 2; grid-row: 1 / 3; align-items: center; min-width: 0;}
body.arcade-open .lb-name {white-space: normal; overflow-wrap: anywhere;}
body.arcade-open .lb-you-label {font-size: .625rem; color: #4b3910; font-weight: 900; letter-spacing: 0;}
body.arcade-open .lb-number {grid-column: 3; grid-row: 1; max-width: 125px; text-align: right; overflow-wrap: anywhere; font-weight: 700; line-height: 1.4; color: var(--window-ink);}
body.arcade-open .lb-number::before {display: none;}
body.arcade-open .lb-time {grid-column: 3; grid-row: 2; font-size: .6875rem!important; color: #59525b; line-height: 1.25;}
body.arcade-open .lb-foot {border-top: 2px solid #d5cec1; padding-top: 12px; margin: 18px 0 0;}
body.arcade-open .lb-connection {background: #fff0ce; color: #754006; border: 1px solid #bd8b33; padding: 8px;}
body.arcade-open .lb-panel>.lb-eyebrow {color: #a4263d;}
body.arcade-open .lb-personal {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; border-top: 2px solid var(--window-ink); margin: 0 16px 16px; padding: 16px 0 0;}
body.arcade-open .lb-eyebrow {font-size: .6875rem; color: #59525b; font-weight: 900; letter-spacing: .04em; margin: 0;}
body.arcade-open .lb-personal>.lb-eyebrow {grid-column: 1 / 3; align-self: center;}
body.arcade-open .lb-personal-rank {font: 900 1.75rem/1 Arial,Helvetica,sans-serif; color: var(--window-ink); margin: 0; text-align: right;}
body.arcade-open .lb-stat {min-width: 0; padding: 10px 0; border-top: 1px solid #bdb5a8;}
body.arcade-open .lb-stat>span {font-size: .625rem; line-height: 1.5; color: #59525b; font-weight: 700; letter-spacing: 0;}
body.arcade-open .lb-stat>strong {font-size: .9375rem; color: var(--window-ink); font-weight: 900; margin-top: 5px;}
body.arcade-open .lb-personal>:is(.lb-empty,.lb-chase,.lb-foot) {grid-column: 1 / -1; margin: 0;}
body.arcade-open .arcade-play-footer {display: flex; justify-content: space-between; flex-shrink: 0; gap: 16px; height: auto; min-height: 0; margin: 0; padding: 0; background: none; color: #c8c8df; font-size: .6875rem; line-height: 1.5; font-weight: 700;}
body.arcade-open .arcade-play-footer>span:last-child {display: inline; text-align: right;}
/* Pause and controls belong to the cabinet, so actions cannot hide offscreen. */
body.arcade-open .arcade-overlay {position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; align-items: safe center; overflow: auto; padding: 24px; background: #18171dd9; backdrop-filter: none;}
body.arcade-open .arcade-overlay>div {width: 100%; max-width: 460px; padding: 26px 22px; border: 2px solid var(--window-ink); border-radius: 20px; background: var(--window-paper); box-shadow: 6px 6px 0 var(--window-pink); color: var(--window-ink);}
body.arcade-open .arcade-overlay .eyebrow {font-size: .6875rem; letter-spacing: .08em; font-weight: 900; color: #a4263d; margin: 0;}
body.arcade-open .arcade-overlay h2 {font: 900 clamp(24px,3vw,38px)/1.1 Arial,Helvetica,sans-serif; letter-spacing: -.04em; color: var(--window-ink); margin: 12px 0;}
body.arcade-open .arcade-overlay p:not(.eyebrow) {font-size: .875rem; line-height: 1.6; color: #59525b; margin: 0 0 18px;}
body.arcade-open #arcade-play .arcade-overlay .btn.primary {background: var(--window-yellow); color: var(--window-ink); box-shadow: 3px 3px 0 var(--window-ink);}
body.arcade-open .arcade-sidebar {display: none; position: absolute; top: 14px; right: 14px; z-index: 10; width: min(340px,calc(100% - 28px)); max-height: calc(100% - 28px); padding: 18px; overflow: auto; background: var(--window-paper); color: var(--window-ink); border: 2px solid var(--window-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--window-pink);}
body.arcade-open .show-help .arcade-sidebar {display: block;}
.arcade-controls-heading {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
body.arcade-open .arcade-sidebar :is(p,span,kbd,.eyebrow) {color: #59525b; font-size: .8125rem; line-height: 1.6;}
body.arcade-open .arcade-sidebar .eyebrow {color: #a4263d; font-size: .6875rem; font-weight: 900; margin: 0;}
body.arcade-open #arcade-play #arcade-close-help {min-width: 44px; font-size: 1.25rem; padding: 6px;}
body.arcade-open .arcade-sidebar kbd {color: var(--window-ink); font-weight: 900;}
body.arcade-open #arcade-live-objective {margin: 14px 0; color: var(--window-ink);}
body.arcade-open .arcade-sync {border-color: #bdb5a8;}
body.arcade-open #arcade-room-code {color: #a4263d;}
body.arcade-open #resume-countdown {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 8; max-width: calc(100% - 24px); pointer-events: none;}
body.arcade-open .resume-countdown-card {padding: 8px 16px; border: 2px solid var(--window-ink); border-radius: 16px; background: var(--window-yellow); color: var(--window-ink); box-shadow: 4px 4px 0 var(--window-pink); gap: 14px; white-space: nowrap;}
body.arcade-open .resume-countdown-card span {font-size: .6875rem; letter-spacing: .07em; font-weight: 900;}
body.arcade-open .resume-countdown-card strong {font: 900 2.5rem/1 Arial,Helvetica,sans-serif;}
body.arcade-open #leader-celebration {top: 104px; background: var(--window-paper); color: var(--window-ink); border: 3px solid var(--window-ink); box-shadow: 5px 5px 0 var(--window-yellow);}
body.arcade-open .lb-celebration-game {color: #a4263d;}
body.arcade-open .large-hud .arcade-run-score>span {font-size: .8125rem;}
body.arcade-open .large-hud .arcade-run-score b {font-size: 1.25rem;}
body.arcade-open .high-contrast .arcade-stage {outline: 2px solid #fff; outline-offset: -2px;}
@media(max-width:1100px) {
  .arcade-window-bar {gap: 18px;}
  body.arcade-open .arcade-play-layout {grid-template-columns: minmax(0,1fr) 260px; gap: 12px;}
  body.arcade-open .lb-panel {padding: 16px 12px;}
  body.arcade-open .lb-title {font-size: 1.25rem;}
  body.arcade-open .lb-table tr {padding: 9px; gap: 6px;}
}
@media(max-width:850px) and (min-height:601px), (max-width:649px) {
  body.arcade-open #arcade-play {overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 16px;}
  .arcade-window {height: auto; min-height: 100%; gap: 12px;}
  .arcade-window-bar {position: sticky; top: 0; z-index: 16; padding: 6px 10px; gap: 12px;}
  .arcade-window-brand {display: none;}
  body.arcade-open .arcade-play-layout {grid-template-columns: minmax(0,1fr); flex: none; gap: 16px;}
  .arcade-cabinet {padding: 5px;}
  body.arcade-open .arcade-stage {height: auto; aspect-ratio: auto;}
  .arcade-viewport {aspect-ratio: var(--arena-ratio, 1.6);}
  .arcade-scoreboard {overflow: visible;}
  body.arcade-open .lb-panel {height: auto; padding: 20px 16px;}
  body.arcade-open .lb-title {font-size: 1.35rem;}
  body.arcade-open .lb-personal {display: grid;}
  body.arcade-open .arcade-play-footer {flex-wrap: wrap; gap: 6px;}
  body.arcade-open .arcade-play-footer>span:last-child {text-align: left;}
  body.arcade-open #leader-celebration {top: 80px;}
}
@media(max-width:600px) {
  .arcade-window-navigation {gap: 5px;}
  body.arcade-open #arcade-play .arcade-window-navigation .btn {padding: 8px; font-size: .75rem;}
  body.arcade-open #arcade-lobby>span {margin-left: 2px;}
  body.arcade-open .arcade-play-heading h2 {font-size: .875rem;}
  body.arcade-open .arcade-play-heading .eyebrow {font-size: .5625rem; letter-spacing: 0;}
  .arcade-hud {gap: 5px; padding: 5px;}
  .arcade-window-actions {gap: 4px;}
  body.arcade-open .arcade-run-score {gap: 6px;}
  body.arcade-open .arcade-run-score>span {padding: 5px 3px; font-size: .5625rem; letter-spacing: 0;}
  body.arcade-open .arcade-run-score b {font-size: .875rem;}
  body.arcade-open .arcade-overlay {padding: 12px;}
  body.arcade-open .arcade-overlay>div {padding: 18px 14px;}
  body.arcade-open .arcade-overlay p:not(.eyebrow) {font-size: .8125rem;}
  body.arcade-open #arcade-play .arcade-overlay .btn {font-size: .75rem; padding: 10px 12px;}
  body.arcade-open .arcade-sidebar {padding: 14px;}
  body.arcade-open .resume-countdown-card strong {font-size: 2rem;}
  body.arcade-open #resume-countdown {top: 50%;}
}
/* Landscape keeps its canvas tall; the sidebar can scroll independently. */
@media(max-height:700px) and (min-width:850px), (max-height:600px) and (min-width:650px) {
  body.arcade-open #arcade-play {padding: 8px 12px 10px; overflow: hidden;}
  .arcade-window {height: 100%; min-height: 0; gap: 10px;}
  .arcade-window-bar {position: static; min-height: 52px; padding: 3px 10px;}
  .arcade-window-brand {display: none;}
  body.arcade-open .arcade-play-layout {grid-template-columns: minmax(0,1fr) 230px; flex: 1; min-height: 0; gap: 12px;}
  .arcade-cabinet {padding: 4px;}
  .arcade-viewport {aspect-ratio: auto;}
  body.arcade-open .arcade-play-heading h2 {font-size: .9375rem;}
  body.arcade-open .arcade-run-score b {font-size: .9375rem;}
  .arcade-scoreboard {overflow-y: auto; border-width: 3px;}
  body.arcade-open .lb-panel {height: auto; padding: 12px;}
  body.arcade-open .lb-title {font-size: 1.125rem;}
  .lb-title-row {padding-bottom: 10px; margin-bottom: 10px;}
  .lb-trophy {width: 22px; height: 22px;}
  body.arcade-open .lb-table tr {padding: 8px;}
  body.arcade-open .lb-personal {margin: 0 12px 12px; padding-top: 12px;}
  body.arcade-open .arcade-play-footer {display: none;}
  body.arcade-open .arcade-overlay {padding: 10px;}
  body.arcade-open .arcade-overlay>div {padding: 12px 16px;}
  body.arcade-open .arcade-overlay h2 {font-size: 26px; margin: 8px 0;}
  body.arcade-open .arcade-overlay p:not(.eyebrow) {margin-bottom: 10px; font-size: .8125rem;}
}
/* Native fullscreen and the browser fallback share an immersive layout. */
body.arcade-open.arcade-expanded #arcade-play {padding: 0; overflow: hidden;}
.arcade-expanded .arcade-window {height: 100%; min-height: 0; gap: 0;}
.arcade-expanded .arcade-window-bar {position: static; min-height: 52px; padding: 3px 10px; gap: 12px; box-shadow: none;}
.arcade-expanded .arcade-window-brand {display: none;}
body.arcade-open.arcade-expanded .arcade-play-layout {grid-template-columns: minmax(0,1fr); flex: 1; min-height: 0; gap: 0;}
.arcade-expanded .arcade-cabinet {padding: 0; border-width: 2px; box-shadow: none;}
.arcade-expanded .arcade-viewport {aspect-ratio: auto;}
.arcade-expanded .arcade-scoreboard {display: none; position: absolute; inset: 8px 8px 8px auto; z-index: 11; width: min(330px,calc(100% - 16px)); overflow-y: auto;}
.arcade-expanded .show-standings .arcade-scoreboard {display: block;}
body.arcade-open.arcade-expanded #arcade-close-standings {display: block; float: right; width: 44px; padding: 0; margin: 8px 8px 0; font-size: 1.25rem;}
.arcade-expanded .arcade-scoreboard .lb-panel {clear: both;}
body.arcade-open.arcade-expanded .arcade-play-footer {display: none;}
/* Only scenery extends beyond the original board; gameplay is never cropped. */
body.arcade-open .arcade-stage #arcade-backdrop{pointer-events:none;object-fit:fill}
body.arcade-open .arcade-stage #arcade-canvas{background:transparent}