/* WORLD ORDER v038 (interface 0.38.0)
   - Fronts: the Power of each front as a tug-of-war bar between the two totals (opponent left, you right); the stronger
     side fills more of it and the marker slides to the new balance.
   - Right rail, leaner: the round sequence is a thin line, the Preparation note is gone (Your action already says it),
     the action log starts as a one-line strip, and Your action / PASS are larger.
   - Empty positions are engraved into the table: a sunken socket with the front emblem pressed into it, no EMPTY text.
   - When the priority comes back to you, a short neon light runs along the top bar and the phase lights up.
   - Leader HUD, no box: the leader stands behind a command plinth, under a banner hung from a rod, with a light behind.
     The country and the name sit over the lower left corner of the portrait; the plinth carries only Sovereignty (numeral
     and a 30-notch gauge) and Budget (numeral and neon bars as wide as the HUD, one per point of capacity: 3/3 and 10/10
     take the same width); the special is a seal on the plinth corner. Neon green and neon red a shade deeper.
     Each part is a cosmetic slot (ui/cosmetics.js): plinth, banner, aura, gauge, seal and budget.
   - Rails: the left rail is wider for the HUD, the right rail narrower. */

/* ---------------------------------------------------------------- fronts: tug-of-war */
.lane .formation-power{align-items:center;gap:7px}
.lane .formation-power small{display:none}
.tug{position:relative;display:block;flex:none;width:clamp(48px,calc(7vw - 30px),128px);height:8px;background:#050b10;
  box-shadow:inset 0 1px 2px #000,0 0 0 1px #ffffff17}
.tug>i{position:absolute;top:0;bottom:0;display:block}
.tug-e{left:0;width:var(--tug);background:linear-gradient(180deg,#f19a8a,#c0493c 58%,#7c241c)}
.tug-p{right:0;width:calc(100% - var(--tug));background:linear-gradient(180deg,#ffe8ad,#dcb05a 58%,#8c6526)}
.tug-mark{left:var(--tug);top:-4px!important;bottom:-4px!important;width:2px;margin-left:-1px;background:#fffbea;box-shadow:0 0 5px #fff,0 0 12px var(--front-color,#f3d48e)}
.tug[data-idle]>i:not(.tug-mark){opacity:.25}
.tug[data-idle] .tug-mark{opacity:.45;box-shadow:none}
html:not(.wo-reduced-motion) .tug>i{transition:width .6s cubic-bezier(.3,.7,.2,1),left .6s cubic-bezier(.3,.7,.2,1)}

/* ---------------------------------------------------------------- right rail */
/* the round sequence as one thin line; the current step is named at the end of the ROUND SEQUENCE label */
.combat-sequence-steps{display:flex!important;gap:3px;padding:7px 0 0;position:relative}
.combat-sequence-steps[hidden]{display:none!important}
.combat-sequence-steps li{flex:1;height:4px;min-width:0;padding:0;border:0!important;background:#22333a;font-size:0;color:#0000}
.combat-sequence-steps li .combat-step-marker{display:none}
.combat-sequence-steps li>span:last-child{position:absolute;right:0;top:-12px;display:none;font:700 10px/1 var(--wo-title);letter-spacing:.16em;text-transform:uppercase;color:#f3ddaa}
.combat-sequence-steps li[data-status="active"]>span:last-child{display:block}
.combat-sequence-steps li[data-status="done"]{background:#7f9c86}
.combat-sequence-steps li[data-status="active"]{background:#f0cf86;box-shadow:0 0 8px #f2b84b99}
.combat-sequence-steps li[data-status="skipped"]{background:#22333a;opacity:.5}
.combat-steps-context{margin-top:9px}
.combat-sequence[data-stage="preparation"] #combat-sequence-note{display:none}
/* the log as a strip with the latest entry until it is opened */
.has-combat-presentation.history-collapsed .chronicle-panel{display:flex;flex:0 0 auto;min-height:0;opacity:1;pointer-events:auto;padding:8px 12px;cursor:pointer}
.has-combat-presentation.history-collapsed .chronicle-panel ol{flex:none;padding:5px 0 0;overflow:hidden;pointer-events:none}
.has-combat-presentation.history-collapsed .chronicle-panel .log-item:not(:last-child){display:none}
.has-combat-presentation.history-collapsed .chronicle-panel .log-item:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:0}
.has-combat-presentation.history-collapsed .chronicle-panel .log-item:last-child small{display:none}
/* with the log closed, the panels keep their own height and Your action stays at the bottom of the rail */
.has-combat-presentation.history-collapsed .combat-sequence{flex:0 1 auto;min-height:0}
.has-combat-presentation.history-collapsed .priority-panel{margin-top:auto}
.chronicle-panel .rail-heading{cursor:pointer}
.chronicle-panel .rail-heading .eyebrow::after{content:"  ▾";color:#8fa2a8}
.history-collapsed .chronicle-panel .rail-heading .eyebrow::after{content:"  ▸ OPEN"}
.has-combat-presentation.history-collapsed .chronicle-panel:hover{border-color:#cbb07a88}
/* Your action, larger */
.priority-panel{border-color:#d4aa5b8c;box-shadow:0 14px 28px #0006,inset 0 1px 0 #ffffff12}
.priority-panel #action-hint{font-size:15px;line-height:1.45;color:#eef0e6}
.priority-panel #pass-button{height:54px;font-size:15px;letter-spacing:.24em}
.priority-panel #pass-button svg{width:18px;height:18px}
@media (max-height:820px){.priority-panel #action-hint{font-size:13.5px}.priority-panel #pass-button{height:46px;font-size:13.5px}}

/* ---------------------------------------------------------------- empty positions engraved into the table */
.empty-slot{position:relative;border:0;background:radial-gradient(ellipse 70% 60% at 50% 45%,#0b161d66,#03080cb8 82%),linear-gradient(180deg,#0000006b,#00000026 35%,#ffffff0b);
  box-shadow:inset 0 3px 9px #000000e6,inset 0 -1px 0 #ffffff1f,inset 0 0 0 1px #000000a6,0 1px 0 #ffffff17}
.empty-slot::before{content:"";position:absolute;inset:6%;border-radius:4px;pointer-events:none;border:1px solid #00000059;box-shadow:inset 0 1px 0 #000000a6,0 1px 0 #ffffff12}
.empty-slot span{display:none}
.empty-slot svg.ico-front{width:30%;height:auto;opacity:.5;filter:grayscale(1) brightness(.4) drop-shadow(0 1px 0 #ffffff2e) drop-shadow(0 -1px 0 #000000d9)}
.field-slot.drop-valid .empty-slot,.field-slot.target-valid .empty-slot{background:#f2c25a14}

/* ---------------------------------------------------------------- your turn: a light along the top bar */
.topbar{position:relative}
.turn-sweep{position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:5;pointer-events:none;opacity:0;overflow:hidden}
.turn-sweep::before{content:"";position:absolute;top:0;bottom:0;left:0;width:24%;transform:translateX(-100%);
  background:linear-gradient(90deg,#0000,#fff59a 38%,#fffef4 50%,#fff59a 62%,#0000);box-shadow:0 0 10px #ffd400,0 0 24px #ffb800}
.topbar.is-your-turn .turn-sweep{overflow:visible;animation:wo-turn-line 1.6s ease-out both}
.topbar.is-your-turn .turn-sweep::before{animation:wo-turn-sweep 1.15s cubic-bezier(.45,.05,.3,1) both}
.topbar.is-your-turn #phase-name{animation:wo-turn-phase 1.6s ease-out both}
@keyframes wo-turn-line{0%{opacity:0}8%,78%{opacity:1}100%{opacity:0}}
@keyframes wo-turn-sweep{from{transform:translateX(-100%)}to{transform:translateX(420%)}}
@keyframes wo-turn-phase{0%,100%{text-shadow:none}18%,62%{color:#fff59a;text-shadow:0 0 6px #ffe94a,0 0 16px #ffd400,0 0 30px #ffb800b3}}
html.wo-reduced-motion .topbar.is-your-turn .turn-sweep{animation:none;opacity:1;background:#ffe56b;box-shadow:0 0 10px #ffd400}
html.wo-reduced-motion .topbar.is-your-turn .turn-sweep::before{display:none}
html.wo-reduced-motion .topbar.is-your-turn #phase-name{animation:none;color:#fff59a;text-shadow:0 0 8px #ffd400}

/* ---------------------------------------------------------------- rails */
.battle-app{--rail-left:clamp(180px,13vw,250px);--rail-right:clamp(220px,13vw,250px)}
@media (max-width:1450px){.battle-app{--rail-left:180px;--rail-right:224px}}

/* ---------------------------------------------------------------- leader HUD: the command plinth */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.leaders-rail{gap:clamp(6px,1.2vh,14px)}
.leaders-rail>.leader-panel{flex:1 1 0;min-height:0;margin:0;padding:0!important;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;container-type:size}
.lh.cmd{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:0;isolation:isolate;
  --hi:#f0d08e;--m1:#a17c43;--m2:#624622;--m3:#2c1e0d;--ink:#f8e7bd;--dim:#c8a873;--well:#0000008c;
  --bud:#16df6d;--bud-glow:#0cc054;--bud-text:#37e683;--bud-off:#0a1f14}
.leader-panel.player .lh.cmd{justify-content:flex-end}
/* plinth materials */
.lh.cmd[data-plinth=steel]{--hi:#e3edf2;--m1:#8f9da6;--m2:#4a565e;--m3:#1c2328;--ink:#f1f6f8;--dim:#a8b7bf}
.lh.cmd[data-plinth=obsidian]{--hi:#b9a2ff;--m1:#3d3549;--m2:#1d1926;--m3:#09080d;--ink:#ece4ff;--dim:#a194d0}
.lh.cmd[data-plinth=marble]{--hi:#fff;--m1:#efe9de;--m2:#d2c9b8;--m3:#a39987;--ink:#2b241a;--dim:#6a5e4c;--well:#00000059;--bud-text:#07763a;--bud-off:#00000026}
/* Budget colours */
.lh.cmd[data-budget=amber]{--bud:#ffc23d;--bud-glow:#ff9d00;--bud-text:#ffd36b;--bud-off:#2a1d06}
.lh.cmd[data-budget=ice]{--bud:#7fe8ff;--bud-glow:#2ccfff;--bud-text:#a8f0ff;--bud-off:#06212a}
.lh.cmd[data-plinth=marble][data-budget=amber]{--bud-text:#9a5b00}
.lh.cmd[data-plinth=marble][data-budget=ice]{--bud-text:#006f8c}

/* the stage above the plinth: rod, banner, light, bust and seal */
.lh.cmd .lh-id{flex:1 1 0;min-height:0;max-height:88cqw;height:auto;position:relative;display:block;margin:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.lh.cmd .lh-id::before{content:none}
.cmd-rod{position:absolute;left:7%;right:7%;top:1.5%;height:max(4px,1.7cqw);z-index:2;background:linear-gradient(180deg,var(--hi),var(--m1) 45%,var(--m3));box-shadow:0 2px 3px #0009}
.cmd-rod::before,.cmd-rod::after{content:"";position:absolute;top:50%;width:max(8px,3.6cqw);height:max(8px,3.6cqw);border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 32%,var(--hi),var(--m1) 52%,var(--m3))}
.cmd-rod::before{left:calc(max(8px,3.6cqw) / -2)}
.cmd-rod::after{right:calc(max(8px,3.6cqw) / -2)}
.cmd-banner{position:absolute;left:12%;right:12%;top:2.5%;bottom:0;z-index:1;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,50% 90%,0 100%);
  background:linear-gradient(90deg,var(--c2) 0 5%,var(--c3) 5% 8.5%,var(--c1) 8.5% 91.5%,var(--c3) 91.5% 95%,var(--c2) 95%)}
.cmd-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,#0000 0 8%,#00000052 13%,#ffffff1c 18%,#0000 23%),linear-gradient(180deg,#0000 30%,#000000b8),linear-gradient(180deg,#e2bd70 0 3px,#0000 3px)}
.lh.cmd[data-nation=TR]{--c1:#1b2d5e;--c2:#b4233a;--c3:#efe9dd}
.lh.cmd[data-nation=XJ]{--c1:#931a17;--c2:#e2b43f;--c3:#5e0f0c}
.lh.cmd[data-nation=RU]{--c1:#22408a;--c2:#c8202b;--c3:#f1f1ee}
.lh.cmd[data-nation=IL]{--c1:#e8edf4;--c2:#1f50a8;--c3:#e8edf4}
.lh.cmd[data-nation=BR]{--c1:#1d7438;--c2:#f2c230;--c3:#1b3f8f}
/* banner: national flag (hung flat from the rod) */
.lh.cmd[data-banner=flag] .cmd-banner{bottom:auto;clip-path:none;background:none}
.lh.cmd .cmd-banner>.cmd-flag{display:block;width:100%;height:auto;border-radius:0;box-shadow:none;vertical-align:top;filter:brightness(.85) saturate(.92)}
/* banner: war standard */
.lh.cmd[data-banner=crimson] .cmd-banner{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d9b36a' stroke-width='2.4'%3E%3Ccircle cx='50' cy='38' r='19'/%3E%3Cpath d='M50 22l4.2 9 9.8 1.2-7.2 6.8 1.9 9.8L50 44l-8.7 4.8 1.9-9.8-7.2-6.8 9.8-1.2z' fill='%23d9b36a'/%3E%3C/g%3E%3C/svg%3E") 50% 14%/58% auto no-repeat,linear-gradient(180deg,#7a1a1f,#4a0e12)}
.lh.cmd[data-banner=none] :is(.cmd-banner,.cmd-rod){display:none}
/* light behind the leader */
.cmd-aura{position:absolute;left:-10%;right:-10%;top:2.5%;height:112%;z-index:2;pointer-events:none;background:radial-gradient(ellipse 44% 50% at 50% 42%,#ffd99a66,#ffb85a24 56%,#0000 74%)}
.lh.cmd[data-aura=ember] .cmd-aura{background:radial-gradient(circle,#ffb24d 0 1.2px,#0000 2px) 0 0/21px 37px,radial-gradient(circle,#ff7a2e 0 1px,#0000 1.8px) 9px 14px/27px 29px,
  radial-gradient(ellipse 44% 50% at 50% 46%,#ff8a3d55,#ff5a1f1f 56%,#0000 74%);
  -webkit-mask:radial-gradient(ellipse 50% 52% at 50% 50%,#000 40%,#0000 75%);mask:radial-gradient(ellipse 50% 52% at 50% 50%,#000 40%,#0000 75%);animation:cmd-ember 4s linear infinite}
@keyframes cmd-ember{to{background-position:0 -74px,9px -44px,0 0}}
.lh.cmd[data-aura=scan] .cmd-aura{background:linear-gradient(180deg,#0000 0 47%,#58e6ff66 49.5%,#c9f8ff 50%,#58e6ff66 50.5%,#0000 53%) 0 0/100% 220%,
  radial-gradient(ellipse 44% 50% at 50% 42%,#3fd0ff40,#0000 72%);animation:cmd-scan 2.8s linear infinite}
@keyframes cmd-scan{from{background-position:0 120%,0 0}to{background-position:0 -20%,0 0}}
:is(html.wo-reduced-motion,.battle-app.reduced-motion) .lh.cmd .cmd-aura{animation:none}
/* the leader: a cut-out bust behind the plinth, no frame */
.lh.cmd .lh-id .portrait-wrap{position:absolute;inset:0;width:auto;height:auto;margin:0;border:0;border-radius:0;background:none;overflow:visible;z-index:3}
.lh.cmd .lh-id .portrait-wrap::before,.lh.cmd .lh-id .portrait-wrap::after{content:none}
.lh.cmd .lh-id .portrait-wrap img{position:absolute;inset:auto auto -17.5% 50%;width:auto;height:129%;max-width:none;transform:translateX(-50%);object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 8px #000c)}

/* the special: a seal on the plinth corner, with its status on a ribbon and its cost */
.lh.cmd .special-button.cmd-seal{position:absolute;right:max(7px,1.5cqw);bottom:-3cqw;z-index:6;width:clamp(32px,22cqw,60px);height:clamp(32px,22cqw,60px);margin:0;padding:0;
  display:block;gap:0;border:0;border-radius:50%;cursor:pointer;color:inherit;opacity:1;
  background:radial-gradient(circle at 38% 30%,#fff1c4,#e3b558 36%,#9b6e23 68%,#5b3e13);
  box-shadow:0 4px 9px #000d,inset 0 0 0 max(2px,.9cqw) #00000038,inset 0 0 0 max(3px,1.6cqw) #ffffff33}
.lh.cmd[data-seal=silver] .cmd-seal{background:radial-gradient(circle at 38% 30%,#fff,#c9d3da 36%,#7f8b94 68%,#3d464d)}
.lh.cmd[data-seal=crimson] .cmd-seal{background:radial-gradient(circle at 50% 50%,#c4313c 0 52%,#0000 53%),radial-gradient(circle at 38% 30%,#fff1c4,#e3b558 36%,#9b6e23 68%,#5b3e13)}
.lh.cmd .cmd-seal::before{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 2px #ffe7a0,0 0 18px 5px #f2b84bb3}
.lh.cmd .cmd-seal[data-state=ready]::before{animation:cmd-seal-glow 1.8s ease-in-out infinite}
@keyframes cmd-seal-glow{0%,100%{opacity:.3}50%{opacity:1}}
:is(html.wo-reduced-motion,.battle-app.reduced-motion) .lh.cmd .cmd-seal[data-state=ready]::before{animation:none;opacity:.85}
.lh.cmd .cmd-seal[data-state=wait]{filter:grayscale(.75) brightness(.6)}
.lh.cmd .cmd-seal[aria-disabled="true"]{cursor:default}
.lh.cmd .cmd-seal:not([aria-disabled="true"]):hover{filter:brightness(1.12)}
.lh.cmd .cmd-seal:focus-visible{outline:2px solid #ffe7a0;outline-offset:3px}
/* a medal: raised rim, a sunken field, the special's glyph struck into it (bold, centred, the same size for every leader) */
.lh.cmd .cmd-seal::after{content:"";position:absolute;inset:13%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 42% 34%,#f6d993,#dcaa4c 52%,#ad7b2c);box-shadow:inset 0 2px 3px #0000006b,inset 0 -1px 1px #ffffff52,0 1px 0 #fff2c399,0 -1px 0 #00000040}
.lh.cmd[data-seal=silver] .cmd-seal::after{background:radial-gradient(circle at 42% 34%,#f7fafc,#c6d0d7 52%,#8a959d)}
.lh.cmd[data-seal=crimson] .cmd-seal::after{background:radial-gradient(circle at 42% 34%,#e2545f,#b72535 55%,#7e1421)}
.lh.cmd .cmd-glyph{position:absolute;z-index:1;left:22%;top:22%;width:56%;height:56%;margin:0;overflow:visible;color:#3d2807;filter:drop-shadow(0 1px 0 #fff1c2c7)}
.lh.cmd[data-seal=silver] .cmd-glyph{color:#2b3238;filter:drop-shadow(0 1px 0 #ffffffd9)}
.lh.cmd[data-seal=crimson] .cmd-glyph{color:#f8dc8e;filter:drop-shadow(0 1px 0 #4a0710)}
.lh.cmd .cmd-seal .special-cost{position:absolute;right:-6%;top:-6%;width:max(15px,7.6cqw);height:max(15px,7.6cqw);margin:0;border-radius:50%;display:grid;place-items:center;
  background:#0c1820;border:1px solid var(--hi);color:#fff4d6;font:700 max(9px,4.6cqw)/1 var(--wo-title)}
.lh.cmd .cmd-seal .special-info{position:absolute;left:50%;top:calc(100% - max(5px,2cqw));transform:translateX(-50%);display:block;flex:none;gap:0;min-width:0;z-index:1}
.lh.cmd .cmd-seal .special-info small{display:block;padding:max(2px,.7cqw) max(6px,2.4cqw);white-space:nowrap;font:700 max(7px,3.1cqw)/1 var(--wo-title);letter-spacing:.12em;color:#f8e7bd;
  background:linear-gradient(180deg,#2a1d0b,#120c05);border:1px solid var(--hi);clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%)}
.lh.cmd .cmd-seal[data-state=ready] .special-info small{color:#fff3c6;background:linear-gradient(180deg,#5a3f12,#2a1c06)}

/* country and name over the lower left corner of the portrait, on a soft shade */
.lh.cmd .lh-id::after{content:"";position:absolute;inset:auto auto 0 -6%;width:84%;height:64%;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 100%,#04090cd1,#04090c8f 46%,#04090c00 100%)}
.lh.cmd .lh-who{position:absolute;inset:auto auto max(7px,3cqw) 6%;width:calc(94% - max(7px,1.5cqw) - clamp(32px,22cqw,60px) - 4%);z-index:5;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:max(3px,1.1cqw);padding:0;min-width:0;text-align:left;pointer-events:none}
.lh.cmd .lh-meta{display:flex;align-items:center;gap:max(4px,1.4cqw);max-width:100%;font:700 max(8px,3.6cqw)/1 var(--wo-title);letter-spacing:.18em;text-transform:uppercase;
  color:#ecdfc3;text-shadow:0 1px 2px #000,0 0 6px #000}
.lh.cmd .lh-meta .lh-flag{width:max(13px,5.6cqw);height:auto;flex:none;box-shadow:0 0 0 1px #f2e3bf99,0 1px 3px #000}
.lh.cmd .lh-meta b{margin:0;padding:0;background:none;color:#f3c968;letter-spacing:.16em;font-weight:700}
.lh.cmd .lh-meta b::before{content:"· ";color:#cdbb95}
.lh.cmd .leader-name{width:100%;margin:0;padding:0;text-align:left;font:700 clamp(15px,min(11.4cqw,9.6cqh),31px)/.9 var(--wo-title);letter-spacing:.03em;text-transform:uppercase;
  color:#fff4dc;text-shadow:0 2px 0 #000,0 0 3px #000,0 0 12px #000c}
.lh.cmd .leader-name button{display:block;width:100%;white-space:nowrap;overflow:visible;text-align:left;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;pointer-events:auto}
.lh.cmd .leader-name :is(.ln-first,.ln-last){display:block;width:max-content}
.lh.cmd .leader-name .ln-first{font-size:.5em;letter-spacing:.16em;line-height:1;color:#eadbbb;margin-bottom:.16em}
.lh.cmd .leader-name button:hover{color:#fff;text-shadow:0 2px 0 #000,0 0 3px #000,0 0 14px #f3c968a6}
.lh.cmd .cmd-title{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 max(7px,3.1cqw)/1 var(--wo-title);letter-spacing:.2em;text-transform:uppercase;
  color:#f3c968;text-shadow:0 1px 2px #000,0 0 6px #000}

/* the plinth: Sovereignty and Budget only */
.lh.cmd .cmd-plinth{flex:none;position:relative;z-index:4;display:flex;flex-direction:column;gap:max(6px,1.6cqh);padding:max(11px,4.4cqw) 9% max(12px,4.8cqw);
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--hi) 0 2px,var(--m1) 4px,var(--m2) 38%,var(--m3) 100%)}
.lh.cmd .cmd-plinth::before{content:"";position:absolute;inset:max(4px,1.8cqw) 7% max(4px,1.8cqw);border:1px solid #0000005e;box-shadow:inset 0 0 0 1px #ffffff1c,0 0 0 1px #ffffff14;pointer-events:none}
.lh.cmd .cmd-plinth::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,#fff0 0 2px,#ffffff0a 2px 3px),
  radial-gradient(circle at 9% 12px,var(--hi) 0 1.5px,#0000 2.5px),radial-gradient(circle at 91% 12px,var(--hi) 0 1.5px,#0000 2.5px),
  radial-gradient(circle at 6% calc(100% - 9px),var(--hi) 0 1.5px,#0000 2.5px),radial-gradient(circle at 94% calc(100% - 9px),var(--hi) 0 1.5px,#0000 2.5px)}
.lh.cmd[data-plinth=marble] .cmd-plinth{background:linear-gradient(115deg,#0000 0 30%,#8b816f40 31%,#0000 33%,#0000 61%,#8b816f2e 62.5%,#0000 64%),
  linear-gradient(160deg,#0000 0 45%,#7a705f33 46%,#0000 47.5%),linear-gradient(180deg,#fff 0 2px,var(--m1) 4px,var(--m2) 60%,var(--m3) 100%)}
.lh.cmd[data-plinth=obsidian] .cmd-plinth{background:linear-gradient(180deg,var(--hi) 0 1.5px,var(--m1) 3px,var(--m2) 30%,var(--m3) 100%)}
.lh.cmd .cmd-plinth>*{position:relative;z-index:1}
/* both resources read the same way: numeral, the maximum over the label, then the bar */
.lh.cmd :is(.lh-sov,.lh-budget){display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 max(5px,2cqw);min-width:0}
.lh.cmd :is(.lh-sov,.lh-budget) .lh-value{order:1;position:relative;font:700 clamp(22px,min(17cqw,13cqh),46px)/.8 var(--wo-title);color:var(--ink);text-shadow:0 2px 0 #000a;font-variant-numeric:tabular-nums}
.lh.cmd :is(.lh-sov,.lh-budget) .lh-value small{position:absolute;left:calc(100% + max(5px,2cqw));top:-.04em;margin:0;font-size:max(10px,.34em);letter-spacing:.04em;color:var(--ink);text-shadow:none}
.lh.cmd :is(.lh-sov,.lh-budget) .lh-label{order:2;flex:1;display:flex;align-items:center;gap:max(3px,1.2cqw);align-self:flex-end;font:700 max(8px,3.6cqw)/1 var(--wo-title);letter-spacing:.16em;color:var(--dim);padding-bottom:.08em}
.lh.cmd .lh-sov .sov-forecast{order:3;align-self:center;font-size:max(9px,4cqw);border-radius:0}
.lh.cmd .lh-sov .resource-effect{order:4;align-self:center}
.lh.cmd .sovereignty-track{order:5;flex:0 0 100%;height:max(7px,3cqw);margin:max(5px,1.4cqh) 0 0;position:relative;border-radius:0;overflow:hidden;background:var(--well);box-shadow:inset 0 1px 2px #000,0 1px 0 #ffffff1a}
.lh.cmd .sovereignty-track::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 calc(100% / 30 - 1px),#000000b3 calc(100% / 30 - 1px) calc(100% / 30))}
.lh.cmd .sovereignty-fill{height:100%;background:linear-gradient(180deg,#fff0bf,#e0b45c 48%,#8b6427)}
.lh.cmd .sov-ghost{z-index:1}
.lh.cmd[data-gauge=neon] .sovereignty-fill{background:#ffe680;box-shadow:0 0 6px #ffd23d,0 0 14px #ffb800cc}
.lh.cmd .lh .revolt-track,.lh.cmd .revolt-track{order:6;flex:0 0 100%}
/* Budget: the numeral in the bar colour, then neon bars as wide as the HUD, one per point of capacity */
.lh.cmd .lh-budget .lh-value{font-size:clamp(19px,min(14cqw,11cqh),38px);color:var(--bud-text);text-shadow:0 2px 0 #000a,0 0 8px color-mix(in srgb,var(--bud-glow) 55%,transparent)}
.lh.cmd .lh-budget .lh-value small{color:var(--ink)}
.lh.cmd .lh-budget .lh-label svg{width:max(9px,4cqw);height:max(9px,4cqw);color:var(--bud-text)}
.lh.cmd[data-plinth=marble] .lh-budget .lh-value{text-shadow:0 1px 0 #fff9}
.lh.cmd .budget-pips{order:3;flex:0 0 100%;display:flex;gap:max(2px,1.1cqw);margin:max(5px,1.4cqh) 0 0;height:max(9px,4.2cqw)}
.lh.cmd .budget-pip{flex:1 1 0;min-width:0;height:100%;margin:0;border:0;border-radius:0;clip-path:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bud) 58%,#fff),var(--bud) 42%,color-mix(in srgb,var(--bud) 74%,#000));
  box-shadow:0 0 3px var(--bud-glow),0 0 9px color-mix(in srgb,var(--bud-glow) 50%,transparent)}
.lh.cmd .budget-pip.temporary{background:repeating-linear-gradient(135deg,#eafff2 0 3px,var(--bud) 3px 6px);box-shadow:0 0 3px var(--bud-glow),0 0 10px #ffffff8c}
.lh.cmd .budget-pip.spent{background:var(--bud-off);box-shadow:inset 0 1px 2px #000c,inset 0 0 0 1px color-mix(in srgb,var(--bud) 24%,transparent)}
.lh.cmd .lh-budget .resource-effect{order:4;margin-top:max(4px,1cqh)}
.lh.cmd .resource-effect{margin:0;padding:max(2px,.6cqw) max(3px,1.2cqw);border-radius:0;font:700 max(8px,3.4cqw)/1 var(--wo-text);letter-spacing:.04em}
.lh.cmd .resource-effect svg{width:max(9px,3.6cqw);height:max(9px,3.6cqw)}
/* neon red, a shade deeper (Sovereignty below 10, Revolt) */
.lh.cmd .lh-sov.sov-critical .lh-value{color:#f01932;text-shadow:0 0 3px #da0b27,0 0 10px #da0b27d9,0 0 22px #da0b2780}
.lh.cmd .lh-sov.sov-critical .lh-value small{color:#f47b87}
.lh.cmd .lh-sov.sov-critical .lh-label{color:#f15565;text-shadow:0 0 8px #da0b2799}
.lh.cmd .lh-sov.sov-critical .sovereignty-track{box-shadow:inset 0 1px 2px #000,0 0 0 1px #da0b2773,0 0 10px #da0b2740}
.lh.cmd .lh-sov.sov-critical .sovereignty-fill{background:linear-gradient(180deg,#ee2f46,#d80e29)!important;box-shadow:0 0 6px #da0b27,0 0 14px #da0b27b3}
.lh.cmd .revolt-bar{background:linear-gradient(180deg,#f9b4b9 0%,#ed263a 22%,#d80e25 100%);box-shadow:0 0 2px #f04758,0 0 6px #d80e25,0 0 12px #d80e2599}
/* short panels: the epithet goes first, then the gaps tighten */
@container (max-height:290px){.lh.cmd .cmd-title{display:none}}
@container (max-height:250px){.lh.cmd .cmd-plinth{gap:4px;padding-top:9px;padding-bottom:10px}}

/* ---------------------------------------------------------------- OPTIONS > Developer > HUD style: the four sets on their own line */
.opt-row.opt-stack{grid-template-columns:minmax(0,1fr);gap:7px;padding:4px 0 6px}
.opt-row.opt-stack .opt-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.opt-row.opt-stack .opt-seg button{min-width:0;padding:0 6px}
/* short screens: OPTIONS still fits above its button in a match without scrolling (descriptions of the dev rows go, rows tighten) */
@media (max-height:760px){
  .options-dialog .opt-dev .opt-label small{display:none}
  .options-dialog .opt-row{min-height:31px}
  .options-dialog .opt-seg button{height:26px}
  .opt-row.opt-stack{gap:5px;padding:2px 0 4px}
}

/* ---------------------------------------------------------------- the special's description beside the cursor */
.special-tip{position:absolute;z-index:80;width:max-content;max-width:280px;min-width:190px;padding:10px 13px 11px;border:1px solid #d4aa5bb0;border-radius:0;background:#0b1820f2;
  box-shadow:0 14px 34px #000c,0 0 0 1px #0008,inset 0 1px 0 #ffffff0f;pointer-events:none;animation:wo-tip-in .14s ease-out both}
.special-tip[hidden]{display:none}
.special-tip::before{content:"";position:absolute;left:-1px;top:-1px;width:18px;height:2px;background:#f3c968}
.special-tip .eyebrow{display:block;margin-bottom:6px;font:700 9px/1 var(--wo-title);letter-spacing:.16em;color:#c8ac72}
.special-tip strong{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;font:700 15px/1.1 var(--wo-title);letter-spacing:.05em;text-transform:uppercase;color:#f6e3b4}
.special-tip .tip-cost{display:inline-flex;align-items:center;gap:5px;flex:none;font:700 9px/1 var(--wo-title);font-style:normal;letter-spacing:.14em;color:#c8ac72}
.special-tip .tip-cost b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid #d9bf89;background:#132a35;color:#fff2d4;font:700 11px/1 var(--wo-title);letter-spacing:0}
.special-tip p{margin:0;font-size:12.5px;line-height:1.45;color:#dfe7e3}
.special-tip .tip-status{display:block;margin-top:8px;padding-top:7px;border-top:1px solid #d4aa5b33;font:700 9.5px/1 var(--wo-title);font-style:normal;letter-spacing:.16em;color:#9fb1b4}
.special-tip .tip-status[data-state=ready]{color:#f3c968}
.special-tip .tip-status[data-state=wait]{color:#8fa2a8}
@keyframes wo-tip-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
html.wo-reduced-motion .special-tip{animation:none}

/* ---------------------------------------------------------------- opening hand: the REPLACE glitch in blues (no magenta) */
.mull-glitch i:nth-child(1){background:linear-gradient(90deg,#2f6bff00,#2f6bffb3 18%,#2f6bff40 64%,#2f6bff00)}
.mull-glitch i:nth-child(2){background:#35f0ffcc}
.mull-glitch i:nth-child(3){background:linear-gradient(90deg,#0000,#29e3ff66 26%,#1f4fe059 72%,#0000)}
.marked .mulligan-face{filter:saturate(.25) brightness(.72) contrast(1.25) drop-shadow(3px 0 0 #2f6bffc0) drop-shadow(-3px 0 0 #29e3ffc0)}
.mulligan-item.marked .card-model{box-shadow:0 0 0 1px #3d7dff80,0 0 22px #29e3ff40}
.mull-word{text-shadow:2px 0 0 #2f6bffd9,-2px 0 0 #29e3ffd9,0 0 22px #000,0 3px 6px #000c}
.mull-word::before{color:#3d7dff}
.mull-word::after{color:#35f0ff}
@keyframes wo-mull-hit{0%{transform:translateX(-6px);filter:brightness(1.6) saturate(.6) drop-shadow(0 0 6px #29e3ff)}25%{transform:translateX(5px)}50%{transform:translateX(-3px);filter:none}100%{transform:none}}

/* ---------------------------------------------------------------- clash forecast on the cards: no box over the art
   The loss is a small number beside Resistance (red) or Shield (blue), like the +1 on Power; gold while a play is previewed.
   On a card that would fall at the end of the round, FALLS is written across its centre as red glitch lettering (text only,
   no background; the card keeps its slow red pulse). */
.fc-loss{font:800 max(9px,7cqw)/1 var(--wo-text);margin-left:.6cqw;align-self:flex-start;color:#ff6a5a;text-shadow:0 0 6px #ff2a1a99,0 1px 2px #000;font-variant-numeric:tabular-nums}
.face-shield .fc-loss{color:#7fd8ff;text-shadow:0 0 6px #2ab8ff99,0 1px 2px #000}
.forecast-preview .fc-loss{color:#ffd27a;text-shadow:0 0 6px #f0b54a99,0 1px 2px #000}
.fc-falls{position:absolute;left:50%;top:44%;z-index:8;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;font:700 19cqw/1 var(--wo-title);letter-spacing:.1em;text-indent:.1em;color:#ff4a3a;
  text-shadow:2px 0 0 #ff9a3dcc,-2px 0 0 #8e0b16e6,0 0 3px #000,0 0 10px #000,0 0 16px #ff1a0a99,0 3px 6px #000}
.fc-falls::before,.fc-falls::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;text-indent:.1em;text-shadow:none}
.fc-falls::before{color:#ff2414;clip-path:inset(0 0 58% 0);transform:translateX(-4px);opacity:.9}
.fc-falls::after{color:#a50d18;clip-path:inset(62% 0 0 0);transform:translateX(4px);opacity:.9}
html:not(.wo-reduced-motion) .fc-falls{animation:wo-mull-word 2.6s steps(1,end) infinite}
html:not(.wo-reduced-motion) .fc-falls::before{animation:wo-mull-split-a 1.3s steps(1,end) infinite}
html:not(.wo-reduced-motion) .fc-falls::after{animation:wo-mull-split-b 1.3s steps(1,end) infinite}
.feedback-busy :is(.fc-loss,.fc-falls){visibility:hidden}
.forecast-off :is(.fc-loss,.fc-falls){display:none!important}

/* ---------------------------------------------------------------- v038.2 Your action: a neon dot runs round the button when it waits on you (v038.1: a glow)
   Like the trail round a Shielded card: a faint outline, a fading tail, a bright head and the dot, all on one border (an SVG rect
   with pathLength 100, so the dot keeps the same speed on the long and the short sides). Yellow to let a declaration resolve or
   to pass with nothing else to play; red, on a red button, to ready for the Clash. Motion: Low leaves a steady neon outline. */
.priority-panel #pass-button{position:relative;--trail:#ffd84a;--head:#fff1a8;--ball:#fffbe8;--glow:#ffb800}
.priority-panel #pass-button[data-pulse=clash]{--trail:#ff3324;--head:#ff8a4a;--ball:#fff1e8;--glow:#ff1a0a;
  background:linear-gradient(110deg,#9e1219,#cf2a26 55%,#ec4a36);color:#fff1ec;text-shadow:0 1px 2px #5a0006}
.priority-panel #pass-button .act-trail{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none;filter:drop-shadow(0 0 2px var(--trail)) drop-shadow(0 0 7px var(--glow))}
.priority-panel #pass-button:is([data-pulse=act],[data-pulse=clash]) .act-trail{display:block}
.act-trail rect{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:butt;stroke-dashoffset:0}
.act-trail .t-base{stroke:var(--trail);stroke-width:1.5;opacity:.4}
/* every dash ends on the period boundary, so all layers share one head and one animation */
.act-trail .t-tail{stroke:var(--trail);stroke-width:2;opacity:.35;stroke-dasharray:0 66 34 0}
.act-trail .t-mid{stroke:var(--trail);stroke-width:2.5;opacity:.85;stroke-dasharray:0 84 16 0}
.act-trail .t-head{stroke:var(--head);stroke-width:3;stroke-dasharray:0 95 5 0;stroke-linecap:round}
.act-trail .t-ball{stroke:var(--ball);stroke-width:6;stroke-dasharray:0 99.9 .1 0;stroke-linecap:round}
.act-trail :is(.t-tail,.t-mid,.t-head,.t-ball){animation:act-run 2.6s linear infinite}
@keyframes act-run{to{stroke-dashoffset:-100}}
:is(html.wo-reduced-motion,.battle-app.reduced-motion) .act-trail :is(.t-tail,.t-mid,.t-head,.t-ball){animation:none;display:none}
:is(html.wo-reduced-motion,.battle-app.reduced-motion) .act-trail .t-base{opacity:1;stroke-width:2}

/* game-cursor:begin (generated by tools/game_cursor.py) */
/* the steel arrow everywhere, glowing over what can be clicked or dragged; text fields, not-allowed, help and the target crosshair stay the system ones */
html{cursor:url("../assets/ui/cursor_v001.png") 3 3,default;cursor:-webkit-image-set(url("../assets/ui/cursor_v001.png") 1x,url("../assets/ui/cursor_v001_2x.png") 2x) 3 3,default}
:where(button,a[href],[role="button"],[role="radio"],[role="tab"],summary,label,select,input[type="checkbox"],input[type="radio"],input[type="range"]),button,.target-valid,.leader-option,.setup-config select,.leader-option input,#wo-tutorial button,#wo-tutorial-launch,.hand-card,.lh .leader-name button,.audio-row label,.briefing-button,.pile-briefing,.ars button,.cdx-tile,.cdx-card,.main-menu button,.mm-leader,.mm-field select,.spotlight,.float-card.is-choosable,.front-button,.options-dialog button,.opt-switch,.opt-switch input,.opt-audio input[type=range],.options-button,.options-dialog .opt-head,.options-dialog .opt-group h3,.options-dialog .opt-foot,.has-combat-presentation.history-collapsed .chronicle-panel,.chronicle-panel .rail-heading,.lh.cmd .special-button.cmd-seal{cursor:url("../assets/ui/cursor_hover_v001.png") 3 3,pointer;cursor:-webkit-image-set(url("../assets/ui/cursor_hover_v001.png") 1x,url("../assets/ui/cursor_hover_v001_2x.png") 2x) 3 3,pointer}
:where(button:disabled,[aria-disabled="true"]),button:disabled,.opponent .special-button,.hand-card:active,.briefing-button:disabled,.ars button:disabled,.lh.cmd .cmd-seal[aria-disabled="true"]{cursor:url("../assets/ui/cursor_v001.png") 3 3,default;cursor:-webkit-image-set(url("../assets/ui/cursor_v001.png") 1x,url("../assets/ui/cursor_v001_2x.png") 2x) 3 3,default}
:where(input:not([type]),input[type="text"],input[type="search"],input[type="number"],input[type="email"],textarea,[contenteditable="true"]){cursor:text}
/* game-cursor:end */