/* Board layout for live matches. board-layout.js sets body[data-layout=board] and moves the controls; practices and upright phones keep the rail. */
body[data-layout=board] .decision-rail{display:none!important}
body[data-layout=board] .arena-grid{grid-template-columns:minmax(0,1fr)!important}
body[data-layout=board] .game-shell{position:relative}

/* Top bar: arena · turn · steps · main button · AI controls. */
body[data-layout=board] .match-toolbar{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:10px}
body[data-layout=board] .match-toolbar>.study-picker{display:none}
body[data-layout=board] .phase-pill{position:static!important;transform:none!important;max-width:none!important;padding:5px 14px;gap:0}
body[data-layout=board] .phase-pill>:not(#turn-label){display:none}
.turn-steps{display:flex;align-items:center;justify-self:center;gap:2px;min-width:0;margin:0;padding:3px;list-style:none;border-radius:999px;background:#0d1b25bf;border:1px solid #a2bbc530;overflow:hidden}
.turn-steps li{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:30px;padding:2px 10px;border-radius:999px;color:#8297a7;font-size:12px;font-weight:650;line-height:1.1;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.turn-steps li small{font-size:9px;font-weight:650;letter-spacing:.03em;opacity:.85}
.turn-steps li small:empty{display:none}
.turn-steps li[data-state=done]{color:#b2c2cb8c}
.turn-steps li[data-state=current]{color:#251803;background:linear-gradient(#ffdc94,#f3b247);box-shadow:0 0 16px #ffb84052}
body[data-turn=ai] .turn-steps li[data-state=current]{color:#062220;background:linear-gradient(#b0efe9,#5fc8c3);box-shadow:0 0 16px #5fd0ca40}
.turn-steps[data-opening=true] li{opacity:.55}
.turn-commands{display:flex;align-items:center;gap:6px}
.turn-commands .step-actions{padding:0!important;margin:0;gap:6px;position:static!important;background:none!important;border:0!important;box-shadow:none!important}
.turn-commands #advance{height:38px;min-width:150px;padding:0 18px;border-radius:10px;font-size:15px;white-space:nowrap}
.turn-commands #reset{width:38px;height:38px;min-width:38px}

body[data-layout=board] .match-toolbar .arena-picker>svg{display:none}
body[data-layout=board] .match-toolbar .arena-picker select{width:132px}

/* Turn prompts and the latest event live between the battlefields. */
/* The latest play reads as one slim line: who, what, what paid, what is left. */
body[data-layout=board] .board-status .payment-receipt{position:relative;display:flex;align-items:center;gap:10px;width:max-content;margin:0;padding:4px 12px;border-radius:999px;box-shadow:none}
body[data-layout=board] .board-status .payment-heading{display:flex;align-items:center;gap:8px;flex:none}
body[data-layout=board] .board-status .payment-heading>div{display:flex;align-items:baseline;gap:6px}
body[data-layout=board] .board-status .payment-heading small{font-size:10px}
body[data-layout=board] .board-status .payment-heading strong{font-size:13px;white-space:nowrap}
body[data-layout=board] .board-status .payment-price{display:flex;align-items:center;gap:5px}
body[data-layout=board] .board-status .payment-price small{font-size:10px}
body[data-layout=board] .board-status .payment-sources{display:flex;gap:4px;flex:none;margin:0}
/* The full payment sentence stays for screen readers, History and "How this entered". */
body[data-layout=board] .board-status .payment-summary{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* A turn prompt is one compact row: what is asked, the plan so far, and its buttons. */
.board-prompt{align-self:center;width:fit-content;max-width:100%;padding:6px 14px;border-radius:12px;background:#10202bf2;border:1px solid #ffd27a4d;box-shadow:0 8px 24px #020b1480}
.board-prompt[hidden]{display:none}
.board-prompt #match-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0;padding:0;background:none;border:0;box-shadow:none;max-height:none;text-align:center}
.board-prompt #match-panel>*{margin:0}
.board-prompt .eyebrow{color:#ffd58a}
.board-prompt p{font-size:13px}
.board-prompt .match-card-actions{display:flex;gap:6px;margin:0}
.board-prompt .drag-plan-list{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0}
.board-prompt .drag-plan-list:empty{display:none}
.board-prompt button.quiet{height:30px;min-height:0;padding:0 12px;font-size:12px}
.board-prompt details.alternative-controls>summary{font-size:12px;color:#b2c2cb;cursor:pointer}
.board-prompt details[open].alternative-controls{flex-basis:100%}
/* One line; fit.js shrinks it rather than cutting words off. */
.board-narration{display:flex;align-items:center;justify-content:safe center;gap:12px;min-height:20px;font-size:12px;color:#b2c2cb}
.board-narration>*{flex:none}
/* The main button already names whose decision it is. */
.board-narration #priority-label{display:none}
.board-narration[data-chain=false]>.priority-status{display:none}
.board-narration .priority-status{display:flex;gap:10px;padding:0!important;font-size:12px}
.board-narration #priority-label{color:#ffd58a}
.board-narration #outcome{margin:0;padding:0;min-height:0;font-size:12px;border:0;background:none;white-space:nowrap}
.board-narration #outcome:empty{display:none}
.board-narration[data-chain=false] #response-count{display:none}
.board-narration #recent-play{margin:0}
/* The drag hint already says what a prompt asks; keep only its title and buttons then. */
/* The board prompt keeps only its title and buttons; its guidance is in the footer line. */
body[data-layout=board] .board-prompt #match-panel>p:not(.eyebrow){display:none}

/* Piece popover: actions for the piece you clicked, anchored to it. */
.piece-popover{position:absolute;z-index:40;left:0;top:0;width:260px;padding:9px 12px 12px;border-radius:14px;color:var(--ink,#f4f3e8);background:#112330f7;border:1px solid #a2bbc552;box-shadow:0 18px 44px #020b14d9;animation:popover-in .16s ease-out}
.piece-popover[hidden]{display:none}
@keyframes popover-in{from{opacity:0;transform:translateY(4px)}}
.piece-popover[data-side=below]{animation-name:popover-in-below}
@keyframes popover-in-below{from{opacity:0;transform:translateY(-4px)}}
.piece-popover::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;background:inherit;border:inherit;border-width:0 1px 1px 0;transform:rotate(45deg)}
.piece-popover[data-side=below]::after{top:-7px;bottom:auto;border-width:1px 0 0 1px}
.piece-popover-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.piece-popover[data-empty=true] .piece-popover-head{margin:0}
.piece-popover-head strong{font-size:15px;line-height:1.2;min-width:0}
.piece-popover-head span{display:flex;gap:4px;flex:none}
.piece-popover-head button{height:26px;min-height:0;padding:0 9px;border-radius:7px;font-size:12px;font-weight:650;color:#dce8e6;background:#1b3341;border:1px solid #a2bbc540;box-shadow:none}
.piece-popover-head button:hover{background:#244253}
.piece-popover-head .piece-popover-close{width:26px;padding:0;font-size:16px}
.piece-popover #match-panel{display:block;margin:0;padding:0;background:none;border:0;box-shadow:none;max-height:none}
.piece-popover #match-panel[hidden]{display:none}
.piece-popover .match-selected-name{display:none}
.piece-popover .gesture-instruction{margin:0 0 8px;font-size:12px;line-height:1.35;color:#b2c2cb}
.piece-popover .match-card-actions{display:flex;gap:6px;margin:0}
.piece-popover .match-card-actions>button{flex:1;min-width:0}
.piece-popover .payment-note{margin:6px 0 0;font-size:11px}
.piece-popover #board-inspector>:not(.match-empty-inspector,.entry-payment){display:none}
.piece-popover #board-inspector{display:block;margin:0 0 4px;padding:0;background:none;border:0;box-shadow:none;max-height:220px;overflow:auto!important}
.piece-popover #board-inspector h2{font-size:15px;margin:0 0 4px}
.piece-popover .entry-payment{margin:0;padding:0;border:0;background:none}
.piece-popover .entry-payment>summary{padding:2px 0;font-size:12px}
.piece-popover #board-inspector .eyebrow{display:none}

/* Short landscape windows: a slimmer top bar. */
@media(max-height:520px) and (orientation:landscape){
  .turn-steps li{min-height:24px;padding:1px 8px;font-size:11px}
  .turn-commands #advance{height:32px;min-width:120px;font-size:13px;padding:0 12px}
  .turn-commands #reset{width:32px;height:32px;min-width:32px}
  body[data-layout=board] .match-mode-label>span{display:none}
}
/* Upright tablets: the steps take a second row. */
@media(max-width:900px) and (orientation:portrait){
  body[data-layout=board] .match-toolbar{grid-template-columns:auto auto minmax(0,1fr) auto;height:auto!important;min-height:0!important;row-gap:6px}
  body[data-layout=board] .turn-steps{grid-row:2;grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.piece-popover{animation:none}.turn-steps li{transition:none}}

/* Footer guide: every helper message on one line below the board. The battlefield shows only the game: no placeholders
   for empty fields or rows, no floating drag hint. While dragging, the line shows only the drag hint. */
body[data-layout=board] .arena-footer{display:flex!important;align-items:center;gap:16px}
body[data-layout=board] .arena-footer .footer-hint{display:none}
body[data-layout=board] .footer-guide{flex:1 1 0;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:12px;color:#d3e2e4}
body[data-layout=board] .footer-guide>*{flex:none;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0!important;font-size:12px!important;line-height:1.3;text-align:left;white-space:nowrap}
body[data-layout=board] .footer-guide>:empty{display:none}
body[data-layout=board] .footer-guide>:not([hidden]):not(:empty)~:not([hidden]):not(:empty)::before{content:'·';margin:0 9px;color:#8fa6ad}
body[data-layout=board] .footer-guide #gesture-cue{color:#f0e3c2}
body[data-layout=board] .footer-guide #drag-feedback{position:static;transform:none;width:auto;max-width:none;color:#ffdc9b}
body[data-layout=board] .footer-guide #drag-feedback[data-valid=false]{color:#cbdee5}
body.is-dragging[data-layout=board] .footer-guide>:not(#drag-feedback){display:none}
body[data-layout=board] :is(.creatures>.empty-field,.match-empty-resource,.empty-stack){display:none}

/* Header status strip: the turn prompt, the response chain and the latest play, on one line under the header bar.
   The battlefield keeps only the two fields; the turn zone between them is gone. */
body[data-layout=board] .turn-zone{display:none!important}
body[data-layout=board] .board-status{flex:none;display:flex;align-items:center;justify-content:safe center;gap:12px;min-height:34px;padding:3px 16px;overflow:hidden;background:#0d1d27cc;border-bottom:1px solid #8db9c31f}
body[data-layout=board] .board-status:not(:has(.board-prompt:not([hidden]),#stack>.stack-entry,#recent-play:not([hidden]),.board-narration[data-chain=true])){visibility:hidden}
body[data-layout=board] .board-status>*{flex:none}
body[data-layout=board] .board-status .board-prompt[hidden]{display:none}
body[data-layout=board] .board-status #stack{display:flex;align-items:center;gap:6px;margin:0}
body[data-layout=board] .board-status #stack:not(:has(.stack-entry)){display:none}
body[data-layout=board] .board-status .stack-entry{padding:3px 10px;gap:10px;font-size:12px;border-radius:999px}
body[data-layout=board] .board-status .stack-entry small{display:inline;margin-left:6px}
body[data-layout=board] .board-status .stack-order{font-size:10px}
/* Short landscape screens (phones held sideways): the status strip appears only when it has something to say, and the
   footer guide is slimmer, so the battlefields keep their height. */
@media(max-height:520px) and (orientation:landscape){
  body[data-layout=board] .board-status{min-height:0;padding:1px 10px}
  body[data-layout=board] .board-status:not(:has(.board-prompt:not([hidden]),#stack>.stack-entry,#recent-play:not([hidden]),.board-narration[data-chain=true])){display:none}
  body[data-layout=board] .arena-footer{height:18px!important;min-height:18px!important;padding:0 10px!important}
  body[data-layout=board] .footer-guide,body[data-layout=board] .footer-guide>*{font-size:10px!important}
}

/* Match header: one bar. Where the match stands on the left (mark, turn, steps), what to do on the right (AI playback,
   the main button, History, menu). Restart, arena, fullscreen and how to play live in the menu. */
body[data-layout=board] .topbar{display:none!important}
body[data-layout=board] .match-toolbar{display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap}
body[data-layout=board] .match-toolbar>.brand{order:0;flex:none;display:flex;align-items:center}
body[data-layout=board] .match-toolbar>.brand>img{width:30px;height:auto}
body[data-layout=board] .match-toolbar>.brand>span{display:none}
body[data-layout=board] .match-toolbar>.phase-pill{order:1;flex:none}
body[data-layout=board] .match-toolbar>.turn-steps{order:2;flex:0 1 auto;margin:0 auto}
body[data-layout=board] .match-toolbar>.match-mode-label{order:3;flex:none}
body[data-layout=board] .match-toolbar>.turn-commands{order:4;flex:none}
body[data-layout=board] .match-toolbar>.board-tools{order:5;flex:none;gap:6px}
body[data-layout=board] .match-mode-label>span{display:none}
body[data-layout=board] .turn-commands #reset{display:none}
body[data-layout=board] .turn-commands #advance{height:44px;min-width:170px;font-size:16px}
body[data-layout=board] .board-tools #history-toggle{min-height:44px;padding:0 12px}
@media(max-width:1100px){body[data-layout=board] .board-tools #history-toggle>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}body[data-layout=board] .board-tools #history-toggle{width:44px;padding:0;display:grid;place-items:center}}
/* Menu: this match's settings first, then the views. */
.menu-match{display:grid;gap:6px;padding:4px 4px 10px;margin-bottom:6px;border-bottom:1px solid #8db9c329}
.menu-match .arena-picker{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#c9dce0}
.menu-match .arena-picker::before{content:'Arena'}
.menu-match .arena-picker>svg{display:none}
.menu-match .arena-picker select{width:auto;min-height:40px}
.menu-match label{margin:0!important}
.menu-match>.ai-speed{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:0 4px!important}
.menu-match>.ai-speed select{width:auto!important;min-height:40px}
.menu-match>.auto-pass{padding:4px!important}
.menu-match>button{width:100%;height:auto;min-height:40px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:8px;font-size:14px;font-weight:650;text-align:left}
.menu-match>#help-open::after{content:'How to play'}
.menu-match>#fullscreen::after{content:'Fullscreen'}
/* Upright tablets: the steps take a second row under the bar. */
@media(max-width:900px) and (orientation:portrait){
  body[data-layout=board] .match-toolbar{flex-wrap:wrap!important;row-gap:6px}
  body[data-layout=board] .match-toolbar>.turn-steps{order:9;flex-basis:100%;justify-content:center;margin:0}
  body[data-layout=board] .match-toolbar>.phase-pill{margin-right:auto}
}
@media(max-height:520px) and (orientation:landscape){
  body[data-layout=board] .turn-commands #advance{height:34px;min-width:120px;font-size:13px}
  body[data-layout=board] .board-tools #history-toggle,body[data-layout=board] .board-tools .game-menu>summary{min-height:34px;height:34px;width:34px}
}

/* Turn rail: the turn and its steps, upright along the battlefield's right edge. The fields keep clear of it. */
body[data-layout=board] .turn-rail{position:absolute;left:12px;top:50%;z-index:8;transition:top .55s cubic-bezier(.2,.7,.2,1),left .55s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;align-items:stretch;gap:8px;width:108px}
body[data-layout=board] .turn-rail>.phase-pill{display:flex;justify-content:center;text-align:center;padding:7px 8px!important;border-radius:14px}
body[data-layout=board] .turn-rail #turn-label{white-space:normal;line-height:1.2;font-size:14px}
body[data-layout=board] .turn-rail>.turn-steps{flex-direction:column;align-items:stretch;border-radius:16px;padding:5px;gap:3px;margin:0}
body[data-layout=board] .turn-rail>.turn-steps li{min-height:38px;padding:4px 6px;border-radius:11px;font-size:13px}
body[data-layout=board] .battlefield{width:auto;margin:0}
/* The scenery is chosen in the lobby, not during a match. */
body[data-layout=board] .match-toolbar .arena-picker{display:none}
/* With the steps on the rail, the header bar carries the status: prompt, response chain and latest play. */
body[data-layout=board] .match-toolbar>.board-status{order:2;flex:1 1 0;min-width:0;min-height:0;padding:0 6px;background:none;border:0}
@media(max-height:520px) and (orientation:landscape){
  body[data-layout=board] .turn-rail{width:84px;gap:4px}
  body[data-layout=board] .turn-rail>.turn-steps li{min-height:24px;font-size:11px;padding:2px 4px}
  body[data-layout=board] .turn-rail #turn-label{font-size:11px}
}
#turn-label small::before{content:' · '}
body[data-layout=board] .turn-rail #turn-label small{display:block;font-size:12px;font-weight:650;opacity:.85}
body[data-layout=board] .turn-rail #turn-label small::before{content:none}
/* Header status, compact: chain entries by title (the next to resolve is lit), and the latest play's action and cost. */
body[data-layout=board] .match-toolbar .board-status .stack-entry small,body[data-layout=board] .match-toolbar .board-status .stack-order,body[data-layout=board] .match-toolbar #response-count,body[data-layout=board] .match-toolbar .payment-heading small{display:none}
body[data-layout=board] .match-toolbar .board-status #stack>.stack-entry:first-child{border-color:#ffd27a;box-shadow:0 0 10px #ffc25b55}
body[data-layout=board] .match-toolbar .board-status .stack-entry{white-space:nowrap}
body[data-layout=board] .turn-commands #advance{min-width:136px;padding:0 16px}
@media(max-width:1300px){body[data-layout=board] .board-tools #history-toggle>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}body[data-layout=board] .board-tools #history-toggle{width:44px;padding:0;display:grid;place-items:center}}
/* Whose turn: the rail and that player's portrait take their colour, gold for you and teal for the opponent. */
body[data-layout=board] .turn-rail[data-side=you]>.phase-pill,body[data-layout=board] .turn-rail[data-side=you]>.turn-steps{border-color:#ffd27a99;box-shadow:0 0 18px #ffbf4533}
body[data-layout=board] .turn-rail[data-side=opponent]>.phase-pill,body[data-layout=board] .turn-rail[data-side=opponent]>.turn-steps{border-color:#7fe6dd99;box-shadow:0 0 18px #5fd7cf33}
body[data-layout=board][data-turn=you] .own-player .portrait{box-shadow:0 0 0 3px #ffd27a,0 0 18px #ffbf4588}
body[data-layout=board][data-turn=ai] .player-bar.opponent .portrait{box-shadow:0 0 0 3px #7fe6dd,0 0 18px #5fd7cf88}
@media(prefers-reduced-motion:reduce){body[data-layout=board] .turn-rail{transition:none}}
/* The bar grows with its contents; the main button keeps one height on every screen. */
body[data-layout=board] .match-toolbar{height:auto!important;min-height:52px!important}
body[data-layout=board] .turn-commands #advance{height:44px!important;min-height:0!important;box-sizing:border-box}
@media(max-height:520px) and (orientation:landscape){body[data-layout=board] .turn-commands #advance{height:34px!important}body[data-layout=board] .match-toolbar{min-height:40px!important}}
/* Hand cards keep a card's width: a short hand no longer stretches one card across the whole row. */
body[data-layout=board] .hand-card{max-width:220px}
/* Exhausted and New sit at the figure's top left, clear of the Strength badge and the name. */
body[data-layout=board] .piece--unit .piece-status{left:auto;right:auto;bottom:auto;top:4px;left:4px;font-size:10px;padding:2px 6px}
/* The alternative to a pending choice (Redraw, Decline) sits just before the main button. */
body[data-layout=board] .turn-commands #advance-alt{height:44px;padding:0 14px;white-space:nowrap}
/* The footer keeps guidance and the latest event; standing field notes would only repeat themselves. */
body[data-layout=board] #own-field-note,body[data-layout=board] #opponent-field-note{display:none}
/* Piece states read at a glance: Exhausted and New are small round icons (the word stays for screen readers and the
   tooltip), exhausted figures stay dimmed and turned, and the labels that remain are at least 11px. */
body[data-layout=board] .piece--unit .piece-status,body[data-layout=board] .node--exhausted .node-state{font-size:0!important;width:22px;height:22px;padding:0!important;display:grid;place-items:center;border-radius:50%;line-height:1}
body[data-layout=board] .piece--unit .piece-status.ready{display:none}
body[data-layout=board] .piece--unit .piece-status::before,body[data-layout=board] .node--exhausted .node-state::before{font-size:13px;font-weight:800}
body[data-layout=board] .piece--unit .piece-status.exhausted::before,body[data-layout=board] .node--exhausted .node-state::before{content:'↻';color:#cfdde2}
body[data-layout=board] .piece--unit .piece-status.new::before{content:'✦';color:#ffd27a}
body[data-layout=board] .node--exhausted .node-state{position:absolute;right:-4px;bottom:-4px;left:auto;top:auto;background:#122832f0}
body[data-layout=board] .node--pending .node-state{font-size:11px!important}
body[data-layout=board] .identity small{font-size:11px!important}
body[data-layout=board] .turn-rail .turn-steps li small{font-size:11px;line-height:1.15}
/* Empty states say nothing: no empty-hand chip (the hand count already reads 0). */
body[data-layout=board] #hand>.empty-field{display:none}
/* Upright tablets: the status gets its own row under the bar and the footer wraps, rather than shrinking to fit. */
@media(max-width:900px) and (orientation:portrait){
  body[data-layout=board] .match-toolbar{flex-wrap:wrap!important;row-gap:4px}
  body[data-layout=board] .match-toolbar>.board-status{order:9;flex:1 1 100%;justify-content:center}
  body[data-layout=board] .arena-footer{height:auto!important;min-height:28px!important;padding:5px 14px!important;align-items:flex-start}
  body[data-layout=board] .footer-guide{flex-wrap:wrap;white-space:normal;row-gap:2px}
  body[data-layout=board] .footer-guide>*{white-space:normal}
}
/* Combat sub-steps on the rail wrap to two lines rather than being cut off. */
body[data-layout=board] .turn-rail .turn-steps li{white-space:normal;text-align:center;height:auto}
body[data-layout=board] .turn-rail .turn-steps li small{white-space:normal;display:block}

/* Players in opposite corners: the opponent top right, you bottom left. Each side column also hosts the turn rail
   during that player's turn. Resources and the hand reach into the free corner. */
body[data-layout=board]{--side:clamp(146px,13.5vw,184px)}
body[data-layout=board] .arena{grid-template-columns:var(--side) minmax(0,1fr) var(--side)!important;column-gap:10px!important}
body[data-layout=board] .arena>.player-bar.opponent{grid-column:3!important;grid-row:1/3!important;align-self:start}
body[data-layout=board] .arena>.opponent-reserve{grid-column:1/3!important;grid-row:1!important}
body[data-layout=board] .arena>.opponent-battlefield{grid-column:2!important;grid-row:2!important}
body[data-layout=board] .arena>.own-battlefield{grid-column:2!important;grid-row:4!important}
body[data-layout=board] .arena>.resource-zone.own{grid-column:2/4!important;grid-row:5!important}
body[data-layout=board] .lower-board>.own-player{grid-column:1!important;grid-row:5/7!important}
body[data-layout=board] .lower-board>.hand-zone{grid-column:2/4!important;grid-row:6!important}
body[data-layout=board] .turn-rail{width:min(108px,calc(var(--side) - 8px))}

/* A stable frame: nothing moves when the step changes. The header keeps one height (its status shrinks to fit), the
   main button one width, the alternative its slot, every rail step one height, and mana lines their line. */
body[data-layout=board] .match-toolbar{height:62px!important;min-height:62px!important;max-height:62px}
body[data-layout=board] .match-toolbar>.board-status{align-self:stretch;max-height:58px;overflow:hidden}
body[data-layout=board] .turn-commands #advance{width:196px;min-width:196px;max-width:196px;padding:0 10px;overflow:hidden;text-overflow:ellipsis}
body[data-layout=board] .turn-commands #advance[data-long-label=true]{font-size:14px}
body[data-layout=board] .turn-commands #advance-alt{width:142px;display:block}
body[data-layout=board] .turn-commands #advance-alt[hidden]{display:block!important;visibility:hidden}
body[data-layout=board] .turn-rail .turn-steps li{height:40px;min-height:40px;max-height:40px;overflow:hidden}
body[data-layout=board] .turn-rail .turn-steps li small{font-size:9.5px;line-height:1.05}
body[data-layout=board] .mana-budget[data-empty]{visibility:hidden}
@media(max-width:900px) and (orientation:portrait){
  body[data-layout=board] .match-toolbar{height:auto!important;max-height:none}
  body[data-layout=board] .match-toolbar>.board-status{height:44px;min-height:44px;max-height:44px}
  body[data-layout=board] .arena-footer{height:44px!important;min-height:44px!important;overflow:hidden}
}
@media(max-height:520px) and (orientation:landscape){
  body[data-layout=board] .match-toolbar{height:44px!important;min-height:44px!important;max-height:44px}
  body[data-layout=board] .turn-commands #advance{width:150px;min-width:150px;max-width:150px}
  body[data-layout=board] .turn-commands #advance-alt{width:110px}
  body[data-layout=board] .turn-rail .turn-steps li{height:26px;min-height:26px;max-height:26px}
}
body[data-layout=board] .turn-rail>.phase-pill{height:58px;min-height:58px;overflow:hidden;align-items:center}
@media(max-height:520px) and (orientation:landscape){body[data-layout=board] .turn-rail>.phase-pill{height:40px;min-height:40px}}
/* Corner panels: a long name wraps inside the column rather than pushing the panel wider. */
body[data-layout=board] .player-bar .identity{min-width:0;max-width:100%}
body[data-layout=board] .player-bar .identity>div{min-width:0}
body[data-layout=board] .player-bar .identity strong{white-space:normal;overflow-wrap:anywhere}