:root{--attack-accent:#ff8d81}
:root{color-scheme:dark;--bg:#10191c;--panel:#172327;--border:#2f4147;--muted:#9db0b5;--text:#ebf0ec;--accent:#c8e896;--blue:#70c6ef;--red:#ed9685}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,sans-serif}button,select{font:inherit}button,select{border:1px solid var(--border);background:#1b2b30;color:var(--text);border-radius:5px;padding:9px 12px;font-size:14px}button{cursor:pointer}button:hover{background:#31454a}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,svg g:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent)}header{height:76px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--accent);font-size:30px}.brand strong{font-size:18px;letter-spacing:.12em;color:var(--text)}.brand span,.build{font-size:12px;color:var(--muted);letter-spacing:.12em}.header-right{display:flex;gap:20px;align-items:center}main{display:grid;grid-template-columns:280px minmax(400px,1fr) 280px;min-height:calc(100vh - 76px)}aside{padding:26px 22px}.left{border-right:1px solid var(--border)}.right{border-left:1px solid var(--border);background:#142024}.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--muted);margin-bottom:10px}h1{font:32px/1.15 Georgia,serif;margin:10px 0}h2{font:24px Georgia,serif;margin:28px 0 12px}h3{font-size:16px}.muted{color:var(--muted)}.small{font-size:14px}.field{display:grid;gap:7px;font-size:14px;margin:18px 0 10px}.field select{width:100%}.pair{display:flex;gap:8px}.pair button{flex:1}#load-map{margin-top:8px;width:100%}.primary{background:var(--accent);color:#172217;border-color:var(--accent);font-weight:700;width:100%;margin-top:18px}.primary:hover{background:#d9f4b0}.army{padding:13px 0;border-top:1px solid var(--border)}.army-title{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}.army-title strong{color:var(--blue)}.army:nth-child(2) strong{color:var(--red)}.choice{display:flex;gap:8px;align-items:center;font-size:14px;margin:10px 0}.choice input{accent-color:var(--accent)}.arena{min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 45%,#253b3e,#101b20 75%)}.arena-bar{padding:20px 24px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);letter-spacing:.12em}.board-wrap{min-height:470px;flex:1;display:flex;align-items:center;overflow:auto}#board{width:100%;min-width:500px;max-height:740px;display:block}.hex{cursor:pointer;stroke:#172927;stroke-width:2}.hex:hover{filter:brightness(1.25)}.tile-label{font-size:11px;fill:#dce9dc;opacity:.6;pointer-events:none}.token{pointer-events:none}.token text{font-size:15px;font-weight:800;fill:#112227}.board-bottom{padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:block;width:8px;height:8px;border-radius:50%}.blue{background:var(--blue)}.red{background:var(--red)}.green{background:var(--accent)}#message{margin:0 24px;padding:15px 18px;background:#203339;border:1px solid #3b555f;border-radius:5px;font-size:14px}.prototype-note{font-size:12px;color:var(--muted);padding:0 24px 12px}.card-name{font:30px/1.15 Georgia,serif;margin:12px 0}.card-tag{font-size:12px;color:var(--accent);letter-spacing:.06em}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.stats div{border-bottom:1px solid var(--border);padding-bottom:8px}.stats strong{display:block;font-size:24px;font-weight:450}.stats span{font-size:12px;color:var(--muted)}.ability{border-top:1px solid var(--border);padding-top:15px}.ability p{font-size:14px;color:var(--muted)}.health{color:var(--red);font-size:14px}.source{font-size:12px}.dice-panel{margin-top:28px;padding:20px 0;border-block:1px solid var(--border)}#dice{font-size:14px;color:var(--muted)}.dice-result{font-size:24px;color:var(--text)}.journal{margin-top:22px}#log{padding:0;list-style:none;max-height:250px;overflow:auto;font-size:14px;color:var(--muted)}#log li{padding:10px 0;border-bottom:1px solid var(--border)}#planning label{display:grid;grid-template-columns:28px 1fr;align-items:center;font-size:14px;gap:6px;margin:8px 0}#planning select{min-width:0;width:100%;font-size:14px}#planning h3{color:var(--blue)}#planning h3.second{color:var(--red)}#reset{margin-top:10px;width:100%}dialog{max-width:650px;width:90%;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:26px}dialog::backdrop{background:#000b}#close-help{float:right}[hidden]{display:none!important}@media(max-width:1100px){main{grid-template-columns:240px minmax(350px,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--border)}.right>.eyebrow{grid-column:1/-1}.journal{grid-column:2;grid-row:2/4}.build{display:none}}@media(max-width:650px){header{height:auto;padding:16px}.brand span{display:none}.brand strong{font-size:14px}.header-right button{font-size:12px}main{display:flex;flex-direction:column}.left{padding:20px;border-right:0}.arena{order:-1}.board-wrap{min-height:320px}.right{display:block}.arena-bar{padding:14px}.legend{gap:8px;font-size:12px}.board-bottom{padding:12px}.board-wrap svg{min-width:500px}.prototype-note{margin-bottom:5px}#setup h2{margin-top:20px}}

.order-army{padding:12px 0;border-bottom:1px solid #3b4b4e}.order-editor label{display:block;margin:10px 0}.order-editor select{width:100%}.order-army button,#planning>button{margin:8px 0;width:100%}#log{max-height:340px;overflow:auto}#chat-form{display:grid;gap:8px;margin-top:16px}#chat-text{background:#16272a;border:1px solid #4b5b5d;color:#fff;padding:10px;border-radius:5px;width:100%;box-sizing:border-box}.army>select{max-width:100%;width:100%;margin:10px 0}

#movement-overlay{pointer-events:none}.route-origin{fill:none;stroke:#ff685f;stroke-width:3}.route-dot{fill:#ff685f;stroke:#3d1514;stroke-width:2}.token-preview{opacity:.45}#move-preview{min-height:24px;margin:0 24px 10px;color:#ffb1a2;font-size:14px}

:is(#action-popover,#unit-ability-popover){position:fixed;z-index:20;width:210px;padding:14px;background:#17272cf5;border:1px solid #c8e896;border-radius:9px;box-shadow:0 8px 28px #0008;font-size:14px}:is(#action-popover,#unit-ability-popover) p{margin:7px 0;color:var(--muted)}:is(#action-popover,#unit-ability-popover) .primary{margin:8px 0}:is(#action-popover,#unit-ability-popover) button{width:100%}#combat{width:100%;margin-top:12px}.target-preview-ring{fill:none;stroke:var(--attack-accent);stroke-width:3}.attack-preview-icon{font-size:30px;fill:var(--attack-accent);paint-order:stroke;stroke:#142024;stroke-width:3}

:is(#action-popover,#unit-ability-popover) .undo-movement{margin-top:12px;background:transparent;border:1px dashed #8ba1aa;color:#b9ced7}:is(#action-popover,#unit-ability-popover) .undo-movement:hover:not(:disabled){background:#2a3d45}:is(#action-popover,#unit-ability-popover) .action-passive{font-size:12px;color:#aebbb3}

#quick-start{width:100%;margin-top:10px;border-color:#759fb2;color:#b5deef;background:#20353f}#quick-start:hover{background:#304c59}

:is(#action-popover,#unit-ability-popover){width:150px;padding:6px;border-radius:6px;display:grid;gap:6px}:is(#action-popover,#unit-ability-popover) button{font-size:12px;padding:7px 8px;margin:0}:is(#action-popover,#unit-ability-popover) .primary,:is(#action-popover,#unit-ability-popover) .undo-movement{margin:0}

#board.show-attack-range .hex{stroke:#172927!important;stroke-width:2!important}#board.show-attack-range .hex.attack-range{stroke:var(--attack-accent)!important;stroke-width:3!important;fill:#755047}#board.show-attack-range .hex.attack-range:hover{filter:brightness(1.15)}

.token-owner{display:block;color:#a9bcc1;font-size:12px;margin-top:2px}.token-wound-row{display:flex;align-items:center;gap:10px;margin-top:8px}.token-wounds{display:block;color:#ffb8c0;font-weight:600}.token-life{display:block;color:#b7c9c6;font-size:12px;margin-top:3px}

#inspection-panel{position:sticky;top:12px;z-index:10;height:300px;overflow:auto;padding:16px;margin:0 0 24px;background:#192b30;border:1px solid #4d656c;border-radius:8px;box-shadow:0 5px 16px #0003;font-size:13px;line-height:1.5}#inspection-content strong{display:block;font-size:15px}#inspection-content p{margin:9px 0}.inspection-empty{color:var(--muted)}.terrain-details{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}#inspection-content>.terrain-details{margin-top:0;padding-top:0;border-top:0}.terrain-swatch{display:inline-block;width:17px;height:19px;margin-right:7px;vertical-align:middle;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#466344}.terrain-swatch[data-terrain="water"]{background:#4f9bc3}.terrain-swatch[data-terrain="rock"]{background:#929d9b}.terrain-swatch[data-terrain="sand"]{background:#c3ac6b}@media(max-width:1100px){#inspection-panel{position:static;grid-column:1/-1;height:250px;margin-bottom:0}.right .journal{grid-row:auto;grid-column:auto}}

.arena>.journal{margin:8px 24px 24px;padding:16px 18px;background:#142024;border:1px solid var(--border);border-radius:8px}.arena #log{height:180px;max-height:180px;margin:0;overscroll-behavior:contain}.arena #chat-form{grid-template-columns:100px minmax(0,1fr) auto;gap:6px 10px;align-items:center}.arena #chat-form label{font-size:12px;color:var(--muted)}.arena #chat-form label[for="chat-player"]{grid-column:1;grid-row:1}.arena #chat-form label[for="chat-text"]{grid-column:2;grid-row:1}.arena #chat-player{grid-column:1;grid-row:2;width:100%}.arena #chat-text{grid-column:2;grid-row:2;min-width:0}.arena #chat-form button{grid-column:3;grid-row:2}@media(max-width:650px){.arena>.journal{margin:8px 12px 16px;padding:12px}.header-right{flex-wrap:wrap;gap:8px}.arena #chat-form{grid-template-columns:90px minmax(0,1fr)}.arena #chat-form button{grid-column:1/-1;grid-row:3}}

/* Keep board geometry independent of card, log, and status content height. */
.board-wrap{flex:0 0 auto;height:clamp(280px,calc(100vh - 350px),600px);min-height:0;overflow-anchor:none}.arena{overflow-anchor:none}#board{flex-shrink:0}@media(max-width:650px){.board-wrap{height:360px;min-height:0}}




#action-bar{margin:0 24px 14px;padding:12px 14px;border:1px solid #526650;border-radius:8px;background:#1b2d2d;display:flex;align-items:center;flex-wrap:wrap;gap:10px}#action-unit{flex:1 0 100%;font-size:13px;color:var(--accent);font-weight:650}#action-bar :is(#action-popover,#unit-ability-popover){position:static;z-index:auto;width:auto;padding:0;border:0;box-shadow:none;background:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px}#action-bar :is(#action-popover,#unit-ability-popover) button{width:auto;font-size:13px;padding:8px 12px}#action-bar #advance{margin-left:auto;white-space:nowrap}.action-hint{font-size:13px;color:var(--muted)}#board .hex.selected-target{stroke:#fff1a6!important;stroke-width:6!important;filter:brightness(1.25)}@media(max-width:650px){#action-bar{margin-inline:12px}}

.battle-card-image{display:block;width:100%;height:auto;margin:12px 0;cursor:zoom-in}.surge-markers{display:flex;align-items:center;gap:7px;margin:8px 0}.surge-full{color:#f6d668;font-size:24px;text-shadow:0 2px 1px #755a24}.surge-empty{color:#718086;font-size:24px}.surge-markers .small{margin-left:5px}.surge-status{color:#f6d668;font-size:13px}.injection-button{border-color:#ab923b!important;color:#ffe998!important}.squad-picker,.base-facing{font-size:12px;color:var(--muted)}.squad-picker select,.base-facing select{font-size:12px;padding:6px;max-width:150px}

.token .squad-number{font-size:10px;fill:#fff}.token svg{min-width:0!important}

/* A stable inspection panel keeps portrait changes from shifting the battlefield. */
#inspection-panel{height:420px}
.inspection-portrait{position:relative;height:145px;margin:0 -16px 10px;overflow:hidden;background:#142329}
.inspection-portrait>svg{position:absolute;width:100%;height:100%;display:block}
.inspection-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#192b3080,transparent 20%,transparent 80%,#192b3080),linear-gradient(180deg,#192b3010 15%,#192b3070 45%,#192b30 100%)}
.inspection-portrait .inspection-unit-heading{position:absolute;z-index:1;bottom:4px;left:16px;right:16px;text-shadow:0 1px 5px #000}
.inspection-portrait .token-owner{color:#c5d4d8}
.inspection-portrait.portrait-unavailable{height:75px}
@media(max-width:1100px){#inspection-panel{height:420px}.inspection-portrait{max-width:480px}}

.autosave-status{margin:-12px 24px 12px;font-size:11px;color:var(--muted);min-height:17px}

#figure-statuses{display:flex;flex-wrap:wrap;gap:8px;flex:1 0 100%}
.figure-status{flex:1;min-width:135px;text-align:left;display:grid;gap:3px;padding:9px 11px;background:#17272b}
.figure-status strong{font-size:13px}.figure-status span{font-size:12px;color:#bacbd0}.figure-status small{font-size:11px;color:#b7e5ee}
.figure-status[aria-pressed="true"]{border-color:#c8e896;background:#2c4034;box-shadow:inset 0 0 0 1px #c8e896}
.figure-status:disabled{opacity:.65}.ability-result{flex:1 0 100%;display:grid;gap:3px;border-left:3px solid #91acb6;background:#122327;padding:9px 12px;border-radius:4px;font-size:12px}
.ability-result strong{font-size:15px}.ability-result.success{border-color:#c8e896}.ability-result.success strong{color:#d8efb6}.ability-result.failure{border-color:#ed9685}.ability-result.failure strong{color:#ffb4a4}.ability-caption{font-size:9px;letter-spacing:.13em;color:#9db0b5}

.battlefield-stage{position:relative;min-width:0}
#turn-banner{position:fixed;z-index:12;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:13px 25px;display:grid;gap:3px;text-align:center;background:linear-gradient(135deg,#152b35f5,#102027f5);border:1px solid #70c6ef;border-radius:9px;box-shadow:0 8px 24px #0006;pointer-events:none;color:#edf5f6}
#turn-banner strong{font-size:23px;color:#70c6ef;line-height:1.2}#turn-banner span{font-size:14px}#turn-banner small{font-size:11px;color:#b5c6cb}
#turn-banner[data-army="1"]{border-color:#ed9685;background:linear-gradient(135deg,#352625f5,#201c21f5)}#turn-banner[data-army="1"] strong{color:#ed9685}
@media(max-width:650px){#turn-banner{padding:10px 16px}#turn-banner strong{font-size:20px}#turn-banner span{font-size:12px}}
/* One strong separator per complete attack, not between its two rolls. */
#log li.dice-log-entry.attack{border-bottom:0;padding-bottom:5px}
#log li.dice-log-entry.defense{padding-top:5px;padding-bottom:14px;margin-bottom:8px;border-bottom:3px solid #66818a}

#log li.dice-log-entry[data-attacking-army]{padding-left:12px;padding-right:12px;border-left:3px solid var(--attack-team)}
#log li.dice-log-entry[data-attacking-army="1"]{--attack-team:#70c6ef;background:#70c6ef16}
#log li.dice-log-entry[data-attacking-army="2"]{--attack-team:#ed9685;background:#ed968516}
#log li.dice-log-entry.attack[data-attacking-army]{border-radius:6px 6px 0 0}
#log li.dice-log-entry.defense[data-attacking-army]{border-radius:0 0 6px 6px}

.arena #log{height:160px;min-height:160px;max-height:160px;overflow-y:auto;resize:none}






#match-banner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:86px;border-bottom:1px solid #506168;isolation:isolate}
.match-army{display:flex;align-items:center;justify-content:center;padding:20px 30px;text-align:center;font-size:clamp(16px,1.6vw,23px);font-weight:750;overflow-wrap:anywhere;line-height:1.2}
.match-army.army-one{color:#b9e8fc;background:linear-gradient(110deg,#244f64,#18343f);border-top:3px solid var(--blue)}
.match-army.army-two{color:#ffd3ca;background:linear-gradient(250deg,#653e39,#3d2a2d);border-top:3px solid var(--red)}
.match-versus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;border:1px solid #688087;border-radius:50%;background:#142329;color:#e8ede9;font-size:11px;font-weight:800}
.army-name-field{display:grid;gap:4px;font-size:12px;color:var(--muted);margin:8px 0}.army-name-field input{width:100%;min-width:0;background:#14262c;border:1px solid #45606a;border-radius:5px;padding:8px;color:var(--text);font:inherit;font-size:14px}.army-name-field input:focus-visible{outline:2px solid var(--accent)}
.arena-bar #mode{overflow-wrap:anywhere}.arena-bar #map-meta{flex-shrink:0}

.arena>.journal{margin-top:14px;margin-bottom:16px}.journal .autosave-status{margin:0 0 8px;color:#ffb4a4}

/* Chat continues the matchup header as one full-width panel. */
.arena>.journal{margin:0 0 16px;padding:14px 18px 12px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:#142024}
.arena>.journal>.eyebrow{font-size:10px;margin-bottom:10px}
.arena #chat-form{display:flex;align-items:center;gap:8px;margin-top:12px}
.arena #chat-text{flex:1;min-width:0;width:auto}
.arena #chat-form button{flex:0 0 auto}
@media(max-width:650px){.arena>.journal{padding:12px}}

#log .dice-empty{border:0;color:var(--muted);font-size:13px}

#log:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Turn controls live beside the battlefield, with one clear vertical order. */
.left #action-bar{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:16px 0;padding:12px 10px;min-width:0}
.left #action-unit{flex:0 0 auto;line-height:1.45;overflow-wrap:anywhere}
.left #figure-statuses{display:grid;grid-template-columns:minmax(0,1fr);flex:0 0 auto;gap:7px}
.left .figure-status{min-width:0;width:100%;padding:8px 10px}
.left #ability-result{flex:0 0 auto;min-width:0;overflow-wrap:anywhere}
.left #action-bar :is(#action-popover,#unit-ability-popover){display:flex;flex-direction:column;align-items:stretch;width:100%;gap:8px}
.left #action-bar :is(#action-popover,#unit-ability-popover) button{width:100%;white-space:normal;padding:9px 8px;line-height:1.35}
.left #action-bar .primary{margin-top:0}
.left #action-bar .base-facing{display:grid;gap:5px}
.left #action-bar .base-facing select{width:100%;max-width:none}
.left #action-bar #advance{width:100%;margin:10px 0 0;border-top:2px solid #607465;white-space:normal;padding:11px 8px}
.left #action-bar .undo-movement{margin-top:5px!important}

/* Compact natural-height rows in a window sized for an attack and defense roll. */
.arena>.journal{padding:12px 0 0;border-bottom:0;margin-bottom:0}
.arena>.journal>.eyebrow,.journal .autosave-status{padding-inline:18px}
.arena #log{height:112px;min-height:112px;max-height:112px;overflow-anchor:none}

#match-banner:has(#round-status:not([hidden])) .match-army{padding-bottom:34px}
#match-banner:has(#round-status:not([hidden])) .match-versus{top:35%}
#round-status{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:12px;background:#142329;color:var(--text);font-size:12px;font-weight:700;white-space:nowrap}

/* Stable active-unit and inspection sidebars. */
#active-card{margin:18px 0 24px;padding-top:16px;border-top:1px solid var(--border)}
#active-card .card-name{font-size:22px}
#active-card .battle-card-image{width:100%;height:auto}
.match-army.is-active{box-shadow:inset 0 -4px 0 currentColor}
.match-army.is-active>span::after{content:"TAKING TURN";display:block;margin-top:5px;font-size:9px;letter-spacing:1.5px;font-weight:600}

#active-unit-panel{max-height:420px;overflow:auto;padding:16px;margin:0 0 16px;background:#192b30;border:1px solid #4d656c;border-radius:8px;box-shadow:0 5px 16px #0003;font-size:13px;line-height:1.5}
#active-unit-content strong{display:block;font-size:15px}
#active-unit-content p{margin:9px 0}

/* Terrain has its own inspection window. */
#inspection-panel{position:static;height:auto;max-height:420px}
#terrain-panel{padding:16px;margin:0 0 24px;background:#192b30;border:1px solid #4d656c;border-radius:8px;font-size:13px;line-height:1.5}
#terrain-content .terrain-details{margin:0;padding:0;border:0}
#terrain-content p{margin:9px 0}

.portrait-member-badge{position:absolute;top:9px;right:10px;z-index:2;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border:1px solid #9db4bd;border-radius:50%;background:#142329e8;color:#fff;font-size:16px;font-weight:800;box-shadow:0 2px 5px #0005}
.portrait-member-badge.without-portrait{position:static;display:inline-grid;margin-top:6px}

.dice-history-heading{display:flex;align-items:center;justify-content:space-between;padding:0 14px 9px;gap:8px}
#dice-round{font:inherit;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:#142024;border:0;padding:3px 0;cursor:pointer;max-width:100%}
#dice-live{font-size:11px;padding:4px 8px}

.inspector-panel-label{margin:0 0 12px;padding-left:2px}
#inspection-panel:has(.inspection-portrait){padding-top:0}

/* Display-only outlines: preserve the original official card files. */
.battle-card-image[data-unit="guilty-zd"]{clip-path:polygon(2.3% 41.6%,19% 31.8%,18.8% 10.6%,31.8% 2.8%,49.5% 13%,66.5% 2.6%,80% 9.8%,80.3% 30.5%,97.8% 40.3%,98% 55.8%,81% 66.4%,81.3% 87.1%,67.8% 94.6%,50.8% 85.5%,33.8% 95.6%,20.3% 88.9%,19.8% 67.2%,2.3% 58.1%)}
.battle-card-image[data-unit="syvarris-rotv"]{clip-path:polygon(3.8% 44.3%,20.8% 34.7%,20.8% 14.2%,33% 7.3%,50% 16.8%,67% 7.8%,79.5% 15%,79.3% 36.8%,96% 46.1%,96% 59.1%,79% 69.2%,79% 90.2%,66.3% 97.2%,50% 87.3%,32.3% 97.2%,20% 89.6%,20.3% 69.7%,3.8% 59.6%)}
.battle-card-image[data-unit="scavorith-lord-of-ruin"]{clip-path:polygon(3.6% 43.5%,20.3% 32.1%,20.5% 11.3%,32.3% 4.7%,50.8% 14%,69% 4.6%,79.5% 11.3%,80% 32.5%,96.3% 43.3%,96.3% 64.8%,80.4% 76%,80.2% 89.2%,68.6% 96.4%,50.4% 86%,32.3% 96.4%,21.9% 90.9%,21.4% 76.5%,3.5% 64.8%)}

/* Unit summaries fill their sidebar; the sidebar itself supplies the boundary. */
.left,.right{--sidebar-inset:22px}
#active-unit-panel,#inspection-panel{margin-inline:calc(-1 * var(--sidebar-inset));padding-inline:var(--sidebar-inset);border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;background:transparent}
#active-unit-panel{padding-top:0;--unit-surface:#10191c}
#inspection-panel{--unit-surface:#142024}
#active-unit-panel .inspection-portrait,#inspection-panel .inspection-portrait{margin-inline:calc(-1 * var(--sidebar-inset));max-width:none;background:var(--unit-surface)}
#active-unit-panel .inspection-portrait::after,#inspection-panel .inspection-portrait::after{background:linear-gradient(180deg,transparent 15%,var(--unit-surface) 100%)}
#active-unit-panel .inspection-unit-heading,#inspection-panel .inspection-unit-heading{left:var(--sidebar-inset);right:var(--sidebar-inset)}
@media(max-width:650px){.left{--sidebar-inset:20px}}

/* Compact labels overlay portraits instead of adding header strips. */
.left:has(#active-unit-panel:not([hidden]) .inspection-portrait),.right{padding-top:0}
#active-unit-panel,#inspection-panel{position:relative;top:0}
#active-unit-panel:has(.inspection-portrait)>.eyebrow,#inspection-panel:has(.inspection-portrait)>.eyebrow{position:absolute;top:10px;left:12px;z-index:3;margin:0;padding:5px 8px;border-radius:4px;background:#10191cb8;color:#e0e9e9;font-size:10px;letter-spacing:.13em;line-height:1.4;pointer-events:none}
#active-unit-panel .inspection-portrait::after,#inspection-panel .inspection-portrait::after{background:linear-gradient(180deg,#080e1266,transparent 42%),linear-gradient(180deg,transparent 15%,var(--unit-surface) 100%)}

#active-unit-panel>.panel-role-icon,#inspection-panel>.panel-role-icon{display:inline-grid;place-items:center;width:30px;height:30px;padding:5px;margin-bottom:10px;letter-spacing:0;pointer-events:auto;cursor:help;border-radius:5px;background:#10191cb8;color:#e0e9e9}
#active-unit-panel>.active-role-icon{color:#f3ce69}
.panel-role-icon svg{display:block;width:20px;height:20px}
.panel-role-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.board-bottom{justify-content:flex-end}

/* Familiar army-card stat bands. */
.unit-quick-stats{display:grid;gap:2px;margin:12px 0 14px;padding:2px;background:#89938a;border:1px solid #69766c;border-radius:2px}
.unit-quick-stats>div{display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:3px 13px;gap:12px;color:#fff}
.unit-quick-stats dt{font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.3;letter-spacing:.025em}
.unit-quick-stats dd{margin:0;min-width:28px;text-align:center;font-size:23px;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums}
.unit-quick-stats [data-stat="move"]{background:#305b37}
.unit-quick-stats [data-stat="range"]{background:#4b4845}
.unit-quick-stats [data-stat="attack"]{background:#781e30}
.unit-quick-stats [data-stat="defense"]{background:#20577f}

/* Inset unit windows for comparison, retaining card-style quick stats. */
.left:has(#active-unit-panel:not([hidden]) .inspection-portrait),.right{padding-top:26px}
#active-unit-panel,#inspection-panel{--sidebar-inset:16px;--unit-surface:#192b30;margin-inline:0;padding:0 16px 16px;border:1px solid #4d656c;border-radius:8px;background:#192b30;box-shadow:0 5px 16px #0003;overflow:auto}
#inspection-panel:not(:has(.inspection-portrait)){padding-top:16px}
@media(max-width:650px){.left:has(#active-unit-panel:not([hidden]) .inspection-portrait){padding-top:20px}}

.unit-ability-bars{display:grid;gap:6px;margin:0 0 14px}
.unit-ability{border:1px solid #4d656c;border-radius:4px;background:#21363b;overflow:hidden}
.unit-ability summary{padding:8px 10px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.4;list-style-position:inside}
.unit-ability summary:hover{background:#2c454b}
.unit-ability summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.unit-ability[open] summary{border-bottom:1px solid #4d656c}
#active-unit-content .unit-ability p,#inspection-content .unit-ability p{margin:0;padding:10px;font-size:13px;line-height:1.55;background:#192b30;white-space:pre-line}

/* Card-style stat shield; color belongs to the printed unit, not its player. */
.unit-stat-shield{--shield-light:#c4c2b4;--shield-mid:#85857d;--shield-dark:#4a4d4b;--shield-edge:#656a65;margin:12px auto 16px;padding:3px;max-width:260px;background:linear-gradient(125deg,#c5c9c0,var(--shield-edge) 38%,#343a38 70%,#b4b8ae);clip-path:polygon(50% 0,100% 14%,100% 85%,50% 100%,0 85%,0 14%)}
.unit-stat-shield[data-theme="bronze"]{--shield-light:#d1b982;--shield-mid:#947342;--shield-dark:#4b3c26;--shield-edge:#846338}
.unit-stat-shield[data-theme="violet"]{--shield-light:#b8a7c6;--shield-mid:#756183;--shield-dark:#3f2e4d;--shield-edge:#685274}
.stat-shield-surface{padding:0 10px;background:radial-gradient(ellipse at 30% 20%,var(--shield-light),transparent 65%),linear-gradient(145deg,var(--shield-mid),var(--shield-dark));clip-path:polygon(50% 0,100% 14%,100% 85%,50% 100%,0 85%,0 14%)}
.stat-shield-life{height:73px;display:flex;justify-content:center;align-items:flex-end;position:relative;padding-top:9px}
.stat-shield-life svg{width:64px;height:64px;filter:drop-shadow(0 1px 1px #0006)}
.stat-shield-max-life{position:absolute;left:calc(50% + 28px);bottom:17px;color:#fff;font-size:12px;font-weight:650;text-shadow:0 1px 3px #000}
.unit-stat-shield .unit-quick-stats{margin:0;gap:2px;padding:1px;border-color:#a5a49a;background:#aba99e;border-radius:0}
.unit-stat-shield .unit-quick-stats>div{min-height:28px;padding:3px 7px}
.unit-stat-shield .unit-quick-stats dt{font-size:15px}
.unit-stat-shield .unit-quick-stats dd{font-size:21px}
.stat-shield-points{display:flex;flex-direction:column;align-items:center;height:61px;padding-top:3px;color:#fff;line-height:1.05;text-shadow:0 1px 3px #0009;font-size:12px}
.stat-shield-point-value{font-size:26px;font-weight:650}

#active-unit-panel,#inspection-panel{max-height:clamp(420px,calc(100vh - 110px),680px)}

/* Extend the artwork downward, then nest the weathered shield into its lower edge. */
#active-unit-panel .inspection-portrait,#inspection-panel .inspection-portrait{height:205px;margin-bottom:0}
#active-unit-panel .inspection-portrait .inspection-unit-heading,#inspection-panel .inspection-portrait .inspection-unit-heading{bottom:64px}
#active-unit-panel .inspection-portrait.portrait-unavailable,#inspection-panel .inspection-portrait.portrait-unavailable{height:205px}
.unit-stat-shield{position:relative;z-index:1;padding:4px;margin-top:-28px;background:linear-gradient(120deg,#b2b1a3 0%,#555b55 22%,#303530 50%,#999b8b 78%,#3e433c)}
.stat-shield-surface{position:relative;isolation:isolate;background:radial-gradient(ellipse at 36% 22%,var(--shield-light),transparent 56%),linear-gradient(155deg,var(--shield-mid) 24%,var(--shield-dark) 94%)}
.stat-shield-surface::before{content:"";position:absolute;inset:0;z-index:0;background:url('/shield-grain.svg') center/240px 280px;mix-blend-mode:multiply;pointer-events:none;opacity:.9}
.stat-shield-surface>*{position:relative;z-index:1}
.stat-shield-bevel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Keep names off the artwork and show wounds in the familiar count-up direction. */
#active-unit-panel .inspection-unit-heading,#inspection-panel .inspection-unit-heading{position:static;margin:0 calc(-1 * var(--sidebar-inset));padding:12px 16px 10px;background:#21363b;border-bottom:1px solid #4d656c;text-shadow:none}
.inspection-unit-heading strong{display:block;line-height:1.25}
.inspection-unit-heading .token-owner{display:block;margin-top:4px;font-size:12px;color:#c5d4d8}
.stat-shield-life{height:96px;padding-top:11px;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:7px}
.stat-shield-life svg{width:56px;height:56px;flex-shrink:0}
.stat-shield-wound-label{font-size:10px;line-height:1.15;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff;text-shadow:0 1px 3px #000}
.stat-shield-life .stat-shield-max-life{position:static;font-size:11px;line-height:1.3;margin-top:2px}
.stat-shield-surface::before{opacity:1;background-size:100% 100%}
.stat-shield-surface::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 8% 30%,#261d1644,transparent 28%),radial-gradient(ellipse at 80% 92%,#171b2055,transparent 32%),radial-gradient(ellipse at 70% 10%,#e9debd33,transparent 22%);box-shadow:inset 0 0 14px #17191170}

/* Printed Life stays fixed; physical wound markers accumulate beside it. */
.stat-shield-life{height:88px}
.stat-shield-markers{position:absolute;right:-4px;bottom:7px;display:flex;flex-direction:column;align-items:center;color:#fff;font-size:9px;line-height:1.15;text-shadow:0 1px 3px #000}
.stat-shield-life .stat-shield-markers svg{width:44px;height:55px}

#current-action{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;background:#1c3035;border-bottom:1px solid var(--border);font-size:13px;color:#d5e0e2}
#current-action-text{min-width:0}
#current-action-time{flex-shrink:0;font-variant-numeric:tabular-nums;color:#c8e896;font-size:12px;padding:2px 7px;border:1px solid #43595e;border-radius:4px;background:#142327}

/* Desktop battlefield stays in place while each sidebar scrolls independently. */
@media(min-width:1101px){
 body.battlefield-page{height:100dvh;overflow:hidden}
 body.battlefield-page>main{height:calc(100dvh - 76px);min-height:0;overflow:hidden}
 .left,.right{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 #active-unit-panel,#inspection-panel{position:static;height:auto;max-height:none;overflow:visible}
 .arena{height:100%;min-height:0;overflow:hidden}
 .arena>#match-banner,.arena>#current-action,.arena>.journal{flex-shrink:0}
 .battlefield-stage{flex:1;min-height:0;overflow:hidden}
 .board-wrap{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
 #board{height:100%;min-width:0;max-height:none}
 .board-bottom{padding:4px 16px;flex-shrink:0}
 .board-bottom button{padding:3px 10px}
 #move-preview{min-height:0;margin:0 16px 4px;font-size:12px}
 #move-preview:empty{display:none}
 #message{flex-shrink:0;max-height:48px;overflow-y:auto;margin:0 16px;padding:5px 9px;font-size:12px}
 .prototype-note{flex-shrink:0;margin:4px 0;padding:0 16px;font-size:10px}
}

/* Hover guidance overlays the map instead of changing its available height. */
.battlefield-stage #move-preview{position:absolute;z-index:2;inset:auto 12px 8px;margin:0;padding:5px 9px;min-height:0;border-radius:4px;background:#142327eb;color:#ffb1a2;font-size:12px;line-height:1.4;pointer-events:none}
.battlefield-stage #move-preview:empty{display:none}

/* Rolls sit directly below the banner; history controls open on demand. */
.arena>.journal{position:relative;padding:0;margin:0}
#log{cursor:pointer}
#log:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#dice-history-toggle{position:absolute;z-index:3;right:7px;top:5px;padding:0 6px;min-width:24px;border:0;background:#142327d9;color:var(--muted);font-size:12px}
#dice-history-menu{position:absolute;z-index:25;right:8px;top:7px;display:grid;gap:10px;width:min(260px,calc(100% - 16px));padding:14px;background:#21363b;border:1px solid #526970;border-radius:6px;box-shadow:0 6px 20px #0007;font-size:13px}
#dice-history-menu label{font-weight:650}
#dice-history-menu #dice-round{padding:8px;border:1px solid #526970;border-radius:4px;font-size:13px;letter-spacing:0;text-transform:none;width:100%}
#current-action{flex-shrink:0;border-top:1px solid #30464c;border-bottom:0;min-height:42px}
#current-action-time{padding:0;border:0;background:none;color:var(--muted)}

/* Matching tabletop marker molds: Surge on the left, wounds on the right. */
.stat-shield-surge{left:-4px;right:auto;color:#ffe697}
.stat-shield-surge.is-empty{color:#c8bf9e;min-width:44px}

/* Keep the Surge count crisp against the yellow marker face. */
.stat-shield-surge svg text{text-shadow:none;paint-order:stroke fill;stroke:#674a0e;stroke-width:1.4;stroke-linejoin:round}

/* Action text and active-army labels must never resize the battlefield. */
@media(min-width:1101px){
 #match-banner{height:108px;min-height:108px;max-height:108px}
 .match-army{min-height:0;overflow:hidden;padding-top:12px}
 .match-army>span{max-height:56px;overflow-y:auto}
 #current-action{height:52px;min-height:52px;max-height:52px}
 #current-action-text{max-height:36px;overflow-y:auto;overscroll-behavior:contain}
 #message{height:48px;min-height:48px;max-height:48px;overscroll-behavior:contain}
 .prototype-note{height:30px;min-height:30px;max-height:30px;overflow-y:auto}
}

/* Compact unit headers identify the army through its established banner colors. */
#active-unit-panel .inspection-unit-heading,#inspection-panel .inspection-unit-heading{text-align:center;padding:12px 14px;border-bottom:1px solid #ffffff24}
#active-unit-panel .inspection-unit-heading[data-army="0"],#inspection-panel .inspection-unit-heading[data-army="0"]{background:linear-gradient(110deg,#244f64,#18343f);color:#b9e8fc}
#active-unit-panel .inspection-unit-heading[data-army="1"],#inspection-panel .inspection-unit-heading[data-army="1"]{background:linear-gradient(250deg,#653e39,#3d2a2d);color:#ffd3ca}

/* Paint keyboard/click focus above all terrain rather than inside each tile group. */
#board g[role="button"]:focus{outline:none}

.card-enlarge{display:block;width:100%;padding:0;border:0;background:transparent;border-radius:0;cursor:zoom-in}
.card-viewer{padding:48px 12px 12px;width:max-content;max-width:96vw;max-height:96dvh;border:1px solid #52676d;border-radius:12px;background:#142328;overflow:auto;box-shadow:0 18px 70px #0009}
.card-viewer::backdrop{background:rgb(3 10 13 / .84)}
.card-viewer img{margin:0;cursor:default;display:block;width:auto;height:calc(96dvh - 62px);max-width:calc(96vw - 26px);max-height:calc(96dvh - 62px);object-fit:contain}
.card-viewer-close{position:absolute;right:10px;top:7px;padding:4px 12px;background:#20363c;color:#ecf1ef;border:1px solid #52676d;border-radius:6px}

.movement-range{fill:#d5f6a0;fill-opacity:.2;stroke:none;pointer-events:none}
#board g:hover>.movement-range,#board g:focus>.movement-range{fill-opacity:.3;stroke:#d5f6a0;stroke-width:2.8;stroke-opacity:1}

.map-hints{position:absolute;z-index:2;left:12px;right:12px;bottom:8px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.map-hints #terrain-panel{margin:0;padding:7px 10px;max-width:290px;background:#142327eb;border:1px solid #40565c;border-radius:5px;font-size:12px;line-height:1.4}
.map-hints #terrain-content p{margin:3px 0 0;font-size:11px}
.map-hints #terrain-content .terrain-swatch{width:12px;height:14px;margin-right:5px}
.battlefield-stage .map-hints #move-preview{position:static;flex:0 1 auto;max-width:50%;margin:0}
@media(max-width:720px){.map-hints{flex-wrap:wrap}.battlefield-stage .map-hints #move-preview{max-width:100%}}

.map-hints #terrain-panel.is-pinned{pointer-events:auto;border-color:#7d959b;max-height:180px;overflow:auto}
.terrain-close{float:right;margin:-3px -4px 0 10px;padding:0 6px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1.2}
.terrain-rules{margin-top:6px}.terrain-rules summary{cursor:pointer;color:#c8e896}

.match-army[role="button"]{cursor:pointer}.match-army[role="button"]:focus-visible{outline:2px solid #c8e896;outline-offset:-5px}
.left.army-overview-mode>:not(.army-overview),.right.army-overview-mode>:not(.army-overview){display:none!important}
.army-overview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.army-overview-heading h2{font:700 20px/1.2 system-ui;margin:0}.army-overview-heading button{padding:2px 9px;font-size:22px}
.team-unit{overflow:hidden;border:1px solid #4d656c;border-radius:8px;background:#192b30;margin:0 0 14px}
.team-unit-photo{position:relative;display:block;width:100%;height:115px;padding:0;border:0;border-radius:0;overflow:hidden;background:#203a45;color:#fff;text-align:center}
.team-unit-photo svg{display:block;width:100%;height:100%}.team-unit-photo strong{position:absolute;inset:auto 0 0;padding:8px;font-size:14px;line-height:1.25;background:#244f64ed;color:#b9e8fc}
.army-overview[data-army="1"] .team-unit-photo strong{background:#653e39ed;color:#ffd3ca}
.team-unit-wounds{padding:8px 12px}.team-unit-wounds p{margin:4px 0;font-size:12px}.team-unit-wounds .is-destroyed{color:#eea699}
.team-order-markers{display:flex;gap:7px;flex-wrap:wrap;padding:0 12px 12px}.team-order-marker{display:block;flex:0 0 40px;width:40px;height:52px;overflow:visible;filter:drop-shadow(0 2px 1px #0005)}

#deployment { margin: 16px 0; padding: 12px; background: #1c3036; border: 1px solid #486269; border-radius: 8px; }
#deployment select { width: 100%; margin-bottom: 8px; }
.board-bottom .pair button{flex:0 0 auto;white-space:nowrap}
#terrain-depth{font-size:12px;color:var(--muted)}
#terrain-depth[aria-pressed="true"]{color:#d5e6bf;border-color:#63745d}

#terrain-style{font-size:12px;color:var(--muted)}
#terrain-style[data-style="tabletop"],#terrain-style[data-style="realistic"]{color:#e5d7b5;border-color:#8b7655}
#board g:hover>.terrain-texture{filter:brightness(1.1)}

#hex-outlines,#friendly-target-toggle{font-size:12px;color:var(--muted)}
#hex-outlines[aria-pressed="true"],#friendly-target-toggle[aria-pressed="true"]{color:#d5e6bf;border-color:#63745d}
#board.hide-hex-outlines .hex:not(.action-hex):not(.attack-range):not(.selected-target){stroke:none!important}
.board-bottom .pair{flex-wrap:wrap}

#movement-range-toggle{font-size:12px;color:var(--muted)}
#movement-range-toggle[aria-pressed="true"]{color:#d5e6bf;border-color:#63745d}
.route-destination{fill:#d5e6a6;fill-opacity:.12;stroke:#d5e6a6;stroke-width:2.5;pointer-events:none}
.battlefield-stage #move-preview.unreachable{color:var(--muted)}

.map-pan{display:inline-flex;gap:4px;align-items:center}.map-pan button{min-width:30px}

.setup-roster{margin:12px 0}.setup-roster-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #30474d}.setup-roster-row .roster-name{padding:4px 0;border:0;background:none;text-align:left;font-size:13px}.setup-roster-row>button:last-child{padding:4px 10px}.army-search-results{max-height:250px;overflow:auto;border:1px solid #49616a;border-radius:7px;padding:5px;margin:5px 0 12px}.army-search-results button{display:block;width:100%;text-align:left;margin:3px 0;font-size:12px}.army-generator{margin-top:12px;border-top:1px solid #30474d;padding-top:12px}.army-generator summary{cursor:pointer;color:#c5dda1;margin-bottom:8px}.army-generator label{display:grid;grid-template-columns:1fr 90px;align-items:center;gap:8px;margin:10px 0}.army-generator input{min-width:0;width:100%}

.sight-challenge-help{font-size:.88rem;line-height:1.5;border-left:3px solid #c8b384;padding:10px 12px;background:#243336;border-radius:4px;color:#e3e4d8}

:is(#action-popover,#unit-ability-popover).sight-prompt{position:fixed;z-index:1000;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:300px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;padding:16px;background:#17292ef5;border:1px solid #c8b384;border-radius:10px;box-shadow:0 10px 30px #0008;color:#ebf0ec;font-size:14px;line-height:1.45}
:is(#action-popover,#unit-ability-popover).sight-prompt[hidden]{display:none}
:is(#action-popover,#unit-ability-popover).sight-prompt p{margin:0;color:#bdcccd}
:is(#action-popover,#unit-ability-popover).sight-prompt button{width:100%;white-space:normal;text-align:center}
:is(#action-popover,#unit-ability-popover).sight-prompt strong{color:#e4d5af}

.sight-challenge-button{cursor:pointer;outline:none}.sight-challenge-button:hover rect,.sight-challenge-button:focus rect{fill:#59615a;stroke:#fff0bc;stroke-width:2}.sight-challenge-button:active rect{fill:#24353b}

/* Clip the shield artwork, leaving wound and Surge markers above its rim. */
.unit-stat-shield{clip-path:none;background:none;isolation:isolate}
.unit-stat-shield::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#b2b1a3 0%,#555b55 22%,#303530 50%,#999b8b 78%,#3e433c);clip-path:polygon(50% 0,100% 14%,100% 85%,50% 100%,0 85%,0 14%);pointer-events:none}
.unit-stat-shield>.stat-shield-marker-overlay{position:absolute;top:4px;left:14px;right:14px;z-index:2;pointer-events:none}

.dice-attacker-name{color:#f3b4ae}.dice-defender-name{color:#a8d8f6}


/* Special-power rolls share the combat die tray and name treatment. */

#test-instructions{margin:0 0 18px;padding:14px;background:#192c31;border:1px solid #829e75;border-radius:10px}#test-instructions summary{cursor:pointer;color:#c8e896;font-weight:700}#test-instructions h2{font-size:17px;margin:12px 0 6px}#test-instructions p{font-size:14px;line-height:1.55;margin:0 0 12px;color:#b6c8c9}#test-instructions a{font-size:13px;color:#c8e896}

#restart-test{width:100%;margin:0 0 12px;border-color:#829e75;color:#c8e896;font-weight:700}

.dice-plus{align-self:center;font-size:22px;font-weight:700;color:#e1e8e2;padding:0 3px}

.unit-inspect-button{cursor:pointer;pointer-events:all}.unit-inspect-button circle{fill:#162c33;stroke:#9ed4ed;stroke-width:1.5}.unit-inspect-button text{fill:#d9f0fa;font:bold 16px Georgia,serif;pointer-events:none}.unit-inspect-button:hover circle,.unit-inspect-button:focus-visible circle{fill:#365b68;stroke:#fff}.inspection-pin-controls{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#243b41;color:#c8e896;font-size:12px}.inspection-pin-controls button{padding:0 7px;font-size:21px;background:transparent;border:0}

.unit-inspect-button{opacity:0;pointer-events:none}.unit-inspect-button.is-hovered,.unit-inspect-button:hover,.unit-inspect-button:focus-visible{opacity:1;pointer-events:all}

.inspection-pin-controls{justify-content:flex-end;padding:4px 8px;background:transparent}.inspection-pin-controls button{display:grid;place-items:center;padding:4px;color:#c8e896;border-radius:5px}.inspection-pin-controls button:hover{background:#31454a}.inspection-pin-controls svg{display:block}

#inspection-content .inspection-unit-heading{position:relative;left:auto;right:auto;padding-inline:48px}#inspection-content .inspection-unit-heading .inspection-pin-controls{position:absolute;right:7px;top:50%;transform:translateY(-50%);padding:0}

/* Optional army layout; the original panels retain their original markup. */
body:not(.army-panel-layout) .dedicated-army{display:none}
.army-panel-layout .left,.army-panel-layout .right{display:block}
.army-panel-layout .army-overview,.army-panel-layout #inspection-panel,.army-panel-layout #card,.army-panel-layout #active-unit-panel,.army-panel-layout #active-card{display:none!important}
.army-panel-layout .army-overview-mode>.dedicated-army,.army-panel-layout .army-overview-mode>#battle-controls{display:block!important}


#friendly-target-toggle[aria-pressed="true"]{font-size:14px;font-weight:700;background:#653e39;border-color:#ff9d91;color:#fff3df}
#friendly-target-toggle[aria-pressed="true"]:hover{background:#784940}

/* Compact, board-scaled command menu with a header and inset buttons. */
:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt{box-sizing:border-box;width:204px;padding:6px;gap:4px;background:#122126;border:1.5px solid var(--attack-accent);border-radius:6px;box-shadow:none;overflow:hidden;font-size:13px;line-height:1.2}
:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt button{box-sizing:border-box;min-height:28px;margin:0;padding:5px 7px;border:1px solid #577078;border-radius:4px;background:#293e44;color:#fff;font-size:13px;font-weight:600;line-height:1.2}
:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt button.primary{font-size:14px;font-weight:700}
:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt button:hover,:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt button:focus-visible{background:#43585d;border-color:#fff0bc}
:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt button:focus-visible{outline:2px solid #fff0bc;outline-offset:-3px}
:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt .command-pick-step{margin:-6px -6px 2px;padding:7px 10px;border:0;border-bottom:1px solid #496067;border-radius:0;background:#1c3037;color:#e4d5af;text-align:left;font-size:15px;font-weight:700;line-height:1.2}
:is(#command-menu-link,#unit-ability-menu-link){position:fixed;inset:0;z-index:999;pointer-events:none;overflow:visible}

/* Link a hovered battlefield target to its option in the ability picker. */
:is(#action-popover,#unit-ability-popover) button.is-token-hovered{background:#43585d;border-color:#fff0bc;outline:2px solid #fff0bc;outline-offset:-3px}

/* Long multi-target and directional menus remain scrollable. */
:is(#action-popover,#unit-ability-popover,#network-menu).command-prompt{overflow-y:auto;max-height:65vh}

/* Action hints: brief timing/consequence text shared by self and target abilities. */
.action-hint-tooltip{position:fixed;z-index:1200;width:max-content;max-width:calc(100vw - 16px);box-sizing:border-box;padding:3px 5px;border:1px solid #56615b;border-radius:0;background:#222c28;color:#edf0eb;box-shadow:0 1px 3px #0005;font-size:11px;font-weight:500;line-height:1.2;pointer-events:none}

/* Planning extends the original portrait banners; expansion stays independent. */
/* Online commands share the established battlefield, not a second map renderer. */
.network-ability-menu{position:absolute;z-index:25;max-width:min(300px,95%);max-height:280px;overflow:auto;padding:7px;background:#132b30;border:2px solid var(--attack-accent);border-radius:6px;font:600 13px system-ui;box-shadow:0 4px 12px #0006}.network-ability-menu button{display:block;width:100%;margin:4px 0;padding:7px;font-size:13px}.network-ability-menu strong{display:block;padding:4px}.network-controls{display:flex;flex-wrap:wrap;gap:6px}.network-controls button{flex:1 1 100%;font-size:13px}#connection-status{font-size:11px;color:#b6d8c7}

.deployment-tray{width:100%;box-sizing:border-box;margin:10px 0;padding:12px;border:1px solid #49636b;border-radius:8px;background:#102126}
.deployment-tray h3{margin:0;font-size:15px;color:#e4eeef}.deployment-tray-count{margin:5px 0 10px;color:#a9bec3;font-size:12px}
.deployment-tray-tokens{display:flex;flex-wrap:wrap;gap:8px}.deployment-tray .deployment-tray-token{flex:0 1 88px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px;width:88px;background:transparent;border:1px solid transparent;border-radius:7px;color:#dce9ed;font-size:11px;line-height:1.25}
.deployment-tray-token svg{width:56px;height:56px;flex-shrink:0}.deployment-tray-token span{overflow-wrap:anywhere}.deployment-tray-token[aria-pressed="true"]{background:#29414a;border-color:#cddb9d}.deployment-tray-token:not(:disabled):hover{background:#243941;border-color:#70c6ef}.deployment-tray-token:focus-visible{outline:2px solid #cddb9d;outline-offset:2px}.deployment-tray-token:disabled{opacity:1;cursor:default}
/* Private order placement stays accessible in the original portrait layout. */
body.network-planning-mode:not(.army-panel-layout) .dedicated-army:not([hidden]){display:block}

.result-banner{position:fixed;z-index:11;top:50%;left:50%;translate:-50% -50%;box-sizing:border-box;width:min(380px,calc(100% - 32px));padding:24px;display:grid;gap:12px;text-align:center;border:2px solid #70c6ef;border-radius:12px;background:linear-gradient(135deg,#152b35fa,#102027fa);box-shadow:0 12px 40px #0009;color:#edf5f6}
.result-banner[hidden]{display:none}.result-banner strong{font-size:36px;color:#70c6ef}.result-banner p{margin:0}.result-banner small{color:#b5c6cb;font-size:12px}.result-banner button{padding:12px;font-weight:700}.result-banner[data-army="1"]{border-color:#ed9685}.result-banner[data-army="1"] strong{color:#ed9685}.result-banner[data-army="draw"]{border-color:#d4ccaa}.result-banner[data-army="draw"] strong{color:#d4ccaa}