:root {
  --card-table: #0d3b34;
  --card-table-deep: #082a27;
  --card-gold: #f5c84c;
  --card-ink: #182437;
  --card-red: #c83d4b;
  --card-face: #fffdf8;
  --card-back: #234f77;
}

body[data-wp-card-game] { margin: 0; background: #0a1f3a; }
.settings-popover.is-hidden { display: none !important; }
.card-game-battle { background: radial-gradient(circle at 50% 8%, #1e806e 0, var(--card-table) 38%, var(--card-table-deep) 100%); }
/* The logical Battle Canvas is the element carrying both classes; keep its
   inherited copy light so labels/status text stay readable on the dark table. */
.card-game-battle { color: #f8fafc; }
.card-table-ui { width: 100%; height: 100%; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; box-sizing: border-box; }
.card-game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.card-game-topbar .battle-back { flex: 0 0 44px; }
.battle-utility { box-sizing: border-box; flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; color: #f8fafc; background: rgba(9, 29, 47, .75); cursor: pointer; font-size: 20px; }
.battle-utility:focus-visible { outline: 3px solid #ffefa7; outline-offset: 2px; }
.card-game-stats { display: flex; justify-content: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.card-stat { min-width: 78px; padding: 5px 10px; border-radius: 12px; background: rgba(9, 29, 47, .75); border: 1px solid rgba(255,255,255,.14); text-align: center; }
.card-stat small { display: block; color: #b9d8d3; font-size: 11px; }
.card-stat strong { font-size: 15px; }
.card-stat-history strong { font-size: 11px; white-space: nowrap; }
.card-game-status { min-width: 120px; text-align: right; color: #d7f9e7; font-size: 13px; }
.card-game-board { min-height: 0; display: grid; grid-template-rows: auto minmax(150px, 1fr) auto; gap: 10px; overflow: auto; padding: 2px 0 4px; }
.card-opponents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opponent-card { min-height: 50px; padding: 8px; border-radius: 12px; background: rgba(7, 28, 43, .58); border: 1px solid rgba(255,255,255,.14); }
.opponent-card strong, .opponent-card span { display: block; }
.opponent-card span { color: #b9d8d3; font-size: 12px; margin-top: 3px; }
.card-table-center { min-height: 160px; border-radius: 18px; border: 1px solid rgba(255,255,255,.18); background: rgba(4, 39, 34, .42); padding: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; }
.card-table-center .table-row { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 86px; }
.card-table-label { color: #b9d8d3; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.card-game-player { border-radius: 16px; padding: 10px; background: rgba(7, 28, 43, .48); border: 1px solid rgba(255,255,255,.14); }
.card-game-player-header { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.card-game-player-header small { color: #b9d8d3; }
body[data-wp-card-game="hearts"] .card-game-player-header small { min-width: 0; flex: 1 1 auto; line-height: 1.2; overflow-wrap: anywhere; text-align: right; }
body[data-wp-card-game="hearts"] .card-game-topbar .battle-back,
body[data-wp-card-game="hearts"] .card-game-topbar .battle-utility {
  flex-basis: 52px;
  width: 52px;
  min-width: 52px;
  min-height: 52px;
}
.card-hand { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; min-height: 78px; }
.playing-card { width: 52px; height: 72px; border: 2px solid rgba(25, 45, 63, .22); border-radius: 9px; background: var(--card-face); color: var(--card-ink); box-shadow: 0 5px 10px rgba(0,0,0,.22); font: 700 16px/1 system-ui, sans-serif; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.playing-card:hover, .playing-card:focus-visible { transform: translateY(-4px); outline: none; box-shadow: 0 8px 14px rgba(0,0,0,.3); }
.playing-card.is-selected { transform: translateY(-8px); border-color: var(--card-gold); box-shadow: 0 0 0 3px rgba(245,200,76,.28), 0 8px 16px rgba(0,0,0,.3); }
.playing-card.card-speed-legal { border-color: #63e6be; box-shadow: 0 0 0 3px rgba(99,230,190,.3), 0 5px 10px rgba(0,0,0,.22); }
.playing-card.is-red { color: var(--card-red); }
.playing-card.is-face-down { color: transparent; background: repeating-linear-gradient(135deg, #2d638d 0 5px, #1b4569 5px 10px); border-color: #b8d6e7; }
.playing-card.is-face-down::after { content: "✦"; color: rgba(255,255,255,.72); font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
  body[data-wp-card-game="go-fish"] .playing-card,
  body[data-wp-card-game="go-fish"] .playing-card:hover,
  body[data-wp-card-game="go-fish"] .playing-card:focus-visible,
  body[data-wp-card-game="go-fish"] .playing-card.is-selected {
    transform: none;
    transition: none;
  }
}
.card-empty-slot { width: 52px; height: 72px; box-sizing: border-box; border: 2px dashed rgba(255,255,255,.28); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; color: #b9d8d3; font-size: 11px; line-height: 1.15; text-align: center; }
body[data-wp-card-game="casino"] .playing-card.is-capture-candidate { border-color: #63e6be; box-shadow: 0 0 0 3px rgba(99,230,190,.34), 0 5px 10px rgba(0,0,0,.22); }
body[data-wp-card-game="casino"] .card-build.is-capture-candidate { border-color: #63e6be; box-shadow: 0 0 0 3px rgba(99,230,190,.24); }
body[data-wp-card-game="casino"] .card-casino-build-preview { border-color: rgba(245,200,76,.78); color: #ffefa7; background: rgba(95,62,15,.42); }
body[data-wp-card-game="casino"] .card-casino-build-intent { border-color: rgba(99,230,190,.78); color: #e7fff1; background: rgba(10,83,80,.38); font-weight: 600; }
body[data-wp-card-game="casino"] .card-casino-payoff { width: min(100%, 52ch); display: grid; gap: 3px; margin: 0 auto; padding: 9px 12px; border: 1px solid rgba(245,200,76,.9); border-left: 4px solid #f5c84c; border-radius: 12px; color: #fff3bd; background: linear-gradient(135deg, rgba(95,62,15,.72), rgba(7,28,43,.65)); box-shadow: 0 0 0 3px rgba(245,200,76,.12); text-align: center; }
body[data-wp-card-game="casino"] .card-casino-payoff strong { color: #ffdc68; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
body[data-wp-card-game="casino"] .card-casino-payoff span { color: #fff8d9; line-height: 1.35; }
body[data-wp-card-game="casino"] .card-game-player-header small { min-width: 0; flex: 1 1 auto; line-height: 1.2; overflow-wrap: anywhere; text-align: right; }
.card-action-row { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-action-row button { min-height: 44px; }
/* War's action is intentionally outside the transformed logical Canvas. The
   slot preserves the Canvas's content rhythm while this fixed row follows the
   real viewport immediately during live resize, before a JS geometry pass. */
body[data-wp-card-game="war"] .war-action-slot {
  min-height: 96px;
}
body[data-wp-card-game="war"] #battleScreen > #cardGameActions {
  box-sizing: border-box;
  position: fixed !important;
  z-index: 120;
  inset: auto 0 56px 0 !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: 96px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(8, 42, 39, .08), rgba(8, 42, 39, .94) 28%);
  pointer-events: auto;
}
/* War's logical Battle Canvas scales below 1 on desktop. Keep its only
   repeated Flip/WAR action at or above the shared 44px physical target floor
   without widening other card-game action rows. */
body[data-wp-card-game="war"] .card-action-row button {
  box-sizing: border-box;
  min-width: 56px;
  min-height: 54px;
}
.card-game-quick-guide { flex: 1 1 100%; width: 100%; box-sizing: border-box; margin: 0; padding: 7px 10px; border: 1px solid rgba(215,249,231,.28); border-radius: 10px; color: #e7fff1; background: rgba(7, 28, 43, .38); font-size: 12px; line-height: 1.35; text-align: center; }
.card-game-quick-guide strong { color: #ffefa7; }
.card-main-controls { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.card-main-controls button { min-height: 44px; flex: 1 1 140px; }
.main-progress { display: flex; min-height: 40px; box-sizing: border-box; flex-direction: column; justify-content: center; gap: 2px; margin: 10px 0 0; padding: 7px 12px; border: 1px solid rgba(215,249,231,.28); border-radius: 10px; color: #e7fff1; background: rgba(7,28,43,.38); font-size: 12px; line-height: 1.3; }
.main-progress strong { color: #ffefa7; font-size: 13px; }
/* Spades keeps an owner-authored static Guide outside Main. Include the
   section padding in its declared width so the shared content-box rule cannot
   create a narrow-screen horizontal overflow. */
body[data-wp-card-game="spades"] .game-page-info { box-sizing: border-box; }
/* Hearts' static Guide is part of the legacy Main root. Include its padding
   in the width so the shared content-box contract cannot create phone or
   landscape overflow while preserving the existing Guide flow. */
body[data-wp-card-game="hearts"] .game-page-info {
  box-sizing: border-box;
  max-width: 100%;
}
/* War's owner-preview Guide uses the shared padded document-flow surface;
   include that padding in its width so the exact Main overflow contract stays
   within the viewport at phone and compact-landscape sizes. */
body[data-wp-card-game="war"] .game-page-info {
  box-sizing: border-box;
  max-width: 100%;
}
@media (max-width: 720px), (max-height: 560px) and (orientation: landscape) {
  /* The shared Guide uses content-box sizing; keep Gin's locale-owned Main
     Guide inside the viewport after its mobile padding is applied. */
  body[data-wp-card-game="gin-rummy"] .game-page-info.game-page-info-static,
  body[data-wp-card-game="gin-rummy"] .game-page-info.classic-guide,
  body[data-wp-game-id="gin-rummy"] .game-page-info,
  body[data-wp-card-game="cribbage"] .game-page-info.game-page-info-static,
  body[data-wp-card-game="cribbage"] .game-page-info,
  body[data-wp-card-game="go-fish"] .game-page-info.game-page-info-static,
  body[data-wp-card-game="go-fish"] .game-page-info,
  body[data-wp-card-game="casino"] .game-page-info.game-page-info-static,
  body[data-wp-card-game="casino"] .game-page-info,
  body[data-wp-card-game="crazy-eights"] .game-page-info.game-page-info-static,
  body[data-wp-card-game="crazy-eights"] .game-page-info,
  body[data-wp-card-game="old-maid"] .game-page-info.game-page-info-static,
  body[data-wp-card-game="old-maid"] .game-page-info,
  body[data-wp-card-game="speed"] .game-page-info.game-page-info-static,
  body[data-wp-card-game="speed"] .game-page-info {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}
.card-help { max-width: 64ch; text-align: center; color: #d7f9e7; font-size: 13px; margin: 0 auto; }
.card-choice-panel { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.card-choice-panel button { min-width: 48px; min-height: 44px; }
.card-choice-summary { max-width: 52ch; margin: 0; padding: 7px 10px; border: 1px solid rgba(215,249,231,.28); border-radius: 10px; color: #e7fff1; background: rgba(7,28,43,.38); font-size: 12px; line-height: 1.35; text-align: center; }
body[data-wp-card-game="crazy-eights"] .card-crazy-eights-illegal-cue { border-color: rgba(255, 209, 102, .82); color: #fff0b0; background: rgba(95, 62, 15, .46); font-weight: 700; }
.card-go-fish-book-cue { border-color: rgba(245,200,76,.78); color: #ffefa7; background: rgba(95,62,15,.42); font-weight: 700; }
.card-war-swing { border-color: rgba(255,209,102,.5); color: #ffe7a0; }
.card-book-progress { min-width: 132px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(7,28,43,.5); text-align: left; }
.card-book-progress strong, .card-book-progress span { display: block; }
.card-book-progress span { margin-top: 3px; color: #d7f9e7; font-size: 12px; }
.card-old-maid-risk { max-width: 38ch; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: #d7f9e7; background: rgba(7,28,43,.5); font-size: 12px; line-height: 1.35; text-align: center; }
.card-old-maid-risk.is-held { border-color: rgba(245,200,76,.72); color: #ffefa7; background: rgba(95,62,15,.48); }
.card-old-maid-draw-cue { border-color: rgba(245,200,76,.66); color: #ffefa7; }
.card-gin-path { max-width: 46ch; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: #d7f9e7; background: rgba(7,28,43,.5); font-size: 12px; line-height: 1.35; text-align: center; }
.card-gin-path.is-ready, .card-gin-path.is-gin { border-color: rgba(245,200,76,.72); color: #ffefa7; background: rgba(95,62,15,.48); }
.card-gin-plan { max-width: 48ch; padding: 6px 9px; border: 1px solid rgba(215,249,231,.28); border-radius: 10px; color: #e7fff1; background: rgba(7,28,43,.38); font-size: 12px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.card-crib-transition { max-width: 52ch; padding: 7px 10px; border: 1px solid rgba(245,200,76,.55); border-radius: 12px; color: #ffefa7; background: rgba(95,62,15,.38); font-size: 12px; line-height: 1.35; text-align: center; }
.card-crib-choice-plan { display: block; margin-top: 4px; color: #e7fff1; }
.card-crib-score-cue { max-width: 52ch; padding: 6px 10px; border: 1px solid rgba(99,230,190,.62); border-radius: 10px; color: #e7fff1; background: rgba(10,83,80,.34); font-size: 12px; line-height: 1.35; text-align: center; }
body[data-wp-card-game="cribbage"] .cribbage-guide-disclosure {
  margin-top: 16px;
  padding: 0 14px 14px;
  border: 1px solid rgba(215,249,231,.28);
  border-radius: 14px;
  background: rgba(7,28,43,.2);
}
body[data-wp-card-game="cribbage"] .cribbage-guide-disclosure > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: #ffefa7;
  font-weight: 800;
  list-style: none;
}
body[data-wp-card-game="cribbage"] .cribbage-guide-disclosure > summary::-webkit-details-marker { display: none; }
body[data-wp-card-game="cribbage"] .cribbage-guide-disclosure > summary::after { content: "+"; color: #63e6be; font-size: 1.35rem; line-height: 1; }
body[data-wp-card-game="cribbage"] .cribbage-guide-disclosure[open] > summary::after { content: "−"; }
body[data-wp-card-game="cribbage"] .cribbage-guide-disclosure > summary:focus-visible { outline: 3px solid #f5c84c; outline-offset: 4px; border-radius: 6px; }
body[data-wp-card-game="cribbage"] .cribbage-guide-disclosure .game-info-sections { margin-top: 2px; }
@media (max-height: 560px) and (orientation: landscape) {
  .card-crib-choice-plan { display: inline; margin: 0 0 0 4px; }
  body[data-wp-card-game="cribbage"] .card-table-center { gap: 0; padding: 4px; justify-content: flex-start; }
  body[data-wp-card-game="cribbage"] .card-crib-transition { padding: 4px 6px; }
}
.card-spades-progress { max-width: 52ch; padding: 7px 10px; border: 1px solid rgba(215,249,231,.28); border-radius: 10px; color: #e7fff1; background: rgba(7,28,43,.38); font-size: 12px; line-height: 1.35; text-align: center; }
.card-spades-progress[data-progress-state="on"], .card-spades-progress[data-progress-state="ahead"] { border-color: rgba(245,200,76,.7); color: #ffefa7; background: rgba(95,62,15,.38); }
.card-spades-progress[data-progress-state="behind"] { border-color: rgba(255,139,123,.55); }
.card-spades-trick-cue { max-width: 52ch; padding: 7px 10px; border: 1px solid rgba(99,230,190,.5); border-radius: 10px; color: #e7fff1; background: rgba(7,28,43,.5); font-size: 12px; line-height: 1.35; text-align: center; }
.card-spades-trick-cue[data-trick-phase="settled"] { border-color: rgba(245,200,76,.78); color: #ffefa7; background: rgba(95,62,15,.42); }
.card-spades-trick-card { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; padding: 3px; }
.card-spades-trick-card.is-led { background: rgba(99,230,190,.12); outline: 1px solid rgba(99,230,190,.55); }
.card-spades-trick-card.is-winner, .card-spades-trick-card.is-settled-winner { background: rgba(245,200,76,.14); outline: 2px solid rgba(245,200,76,.85); box-shadow: 0 0 0 4px rgba(245,200,76,.14); }
.card-spades-trick-card .playing-card:disabled { cursor: default; opacity: 1; }
.card-spades-trick-card .card-spades-winner-card { border-color: var(--card-gold); }
.card-capture-target { border: 2px solid rgba(245,200,76,.7); border-radius: 12px; padding: 8px; display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.card-peg-board { width: min(100%, 560px); border: 2px solid #c7913f; background: linear-gradient(145deg, #7f532c, #c28a4c); border-radius: 14px; padding: 10px; box-shadow: inset 0 0 0 3px rgba(255,230,154,.24); }
.card-peg-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.card-peg { aspect-ratio: 1; border-radius: 50%; background: rgba(35,25,19,.35); border: 1px solid rgba(255,235,179,.35); position: relative; }
.card-peg.is-player::after, .card-peg.is-ai::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: #63e6be; }
.card-peg.is-ai::after { background: #ff8b7b; }
.card-peg.is-current { box-shadow: 0 0 0 3px var(--card-gold); }
.card-war-flash { animation: cardWarFlash .55s ease; }
@keyframes cardWarFlash { 0%,100% { transform: scale(1); } 35% { transform: scale(1.12) rotate(-2deg); box-shadow: 0 0 0 8px rgba(245,200,76,.25); } }
.card-speed-lane { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 600px); }
.card-speed-pile { min-height: 112px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(4, 25, 41, .55); border: 1px dashed rgba(255,255,255,.3); }
.card-build { display: inline-flex; gap: 3px; align-items: center; padding: 5px; border: 2px solid #f5c84c; border-radius: 10px; background: rgba(245,200,76,.12); }
.card-build small { color: #ffefa7; font-size: 11px; }
body[data-wp-card-game] > .result-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; box-sizing: border-box; padding: 16px; color: #f8fafc; background: rgba(4, 25, 41, .78); backdrop-filter: blur(4px); }
body[data-wp-card-game] > .result-overlay[hidden] { display: none; }
/* The body-level Result modal owns the top layer. Hide War's viewport-fixed
   action row only while that modal is open so its quick guide cannot cross the
   compact-landscape Result title or action buttons. */
body[data-wp-card-game="war"]:has(> .result-overlay:not([hidden])) #battleScreen > #cardGameActions { visibility: hidden; pointer-events: none; }
body[data-wp-card-game] > .result-overlay .result-card { width: min(100%, 420px); box-sizing: border-box; padding: 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: linear-gradient(145deg, #123a63, #0a213f); box-shadow: 0 22px 50px rgba(0,0,0,.4); text-align: center; }
body[data-wp-card-game] > .result-overlay .result-card h2 { margin: 0 0 8px; }
body[data-wp-card-game] > .result-overlay .result-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
body[data-wp-card-game] > .result-overlay .result-actions button { min-height: 44px; flex: 1 1 110px; }
@media (max-width: 560px) {
  .card-table-ui { padding: 8px; gap: 7px; }
  .card-game-board { gap: 7px; }
  .playing-card { width: 43px; height: 61px; font-size: 14px; }
  .card-empty-slot { width: 43px; height: 61px; font-size: 10px; }
  .card-hand { gap: 5px; }
  .card-stat { min-width: 62px; padding-inline: 7px; }
  .card-game-status { min-width: 74px; font-size: 11px; }
}
/* Arabic Spades keeps the compact-portrait Battle controls inside the logical
   canvas. RTL flex centering can otherwise anchor an over-wide thirteen-card
   hand and fourteen-button bid row past the right edge of a 390px viewport. */
@media (max-width: 560px) and (orientation: portrait) {
  html[dir="rtl"] body[data-wp-card-game="spades"] .card-game-board,
  html[dir="rtl"] body[data-wp-card-game="spades"] .card-game-player,
  html[dir="rtl"] body[data-wp-card-game="spades"] .card-table-center,
  html[dir="rtl"] body[data-wp-card-game="spades"] #cardGameCenter {
    min-width: 0;
    max-width: 100%;
  }
  html[dir="rtl"] body[data-wp-card-game="spades"] .card-table-center,
  html[dir="rtl"] body[data-wp-card-game="spades"] #cardGameCenter {
    overflow-x: hidden;
  }
  html[dir="rtl"] body[data-wp-card-game="spades"] #cardGameCenter {
    width: 100%;
  }
  html[dir="rtl"] body[data-wp-card-game="spades"] #cardGameCenter > .card-choice-panel {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
    padding: 2px;
  }
  html[dir="rtl"] body[data-wp-card-game="spades"] #cardGameCenter > .card-choice-panel button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding-inline: 2px;
  }
  html[dir="rtl"] body[data-wp-card-game="spades"] .card-hand {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 3px;
  }
  html[dir="rtl"] body[data-wp-card-game="spades"] .card-hand .playing-card {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    box-sizing: border-box;
    font-size: 12px;
  }
}
@media (orientation: landscape) and (max-height: 560px) {
  .card-table-ui { grid-template-rows: auto minmax(0, 1fr) auto; }
  .card-game-board { grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr) minmax(160px, .42fr); grid-template-rows: 1fr; align-items: stretch; overflow: hidden; }
  .card-opponents { display: flex; flex-direction: column; overflow: auto; }
  .card-table-center { min-height: 0; }
  .card-game-player { min-height: 0; overflow: auto; }
  /* Cribbage keeps its six-card decision row in a dedicated bottom track so
     every card and its 44px interaction target stay inside the short Canvas. */
  body[data-wp-card-game="cribbage"] .card-table-ui {
    grid-template-rows: 44px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 6px 12px;
  }
  body[data-wp-card-game="cribbage"] .card-game-board {
    grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "opponents table"
      "player player";
    gap: 7px;
  }
  body[data-wp-card-game="cribbage"] .card-opponents {
    grid-area: opponents;
    min-width: 0;
    overflow: hidden;
  }
  body[data-wp-card-game="cribbage"] .card-table-center {
    grid-area: table;
    min-width: 0;
    min-height: 0;
    padding: 4px;
    gap: 2px;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
  body[data-wp-card-game="cribbage"] .card-table-center > #cardGameCenter {
    min-width: 0;
    width: 100%;
  }
  body[data-wp-card-game="cribbage"] .card-game-player {
    grid-column: 1 / -1;
    grid-area: player;
    min-width: 0;
    position: relative;
    z-index: 1;
    padding: 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="cribbage"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: 3px;
    line-height: 1.1;
  }
  body[data-wp-card-game="cribbage"] .card-hand {
    flex: 0 0 auto;
    min-height: 66px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body[data-wp-card-game="cribbage"] .card-hand .playing-card {
    flex: 0 1 43px;
    height: 61px;
  }
  body[data-wp-card-game="cribbage"] .card-peg-board {
    width: min(100%, 190px);
    padding: 3px;
    border-radius: 9px;
  }
  body[data-wp-card-game="cribbage"] .card-peg-row {
    gap: 1px;
  }
  body[data-wp-card-game="cribbage"] .card-peg-board .card-game-topbar {
    min-height: 0;
    gap: 2px;
    font-size: 9px;
    line-height: 1.1;
  }
  body[data-wp-card-game="cribbage"] .card-peg-board .card-game-topbar small {
    font-size: 9px;
    white-space: nowrap;
  }
  body[data-wp-card-game="cribbage"] .card-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-width: 0;
    align-items: center;
  }
  body[data-wp-card-game="cribbage"] .card-action-row .card-game-quick-guide {
    grid-column: auto;
    width: auto;
    min-width: 0;
    padding: 5px 8px;
    font-size: 10px;
    line-height: 1.15;
  }
  body[data-wp-card-game="cribbage"] .card-action-row button {
    min-width: 72px;
    min-height: 44px;
  }
  body[data-wp-card-game="hearts"] .card-game-player {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="hearts"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
  }
  body[data-wp-card-game="hearts"] .card-game-player-header small {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 10px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  body[data-wp-card-game="hearts"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
  }
  body[data-wp-card-game="hearts"] .card-game-player {
    grid-column: 1 / -1;
  }
  body[data-wp-card-game="hearts"] .card-hand {
    flex: 0 0 auto;
    min-height: 66px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body[data-wp-card-game="hearts"] .card-hand .playing-card {
    flex: 0 1 43px;
  }
  /* Casino owns a compact-landscape composition: keep the table/opponent
     region, full-width hand, and guide/actions in separate tracks so
     feedback never pushes an action below the 56px reserve. */
  body[data-wp-card-game="casino"] .card-table-ui {
    grid-template-rows: 44px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 12px;
  }
  body[data-wp-card-game="casino"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "opponents table"
      "player player";
    gap: 7px;
    overflow: hidden;
  }
  body[data-wp-card-game="casino"] .card-opponents {
    grid-area: opponents;
    min-width: 0;
    overflow: hidden;
  }
  body[data-wp-card-game="casino"] .card-game-player {
    grid-column: 1 / -1;
    grid-area: player;
    min-width: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="casino"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: 3px;
  }
  body[data-wp-card-game="casino"] .card-game-player-header small {
    font-size: 10px;
    line-height: 1.15;
  }
  body[data-wp-card-game="casino"] .card-hand {
    flex: 0 0 auto;
    min-height: 61px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body[data-wp-card-game="casino"] .card-hand .playing-card {
    flex: 0 1 43px;
    height: 61px;
  }
  body[data-wp-card-game="casino"] .card-table-center {
    grid-area: table;
    min-width: 0;
    min-height: 0;
    padding: 5px;
    gap: 3px;
    justify-content: flex-start;
    overflow: auto;
  }
  body[data-wp-card-game="casino"] .card-table-center .table-row {
    flex: 0 0 auto;
    min-height: 0;
    gap: 5px;
  }
  body[data-wp-card-game="casino"] .card-table-center .playing-card,
  body[data-wp-card-game="casino"] .card-table-center .card-build .playing-card {
    width: 43px;
    height: 61px;
  }
  body[data-wp-card-game="casino"] .card-action-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: center;
  }
  body[data-wp-card-game="casino"] .card-action-row .card-game-quick-guide {
    grid-column: 1 / -1;
    width: auto;
    padding: 5px 8px;
    font-size: 11px;
    line-height: 1.2;
  }
  body[data-wp-card-game="casino"] .card-action-row button {
    width: 100%;
    min-width: 0;
  }
  /* Crazy Eights' five-card hand must stay in its own full-width row in the
     compact landscape Canvas so the hand never shares hit space with the
     centre table or the action row. */
  body[data-wp-card-game="crazy-eights"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "opponents table"
      "player player";
    gap: 7px;
  }
  body[data-wp-card-game="crazy-eights"] .card-opponents { grid-area: opponents; }
  body[data-wp-card-game="crazy-eights"] .card-table-center {
    grid-area: table;
    position: relative;
    z-index: 2;
  }
  body[data-wp-card-game="crazy-eights"] .card-game-player {
    grid-column: 1 / -1;
    grid-area: player;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="crazy-eights"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
  }
  body[data-wp-card-game="crazy-eights"] .card-hand {
    flex: 0 0 auto;
    min-height: 66px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body[data-wp-card-game="crazy-eights"] .card-hand .playing-card {
    flex: 0 1 43px;
  }
  body[data-wp-card-game="crazy-eights"] .card-choice-panel {
    position: relative;
    z-index: 3;
  }
  body[data-wp-card-game="gin-rummy"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
  }
  body[data-wp-card-game="gin-rummy"] .card-game-player {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="gin-rummy"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
  }
  body[data-wp-card-game="gin-rummy"] .card-game-player-header small {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 10px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: right;
  }
  body[data-wp-card-game="gin-rummy"] .card-hand {
    flex: 0 0 auto;
    min-height: 66px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body[data-wp-card-game="gin-rummy"] .card-hand .playing-card {
    flex: 0 1 43px;
  }
  body[data-wp-card-game="spades"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
  }
  body[data-wp-card-game="spades"] .card-game-battle {
    color: #f8fafc;
  }
  body[data-wp-card-game="spades"] .card-opponents {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    align-content: start;
    overflow: hidden;
  }
  body[data-wp-card-game="spades"] .opponent-card {
    min-height: 0;
    padding: 6px;
    font-size: 10px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  body[data-wp-card-game="spades"] .opponent-card span {
    font-size: 9px;
  }
  body[data-wp-card-game="spades"] .card-game-player {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="spades"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
  }
  body[data-wp-card-game="spades"] .card-hand {
    flex: 0 0 auto;
    min-height: 66px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body[data-wp-card-game="spades"] .card-hand .playing-card {
    flex: 0 1 43px;
  }
  body[data-wp-card-game="go-fish"] .card-game-board,
  body[data-wp-card-game="speed"] .card-game-board,
  body[data-wp-card-game="old-maid"] .card-game-board {
    grid-template-columns: minmax(108px, .22fr) minmax(220px, .68fr) minmax(360px, 1.1fr);
  }
  body[data-wp-card-game="go-fish"] .card-game-player,
  body[data-wp-card-game="speed"] .card-game-player,
  body[data-wp-card-game="old-maid"] .card-game-player {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="go-fish"] .card-hand,
  body[data-wp-card-game="speed"] .card-hand,
  body[data-wp-card-game="old-maid"] .card-hand {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 5px;
    min-height: 66px;
  }
  body[data-wp-card-game="go-fish"] .card-hand .playing-card,
  body[data-wp-card-game="speed"] .card-hand .playing-card,
  body[data-wp-card-game="old-maid"] .card-hand .playing-card {
    width: 48px;
    height: 66px;
  }
  /* Speed is a simultaneous scan: in RTL grid auto-placement would otherwise
     put the player in the 108px opponent column. Keep the hand in its own
     full-width row so every card remains reachable in compact landscape. */
  body[data-wp-card-game="speed"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "opponents table"
      "player player";
    gap: 7px;
  }
  body[data-wp-card-game="speed"] .card-opponents { grid-area: opponents; }
  body[data-wp-card-game="speed"] .card-table-center {
    grid-area: table;
    position: relative;
    z-index: 2;
  }
  body[data-wp-card-game="speed"] .card-game-player {
    grid-column: 1 / -1;
    grid-area: player;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="speed"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
  }
  body[data-wp-card-game="speed"] .card-hand {
    flex: 0 0 auto;
    min-height: 66px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .card-choice-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    max-height: 124px;
    overflow-y: auto;
    padding: 2px;
    box-sizing: border-box;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .card-choice-panel button {
    min-width: 0;
    min-height: 36px;
    padding: 4px 2px;
    font-size: 12px;
  }
  /* Go Fish's seven-card hand can wrap into the same compact-landscape
     vertical band as the full-width Battle quick guide. Give the player panel
     its own second row and keep the hand single-line so rank controls and the
     quick guide never share a hit surface. */
  body[data-wp-card-game="go-fish"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "opponents table"
      "player player";
    gap: 7px;
  }
  body[data-wp-card-game="go-fish"] .card-opponents { grid-area: opponents; }
  body[data-wp-card-game="go-fish"] .card-table-center {
    grid-area: table;
    position: relative;
    z-index: 2;
  }
  body[data-wp-card-game="go-fish"] .card-game-player {
    grid-column: 1 / -1;
    grid-area: player;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="go-fish"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
  }
  body[data-wp-card-game="go-fish"] .card-hand {
    flex: 0 0 auto;
    min-height: 66px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  /* The compact Go Fish table needs to keep its current five-card choices,
     status, and player controls inside the 334px logical Battle Canvas. Hide
     unavailable ranks from the choice grid (they are not actionable), and
     compact the surrounding information instead of letting it paint over a
     neighboring hit surface. */
  body[data-wp-card-game="go-fish"] .card-opponents {
    gap: 4px;
    overflow: hidden;
  }
  body[data-wp-card-game="go-fish"] .opponent-card {
    min-height: 0;
    padding: 4px;
    font-size: 10px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }
  body[data-wp-card-game="go-fish"] .opponent-card span {
    margin-top: 2px;
    font-size: 9px;
  }
  body[data-wp-card-game="go-fish"] .card-table-center {
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
    padding: 5px;
    gap: 4px;
    justify-content: flex-start;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .card-table-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 10px;
    line-height: 1.1;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .table-row {
    flex: 0 0 auto;
    min-height: 0;
    gap: 4px;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .table-row .playing-card {
    width: 43px;
    height: 52px;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .table-row .card-book-progress {
    min-width: 0;
    padding: 4px 6px;
    font-size: 10px;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .card-choice-summary {
    display: none;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .card-choice-panel button:disabled {
    display: none;
  }
  body[data-wp-card-game="go-fish"] #cardGameCenter > .card-choice-panel {
    flex: 0 0 auto;
    grid-template-columns: repeat(5, minmax(36px, 44px));
    grid-template-rows: 36px;
    justify-content: center;
    max-height: 36px;
    overflow: hidden;
  }
  body[data-wp-card-game="go-fish"] .card-game-player {
    padding: 4px;
  }
  body[data-wp-card-game="go-fish"] .card-game-player-header {
    min-height: 14px;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 1;
  }
  body[data-wp-card-game="go-fish"] .card-game-player-header small {
    font-size: 9px;
    line-height: 1;
  }
  body[data-wp-card-game="go-fish"] .card-hand .playing-card {
    width: 43px;
    height: 43px;
  }
  body[data-wp-card-game="go-fish"] .card-hand {
    min-height: 43px;
  }
  body[data-wp-card-game="go-fish"] #cardGameActions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body[data-wp-card-game="go-fish"] #cardGameActions > .card-game-quick-guide {
    grid-column: 1;
    width: auto;
    min-width: 0;
    padding: 4px 6px;
    font-size: 10px;
    line-height: 1.15;
  }
  body[data-wp-card-game="go-fish"] #cardGameActions > .card-choice-panel {
    grid-column: 2;
    flex-wrap: nowrap;
    gap: 3px;
  }
  body[data-wp-card-game="go-fish"] #cardGameActions > .card-choice-panel button {
    min-width: 36px;
    min-height: 44px;
    padding: 4px;
  }
  body[data-wp-card-game="go-fish"] #cardGameActions > .primary-btn {
    grid-column: 3;
    justify-self: start;
    min-width: 0;
  }
  body[data-wp-card-game="old-maid"] .card-game-board {
    grid-template-columns: 96px 254px minmax(450px, 1fr);
  }
  body[data-wp-card-game="old-maid"] .card-table-center,
  body[data-wp-card-game="old-maid"] .card-game-player {
    min-width: 0;
  }
  body[data-wp-card-game="old-maid"] .card-hand .playing-card {
    width: 43px;
    height: 61px;
    flex: 0 0 43px;
  }
  body[data-wp-card-game="old-maid"] .card-table-center .table-row {
    gap: 2px;
  }
  body[data-wp-card-game="old-maid"] #cardGameCenter .playing-card {
    width: 36px;
    height: 50px;
  }
  /* Old Maid's face-down draw hand is a player decision surface. Keep it in
     its own full-width compact-landscape row so RTL does not center an
     over-wide hand into negative x coordinates. Wrapping is intentional for
     a pre-pair hand; every card remains inside the player panel and can be
     reached without changing the hidden-card contract. */
  body[data-wp-card-game="old-maid"] .card-game-board {
    grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "opponents table"
      "player player";
    gap: 7px;
    overflow: hidden;
  }
  body[data-wp-card-game="old-maid"] .card-opponents { grid-area: opponents; }
  body[data-wp-card-game="old-maid"] .card-table-center {
    grid-area: table;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 5px;
  }
  body[data-wp-card-game="old-maid"] .card-game-player {
    grid-column: 1 / -1;
    grid-area: player;
    min-width: 0;
    min-height: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-wp-card-game="old-maid"] .card-game-player-header {
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: 3px;
  }
  body[data-wp-card-game="old-maid"] .card-hand {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 61px;
    max-height: 127px;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body[data-wp-card-game="old-maid"] .card-hand .playing-card {
    flex: 0 0 43px;
    width: 43px;
    height: 61px;
  }
}