:root {
  color-scheme: dark;
  --arcade-bg: #08111f;
  --arcade-panel: rgba(16, 31, 53, .92);
  --arcade-panel-2: rgba(23, 43, 70, .88);
  --arcade-text: #f5f8ff;
  --arcade-muted: #afc1d9;
  --arcade-line: rgba(184, 211, 244, .18);
  --arcade-accent: #7ee7c9;
  --arcade-accent-2: #ffd47d;
  --arcade-danger: #ff8c9b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--arcade-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(71, 145, 196, .24), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(121, 79, 175, .2), transparent 42%),
    var(--arcade-bg);
}
button, select, input { font: inherit; }
button, select, input { color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--arcade-accent-2); outline-offset: 2px; }

.popular-arcade {
  width: min(100%, 920px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px clamp(14px, 3vw, 32px) 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.arcade-header, .arcade-footer, .arcade-panel {
  border: 1px solid var(--arcade-line);
  background: var(--arcade-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  border-radius: 24px;
}
.arcade-header { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.eyebrow { color: var(--arcade-accent); letter-spacing: .13em; text-transform: uppercase; font-size: .72rem; font-weight: 800; }
h1, h2, p { margin: 0; }
h1 { margin-top: 5px; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.05; }
.tagline { margin-top: 8px; color: var(--arcade-muted); max-width: 62ch; }
.locale-picker { display: grid; gap: 5px; min-width: 142px; color: var(--arcade-muted); font-size: .76rem; }
.locale-picker select { border: 1px solid var(--arcade-line); border-radius: 12px; background: var(--arcade-panel-2); padding: 9px 10px; }
/* Checkers keeps the collection shell, Guide, and live Battle in one clear
   hierarchy: a stable return affordance anchors Main, while Battle gets an
   equally reachable way back without changing the shared panel geometry. */
body[data-game-id="checkers"] .checkers-shell-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
body[data-game-id="checkers"] .checkers-heading { min-width: 0; }
body[data-game-id="checkers"] .checkers-main-return,
body[data-game-id="checkers"] .checkers-battle-return {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  color: var(--arcade-accent);
  background: rgba(255,255,255,.07);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
body[data-game-id="checkers"] .checkers-main-return:hover,
body[data-game-id="checkers"] .checkers-battle-return:hover {
  transform: translateY(-1px);
  border-color: var(--arcade-accent);
  background: rgba(126,231,201,.14);
}
body[data-game-id="checkers"] .checkers-main-return img {
  display: none;
}
body[data-game-id="checkers"] .checkers-return-arrow {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}
body[data-game-id="checkers"] .game-page-info {
  width: min(920px, calc(100% - 24px));
}
body[data-game-id="checkers"] #battleScreen .battle-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
body[data-game-id="checkers"] #battleScreen .battle-top > .round-label { min-width: 0; }
body[data-game-id="checkers"] #battleScreen .battle-top > .control-row {
  justify-content: flex-end;
}
.screen[hidden] { display: none; }
/* Static public guides belong to Main. Keep them out of the live Battle and
   Result viewport so they cannot add document height behind the game shell. */
body[data-screen="battle"] .game-page-info-static,
body[data-screen="result"] .game-page-info-static { display: none !important; }
body[data-game-id="tic-tac-toe"][data-screen="battle"] .game-page-info,
body[data-game-id="tic-tac-toe"][data-screen="result"] .game-page-info { display: none !important; }
html.popular-tic-tac-toe-active body.has-game-page-info {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  touch-action: none !important;
}
.screen { flex: 1; }
.arcade-panel { min-height: 460px; padding: clamp(18px, 4vw, 38px); display: grid; align-content: center; gap: 22px; }
.main-panel { grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr); align-items: center; }
.main-copy { display: grid; gap: 14px; }
.main-copy p { color: var(--arcade-muted); line-height: 1.65; }
.objective { padding: 14px 16px; border-left: 3px solid var(--arcade-accent); background: rgba(126, 231, 201, .08); border-radius: 12px; }
.preview-art { min-height: 220px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(145deg, rgba(126,231,201,.18), rgba(255,212,125,.1)); border: 1px solid var(--arcade-line); font-size: 6rem; filter: drop-shadow(0 16px 24px rgba(0,0,0,.3)); }
.preview-art img { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.primary, .secondary, .control {
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  min-height: 46px;
  padding: 10px 16px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.primary { color: #06151a; background: var(--arcade-accent); border-color: transparent; font-weight: 800; }
.secondary, .control { background: rgba(255,255,255,.07); }
.primary:hover, .secondary:hover, .control:hover { transform: translateY(-1px); border-color: var(--arcade-accent); }
.battle-panel { gap: 14px; align-content: start; }
.battle-top, .result-actions, .control-row, .stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.battle-top { justify-content: space-between; }
.round-label { color: var(--arcade-muted); font-size: .9rem; }
.board-wrap { min-height: 270px; display: grid; place-items: center; padding: 12px; border: 1px solid var(--arcade-line); border-radius: 18px; background: rgba(0,0,0,.16); }
.board { width: min(100%, 560px); min-height: 240px; display: grid; place-items: center; }
.board button { -webkit-tap-highlight-color: transparent; }
.game-message { min-height: 26px; color: var(--arcade-muted); line-height: 1.5; }
.game-message[data-tone="good"] { color: var(--arcade-accent); }
.game-message[data-tone="warn"] { color: var(--arcade-accent-2); }
.control-row { justify-content: center; }
.control { min-width: 72px; min-height: 48px; }
body[data-game-id="snake"] #controls .control { touch-action: manipulation; }
.arcade-footer { padding: 12px 16px; color: var(--arcade-muted); font-size: .82rem; text-align: center; }
.arcade-ad-reserve { display: none; }

/* Tetris Battle and Result own the complete active viewport at every
   canonical size. Keep the inactive collection shell out of the flex stack
   so portrait rows cannot grow the document behind the live controls. */
html:has(body[data-game-id="tetris"][data-screen="battle"]),
html:has(body[data-game-id="tetris"][data-screen="result"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-game-id="tetris"][data-screen="battle"],
body[data-game-id="tetris"][data-screen="result"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
body[data-game-id="tetris"][data-screen="battle"] .popular-arcade,
body[data-game-id="tetris"][data-screen="result"] .popular-arcade {
  height: 100dvh;
  min-height: 0;
  padding: 12px clamp(14px, 3vw, 32px) 16px;
  gap: 0;
}
body[data-game-id="tetris"][data-screen="battle"] .arcade-header,
body[data-game-id="tetris"][data-screen="battle"] .arcade-footer,
body[data-game-id="tetris"][data-screen="result"] .arcade-header,
body[data-game-id="tetris"][data-screen="result"] .arcade-footer {
  display: none;
}
body[data-game-id="tetris"][data-screen="battle"] #battleScreen,
body[data-game-id="tetris"][data-screen="result"] #resultScreen {
  min-height: 0;
  height: 100%;
}
body[data-game-id="tetris"][data-screen="battle"] .battle-panel,
body[data-game-id="tetris"][data-screen="result"] #resultScreen .arcade-panel {
  height: 100%;
  min-height: 0;
}

/* Mahjong's flat six-pair Battle/Result owns the active play surface above
   the shared General reserve. The collection header/footer and legacy panel
   minimum must not push the compact landscape tile board below that reserve. */
html:has(body[data-game-id="mahjong-solitaire"][data-screen="battle"]),
html:has(body[data-game-id="mahjong-solitaire"][data-screen="result"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"],
body[data-game-id="mahjong-solitaire"][data-screen="result"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .popular-arcade,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .popular-arcade {
  height: 100dvh;
  min-height: 0;
  padding: 12px clamp(14px, 3vw, 32px) 0;
  gap: 0;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .arcade-header,
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .arcade-footer,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .arcade-header,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .arcade-footer {
  display: none;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen,
body[data-game-id="mahjong-solitaire"][data-screen="result"] #resultScreen {
  min-height: 0;
  height: 100%;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .battle-panel,
body[data-game-id="mahjong-solitaire"][data-screen="result"] #resultScreen .arcade-panel {
  height: 100%;
  min-height: 0;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .board-wrap {
  min-height: 0;
  overflow: hidden;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .board {
  height: 100%;
  min-height: 0;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .arcade-ad-reserve,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .arcade-ad-reserve {
  display: block;
  flex: 0 0 56px;
  height: 56px;
  min-height: 56px;
  pointer-events: none;
  background: transparent;
}

/* Checkers Battle is a complete active-play surface. Keep the document root
   out of the gesture chain, then let the shared V6 panel use the full safe
   viewport so its board, cue, and Select action stay one reachable unit. */
html.popular-checkers-active,
html.popular-checkers-active body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.popular-checkers-active body {
  height: 100dvh;
  min-height: 0;
  touch-action: none;
}
/* Breakout's owner-preview Battle/Result is a complete active-play surface.
   Keep the compact collection shell out of the active viewport so its
   header/footer and Main-flow minimum heights cannot push the twelve-brick
   field or recovery actions below a short landscape frame. */
html.popular-breakout-active,
html.popular-breakout-active body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.popular-breakout-active body {
  height: 100dvh;
  min-height: 0;
  touch-action: none;
}
html.popular-breakout-active .popular-arcade {
  height: 100dvh;
  min-height: 0;
  padding: 12px 14px 16px;
  gap: 0;
}
html.popular-breakout-active .arcade-header,
html.popular-breakout-active .arcade-footer { display: none; }
html.popular-breakout-active #battleScreen,
html.popular-breakout-active #resultScreen {
  min-height: 0;
  height: 100%;
}
html.popular-breakout-active #battleScreen .battle-panel {
  height: 100%;
  min-height: 0;
  padding: 18px;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
html.popular-breakout-active #battleScreen .board-wrap {
  min-height: 0;
  overflow: hidden;
}
html.popular-breakout-active #battleScreen .board {
  height: 100%;
  min-height: 0;
}
html.popular-breakout-active #battleScreen .brick-board {
  max-height: 100%;
}
html.popular-breakout-active #resultScreen .arcade-panel {
  height: 100%;
  min-height: 0;
  padding: 18px;
}
html.popular-checkers-active .popular-arcade {
  height: 100dvh;
  min-height: 0;
  padding: 12px 14px 16px;
  gap: 0;
}
html.popular-checkers-active .arcade-header,
html.popular-checkers-active .arcade-footer { display: none; }
html.popular-checkers-active #battleScreen,
html.popular-checkers-active #resultScreen {
  min-height: 0;
  height: 100%;
}
html.popular-checkers-active #battleScreen .battle-panel {
  height: 100%;
  min-height: 0;
  padding: 18px;
  align-content: stretch;
  grid-template-rows: auto minmax(260px, 1fr) auto auto;
}
html.popular-checkers-active #battleScreen .board-wrap {
  min-height: 0;
  overflow: hidden;
}
html.popular-checkers-active #battleScreen .board {
  height: 100%;
  min-height: 0;
}
html.popular-checkers-active #battleScreen .checkers-board {
  width: min(100%, 420px, calc(100dvh - 90px));
  max-height: 100%;
}
html.popular-checkers-active #resultScreen .arcade-panel {
  height: 100%;
  min-height: 0;
  padding: 18px;
}

/* A portrait Checkers board is ratio-locked. Keep its declared square track
   content-sized so the full-height Battle shell does not turn the board's
   unused aspect-ratio remainder into a dead vertical column. Landscape keeps
   the flexible board track below. */
html.popular-checkers-active body[data-screen="battle"] #battleScreen .battle-panel {
  align-content: start;
  grid-template-rows: auto auto auto auto;
}
html.popular-checkers-active body[data-screen="battle"] #battleScreen .board-wrap {
  height: auto;
}
html.popular-checkers-active body[data-screen="battle"] #battleScreen .board {
  height: auto;
}

.grid-board { display: grid; gap: 5px; width: min(100%, 360px); aspect-ratio: 1; }
.grid-board.tetris-grid { grid-template-columns: repeat(8, 1fr); }
.grid-board.snake-grid { grid-template-columns: repeat(10, 1fr); touch-action: none; user-select: none; }
.grid-cell { border-radius: 5px; background: rgba(255,255,255,.06); min-width: 0; min-height: 0; }
.grid-cell.filled { background: var(--arcade-accent); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
.grid-cell.active { background: var(--arcade-accent-2); }
.grid-cell.food { background: var(--arcade-danger); }
.snake-grid .grid-cell { border: 1px solid rgba(184, 211, 244, .1); }
.snake-grid .grid-cell.snake-head { background: var(--arcade-accent-2); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 0 12px rgba(255,212,125,.35); }
.snake-grid .grid-cell.food { box-shadow: inset 0 0 0 3px rgba(255,255,255,.3), 0 0 14px rgba(255,140,155,.45); }
.snake-grid .grid-cell.food-route-cue { outline: 3px solid var(--arcade-accent-2); outline-offset: -3px; box-shadow: 0 0 0 5px rgba(255,212,125,.16), 0 0 18px rgba(255,212,125,.55); animation: snake-food-route-cue 1.1s ease-in-out 1; position: relative; z-index: 1; }
.snake-grid .grid-cell.obstacle { background: linear-gradient(135deg, rgba(126,231,201,.2), rgba(255,212,125,.5)); border-color: rgba(255,212,125,.8); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 0 12px rgba(255,212,125,.28); }
.snake-grid.milestone-pulse { border: 2px solid rgba(126,231,201,.8); box-shadow: 0 0 0 5px rgba(126,231,201,.08), 0 0 26px rgba(126,231,201,.22); }
.snake-grid.milestone-cue { animation: snake-milestone-cue 1.8s ease-out 1; }
.snake-grid .grid-cell.food-hit { animation: snake-food-hit .52s ease-out; background: var(--arcade-accent); box-shadow: 0 0 0 4px rgba(126,231,201,.35), 0 0 22px rgba(126,231,201,.72); }
body[data-game-id="snake"] .round-label { max-width: 100%; color: var(--arcade-text); font-weight: 700; line-height: 1.45; }
body[data-game-id="snake"] .game-message[data-tone="good"] { font-weight: 800; }
body[data-game-id="snake"] .game-message[data-message-key="snakeMilestone"] { color: var(--arcade-accent); font-weight: 900; text-shadow: 0 0 12px rgba(126,231,201,.34); }
@keyframes snake-food-hit { 0% { transform: scale(.72); opacity: .45; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: .92; } }
@keyframes snake-food-route-cue { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.45); } }
@keyframes snake-milestone-cue { 0%, 100% { filter: brightness(1); } 38% { filter: brightness(1.38); } 62% { filter: brightness(1.12); } }
.tic-board, .checkers-board, .chess-board { display: grid; width: min(100%, 360px); aspect-ratio: 1; gap: 4px; }
.tic-board { grid-template-columns: repeat(3, 1fr); }
.tic-cell { border: 1px solid var(--arcade-line); border-radius: 12px; background: rgba(255,255,255,.08); font-size: clamp(2rem, 9vw, 4.2rem); font-weight: 900; color: var(--arcade-accent-2); }
.tic-cell:disabled { opacity: 1; cursor: default; }
.tic-cell.rival-reply { outline: 3px solid var(--arcade-accent-2); outline-offset: -3px; box-shadow: 0 0 0 5px rgba(255, 184, 107, .14), 0 0 18px rgba(255, 184, 107, .44); animation: tic-rival-reply 760ms ease-out both; }
.tic-cell.winning { outline: 3px solid var(--arcade-accent); outline-offset: -3px; box-shadow: 0 0 0 5px rgba(126, 231, 201, .14), 0 0 18px rgba(126, 231, 201, .42); animation: tic-winning-pulse 520ms ease-out both; }
@keyframes tic-rival-reply { 0% { filter: brightness(1); } 45% { filter: brightness(1.42); } 100% { filter: brightness(1.08); } }
@keyframes tic-winning-pulse { 0% { transform: scale(.94); filter: brightness(1); } 55% { transform: scale(1.04); filter: brightness(1.45); } 100% { transform: scale(1); filter: brightness(1.1); } }
@media (prefers-reduced-motion: reduce) { .tic-cell.rival-reply, .tic-cell.winning, .snake-grid .grid-cell.food-route-cue, .snake-grid.milestone-cue { animation: none; } }
.checkers-board { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 2px solid rgba(184, 211, 244, .5); border-radius: 12px; }
.checker-cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; }
.checker-cell.light { background: #91a5b5; }
.checker-cell.dark { background: #193652; }
button.checker-cell.dark { cursor: pointer; touch-action: manipulation; }
.checker-cell.selectable { box-shadow: inset 0 0 0 2px rgba(255, 212, 125, .55); }
.checker-cell.selected { box-shadow: inset 0 0 0 4px var(--arcade-accent-2); }
.checker-cell.target { background: #285c64; box-shadow: inset 0 0 0 4px var(--arcade-accent); }
.checker-cell.target::after { content: ""; position: absolute; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--arcade-accent); box-shadow: 0 0 0 4px rgba(126, 231, 201, .18); pointer-events: none; }
.checker-cell.last-human-from { outline: 3px dashed rgba(126, 231, 201, .82); outline-offset: -4px; }
.checker-cell.last-human-to { box-shadow: inset 0 0 0 4px rgba(126, 231, 201, .95), 0 0 13px rgba(126, 231, 201, .45); z-index: 2; }
.checker-cell.last-ai-from { outline: 3px dashed rgba(255, 184, 107, .82); outline-offset: -4px; }
.checker-cell.last-ai-to { box-shadow: inset 0 0 0 4px rgba(255, 184, 107, .95), 0 0 13px rgba(255, 184, 107, .4); z-index: 2; }
.checker-cell.last-captured::before { content: "×"; position: absolute; z-index: 3; color: #ff8c9b; font-size: clamp(.9rem, 4vw, 1.4rem); font-weight: 900; text-shadow: 0 1px 3px #08121e; pointer-events: none; }
.checker-cell.hinted .checker-piece { animation: checkers-hint-pulse .8s ease-in-out infinite alternate; }
.checker-piece { position: relative; z-index: 1; display: grid; place-items: center; width: 72%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; background: var(--arcade-accent-2); color: #203047; font-size: clamp(.65rem, 3vw, 1.25rem); font-weight: 900; box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.28); }
.checker-piece.enemy { background: var(--arcade-danger); color: #fff2d8; }
.checker-piece.king::after { content: ""; position: absolute; inset: 18%; border: 2px solid currentColor; border-radius: 50%; opacity: .75; }
@keyframes checkers-hint-pulse { from { transform: scale(.92); filter: brightness(1); } to { transform: scale(1.08); filter: brightness(1.28); } }
@media (prefers-reduced-motion: reduce) { .checker-cell.hinted .checker-piece { animation: none; outline: 3px solid var(--arcade-accent); } }
.chess-board { grid-template-columns: repeat(4, 1fr); gap: 0; }
.chess-cell { display: grid; place-items: center; border: 0; border-radius: 0; background: #d6c59e; color: #1a2331; font-size: clamp(2rem, 9vw, 4rem); }
.chess-cell:nth-child(3n) { background: #7796a8; }
.chess-cell.target { box-shadow: inset 0 0 0 5px var(--arcade-accent); }
.tile-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(100%, 420px); }
.tile-board[data-depth="mastery"] { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 560px); gap: 8px; }
.tile { min-height: 66px; border: 1px solid var(--arcade-line); border-radius: 14px; background: #203c59; font-size: 1.5rem; font-weight: 800; }
.tile.selected { background: var(--arcade-accent); color: #09201f; }
.wordle-board { display: grid; gap: 7px; width: min(100%, 310px); }
.wordle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.word-cell { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--arcade-line); border-radius: 8px; font-weight: 900; font-size: 1.25rem; }
.word-cell.hit { background: #3f9c77; }
.word-cell.near { background: #a07b40; }
.word-cell.miss { background: #344252; }
.word-entry { display: flex; gap: 8px; width: min(100%, 360px); }
.word-entry input { min-width: 0; flex: 1; border: 1px solid var(--arcade-line); border-radius: 12px; background: rgba(0,0,0,.18); padding: 10px 12px; text-transform: uppercase; }
.letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 540px; }
.letter { min-width: 36px; min-height: 42px; padding: 7px; border-radius: 9px; background: rgba(255,255,255,.08); border: 1px solid var(--arcade-line); }
.letter.used { opacity: .42; }
.brick-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; width: min(100%, 500px); }
.brick { min-height: 34px; border-radius: 7px; background: var(--arcade-accent-2); }
.brick.target { outline: 3px solid var(--arcade-accent); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(126, 231, 201, .14), 0 0 18px rgba(126, 231, 201, .42); }
.brick.cleared { visibility: hidden; }
.pong-board { width: min(100%, 560px); height: 250px; border: 1px solid var(--arcade-line); border-radius: 16px; background: linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.22) 50%, transparent 50.3%), rgba(0,0,0,.18); position: relative; overflow: hidden; }
.pong-paddle { position: absolute; bottom: 16px; left: 45%; width: 84px; height: 15px; border-radius: 9px; background: var(--arcade-accent); }
.pong-ball { position: absolute; top: 28%; left: 48%; width: 16px; height: 16px; border-radius: 50%; background: var(--arcade-accent-2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--arcade-accent-2) 22%, transparent), 0 0 18px color-mix(in srgb, var(--arcade-accent-2) 72%, transparent); }
.stats { justify-content: center; }
.stat { padding: 9px 13px; border-radius: 12px; background: rgba(255,255,255,.06); color: var(--arcade-muted); }
.stat strong { color: var(--arcade-text); margin-left: 4px; }
body[data-game-id="tetris"] .tetris-result-stat { display: grid; gap: 3px; min-width: 82px; text-align: center; }
body[data-game-id="tetris"] .tetris-result-stat .stat-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
body[data-game-id="tetris"] .tetris-result-stat strong { margin-left: 0; font-size: 1.15rem; }

/* Tetris v14 adopts the shared Main/Battle shell while retaining the
   popular-games runtime and its compact eight-Drop board. */
body[data-game-id="tetris"] .arcade-header.main-header {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  direction: ltr;
}
body[data-game-id="tetris"] .main-header-copy { min-width: 0; width: calc(100% - 128px); position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }
body[data-game-id="tetris"] .main-header-copy h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="tetris"] .main-header-copy .tagline { margin: 4px auto 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="tetris"] .main-return {
  width: 58px;
  min-width: 58px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  color: var(--arcade-accent);
  background: rgba(255,255,255,.07);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 900;
}
body[data-game-id="tetris"] .main-return img { width: 22px; height: 22px; object-fit: contain; }
body[data-game-id="tetris"] .settings-control { grid-column: 3; position: relative; width: 48px; height: 48px; }
body[data-game-id="tetris"] .header-icon-btn,
body[data-game-id="tetris"] .battle-utility {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  color: var(--arcade-text);
  font-size: 1.2rem;
}
body[data-game-id="tetris"] .settings-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 14px;
  background: #10243d;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
body[data-game-id="tetris"] .settings-popover.is-hidden { display: none; }
body[data-game-id="tetris"] .settings-title { color: var(--arcade-text); }
body[data-game-id="tetris"] .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--arcade-muted); }
body[data-game-id="tetris"] .settings-row select { min-width: 0; flex: 1; border: 1px solid var(--arcade-line); border-radius: 10px; background: var(--arcade-panel-2); padding: 8px; }
body[data-game-id="tetris"] #mainScreen { width: 100%; }
body[data-game-id="tetris"] #mainScreen .main-panel { align-items: center; }
body[data-game-id="tetris"] #mainScreen .preview-art { width: min(100%, 320px); aspect-ratio: 1; min-height: 0; justify-self: center; }
body[data-game-id="tetris"] #mainScreen .preview-art img.cover { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; object-fit: cover; }
body[data-game-id="tetris"] #mainScreen #startBtn { width: 100%; height: 52px; min-height: 52px; max-height: 52px; }
body[data-game-id="tetris"] #mainScreen .main-progress { min-height: 40px; display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--arcade-accent); background: rgba(126,231,201,.08); border-radius: 12px; line-height: 1.35; }
body[data-game-id="tetris"] .game-page-info-static { width: min(920px, calc(100% - 28px)); margin: 0 auto 28px; }

body[data-game-id="tetris"][data-screen="battle"] .popular-arcade,
body[data-game-id="tetris"][data-screen="result"] .popular-arcade {
  width: min(100%, 920px);
  height: 100dvh;
  min-height: 0;
  padding: 0;
  gap: 0;
}
body[data-game-id="tetris"][data-screen="battle"] #battleScreen,
body[data-game-id="tetris"][data-screen="result"] #resultScreen { min-height: 0; height: 100%; }
body[data-game-id="tetris"][data-screen="battle"] #battleScreen { display: flex; flex-direction: column; flex: 1 1 auto; }
body[data-game-id="tetris"][data-screen="battle"] .battle-canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 0;
}
body[data-game-id="tetris"][data-screen="battle"] .battle-panel { height: 100%; min-height: 0; padding: 12px 16px; align-content: stretch; grid-template-rows: auto minmax(0, 1fr) auto auto; }
body[data-game-id="tetris"][data-screen="battle"] .battle-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 48px; align-items: center; gap: 8px; direction: ltr; }
body[data-game-id="tetris"][data-screen="battle"] .battle-top > .battle-back { grid-column: 1; }
body[data-game-id="tetris"][data-screen="battle"] .battle-top > .round-label { grid-column: 2; min-width: 0; }
body[data-game-id="tetris"][data-screen="battle"] .battle-top > .control-row { grid-column: 3; justify-content: flex-end; }
body[data-game-id="tetris"][data-screen="battle"] .battle-top > .battle-utility { grid-column: 4; }
body[data-game-id="tetris"] .battle-back { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid var(--arcade-line); border-radius: 13px; background: rgba(255,255,255,.07); color: var(--arcade-accent); font-size: 1.45rem; font-weight: 900; }
body[data-game-id="tetris"][data-screen="battle"] .battle-utility { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
body[data-game-id="tetris"][data-screen="battle"] .battle-ad-reserve { display: block; flex: 0 0 56px; width: 100%; height: 56px; min-height: 56px; pointer-events: none; background: transparent; }
body[data-game-id="tetris"][data-screen="battle"] .game-page-info-static,
body[data-game-id="tetris"][data-screen="result"] .game-page-info-static { display: none !important; }

@media (max-width: 650px) {
  .arcade-header { flex-direction: column; }
  body[data-game-id="checkers"] .checkers-shell-header {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
  }
  body[data-game-id="checkers"] .checkers-shell-header .locale-picker {
    grid-column: 2;
    width: 100%;
  }
  body[data-game-id="checkers"] #battleScreen .battle-top {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  body[data-game-id="checkers"] #battleScreen .battle-top > .control-row {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  body[data-game-id="checkers"] #battleScreen .battle-top > .control-row > button { flex: 1; }
  .locale-picker { width: 100%; }
  .main-panel { grid-template-columns: 1fr; }
  .preview-art { min-height: 140px; font-size: 4.6rem; }
  .arcade-panel { min-height: 500px; }
  body[data-game-id="tetris"] .arcade-header.main-header { grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 8px; padding: 8px; }
  body[data-game-id="tetris"] .main-header-copy .tagline { display: none; }
  body[data-game-id="tetris"][data-screen="battle"] .battle-panel { padding: 10px; }
  body[data-game-id="tetris"][data-screen="battle"] .battle-top { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  body[data-game-id="tetris"][data-screen="battle"] .battle-top > .control-row { grid-column: 2; grid-row: 2; justify-content: stretch; }
  body[data-game-id="tetris"][data-screen="battle"] .battle-top > .battle-utility { grid-column: 3; grid-row: 1; }
  /* The shared Battle return is an intentional fixed overlay on this
     collection shell. Reserve its 48px lane before the Snake run heading so
     portrait play never hides the live run/mode/goal state. */
  body[data-game-id="snake"][data-screen="battle"] .battle-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding-left: 58px;
  }
  body[data-game-id="snake"][data-screen="battle"] .battle-top > .round-label {
    min-width: 0;
  }
  body[data-game-id="snake"][data-screen="battle"] .battle-top > .control-row {
    justify-content: flex-end;
  }
}
@media (orientation: landscape) and (max-height: 430px) {
  body[data-game-id="tetris"][data-screen="battle"],
  body[data-game-id="tetris"][data-screen="result"] { overflow: hidden; }
  body[data-game-id="tetris"][data-screen="battle"] .popular-arcade,
  body[data-game-id="tetris"][data-screen="result"] .popular-arcade {
    height: 100dvh;
    min-height: 0;
    padding: 6px;
    gap: 0;
  }
  body[data-game-id="tetris"][data-screen="battle"] .arcade-header,
  body[data-game-id="tetris"][data-screen="battle"] .arcade-footer,
  body[data-game-id="tetris"][data-screen="result"] .arcade-header,
  body[data-game-id="tetris"][data-screen="result"] .arcade-footer { display: none; }
  body[data-game-id="tetris"][data-screen="battle"] #battleScreen {
    min-height: 0;
    height: 100%;
  }
  body[data-game-id="tetris"][data-screen="battle"] .battle-panel {
    height: 100%;
    min-height: 0;
    padding: 7px;
    gap: 6px 12px;
    align-content: stretch;
    grid-template-columns: minmax(360px, 1fr) minmax(250px, .85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body[data-game-id="tetris"][data-screen="battle"] .board-wrap {
    grid-column: 1;
    grid-row: 1 / 4;
    min-height: 0;
    padding: 5px;
  }
  body[data-game-id="tetris"][data-screen="battle"] .board {
    height: 100%;
    min-height: 0;
  }
  body[data-game-id="tetris"][data-screen="battle"] .tetris-grid {
    width: min(100%, 360px);
    max-height: 100%;
  }
  body[data-game-id="tetris"][data-screen="battle"] .battle-top { grid-column: 2; grid-row: 1; }
  body[data-game-id="tetris"][data-screen="battle"] .game-message { grid-column: 2; grid-row: 2; align-self: start; }
  body[data-game-id="tetris"][data-screen="battle"] #controls { grid-column: 2; grid-row: 3; }
  body[data-game-id="tetris"][data-screen="battle"] #controls .control-row { flex-wrap: nowrap; }
  body[data-game-id="tetris"][data-screen="result"] #resultScreen {
    min-height: 0;
    height: 100%;
  }
  body[data-game-id="tetris"][data-screen="result"] #resultScreen .arcade-panel {
    min-height: 0;
    height: 100%;
    padding: 16px;
    gap: 10px;
  }
  body[data-game-id="snake"][data-screen="battle"],
  body[data-game-id="snake"][data-screen="result"] { overflow: hidden; }
  body[data-game-id="snake"][data-screen="battle"] .popular-arcade,
  body[data-game-id="snake"][data-screen="result"] .popular-arcade {
    height: 100dvh;
    min-height: 0;
    padding: 6px;
    gap: 0;
  }
  body[data-game-id="snake"][data-screen="battle"] .arcade-header,
  body[data-game-id="snake"][data-screen="battle"] .arcade-footer,
  body[data-game-id="snake"][data-screen="result"] .arcade-header,
  body[data-game-id="snake"][data-screen="result"] .arcade-footer { display: none; }
  body[data-game-id="snake"][data-screen="battle"] #battleScreen {
    min-height: 0;
    height: 100%;
  }
  body[data-game-id="snake"][data-screen="battle"] .battle-panel {
    height: 100%;
    min-height: 0;
    padding: 7px;
    gap: 6px 12px;
    align-content: stretch;
    grid-template-columns: minmax(370px, 1fr) minmax(250px, .85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body[data-game-id="snake"][data-screen="battle"] .board-wrap {
    grid-column: 1;
    grid-row: 1 / 4;
    min-height: 0;
    padding: 5px;
  }
  body[data-game-id="snake"][data-screen="battle"] .board {
    height: 100%;
    min-height: 0;
  }
  body[data-game-id="snake"][data-screen="battle"] .snake-grid {
    width: min(100%, 360px);
    max-height: 100%;
  }
  body[data-game-id="snake"][data-screen="battle"] .battle-top {
    grid-column: 2;
    grid-row: 1;
  }
  body[data-game-id="snake"][data-screen="battle"] .game-message {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  body[data-game-id="snake"][data-screen="battle"] #controls {
    grid-column: 2;
    grid-row: 3;
  }
  body[data-game-id="snake"][data-screen="battle"] #controls .control-row { flex-wrap: nowrap; }
  body[data-game-id="snake"][data-screen="result"] #resultScreen {
    min-height: 0;
    height: 100%;
  }
  body[data-game-id="snake"][data-screen="result"] #resultScreen .arcade-panel {
    min-height: 0;
    height: 100%;
    padding: 16px;
    gap: 10px;
  }
  body[data-game-id="checkers"][data-screen="result"] { overflow: hidden; }
  body[data-game-id="checkers"][data-screen="result"] .popular-arcade {
    height: 100dvh;
    min-height: 0;
    padding: 6px;
    gap: 0;
  }
  body[data-game-id="checkers"][data-screen="result"] .arcade-header,
  body[data-game-id="checkers"][data-screen="result"] .arcade-footer { display: none; }
  body[data-game-id="checkers"][data-screen="result"] #resultScreen {
    min-height: 0;
    height: 100%;
  }
  body[data-game-id="checkers"][data-screen="result"] #resultScreen .arcade-panel {
    min-height: 0;
    height: 100%;
    padding: 16px;
    gap: 10px;
  }

  html.popular-checkers-active body[data-screen="battle"] .popular-arcade {
    padding: 6px;
  }
  html.popular-checkers-active body[data-screen="battle"] #battleScreen .battle-panel {
    padding: 7px;
    gap: 6px 12px;
    grid-template-columns: minmax(270px, 1fr) minmax(250px, .85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  html.popular-checkers-active body[data-screen="battle"] #battleScreen .board-wrap {
    grid-column: 1;
    grid-row: 1 / 4;
    padding: 5px;
  }
  html.popular-checkers-active body[data-screen="battle"] #battleScreen .board {
    height: 100%;
    min-height: 0;
  }
  html.popular-checkers-active body[data-screen="battle"] #battleScreen .battle-top {
    grid-column: 2;
    grid-row: 1;
  }
  html.popular-checkers-active body[data-screen="battle"] #battleScreen .game-message {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  html.popular-checkers-active body[data-screen="battle"] #battleScreen #controls {
    grid-column: 2;
    grid-row: 3;
  }
  html.popular-checkers-active body[data-screen="battle"] #battleScreen #controls .control-row {
    flex-wrap: nowrap;
  }

  body[data-game-id="mahjong-solitaire"][data-screen="battle"] .popular-arcade,
  body[data-game-id="mahjong-solitaire"][data-screen="result"] .popular-arcade {
    padding: 6px 6px 0;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] .battle-panel {
    padding: 7px;
    gap: 6px 12px;
    align-content: stretch;
    grid-template-columns: minmax(320px, 1fr) minmax(250px, .85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] .board-wrap {
    grid-column: 1;
    grid-row: 1 / 4;
    padding: 5px;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] .tile-board {
    width: min(100%, 420px);
    max-height: 100%;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] .battle-top {
    grid-column: 2;
    grid-row: 1;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] .game-message {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #controls {
    grid-column: 2;
    grid-row: 3;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #controls .control-row {
    flex-wrap: nowrap;
  }
  body[data-game-id="mahjong-solitaire"][data-screen="result"] #resultScreen .arcade-panel {
    padding: 16px;
    gap: 10px;
  }
}
/* Tetris desktop Battle/Result owns the complete active viewport. The
   collection shell remains unchanged on portrait and short-landscape sizes;
   this bounded mode prevents the legacy Main header/footer minimums from
   pushing the four live controls below a 720px desktop frame. */
@media (min-width: 700px) and (min-height: 500px) {
  html:has(body[data-game-id="tetris"][data-screen="battle"]),
  html:has(body[data-game-id="tetris"][data-screen="result"]) {
    overflow: hidden;
    overscroll-behavior: none;
  }
  body[data-game-id="tetris"][data-screen="battle"],
  body[data-game-id="tetris"][data-screen="result"] {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
  body[data-game-id="tetris"][data-screen="battle"] .popular-arcade,
  body[data-game-id="tetris"][data-screen="result"] .popular-arcade {
    height: 100dvh;
    min-height: 0;
    padding: 12px 14px 16px;
    gap: 0;
  }
  body[data-game-id="tetris"][data-screen="battle"] .arcade-header,
  body[data-game-id="tetris"][data-screen="battle"] .arcade-footer,
  body[data-game-id="tetris"][data-screen="result"] .arcade-header,
  body[data-game-id="tetris"][data-screen="result"] .arcade-footer {
    display: none;
  }
  body[data-game-id="tetris"][data-screen="battle"] #battleScreen,
  body[data-game-id="tetris"][data-screen="result"] #resultScreen {
    min-height: 0;
    height: 100%;
  }
  body[data-game-id="tetris"][data-screen="battle"] .battle-panel {
    height: 100%;
    min-height: 0;
    padding: 18px;
    align-content: stretch;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  body[data-game-id="tetris"][data-screen="battle"] .board-wrap {
    min-height: 0;
    overflow: hidden;
  }
  body[data-game-id="tetris"][data-screen="battle"] .board {
    height: 100%;
    min-height: 0;
  }
  body[data-game-id="tetris"][data-screen="battle"] .tetris-grid {
    width: min(100%, 360px);
    max-height: 100%;
  }
  body[data-game-id="tetris"][data-screen="battle"] #controls .control-row {
    flex-wrap: nowrap;
  }
  body[data-game-id="tetris"][data-screen="result"] #resultScreen .arcade-panel {
    height: 100%;
    min-height: 0;
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Final v14 envelope override: the legacy popular-arcade active-play rules
   above are retained for older routes, while Tetris owns a zero-inset Canvas
   and one independent 56px General reserve. */
body[data-game-id="tetris"][data-screen="battle"] .popular-arcade {
  width: min(100%, 920px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body[data-game-id="tetris"][data-screen="battle"] .arcade-header,
body[data-game-id="tetris"][data-screen="battle"] .arcade-footer,
body[data-game-id="tetris"][data-screen="result"] .arcade-header,
body[data-game-id="tetris"][data-screen="result"] .arcade-footer { display: none !important; }
body[data-game-id="tetris"][data-screen="battle"] #battleScreen {
  display: flex !important;
  flex: 0 0 100dvh !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
}
body[data-game-id="tetris"][data-screen="battle"] #battleScreen .battle-canvas {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body[data-game-id="tetris"][data-screen="battle"] #battleScreen .battle-ad-reserve {
  display: block !important;
  flex: 0 0 56px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
}
body[data-game-id="tetris"][data-screen="battle"] #battleScreen .battle-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

@media (orientation: landscape) and (max-height: 430px) {
  body[data-game-id="tetris"][data-screen="battle"] #battleScreen .battle-panel { padding: 7px !important; }
  body[data-game-id="tetris"][data-screen="battle"] #battleScreen .battle-top { margin: 0 !important; }
}

/* Breakout v7 uses the same exact Main/Battle envelope as the other General
   candidates. The legacy arcade runtime stays intact; only its shell is
   promoted so the validator and players see one coherent surface. */
body[data-game-id="breakout"] .arcade-header.main-header {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  direction: ltr;
}
body[data-game-id="breakout"] .main-header-copy {
  min-width: 0;
  width: calc(100% - 128px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
body[data-game-id="breakout"] .main-header-copy h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="breakout"] .main-header-copy .tagline { margin: 4px auto 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="breakout"] .main-return {
  width: 58px;
  min-width: 58px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  color: var(--arcade-accent);
  background: rgba(255,255,255,.07);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 900;
}
body[data-game-id="breakout"] .main-return img { width: 22px; height: 22px; object-fit: contain; }
body[data-game-id="breakout"] .settings-control { grid-column: 3; position: relative; width: 48px; height: 48px; }
body[data-game-id="breakout"] .header-icon-btn,
body[data-game-id="breakout"] .battle-utility {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  color: var(--arcade-text);
  font-size: 1.2rem;
}
body[data-game-id="breakout"] .settings-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 14px;
  background: #10243d;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
body[data-game-id="breakout"] .settings-popover.is-hidden { display: none; }
body[data-game-id="breakout"] .settings-title { color: var(--arcade-text); }
body[data-game-id="breakout"] .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--arcade-muted); }
body[data-game-id="breakout"] .settings-row select { min-width: 0; flex: 1; border: 1px solid var(--arcade-line); border-radius: 10px; background: var(--arcade-panel-2); padding: 8px; }
body[data-game-id="breakout"] #mainScreen { width: 100%; }
body[data-game-id="breakout"] #mainScreen .preview-art { width: min(100%, 320px); aspect-ratio: 1; min-height: 0; justify-self: center; overflow: hidden; }
body[data-game-id="breakout"] #mainScreen .preview-art img.cover { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; object-fit: cover; }
body[data-game-id="breakout"] #mainScreen #startBtn { width: 100%; height: 52px; min-height: 52px; max-height: 52px; }
body[data-game-id="breakout"] #mainScreen .main-progress { min-height: 40px; display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--arcade-accent); background: rgba(126,231,201,.08); border-radius: 12px; line-height: 1.35; }
body[data-game-id="breakout"] .game-message[data-message-key="breakoutMiss"] { overflow-wrap: anywhere; font-weight: 800; }
body[data-game-id="breakout"] .game-page-info-static { width: min(920px, calc(100% - 28px)); margin: 0 auto 28px; }

html:has(body[data-game-id="breakout"][data-screen="battle"]),
html:has(body[data-game-id="breakout"][data-screen="result"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-game-id="breakout"][data-screen="battle"],
body[data-game-id="breakout"][data-screen="result"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
body[data-game-id="breakout"][data-screen="battle"] .popular-arcade,
body[data-game-id="breakout"][data-screen="result"] .popular-arcade {
  width: min(100%, 920px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body[data-game-id="breakout"][data-screen="battle"] .arcade-header,
body[data-game-id="breakout"][data-screen="battle"] .arcade-footer,
body[data-game-id="breakout"][data-screen="result"] .arcade-header,
body[data-game-id="breakout"][data-screen="result"] .arcade-footer { display: none !important; }
body[data-game-id="breakout"][data-screen="battle"] #battleScreen,
body[data-game-id="breakout"][data-screen="result"] #resultScreen {
  display: flex !important;
  flex: 0 0 100dvh !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
}
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-canvas,
body[data-game-id="breakout"][data-screen="result"] #resultScreen .battle-canvas {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-panel,
body[data-game-id="breakout"][data-screen="result"] #resultScreen .arcade-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-panel {
  padding: 12px 16px !important;
  align-content: stretch !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top > .battle-back { grid-column: 1; }
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top > .round-label { grid-column: 2; min-width: 0; }
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top > .control-row { grid-column: 3; justify-content: flex-end; }
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top > .battle-utility { grid-column: 4; }
body[data-game-id="breakout"] .battle-back { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid var(--arcade-line); border-radius: 13px; background: rgba(255,255,255,.07); color: var(--arcade-accent); font-size: 1.45rem; font-weight: 900; }
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-ad-reserve,
body[data-game-id="breakout"][data-screen="result"] #resultScreen .battle-ad-reserve {
  display: block !important;
  flex: 0 0 56px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  pointer-events: none;
  background: transparent;
}
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .board-wrap { min-height: 0; overflow: hidden; }
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .board { height: 100%; min-height: 0; }
body[data-game-id="breakout"][data-screen="battle"] #battleScreen .brick-board { max-height: 100%; }
body[data-game-id="breakout"][data-screen="battle"] .game-page-info-static,
body[data-game-id="breakout"][data-screen="result"] .game-page-info-static { display: none !important; }

@media (max-width: 650px) {
  body[data-game-id="breakout"] .arcade-header.main-header { grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 8px; padding: 8px; }
  body[data-game-id="breakout"] .main-header-copy .tagline { display: none; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-panel { padding: 10px !important; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top > .control-row { grid-column: 2; grid-row: 2; justify-content: stretch; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top > .battle-utility { grid-column: 3; grid-row: 1; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top > .control-row > button { flex: 1; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .brick-board { width: min(100%, 500px); }
}

@media (orientation: landscape) and (max-height: 430px) {
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-panel { padding: 7px !important; gap: 6px 12px; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .battle-top { margin: 0; }
  body[data-game-id="breakout"][data-screen="battle"] #battleScreen .brick { min-height: 24px; }
}

/* Mahjong v9 adopts the shared General Main/Battle shell while retaining the
   flat six-pair runtime and optional Mastery round. */
body[data-game-id="mahjong-solitaire"] .arcade-header.main-header {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  direction: ltr;
}
body[data-game-id="mahjong-solitaire"] .main-header-copy {
  min-width: 0;
  width: calc(100% - 128px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
body[data-game-id="mahjong-solitaire"] .main-header-copy h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="mahjong-solitaire"] .main-header-copy .tagline { margin: 4px auto 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="mahjong-solitaire"] .main-return {
  width: 58px;
  min-width: 58px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  color: var(--arcade-accent);
  background: rgba(255,255,255,.07);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 900;
}
body[data-game-id="mahjong-solitaire"] .main-return img { width: 22px; height: 22px; object-fit: contain; }
body[data-game-id="mahjong-solitaire"] .settings-control { grid-column: 3; position: relative; width: 48px; height: 48px; }
body[data-game-id="mahjong-solitaire"] .header-icon-btn,
body[data-game-id="mahjong-solitaire"] .battle-utility {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  color: var(--arcade-text);
  font-size: 1.2rem;
}
body[data-game-id="mahjong-solitaire"] .settings-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 14px;
  background: #10243d;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
body[data-game-id="mahjong-solitaire"] .settings-popover.is-hidden { display: none; }
body[data-game-id="mahjong-solitaire"] .settings-title { color: var(--arcade-text); }
body[data-game-id="mahjong-solitaire"] .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--arcade-muted); }
body[data-game-id="mahjong-solitaire"] .settings-row select { min-width: 0; flex: 1; border: 1px solid var(--arcade-line); border-radius: 10px; background: var(--arcade-panel-2); padding: 8px; }
body[data-game-id="mahjong-solitaire"] #mainScreen { width: 100%; }
body[data-game-id="mahjong-solitaire"] #mainScreen .main-panel { align-items: center; }
body[data-game-id="mahjong-solitaire"] #mainScreen .preview-art { width: min(100%, 320px); aspect-ratio: 1; min-height: 0; justify-self: center; overflow: hidden; }
body[data-game-id="mahjong-solitaire"] #mainScreen .preview-art img.cover { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; object-fit: cover; }
body[data-game-id="mahjong-solitaire"] #mainScreen #startBtn { width: 100%; height: 52px; min-height: 52px; max-height: 52px; }
body[data-game-id="mahjong-solitaire"] #mainScreen .main-progress { min-height: 40px; display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--arcade-accent); background: rgba(126,231,201,.08); border-radius: 12px; line-height: 1.35; }
body[data-game-id="mahjong-solitaire"] .game-page-info-static { width: min(920px, calc(100% - 28px)); margin: 0 auto 28px; }

html:has(body[data-game-id="mahjong-solitaire"][data-screen="battle"]),
html:has(body[data-game-id="mahjong-solitaire"][data-screen="result"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"],
body[data-game-id="mahjong-solitaire"][data-screen="result"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .popular-arcade,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .popular-arcade {
  width: min(100%, 920px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .arcade-header,
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .arcade-footer,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .arcade-header,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .arcade-footer { display: none !important; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen,
body[data-game-id="mahjong-solitaire"][data-screen="result"] #resultScreen {
  display: flex !important;
  flex: 0 0 100dvh !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-canvas,
body[data-game-id="mahjong-solitaire"][data-screen="result"] #resultScreen .battle-canvas {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-panel,
body[data-game-id="mahjong-solitaire"][data-screen="result"] #resultScreen .arcade-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-panel {
  padding: 12px 16px !important;
  align-content: stretch !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top > .battle-back { grid-column: 1; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top > .round-label { grid-column: 2; min-width: 0; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top > .control-row { grid-column: 3; justify-content: flex-end; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top > .battle-utility { grid-column: 4; }
body[data-game-id="mahjong-solitaire"] .battle-back { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid var(--arcade-line); border-radius: 13px; background: rgba(255,255,255,.07); color: var(--arcade-accent); font-size: 1.45rem; font-weight: 900; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-utility { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-ad-reserve,
body[data-game-id="mahjong-solitaire"][data-screen="result"] #resultScreen .battle-ad-reserve {
  display: block !important;
  flex: 0 0 56px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  pointer-events: none;
  background: transparent;
}
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .board-wrap { min-height: 0; overflow: hidden; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .board { height: 100%; min-height: 0; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .tile-board { max-height: 100%; }
body[data-game-id="mahjong-solitaire"][data-screen="battle"] .game-page-info-static,
body[data-game-id="mahjong-solitaire"][data-screen="result"] .game-page-info-static { display: none !important; }

@media (max-width: 650px) {
  body[data-game-id="mahjong-solitaire"] .arcade-header.main-header { grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 8px; padding: 8px; }
  body[data-game-id="mahjong-solitaire"] .main-header-copy .tagline { display: none; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-panel { padding: 10px !important; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top > .control-row { grid-column: 2; grid-row: 2; justify-content: stretch; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top > .battle-utility { grid-column: 3; grid-row: 1; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top > .control-row > button { flex: 1; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .tile-board { width: min(100%, 500px); }
}

@media (orientation: landscape) and (max-height: 430px) {
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-panel { padding: 7px !important; gap: 6px 12px; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .battle-top { margin: 0; }
  body[data-game-id="mahjong-solitaire"][data-screen="battle"] #battleScreen .tile { min-height: 48px; }
}

/* Pong v6 shares the repaired General shell. Its five-rally runtime remains
   unchanged while Main and Battle now expose the governed controls and safe
   canvas envelope at every required viewport. */
body[data-game-id="pong"] .arcade-header.main-header {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  direction: ltr;
}
body[data-game-id="pong"] .main-header-copy {
  min-width: 0;
  width: calc(100% - 128px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
body[data-game-id="pong"] .main-header-copy h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="pong"] .main-header-copy .tagline { margin: 4px auto 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="pong"] .main-return {
  width: 58px;
  min-width: 58px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  color: var(--arcade-accent);
  background: rgba(255,255,255,.07);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 900;
}
body[data-game-id="pong"] .main-return img { width: 22px; height: 22px; object-fit: contain; }
body[data-game-id="pong"] .settings-control { grid-column: 3; position: relative; width: 48px; height: 48px; }
body[data-game-id="pong"] .header-icon-btn,
body[data-game-id="pong"] .battle-utility {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  color: var(--arcade-text);
  font-size: 1.2rem;
}
body[data-game-id="pong"] .settings-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 14px;
  background: #10243d;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
body[data-game-id="pong"] .settings-popover.is-hidden { display: none; }
body[data-game-id="pong"] .settings-title { color: var(--arcade-text); }
body[data-game-id="pong"] .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--arcade-muted); }
body[data-game-id="pong"] .settings-row select { min-width: 0; flex: 1; border: 1px solid var(--arcade-line); border-radius: 10px; background: var(--arcade-panel-2); padding: 8px; }
body[data-game-id="pong"] #mainScreen { width: 100%; }
body[data-game-id="pong"] #mainScreen .preview-art { width: min(100%, 320px); aspect-ratio: 1; min-height: 0; justify-self: center; overflow: hidden; }
body[data-game-id="pong"] #mainScreen .preview-art img.cover { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; object-fit: cover; }
body[data-game-id="pong"] #mainScreen #startBtn { width: 100%; height: 52px; min-height: 52px; max-height: 52px; }
body[data-game-id="pong"] #mainScreen .main-progress { min-height: 40px; display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--arcade-accent); background: rgba(126,231,201,.08); border-radius: 12px; line-height: 1.35; }
body[data-game-id="pong"] .game-page-info-static { width: min(920px, calc(100% - 28px)); margin: 0 auto 28px; }

html:has(body[data-game-id="pong"][data-screen="battle"]),
html:has(body[data-game-id="pong"][data-screen="result"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-game-id="pong"][data-screen="battle"],
body[data-game-id="pong"][data-screen="result"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
body[data-game-id="pong"][data-screen="battle"] .popular-arcade,
body[data-game-id="pong"][data-screen="result"] .popular-arcade {
  width: min(100%, 920px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body[data-game-id="pong"][data-screen="battle"] .arcade-header,
body[data-game-id="pong"][data-screen="battle"] .arcade-footer,
body[data-game-id="pong"][data-screen="result"] .arcade-header,
body[data-game-id="pong"][data-screen="result"] .arcade-footer { display: none !important; }
body[data-game-id="pong"][data-screen="battle"] #battleScreen,
body[data-game-id="pong"][data-screen="result"] #resultScreen {
  display: flex !important;
  flex: 0 0 100dvh !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
}
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-canvas,
body[data-game-id="pong"][data-screen="result"] #resultScreen .battle-canvas {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-panel,
body[data-game-id="pong"][data-screen="result"] #resultScreen .arcade-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-panel {
  padding: 12px 16px !important;
  align-content: stretch !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top > .battle-back { grid-column: 1; }
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top > .round-label { grid-column: 2; min-width: 0; }
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top > .control-row { grid-column: 3; justify-content: flex-end; }
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top > .battle-utility { grid-column: 4; }
body[data-game-id="pong"] .battle-back { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid var(--arcade-line); border-radius: 13px; background: rgba(255,255,255,.07); color: var(--arcade-accent); font-size: 1.45rem; font-weight: 900; }
body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-ad-reserve,
body[data-game-id="pong"][data-screen="result"] #resultScreen .battle-ad-reserve {
  display: block !important;
  flex: 0 0 56px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  pointer-events: none;
  background: transparent;
}
body[data-game-id="pong"][data-screen="battle"] #battleScreen .board-wrap { min-height: 0; overflow: hidden; }
body[data-game-id="pong"][data-screen="battle"] #battleScreen .board { height: 100%; min-height: 0; }
body[data-game-id="pong"][data-screen="battle"] #battleScreen .pong-board { width: min(100%, 560px); height: min(250px, 100%); }
body[data-game-id="pong"][data-screen="battle"] .game-page-info-static,
body[data-game-id="pong"][data-screen="result"] .game-page-info-static { display: none !important; }

@media (max-width: 650px) {
  body[data-game-id="pong"] .arcade-header.main-header { grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 8px; padding: 8px; }
  body[data-game-id="pong"] .main-header-copy .tagline { display: none; }
  body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-panel { padding: 10px !important; }
  body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top > .control-row { grid-column: 2; grid-row: 2; justify-content: stretch; }
  body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top > .battle-utility { grid-column: 3; grid-row: 1; }
  body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top > .control-row > button { flex: 1; }
}

@media (orientation: landscape) and (max-height: 430px) {
  body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-panel { padding: 7px !important; gap: 6px 12px; }
  body[data-game-id="pong"][data-screen="battle"] #battleScreen .battle-top { margin: 0; }
}

/* Wordle v9 uses the governed General Main/Battle shell while retaining the
   existing deterministic five-by-six Wordle runtime and short-session rules. */
body[data-game-id="wordle"] .arcade-header.main-header {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  direction: ltr;
}
body[data-game-id="wordle"] .main-header-copy {
  min-width: 0;
  width: calc(100% - 128px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
body[data-game-id="wordle"] .main-header-copy h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="wordle"] .main-header-copy .tagline { margin: 4px auto 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-game-id="wordle"] .main-return {
  width: 58px;
  min-width: 58px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  color: var(--arcade-accent);
  background: rgba(255,255,255,.07);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 900;
}
body[data-game-id="wordle"] .main-return img { width: 22px; height: 22px; object-fit: contain; }
body[data-game-id="wordle"] .settings-control { grid-column: 3; position: relative; width: 48px; height: 48px; z-index: 2; }
body[data-game-id="wordle"] .header-icon-btn,
body[data-game-id="wordle"] .battle-utility {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  color: var(--arcade-text);
  font-size: 1.2rem;
}
body[data-game-id="wordle"] .settings-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 14px;
  background: #10243d;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
body[data-game-id="wordle"] .settings-popover.is-hidden { display: none; }
body[data-game-id="wordle"] .settings-title { color: var(--arcade-text); }
body[data-game-id="wordle"] .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--arcade-muted); }
body[data-game-id="wordle"] .settings-row select { min-width: 0; flex: 1; border: 1px solid var(--arcade-line); border-radius: 10px; background: var(--arcade-panel-2); padding: 8px; }
body[data-game-id="wordle"] #mainScreen { width: 100%; }
body[data-game-id="wordle"] #mainScreen .main-panel { align-items: center; }
body[data-game-id="wordle"] #mainScreen .preview-art { width: min(100%, 320px); aspect-ratio: 1; min-height: 0; justify-self: center; overflow: hidden; }
body[data-game-id="wordle"] #mainScreen .preview-art img.cover { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; object-fit: cover; }
body[data-game-id="wordle"] #mainScreen #startBtn { width: 100%; height: 52px; min-height: 52px; max-height: 52px; }
body[data-game-id="wordle"] #mainScreen .main-progress { min-height: 40px; display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--arcade-accent); background: rgba(126,231,201,.08); border-radius: 12px; line-height: 1.35; }
body[data-game-id="wordle"] .game-page-info-static { width: min(920px, calc(100% - 28px)); margin: 0 auto 28px; }

html:has(body[data-game-id="wordle"][data-screen="battle"]),
html:has(body[data-game-id="wordle"][data-screen="result"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-game-id="wordle"][data-screen="battle"],
body[data-game-id="wordle"][data-screen="result"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body[data-game-id="wordle"][data-screen="battle"] .popular-arcade,
body[data-game-id="wordle"][data-screen="result"] .popular-arcade {
  width: min(100%, 920px);
  height: 100dvh;
  min-height: 0;
  padding: 0;
  gap: 0;
}
body[data-game-id="wordle"][data-screen="battle"] .arcade-header,
body[data-game-id="wordle"][data-screen="battle"] .arcade-footer,
body[data-game-id="wordle"][data-screen="result"] .arcade-header,
body[data-game-id="wordle"][data-screen="result"] .arcade-footer { display: none; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen,
body[data-game-id="wordle"][data-screen="result"] #resultScreen {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}
body[data-game-id="wordle"][data-screen="battle"] .battle-canvas,
body[data-game-id="wordle"][data-screen="result"] .battle-canvas {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}
body[data-game-id="wordle"][data-screen="battle"] .battle-panel,
body[data-game-id="wordle"][data-screen="result"] #resultScreen .arcade-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}
body[data-game-id="wordle"][data-screen="battle"] .battle-panel {
  padding: 12px 16px;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
body[data-game-id="wordle"][data-screen="battle"] .battle-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
body[data-game-id="wordle"][data-screen="battle"] .battle-top > .battle-back { grid-column: 1; }
body[data-game-id="wordle"][data-screen="battle"] .battle-top > .round-label { grid-column: 2; min-width: 0; }
body[data-game-id="wordle"][data-screen="battle"] .battle-top > .control-row { grid-column: 3; justify-content: flex-end; }
body[data-game-id="wordle"][data-screen="battle"] .battle-top > .battle-utility { grid-column: 4; }
body[data-game-id="wordle"] .battle-back { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid var(--arcade-line); border-radius: 13px; background: rgba(255,255,255,.07); color: var(--arcade-accent); font-size: 1.45rem; font-weight: 900; }
body[data-game-id="wordle"][data-screen="battle"] .battle-utility { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .battle-ad-reserve,
body[data-game-id="wordle"][data-screen="result"] #resultScreen .battle-ad-reserve {
  display: block;
  flex: 0 0 56px;
  width: 100%;
  height: 56px;
  min-height: 56px;
  margin: 0;
  pointer-events: none;
  background: transparent;
}
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .board-wrap { min-height: 0; overflow: hidden; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .board { width: 100%; height: 100%; min-height: 0; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .wordle-board { width: min(100%, 310px); max-height: 100%; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .wordle-row { min-height: 0; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .word-cell { min-height: 0; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .game-message { min-height: 26px; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen #controls { min-width: 0; }
body[data-game-id="wordle"][data-screen="battle"] #battleScreen .word-entry { width: 100%; max-width: 100%; min-width: 0; }
body[data-game-id="wordle"][data-screen="battle"] .game-page-info-static,
body[data-game-id="wordle"][data-screen="result"] .game-page-info-static { display: none !important; }

@media (max-width: 650px) {
  body[data-game-id="wordle"] .arcade-header.main-header { grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 8px; padding: 8px; }
  body[data-game-id="wordle"] .main-header-copy .tagline { display: none; }
  body[data-game-id="wordle"][data-screen="battle"] .battle-panel { padding: 10px; gap: 8px; }
  body[data-game-id="wordle"][data-screen="battle"] .battle-top { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  body[data-game-id="wordle"][data-screen="battle"] .battle-top > .control-row { grid-column: 2; grid-row: 2; justify-content: stretch; }
  body[data-game-id="wordle"][data-screen="battle"] .battle-top > .battle-utility { grid-column: 3; grid-row: 1; }
  body[data-game-id="wordle"][data-screen="battle"] .battle-top > .control-row > button { flex: 1; }
  body[data-game-id="wordle"][data-screen="battle"] #battleScreen .wordle-board { width: min(100%, 310px); height: auto; aspect-ratio: 5 / 6; }
  body[data-game-id="wordle"][data-screen="battle"] #battleScreen .wordle-row { gap: 5px; }
  body[data-game-id="wordle"][data-screen="battle"] #battleScreen .word-cell { aspect-ratio: 1; font-size: 1.1rem; }
}

@media (orientation: landscape) and (max-height: 430px) {
  body[data-game-id="wordle"][data-screen="battle"] .battle-panel { padding: 7px; gap: 6px 12px; grid-template-columns: minmax(320px, 1fr) minmax(280px, .85fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  body[data-game-id="wordle"][data-screen="battle"] .board-wrap { grid-column: 1; grid-row: 1 / 4; padding: 5px; }
  body[data-game-id="wordle"][data-screen="battle"] #battleScreen .wordle-board { width: min(100%, 310px); height: 100%; max-height: 100%; aspect-ratio: auto; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 5px; }
  body[data-game-id="wordle"][data-screen="battle"] #battleScreen .wordle-row { min-height: 0; gap: 5px; }
  body[data-game-id="wordle"][data-screen="battle"] #battleScreen .word-cell { min-height: 0; aspect-ratio: auto; font-size: 1.1rem; }
  body[data-game-id="wordle"][data-screen="battle"] .battle-top { grid-column: 2; grid-row: 1; }
  body[data-game-id="wordle"][data-screen="battle"] .game-message { grid-column: 2; grid-row: 2; align-self: start; }
  body[data-game-id="wordle"][data-screen="battle"] #controls { grid-column: 2; grid-row: 3; }
  body[data-game-id="wordle"][data-screen="result"] #resultScreen .arcade-panel { padding: 14px; gap: 8px; }
}

/* Snake v27 registers the legacy Battle section as the logical Canvas and
   gives it the same physical 56px General reserve as the newer shell. The
   narrow layout keeps the run heading, board, feedback, and direction row in
   separate tracks; wider viewports use one shared-scale board column. */
html:has(body[data-game-id="snake"][data-screen="battle"]),
html:has(body[data-game-id="snake"][data-screen="result"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-game-id="snake"][data-screen="battle"],
body[data-game-id="snake"][data-screen="result"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body[data-game-id="snake"][data-screen="battle"] .popular-arcade,
body[data-game-id="snake"][data-screen="result"] .popular-arcade {
  width: min(100%, 920px);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 56px;
  gap: 0;
}
body[data-game-id="snake"][data-screen="battle"] .arcade-header,
body[data-game-id="snake"][data-screen="battle"] .arcade-footer,
body[data-game-id="snake"][data-screen="result"] .arcade-header,
body[data-game-id="snake"][data-screen="result"] .arcade-footer {
  display: none;
}
body[data-game-id="snake"][data-screen="battle"] #battleScreen,
body[data-game-id="snake"][data-screen="result"] #resultScreen {
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}
body[data-game-id="snake"][data-screen="battle"] #battleScreen {
  position: relative;
}
body[data-game-id="snake"][data-screen="battle"] .battle-ad-reserve,
body[data-game-id="snake"][data-screen="result"] .battle-ad-reserve {
  grid-row: 2;
  display: block;
  width: 100%;
  height: 56px;
  min-height: 56px;
  pointer-events: none;
  background: transparent;
}
body[data-game-id="snake"][data-screen="battle"] .battle-panel,
body[data-game-id="snake"][data-screen="result"] #resultScreen .arcade-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}
body[data-game-id="snake"][data-screen="battle"] .battle-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
}
body[data-game-id="snake"][data-screen="battle"] .snake-battle-return {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 13px;
  color: var(--arcade-accent);
  font-size: 1.45rem;
  font-weight: 900;
}
body[data-game-id="snake"][data-screen="battle"] .battle-top {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding-left: 58px;
}
body[data-game-id="snake"][data-screen="battle"] .battle-top > .round-label {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
body[data-game-id="snake"][data-screen="battle"] .battle-top > .control-row {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
}
body[data-game-id="snake"][data-screen="battle"] .board-wrap {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  padding: 5px;
  overflow: hidden;
}
body[data-game-id="snake"][data-screen="battle"] .board {
  width: 100%;
  height: 100%;
  min-height: 0;
}
body[data-game-id="snake"][data-screen="battle"] .snake-grid {
  width: min(100%, 360px);
  max-height: 100%;
}
body[data-game-id="snake"][data-screen="battle"] .game-message {
  grid-column: 1;
  grid-row: 3;
  min-height: 26px;
  min-width: 0;
  margin: 0;
}
body[data-game-id="snake"][data-screen="battle"] #controls {
  grid-column: 1;
  grid-row: 4;
  min-width: 0;
}
body[data-game-id="snake"][data-screen="battle"] #controls .control-row {
  flex-wrap: nowrap;
}
body[data-game-id="snake"][data-screen="battle"] .game-page-info-static,
body[data-game-id="snake"][data-screen="result"] .game-page-info-static,
body[data-game-id="snake"][data-screen="battle"] .game-page-info,
body[data-game-id="snake"][data-screen="result"] .game-page-info {
  display: none !important;
}
body[data-game-id="snake"] #mainScreen .main-progress {
  display: grid;
  min-height: 40px;
  gap: 3px;
  padding: 10px 12px;
  border-left: 3px solid var(--arcade-accent);
  border-radius: 12px;
  background: rgba(126, 231, 201, .08);
  line-height: 1.35;
}

@media (min-width: 651px) {
  body[data-game-id="snake"][data-screen="battle"] .battle-panel {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px;
  }
  body[data-game-id="snake"][data-screen="battle"] .battle-top {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    min-width: 0;
    padding-left: 0;
  }
  body[data-game-id="snake"][data-screen="battle"] .battle-top > .round-label,
  body[data-game-id="snake"][data-screen="battle"] .battle-top > .control-row {
    grid-column: auto;
    grid-row: auto;
  }
  body[data-game-id="snake"][data-screen="battle"] .board-wrap {
    grid-column: 1;
    grid-row: 1 / 4;
  }
  body[data-game-id="snake"][data-screen="battle"] .game-message {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  body[data-game-id="snake"][data-screen="battle"] #controls {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Checkers v15 adopts the shared Interface V6 Main/Battle contract while
   keeping its complete-match board and localized owner shell intact. */
body[data-game-id="checkers"] .checkers-shell-header {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  direction: ltr;
}
body[data-game-id="checkers"] .checkers-heading {
  min-width: 0;
  text-align: center;
}
body[data-game-id="checkers"] .checkers-heading h1,
body[data-game-id="checkers"] .checkers-heading .tagline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-game-id="checkers"] .checkers-main-return,
body[data-game-id="checkers"] .checkers-battle-return {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
}
body[data-game-id="checkers"] .settings-control {
  grid-column: 3;
  position: relative;
  width: 48px;
  height: 48px;
  z-index: 3;
}
body[data-game-id="checkers"] .header-icon-btn,
body[data-game-id="checkers"] .battle-utility {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--arcade-line);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  color: var(--arcade-text);
  font-size: 1.2rem;
}
body[data-game-id="checkers"] .settings-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 14px;
  background: #10243d;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
body[data-game-id="checkers"] .settings-popover.is-hidden { display: none; }
body[data-game-id="checkers"] .settings-title { color: var(--arcade-text); }
body[data-game-id="checkers"] .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--arcade-muted); }
body[data-game-id="checkers"] .settings-row select { min-width: 0; flex: 1; border: 1px solid var(--arcade-line); border-radius: 10px; background: var(--arcade-panel-2); padding: 8px; }
body[data-game-id="checkers"] #mainScreen { width: 100%; }
body[data-game-id="checkers"] #mainScreen .preview-art { width: min(100%, 320px); aspect-ratio: 1; min-height: 0; justify-self: center; overflow: hidden; }
body[data-game-id="checkers"] #mainScreen .preview-art img.cover { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; object-fit: cover; }
body[data-game-id="checkers"] #mainScreen #startBtn { width: 100%; height: 52px; min-height: 52px; max-height: 52px; }
body[data-game-id="checkers"] #mainScreen .main-progress { min-height: 40px; display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--arcade-accent); background: rgba(126,231,201,.08); border-radius: 12px; line-height: 1.35; }
body[data-game-id="checkers"] #mainScreen .game-page-info-static { display: block; }

body[data-game-id="checkers"][data-screen="battle"] .popular-arcade {
  width: min(100%, 920px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body[data-game-id="checkers"][data-screen="battle"] .arcade-header,
body[data-game-id="checkers"][data-screen="battle"] .arcade-footer,
body[data-game-id="checkers"][data-screen="result"] .arcade-header,
body[data-game-id="checkers"][data-screen="result"] .arcade-footer { display: none !important; }
body[data-game-id="checkers"][data-screen="battle"] #battleScreen {
  display: flex !important;
  flex: 0 0 100dvh !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
}
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .battle-canvas {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .battle-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  align-content: stretch !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .battle-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .battle-top > .checkers-battle-return { grid-column: 1; }
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .battle-top > .round-label { grid-column: 2; min-width: 0; }
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .battle-top > .control-row { grid-column: 3; justify-content: flex-end; }
body[data-game-id="checkers"][data-screen="battle"] #battleScreen #hintBtn[data-wp-battle-utility] { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; }
body[data-game-id="checkers"][data-screen="battle"] #battleScreen #restartBtn[data-wp-primary-action] { min-height: 48px; }
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .checkers-board { height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; flex: 0 0 auto; }
body[data-game-id="checkers"][data-screen="battle"] #battleScreen .battle-ad-reserve {
  display: block !important;
  flex: 0 0 56px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  pointer-events: none;
  background: transparent;
}
body[data-game-id="checkers"][data-screen="battle"] .game-page-info-static,
body[data-game-id="checkers"][data-screen="result"] .game-page-info-static { display: none !important; }

@media (max-width: 650px) {
  body[data-game-id="checkers"] .checkers-shell-header {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }
  body[data-game-id="checkers"] .checkers-heading .tagline { display: none; }
  body[data-game-id="checkers"] .settings-control { grid-column: 3; }
}