/* WORLD ORDER v037 (interface 0.37.0)
   - Selectable targets: a bright gold frame that breathes (no tag on the cards) and one neon SELECT TARGET lettering at the
     top of the table; the rest of the table steps back.
   - Opening hand: a card marked for replacement is covered by a glitch (RGB split, torn bands, scanlines) and REPLACE is
     written across it as lettering, not a box.
   - Sovereignty below 10 turns neon red and blinks (steady with Motion: Low).
   - BRIEF chip: left edge aligned with the draw pile and a little higher above it. Opponent hand: cards 20% larger.
   - OPTIONS: the window can be dragged by any part that is not a control.
   - Legendary halo: layered counter-rotating rays, a breathing bloom and a light that runs around the frame
     (entry in ui/duel-fx.js; the inspected card below).
   - Square corners on every box, window and button (generated block at the end, tools/square_corners.py); cards and
     the empty field slots keep their rounded corners, true circles stay round. */

/* ---------------------------------------------------------------- selectable targets */
.field-slot.target-invalid{opacity:.34;filter:saturate(.45) brightness(.85)}
.field-slot.target-valid{z-index:3;background:#f2c25a14;box-shadow:none}
.field-slot.target-valid .field-card{box-shadow:0 0 0 2px #ffe2a0,0 0 0 4px #24180699,0 0 16px 3px #f2b84b99,0 0 34px 8px #f2b84b40}
.field-slot.target-valid .empty-slot{position:relative;border:2px dashed #f3d48e;background:#f2c25a1f;box-shadow:inset 0 0 22px #f2b84b40,0 0 14px 1px #f2b84b55}
/* the glow breathes on a layer of its own (only its opacity changes, so the cards are not repainted every frame) */
.field-slot.target-valid :is(.field-card,.empty-slot)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.3;
  box-shadow:0 0 0 3px #fff3cf,0 0 26px 8px #f6c25cd9,0 0 58px 18px #f2b84b80}
html:not(.wo-reduced-motion) .field-slot.target-valid :is(.field-card,.empty-slot)::after{animation:wo-target-pulse 1.25s ease-in-out infinite}
@keyframes wo-target-pulse{50%{opacity:1}}
/* no tag on the cards: the eligible ones only glow; one neon SELECT TARGET (SELECT POSITION when deploying) sits at the top of
   the table, where the opponent's hand is (the hand fades while the player chooses) */
.target-valid:after,.field-slot.target-valid:after{content:none}
.target-cue{position:absolute;left:50%;top:-8px;height:38px;z-index:6;display:flex;align-items:center;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.target-cue[hidden]{display:none}
.target-cue::before{content:"";position:absolute;inset:-6px -60px;z-index:-1;background:radial-gradient(closest-side,#02070bd9 30%,#02070b80 62%,transparent)}
.target-cue span{font:800 clamp(22px,1.65vw,32px)/1 var(--wo-title);letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:#fff7a1;
  -webkit-text-stroke:.5px #fffde6;text-shadow:0 0 1px #fffef2,0 0 5px #fff36e,0 0 11px #ffe600,0 0 22px #ffd400,0 0 40px #ffb800,0 0 70px #ff9d00b3}
html:not(.wo-reduced-motion) .target-cue:not([hidden]) span{animation:wo-neon-on .7s steps(1,end) 1,wo-neon-hum 3.4s ease-in-out .7s infinite}
@keyframes wo-neon-on{0%{opacity:.12}12%{opacity:1}18%{opacity:.22}30%{opacity:1}38%{opacity:.45}46%,100%{opacity:1}}
@keyframes wo-neon-hum{0%,100%{opacity:1}50%{opacity:.84}}
.battle-app.has-cue #opponent-hand :is(.hidden-card,.hidden-count){opacity:.1}
#opponent-hand :is(.hidden-card,.hidden-count){transition:opacity .2s}
.field-slot.target-picked .field-card{box-shadow:0 0 0 3px #9fe3c8,0 0 22px 5px #5fc79f99}

/* ---------------------------------------------------------------- opening hand: cards marked for replacement */
.mulligan-card{container-type:inline-size;overflow:visible}
.mulligan-mark{display:none}
.mull-glitch,.mull-word{position:absolute;pointer-events:none}
.mull-glitch{inset:0;z-index:3;overflow:hidden;border-radius:5.5%/4.2%;opacity:0;transition:opacity .16s;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#01050999 2px 3px),linear-gradient(180deg,#07121bb3,#07121b59 38%,#07121bcc)}
.mull-glitch i{position:absolute;left:-6%;right:-6%;mix-blend-mode:screen}
.mull-glitch i:nth-child(1){top:16%;height:7%;background:linear-gradient(90deg,#ff2d6b00,#ff2d6bb3 18%,#ff2d6b40 64%,#ff2d6b00)}
.mull-glitch i:nth-child(2){top:41%;height:2.2%;background:#35f0ffcc}
.mull-glitch i:nth-child(3){top:58%;height:10%;background:linear-gradient(90deg,#0000,#29e3ff66 26%,#ff2d6b59 72%,#0000)}
.mull-glitch i:nth-child(4){top:80%;height:1.6%;background:#fffd;mix-blend-mode:overlay}
.marked .mull-glitch{opacity:1}
.marked .mulligan-face{filter:saturate(.25) brightness(.72) contrast(1.25) drop-shadow(3px 0 0 #ff2d6bc0) drop-shadow(-3px 0 0 #29e3ffc0)}
.mulligan-item.marked .card-model{box-shadow:0 0 0 1px #ff2d6b80,0 0 22px #29e3ff40}
.mull-word{left:50%;top:44%;z-index:4;transform:translate(-50%,-50%);white-space:nowrap;opacity:0;transition:opacity .14s;
  font:700 19cqw/1 var(--wo-title);letter-spacing:.1em;text-indent:.1em;text-transform:uppercase;color:#f6f9fa;
  text-shadow:2px 0 0 #ff2d6bd9,-2px 0 0 #29e3ffd9,0 0 22px #000,0 3px 6px #000c}
.mull-word::before,.mull-word::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;text-indent:.1em;text-shadow:none}
.mull-word::before{color:#ff2d6b;clip-path:inset(0 0 58% 0);transform:translateX(-4px);opacity:.85}
.mull-word::after{color:#35f0ff;clip-path:inset(62% 0 0 0);transform:translateX(4px);opacity:.85}
.marked .mull-word{opacity:1}
/* a kept card hints at the click: the word shows faintly on hover */
.mulligan-item:not(.marked) .mulligan-card:is(:hover,:focus-visible) .mull-word{opacity:.32;text-shadow:0 0 14px #000}
.mulligan-item:not(.marked) .mull-word::before,.mulligan-item:not(.marked) .mull-word::after{display:none}
html:not(.wo-reduced-motion) .marked .mulligan-face{animation:wo-mull-jitter 2.6s steps(1,end) infinite}
html:not(.wo-reduced-motion) .marked .mull-glitch{animation:wo-mull-scan .9s linear infinite}
html:not(.wo-reduced-motion) .marked .mull-glitch i{animation:wo-mull-band 2.6s steps(1,end) infinite}
html:not(.wo-reduced-motion) .marked .mull-glitch i:nth-child(2){animation-delay:-.7s}
html:not(.wo-reduced-motion) .marked .mull-glitch i:nth-child(3){animation-delay:-1.5s}
html:not(.wo-reduced-motion) .marked .mull-glitch i:nth-child(4){animation-delay:-2.1s}
html:not(.wo-reduced-motion) .marked .mull-word{animation:wo-mull-word 2.6s steps(1,end) infinite}
html:not(.wo-reduced-motion) .marked .mull-word::before{animation:wo-mull-split-a 1.3s steps(1,end) infinite}
html:not(.wo-reduced-motion) .marked .mull-word::after{animation:wo-mull-split-b 1.3s steps(1,end) infinite}
html:not(.wo-reduced-motion) .mulligan-item.marked.is-new .mulligan-card{animation:wo-mull-hit .34s steps(4,end) 1}
@keyframes wo-mull-jitter{0%,100%{transform:none}6%{transform:translateX(-4px) skewX(-2deg)}8%{transform:translateX(3px)}10%{transform:none}
  46%{transform:translateX(2px)}48%{transform:translateX(-3px) skewX(1.5deg)}50%{transform:none}78%{transform:translate(-2px,1px)}80%{transform:none}}
@keyframes wo-mull-scan{to{background-position:0 6px,0 0}}
@keyframes wo-mull-band{0%,100%{transform:none;opacity:1}12%{transform:translateX(9%);opacity:.4}14%{transform:translateX(-6%) scaleY(1.8);opacity:1}
  16%{transform:none}52%{transform:translate(-4%,140%);opacity:.7}55%{transform:none;opacity:1}83%{opacity:0}87%{opacity:1}}
@keyframes wo-mull-word{0%,100%{transform:translate(-50%,-50%)}6%{transform:translate(calc(-50% - 5px),-50%) skewX(-8deg)}8%{transform:translate(calc(-50% + 4px),-50%)}
  10%{transform:translate(-50%,-50%)}47%{transform:translate(calc(-50% + 3px),calc(-50% - 1px))}49%{transform:translate(-50%,-50%)}}
@keyframes wo-mull-split-a{0%,100%{clip-path:inset(0 0 58% 0);transform:translateX(-4px)}30%{clip-path:inset(10% 0 70% 0);transform:translateX(-7px)}
  55%{clip-path:inset(35% 0 40% 0);transform:translateX(-2px)}80%{clip-path:inset(0 0 80% 0);transform:translateX(-5px)}}
@keyframes wo-mull-split-b{0%,100%{clip-path:inset(62% 0 0 0);transform:translateX(4px)}25%{clip-path:inset(72% 0 5% 0);transform:translateX(7px)}
  60%{clip-path:inset(45% 0 30% 0);transform:translateX(2px)}85%{clip-path:inset(80% 0 0 0);transform:translateX(5px)}}
@keyframes wo-mull-hit{0%{transform:translateX(-6px);filter:hue-rotate(80deg) brightness(1.6)}25%{transform:translateX(5px)}50%{transform:translateX(-3px);filter:none}100%{transform:none}}

/* ---------------------------------------------------------------- Sovereignty below 10: neon red */
.lh-sov.sov-critical .lh-value{color:#ff3b52;text-shadow:0 0 3px #ff1f3d,0 0 10px #ff1f3dd9,0 0 24px #ff1f3d8c}
.lh-sov.sov-critical .lh-value small{color:#ff96a1;text-shadow:none}
.lh-sov.sov-critical .lh-label{color:#ff7584;text-shadow:0 0 8px #ff1f3d99}
.lh-sov.sov-critical .sovereignty-track{box-shadow:0 0 0 1px #ff1f3d73,0 0 10px #ff1f3d40}
.lh-sov.sov-critical .sovereignty-fill{background:linear-gradient(90deg,#ff1838,#ff5a6e)!important;box-shadow:0 0 6px #ff1f3d,0 0 14px #ff1f3db3}
html:not(.wo-reduced-motion) .lh-sov.sov-critical :is(.lh-value,.lh-label,.sovereignty-fill){animation:wo-sov-neon 1.2s steps(1,end) infinite}
@keyframes wo-sov-neon{0%,47%{opacity:1}48%{opacity:.3}50%{opacity:.95}52%,92%{opacity:.26}93%,100%{opacity:1}}

/* ---------------------------------------------------------------- BRIEF chip and opponent hand */
.pile-briefing{left:0;transform:none;bottom:calc(100% + 14px)}
@media (max-height:760px){.pile-briefing{bottom:calc(100% + 11px)}}
.opponent-hand{height:38px;margin-top:-8px}
.hidden-card{height:41px;width:30px;margin-left:-9px}
.hidden-count{top:13px}
.opponent-pile-info{top:calc(.8rem + 8px)}

/* ---------------------------------------------------------------- OPTIONS: drag the window */
.options-dialog .opt-head,.options-dialog .opt-group h3,.options-dialog .opt-foot{cursor:grab;touch-action:none}
.options-dialog.is-dragging,.options-dialog.is-dragging *{cursor:grabbing!important;user-select:none}
.options-dialog.is-dragging{box-shadow:0 30px 90px #000f,inset 0 1px 0 #ffffff1a;border-color:#e8c98acc}
.opt-head .opt-grip{position:absolute;left:50%;top:6px;width:34px;height:4px;transform:translateX(-50%);opacity:.5;
  background:repeating-linear-gradient(90deg,#cbb17b 0 2px,transparent 2px 5px)}

/* ---------------------------------------------------------------- Legendary halo: entry (ui/duel-fx.js) */
@property --wo-orbit{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --wo-ray{syntax:'<angle>';inherits:false;initial-value:0deg}
#duel-fx-rarity .fx-legend-rays-b{position:absolute;z-index:5;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#fff4d100 0deg,#fff4d14d 1.2deg,#fff4d100 3deg,#fff4d100 10deg);
  -webkit-mask:radial-gradient(closest-side,#000 14%,#0007 50%,transparent 92%);mask:radial-gradient(closest-side,#000 14%,#0007 50%,transparent 92%)}
#duel-fx-rarity .fx-legend-bloom{position:absolute;z-index:4;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#fff1c2d9,#f3cf7a8c 26%,#e0a93a40 52%,#e0a93a00 76%)}
#duel-fx-rarity .fx-legend-orbit{position:absolute;z-index:8;pointer-events:none;padding:3px;border-radius:9px;
  background:conic-gradient(from var(--wo-orbit),#fff6d800 0deg,#fff6d800 220deg,#f3cf7a99 290deg,#fffaf0 330deg,#f3cf7acc 345deg,#fff6d800 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);filter:drop-shadow(0 0 8px #f3cf7a)}

/* ---------------------------------------------------------------- Legendary halo: inspected card */
.inspected-card:has(:is(.card-visual,.card-model).r-legendary)::before{
  background:repeating-conic-gradient(from var(--wo-ray),#f3cf7a4d 0 3.5deg,transparent 3.5deg 15deg),
    repeating-conic-gradient(from calc(var(--wo-ray) * -1.7),#fff3d02e 0 1.4deg,transparent 1.4deg 9deg);
  -webkit-mask:radial-gradient(circle,#000 28%,#0009 47%,transparent 70%);mask:radial-gradient(circle,#000 28%,#0009 47%,transparent 70%)}
html:not(.wo-reduced-motion) .inspected-card:has(:is(.card-visual,.card-model).r-legendary)::before{animation:wo-legend-rays2 36s linear infinite,wo-legend-breathe 5.2s ease-in-out infinite}
@keyframes wo-legend-rays2{to{--wo-ray:360deg}}
@keyframes wo-legend-breathe{0%,100%{scale:1;opacity:.85}50%{scale:1.06;opacity:1}}

/* square-corners:begin (generated by tools/square_corners.py) */
/* every box, window and button: square corners; cards, field slots, effects and circles are left as they are */
.leader-panel{border-radius:0}
.special-button{border-radius:0}
.state-stat{border-radius:0}
.chronicle-panel{border-radius:0}
.priority-panel{border-radius:0}
kbd{border-radius:0}
.modal{border-radius:0}
.combat-sequence{border-radius:0}
.face-forecast{border-radius:0}
.face-forecast strong{border-radius:0}
.front-forecast span{border-radius:0}
.lh .portrait-wrap{border-radius:0}
.sov-forecast{border-radius:0}
.lh .sovereignty-track{border-radius:0}
#card-dossier.card-dossier{border-radius:0}
.dossier-art{border-radius:0}
.dossier-art span{border-radius:0}
.dossier-chips .chip{border-radius:0}
.dossier-values div{border-radius:0}
.dossier-forecast{border-radius:0}
.forecast-line{border-radius:0}
.forecast-sov b.lethal{border-radius:0}
.audio-panel{border-radius:0}
.fx-ruler{border-radius:0}
.fx-ruler-bar{border-radius:0}
.table-drop-zone{border-radius:0}
.lh-id{border-radius:0}
.lh-meta b{border-radius:0}
.table-drop-zone.table-only strong{border-radius:0}
.table-drop-zone.table-only span{border-radius:0}
.briefing-button{border-radius:0}
.flag-svg{border-radius:0}
.dossier-nation{border-radius:0}
.pile-briefing{border-radius:0}
#duel-fx-rarity .fx-rarity-tag{border-radius:0}
.ars-back{border-radius:0}
.ars-leader{border-radius:0}
.ars-collection.is-drop::after{border-radius:0}
.ars-search{border-radius:0}
.ars-chip{border-radius:0}
.ars-sort select{border-radius:0}
.ars-tile{border-radius:0}
.ars-badge{border-radius:0}
.ars-copies button{border-radius:0}
.ars-deck-head select,.ars-deck-head input,.ars-code input{border-radius:0}
.ars-deck-tools button,.ars-actions button,.ars-code button{border-radius:0}
.ars-code{border-radius:0}
.ars-status{border-radius:0}
.ars-bar i{border-radius:0}
.ars-strip{border-radius:0}
.ars-strip-x{border-radius:0}
.ars-hand-panel{border-radius:0}
.ars-toast{border-radius:0}
.ars-preview .card-model-rule{border-radius:0}
.cdx-owner-tab{border-radius:0}
.cdx-arsenal{border-radius:0}
.cdx-values div{border-radius:0}
.cdx-usage{border-radius:0}
.cdx-usage li button,.cdx-add{border-radius:0}
.cdx-step button{border-radius:0}
.mm-toggles button{border-radius:0}
.mm-key{border-radius:0}
.mm-dossier{border-radius:0}
.mm-field{border-radius:0}
.mm-field select,.mm-field input{border-radius:0}
.mm-mini-button{border-radius:0}
.mm-vs-art{border-radius:0}
.mm-vs-art b{border-radius:0}
.mm-level button{border-radius:0}
.table-drop-zone.table-frame{border-radius:0}
.tdz-label strong{border-radius:0}
.tdz-label span{border-radius:0}
.selection-banner{border-radius:0}
.selection-banner .sel-leader{border-radius:0}
.selection-banner>button{border-radius:0}
.spot-target em{border-radius:0}
.spot-copy{border-radius:0}
.rs-panel{border-radius:0}
.rs-legend i{border-radius:0}
.rs-front{border-radius:0}
.rs-bar b{border-radius:0}
.guided-coach{border-radius:0}
.gc-skip{border-radius:0}
.gc-progress{border-radius:0}
.battle-app .guide-focus{border-radius:0}
.mm-item .mm-badge{border-radius:0}
.spot-rarity{border-radius:0}
.round-status{border-radius:0}
.keyword-tip{border-radius:0}
.keyword-tip>strong .chip{border-radius:0}
.declaration-facts .uncancelable{border-radius:0}
.revolt-bar{border-radius:0}
.cdx-group .flag-svg{border-radius:0}
.mm-lock{border-radius:0}
.options-dialog{border-radius:0}
.opt-switch i{border-radius:0}
.opt-seg{border-radius:0}
.opt-seg button{border-radius:0}
.opt-action{border-radius:0}
.options-button{border-radius:0}
.opt-switch i::after{border-radius:0}
/* square-corners:end */