:root {
  --ink: #f7f2e8;
  --muted: #afa9be;
  --paper: #f8f2e6;
  --bg: #080715;
  --panel: rgba(22, 18, 46, 0.88);
  --panel-2: rgba(35, 29, 66, 0.84);
  --line: rgba(255, 255, 255, 0.1);
  --gold: #f2c776;
  --pink: #fa7eac;
  --cyan: #80e3ef;
  --green: #91dfa6;
  --poison: #b179ff;
  --danger: #ff766d;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* Table scene v7: seats are the board.  The centre is deliberately a small
   context console for announcements and decisions, never a second giant
   panel inside the felt. */
@media (orientation: landscape) {
  .table > .players-panel .player[data-seat="south"],
  .table > .players-panel .player.is-human[data-seat="south"] { left: 50%; top: 86%; }
  .table > .players-panel .player[data-seat="north"] { top: 10%; }
  .table > .players-panel .player[data-seat="northwest"] { left: 29%; top: 19%; }
  .table > .players-panel .player[data-seat="northeast"] { left: 71%; top: 19%; }
  .table > .players-panel .player[data-seat="west"] { left: 14%; top: 56%; }
  .table > .players-panel .player[data-seat="east"] { left: 86%; top: 56%; }

  .table > .players-panel .player {
    grid-template-rows: auto auto;
    gap: 2px;
    overflow: visible;
  }

  .table > .players-panel .player-topline { gap: 3px; }
  .table > .players-panel .player-name { font-size: clamp(8px, .95vw, 11px); }
  .table > .players-panel .player-stats { gap: 3px; }
  .seat-rack {
    min-height: clamp(22px, 4.6dvh, 34px);
    margin-top: 1px;
    overflow: visible;
  }
  .seat-rack .card.small {
    width: clamp(15px, 2.15vw, 26px);
    height: clamp(22px, 4.6dvh, 34px);
    flex-basis: clamp(15px, 2.15vw, 26px);
    margin-right: -4px;
  }
  .seat-effects { bottom: calc(100% + 6px); }

  .table > .combat-board {
    inset: 38% 28% auto;
    display: grid;
    width: auto;
    min-height: 0;
    max-height: min(160px, 31dvh);
    padding: 7px 11px 8px;
    border-color: rgba(242, 199, 118, .38);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(4, 44, 37, .92), rgba(5, 31, 32, .88));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    grid-template-areas: "phase" "title" "copy" "actions" "notice";
    grid-template-rows: auto auto auto auto 0;
    gap: 3px;
  }
  .table > .combat-board .phase-label { font-size: clamp(7px, .78vw, 9px); }
  .table > .combat-board h1 { font-size: clamp(13px, 1.35vw, 18px); line-height: 1.05; }
  .table > .combat-board .table-copy {
    display: -webkit-box;
    max-width: 520px;
    max-height: 2.6em;
    font-size: clamp(8px, .82vw, 10px);
    -webkit-line-clamp: 2;
  }
  .table > .combat-board .center-cards { display: none; }
  .table > .combat-board .table-actions { min-height: 28px; max-height: 64px; }
  .table > .combat-board .table-actions .button,
  .table > .combat-board .status-callout { min-height: 28px; padding: 4px 7px; font-size: clamp(8px, .82vw, 10px); }

  /* Reveals and duels may temporarily use a wider centre console, but they
     still leave the seating stations as the dominant visual structure. */
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    inset: 29% 18% 24%;
    max-height: none;
    grid-template-areas: "phase" "center" "actions" "notice";
    grid-template-rows: auto minmax(0, 1fr) auto 0;
  }
  .table[data-layout="reveal"] > .combat-board .center-cards,
  .table[data-layout="focus"] > .combat-board .center-cards,
  .table[data-layout="duel"] > .combat-board .center-cards {
    display: grid;
  }
  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="reveal"] > .combat-board .table-copy,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board .table-copy { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table > .players-panel .player[data-seat="south"] { top: 87%; }
  .table > .players-panel .player[data-seat="northwest"],
  .table > .players-panel .player[data-seat="northeast"] { top: 17%; }
  .table > .players-panel .player[data-seat="west"],
  .table > .players-panel .player[data-seat="east"] { top: 55%; }
  .seat-rack { min-height: 18px; }
  .seat-rack .card.small { width: 12px; height: 18px; flex-basis: 12px; }
  .table > .combat-board { inset: 37% 24% auto; max-height: 126px; padding: 5px 7px; }
  .table > .combat-board h1 { font-size: clamp(12px, 2.1vw, 16px); }
  .table > .combat-board .table-copy { font-size: clamp(7px, 1vw, 9px); }
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board { inset: 26% 14% 22%; max-height: none; }
}


/* Table scene v6 ----------------------------------------------------------
   One landscape layout serves desktop *and* phones.  Older iterations split
   the two at 701px, which left many real phones on a top player rail.  The
   table is now always the seating map; only scale changes with available
   height. */
@media (orientation: landscape) {
  html,
  body,
  body.game-active {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.game-active {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 80% 10%, #25104b 0, transparent 26rem), radial-gradient(circle at 20% 100%, #10294a 0, transparent 34rem), var(--bg);
  }

  body.game-active .app-shell {
    display: flex;
    width: min(1280px, calc(100vw - 12px));
    height: min(820px, calc(100dvh - 10px));
    min-height: 0;
    margin: 0 auto;
    padding: 6px 8px;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(102px, 1fr) minmax(96px, .8fr) auto;
    flex: 0 0 36px;
    min-height: 36px;
    gap: 6px;
    margin: 0 0 4px;
  }

  .brand { gap: 6px; font-size: clamp(17px, 2vw, 21px); }
  .brand-mark { width: 27px; height: 27px; }
  .round-status { min-width: 0; margin: 0; overflow: hidden; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .new-game-controls { justify-content: end; gap: 4px; }
  .new-game-controls .button { min-height: 27px; padding: 4px 7px; font-size: 9px; }

  .game-layout {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
  }

  .table {
    position: relative;
    isolation: isolate;
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .table::before {
    position: absolute;
    z-index: 0;
    inset: 6% 4% 2%;
    border: 1px solid rgba(242, 199, 118, .76);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 42%, #1f755e 0%, #0d493d 57%, #082724 100%);
    box-shadow: inset 0 0 0 8px rgba(3, 24, 29, .46), 0 15px 38px rgba(0, 0, 0, .28);
    content: "";
    opacity: 1;
  }

  .table::after {
    z-index: 1;
    inset: calc(6% + 8px) calc(4% + 8px) calc(2% + 8px);
    border-color: rgba(242, 199, 118, .24);
    border-radius: 50%;
  }

  .table .felt-glow { display: none !important; }

  /* Seats are deliberately positioned by a semantic data attribute instead
     of their order in the player list, which keeps multiplayer reliable. */
  .table > .players-panel {
    position: absolute;
    z-index: 6;
    inset: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  .table > .players-panel #players {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0 !important;
  }

  .table > .players-panel .player,
  .table > .players-panel.is-crowded .player {
    position: absolute;
    display: grid;
    width: clamp(78px, 11.5vw, 138px);
    min-width: 0;
    min-height: clamp(39px, 7.7dvh, 58px);
    padding: 4px 5px;
    border: 1px solid rgba(242, 199, 118, .52);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(19, 37, 47, .98), rgba(20, 16, 47, .98));
    box-shadow: 0 7px 17px rgba(0, 0, 0, .31);
    transform: translate(-50%, -50%);
    backdrop-filter: none;
    pointer-events: auto;
  }

  .table > .players-panel .player::before { top: 4px; bottom: 4px; width: 3px; }
  .table > .players-panel .player-topline { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; }
  .table > .players-panel .player-name,
  .table > .players-panel.is-crowded .player-name { width: 100%; overflow: hidden; color: #fff6df; font-size: clamp(8px, .9vw, 11px); font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .table > .players-panel .player-tags,
  .table > .players-panel .health-track { display: none; }
  .table > .players-panel .player-stats,
  .table > .players-panel.is-crowded .player-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: 0; gap: 2px; }
  .table > .players-panel .player-stats span,
  .table > .players-panel.is-crowded .player-stats span { display: grid; width: 100%; height: clamp(14px, 3dvh, 20px); place-items: center; padding: 0; font-size: clamp(6px, .72vw, 9px); }

  .table > .players-panel .player[data-seat="south"] { left: 50%; top: 90%; }
  .table > .players-panel .player[data-seat="north"] { left: 50%; top: 12%; }
  .table > .players-panel .player[data-seat="northwest"] { left: 25%; top: 16%; }
  .table > .players-panel .player[data-seat="northeast"] { left: 75%; top: 16%; }
  .table > .players-panel .player[data-seat="west"] { left: 9%; top: 59%; }
  .table > .players-panel .player[data-seat="east"] { left: 91%; top: 59%; }

  .seat-rack {
    display: flex;
    justify-content: center;
    min-height: clamp(18px, 3.7dvh, 30px);
    margin-top: 3px;
    overflow: hidden;
    padding: 0 1px;
  }

  .seat-rack .card.small {
    width: clamp(12px, 1.75vw, 22px);
    height: clamp(18px, 3.7dvh, 30px);
    flex: 0 0 clamp(12px, 1.75vw, 22px);
    margin-right: -3px;
    padding: 1px;
    border-radius: 3px;
  }

  .seat-rack .card.small .card-corner { font-size: 5px; }
  .seat-rack .card.small .card-effect { font-size: 5px; }
  .seat-effects { position: absolute; bottom: calc(100% + 4px); left: 50%; z-index: 2; display: flex; justify-content: center; width: max-content; max-width: 130%; transform: translateX(-50%); pointer-events: none; }
  .seat-effect { padding: 2px 5px; border: 1px solid currentColor; border-radius: 999px; background: #130f2a; box-shadow: 0 4px 10px rgba(0,0,0,.32); font-size: clamp(6px, .72vw, 8px); font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
  .seat-effect.poison { color: #d5adff; }
  .seat-effect.antiheal { color: #ff9ecb; }

  /* The middle is a high-contrast status console, never a translucent layer.
     The reserved final rows make the primary action and notification visible
     before explanatory copy. */
  .table > .combat-board {
    position: absolute;
    z-index: 3;
    inset: clamp(40px, 23%, 164px) clamp(12%, 22%, 28%) clamp(43px, 18%, 116px);
    display: grid;
    min-height: 0;
    padding: 6px 9px;
    overflow: hidden;
    border: 1px solid rgba(242, 199, 118, .56);
    border-radius: 12px;
    background: #06382f;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .07);
    backdrop-filter: none !important;
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "center"
      "actions"
      "notice";
    grid-template-rows: 11px minmax(20px, auto) minmax(0, auto) minmax(0, 1fr) minmax(30px, auto) 20px;
    align-content: stretch;
    justify-items: center;
    gap: 2px;
    text-align: center;
  }

  .table > .combat-board,
  .table > .combat-board.phase-enter,
  .table > .combat-board.phase-enter .phase-label,
  .table > .combat-board.phase-enter h1,
  .table > .combat-board.phase-enter .table-copy,
  .table > .combat-board.phase-enter .center-cards,
  .table > .combat-board.phase-enter .table-actions {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .table > .combat-board .phase-label { grid-area: phase; min-height: 0; margin: 0; color: var(--gold); font-size: clamp(7px, .8vw, 9px); }
  .table > .combat-board h1 { grid-area: title; min-height: 0; margin: 0; color: #fff5df; font-size: clamp(17px, 2.15vw, 27px); line-height: 1.03; }
  .table > .combat-board .table-copy { grid-area: copy; display: -webkit-box; width: min(100%, 510px); max-height: 3.9em; min-height: 0; margin: 0; overflow: hidden; color: #d8e9df; font-size: clamp(8px, .88vw, 11px); line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .table > .combat-board .center-cards { grid-area: center; display: grid; width: 100%; height: 100%; min-height: 0; margin: 0; place-items: center; overflow: hidden; }
  .table > .combat-board .table-actions { grid-area: actions; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 30px; max-height: 88px; margin: 0; overflow: auto; gap: 4px; }
  .table > .combat-board .table-actions .button,
  .table > .combat-board .status-callout { min-height: 30px; padding: 5px 8px; font-size: clamp(8px, .88vw, 10px); }
  .table > .combat-board .table-notification-zone { grid-area: notice; width: min(100%, 390px); min-height: 20px; }
  .table > .combat-board .table-notification-zone .battle-fx-pop { padding: 3px 7px; font-size: clamp(7px, .8vw, 10px); }
  .table > .combat-board .table-notification-zone .battle-fx-pop span { font-size: 13px; }
  .table > .combat-board .table-notification-zone .toast { padding: 3px 7px; font-size: clamp(7px, .75vw, 9px); }

  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board,
  .table[data-layout="result"] > .combat-board {
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "actions"
      "notice";
    grid-template-rows: 11px minmax(20px, auto) minmax(0, 1fr) minmax(30px, auto) 20px;
  }

  .table[data-layout="intro"] > .combat-board .center-cards,
  .table[data-layout="status"] > .combat-board .center-cards,
  .table[data-layout="result"] > .combat-board .center-cards { display: none; }

  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    inset: clamp(35px, 19%, 128px) clamp(7%, 13%, 18%) clamp(40px, 15%, 94px);
    grid-template-areas:
      "phase"
      "center"
      "actions"
      "notice";
    grid-template-rows: 11px minmax(0, 1fr) minmax(30px, auto) 20px;
  }

  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="reveal"] > .combat-board .table-copy,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board .table-copy { display: none; }

  .table[data-layout="reveal"] .reveal-board,
  .table[data-layout="focus"] .reveal-board { max-height: 100%; overflow: hidden; }

  .logs-toggle { position: absolute; z-index: 10; top: 9px; right: 10px; display: inline-flex; min-height: 25px; padding: 4px 7px; font-size: 9px; }
  .activity-panel { position: absolute; z-index: 11; top: 8px; right: 8px; bottom: 8px; display: none; width: min(300px, 55%); margin: 0; }
  .table.logs-open .activity-panel { display: block; }
  .log { height: calc(100% - 34px); font-size: 9px; }

  /* Hand dock: the upper padding is intentional space for the selection lift.
     A selected card remains entirely inside its own scrollable stage. */
  .hand-area {
    align-self: center;
    flex: 0 0 clamp(98px, 17dvh, 128px);
    width: min(720px, calc(100% - 24px));
    min-height: 0;
    margin-top: 4px;
    padding: 5px 8px 6px;
    border-radius: 11px;
    backdrop-filter: none;
  }

  .hand-heading { min-height: 20px; gap: 6px; margin-bottom: 1px; }
  .hand-heading .eyebrow { margin: 0; font-size: 9px; }
  .hand-heading strong { display: none; }
  .hand-tools { gap: 5px; }
  .scout-toggle,
  .hand-collapse { min-height: 22px; padding: 3px 6px; font-size: 9px; }
  .hand-meta { gap: 4px; font-size: 8px; white-space: nowrap; }
  .hand-sort-controls { display: inline-flex; gap: 3px; }
  .hand-sort-controls button { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; font-size: 12px; }
  .hand-insights { min-height: 15px; margin: 0 0 1px; padding: 1px 5px; gap: 3px 6px; font-size: 8px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
  .hand-strength > span,
  .potential-effects > span { display: none; }
  .hand-strength em,
  .hand-strength b,
  .effect-chip { font-size: 8px; }
  .effect-chip { padding: 2px 4px; }
  .hand { min-height: 0; height: calc(100% - 37px); align-items: flex-end; justify-content: center; gap: 5px; padding: 12px 3px 0; overflow-x: auto; overflow-y: hidden; }
  .hand > .card,
  .hand-card-slot > .card { width: clamp(38px, 4.5vw, 56px); height: clamp(56px, 10.5dvh, 78px); flex: 0 0 clamp(38px, 4.5vw, 56px); padding: 5px; border-radius: 7px; }
  .hand-card-slot { flex: 0 0 clamp(38px, 4.5vw, 56px); }
  .hand .card.selected { transform: translateY(-8px); }
  .hand-area.has-editable-joker { flex-basis: clamp(116px, 19dvh, 142px); }
  .hand-area.has-editable-joker .hand { height: calc(100% - 25px); padding-top: 12px; }
  .hand .card.joker-configurable { padding-bottom: 26px; }

  @media (max-height: 520px) {
    body.game-active .app-shell { width: 100%; height: 100dvh; padding: 5px 6px; }
    .topbar { flex-basis: 32px; min-height: 32px; margin-bottom: 2px; }
    .brand { font-size: 17px; }
    .brand-mark { width: 24px; height: 24px; }
    .new-game-controls .button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; font-size: 0; }
    .new-game-controls .button::before { color: var(--ink); font-size: 14px; line-height: 1; }
    #return-menu::before { content: "☰"; } #rules-toggle::before { content: "?"; } #profile-toggle::before { content: "◎"; } #sound-toggle::before { content: "♪"; }
    .table > .players-panel .player,
    .table > .players-panel.is-crowded .player { width: clamp(72px, 13vw, 98px); min-height: 37px; padding: 3px 4px; }
    .table > .players-panel .player-stats span,
    .table > .players-panel.is-crowded .player-stats span { height: 14px; font-size: 6px; }
    .seat-rack { min-height: 18px; margin-top: 2px; }
    .seat-rack .card.small { width: 12px; height: 18px; flex-basis: 12px; }
    .seat-effects { bottom: calc(100% + 2px); }
    .seat-effect { padding: 1px 4px; font-size: 6px; }
    .table > .combat-board { padding: 5px 7px; }
    .table > .combat-board h1 { font-size: clamp(16px, 2.5vw, 20px); }
    .table > .combat-board .table-copy { font-size: clamp(7px, 1.05vw, 9px); }
    .table > .combat-board .table-actions .button,
    .table > .combat-board .status-callout { min-height: 28px; padding: 4px 6px; font-size: 8px; }
    .hand-area { flex-basis: 94px; min-height: 94px; width: min(680px, calc(100% - 16px)); padding: 4px 7px 5px; }
    .hand-area.has-editable-joker { flex-basis: 106px; min-height: 106px; }
    .hand-insights { display: none; }
    .hand { height: calc(100% - 22px); gap: 4px; padding-top: 10px; }
    .hand > .card,
    .hand-card-slot > .card { width: clamp(35px, 5.2vw, 47px); height: clamp(51px, 12dvh, 62px); flex-basis: clamp(35px, 5.2vw, 47px); }
    .hand-card-slot { flex-basis: clamp(35px, 5.2vw, 47px); }
  }

  /* The menu receives the same short-landscape guarantee: the solo action
     remains on screen instead of below a folded page. */
  body:not(.game-active) .menu-scene { box-sizing: border-box; min-height: 100dvh; height: 100dvh; padding: 8px; overflow: hidden; }
  body:not(.game-active) .menu-card { max-height: calc(100dvh - 16px); overflow: auto; }

  @media (max-height: 520px) {
    body:not(.game-active) .menu-card { width: min(720px, 100%); padding: 11px 16px; border-radius: 14px; }
    body:not(.game-active) .menu-card > .eyebrow,
    body:not(.game-active) .menu-card > h1,
    body:not(.game-active) .menu-card > p:not(.menu-footnote),
    body:not(.game-active) .menu-footnote { display: none; }
    body:not(.game-active) .menu-brand { margin: 0 0 5px; font-size: 24px; }
    body:not(.game-active) .menu-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
    body:not(.game-active) .menu-mode { min-height: 0; padding: 9px 11px; border-radius: 10px; }
    body:not(.game-active) .menu-mode .button { min-height: 28px; padding: 5px 8px; font-size: 9px; }
  }
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; margin: 0; min-width: 320px; min-height: 100vh; overflow-x: clip; overflow-y: auto; background: radial-gradient(circle at 80% 10%, #25104b 0, transparent 26rem), radial-gradient(circle at 20% 100%, #10294a 0, transparent 34rem), var(--bg); }
button, select { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(1540px, 100%); max-width: 100%; min-height: 100vh; margin: 0 auto; padding: 16px clamp(14px, 2.3vw, 38px) 24px; overflow-x: clip; }
.menu-scene { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 28px 16px; isolation: isolate; }
.menu-scene[hidden], .app-shell[hidden] { display: none !important; }
.menu-scene-glow { position: absolute; z-index: -1; width: min(92vw, 1120px); height: min(92vw, 760px); border-radius: 50%; background: radial-gradient(ellipse, rgba(38,135,102,.48), rgba(28,80,101,.18) 43%, transparent 71%); filter: blur(8px); }
.menu-card { position: relative; width: min(850px, 100%); padding: clamp(28px, 6vw, 62px); border: 1px solid rgba(242,199,118,.38); border-radius: 24px; background: linear-gradient(145deg, rgba(25,55,64,.93), rgba(17,13,42,.96)); box-shadow: 0 32px 90px rgba(0,0,0,.48), inset 0 0 0 9px rgba(4,25,30,.3); text-align: center; }
.menu-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 32px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 7vw, 58px); font-weight: 700; letter-spacing: -.06em; }.menu-brand span span { color: var(--gold); }.menu-brand .brand-mark { width: 47px; height: 47px; font-size: 27px; }
.menu-card > .eyebrow { margin-bottom: 10px; }.menu-card > h1 { max-width: none; font-size: clamp(36px, 6vw, 60px); }.menu-card > p { max-width: 540px; margin: 13px auto 0; color: #d5e5dd; font-size: 15px; line-height: 1.55; }
.menu-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 32px; text-align: left; }.menu-mode { display: flex; min-height: 212px; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(4,20,28,.42); }.menu-mode.online-mode { background: rgba(43,29,74,.32); }.menu-mode h2 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; letter-spacing: -.03em; }.menu-mode p { margin: 0; color: #cbd8d1; font-size: 12px; line-height: 1.45; }.menu-player-count { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0; color: var(--muted); font-size: 12px; }.menu-mode .button { margin-top: auto; }.menu-footnote { color: var(--muted) !important; font-size: 11px !important; }
.topbar { display: flex; align-items: center; gap: 20px; min-height: 52px; margin-bottom: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-family: Georgia, "Times New Roman", serif; font-size: 25px; letter-spacing: -.04em; }
.brand span span { color: var(--gold); }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; color: #1b1234; background: var(--gold); border-radius: 10px; font-family: serif; transform: rotate(-8deg); }
.round-status { margin-left: auto; color: var(--muted); font-size: 13px; }
.new-game-controls { display: flex; align-items: center; gap: 10px; }
.new-game-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.sound-control { position: relative; }.menu-sound-control { position: absolute; top: 18px; right: 18px; }.menu-rules-control { position: absolute; top: 18px; left: 18px; }.sound-panel { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; display: grid; min-width: 192px; gap: 10px; padding: 11px; border: 1px solid rgba(242,199,118,.42); border-radius: 10px; color: #dfeee6; background: rgba(14,12,35,.98); box-shadow: 0 14px 36px rgba(0,0,0,.42); font-size: 11px; text-align: left; }.sound-panel[hidden] { display: none !important; }.sound-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.sound-panel strong { color: var(--gold); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.sound-slider { display: grid; grid-template-columns: 54px 1fr 32px; align-items: center; gap: 7px; color: #dfeee6; font-size: 11px; }.sound-slider input { width: 100%; accent-color: var(--gold); }.sound-slider output { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 10px; text-align: right; }
select { color: var(--ink); background: #211a3d; border: 1px solid var(--line); border-radius: 7px; padding: 7px 8px; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.players-panel, .activity-panel, .hand-area { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.players-panel { overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; }
.players-panel::-webkit-scrollbar, .reveal-seat-list::-webkit-scrollbar { display: none; }
.panel-heading, .activity-heading { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mode-pill { color: #20172e; background: var(--gold); border-radius: 999px; padding: 4px 6px; font-size: 9px; letter-spacing: .04em; }
.scout-toggle { padding: 5px 8px; font-size: 10px; text-transform: none; }
#players { display: grid; grid-template-columns: repeat(var(--seat-count, 3), minmax(132px, 1fr)); }
.player { position: relative; min-width: 0; padding: 9px 10px; border-right: 1px solid var(--line); }
.player:last-child { border-right: 0; }
.player.is-human { background: linear-gradient(90deg, rgba(242, 199, 118, .16), transparent); }
.player.is-attacker::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.player.is-dead { opacity: .45; filter: grayscale(.8); }.player.just-died { animation: seat-ko 1.28s cubic-bezier(.2,.75,.28,1) both; }@keyframes seat-ko { 0% { opacity: 1; filter: none; } 16% { opacity: 1; background: rgba(255,89,94,.38); box-shadow: 0 0 0 4px rgba(255,89,94,.22), 0 0 28px rgba(255,89,94,.3); } 48% { opacity: .9; background: rgba(100,30,37,.22); } 100% { opacity: .45; filter: grayscale(.8); } }
.player-topline { display: flex; align-items: center; gap: 5px; }
.player-name { overflow: hidden; font-weight: 750; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.player-tags { display: flex; gap: 4px; align-items: center; }
.tag { border: 1px solid var(--line); padding: 2px 5px; border-radius: 5px; color: var(--muted); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.tag.attacker { border-color: rgba(242, 199, 118, .7); color: var(--gold); }
.tag.folded { border-color: rgba(255, 118, 109, .55); color: var(--danger); }
.health-track { position: relative; height: 5px; overflow: hidden; margin: 5px 0 4px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.health-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fc718d, #ffac8c); transition: width .3s ease; }
.health-fill.high { background: linear-gradient(90deg, #61d9a7, #a8e880); }
.player-stats { display: flex; flex-wrap: nowrap; gap: 4px; margin-left: auto; color: var(--muted); font-size: 9px; }
.player-stats span { display: inline-grid; width: 21px; height: 21px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.32), rgba(255,255,255,.04) 48%), rgba(255,255,255,.055); box-shadow: inset 0 0 0 2px rgba(0,0,0,.14), 0 2px 3px rgba(0,0,0,.25); font-weight: 850; }
.player-stats b { color: var(--ink); font-weight: 800; }
.stat-hp { color: #ffd1d1; border-color: rgba(225,71,76,.6) !important; }.stat-shield { color: var(--cyan); border-color: rgba(80,190,240,.6) !important; }.stat-poison { color: #d5adff; border-color: rgba(171,112,245,.6) !important; }.stat-fold { color: var(--gold); border-color: rgba(242,199,118,.6) !important; }
.graveyard-drawer { position: fixed; z-index: 30; top: 72px; left: 50%; width: min(1120px, calc(100vw - 32px)); max-height: min(66vh, 520px); overflow: hidden; border: 1px solid rgba(242,199,118,.46); border-radius: 14px; background: rgba(10,9,29,.98); box-shadow: 0 24px 75px rgba(0,0,0,.62); transform: translateX(-50%); }.graveyard-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px 7px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.graveyard-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.graveyard-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-height: min(57vh, 430px); padding: 0 10px 10px; overflow-y: auto; }.graveyard-player { padding: 7px 8px; border-top: 1px solid rgba(255,255,255,.07); }.graveyard-player > div:first-child { display: flex; justify-content: space-between; gap: 8px; color: #edf4ef; font-size: 10px; }.graveyard-player > div:first-child span { color: var(--muted); font-size: 8px; }.graveyard-cards { display: flex; min-height: 43px; margin-top: 4px; overflow-x: auto; padding: 2px 6px 3px 0; -ms-overflow-style: none; scrollbar-width: none; }.graveyard-cards::-webkit-scrollbar { display: none; }.graveyard-cards em { color: var(--muted); font-size: 10px; font-style: normal; }
.rules-drawer { position: fixed; z-index: 80; top: 16px; right: 16px; width: min(530px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 19px; border: 1px solid rgba(242,199,118,.48); border-radius: 18px; color: #dbe9e2; background: linear-gradient(145deg, rgba(30,47,63,.99), rgba(18,12,43,.99)); box-shadow: -16px 24px 70px rgba(0,0,0,.58); animation: rules-drawer-in .2s ease-out; }.rules-drawer[hidden] { display: none !important; }.rules-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.rules-heading h2 { margin: 2px 0 0; color: #fff5db; font-family: Georgia, "Times New Roman", serif; font-size: 27px; letter-spacing: -.03em; }.rules-intro { margin: 13px 0 12px; color: #c6dcd2; font-size: 13px; line-height: 1.45; }.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.rules-block { padding: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(5,20,27,.38); }.rules-block h3 { margin: 0 0 7px; color: var(--gold); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }.rules-block h3 span { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; }.rules-block p, .rules-block li { margin: 0; color: #d5e4dc; font-size: 11px; line-height: 1.42; }.rules-steps, .rules-block ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; }.rules-block ul { padding-left: 15px; }.rules-ranking b { display: inline-block; min-width: 14px; color: #fff0c9; text-align: center; }.rules-effects li { list-style: none; margin-left: -15px; }.rules-effects .effect-chip { margin-right: 3px; vertical-align: middle; }.rules-aces { grid-column: span 2; }.rules-aces ul { grid-template-columns: 1fr 1fr; column-gap: 17px; }.rules-note { margin: 11px 1px 0; color: #a9c8bb; font-size: 10px; line-height: 1.4; }@keyframes rules-drawer-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.lobby-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,3,14,.72); backdrop-filter: blur(9px); }.lobby-modal[hidden] { display: none !important; }.lobby-card { width: min(580px, 100%); padding: 22px; border: 1px solid rgba(242,199,118,.46); border-radius: 18px; background: linear-gradient(145deg, rgba(35,29,66,.99), rgba(12,13,33,.99)); box-shadow: 0 28px 80px rgba(0,0,0,.58); }.lobby-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.lobby-heading h2 { margin: 2px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 28px; }.lobby-status { margin: 14px 0; color: #cbd8d1; font-size: 13px; line-height: 1.45; }.lobby-field, .lobby-create label, .lobby-join label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }.lobby-field input, .lobby-join input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #17132e; }.lobby-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }.lobby-create, .lobby-join, .lobby-room { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(4,22,25,.28); }.lobby-create b, .lobby-join b { color: var(--gold); font-size: 12px; }.lobby-create { grid-template-columns: 1fr 1fr; }.lobby-create b, .lobby-create .button { grid-column: 1 / -1; }.lobby-room { margin-top: 14px; }.room-code { display: grid; gap: 4px; color: var(--gold); font-size: 30px; font-weight: 900; letter-spacing: .15em; text-align: center; }.room-code span { color: var(--muted); font-size: 10px; letter-spacing: .08em; }.room-code strong { display: block; }.lobby-seats { display: grid; gap: 5px; }.lobby-seat { display: flex; justify-content: space-between; padding: 7px 8px; border-radius: 7px; color: #dcece3; background: rgba(255,255,255,.055); font-size: 12px; }.lobby-seat em { color: var(--muted); font-style: normal; }.lobby-actions { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }@media (max-width: 620px) { .lobby-entry { grid-template-columns: 1fr; } .lobby-card { padding: 17px; } }

.table { --duel-fx-left: calc(27% - 59px); --duel-fx-right: calc(73% - 159px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 218px; min-height: 410px; overflow: hidden; border: 1px solid rgba(160, 224, 190, .22); border-radius: 19px; background: radial-gradient(ellipse at 50% 40%, #1c775e, #0e3f38 54%, #092825); box-shadow: inset 0 0 0 10px rgba(3, 24, 29, .45), var(--shadow); }
.table::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(242, 199, 118, .22); border-radius: 12px; pointer-events: none; }
.felt-glow { position: absolute; inset: -50%; opacity: .45; pointer-events: none; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(255,255,255,.018) 5px 6px); transform: rotate(13deg); }
.combat-board { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 25px clamp(16px, 3.5vw, 46px); text-align: center; }
.phase-label { margin-bottom: 8px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 680px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 2.8vw, 39px); line-height: 1.04; letter-spacing: -.04em; }
.table-copy { max-width: 580px; margin: 10px 0 11px; color: #d9e7df; font-size: 12px; line-height: 1.42; }
.center-cards { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; max-width: 100%; margin: 2px 0 6px; }
.table-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 700px; }
.activity-panel { position: relative; z-index: 1; align-self: stretch; margin: 11px 11px 11px 0; overflow: hidden; background: rgba(9, 20, 31, .74); box-shadow: none; }
.activity-heading { border-bottom: 1px solid var(--line); }
.log { display: flex; flex-direction: column; gap: 7px; height: 332px; margin: 0; padding: 11px 12px; overflow-y: auto; list-style: none; color: #c0cbd4; font-size: 11px; line-height: 1.33; }
.log li { position: relative; padding-left: 12px; }.log li::before { content: ""; position: absolute; left: 0; top: .47em; width: 5px; height: 5px; border-radius: 50%; background: rgba(242,199,118,.8); }
.log li.emphasis { color: #fff0c9; }.log li.damage-log { color: #ffb1a9; }.log li.heal-log { color: #adf3bf; }

.hand-area { min-width: 0; margin-top: 16px; padding: 16px clamp(15px, 2vw, 28px) 18px; overflow: hidden; }
.hand-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 13px; }.hand-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.eyebrow { display: block; margin-bottom: 3px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hand-heading strong { font-size: 14px; }.hand-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); font-size: 12px; text-align: right; }.hand-sort-controls { display: inline-flex; gap: 4px; }.hand-sort-controls button { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 10px; font-weight: 800; }.hand-sort-controls button[aria-pressed="true"] { color: #1d162c; border-color: var(--gold); background: var(--gold); }
.hand-insights { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 14px; min-height: 30px; margin: -3px 0 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(6, 7, 22, .36); color: #d5e3db; font-size: 11px; }
.hand-strength, .reveal-insight, .potential-effects { display: flex; align-items: center; gap: 6px; }.hand-strength > span, .potential-effects > span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }.hand-strength b { color: var(--gold); }.hand-strength em { color: #abd9e0; font-size: 10px; font-style: normal; }.reveal-insight { padding-left: 14px; border-left: 1px solid var(--line); }.insight-main b { color: #fff0c9; }
.potential-effects > div { display: flex; flex-wrap: wrap; gap: 4px; }.effect-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 800; }.effect-chip.damage { color: #ff888c; background: rgba(239,82,88,.1); }.effect-chip.heal { color: #8fe6a8; background: rgba(75,192,113,.1); }.effect-chip.poison { color: #d0a5ff; background: rgba(179,121,255,.11); }.effect-chip.shield { color: #82d7ff; background: rgba(106,199,255,.11); }.effect-chip.muted { color: var(--muted); }
.hand { display: flex; gap: 6px; min-height: 123px; align-items: flex-end; justify-content: center; padding: 0 8px; overflow: hidden; isolation: isolate; }.hand-card-slot { display: flex; flex: 0 0 76px; flex-direction: column; align-items: center; gap: 5px; padding-top: 26px; }.joker-inline-choice { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: #dacbef; font-size: 9px; font-weight: 750; }.joker-inline-choice select { width: 38px; padding: 3px 2px; font-size: 10px; font-weight: 800; }.joker-inline-choice select:last-child { width: 33px; color: #3b255d; background: #f3e8ff; }

.card { position: relative; display: inline-flex; width: 76px; height: 108px; flex: 0 0 76px; flex-direction: column; justify-content: space-between; margin: 0; padding: 7px; border: 1px solid rgba(42, 32, 60, .24); border-radius: 9px; color: #2b2036; background: linear-gradient(145deg, #fffdf8, #e9e2d7); box-shadow: 0 5px 13px rgba(0,0,0,.25); user-select: none; transition: transform .16s ease, box-shadow .16s ease, outline-color .16s ease; }
.card.small { width: 35px; height: 50px; flex-basis: 35px; margin: 0 -9px 0 0; padding: 4px; border-radius: 5px; font-size: 8px; }.card.small .card-effect { font-size: 6px; }.card.small .card-corner:last-child { display: none; }
.players-panel.is-crowded .card.small { width: 29px; height: 40px; flex-basis: 29px; margin-right: -7px; padding: 3px; }.players-panel.is-crowded .card.small .card-effect { font-size: 5px; }.players-panel.is-crowded .player { padding: 8px 6px; }.players-panel.is-crowded .player-topline { gap: 3px; }.players-panel.is-crowded .player-name { font-size: 10px; }.players-panel.is-crowded .player-stats { gap: 2px; }.players-panel.is-crowded .player-stats span { width: 18px; height: 18px; font-size: 8px; }.players-panel.is-crowded .tag { padding: 1px 3px; font-size: 7px; }
.card.selected { z-index: 4; outline: 3px solid var(--gold); transform: translateY(-16px); }
@media (hover: hover) and (pointer: fine) { .card.interactive:hover { z-index: 3; transform: translateY(-12px) rotate(1deg); box-shadow: 0 12px 20px rgba(0,0,0,.35); } }
.card.visible-card { box-shadow: 0 0 0 2px rgba(242,199,118,.55), 0 5px 13px rgba(0,0,0,.25); }
.card.damage { color: #c8434a; }.card.heal { color: #278451; }.card.poison { color: #7544bf; }.card.shield { color: #2587bd; }
.card-corner { font-size: 15px; font-weight: 900; line-height: .9; }.card-corner:last-child { align-self: flex-end; transform: rotate(180deg); }
.card-effect { display: grid; flex: 1; place-items: center; font-family: Georgia, serif; font-size: 17px; font-weight: 900; }.card.joker { color: #3b255d; background: linear-gradient(145deg, #f6eaff, #dfd2ed); }.card.joker .card-effect { font-size: 11px; letter-spacing: .04em; }
.card.back { color: var(--gold); background: repeating-linear-gradient(45deg, #241449 0 4px, #3f2164 4px 8px); border-color: rgba(242,199,118,.6); }.card.back .card-effect { font-size: 25px; }

.button { padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; color: #20182d; background: var(--gold); font-size: 13px; font-weight: 800; box-shadow: 0 3px 0 rgba(0,0,0,.2); transition: transform .13s ease, filter .13s ease; }.button:hover { filter: brightness(1.07); transform: translateY(-1px); }.button:active { transform: translateY(1px); box-shadow: none; }.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.button.secondary { color: var(--ink); border-color: rgba(255,255,255,.2); background: rgba(6,22,25,.48); }.button.danger { color: white; background: #c94e5b; }.button.cyan { color: #14283b; background: var(--cyan); }.button.pink { color: #3b1730; background: var(--pink); }.button.button-quiet { color: var(--muted); border-color: var(--line); background: transparent; box-shadow: none; font-size: 12px; }
.action-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }.action-label { width: 100%; color: rgba(239,255,244,.7); font-size: 11px; }
.choice-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #dbe8df; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(5,24,22,.35); font-size: 12px; }.choice-toggle input { accent-color: var(--gold); }
.joker-picker { width: min(100%, 680px); gap: 10px; }.joker-choice { min-width: min(100%, 260px); flex: 1 1 250px; justify-content: flex-start; padding: 10px 12px; }.joker-choice .card.small { margin-right: 0; }.joker-choice > span { color: #d9e8df; font-size: 11px; font-weight: 750; }.joker-choice select { min-width: 105px; margin-left: auto; }
.reveal-stack { display: flex; align-items: center; justify-content: center; padding: 0 7px; }.reveal-player { margin: 0 13px; color: rgba(238,255,247,.72); font-size: 11px; }.reveal-player strong { display: block; margin-top: 5px; color: var(--gold); font-size: 12px; }
.reveal-board { width: min(100%, 760px); margin: 2px auto 5px; padding: 6px 7px; border: 1px solid rgba(242,199,118,.38); border-radius: 10px; background: rgba(4,28,25,.4); }.reveal-board-title { margin-bottom: 5px; color: var(--gold); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }.reveal-board-title span { margin-left: 5px; color: #a8c9be; font-weight: 500; letter-spacing: 0; text-transform: none; }.reveal-seat-list { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 6px; }.reveal-player { min-width: 112px; margin: 0; padding: 4px 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(3,20,20,.24); }.reveal-player.is-folded { border-color: rgba(255,118,109,.45); background: rgba(104,30,33,.18); }.reveal-player-heading { display: flex; flex-direction: column; gap: 1px; text-align: left; }.reveal-player-heading span { color: #f0f8f4; font-size: 10px; font-weight: 750; }.reveal-player-heading em { color: #aac7bf; font-size: 8px; font-style: normal; }.is-folded .reveal-player-heading em { color: #ffaaa1; font-weight: 750; }.reveal-player .reveal-stack { min-height: 34px; justify-content: flex-start; padding: 3px 0 0; }.reveal-player strong { text-align: left; font-size: 9px; }.reveal-board.is-compact .reveal-player { min-width: 146px; }.reveal-board.is-compact .card.small { width: 29px; height: 40px; flex-basis: 29px; margin-right: -7px; padding: 3px; }.reveal-board.is-compact .card.small .card-effect { font-size: 5px; }.reveal-board.is-compact .reveal-player .reveal-stack { min-height: 30px; }
.combat-hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(100%, 640px); margin: 4px 0 1px; }.combatant { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(5,23,22,.38); color: #d9eee4; font-size: 10px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.combatant.attacker { border-color: rgba(242,199,118,.7); }.combatant.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,199,118,.18), 0 0 18px rgba(242,199,118,.2); transform: translateY(-1px); }.combatant b { color: #fff6df; }.combatant span { padding: 2px 4px; border-radius: 4px; background: rgba(255,255,255,.08); }.combatant span strong { color: #ffe6c6; }.hud-shield { color: var(--cyan); }.hud-poison { color: #d4a7ff; }.combatant i { color: #ffa19b; font-size: 9px; font-style: normal; font-weight: 800; }
.battle-fx { position: absolute; z-index: 8; top: 48%; left: 50%; min-width: 0; pointer-events: none; transform: translate(-50%, -50%); }.battle-fx-pop { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 2px solid currentColor; border-radius: 999px; background: rgba(6,22,25,.93); box-shadow: 0 14px 32px rgba(0,0,0,.38), 0 0 32px currentColor; font-size: 18px; font-weight: 900; letter-spacing: .07em; animation: battle-pop 2.05s cubic-bezier(.15,.78,.2,1) both; }.battle-fx-pop span { font-size: 31px; line-height: .8; }.battle-fx-pop.damage { color: #ff8d92; }.battle-fx-pop.heal { color: #8fe6a8; }.battle-fx-pop.poison { color: #d5adff; }.battle-fx-pop.antiheal { color: #ff9ecb; }.battle-fx-pop.shield { color: #8de0ff; }.battle-fx-pop.initiative { color: #ffd66e; }.battle-fx-pop.duel { color: #ffbd78; }.battle-fx-pop.reveal { color: #f2c776; }.battle-fx-pop.turn { color: #d8ece2; }.battle-fx-pop.death { color: #ff666d; animation: ko-pop 2.5s ease-out both; }.battle-fx-pop.fold { color: #ffd27c; }@keyframes battle-pop { 0% { opacity: 0; transform: translateY(28px) scale(.55); } 12% { opacity: 1; transform: translateY(0) scale(1.14); } 76% { opacity: 1; transform: translateY(-5px) scale(1); } 100% { opacity: 0; transform: translateY(-28px) scale(.92); } }@keyframes ko-pop { 0% { opacity: 0; transform: scale(1.8) rotate(-10deg); } 14% { opacity: 1; transform: scale(.94) rotate(2deg); } 30% { transform: scale(1.05) rotate(-1deg); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85) translateY(-28px); } }
.effect-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }.effect-button { position: relative; min-width: 112px; text-align: left; }.effect-button small { display: block; margin-top: 2px; opacity: .75; font-size: 10px; }.effect-button.damage-effect { color: #44181d; background: #ff9da1; }.effect-button.heal-effect { color: #103822; background: #96e4ad; }.effect-button.poison-effect { background: #d0aeff; }.effect-button.shield-effect { background: #9adbed; }
.status-callout { max-width: 600px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; color: #e5f3e9; background: rgba(6,28,27,.35); font-size: 12px; }
.leaderboard { display: grid; width: min(100%, 360px); gap: 5px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }.leaderboard li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(5,23,22,.34); color: #dcece3; }.leaderboard li > span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #1d162c; background: var(--gold); font-size: 11px; font-weight: 900; }.leaderboard li b { font-size: 12px; }.leaderboard li em { color: var(--muted); font-size: 10px; font-style: normal; }.leaderboard li.is-human { border-color: rgba(242,199,118,.7); background: rgba(242,199,118,.12); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; }.legend-dot.shield { background: var(--cyan); }.legend-dot.poison { background: var(--poison); }.legend-dot.true { background: var(--danger); }
.toast { position: fixed; z-index: 20; bottom: 24px; left: 50%; max-width: min(90vw, 560px); padding: 10px 14px; border: 1px solid rgba(242,199,118,.4); border-radius: 10px; color: #fff0c9; background: rgba(23, 15, 38, .96); box-shadow: var(--shadow); font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .25s ease, transform .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.pwa-notice { position: fixed; z-index: 30; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 420px); padding: 10px 12px; border: 1px solid rgba(242,199,118,.45); border-radius: 12px; color: #fff0c9; background: rgba(23, 15, 38, .97); box-shadow: var(--shadow); font-size: 13px; }.pwa-notice[hidden] { display: none; }.pwa-notice .button { flex: 0 0 auto; padding: 8px 10px; font-size: 12px; }

.hand { width: 100%; max-width: 100%; overflow: hidden; scrollbar-width: none; }.hand::-webkit-scrollbar { display: none; }

.card.draw-in { animation: deal-card .48s cubic-bezier(.18,.82,.28,1.15) both; animation-delay: var(--deal-delay, 0ms); }
@keyframes deal-card { 0% { opacity: 0; transform: translateY(-42px) rotate(-8deg) scale(.86); filter: brightness(1.32); } 58% { opacity: 1; transform: translateY(4px) rotate(1deg) scale(1.04); filter: brightness(1.12); } 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: none; } }
.battle-fx { inset: 0; min-width: 0; transform: none; overflow: visible; transition: none; }.battle-fx-pop { position: absolute; top: 48%; left: 50%; }.battle-fx-pop.side-left { left: var(--duel-fx-left); }.battle-fx-pop.side-right { left: var(--duel-fx-right); }.battle-fx-pop.seat-top { top: 16%; left: var(--seat-x, 50%); }
.battle-fx-pop.quick { padding: 8px 12px; font-size: 13px; animation: quick-impact .56s ease-out both; }.battle-fx-pop.quick span { font-size: 22px; }
@keyframes battle-pop { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 28px)) scale(.55); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); } 76% { opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 28px)) scale(.92); } }
@keyframes quick-impact { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.64); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); } 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } }
.battle-fx-pop.death { padding: 8px 12px; font-size: 14px; animation: ko-seat-pop 1.25s cubic-bezier(.18,.8,.25,1) both; }.battle-fx-pop.death span { font-size: 23px; }@keyframes ko-seat-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.52); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 62% { opacity: 1; transform: translate(-50%, calc(-50% - 8px)) scale(1); } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scale(.9); } }
/* Arcade polish: the game board keeps a stable rhythm while the important moments get the energy. */
.table { isolation: isolate; transition: border-color .32s ease, box-shadow .32s ease, background .32s ease; }
.table::before { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 50% 8%, rgba(157,255,205,.12), transparent 40%), linear-gradient(110deg, transparent 22%, rgba(255,255,255,.025) 46%, transparent 70%); opacity: .8; }
.felt-glow { animation: felt-drift 10s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes felt-drift { from { opacity: .3; transform: rotate(10deg) scale(1); } to { opacity: .56; transform: rotate(16deg) scale(1.06); } }
.table[data-phase="duel"] { border-color: rgba(255,193,112,.5); box-shadow: inset 0 0 0 10px rgba(3,24,29,.45), 0 0 34px rgba(242,199,118,.12), var(--shadow); }
.table[data-phase="showdown"] { border-color: rgba(242,199,118,.62); box-shadow: inset 0 0 0 10px rgba(3,24,29,.45), 0 0 42px rgba(242,199,118,.18), var(--shadow); }
.table[data-phase="post"] { border-color: rgba(205,158,255,.5); }
.combat-board { display: grid; grid-template-rows: 20px 48px 40px minmax(80px, 1fr) minmax(48px, auto); align-content: stretch; justify-items: center; row-gap: 4px; padding-top: 42px; padding-bottom: 24px; }
.phase-label { display: grid; min-height: 20px; margin: 0; place-items: center; }
.combat-board h1 { display: grid; width: 100%; min-height: 48px; place-items: center; }
.table-copy { display: grid; min-height: 40px; margin: 0; place-items: center; }
.center-cards { align-self: center; width: 100%; min-height: 80px; margin: 0; }
.table-actions { align-content: center; align-items: center; min-height: 48px; }
.combat-board.is-gameover { grid-template-rows: auto auto minmax(210px, auto) 0 auto; min-height: 510px; align-content: start; row-gap: 8px; padding-top: 36px; padding-bottom: 30px; }
.combat-board.is-gameover h1 { min-height: 58px; }
.combat-board.is-gameover .table-copy { align-self: start; min-height: 210px; padding-top: 4px; }
.combat-board.is-gameover .center-cards { display: none; min-height: 0; }
.combat-board.is-gameover .leaderboard { margin: 0 auto; }
.combat-board.phase-enter .phase-label { animation: phase-label-in .32s cubic-bezier(.2,.88,.3,1) both; }
.combat-board.phase-enter h1 { animation: phase-title-in .43s cubic-bezier(.16,.9,.28,1.08) both; }
.combat-board.phase-enter .table-copy { animation: phase-copy-in .42s ease-out both; }
.combat-board.phase-enter .center-cards, .combat-board.phase-enter .table-actions { animation: phase-content-in .46s cubic-bezier(.2,.84,.25,1) both; }
@keyframes phase-label-in { from { opacity: 0; letter-spacing: .35em; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phase-title-in { from { opacity: 0; transform: translateY(13px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes phase-copy-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phase-content-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.player { transition: background .28s ease, box-shadow .28s ease, filter .28s ease, opacity .28s ease; }
.player.is-active-turn { z-index: 1; background: linear-gradient(90deg, rgba(242,199,118,.18), rgba(130,227,239,.055)); box-shadow: inset 0 0 0 1px rgba(242,199,118,.32), 0 0 18px rgba(242,199,118,.11); animation: active-seat 1.5s ease-in-out infinite; }
.player.is-active-turn::after { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,199,118,.12), 0 0 12px var(--gold); }
@keyframes active-seat { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(242,199,118,.26), 0 0 12px rgba(242,199,118,.08); } 50% { box-shadow: inset 0 0 0 1px rgba(242,199,118,.56), 0 0 25px rgba(242,199,118,.2); } }
.player-stats span.is-rising { animation: stat-rise .44s cubic-bezier(.2,.9,.25,1.2) both; }
.player-stats span.is-falling { animation: stat-fall .44s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes stat-rise { 0% { transform: scale(.72); filter: brightness(1); } 50% { transform: scale(1.24); filter: brightness(1.55); } 100% { transform: scale(1); } }
@keyframes stat-fall { 0% { transform: scale(.72); filter: brightness(1); } 50% { transform: scale(1.2); filter: brightness(1.45); } 100% { transform: scale(1); } }
.card { transform-origin: 50% 100%; will-change: transform; }
.card.interactive:focus-visible { z-index: 5; outline: 3px solid var(--cyan); outline-offset: 3px; transform: translateY(-12px) scale(1.02); }
.card.draw-in { animation: deal-card-arcade .58s cubic-bezier(.18,.86,.22,1.16) both; animation-delay: var(--deal-delay, 0ms); }
@keyframes deal-card-arcade { 0% { opacity: 0; transform: translate3d(0,-58px,0) rotate(-8deg) scale(.74); filter: brightness(1.5) saturate(1.3); } 54% { opacity: 1; transform: translate3d(0,7px,0) rotate(1deg) scale(1.055); filter: brightness(1.18); } 76% { transform: translate3d(0,-3px,0) rotate(-.5deg) scale(.99); } 100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: none; } }
.table-actions .button:not(:disabled) { box-shadow: 0 3px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.04); }
.table-actions .button:not(:disabled):hover { transform: translateY(-2px) scale(1.025); box-shadow: 0 6px 15px rgba(0,0,0,.28), 0 0 16px rgba(242,199,118,.15); }
.table-actions .button[data-action="start-duel"] { background-image: linear-gradient(135deg, #f7d47b, #edaf59); box-shadow: 0 3px 0 rgba(75,43,12,.45), 0 0 18px rgba(242,199,118,.16); }
.table-actions .button[data-action="play-effect"] { animation: action-ready 2.4s ease-in-out infinite; }
@keyframes action-ready { 0%, 100% { filter: saturate(1); } 50% { filter: saturate(1.16) brightness(1.05); } }
.status-callout { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.12); }
.hand-insights { transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.hand-area:focus-within .hand-insights { border-color: rgba(242,199,118,.3); box-shadow: 0 0 18px rgba(242,199,118,.07); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* A reveal rack never changes size while cards are turned over. Two and three
   players keep their natural centred columns; four and five use the compact rack. */
.center-cards { display: grid; height: 142px; min-height: 142px; margin: 0; place-items: center; }
.reveal-board { width: min(100%, 640px); min-height: 126px; margin: 0 auto; padding: 7px 8px; }
.reveal-seat-list { display: grid; grid-template-columns: repeat(var(--reveal-count, 3), minmax(0, 150px)); align-items: start; justify-content: center; gap: 7px; width: 100%; min-height: 88px; max-width: 100%; overflow: hidden; padding: 0 2px 4px; }
.reveal-player { width: 150px; height: 84px; min-width: 0; margin: 0; overflow: hidden; }
.reveal-board.is-compact .reveal-seat-list { grid-template-columns: repeat(var(--reveal-count, 4), minmax(0, 1fr)); }
.reveal-board.is-compact .reveal-player { width: auto; height: 82px; min-width: 0; }

@media (max-width: 950px) { .table { --duel-fx-left: 27%; --duel-fx-right: 73%; grid-template-columns: 1fr; }.activity-panel { display: none; }.combat-board { min-height: 360px; } }
@media (max-width: 690px) { .app-shell { padding: 10px 10px 16px; }.topbar { flex-wrap: wrap; gap: 10px; }.round-status { order: 3; width: 100%; margin-left: 0; }.new-game-controls { margin-left: auto; }.game-layout { display: flex; flex-direction: column; }.player { padding: 8px 10px; }.players-panel > #players { grid-template-columns: repeat(var(--seat-count, 3), minmax(128px, 1fr)); }.player:nth-child(even) { border-right: 1px solid var(--line); }.player:last-child { border-right: 0; }.table { min-height: 360px; }.combat-board { min-height: 360px; padding: 24px 14px; }.combat-board.is-gameover { min-height: 500px; padding-bottom: 26px; }.center-cards { height: 128px; min-height: 128px; }.reveal-board { min-height: 118px; }.reveal-seat-list { min-height: 80px; }.reveal-player { height: 78px; }.reveal-board.is-compact .reveal-player { height: 76px; }.battle-fx { top: 50%; }.battle-fx-pop { padding: 9px 12px; font-size: 14px; }.battle-fx-pop span { font-size: 24px; }.hand-area { margin-top: 10px; }.card { width: 61px; height: 92px; flex-basis: 61px; }.hand-card-slot { min-width: 0; flex-basis: 61px; }.card-corner { font-size: 12px; }.card-effect { font-size: 14px; }.hand { justify-content: center; padding: 0 4px; }.hand-heading { align-items: flex-start; }.hand-tools { align-items: flex-end; flex-direction: column; }.hand-meta { max-width: 145px; }.hand-insights { align-items: flex-start; justify-content: flex-start; }.reveal-insight { padding-left: 0; border-left: 0; }.reveal-player { margin: 0; }.graveyard-list { grid-template-columns: 1fr; }.menu-scene { padding: 16px 10px; }.menu-card { padding: 30px 21px; }.menu-modes { grid-template-columns: 1fr; }.menu-mode { min-height: 180px; } }
@media (max-width: 500px) { .hand { justify-content: center; gap: 3px; padding: 0 2px; }.hand > .card, .hand-card-slot { flex: 1 1 0; width: auto; min-width: 0; max-width: 57px; }.hand-card-slot { padding-top: 26px; }.hand > .card, .hand-card-slot > .card { width: 100%; height: auto; flex-basis: auto; aspect-ratio: 57 / 92; }.joker-inline-choice { transform: scale(.82); transform-origin: top center; } }
@media (max-width: 390px) { .brand { font-size: 22px; }.new-game-controls label { display: none; }.button { padding: 8px 9px; font-size: 12px; }.players-panel > #players { grid-template-columns: repeat(var(--seat-count, 3), minmax(118px, 1fr)); }.player-stats { gap: 4px; }.menu-sound-control { top: 12px; right: 12px; } }

/* Readability pass: table information stays roomy and centred at every seat count. */
#players { grid-template-columns: repeat(var(--seat-count, 3), minmax(154px, 1fr)); }
.players-panel.is-crowded .player { padding: 10px 12px; }
.players-panel.is-crowded .player-name { font-size: 11px; }
.player-stats, .players-panel.is-crowded .player-stats { gap: 5px; font-size: 10px; }
.player-stats span, .players-panel.is-crowded .player-stats span { width: 24px; height: 24px; font-size: 10px; }
.players-panel.is-crowded .tag { padding: 2px 4px; font-size: 8px; }

.center-cards { height: 170px; min-height: 170px; }
.reveal-board { width: min(100%, 740px); min-height: 154px; padding: 8px 10px; }
.reveal-seat-list { grid-template-columns: repeat(var(--reveal-count, 3), minmax(0, 164px)); gap: 9px; min-height: 103px; }
.reveal-player { width: 164px; height: 96px; padding: 5px 7px; }
.reveal-board:not(.is-compact) .card.small { width: 37px; height: 53px; flex-basis: 37px; margin-right: -7px; }
.reveal-board:not(.is-compact) .card.small .card-effect { font-size: 6px; }
.reveal-board.is-compact .reveal-seat-list { gap: 7px; }
.reveal-board.is-compact .reveal-player { height: 92px; padding: 5px 3px; }
.reveal-board.is-compact .card.small { width: 30px; height: 43px; flex-basis: 30px; margin-right: -6px; padding: 3px; }
.reveal-progress { min-height: 14px; margin-top: 3px; color: #bad8cb; font-size: 9px; text-align: center; }
.reveal-progress b, .reveal-player strong.is-leading { color: var(--gold); }
.reveal-player strong { min-height: 11px; margin-top: 4px; white-space: nowrap; }

.combat-hud { gap: 8px; margin: 10px 0 2px; }
.table-actions { width: min(100%, 720px); min-height: 64px; margin-top: 10px; gap: 14px; }
.effect-grid { gap: 12px; }
.effect-button { min-width: 126px; }

.graveyard-cards { scrollbar-width: thin; scrollbar-color: rgba(242,199,118,.8) rgba(255,255,255,.1); }
.graveyard-cards::-webkit-scrollbar { display: block; height: 6px; }
.graveyard-cards::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 99px; }
.graveyard-cards::-webkit-scrollbar-thumb { background: rgba(242,199,118,.78); border-radius: 99px; }
.graveyard-cards .private-card { border-color: #d0a5ff; box-shadow: 0 0 0 2px rgba(177,121,255,.35), 0 5px 13px rgba(0,0,0,.25); }

.leaderboard-caption { margin-bottom: 9px; color: #bad8cb; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.combat-board.is-gameover { grid-template-rows: auto auto minmax(290px, auto) 0 auto; min-height: 600px; padding-top: 42px; padding-bottom: 38px; }
.combat-board.is-gameover .table-copy { min-height: 290px; }
.leaderboard { width: min(100%, 440px); gap: 9px; }
.leaderboard li { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 11px 13px; border-radius: 10px; }
.leaderboard li > span { width: 25px; height: 25px; font-size: 12px; }
.leaderboard li b { font-size: 14px; }
.leaderboard li em { font-size: 11px; }

.leave-confirm { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,3,14,.72); backdrop-filter: blur(9px); }
.leave-confirm[hidden] { display: none !important; }
.leave-confirm-card { width: min(420px, 100%); padding: 25px; border: 1px solid rgba(242,199,118,.46); border-radius: 18px; background: linear-gradient(145deg, rgba(35,29,66,.99), rgba(12,13,33,.99)); box-shadow: 0 28px 80px rgba(0,0,0,.58); text-align: center; }
.leave-confirm-card h2 { margin: 3px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 30px; letter-spacing: -.03em; }
.leave-confirm-card p { margin: 0; color: #cbd8d1; font-size: 13px; line-height: 1.5; }
.leave-confirm-actions { display: flex; justify-content: center; gap: 9px; margin-top: 21px; }

@media (max-width: 690px) {
  .center-cards { height: 150px; min-height: 150px; }
  .reveal-board { min-height: 143px; }
  .reveal-seat-list { min-height: 94px; grid-template-columns: repeat(var(--reveal-count, 3), minmax(0, 158px)); }
  .reveal-player { width: 158px; height: 88px; }
  .reveal-board.is-compact .reveal-player { height: 86px; }
  .reveal-board.is-compact .card.small { width: 27px; height: 39px; flex-basis: 27px; margin-right: -6px; }
  .table-actions { min-height: 68px; margin-top: 8px; gap: 10px; }
  .effect-grid { gap: 8px; }
  .effect-button { min-width: 116px; }
  .combat-board.is-gameover { min-height: 590px; padding-top: 34px; }
  .combat-board.is-gameover .table-copy { min-height: 275px; }
}

/* Combat reflow: each fighter owns a side of the table; the card rack stays central. */
.player-topline { display: grid; grid-template-columns: minmax(42px, 1fr) auto auto; gap: 6px; }
.player-tags { min-width: 0; white-space: nowrap; }
.player-stats { margin-left: 0; }

.table-copy { width: min(100%, 680px); min-height: 48px; line-height: 1.5; }
.duel-stage { display: grid; grid-template-columns: minmax(108px, 124px) minmax(330px, 430px) minmax(108px, 124px); align-items: center; gap: 8px; width: min(100%, 710px); }
.duel-stage .reveal-board { width: 100%; min-height: 138px; }
.duel-stage .reveal-seat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 94px; gap: 7px; }
.duel-stage .reveal-player { width: auto; height: 88px; padding: 5px 4px; }
.duel-stage .reveal-board:not(.is-compact) .card.small { width: 30px; height: 43px; flex-basis: 30px; margin-right: -6px; }
.reveal-player strong { display: none !important; }
.duel-side { display: grid; min-width: 0; place-items: center; }
.duel-side .combatant { width: 100%; min-height: 80px; flex-direction: column; gap: 4px; padding: 8px 6px; }
.duel-side .combatant > b { font-size: 12px; }
.duel-side .combatant > span { width: 100%; text-align: center; }
.duel-side .combatant i { text-align: center; }
.combat-hud { margin: 8px 0 2px; }
.table[data-phase="duel"] .battle-fx-pop.side-left, .table[data-phase="duel-finish"] .battle-fx-pop.side-left { top: 64%; }
.table[data-phase="duel"] .battle-fx-pop.side-right, .table[data-phase="duel-finish"] .battle-fx-pop.side-right { top: 64%; }
.battle-fx-pop.death.side-left, .battle-fx-pop.death.side-right { top: 60%; }

.combat-board.is-duel-layout .table-actions { min-height: 130px; }
.duel-actions { display: grid; grid-template-rows: 72px 42px; gap: 12px; width: min(100%, 680px); min-height: 126px; }
.duel-actions .effect-grid { display: flex; flex-wrap: wrap; align-content: start; justify-content: center; gap: 10px; width: 100%; }
.duel-actions .effect-button { width: min(184px, 100%); min-width: 148px; min-height: 58px; padding: 9px 11px; white-space: normal; }
.duel-actions.is-waiting { place-items: center; }
.duel-actions.is-waiting .status-callout { align-self: center; }
.duel-finish-row { display: grid; min-height: 42px; place-items: center; }
.target-actions { display: grid; gap: 11px; width: min(100%, 900px); }
.target-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 9px; width: 100%; }
.target-list .button { min-height: 43px; white-space: normal; }
.target-concede { display: grid; min-height: 42px; place-items: center; }

.leaderboard li em { max-width: 185px; line-height: 1.25; text-align: right; }

@media (max-width: 690px) {
  .rules-drawer { top: 8px; right: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 15px; border-radius: 14px; }
  .rules-heading h2 { font-size: 23px; }
  .rules-grid { grid-template-columns: 1fr; }
  .rules-aces { grid-column: auto; }
  .rules-aces ul { grid-template-columns: 1fr; }
  .duel-stage { grid-template-columns: minmax(88px, 102px) minmax(0, 1fr) minmax(88px, 102px); gap: 6px; width: 100%; }
  .duel-side .combatant { min-height: 78px; padding: 7px 4px; font-size: 9px; }
  .duel-side .combatant > b { font-size: 10px; }
  .duel-stage .reveal-board { min-height: 128px; padding: 7px 5px; }
  .duel-stage .reveal-seat-list { min-height: 85px; gap: 4px; }
  .duel-stage .reveal-player { height: 80px; padding: 4px 2px; }
  .duel-stage .reveal-board:not(.is-compact) .card.small { width: 25px; height: 37px; flex-basis: 25px; margin-right: -5px; }
  .duel-actions { width: min(100%, 500px); }
  .duel-actions .effect-grid { gap: 8px; }
  .duel-actions .effect-button { min-width: 132px; }
  .target-list { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
}

/* Rules drawer: scan-friendly table reference instead of dense paragraphs. */
.rules-drawer { width: min(560px, calc(100vw - 32px)); padding: 18px; scrollbar-gutter: stable; background: linear-gradient(145deg, rgba(28,48,64,.99), rgba(15,11,39,.99)); }
.rules-heading { align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(242,199,118,.24); }
.rules-heading h2 { font-size: 29px; }
.rules-heading .button { flex: 0 0 auto; }
.rules-objective { display: flex; align-items: center; gap: 9px; margin: 12px 0; padding: 9px 10px; border: 1px solid rgba(242,199,118,.2); border-radius: 10px; background: rgba(242,199,118,.07); color: #f2f7ef; font-size: 12px; line-height: 1.3; }
.rules-objective > span:first-child { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #ffb4b3; background: rgba(201,78,91,.18); font-size: 13px; }
.rules-objective b { color: #fff6df; }
.rules-objective small { display: block; margin-top: 1px; color: #b9d2c7; font-size: 10px; }
.rules-grid { grid-template-columns: 1fr; gap: 8px; }
.rules-block { padding: 10px 11px; border-color: rgba(255,255,255,.12); background: rgba(4,18,29,.43); }
.rules-block h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rules-round .rules-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; padding: 0; list-style: none; }
.rules-round .rules-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
.rules-round .rules-steps li > span { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(242,199,118,.5); border-radius: 50%; color: var(--gold); background: rgba(242,199,118,.08); font-size: 9px; font-weight: 900; }
.rules-round .rules-steps p { font-size: 10px; line-height: 1.35; }
.rules-round .rules-steps b { display: block; color: #fff4db; font-size: 10px; }
.rules-rank-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 7px; margin: 0; padding: 0; list-style: none; }
.rules-rank-list li { display: flex; align-items: center; gap: 5px; min-width: 0; color: #d9e7df; font-size: 10px; line-height: 1.2; }
.rules-rank-list b { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(242,199,118,.37); border-radius: 5px; color: #fff0c9; background: rgba(242,199,118,.1); font-size: 9px; }
.rules-effects ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; padding: 0; list-style: none; }
.rules-effects li { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 5px; margin: 0; font-size: 10px; line-height: 1.33; }
.rules-effects .effect-chip { margin: 0; font-size: 9px; white-space: nowrap; }
.rules-aces { grid-column: auto; }
.rules-aces ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; }
.rules-aces li { font-size: 10px; line-height: 1.34; }
.rules-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; margin: 9px 1px 0; padding: 8px 9px; border-left: 2px solid rgba(242,199,118,.55); border-radius: 0 7px 7px 0; background: rgba(242,199,118,.055); color: #bcd7ca; font-size: 9px; line-height: 1.35; }
.rules-note > span:first-child { color: var(--gold); text-align: center; }

@media (max-width: 520px) {
  .rules-drawer { width: calc(100vw - 16px); padding: 14px; }
  .rules-heading h2 { font-size: 24px; }
  .rules-heading .button { padding: 8px 9px; font-size: 11px; }
  .rules-round .rules-steps, .rules-effects ul, .rules-aces ul { grid-template-columns: 1fr; }
  .rules-rank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rules-drawer { animation: none; }
}

/* Rules drawer v2: a readable reference sheet, intentionally allowed to scroll. */
.rules-drawer { top: 18px; right: 18px; width: min(640px, calc(100vw - 36px)); max-height: calc(100dvh - 36px); padding: 22px; border-color: rgba(242,199,118,.55); border-radius: 20px; background: linear-gradient(155deg, rgba(20,42,54,.99), rgba(15,11,40,.995) 62%); box-shadow: -22px 28px 86px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.05); }
.rules-heading { align-items: flex-start; padding-bottom: 15px; border-bottom-color: rgba(242,199,118,.3); }
.rules-heading h2 { margin-top: 2px; font-size: clamp(28px, 3vw, 35px); }
.rules-heading .eyebrow { margin-bottom: 4px; }
.rules-heading .button { margin-top: 1px; padding: 9px 12px; color: #d5e5dd; border-color: rgba(255,255,255,.18); }
.rules-lede { margin: 10px 0 14px; color: #bfd2c9; font-size: 13px; line-height: 1.45; }
.rules-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; padding: 12px 13px; border: 1px solid rgba(242,199,118,.32); border-radius: 13px; background: linear-gradient(90deg, rgba(242,199,118,.12), rgba(242,199,118,.035)); }
.rules-hero-icon { display: grid; flex: 0 0 33px; width: 33px; height: 33px; place-items: center; border-radius: 50%; color: #ffceca; background: rgba(201,78,91,.23); font-size: 16px; }
.rules-hero p { display: grid; gap: 1px; margin: 0; }.rules-hero p > span { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.rules-hero b { color: #fff8e9; font-size: 14px; }.rules-hero small { color: #afc8bd; font-size: 11px; }
.rules-section { margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(4,17,28,.46); }
.rules-section-heading { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 9px; align-items: center; margin-bottom: 12px; }
.rules-section-heading > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(242,199,118,.5); border-radius: 8px; color: var(--gold); background: rgba(242,199,118,.09); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.rules-section-heading h3 { margin: 0; color: #fff3d9; font-family: Georgia, "Times New Roman", serif; font-size: 18px; letter-spacing: -.02em; }.rules-section-heading p { margin: 1px 0 0; color: #a9c2b8; font-size: 11px; line-height: 1.3; }
.rules-flow-list, .rules-power-list, .rules-effect-list, .rules-special-list { margin: 0; padding: 0; list-style: none; }
.rules-flow-list { display: grid; gap: 8px; }.rules-flow-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: start; }.rules-flow-list li > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #182039; background: var(--gold); font-size: 11px; font-weight: 900; }.rules-flow-list p { display: grid; gap: 1px; margin: 0; }.rules-flow-list b { color: #eaf5ee; font-size: 12px; }.rules-flow-list small { color: #b9cdc3; font-size: 11px; line-height: 1.35; }
.rules-power-list { display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; }.rules-power-list li { display: grid; grid-template-columns: 33px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 28px; padding: 4px 9px; color: #dcebe3; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; }.rules-power-list li:first-child { border-top: 0; }.rules-power-list b { display: grid; width: 25px; height: 20px; place-items: center; border: 1px solid rgba(242,199,118,.38); border-radius: 5px; color: #fff2cf; background: rgba(242,199,118,.09); font-size: 10px; }.rules-power-list li:nth-last-child(-n + 3) b { border-color: rgba(255,205,112,.7); background: rgba(242,199,118,.18); color: #fff7df; }
.rules-effect-list { display: grid; gap: 9px; }.rules-effect-list li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.035); }.rules-effect-list .effect-chip { align-self: start; margin-top: 1px; padding: 4px 6px; font-size: 10px; }.rules-effect-list p { display: grid; gap: 2px; margin: 0; }.rules-effect-list b { color: #eef8f0; font-size: 12px; }.rules-effect-list small { color: #b6cabe; font-size: 11px; line-height: 1.35; }
.rules-special-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.rules-special-list li { display: grid; gap: 2px; min-height: 56px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.025); }.rules-special-list b { color: #fff0c9; font-size: 11px; }.rules-special-list span { color: #bcd0c5; font-size: 10px; line-height: 1.32; }
.rules-note { grid-template-columns: 25px minmax(0, 1fr); gap: 9px; margin: 15px 0 0; padding: 11px 12px; border: 1px solid rgba(242,199,118,.19); border-left: 3px solid rgba(242,199,118,.75); border-radius: 9px; background: rgba(242,199,118,.065); color: #c7d9cf; font-size: 11px; line-height: 1.42; }.rules-note > span:first-child { display: grid; place-items: start center; font-size: 14px; }.rules-note b { color: #fff1cb; }

@media (max-width: 620px) {
  .rules-drawer { top: 8px; right: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px; border-radius: 16px; }
  .rules-heading h2 { font-size: 27px; }
  .rules-lede { font-size: 12px; }
  .rules-section { padding: 12px; }
  .rules-special-list { grid-template-columns: 1fr; }
}

/* Tabbed rules: one focused subject at a time instead of a long reference scroll. */
.rules-drawer { overflow: hidden; }
.rules-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 14px 0 16px; padding: 4px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(3,15,26,.55); }
.rules-tabs button { min-width: 0; padding: 8px 6px; border: 1px solid transparent; border-radius: 7px; color: #a9c2b8; background: transparent; font-size: 10px; font-weight: 850; line-height: 1.1; white-space: nowrap; }.rules-tabs button:hover { color: #fff0c9; background: rgba(255,255,255,.05); }.rules-tabs button[aria-selected="true"] { color: #22182f; border-color: rgba(255,236,191,.85); background: linear-gradient(135deg, #f5ce80, #dcae5d); box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.rules-tab-panel { animation: rules-tab-in .16s ease-out; }.rules-tab-panel[hidden] { display: none !important; }.rules-tab-panel .rules-lede { margin: 0 0 12px; }.rules-tab-panel .rules-section { margin-top: 0; }.rules-tab-panel .rules-section + .rules-section { margin-top: 12px; }
.rules-tab-panel .rules-hero { margin-bottom: 12px; }
.rules-power-examples li { grid-template-columns: 34px minmax(0, 1fr); min-height: 31px; }.rules-power-examples li > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.rules-power-examples strong { color: #edf7f0; font-size: 12px; }.rules-power-examples small { color: #9fbbaf; font-size: 10px; text-align: right; }
.rules-ace-summary { margin: 0 0 10px; padding: 9px 10px; border-left: 3px solid rgba(242,199,118,.7); border-radius: 0 8px 8px 0; color: #c6d8ce; background: rgba(242,199,118,.07); font-size: 11px; line-height: 1.4; }.rules-ace-summary b { color: #fff0c9; }
.rules-decision-list ul, .rules-tips ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.rules-decision-list li { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 9px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.07); }.rules-decision-list li:first-child { padding-top: 0; border-top: 0; }.rules-decision-list b { color: #fff0c9; font-size: 11px; }.rules-decision-list span { color: #bfd0c6; font-size: 11px; line-height: 1.35; }
.rules-tips li { position: relative; padding-left: 17px; color: #c6d8ce; font-size: 11px; line-height: 1.38; }.rules-tips li::before { position: absolute; left: 0; color: var(--gold); content: "✦"; }
@keyframes rules-tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 620px) {
  .rules-drawer { overflow-y: auto; }
  .rules-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-tabs button { padding: 8px; }
  .rules-power-examples li > span { display: grid; gap: 1px; }.rules-power-examples small { text-align: left; }
}

@media (max-height: 720px) and (min-width: 621px) {
  .rules-drawer { overflow-y: auto; }
}

/* Compact card faces make the hand-ranking examples scannable at a glance. */
.rules-hand-sample { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 25px; padding: 1px 0; }
.rules-hand-sample i { display: grid; width: 21px; height: 29px; place-items: start center; padding-top: 3px; border: 1px solid rgba(255,255,255,.56); border-radius: 4px; box-shadow: -2px 1px 3px rgba(0,0,0,.24); background: linear-gradient(145deg, #fffdf7, #e8e3d9); font-family: Inter, system-ui, sans-serif; font-size: 9px; font-style: normal; font-weight: 950; line-height: 1; letter-spacing: -.04em; }
.rules-hand-sample i + i { margin-left: -5px; }.rules-hand-sample i.damage { color: #d1515b; }.rules-hand-sample i.heal { color: #438f68; }.rules-hand-sample i.poison { color: #8455c4; }.rules-hand-sample i.shield { color: #3f9bc2; }.rules-hand-sample i.joker { color: #e5ad43; border-color: rgba(242,199,118,.9); background: linear-gradient(145deg, #493567, #1c2545); }
.rules-flow-list { gap: 7px; }.rules-flow-list small { line-height: 1.3; }

/* Persistent profile: small enough to stay a utility, rich enough to make
   progression visible without rebuilding the menu. */
.menu-profile-control { position: absolute; top: 18px; left: 96px; }
.profile-drawer { position: fixed; z-index: 82; top: 18px; right: 18px; width: min(410px, calc(100vw - 36px)); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 20px; border: 1px solid rgba(242,199,118,.55); border-radius: 18px; color: #dbe9e2; background: linear-gradient(155deg, rgba(20,42,54,.99), rgba(15,11,40,.995) 64%); box-shadow: -22px 28px 86px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.05); animation: rules-drawer-in .2s ease-out; }.profile-drawer[hidden] { display: none !important; }
.profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.12); }.profile-heading h2 { margin: 2px 0 0; color: #fff5db; font-family: Georgia, "Times New Roman", serif; font-size: 27px; letter-spacing: -.03em; }.profile-copy { margin: 13px 0; color: #bfd2c8; font-size: 12px; line-height: 1.45; }.profile-name-field { display: grid; gap: 6px; color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.profile-name-field input { width: 100%; padding: 10px 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; color: #fff5db; background: rgba(4,19,29,.5); font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
.profile-level-card { display: grid; gap: 8px; margin: 15px 0 12px; padding: 13px; border: 1px solid rgba(242,199,118,.33); border-radius: 12px; background: linear-gradient(120deg, rgba(242,199,118,.14), rgba(75,66,142,.14)); }.profile-level-card > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }.profile-level-card span { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.profile-level-card strong { color: #fff4d7; font-family: Georgia, "Times New Roman", serif; font-size: 31px; line-height: .9; }.profile-level-card p { margin: 0; color: #cbdcd3; font-size: 11px; }.profile-xp-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(2,14,26,.66); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }.profile-xp-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #dcae5d, #f5d387); box-shadow: 0 0 13px rgba(242,199,118,.42); transition: width .35s ease; }
.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }.profile-stats div { padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(4,20,28,.36); }.profile-stats dt { color: #aabfb6; font-size: 10px; }.profile-stats dd { margin: 3px 0 0; color: #fff0ca; font-size: 20px; font-weight: 850; }.profile-status { min-height: 17px; margin: 13px 0 8px; color: #a9c9ba; font-size: 11px; }.profile-drawer > .button { width: 100%; }

@media (max-width: 620px) {
  .rules-hand-sample i { width: 20px; height: 28px; }
  .rules-hand-sample { margin-top: 2px; }
  .profile-drawer { top: 8px; right: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
}

/* Stable game canvas: reserve a zone for every game system. A compact phone
   is a complete tabletop, not a scaled desktop page. */
.logs-toggle, .landscape-notice { display: none; }
.effect-chip.ace-initiative { color: #ffe08a; border-color: rgba(255,208,99,.86); background: rgba(242,199,118,.18); box-shadow: 0 0 0 1px rgba(242,199,118,.12), 0 0 13px rgba(242,199,118,.11); }

@media (orientation: portrait) and (max-width: 700px) {
  .app-shell > :not(.landscape-notice) { visibility: hidden; }
  .landscape-notice { position: fixed; z-index: 100; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 28px; color: var(--ink); background: radial-gradient(circle at 50% 25%, #243b5e, transparent 36rem), var(--bg); text-align: center; }.landscape-notice .brand-mark { width: 48px; height: 48px; font-size: 24px; }.landscape-notice h1 { font-size: 30px; }.landscape-notice p { margin: 0; color: var(--muted); font-size: 14px; }
}

@media (orientation: landscape) and (min-width: 701px) {
  body:has(.app-shell:not([hidden])) { display: grid; min-height: 100dvh; place-items: center; }
  .app-shell { display: flex; width: min(1180px, calc(100vw - 32px)); min-height: min(650px, calc(100dvh - 24px)); margin: 0 auto; padding: 11px 12px; flex-direction: column; overflow: hidden; }
  .topbar { flex: 0 0 43px; min-height: 43px; gap: 11px; margin-bottom: 7px; }.brand { font-size: 21px; }.brand-mark { width: 30px; height: 30px; border-radius: 9px; }.round-status { font-size: 11px; }.new-game-controls { gap: 5px; }.new-game-controls .button { padding: 6px 9px; font-size: 10px; }
  .game-layout { display: grid; grid-template-rows: 44px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; gap: 6px; }.players-panel { min-height: 0; border-radius: 11px; }.players-panel > #players { grid-template-columns: repeat(var(--seat-count, 3), minmax(130px, 1fr)); }.player, .players-panel.is-crowded .player { display: flex; min-height: 44px; align-items: center; padding: 6px 9px; }.player-topline { width: 100%; grid-template-columns: minmax(44px, 1fr) auto auto; gap: 5px; }.player-name, .players-panel.is-crowded .player-name { font-size: 10px; }.player-tags { display: none; }.player-stats { gap: 3px; }.player-stats span, .players-panel.is-crowded .player-stats span { width: 20px; height: 20px; font-size: 8px; }.health-track { display: none; }
  .table { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 13px; }.table::after { inset: 6px; border-radius: 9px; }.combat-board { min-height: 0; height: 100%; grid-template-rows: 18px 40px minmax(35px, auto) minmax(0, 1fr) auto; align-content: stretch; row-gap: 2px; padding: 15px 90px 10px; }.combat-board h1 { min-height: 40px; font-size: clamp(24px, 2.6vw, 32px); }.phase-label { margin: 0; font-size: 9px; }.table-copy { min-height: 35px; margin: 0; font-size: 10px; line-height: 1.35; }.center-cards { min-height: 0; height: auto; margin: 0; }.table-actions { min-height: 36px; margin: 0; gap: 7px; }.table-actions .button, .status-callout { min-height: 34px; padding: 7px 10px; font-size: 10px; }.status-callout { padding: 7px 9px; }
  .logs-toggle { position: absolute; z-index: 9; top: 10px; right: 11px; display: inline-flex; padding: 6px 9px; font-size: 10px; }.activity-panel { display: none; position: absolute; z-index: 10; top: 7px; right: 7px; bottom: 7px; width: min(310px, 50%); margin: 0; border-color: rgba(242,199,118,.45); background: rgba(9,20,31,.985); box-shadow: -12px 0 28px rgba(0,0,0,.36); }.table.logs-open .activity-panel { display: block; }.activity-heading { padding: 9px 11px; font-size: 10px; }.log { height: calc(100% - 35px); padding: 9px 11px; gap: 6px; font-size: 10px; }
  .hand-area { flex: 0 0 166px; min-height: 166px; margin-top: 7px; padding: 8px 11px 9px; border-radius: 11px; }.hand-heading { align-items: center; gap: 8px; margin-bottom: 4px; }.hand-heading .eyebrow { margin: 0; font-size: 9px; }.hand-heading strong { display: none; }.hand-tools { flex-direction: row; align-items: center; gap: 6px; }.scout-toggle { padding: 5px 8px; font-size: 9px; }.hand-meta { max-width: none; font-size: 9px; }.hand-sort-controls { display: none; }.hand-insights { min-height: 22px; margin: 0 0 4px; padding: 4px 7px; gap: 4px 9px; font-size: 9px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }.hand-strength, .reveal-insight, .potential-effects { flex: 0 0 auto; gap: 4px; }.hand-strength > span, .potential-effects > span, .hand-strength em { font-size: 8px; }.effect-chip { padding: 2px 5px; font-size: 8px; }.hand { min-height: 112px; justify-content: center; gap: 6px; padding: 0 4px; overflow-x: auto; }.hand-card-slot { flex: 0 0 64px; padding-top: 0; }.hand > .card, .hand-card-slot > .card { width: 64px; height: 91px; flex-basis: 64px; padding: 6px; border-radius: 8px; }.card-corner { font-size: 13px; }.card-effect { font-size: 15px; }.card.selected { transform: translateY(-7px); outline-width: 2px; }
  .hand-area.is-gameover { flex-basis: 57px; min-height: 57px; }.hand-area.is-gameover .hand-insights, .hand-area.is-gameover .hand { display: none; }
  .graveyard-drawer { top: 52px; width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 64px); }.graveyard-list { max-height: calc(100dvh - 105px); }
}

@media (max-width: 700px), (orientation: portrait) {
  .hand-action { display: none !important; }
}

/* A fixed, regular phone window. The page background absorbs extra desktop
   space; nothing inside the table is allowed to rely on it. */
/* Phone landscape is defined by its short usable height, never its reported
   width. High-density Android devices can expose 960px+ CSS viewports. */
@media (orientation: landscape) and (max-height: 520px) {
  html, body { height: 100%; overscroll-behavior: none; touch-action: pan-x pan-y; }
  body.game-active { position: fixed; inset: 0; width: 100%; min-height: 0; height: 100dvh; overflow: hidden !important; }
  body.game-active .app-shell { position: fixed; inset: 0; display: flex; width: 100%; min-height: 0; height: 100dvh; max-height: 100dvh; margin: 0; padding: 8px; flex-direction: column; overflow: hidden; }
  .topbar { display: grid; grid-template-columns: minmax(118px, 1fr) minmax(90px, .9fr) auto; flex: 0 0 36px; min-height: 36px; gap: 6px; margin-bottom: 5px; }.brand { gap: 6px; font-size: 19px; }.brand-mark { width: 27px; height: 27px; border-radius: 8px; }.round-status { min-width: 0; margin-left: 0; overflow: hidden; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.new-game-controls { justify-content: end; gap: 4px; }.new-game-controls .button { display: grid; width: 29px; height: 29px; place-items: center; padding: 0; font-size: 0; }.new-game-controls .button::before { color: var(--ink); font-size: 15px; line-height: 1; }#return-menu::before { content: "☰"; } #rules-toggle::before { content: "?"; } #profile-toggle::before { content: "◎"; } #sound-toggle::before { content: "♪"; }
  .game-layout { grid-template-rows: 39px minmax(0, 1fr); gap: 5px; }.players-panel { border-radius: 10px; }.players-panel > #players { grid-template-columns: repeat(var(--seat-count, 3), minmax(128px, 1fr)); }.player, .players-panel.is-crowded .player { min-height: 39px; padding: 5px 7px; }.player-topline { grid-template-columns: minmax(40px, 1fr) auto auto; gap: 3px; }.player-name, .players-panel.is-crowded .player-name { font-size: 10px; }.player-stats, .players-panel.is-crowded .player-stats { gap: 3px; }.player-stats span, .players-panel.is-crowded .player-stats span { width: 19px; height: 19px; font-size: 8px; }
  .table { border-radius: 12px; }.table::after { inset: 5px; border-radius: 8px; }.combat-board { min-height: 0; overflow: hidden; grid-template-rows: 15px 30px minmax(27px, auto) minmax(0, 1fr) auto; row-gap: 1px; padding: 10px 56px 7px; }.combat-board h1 { min-height: 30px; font-size: clamp(20px, 3vw, 27px); }.phase-label { font-size: 8px; }.table-copy { min-height: 27px; max-width: 520px; font-size: 9px; line-height: 1.25; }.center-cards { overflow: hidden; }.table-actions { width: 100%; min-height: 30px; max-height: 72px; gap: 5px; overflow-y: auto; }.table-actions .button, .status-callout { min-height: 29px; padding: 6px 8px; font-size: 9px; }.target-actions { gap: 5px; }.target-list { grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 5px; }.target-list .button { min-height: 29px; padding: 5px 6px; font-size: 8px; }.target-concede { min-height: 29px; }.choice-toggle { padding: 5px 7px; font-size: 8px; }.duel-stage { grid-template-columns: minmax(77px, 92px) minmax(0, 1fr) minmax(77px, 92px); gap: 5px; }.duel-side .combatant { min-height: 61px; padding: 5px 3px; font-size: 8px; }.duel-side .combatant > b { font-size: 9px; }.duel-stage .reveal-board { min-height: 76px; padding: 4px; }.duel-stage .reveal-seat-list { min-height: 57px; gap: 3px; }.duel-stage .reveal-player { height: 55px; padding: 2px; }.duel-stage .reveal-board:not(.is-compact) .card.small { width: 19px; height: 28px; flex-basis: 19px; margin-right: -4px; padding: 2px; }.duel-actions { grid-template-rows: minmax(29px, auto) 29px; min-height: 63px; gap: 5px; }.duel-actions .effect-grid { gap: 5px; }.duel-actions .effect-button { min-width: 104px; min-height: 30px; padding: 5px 7px; font-size: 8px; }.duel-actions .effect-button small { font-size: 7px; }.combat-board.is-duel-layout .table-actions { min-height: 63px; max-height: 100px; }
  /* Every phase uses the same rectangular felt. During live resolution the
     small phase label is enough: the large title competed with the cards. */
  .table[data-phase="reveal"] .combat-board, .table[data-phase="showdown"] .combat-board, .table[data-phase="choose-target"] .combat-board, .table[data-phase="duel"] .combat-board, .table[data-phase="duel-finish"] .combat-board, .table[data-phase="initiative-response"] .combat-board { grid-template-rows: 14px 0 0 minmax(0, 1fr) auto; }.table[data-phase="reveal"] .combat-board h1, .table[data-phase="showdown"] .combat-board h1, .table[data-phase="choose-target"] .combat-board h1, .table[data-phase="duel"] .combat-board h1, .table[data-phase="duel-finish"] .combat-board h1, .table[data-phase="initiative-response"] .combat-board h1, .table[data-phase="reveal"] .table-copy, .table[data-phase="showdown"] .table-copy, .table[data-phase="choose-target"] .table-copy, .table[data-phase="duel"] .table-copy, .table[data-phase="duel-finish"] .table-copy, .table[data-phase="initiative-response"] .table-copy { display: none; }.table[data-phase="reveal"] .center-cards, .table[data-phase="showdown"] .center-cards, .table[data-phase="choose-target"] .center-cards, .table[data-phase="duel"] .center-cards, .table[data-phase="duel-finish"] .center-cards, .table[data-phase="initiative-response"] .center-cards { align-self: stretch; height: auto; min-height: 0; padding-top: 4px; place-items: center; }.table[data-phase="reveal"] .reveal-board, .table[data-phase="showdown"] .reveal-board { min-height: 72px; padding: 4px 5px; }.table[data-phase="reveal"] .reveal-seat-list, .table[data-phase="showdown"] .reveal-seat-list { min-height: 54px; gap: 3px; }.table[data-phase="reveal"] .reveal-player, .table[data-phase="showdown"] .reveal-player { width: auto; height: 52px; padding: 2px; }.table[data-phase="reveal"] .reveal-player-heading em, .table[data-phase="reveal"] .reveal-board-title, .table[data-phase="showdown"] .reveal-player-heading em, .table[data-phase="showdown"] .reveal-board-title { display: none; }.table[data-phase="reveal"] .reveal-board:not(.is-compact) .card.small, .table[data-phase="showdown"] .reveal-board:not(.is-compact) .card.small { width: 20px; height: 29px; flex-basis: 20px; margin-right: -4px; padding: 2px; }
  .combat-board.is-gameover { min-height: 0; padding: 9px 42px 7px; grid-template-rows: 14px 31px minmax(0, 1fr) 0 30px; row-gap: 2px; }.combat-board.is-gameover h1 { min-height: 31px; font-size: 25px; }.combat-board.is-gameover .table-copy { display: block; min-height: 0; padding-top: 0; overflow-y: auto; }.combat-board.is-gameover .leaderboard { width: min(100%, 330px); gap: 4px; }.combat-board.is-gameover .leaderboard-caption { margin-bottom: 4px; font-size: 8px; }.combat-board.is-gameover .leaderboard li { grid-template-columns: 20px 1fr auto; gap: 5px; padding: 4px 6px; }.combat-board.is-gameover .leaderboard li > span { width: 18px; height: 18px; font-size: 9px; }.combat-board.is-gameover .leaderboard li b { font-size: 10px; }.combat-board.is-gameover .leaderboard li em { max-width: 130px; font-size: 8px; }.combat-board.is-gameover .table-actions { min-height: 29px; max-height: 29px; }
  .logs-toggle { top: 8px; right: 9px; padding: 5px 7px; font-size: 9px; }.activity-panel { top: 6px; right: 6px; bottom: 6px; width: min(280px, 62%); }.activity-heading { padding: 8px 9px; font-size: 9px; }.log { height: calc(100% - 32px); padding: 7px 9px; gap: 4px; font-size: 9px; }
  .hand-area { flex-basis: 112px; min-height: 112px; margin-top: 5px; padding: 6px 9px 7px; border-radius: 10px; }.hand-heading { gap: 7px; margin-bottom: 3px; }.hand-heading .eyebrow { font-size: 10px; }.scout-toggle { padding: 5px 7px; font-size: 9px; }.hand-meta { font-size: 9px; }.hand-insights { min-height: 20px; margin: 0 0 3px; padding: 3px 6px; gap: 4px 7px; font-size: 9px; }.hand-strength > span, .potential-effects > span { display: none; }.hand-strength em { font-size: 9px; }.hand-strength b { font-size: 10px; }.effect-chip { padding: 2px 5px; font-size: 9px; }.hand { min-height: 61px; justify-content: center; gap: 5px; padding: 0 3px; }.hand-card-slot { flex-basis: 44px; }.hand > .card, .hand-card-slot > .card { width: 44px; height: 61px; flex-basis: 44px; padding: 5px; border-radius: 7px; }.card-corner { font-size: 11px; }.card-effect { font-size: 13px; }.card.selected { transform: translateY(-5px); }.hand-area.is-gameover { flex-basis: 48px; min-height: 48px; padding-block: 6px; }
  .hand-area.is-gameover { flex-basis: 48px; min-height: 48px; padding-block: 6px; }
  .graveyard-drawer { top: 44px; width: min(760px, calc(100vw - 16px)); max-height: calc(100dvh - 52px); }.graveyard-list { max-height: calc(100dvh - 94px); }.rules-drawer, .profile-drawer { top: 5px; right: 5px; max-height: calc(100dvh - 10px); }
}

/* Tabletop v4: the felt is a visual table, while every interactive phase owns
   a stable rectangular play surface.  This prevents the hand, player rail and
   combat controls from competing for the same vertical slice of the viewport. */
.table > .players-panel {
  position: absolute;
  z-index: 6;
}

.table-notification-zone {
  position: relative;
  z-index: 8;
  grid-area: notice;
  display: grid;
  width: min(100%, 430px);
  min-height: 30px;
  margin: 0 auto;
  place-items: center;
  pointer-events: none;
}

.table-notification-zone .battle-fx,
.table-notification-zone .toast {
  position: absolute;
  inset: 0;
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  place-items: center;
  transform: none;
}

.table-notification-zone .battle-fx { overflow: visible; }
.table-notification-zone .battle-fx-pop,
.table-notification-zone .battle-fx-pop.side-left,
.table-notification-zone .battle-fx-pop.side-right,
.table-notification-zone .battle-fx-pop.seat-top {
  top: 50%;
  left: 50%;
}

.table-notification-zone .toast {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  border-color: rgba(242,199,118,.42);
  font-size: 11px;
  opacity: 0;
  transform: translateY(7px);
}

.table-notification-zone .toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (orientation: landscape) and (max-height: 520px) {
  body.game-active,
  body.game-active * { -webkit-touch-callout: none; }

  body.game-active .card,
  body.game-active .player,
  body.game-active .table-actions .button {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }

  body.game-active select,
  body.game-active input,
  body.game-active textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
  }
}

@media (min-height: 521px) {
  .game-layout { display: block; }
  .table {
    display: block;
    min-height: 580px;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table::before {
    position: absolute;
    z-index: 0;
    inset: 13% 7% 9%;
    border: 1px solid rgba(242,199,118,.72);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 42%, #1c775e, #0e3f38 58%, #092825);
    box-shadow: inset 0 0 0 10px rgba(3,24,29,.45), var(--shadow);
    content: "";
  }

  .table::after {
    z-index: 1;
    inset: calc(13% + 10px) calc(7% + 10px) calc(9% + 10px);
    border-radius: 50%;
  }

  .table .felt-glow { z-index: 0; inset: 13% 7% 9%; clip-path: ellipse(50% 50% at 50% 50%); }
  .table > .players-panel { top: 15px; right: 12%; left: 12%; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .table > .players-panel #players { min-width: 0 !important; gap: 8px; }
  .table > .players-panel .player { border: 1px solid var(--line); border-radius: 10px; background: rgba(20,16,47,.91); }
  .table > .combat-board { position: absolute; z-index: 3; inset: 25% 24% 15%; min-height: 0; padding: 16px 22px; border: 1px solid rgba(242,199,118,.38); border-radius: 16px; background: rgba(7,35,31,.73); box-shadow: 0 16px 42px rgba(0,0,0,.22); }
  .table > .activity-panel { position: absolute; z-index: 7; right: 4%; bottom: 11%; display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .game-layout {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
  }

  .table {
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
  }

  .table::before {
    position: absolute;
    z-index: 0;
    inset: 15% 4% 5%;
    border: 1px solid rgba(242,199,118,.75);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 42%, #20765e, #0d453c 58%, #082724);
    box-shadow: inset 0 0 0 7px rgba(3,24,29,.45), 0 14px 38px rgba(0,0,0,.23);
    content: "";
  }

  .table::after {
    z-index: 1;
    inset: calc(15% + 7px) calc(4% + 7px) calc(5% + 7px);
    border-color: rgba(242,199,118,.25);
    border-radius: 50%;
  }

  .table .felt-glow {
    z-index: 0;
    inset: 15% 4% 5%;
    clip-path: ellipse(50% 50% at 50% 50%);
  }

  .table > .players-panel {
    top: 2px;
    right: 9%;
    left: 9%;
    height: 43px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table > .players-panel #players {
    min-width: 0 !important;
    height: 100%;
    grid-template-columns: repeat(var(--seat-count, 3), minmax(0, 1fr));
    gap: 5px;
  }

  .table > .players-panel .player,
  .table > .players-panel.is-crowded .player {
    min-width: 0;
    min-height: 43px;
    padding: 5px 6px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    background: rgba(20,16,47,.93);
    box-shadow: 0 6px 14px rgba(0,0,0,.24);
  }

  .table > .players-panel .player-name { font-size: 9px; }
  .table > .players-panel .player-stats { gap: 2px; }
  .table > .players-panel .player-stats span { width: 17px; height: 17px; font-size: 7px; }
  .table > .players-panel .player-tags { display: none; }

  .table > .combat-board {
    position: absolute;
    z-index: 3;
    inset: 58px 20% 18px;
    display: grid;
    min-height: 0;
    padding: 6px 9px 5px;
    overflow: hidden;
    border: 1px solid rgba(242,199,118,.42);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(6,39,34,.84), rgba(8,46,39,.68));
    box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "center"
      "actions"
      "notice";
    grid-template-rows: 11px min-content min-content minmax(46px, 1fr) min-content 30px;
    gap: 2px;
    text-align: center;
  }

  .table > .combat-board .phase-label { grid-area: phase; margin: 0; font-size: 8px; }
  .table > .combat-board h1 { grid-area: title; min-height: 0; font-size: clamp(16px, 2.1vw, 23px); }
  .table > .combat-board .table-copy { grid-area: copy; min-height: 0; margin: 1px auto 2px; font-size: 8px; line-height: 1.25; }
  .table > .combat-board .center-cards { grid-area: center; width: 100%; min-height: 0; height: auto; margin: 0; overflow: hidden; }
  .table > .combat-board .table-actions { grid-area: actions; width: 100%; min-height: 27px; max-height: 64px; overflow: auto; }
  .table > .combat-board .table-actions .button,
  .table > .combat-board .status-callout { min-height: 27px; padding: 5px 7px; font-size: 8px; }
  .table > .activity-panel { display: none; }

  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board,
  .table[data-layout="result"] > .combat-board {
    grid-template-rows: 11px min-content min-content minmax(34px, 1fr) min-content 30px;
  }

  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    grid-template-areas:
      "phase"
      "center"
      "actions"
      "notice";
    grid-template-rows: 11px minmax(56px, 1fr) min-content 30px;
  }

  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="reveal"] > .combat-board .table-copy,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board .table-copy { display: none; }

  .table[data-layout="reveal"] .reveal-board,
  .table[data-layout="focus"] .reveal-board {
    width: 100%;
    max-height: 100%;
    padding: 3px 4px;
  }

  .table[data-layout="reveal"] .reveal-player,
  .table[data-layout="focus"] .reveal-player,
  .table[data-layout="reveal"] .reveal-board.is-compact .reveal-player,
  .table[data-layout="focus"] .reveal-board.is-compact .reveal-player { height: 52px; }

  .table[data-layout="duel"] .duel-stage {
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    width: 100%;
    gap: 4px;
  }

  .table[data-layout="duel"] .duel-side .combatant { min-height: 53px; padding: 3px 2px; font-size: 7px; }
  .table[data-layout="duel"] .duel-side .combatant > b { font-size: 8px; }
  .table[data-layout="duel"] .duel-stage .reveal-board { min-height: 62px; padding: 3px; }
  .table[data-layout="duel"] .duel-stage .reveal-player { height: 49px; }
  .table[data-layout="duel"] .duel-stage .reveal-board .card.small { width: 17px; height: 25px; flex-basis: 17px; }

  .table[data-layout="duel"] .duel-actions { min-height: 27px; gap: 3px; }
  .table[data-layout="duel"] .duel-actions .effect-grid { gap: 3px; }
  .table[data-layout="duel"] .duel-actions .effect-button { min-width: 90px; min-height: 27px; padding: 4px 5px; font-size: 7px; }
  .table[data-layout="duel"] .duel-actions .effect-button small { display: none; }
  .table[data-layout="duel"] .duel-finish-row { min-height: 27px; }

  .table-notification-zone { min-height: 30px; }
  .table-notification-zone .battle-fx-pop { padding: 5px 8px; font-size: 9px; letter-spacing: .04em; }
  .table-notification-zone .battle-fx-pop span { font-size: 16px; }
  .table-notification-zone .toast { padding: 5px 8px; font-size: 8px; }

  .hand-area {
    flex: 0 0 92px;
    width: min(680px, 76%);
    min-height: 92px;
    margin-top: 4px;
    padding: 5px 8px;
  }

  .hand { min-height: 59px; }
  .hand > .card { width: 43px; height: 59px; flex-basis: 43px; }
  .hand-sort-controls { display: inline-flex; }
  .hand-sort-controls button { display: grid; width: 23px; height: 23px; place-items: center; padding: 0; font-size: 12px; }
  .hand-area.has-editable-joker .hand { min-height: 59px; }
  .hand .card.joker-configurable { padding-bottom: 17px; }
  .hand .joker-card-control select { min-height: 14px; font-size: 7px; }
}

/* The phone board has one hard constraint: cards and choices must stay inside
   their own zones. Keep this final mobile layer after the legacy responsive
   rules so a phase can never inherit a desktop-sized rack. */

/* v7 cascade guard — keep the centre an action console, not a second table. */
@media (orientation: landscape) {
  .table > .players-panel .player[data-seat="south"] { top: 86%; }
  .table > .players-panel .player[data-seat="north"] { top: 10%; }
  .table > .players-panel .player[data-seat="northwest"] { left: 29%; top: 19%; }
  .table > .players-panel .player[data-seat="northeast"] { left: 71%; top: 19%; }
  .table > .players-panel .player[data-seat="west"] { left: 14%; top: 56%; }
  .table > .players-panel .player[data-seat="east"] { left: 86%; top: 56%; }
  .table > .players-panel .player { grid-template-rows: auto auto; gap: 2px; overflow: visible; }
  .table > .players-panel .player-topline { gap: 3px; }
  .table > .players-panel .player-name { font-size: clamp(8px, .95vw, 11px); }
  .table > .players-panel .player-stats { gap: 3px; }
  .seat-rack { min-height: clamp(22px, 4.6dvh, 34px); margin-top: 1px; overflow: visible; }
  .seat-rack .card.small { width: clamp(15px, 2.15vw, 26px); height: clamp(22px, 4.6dvh, 34px); flex-basis: clamp(15px, 2.15vw, 26px); margin-right: -4px; }
  .seat-effects { bottom: calc(100% + 6px); }
  .station-target-actions { position: absolute; z-index: 8; top: -13px; left: 50%; display: flex; gap: 3px; transform: translateX(-50%); white-space: nowrap; }
  .station-target { min-height: 22px; padding: 3px 5px; border: 1px solid; border-radius: 999px; font-size: clamp(6px, .78vw, 9px); font-weight: 850; line-height: 1; }
  .station-target.normal { border-color: rgba(242,199,118,.75); color: #fff1c9; background: rgba(70,48,22,.94); }
  .station-target.initiative { border-color: rgba(104,221,255,.75); color: #d9f8ff; background: rgba(18,65,86,.96); }

  /* Your cards are a physical hand under your seat, not a second dashboard. */
  .hand-area { position: relative; align-self: stretch; flex: 0 0 clamp(92px, 16dvh, 128px); width: 100%; min-height: 0; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .hand-heading { min-height: 0; margin: 0; }
  .hand-heading > div:first-child { display: none; }
  .hand-tools { display: contents; }
  .scout-toggle { position: absolute; z-index: 3; bottom: calc(100% + 31px); left: calc(50% - min(30vw, 255px)); min-height: 25px; padding: 4px 7px; font-size: clamp(8px, .85vw, 10px); }
  .hand-meta, .hand-collapse { display: none; }
  .hand-insights { position: absolute; z-index: 3; bottom: calc(100% + 31px); left: calc(50% + 78px); width: min(31vw, 300px); min-height: 0; margin: 0; padding: 2px 4px; overflow: visible; border: 0; border-radius: 0; background: transparent; font-size: clamp(7px, .75vw, 9px); white-space: nowrap; }
  .hand { position: absolute; bottom: 0; left: 50%; display: flex; width: max-content; min-width: min(360px, 68vw); max-width: min(760px, 90vw); height: 100%; min-height: 0; padding: 9px 12px 5px; overflow-x: auto; overflow-y: visible; border: 1px solid rgba(242, 199, 118, .22); border-radius: 0; background: linear-gradient(180deg, rgba(16, 93, 73, .78), rgba(5, 53, 48, .88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transform: translateX(-50%); }
  .hand > .card, .hand-card-slot > .card { width: clamp(43px, 5.1vw, 64px); height: clamp(64px, 12.6dvh, 94px); flex-basis: clamp(43px, 5.1vw, 64px); }
  .hand-card-slot { flex-basis: clamp(43px, 5.1vw, 64px); }
  .hand .card.selected { transform: translateY(-7px); }
  .hand-area.has-editable-joker { flex-basis: clamp(108px, 19dvh, 145px); }
  .hand-area.has-editable-joker .hand { height: 100%; padding-top: 9px; }

  .table > .combat-board {
    inset: 38% 28% auto;
    display: grid;
    width: auto;
    min-height: 0;
    max-height: min(160px, 31dvh);
    padding: 7px 11px 8px;
    border-color: rgba(242, 199, 118, .38);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(4, 44, 37, .92), rgba(5, 31, 32, .88));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    grid-template-areas: "phase" "title" "copy" "actions" "notice";
    grid-template-rows: auto auto auto auto 0;
    gap: 3px;
  }
  .table > .combat-board .phase-label { font-size: clamp(7px, .78vw, 9px); }
  .table > .combat-board h1 { font-size: clamp(13px, 1.35vw, 18px); line-height: 1.05; }
  .table > .combat-board .table-copy { display: -webkit-box; max-width: 520px; max-height: 2.6em; font-size: clamp(8px, .82vw, 10px); -webkit-line-clamp: 2; }
  .table > .combat-board .center-cards { display: none; }
  .table > .combat-board .table-actions { min-height: 28px; max-height: 64px; }
  .table > .combat-board .table-actions .button, .table > .combat-board .status-callout { min-height: 28px; padding: 4px 7px; font-size: clamp(8px, .82vw, 10px); }

  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board { inset: 29% 18% 24%; max-height: none; grid-template-areas: "phase" "center" "actions" "notice"; grid-template-rows: auto minmax(0, 1fr) auto 0; }
  .table[data-layout="reveal"] > .combat-board .center-cards,
  .table[data-layout="focus"] > .combat-board .center-cards,
  .table[data-layout="duel"] > .combat-board .center-cards { display: grid; }
  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="reveal"] > .combat-board .table-copy,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board .table-copy { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table > .players-panel .player[data-seat="south"] { top: 87%; }
  .table > .players-panel .player[data-seat="northwest"], .table > .players-panel .player[data-seat="northeast"] { top: 17%; }
  .table > .players-panel .player[data-seat="west"], .table > .players-panel .player[data-seat="east"] { top: 55%; }
  .seat-rack { min-height: 18px; }
  .seat-rack .card.small { width: 12px; height: 18px; flex-basis: 12px; }
  .table > .combat-board { inset: 37% 24% auto; max-height: 126px; padding: 5px 7px; }
  .table > .combat-board h1 { font-size: clamp(12px, 2.1vw, 16px); }
  .table > .combat-board .table-copy { font-size: clamp(7px, 1vw, 9px); }
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board { inset: 26% 14% 22%; max-height: none; }
}

/* v6 cascade guard --------------------------------------------------------
   This sits after the historical responsive experiments above.  It is the
   single source of truth for the live landscape board, including phones. */
@media (orientation: landscape) {
  html, body, body.game-active { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  body.game-active { position: fixed; inset: 0; }
  body.game-active .app-shell { display: flex; width: min(1280px, calc(100vw - 12px)); height: min(820px, calc(100dvh - 10px)); min-height: 0; margin: 0 auto; padding: 6px 8px; flex-direction: column; overflow: hidden; }
  .topbar { display: grid; grid-template-columns: minmax(102px, 1fr) minmax(96px, .8fr) auto; flex: 0 0 36px; min-height: 36px; gap: 6px; margin: 0 0 4px; }
  .brand { gap: 6px; font-size: clamp(17px, 2vw, 21px); }.brand-mark { width: 27px; height: 27px; }.round-status { min-width: 0; margin: 0; overflow: hidden; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.new-game-controls { justify-content: end; gap: 4px; }.new-game-controls .button { min-height: 27px; padding: 4px 7px; font-size: 9px; }
  .game-layout { display: flex !important; flex: 1 1 auto; min-height: 0; }
  .table { position: relative; isolation: isolate; display: block !important; flex: 1 1 auto; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .table::before { position: absolute; z-index: 0; inset: 6% 4% 2%; border: 1px solid rgba(242,199,118,.76); border-radius: 50%; background: radial-gradient(ellipse at 50% 42%, #1f755e 0%, #0d493d 57%, #082724 100%); box-shadow: inset 0 0 0 8px rgba(3,24,29,.46), 0 15px 38px rgba(0,0,0,.28); content: ""; opacity: 1; }
  .table::after { z-index: 1; inset: calc(6% + 8px) calc(4% + 8px) calc(2% + 8px); border-color: rgba(242,199,118,.24); border-radius: 50%; }.table .felt-glow { display: none !important; }

  .table > .players-panel { position: absolute; z-index: 6; inset: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; pointer-events: none; }
  .table > .players-panel #players { position: relative; display: block; width: 100%; height: 100%; min-width: 0 !important; }
  .table > .players-panel .player, .table > .players-panel.is-crowded .player { position: absolute; display: grid; width: clamp(78px, 11.5vw, 138px); min-width: 0; min-height: clamp(39px, 7.7dvh, 58px); padding: 4px 5px; border: 1px solid rgba(242,199,118,.52); border-radius: 10px; background: linear-gradient(145deg, rgba(19,37,47,.98), rgba(20,16,47,.98)); box-shadow: 0 7px 17px rgba(0,0,0,.31); transform: translate(-50%, -50%); backdrop-filter: none; pointer-events: auto; }
  .table > .players-panel .player::before { top: 4px; bottom: 4px; width: 3px; }.table > .players-panel .player-topline { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; }.table > .players-panel .player-name, .table > .players-panel.is-crowded .player-name { width: 100%; overflow: hidden; color: #fff6df; font-size: clamp(8px,.9vw,11px); font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.table > .players-panel .player-tags, .table > .players-panel .health-track { display: none; }.table > .players-panel .player-stats, .table > .players-panel.is-crowded .player-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; margin: 0; gap: 2px; }.table > .players-panel .player-stats span, .table > .players-panel.is-crowded .player-stats span { display: grid; width: 100%; height: clamp(14px,3dvh,20px); place-items: center; padding: 0; font-size: clamp(6px,.72vw,9px); }
  .table > .players-panel .player[data-seat="south"] { left: 50%; top: 90%; }.table > .players-panel .player[data-seat="north"] { left: 50%; top: 12%; }.table > .players-panel .player[data-seat="northwest"] { left: 25%; top: 16%; }.table > .players-panel .player[data-seat="northeast"] { left: 75%; top: 16%; }.table > .players-panel .player[data-seat="west"] { left: 9%; top: 59%; }.table > .players-panel .player[data-seat="east"] { left: 91%; top: 59%; }
  .seat-rack { display: flex; justify-content: center; min-height: clamp(18px,3.7dvh,30px); margin-top: 3px; overflow: hidden; padding: 0 1px; }.seat-rack .card.small { width: clamp(12px,1.75vw,22px); height: clamp(18px,3.7dvh,30px); flex: 0 0 clamp(12px,1.75vw,22px); margin-right: -3px; padding: 1px; border-radius: 3px; }.seat-rack .card.small .card-corner, .seat-rack .card.small .card-effect { font-size: 5px; }.seat-effects { position: absolute; bottom: calc(100% + 4px); left: 50%; z-index: 2; display: flex; justify-content: center; width: max-content; max-width: 130%; transform: translateX(-50%); pointer-events: none; }.seat-effect { padding: 2px 5px; border: 1px solid currentColor; border-radius: 999px; background: #130f2a; box-shadow: 0 4px 10px rgba(0,0,0,.32); font-size: clamp(6px,.72vw,8px); font-weight: 900; letter-spacing: .04em; white-space: nowrap; }.seat-effect.poison { color: #d5adff; }.seat-effect.antiheal { color: #ff9ecb; }

  .table > .combat-board { position: absolute; z-index: 3; inset: clamp(40px,23%,164px) clamp(12%,22%,28%) clamp(43px,18%,116px); display: grid; min-height: 0; padding: 6px 9px; overflow: hidden; border: 1px solid rgba(242,199,118,.56); border-radius: 12px; background: #06382f; box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: none !important; grid-template-areas: "phase" "title" "copy" "center" "actions" "notice"; grid-template-rows: 11px minmax(20px,auto) minmax(0,auto) minmax(0,1fr) minmax(30px,auto) 20px; align-content: stretch; justify-items: center; gap: 2px; text-align: center; }
  .table > .combat-board, .table > .combat-board.phase-enter, .table > .combat-board.phase-enter .phase-label, .table > .combat-board.phase-enter h1, .table > .combat-board.phase-enter .table-copy, .table > .combat-board.phase-enter .center-cards, .table > .combat-board.phase-enter .table-actions { filter: none !important; opacity: 1 !important; transform: none !important; animation: none !important; }
  .table > .combat-board .phase-label { grid-area: phase; min-height: 0; margin: 0; color: var(--gold); font-size: clamp(7px,.8vw,9px); }.table > .combat-board h1 { grid-area: title; min-height: 0; margin: 0; color: #fff5df; font-size: clamp(17px,2.15vw,27px); line-height: 1.03; }.table > .combat-board .table-copy { grid-area: copy; display: -webkit-box; width: min(100%,510px); max-height: 3.9em; min-height: 0; margin: 0; overflow: hidden; color: #d8e9df; font-size: clamp(8px,.88vw,11px); line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.table > .combat-board .center-cards { grid-area: center; display: grid; width: 100%; height: 100%; min-height: 0; margin: 0; place-items: center; overflow: hidden; }.table > .combat-board .table-actions { grid-area: actions; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 30px; max-height: 88px; margin: 0; overflow: auto; gap: 4px; }.table > .combat-board .table-actions .button, .table > .combat-board .status-callout { min-height: 30px; padding: 5px 8px; font-size: clamp(8px,.88vw,10px); }.table > .combat-board .table-notification-zone { grid-area: notice; width: min(100%,390px); min-height: 20px; }.table > .combat-board .table-notification-zone .battle-fx-pop { padding: 3px 7px; font-size: clamp(7px,.8vw,10px); }.table > .combat-board .table-notification-zone .battle-fx-pop span { font-size: 13px; }.table > .combat-board .table-notification-zone .toast { padding: 3px 7px; font-size: clamp(7px,.75vw,9px); }
  .table[data-layout="intro"] > .combat-board, .table[data-layout="status"] > .combat-board, .table[data-layout="result"] > .combat-board { grid-template-areas: "phase" "title" "copy" "actions" "notice"; grid-template-rows: 11px minmax(20px,auto) minmax(0,1fr) minmax(30px,auto) 20px; }.table[data-layout="intro"] > .combat-board .center-cards, .table[data-layout="status"] > .combat-board .center-cards, .table[data-layout="result"] > .combat-board .center-cards { display: none; }
  .table[data-layout="reveal"] > .combat-board, .table[data-layout="focus"] > .combat-board, .table[data-layout="duel"] > .combat-board { inset: clamp(35px,19%,128px) clamp(7%,13%,18%) clamp(40px,15%,94px); grid-template-areas: "phase" "center" "actions" "notice"; grid-template-rows: 11px minmax(0,1fr) minmax(30px,auto) 20px; }.table[data-layout="reveal"] > .combat-board h1, .table[data-layout="reveal"] > .combat-board .table-copy, .table[data-layout="focus"] > .combat-board h1, .table[data-layout="focus"] > .combat-board .table-copy, .table[data-layout="duel"] > .combat-board h1, .table[data-layout="duel"] > .combat-board .table-copy { display: none; }.table[data-layout="reveal"] .reveal-board, .table[data-layout="focus"] .reveal-board { max-height: 100%; overflow: hidden; }
  .logs-toggle { position: absolute; z-index: 10; top: 9px; right: 10px; display: inline-flex; min-height: 25px; padding: 4px 7px; font-size: 9px; }.activity-panel { position: absolute; z-index: 11; top: 8px; right: 8px; bottom: 8px; display: none; width: min(300px,55%); margin: 0; }.table.logs-open .activity-panel { display: block; }.log { height: calc(100% - 34px); font-size: 9px; }

  .hand-area { align-self: center; flex: 0 0 clamp(98px,17dvh,128px); width: min(720px,calc(100% - 24px)); min-height: 0; margin-top: 4px; padding: 5px 8px 6px; border-radius: 11px; backdrop-filter: none; }.hand-heading { min-height: 20px; gap: 6px; margin-bottom: 1px; }.hand-heading .eyebrow { margin: 0; font-size: 9px; }.hand-heading strong { display: none; }.hand-tools { gap: 5px; }.scout-toggle, .hand-collapse { min-height: 22px; padding: 3px 6px; font-size: 9px; }.hand-meta { gap: 4px; font-size: 8px; white-space: nowrap; }.hand-sort-controls { display: inline-flex; gap: 3px; }.hand-sort-controls button { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; font-size: 12px; }.hand-insights { min-height: 15px; margin: 0 0 1px; padding: 1px 5px; gap: 3px 6px; font-size: 8px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }.hand-strength > span, .potential-effects > span { display: none; }.hand-strength em, .hand-strength b, .effect-chip { font-size: 8px; }.effect-chip { padding: 2px 4px; }.hand { min-height: 0; height: calc(100% - 37px); align-items: flex-end; justify-content: center; gap: 5px; padding: 12px 3px 0; overflow-x: auto; overflow-y: hidden; }.hand > .card, .hand-card-slot > .card { width: clamp(38px,4.5vw,56px); height: clamp(56px,10.5dvh,78px); flex: 0 0 clamp(38px,4.5vw,56px); padding: 5px; border-radius: 7px; }.hand-card-slot { flex: 0 0 clamp(38px,4.5vw,56px); }.hand .card.selected { transform: translateY(-8px); }.hand-area.has-editable-joker { flex-basis: clamp(116px,19dvh,142px); }.hand-area.has-editable-joker .hand { height: calc(100% - 25px); padding-top: 12px; }.hand .card.joker-configurable { padding-bottom: 26px; }

  body:not(.game-active) .menu-scene { box-sizing: border-box; min-height: 100dvh; height: 100dvh; padding: 8px; overflow: hidden; } body:not(.game-active) .menu-card { max-height: calc(100dvh - 16px); overflow: auto; }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.game-active .app-shell { width: 100%; height: 100dvh; padding: 5px 6px; }.topbar { flex-basis: 32px; min-height: 32px; margin-bottom: 2px; }.brand { font-size: 17px; }.brand-mark { width: 24px; height: 24px; }.new-game-controls .button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; font-size: 0; }.new-game-controls .button::before { color: var(--ink); font-size: 14px; line-height: 1; } #return-menu::before { content: "☰"; } #rules-toggle::before { content: "?"; } #profile-toggle::before { content: "◎"; } #sound-toggle::before { content: "♪"; }
  .table > .players-panel .player, .table > .players-panel.is-crowded .player { width: clamp(72px,13vw,98px); min-height: 37px; padding: 3px 4px; }.table > .players-panel .player-stats span, .table > .players-panel.is-crowded .player-stats span { height: 14px; font-size: 6px; }.seat-rack { min-height: 18px; margin-top: 2px; }.seat-rack .card.small { width: 12px; height: 18px; flex-basis: 12px; }.seat-effects { bottom: calc(100% + 2px); }.seat-effect { padding: 1px 4px; font-size: 6px; }
  .table > .combat-board { padding: 5px 7px; }.table > .combat-board h1 { font-size: clamp(16px,2.5vw,20px); }.table > .combat-board .table-copy { font-size: clamp(7px,1.05vw,9px); }.table > .combat-board .table-actions .button, .table > .combat-board .status-callout { min-height: 28px; padding: 4px 6px; font-size: 8px; }
  .hand-area { flex-basis: 94px; min-height: 94px; width: min(680px,calc(100% - 16px)); padding: 4px 7px 5px; }.hand-area.has-editable-joker { flex-basis: 106px; min-height: 106px; }.hand-insights { display: none; }.hand { height: calc(100% - 22px); gap: 4px; padding-top: 10px; }.hand > .card, .hand-card-slot > .card { width: clamp(35px,5.2vw,47px); height: clamp(51px,12dvh,62px); flex-basis: clamp(35px,5.2vw,47px); }.hand-card-slot { flex-basis: clamp(35px,5.2vw,47px); }
  body:not(.game-active) .menu-card { width: min(720px,100%); padding: 11px 16px; border-radius: 14px; } body:not(.game-active) .menu-card > .eyebrow, body:not(.game-active) .menu-card > h1, body:not(.game-active) .menu-card > p:not(.menu-footnote), body:not(.game-active) .menu-footnote { display: none; } body:not(.game-active) .menu-brand { margin: 0 0 5px; font-size: 24px; } body:not(.game-active) .menu-modes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 0; } body:not(.game-active) .menu-mode { min-height: 0; padding: 9px 11px; border-radius: 10px; } body:not(.game-active) .menu-mode .button { min-height: 28px; padding: 5px 8px; font-size: 9px; }
}

/* Board scene v5: the oval is the actual seating map.  Each status card owns a
   seat on its rim; the central rectangle is reserved for the current state,
   cards and controls.  This deliberately replaces the former top player rail. */
@media (orientation: landscape) and (min-width: 701px) {
  html,
  body,
  body.game-active {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.game-active {
    position: fixed;
    inset: 0;
  }

  body.game-active .app-shell {
    display: flex;
    width: min(1180px, calc(100vw - 16px));
    height: min(760px, calc(100dvh - 16px));
    min-height: 0;
    margin: 0 auto;
    padding: 7px 9px;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(150px, .8fr) auto;
    flex: 0 0 37px;
    min-height: 37px;
    gap: 8px;
    margin: 0 0 5px;
  }

  .brand { gap: 6px; font-size: 20px; }
  .brand-mark { width: 28px; height: 28px; }
  .round-status { min-width: 0; margin: 0; overflow: hidden; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .new-game-controls { justify-content: end; gap: 4px; }
  .new-game-controls .button { min-height: 28px; padding: 5px 8px; font-size: 9px; }

  .game-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .table {
    isolation: isolate;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .table::before {
    position: absolute;
    z-index: 0;
    inset: 6% 5% 2%;
    border: 1px solid rgba(242, 199, 118, .76);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 42%, #20765e 0%, #0c463b 57%, #082724 100%);
    box-shadow: inset 0 0 0 8px rgba(3, 24, 29, .46), 0 15px 38px rgba(0, 0, 0, .28);
    content: "";
  }

  .table::after {
    z-index: 1;
    inset: calc(6% + 8px) calc(5% + 8px) calc(2% + 8px);
    border-color: rgba(242, 199, 118, .24);
    border-radius: 50%;
  }

  .table .felt-glow {
    display: none;
  }

  /* Seat map -------------------------------------------------------------- */
  .table > .players-panel {
    position: absolute;
    z-index: 6;
    inset: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  .table > .players-panel #players {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0 !important;
  }

  .table > .players-panel .player,
  .table > .players-panel.is-crowded .player {
    position: absolute;
    display: grid;
    width: clamp(94px, 11vw, 142px);
    min-width: 0;
    height: clamp(42px, 9dvh, 63px);
    min-height: 0;
    padding: 4px 5px;
    border: 1px solid rgba(242, 199, 118, .46);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(19, 37, 47, .96), rgba(20, 16, 47, .94));
    box-shadow: 0 7px 17px rgba(0, 0, 0, .28);
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }

  .table > .players-panel .player::before { top: 4px; bottom: 4px; width: 3px; }
  .table > .players-panel .player-topline { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; }
  .table > .players-panel .player-name,
  .table > .players-panel.is-crowded .player-name { width: 100%; overflow: hidden; color: #fff6df; font-size: clamp(8px, 1vw, 11px); font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .table > .players-panel .player-tags { display: none; }
  .table > .players-panel .player-stats,
  .table > .players-panel.is-crowded .player-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: 0; gap: 2px; }
  .table > .players-panel .player-stats span,
  .table > .players-panel.is-crowded .player-stats span { display: grid; width: 100%; height: clamp(15px, 3.4dvh, 21px); place-items: center; padding: 0; font-size: clamp(6px, .78vw, 9px); }
  .table > .players-panel .health-track { display: none; }

  /* The local player is always closest to their hand; bots occupy the other
     points of the oval.  The data attribute avoids selector guesses when a
     room has fewer than five seats. */
  .table > .players-panel .player.is-human { left: 50%; top: 90%; }
  .table > .players-panel[data-seat-count="2"] .player:nth-child(2) { left: 50%; top: 15%; }
  .table > .players-panel[data-seat-count="3"] .player:nth-child(2) { left: 15%; top: 25%; }
  .table > .players-panel[data-seat-count="3"] .player:nth-child(3) { left: 85%; top: 25%; }
  .table > .players-panel[data-seat-count="4"] .player:nth-child(2) { left: 12%; top: 51%; }
  .table > .players-panel[data-seat-count="4"] .player:nth-child(3) { left: 50%; top: 13%; }
  .table > .players-panel[data-seat-count="4"] .player:nth-child(4) { left: 88%; top: 51%; }
  .table > .players-panel[data-seat-count="5"] .player:nth-child(2) { left: 11%; top: 56%; }
  .table > .players-panel[data-seat-count="5"] .player:nth-child(3) { left: 27%; top: 16%; }
  .table > .players-panel[data-seat-count="5"] .player:nth-child(4) { left: 73%; top: 16%; }
  .table > .players-panel[data-seat-count="5"] .player:nth-child(5) { left: 89%; top: 56%; }

  /* Central state surface ------------------------------------------------ */
  .table > .combat-board {
    position: absolute;
    z-index: 3;
    inset: 30% 30% 28%;
    display: grid;
    min-height: 0;
    padding: 6px 9px 5px;
    overflow: hidden;
    border: 1px solid rgba(242, 199, 118, .42);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(5, 37, 33, .98), rgba(7, 43, 36, .96));
    backdrop-filter: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "center"
      "actions"
      "notice";
    grid-template-rows: 11px min-content min-content minmax(0, 1fr) min-content 24px;
    align-content: stretch;
    justify-items: center;
    gap: 2px;
    text-align: center;
  }

  .table > .combat-board .phase-label { grid-area: phase; min-height: 0; margin: 0; font-size: 8px; }
  .table > .combat-board h1 { grid-area: title; min-height: 0; margin: 0; font-size: clamp(16px, 2.15vw, 25px); line-height: 1; }
  .table > .combat-board .table-copy { grid-area: copy; display: -webkit-box; width: min(100%, 520px); min-height: 0; margin: 0; overflow: hidden; color: #d8e9df; font-size: clamp(7px, .92vw, 10px); line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .table > .combat-board .center-cards { grid-area: center; display: grid; width: 100%; height: 100%; min-height: 0; margin: 0; place-items: center; overflow: hidden; }
  .table > .combat-board .table-actions { grid-area: actions; width: 100%; min-height: 25px; max-height: 66px; margin: 0; overflow: auto; gap: 4px; }
  .table > .combat-board .table-actions .button,
  .table > .combat-board .status-callout { min-height: 25px; padding: 4px 7px; font-size: clamp(7px, .9vw, 10px); }

  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board,
  .table[data-layout="result"] > .combat-board {
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "actions"
      "notice";
    grid-template-rows: 11px min-content minmax(0, 1fr) minmax(25px, auto) 24px;
  }

  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    inset: 24% 18% 20%;
  }

  .table[data-layout="intro"] > .combat-board .center-cards,
  .table[data-layout="status"] > .combat-board .center-cards,
  .table[data-layout="result"] > .combat-board .center-cards { display: none; }

  /* A phase transition should never leave the state surface soft or hide its
     action button on a short landscape screen. */
  .table > .combat-board,
  .table > .combat-board.phase-enter,
  .table > .combat-board.phase-enter .phase-label,
  .table > .combat-board.phase-enter h1,
  .table > .combat-board.phase-enter .table-copy,
  .table > .combat-board.phase-enter .center-cards,
  .table > .combat-board.phase-enter .table-actions {
    filter: none;
    opacity: 1;
    transform: none;
    animation: none;
  }

  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    grid-template-areas:
      "phase"
      "center"
      "actions"
      "notice";
    grid-template-rows: 11px minmax(0, 1fr) min-content 24px;
  }

  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="reveal"] > .combat-board .table-copy,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board .table-copy { display: none; }

  /* Showdown / target selection: a contained rack, never a row that can
     overflow the central surface. */
  .table[data-layout="reveal"] .reveal-board,
  .table[data-layout="focus"] .reveal-board {
    display: grid;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    padding: 3px 4px;
    grid-template-rows: minmax(0, 1fr) min-content;
    overflow: hidden;
  }

  .table[data-layout="reveal"] .reveal-board-title,
  .table[data-layout="focus"] .reveal-board-title,
  .table[data-layout="reveal"] .reveal-player-heading em,
  .table[data-layout="focus"] .reveal-player-heading em { display: none; }

  .table[data-layout="reveal"] .reveal-seat-list,
  .table[data-layout="focus"] .reveal-seat-list {
    display: grid;
    grid-template-columns: repeat(var(--reveal-count), minmax(0, 1fr));
    min-height: 0;
    padding: 0;
    gap: 3px;
    overflow: hidden;
  }

  .table[data-layout="reveal"] .reveal-player,
  .table[data-layout="reveal"] .reveal-board.is-compact .reveal-player,
  .table[data-layout="focus"] .reveal-player,
  .table[data-layout="focus"] .reveal-board.is-compact .reveal-player {
    display: grid;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 3px;
    overflow: hidden;
    grid-template-rows: min-content minmax(0, 1fr);
  }

  .table[data-layout="reveal"] .reveal-player-heading span,
  .table[data-layout="focus"] .reveal-player-heading span { display: block; overflow: hidden; font-size: clamp(7px, .8vw, 9px); text-overflow: ellipsis; white-space: nowrap; }
  .table[data-layout="reveal"] .reveal-stack,
  .table[data-layout="focus"] .reveal-stack { min-width: 0; min-height: 0; padding: 2px 0 0; overflow: hidden; }
  .table[data-layout="reveal"] .reveal-board .card.small,
  .table[data-layout="focus"] .reveal-board .card.small { width: clamp(16px, 2.1vw, 27px); height: clamp(24px, 4.1dvh, 37px); flex-basis: clamp(16px, 2.1vw, 27px); margin-right: -4px; padding: 2px; }
  .table[data-layout="reveal"] .reveal-board .card.small .card-effect,
  .table[data-layout="focus"] .reveal-board .card.small .card-effect { font-size: 5px; }
  .table[data-layout="reveal"] .reveal-progress,
  .table[data-layout="focus"] .reveal-progress { min-height: 10px; margin-top: 1px; overflow: hidden; color: #bedacd; font-size: clamp(6px, .75vw, 9px); text-overflow: ellipsis; white-space: nowrap; }

  /* Duel uses the exact same centre surface, with the combatants anchoring
     the two edges instead of making a second floating layout. */
  .table[data-layout="duel"] .duel-stage {
    display: grid;
    grid-template-columns: clamp(47px, 8vw, 82px) minmax(0, 1fr) clamp(47px, 8vw, 82px);
    width: 100%;
    min-height: 0;
    max-height: 100%;
    gap: 4px;
  }

  .table[data-layout="duel"] .duel-side { min-width: 0; }
  .table[data-layout="duel"] .duel-side .combatant { min-height: 0; height: 100%; padding: 3px 2px; gap: 2px; font-size: clamp(6px, .72vw, 8px); }
  .table[data-layout="duel"] .duel-side .combatant > b { overflow: hidden; width: 100%; font-size: clamp(7px, .8vw, 9px); text-overflow: ellipsis; white-space: nowrap; }
  .table[data-layout="duel"] .duel-side .combatant > span { width: 100%; padding: 1px 2px; }
  .table[data-layout="duel"] .duel-stage .reveal-board { width: 100%; min-width: 0; min-height: 0; max-height: 100%; margin: 0; padding: 3px; overflow: hidden; }
  .table[data-layout="duel"] .duel-stage .reveal-board-title,
  .table[data-layout="duel"] .duel-stage .reveal-player-heading em { display: none; }
  .table[data-layout="duel"] .duel-stage .reveal-seat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; gap: 3px; }
  .table[data-layout="duel"] .duel-stage .reveal-player { min-width: 0; height: 100%; min-height: 0; padding: 2px; overflow: hidden; }
  .table[data-layout="duel"] .duel-stage .reveal-player-heading span { display: block; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
  .table[data-layout="duel"] .duel-stage .reveal-stack { min-width: 0; padding: 1px 0 0; overflow: hidden; }
  .table[data-layout="duel"] .duel-stage .reveal-board .card.small { width: clamp(14px, 1.7vw, 21px); height: clamp(21px, 3.3dvh, 29px); flex-basis: clamp(14px, 1.7vw, 21px); margin-right: -4px; padding: 2px; }
  .table[data-layout="duel"] .duel-actions { min-height: 25px; gap: 3px; }
  .table[data-layout="duel"] .duel-actions .effect-grid { gap: 3px; }
  .table[data-layout="duel"] .duel-actions .effect-button { min-width: 70px; min-height: 25px; padding: 3px 4px; font-size: 7px; }
  .table[data-layout="duel"] .duel-actions .effect-button small { display: none; }
  .table[data-layout="duel"] .duel-finish-row { min-height: 25px; }

  /* A fixed notification strip is part of the state rectangle.  Effects and
     toasts therefore never push card racks or action buttons out of place. */
  .table > .combat-board .table-notification-zone { grid-area: notice; width: min(100%, 390px); min-height: 24px; }
  .table > .combat-board .table-notification-zone .battle-fx-pop { padding: 4px 7px; font-size: clamp(8px, .9vw, 10px); }
  .table > .combat-board .table-notification-zone .battle-fx-pop span { font-size: 14px; }
  .table > .combat-board .table-notification-zone .toast { padding: 4px 7px; font-size: clamp(7px, .8vw, 9px); }

  .logs-toggle { position: absolute; z-index: 10; top: 10px; right: 12px; display: inline-flex; min-height: 26px; padding: 4px 7px; font-size: 9px; }
  .activity-panel { position: absolute; z-index: 11; top: 8px; right: 8px; bottom: 8px; display: none; width: min(300px, 52%); margin: 0; }
  .table.logs-open .activity-panel { display: block; }
  .log { height: calc(100% - 34px); font-size: 9px; }

  /* Hand dock ------------------------------------------------------------- */
  .hand-area {
    align-self: center;
    flex: 0 0 clamp(100px, 16dvh, 118px);
    width: min(630px, calc(100% - 32px));
    min-height: 0;
    margin-top: 4px;
    padding: 5px 8px 6px;
    border-radius: 11px;
  }

  .hand-heading { min-height: 18px; gap: 6px; margin-bottom: 1px; }
  .hand-heading .eyebrow { margin: 0; font-size: 9px; }
  .hand-heading strong { display: none; }
  .hand-tools { gap: 5px; }
  .scout-toggle,
  .hand-collapse { min-height: 22px; padding: 3px 6px; font-size: 9px; }
  .hand-meta { gap: 4px; font-size: 8px; white-space: nowrap; }
  .hand-sort-controls { display: inline-flex; gap: 3px; }
  .hand-sort-controls button { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; font-size: 12px; }
  .hand-insights { min-height: 15px; margin: 0 0 1px; padding: 1px 5px; gap: 3px 6px; font-size: 8px; white-space: nowrap; overflow: hidden; }
  .hand-strength,
  .reveal-insight,
  .potential-effects { gap: 3px; }
  .hand-strength > span,
  .potential-effects > span { display: none; }
  .hand-strength em,
  .hand-strength b,
  .effect-chip { font-size: 8px; }
  .effect-chip { padding: 1px 4px; }
  .hand { min-height: 0; height: calc(100% - 34px); justify-content: center; gap: 5px; padding: 5px 3px 0; overflow-x: auto; overflow-y: hidden; }
  .hand > .card,
  .hand-card-slot > .card { width: clamp(38px, 4.3vw, 52px); height: clamp(54px, 8.5dvh, 68px); flex: 0 0 clamp(38px, 4.3vw, 52px); padding: 5px; border-radius: 7px; }
  .hand-card-slot { flex: 0 0 clamp(38px, 4.3vw, 52px); }
  .hand .card-corner { font-size: clamp(9px, 1.1vw, 12px); }
  .hand .card-effect { font-size: clamp(11px, 1.45vw, 15px); }
  .hand .card.selected { transform: translateY(-5px); }
  .hand-area.is-collapsed,
  .hand-area.is-gameover { flex-basis: 31px; min-height: 31px; padding-block: 4px; }
  .hand-area.is-collapsed .hand-insights,
  .hand-area.is-collapsed .hand,
  .hand-area.is-gameover .hand-insights,
  .hand-area.is-gameover .hand { display: none; }

  /* Joker configuration stays inside the card: one small selector for its
     value and one for its effect.  There is no detached editor or modal. */
  .hand-area.has-editable-joker .hand-insights { display: none; }
  .hand-area.has-editable-joker { flex-basis: clamp(112px, 18dvh, 128px); }
  .hand-area.has-editable-joker .hand { height: calc(100% - 25px); padding-top: 7px; }
  .hand .card.joker-configurable { overflow: hidden; padding-bottom: 26px; }
  .hand .card.joker-configurable .card-effect { font-size: clamp(8px, 1vw, 10px); line-height: 1.05; }
  .hand .joker-card-control {
    position: absolute;
    right: 3px;
    bottom: 3px;
    left: 3px;
    display: grid;
    min-height: 22px;
    padding: 1px 2px;
    border: 1px solid rgba(84, 50, 124, .62);
    border-radius: 4px;
    color: #3b255d;
    background: rgba(250, 241, 255, .94);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2px;
    font: inherit;
    font-size: clamp(6px, .72vw, 8px);
    font-weight: 800;
    line-height: 1;
  }

  .hand .joker-card-control label { display: grid; min-width: 0; gap: 1px; color: #3b255d; font-size: 6px; line-height: 1; text-align: left; }
  .hand .joker-card-control label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hand .joker-card-control select { width: 100%; min-width: 0; height: 11px; min-height: 11px; padding: 0; border: 1px solid rgba(58, 37, 93, .5); border-radius: 3px; color: #3b255d; background: #f7efff; font: inherit; font-size: 7px; font-weight: 800; line-height: 1; }

  body.game-active,
  body.game-active * { -webkit-touch-callout: none; }
  body.game-active .card,
  body.game-active .player,
  body.game-active .table-actions .button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
  body.game-active select,
  body.game-active input,
  body.game-active textarea { -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }

  /* The menu uses the same short landscape canvas as the game.  The primary
     solo action therefore remains visible instead of being below the fold. */
  body:not(.game-active) .menu-scene { box-sizing: border-box; width: 100%; min-height: 100dvh; height: 100dvh; padding: 8px; overflow: hidden; }
  body:not(.game-active) .menu-card { max-height: calc(100dvh - 16px); overflow: auto; }
}

@media (orientation: landscape) and (min-width: 701px) and (max-height: 600px) {
  .hand-area { flex-basis: 92px; min-height: 92px; }
  .hand-insights { display: none; }
  .hand { height: calc(100% - 22px); padding-top: 5px; }
  .hand > .card,
  .hand-card-slot > .card { width: clamp(37px, 4.8vw, 48px); height: clamp(54px, 12dvh, 62px); flex-basis: clamp(37px, 4.8vw, 48px); }
  .hand-card-slot { flex-basis: clamp(37px, 4.8vw, 48px); }
  .hand-area.has-editable-joker { flex-basis: 103px; min-height: 103px; }
  .hand-area.has-editable-joker .hand { height: calc(100% - 22px); }
}

@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  body:not(.game-active) .menu-card { width: min(720px, 100%); padding: 11px 16px; border-radius: 14px; }
  body:not(.game-active) .menu-rules-control,
  body:not(.game-active) .menu-profile-control,
  body:not(.game-active) .menu-sound-control { top: 8px; }
  body:not(.game-active) .menu-rules-control { left: 9px; }
  body:not(.game-active) .menu-profile-control { left: 72px; }
  body:not(.game-active) .menu-sound-control { right: 9px; }
  body:not(.game-active) .menu-rules-control .button,
  body:not(.game-active) .menu-profile-control .button,
  body:not(.game-active) .menu-sound-control .button { min-height: 23px; padding: 4px 6px; font-size: 8px; }
  body:not(.game-active) .menu-brand { margin: 0 0 5px; font-size: 24px; }
  body:not(.game-active) .menu-brand .brand-mark { width: 25px; height: 25px; font-size: 14px; }
  body:not(.game-active) .menu-card > .eyebrow,
  body:not(.game-active) .menu-card > h1,
  body:not(.game-active) .menu-card > p:not(.menu-footnote),
  body:not(.game-active) .menu-footnote { display: none; }
  body:not(.game-active) .menu-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
  body:not(.game-active) .menu-mode { min-height: 0; padding: 9px 11px; border-radius: 10px; }
  body:not(.game-active) .menu-mode .eyebrow { margin-bottom: 1px; font-size: 8px; }
  body:not(.game-active) .menu-mode h2 { margin-bottom: 4px; font-size: 16px; }
  body:not(.game-active) .menu-mode p { font-size: 9px; }
  body:not(.game-active) .menu-player-count { margin: 5px 0; font-size: 9px; }
  body:not(.game-active) .menu-player-count select { min-height: 22px; padding: 2px 4px; font-size: 9px; }
  body:not(.game-active) .menu-mode .button { min-height: 27px; padding: 5px 8px; font-size: 9px; }
}

/* Phone tabletop architecture. This is intentionally one small, fixed canvas:
   a player rail, a rectangular felt and a centred card dock. Phase-specific
   layouts only change the content of the felt; they never remove the hand. */

/* Final ownership of the tabletop. This comes after every older landscape
   rule, so the seats stay around the felt and the centre stays a console. */
@media (orientation: landscape) {
  .table > .players-panel .player[data-seat="south"],
  .table > .players-panel .player.is-human[data-seat="south"] { left: 50%; top: 86%; }
  .table > .players-panel .player[data-seat="north"] { top: 10%; }
  .table > .players-panel .player[data-seat="northwest"] { left: 29%; top: 19%; }
  .table > .players-panel .player[data-seat="northeast"] { left: 71%; top: 19%; }
  .table > .players-panel .player[data-seat="west"] { left: 14%; top: 56%; }
  .table > .players-panel .player[data-seat="east"] { left: 86%; top: 56%; }
  .table > .players-panel .player { grid-template-rows: auto auto; gap: 2px; overflow: visible; }
  .table > .players-panel .player-topline { gap: 3px; }
  .seat-rack { min-height: clamp(22px, 4.6dvh, 34px); margin-top: 1px; overflow: visible; }
  .seat-rack .card.small { width: clamp(15px, 2.15vw, 26px); height: clamp(22px, 4.6dvh, 34px); flex-basis: clamp(15px, 2.15vw, 26px); margin-right: -4px; }
  .seat-effects { bottom: calc(100% + 6px); }

  /* Your cards are a physical hand under your seat, not a second dashboard. */
  .hand-area { position: relative; align-self: stretch; flex: 0 0 clamp(92px, 16dvh, 128px); width: 100%; min-height: 0; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .hand-heading { min-height: 0; margin: 0; }
  .hand-heading > div:first-child { display: none; }
  .hand-tools { display: contents; }
  .scout-toggle { position: absolute; z-index: 3; bottom: calc(100% + 31px); left: calc(50% - min(30vw, 255px)); min-height: 25px; padding: 4px 7px; font-size: clamp(8px, .85vw, 10px); }
  .hand-meta, .hand-collapse { display: none; }
  .hand-insights { position: absolute; z-index: 3; bottom: calc(100% + 31px); left: calc(50% + 78px); width: min(31vw, 300px); min-height: 0; margin: 0; padding: 2px 4px; overflow: visible; border: 0; border-radius: 0; background: transparent; font-size: clamp(7px, .75vw, 9px); white-space: nowrap; }
  .hand { position: absolute; bottom: 0; left: 50%; display: flex; width: max-content; min-width: min(360px, 68vw); max-width: min(760px, 90vw); height: 100%; min-height: 0; padding: 9px 12px 5px; overflow-x: auto; overflow-y: visible; border: 1px solid rgba(242, 199, 118, .22); border-radius: 0; background: linear-gradient(180deg, rgba(16, 93, 73, .78), rgba(5, 53, 48, .88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transform: translateX(-50%); }
  .hand > .card, .hand-card-slot > .card { width: clamp(43px, 5.1vw, 64px); height: clamp(64px, 12.6dvh, 94px); flex-basis: clamp(43px, 5.1vw, 64px); }
  .hand-card-slot { flex-basis: clamp(43px, 5.1vw, 64px); }
  .hand .card.selected { transform: translateY(-7px); }
  .hand-area.has-editable-joker { flex-basis: clamp(108px, 19dvh, 145px); }
  .hand-area.has-editable-joker .hand { height: 100%; padding-top: 9px; }

  .table > .combat-board {
    inset: 38% 28% auto;
    width: auto;
    min-height: 0;
    max-height: min(160px, 31dvh);
    padding: 7px 11px 8px;
    border-color: rgba(242, 199, 118, .38);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(4, 44, 37, .92), rgba(5, 31, 32, .88));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    grid-template-areas: "phase" "title" "copy" "actions" "notice";
    grid-template-rows: auto auto auto auto 0;
    gap: 3px;
  }
  .table > .combat-board h1 { font-size: clamp(13px, 1.35vw, 18px); line-height: 1.05; }
  .table > .combat-board .table-copy { display: -webkit-box; max-width: 520px; max-height: 2.6em; font-size: clamp(8px, .82vw, 10px); -webkit-line-clamp: 2; }
  .table > .combat-board .center-cards { display: none; }
  .table > .combat-board .table-actions { min-height: 28px; max-height: 64px; }
  .table > .combat-board .table-actions .button, .table > .combat-board .status-callout { min-height: 28px; padding: 4px 7px; font-size: clamp(8px, .82vw, 10px); }

  .table[data-layout="reveal"] .combat-board,
  .table[data-layout="focus"] .combat-board,
  .table[data-layout="duel"] .combat-board {
    inset: 38% 28% auto;
    max-height: min(160px, 31dvh);
    grid-template-areas: "phase" "title" "copy" "actions" "notice";
    grid-template-rows: auto auto auto auto 0;
  }
  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board h1 { display: block; }
  .table[data-layout="reveal"] > .combat-board .table-copy,
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board .table-copy { display: -webkit-box; }
  .table[data-layout="reveal"] > .combat-board .center-cards,
  .table[data-layout="focus"] > .combat-board .center-cards,
  .table[data-layout="duel"] > .combat-board .center-cards { display: none; }

  .table[data-layout="reveal"] .center-cards,
  .table[data-layout="focus"] .center-cards,
  .table[data-layout="duel"] .center-cards {
    display: none;
  }

  .table[data-layout="reveal"] .reveal-board,
  .table[data-layout="focus"] .reveal-board {
    width: min(100%, 800px);
    min-height: 0;
    max-height: 100%;
    margin: 0;
    padding: 4px 5px;
    overflow: hidden;
  }

  .table[data-layout="reveal"] .reveal-board-title,
  .table[data-layout="focus"] .reveal-board-title {
    display: none;
  }

  .table[data-layout="reveal"] .reveal-seat-list,
  .table[data-layout="focus"] .reveal-seat-list {
    display: grid;
    grid-template-columns: repeat(var(--reveal-count), minmax(0, 1fr));
    width: 100%;
    min-height: 0;
    gap: 4px;
  }

  .table[data-layout="reveal"] .reveal-player,
  .table[data-layout="reveal"] .reveal-board.is-compact .reveal-player,
  .table[data-layout="focus"] .reveal-player,
  .table[data-layout="focus"] .reveal-board.is-compact .reveal-player {
    width: auto;
    min-width: 0;
    height: 58px;
    padding: 3px;
    overflow: hidden;
  }

  .table[data-layout="reveal"] .reveal-player-heading,
  .table[data-layout="focus"] .reveal-player-heading {
    min-width: 0;
  }

  .table[data-layout="reveal"] .reveal-player-heading span,
  .table[data-layout="focus"] .reveal-player-heading span {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table[data-layout="reveal"] .reveal-stack,
  .table[data-layout="focus"] .reveal-stack {
    min-width: 0;
    padding: 2px 0 0;
    overflow: hidden;
  }

  .table[data-layout="reveal"] .reveal-board .card.small,
  .table[data-layout="focus"] .reveal-board .card.small {
    width: 22px;
    height: 32px;
    flex-basis: 22px;
    margin-right: -4px;
    padding: 2px;
  }

  .table[data-layout="duel"] .duel-stage {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 70px;
    width: min(100%, 640px);
    min-height: 0;
    max-height: 100%;
    align-items: center;
    gap: 5px;
  }

  .table[data-layout="duel"] .duel-stage .reveal-board {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px;
    overflow: hidden;
  }

  .table[data-layout="duel"] .duel-stage .reveal-board-title,
  .table[data-layout="duel"] .duel-stage .reveal-player-heading em {
    display: none;
  }

  .table[data-layout="duel"] .duel-stage .reveal-seat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    gap: 3px;
  }

  .table[data-layout="duel"] .duel-stage .reveal-player {
    min-width: 0;
    height: 55px;
    padding: 2px;
    overflow: hidden;
  }

  .table[data-layout="duel"] .duel-stage .reveal-player-heading span {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table[data-layout="duel"] .duel-stage .reveal-stack {
    min-width: 0;
    overflow: hidden;
  }

  .table[data-layout="duel"] .duel-stage .reveal-board .card.small {
    width: 19px;
    height: 28px;
    flex-basis: 19px;
    margin-right: -4px;
    padding: 2px;
  }

  .table[data-layout="duel"] .duel-side .combatant {
    min-height: 56px;
    padding: 4px 2px;
  }

  .table[data-layout="duel"] .table-actions {
    width: min(100%, 640px);
    min-height: 30px;
    max-height: 82px;
    align-self: end;
    overflow: hidden;
  }
}

/* Desktop finishing pass: a table with stations, not a compacted dashboard.
   Mobile deliberately keeps its dedicated rules until its own pass. */
@media (orientation: landscape) and (min-width: 701px) {
  /* Station tags belong to the seats and may extend just beyond the felt.
     Keeping this visible prevents a leading hand from being clipped at north. */
  .table { overflow: visible; }
  .table > .players-panel .player { grid-template-rows: auto auto auto; }
  .table > .players-panel .player:not(.is-human) {
    width: clamp(165px, 17.6vw, 213px);
    height: auto;
    min-height: clamp(92px, 14.3dvh, 119px);
    padding: 8px 10px 9px;
    border-color: rgba(242, 199, 118, .54);
    border-radius: 12px;
    background:
      linear-gradient(145deg, rgba(26, 29, 58, .98), rgba(9, 24, 42, .96)),
      var(--surface);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .table > .players-panel .player:not(.is-human) .player-name { font-size: clamp(11px, 1.08vw, 14px); }
  .table > .players-panel .player:not(.is-human) .player-stats { gap: 5px; }
  .table > .players-panel .player:not(.is-human) .player-stats span {
    min-width: 28px;
    min-height: 23px;
    border-width: 1px;
    background: linear-gradient(145deg, rgba(20, 31, 53, .98), rgba(5, 17, 31, .96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 7px rgba(0,0,0,.28);
    font-size: clamp(8px, .84vw, 11px);
  }
  .table > .players-panel .player:not(.is-human) .stat-hp { background: linear-gradient(145deg, rgba(111, 35, 48, .96), rgba(45, 17, 36, .98)); }
  .table > .players-panel .player:not(.is-human) .stat-shield { background: linear-gradient(145deg, rgba(20, 77, 105, .96), rgba(10, 35, 64, .98)); }
  .table > .players-panel .player:not(.is-human) .stat-poison { background: linear-gradient(145deg, rgba(76, 43, 111, .96), rgba(38, 21, 64, .98)); }
  .table > .players-panel .player:not(.is-human) .stat-fold { background: linear-gradient(145deg, rgba(104, 75, 25, .96), rgba(53, 35, 18, .98)); }
  .table > .players-panel .player.is-human .player-stats span { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 7px rgba(0,0,0,.28); }
  .table > .players-panel .player.is-human .stat-hp { background: linear-gradient(145deg, rgba(111, 35, 48, .96), rgba(45, 17, 36, .98)); }
  .table > .players-panel .player.is-human .stat-shield { background: linear-gradient(145deg, rgba(20, 77, 105, .96), rgba(10, 35, 64, .98)); }
  .table > .players-panel .player.is-human .stat-poison { background: linear-gradient(145deg, rgba(76, 43, 111, .96), rgba(38, 21, 64, .98)); }
  .table > .players-panel .player.is-human .stat-fold { background: linear-gradient(145deg, rgba(104, 75, 25, .96), rgba(53, 35, 18, .98)); }
  .table > .players-panel .seat-rack { min-height: clamp(42px, 7.7dvh, 59px); margin-top: 5px; }
  .table > .players-panel .seat-rack .card.small {
    width: clamp(29px, 3.4vw, 42px);
    height: clamp(42px, 7.7dvh, 59px);
    flex-basis: clamp(29px, 3.4vw, 42px);
    margin-right: -6px;
    padding: 3px;
  }
  .table > .players-panel .seat-rack .card.small .card-corner { font-size: clamp(6px, .66vw, 8px); }
  .table > .players-panel .seat-rack .card.small .card-effect { font-size: clamp(7px, .76vw, 10px); }
  .table > .players-panel .seat-effects { bottom: calc(100% + 9px); }
  .table > .players-panel .station-states {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    z-index: 4;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 3px;
    width: max-content;
    min-height: 0;
    margin: 0;
    transform: translateX(-50%);
  }
  /* Leave a tight gap above the dealer chip rather than lifting the rail
     into the table: the tag must read as part of that player's station. */
  .table > .players-panel .player.is-dealer .station-states { bottom: calc(100% + 15px); }
  .table > .players-panel .station-state {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 2px 5px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(5, 25, 36, .82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    color: #d6ece5;
    font-size: clamp(7px, .68vw, 9px);
    font-weight: 850;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .table > .players-panel .station-state.attacker { border-color: rgba(255, 201, 100, .84); color: #ffe1a1; background: rgba(100, 59, 15, .5); }
  .table > .players-panel .station-state.defender { border-color: rgba(128, 224, 244, .8); color: #b7f1ff; background: rgba(15, 83, 108, .42); }
  .table > .players-panel .station-state.taunt { border-color: rgba(255, 170, 113, .84); color: #ffd0ad; background: rgba(116, 43, 25, .5); }
  .table > .players-panel .station-state.antiheal { border-color: rgba(255, 135, 177, .8); color: #ffc2da; background: rgba(105, 24, 59, .5); }
  .table > .players-panel .station-state.initiative { border-color: rgba(255, 218, 111, .8); color: #ffe798; background: rgba(100, 76, 19, .46); }
  .table > .players-panel .station-state.folded { border-color: rgba(255,118,109,.8); color: #ffcbc5; background: rgba(104,30,38,.78); }
  .table > .players-panel .station-state.best-hand { border-color: rgba(242,199,118,.9); color: #fff0ba; background: rgba(91,62,18,.66); }
  .table > .players-panel .station-state.passed { border-color: rgba(184, 205, 225, .75); color: #dbe9f5; background: rgba(40, 61, 86, .62); }
  .table > .players-panel .station-side-states {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    z-index: 6;
    display: flex;
    gap: 4px;
    transform: translateY(-50%);
    white-space: nowrap;
  }
  .table > .players-panel .station-side-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(7, 26, 39, .96);
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    color: #dcecf5;
    font-size: clamp(8px, .75vw, 10px);
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .table > .players-panel .station-side-state.folded { border-color: rgba(255,118,109,.7); color: #ffbbb5; background: rgba(84, 27, 37, .96); }
  .table > .players-panel .station-side-state.passed { border-color: rgba(155, 212, 228, .72); color: #d8f4ff; background: rgba(17, 69, 90, .96); }
  .table > .players-panel .player[data-seat="east"] .station-side-states,
  .table > .players-panel .player[data-seat="northeast"] .station-side-states { right: calc(100% + 8px); left: auto; }
  .table > .players-panel .dealer-token {
    position: absolute;
    top: -11px;
    right: -11px;
    z-index: 5;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 2px solid #ffe4a3;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff6cb 0 10%, #efbf54 26%, #aa6820 68%, #573113 100%);
    box-shadow: 0 3px 8px rgba(0,0,0,.42), inset 0 0 0 1px rgba(70,35,8,.55);
    color: #4a270d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px rgba(255,255,255,.46);
  }
  .table > .players-panel .player.is-active-turn:has(.dealer-token)::after { right: 29px; }

  .hand {
    gap: 8px;
    padding: 12px 18px 7px;
    border: 1px solid rgba(242, 199, 118, .42);
    border-radius: 18px 18px 0 0;
    background:
      linear-gradient(90deg, transparent 0 4%, rgba(242,199,118,.08) 4.2% 4.5%, transparent 4.7% 95.3%, rgba(242,199,118,.08) 95.5% 95.8%, transparent 96%),
      linear-gradient(180deg, rgba(18, 106, 81, .92), rgba(4, 47, 44, .96));
    box-shadow: 0 -11px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
  }
  .hand > .card, .hand-card-slot > .card { box-shadow: 0 7px 14px rgba(0,0,0,.28); }
  .hand .card.selected { transform: translateY(-13px); box-shadow: 0 12px 22px rgba(0,0,0,.36), 0 0 0 2px rgba(242,199,118,.72); }
  .scout-toggle {
    min-height: 28px;
    padding: 5px 10px;
    border-color: rgba(242, 199, 118, .46);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(24,26,58,.98), rgba(8,29,41,.98));
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
  }
  .hand-insights { gap: 5px; align-items: center; }
  .hand-strength, .potential-effects { padding: 3px 6px; border: 1px solid rgba(157, 222, 190, .18); border-radius: 999px; background: rgba(4, 33, 37, .62); }
  .effect-chip { padding: 3px 6px; border-width: 1px; border-radius: 999px; box-shadow: 0 3px 7px rgba(0,0,0,.18); }

  .table > .battle-fx { position: absolute; z-index: 20; inset: 0; overflow: visible; pointer-events: none; transform: none; }
  .table > .battle-fx .battle-fx-pop {
    position: absolute;
    top: var(--fx-y, 47%);
    left: var(--fx-x, 50%);
    z-index: 1;
    padding: 8px 12px;
    border-width: 2px;
    font-size: clamp(10px, 1vw, 13px);
    transform: translate(-50%, -50%);
  }
  .table > .battle-fx .battle-fx-pop span { font-size: clamp(18px, 1.7vw, 25px); }
  .table > .battle-fx .battle-fx-pop.at-west { margin-left: 15px; }
  .table > .battle-fx .battle-fx-pop.at-east { margin-left: -15px; }
  .table > .battle-fx .battle-fx-pop.seat-anchored { box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 0 22px currentColor; }

  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    inset: 31% 23% auto;
    max-height: min(235px, 43dvh);
    padding: 12px 16px 13px;
    gap: 6px;
  }
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board h1 { font-size: clamp(18px, 1.65vw, 24px); }
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board .table-copy { max-height: 3.9em; font-size: clamp(9px, .9vw, 12px); }
  .table[data-layout="focus"] > .combat-board .table-actions,
  .table[data-layout="duel"] > .combat-board .table-actions { max-height: none; overflow: visible; }
  .target-list { display: grid; grid-template-columns: repeat(2, minmax(145px, 1fr)); width: min(100%, 520px); gap: 8px; }
  .target-list .button {
    min-height: 42px;
    padding: 8px 12px;
    border-color: rgba(255, 205, 106, .72);
    border-radius: 10px;
    background: linear-gradient(135deg, #f7cf70, #e99d43);
    box-shadow: 0 5px 0 rgba(104,54,19,.7), 0 9px 16px rgba(0,0,0,.2);
    color: #25170d;
    font-size: clamp(10px, .95vw, 12px);
    text-shadow: 0 1px rgba(255,255,255,.24);
  }
  .target-list .button:hover { transform: translateY(-2px); filter: saturate(1.12) brightness(1.05); }
  .target-concede .button { min-height: 33px; border-radius: 999px; }
  .station-target-actions { position: absolute; z-index: 8; top: -13px; left: 50%; display: flex; gap: 3px; transform: translateX(-50%); white-space: nowrap; }
  .station-target { min-height: 24px; padding: 4px 6px; border-radius: 999px; font-size: clamp(7px, .72vw, 9px); line-height: 1; }
  .station-target.normal { border-color: rgba(242,199,118,.75); color: #fff1c9; background: rgba(70,48,22,.94); }
  .station-target.initiative { border-color: rgba(104,221,255,.75); color: #d9f8ff; background: rgba(18,65,86,.96); }
  .station-target:hover { transform: translateY(-1px); filter: brightness(1.12); }
  .duel-actions { width: min(100%, 580px); gap: 8px; }
  .effect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .effect-button {
    min-height: 44px;
    padding: 7px 10px;
    border-radius: 10px;
    box-shadow: 0 5px 0 rgba(0,0,0,.28), 0 9px 15px rgba(0,0,0,.16);
    font-size: clamp(10px, .95vw, 12px);
  }
  .table[data-layout="duel"] .effect-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    padding: 7px 9px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    box-shadow: 0 5px 0 rgba(0,0,0,.32), 0 10px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16);
    color: #f8fff9;
    text-align: left;
  }
  .table[data-layout="duel"] .effect-card.damage-effect { background: linear-gradient(135deg, #8c3346, #4a1d38); }
  .table[data-layout="duel"] .effect-card.heal-effect { background: linear-gradient(135deg, #24765c, #123d3d); }
  .table[data-layout="duel"] .effect-card.poison-effect { background: linear-gradient(135deg, #65418e, #2e2559); }
  .table[data-layout="duel"] .effect-card.shield-effect { background: linear-gradient(135deg, #236f91, #173858); }
  .table[data-layout="duel"] .effect-card:hover { filter: brightness(1.13) saturate(1.08); transform: translateY(-2px); }
  .hand .card.locked { cursor: not-allowed; filter: grayscale(.8) brightness(.55); opacity: .72; transform: translateY(0) !important; }
  .hand .card.locked::after { content: "UTILISÉE"; position: absolute; inset: 50% 3px auto; padding: 2px; border-radius: 4px; background: rgba(7, 15, 31, .82); color: #f8fff9; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-align: center; transform: translateY(-50%); }
  .effect-card-icon {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 9px;
    background: rgba(7,15,31,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-size: 17px;
  }
  .effect-card-copy { display: grid; min-width: 0; gap: 2px; padding-left: 7px; }
  .effect-card-copy b { overflow: hidden; font-size: clamp(10px, .98vw, 13px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
  .effect-card-copy small { overflow: hidden; color: rgba(248,255,249,.76); font-size: clamp(8px, .75vw, 10px); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  .effect-card-count { display: grid; min-width: 29px; place-items: center; padding-left: 6px; color: #fff5d7; font-size: 16px; font-weight: 900; line-height: .9; text-align: center; }
  .effect-card-count i { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .duel-actions > .button { min-height: 33px; border-radius: 999px; }

  /* Player HUB: controls orbit the south station; the hand remains a loose fan. */
  .hand-area { overflow: visible; }
  .hand-area.has-hub-action + * { position: relative; }
  .hand-heading { display: contents; }
  .scout-toggle {
    bottom: calc(100% + 48px);
    left: calc(50% - min(31vw, 260px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 8px;
    border-color: rgba(242, 199, 118, .55);
    border-radius: 10px;
    color: #d9e9e1;
    background: linear-gradient(135deg, rgba(20,31,53,.98), rgba(8,24,40,.98));
    box-shadow: 0 7px 15px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
    white-space: nowrap;
  }
  .scout-toggle .hub-resource-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    color: var(--gold);
    background: rgba(21,28,50,.9);
    font-size: 12px;
  }
  .scout-toggle em { margin-left: 5px; padding-left: 5px; border-left: 1px solid rgba(255,255,255,.14); color: #a8cabb; font-size: .9em; font-style: normal; }
  .hand-action {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 48px);
    left: calc(50% + min(9vw, 86px));
    display: flex;
    gap: 6px;
    transform: translateX(0);
  }
  .hand-action .hub-context-action {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 221, 145, .6);
    border-radius: 10px;
    background: linear-gradient(135deg, #f7d47b, #edaf59);
    box-shadow: 0 4px 0 rgba(75,43,12,.45), 0 7px 14px rgba(0,0,0,.18);
    color: #25170d;
    font-size: clamp(8px, .82vw, 10px);
  }
  .hand-action .hub-context-action.secondary { color: #dcece5; border-color: rgba(255,255,255,.2); background: rgba(6,22,25,.78); }
  .hand-meta {
    position: absolute;
    z-index: 6;
    bottom: calc(100% - 20px);
    left: calc(50% + min(18vw, 182px));
    display: block;
    margin: 0;
  }
  .hand-sort-controls { display: inline-flex; gap: 4px; }
  .hand-sort-controls button {
    width: auto;
    min-width: 0;
    height: 25px;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 7px;
    color: #cfe6d9;
    background: rgba(8,22,33,.9);
    font-size: clamp(7px, .72vw, 9px);
    font-weight: 800;
  }
  .hand-sort-controls button[aria-pressed="true"] { border-color: rgba(242,199,118,.7); color: #ffe4a3; background: #342b19; }
  .hand-insights {
    bottom: calc(100% + 10px);
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: min(650px, 76vw);
    padding: 0;
    transform: translateX(-50%);
    white-space: normal;
  }
  .hand-strength { position: absolute; bottom: calc(100% + 84px); left: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-color: rgba(242,199,118,.82); color: #fff1c7; background: rgba(52,43,25,.96); box-shadow: 0 6px 14px rgba(0,0,0,.24); font-size: clamp(10px, .95vw, 13px); transform: translateX(-50%); white-space: nowrap; }
  .hand-strength b { color: #fff6df; }
  .hand-strength em { color: #f3c86e; font-style: normal; }
  .hand-strength .reveal-lead-indicator { display: grid; width: 15px; height: 15px; place-items: center; border: 1px solid rgba(255,242,188,.72); border-radius: 50%; color: #ffe08b; background: rgba(107,75,21,.9); font-size: 9px; line-height: 1; }
  .hand-strength.is-showdown { gap: 7px; border-color: rgba(142, 215, 234, .78); color: #d6f3ff; background: rgba(16, 59, 74, .96); }
  .hand-strength.is-showdown > span { color: #98c9d7; font-size: .78em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  .hand-strength.is-showdown b { color: #effcff; }
  /* During reveal, gold follows the selected cards while the blue best-hand
     preview stays low in the HUD until the player commits their choice. */
  .hand-strength.hand-best-preview {
    position: static;
    min-height: 22px;
    padding: 4px 6px;
    transform: none;
  }
  .hand-area.has-editable-joker .hand-insights { display: flex; }
  .hand .card.joker-configurable { padding-bottom: 31px; }
  .hand .joker-card-control { right: 4px; bottom: 4px; left: 4px; gap: 3px; }
  .hand .joker-card-control label { font-size: 7px; }
  .hand .joker-card-control select { height: 16px; min-height: 16px; font-size: 9px; }
  .potential-effects { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; }
  .potential-effects > span { display: none; }
  .potential-effects > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .effect-chip { min-height: 22px; padding: 4px 6px; background: rgba(6,22,25,.86); font-size: clamp(7px, .7vw, 9px); }
  .hand {
    isolation: isolate;
    gap: 8px;
    justify-content: center;
    padding: 10px 12px 4px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .hand::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -24px;
    left: 50%;
    width: min(520px, 72vw);
    height: 132px;
    border: 1px solid rgba(242,199,118,.27);
    border-radius: 50% 50% 0 0;
    background: radial-gradient(ellipse at 50% 85%, rgba(20,124,87,.74), rgba(5,53,48,.2) 63%, transparent 74%);
    box-shadow: 0 -13px 30px rgba(0,0,0,.2);
    transform: translateX(-50%);
  }
  .hand > .card, .hand-card-slot > .card { margin-left: 0; }
  .hand .card.selected { z-index: 4; transform: translateY(-14px) !important; }
  .table.has-hub-action[data-layout="intro"] .table-actions { display: none; }
}

/* The result screen needs room for every seat.  Keep it readable rather than
   squeezing the final standings into the same compact treatment as a duel. */
@media (orientation: landscape) and (min-width: 701px) {
  .table[data-layout="result"] > .combat-board {
    inset: 30% 32% auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 8px 11px 9px;
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "actions";
    grid-template-rows: min-content min-content min-content min-content;
    align-content: start;
    row-gap: 4px;
  }

  .table[data-layout="result"] > .combat-board .table-copy {
    display: block;
    width: min(100%, 330px);
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .table[data-layout="result"] .leaderboard {
    width: 100%;
    gap: 4px;
  }

  .table[data-layout="result"] .leaderboard-caption {
    margin-bottom: 4px;
    font-size: 9px;
  }

  .table[data-layout="result"] .leaderboard li {
    grid-template-columns: 21px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 6px;
  }

  .table[data-layout="result"] .leaderboard li > span {
    width: 19px;
    height: 19px;
    font-size: 9px;
  }

  .table[data-layout="result"] .leaderboard li b { font-size: 9px; }
  .table[data-layout="result"] .leaderboard li em { max-width: 134px; font-size: 7px; }
  .table[data-layout="result"] > .combat-board .table-actions { display: flex; min-height: 25px; margin-top: 0; }

  .scout-toggle[hidden] { display: none !important; }

  .table[data-layout="spectator"] > .combat-board {
    inset: 36% 29% auto;
    max-height: 178px;
    padding: 12px 18px;
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "actions";
    grid-template-rows: min-content min-content minmax(0, 1fr) 0;
    row-gap: 5px;
  }
  .table[data-layout="spectator"] > .combat-board .table-actions { display: none; }
}

/* The table is an interface, not a document: dragging must never select its
   labels or interrupt an in-progress play. Form controls remain editable. */
body.game-active,
body.game-active * {
  -webkit-user-select: none;
  user-select: none;
}

body.game-active input,
body.game-active select,
body.game-active textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

/* A small crown on the gold reveal tag confirms that the cards currently
   selected would take the lead; it remains visible in compact landscape. */
.hand-strength .reveal-lead-indicator {
  display: grid !important;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid rgba(255,242,188,.72);
  border-radius: 50%;
  color: #ffe08b;
  background: rgba(107,75,21,.9);
  font-size: 9px;
  line-height: 1;
}

/* Available only with ?lab=1. The laboratory edits local state directly and
   is never rendered in a normal game. */
.lab-panel {
  position: absolute;
  z-index: 40;
  top: 9px;
  left: 9px;
  display: grid;
  width: min(250px, 38vw);
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(242,199,118,.58);
  border-radius: 8px;
  background: rgba(8,18,32,.94);
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
  font-size: 8px;
}
.lab-heading { display: flex; justify-content: space-between; gap: 5px; color: #ffe09a; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.lab-heading small { color: #91b9b2; font-size: 7px; letter-spacing: 0; text-transform: none; }
.lab-panel label { display: flex; align-items: center; justify-content: space-between; gap: 4px; color: #cfe4dd; }
.lab-panel select, .lab-panel input, .lab-panel button { min-height: 22px; padding: 3px 5px; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; color: #edf9f2; background: #142d3a; font: inherit; font-weight: 800; }
.lab-panel input { width: 35px; }
.lab-stats { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 3px; }
.lab-stats label { display: grid; gap: 1px; font-size: 7px; }
.lab-stats button { align-self: end; }
.lab-cards { display: grid; gap: 3px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,.1); }
.lab-cards label { display: grid; grid-template-columns: 1fr 1.5fr auto; }
.lab-card-list { display: flex; flex-wrap: wrap; gap: 2px; max-height: 42px; overflow-y: auto; }
.lab-card-list span { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 4px; color: #1d172a; background: #f7f1e7; font-size: 7px; font-weight: 850; }
.lab-card-list button { min-height: 0; padding: 0 2px; border: 0; color: #8b2630; background: transparent; }
.lab-card-list em { color: #91b9b2; }
.lab-actions { display: flex; gap: 4px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,.1); }
.lab-actions button:first-child { color: #2b1a08; border-color: #f4c76d; background: #f4c76d; }
.lab-panel button:hover { filter: brightness(1.18); }

/* The Joker is configured from a dedicated rail, not from tiny controls
   squeezed into a playing card. It stays in reach during paid discard too. */
.hand-insights.is-joker-editor {
  display: flex;
  justify-content: center;
  overflow: visible;
  margin-bottom: 3px;
  padding: 0;
  border: 0;
  background: transparent;
}
.joker-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  width: min(100%, 620px);
  padding: 5px 7px;
  border: 1px solid rgba(210,173,255,.56);
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(47,28,76,.94), rgba(19,37,57,.94));
  box-shadow: 0 5px 14px rgba(0,0,0,.26);
}
.joker-editor-title { color: #ffe29b; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.joker-editor-hint { color: #dcccec; font-size: 9px; font-weight: 700; }
.joker-editor-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; }
.joker-editor-choice { display: grid; grid-template-columns: 22px minmax(58px, auto) minmax(68px, auto); align-items: end; gap: 4px; padding: 3px 4px; border: 1px solid rgba(242,199,118,.42); border-radius: 6px; background: rgba(8,17,35,.54); }
.joker-editor-card { display: grid; width: 22px; height: 25px; place-items: center; border: 1px solid rgba(242,199,118,.78); border-radius: 4px; color: #4e327c; background: linear-gradient(145deg, #f7eaff, #dfcfed); font-family: Georgia, serif; font-size: 12px; font-weight: 900; }
.joker-editor-choice label { display: grid; gap: 1px; color: #d5c6e8; font-size: 7px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.joker-editor-choice select { min-height: 24px; padding: 2px 5px; border: 1px solid rgba(220,197,244,.58); border-radius: 4px; color: #3b255d; background: #f7efff; font-size: 10px; font-weight: 850; }
@media (max-width: 700px) {
  .joker-editor { gap: 4px 6px; padding: 4px 5px; }
  .joker-editor-hint { display: none; }
  .joker-editor-choice { grid-template-columns: 20px 52px 58px; }
  .joker-editor-card { width: 20px; height: 23px; }
  .joker-editor-choice select { min-height: 22px; padding: 1px 3px; font-size: 9px; }
}

/* Joker: the card is the editor. Its proxy controls grow from the card on
   demand, so they are readable without turning the hand into a form. */
.hand-area.has-editable-joker .hand { overflow: visible; }
.hand .card.joker-configurable {
  z-index: 12;
  overflow: visible;
  padding-bottom: 5px;
  transform: translateY(-7px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.4), 0 0 0 2px rgba(222,184,255,.58);
}
.hand .card.joker-configurable .joker-card-control {
  position: absolute;
  z-index: 20;
  right: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  display: grid;
  width: min(244px, calc(100vw - 20px));
  min-height: 0;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(227,194,255,.8);
  border-radius: 9px;
  color: #eee5ff;
  background: linear-gradient(145deg, rgba(55,32,83,.98), rgba(15,33,53,.98));
  box-shadow: 0 12px 28px rgba(0,0,0,.46), 0 0 20px rgba(195,137,255,.22);
  transform: translateX(-50%);
  animation: joker-editor-in .16s ease-out both;
}
.joker-choice-heading { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 5px; color: #d7c9ef; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.joker-choice-heading b { color: #fff2c9; font-size: 11px; letter-spacing: .02em; }
.joker-choice-close { display: grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #f3e8ff; background: rgba(255,255,255,.08); font-size: 14px; line-height: 1; }
.joker-choice-ranks { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; }
.joker-choice-rank, .joker-choice-effect { min-width: 0; border: 1px solid rgba(225,205,248,.28); border-radius: 4px; color: #eee7fa; background: rgba(5,12,31,.43); font-weight: 900; }
.joker-choice-rank { height: 23px; padding: 0; font-size: 9px; }
.joker-choice-rank.is-selected { border-color: #f3cc70; color: #25172d; background: #f3cc70; box-shadow: 0 0 0 1px rgba(243,204,112,.25); }
.joker-choice-effects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.joker-choice-effect { height: 28px; padding: 0; font-size: 15px; }
.joker-choice-effect.damage { color: #ff9ba0; }.joker-choice-effect.heal { color: #9eeab6; }.joker-choice-effect.poison { color: #dbbbff; }.joker-choice-effect.shield { color: #97e0ff; }
.joker-choice-effect.is-selected { border-color: currentColor; background: rgba(255,255,255,.16); box-shadow: 0 0 0 1px currentColor, 0 0 12px currentColor; }
.joker-choice-rank:hover, .joker-choice-effect:hover, .joker-choice-close:hover { filter: brightness(1.18); transform: translateY(-1px); }
@keyframes joker-editor-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (max-width: 700px) {
  .hand .card.joker-configurable .joker-card-control { width: min(228px, calc(100vw - 14px)); gap: 4px; padding: 5px; }
  .joker-choice-rank { height: 21px; font-size: 8px; }
  .joker-choice-effect { height: 25px; font-size: 13px; }
}

/* When the Joker editor is open, its compact pad owns the only space above
   the hand. Effect summaries would otherwise compete with tap targets. */
.hand-insights.is-joker-active { display: none !important; }
.joker-choice-home { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.joker-choice-home button { display: grid; min-height: 38px; place-items: center; gap: 1px; padding: 3px; border: 1px solid rgba(225,205,248,.35); border-radius: 6px; color: #f2eafa; background: rgba(5,12,31,.5); }
.joker-choice-home small { color: #d8c9ea; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.joker-choice-home b { color: #fff2c9; font-family: Georgia, serif; font-size: 17px; line-height: 1; }
.joker-choice-home b.damage { color: #ff9ba0; }.joker-choice-home b.heal { color: #9eeab6; }.joker-choice-home b.poison { color: #dbbbff; }.joker-choice-home b.shield { color: #97e0ff; }
.joker-choice-back { justify-self: start; padding: 0; border: 0; color: #dccbf0; background: transparent; font-size: 8px; font-weight: 850; }
.joker-choice-pad { display: grid; gap: 4px; }
.joker-choice-ranks { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.joker-choice-rank { height: 27px; font-size: 10px; }
.joker-choice-effects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.joker-choice-effect { height: 33px; font-size: 17px; }
@media (max-width: 700px) {
  .joker-choice-home button { min-height: 34px; }
  .joker-choice-rank { height: 25px; font-size: 9px; }
  .joker-choice-effect { height: 29px; font-size: 15px; }
}

/* Final Joker palette: one compact board above the hand controls. The ranks,
   current proxy and allowed effects are visible at once—no explanatory copy. */
.hand-area.is-editing-joker .hand-meta { max-width: none; overflow: visible; }
.hand-area.is-editing-joker .hand-tools { gap: 4px; }
.hand-area.is-editing-joker { overflow: visible; }
.hand .card.joker-editing { z-index: 4; transform: translateY(-7px); box-shadow: 0 10px 22px rgba(0,0,0,.36), 0 0 0 2px rgba(222,184,255,.66); }
.joker-palette-layer { position: absolute; z-index: 45; bottom: calc(100% + 4px); left: calc(50% + min(4vw, 48px)); pointer-events: none; transform: translateX(min(11vw, 125px)); }
.joker-palette { display: grid; grid-template-columns: 154px 64px 58px 18px; align-items: center; gap: 5px; padding: 4px 5px; border: 1px solid rgba(227,194,255,.78); border-radius: 8px; background: linear-gradient(145deg, rgba(55,32,83,.98), rgba(15,33,53,.98)); box-shadow: 0 6px 16px rgba(0,0,0,.34); pointer-events: auto; }
.joker-palette .joker-choice-ranks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.joker-palette .joker-choice-rank { height: 23px; padding: 0; border: 1px solid rgba(225,205,248,.3); border-radius: 4px; color: #eee7fa; background: rgba(5,12,31,.43); font-size: 10px; font-weight: 900; }
.joker-palette .joker-choice-rank.is-selected { border-color: #f3cc70; color: #25172d; background: #f3cc70; box-shadow: 0 0 0 1px rgba(243,204,112,.25); }
.joker-picked { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.joker-picked b { display: grid; height: 42px; place-items: center; border: 2px solid rgba(255,255,255,.62); border-radius: 4px; color: #fff0cd; background: rgba(5,12,31,.52); font-family: Georgia, serif; font-size: 18px; }
.joker-picked b.damage { color: #ff9ba0; }.joker-picked b.heal { color: #9eeab6; }.joker-picked b.poison { color: #dbbbff; }.joker-picked b.shield { color: #97e0ff; }
.joker-palette .joker-choice-effects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.joker-palette .joker-choice-effect { display: grid; width: 27px; height: 20px; place-items: center; padding: 0; border: 1px solid rgba(225,205,248,.35); border-radius: 4px; background: rgba(5,12,31,.46); font-size: 13px; font-weight: 900; }
.joker-palette .joker-choice-effect.damage { color: #ff9ba0; }.joker-palette .joker-choice-effect.heal { color: #9eeab6; }.joker-palette .joker-choice-effect.poison { color: #dbbbff; }.joker-palette .joker-choice-effect.shield { color: #97e0ff; }
.joker-palette .joker-choice-effect.is-selected { border-color: currentColor; background: rgba(255,255,255,.16); box-shadow: 0 0 0 1px currentColor, 0 0 9px currentColor; }
.joker-palette .joker-choice-effect:disabled { cursor: not-allowed; opacity: .2; filter: grayscale(1); }
.joker-palette .joker-choice-close { display: grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #f3e8ff; background: rgba(255,255,255,.08); font-size: 14px; line-height: 1; }
.joker-palette button:not(:disabled):hover { filter: brightness(1.18); transform: translateY(-1px); }
@media (max-width: 760px) {
  .joker-palette-layer { bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); }
  .joker-palette { grid-template-columns: 140px 58px 54px 16px; gap: 4px; padding: 3px 4px; }
  .joker-palette .joker-choice-rank { height: 21px; font-size: 9px; }
  .joker-picked b { height: 38px; font-size: 16px; }
  .joker-palette .joker-choice-effect { width: 25px; height: 18px; font-size: 12px; }
}

/* Responsive anchor map ---------------------------------------------------
   The table has one geometry at every landscape size.  Seats, their local
   effects, the player HUD and the hand all read from these anchors instead
   of maintaining a second set of unrelated pixel positions. */
@media (orientation: landscape) {
  .table {
    --seat-south-x: 50%; --seat-south-y: 86%;
    --seat-north-x: 50%; --seat-north-y: 10%;
    --seat-northwest-x: 29%; --seat-northwest-y: 19%;
    --seat-northeast-x: 71%; --seat-northeast-y: 19%;
    --seat-west-x: 14%; --seat-west-y: 56%;
    --seat-east-x: 86%; --seat-east-y: 56%;
    --seat-center-x: 50%; --seat-center-y: 47%;

    --fx-south-x: 50%; --fx-south-y: 75%; --fx-south-top-y: 68%;
    --fx-north-x: 50%; --fx-north-y: 24%; --fx-north-top-y: 16%;
    --fx-northwest-x: 34%; --fx-northwest-y: 31%; --fx-northwest-top-y: 23%;
    --fx-northeast-x: 66%; --fx-northeast-y: 31%; --fx-northeast-top-y: 23%;
    --fx-west-x: 23%; --fx-west-y: 59%; --fx-west-top-y: 51%;
    --fx-east-x: 77%; --fx-east-y: 59%; --fx-east-top-y: 51%;
    --fx-center-x: 50%; --fx-center-y: 47%; --fx-center-top-y: 39%;

    --station-width: clamp(132px, 16.5vw, 194px);
    --station-height: clamp(66px, 12dvh, 98px);
    --hub-rail: 48px;
    --hub-action-x: min(9vw, 86px);
    --hud-rail: 10px;
    --hand-card-width: clamp(58px, 6.6vw, 86px);
    --hand-card-height: clamp(84px, 15.5dvh, 120px);
    --hand-card-gap: clamp(5px, .65vw, 10px);
    --joker-pad-rail: 44px;
  }

  /* The hand is a sibling of the table, so it needs the shared HUD tokens
     on its own inheritance path as well. */
  .hand-area {
    --hub-rail: 48px;
    --hub-action-x: min(9vw, 86px);
    --hud-rail: 10px;
    --hand-card-width: clamp(58px, 6.6vw, 86px);
    --hand-card-height: clamp(84px, 15.5dvh, 120px);
    --hand-card-gap: clamp(5px, .65vw, 10px);
    --joker-pad-rail: 44px;
  }

  .table > .players-panel .player,
  .table > .players-panel.is-crowded .player {
    left: var(--seat-x, 50%) !important;
    top: var(--seat-y, 50%) !important;
    width: var(--station-width) !important;
    min-height: var(--station-height) !important;
  }

  /* Keep the coordinate plane the size of the felt.  Without this explicit
     fill, a compact phone can let the panel collapse to one player's natural
     height, making percentage anchors resolve against a 40px strip. */
  .table > .players-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto !important;
  }
  .table > .players-panel #players { height: 100% !important; }

  .table > .battle-fx .battle-fx-pop {
    left: var(--fx-x, 50%);
    top: var(--fx-y, 47%);
  }

  /* Cemetery and sorting share one rail; neither floats independently. */
  .scout-toggle,
  .hand-meta { bottom: calc(100% + var(--hud-rail)); }
  .hand-action { bottom: calc(100% + var(--hub-rail)); }
  .hand-action { left: calc(50% + var(--hub-action-x)); }
  .hand-insights { bottom: calc(100% + var(--hud-rail)); }
  .hand { gap: var(--hand-card-gap); }
  .hand > .card,
  .hand-card-slot > .card {
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    flex-basis: var(--hand-card-width);
  }
  .hand-card-slot { flex-basis: var(--hand-card-width); }
  .joker-palette-layer { bottom: calc(100% + var(--joker-pad-rail)); }

  .hand-area {
    flex-basis: clamp(130px, 21dvh, 168px);
  }
  .hand-area.has-editable-joker {
    flex-basis: clamp(142px, 23dvh, 184px);
  }

  /* The controls retain their familiar icons at every landscape width. */
  .new-game-controls { flex-wrap: nowrap; }
  .new-game-controls .button {
    display: grid;
    width: 29px;
    height: 29px;
    min-height: 29px;
    place-items: center;
    padding: 0;
    font-size: 0;
    flex: 0 0 29px;
  }
  .new-game-controls .button::before { color: var(--ink); font-size: 15px; line-height: 1; }
  #return-menu::before { content: "☰"; }
  #rules-toggle::before { content: "?"; }
  #profile-toggle::before { content: "◎"; }
  #sound-toggle::before { content: "♪"; }
}

@media (orientation: landscape) and (min-width: 701px) {
  .table {
    --station-width: clamp(165px, 17.6vw, 213px);
    --station-height: clamp(92px, 14.3dvh, 119px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table {
    --seat-south-y: 87%;
    --seat-northwest-y: 17%;
    --seat-northeast-y: 17%;
    --seat-west-y: 55%;
    --seat-east-y: 55%;
    --fx-south-y: 73%; --fx-south-top-y: 66%;
    --fx-north-y: 23%; --fx-north-top-y: 15%;
    --fx-northwest-y: 29%; --fx-northwest-top-y: 21%;
    --fx-northeast-y: 29%; --fx-northeast-top-y: 21%;
    --fx-west-y: 57%; --fx-west-top-y: 49%;
    --fx-east-y: 57%; --fx-east-top-y: 49%;
    --station-width: clamp(122px, 17vw, 168px);
    --station-height: clamp(62px, 14dvh, 84px);
    --hub-rail: 36px;
    --hub-action-x: min(8vw, 72px);
    --hud-rail: 7px;
    --hand-card-width: clamp(54px, 5.2vw, 64px);
    --hand-card-height: clamp(82px, 17dvh, 100px);
    --hand-card-gap: 5px;
    --joker-pad-rail: 39px;
  }

  .hand-area {
    --hub-rail: 36px;
    --hub-action-x: min(8vw, 72px);
    --hud-rail: 7px;
    --hand-card-width: clamp(54px, 5.2vw, 64px);
    --hand-card-height: clamp(82px, 17dvh, 100px);
    --hand-card-gap: 5px;
    --joker-pad-rail: 39px;
  }

  /* A high-DPI phone can report a desktop-like width.  Its available height,
     not that width, is the constraint, so this deliberately outranks the
     desktop station polish above. */
  .table > .players-panel .player,
  .table > .players-panel .player:not(.is-human),
  .table > .players-panel.is-crowded .player {
    height: auto !important;
    min-height: var(--station-height) !important;
    padding: 5px 6px !important;
    border-radius: 8px;
  }
  .table > .players-panel .player-name,
  .table > .players-panel .player:not(.is-human) .player-name { font-size: 10px; }
  .table > .players-panel .player-stats span,
  .table > .players-panel .player:not(.is-human) .player-stats span {
    min-width: 0;
    min-height: 18px;
    height: 18px;
    font-size: 8px;
  }
  .table > .players-panel .seat-rack {
    min-height: 27px !important;
    margin-top: 3px;
  }
  .table > .players-panel .seat-rack .card.small {
    width: 18px;
    height: 27px;
    flex-basis: 18px;
    margin-right: -4px;
    padding: 2px;
  }

  .hand-area { flex-basis: clamp(110px, 25dvh, 128px); }
  .hand-area.has-editable-joker { flex-basis: clamp(124px, 27dvh, 142px); }
}

/* Short landscape still uses the same table: only supporting copy yields
   space to the seat, the current action and the cards.  This prevents a
   long planning console from sitting on top of the human hub. */
@media (orientation: landscape) and (max-height: 520px) {
  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board {
    inset: 38% 28% auto;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding: 4px 7px;
    grid-template-areas: "title" "actions";
    grid-template-rows: 20px 28px;
    gap: 2px;
  }

  .table[data-layout="intro"] > .combat-board .phase-label,
  .table[data-layout="intro"] > .combat-board .table-copy,
  .table[data-layout="status"] > .combat-board .phase-label,
  .table[data-layout="status"] > .combat-board .table-copy,
  .table[data-layout="intro"] > .combat-board .center-cards,
  .table[data-layout="status"] > .combat-board .center-cards,
  .table[data-layout="intro"] > .combat-board .table-notification-zone,
  .table[data-layout="status"] > .combat-board .table-notification-zone { display: none; }

  .table[data-layout="intro"] > .combat-board h1,
  .table[data-layout="status"] > .combat-board h1 {
    display: block;
    align-self: center;
    overflow: hidden;
    font-size: clamp(12px, 2vw, 16px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table[data-layout="intro"] > .combat-board .table-actions,
  .table[data-layout="status"] > .combat-board .table-actions {
    min-height: 28px;
    max-height: 28px;
    overflow: hidden;
  }

  .table[data-layout="intro"] > .combat-board .table-actions .button,
  .table[data-layout="status"] > .combat-board .table-actions .button,
  .table[data-layout="intro"] > .combat-board .status-callout,
  .table[data-layout="status"] > .combat-board .status-callout {
    min-height: 26px;
    max-width: 100%;
    padding: 3px 6px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* In planning/status, the cards themselves stay the readable effect
     source.  The verbose duplicate rail is reserved for reveal and combat. */
  .game-layout:has(.table[data-layout="intro"]) + .hand-area .hand-insights,
  .game-layout:has(.table[data-layout="status"]) + .hand-area .hand-insights { display: none; }

}

/* A vacant hand is information, not an oversized empty card fan.  The shared
   hand rail stays available for the cemetery, while its visual dock yields
   the space back to the table until cards arrive. */
@media (orientation: landscape) {
  .hand-area.is-empty {
    flex-basis: clamp(54px, 9dvh, 72px);
    min-height: 54px;
  }
  .hand-area.is-empty .hand {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    padding: 0;
  }
  .hand-area.is-empty .hand::before { display: none; }
  .hand-area.is-empty .status-callout { padding: 4px 7px; font-size: 9px; }
  .hand-area.is-empty .hand-insights,
  .hand-area.is-empty .hand-meta { display: none; }

  /* The cemetery trigger is also its close control: it must never sit below
     the fixed drawer once that drawer is open. */
  #toggle-scout[aria-expanded="true"] { z-index: 41; }
}

/* On a roomy screen, the local hub is a compact personal status card rather
   than another opponent-sized station.  Short landscape keeps the common
   station size so touch targets remain generous. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 600px) {
  .table > .players-panel .player.is-human {
    width: clamp(142px, 12.6vw, 160px) !important;
    min-height: clamp(66px, 9.3dvh, 80px) !important;
    padding: 6px 8px !important;
  }
  .table > .players-panel .player.is-human .player-name { font-size: clamp(10px, .9vw, 12px); }
}

/* Three densities, one table.  The seats and the hand keep their visual
   identity; it is the centre console that gives up empty space as vertical
   room disappears. */
@media (orientation: landscape) and (min-height: 521px) {
  .table > .combat-board {
    height: auto;
    min-height: 0;
    max-height: min(128px, 18dvh);
    align-content: start;
    grid-template-rows: min-content min-content min-content min-content 0;
  }
  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board {
    grid-template-areas: "phase" "title" "copy" "actions" "notice";
    grid-template-rows: min-content min-content min-content min-content 0;
  }
  .table[data-layout="intro"] > .combat-board .table-copy,
  .table[data-layout="status"] > .combat-board .table-copy {
    display: -webkit-box;
    max-height: 2.6em;
    -webkit-line-clamp: 2;
  }

  .hand-area { flex-basis: clamp(112px, 18dvh, 148px); }
  .hand { width: fit-content; min-width: 0; }
  .hand-insights { bottom: calc(100% + 4px); }
  .hand-strength { bottom: calc(100% + 30px); }
}

/* The smaller desktop state is still a desktop table: same seats and cards,
   simply a shorter centre console with no spare vertical well. */
@media (orientation: landscape) and (min-height: 521px) and (max-height: 619px) {
  .table > .combat-board {
    max-height: min(104px, 18dvh);
    padding: 6px 9px;
    gap: 2px;
  }
  .table > .combat-board h1 { font-size: clamp(12px, 1.28vw, 16px); }
  .table > .combat-board .table-copy { font-size: clamp(8px, .78vw, 9px); }
  .hand-area { flex-basis: clamp(108px, 18dvh, 118px); }
}

/* The compact/mobile state keeps the explanation.  Only decorative centre
   content and duplicate controls disappear, never the instruction itself. */
@media (orientation: landscape) and (max-height: 520px) {
  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board {
    inset: 27% 24% auto;
    height: auto;
    min-height: 66px;
    max-height: 78px;
    padding: 4px 7px;
    grid-template-areas: "phase" "title" "copy";
    grid-template-rows: 10px min-content minmax(0, 2.5em);
    align-content: start;
    gap: 2px;
  }
  .table[data-layout="intro"] > .combat-board .phase-label,
  .table[data-layout="intro"] > .combat-board .table-copy,
  .table[data-layout="status"] > .combat-board .phase-label,
  .table[data-layout="status"] > .combat-board .table-copy {
    display: -webkit-box;
  }
  .table[data-layout="intro"] > .combat-board h1,
  .table[data-layout="status"] > .combat-board h1 {
    overflow: visible;
    font-size: clamp(12px, 2vw, 15px);
    text-overflow: clip;
    white-space: normal;
  }
  .table[data-layout="intro"] > .combat-board .table-copy,
  .table[data-layout="status"] > .combat-board .table-copy {
    max-height: 2.5em;
    overflow: hidden;
    font-size: clamp(7px, .94vw, 8px);
    line-height: 1.2;
    -webkit-line-clamp: 2;
  }
  .table[data-layout="intro"] > .combat-board .table-actions,
  .table[data-layout="status"] > .combat-board .table-actions { display: none; }
}

/* Keep the local station visually stable through both desktop densities. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 521px) {
  .table > .players-panel .player.is-human {
    width: clamp(142px, 12.6vw, 160px) !important;
    min-height: clamp(66px, 9.3dvh, 80px) !important;
    padding: 6px 8px !important;
  }
}

/* HUD reconciliation ------------------------------------------------------
   The player hand stays visually open, like the mobile table reference.
   The dark surface belongs to the opponent stations—not to a second dock
   beneath the cards.  Personal decisions orbit the south HUB; duel effects
   keep the centre of the table. */
@media (orientation: landscape) {
  body.game-active .pwa-notice { display: none !important; }

  .hand-area {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    width: min(900px, calc(100% - 18px));
    min-width: 0;
    margin: 4px auto 0;
    padding: 0 8px 4px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex-basis: clamp(134px, 24dvh, 170px);
  }

  .hand-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(760px, 82vw);
    min-height: 28px;
    margin: 0 auto;
  }
  .hand-heading > div:first-child { display: none; }
  .hand-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 7px;
  }
  .scout-toggle,
  .hand-meta {
    position: static;
    bottom: auto;
    left: auto;
    z-index: auto;
    margin: 0;
    transform: none;
  }
  .scout-toggle { min-height: 26px; padding: 4px 8px; font-size: 8px; }
  .scout-toggle .hub-resource-icon { width: 15px; height: 15px; font-size: 9px; }
  .hand-sort-controls button { height: 26px; min-height: 26px; padding: 4px 8px; font-size: 8px; }
  .hand-collapse { min-width: 26px; min-height: 26px; padding: 3px 6px; }

  .hand-insights {
    position: static;
    z-index: auto;
    display: flex;
    width: 100%;
    min-height: 21px;
    margin: 0 auto 4px;
    padding: 0 4px;
    transform: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .hand-area:not(.is-collapsed):not(.is-empty) .hand-insights { display: flex !important; }
  .hand-insights .potential-effects,
  .hand-insights .hand-strength { margin: 0; }
  .hand-strength { position: static; bottom: auto; left: auto; transform: none; }
  .potential-effects > div { flex-wrap: nowrap; }
  .hand-insights .effect-chip {
    min-height: 20px;
    padding: 2px 5px;
    border-color: currentColor;
    background: rgba(6, 22, 25, .88);
    box-shadow: 0 3px 7px rgba(0,0,0,.18);
  }
  .hand-insights .effect-chip.muted { color: var(--muted); }

  .hand {
    position: relative;
    bottom: auto;
    left: auto;
    align-self: end;
    display: flex;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 5px 9px 2px;
    border: 1px solid rgba(242, 199, 118, .34);
    border-radius: 13px 13px 0 0;
    background:
      linear-gradient(90deg, transparent 0 4%, rgba(242,199,118,.08) 4.2% 4.5%, transparent 4.7% 95.3%, rgba(242,199,118,.08) 95.5% 95.8%, transparent 96%),
      linear-gradient(180deg, rgba(12, 25, 49, .94), rgba(4, 10, 28, .98));
    box-shadow: 0 -8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
    overflow-x: auto;
    overflow-y: visible;
    transform: none;
  }
  .hand::before { display: none; }
  .hand-area {
    --hand-card-width: clamp(50px, 5.2vw, 60px);
    --hand-card-height: clamp(72px, 13dvh, 86px);
    --hand-card-gap: clamp(4px, .6vw, 7px);
  }
  .hand > .card,
  .hand-card-slot > .card {
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    flex: 0 0 var(--hand-card-width);
  }
  .hand-card-slot { flex: 0 0 var(--hand-card-width); }

  /* Check, Fold and Discard remain immediately beside the human station. */
  .hand-action {
    position: absolute;
    z-index: 18;
    bottom: calc(100% + var(--hub-rail));
    left: calc(50% + var(--hub-action-x));
    display: flex;
    max-width: min(37vw, 390px);
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    transform: translateX(0);
    white-space: nowrap;
    scrollbar-width: none;
  }
  .hand-action::-webkit-scrollbar { display: none; }
  .hand-action .hub-context-action { flex: 0 0 auto; min-height: 29px; padding: 5px 8px; }

  /* Duel effects deliberately remain in the middle console. */
  .table[data-layout="duel"] .table-actions {
    z-index: 9;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .table[data-layout="duel"] .duel-actions { width: min(100%, 580px); }
  .table[data-layout="duel"] .effect-grid { justify-content: center; }
}

/* Compact landscape retains real opponent stations and readable backs.
   Copy gives way before the cards do, so this is still the same table—not a
   second, broken mini-layout. */
@media (orientation: landscape) and (max-height: 520px) {
  .table > .players-panel .player:not(.is-human) {
    min-height: clamp(70px, 20dvh, 86px) !important;
    background:
      linear-gradient(145deg, rgba(26, 29, 58, .98), rgba(9, 24, 42, .96)),
      var(--surface);
  }
  .table > .players-panel .seat-rack {
    min-height: clamp(32px, 8dvh, 40px) !important;
    margin-top: 3px;
  }
  .table > .players-panel .seat-rack .card.small {
    width: clamp(22px, 3vw, 29px);
    height: clamp(32px, 8dvh, 40px);
    flex-basis: clamp(22px, 3vw, 29px);
    margin-right: -4px;
    padding: 2px;
  }
  .table > .players-panel .seat-rack .card.small .card-corner { font-size: 6px; }
  .table > .players-panel .seat-rack .card.small .card-effect { font-size: 7px; }

  .hand-area {
    flex-basis: clamp(130px, 34dvh, 150px);
    padding: 0 6px 3px;
  }
  .hand-action { max-width: min(41vw, 310px); }
  .hand-insights { min-height: 20px; margin-bottom: 1px; }
  .hand-insights .effect-chip { min-height: 18px; padding: 2px 4px; font-size: 7px; }
}

/* Every tall panel owns a persistent close control and an internal scroll
   region.  It can never grow beyond the visible game surface. */
@media (orientation: landscape) {
  .graveyard-drawer:not([hidden]) {
    position: fixed;
    z-index: 120;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    display: flex;
    width: min(700px, calc(100vw - 28px));
    max-width: none;
    max-height: min(46dvh, 310px);
    margin: 0;
    flex-direction: column;
    transform: translate(-50%, -50%);
  }
  .graveyard-title {
    flex: 0 0 auto;
    align-items: center;
    padding: 10px 12px;
  }
  .graveyard-tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .graveyard-close { min-height: 28px; padding: 5px 8px; font-size: 9px; white-space: nowrap; }
  .graveyard-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .rules-drawer,
  .profile-drawer { z-index: 120; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .graveyard-drawer:not([hidden]) {
    width: min(640px, calc(100vw - 20px));
    max-height: min(55dvh, 250px);
  }
  .graveyard-title { align-items: flex-start; }
  .graveyard-title > span:first-child { max-width: 36%; line-height: 1.25; }
  .graveyard-tools { gap: 4px; }
  .graveyard-sort { gap: 3px; }
  .graveyard-sort > span:first-child { display: none; }
  .graveyard-close { min-height: 24px; padding: 3px 6px; font-size: 8px; }
}

/* Phase panels may describe the decision, but they never own the south-seat
   lane. Reserving that lane keeps the personal HUB, its local action and the
   effect rail readable through reveal, targeting and combat. */
@media (orientation: landscape) {
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    inset: clamp(28px, 18%, 96px) 25% auto;
    max-height: min(132px, 27dvh);
    overflow: hidden;
  }
  .table[data-layout="reveal"] > .combat-board .table-actions,
  .table[data-layout="focus"] > .combat-board .table-actions,
  .table[data-layout="duel"] > .combat-board .table-actions {
    max-height: 58px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .table > .players-panel .player.is-human { z-index: 12; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board {
    top: clamp(104px, calc(17% + 57px), 134px);
    right: 24%;
    bottom: auto;
    left: 24%;
  }
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    inset: 16% 24% auto;
    max-height: min(112px, 29dvh);
    padding: 5px 8px 6px;
  }
  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board h1 { font-size: clamp(12px, 1.7vw, 15px); }
}

/* Bottom rail: its controls float above the cards instead of consuming a
   second panel-height.  The cards therefore stay whole and the felt keeps
   its central breathing room at both phone and desktop widths. */
@media (orientation: landscape) {
  .table { --seat-south-y: 92%; }

  .hand-area {
    display: block;
    flex: 0 0 clamp(94px, 17dvh, 116px);
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    --hand-card-width: clamp(54px, 5.4vw, 64px);
    --hand-card-height: clamp(76px, 14dvh, 92px);
    --hand-card-gap: clamp(4px, .6vw, 7px);
  }
  .hand-heading {
    position: absolute;
    bottom: calc(100% + 28px);
    left: 50%;
    width: min(680px, 72vw);
    min-height: 26px;
    margin: 0;
    transform: translateX(-50%);
  }
  .hand-tools { width: 100%; }
  .scout-toggle { min-height: 26px; }
  .hand-sort-controls button { min-width: 52px; }

  .hand-insights {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 3px);
    left: 50%;
    display: flex;
    width: max-content;
    max-width: min(600px, 74vw);
    min-height: 20px;
    margin: 0;
    padding: 0 4px;
    overflow: visible;
    transform: translateX(-50%);
  }
  .hand-insights .potential-effects > div { justify-content: center; }

  .hand {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: fit-content;
    min-width: 0;
    max-width: min(760px, 92vw);
    height: auto;
    margin: 0;
    padding: 5px 9px 2px;
    overflow-x: auto;
    overflow-y: visible;
    transform: translateX(-50%);
  }
  .hand > .card,
  .hand-card-slot > .card {
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    flex: 0 0 var(--hand-card-width);
  }
  .hand-card-slot { flex: 0 0 var(--hand-card-width); }

  .hand-action {
    bottom: calc(100% + 43px);
    left: calc(50% + clamp(94px, 10vw, 122px));
    max-width: min(36vw, 400px);
  }

  /* Effects and the finish action are decisions, never a scrollable list. */
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    max-height: none;
    overflow: visible;
  }
  .table[data-layout="reveal"] > .combat-board .table-actions,
  .table[data-layout="focus"] > .combat-board .table-actions,
  .table[data-layout="duel"] > .combat-board .table-actions {
    max-height: none;
    overflow: visible;
  }
  .table[data-layout="duel"] .duel-actions {
    grid-template-rows: auto auto;
    min-height: 0;
    gap: 4px;
  }
  .table[data-layout="duel"] .effect-grid { gap: 4px; }
  .table[data-layout="duel"] .effect-card {
    min-height: 36px;
    padding: 4px 6px;
  }
  .table[data-layout="duel"] .effect-card-icon { width: 23px; height: 23px; font-size: 13px; }
  .table[data-layout="duel"] .effect-card-copy { padding-left: 4px; }
  .table[data-layout="duel"] .effect-card-copy small { display: none; }

  .graveyard-drawer:not([hidden]) {
    top: clamp(68px, 22dvh, 180px);
    width: min(1040px, calc(100vw - 34px));
    max-height: min(34dvh, 250px);
    transform: translateX(-50%);
  }
  .graveyard-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table { --seat-south-y: 91%; }
  .hand-area { flex-basis: clamp(92px, 22dvh, 108px); }
  .hand-heading { bottom: calc(100% + 24px); width: min(600px, 78vw); }
  .hand-action { bottom: calc(100% + 39px); }
  .hand > .card,
  .hand-card-slot > .card {
    width: clamp(52px, 5.4vw, 60px);
    height: clamp(74px, 16dvh, 84px);
    flex-basis: clamp(52px, 5.4vw, 60px);
  }
  .hand-card-slot { flex-basis: clamp(52px, 5.4vw, 60px); }
  .graveyard-drawer:not([hidden]) {
    top: 52px;
    width: min(820px, calc(100vw - 20px));
    max-height: min(48dvh, 220px);
  }
}

/* Stable action lane ------------------------------------------------------
   Reveal and duel used to inherit the roomy table grid. On short screens its
   fractional tracks expanded the board right through the south station and
   the hand. These boards now size to their content and grow from the top of
   the felt, while every action stays visible instead of becoming a scrollbox. */
@media (orientation: landscape) {
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    /* Clear the north stations before the decision panel begins. */
    top: clamp(122px, calc(19% + 70px), 248px);
    right: 24%;
    bottom: auto;
    left: 24%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 7px 10px 8px;
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "center"
      "actions"
      "notice";
    grid-template-rows: min-content min-content min-content min-content min-content 0;
    align-content: start;
    row-gap: 3px;
    overflow: visible;
  }
  .table[data-layout="reveal"] > .combat-board .table-copy,
  .table[data-layout="focus"] > .combat-board .table-copy,
  .table[data-layout="duel"] > .combat-board .table-copy {
    max-height: 2.7em;
    -webkit-line-clamp: 2;
  }
  .table[data-layout="reveal"] > .combat-board .table-actions,
  .table[data-layout="focus"] > .combat-board .table-actions,
  .table[data-layout="duel"] > .combat-board .table-actions {
    min-height: 0;
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
  }
  .table[data-layout="duel"] .duel-actions { gap: 3px; }
  .table[data-layout="duel"] .effect-grid { gap: 3px; }
  .table[data-layout="duel"] .effect-card {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 30px;
    padding: 3px 5px;
  }
  .table[data-layout="duel"] .effect-card-icon { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
  .table[data-layout="duel"] .effect-card-copy { padding-left: 3px; }
  .table[data-layout="duel"] .effect-card-copy b { font-size: clamp(8px, .78vw, 10px); }
  .table[data-layout="duel"] .effect-card-count { min-width: 20px; padding-left: 3px; font-size: 11px; }
  .table[data-layout="duel"] .duel-actions > .button { min-height: 25px; padding: 4px 7px; font-size: 8px; }

  /* The effect rail occupies the narrow gap between the south HUB and the
     cards, rather than sitting across the station itself. */
  .hand-insights {
    bottom: calc(100% - 27px);
    min-height: 18px;
  }
  .hand-insights .effect-chip {
    min-height: 18px;
    padding: 2px 4px;
    font-size: 7px;
  }
  .hand-insights .hand-strength {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 8px;
  }
  .hand {
    transform: translate(-50%, 7px);
  }
  .hand-action {
    overflow: visible;
    flex-wrap: wrap;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .table[data-layout="reveal"] > .combat-board,
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    top: clamp(104px, calc(17% + 57px), 134px);
    right: 23%;
    left: 23%;
    padding: 5px 7px 6px;
    row-gap: 2px;
  }
  .table[data-layout="reveal"] > .combat-board .phase-label,
  .table[data-layout="focus"] > .combat-board .phase-label,
  .table[data-layout="duel"] > .combat-board .phase-label { font-size: 7px; }
  .table[data-layout="reveal"] > .combat-board h1,
  .table[data-layout="focus"] > .combat-board h1,
  .table[data-layout="duel"] > .combat-board h1 { font-size: clamp(12px, 1.7vw, 15px); }
  .table[data-layout="duel"] .effect-card { min-height: 27px; }
  .table[data-layout="duel"] .effect-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .table[data-layout="duel"] .duel-actions > .button { min-height: 23px; }
}

/* Human HUD guardrails ----------------------------------------------------
   The Joker picker is an overlay, not a reason to reserve a second hand
   height. Keeping the same card rail prevents one Joker from creating a
   tall empty box or pushing its picker into the top-right controls. */
@media (orientation: landscape) {
  .hand-area.has-editable-joker,
  .hand-area.is-editing-joker {
    flex-basis: clamp(94px, 17dvh, 116px);
    min-height: 0;
  }
  .hand-area.has-editable-joker .hand,
  .hand-area.is-editing-joker .hand {
    height: auto;
    min-height: 0;
    padding: 5px 9px 2px;
  }
  .hand-area.is-editing-joker .hand-insights { display: none; }

  /* Keep personal decisions immediately beside the south HUB. */
  .hand-action { left: calc(50% + clamp(82px, 8.5vw, 104px)); }

  /* The reveal lift should read as selected without crossing the HUD rail. */
  .hand .card.selected { transform: translateY(-8px) !important; }

  /* The editor is centred over the hand it changes, never the sort tools. */
  .joker-palette-layer {
    bottom: calc(100% + 39px);
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .hand-area.has-editable-joker,
  .hand-area.is-editing-joker { flex-basis: clamp(92px, 22dvh, 108px); }
  .hand .card.selected { transform: translateY(-7px) !important; }
}

@media (orientation: landscape) {
  /* Preserve a clear air gap above a raised card instead of masking it with
     the private effect rail. The hand moves only two pixels, safely inside
     the shell, while the rail yields the remaining space. */
  .hand { transform: translate(-50%, 9px); }
  .hand-insights { bottom: calc(100% - 15px); }
}

/* Final compact HUD hierarchy --------------------------------------------
   Keep three distinct layers: instruction panel, player decisions, then the
   hand.  That removes the accidental overlap between a selected card and
   the HUD above it. */
@media (orientation: landscape) {
  .hand {
    z-index: 7;
  }
  .hand .card.selected {
    z-index: 1;
    transform: translateY(-4px) !important;
  }

  /* A single connected action tray reads as part of the human station,
     rather than two unrelated buttons floating beside it. */
  .hand-action {
    left: calc(50% + clamp(74px, 7.6vw, 96px));
    align-items: center;
    gap: 3px;
    padding: 2px;
    border: 1px solid rgba(242, 199, 118, .32);
    border-radius: 13px;
    background: rgba(4, 17, 30, .78);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .hand-action .hub-context-action {
    min-height: 26px;
    padding: 4px 7px;
    border-radius: 9px;
    box-shadow: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* On phones this narrow panel sits in the open centre gap, not through the
     south station. The title and its two-line instruction remain readable. */
  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board {
    top: 24px;
    right: 38%;
    bottom: auto;
    left: 38%;
    min-height: 58px;
    max-height: 64px;
    padding: 4px 6px;
    grid-template-rows: 9px min-content minmax(0, 2.5em);
  }
  .table[data-layout="intro"] > .combat-board h1,
  .table[data-layout="status"] > .combat-board h1 { font-size: clamp(11px, 1.7vw, 13px); }
  .table[data-layout="intro"] > .combat-board .table-copy,
  .table[data-layout="status"] > .combat-board .table-copy { font-size: 7px; }

  /* Planning has no revealed-hand state tag, so its single decision can sit
     cleanly between the instruction and the south station. */
  .game-layout:has(.table[data-layout="intro"]) + .hand-area .hand-action {
    bottom: calc(100% + 45px);
  }
}

/* Personal HUD placement --------------------------------------------------
   Each control group gets its own anchor around the south station instead of
   sharing the old, wide hand heading.  This keeps the centre open for the
   round copy at compact landscape heights. */
@media (orientation: landscape) and (min-width: 701px) {
  .topbar { position: relative; }
  .round-status {
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }

  .hand-heading { display: contents; }

  /* Resources attach to the left edge of the human HUB. */
  .scout-toggle {
    position: absolute;
    z-index: 16;
    bottom: calc(100% - 7px);
    left: calc(50% - clamp(70px, 7vw, 92px));
    transform: translateX(-100%);
  }

  /* Sorting belongs directly beside the hand, with a small count-aware
     offset so short and full hands both retain a tight relationship. */
  .hand-area { --hand-sort-offset: clamp(154px, 12vw, 188px); }
  .hand-area:has(.hand > :nth-child(6)) { --hand-sort-offset: clamp(183px, 14vw, 220px); }
  .hand-area:has(.hand > :nth-child(7)) { --hand-sort-offset: clamp(212px, 16.2vw, 260px); }
  .hand-meta {
    position: absolute;
    z-index: 16;
    bottom: calc(var(--hand-card-height) - 28px);
    left: calc(50% + var(--hand-sort-offset));
    display: block;
    margin: 0;
    transform: none;
  }

  /* Check, fold and discard sit just to the right of—and lower than—the
     human HUB, leaving the text console above them unobstructed. */
  .hand-action {
    left: calc(50% + clamp(63px, 6.5vw, 84px));
    bottom: calc(100% + 31px);
  }
}

@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board {
    top: 24px;
    right: 35%;
    bottom: auto;
    left: 35%;
    min-height: 64px;
    max-height: 70px;
    grid-template-rows: 9px min-content minmax(0, 3.2em);
  }

  .game-layout:has(.table[data-layout="intro"]) + .hand-area .hand-action {
    bottom: calc(100% + 31px);
  }
}

/* Visual rhythm repair ----------------------------------------------------
   The compact table needs a readable centre console and three clearly spaced
   personal layers: HUB, information rail, then cards. */
@media (orientation: landscape) and (min-width: 701px) {
  .table > .players-panel .player.is-dealer { z-index: 24; }
  .table > .players-panel .player.is-dealer .dealer-token { z-index: 50; }

  .round-status {
    padding: 3px 7px;
    border-bottom: 1px solid rgba(202, 142, 255, .55);
    color: #eedaff;
    font-weight: 800;
    letter-spacing: .035em;
  }

  .scout-toggle { bottom: calc(100% + 15px); }

  .hand-sort-controls { gap: 5px; }
  .hand-sort-controls button {
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 8px;
  }

  .hand-insights {
    bottom: calc(100% - 2px);
    min-height: 20px;
  }
  .hand-insights .effect-chip { min-height: 20px; padding: 2px 5px; }

  .hand {
    padding-bottom: 7px;
    transform: translate(-50%, 0);
  }

  .hand-action {
    bottom: calc(100% + 21px);
    z-index: 19;
  }
}

@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  /* The copy panel occupies the genuine open centre, below the north seats,
     instead of squeezing between them. */
  .table[data-layout="intro"] > .combat-board,
  .table[data-layout="status"] > .combat-board {
    top: 32%;
    right: 28%;
    left: 28%;
    min-height: 58px;
    max-height: 62px;
    padding: 4px 10px;
    grid-template-rows: 9px min-content minmax(0, 2.5em);
  }
  .table[data-layout="intro"] > .combat-board h1,
  .table[data-layout="status"] > .combat-board h1 { font-size: clamp(13px, 1.95vw, 16px); }
  .table[data-layout="intro"] > .combat-board .table-copy,
  .table[data-layout="status"] > .combat-board .table-copy {
    font-size: clamp(8px, .88vw, 10px);
    line-height: 1.25;
  }

  .game-layout:has(.table[data-layout="intro"]) + .hand-area .hand-action {
    bottom: calc(100% + 11px);
  }
}

/* Combat console exclusion zone -----------------------------------------
   Focus and duel are the only centre states that can render effect buttons.
   Their console must end before the south seat begins: a fixed, compact
   content grid is more reliable here than allowing the inherited roomy tracks
   to grow into the personal HUD. */
@media (orientation: landscape) and (min-width: 701px) {
  .table[data-layout="focus"] > .combat-board,
  .table[data-layout="duel"] > .combat-board {
    top: 34%;
    right: 24%;
    bottom: auto;
    left: 24%;
    height: min(112px, 31dvh);
    min-height: 0;
    max-height: min(112px, 31dvh);
    padding: 5px 8px 6px;
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "actions"
      "notice";
    grid-template-rows: 8px minmax(14px, auto) minmax(0, 2.5em) minmax(28px, auto) 0;
    align-content: start;
    row-gap: 2px;
    overflow: hidden;
  }

  .table[data-layout="focus"] > .combat-board .center-cards,
  .table[data-layout="duel"] > .combat-board .center-cards {
    display: none;
    min-height: 0;
    margin: 0;
  }

  .table[data-layout="focus"] > .combat-board .table-actions,
  .table[data-layout="duel"] > .combat-board .table-actions {
    min-height: 28px;
    max-height: 34px;
    overflow: visible;
    gap: 4px;
  }
}

/* Planning and revelation use copy, not a second player rail.  Give the
   planning instructions their missing line, then keep the reveal console
   deliberately short so it cannot touch the south HUB or its hand insights. */
@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  .table[data-layout="intro"] > .combat-board {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    grid-template-rows: 9px min-content minmax(0, 3.2em);
  }

  .table[data-layout="reveal"] > .combat-board {
    top: 32%;
    right: 24%;
    bottom: auto;
    left: 24%;
    height: min(96px, 28dvh);
    min-height: 0;
    max-height: min(96px, 28dvh);
    padding: 5px 8px 6px;
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "actions"
      "notice";
    grid-template-rows: 8px minmax(14px, auto) minmax(0, 2.5em) minmax(0, auto) 0;
    align-content: start;
    row-gap: 2px;
    overflow: hidden;
  }

  .table[data-layout="reveal"] > .combat-board .center-cards {
    display: none;
    min-height: 0;
    margin: 0;
  }

  .table[data-layout="reveal"] > .combat-board .table-actions {
    min-height: 0;
    max-height: 28px;
    overflow: visible;
  }
}

/* South HUD breathing room ------------------------------------------------
   The human station, private effects and cards are three separate rails.
   On short landscape screens they used to collapse into one another; moving
   the station slightly up and the two lower rails down restores a readable
   sequence without changing the table's central states. */
@media (orientation: landscape) and (min-width: 701px) {
  .hand { transform: translate(-50%, 8px); }
  .hand-insights { bottom: calc(100% - 10px); }

  /* The human already has the action tray and active-seat treatment. Its
     legacy dot lands beside Check/Fold and reads as a stray black circle. */
  .table > .players-panel .player.is-human.is-active-turn::after { display: none; }
}

@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  .table > .players-panel .player[data-seat="south"],
  .table > .players-panel .player.is-human[data-seat="south"] {
    top: calc(86% - 10px);
  }
  .hand { transform: translate(-50%, 18px); }
  .hand-insights { bottom: calc(100% - 30px); }
}

/* South controls keep their individual anchors ---------------------------
   Button hover styles normally own `transform`, which used to erase the
   cemetery's left-hand anchor.  Preserve that anchor and keep every control
   outside the human station's bounds. */
@media (orientation: landscape) and (min-width: 701px) {
  .scout-toggle {
    left: calc(50% - clamp(92px, 9vw, 114px));
  }
  .scout-toggle:hover,
  .scout-toggle:focus-visible {
    transform: translateX(-100%) translateY(-1px);
  }

  .hand-action {
    left: calc(50% + clamp(96px, 9.5vw, 120px));
  }

  /* The human HUB has its own action tray; it must never receive a second
     tiny turn-decoration beside the fold counter. */
  .table > .players-panel .player.is-human::after {
    content: none;
    display: none;
    box-shadow: none;
  }
}

/* Final control polish ----------------------------------------------------
   A no-op action tray still inherited its dark pill, leaving a six-pixel
   "mystery dot" whenever the hand had no contextual action. */
@media (orientation: landscape) and (min-width: 701px) {
  .hand-action:empty { display: none; }

  /* Targeting belongs above a station, never over the player name. */
  .station-target-actions { top: -28px; }
}

/* A wide hand action is taller than the cemetery button.  On desktop, lower
   its baseline by the height difference so their visual centres align. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 521px) {
  .hand-action:not(:empty) { bottom: calc(100% + 13px); }
}

/* Combat has a second, mandatory action row.  The old 112px cap clipped
   "Terminer mon tour" as soon as effects wrapped onto two lines. */
@media (orientation: landscape) and (min-width: 701px) {
  .table[data-layout="duel"] > .combat-board {
    height: min(154px, 36dvh);
    max-height: min(154px, 36dvh);
  }
}

/* Short landscape duel rail ----------------------------------------------
   Effects live in one predictable rail. The hand score (for example Full
   house) and the end-turn control form a second, fixed pair, so deselecting
   cards can never leave either action stranded at a side of the panel. */
@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  .table[data-layout="duel"] > .combat-board {
    height: min(96px, 25dvh);
    max-height: min(96px, 25dvh);
  }

  .table[data-layout="duel"] .duel-actions {
    display: grid;
    grid-template-rows: auto auto;
    width: 100%;
    gap: 3px;
  }

  .table[data-layout="duel"] .effect-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 28px;
    min-width: 0;
    gap: 3px;
  }

  .table[data-layout="duel"] .effect-card {
    grid-template-columns: 16px minmax(0, 1fr);
    min-height: 22px;
    padding: 2px 3px;
  }

  .table[data-layout="duel"] .effect-card-icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    font-size: 9px;
  }

  .table[data-layout="duel"] .effect-card-copy { padding-left: 2px; }
  .table[data-layout="duel"] .effect-card-copy b {
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table[data-layout="duel"] .effect-card-copy small { display: none; }
  .table[data-layout="duel"] .effect-card-rail-label { display: inline; }
  .table[data-layout="duel"] .effect-card-label { display: none; }

  .table[data-layout="duel"] .duel-action-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 22px;
  }
  .table[data-layout="duel"] .duel-combo-slot,
  .table[data-layout="duel"] .duel-finish-row { flex: 0 0 auto; }
  .table[data-layout="duel"] .duel-combo-action {
    display: flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 5px;
    font-size: 7px;
  }
  .table[data-layout="duel"] .duel-combo-action .effect-card-icon {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    font-size: 7px;
  }
  .table[data-layout="duel"] .duel-combo-action .effect-card-copy { padding-left: 3px; }
  .table[data-layout="duel"] .duel-finish-row .button {
    min-height: 22px;
    padding: 3px 6px;
    font-size: 7px;
  }

  /* On a 393px-high screen the player names carry more context than the
     generic combat instruction; reserving this line keeps the rail inside
     its own board instead of spilling into the HUB. */
  .table[data-layout="duel"] > .combat-board .table-copy { display: none; }
}

/* Let the private effect rail borrow the vacant lower edge of the south HUB.
   The player stats end well above this strip, so the rail gains air above the
   cards without covering the name or the four resource counters. */
@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  .hand-insights {
    z-index: 13;
    bottom: calc(100% - 22px);
  }
}

/* The abbreviated copy is only exposed by the compact duel rail above. */
.effect-card-rail-label { display: none; }

/* Duel action rail: final ownership -------------------------------------
   The combat console is deliberately above the south station while a duel is
   in progress.  This is the only time its buttons may cross that visual lane:
   both the hand score and end-turn control must remain usable, never sit
   behind the attacker/defender state chips. */
@media (orientation: landscape) and (min-width: 701px) {
  .table[data-layout="duel"] > .combat-board {
    z-index: 30;
    overflow: visible;
  }
  .table[data-layout="duel"] > .combat-board .table-actions {
    position: relative;
    z-index: 31;
    display: block;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .table[data-layout="duel"] .duel-actions {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 640px);
    grid-template-rows: auto auto;
    gap: 5px;
  }
  .table[data-layout="duel"] .effect-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 30px;
    min-width: 0;
    gap: 5px;
  }
  .table[data-layout="duel"] .effect-card {
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 30px;
    padding: 3px 5px;
  }
  .table[data-layout="duel"] .effect-card-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    font-size: 10px;
  }
  .table[data-layout="duel"] .effect-card-copy { padding-left: 3px; }
  .table[data-layout="duel"] .effect-card-copy b {
    overflow: hidden;
    font-size: clamp(7px, .68vw, 9px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table[data-layout="duel"] .effect-card-copy small { display: none; }
  .table[data-layout="duel"] .effect-card-label { display: none; }
  .table[data-layout="duel"] .effect-card-rail-label { display: inline; }

  .table[data-layout="duel"] .duel-action-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    gap: 5px;
  }
  .table[data-layout="duel"] .duel-combo-slot,
  .table[data-layout="duel"] .duel-finish-row { flex: 0 0 auto; }
  .table[data-layout="duel"] .duel-combo-action {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 7px;
  }
  .table[data-layout="duel"] .duel-combo-action .effect-card-icon {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    font-size: 8px;
  }
  .table[data-layout="duel"] .duel-combo-action .effect-card-copy { padding-left: 4px; }
  .table[data-layout="duel"] .duel-finish-row .button {
    min-height: 28px;
    padding: 4px 8px;
    font-size: clamp(7px, .68vw, 9px);
  }
}

/* A roomy screen gets the same one-line rail, with enough explicit room for
   both rail rows.  The previous generic two-column grid is not valid for this
   combat-only component. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 521px) {
  .table[data-layout="duel"] > .combat-board {
    height: min(164px, 31dvh);
    max-height: min(164px, 31dvh);
    grid-template-rows: 8px minmax(16px, auto) minmax(0, 2.5em) minmax(63px, auto) 0;
  }
  .table[data-layout="duel"] > .combat-board .table-actions {
    min-height: 63px;
  }
}

/* The phone rail keeps its touch-safe compact sizes, but inherits the combat
   stacking order above the south HUB from the shared rule above. */
@media (orientation: landscape) and (min-width: 701px) and (max-height: 520px) {
  .table[data-layout="duel"] .duel-actions { gap: 3px; }
  .table[data-layout="duel"] .effect-grid { min-height: 28px; gap: 3px; }
  .table[data-layout="duel"] .effect-card {
    grid-template-columns: 16px minmax(0, 1fr);
    min-height: 22px;
    padding: 2px 3px;
  }
  .table[data-layout="duel"] .effect-card-icon {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }
  .table[data-layout="duel"] .duel-action-footer { min-height: 22px; gap: 4px; }
  .table[data-layout="duel"] .duel-combo-action,
  .table[data-layout="duel"] .duel-finish-row .button {
    min-height: 22px;
    padding: 3px 6px;
    font-size: 7px;
  }
  .table[data-layout="duel"] .duel-combo-action .effect-card-icon {
    width: 13px;
    height: 13px;
    font-size: 7px;
  }
}

/* Combat interaction layers ---------------------------------------------
   A duel can deliberately overlap the south station, but its decisions must
   win that overlap. Effect feedback is higher still, so a hit never vanishes
   behind the console that triggered it. */
@media (orientation: landscape) and (min-width: 701px) {
  /* The compact duel board inherited an implicit auto column from an older
     console layout.  That makes a one-card rail measure itself by its card
     instead of by the board, so it cannot truly be centred. */
  .table[data-layout="duel"] > .combat-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .table[data-layout="focus"] > .combat-board {
    z-index: 30;
    overflow: visible;
  }
  .table[data-layout="focus"] > .combat-board .table-actions {
    position: relative;
    z-index: 31;
    overflow: visible;
    pointer-events: auto;
  }
  .table[data-layout="focus"] .target-actions,
  .table[data-layout="focus"] .target-concede {
    position: relative;
    z-index: 1;
  }
  .table[data-layout="focus"] .target-concede .button { min-height: 28px; }

  .table > .battle-fx { z-index: 80; }

  /* A partial selection uses the same cell width as a full five-effect rail,
     then centres the occupied cells instead of leaving one lonely effect at
     the far left. */
  .table[data-layout="duel"] .effect-grid {
    grid-template-columns: repeat(var(--effect-count, 5), minmax(0, 1fr));
    justify-self: center;
  }
  .table[data-layout="duel"] > .combat-board .table-actions,
  .table[data-layout="duel"] .duel-actions { width: 100%; }
  .table[data-layout="duel"] .effect-grid.effect-count-0 { width: 0; }
  .table[data-layout="duel"] .effect-grid.effect-count-1 { width: 20%; }
  .table[data-layout="duel"] .effect-grid.effect-count-2 { width: 40%; }
  .table[data-layout="duel"] .effect-grid.effect-count-3 { width: 60%; }
  .table[data-layout="duel"] .effect-grid.effect-count-4 { width: 80%; }
  .table[data-layout="duel"] .effect-grid.effect-count-5 { width: 100%; }
}

/* Result is a genuine foreground panel.  It stays centred above every seat,
   and its buttons are in the same hit-testing layer as the standings. */
@media (orientation: landscape) {
  .table[data-layout="result"] > .combat-board,
  .table[data-layout="result"] > .combat-board.is-gameover {
    z-index: 70;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(440px, calc(100% - 28px));
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 10px 12px;
    overflow: visible;
    grid-template-areas:
      "phase"
      "title"
      "copy"
      "actions"
      "notice";
    grid-template-rows: min-content min-content minmax(0, 1fr) min-content 0;
    align-content: start;
    row-gap: 5px;
    pointer-events: auto;
    transform: translate(-50%, -50%) !important;
  }
  .table[data-layout="result"] > .combat-board .table-copy {
    display: block;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .table[data-layout="result"] .leaderboard {
    width: min(100%, 380px);
    margin: 0 auto;
  }
  .table[data-layout="result"] > .combat-board .table-actions {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 28px;
    max-height: none;
    margin: 0;
    overflow: visible;
    pointer-events: auto;
  }
}

/* A finished five-seat game is a fixed, small result — never a scrollable
   dialog.  Tighten only the short landscape variant so every rank and both
   actions stay in one glance on a phone. */
@media (orientation: landscape) and (max-height: 520px) {
  .table[data-layout="result"] > .combat-board,
  .table[data-layout="result"] > .combat-board.is-gameover {
    width: min(370px, calc(100% - 20px));
    padding: 7px 10px;
    row-gap: 3px;
    overflow: visible;
  }
  .table[data-layout="result"] > .combat-board h1 { font-size: clamp(16px, 2.2vw, 20px); }
  .table[data-layout="result"] .leaderboard { gap: 2px; }
  .table[data-layout="result"] .leaderboard li { min-height: 0; padding: 3px 6px; }
  .table[data-layout="result"] .leaderboard li > span { width: 16px; height: 16px; font-size: 8px; }
  .table[data-layout="result"] .leaderboard li b { font-size: 9px; }
  .table[data-layout="result"] > .combat-board .table-actions { min-height: 25px; }
  .table[data-layout="result"] > .combat-board .table-actions .button { min-height: 25px; padding: 3px 7px; font-size: 8px; }
}