/* Play uses the deck editor's Manrope, dark surfaces, outlined controls, and gold selection. */
:root { --bg:#0a0a0c; --surface:#111115; --surface-2:#17171d; --border:#303039; --text-1:#f0eef8; --text-2:#aaa6bc; --accent:#c9a84c; --font-sans:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
*,*::before,*::after { box-sizing:border-box; }
body.play-page { margin:0; background:var(--bg); color:var(--text-1); font:14px/1.5 var(--font-sans); }
.play-page [hidden] { display:none!important; }
.play-page button,.play-page input,.play-page select { font:inherit; color:inherit; }
.play-page button,.play-page select,.play-page summary { touch-action:manipulation; }
.play-page button,.play-page select { cursor:pointer; }
.play-page button { transition:background 140ms,border-color 140ms,opacity 140ms; }
.play-page button:disabled { opacity:.5; cursor:default; }
.play-page :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.play-page .dc-main-column { padding-inline:0; }
.play-page .dc-page-context { display:none; }
.tracker { width:100%; max-width:1040px; padding:8px 24px 32px; margin:auto; }
.play-topbar { position:relative; z-index:2; display:flex; align-items:center; gap:12px; min-height:72px; margin-bottom:8px; }
.play-title-group { flex:1; min-width:0; }
.play-title-group h1 { margin:0; font-size:26px; font-weight:750; letter-spacing:-.7px; line-height:1.3; }
.play-title-group p { margin:2px 0 0; color:var(--text-2); font-size:12px; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.icon-button svg { width:20px; height:20px; }
.tool-dock { display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.tool-tab { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border:0; border-bottom:2px solid transparent; padding:10px 20px; color:var(--text-2); background:transparent; font-weight:650!important; }
.tool-tab [data-icon] { display:flex; }
.tool-tab[aria-selected=true] { color:var(--accent); border-bottom-color:var(--accent); }
.tool-tab:hover { background:var(--surface-2); }
.tab-panel { min-width:0; animation:play-panel-in 180ms ease-out; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-bottom:12px; }
.panel-heading h2 { margin:0; font-size:18px; font-weight:750; letter-spacing:-.3px; }
.panel-heading .muted { color:var(--text-2); font-size:13px; }
.seat-count { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); }
.seat-count select { height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); font-size:16px; }
.table-options { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.table-mode { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--text-2); font-size:13px; cursor:pointer; }
.table-mode input { width:20px; height:20px; accent-color:var(--accent); }
.action-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 16px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); font-weight:650!important; font-size:13px!important; }
.action-btn:hover,.player-step:hover,.step-btn:hover,.ghost-step:hover { background:#22222b; border-color:#64616d; }
.action-btn:active,.player-step:active,.step-btn:active,.ghost-step:active { background:#303039; }
.btn-primary { background:var(--accent); color:#16140d!important; border-color:var(--accent); }
.btn-primary:hover { background:#dfc16a; }
.btn-danger { background:#27191d; color:#ffa8a8!important; border-color:#6c393e; }
.btn-danger:hover { background:#382126; }
.btn-quiet { background:transparent; color:var(--text-2)!important; }
.players-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.player-card { --seat-color:#d6bf7a; position:relative; min-width:0; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.player-card[data-seat='1'] { --seat-color:#c7a3b6; }
.player-card[data-seat='2'] { --seat-color:#b9ace2; }
.player-card[data-seat='3'] { --seat-color:#9cc8dd; }
.player-card-head { display:flex; align-items:center; gap:8px; min-height:44px; width:100%; padding:0; border:0; border-radius:8px; background:transparent; text-align:left; }
.seat-mark { display:grid; place-items:center; flex:none; color:var(--seat-color); font-size:12px; font-weight:750; width:24px; height:24px; border-radius:50%; background:color-mix(in srgb,var(--seat-color) 12%,transparent); }
.player-card-name { flex:1; min-width:0; margin:0; font-size:15px; line-height:1.3; font-weight:700; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.player-details-button { display:grid; place-items:center; width:20px; height:20px; flex:none; color:var(--text-2)!important; }
.player-card-head:hover { background:var(--surface-2); }
.life-total { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:112px; border:0; border-radius:10px; padding:0; background:transparent; font-variant-numeric:tabular-nums; }
.life-total > span:first-child { font-size:clamp(56px,6.2vw,72px); line-height:1.05; font-weight:700; letter-spacing:-2px; color:var(--seat-color); }
.life-total[data-digits='4'] > span:first-child { font-size:52px; }
.life-total[data-digits='5'] > span:first-child { font-size:42px; }
.life-total[data-digits='6'] > span:first-child { font-size:34px; }
.life-total[data-digits='7'] > span:first-child { font-size:28px; }
.life-label { margin-top:2px; color:var(--text-2); font-size:12px; }
.life-feedback { position:absolute; top:50%; right:8px; opacity:0; color:var(--text-1); font-size:14px; font-weight:750; transform:translateY(8px); pointer-events:none; }
.life-feedback.is-visible { opacity:1; transform:translateY(0); transition:opacity 150ms,transform 150ms; }
.life-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.player-step,.step-btn,.ghost-step { display:grid; place-items:center; height:48px; min-width:44px; padding:0; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; font-size:24px!important; line-height:1; user-select:none; -webkit-user-select:none; }
.life-controls .player-step { height:56px; font-size:28px!important; }
.player-summary { display:block; width:100%; min-height:44px; padding:8px 0 0; border:0; background:transparent; color:var(--text-2)!important; font-size:12px!important; text-align:center; overflow-wrap:anywhere; line-height:1.5; }
.player-summary.has-counters { color:var(--seat-color)!important; }
.players-grid[data-count='3'] .player-card:nth-child(3) { grid-column:1/-1; }
.players-grid[data-count='3'] .player-card:nth-child(3) .life-total { min-height:88px; }
.players-grid[data-count='2'] .player-card { min-height:300px; }
.players-grid[data-count='2'] .life-total { min-height:168px; }
.player-card.is-starter-rolling { border-color:var(--accent); background:#1b1912; }
.player-card.is-starter-selected { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.starter-label { position:absolute; left:50%; top:0; transform:translate(-50%,-50%); padding:2px 10px; border-radius:20px; color:#17140c; background:var(--accent); font-size:11px; font-weight:800; white-space:nowrap; }
.players-grid[data-tabletop=true][data-count='4'] .player-card:nth-child(-n+2),.players-grid[data-tabletop=true][data-count='3'] .player-card:nth-child(-n+2),.players-grid[data-tabletop=true][data-count='2'] .player-card:first-child { transform:rotate(180deg); }
.players-grid[data-tabletop=true][data-count='2'] { grid-template-columns:1fr; }
.players-actions { display:flex; justify-content:flex-end; margin:12px 0 20px; }
.players-actions .action-btn { min-height:44px; }
.play-page .recap-bar { padding:16px 0; margin:0; background:transparent; border-width:1px 0 0; border-color:var(--border); border-radius:0; flex-wrap:wrap; gap:12px; }
.play-page .recap-bar__copy strong { font-size:13px; font-weight:650; }
.play-page .recap-bar__copy span { color:var(--text-2); font-size:12px; }
.play-page .recap-button { font-size:13px; font-weight:650; }
.play-page .recap-bar__actions { justify-content:flex-start; }
.mana-total { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:13px; }
.mana-total strong { color:var(--accent); font-size:24px; font-variant-numeric:tabular-nums; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.track-card { display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; gap:8px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.track-card .controls { grid-column:1/-1; }
.track-card .track-count { min-height:44px; font-size:28px!important; padding:0; }
.track-card .track-count[data-digits='4'] { font-size:20px!important; }
.track-card .track-count[data-digits='5'],.track-card .track-count[data-digits='6'] { font-size:16px!important; }
.mana-identity { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.mana-identity h3 { margin:0; font-size:13px; font-weight:650; }
.mana-symbol { color:var(--mana-color); display:flex; width:24px; height:24px; flex:none; }
.mana-symbol svg { width:100%; height:100%; }
.c-W { --mana-color:#e7d8ae; }.c-U { --mana-color:#91c3e2; }.c-B { --mana-color:#b4a4c7; }.c-R { --mana-color:#e9a08c; }.c-G { --mana-color:#9bc4a2; }.c-C { --mana-color:#c0c0cc; }
.track-count { display:block; width:100%; min-height:64px; padding:4px 0; border:0; background:transparent; font-size:36px!important; font-weight:700!important; font-variant-numeric:tabular-nums; }
.controls { display:grid; grid-template-columns:repeat(2,minmax(44px,1fr)); gap:8px; }
@media(max-width:429px) { .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.storm-section { margin:24px 0 0; }
.storm-section h3 { margin:0 0 12px; font-size:16px; }
.storm-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.storm-counter { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; }
.counter-title { margin:0; color:var(--text-2); font-size:13px; }
.storm-calculation { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:12px; color:var(--text-2); font-size:12px; }
.storm-calculation strong { font-size:28px; font-variant-numeric:tabular-nums; color:var(--accent); }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.utility-grid { width:100%; }
.utility-card { min-width:0; max-width:620px; margin-inline:auto; }
.utility-card h2,.utility-card h3 { margin:0; }
.utility-card .utility-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.utility-card .utility-title { font-size:18px; font-weight:750; }
.utility-eyebrow,.utility-pill,.utility-card .utility-topline p { color:var(--text-2); font-size:12px; }
.utility-card .utility-mark { display:none; }
.dice-type-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.dice-type-btn { min-width:44px; min-height:48px; padding:8px 0; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; font-size:13px!important; font-weight:650!important; }
.dice-type-btn.is-selected { border-color:var(--accent); color:var(--accent); background:#201d13; }
.dice-custom-select { display:flex; gap:8px; margin-bottom:16px; }
.utility-input,.dice-custom-select input { min-width:0; flex:1; height:48px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface); font-size:16px!important; }
.dice-controls-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.dice-ctrl-group { display:grid; gap:8px; min-width:0; }
.dice-ctrl-label { color:var(--text-2); font-size:13px; }
.dice-stepper { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; }
.dice-stepper-btn { height:48px; min-width:44px; padding:0; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; font-size:24px!important; }
.dice-stepper-val { display:block; text-align:center; width:100%; min-width:0; height:48px; padding:0; border:0; border-radius:8px; background:var(--surface); font-size:20px!important; font-weight:650; font-variant-numeric:tabular-nums; appearance:textfield; }
.dice-stepper-val::-webkit-inner-spin-button { appearance:none; }
.dice-tray { min-height:104px; display:grid; place-items:center; border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:12px; }
.dice-tray-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; width:100%; }
.dice-tray-die { width:64px; height:64px; }
.dice-tray-die svg { display:block; width:100%; height:100%; }
.dice-tray-placeholder { color:var(--text-2); font-size:13px; text-align:center; }
.dice-tray-die.is-rolling { animation:die-roll 450ms ease-out; }
.dice-result-row { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:16px; row-gap:4px; padding:12px 0; }
.dice-result-row .utility-section-label { grid-column:1/-1; }
.dice-result-row .dice-individual-chips { grid-column:1/-1; }
.utility-head,.dice-history-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.utility-section-label,.dice-history-title { color:var(--text-2); font-size:13px; }
.die-fill { fill:#27231a; }.die-edge { fill:none; stroke:#c9a84c; stroke-width:2; }.die-inner { fill:none; stroke:#70613b; stroke-width:1; }.die-pip { fill:#efd58b; }.die-number { fill:#f0dfac; text-anchor:middle; dominant-baseline:middle; font-family:var(--font-sans); font-weight:750; }
.dice-total-display { min-width:76px; font-size:48px; font-weight:750; line-height:1.15; font-variant-numeric:tabular-nums; }
.dice-breakdown { color:var(--text-2); font-size:13px; overflow-wrap:anywhere; }
.dice-individual-chips { display:flex; gap:6px; flex-wrap:wrap; }
.dice-individual-chip,.dice-chip { border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-size:13px; font-variant-numeric:tabular-nums; }
.dice-roll-main-btn,.utility-roll-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border:1px solid var(--accent); border-radius:10px; background:var(--accent); color:#16140d!important; font-weight:750!important; padding:10px 16px; }
.dice-roll-main-btn { width:100%; height:56px; font-size:16px!important; margin:16px 0; }
.dice-roll-main-btn svg { width:22px; height:22px; }
.dice-custom-select .utility-roll-btn { background:var(--surface-2); border-color:var(--border); color:var(--text-1)!important; font-size:13px!important; }
.dice-history-panel { border-top:1px solid var(--border); margin-top:24px; padding-top:12px; }
.dice-history-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dice-history-header h3 { font-size:14px; }
.dice-clear-history-btn { min-height:44px; padding:8px 12px; border:0; background:transparent; color:var(--text-2)!important; font-size:12px!important; }
.dice-history-list { list-style:none; margin:0; padding:0; }
.dice-history-item { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid #24242c; font-size:13px; color:var(--text-2); }
.dice-history-item-total { color:var(--text-1); font-weight:750; font-variant-numeric:tabular-nums; }
.dice-history-empty { color:var(--text-2); font-size:13px; padding:12px 0; }
.dice-history-more summary { min-height:44px; padding:12px 0; color:var(--accent); font-size:13px; cursor:pointer; }
.coin-card { text-align:center; }
.coin-card .utility-topline { text-align:left; }
.coin-stage { height:232px; display:grid; place-items:center; perspective:700px; }
.utility-coin { position:relative; width:156px; height:156px; transform-style:preserve-3d; transition:transform 450ms ease-out; }
.utility-coin[data-side=heads] { transform:rotateY(0deg); }
.utility-coin[data-side=tails] { transform:rotateY(180deg); }
.utility-coin-face-panel { position:absolute; inset:0; backface-visibility:hidden; border:2px solid #c9a84c; border-radius:50%; background:#282318; color:#d9bc68; box-shadow:inset 0 0 0 5px #17150f,inset 0 0 0 6px #766235; }
.utility-coin-face-panel svg { width:100%; height:100%; display:block; }
.utility-coin-face-panel span { position:absolute; bottom:13px; left:0; width:100%; font-size:10px; font-weight:750; letter-spacing:2px; }
.utility-coin-back { transform:rotateY(180deg); }
.coin-stage.is-flipping .utility-coin { animation:coin-lift 450ms ease-out; }
.coin-value { font-size:40px; line-height:1.2; font-weight:750; margin-bottom:8px; }
.utility-sub { font-size:13px; color:var(--text-2); }
.coin-counts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; border-block:1px solid var(--border); padding:16px 0; }
.coin-count { display:grid; gap:4px; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
.coin-count + .coin-count { border-left:1px solid var(--border); }
.coin-count-label { color:var(--text-2); font-size:13px; font-weight:500; }
.coin-card > .utility-roll-btn { width:100%; min-height:56px; font-size:16px!important; }
.token-grid { display:grid; gap:12px; }
.token-row { display:grid; grid-template-columns:32px minmax(0,1fr) 48px 96px; gap:8px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.token-row-art { width:32px; height:32px; display:grid; place-items:center; color:var(--accent); }
.token-row-art svg { width:28px; height:28px; }
.token-row-title { min-width:0; }
.token-row-title strong { font-size:14px; font-weight:700; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.token-meta { display:block; font-size:12px; color:var(--text-2); }
.token-value { min-width:44px; min-height:48px; padding:0; border:0; background:transparent; font-size:30px!important; font-weight:700!important; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.token-value[data-digits='4'] { font-size:22px!important; }
.token-value[data-digits='5'],.token-value[data-digits='6'] { font-size:18px!important; }
.token-controls { display:grid; grid-template-columns:44px 44px; gap:8px; }
.token-remove { grid-column:1/-1; min-height:44px; padding:8px; border:0; background:transparent; color:var(--text-2)!important; font-size:12px!important; }
.tokens-card > .action-btn { width:100%; margin-top:16px; }
.token-creature-fields { margin-top:16px; }
.token-creature-fields summary { min-height:44px; color:var(--text-2); cursor:pointer; padding:12px 0; }
.play-dialog { position:fixed; inset:0; margin:auto; width:min(580px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); border:1px solid #55515f; border-radius:20px; padding:0; background:var(--surface); color:var(--text-1); box-shadow:0 24px 80px #0009; }
.play-dialog::backdrop { background:#000b; }
.play-dialog[open] { animation:sheet-open 220ms ease-out; }
body.play-page:has(.play-dialog[open]) { overflow:hidden; }
#play-dialog-form { display:flex; flex-direction:column; max-height:inherit; }
.play-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:16px 20px; border-bottom:1px solid var(--border); }
.play-dialog-head h2 { margin:0; font-size:20px; font-weight:750; }
.play-dialog-body { overflow-y:auto; overscroll-behavior:contain; padding:20px; min-height:0; scroll-padding:16px; }
.play-dialog-footer { display:flex; justify-content:flex-end; gap:8px; flex:none; padding:16px 20px max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--surface); }
.dialog-field { display:grid; gap:8px; font-size:13px; color:var(--text-2); min-width:0; }
.dialog-field input { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); font-size:16px; color:var(--text-1); }
.dialog-fields-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dialog-help { color:var(--text-2); font-size:13px; line-height:1.65; margin:0; }
.dialog-help + .dialog-field { margin-top:16px; }
.player-form { display:grid; gap:20px; }
.sheet-section { border-top:1px solid var(--border); padding-top:16px; }
.sheet-section h3 { font-size:15px; margin:0 0 8px; }
.sheet-counter { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:64px; }
.sheet-counter label { color:var(--text-2); font-size:14px; }
.counter-controls { display:grid; grid-template-columns:44px 64px 44px; align-items:center; gap:6px; flex:none; }
.counter-controls input { min-width:0; width:100%; height:48px; padding:0 2px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; text-align:center; font-size:18px; font-variant-numeric:tabular-nums; appearance:textfield; }
.counter-controls input::-webkit-inner-spin-button { appearance:none; }
.commander-row { display:grid; gap:12px; padding:16px 0; border-bottom:1px solid var(--border); }
.commander-source { display:grid; gap:4px; overflow-wrap:anywhere; }
.commander-source strong { font-weight:650; font-size:14px; }
.commander-source span { color:var(--text-2); font-size:12px; }
.commander-row .counter-controls { justify-self:end; }
.feedback-toast { position:fixed; z-index:150; bottom:24px; left:50%; transform:translate(-50%,8px); max-width:calc(100% - 32px); width:max-content; padding:12px 16px; border:1px solid #5c5237; border-radius:12px; background:#262219; color:#f0dfac; font-size:13px; pointer-events:none; opacity:0; transition:opacity 150ms,transform 150ms; margin:0; }
.feedback-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.bump { animation:counter-bump 160ms ease-out; }
.play-page.play-nav-collapsed .dc-sidebar,.play-page.play-nav-collapsed .dc-mobile-bar { display:none!important; }
.play-page.play-nav-collapsed .dc-app-shell { grid-template-columns:minmax(0,1fr); }
.play-page.play-nav-collapsed .dc-main-column { grid-column:1; }
@keyframes play-panel-in { from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:translateY(0)} }
@keyframes sheet-open { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }
@keyframes counter-bump { 50%{color:var(--accent)} }
@keyframes die-roll { 0%{opacity:.5;transform:translateY(-12px) rotate(-18deg)}60%{transform:translateY(3px) rotate(8deg)}100%{opacity:1;transform:none} }
@keyframes coin-lift { 50%{translate:0 -16px;scale:1.06} }
@media(max-width:1023px) {
  .play-page .dc-mobile-bar { min-height:56px; height:56px; }
  .tracker { padding:4px max(16px,env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .play-topbar { min-height:60px; margin-bottom:8px; }
  .player-card { padding:8px 12px; }
  .life-total { min-height:80px; }
  .players-grid[data-tabletop=true][data-count='2'] .player-card { min-height:0; }
  .players-grid[data-tabletop=true][data-count='2'] .life-total { min-height:80px; }
  .play-title-group h1 { font-size:24px; }
  .tool-dock { position:fixed; z-index:60; inset:auto 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; height:calc(68px + env(safe-area-inset-bottom)); padding:4px max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left)); margin:0; border:0; border-top:1px solid var(--border); background:var(--surface); }
  .tool-tab { flex-direction:column; gap:3px; padding:4px 0; min-width:44px; min-height:56px; border:0; border-radius:10px; font-size:11px!important; line-height:1.3; }
  .tool-tab[aria-selected=true] { background:#211e14; }
  .tool-tab svg { width:22px; height:22px; }
  .dice-type-row { grid-template-columns:repeat(4,minmax(44px,1fr)); }
  .feedback-toast { bottom:calc(84px + env(safe-area-inset-bottom)); }
  .play-page.play-nav-collapsed .dc-app-shell { padding-top:0; }
  .play-page .dc-main-column { padding-top:56px; }
  .play-page.play-nav-collapsed .dc-main-column { padding-top:0; }
  .play-dialog { inset:auto 0 0; margin:0 auto; width:100%; max-width:600px; max-height:calc(100dvh - max(16px,env(safe-area-inset-top))); border-bottom:0; border-radius:24px 24px 0 0; }
  .play-dialog-body { padding:16px 20px; }
  .play-dialog-head { padding:16px 20px; }
  .play-page .recap-dialog { width:100%; inset:auto 0 0; margin:0 auto; border-radius:24px 24px 0 0; max-height:calc(100dvh - 16px); }
  .play-page .recap-dialog form { max-height:calc(100dvh - 16px); }
  .play-page .recap-field input,.play-page .recap-field select,.play-page .recap-field textarea { font-size:16px; }
}
@media(max-width:389px) {
  .players-grid { gap:8px; }
  .player-card { padding:8px 10px; }
  .player-card-head { gap:4px; }
  .seat-mark { width:20px; height:20px; }
  .player-card-name { font-size:14px; }
  .life-total { min-height:80px; }
  .life-total > span:first-child { font-size:60px; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .dice-type-row { grid-template-columns:repeat(4,minmax(44px,1fr)); }
}
@media(max-width:340px) {
  .tracker { padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
  .player-card { padding:8px; }
  .seat-mark { display:none; }
  .life-total[data-digits='4'] > span:first-child { font-size:44px; }
  .life-total[data-digits='5'] > span:first-child { font-size:34px; }
  .life-total[data-digits='6'] > span:first-child { font-size:28px; }
  .life-total[data-digits='7'] > span:first-child { font-size:24px; }
  .dice-controls-row { gap:8px; }
  .play-dialog-body,.play-dialog-head,.play-dialog-footer { padding-inline:16px; }
  .dialog-fields-row { grid-template-columns:1fr; }
  .counter-controls { grid-template-columns:44px 56px 44px; }
  .table-options { gap:4px; }
  .table-options .action-btn { padding-inline:10px; font-size:12px!important; }
}
@media(min-width:600px) { .token-row { grid-template-columns:36px minmax(0,1fr) 64px 120px; }.token-controls {grid-template-columns:1fr 1fr;}.dialog-fields-row {grid-template-columns:1fr 1fr;}.commander-row {grid-template-columns:minmax(0,1fr) auto;align-items:center;} }
@media(min-width:1024px) { .player-card { padding:16px; }.life-total {min-height:140px;}.players-grid[data-count='2'] .life-total {min-height:200px;} }
@media(orientation:landscape) and (max-height:500px) { .play-topbar { min-height:56px; }.players-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.players-grid[data-count='2'] {grid-template-columns:repeat(2,minmax(0,1fr));}.players-grid[data-count='3'] {grid-template-columns:repeat(3,minmax(0,1fr));}.players-grid[data-count='3'] .player-card:nth-child(3) {grid-column:auto;}.players-grid[data-count='2'] .player-card {min-height:0;}.players-grid[data-count='2'] .life-total {min-height:112px;} }
@media(prefers-reduced-motion:reduce) {
  .play-page *,.play-page *::before,.play-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  /* Preserve the Tails face transform; only decorative motion is removed. */
}