/* Shared game finish. Layouts, board geometry and each game's palette stay local. */
body, body[data-arcade-design="retro"] {
  --game-felt: var(--arcade-felt, #235847);
  --game-felt-text: var(--arcade-felt-text, #fff6e1);
  --game-card: var(--arcade-card, #fff8e9);
  --game-card-ink: var(--arcade-card-ink, #202c29);
  --game-card-red: var(--arcade-card-red, #b93643);
  --game-trim: #846445;
  --game-card-back: #7e343c;
  --game-hud: color-mix(in srgb, var(--game-felt) 68%, #111914);
  --game-line: color-mix(in srgb, var(--game-felt-text) 19%, transparent);
  --game-shadow: 0 15px 32px #07110e30;
  --game-card-shadow: 0 7px 12px #07110e30, 0 1px 2px #07110e28, inset 0 1px 0 #ffffffb3;
}

/* Shared interaction grammar across all 23 games. Cell/card transforms remain local. */
body[data-arcade-design] .page-play .game-stage {
  --game-focus: var(--arcade-accent, #efd08b);
  accent-color: var(--game-focus);
  isolation: isolate;
}
body[data-arcade-design] .page-play .game-stage :is(button, input, select, textarea, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}
body[data-arcade-design] .page-play .game-stage :is(button, [role="button"]) {
  touch-action: manipulation;
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: ease;
}
body[data-arcade-design] .page-play .game-stage :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--game-focus) !important;
  outline-offset: 4px;
}
body[data-arcade-design] .page-play .game-stage :is(button, [role="button"]):disabled,
body[data-arcade-design] .page-play .game-stage [aria-disabled="true"] {
  cursor: not-allowed;
}
body[data-arcade-design] .page-play .game-stage :is(input, select, textarea) {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
body[data-arcade-design] .page-play :is([class$="-hud"], .memory-hero, .game-hud) :is(b, strong, output),
body[data-arcade-design] .page-play :is([class$="-actionbar"], [class$="-controls"]) :is(b, output) {
  font-variant-numeric: tabular-nums;
}
body[data-arcade-design] .page-play :is([class$="-actionbar"], [class$="-controls"], .president-handbar, .beet-guess-form, .flags-guess-form) > button {
  min-height: 44px;
  font-family: inherit;
  line-height: 1.2;
}
@media (hover: hover) {
  body[data-arcade-design] .page-play :is([class$="-actionbar"], [class$="-controls"], .president-controls) button:enabled:hover {
    filter: brightness(1.07);
  }
}

/* A coherent tabletop material family, with warm ink and quiet physical depth. */
body[data-arcade-design] .arcade-main.page-play:is(.play-blackjack, .play-holdem, .play-war, .play-president, .play-memory, .play-teriyaki) {
  background: radial-gradient(ellipse at 50% 0%, #ffffff0a, transparent 65%),
    repeating-linear-gradient(92deg, #ffffff03 0 1px, transparent 1px 94px),
    linear-gradient(140deg, color-mix(in srgb, var(--game-trim) 64%, #161c18), #262620);
  color: var(--game-felt-text);
}
body[data-arcade-design] .page-play :is(.memory-table, .blackjack-table, .holdem-table-wrap, .president-table, .war-table, .teriyaki-table) {
  border-color: color-mix(in srgb, var(--game-trim) 75%, #17221b) !important;
  background: radial-gradient(ellipse at 50% 34%, #ffffff0d, #071b1826 78%),
    repeating-linear-gradient(96deg, #ffffff03 0 1px, transparent 1px 4px),
    var(--game-felt) !important;
  box-shadow: inset 0 0 0 1px #ffffff13, inset 0 3px 8px #06171065,
    inset 0 0 85px #06171026, 0 18px 40px #07110e45 !important;
}
body[data-arcade-design] .page-play :is(.memory-table, .blackjack-table, .holdem-table-wrap, .president-table, .war-table, .teriyaki-table)::before {
  border-color: var(--game-line) !important;
  box-shadow: none;
  pointer-events: none;
}
body[data-arcade-design] .page-play .holdem-table {
  background: radial-gradient(ellipse at 50% 28%, #ffffff0c, #0000001a 72%), var(--game-felt) !important;
  box-shadow: inset 0 0 0 10px #ffffff08, inset 0 -16px 30px #07110e40, 0 14px 28px #07110e40 !important;
}
body[data-arcade-design] .page-play :is(.blackjack-hud, .holdem-hud, .president-hud, .memory-hero,
  .blackjack-actionbar, .holdem-actionbar, .president-handbar, .war-actionbar,
  .war-battle-card, .blackjack-round-card, .holdem-pot-card, .president-round-card, .memory-progress-card) {
  border-color: var(--game-line) !important;
  background: linear-gradient(140deg, #ffffff05, transparent), var(--game-hud) !important;
  color: var(--game-felt-text);
  box-shadow: var(--game-shadow), inset 0 1px 0 #ffffff0a !important;
  backdrop-filter: blur(8px);
}
body[data-arcade-design] .page-play :is(.blackjack-hud, .holdem-hud, .president-hud, .memory-hero, .war-hud) h1 {
  text-shadow: 0 2px 4px #07110e30 !important;
}
body[data-arcade-design] .page-play :is(.blackjack-panel, .memory-panel, .president-scoreboard, .president-log-panel, .war-log-panel) {
  background: color-mix(in srgb, var(--game-card) 94%, var(--game-felt)) !important;
  color: var(--game-card-ink) !important;
  border-color: #ffffff35 !important;
  box-shadow: var(--game-shadow), inset 0 1px 0 #ffffff80 !important;
}
body[data-arcade-design] .page-play :is(.blackjack-panel, .memory-panel, .president-scoreboard, .president-log-panel, .war-log-panel) :is(h2, h3) {
  color: var(--game-card-ink) !important;
}
body[data-arcade-design] .page-play :is(.blackjack-players article, .memory-players article, .president-player, .war-log article) {
  background: color-mix(in srgb, var(--game-felt) 90%, #111914) !important;
  border-color: var(--game-line) !important;
  box-shadow: 0 3px 8px #07110e15 !important;
}
body[data-arcade-design] .page-play :is(.holdem-seat, .blackjack-seat-head, .war-player-war, .war-battle-summary) {
  background: var(--game-hud) !important;
  border-color: var(--game-line) !important;
  box-shadow: var(--game-shadow) !important;
}
body[data-arcade-design] .page-play :is(.memory-players article.is-current, .blackjack-players article.is-current,
  .holdem-seat.is-current, .president-player.is-current, .war-player-war.is-current) {
  border-color: #efd08b !important;
  box-shadow: inset 3px 0 0 #efd08b, 0 5px 12px #07110e22 !important;
}
body[data-arcade-design] .page-play :is(.memory-players article.is-me, .blackjack-players article.is-me, .holdem-seat.is-me, .president-player.is-me) {
  box-shadow: 0 0 0 1px #efd08b80, 0 5px 12px #07110e22 !important;
}
body[data-arcade-design] .page-play :is(.blackjack-card, .poker-card, .teriyaki-card):not(.is-hidden):not(.is-back),
body[data-arcade-design] .page-play .memory-card-front {
  background: linear-gradient(150deg, #ffffff80, transparent 55%), var(--game-card) !important;
  color: var(--game-card-ink) !important;
  border-color: #352c2226;
  box-shadow: var(--game-card-shadow) !important;
}
body[data-arcade-design] .page-play :is(.blackjack-card, .poker-card, .teriyaki-card).is-red:not(.is-hidden):not(.is-back),
body[data-arcade-design] .arcade-main.page-play.play-war .war-card-lane > .poker-card.is-red:not(.is-hidden) {
  color: var(--game-card-red) !important;
}
body[data-arcade-design] .arcade-main.page-play.play-war .war-card-lane > .poker-card:not(.is-hidden):not(.is-red) {
  color: var(--game-card-ink) !important;
}
body[data-arcade-design] .page-play :is(.blackjack-card.is-hidden, .poker-card.is-hidden, .teriyaki-card.is-back, .memory-card-back, .war-player-deck, .war-down-stack i) {
  background: linear-gradient(140deg, #ffffff0e, #00000013),
    repeating-linear-gradient(45deg, transparent 0 5px, #fff7e114 5px 6px), var(--game-card-back) !important;
  color: var(--game-card) !important;
  border-color: color-mix(in srgb, var(--game-card) 60%, var(--game-card-back));
  box-shadow: var(--game-card-shadow) !important;
}
body[data-arcade-design] .page-play .memory-card.is-matched .memory-card-front {
  background: color-mix(in srgb, var(--game-card) 83%, #8bad79) !important;
  color: #294a32 !important;
  box-shadow: inset 0 0 0 2px #73936d, var(--game-card-shadow) !important;
}
body[data-arcade-design] .page-play .memory-card-back { text-shadow: none; }
body[data-arcade-design] .page-play .memory-players article::before { background: linear-gradient(90deg, #efd08b14, transparent); }
body[data-arcade-design] .page-play .president-hand-card.is-selected .poker-card,
body[data-arcade-design] .page-play .teriyaki-card.is-target,
body[data-arcade-design] .page-play .war-card-lane.is-winner .poker-card {
  box-shadow: 0 0 0 2px #d0ac62, 0 9px 18px #07110e40 !important;
}
body[data-arcade-design] .page-play :is(.memory-victory, .blackjack-victory, .holdem-result, .president-finish, .war-victory, .teriyaki-result) {
  background: var(--game-hud) !important;
  color: var(--game-felt-text) !important;
  border-color: var(--game-line) !important;
  box-shadow: 0 18px 48px #07110e66, inset 0 1px 0 #ffffff14 !important;
}
body[data-arcade-design] .page-play :is(.war-pot, .president-crown) {
  background: linear-gradient(140deg, #f2d994, #c4a263) !important;
  color: #332919 !important;
  box-shadow: 0 5px 12px #07110e30 !important;
}
body[data-arcade-design] .page-play .teriyaki-avatar.is-active {
  box-shadow: 0 0 0 2px #efd08b, 0 8px 18px #07110e40;
}
body[data-arcade-design] .page-play .teriyaki-row-wrap { background: #07110e14; border-color: var(--game-line); }
body[data-arcade-design] .page-play .teriyaki-card.is-active-card { box-shadow: var(--game-card-shadow), 0 0 0 2px #d0ac62 !important; }
body[data-arcade-design] .page-play .teriyaki-table,
body[data-arcade-design] .page-play .war-card-lane.is-winner .poker-card,
body[data-arcade-design] .page-play .teriyaki-card.is-target { animation: none; }

@media (prefers-reduced-motion: reduce) {
  body[data-arcade-design] .page-play *, body[data-arcade-design] .page-play *::before, body[data-arcade-design] .page-play *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep score and probability text readable against the light side panels. */
body[data-arcade-design] .page-play :is(.blackjack-panel, .memory-panel, .president-scoreboard, .president-log-panel) header span {
  background: var(--game-hud) !important;
  color: var(--game-felt-text) !important;
}
body[data-arcade-design] .page-play .president-log article {
  background: var(--game-hud);
  border-color: var(--game-line);
}
body[data-arcade-design] .page-play :is(.president-log, .war-log) > p,
body[data-arcade-design] .page-play .blackjack-dealer-odds :is(article, span, b) {
  color: var(--game-card-ink);
}
body[data-arcade-design] .page-play .blackjack-dealer-odds { border-top-color: #352c2226; }

/* Pair text and materials explicitly where the older retro stylesheet used cream. */
body[data-arcade-design] .page-play .card-table-game :is(.memory-hero,.blackjack-hud,.holdem-hud,.president-hud) :is(h1,.game-kicker,span:not(.president-crown)),
body[data-arcade-design] .page-play .card-table-game :is(.memory-players article,.blackjack-players article,.holdem-seat,.president-player,.war-player-war) :is(h3,b,span,small),
body[data-arcade-design] .page-play .card-table-game :is(.blackjack-actionbar,.holdem-actionbar,.president-handbar,.war-actionbar) > div :is(span,b,small) {
  color: var(--game-felt-text) !important;
}
body[data-arcade-design] .page-play .card-table-game :is(.blackjack-panel,.memory-panel,.president-scoreboard,.president-log-panel,.war-log-panel) :is(h2,h3) {
  color: var(--game-card-ink) !important;
}
body[data-arcade-design] .page-play .card-table-game :is(.blackjack-actionbar,.holdem-controls,.president-controls,.war-actionbar) button {
  background: var(--game-card) !important;
  color: var(--game-card-ink) !important;
  border-color: color-mix(in srgb, var(--game-card-ink) 22%, transparent) !important;
  box-shadow: 0 3px 7px #07110e26 !important;
}
body[data-arcade-design] .page-play .card-table-game :is(.blackjack-actionbar,.holdem-controls,.president-controls,.war-actionbar) button :is(span,small) {
  color: var(--game-card-ink) !important;
}
body[data-arcade-design] .page-play .card-table-game :is(.blackjack-actionbar,.holdem-controls,.president-controls,.war-actionbar) button:disabled {
  background: color-mix(in srgb, var(--game-card) 70%, #8b8b80) !important;
  color: var(--game-card-ink) !important;
}
body[data-arcade-design] .page-play .card-table-game :is(.blackjack-player > header,.war-seat-avatar .war-player-copy,.president-player strong,.memory-players strong) {
  background: var(--game-hud) !important;
  color: var(--game-felt-text) !important;
  border-color: var(--game-line) !important;
  box-shadow: 0 4px 9px #07110e24 !important;
}

/* Card ink always wins over player/seat typography, including nested flip faces. */
body[data-arcade-design] .page-play .card-table-game .blackjack-card-face.blackjack-card-front,
body[data-arcade-design] .page-play .card-table-game .blackjack-card-face.blackjack-card-front :is(b,i,small),
body[data-arcade-design] .page-play .card-table-game .poker-card:not(.is-hidden) :is(b,i,small) {
  color: var(--game-card-ink) !important;
  text-shadow: none !important;
  opacity: 1;
}
body[data-arcade-design] .page-play .card-table-game .blackjack-card-face.blackjack-card-front.is-red,
body[data-arcade-design] .page-play .card-table-game .blackjack-card-face.blackjack-card-front.is-red :is(b,i,small),
body[data-arcade-design] .page-play .card-table-game .poker-card.is-red:not(.is-hidden) :is(b,i,small) {
  color: var(--game-card-red) !important;
}
body[data-arcade-design] .page-play .blackjack-game #blackjack-stats article,
body[data-arcade-design] .page-play .blackjack-game #blackjack-dealer-odds article,
body[data-arcade-design] .page-play .blackjack-game #blackjack-players .blackjack-hand-total {
  background: var(--game-card) !important;
  color: var(--game-card-ink) !important;
  border-color: color-mix(in srgb, var(--game-card-ink) 18%, transparent) !important;
}
body[data-arcade-design] .page-play .blackjack-game #blackjack-stats article :is(span,b),
body[data-arcade-design] .page-play .blackjack-game #blackjack-dealer-odds article :is(span,b),
body[data-arcade-design] .page-play .blackjack-game #blackjack-players .blackjack-hand-total :is(span,b,small) {
  color: var(--game-card-ink) !important;
}
body[data-arcade-design] .page-play .blackjack-game #blackjack-players .blackjack-hand-total.is-bust {
  background: var(--game-card-red) !important;
}
body[data-arcade-design] .page-play .blackjack-game #blackjack-players .blackjack-hand-total.is-bust :is(span,b,small) {
  color: var(--game-card) !important;
}
body[data-arcade-design] .page-play .holdem-game #holdem-raise-amount {
  background: var(--game-card) !important;
  color: var(--game-card-ink) !important;
  border-color: var(--game-line) !important;
}

/* Felt captions use felt ink, while empty light-panel messages use card ink. */
body[data-arcade-design] .page-play .war-game .war-live-copy :is(b,span),
body[data-arcade-design] .page-play .war-game .war-card-lane > span,
body[data-arcade-design] .page-play .president-game .president-empty-pile {
  color: var(--game-felt-text) !important;
}
body[data-arcade-design] .page-play .president-game #president-log > p {
  color: var(--game-card-ink) !important;
}
body[data-arcade-design] .page-play .president-game #president-log article :is(b,span,p),
body[data-arcade-design] .page-play .president-game #president-leftover-copy {
  color: var(--game-felt-text) !important;
}