/* Shared arcade chrome; game boards keep their own geometry and color cues. */
.lab-shell[data-lab-category="game"] {
  --white:var(--lab-card);
  --dark:var(--lab-ink);
  --brown:var(--lab-muted);
}
.lab-shell[data-lab-category="game"] main.container,
.lab-shell[data-lab-category="game"] .battle-main>.container {
  width:min(1200px,calc(100% - 64px));
  max-width:1200px;
}
.lab-shell[data-lab-category="game"] :is(.volley-page,.ttt-page,.game-workbench,.directory-main.lab-game-page) {
  padding-top:28px;
  padding-bottom:56px;
}
.lab-shell[data-lab-category="game"] :is(.volley-hero,.ttt-hero) {margin:0 0 28px;gap:28px}
.lab-shell[data-lab-category="game"] .battle-hero {padding:28px 0 30px;gap:28px}
.lab-shell[data-lab-category="game"] .lab-game-page h1 {
  margin:0 0 15px;
  font-size:clamp(32px,3.4vw,46px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.045em;
  color:var(--lab-ink);
}
.lab-shell[data-lab-category="game"] .lab-game-page .eyebrow {
  margin:0 0 12px;
  font:700 11px/1.7 Inter,"Noto Sans TC",sans-serif;
  letter-spacing:.13em;
  color:var(--lab-green);
}
.lab-shell[data-lab-category="game"] .game-workbench>.eyebrow {margin-top:0!important}
.lab-shell[data-lab-category="game"] :is(.volley-hero,.ttt-hero,.battle-hero) p:last-child,
.lab-shell[data-lab-category="game"] :is(.tool-intro,.directory-main.lab-game-page>p:not(.eyebrow)) {
  margin:0;
  max-width:760px;
  color:var(--lab-muted);
  font-size:16px;
  line-height:1.9;
}
.lab-shell[data-lab-category="game"] .volley-badge {border-color:var(--lab-line);background:var(--lab-soft);color:var(--lab-green);font-size:11px}
.lab-shell[data-lab-category="game"] .ttt-hero-stamp {color:var(--lab-green);opacity:.18}
.lab-shell[data-lab-category="game"] .battle-hero-mark span {background:var(--lab-green);box-shadow:inset 0 3px 0 var(--home-yolk)}

/* Room, mode and session controls share the same visual language. */
.lab-shell[data-lab-category="game"] :is(.btn,.volley-small,.volley-primary,.volley-join button,.ttt-actions button,.ttt-online-button,.ttt-room-join button,.ttt-room-details button) {
  border-radius:8px;
  font-size:14px;
  line-height:1.5;
}
.lab-shell[data-lab-category="game"] :is(.btn,.volley-primary,.ttt-actions button,.ttt-online-button,.ttt-room-join button) {min-height:44px}
.lab-shell[data-lab-category="game"] :is(.btn-primary,.volley-primary,.ttt-next) {
  background:var(--lab-green);
  border-color:var(--lab-green);
  color:var(--lab-card)!important;
}
.lab-shell[data-lab-category="game"] :is(.btn-primary,.volley-primary,.ttt-next):hover:enabled {background:var(--lab-green);filter:brightness(.94)}
.lab-shell[data-lab-category="game"] :is(.btn-secondary,.volley-small,.volley-join button,.ttt-undo,.ttt-room-join button,.ttt-room-details button) {
  background:var(--lab-card);
  border:1px solid var(--lab-line);
  color:var(--lab-green);
}
.lab-shell[data-lab-category="game"] :is(.btn-secondary,.volley-small,.volley-join button,.ttt-undo,.ttt-room-join button,.ttt-room-details button):hover:enabled {border-color:var(--lab-green);background:var(--lab-soft)}
.lab-shell[data-lab-category="game"] :is(.volley-modes,.ttt-mode-switch) button {
  min-height:44px;
  border-radius:8px;
  border:1px solid var(--lab-line);
  background:var(--lab-card);
  color:var(--lab-muted);
  font-size:14px;
  line-height:1.5;
}
.lab-shell[data-lab-category="game"] :is(.volley-modes,.ttt-mode-switch) button[aria-pressed="true"] {background:var(--lab-green);border-color:var(--lab-green);color:var(--lab-card)}
.lab-shell[data-lab-category="game"] :is(.volley-input,.ttt-fields select,.ttt-room-join input,.ttt-room-details input,.battle-field input,.battle-field select,.battle-invite,.battle-settings input,.battle-settings select,.rank-form input) {
  min-height:46px;
  border:1px solid var(--lab-line);
  border-radius:8px;
  background:var(--home-bg);
  color:var(--lab-ink);
  font-size:15px;
  line-height:1.7;
}
.lab-shell[data-lab-category="game"] :is(input,select)::placeholder {color:var(--lab-muted);opacity:1}
.lab-shell[data-lab-category="game"] :is(.volley-label,.ttt-fields label,.ttt-room-join label,.ttt-room-details label,.battle-field>span,.battle-room label,.battle-room-label,.battle-settings-grid label,.rank-form label) {font-size:13px;color:var(--lab-muted);line-height:1.8}
.lab-shell[data-lab-category="game"] .lab-game-page :is(button,input,select,summary):focus-visible {outline:3px solid var(--home-yolk);outline-offset:3px}
.lab-shell[data-lab-category="game"] :is(.volley-controls,.battle-touch,.arcade-controls) button {touch-action:none}
.lab-shell[data-lab-category="game"] button:disabled {cursor:default}

/* Readable side panels and help are consistent with the catalogue cards. */
.lab-shell[data-lab-category="game"] :is(.volley-panel,.ttt-panel,.space-ranking,.battle-lobby,.battle-settings,.battle-help,.battle-solo-panel) {
  border:1px solid var(--lab-line);
  border-radius:16px;
  background:var(--lab-card);
  color:var(--lab-ink);
  box-shadow:none;
}
.lab-shell[data-lab-category="game"] :is(.volley-panel,.ttt-panel,.space-ranking) {padding:24px}
.lab-shell[data-lab-category="game"] :is(.volley-panel,.ttt-panel,.space-ranking) h2 {margin:0 0 18px;font-size:22px;font-weight:750;line-height:1.5;letter-spacing:-.03em;color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] :is(.volley-panel,.ttt-panel) .eyebrow {margin-bottom:10px}
.lab-shell[data-lab-category="game"] :is(.volley-rules,.ttt-rules,.battle-help p,.battle-help li,.battle-settings>p) {font-size:14px;line-height:1.95;color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] :is(.volley-note,.volley-game-help,.ttt-settings-note,.ttt-footnote,.battle-note,.game-note,.arcade-help,.rank-rules) {font-size:13px;line-height:1.9;color:var(--lab-muted);border-color:var(--lab-line)}
.lab-shell[data-lab-category="game"] :is(.volley-status,.volley-room-status,.volley-copy-status,.battle-status,.battle-ready-status,#ttt-room-status,.ttt-room-details p) {font-size:13px;line-height:1.85;color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] :is(.volley-room-info,.ttt-room-details) {background:var(--lab-soft);border-color:var(--lab-line);border-radius:10px}
.lab-shell[data-lab-category="game"] :is(.volley-room-info>span,.ttt-room-details>span) {font-size:12px;color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] :is(.volley-room-info>strong,.ttt-room-details>strong,.battle-code) {color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .ttt-page {--ttt-panel:var(--lab-card);--ttt-border:var(--lab-line);--ttt-muted:var(--lab-muted);--ttt-ink:var(--lab-ink)}
.lab-shell[data-lab-category="game"] .ttt-score {border-color:var(--lab-line);border-radius:9px;background:var(--home-bg)}
.lab-shell[data-lab-category="game"] .ttt-score.is-turn {border-color:var(--lab-green);background:var(--lab-soft)}
.lab-shell[data-lab-category="game"] .ttt-score-name {font-size:12px;color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] .ttt-score-x strong {color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .ttt-score-o strong {color:#a77213}
.dark .lab-shell[data-lab-category="game"] .ttt-score-o strong {color:var(--home-yolk)}
.lab-shell[data-lab-category="game"] :is(.ttt-clear,.volley-leave) {color:var(--lab-muted);font-size:13px}

/* Keep the actual dark arenas and their mark / score cues legible in both themes. */
.lab-shell[data-lab-category="game"] .ttt-play {border-radius:16px;box-shadow:none}
.lab-shell[data-lab-category="game"] .ttt-status-row h2 {color:#edf4ff}
.lab-shell[data-lab-category="game"] .ttt-play p {color:#a5b5c1}
.lab-shell[data-lab-category="game"] .ttt-board-help {font-size:12px;line-height:1.85}
.lab-shell[data-lab-category="game"] .volley-score-mid strong {color:#ecfdf5}
.lab-shell[data-lab-category="game"] .volley-controls button {background:var(--lab-card);border-color:var(--lab-line);border-radius:9px;color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] .volley-controls button small {color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] .volley-controls button:last-child {background:var(--lab-green);border-color:var(--lab-green);color:var(--lab-card)}
.lab-shell[data-lab-category="game"] .volley-controls button:last-child small {color:var(--lab-card);opacity:.8}
.lab-shell[data-lab-category="game"] :is(.arcade-overlay h2,.battle-player h2,.battle-player h3) {color:#edf4ff}
.lab-shell[data-lab-category="game"] :is(.arcade-overlay p,.battle-player p) {color:#a8b8cb}
.lab-shell[data-lab-category="game"] .arcade-controls button {background:var(--lab-card);border-color:var(--lab-line);color:var(--lab-ink);border-radius:8px}
.lab-shell[data-lab-category="game"] .arcade-controls button[data-key="fire"] {background:var(--lab-soft);color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .arcade-controls button:active {background:var(--lab-soft)}
.lab-shell[data-lab-category="game"] .arcade-stats {color:var(--lab-muted);font-size:12px}
.lab-shell[data-lab-category="game"] .arcade-stats strong {color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .arcade-toolbar .tag {border-color:var(--lab-line);background:var(--lab-soft);color:var(--lab-green);font-size:11px}

/* Block Battle mode tiles, room details, and records remain separate from the boards. */
.lab-shell[data-lab-category="game"] .battle-mode-card {border-color:var(--lab-line);border-radius:12px;background:var(--lab-card);color:var(--lab-ink);min-height:164px}
.lab-shell[data-lab-category="game"] .battle-mode-card:hover {border-color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .battle-mode-card[aria-pressed="true"] {border-color:var(--lab-green);background:var(--lab-soft);box-shadow:inset 0 3px 0 var(--lab-green)}
.lab-shell[data-lab-category="game"] :is(.battle-mode-number,.battle-mode-card b,.battle-settings>summary span,.battle-lobby small) {color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .battle-mode-card>span:last-of-type {font-size:13px;line-height:1.75;color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] :is(.battle-lobby>summary,.battle-settings>summary,.battle-help>summary) {color:var(--lab-ink);font-size:16px;line-height:1.7}
.lab-shell[data-lab-category="game"] .battle-roster li {background:var(--lab-soft);color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] :is(.battle-help th,.battle-help td) {border-color:var(--lab-line);font-size:13px}
.lab-shell[data-lab-category="game"] .battle-help caption {color:var(--lab-muted);font-size:12px}
.lab-shell[data-lab-category="game"] .battle-solo-panel {padding:28px}
.lab-shell[data-lab-category="game"] .battle-solo-panel .eyebrow {color:var(--lab-green);font-size:11px}
.lab-shell[data-lab-category="game"] .battle-solo-panel h2 {font-size:29px;line-height:1.4;letter-spacing:-.035em;color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] .battle-solo-panel>p:not(.eyebrow) {color:var(--lab-muted);font-size:14px;line-height:1.9}
.lab-shell[data-lab-category="game"] .battle-best {border-color:var(--lab-line)}
.lab-shell[data-lab-category="game"] .battle-best span {font-size:13px;color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] .battle-best strong {color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .battle-result-stats {border-color:var(--lab-line);background:var(--lab-soft);color:var(--lab-green);font-size:14px}
.lab-shell[data-lab-category="game"] .battle-key-legend span {color:var(--lab-muted);font-size:12px}
.lab-shell[data-lab-category="game"] .battle-key-legend kbd {background:var(--home-bg);color:var(--lab-ink);border-color:var(--lab-line)}
.lab-shell[data-lab-category="game"] .block-rank-heading h3 {font-size:20px;color:var(--lab-ink);line-height:1.5}
.lab-shell[data-lab-category="game"] .block-rank-heading button {min-height:36px!important;background:var(--lab-card);color:var(--lab-green);border-color:var(--lab-line);font-size:12px!important}
.lab-shell[data-lab-category="game"] .block-rank-tabs button {min-height:40px;padding:10px 7px;border-color:var(--lab-line);background:var(--home-bg);color:var(--lab-muted);font-size:13px}
.lab-shell[data-lab-category="game"] .block-rank-tabs button[aria-pressed="true"] {border-color:var(--lab-green);background:var(--lab-soft);color:var(--lab-green)}
.lab-shell[data-lab-category="game"] :is(.block-rank-leader,.block-rank-updated,.block-rank-caption,.block-rank-empty) {color:var(--lab-muted);font-size:12px;line-height:1.8}
.lab-shell[data-lab-category="game"] .block-rank-mine {background:var(--lab-soft);color:var(--lab-green);font-size:13px;line-height:1.8}
.lab-shell[data-lab-category="game"] .block-public-ranks table {font-size:13px;color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] :is(.block-public-ranks th,.block-public-ranks td) {border-color:var(--lab-line);padding-block:12px}
.lab-shell[data-lab-category="game"] .block-public-ranks th {font-size:11px;color:var(--lab-muted)}
.lab-shell[data-lab-category="game"] .block-rank-you {background:var(--lab-soft);color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .block-rank-form {border-color:var(--lab-line)}
.lab-shell[data-lab-category="game"] .block-rank-form label {color:var(--lab-muted);font-size:13px}
.lab-shell[data-lab-category="game"] .block-rank-form input {min-height:46px;border-color:var(--lab-line);border-radius:8px;background:var(--home-bg);color:var(--lab-ink);font-size:15px}
.lab-shell[data-lab-category="game"] .block-rank-form button {background:var(--lab-green)!important;border-color:var(--lab-green)!important;color:var(--lab-card)!important;min-height:44px!important;font-size:14px!important}
.lab-shell[data-lab-category="game"] :is(.block-rank-form>p,.block-rank-status) {color:var(--lab-green);font-size:13px;line-height:1.85}
.lab-shell[data-lab-category="game"] .block-rank-rules {color:var(--lab-muted)!important;font-size:12px!important;line-height:1.9!important}
.lab-shell[data-lab-category="game"] .block-rank-status.is-error {color:#9c6212}
.dark .lab-shell[data-lab-category="game"] .block-rank-status.is-error {color:var(--home-yolk)}

/* Shared public leaderboard styling for Space Defender. */
.lab-shell[data-lab-category="game"] .rank-heading h2 {margin:0;color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] .rank-heading .eyebrow {margin-bottom:5px}
.lab-shell[data-lab-category="game"] :is(.rank-caption,.rank-updated,.rank-rules,.space-ranking th,.rank-form label span) {color:var(--lab-muted);font-size:12px;line-height:1.85}
.lab-shell[data-lab-category="game"] :is(.rank-mine,.rank-you) {background:var(--lab-soft);color:var(--lab-green)}
.lab-shell[data-lab-category="game"] :is(.space-ranking th,.space-ranking td,.rank-form) {border-color:var(--lab-line)}
.lab-shell[data-lab-category="game"] .space-ranking table {font-size:14px;color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] .space-ranking tbody tr:first-child td:first-child {color:#a77213}
.dark .lab-shell[data-lab-category="game"] .space-ranking tbody tr:first-child td:first-child {color:var(--home-yolk)}
.lab-shell[data-lab-category="game"] :is(.rank-score-line h3,.rank-form label) {color:var(--lab-ink)}
.lab-shell[data-lab-category="game"] :is(.rank-score-line strong,.rank-status) {color:var(--lab-green)}
.lab-shell[data-lab-category="game"] .rank-error {color:#9c6212}
.dark .lab-shell[data-lab-category="game"] .rank-error {color:var(--home-yolk)}
.lab-shell[data-lab-category="game"] .embed-actions {margin-top:26px;margin-bottom:15px;gap:10px}
.lab-shell[data-lab-category="game"] .game-note {margin:0 0 22px!important}
.lab-shell[data-lab-category="game"] #fullscreen-status {font-size:14px;color:var(--lab-muted);line-height:1.85}

@media(max-width:1000px) {
  .lab-shell[data-lab-category="game"] main.container,
  .lab-shell[data-lab-category="game"] .battle-main>.container {width:calc(100% - 48px)}
  .lab-shell[data-lab-category="game"] .battle-solo-panel {padding:24px}
}
@media(max-width:700px) {
  .lab-shell[data-lab-category="game"] main.container,
  .lab-shell[data-lab-category="game"] .battle-main>.container {width:calc(100% - 36px)}
  .lab-shell[data-lab-category="game"] :is(.volley-page,.ttt-page,.game-workbench,.directory-main.lab-game-page) {padding-top:24px;padding-bottom:40px}
  .lab-shell[data-lab-category="game"] .battle-hero {padding-top:24px;padding-bottom:25px}
  .lab-shell[data-lab-category="game"] .lab-game-page h1 {font-size:34px}
  .lab-shell[data-lab-category="game"] :is(.volley-hero,.ttt-hero) {margin-bottom:24px}
  .lab-shell[data-lab-category="game"] :is(.volley-hero,.ttt-hero,.battle-hero) p:last-child,
  .lab-shell[data-lab-category="game"] :is(.tool-intro,.directory-main.lab-game-page>p:not(.eyebrow)) {font-size:15px}
  .lab-shell[data-lab-category="game"] :is(.volley-panel,.ttt-panel,.space-ranking) {padding:22px}
  .lab-shell[data-lab-category="game"] :is(.volley-panel,.ttt-panel,.space-ranking) h2 {font-size:21px}
  .lab-shell[data-lab-category="game"] .battle-mode-card {min-height:148px;padding:20px 17px}
  .lab-shell[data-lab-category="game"] .battle-mode-card strong {font-size:21px}
  .lab-shell[data-lab-category="game"] .battle-lobby,
  .lab-shell[data-lab-category="game"] .battle-settings,
  .lab-shell[data-lab-category="game"] .battle-help {padding-inline:20px}
}
@media(max-width:490px) {
  .lab-shell[data-lab-category="game"] .lab-game-page h1 {font-size:32px}
  .lab-shell[data-lab-category="game"] :is(.volley-panel,.ttt-panel,.space-ranking,.battle-solo-panel) {padding:20px}
  .lab-shell[data-lab-category="game"] :is(.volley-input,.ttt-fields select,.ttt-room-join input,.battle-field input,.battle-field select,.battle-settings input,.battle-settings select,.rank-form input,.block-rank-form input) {font-size:16px}
  .lab-shell[data-lab-category="game"] .volley-modes button {padding-inline:13px;font-size:13px}
  .lab-shell[data-lab-category="game"] .ttt-mode-switch button {font-size:13px}
  .lab-shell[data-lab-category="game"] .battle-mode-card {padding:18px 15px;gap:11px}
  .lab-shell[data-lab-category="game"] .battle-mode-card strong {font-size:20px}
  .lab-shell[data-lab-category="game"] .battle-mode-card>span:last-of-type {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  .lab-shell[data-lab-category="game"] .battle-mode-card {transition:none}
  .lab-shell[data-lab-category="game"] .battle-mode-card:hover {transform:none}
}