/* Focused visual refinement; layout owns screen space, never game state. */
:root{--surface:#14212b;--surface-raised:#192934;--line:#34434d;--muted:#a9bbc7;--accent:#d9c292;color:#e6edf1;background:#101a22;font-family:Segoe UI,Arial,sans-serif}
button{border-color:#475965;border-radius:5px;box-shadow:none;font-size:12px;transition:background .12s,border-color .12s}button:hover:not(:disabled){border-color:#d9c292;background:#34434a}button.primary:hover:not(:disabled){background:#ead8b5;color:#17212a}button:disabled{cursor:default}.eyebrow{font-size:11px;letter-spacing:1px}.game-header{height:48px;min-height:48px;border-bottom:1px solid var(--line)}.game-header h1{font-size:19px;letter-spacing:4px}.left-sidebar,.right-sidebar{height:calc(100dvh - 48px);padding:14px 14px;gap:12px}.left-sidebar h2,.right-sidebar h2{font-size:15px;margin-bottom:9px}.journal-panel{min-height:100px}.match-journal p{font-size:12px;line-height:1.5;padding:6px 0;color:#adbec9}.match-journal .important-event{color:#e7d9b9;border-left:2px solid #8a7959;padding-left:7px}.match-journal h3{font-size:11px}.match-journal section{margin-bottom:10px}.fleet-status{padding-top:12px}.fleet-status label{font-size:12px;margin-top:9px}.fleet-status label b{font-size:16px}.fleet-status h2 small,.roster-head{font-size:11px}.fleet-roster{font-size:12px;margin-top:10px}.fleet-roster>div{line-height:1.9;grid-template-columns:minmax(0,1fr) 30px 30px}.fleet-roster b{font-size:14px}.fleet-command{font-size:12px}.status-note{font-size:12px}.inspector-panel{min-height:140px}#context-inspector p{font-size:13px;line-height:1.55;margin:8px 0}#context-inspector h2{font-size:18px}#context-inspector h3{font-size:12px;color:#d9c292;border-top:1px solid var(--line);padding-top:9px;margin:12px 0 5px}#context-inspector.is-pinned{border-left:2px solid #d9c292;padding-left:9px}#inspector-state{font-size:12px}.inspector-head button{font-size:12px}
.phase-header{padding:10px 18px;gap:12px}.phase-header h2{font-size:22px;margin:3px 0}.phase-header p{font-size:13px;line-height:1.4}.turn-label{font-size:11px;letter-spacing:0;white-space:nowrap}.phase-progress{font-size:11px}.field{min-height:0;padding:4px 12px 0}.fieldhead{font-size:11px;align-items:center;padding-bottom:3px}.fieldhead button{min-height:28px;font-size:12px}.inspect{font:12px Segoe UI,sans-serif;min-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 6px}.battle-stage{min-height:0}.hand-dock{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px 16px;background:#15232d}.context-content{min-width:0}.starter-feature,.phase-overview:has(#score-presentation) .starter-feature{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:flex-start;padding:2px 0;margin:0;border-right:1px solid var(--line);padding-right:12px}.starter-feature>.card,.starter-feature.relevant>.card{width:52px;height:74px;padding:6px;font-size:19px;border-radius:4px}.starter-feature .card strong,.starter-feature.relevant .card strong{font-size:24px}.starter-feature small{font-size:11px;line-height:1.35;text-align:center}.starter-feature .eyebrow{font-size:11px}.phase-overview,.phase-overview:has(#score-presentation){display:block;padding:0;border:0}.phase-overview:empty{display:none}.hand-tools{font-size:12px;gap:8px}.hand-tools button{font-size:12px;min-height:28px;padding:4px 9px}.fan-hand{--card-width:76px;--card-height:104px;--step:62px;height:135px;margin:0 auto}.hand-card.is-selected:after{font-size:10px;bottom:-15px;letter-spacing:.6px}.card-details{top:6px;bottom:auto;right:5px;left:auto;width:24px;height:24px;min-height:24px;padding:0;border-radius:50%;font-size:16px;background:#e7e9e4;color:#20303d}.hand-card.is-selected .card{border-width:2px}.hand-card.unplayable .card{opacity:.65}.phase-actions{padding-top:4px;gap:8px;min-height:28px}.phase-actions .note,.action-hint{font-size:12px}.phase-score .phase-actions{display:none}
.deployment-tray{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}.tray-heading{justify-content:space-between;gap:10px}.tray-heading h2{font-size:15px}.tray-heading>span{font-size:12px;max-width:none}.packet-group h3{font-size:12px;margin-bottom:8px}.packet-group h3 small{display:inline;font-size:11px;margin-left:5px}.packet-cards{display:flex;justify-content:center;gap:0;padding:3px 8px 4px}.packet{width:90px;flex:0 1 90px;margin:0 -5px;padding:4px 3px;background:#1a2a35;gap:4px;transform:translateY(calc(var(--fan)*var(--fan)*1px)) rotate(calc(var(--fan)*2deg));transform-origin:50% 120%;position:relative;transition:transform .12s}.packet .card{width:66px;max-width:100%;height:84px;font-size:20px;padding:6px}.packet small{font:11px Segoe UI,sans-serif;line-height:1.25;min-height:27px}.packet.selected-packet{padding:3px 2px;transform:translateY(-4px);z-index:2;background:#35423e;box-shadow:none}.packet:focus-visible{z-index:3}.packet:disabled{opacity:.65}.packet.deployed{opacity:.42}.packet .card strong{font-size:24px}
.pegging-strip{padding:6px 12px 0;min-width:0}.pegging-strip .pegging-table,.pegging-strip .pegging-table.targeting{position:static;inset:auto;transform:none;width:100%;margin:0;padding:7px 10px;background:#182934;border:1px solid #3c505e;box-shadow:none;display:grid;grid-template-columns:100px minmax(0,1fr) 155px;grid-template-rows:1fr auto;gap:3px 12px;max-height:none}.pegging-strip .table-heading{display:block;grid-row:1;margin:0;align-self:center}.pegging-strip .running-count{font-size:34px;line-height:1.15}.pegging-strip .running-count small{font-size:17px}.pegging-strip .table-turn{font-size:0}.pegging-strip .table-turn progress{height:4px;margin:4px 0 0}.pegging-strip .sequence-history,.pegging-strip .targeting .sequence-history{display:block;grid-column:2;grid-row:1;max-height:88px;overflow:auto;padding:0;min-width:0}.pegging-strip .sequence{margin:0 0 5px}.pegging-strip .sequence-label{font-size:10px}.pegging-strip .table-cards{gap:6px;min-height:0;flex-wrap:nowrap;justify-content:flex-start}.pegging-strip .played-card{flex:none}.pegging-strip .played-owner{font-size:10px}.pegging-strip .table-card{width:36px;height:49px;padding:4px;font-size:13px;transform:none}.pegging-strip .table-card strong{font-size:18px}.pegging-strip .play-area{grid-column:3;grid-row:1;align-self:center;min-height:54px;width:100%;font:12px Segoe UI,sans-serif;padding:8px;background:#223541;border:1px solid #526572;color:#d9e4ec;margin:0}.pegging-strip .play-area.ready,.pegging-strip .play-area.drop-valid{background:#dfc899;color:#16242d;border-color:#e6d4ad}.pegging-strip .target-table-note{grid-column:3;grid-row:1;font-size:12px;align-self:center;margin:0;color:#e2ceaa}.pegging-strip .pegging-feedback{grid-row:2;grid-column:1/-1;min-height:0;font-size:12px;margin:0}.pegging-strip .pegging-feedback:empty{display:none}.pegging-strip .table-empty{font-size:12px;margin:18px 0}.pegging-strip .completed{opacity:.65}
.phase-overview #score-presentation{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr);gap:16px;padding:0;margin:0;border:0;background:transparent;width:100%;text-align:left}.score-summary,.score-allocation{min-width:0}.score-heading{align-items:start;margin:0}.score-heading h2{font-size:16px;line-height:1.3;margin:4px 0}.score-heading .eyebrow{font-size:11px}.score-cards{gap:7px;margin:8px 0}.score-card{width:48px;height:68px;font-size:17px;padding:5px}.score-card strong{font-size:22px}.score-details{display:flex;flex-wrap:wrap;font-size:12px;gap:3px 10px;margin:0}.score-details span{white-space:nowrap}.hand-investment{margin:0;padding:0;border:0}.hand-investment h3,.hand-investment>p:first-of-type,.investment-totals{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}.hand-investment .investment-rate{font-size:12px;margin:0 0 7px;line-height:1.4}.investment-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.investment-choices button{min-width:0;padding:8px 5px;text-align:left;border:1px solid #546574;border-radius:5px;background:#1b2d39}.investment-choices button strong{font-size:11px;white-space:nowrap}.investment-choices button span{font-size:12px;line-height:1.6}.investment-choices button[aria-checked=true]{border-color:#e3ca98;background:#354239;box-shadow:inset 0 0 0 1px #e3ca98}.investment-instruction,.hand-investment p.investment-instruction{font-size:12px;line-height:1.4;margin:8px 0 0}.hand-investment #take-cribbage{margin:8px 0 0;min-height:34px;font-size:12px}.hand-investment .bonus-notice,.bonus-notice{font-size:12px;line-height:1.5;margin:8px 0 0}#investment-error:empty{display:none}.secondary{margin:4px 16px 8px}.secondary>summary,.score-review>summary{font-size:11px}.score-review{margin:5px 16px;padding:5px 0}.battle-results{margin:8px 16px;padding:14px}.result-heading h2{font-size:24px;margin:4px 0}.result-heading p{margin:5px 0 8px}.battle-results table th,.battle-results table td{padding:5px 8px;font-size:12px}.battle-results .status-note{margin:7px 0}.battle-results #result-details{font-size:12px;margin-top:0}
@media(min-width:951px){.workspace{display:grid;height:calc(100dvh - 48px);grid-template-rows:auto auto minmax(180px,1fr) auto auto auto auto;grid-template-areas:'phase' 'pegging' 'field' 'results' 'context' 'review' 'secondary';min-height:0}.phase-header{grid-area:phase}.pegging-strip{grid-area:pegging}.field{grid-area:field;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}.workspace .battle-stage canvas{height:100%;min-height:0;width:100%;display:block}.workspace .battle-stage{height:100%;min-height:0}.hand-dock{grid-area:context}.battle-results{grid-area:results}.score-review{grid-area:review}.secondary{grid-area:secondary}.phase-result .workspace,.phase-end .workspace{height:auto;min-height:calc(100dvh - 48px);grid-template-rows:auto auto 240px auto auto auto auto}.phase-combat .hand-dock,.phase-reveal .hand-dock,.phase-result .hand-dock{padding-top:8px;padding-bottom:8px}.phase-combat .starter-feature small{display:none}}
@media(max-width:950px){.left-sidebar,.right-sidebar{top:48px}.hand-dock{grid-template-columns:64px minmax(0,1fr);padding:10px;gap:10px}.workspace .battle-stage canvas{height:380px}.phase-overview #score-presentation{grid-template-columns:1fr}.deployment-tray{grid-template-columns:1fr 1fr}.tray-heading{flex-wrap:wrap}.packet{margin:0 -6px}.packet small{font-size:10px}.pegging-strip .pegging-table,.pegging-strip .pegging-table.targeting{grid-template-columns:85px minmax(0,1fr) 120px}.turn-label{white-space:normal}.fan-hand{--step:52px}.fleet-roster{font-size:12px}}
@media(max-width:570px){.hand-dock{grid-template-columns:52px minmax(0,1fr);gap:7px;padding:8px}.starter-feature{padding-right:5px}.starter-feature>.card,.starter-feature.relevant>.card{width:42px;height:60px;font-size:16px}.starter-feature .eyebrow,.starter-feature small{font-size:10px}.hand-tools{font-size:11px;gap:5px}.hand-tools button{font-size:11px;padding:4px 6px}.fan-hand{--step:38px;--card-width:61px;--card-height:88px;height:120px}.deployment-tray{grid-template-columns:1fr}.packet{flex:0 1 74px}.tray-heading>span{font-size:12px}.packet small{font-size:11px}.pegging-strip{padding:6px 6px 0}.pegging-strip .pegging-table,.pegging-strip .pegging-table.targeting{grid-template-columns:75px minmax(0,1fr);gap:5px 8px}.pegging-strip .play-area,.pegging-strip .target-table-note{grid-column:1/-1;grid-row:2;min-height:34px}.pegging-strip .pegging-feedback{grid-row:3}.pegging-strip .running-count{font-size:28px}.phase-header{padding:10px}.phase-header h2{font-size:20px}.turn-label{font-size:10px}.score-card{width:43px;height:62px}.score-cards{gap:4px}.investment-choices button strong{font-size:10px;white-space:normal}.investment-choices button span{font-size:11px}.fieldhead{font-size:10px}.game-header .header-controls button{font-size:10px}.phase-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){button,.packet,.hand-card{transition:none}}
/* Keep captions level; only the card faces form the deployment fan. */
.packet{transform:none;transform-origin:center;margin:0;padding:3px;flex:0 1 25%;width:25%;border-color:transparent;background:transparent;gap:8px}.packet .card{transform:translateY(calc(var(--fan)*var(--fan)*1px)) rotate(calc(var(--fan)*2deg));transform-origin:50% 120%}.packet small{width:100%;min-height:28px;overflow-wrap:normal}.packet.selected-packet{transform:none;padding:2px;border-color:#dfc899;background:#273b40}.packet.selected-packet .card{transform:translateY(-4px)}
/* Explicit spell hit areas share the projected cell, above passive unit labels. */
.phase-target:not(.inspect-mode) .squad-label{pointer-events:none}.spell-squad-action{position:absolute;transform:translate(-50%,-50%);min-height:0;padding:0;z-index:50;background:transparent;border:0;border-radius:0;pointer-events:auto;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.spell-squad-action:hover:not(:disabled){background:#dfc89920;border:0}.spell-squad-action:focus-visible{background:#dfc89944;outline:2px solid #e5c990;outline-offset:-2px}
@media(min-width:951px){.phase-result .workspace,.phase-end .workspace{grid-template-rows:auto auto 200px auto auto auto auto}.battle-results{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr);gap:6px 20px}.battle-results>.result-heading{grid-column:1;grid-row:1}.battle-results>table{grid-column:2;grid-row:1/4;align-self:start;margin:0}.battle-results>.status-note{grid-column:1;grid-row:2;margin:0}.battle-results>#result-details{grid-column:1;grid-row:3;justify-self:start;align-self:end}.battle-results>.result-details{grid-column:1/-1;grid-row:4}.phase-result .starter-feature small,.phase-end .starter-feature small{display:none}.phase-result .hand-dock,.phase-end .hand-dock{min-height:110px}.phase-result .context-content,.phase-end .context-content{align-self:center}}