.battle-report{border-top:1px solid #373b3e;margin-top:24px;padding-top:16px}.battle-report summary{cursor:pointer;padding:10px 0;font-weight:bold}.battle-report .controls{padding:10px 0;align-items:center;font-size:12px}.battle-rows{max-height:260px;overflow:auto;background:#111315;padding:8px}.event{display:flex;gap:12px;padding:5px 2px;font-size:11px;line-height:1.5;border-bottom:1px solid #24272a}.event time{color:#aab1b8;flex:0 0 52px}.event.destroy{color:#ffb3b3}.event.heal{color:#eee}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:11px}th,td{padding:9px 8px;border-bottom:1px solid #373b3e;text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left}th{color:#aab1b8}select{background:#22272c;color:#eee;padding:7px;border:1px solid #555}.troop-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.battle-stage{position:relative}.troop{position:absolute;left:0;top:0;will-change:transform}.figure{position:absolute;width:5px;height:5px;background:var(--team);border-radius:2px;box-shadow:0 3px 2px #0005}.figure:before{content:'';position:absolute;left:.5px;top:-5px;width:4px;height:4px;border-radius:50%;background:var(--team)}.formation{position:absolute;left:0;top:0}.troop-symbol{position:absolute;top:-34px;left:-15px;width:30px;text-align:center;font-size:15px;font-weight:bold;opacity:.7;text-shadow:0 1px 3px #000}.troop-number{position:absolute;top:5px;left:-24px;width:48px;color:#fff;text-align:center;font-size:11px;font-weight:bold;text-shadow:0 1px 3px #000}
:root{font-family:Consolas,'Courier New',monospace;color:#ecebe7;background:#111315;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{border:1px solid #53575b;background:#24272a;color:#fff;padding:10px 14px;cursor:pointer;border-radius:3px}button:hover{background:#373c42}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{opacity:.3;cursor:default}.primary{background:#e5e4de;color:#151719;font-weight:bold}.red{color:#ff7779}.blue{color:#79adff}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #373b3e;padding:18px 28px}h1{font-size:22px;letter-spacing:5px;margin:0}header small{letter-spacing:2px;color:#999}.scores{display:flex;gap:40px}.scores strong{font-size:24px}.scores span{display:block;font-size:12px;margin-top:4px}.layout{display:grid;grid-template-columns:minmax(480px,1fr) 350px;max-width:1550px;margin:auto}.field{position:relative;min-width:0;padding:22px}.eyebrow{font-size:11px;letter-spacing:2px;color:#a0a4a8;text-transform:uppercase}.fieldhead{display:flex;justify-content:space-between;align-items:center}canvas{width:100%;height:580px;display:block;touch-action:manipulation}.panel{border-left:1px solid #373b3e;padding:24px;background:#181b1e;min-height:calc(100vh - 85px)}h2{font-size:20px;margin:12px 0}p{line-height:1.6;color:#b9bec4}.cards{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.card{width:62px;height:89px;padding:8px;background:#f0efea;color:#181b1e;border:2px solid transparent;display:flex;flex-direction:column;justify-content:space-between;font-size:20px;text-align:left}.card small{align-self:flex-end;font-size:23px}.card.selected{transform:translateY(-7px);border-color:#ff686c}.card.heart,.card.diamond{color:#b52638}.card:disabled{opacity:.38}.starter{display:flex;gap:15px;align-items:center;border-top:1px solid #373b3e;margin-top:22px;padding-top:18px}.count{font-size:38px;letter-spacing:-2px}.count small{font-size:13px;color:#9ba0a5;letter-spacing:0}.history{min-height:36px;letter-spacing:3px;line-height:1.9}.controls{display:flex;gap:7px;flex-wrap:wrap}.log{max-height:150px;overflow:auto;font-size:11px;color:#a8adb3;line-height:1.8;margin-top:16px;border-top:1px solid #373b3e;padding-top:12px}.legend{display:flex;gap:20px;flex-wrap:wrap;color:#a0a4a8;font-size:11px}.inspect{min-height:50px;font-size:12px;line-height:1.7;color:#bbb;border-top:1px solid #303438;padding-top:12px}.intro{max-width:760px;margin:12vh auto;padding:32px}.intro h1{font-size:52px;letter-spacing:9px}.intro input{padding:12px;background:#181b1e;color:#fff;border:1px solid #555;width:180px}.badge{display:inline-block;border:1px solid #50545a;padding:5px 8px;margin:12px 0;font-size:11px}.breakdown{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.note{font-size:11px;color:#8f969d}.debug{white-space:pre-wrap;max-height:300px;overflow:auto;font-size:10px}.error{color:#ff7779}footer{padding:15px 28px;border-top:1px solid #373b3e;color:#777;font-size:11px}@media(max-width:950px){.layout{grid-template-columns:1fr}.panel{border-left:0;border-top:1px solid #373b3e;min-height:0}canvas{height:460px}header{padding:15px}.scores{gap:20px}.intro h1{font-size:34px}.field{padding:12px}}
.phase-announcement{position:fixed;z-index:100;left:50%;top:45%;transform:translate(-50%,-50%);padding:22px 38px;background:#101315ef;border:1px solid #b8bcc3;box-shadow:0 10px 60px #0007;text-align:center;pointer-events:none;opacity:0;max-width:92vw}.phase-announcement.visible{animation:phase-cue .85s ease both}.phase-announcement strong{display:block;font-size:clamp(18px,3vw,34px);letter-spacing:3px}.phase-announcement small{display:block;color:#aaa;margin-top:8px;letter-spacing:2px}@keyframes phase-cue{0%{opacity:0;transform:translate(-50%,-45%)}15%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-55%)}}.score-presentation{grid-column:1/-1;justify-self:center;width:min(950px,100%);padding:24px 30px;margin:18px auto;border:1px solid #525860;background:#191d21}.score-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}.score-cards{display:flex;justify-content:center;align-items:center;gap:14px;margin:18px 0}.score-card{display:flex;flex-direction:column;justify-content:space-between;width:90px;height:124px;padding:12px;background:#f0efea;color:#171b20;border:2px solid #fff;border-radius:4px;font-size:25px;flex:0 0 auto}.score-card strong{align-self:flex-end;font-size:36px}.score-card.red-ink{color:#b52638}.score-starter{outline:1px dashed #a0a5ad;outline-offset:4px}.starter-divider{width:1px;background:#626970;align-self:stretch;margin:0 12px}.score-details{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13px}.score-details b{color:#fff}.bonus-notice{text-align:center;font-size:13px;margin-bottom:0}.card-back{background:#252a30;color:#999;align-items:center;justify-content:center;border:1px dashed #69717b}.magic-feedback{padding:12px;border-left:2px solid #ccd3dd;background:#252a30;line-height:1.6;font-size:12px;margin-top:16px}.magic-shield{position:absolute;left:12px;top:-20px;white-space:nowrap;font-size:10px;color:#fff;text-shadow:0 1px 3px #000}.magic-shield:empty{display:none}@media(max-width:650px){.score-presentation{padding:16px 10px}.score-cards{gap:8px}.score-card{width:52px;height:78px;font-size:18px;padding:6px}.score-card strong{font-size:24px}.starter-divider{margin:0 3px}.score-heading{align-items:flex-start}.score-heading button{font-size:10px;padding:8px;max-width:130px}.score-details{gap:10px;font-size:11px}}@media(prefers-reduced-motion:reduce){.phase-announcement.visible{animation:none;opacity:1;transform:translate(-50%,-50%)}.figure,.formation,.troop{will-change:auto}}
.card:hover:not(:disabled){background:#fff;box-shadow:0 0 0 1px #a9b0ba}
/* Shared card faces always use actual ownership; the Starter Card is neutral. */
.ink-red{color:#a6192e!important}.ink-blue{color:#1451a0!important}.ink-black{color:#101419!important}
.card strong{font-size:24px}.hand-card{display:inline-flex;position:relative;padding-bottom:22px}.card-details{position:absolute;bottom:0;right:2px;padding:0 8px;min-height:22px;border:0;background:transparent;font-size:17px}.history-card{display:inline-flex;gap:4px;background:#ede8dd;border-radius:3px;padding:3px 5px;margin:2px}.history-card strong{font-size:inherit}
.score-presentation.score-owner-red{background:#302025;border-color:#b45a65}.score-presentation.score-owner-blue{background:#1c2a3e;border-color:#507aad}.reinforcement-lock{display:block;position:absolute;top:15px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:#ffd9a2;background:#211d1ce0;padding:2px;border-radius:3px}
.coin-screen{text-align:center}.coin-screen h1{font-size:clamp(24px,4vw,42px)}.coin-space{height:200px;display:grid;place-items:center;perspective:700px}.coin{width:140px;height:140px;position:relative;transform-style:preserve-3d}.coin>div{position:absolute;inset:0;border:8px double #e2bd78;border-radius:50%;display:grid;place-items:center;font-weight:bold;font-size:26px;backface-visibility:hidden;box-shadow:0 12px 25px #0006}.coin-red{background:#922b40;color:white}.coin-blue{background:#204f95;color:white;transform:rotateY(180deg)}.coin.flipping{animation:coin-flip 1.2s ease-out forwards}.coin.resolved{transform:rotateY(var(--landing))}@keyframes coin-flip{from{transform:rotateY(0) translateY(0)}40%{transform:rotateY(800deg) translateY(-35px)}to{transform:rotateY(var(--landing)) translateY(0)}}
@media(prefers-reduced-motion:reduce){.coin.flipping{animation:none;transform:rotateY(var(--landing))}.figure{animation:none!important}}

/* Task 6: a board-led table, stable inspector and a hand within easy reach. */
:root{--rail:280px;--cream:#f3eee2;--line:#343e48;--red:#e27083;--blue:#8dc4ff;font-size:14px;background:#10151b;color:#edf0f3}body{overflow-x:hidden}button{min-height:40px;border-color:#56616e}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f8d58d;outline-offset:4px}p{color:#c2cad3}.note{font-size:12px;color:#a3adba}.eyebrow{font-size:12px;color:#a9b5c4;letter-spacing:1.3px}.game-header{height:60px;padding:12px 24px;gap:16px}.game-header h1{font-size:21px;white-space:nowrap}.header-dealer{font-size:13px;color:#aebfd4}.layout{max-width:none;grid-template-columns:minmax(0,1fr) var(--rail);align-items:start}.workspace{min-width:0}.field{padding:14px 20px 0}.fieldhead{height:24px}.battle-stage{isolation:isolate}canvas{height:clamp(510px,calc(100dvh - 245px),900px);width:100%;touch-action:manipulation}.inspect{font-size:13px;min-height:32px;padding:7px 0;border:0;color:#bcc9d8}.panel{padding:20px 18px;min-height:calc(100dvh - 60px);background:#161e28;border-color:var(--line);position:sticky;top:0}.panel h2{font-size:16px;line-height:1.5}.panel summary{font-size:12px;cursor:pointer;padding:12px 0}.information-section{border-bottom:1px solid var(--line)}.card-information{height:365px;overflow:auto;padding-right:4px;scrollbar-width:thin}.card-information h3{font-size:18px;color:#f4eee0;margin:16px 0 10px}.card-information p{font-size:13px;line-height:1.65;margin:10px 0}.phase-help{padding-top:16px}.phase-help>p,.phase-help details p{font-size:13px;line-height:1.6}.starter{margin-top:16px;padding-top:16px}.starter .card{width:48px;height:68px;font-size:17px}.starter .card strong{font-size:20px}.magic-feedback{font-size:13px;padding:10px}.game-log{border-bottom:1px solid var(--line)}.log{font-size:12px;max-height:240px}.secondary{margin:8px 20px 24px;border-top:1px solid var(--line);padding-top:12px}.secondary>summary{color:#a7b5c6;font-size:12px;letter-spacing:1px;cursor:pointer;padding:10px 0}.battle-report{margin-top:4px;padding-top:4px;border:0}.event{font-size:12px}th,td{font-size:12px}.board-hud{position:absolute;z-index:2;pointer-events:none;display:flex;gap:14px;font-size:14px;font-weight:600;white-space:nowrap;background:#10151be8;border:1px solid currentColor;border-radius:4px;padding:9px 13px;box-shadow:0 4px 15px #0004}.board-hud b{letter-spacing:2px}.board-hud.red{color:#ff9aaa}.board-hud.blue{color:#a3ceff}.board-hud span{color:#edf1f8}
/* Actual owner chooses the entire face. Inks override previous shared defaults. */
:is(.card,.history-card,.table-card,.score-card)[data-owner="0"],:is(.card,.history-card,.table-card,.score-card)[data-owner="neutral"]{background:var(--cream);border-color:#eee9df;color:#111922!important}:is(.card,.history-card,.table-card,.score-card)[data-owner="0"].ink-red,:is(.card,.history-card,.table-card,.score-card)[data-owner="neutral"].ink-red{color:#bd263e!important}:is(.card,.history-card,.table-card,.score-card)[data-owner="1"]{background:#10151e;border-color:#637389;color:#f8fafc!important}:is(.card,.history-card,.table-card,.score-card)[data-owner="1"].ink-blue{color:#8dc4ff!important}:is(.card,.history-card,.table-card,.score-card)[data-owner="1"].ink-black{color:#f8fafc!important}.card:hover:not(:disabled){background:#fff4dd}.card span,.card strong{pointer-events:none}.card{border-radius:7px;box-shadow:0 3px 9px #0003}.card strong{align-self:flex-end}.history-card{border:1px solid #8b9299;border-radius:4px;padding:4px 8px;font-size:17px}.score-card:is(.card,.history-card,.table-card,.score-card)[data-owner="1"]{background:#10151e;border-color:#637389}.score-presentation{margin:14px auto;padding:20px;width:min(940px,95%)}.score-card{width:82px;height:108px}.score-cards{margin:12px 0}.score-card strong{font-size:30px}.score-starter{outline-color:#c9c5ba}
.hand-dock{padding:0 20px 14px;min-width:0;background:linear-gradient(transparent,#10151b 35%)}.fan-hand{height:173px;position:relative;margin:0 auto;max-width:660px;--step:66px;--card-width:88px;--card-height:124px}.hand-card{position:absolute;display:block;padding:0;left:calc(50% - var(--card-width)/2 + var(--offset)*var(--step));top:calc(16px + var(--lift));transform:rotate(var(--angle));transform-origin:50% 160%;z-index:var(--order);transition:transform .18s ease,top .18s ease,left .22s ease;touch-action:none}.hand-card .card{width:var(--card-width);height:var(--card-height);font-size:26px;padding:9px;border:2px solid #d1cbbf;opacity:1}.hand-card .card strong{font-size:31px}.hand-card:hover,.hand-card:focus-within{z-index:30;transform:translateY(-16px) rotate(0deg)}.hand-card.is-selected{z-index:25;transform:translateY(-20px) rotate(0deg)}.hand-card.is-selected .card{border-color:#ff7f92;box-shadow:0 0 0 3px #cf52645c}.hand-card .card.selected{transform:none}.hand-card.unplayable .card{filter:saturate(.5);opacity:.55}.hand-card.unplayable:hover .card{opacity:.9}.card-details{min-height:24px;position:absolute;bottom:-25px;right:1px;background:#202b39;border:1px solid #445165;border-radius:50%;width:25px;height:25px;padding:0;font-size:17px;color:#d3dce9}.phase-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:10px 0}.phase-actions .primary{background:#f0eadf;color:#141b24;padding:12px 20px}.action-hint{font-size:13px;color:#cbd5e3}.phase-actions select{max-width:100%;font-size:13px;min-height:44px}.packet-label{display:flex;align-items:center;gap:10px;font-size:14px}.phase-combat .hand-dock,.phase-place .hand-dock,.phase-reveal .hand-dock,.phase-result .hand-dock{padding-top:6px}.phase-combat canvas,.phase-place canvas,.phase-reveal canvas,.phase-result canvas{height:clamp(540px,calc(100dvh - 195px),1000px)}
.pegging-table{position:absolute;z-index:4;left:50%;top:45%;transform:translate(-50%,-50%);width:min(580px,85%);padding:20px 24px 16px;background:linear-gradient(125deg,#1f3039f5,#17232df7);border:1px solid #60717e;border-radius:14px;box-shadow:0 16px 40px #0007,inset 0 0 0 5px #101a2340}.table-heading{display:flex;justify-content:space-between;gap:15px;align-items:center}.running-count{font-size:46px;letter-spacing:-2px;font-weight:bold;line-height:1.1}.running-count small{font-size:20px;color:#a4b8cb;letter-spacing:0}.table-turn{color:#c1d1df;font-size:12px;max-width:200px}progress{display:block;width:100%;height:5px;margin-top:12px;accent-color:#e29b90}.sequence-history{max-height:210px;overflow:auto;scrollbar-width:thin;margin-top:12px}.sequence{padding:8px 0;border-top:1px solid #476072}.sequence-label{font-size:11px;color:#acbed0;display:block;margin-bottom:7px}.table-cards{display:flex;gap:7px;flex-wrap:wrap}.played-card{display:inline-flex;flex-direction:column;gap:5px}.played-owner{font-size:10px;letter-spacing:.8px;color:#ffadbb}.owner-1 .played-owner{color:#9bc8ff}.table-card{display:flex;flex-direction:column;justify-content:space-between;width:55px;height:77px;border:1px solid;border-radius:5px;padding:7px;font-size:20px;box-shadow:0 4px 8px #0005}.table-card strong{align-self:flex-end;font-size:23px}.sequence.completed .table-card{width:38px;height:48px;padding:4px;font-size:15px}.sequence.completed .table-card strong{font-size:16px}.sequence.completed .played-owner{font-size:9px}.sequence.completed{opacity:.75}.sequence.completed .table-cards{gap:5px}.table-empty{font-size:14px;color:#9aabba}.play-area{width:100%;min-height:50px;margin-top:9px;border:1px dashed #8f9da7;background:#12202b;color:#c4d2de;font-size:12px;letter-spacing:1px;touch-action:manipulation}.play-area.ready{border-color:#e3cba9;color:#f6e4ca}.play-area.drop-valid{background:#3b5a50;border:2px solid #c8e8ca;color:white;box-shadow:0 0 20px #76b69a44}.pegging-feedback{min-height:25px;padding-top:9px;color:#ffe0a0;font-size:14px;opacity:0;transition:opacity .2s}.pegging-feedback.active{opacity:1}.new-play{animation:play-red .28s ease-out both}.owner-1.new-play{animation-name:play-blue}@keyframes play-red{from{opacity:0;transform:translate(var(--arrival-x,0px),var(--arrival-y,75px)) rotate(-12deg)}to{opacity:1;transform:none}}@keyframes play-blue{from{opacity:0;transform:translate(var(--arrival-x,35px),var(--arrival-y,-60px)) rotate(12deg)}to{opacity:1;transform:none}}#drag-card{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;will-change:transform}#drag-card .card{width:82px;height:116px;font-size:25px;box-shadow:0 16px 26px #0007}.pegging-table.targeting{position:relative;left:auto;top:auto;transform:none;width:100%;padding:12px 18px;margin-top:12px;display:grid;grid-template-columns:180px 1fr;gap:8px 20px;box-shadow:none}.targeting .sequence-history{margin:0;max-height:105px}.targeting .sequence.completed{display:none}.targeting .running-count{font-size:32px}.targeting .table-heading{display:block}.targeting .table-turn{margin-top:6px}.targeting .pegging-feedback,.targeting .target-table-note{margin:0;font-size:12px;padding:0;min-height:18px}.target-table-note{color:#e3d0ae}.intro{background:radial-gradient(ellipse at top left,#24344666,transparent 70%);border:1px solid var(--line);border-radius:12px;padding:44px}.intro .primary{margin:12px}.intro .legend{font-size:13px}.phase-announcement{top:26%;background:#111c29e8;border-color:#667a91;padding:15px 26px}.phase-announcement strong{font-size:22px}.legend{font-size:12px}
@media(min-width:1700px){:root{--rail:310px}.card-information{height:390px}.field{padding:20px 30px 0}.fan-hand{--step:74px;--card-width:96px;--card-height:132px;height:185px}}
@media(max-width:1100px){:root{--rail:250px}.panel{padding:16px 13px}.card-information{height:350px}.field{padding:12px 12px 0}.fan-hand{--step:58px;--card-width:80px;--card-height:112px;height:165px}.pegging-table{width:min(500px,90%);padding:16px}.board-hud{font-size:13px;gap:9px;padding:8px}.fieldhead>.note{display:none}}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.game-header{height:auto;min-height:60px;padding:12px;flex-wrap:wrap}.game-header h1{font-size:18px}.header-dealer{font-size:12px}.game-header .eyebrow{font-size:11px}.panel{position:static;border-left:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:18px}.information-section{grid-column:1/-1}.card-information{height:235px}.phase-help{padding-top:0}.panel .starter{align-self:start}.panel .note,.panel .magic-feedback,.panel .game-log,.panel #debug{grid-column:1/-1}.battle-stage canvas{height:500px}.field{padding:12px 10px 0}.board-hud{font-size:12px;gap:9px;padding:7px;}.fan-hand{--step:49px;--card-width:73px;--card-height:103px;height:160px}.hand-card .card{font-size:23px}.hand-dock{padding:0 10px 12px}.phase-actions{gap:8px}.action-hint{font-size:12px}.pegging-table{width:92%;padding:14px}.running-count{font-size:36px}.table-card{width:47px;height:65px;font-size:18px}.sequence-history{max-height:190px}.pegging-table.targeting{grid-template-columns:125px 1fr;padding:12px;gap:8px}.targeting .target-table-note{grid-column:1/-1}.secondary{margin:10px}.score-cards{gap:7px}.score-card{width:50px;height:73px;font-size:18px;padding:6px}.score-card strong{font-size:22px}.intro{margin:24px 12px;padding:24px}.intro h1{font-size:30px}.score-presentation{width:calc(100% - 20px)}.score-heading h2{font-size:17px}}
@media(max-width:390px){.fan-hand{--step:41px;--card-width:66px;--card-height:95px}.board-hud{font-size:12px;gap:7px}.table-cards{gap:5px}.table-card{width:42px;height:59px}.game-header .eyebrow{font-size:10px}.header-dealer{display:none}}
@media(prefers-reduced-motion:reduce){.hand-card,.pegging-feedback{transition:none}.new-play,.coin.flipping{animation:none}.phase-announcement.visible{animation:none}.coin.flipping{transform:rotateY(var(--landing))}}

@media(min-width:761px){.game-header{height:52px}.field{padding-top:8px}.battle-stage canvas{height:clamp(430px,calc(100dvh - 310px),850px)}.phase-combat .battle-stage canvas,.phase-place .battle-stage canvas,.phase-reveal .battle-stage canvas,.phase-result .battle-stage canvas{height:clamp(540px,calc(100dvh - 185px),1000px)}.fan-hand{height:154px}.hand-dock{padding-bottom:4px}.phase-actions{padding:6px 0}.inspect{min-height:28px;padding:4px 0}.panel{min-height:calc(100dvh - 52px)}}

@media(max-width:650px){.board-hud{font-size:13px}}.card-repeat{position:absolute;bottom:7px;left:7px;display:flex;gap:3px;font-size:14px!important;align-items:center}.card-repeat i{font-style:normal;font-size:12px}.hand-card .card{position:relative}

.arrival-ghost{position:fixed;left:0;top:0;z-index:150;pointer-events:none;will-change:transform}

.phase-combat .information-section,.phase-place .information-section,.phase-score .information-section,.phase-reveal .information-section,.phase-result .information-section,.phase-end .information-section{display:none}

/* Projection positions/rotates all four labels as one geometric system. */
.board-hud{z-index:3;font-size:13px;gap:10px;padding:8px 10px;transform-origin:center;pointer-events:none}
.army-overview{position:absolute;z-index:3;box-sizing:border-box;width:182px;padding:8px 10px;border-left:2px solid currentColor;background:#10151be8;border-radius:3px;pointer-events:none;transform-origin:center;font-size:12px;line-height:1.4;box-shadow:0 2px 8px #0003}
.army-title{font-weight:800;letter-spacing:1px}.army-scope{font-size:10px;color:#b8c3d2;margin:2px 0 5px}.army-row{display:grid;grid-template-columns:15px 1fr auto;gap:5px;color:#e9eef5;align-items:center;white-space:nowrap}.army-symbol{color:#fff6df;font-size:14px}.army-row b,.army-total b{color:#fff6df;font-variant-numeric:tabular-nums}.army-total{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #67738477;padding-top:4px;margin-top:4px;color:#e9eef5;font-size:11px}
.troop-layer{z-index:1}.squad-label-layer{position:absolute;inset:0;z-index:5000;pointer-events:none}.squad-label{position:absolute;left:0;top:0}.troop-symbol{top:-35px;left:-12px;width:24px;font-size:17px;font-weight:900;color:#fff5df;opacity:1;text-shadow:0 1px 2px #02070c,1px 0 2px #02070c,-1px 0 2px #02070c,0 -1px 2px #02070c;-webkit-text-stroke:.6px #111820;paint-order:stroke fill}.troop-number{top:-10px;font-size:13px;font-weight:900;color:#fff9eb;text-shadow:0 1px 2px #02070c,1px 0 2px #02070c,-1px 0 2px #02070c,0 -1px 2px #02070c;-webkit-text-stroke:.6px #111820;paint-order:stroke fill}.magic-shield{top:-23px;left:13px}.reinforcement-lock{top:12px}
@media(max-width:650px){.army-overview{width:166px;padding:7px;font-size:12px}.board-hud{display:grid;grid-template-columns:auto auto;gap:2px 8px;padding:6px;font-size:12px}.board-hud b{grid-row:span 2}.battle-stage canvas{min-height:650px}}

@media(min-width:651px){.battle-stage canvas{min-height:620px}}
/* Hand score allocation uses the existing score panel and battlefield. */
.hand-investment{margin-top:16px;padding-top:14px;border-top:1px solid #45545e}.hand-investment h3{font:12px Consolas,monospace;letter-spacing:1.4px;color:#fff9eb;margin:0 0 10px}.hand-investment p{font-size:12px;line-height:1.5;margin:8px 0;color:#bbc8cd}.hand-investment .investment-rate{color:#a8cdb1}.investment-totals{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.investment-totals span{padding:9px 12px;background:#111a21;border:1px solid #3a4b54;border-radius:4px;font-size:13px}.investment-totals b{margin-left:12px;color:#fff9eb}#investment-error:not(:empty){color:#ffb3b3}.hand-investment [hidden]{display:none!important}
/* Fixed scoring choices and direct projected squad actions. */
.investment-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.investment-choices button{display:flex;flex-direction:column;gap:7px;text-align:left;padding:13px;background:#141c24;border:1px solid #52616b;border-radius:5px;color:#c8d4db}.investment-choices button[aria-checked=true]{border-color:#b0d5b9;background:#293b32;color:#fff9eb;box-shadow:inset 0 0 0 1px #b0d5b9}.investment-choices button:disabled{opacity:.4;cursor:not-allowed}.investment-choices strong{font-size:13px}.investment-choices span{font-size:12px}.investment-squad-action{position:absolute;top:0;left:0;z-index:6000;background:transparent!important;border:0!important;border-radius:50%;padding:0;pointer-events:auto;cursor:pointer}.investment-squad-action:focus-visible{outline:2px solid #d2efda;outline-offset:3px;background:#a8cdb120!important}.investment-hover{position:absolute;top:0;left:0;z-index:7000;pointer-events:none;color:#d5f6df;background:#14261fe8;border:1px solid #8db09a;border-radius:5px;padding:5px 9px;font:bold 17px Consolas,monospace;box-shadow:0 2px 8px #0008;white-space:nowrap}.investment-hover[data-kind=reward]{color:#fff4ca;border-color:#c6b988}@media(max-width:650px){.investment-choices{gap:5px}.investment-choices button{padding:9px 6px}.investment-choices strong{font-size:11px}.investment-choices span{font-size:10px}}
.squad-label.investment-label-target{pointer-events:auto;cursor:pointer}
@media(min-width:1100px){.score-presentation:has(.hand-investment){display:grid;grid-template-columns:minmax(330px,.85fr) minmax(420px,1.15fr);gap:6px 22px;width:min(1120px,97%);padding:16px 20px}.score-presentation:has(.hand-investment) .score-heading{grid-column:1;grid-row:1}.score-presentation:has(.hand-investment) .score-heading h2{font-size:18px}.score-presentation:has(.hand-investment) .score-cards{grid-column:1;grid-row:2;gap:8px;margin:8px 0}.score-presentation:has(.hand-investment) .score-card{width:54px;height:76px;padding:7px;font-size:20px}.score-presentation:has(.hand-investment) .score-card strong{font-size:25px}.score-presentation:has(.hand-investment) .starter-divider{margin:0 6px}.score-presentation:has(.hand-investment) .score-details{grid-column:1;grid-row:3;gap:7px 12px;font-size:12px;align-content:start}.score-presentation .hand-investment{grid-column:2;grid-row:1/4;margin:0;padding:0 0 0 20px;border-top:0;border-left:1px solid #52616b}.score-presentation .hand-investment h3{margin:0 0 6px}.score-presentation .hand-investment p{margin:6px 0;font-size:11px}.score-presentation .investment-choices{gap:7px;margin:9px 0}.score-presentation .investment-choices button{padding:9px;gap:5px}.score-presentation .investment-totals{margin:6px 0;gap:8px}.score-presentation .investment-totals span{padding:5px 8px;font-size:12px}}
/* Stationary command objectives: deliberately separate from troop sprites. */
.boatswain{position:absolute;left:0;top:0;color:var(--command-team);pointer-events:auto;text-align:center;width:52px;margin-left:-26px;margin-top:-24px;line-height:1.1;filter:drop-shadow(0 1px 2px #000)}
.command-station{display:block;font-size:21px;font-weight:bold}.boatswain small{font:8px Consolas,monospace;background:#14202aed;padding:2px 3px;border:1px solid currentColor;white-space:nowrap}.boatswain.wreck{opacity:.65}.boatswain.command-down .command-station{color:#fff;filter:drop-shadow(0 0 5px #efc47b)}
.command-status{position:absolute;left:8px;max-width:calc(100% - 16px);z-index:9999;background:#17242feb;border-left:3px solid #d6b36f;color:#f2d59c;padding:6px 9px;font:11px Consolas,monospace;pointer-events:none}.command-status[hidden]{display:none}
.boatswain>*{pointer-events:none}
.musket-reload{position:absolute;top:14px;left:50%;transform:translateX(-50%);font:8px Consolas,monospace;color:#ead5a6;background:#111a24e8;white-space:nowrap;padding:1px 2px;pointer-events:none}.musket-reload:empty{display:none}