/* Playable UI/UX redesign. Shared card, troop and board primitives stay in style.css. */
:root{font-family:Inter,Segoe UI,Arial,sans-serif;font-size:14px;background:#101820;color:#e7edf2;--line:#2a3945;--muted:#a5b4c0}body{background:#101820}button{font-family:inherit;border-radius:5px;min-height:36px}button:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid #f2d18b;outline-offset:3px}button.primary,.primary{background:#e3cc9f;border-color:#e3cc9f;color:#17212a}.game-header{height:56px;min-height:56px;padding:0 20px;background:#111c25;position:relative;z-index:25}.game-header h1{font:700 20px Consolas,monospace;letter-spacing:5px}.header-controls{display:flex;gap:8px}.header-controls button{font-size:12px;min-height:32px}.mobile-panel-toggle{display:none}.game-shell{display:grid;grid-template-columns:clamp(195px,17vw,270px) minmax(0,1fr) clamp(215px,18vw,285px);min-height:calc(100dvh - 56px);max-width:2200px;margin:auto}.workspace{min-width:0;background:#101820}.left-sidebar,.right-sidebar{position:sticky;top:0;height:calc(100dvh - 56px);display:flex;flex-direction:column;min-width:0;gap:14px;padding:18px 14px;background:#15212b;align-self:start}.left-sidebar{border-right:1px solid var(--line)}.right-sidebar{border-left:1px solid var(--line)}.left-sidebar h2,.right-sidebar h2{font-size:15px;margin:0 0 12px;letter-spacing:.3px}.journal-panel,.inspector-panel{flex:1;min-height:150px;overflow:hidden;display:flex;flex-direction:column}.match-journal{overflow:auto;min-height:0;scrollbar-width:thin;padding-right:6px}.match-journal section{margin-bottom:20px}.match-journal h3{font:700 10px Consolas,monospace;letter-spacing:1px;color:#d4b77e;position:sticky;top:0;background:#15212b;padding:6px 0;margin:0}.match-journal p{font-size:12px;line-height:1.55;padding:7px 0;margin:0;border-bottom:1px solid #273541;color:#bdcbd5;overflow-wrap:anywhere}#log-latest{font-size:11px}.fleet-status{border-top:1px solid #3d4c57;padding-top:16px;flex:none;color:#e5edf3}.fleet-status h2{display:flex;justify-content:space-between;align-items:center;font-size:12px}.fleet-status h2 small{font:10px Consolas,monospace}.fleet-status.red h2{color:#f3a0a6}.fleet-status.blue h2{color:#9bc3f8}.fleet-status label{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:11px;color:#adbecb;margin-top:11px}.fleet-status label b{color:#eff4f7;font-variant-numeric:tabular-nums}progress{width:100%;height:5px;margin-top:7px;border:0;accent-color:#de9a9d}progress.score-progress{accent-color:#d9c18b}.blue progress:not(.score-progress){accent-color:#8bb4ec}progress::-webkit-progress-bar{background:#2e3e4b;border-radius:2px}progress::-webkit-progress-value{background:#dd999b;border-radius:2px}.blue progress::-webkit-progress-value{background:#8bb4ec}progress.score-progress::-webkit-progress-value{background:#dac28d}.fleet-roster{margin-top:14px;font-size:11px}.fleet-roster>div{display:grid;grid-template-columns:minmax(0,1fr) 32px 32px;gap:5px;line-height:1.7}.fleet-roster>div b{text-align:right;font-variant-numeric:tabular-nums}.fleet-roster>div span:first-child{white-space:nowrap}.roster-head{color:#8fa3b4;font-size:10px;margin-bottom:4px}.status-note{font-size:11px;color:#9dadbb;line-height:1.5;margin:8px 0}.fleet-command{font-size:11px;padding:9px 0 0;margin:8px 0 0;color:#d3c19b;border-top:1px solid #2d3b47;line-height:1.5}.inspector-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:4px}.inspector-head button{font-size:10px;padding:4px 7px;min-height:28px}#context-inspector{overflow:auto;scrollbar-width:thin;padding-right:4px}#context-inspector h2{font-size:18px;line-height:1.4;margin-top:5px}#context-inspector p{font-size:12px;line-height:1.65;color:#b9c8d3;margin:10px 0}.phase-header{padding:20px 24px 14px;display:flex;gap:15px;align-items:start;justify-content:space-between;border-bottom:1px solid var(--line)}.phase-header h2{font-size:24px;letter-spacing:1px;margin:6px 0}.phase-header p{font-size:13px;margin:0;color:#b8c6d2;line-height:1.5}.eyebrow{font:10px Consolas,monospace;letter-spacing:1.3px;color:#94aabf}.turn-label{font:10px Consolas,monospace;letter-spacing:.6px;border:1px solid #3e4c55;padding:7px;white-space:nowrap;color:#d6c49b;margin-top:5px}.phase-overview{padding:12px 24px;display:block;border-bottom:1px solid #22323e}.starter-feature{display:flex;gap:12px;align-items:center}.starter-feature>.card{width:40px;height:56px;font-size:15px;padding:5px;border-radius:5px}.starter-feature .card strong{font-size:20px;align-self:flex-end}.starter-feature small{font-size:10px;color:#8fa4b5}.starter-feature.relevant>.card{width:94px;height:130px;font-size:26px;padding:11px}.starter-feature.relevant .card strong{font-size:32px}.phase-overview:has(#score-presentation){display:grid;grid-template-columns:110px minmax(0,1fr);gap:15px;align-items:start}.phase-overview:has(#score-presentation) .starter-feature{flex-direction:column;align-items:flex-start}.phase-overview #score-presentation{width:auto;padding:14px;margin:0;min-width:0;border-color:#374753;background:#182732}.score-heading{gap:10px}.score-heading h2{font-size:17px}.score-cards{gap:10px;margin:12px 0;justify-content:flex-start}.score-card{width:62px;height:90px;font-size:20px;padding:8px}.score-card strong{font-size:26px}.score-details{gap:10px;font-size:11px;justify-content:flex-start}.hand-investment h3{font-size:12px}.hand-investment p,.hand-investment .investment-rate{font-size:11px;line-height:1.45;margin:7px 0}.investment-choices{gap:6px}.investment-choices button{padding:9px 6px}.investment-choices button strong{font-size:11px}.investment-choices button span{font-size:11px}.investment-totals{font-size:11px;margin:7px 0}.bonus-notice{font-size:11px;text-align:left;margin:8px 0}.field{padding:10px 16px 0}.fieldhead{font:10px Consolas,monospace;color:#829bad;padding:0 8px 5px;gap:10px}.fieldhead button{font:11px Segoe UI,sans-serif;padding:5px 9px;min-height:30px}.fieldhead button[aria-pressed=true]{background:#495d67;border-color:#dcc28c}.battle-stage canvas,.phase-combat .battle-stage canvas,.phase-place .battle-stage canvas,.phase-result .battle-stage canvas{height:clamp(380px,calc(100dvh - 300px),700px);min-height:0}.phase-peg .battle-stage canvas,.phase-target .battle-stage canvas{height:460px}.inspect{font:11px Consolas,monospace;padding:5px 8px;min-height:25px;line-height:1.5;border:0;color:#9bb0c0}#action-error{font-size:12px;color:#ffc3a5;margin:0 8px;min-height:0}#action-error:empty{display:none}.squad-label{pointer-events:auto;cursor:help}.inspect-mode .investment-squad-action{display:none}.hand-dock{padding:10px 20px 16px;border-top:1px solid #2a3945;background:#14212c}.hand-tools{display:flex;gap:8px;justify-content:center;align-items:center;font-size:11px;color:#95aabb;flex-wrap:wrap}.hand-tools button{padding:5px 10px;min-height:30px;font-size:11px}.fan-hand{--step:66px;--card-width:84px;--card-height:118px;height:165px;max-width:100%;margin:0 auto}.hand-card{touch-action:none}.hand-card.is-selected .card{border:3px solid #e5bd75;box-shadow:0 0 0 2px #15212b}.hand-card.is-selected:after{content:'SELECTED';position:absolute;bottom:-17px;left:0;right:0;text-align:center;font:8px Consolas,monospace;color:#f4daa9}.phase-actions{padding:8px 0 0;justify-content:center;gap:8px}.action-hint{font-size:12px}.phase-actions button{font-size:12px}.number-setting{font-size:11px;color:#aebfcc;display:flex;gap:5px;align-items:center}.pegging-table{width:min(520px,85%);padding:15px;background:#152330f2;box-shadow:0 8px 30px #0004}.pegging-table.targeting{position:absolute;left:50%;top:24px;transform:translateX(-50%);display:block;margin:0;width:min(520px,90%);padding:12px}.pegging-table.targeting .sequence-history{display:none}.running-count{font-size:40px}.table-heading{margin-bottom:8px}.sequence-history{max-height:190px}.command-status{font-size:10px;padding:5px 7px;max-width:72%}.deployment-tray{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}.tray-heading{grid-column:1/-1;display:flex;gap:10px;align-items:baseline;justify-content:space-between}.tray-heading h2{font-size:16px;margin:0}.tray-heading>span{font-size:11px;max-width:360px;color:#9eb1bf;line-height:1.5}.packet-group{min-width:0}.packet-group h3{font-size:11px;letter-spacing:.5px;margin:0 0 9px}.packet-group h3 small{font-size:9px;font-weight:normal;display:block;color:#8fa5b6;letter-spacing:0;margin-top:3px}.packet-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.packet{background:transparent;border:1px solid #3b4d5b;padding:5px;min-width:0;text-align:left;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:6px}.packet .card{width:100%;max-width:70px;height:88px;border-radius:4px;padding:7px;font-size:20px;pointer-events:none}.packet .card strong{font-size:24px;align-self:flex-end}.packet small{font:9px Consolas,monospace;line-height:1.4;color:#b8c8d3;overflow-wrap:anywhere;text-align:center}.packet:disabled{opacity:.58;cursor:default}.packet.deployed{opacity:.42}.packet.selected-packet{border:2px solid #e5c58d;background:#35423e;padding:4px;box-shadow:0 0 0 1px #e5c58d}.hidden-packet .card{align-items:center}.battle-results{margin:10px 24px 20px;padding:20px;border:1px solid #465966;border-top:3px solid #d6bc83;border-radius:7px;background:#182833}.result-heading h2{font-size:30px;letter-spacing:2px;margin:8px 0}.result-heading p{font-size:13px;margin:8px 0 14px}.battle-results table{font-size:12px}.battle-results th{font-size:12px;color:#b7c7d2;white-space:normal}.battle-results td{font-size:13px;font-variant-numeric:tabular-nums}.battle-results #result-details{font-size:11px;margin-top:8px}.result-details h3{font-size:12px;margin-top:22px}.result-details p{font-size:11px}.secondary{margin:10px 24px 24px}.secondary>summary{font-size:10px}.left-sidebar #debug{font-size:10px;flex:none;border-top:1px solid var(--line);padding-top:8px}.left-sidebar #debug summary{cursor:pointer}.left-sidebar #debug .debug{max-height:180px}#phase-announcement{display:none!important}.board-hud,.army-overview{display:none!important}dialog{width:min(820px,94vw);max-height:85dvh;overflow:auto;background:#16232e;border:1px solid #647382;border-radius:8px;color:#e5edf3;padding:22px}dialog::backdrop{background:#060c14b8}.dialog-head{display:flex;gap:20px;justify-content:space-between;align-items:center;position:sticky;top:-22px;background:#16232e;padding:10px 0;z-index:1}.dialog-head h2{font-size:18px}dialog details{border-bottom:1px solid #344652;padding:12px 0}dialog summary{cursor:pointer;color:#e8d4ac;font-size:14px}dialog details p{font-size:13px;line-height:1.8}.intro{max-width:760px}.intro-actions{display:flex;align-items:center;gap:10px}.intro-actions .primary{margin-left:0}.intro input{font-family:Consolas,monospace}.intro h1{font-family:Consolas,monospace}.phase-result .battle-stage canvas,.phase-end .battle-stage canvas{height:360px}.battle-results+.hand-dock{border-top:0}.phase-combat .phase-overview{padding-top:6px;padding-bottom:6px}
@media(min-width:1800px){.game-shell{grid-template-columns:280px minmax(0,1fr) 300px}.battle-stage canvas{height:clamp(540px,calc(100dvh - 300px),850px)}}
@media(max-width:1150px){.game-shell{grid-template-columns:185px minmax(0,1fr) 205px}.left-sidebar,.right-sidebar{padding:14px 10px}.fleet-roster{font-size:10px}.fleet-roster>div{grid-template-columns:minmax(0,1fr) 24px 24px}.phase-header{padding:16px}.phase-header h2{font-size:20px}.turn-label{font-size:8px}.phase-overview{padding:10px 16px}.phase-overview:has(#score-presentation){grid-template-columns:85px minmax(0,1fr);gap:8px}.starter-feature.relevant>.card{width:80px;height:112px}.score-cards{gap:6px}.score-card{width:46px;height:68px;font-size:16px;padding:5px}.score-card strong{font-size:22px}.deployment-tray{grid-template-columns:1fr}.packet-cards{display:flex}.packet{width:85px}.packet .card{width:66px}.hand-dock{padding:10px 14px}.fan-hand{--step:55px;--card-width:76px;--card-height:108px}.tray-heading{flex-wrap:wrap}.turn-label{white-space:normal;max-width:100px}}
@media(max-width:950px){.game-shell{display:block}.mobile-panel-toggle{display:inline-block}.left-sidebar,.right-sidebar{display:none;position:fixed;top:56px;bottom:0;height:calc(100dvh - 56px);width:min(330px,92vw);z-index:30;box-shadow:0 10px 40px #0009;padding:20px}.left-sidebar{left:0}.right-sidebar{right:0}.game-shell[data-sidebar=log] .left-sidebar,.game-shell[data-sidebar=inspector] .right-sidebar{display:flex}.game-header{position:sticky;top:0;padding:0 12px}.game-header h1{font-size:17px;letter-spacing:3px}.header-controls{gap:4px}.header-controls button{font-size:10px;padding:5px 7px}.phase-header{padding:15px}.phase-header h2{font-size:22px}.phase-overview:has(#score-presentation){grid-template-columns:100px minmax(0,1fr)}.starter-feature.relevant>.card{width:90px;height:126px}.score-card{width:60px;height:84px}.score-cards{gap:10px}.deployment-tray{grid-template-columns:1fr 1fr}.packet-cards{display:grid}.packet{width:auto}.fleet-status{margin-top:auto}.battle-stage canvas,.phase-combat .battle-stage canvas,.phase-place .battle-stage canvas,.phase-result .battle-stage canvas{height:clamp(380px,calc(100dvh - 290px),650px)}.fan-hand{--step:64px;--card-width:84px;--card-height:118px}.phase-result .battle-stage canvas{height:300px}}
@media(max-width:570px){.game-header h1{font-size:14px;letter-spacing:2px}.header-controls button{font-size:9px;padding:4px 6px;min-height:30px}.phase-header h2{font-size:19px}.phase-header .eyebrow{font-size:9px}.phase-header p{font-size:12px}.turn-label{font-size:8px;max-width:80px}.phase-overview{padding:10px 12px}.phase-overview:has(#score-presentation){grid-template-columns:1fr}.phase-overview:has(#score-presentation) .starter-feature{flex-direction:row;align-items:center}.starter-feature.relevant>.card{width:76px;height:106px;font-size:23px}.starter-feature.relevant .card strong{font-size:28px}.phase-overview:has(#score-presentation) .starter-feature .card{width:58px;height:80px;font-size:19px}.phase-overview #score-presentation{padding:12px}.score-card{width:54px;height:78px}.score-cards{gap:8px}.investment-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.investment-choices button{min-width:0;padding:8px 4px}.investment-choices button strong{font-size:9px;white-space:normal}.investment-choices button span{font-size:10px}.field{padding:8px 4px 0}.fieldhead{font-size:8px;padding:0 6px 5px}.fieldhead button{font-size:10px}.battle-stage canvas,.phase-combat .battle-stage canvas,.phase-place .battle-stage canvas{height:390px;min-height:0}.phase-peg .battle-stage canvas,.phase-target .battle-stage canvas{height:430px}.fan-hand{--step:45px;--card-width:69px;--card-height:99px;height:155px}.hand-dock{padding:10px 8px}.hand-tools{font-size:10px}.hand-tools button{font-size:10px;padding:5px 7px}.pegging-table{width:92%;padding:12px}.table-card{width:42px;height:60px;font-size:17px}.table-card strong{font-size:20px}.sequence-history{max-height:155px}.deployment-tray{grid-template-columns:1fr;gap:12px}.packet .card{max-width:none;width:100%;height:90px}.packet-cards{gap:8px}.packet{padding:6px}.tray-heading>span{font-size:10px}.packet small{font-size:10px}.phase-actions button{font-size:11px;padding:8px 10px}.battle-results{margin:10px 10px 16px;padding:14px}.battle-results th{font-size:10px}.battle-results td{font-size:12px}.battle-results .result-heading h2{font-size:25px}.command-status{font-size:8px;max-width:90%;left:4px}.boatswain small{font-size:7px}.secondary{margin:10px}.intro{margin:24px 12px;padding:24px}.intro h1{font-size:35px}.intro .legend{gap:10px}.intro input{width:150px}.intro-actions{flex-wrap:wrap}dialog{padding:16px}.dialog-head{top:-16px}.dialog-head h2{font-size:14px}.squad-label .troop-number{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.new-play{animation:none}.hand-card{transition:none}}
/* Keep the cards and primary decision in view on ordinary desktop heights. */
.phase-discard .battle-stage canvas{height:clamp(245px,calc(100dvh - 575px),440px)}
.phase-peg .battle-stage canvas,.phase-target .battle-stage canvas{height:clamp(280px,calc(100dvh - 650px),420px)}
.phase-header{padding-top:14px;padding-bottom:12px}.phase-header h2{font-size:22px;margin:4px 0}.phase-overview{padding-top:8px;padding-bottom:8px}
.phase-combat .battle-stage canvas{height:clamp(350px,calc(100dvh - 325px),780px)}
.phase-progress{font:10px Consolas,monospace;color:#d6bd8d}
@media(min-width:951px) and (max-height:850px){.phase-header{padding-top:11px;padding-bottom:9px}.phase-header h2{font-size:20px}.phase-header p{font-size:12px}.starter-feature.relevant>.card{width:80px;height:112px;font-size:23px}.fan-hand{--card-width:74px;--card-height:104px;--step:58px;height:145px}.phase-discard .battle-stage canvas{height:clamp(205px,calc(100dvh - 555px),300px)}.phase-peg .battle-stage canvas,.phase-target .battle-stage canvas{height:clamp(215px,calc(100dvh - 630px),300px)}.pegging-table .sequence-history{max-height:100px}.pegging-table{padding:10px}.running-count{font-size:32px}.pegging-table .table-card{width:42px;height:58px;font-size:17px}.pegging-table .table-card strong{font-size:20px}}
.hand-card.is-selected:after{pointer-events:none}.card-details{z-index:4;pointer-events:auto}
.phase-overview #score-presentation{grid-column:auto;justify-self:stretch}
.phase-score .battle-stage canvas{height:clamp(300px,calc(100dvh - 450px),500px)}
.phase-result .command-status,.phase-end .command-status{display:none}
/* Passive badges must never redirect a placement to a neighboring squad. */
.squad-label .magic-shield,.squad-label .reinforcement-lock,.squad-label .musket-reload{pointer-events:none}
.score-review{margin:12px 24px;padding:12px 0;border-top:1px solid var(--line)}.score-review>summary{cursor:pointer;font:10px Consolas,monospace;color:#b8c8d5}.score-review>section{padding:10px 0;border-bottom:1px solid var(--line)}.score-review h3{font-size:12px}.score-review .score-card{width:55px;height:78px;font-size:18px}.score-review .score-card strong{font-size:22px}