/* hud-brackets (hb6): tight gold REC brackets + occasional AIMAGEDDON glitch. No scanlines, grain or flashes. */
:root{--hb-out:-4px}
/* root cause of the loose look: fxlock's fill-mode held inset:-14px over the panel override */
.fx-vf>.fx-br{inset:var(--hb-out)!important}
.fx-vf.fx-lock>.fx-br{animation:hbLock .7s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes hbLock{0%{inset:-26px;opacity:0}70%{inset:-2px;opacity:1}100%{inset:var(--hb-out);opacity:1}}
.fx-br b{width:16px;height:16px;border-width:2px;transition:none}
.fx-ktk .fx-panel>.fx-br b,.hb-panel>.fx-br b{width:12px;height:12px;border-width:1.5px}
/* panels that clip their overflow get the brackets just inside the edge */
.hb-inset>.fx-br{inset:3px!important}
.hb-inset.fx-lock>.fx-br{animation:hbLockIn .7s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes hbLockIn{0%{inset:-18px;opacity:0}100%{inset:3px;opacity:1}}
/* Bracket glitch = port of lfg-fx "fxchrom" (the KTK title glitch, e.g. THE ARMIES AWAIT): same steps, timing and values; drop-shadow stands in for text-shadow on borders. */
.fx-br.hb-gl b{animation:hbGl .2s steps(1) 1}
@keyframes hbGl{0%{filter:drop-shadow(-2px 0 rgba(34,211,238,.45)) drop-shadow(2px 0 rgba(255,36,54,.45));clip-path:inset(30% 0 40% 0)}35%{filter:drop-shadow(1px 0 rgba(34,211,238,.35)) drop-shadow(-1px 0 rgba(255,36,54,.35));clip-path:none}70%,100%{filter:none;clip-path:none}}
/* phones: transform/clip only (no filters) */
@media (max-width:820px),(pointer:coarse){
 .fx-br.hb-gl b{filter:none!important;box-shadow:-1px 0 rgba(34,211,238,.4),1px 0 rgba(255,36,54,.4)}
}
@media (prefers-reduced-motion:reduce){
 .fx-vf.fx-lock>.fx-br,.hb-inset.fx-lock>.fx-br{animation:none!important}
 .fx-br.hb-gl b{animation:none!important;box-shadow:none!important}
}

/* hb2: menu rows. One bracket layer only: rows inside a bracketed panel drop their own corner marks and rely on the highlight. */
.fx-vf .fx-cardvf:before,.fx-vf .fx-cardvf:after{display:none!important}
/* campaign setup cards + march button (chamfered with clip-path): no corner marks, keep the card's own inner border; selection = gold border + lift */
.choice.fx-cardvf:before{inset:4px!important;left:4px!important;top:4px!important;width:auto!important;height:auto!important;border:1px solid rgba(255,255,255,.035)!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:inherit}
.choice.fx-cardvf:after,.march.fx-cardvf:before,.march.fx-cardvf:after,.mode-btn.fx-cardvf:before,.mode-btn.fx-cardvf:after,.order.fx-cardvf:before,.order.fx-cardvf:after{display:none!important}
/* ===== SELECT GLITCH STYLE (swap here) =====
   Hook: hud-brackets.js adds .hb-sel to the row for ~240ms on hover/focus/tap.
   Replace the two keyframes below to change the look. */
/* hb5: press glitch = the EXACT Armies Await title glitch (lfg-fx fxchrom: .9s steps(1), same keyframe values). Press only (pointerdown / Enter / Space), never hover. */
.hb-sel{animation:fxchromT .9s steps(1) 1}
.hb-sel>:not(.hb-ants):not(svg){animation:fxchrom .9s steps(1) 1}
.hb-sel:not(:has(>:not(.hb-ants))){animation:fxchrom .9s steps(1) 1}
@keyframes fxchrom{0%{text-shadow:-6px 0 rgba(34,211,238,.8),6px 0 rgba(255,36,54,.8);clip-path:inset(20% 0 50% 0)}15%{text-shadow:4px 0 rgba(34,211,238,.7),-4px 0 rgba(255,36,54,.7);clip-path:inset(60% 0 10% 0)}30%{text-shadow:-2px 0 rgba(34,211,238,.6),2px 0 rgba(255,36,54,.6);clip-path:none}50%,100%{text-shadow:none;clip-path:none}}
@keyframes fxchromT{0%{text-shadow:-6px 0 rgba(34,211,238,.8),6px 0 rgba(255,36,54,.8)}15%{text-shadow:4px 0 rgba(34,211,238,.7),-4px 0 rgba(255,36,54,.7)}30%{text-shadow:-2px 0 rgba(34,211,238,.6),2px 0 rgba(255,36,54,.6)}50%,100%{text-shadow:none}}
@media (prefers-reduced-motion:reduce){.hb-sel,.hb-sel>*{animation:none!important}}

/* hb6: menu rows + decree cards + mode buttons: no corner marks; hovered/selected item gets a travelling dashed border in the AIMAGEDDON glitch look (fxchrom red/cyan split), 8s/lap, subtle. */
.choice.fx-cardvf:after,.order.fx-cardvf:before,.order.fx-cardvf:after,.mode-btn.fx-cardvf:before,.mode-btn.fx-cardvf:after{display:none!important}
.hb-ants{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible;opacity:0;transition:opacity .35s ease}
.hb-ants rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;animation:hbAnts 8s linear infinite}
.hb-ants .hb-a0{stroke:rgba(232,190,100,.22)}
.hb-ants .hb-ar{stroke:rgba(255,36,54,.62);transform:translate(-.5px,0);mix-blend-mode:screen}
.hb-ants .hb-ac{stroke:rgba(34,211,238,.62);transform:translate(.5px,0);mix-blend-mode:screen}
.choice>.hb-ants rect{x:4px;y:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
@keyframes hbAnts{to{stroke-dashoffset:-180}}
:is(.order,.choice,.mode-btn,[role=option]):is(:hover,:focus-visible,.selected,[aria-selected=true],[aria-pressed=true])>.hb-ants{opacity:.85}
/* occasional small jitter / slice (JS adds .hb-aj for ~260ms every few seconds) */
.hb-ants.hb-aj .hb-ar{animation:hbAnts 8s linear infinite,hbJr .26s steps(1) 1}
.hb-ants.hb-aj .hb-ac{animation:hbAnts 8s linear infinite,hbJc .26s steps(1) 1}
@keyframes hbJr{0%{transform:translate(-2px,0);clip-path:inset(18% 0 52% 0)}35%{transform:translate(1px,0);clip-path:inset(58% 0 12% 0)}70%,100%{transform:translate(-.5px,0);clip-path:none}}
@keyframes hbJc{0%{transform:translate(2px,0);clip-path:inset(18% 0 52% 0)}35%{transform:translate(-1px,0);clip-path:inset(58% 0 12% 0)}70%,100%{transform:translate(.5px,0);clip-path:none}}
@media (prefers-reduced-motion:reduce){.hb-ants rect,.hb-ants.hb-aj rect{animation:none!important}}