* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 120, 160, 0.4) rgba(0, 0, 0, 0.2);
}

/* ─── BOARD CARD SIZE ─────────────────────────────────────────
   Single source of truth for the GAME BOARD card dimensions. Every
   board card, slot, pile, prize, pip/HP strip, the hand height AND
   the side-column widths derive from these. fitBoardCardSize()
   (rendering.js) overrides them on game start and on window resize
   so the board grows/shrinks to fit the available space — up to a
   240px height ceiling, down to a 60px floor. The deck builder has
   its own fixed sizing and does NOT use these. 80×112 is the
   fallback default. Aspect ≈ 5:7. */
:root {
    --card-w: 80px;
    --card-h: 112px;
    /* The card-back scan. All backs live together in cards/card-backs/ so this
       can later be flipped to another design (Japanese, Ancient Mew, …) by
       changing this one line (or setting it from JS for a runtime toggle).
       Painted OVER the gradient fallback below, so a missing/slow file falls
       back to the blue gradient rather than a blank card. */
    --card-back-src: url('cards/card-backs/international-back.webp');
}

/* Global utility: anything with .hidden is not displayed */
.hidden {
    display: none !important;
}

body {
    background-color: #1a1a2e;
    color: #ffffff;
    font-family: Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
}

/* ─── CUSTOM SCROLLBARS ──────────────────────────── */

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 120, 160, 0.4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 120, 160, 0.6);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ─── OUTER CONTAINER ─────────────────────────────── */

#game-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}

/* ─── LEFT PANEL: card zoom display ──────────────── */

#card-display-panel {
    width: 375px;
    min-width: 375px;
    background-color: #16213e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding-top: 12px;
    border-right: 2px solid #444;
    position: relative;
    z-index: 5000;
}

/* ─── PROMPT BARS (per-player "what to do now") ──── */

#prompt-bar-stack {
    width: 338px;            /* match the display frame width below */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prompt-bar {
    background-color: #0f3460;
    border: 1px solid #2a4a7a;
    border-radius: 8px;
    padding: 8px 12px;
}

.prompt-bar-text {
    /* Static height: always reserve three lines so the display frame
       never shifts when prompt length changes. */
    height: calc(1.35em * 3);
    line-height: 1.35;
    font-size: 13px;
    color: #ffffff;
    overflow: hidden;
    text-align: center;
}

#card-display-frame {
    width: 338px;
    height: 473px;
    position: relative;      /* positioning context for the bare-scan overlay */
    flex-shrink: 0;          /* never give up height to the log below — holds a full card scan */
    background-color: #1e2030;   /* empty: same fill as an empty Bench slot — reads as "empty" */
    border: 2px dashed #888;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    overflow-y: auto;
}

#card-display-frame.occupied {
    background-color: #0f3460;   /* occupied: blue, distinct from the empty state */
    border-style: solid;
}

/* ─── GAME LOG (global history, fills space below the frame) ──── */

#game-log-panel {
    width: 338px;            /* match the display frame / prompt stack width */
    flex: 1 1 auto;          /* grow to fill the column down to its bottom */
    min-height: 0;           /* allow the inner scroll area to actually scroll */
    margin-bottom: 12px;     /* breathing room at the column bottom */
    display: flex;
    flex-direction: column;
    background-color: #aab0b8;   /* medium gray — a distinct surface from the navy board */
    border: 1px solid #888d96;
    border-radius: 8px;
    overflow: hidden;
}

#game-log-title {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5a6470;
    text-align: center;
    padding: 6px 0;
    border-bottom: 1px solid #888d96;
}

#game-log-entries {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: #3c4047;          /* dark body text on the light-gray panel */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.game-log-entry {
    word-wrap: break-word;
}

/* Thin section divider in the game log — e.g. the first game → Sudden Death boundary.
   Rendered as its own entry (no text) by renderGameLog, not as a .game-log-entry. */
.log-separator {
    height: 0;
    margin: 3px 4px;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.30);
}

/* Default bold (Special Conditions, counts — anything not a typed card/player name). */
.game-log-entry strong {
    color: #2b2f36;
    font-weight: 600;
}

/* Card names colored by card type so the three kinds are distinguishable at a glance.
   The token->class mapping is in promptBar.js (logCardName / renderLogMarkup); the
   color choices live here so the scheme can change without touching JS. */
.game-log-entry strong.log-card-pokemon { color: #9a6a00; }   /* Pokémon — dark amber */
.game-log-entry strong.log-card-trainer { color: #5b626b; }   /* Trainer — mid-gray (distinct from near-black attack names) */
.game-log-entry strong.log-card-energy  { color: #1f5fb0; }   /* Energy  — medium blue */

/* Energy type pip(s) shown in front of an Energy card name (one per energyValue,
   colored by energyType via inline style). The thin dark ring keeps pale pips
   (Colorless, Lightning) visible against the light-gray panel. */
.log-energy-pip {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

/* Special Condition pills — a bright colored badge so the five conditions read at a
   glance on the medium-gray panel. Shared pill shape; the condition->color mapping is
   isolated to the four rules below (token carries just the condition key) so the scheme
   can change here without touching JS. Text color is the legible contrast for each fill. */
.game-log-entry .log-condition,
.game-log-entry .log-type-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 11px;
    vertical-align: baseline;
}
.game-log-entry .log-condition-asleep,
.card-cond-pill.cond-asleep      { background: #ff8ab8; color: #5a0a2e; }   /* pink */
.game-log-entry .log-condition-paralyzed,
.card-cond-pill.cond-paralyzed   { background: #ffd400; color: #4a3b00; }   /* yellow */
.game-log-entry .log-condition-confused,
.card-cond-pill.cond-confused    { background: #7fd0ff; color: #053a55; }   /* light blue */
.game-log-entry .log-condition-poisoned,
.card-cond-pill.cond-poisoned    { background: #b15bd6; color: #ffffff; }   /* purple */
/* Bare energy-type pill (Conversion's new Weakness/Resistance, future bare-type refs).
   Its background + text color are set inline from energyColors (JS) — the same single
   source the Energy pip uses — so only the shared pill shape above lives in CSS. */

/* Player names: bold + per-player color. The id->color mapping is intentionally
   isolated to these two rules so a later "whose color is whose" scheme only
   edits here. Darkened from the old dark-panel shades for legibility on light gray. */
.game-log-entry strong.log-player-1,
.game-log-chat strong.log-player-1 { color: #c0392b; }   /* Player 1 — red */
.game-log-entry strong.log-player-2,
.game-log-chat strong.log-player-2 { color: #1f63c8; }   /* Player 2 — blue */

/* Chat messages, interleaved into the game log. Deliberately distinct from game
   narration (.game-log-entry): a light speech-tinted bubble with a colored left edge,
   so banter never reads as a game event. The sender name keeps its per-player log
   color (rules above); the body is plain escaped text. */
.game-log-chat {
    word-wrap: break-word;
    background: rgba(255, 255, 255, 0.55);
    border-left: 3px solid rgba(0, 0, 0, 0.28);
    border-radius: 5px;
    padding: 3px 8px;
    color: #2b2f36;
}
.game-log-chat .chat-colon { color: #5a6470; }
.game-log-chat .chat-body { color: #2b2f36; }

/* Chat input row — a thin bar pinned at the bottom of the log panel. Online-only
   (starts .hidden; loadOnlineSnapshot reveals it at game start). Type + Enter sends. */
#game-log-chat-input {
    flex: 0 0 auto;
    border-top: 1px solid #888d96;
    padding: 6px;
    display: flex;
    gap: 6px;
    align-items: stretch;
}
#chat-input {
    flex: 1 1 auto;
    min-width: 0;            /* let the field shrink so the Send button always fits */
    box-sizing: border-box;
    border: 1px solid #888d96;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: inherit;
    color: #2b2f36;
    background: #f0f2f4;
}
#chat-input:focus {
    outline: none;
    border-color: #5a6470;
    background: #ffffff;
}
#chat-input::placeholder { color: #7a828c; }
#chat-send-btn {
    flex: 0 0 auto;
    border: 1px solid #888d96;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    color: #ffffff;
    background: #5a6470;
    cursor: pointer;
}
#chat-send-btn:hover { background: #49525c; }
#chat-send-btn:active { background: #3d454e; }

/* ─── MAIN BOARD ──────────────────────────────────── */

#board {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
}

/* ─── PLAYER AREAS ────────────────────────────────── */

.player-area {
    flex: 1;
    display: grid;
    grid-template-columns: calc(var(--card-w) * 3 + 20px) 1fr calc(var(--card-w) + 80px);
    grid-template-areas: "prizes center side";
    gap: 16px;
    padding: 10px;
    overflow: hidden;
}

#opponent-area {
    background-color: #1f1f3a;
    border-bottom: 1px solid #444;
}

#player-area {
    background-color: #1a1a2e;
}

.prizes-column {
    grid-area: prizes;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.center-column {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

#opponent-area .center-column {
    justify-content: flex-end;
}

#player-area .center-column {
    justify-content: flex-start;
}

.side-column {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Each side-column entry is a row: a label cell on the left (toward board
   center) and the pile/button on the right. The label cell is a fixed width
   so the piles line up vertically across rows. */
.pile-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pile-side-label {
    width: 64px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}
/* Holds the right cell empty (opponent hand row has no Organize button) so the
   row stays the same total width and its label aligns with the others. */
.pile-spacer {
    width: var(--card-w);
    flex-shrink: 0;
}
/* Side labels live outside the pile now, so .deck.occupied .pile-label no longer
   colors them — give them a fixed readable color here. */
.pile-side-label .pile-label {
    color: #e0e0e0;
}
/* The top card shown inside a deck/discard pile is display-only: clicks fall
   through to the pile element (draw / open discard). Absolutely centered so the
   top card and the under-card (shown only while the top is hidden mid-flight)
   stack instead of sitting side by side. Compound selector (.card.pile-top-card)
   so position:absolute beats the later, equal-specificity `.card { position:
   relative }` rule. */
.card.pile-top-card {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.prize-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--card-w));
    grid-template-rows: repeat(2, var(--card-h));
    gap: 4px;
}

/* ─── ROWS INSIDE CENTER COLUMN ───────────────────── */

.hand-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    /* Cards are centered by .hand's fixed height, NOT here — see .hand below. */
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Clip the ~8px that .hand overflows when the horizontal scrollbar appears,
       and prevent a stray vertical bar (overflow-x:auto would otherwise compute
       overflow-y to auto). */
    overflow-y: hidden;
    max-width: 600px;
    /* 16px top/bottom clears the selected card's glow (~13px reach). */
    padding: 16px 4px;
    /* Pinned height, border-box. The inner .hand owns vertical centering and is
       card-height + breathing room; this wrapper adds its 32px padding on top.
       Scales with --card-h so the hand shrinks in step with the cards. */
    height: calc(var(--card-h) + 52px);
}

/* The static frame around the scrolling .hand-row. The chevrons live here
   (NOT inside .hand-row), so they stay pinned to the visible edges instead of
   scrolling away with the cards. fit-content makes the frame hug the row's
   actual width (≤600px) so the cues land on the row's real edges. */
.hand-viewport {
    display: flex;
    align-items: center;
    gap: 4px;
}

#opponent-area .hand-viewport {
    margin-bottom: 12px;
}

#player-area .hand-viewport {
    margin-top: 12px;
}

/* Indicator-only scroll chevrons. They sit in fixed-width gutters OUTSIDE the
   hand-row (flex siblings of it), so they never overlap a card. The gutters
   stay reserved whether or not a chevron is showing (opacity toggle, not
   display), so toggling a cue never shifts the hand. JS (updateHandScrollCues)
   adds .visible based on scroll position: left appears once you've scrolled off
   0, right hides at the end, both hidden when the hand fits. pointer-events is
   off — they're purely informational. */
.hand-scroll-cue {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    pointer-events: none;
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transition: opacity 0.15s;
}

.hand-scroll-cue.visible {
    opacity: 1;
}

/* Organize Hand button — sits under the discard pile in the side column.
   Width matches the deck/discard cards (80px). Gated to the player's turn in
   updateTurnControls(), same as End Player Turn. */
#organize-hand-btn {
    width: var(--card-w);
    font-size: 10px;
    line-height: 1.2;
    padding: 6px 4px;
    background-color: #16213e;
    color: #cfd8e8;
    border: 1px solid #3a4a6a;
    border-radius: 5px;
    cursor: pointer;
}

#organize-hand-btn:hover:not(:disabled) {
    background-color: #1d2b50;
    border-color: #4a5f8a;
}

#organize-hand-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Hand counter — a plain readout, NOT a button. No fill/border/hover (which
   would mimic the Organize Hand button right next to it); just stacked text in
   the deck/discard pile style (label + bold count, same fonts/sizes) so it
   reads as information. 80px wide to align with the column. */
.hand-count {
    width: 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
}

.hand-count-label {
    font-size: 11px;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
}

.hand-count-num {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

.hand-count.empty .hand-count-label,
.hand-count.empty .hand-count-num {
    color: #888888;          /* whole readout grays out when the hand is empty */
}

.active-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.bench-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.pip-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.pip-row.single {
    width: var(--card-w);
    display: flex;
    justify-content: center;
}

/* HP bar — the mirror of the pip row, sitting ABOVE each slot. Same row/strip
   geometry as the pips so the two bars line up; HP readout is right-aligned and
   bold, color-banded like it used to be on the card face. Empty strips read as
   faint placeholders, exactly like the empty pip strips. */
.hp-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
}
.hp-row.single {
    width: var(--card-w);
    display: flex;
    justify-content: center;
}
.hp-strip {
    width: var(--card-w);
    height: 16px;
    min-height: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;     /* HP pill right-aligned, hugging the card */
    padding: 0 5px;
    box-sizing: border-box;
}
/* HP pill: current HP only ("30 HP"), coloured by fraction of max. Light fill +
   contrasting text, matching the condition-pill shape (.card-cond-pill). The
   action menu keeps its own current/max readout (.action-menu-hp), unaffected. */
.hp-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.hp-pill.hp-full { background: #ffffff; color: #1a1a1a; }   /* full — white / black */
.hp-pill.hp-high { background: #d4ebff; color: #1565c0; }   /* above half — light blue / blue */
.hp-pill.hp-mid  { background: #ffe6c7; color: #b45309; }   /* at/below half — light orange / orange */
.hp-pill.hp-crit { background: #ffd9d9; color: #c62828; }   /* 10 HP — light red / red */
.hp-pill.hp-zero { background: #000000; color: #ffffff; }   /* 0 HP (pre-KO instant) — black / white */

.pip-strip {
    width: var(--card-w);
    height: 18px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    justify-content: center;
    min-height: 18px;
}

/* One row of pips inside the strip when it switches to a two-row grid (5+
   energy). The strip becomes a flex column of these; each sub-row centers its
   own pips so a partial bottom row stays centered under the top one. */
.pip-subrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* ─── CARD ZONE SIZES ─────────────────────────────── */

.active-slot {
    width: var(--card-w);
    height: var(--card-h);
    background-color: #1e2030;
    border: 2px dashed #8899aa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    overflow: visible;
}

.active-slot.occupied {
    border-style: solid;
    border-color: #8899aa;
}

.reserved-zone {
    width: var(--card-w);
    height: var(--card-h);
    flex-shrink: 0;
    pointer-events: none;
}

.trainer-zone-spacer {
    width: 48px;
    flex-shrink: 0;
}

.trainer-zone {
    width: var(--card-w);
    height: var(--card-h);
    background-color: transparent;
    border: 2px dashed transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    overflow: visible;
    position: relative;
}

.trainer-zone.trainer-zone-active {
    background-color: #1a2a4a;
    border-color: #9966ff;
    color: #aaaaaa;
}

.trainer-zone.glow-targets {
    color: #ffffff;
}

.trainer-zone.glow-targets::before {
    content: "Play Trainer Card";
    font-size: 10px;
    text-align: center;
    line-height: 1.3;
    padding: 0 6px;
    pointer-events: none;
}

/* Don't show the "Play Trainer Card" label when a card is already in the zone */
.trainer-zone.trainer-zone-active.glow-targets::before {
    content: none;
}

.trainer-zone .card {
    border-color: #9966ff;
    background-color: #2a1a4a;
}

/* Empty slot label text — gray until filled */
.active-slot:not(.occupied),
.bench-slot:not(.occupied),
.prize-slot:not(.occupied),
#stadium-slot:not(.occupied) {
    color: #aaaaaa;
    font-size: 11px;
}
.active-slot .card,
.bench-slot .card {
    border-color: #f5a623;
}

.bench-slot {
    width: var(--card-w);
    height: var(--card-h);
    background-color: #1e2030;
    border: 2px dashed #555;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    position: relative;
    overflow: visible;
}

.bench-slot.occupied {
    border-style: solid;
}

.prize-slot {
    width: var(--card-w);
    height: var(--card-h);
    background-color: #1e2030;
    border: 2px dashed #c8b87a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    overflow: hidden;
}

.prize-slot.occupied {
    border-style: solid;
    border-color: #c8b87a;
}

.deck {
    width: var(--card-w);
    height: var(--card-h);
    background-color: #1e2030;
    border: 2px dashed #c0c8d8;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    gap: 2px;
}

.deck.occupied {
    border-style: solid;
    border-color: #c0c8d8;
}

/* Thin wrapper around the deck pile. The deck element is clone-replaced every
   renderBoard, so the shuffle riffle animates this wrapper instead — it persists
   across re-renders, so the animation is never cut short (e.g. by the setup deal
   that shuffles then immediately deals). Sized to the deck; no layout effect. */
.deck-wrap {
    flex-shrink: 0;
}
.deck-wrap.shuffling {
    animation: deck-riffle 0.5s ease;
}
@keyframes deck-riffle {
    0%   { transform: translateX(0)    rotate(0deg); }
    15%  { transform: translateX(-3px) rotate(-3deg); }
    30%  { transform: translateX(3px)  rotate(2.5deg); }
    45%  { transform: translateX(-2px) rotate(-2deg); }
    60%  { transform: translateX(2px)  rotate(1.5deg); }
    75%  { transform: translateX(-1px) rotate(-1deg); }
    100% { transform: translateX(0)    rotate(0deg); }
}

.discard {
    width: var(--card-w);
    height: var(--card-h);
    background-color: #1e2030;
    border: 2px dashed #e94560;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    gap: 2px;
}

.discard.occupied {
    border-style: solid;
}

.pile-label {
    font-size: 11px;
    color: #aaaaaa;
    text-align: center;
    line-height: 1.2;
}

.deck.occupied .pile-label,
.discard.occupied .pile-label {
    color: #ffffff;
}

.pile-count {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

.hand {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    min-width: var(--card-w);
    /* Card-height + breathing room. Cards center within THIS height; the
       .hand-row wrapper adds the 32px padding. Scales with --card-h. */
    height: calc(var(--card-h) + 20px);
    /* No padding here: the .hand-row wrapper owns the vertical room. */
    padding: 0;
}

/* ─── MIDDLE STRIP ────────────────────────────────── */

/* Collapsed from a 50px band to a thin divider line. It no longer reserves
   vertical space — that's been handed back to the two areas — but it still
   draws the seam and stays position:relative to anchor the floating Stadium,
   which sits at top:50% and overhangs the line into both halves. */
#middle-strip {
    height: 2px;
    background-color: #444;
    position: relative;
}

/* ─── STADIUM ─────────────────────────────────────── */

/* The Stadium floats on the board's vertical midline, but its horizontal
   position is borrowed from the Bench 1 column rather than a board %. This
   layer reuses the exact grid the play areas use (260px / 1fr / 100px, gap 16,
   10px side padding). Inside the center cell sits a 424px box — the bench row's
   width (5*80 + 4*6) — centered just like the real bench row; the Stadium is
   the left-aligned first slot of that box, so it lands exactly on Bench 1 at
   every window width. It reserves no vertical space and passes clicks through;
   only the Stadium itself is interactive. */
/* REDESIGN v2: the bench is now centered in the board (flexible 1fr side zones),
   so the Stadium re-centers a bench-width box and left-aligns the slot onto
   Bench 1 — same idea as the original, just keyed to the new centered bench.
   NOTE: aligns to the player's Bench 1; until the opponent half is mirrored it
   won't sit over the opponent's Bench 1. */
#stadium-layer {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 0 10px;
    pointer-events: none;
}

.stadium-center {
    /* Bench-row width (5 cards + 4×6px gaps), centered like the bench itself. */
    width: calc(var(--card-w) * 5 + 24px);
    display: flex;
    justify-content: flex-start;
}

.stadium-bench-align {
    display: flex;
    justify-content: flex-start;   /* Stadium = the Bench 1 slot position */
}

#stadium-slot {
    width: var(--card-w);
    height: var(--card-h);
    background-color: #1e2030;
    border: 2px dashed #4ecdc4;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    pointer-events: auto;      /* re-enable clicks on the Stadium itself */
}

#stadium-slot.occupied {
    border-style: solid;
}

/* ════════════════════════════════════════════════════════════════════
   BOARD REDESIGN v2 — full-width-row grid. PLAYER half only for now;
   scoped to #player-area so the still-old #opponent-area is untouched
   until it's mirrored next pass. Reuses --card-w/--card-h, so it scales
   with the fit logic. (When the opponent is converted, this generalizes
   to .board-grid-v2 and the #player-area scoping drops.)
   ──────────────────────────────────────────────────────────────────── */

#player-area.board-grid-v2 {
    display: grid;
    /* Flexible side zones (1fr) soak up the spare width so the bench stays
       centered (Active = col b3 = board center) while the prizes sit OUT in the
       open left space (centered in their zone, not flush to the bench) and the
       right stack sits out toward the right. */
    grid-template-columns:
        [prizes] 1fr
        [b1] var(--card-w)
        [b2] var(--card-w)
        [b3] var(--card-w)
        [b4] var(--card-w)
        [b5] var(--card-w)
        [piles] 1fr [end];
    /* No filler row — the right stack is now only two cards tall (meta tucked
       beside the discard), so Active, Bench and the hand pack tightly together
       near the center line. Any residual space sits below the hand and closes
       once the opponent half is converted and the cards grow to fill. */
    grid-template-rows: [active] auto [bench] auto [hand] auto [rend];
    grid-template-areas: none;
    column-gap: 6px;
    row-gap: 6px;
    align-content: start;
    align-items: center;
}

#player-area.board-grid-v2 .col-prizes { grid-column: prizes / b1; grid-row: active / hand; justify-self: center; align-self: center; }
#player-area.board-grid-v2 .col-b1 { grid-column: b1 / b2; }
#player-area.board-grid-v2 .col-b2 { grid-column: b2 / b3; }
#player-area.board-grid-v2 .col-b3 { grid-column: b3 / b4; }
#player-area.board-grid-v2 .col-b4 { grid-column: b4 / b5; }
#player-area.board-grid-v2 .col-b5 { grid-column: b5 / piles; }
#player-area.board-grid-v2 .col-piles { grid-column: piles / end; grid-row: active / hand; justify-self: center; align-self: center; }
#player-area.board-grid-v2 .row-active { grid-row: active / bench; }
#player-area.board-grid-v2 .row-bench { grid-row: bench / hand; }
#player-area.board-grid-v2 .row-hand { grid-column: prizes / end; grid-row: hand / rend; }

/* Play cell: HP bar (hugs card) · card slot · energy pips, stacked tight */
#player-area.board-grid-v2 .play-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Trainer cell — no strips; centered so its card face lines up with the Active */
#player-area.board-grid-v2 .trainer-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right stack: Deck on top; below it a row with the hand meta to the LEFT of the
   Discard. align-items:flex-end right-aligns deck over discard; the meta tucks
   into the open space to discard's left. Two cards tall — matches the play rows,
   so it no longer stretches them. */
#player-area.board-grid-v2 .pile-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
}
#player-area.board-grid-v2 .pile-bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}
#player-area.board-grid-v2 .pile-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
#player-area.board-grid-v2 .pile-unit .pile-side-label { width: var(--card-w); }
/* Meta cluster sits beside the discard pile (not below it). */
#player-area.board-grid-v2 .hand-meta { justify-content: flex-start; }

/* Hand strip — full-width, pinned to the bottom edge; cards ~0.85 of play size
   (hover still shows the full card). Fanning/overlap is the next refinement. */
#player-area.board-grid-v2 .hand-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    /* Clear the fixed corner buttons so the hand widens up to them but not under:
       Forfeit (left: 390px) bottom-left, End Turn (right: 24px) bottom-right.
       Asymmetric to match those offsets, so both edges sit just inside them. */
    padding-left: 150px;
    padding-right: 180px;
}
#player-area.board-grid-v2 .hand-viewport { margin: 0; width: 100%; }
#player-area.board-grid-v2 .hand-row {
    /* Extra vertical room (centered) so a hovered card can lift without being
       clipped by overflow-y:hidden on this scroll container. */
    height: calc(var(--card-h) * 0.85 + 40px);
    align-items: center;
    padding: 4px 4px;
    /* Fill the cleared strip (no longer capped at 600px); cards scroll within. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
#player-area.board-grid-v2 .hand {
    height: calc(var(--card-h) * 0.85 + 10px);
    /* Overlap layout owns horizontal spacing via margin-left on the cards, so
       no flex gap here. Auto margins still center a hand that fits the window;
       they collapse to 0 on overflow so it left-aligns and scrolls. */
    gap: 0;
    margin-inline: auto;
}
#player-area.board-grid-v2 .hand .card {
    width: calc(var(--card-w) * 0.85);
    height: calc(var(--card-h) * 0.85);
    min-width: calc(var(--card-w) * 0.85);
    min-height: calc(var(--card-h) * 0.85);
    position: relative;
    transition: transform 0.12s ease;
}
/* Overlap step: published per-hand by applyHandOverlap(). Positive = a gap when
   the hand fits; negative = cards slide together as it fills. */
#player-area.board-grid-v2 .hand .card:not(:first-child) {
    margin-left: var(--hand-overlap-margin, 8px);
}
/* Lift-forward: point at a card and it rises, comes fully to the front, and
   stays upright. z-index clears the selected-card state (z-index:10). */
#player-area.board-grid-v2 .hand .card:hover {
    transform: translateY(-12px) scale(1.05);
    z-index: 60;
}

/* ── Opponent half: vertical mirror of the player grid. Rows reversed (hand on
   top, Active nearest the center line); align-content:end so the active row hugs
   the center line. Self-contained for now (shares values with the player rules
   above by duplication — merge into a single .board-grid-v2 set later). ── */
#opponent-area.board-grid-v2 {
    display: grid;
    grid-template-columns:
        [prizes] 1fr
        [b1] var(--card-w)
        [b2] var(--card-w)
        [b3] var(--card-w)
        [b4] var(--card-w)
        [b5] var(--card-w)
        [piles] 1fr [end];
    grid-template-rows: auto auto auto;   /* 1 = hand (top) · 2 = bench · 3 = active (near center) */
    grid-template-areas: none;
    column-gap: 6px;
    row-gap: 6px;
    align-content: end;
    align-items: center;
}
#opponent-area.board-grid-v2 .col-prizes { grid-column: prizes / b1; grid-row: 2 / 4; justify-self: center; align-self: center; }
#opponent-area.board-grid-v2 .col-b1 { grid-column: b1 / b2; }
#opponent-area.board-grid-v2 .col-b2 { grid-column: b2 / b3; }
#opponent-area.board-grid-v2 .col-b3 { grid-column: b3 / b4; }
#opponent-area.board-grid-v2 .col-b4 { grid-column: b4 / b5; }
#opponent-area.board-grid-v2 .col-b5 { grid-column: b5 / piles; }
#opponent-area.board-grid-v2 .col-piles { grid-column: piles / end; grid-row: 2 / 4; justify-self: center; align-self: center; }
#opponent-area.board-grid-v2 .row-active { grid-row: 3 / 4; }
#opponent-area.board-grid-v2 .row-bench { grid-row: 2 / 3; }
#opponent-area.board-grid-v2 .row-hand { grid-column: prizes / end; grid-row: 1 / 2; }

#opponent-area.board-grid-v2 .play-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#opponent-area.board-grid-v2 .trainer-cell { display: flex; align-items: center; justify-content: center; }
#opponent-area.board-grid-v2 .pile-stack { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; }
#opponent-area.board-grid-v2 .pile-bottom { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; }
#opponent-area.board-grid-v2 .pile-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#opponent-area.board-grid-v2 .pile-unit .pile-side-label { width: var(--card-w); }
#opponent-area.board-grid-v2 .hand-meta { justify-content: flex-start; }
#opponent-area.board-grid-v2 .hand-strip { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding-left: 150px; padding-right: 180px; }
#opponent-area.board-grid-v2 .hand-viewport { margin: 0; width: 100%; }
#opponent-area.board-grid-v2 .hand-row { height: calc(var(--card-h) * 0.85 + 40px); align-items: center; padding: 4px 4px; flex: 1 1 auto; min-width: 0; max-width: none; }
#opponent-area.board-grid-v2 .hand { height: calc(var(--card-h) * 0.85 + 10px); gap: 0; margin-inline: auto; }
#opponent-area.board-grid-v2 .hand .card:not(:first-child) { margin-left: var(--hand-overlap-margin, 8px); }
#opponent-area.board-grid-v2 .hand .card {
    width: calc(var(--card-w) * 0.85);
    height: calc(var(--card-h) * 0.85);
    min-width: calc(var(--card-w) * 0.85);
    min-height: calc(var(--card-h) * 0.85);
}

/* ─── RENDERED CARDS ──────────────────────────────── */

.card {
    width: var(--card-w);
    height: var(--card-h);
    min-width: var(--card-w);
    min-height: var(--card-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    background-color: #0f3460;
    border: 2px solid #666;
    box-sizing: border-box;
}

/* ─── FACE-DOWN CARD BACK (placeholder until a real scan is dropped in) ───────
   One uniform back for every hidden card — the deck piles now, opponent hand/Prizes
   later. Uniform on purpose: nothing about a back may hint at the card beneath it, so
   it can never leak identity. .card-back-face fills the card; swap its gradient for a
   background-image later without touching any JS. */
.card-back-face {
    position: absolute;
    inset: 0;
    border-radius: 4px;       /* inside .card's 6px outer radius; clips the scan's corners cleanly */
    /* The real card-back scan sits ON TOP of the two-gradient fallback. Because
       the scan is fully opaque it hides the gradient whenever it has loaded; if
       the file is missing or not-yet-loaded the transparent gap shows the blue
       gradient instead of a blank card. The scan is drawn 100% 100% (exact fill,
       full navy border preserved edge-to-edge — the card element is 5:7 and the
       scan ≈1024×1420, a ~1% difference that stretches invisibly rather than
       cropping the border). No own border: the scan includes the card's border. */
    background-image:
        var(--card-back-src),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 6px, rgba(255,255,255,0) 6px 12px),
        linear-gradient(160deg, #2a4a86 0%, #1b2f5e 55%, #16264d 100%);
    background-size: 100% 100%, auto, auto;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;               /* above any stray face/scan layer (card-scan is z-index 5) */
    pointer-events: none;
    overflow: hidden;
}

/* When the local "Card Scans" preference is OFF, the front-scan layer already
   vanishes (cardScanLayer returns nothing). The card BACK is CSS-painted, so it
   needs this to match: blank the scan LAYER of --card-back-src to `none`, which
   drops just the scanned back and lets the two-gradient fallback below it show —
   the plain blue placeholder, the exact sibling of a front falling back to text.
   toggleCardScans (rendering.js) sets `scans-off` on <body>; this overrides the
   :root variable for every descendant. A local view pref only — never synced. */
body.scans-off {
    --card-back-src: none;
}

/* ─── CARD SCANS (bare image, automatic text fallback) ───────
   The scan layer is a <div> painted with a CSS background-image,
   NOT an <img>. A missing or not-yet-loaded file shows nothing
   (no broken-image glyph) and the transparent div lets the text
   face show through as the fallback; a cached background also
   repaints instantly on re-render (no <img> reload flicker).
   pointer-events:none keeps the card clickable. The .card box
   (80×112) and the display frame (338×473) both match real card
   aspect, so background-size:cover fills with no meaningful crop. */
.card-scan {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;       /* inside .card's 6px outer radius + 2px border */
    z-index: 5;               /* above the text face, below condition-badge (z-index 20) */
    pointer-events: none;
}
.display-card-scan {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 14px;      /* inside the frame's 16px radius + 2px border */
    z-index: 5;
    pointer-events: none;
}

.card-name {
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
}

/* (HP readout moved off the card face to the per-slot .hp-strip bar above —
   see .hp-pill. The color bands live there now.) */

/* Single-letter pill + yellow label on same row */
.card-tag-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.card-tag-label {
    font-size: 9px;
    color: #ffcc88;
}

.card-tag-pokemon {
    font-size: 8px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    background-color: #f9a825;
    color: #003399;
    white-space: nowrap;
}

.card-tag-trainer {
    font-size: 8px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    background-color: #dde0e4;
    color: #111111;
    white-space: nowrap;
}

.card-tag-energy {
    font-size: 8px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    background-color: #b3d9f7;
    color: #0a3d6b;
    white-space: nowrap;
}

.card-type-pill {
    font-size: 8px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}

/* On-card Special Condition pills (Active Pokémon only). Same pill shape as the
   game log; colors are single-sourced with the log (the .card-cond-pill.cond-*
   selectors are merged into the log condition rules near the top of this file). */
.card-cond-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.5;
    white-space: nowrap;
}
/* Scans ON: pills overlay the scan, centered, stacked above it. */
.card-status-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;                 /* above the scan layer (z-index 5) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;       /* display-only — the card stays clickable */
}
/* Scans OFF: pills sit inline on the text card, where the old status text was. */
.card-status-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}

.card-energy-pips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}

/* Type pill colors — shared between in-game cards and deck builder */
.ctype-colorless  { background-color: #cccccc; color: #000; }
.ctype-grass      { background-color: #22AA64; color: #fff; }
.ctype-fire       { background-color: #ff4422; color: #fff; }
.ctype-water      { background-color: #3370ff; color: #fff; }
.ctype-lightning  { background-color: #ffdd00; color: #000; }
.ctype-psychic    { background-color: #7b1fa2; color: #fff; }
.ctype-fighting   { background-color: #C87744; color: #fff; }
.ctype-darkness   { background-color: #212121; color: #fff; }
.ctype-metal      { background-color: #607d8b; color: #fff; }
.ctype-trainer    { background-color: #1565c0; color: #fff; }
/* Type pill colors are defined in the .ctype-* rules above, shared
   between deck builder mini cards and in-game cards. */

/* ─── CARD DISPLAY PANEL CONTENTS ────────────────── */

/* Name row: name left, HP right */
.display-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.display-name {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.display-hp {
    font-size: 13px;
    color: #aaddff;
    font-weight: bold;
    flex-shrink: 0;
}

/* Card type tag + energy type pill row */
.display-tag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.display-card-tag {
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
}

.display-tag-pokemon { background-color: #f9a825; color: #003399; }
.display-tag-trainer { background-color: #dde0e4; color: #111111; }
.display-tag-energy  { background-color: #b3d9f7; color: #0a3d6b; }

/* Type pill inside display frame */
.display-type-pill {
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
}

/* Stage / energy class line */
.display-stage {
    font-size: 12px;
    color: #ffcc88;
    text-align: left;
}

.display-set {
    font-size: 11px;
    color: #888;
    text-align: center;
}

.display-divider {
    height: 1px;
    background-color: #444;
    margin: 2px 0;
    flex-shrink: 0;
}

.display-power-label {
    font-size: 10px;
    font-weight: bold;
    color: #ff4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.display-move {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Attack name left, damage right */
.display-move-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.display-move-name {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
}

.display-move-cost {
    font-size: 11px;
    color: #aaddff;
}

.display-move-damage {
    font-size: 20px;
    color: #ff9966;
    font-weight: bold;
    flex-shrink: 0;
    line-height: 1;
}

.display-move-text {
    font-size: 11px;
    color: #cccccc;
    line-height: 1.4;
}

/* Weakness / Resistance / Retreat rows */
.display-wrc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.display-wrc-label {
    color: #ffcc88;
    min-width: 72px;
    flex-shrink: 0;
}

.display-retreat-pips {
    display: flex;
    gap: 3px;
    align-items: center;
}

/* Inline pip inside card text (attack text, power text, energy text) */
.inline-pip {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 1px;
    flex-shrink: 0;
}

/* Attack cost line pips — match retreat pip size */
.display-move-cost .inline-pip,
.action-cost .inline-pip {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.display-status-line {
    font-size: 11px;
    color: #ff9966;
    margin-top: 2px;
}

/* Set + rarity — bottom right */
.display-set-footer {
    font-size: 10px;
    color: #666;
    text-align: right;
    margin-top: auto;
}


/* ─── TURN CONTROLS ──────────────────────────────── */

/* Phase indicator. Uses the big-button visual format (padding/radius/bold/
   letter-spacing) but is dark gray and deliberately NOT a button — no border
   accent color, no cursor/hover — so it reads as a status chip, not an action. */
#turn-controls {
    position: fixed;
    top: 50%;
    left: 390px;
    transform: translateY(-50%);
    z-index: 100;
    background-color: #1a1a1a;
    border: 2px solid #4a4a4a;
    border-radius: 6px;
    padding: 10px 28px;
}

#phase-display {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #d0d0d0;
}

/* ─── CARD GLOWS ──────────────────────────────────── */

.glow-passive {
    box-shadow: 0 0 8px 3px rgba(255, 220, 120, 0.7);
    border-color: rgba(255, 220, 120, 0.9);
}

.glow-targets {
    box-shadow: 0 0 10px 4px rgba(50, 100, 230, 0.8);
    border-color: rgba(50, 100, 230, 0.9);
}

.glow-selected {
    /* Box-shadow divided by 1.08 so that after transform: scale(1.08)
       magnifies it, the rendered glow matches the other states' 10px/4px. */
    box-shadow: 0 0 9.3px 3.7px rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.08);
    z-index: 10;
    position: relative;
}

/* ─── ENERGY PIPS ─────────────────────────────────── */

.energy-pip {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* Energy-symbol disc art is painted as a background OVER each pip's fallback
   color (set inline per-type); a missing or not-yet-loaded PNG simply shows the
   colored dot underneath — no broken-image glyph. The disc is square art in a
   circular (border-radius:50%) box, so `cover` fills it cleanly. Single source:
   energyPipArt()/energySymbolSrc() in rendering.js. */
.energy-pip,
.retreat-pip,
.inline-pip,
.log-energy-pip,
.db-energy-pip {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ─── ACTION MENU ─────────────────────────────────── */

.action-menu {
    position: fixed;
    z-index: 1000;
    background-color: #0f1f3d;
    border: 1px solid #4488cc;
    border-radius: 10px;
    padding: 12px;
    min-width: 300px;
    box-shadow: 0 0 20px rgba(68, 136, 204, 0.4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-menu.hidden {
    display: none;
}

.action-menu-title {
    font-size: 13px;
    font-weight: bold;
    color: #aaccff;
    text-align: center;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #334466;
}

/* Action-menu header block: name + HP row, status beneath, separated from
   the body by a bottom border. (.action-menu-title above is a shared picker
   title used elsewhere and is intentionally left untouched.) */
.action-menu-head {
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #334466;
}

.action-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.action-menu-name {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.action-menu-hp {
    font-size: 13px;
    font-weight: bold;
    color: #aaddff;
    white-space: nowrap;
}
/* HP color band — mirrors the in-play card bands: blue above half, orange
   at/below half, red at 10. Healthy blue (#aaddff) matches the display-area HP. */
.action-menu-hp.hp-healthy  { color: #aaddff; }
.action-menu-hp.hp-low      { color: #ffaa44; }
.action-menu-hp.hp-critical { color: #ff5555; }

.action-menu-status {
    font-size: 11px;
    color: #ff9966;
    text-align: center;
    margin-top: 5px;
}

/* Stage / Evolves-from (left) + type pill (right), under the name/HP row.
   Mirrors the display panel's header; stage text colour matches .display-stage. */
.action-menu-subhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
}
.action-menu-stage {
    font-size: 12px;
    color: #ffcc88;
}

/* Weakness | Resistance — two equal columns, each left-aligned, with the
   divider centered between them. */
.action-menu-wr {
    display: flex;
    align-items: baseline;
    font-size: 11px;
    color: #cdd9ee;
    padding: 2px 0;
    line-height: 1.8;
}

.action-menu-wr-half {
    flex: 1;
    text-align: left;
}

.action-menu-wr-sep {
    flex-shrink: 0;
    color: #44597a;
    margin: 0 8px;
}

/* Effects line — left-aligned. */
.action-menu-effects {
    font-size: 11px;
    color: #cdd9ee;
    text-align: left;
    padding: 2px 0;
    line-height: 1.8;
}

.action-menu-info-label {
    color: #8aa6d0;
    font-weight: bold;
}

.action-menu-dash {
    color: #8aa6d0;
}

.action-section-header {
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 2px 2px 2px;
}

.action-section-header-red {
    color: #ff4444;
}

.action-section-divider {
    height: 1px;
    background-color: #334466;
    margin: 4px 0;
}

.action-row {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    gap: 3px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    transition: background-color 0.15s;
}

.action-row:hover:not(.action-disabled) {
    background-color: rgba(68, 136, 204, 0.2);
    border-color: #4488cc;
}

.action-row.action-disabled {
    opacity: 0.35;
    cursor: default;
}

/* Name and damage on the same line */
.action-row-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    width: 100%;
}

.action-name {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    flex: 1;
}

.action-cost {
    font-size: 10px;
    color: #88aacc;
}

.action-move-text {
    font-size: 10px;
    color: #aaaacc;
    line-height: 1.4;
}

.action-damage {
    font-size: 20px;
    font-weight: bold;
    color: #ff9966;
    flex-shrink: 0;
    text-align: right;
    line-height: 1;
}

.action-disabled .action-name {
    color: #aaaaaa;
}

.action-disabled .action-damage {
    color: #888888;
}

/* ─── RETREAT ENERGY MENU ─────────────────────────── */

.retreat-cost-display {
    font-size: 11px;
    color: #88aacc;
    text-align: center;
    margin-bottom: 6px;
}

#retreat-energy-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.retreat-energy-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    transition: background-color 0.15s;
}

.retreat-energy-row:hover:not(.retreat-energy-disabled) {
    background-color: rgba(68, 136, 204, 0.2);
    border-color: #4488cc;
}

.retreat-energy-selected {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.retreat-energy-selected .retreat-energy-name {
    color: #ffffff;
    font-weight: bold;
}

.retreat-energy-disabled {
    opacity: 0.35;
    cursor: default;
}

.retreat-energy-name {
    font-size: 12px;
    color: #ffffff;
}

.retreat-energy-pips {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
}

.retreat-pip {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.retreat-confirm {
    width: auto;            /* size to the label, not the full modal width */
    align-self: center;     /* override the action-menu's stretch; center it */
    padding: 8px 28px;
    border-radius: 6px;
    border: 1px solid #4488cc;
    background-color: #0f3460;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.retreat-confirm:hover:not(:disabled) {
    background-color: #1a4a7a;
}

.retreat-confirm:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Yes/No prompt: buttons side by side, centered. Yes = green, No = red,
   reusing the established confirm-green and forfeit-red palettes. */
.yes-no-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.retreat-confirm.yes-no-yes {
    background-color: #14532d;
    border-color: #3fae5a;
}

.retreat-confirm.yes-no-yes:hover:not(:disabled) {
    background-color: #1b6e3a;
    border-color: #5fd07a;
}

.retreat-confirm.yes-no-no {
    background-color: #5a1a1a;
    border-color: #7a3333;
}

.retreat-confirm.yes-no-no:hover:not(:disabled) {
    background-color: #8a2a2a;
    border-color: #c04444;
}

/* ─── PILE COUNT ──────────────────────────────────── */
/* Canonical .pile-count lives in the PILES section above (13px bold, shared
   with the hand counter). A duplicate here previously redefined it to 10px and
   silently won on cascade order — removed so deck/discard counts match the
   hand count. */

/* ─── KNOCKOUT RESOLUTION GLOW ───────────────────── */

.glow-knockout {
    box-shadow: 0 0 12px 5px rgba(255, 60, 60, 0.8);
    border-color: rgba(255, 60, 60, 0.9);
}

/* State 2: Mandatory choice — cyan — "Pick one (or more) before you can proceed" */
.glow-mandatory {
    box-shadow: 0 0 10px 4px rgba(80, 200, 255, 0.8);
    border-color: rgba(80, 200, 255, 0.9);
}

/* State 4: Valid alts — gray — "You could have picked these instead; cancel to go back" */
.glow-valid-alts {
    box-shadow: 0 0 8px 3px rgba(180, 180, 180, 0.6);
    border-color: rgba(180, 180, 180, 0.7);
}

/* State 7: Draw — neon green — "Draw your card for the turn" */
.glow-draw {
    box-shadow: 0 0 10px 4px rgba(160, 255, 0, 0.85);
    border-color: rgba(160, 255, 0, 0.95);
}

/* State 8: Search — magenta — "Dig through this pile to find something" */
.glow-search {
    box-shadow: 0 0 10px 4px rgba(225, 90, 200, 0.8);
    border-color: rgba(225, 90, 200, 0.9);
}
/* State 10: Marked — orange — "You locked this card in; it's carried into the
   step you're now working on, even though another selection is being made."
   Non-interactive (you can't click it; ESC steps back to re-pick it). No scale,
   unlike glow-selected, so it reads as a held selection rather than the active one.
   Used by Pokémon Breeder (Stage 2 held while picking the Basic) and Pokémon
   Trader (hand Pokémon held while picking the deck Pokémon). */
.glow-marked {
    box-shadow: 0 0 10px 4px rgba(255, 150, 40, 0.8);
    border-color: rgba(255, 150, 40, 0.9);
}
/* ─── STATUS CONDITIONS ───────────────────────────── */

.status-paralyzed {
    transform: rotate(90deg);
}

.status-asleep {
    transform: rotate(-90deg);
}

.status-confused {
    transform: rotate(180deg);
}

/* ─── COIN FLIP MODAL ─────────────────────────────── */

.yes-no-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000;
}

.yes-no-modal.hidden {
    display: none;
}

/* Confirm modal panel — matches the house modal style (centered title +
   body, generous padding). Default border is the standard blue; the
   `.danger` modifier turns the border and title red for destructive
   confirms like Forfeit, reusing Sudden Death's red so it reads as
   "this is a big deal." */
.yes-no-panel {
    background-color: #16213e;
    border: 2px solid #4488cc;
    border-radius: 12px;
    padding: 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.yes-no-panel.danger {
    border-color: #e74c3c;
}

.yes-no-title {
    font-size: 20px;
    font-weight: bold;
    color: #aaccff;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.3;
}

.yes-no-panel.danger .yes-no-title {
    color: #e74c3c;
}

.yes-no-body {
    font-size: 14px;
    color: #b8c4d4;
    text-align: center;
    line-height: 1.4;
}

.yes-no-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.yes-no-buttons button {
    flex: 1;
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #444;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
}

.yes-no-buttons button:hover {
    background-color: #1a5a9a;
    border-color: #4488cc;
}

/* ── Export deck name modal ─────────────────────────────── */
.export-name-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.export-name-modal.hidden {
    display: none;
}

.export-name-panel {
    background: #16213e;
    border: 1px solid #4488cc;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.export-name-label {
    font-size: 14px;
    font-weight: bold;
    color: #aaccff;
    text-align: center;
}

.export-name-input {
    background-color: #0f1830;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}

.export-name-input:focus {
    outline: none;
    border-color: #4488cc;
}

.export-name-buttons {
    display: flex;
    gap: 8px;
}

.export-name-buttons button {
    flex: 1;
    border: 1px solid #444;
    padding: 9px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

#export-name-save-btn {
    background-color: #1a5a2e;
    color: #ffffff;
}

#export-name-save-btn:hover {
    background-color: #228040;
    border-color: #4caf50;
}

#export-name-cancel-btn {
    background-color: #0f3460;
    color: #ffffff;
}

#export-name-cancel-btn:hover {
    background-color: #1a4a7a;
    border-color: #4488cc;
}

.coin-flip-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Deliberate exception to the left:375px modal convention. Every other
       modal leaves the display panel uncovered because they're interactive
       and the panel stays live as a hover/inspect surface. The coin flip is
       the only watch-only modal — nothing to inspect — so it takes the whole
       screen: removes the seam at x=375 and frames the flip as a pause-and-
       watch beat. z-index must clear the display panel (#card-display-panel,
       z-index:5000) so the overlay actually covers it. */
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5500;
}

.coin-flip-modal.hidden {
    display: none;
}

.coin-flip-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Coin-flip readout: three stacked lines — source (the card), effect (the
   attack/Power/condition causing the flip), and count ("Flip X of N", only
   when more than one). Empty lines are blanked by flipCoin and collapse via
   the :empty rule, so any subset stays neatly centered above the coin. */
.coin-flip-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.coin-flip-source {
    font-size: 16px;
    font-weight: bold;
    color: #e8f0ff;
    letter-spacing: 0.03em;
}

.coin-flip-effect {
    font-size: 13px;
    color: #aaccff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.coin-flip-count {
    font-size: 11px;
    color: #8aa0c8;
    letter-spacing: 0.05em;
}

.coin-flip-source:empty,
.coin-flip-effect:empty,
.coin-flip-count:empty {
    display: none;
}

/* The coin itself — a 3D-flipping circle */
.coin {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
}

.coin.spinning {
    animation: coinSpin 1.4s cubic-bezier(0.4, 0, 1, 1) infinite;
}

.coin.landing-heads {
    animation: coinLandHeads 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.coin.landing-tails {
    animation: coinLandTails 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes coinSpin {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes coinLandHeads {
    0%   { transform: rotateY(var(--spin-start)); }
    100% { transform: rotateY(0deg); }
}

@keyframes coinLandTails {
    0%   { transform: rotateY(var(--spin-start)); }
    100% { transform: rotateY(180deg); }
}

@keyframes coinFlipFull {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(var(--total-deg)); }
}

.coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.coin-heads {
    background: radial-gradient(circle at 35% 35%, #ffe066, #c8a200);
    color: #7a5800;
    box-shadow: 0 0 20px rgba(255, 210, 0, 0.5);
}

.coin-tails {
    background: radial-gradient(circle at 35% 35%, #d0d0d0, #888);
    color: #444;
    box-shadow: 0 0 20px rgba(180, 180, 180, 0.4);
    transform: rotateY(180deg);
}

.coin-flip-result {
    font-size: 22px;
    font-weight: bold;
    min-height: 32px;
    transition: opacity 0.3s;
}

.coin-flip-result.heads {
    color: #ffe066;
}

.coin-flip-result.tails {
    color: #aaaaaa;
}

/* ─── CONDITION BADGES ────────────────────────────── */

.card {
    position: relative;
    overflow: visible;
}

.condition-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    z-index: 20;
    pointer-events: none;
}

.condition-badge-poison {
    background-color: #7b2fa8;
    box-shadow: 0 0 6px rgba(123, 47, 168, 0.8);
    color: #ffffff;
}
/* ─── START SCREEN ─────────────────────────────────── */

/* ─── START SCREEN ─────────────────────────────────── */

.start-screen {
    position: fixed;
    inset: 0;
    background-color: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.start-panel {
    background-color: #16213e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    min-width: 580px;
}

.start-title {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 3px;
    width: 100%;
    text-align: center;
    text-indent: 3px;   /* cancel the trailing letter-spacing so the text optically centers */
}

.start-subtitle {
    font-size: 14px;
    color: #aaaaaa;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -16px;
}

.start-players {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    justify-content: center;
}

.start-player-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.start-player-heading {
    font-size: 13px;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.start-vs {
    font-size: 22px;
    font-weight: bold;
    color: #e94560;
    padding-bottom: 20px;
}

.start-name-input {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 15px;
    text-align: center;
    width: 100%;
    outline: none;
}

.start-name-input:focus {
    border-color: #e94560;
}

.start-status {
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
}

.start-status.ready {
    color: #4caf50;
    background-color: rgba(76, 175, 80, 0.12);
}

.start-status.missing {
    color: #888;
    background-color: rgba(255,255,255,0.05);
}

.start-edit-btn {
    background: none;
    border: 1px solid #555;
    color: #aaa;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.start-edit-btn:hover {
    border-color: #e94560;
    color: #ffffff;
}

.start-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.start-actions button {
    color: #ffffff;
    border: 2px solid;            /* border-color set per button */
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background-color 0.15s, border-color 0.15s;
}

.start-actions button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Build Decks — Ready-button blue */
#start-build-btn {
    background-color: #0f3460;
    border-color: #4488cc;
}

#start-build-btn:hover:not(:disabled) {
    background-color: #1a5a9a;
    border-color: #66aaff;
}

/* Play Game — green, same dark-bg + lighter-border format */
#start-play-btn {
    background-color: #14532d;
    border-color: #3fae5a;
}

#start-play-btn:hover:not(:disabled) {
    background-color: #1b6e3a;
    border-color: #5fd07a;
}

/* Play Online — purple, distinct from the local green Play */
#start-online-btn {
    background-color: #3a2a5a;
    border-color: #8a6ad0;
}

#start-online-btn:hover:not(:disabled) {
    background-color: #4d3878;
    border-color: #a888e8;
}

/* ─── ONLINE SUB-PANEL (start screen) ──────────────── */
.online-panel {
    margin-top: 18px;
    padding: 16px 20px;
    background-color: #16213e;
    border: 1px solid #2e3a5e;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 320px;
}

.online-panel-note {
    color: #b8c4e0;
    font-size: 13px;
    text-align: center;
}

.online-panel-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.online-panel button {
    color: #fff;
    background-color: #3a2a5a;
    border: 2px solid #8a6ad0;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background-color 0.15s, border-color 0.15s;
}

.online-panel button:hover {
    background-color: #4d3878;
    border-color: #a888e8;
}

.online-join-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.online-code-input {
    width: 72px;
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid #4a5578;
    background-color: #0f1626;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.online-status {
    color: #8fe28f;
    font-size: 12px;
    min-height: 1.2em;
    text-align: center;
}

/* ─── ONLINE-ONLY START PANEL (single "you" column) ──────────────────
   Replaces the two-player (P1 vs P2) layout. Reuses the shared theme
   (navy panel, red border, purple online buttons). The offline .start-players /
   .start-actions / #start-*-btn / .online-panel rules above are now unused by the
   markup and can be dropped when offline is fully retired. */
.start-panel-solo {
    min-width: 0;
    width: 380px;
    padding: 40px 44px;
    gap: 22px;
}

.start-you {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.start-field-label,
.start-deck-label {
    font-size: 12px;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.start-deck-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #2e3a5e;
    border-radius: 8px;
    margin-top: 6px;
}

.start-deck-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.start-online-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-top: 1px solid #2e3a5e;
    padding-top: 22px;
}

/* Online action buttons — the purple accent, greyed when you're not yet ready. */
.start-online-btn {
    color: #ffffff;
    background-color: #3a2a5a;
    border: 2px solid #8a6ad0;
    padding: 11px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background-color 0.15s, border-color 0.15s;
}

.start-online-btn:hover:not(:disabled) {
    background-color: #4d3878;
    border-color: #a888e8;
}

.start-online-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.start-online-sep {
    text-align: center;
    font-size: 12px;
    color: #7a86a8;
}

/* The join row: the code field grows, the Join button stays its natural width. */
.start-online-block .online-join-row {
    width: 100%;
}

.start-online-block .online-code-input {
    flex: 1 1 auto;
    width: auto;
}

.start-online-join {
    flex: 0 0 auto;
    padding: 11px 22px;
}

/* Gate hint — a soft red so "you can't play yet, and why" reads as a gentle block,
   not an error. Hidden once you have a name + a legal deck. */
.start-online-hint {
    text-align: center;
    font-size: 12px;
    color: #d69090;
    min-height: 1.2em;
}

/* ─── DECK BUILDER SCREEN ──────────────────────────── */

#deck-builder-screen {
    position: fixed;
    inset: 0;
    background-color: #1a1a2e;
    display: flex;
    flex-direction: row;
    z-index: 200;
    overflow: hidden;
}

/* Left panel: card zoom display */
#db-display-panel {
    width: 375px;
    min-width: 375px;
    background-color: #16213e;
    border-right: 2px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    gap: 8px;
}

#db-display-frame {
    width: 338px;
    height: 473px;
    min-height: 473px;
    position: relative;      /* positioning context for the bare-scan overlay */
    background-color: #1e2030;   /* blank: same dark-gray fill as the in-game display frame */
    border: 2px dashed #888;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    overflow-y: auto;
    flex-shrink: 0;
}

#db-display-frame.occupied {
    background-color: #0f3460;   /* occupied: blue, matching the game's occupied frame */
    border-style: solid;
}

/* Center: header + filters + card grid */
#db-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

#db-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background-color: #16213e;
    border-bottom: 2px solid #333;
    flex-shrink: 0;
}

#db-player-label {
    font-size: 14px;
    color: #ccc;
}

#db-player-label strong {
    color: #ffffff;
    font-size: 15px;
}

#db-done-btn {
    background-color: #14532d;
    color: #ffffff;
    border: 2px solid #3fae5a;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background-color 0.15s, border-color 0.15s;
}

#db-done-btn:hover:not(:disabled) {
    background-color: #1b6e3a;
    border-color: #5fd07a;
}

#db-done-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Filters area */
#db-filters {
    padding: 8px 12px;
    background-color: #1a1a2e;
    border-bottom: 1px solid #2a2a4a;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.db-filter-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.db-filter-row-disabled .db-filter-label {
    opacity: 0.4;
}

.db-filter-label {
    font-size: 11px;
    color: #888;
    min-width: 90px;
    text-align: right;
    flex-shrink: 0;
}

.db-filter-btn {
    background-color: #16213e;
    color: #aaaaaa;
    border: 1px solid #444;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.1s;
    white-space: nowrap;
}

.db-filter-btn:hover:not(:disabled):not(.disabled) {
    border-color: #e94560;
    color: #ffffff;
}

.db-filter-btn.active {
    background-color: #e94560;
    border-color: #e94560;
    color: #ffffff;
}

.db-filter-btn.disabled,
.db-filter-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.db-filter-btn-sm {
    padding: 2px 7px;
    font-size: 10px;
}

/* ── Pokémon Type pill filter buttons ───────────────────────
   Use the existing ctype-* background colors. Inactive = full
   color at low opacity so the color is still recognizable.
   Active = full opacity with a white outline ring. */
.db-type-pill-btn {
    /* ctype-* class supplies background-color and color */
    border: 2px solid transparent;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.25;
    transition: opacity 0.1s, border-color 0.1s;
    white-space: nowrap;
}

.db-type-pill-btn:hover:not(:disabled):not(.disabled) {
    opacity: 0.6;
}

.db-type-pill-btn.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.7);
}

.db-type-pill-btn.disabled,
.db-type-pill-btn:disabled {
    opacity: 0.1;
    cursor: default;
}

/* ── Energy Type filter buttons (pip + name) ────────────────
   Plain dark button with a small colored circle before the name.
   Inactive = low opacity on the whole button.
   Active = full opacity, pink highlight border (matches other
   active filter buttons). */
.db-energy-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #16213e;
    color: #aaaaaa;
    border: 1px solid #444;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.1s, border-color 0.1s, color 0.1s;
    white-space: nowrap;
}

.db-energy-type-btn:hover:not(:disabled):not(.disabled) {
    opacity: 0.75;
    border-color: #e94560;
    color: #ffffff;
}

.db-energy-type-btn.active {
    opacity: 1;
    border-color: #e94560;
    color: #ffffff;
}

.db-energy-type-btn.disabled,
.db-energy-type-btn:disabled {
    opacity: 0.15;
    cursor: default;
}

.db-energy-pip {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Card grid */
#db-card-grid-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
}

#db-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 160px);
    gap: 8px;
}

.db-empty-message {
    color: #666;
    font-size: 13px;
    padding: 24px;
    text-align: center;
    grid-column: 1 / -1;
}

/* Individual card in the browser — 2× game card size */
.db-card {
    position: relative;
    cursor: pointer;
    width: 160px;
    height: 224px;
    min-width: 160px;
    min-height: 224px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #666;
    transition: border-color 0.1s, transform 0.1s;
    background-color: #0f3460;
    box-sizing: border-box;
}

.db-card:hover:not(.db-card-disabled) {
    border-color: #e94560;
    transform: translateY(-2px);
    z-index: 1;
}

.db-card-disabled {
    opacity: 0.45;
    cursor: default;
}

.mini-card-inner {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Card-scan overlay for the deck-builder grid mini-cards. Mirrors the board's
   .card-scan: absolute background image over the text face. No own radius — the
   .db-card clips it via overflow:hidden to the correct inner curve (its 8px
   outer radius minus the 2px border). Giving the scan its own 8px radius left a
   thin crescent of the blue .db-card background showing at each corner.
   z-index:1 sits above the text face; the .db-card-count badge is bumped to
   z-index:2 to stay on top. */
.mini-card-scan {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    pointer-events: none;
}

.mini-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
}

.mini-card-name {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.2;
    flex: 1;
    word-break: break-word;
}

.mini-card-hp {
    font-size: 11px;
    color: #aaddff;
    font-weight: bold;
    flex-shrink: 0;
}

/* Tag + type pill on the same row */
.mini-card-tag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

/* "Pokémon" tag — yellow background, blue text */
.mini-card-tag-pokemon {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    background-color: #f9a825;
    color: #003399;
    align-self: flex-start;
}

/* "Trainer" tag — light gray background, black text */
.mini-card-tag-trainer {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    background-color: #dde0e4;
    color: #111111;
    align-self: flex-start;
}

/* "Energy" tag — light pink background, dark pink text */
.mini-card-tag-energy {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    background-color: #b3d9f7;
    color: #0a3d6b;
    align-self: flex-start;
}

/* Pokémon type color pill (e.g. "Fire", "Water") */
.mini-card-type {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    font-weight: bold;
    align-self: flex-start;
}

.mini-card-stage {
    font-size: 10px;
    color: #aaa;
}

.mini-card-set {
    font-size: 9px;
    color: #666;
    margin-top: auto;
    line-height: 1.2;
}

/* Pokémon type color pills */
/* Type pill colors are defined in the .ctype-* rules above, shared
   between deck builder mini cards and in-game cards. */

/* Count badge (number of copies in deck) */
.db-card-count {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background-color: #e94560;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.4;
    z-index: 2;
}

/* Right panel: deck slots */
#db-deck-panel {
    width: 356px;
    min-width: 356px;
    background-color: #16213e;
    border-left: 2px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#db-deck-header {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    gap: 4px;
}

.db-deck-header-row {
    display: flex;
    align-items: center;
}

.db-deck-header-row > *:nth-child(1) {
    flex: 1;
    text-align: left;
}

.db-deck-header-row > *:nth-child(2) {
    flex: 1;
    text-align: center;
}

.db-deck-header-row > *:nth-child(3) {
    flex: 1;
    text-align: right;
}

.db-deck-type-row span {
    font-size: 10px;
    color: #778899;
}

#db-deck-count {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.db-validity-ok {
    font-size: 12px;
    color: #4caf50;
}

.db-validity-error {
    font-size: 11px;
    color: #e94560;
}

/* ── Export / Load deck row ─────────────────────────────── */
.db-deck-io-row {
    gap: 8px;
    margin-top: 6px;
}

/* Override the generic nth-child flex rules for this row — we want the
   buttons sized to content and left-aligned, not stretched into thirds. */
.db-deck-io-row > * {
    flex: 0 0 auto !important;
    text-align: left !important;
}

#db-export-btn,
#db-load-btn {
    background-color: #1a3a6e;
    color: #aabbcc;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

#db-export-btn:hover:not(:disabled),
#db-load-btn:hover {
    background-color: #2255a0;
    color: #ffffff;
}

#db-export-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.db-loaded-label {
    font-size: 10px;
    color: #8899aa;
    font-style: italic;
    margin-top: 4px;
}

#db-organize-btn {
    background-color: #1a3a6e;
    color: #aabbcc;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

#db-organize-btn:hover {
    background-color: #2255a0;
    color: #ffffff;
}

#db-reset-filters-btn {
    background-color: #1a3a6e;
    color: #aabbcc;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    margin-left: auto;
}

#db-reset-filters-btn:hover {
    background-color: #2255a0;
    color: #ffffff;
}

#db-toggle-filters-btn {
    background-color: #1a3a6e;
    color: #aabbcc;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    margin-left: auto;
}

#db-toggle-filters-btn:hover {
    background-color: #2255a0;
    color: #ffffff;
}

.db-search-input {
    background-color: #0f1830;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 11px;
    width: 280px;
    max-width: 50%;
}

.db-search-input::placeholder {
    color: #667;
}

.db-search-input:focus {
    outline: none;
    border-color: #e94560;
}

#db-clear-search-btn {
    background-color: #1a3a6e;
    color: #aabbcc;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    margin-left: 6px;
}

#db-clear-search-btn:hover {
    background-color: #2255a0;
    color: #ffffff;
}

#db-deck-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(4, 80px);
    gap: 4px;
    padding: 8px;
    justify-content: center;
    align-content: start;
}

/* Deck panel footer — pinned at the bottom, separated from the grid so the
   destructive Clear Cards button isn't near the other controls. */
#db-deck-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid #333;
}

#db-clear-cards-btn {
    background-color: #5a1a1a;
    color: #ffcccc;
    border: 1px solid #7a3333;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

#db-clear-cards-btn:hover {
    background-color: #8a2a2a;
    color: #ffffff;
    border-color: #c04444;
}

/* Deck slots — same dimensions as game cards */
.db-deck-slot {
    width: 80px;
    height: 112px;
    min-width: 80px;
    min-height: 112px;
    position: relative;      /* positioning context for the bare-scan overlay */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

.db-deck-slot.filled {
    background-color: #0f3460;
    border: 2px solid #2255a0;
    cursor: pointer;
    transition: border-color 0.1s;
}

.db-deck-slot.filled:hover {
    border-color: #e94560;
    background-color: #1a3a6e;
}

.db-deck-slot.empty {
    background-color: rgba(255,255,255,0.03);
    border: 2px dashed #2a2a4a;
}

.db-deck-slot-name {
    color: #ffffff;
    font-weight: bold;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

.db-deck-slot-set {
    color: #666;
    font-size: 7px;
    margin-top: 3px;
    text-align: center;
    line-height: 1.2;
}

.db-deck-slot-empty-label {
    color: #2a2a4a;
    font-size: 11px;
}

/* ─── WIN SCREEN ───────────────────────────────────── */

.win-screen {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000;
}

.win-screen.hidden {
    display: none;
}

.win-panel {
    background-color: #16213e;
    border: 2px solid #f5a623;
    border-radius: 12px;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.win-title {
    font-size: 28px;
    font-weight: bold;
    color: #f5a623;
    letter-spacing: 2px;
}

.win-reason {
    font-size: 15px;
    color: #aaaaaa;
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.4;
    white-space: pre-line; /* render \n in the reason as a line break */
}

.win-panel button {
    background-color: #f5a623;
    color: #000000;
    border: none;
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 1px;
    font-weight: bold;
}

.win-panel button:hover {
    background-color: #d4891a;
}

/* ─── SUDDEN DEATH MODAL ───────────────────────────────── */

.sudden-death-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000;
}

.sudden-death-modal.hidden {
    display: none;
}

.sudden-death-panel {
    background-color: #16213e;
    border: 2px solid #e74c3c;
    border-radius: 12px;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sudden-death-title {
    font-size: 32px;
    font-weight: bold;
    color: #e74c3c;
    letter-spacing: 3px;
}

.sudden-death-reason {
    font-size: 15px;
    color: #aaaaaa;
    margin-bottom: 8px;
    text-align: center;
    max-width: 420px;
    line-height: 1.4;
    white-space: pre-line; /* render \n between the two sentences as a line break */
}

.sudden-death-status {
    font-size: 13px;
    color: #7fbf7f;             /* soft green — the "opponent is ready" cue */
    margin-bottom: 8px;
    text-align: center;
    min-height: 16px;           /* reserve the line so the panel doesn't jump when it fills/empties */
    letter-spacing: 0.3px;
}

.sudden-death-panel button {
    background-color: #e74c3c;
    color: #ffffff;
    border: none;
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 1px;
    font-weight: bold;
}

.sudden-death-panel button:hover {
    background-color: #c0392b;
}

/* Once you've pressed Okay online, the button greys out and reads "Waiting for your opponent." */
.sudden-death-panel button:disabled,
.sudden-death-panel button:disabled:hover {
    background-color: #555555;
    color: #cccccc;
    cursor: default;
    letter-spacing: 0.3px;
}

/* ─── SETUP PHASE UI ───────────────────────────────── */

/* Primary action button — "Ready" during setup, "End Turn" during play.
   Same blue style as the old Ready button. Player (#primary-btn-player) sits
   bottom-right, opposite the bottom-left Forfeit; opponent
   (.primary-action-top) sits top-right (temporary until online). */
.primary-action-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: #0f3460;
    color: #ffffff;
    border: 2px solid #4488cc;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    z-index: 150;
    transition: background-color 0.15s, border-color 0.15s;
}

.primary-action-btn:hover:not(:disabled) {
    background-color: #1a5a9a;
    border-color: #66aaff;
}

.primary-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.primary-action-btn.primary-action-top {
    top: 24px;
    bottom: auto;
}

.primary-action-btn.hidden {
    display: none;
}

/* Forfeit button — bottom-right, the spot the Ready button used to
   occupy. Red, matching the deck builder's Clear Cards button.
   Bottom-LEFT, under the player's prize cards — a quiet corner of the
   board, away from the deck/discard which see a lot of clicks. The board
   begins right after the 375px display panel, so left:390px sits the
   button just inside the prizes column. */
.forfeit-btn {
    position: fixed;
    bottom: 24px;
    left: 390px;
    background-color: #5a1a1a;
    color: #ffcccc;
    border: 2px solid #7a3333;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    z-index: 150;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.forfeit-btn:hover {
    background-color: #8a2a2a;
    color: #ffffff;
    border-color: #c04444;
}

.forfeit-btn.hidden {
    display: none;
}

/* Card-scans toggle — top-left of the board, just right of the 375px
   display column (left:390px, mirroring the bottom-left Forfeit). Quiet
   slate look matching the Organize Hand button; dims when scans are off. */
.scan-toggle-btn {
    position: fixed;
    top: 24px;
    left: 390px;
    background-color: #16213e;
    color: #cfd8e8;
    border: 1px solid #3a4a6a;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 10px;
    line-height: 1.2;
    cursor: pointer;
    z-index: 150;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.scan-toggle-btn:hover {
    background-color: #1d2b50;
    border-color: #4a5f8a;
}
.scan-toggle-btn.scans-off {
    color: #7f8aa0;
    border-color: #2c3a55;
}
.scan-toggle-btn.scans-off:hover {
    color: #cfd8e8;
    border-color: #3a4a6a;
}

/* Energy Symbols toggle — identical look to Card Scans, parked one row down. */
.symbol-toggle-btn {
    position: fixed;
    top: 56px;
    left: 390px;
    background-color: #16213e;
    color: #cfd8e8;
    border: 1px solid #3a4a6a;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 10px;
    line-height: 1.2;
    cursor: pointer;
    z-index: 150;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.symbol-toggle-btn:hover {
    background-color: #1d2b50;
    border-color: #4a5f8a;
}
.symbol-toggle-btn.symbols-off {
    color: #7f8aa0;
    border-color: #2c3a55;
}
.symbol-toggle-btn.symbols-off:hover {
    color: #cfd8e8;
    border-color: #3a4a6a;
}

/* Control lock toggle (dev) — same look as the two above, parked one more row down so it
   doesn't sit on top of the Energy Symbols button. Only the vertical position differs; the
   #id overrides the .symbol-toggle-btn class's top offset. */
#controls-lock-btn {
    top: 88px;
}

.mulligan-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 375px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 180;
}

.mulligan-modal.hidden {
    display: none;
}

.mulligan-panel {
    background-color: #16213e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: calc(100vw - 395px);
}

.mulligan-panel.mulligan-panel-compact {
    width: fit-content;
    min-width: 0;
    padding: 24px 32px;
    border-color: #aaaaaa;
}

.mulligan-title {
    font-size: 22px;
    font-weight: bold;
    color: #e94560;
}

.mulligan-body {
    font-size: 14px;
    color: #cccccc;
    text-align: center;
}

.mulligan-hand-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 12px 0;
}

.mulligan-panel button {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #444;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
}

.mulligan-panel button:hover {
    background-color: #1a4a7a;
}
/* ─── LASS MODAL ─────────────────────────────────────── */

.lass-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 375px;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 180;
}

.lass-modal.hidden {
    display: none;
}

.lass-panel {
    background-color: #16213e;
    border: 2px solid #aaaaaa;
    border-radius: 12px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: calc(100vw - 395px);
    max-height: 88vh;
    overflow-y: auto;
}

.lass-title {
    font-size: 22px;
    font-weight: bold;
    color: #aaaaaa;
}

.lass-body {
    font-size: 13px;
    color: #cccccc;
    text-align: center;
}

.lass-player-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.lass-player-label {
    font-size: 13px;
    font-weight: bold;
    color: #aaaacc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.lass-section-divider {
    width: 100%;
    height: 1px;
    background-color: #334466;
}

.lass-hand-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    min-height: 40px;
}

/* Informational highlight — marks cards that are affected by an action
   but are not interactable. Uses outline instead of box-shadow to stay
   visually distinct from the glow interaction system. */
.highlight-affected {
    outline: 2px solid #e94560;
    outline-offset: 3px;
}

.lass-panel button {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #444;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
}

.lass-panel button:hover {
    background-color: #1a4a7a;
}

/* Two-sided acknowledgment row: Okay button + the per-viewer status
   ("Waiting for your opponent." beside a greyed button, or a green check +
   "Your opponent is ready…" beside a still-active button). */
.lass-button-row {
    display: flex;
    flex-direction: column;   /* status sits BELOW the Okay button, so the button never shifts */
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Overrides the base button's own margin-top (it now lives inside the row). */
.lass-button-row button {
    margin-top: 0;
}

/* Greyed-out Okay once this player has pressed it — non-interactive. */
.lass-panel button:disabled,
.lass-panel button.lass-btn-waiting {
    background-color: #2a2f45;
    color: #888888;
    border-color: #333;
    cursor: default;
}

.lass-panel button:disabled:hover,
.lass-panel button.lass-btn-waiting:hover {
    background-color: #2a2f45;
}

.lass-status {
    font-size: 12px;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

.lass-status.hidden {
    display: none;
}

/* Green check that precedes "Your opponent is ready…". */
.lass-status .lass-check {
    color: #4caf50;
    font-weight: bold;
    font-size: 15px;
}

/* ─── FIRST-PLAYER CHOICE MODAL (winner-chooses) ─────── */
/* Mirrors the Lass modal styling; left:375px keeps the log panel visible. */
.fp-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Full-screen, matching .coin-flip-modal — a deliberate second exception to the
       left:375px modal convention. Like the coin flip, the who-goes-first choice is a
       watch-and-decide beat with nothing to inspect (setup is done, both boards are
       still face-down, the choice is blind), and it lands in the SAME visual moment as
       the flip that precedes it — so it takes the whole screen for continuity. z-index
       clears the display panel (#card-display-panel, z-index:5000), same as the flip. */
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5500;
}

.fp-modal.hidden {
    display: none;
}

.fp-panel {
    background-color: #16213e;
    border: 2px solid #aaaaaa;
    border-radius: 12px;
    padding: 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: calc(100vw - 40px);
}

.fp-title {
    font-size: 22px;
    font-weight: bold;
    color: #aaaaaa;
    text-align: center;
}

.fp-body {
    font-size: 14px;
    color: #cccccc;
    text-align: center;
}

.fp-button-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
}

.fp-button-row.hidden {
    display: none;
}

/* Themed modal button, matching the Lass "Okay" / other modal buttons. */
.fp-panel button {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #444;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    min-width: 110px;
}

.fp-panel button:hover:not(:disabled) {
    background-color: #1a4a7a;
}

.fp-panel button:disabled,
.fp-panel button:disabled:hover {
    background-color: #2a2f45;
    color: #888888;
    border-color: #333;
    cursor: default;
}

/* ─── POKEDEX MODAL ──────────────────────────────────── */

.pokedex-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 375px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.pokedex-modal.hidden {
    display: none;
}

.pokedex-panel {
    background-color: #16213e;
    border: 2px solid #4a90d9;
    border-radius: 12px;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: calc(100vw - 395px);
    width: fit-content;
}

.pokedex-title {
    font-size: 22px;
    font-weight: bold;
    color: #4a90d9;
}

.pokedex-body {
    font-size: 13px;
    color: #cccccc;
    text-align: center;
}

.pokedex-card-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    align-items: flex-end;
    padding: 8px 0;
}

/* Wrapper around each card + its arrows */
.pokedex-card-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pokedex-position-label {
    font-size: 11px;
    color: #888;
    letter-spacing: 0.05em;
}

/* The arrow row sits below the card */
.pokedex-arrow-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    height: 24px; /* always reserve space so cards don't shift */
}

.pokedex-arrow {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #4a90d9;
    border-radius: 4px;
    width: 28px;
    height: 24px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pokedex-arrow:hover {
    background-color: #1a5a9a;
}

.pokedex-arrow.invisible {
    visibility: hidden;
    pointer-events: none;
}

/* Selected card gets a blue highlight border */
.pokedex-card-slot .card.pokedex-selected {
    border-color: #4a90d9;
    box-shadow: 0 0 8px #4a90d9;
}

.pokedex-panel button {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #444;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 4px;
}

.pokedex-panel button:hover {
    background-color: #1a4a7a;
}

/* ─── DISCARD MODAL ──────────────────────────────────── */

.discard-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 375px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.discard-modal.hidden {
    display: none;
}

.discard-panel {
    background-color: #16213e;
    border: 2px solid #aaaaaa;
    border-radius: 12px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: calc(100vw - 395px);
    max-height: 85vh;
}

.discard-modal-title {
    font-size: 20px;
    font-weight: bold;
    color: #cccccc;
}

.discard-modal-body {
    font-size: 13px;
    color: #aaaaaa;
    text-align: center;
    min-height: 16px;
}

.discard-modal-card-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    overflow-y: auto;
    max-height: 420px;
    padding: 8px 4px;
}

.discard-modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.discard-panel button {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #444;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.discard-panel button:hover:not(:disabled) {
    background-color: #1a4a7a;
}

.discard-panel button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Card selected inside discard modal — matches glow-selected white style */
/* Attached-cards inspector — three side-by-side sections (Pokémon / Energy / Trainer), each
   a centered header label above its cards laid out left-to-right (wrapping to a second line
   within the section when loaded — in practice only Energy), with thin VERTICAL dividers
   BETWEEN sections. Mirrors the Lass modal's section styling, kept as its own classes so the
   two modals stay decoupled. Lives inside #discard-modal-card-area (a flex-wrap row). */
.inspect-sections {
    display: flex;
    flex-direction: row;
    align-items: stretch;        /* equal-height columns → full-height dividers */
    justify-content: center;
    gap: 14px;
}
.inspect-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.inspect-section-label {
    font-size: 13px;
    font-weight: bold;
    color: #aaaacc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}
.inspect-section-divider {
    width: 1px;
    align-self: stretch;         /* vertical rule spanning the tallest column */
    background-color: #334466;
}
.inspect-section-row {
    display: flex;
    flex-direction: row;         /* cards left-to-right within the section */
    flex-wrap: wrap;             /* overflow drops to a second line WITHIN this section */
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    /* Cap the row so a loaded section (in practice only Energy) wraps at ~5 tiles per line
       instead of stretching the modal wide. One number to tune the wrap point. */
    max-width: calc(var(--card-w) * 5 + 40px);
}

.discard-modal-card-area .card.discard-selected {
    box-shadow: 0 0 9.3px 3.7px rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.08);
    z-index: 10;
    position: relative;
}

/* Targetable card in discard modal */
/* Targetable card in discard modal — mandatory (no selection yet) */
.discard-modal-card-area .card.glow-mandatory {
    border-color: rgba(80, 200, 255, 0.9);
    box-shadow: 0 0 6px rgba(80, 200, 255, 0.8);
    cursor: pointer;
}

/* Targetable card in discard modal — valid alt (a selection has been made) */
.discard-modal-card-area .card.glow-valid-alts {
    border-color: rgba(180, 180, 180, 0.7);
    box-shadow: 0 0 4px rgba(180, 180, 180, 0.5);
    cursor: pointer;
}

/* Non-targetable card in targeting mode — dimmed */
.discard-modal-card-area .card.discard-dimmed {
    opacity: 0.4;
    cursor: default;
}

.damage-counter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 8px 4px;
}

.damage-counter-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid #666;
    cursor: default;
}

.counter-removing {
    background: #e53935;
    border-color: #ff6659;
    color: white;
}

.counter-staying {
    background: #333;
    border-color: #555;
    color: #888;
}

.damage-counter-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0 8px;
}

.damage-counter-controls button {
    background-color: #0f3460;
    color: #ffffff;
    border: 1px solid #4a90d9;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.damage-counter-controls button:hover:not(:disabled) {
    background-color: #1a5a9a;
}

.damage-counter-controls button:disabled {
    opacity: 0.3;
    cursor: default;
}

.damage-counter-count {
    font-size: 13px;
    min-width: 80px;
    text-align: center;
}