/* Arena chrome polish (2026-10-20). Presentation only: this sheet never moves
   a battlefield, opponent zone or the hand row. It refines the turn tracker,
   active-turn emphasis, life bands, lane labels and the decision status. */

/* Turn tracker: one segmented track. Finished steps stay readable, the
   current step is the only filled pill. Short labels are the default. */
#game .stepper .step-long { display: none; }
body.game-active #game.command-table .arenaheader .stepper {
  gap: 2px; padding: 3px; border: 1px solid var(--ds-line-soft); border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--ds-panel-raised-rgb), .55), rgba(var(--ds-panel-rgb), .7));
  box-shadow: inset 0 1px rgba(255, 255, 255, .03);
}
body.game-active #game.command-table .arenaheader .stepper .step {
  position: relative; min-width: 34px !important; height: 30px; padding: 0 10px !important;
  color: var(--ds-muted); background: transparent !important; border: 1px solid transparent !important;
  border-radius: 7px !important; box-shadow: none !important;
  font: 700 9.5px/1 var(--ds-font-body); letter-spacing: .1em; text-transform: uppercase;
  transition: color var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease);
}
body.game-active #game.command-table .arenaheader .stepper .step.done { color: rgba(var(--ds-accent-soft-rgb), .78); }
body.game-active #game.command-table .arenaheader .stepper .step.done::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: rgba(var(--ds-accent-rgb), .55);
}
body.game-active #game.command-table .arenaheader .stepper .step.on {
  min-width: 44px !important; color: var(--ds-accent-ink) !important;
  background: linear-gradient(180deg, var(--ds-accent-bright), var(--ds-accent)) !important;
  border-color: rgba(var(--ds-accent-bright-rgb), .9) !important;
  box-shadow: 0 6px 18px rgba(var(--ds-accent-rgb), .3), inset 0 1px rgba(255, 255, 255, .45) !important;
}
body.game-active #game.command-table.combat-phase .arenaheader .stepper .step.on {
  background: linear-gradient(180deg, #ff9a7e, #d9573f) !important; border-color: #ffb39f !important;
  box-shadow: 0 6px 18px rgba(217, 87, 63, .32), inset 0 1px rgba(255, 255, 255, .45) !important;
}
/* Full step names when the header has room; status chips keep the short form. */
@media (min-width: 1251px) {
  #game.command-table .arenaheader:not(:has(.monarchstatus, .politicsstatus)) .stepper .step-short { display: none; }
  #game.command-table .arenaheader:not(:has(.monarchstatus, .politicsstatus)) .stepper .step-long { display: inline; }
  body.game-active #game.command-table .arenaheader:not(:has(.monarchstatus, .politicsstatus)) .stepper .step {
    letter-spacing: .02em; text-transform: none; font-size: 11px; font-weight: 650;
  }
}

/* Active turn: a warm hairline and soft light around the lane whose turn it is.
   Shadows only, so no lane changes size. */
body.game-active #game.command-table .opprow.active,
body.game-active #game.command-table.human-turn .myboard {
  box-shadow: 0 0 0 1px rgba(var(--ds-accent-rgb), .55), 0 0 32px rgba(var(--ds-accent-rgb), .14), inset 0 1px rgba(var(--ds-accent-bright-rgb), .12) !important;
}
body.game-active.high-contrast #game.command-table .opprow.active,
body.game-active.high-contrast #game.command-table.human-turn .myboard {
  box-shadow: 0 0 0 2px var(--ds-accent-bright) !important;
}
/* The badge is exactly one 14px line tall, so the lane head keeps the height it
   had before the badge existed and the battlefield below it loses no room. */
#game.command-table .ct-turn-badge,
#game.command-table.ct-desktop-lands .opphead .ct-turn-badge {
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; height: 14px;
  margin-left: 8px; padding: 0 7px 0 6px;
  vertical-align: 1px; color: var(--ds-accent-bright); background: rgba(var(--ds-accent-rgb), .13);
  border: 1px solid rgba(var(--ds-accent-rgb), .38); border-radius: 999px;
  font: 700 9px/1 var(--ds-font-body); letter-spacing: .03em; white-space: nowrap;
}
#game.command-table .ct-turn-badge::before,
#game.command-table.ct-desktop-lands .opphead .ct-turn-badge::before {
  content: ''; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ds-accent-bright); box-shadow: 0 0 0 0 rgba(var(--ds-accent-bright-rgb), .6);
  animation: arena-turn-pulse 2.4s var(--ds-ease) infinite;
}
#game.command-table .ct-player-name > small { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
#game.command-table .ct-player-name > small .ct-turn-badge { margin-left: 6px; }
@keyframes arena-turn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--ds-accent-bright-rgb), .55); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(var(--ds-accent-bright-rgb), 0); }
}

/* Life bands: low life is tinted, critical life also warms its glow.
   The number itself still carries the state for screen readers. */
#game .opplife.life-low, #game .melife.life-low, #game .ct-seat-life.life-low { color: #ffb08f !important; }
#game .opplife.life-low .gameicon { color: #ff9a7e; }
#game .opplife.life-critical, #game .melife.life-critical, #game .ct-seat-life.life-critical {
  color: var(--ds-danger) !important; text-shadow: 0 0 14px rgba(239, 139, 123, .45);
}

@media (min-width: 901px) {
  /* "LANDS · MANA" fits its 34px column on two clean lines instead of
     collapsing to "LAN…" on your own lane. */
  body.game-active #game.command-table.ct-desktop-lands :is(.ct-resource-dock, .resourcezone) > .boardlanelabel {
    flex: 0 0 34px !important; width: 34px !important; overflow: visible; text-overflow: clip;
    font-size: 7.5px !important; letter-spacing: .12em !important; line-height: 1.35 !important;
  }
  /* Your life total keeps a small label beside the number at every desktop width
     (it used to inherit the number's size at 1024px). */
  #game.command-table .ct-player-head .melife { align-items: baseline !important; gap: 4px !important; }
  #game.command-table .ct-player-head .melife small {
    display: inline; padding: 0; color: var(--ds-muted);
    font: 700 8px/1 var(--ds-font-body) !important; letter-spacing: .14em; text-transform: uppercase;
  }

  /* Decision status reads as a live chip: a pulsing dot when the game waits on you. */
  #game.command-table .ct-decision-rail .waitownership strong {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px; white-space: nowrap;
    border-radius: 999px; border: 1px solid var(--ds-line-soft); background: rgba(var(--ds-panel-raised-rgb), .7);
    color: var(--ds-copy); font: 700 11px/1.2 var(--ds-font-body); letter-spacing: .02em;
  }
  #game.command-table .ct-decision-rail .waitownership strong::before {
    content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ds-muted);
  }
  #game.command-table .ct-decision-rail .waitownership[data-wait-kind='human'] strong {
    color: var(--ds-accent-bright); border-color: rgba(var(--ds-accent-rgb), .42); background: rgba(var(--ds-accent-rgb), .1);
  }
  #game.command-table .ct-decision-rail .waitownership[data-wait-kind='human'] strong::before {
    background: var(--ds-accent-bright); animation: arena-turn-pulse 2.4s var(--ds-ease) infinite;
  }

  /* A review overlay is a dialog-level surface: opaque, so the life total of the
     lane underneath no longer shows through its heading. */
  #game.command-table.ct-expanded-decision .ct-decision-rail {
    background: var(--ds-dialog); border-color: rgba(var(--ds-accent-rgb), .28);
    box-shadow: 0 24px 60px rgba(2, 6, 12, .7), 0 0 0 1px rgba(255, 255, 255, .03), inset 0 1px rgba(255, 255, 255, .04);
  }
  #game.command-table.ct-expanded-decision .ct-decision-heading h2 { font-family: var(--ds-font-display); letter-spacing: -.02em; }
}

@media (prefers-reduced-motion: reduce) {
  #game .ct-turn-badge::before, #game .waitownership strong::before { animation: none !important; }
}
body.reduced-motion #game .ct-turn-badge::before,
body.reduced-motion #game .waitownership strong::before { animation: none !important; }

/* Blocker and damage steps add the incoming-attack dock under the lanes. On
   laptop and zoomed desktop heights the lanes kept full heads and land docks
   and clipped their cards. The media lists below are the arena zoom regimes
   from design-system.css (1 → 1.15 → 1.3 → 1.4 → 1.55 → 1.9) translated to
   real pixels; --vhu already compensates the zoom, so the card size itself is
   fluid: a card, its label and the land dock must fit under a 40px head in
   half the height left over by the top bar, the dock, the hand and the
   decision bar. No lane moves. */
@media (min-width: 901px) and (min-height: 801px) and (max-height: 860px),
       (min-width: 1600px) and (min-height: 900px) and (max-height: 989px),
       (min-width: 1800px) and (max-width: 2099px) and (min-height: 1000px) and (max-height: 1118px),
       (min-width: 2100px) and (min-height: 1000px) and (max-height: 1099px),
       (min-width: 2100px) and (min-height: 1100px) and (max-height: 1204px),
       (min-width: 2500px) and (min-height: 1250px) and (max-height: 1333px),
       (min-width: 3200px) and (min-height: 1550px) and (max-height: 1634px),
       (min-width: 901px) and (max-width: 1599px) and (min-height: 861px) and (max-height: 1000px),
       (min-width: 1600px) and (min-height: 861px) and (max-height: 899px),
       (min-width: 1600px) and (max-width: 1799px) and (min-height: 990px) and (max-height: 1150px),
       (min-width: 1800px) and (min-height: 990px) and (max-height: 999px),
       (min-width: 1800px) and (max-width: 2099px) and (min-height: 1119px) and (max-height: 1300px),
       (min-width: 2100px) and (max-width: 2499px) and (min-height: 1205px) and (max-height: 1400px),
       (min-width: 2500px) and (min-height: 1205px) and (max-height: 1249px),
       (min-width: 2500px) and (max-width: 3199px) and (min-height: 1334px) and (max-height: 1550px),
       (min-width: 3200px) and (min-height: 1334px) and (max-height: 1549px),
       (min-width: 3200px) and (min-height: 1635px) and (max-height: 1900px) {
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-player-head { min-height: 40px; height: 40px; padding: 2px 7px; }
  #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-player-name { display: flex; flex-direction: row; align-items: center; gap: 8px; }
  #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-player-name > small { display: none; }
  #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-player-name .manapool { margin: 0; }
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .opphead { min-height: 44px !important; padding-block: 3px !important; }
  #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) :is(.ct-player-head, .opphead) .ct-portrait { height: 34px; width: 30px; }
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-resource-dock .mini.sm { width: 30px !important; height: 40px !important; }
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-resource-dock .permanentpile.sm { width: 30px !important; }
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-resource-dock { padding: 1px 7px !important; }
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .ct-resource-dock .landstrip { padding-block: 1px; }
}
/* Layout height 769–860px: the hand hides for the step, as the ≤800px rules already do. */
@media (min-width: 901px) and (min-height: 801px) and (max-height: 860px),
       (min-width: 1600px) and (min-height: 900px) and (max-height: 989px),
       (min-width: 1800px) and (max-width: 2099px) and (min-height: 1000px) and (max-height: 1118px),
       (min-width: 2100px) and (min-height: 1000px) and (max-height: 1099px),
       (min-width: 2100px) and (min-height: 1100px) and (max-height: 1204px),
       (min-width: 2500px) and (min-height: 1250px) and (max-height: 1333px),
       (min-width: 3200px) and (min-height: 1550px) and (max-height: 1634px) {
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']).ct-grid-view,
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']).ct-grid-view:has(.oppswrap[data-opponent-count]) {
    --ct-card: clamp(58px, calc(((100 * var(--vhu) - 236px) / 2 - 156px) / 1.372), 94px); --ct-opponent-card: var(--ct-card);
    grid-template-rows: 44px 18px repeat(2, minmax(0, 1fr)) auto 0 minmax(58px, auto) !important;
  }
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']) .handwrap { display: none !important; }
}
/* Layout height 861–1000px: the hand stays and the card follows the remaining height. */
@media (min-width: 901px) and (max-width: 1599px) and (min-height: 861px) and (max-height: 1000px),
       (min-width: 1600px) and (min-height: 861px) and (max-height: 899px),
       (min-width: 1600px) and (max-width: 1799px) and (min-height: 990px) and (max-height: 1150px),
       (min-width: 1800px) and (min-height: 990px) and (max-height: 999px),
       (min-width: 1800px) and (max-width: 2099px) and (min-height: 1119px) and (max-height: 1300px),
       (min-width: 2100px) and (max-width: 2499px) and (min-height: 1205px) and (max-height: 1400px),
       (min-width: 2500px) and (min-height: 1205px) and (max-height: 1249px),
       (min-width: 2500px) and (max-width: 3199px) and (min-height: 1334px) and (max-height: 1550px),
       (min-width: 3200px) and (min-height: 1334px) and (max-height: 1549px),
       (min-width: 3200px) and (min-height: 1635px) and (max-height: 1900px) {
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']),
  body.game-active #game.command-table.ct-battlefield-combat:not([data-combat-step='attackers']):has(.oppswrap[data-opponent-count]) { --ct-card: clamp(58px, calc(((100 * var(--vhu) - 386px) / 2 - 156px) / 1.372), 94px); --ct-opponent-card: var(--ct-card); }
}

/* Phone touch targets: zone controls, the focus-board button and your life
   total reach the 44px minimum; the player overview's seat tabs wrap on the
   narrowest phones instead of running off the right edge. */
@media (max-width: 900px) {
  #game.command-table .ct-player-zones :is(.zonecounter, .ct-focus-board) { min-height: 44px; }
  #game.command-table .ct-player-head .melife { min-width: 44px; justify-content: center; }
  #game.command-table .oppLands { min-height: 44px; }
}
@media (max-width: 360px) {
  #game .playeroverviewnav { flex-wrap: wrap; }
  #game .playeroverviewnav .pbtn { flex: 1 0 calc(50% - 5px); }
}

/* The ticker row is 18–20px tall; its 11px line plus 4px paddings needed 23px,
   so descenders were cut off on every desktop. */
#game.command-table .ticker { padding-block: 1px !important; line-height: 16px; }

/* A card choice that carries the Ring guide: on short phones the guide kept
   its full height and squeezed the card grid to nothing, so the cards could
   not be chosen. The guide now scrolls inside a bounded height and the cards
   keep at least a row. */
#game .cardselectionmodal .ringchoiceguide { flex: 0 1 auto; min-height: 96px; overflow: auto; overscroll-behavior: contain; }
#game .cardselectionmodal:has(.ringchoiceguide) > .cardgrid { min-height: min(230px, calc(34 * var(--dvhu))); }

/* Phones have no free space for the floating stack window: centred it covers
   the decision tray's actions, raised it covers the targets on the battlefield.
   The Stack destination (with its count badge) is the phone's stack review, so
   the informational window stays a desktop surface. Reveal decisions still float. */
@media (max-width: 900px) {
  body.game-active #game .stackpopwrap:not(.revealwrap) { display: none; }
}

/* The turn tracker keeps its place: the title beside it has one width, so a
   longer step name no longer pushes the tracker along (it stood at 242px for
   "You · Main 1" and at 383px for "AI Dragon · Combat first strike"). When
   the title does not fit, the player's name gives way, never the step: the
   active lane already names the player. */
@media (min-width: 1251px) {
  body.game-active #game.command-table .arenaheader .phase { flex: 0 0 348px; min-width: 0; flex-wrap: nowrap; }
  body.game-active #game.command-table .arenaheader .phase > :is(b, em) { flex: 0 0 auto; }
  body.game-active #game.command-table .arenaheader .phase > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1366px) {
  body.game-active #game.command-table .arenaheader .phase { flex-basis: 372px; }
}
/* A step's name stays on one line. On a 1280px desktop the full names were
   4px wider than the room left of Table/Focus, and "Main 1" broke in two. */
body.game-active #game.command-table .arenaheader .stepper .step { white-space: nowrap; }
@media (min-width: 1251px) and (max-width: 1365px) {
  body.game-active #game.command-table .arenaheader .stepper .step { padding-inline: 7px !important; }
}

/* The faint "SEAT 01" mark at a lane's bottom right belongs to an older
   layout; in the Command Table the land column stands there and the mark ran
   under its last cards. The lane head already names the seat. */
#game.command-table .opprow::after { content: none; }