/* ═════════════════════════════════════════════════════════════════
   experience.css — Arena-style layout overrides
   Loaded after game.css. Overrides board layout only;
   card styles, colors, fonts, and effects inherited from game.css.
   ═════════════════════════════════════════════════════════════════ */

/* ── 1. Viewport lock — no page scroll ─────────────────────────── */
html, body {
    height: 100dvh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* Explicit width so the board always spans the full viewport on desktop.
   Without this, the grid inherits "auto" width from its flow context on
   some ultra-wide layouts and collapses to the intrinsic size of its
   narrowest row. */
#board {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
}
body.log-open #board {
    width: calc(100vw - 260px) !important;
    max-width: calc(100vw - 260px) !important;
}
/* Help-rules dock: shrink the board so the side column doesn't overlap
 * the play area. Need to override the 100vw !important rule above. */
body.help-dock-right #board {
    width: calc(100vw - var(--help-dock-width)) !important;
    max-width: calc(100vw - var(--help-dock-width)) !important;
}
body.help-dock-left #board {
    width: calc(100vw - var(--help-dock-width)) !important;
    max-width: calc(100vw - var(--help-dock-width)) !important;
    margin-left: var(--help-dock-width) !important;
}
body.help-dock-right #phase-bar {
    width: calc(100% - var(--help-dock-width)) !important;
    max-width: calc(100% - var(--help-dock-width)) !important;
}
body.help-dock-left #phase-bar {
    width: calc(100% - var(--help-dock-width)) !important;
    max-width: calc(100% - var(--help-dock-width)) !important;
    left: var(--help-dock-width) !important;
}
/* Zone rows & playmat must stretch to the full column width too. */
.player-area,
.player-area.evil,
.player-area.righteous,
#shared-zones,
#phase-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.playmat-grid {
    width: 100% !important;
    min-width: 0;
}

/* ── 2. Board: fills viewport, no scroll ───────────────────────── */
#board {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 2px !important;
    /* Force single-column layout so game.css's desktop @media rule that adds a
       175px "log" column doesn't shrink our player area. In experience mode
       the log is a toggleable overlay, not a grid column. */
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    transition: grid-template-rows 0.2s ease, margin-right 0.2s ease;
}
/* Undo the desktop grid-area assignments so all zones stack full-width */
.player-area.evil,
#shared-zones,
.player-area.righteous,
#phase-bar {
    grid-area: auto !important;
}
/* Experience always uses the overlay log, never the grid-area one */
#log-panel {
    grid-area: auto !important;
    position: fixed !important;
}

/* Grid rows change with phase. Default (not evil phase, no temptations):
   minimal evil strip + minimal shared-zones + phase-bar + full player area. */
#board {
    grid-template-rows: 60px 36px auto 1fr !important;
}
/* Temptations on the field — keep shared-zones expanded so cards are readable
 * (22% gives cards room to render without the phase-bar feeling jammed up
 * against the top of the card art). */
#board.has-active-temptations {
    grid-template-rows: 60px 22% auto 1fr !important;
}
/* Evil phase — expand the evil entity row so its deck/discard/stats are prominent */
#board.phase-evil-active {
    grid-template-rows: 22% 22% auto 1fr !important;
}

/* Collapsed evil-entity strip: hide announcement + stats label wrap */
#board:not(.phase-evil-active) .player-area.evil,
#board:not(.phase-evil-active) #evil-entity {
    padding: 2px 8px !important;
    min-height: 0 !important;
}
#board:not(.phase-evil-active) #evil-announcement {
    display: none !important;
}

/* Log panel reflow lives in game.css now (body.log-open #board margin-right)
   so both /online/game.php and /online/experience/game.php react. */

/* Kill game.css padding-top for fixed phase-bar (it's in-flow here) */
@media (max-width: 640px) {
    /* Promote phase-bar to the first grid row regardless of its DOM
       position. grid-row: 1 on it plus bumping the rest to rows 2-4 is
       cleaner than flipping #board to flex (experience relies on grid
       sizing for the 4-row layout everywhere else). */
    #board {
        padding-top: 0 !important;
        display: grid !important;
        flex-direction: unset !important;
        gap: 1px !important;
        grid-template-rows: auto 60px 36px 1fr !important;
    }
    #board.has-active-temptations { grid-template-rows: auto 60px 22% 1fr !important; }
    #board.phase-evil-active      { grid-template-rows: auto 22% 22% 1fr !important; }
    #phase-bar                         { grid-row: 1 !important; }
    #board .player-area.evil,
    #board #evil-entity                { grid-row: 2 !important; }
    #board #shared-zones               { grid-row: 3 !important; }
    #board .player-area.righteous      { grid-row: 4 !important; }
}
@media (max-width: 480px) {
    #board { padding-top: 0 !important; }
}

/* ── 3. Phase bar: in-flow, compact horizontal strip ────────────── */
#phase-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    padding: 3px 8px !important;
    gap: 6px !important;
    flex-shrink: 0;
    min-height: 0;
    border-radius: 0 !important;
}

#phase-bar::after { display: none !important; }

#turn-banner {
    flex: 0 0 auto;
    gap: 6px !important;
    flex-wrap: nowrap;
    align-items: center;
}
#turn-player-name  { font-size: 11px !important; }
#turn-round-tag    { font-size: 9px !important; }
#turn-phase-label  { font-size: 10px !important; margin-left: 0 !important; }

#phase-track {
    flex: 1;
    gap: 2px !important;
    /* visible (+ small side padding) so the active step's gold glow/border
       isn't clipped at the track edges — the first cell was getting cut off. */
    overflow: visible;
    padding: 2px 6px;
    min-width: 0;
}

.phase-track-header { display: none; }

.phase-step {
    padding: 2px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
/* Show a tiny label under each phase icon so the phases are readable. */
.phase-step .ps-label  { display: block !important; font-size: 7.5px !important; margin-top: 2px;
    letter-spacing: .2px; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.phase-step .ps-emoji  { font-size: 12px !important; }

#action-bar     { flex-shrink: 0; }
.phase-bar-btns { gap: 3px !important; }

/* ── 4. Zone rows: no min-height forcing growth ─────────────────── */
.zone-row { min-height: 0 !important; }

/* ── 5. Evil entity / evil player (top strip) ───────────────────── */
.player-area.evil,
#evil-entity {
    overflow: hidden !important;
    flex-shrink: 0;
    min-height: 0;
    padding: 4px 8px !important;
    gap: 4px !important;
}

.player-area.evil .player-stats,
#evil-entity .player-stats {
    flex-wrap: wrap;
    gap: 4px !important;
    padding: 2px 0 !important;
    min-height: 0;
}

/* Co-op evil is a compact stats strip — cap its (unused) hand row. */
#evil-entity .zone-row.hand-row,
.player-area.evil.coop-evil .zone-row.hand-row {
    max-height: 90px;
    min-height: 0 !important;
}
/* PvP: a human evil seat is a real player area with a hand. Lay it out as a
   flex column and let the hand-row take the leftover height so its cardback
   fan shows at full size instead of being clipped to the co-op 90px strip. */
.player-area.evil:not(.coop-evil) {
    display: flex !important;
    flex-direction: column !important;
}
.player-area.evil:not(.coop-evil) .player-stats,
.player-area.evil:not(.coop-evil) .zone-active-strip,
.player-area.evil:not(.coop-evil) .zone-row.cost-zone-row {
    flex: 0 0 auto;
}
.player-area.evil:not(.coop-evil) .zone-row.hand-row {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* ── 6. Shared zones: compact middle strip ──────────────────────── */
#shared-zones {
    overflow: hidden !important;
    flex-shrink: 0;
    min-height: 0;
    padding: 2px 8px !important;
    gap: 8px !important;
    align-items: center;
}

#zone-evil-field {
    min-height: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 4px !important;
    padding: 2px 6px !important;
}

#zone-evil-field .card-tile {
    width: 60px !important;
    height: 88px !important;
    flex-shrink: 0;
}
#zone-evil-field .ch-card-root {
    --ch-scale: 0.080 !important;
}

/* ── 7. Righteous player area: fills 1fr grid rows ──────────────── */
.player-area.righteous {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0 !important;
    padding: 3px 6px 0 !important;
}

.player-area.righteous .player-stats {
    flex-shrink: 0;
    padding: 2px 0 !important;
    gap: 4px !important;
    flex-wrap: wrap;
    min-height: 0;
}

/* ── 8. Playmat grid: fills remaining player area height ─────────── */
.playmat-grid {
    flex: 1;
    /* Guarantee room for the four quadrants even when two righteous areas
       share a single 1fr row below 1000px (stacked mode). Without this
       min-height the playmat collapses to ~0 and only stats+hand show. */
    min-height: 220px !important;
    overflow: hidden !important;
    grid-template-rows: 1fr 1fr !important;
}

.playmat-quad {
    min-height: 100px !important;
    overflow: hidden;
    padding: 4px 6px 4px !important;
}

.playmat-quad .zone-scrollable {
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    min-height: 0 !important;
}

/* ── 9. Zone scrollable: never scroll in experience ─────────────── */
.zone-scrollable {
    overflow: hidden !important;
}

/* ── 10. Smaller card sizes — everything fits in viewport ────────── */
:root {
    --card-w:        52px;
    --card-h:        76px;
    --card-w-sm:     38px;
    --card-h-sm:     56px;
    --card-w-hand:   58px;
    --card-h-hand:   85px;
}

/* Override the hard-coded pixel sizes in game.css playmat quads */
.playmat-quad .card-tile                              { width: 76px !important; height: 112px !important; }
.playmat-quad .ch-card-root                           { --ch-scale: 0.102 !important; }

.playmat-quad.quad-good-habituals .card-tile          { width: 76px !important; height: 112px !important; }
.playmat-quad.quad-good-habituals .ch-card-root       { --ch-scale: 0.102 !important; }

.playmat-quad.quad-evil-habituals .card-tile          { width: 60px !important; height: 88px !important; }
.playmat-quad.quad-evil-habituals .ch-card-root       { --ch-scale: 0.080 !important; }

.playmat-quad.quad-available .card-tile,
.playmat-quad.quad-spent .card-tile                   { width: 30px !important; height: 44px !important; }
.playmat-quad.quad-available .ch-card-root,
.playmat-quad.quad-spent .ch-card-root                { --ch-scale: 0.040 !important; }

/* Suppress game.css min-width desktop upscale inside quads */
@media (min-width: 768px) {
    .playmat-quad.quad-good-habituals .card-tile      { width: 76px !important; height: 112px !important; }
    .playmat-quad.quad-good-habituals .ch-card-root   { --ch-scale: 0.102 !important; }
    .playmat-quad.quad-evil-habituals .card-tile      { width: 60px !important; height: 88px !important; }
    .playmat-quad.quad-evil-habituals .ch-card-root   { --ch-scale: 0.080 !important; }
    .playmat-grid { min-height: 0 !important; }
    .playmat-quad { min-height: 0 !important; }
}

/* ── 11. Hand fan: bottom strip, life-size 3D held cards ────────────
   The hand cards render at --card-h-hand (162–222px) and are tilted in 3D,
   so the OLD max-height:100px + overflow:hidden here clipped their tops and
   bottoms to a thin band. Give the row the full card height plus overhang
   room for the tilt/arc, and let everything overflow visibly. */
.zone-row.hand-row {
    flex-shrink: 0;
    overflow: visible !important;
    max-height: none !important;
    min-height: calc(var(--card-h-hand, 192px) + 40px) !important;
}

.player-area.righteous .zone-row.hand-row {
    max-height: none !important;
    min-height: calc(var(--card-h-hand, 192px) + 40px) !important;
    overflow: visible !important;
}

.hand-zone-header { flex-shrink: 0; }

.hand-fan {
    /* BOTH axes visible — a lone overflow-x:auto silently coerces overflow-y
       to auto too (CSS spec), turning the fan into a scroll box that clips the
       tilted cards. Visible/visible keeps the full 3D cards showing. */
    overflow: visible !important;
    padding: 30px 6px 26px !important;
    /* Hide the native scrollbar — wheel scrolling (JS) still works. */
    scrollbar-width: none !important;
}
.hand-fan::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* 3D held-hand depth. A SHARED perspective on the fan container (not a weak
   per-card perspective()) gives all the cards one vanishing point, so the tilt
   actually reads. The card TOPS tip OUTWARD toward the viewer (negative rotateX,
   pivoting from the bottom edge) — like holding a real hand and angling the tops
   up toward your face. --fan-rot/--fan-dip are the per-card arc from JS. */
/* All the fan knobs are CSS custom properties driven by the live "🎴 Hand fan
   look" settings panel (GameUI._applyFanCfg). The values below are fallbacks. */
.hand-fan {
    perspective: var(--fan-persp, 560px);
    perspective-origin: center 35%;
    /* Vertical nudge for the whole fan (visual only — no reflow). */
    transform: translateY(var(--fan-offy, 0px));
}
.hand-fan .card-tile {
    transform-origin: center var(--fan-origin-y, 100%);
    /* The in-plane fan rotation happens around a virtual pivot --fan-conv px BELOW
       the card (translateY down → rotate → translateY back up). A bigger pivot makes
       all the cards' bottoms tuck toward one low point while the tops splay out — the
       real "hand of cards held in a triangle" look. */
    transform: rotateX(var(--fan-tiltx, -28deg))
               translateY(var(--fan-conv, 0px))
               rotate(var(--fan-rot, 0deg))
               translateY(calc(-1 * var(--fan-conv, 0px)))
               translateY(var(--fan-dip, 0px)) !important;
    will-change: transform;
}
/* Evil / face-down hand tips its tops OUTWARD toward the viewer (negative). Your
   own hand leans the opposite way — tops away, like cards resting on the table in
   front of you (positive rotateX). */
.hand-fan .card-tile               { --fan-tiltx: var(--fan-tiltx-you, 30deg); }   /* your hand: tops away  */
.hand-fan.hand-backs-fan .card-tile { --fan-tiltx: var(--fan-tiltx-evil, -36deg); } /* evil: tops toward you */

/* Tighter fan overlap: ~20px peek per card */
.hand-fan .card-tile                         { margin-right: -32px !important; }
.hand-fan .card-tile:last-child              { margin-right: 0 !important; }
.hand-fan .card-tile:hover,
.hand-fan .card-tile:focus                   {
    /* lift flat out of the fan and toward the viewer so the hovered card reads clearly */
    transform: rotateX(0deg) translateY(-18px) scale(1.12) !important;
    margin-right: -2px !important;
    z-index: 20;
}
/* Concealed (face-down) hand: we can't see the card, so a full flat lift is
   pointless. Keep the resting 3D pose and just nudge it up slightly for feedback. */
.hand-fan.hand-backs-fan .card-tile:hover,
.hand-fan.hand-backs-fan .card-tile:focus {
    transform: rotateX(var(--fan-tiltx, -26deg))
               translateY(var(--fan-conv, 0px))
               rotate(var(--fan-rot, 0deg))
               translateY(calc(-1 * var(--fan-conv, 0px)))
               translateY(var(--fan-dip, 0px)) !important;
    top: -9px;
    z-index: 12;
}

/* Inline hand spread levels — set on the fan via right-click → Spread.  The
   negative margin-right controls how much the next card overlaps this one.
   Compact = more overlap, Wide = less overlap, Full = no overlap at all. */
.hand-fan.spread-compact .card-tile          { margin-right: -46px !important; }
.hand-fan.spread-normal  .card-tile          { margin-right: -32px !important; }
.hand-fan.spread-wide    .card-tile          { margin-right: -6px  !important; }
.hand-fan.spread-full    .card-tile          { margin-right: 6px   !important; }
.hand-fan.spread-compact .card-tile:last-child,
.hand-fan.spread-normal  .card-tile:last-child,
.hand-fan.spread-wide    .card-tile:last-child,
.hand-fan.spread-full    .card-tile:last-child { margin-right: 0 !important; }

/* Full-card mode shows the printed cost already — hide our fan cost pill. */
.hand-fan.spread-full .card-tile .card-cost-overlay { display: none !important; }

/* Full-card mode: hand row sizes to the cards — no forced growth, no
   forced max-height. Cards define their own height, so the row collapses
   around them and any extra vertical space stays with the playmat above. */
.zone-row.hand-row:has(.hand-fan.spread-full),
.player-area.righteous .zone-row.hand-row:has(.hand-fan.spread-full) {
    max-height: none !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.hand-fan.spread-full {
    align-items: flex-start !important;
    overflow: visible !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* Hover lift would clip above the strip; in full-card mode cards are fully
   visible already, so tone down the hover transform. */
.hand-fan.spread-full .card-tile:hover,
.hand-fan.spread-full .card-tile:focus {
    transform: translateY(-6px) scale(1.02) !important;
    margin-right: 6px !important;
}

/* ── 12. Mobile overrides ────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Phase bar moves to the top of the stacked column instead of sitting
       in the middle. Grid is collapsed to flex-column at this breakpoint,
       so `order: -1` promotes the phase-bar above Evil + Shared zones.
       user-select:none + -webkit-touch-callout:none suppresses the mobile
       text-selection magnifier so long-press on the bar/phase-steps goes
       straight to the tap / drag instead of raising a cursor + "Copy"
       callout. */
    #phase-bar,
    #phase-bar * {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    /* Stack phase-bar children vertically on mobile so phase-track gets its
       own full-width row. At desktop experience width it's flex-direction:
       row, which squeezes phase-track between turn-banner / action-bar /
       buttons and leaves it too narrow to swipe. */
    #phase-bar {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        z-index: 900 !important;
        position: relative !important;
    }

    /* Phase track: horizontally scrollable row. experience.css used to
       hide it entirely at this breakpoint. Steps keep a readable min-width
       with labels visible so the total width exceeds a phone viewport —
       swipe sideways to reach the later phases. touch-action:pan-x tells
       the browser to yield horizontal pans to the scroll container instead
       of the page / long-press handler. */
    #phase-track    {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        min-width: 0;
        touch-action: pan-x;
    }
    #phase-track::-webkit-scrollbar { display: none; }
    #phase-track .phase-step {
        flex: 0 0 auto !important;
        min-width: 64px !important;
        padding: 3px 6px !important;
        touch-action: pan-x;
    }
    /* Keep the phase-label visible so each step is identifiable when
       scrolling (experience.css hides it in its compact desktop mode). */
    #phase-track .phase-step .ps-emoji { font-size: 13px !important; }
    #phase-track .phase-step .ps-label { display: block !important; font-size: 9px !important; }

    :root {
        --card-w:        44px;
        --card-h:        65px;
        --card-w-sm:     32px;
        --card-h-sm:     47px;
        --card-w-hand:   50px;
        --card-h-hand:   73px;
    }

    .playmat-quad .card-tile                              { width: 62px !important; height: 91px !important; }
    .playmat-quad .ch-card-root                           { --ch-scale: 0.083 !important; }
    .playmat-quad.quad-good-habituals .card-tile          { width: 62px !important; height: 91px !important; }
    .playmat-quad.quad-good-habituals .ch-card-root       { --ch-scale: 0.083 !important; }
    .playmat-quad.quad-evil-habituals .card-tile          { width: 48px !important; height: 71px !important; }
    .playmat-quad.quad-evil-habituals .ch-card-root       { --ch-scale: 0.064 !important; }
    .playmat-quad.quad-available .card-tile,
    .playmat-quad.quad-spent .card-tile                   { width: 24px !important; height: 36px !important; }
    .playmat-quad.quad-available .ch-card-root,
    .playmat-quad.quad-spent .ch-card-root                { --ch-scale: 0.032 !important; }

    .zone-row.hand-row,
    .player-area.righteous .zone-row.hand-row { max-height: 82px !important; }

    .hand-fan .card-tile         { margin-right: -26px !important; }
    .hand-fan .card-tile:hover,
    .hand-fan .card-tile:focus   { margin-right: -4px !important; }

    #turn-player-name { font-size: 10px !important; }
    #turn-round-tag   { display: none; }
}

/* ── 13. Phase advance button — hide verbose text, keep button visible ── */
.phase-instructions,
.phase-hint { display: none !important; }

#action-bar .btn-primary {
    font-size: 10px !important;
    padding: 5px 14px !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── 14. Mobile evil-field cards — readable minimum size ────────────── */
@media (max-width: 640px) {
    #zone-evil-field .card-tile {
        width: 48px !important;
        height: 70px !important;
    }
    #zone-evil-field .ch-card-root {
        --ch-scale: 0.064 !important;
    }
}

/* ── 15. Wide desktop — enlarge playmat so it fills horizontal space ── */
/* Cards are tiny on 1440px+ monitors since the default sizes target laptops.
   Scale them up in two tiers so legibility matches the available real estate. */
@media (min-width: 1200px) {
    :root {
        --card-w-hand: 110px;
        --card-h-hand: 162px;
    }

    .playmat-quad .card-tile,
    .playmat-quad.quad-good-habituals .card-tile       { width: 108px !important; height: 158px !important; }
    .playmat-quad .ch-card-root,
    .playmat-quad.quad-good-habituals .ch-card-root    { --ch-scale: 0.144 !important; }

    .playmat-quad.quad-evil-habituals .card-tile       { width: 90px !important; height: 132px !important; }
    .playmat-quad.quad-evil-habituals .ch-card-root    { --ch-scale: 0.120 !important; }

    .playmat-quad.quad-available .card-tile,
    .playmat-quad.quad-spent .card-tile                { width: 48px !important; height: 70px !important; }
    .playmat-quad.quad-available .ch-card-root,
    .playmat-quad.quad-spent .ch-card-root             { --ch-scale: 0.064 !important; }

    #zone-evil-field .card-tile                        { width: 90px !important; height: 132px !important; }
    #zone-evil-field .ch-card-root                     { --ch-scale: 0.120 !important; }

    .zone-row.hand-row,
    .player-area.righteous .zone-row.hand-row          { max-height: 180px !important; }

    /* Hand cards: larger tiles + matching scale. Negative margin is roughly
       half the tile width so the fan shows ~half of each card behind. */
    .player-area:not(.coop-evil) [id$="-hand"] .card-tile    { width: calc(110px * var(--fan-card-scale, 1)) !important; height: calc(162px * var(--fan-card-scale, 1)) !important; }
    .player-area:not(.coop-evil) [id$="-hand"] .ch-card-root { --ch-scale: calc(0.147 * var(--fan-card-scale, 1)) !important; }
    .hand-fan .card-tile                               { margin-right: -58px !important; }
    .hand-fan .card-tile:hover,
    .hand-fan .card-tile:focus                         {
        transform: translateY(-18px) scale(1.08) !important;
        margin-right: -12px !important;
    }
}

@media (min-width: 1600px) {
    :root {
        --card-w-hand: 145px;
        --card-h-hand: 213px;
    }

    .playmat-quad .card-tile,
    .playmat-quad.quad-good-habituals .card-tile       { width: 140px !important; height: 206px !important; }
    .playmat-quad .ch-card-root,
    .playmat-quad.quad-good-habituals .ch-card-root    { --ch-scale: 0.187 !important; }

    .playmat-quad.quad-evil-habituals .card-tile       { width: 115px !important; height: 169px !important; }
    .playmat-quad.quad-evil-habituals .ch-card-root    { --ch-scale: 0.153 !important; }

    .playmat-quad.quad-available .card-tile,
    .playmat-quad.quad-spent .card-tile                { width: 62px !important; height: 91px !important; }
    .playmat-quad.quad-available .ch-card-root,
    .playmat-quad.quad-spent .ch-card-root             { --ch-scale: 0.083 !important; }

    #zone-evil-field .card-tile                        { width: 115px !important; height: 169px !important; }
    #zone-evil-field .ch-card-root                     { --ch-scale: 0.153 !important; }

    .zone-row.hand-row,
    .player-area.righteous .zone-row.hand-row          { max-height: 230px !important; }

    .player-area:not(.coop-evil) [id$="-hand"] .card-tile    { width: calc(145px * var(--fan-card-scale, 1)) !important; height: calc(213px * var(--fan-card-scale, 1)) !important; }
    .player-area:not(.coop-evil) [id$="-hand"] .ch-card-root { --ch-scale: calc(0.193 * var(--fan-card-scale, 1)) !important; }
    .hand-fan .card-tile                               { margin-right: -78px !important; }
    .hand-fan .card-tile:hover,
    .hand-fan .card-tile:focus                         {
        transform: translateY(-22px) scale(1.08) !important;
        margin-right: -16px !important;
    }
}

/* Ultra-wide desktops: there's plenty of room, so make the cards noticeably
   bigger (esp. the hand) instead of leaving big empty margins. */
@media (min-width: 1900px) {
    :root { --card-w-hand: 178px; --card-h-hand: 262px; }

    .playmat-quad .card-tile,
    .playmat-quad.quad-good-habituals .card-tile       { width: 168px !important; height: 247px !important; }
    .playmat-quad .ch-card-root,
    .playmat-quad.quad-good-habituals .ch-card-root    { --ch-scale: 0.224 !important; }

    .playmat-quad.quad-evil-habituals .card-tile       { width: 138px !important; height: 203px !important; }
    .playmat-quad.quad-evil-habituals .ch-card-root    { --ch-scale: 0.184 !important; }

    .playmat-quad.quad-available .card-tile,
    .playmat-quad.quad-spent .card-tile                { width: 76px !important; height: 112px !important; }
    .playmat-quad.quad-available .ch-card-root,
    .playmat-quad.quad-spent .ch-card-root             { --ch-scale: 0.101 !important; }

    #zone-evil-field .card-tile                        { width: 138px !important; height: 203px !important; }
    #zone-evil-field .ch-card-root                     { --ch-scale: 0.184 !important; }

    .zone-row.hand-row,
    .player-area.righteous .zone-row.hand-row          { max-height: 285px !important; }

    /* Bigger hand — righteous (bottom) AND any face-up hand shown in a replay. */
    .player-area [id$="-hand"] .card-tile              { width: calc(178px * var(--fan-card-scale, 1)) !important; height: calc(262px * var(--fan-card-scale, 1)) !important; }
    .player-area [id$="-hand"] .ch-card-root           { --ch-scale: calc(0.237 * var(--fan-card-scale, 1)) !important; }
    .hand-fan .card-tile                               { margin-right: -92px !important; }
    .hand-fan .card-tile:hover,
    .hand-fan .card-tile:focus                         {
        transform: translateY(-26px) scale(1.08) !important;
        margin-right: -20px !important;
    }
}

/* ── 16. Multi-righteous: side-by-side on wide desktops ────────────── */
/* When there's >1 righteous player AND the viewport is wide, stack the
   player areas as columns instead of rows. #board base grid already has
   one row per player from the inline style; here we convert to columns.
   Each player then gets a full vertical slice and the playmat can breathe. */
/* ── View modes ─────────────────────────────────────────────────────
   Three layouts, togglable via the 🔲/🎯/🗂 button in phase-bar:
     symmetric : all player areas equal-size side-by-side (default)
     focus     : local/active player big, others compressed strip
     tabs      : one player shown at a time, tab bar above
   body.view-<mode> drives everything below. */

/* Tab bar — hidden unless tabs mode is active. Lives in <body> (not #board)
 * so it doesn't disrupt the CSS grid. Positioned fixed just below the
 * phase-bar when view-tabs is on. */
.player-tabs {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    gap: 4px;
    padding: 4px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid rgba(201,168,76,0.25);
    background: rgba(0,0,0,0.85);
}
body.view-tabs .player-tabs {
    display: flex;
    /* In experience mode, phase-bar is in-flow at row 3, so tabs can't
     * piggyback on it — just float at the top of the viewport. The player
     * area sits below phase-bar and isn't visually crowded by a thin strip. */
}
.player-tab {
    padding: 4px 10px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    color: rgba(201,168,76,0.7);
    background: transparent;
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 4px;
    cursor: pointer;
}
.player-tab.active {
    color: #f0c040;
    border-color: #f0c040;
    background: rgba(240,192,64,0.1);
}
/* Tab for the player currently taking their turn — golden halo that
   pulses, so you can tell whose turn it is even without switching tabs. */
.player-tab.taking-turn {
    box-shadow: 0 0 0 1px rgba(240,192,64,0.55), 0 0 10px rgba(240,192,64,0.35);
    animation: tab-turn-pulse 2s ease-in-out infinite;
}
.player-tab.taking-turn::before {
    content: '⚡ ';
    color: #f0c040;
}
@keyframes tab-turn-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(240,192,64,0.55), 0 0 8px  rgba(240,192,64,0.25); }
    50%      { box-shadow: 0 0 0 1px rgba(240,192,64,0.85), 0 0 16px rgba(240,192,64,0.45); }
}

/* Focus mode: "their turn" badge on compressed opponent strips so the
   active-player glow isn't the only cue (the strips are too small to
   show the pulse clearly). */
body.view-focus .player-area.righteous:not(.player-area-local).active-player::after {
    content: '⚡ Their Turn';
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 7;
    padding: 2px 8px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: #f0c040;
    background: rgba(240,192,64,0.12);
    border: 1px solid rgba(240,192,64,0.55);
    border-radius: 10px;
    pointer-events: none;
    animation: tab-turn-pulse 2s ease-in-out infinite;
}

/* Tabs mode — hide all righteous areas except the active tab's. */
body.view-tabs .player-area.righteous { display: none !important; }
body.view-tabs .player-area.righteous.player-area-tab-active {
    display: flex !important;
    grid-column: 1 / -1 !important;
}

/* Mobile: the #board grid rules force every righteous area to
 * grid-row: 4 at max-width: 640px (line 138). Without the html prefix
 * that rule tied with the tabs rule on specificity but appeared
 * earlier in the media-query cascade, so both righteous areas were
 * still laying out on top of each other at row 4 while tabs mode was
 * active. html body.view-tabs out-specifies every non-ID selector. */
html body.view-tabs .player-area.righteous {
    display: none !important;
}
html body.view-tabs .player-area.righteous.player-area-tab-active {
    display: flex !important;
    grid-row: 4 !important;
    grid-column: 1 / -1 !important;
}

/* Focus mode — local/active player gets ~65% of the slot; others become
   compressed strips. Works within the existing multi-righteous grid. */
body.view-focus .player-area.righteous {
    max-height: 180px;
    overflow: hidden;
}
body.view-focus .player-area.righteous.player-area-local {
    max-height: none;
    flex: 3;
}
body.view-focus .player-area.righteous:not(.player-area-local) .playmat-grid {
    min-height: 60px !important;
}
body.view-focus .player-area.righteous:not(.player-area-local) .playmat-quad {
    min-height: 28px !important;
    padding: 2px 4px !important;
}
body.view-focus .player-area.righteous:not(.player-area-local) .playmat-quad .quad-label {
    font-size: 8px !important;
}
body.view-focus .player-area.righteous:not(.player-area-local) .hand-row {
    max-height: 40px !important;
}
body.view-focus .player-area.righteous:not(.player-area-local) .hand-fan .card-tile {
    width: 28px !important;
    height: 40px !important;
}
body.view-focus .player-area.righteous:not(.player-area-local) .player-stats {
    padding: 2px 6px !important;
}

/* Multi-righteous: side-by-side columns whenever the viewport has enough
   width for two playable player-areas (~500px each). Dropped the threshold
   from 1400px to 1000px because at anything less, stacking the areas
   vertically squeezes each playmat to ~0 height. */
@media (min-width: 1000px) {
    body.multi-righteous #board {
        grid-template-rows: auto auto auto 1fr !important;
        grid-template-columns: repeat(var(--righteous-count, 2), 1fr) !important;
        grid-template-areas:
            "evil evil"
            "shared shared"
            "phase phase"
            "players players" !important;
    }
    body.multi-righteous .player-area.evil    { grid-column: 1 / -1 !important; grid-row: 1 !important; }
    body.multi-righteous #shared-zones        { grid-column: 1 / -1 !important; grid-row: 2 !important; }
    body.multi-righteous #phase-bar           { grid-column: 1 / -1 !important; grid-row: 3 !important; }
    body.multi-righteous .player-area.righteous {
        grid-row: 4 !important;
        grid-column: auto !important;
        border-left: 1px solid rgba(40,80,160,0.3);
    }
    body.multi-righteous .player-area.righteous:first-of-type { border-left: none; }
    /* The evil seats live in #evil-strip (a flex row), which is what occupies
       the evil grid row — not the individual .player-area.evil items. */
    body.multi-righteous #evil-strip { grid-column: 1 / -1 !important; grid-row: 1 !important; }
}

/* ── Multi-evil: N evil seats laid side-by-side in one horizontal strip ──────
   #evil-strip is a single grid item spanning the evil row; the evil player
   areas flex equally inside it, so 1v5 / 2v2 / 3v3 all keep EVERY evil seat
   visible. (Previously each .player-area.evil was pinned to the same grid cell
   — grid-column:1/-1; grid-row:1 — so they stacked on top of one another and
   only one showed.) */
#evil-strip {
    display: flex !important;
    flex-direction: row;
    gap: 2px;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    grid-column: 1 / -1;
    grid-row: 1;
}
/* Single evil seat: the strip must NOT change the layout — make it transparent
   (display:contents) so the lone .player-area.evil keeps its own grid placement
   (e.g. the "foe" area in the 1v1 side-split / symmetric view). The flex strip
   only kicks in for 2+ evil seats that need to sit side-by-side. */
#evil-strip.evil-count-1 { display: contents !important; }
#evil-strip > .player-area.evil {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    border-left: 1px solid rgba(150,55,50,0.4);
}
#evil-strip > .player-area.evil:first-child { border-left: none; }
@media (max-width: 640px) {
    #board #evil-strip { grid-row: 2 !important; }
    #evil-strip { flex-wrap: wrap; overflow: auto; }
}

/* ── Playmat/hand DIVIDER (drag to trade board space vs hand) ─────────── */
.pm-divider {
    flex: none;
    height: 8px;
    margin: 1px 6px;
    border-radius: 4px;
    cursor: row-resize;
    touch-action: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,168,76,.10);
    border: 1px solid rgba(201,168,76,.18);
    transition: background .15s ease, border-color .15s ease;
}
.pm-divider:hover, .pm-divider:active {
    background: rgba(201,168,76,.30);
    border-color: rgba(201,168,76,.55);
}
.pm-divider-grip { color: rgba(240,208,122,.75); font-size: 11px; line-height: 1; pointer-events: none; }
/* Hand-resize grip: a full-width bar at the TOP of the hand row/drawer (evil
   duel seat). Slightly taller + a touch brighter so it's easy to grab on both
   desktop and touch. */
.pm-divider-hand {
    align-self: stretch;
    width: auto;
    height: 11px;
    margin: 2px 8px 3px !important;
    position: relative;
    z-index: 6;
    background: rgba(201,168,76,.16);
    border-color: rgba(201,168,76,.28);
}
.pm-divider-hand:hover, .pm-divider-hand:active {
    background: rgba(201,168,76,.34);
    border-color: rgba(201,168,76,.6);
}
/* Duel band splitter: a fixed handle at the boundary between the top (opponent)
   and bottom (local) player bands — drag to grow one / shrink the other. */
#kcc-duel-vsplit {
    position: fixed;
    height: 12px;
    z-index: 46;
    cursor: row-resize;
    touch-action: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,168,76,.14);
    border-top: 1px solid rgba(201,168,76,.25);
    border-bottom: 1px solid rgba(201,168,76,.25);
    transition: background .12s ease;
}
#kcc-duel-vsplit:hover, #kcc-duel-vsplit:active {
    background: rgba(230,195,74,.38);
    box-shadow: 0 0 10px rgba(230,195,74,.4);
}
#kcc-duel-vsplit .dvs-grip { color: rgba(240,208,122,.9); font-size: 13px; line-height: 1; pointer-events: none; letter-spacing: 2px; }