/* WORLD ORDER v032 — painted front icons (Economic $, Military shield, Diplomatic globe) and effects package B.
   Loaded after fx-v031.css; presentation only. */

/* ---------------------------------------------------------------- front icons: painted metal badges */
svg.ico-front{fill:none;stroke:none;overflow:visible;filter:drop-shadow(0 1px 1.5px #000c)}
/* the globe is dark blue on the navy seal: lift it a little */
svg.ico-diplomacy{filter:brightness(1.3) saturate(1.1) drop-shadow(0 0 1px #9fd0ff66) drop-shadow(0 1px 1.5px #000c)}
/* On Assets the front icon stands alone, larger, with no rarity seal behind it (rarity stays on the card border).
   Absolute so the percentage size resolves against the badge box (a grid row would leave the height auto). */
.face-seal:has(>svg.ico-front){width:max(20px,15.5cqw);height:max(20px,15.5cqw);right:2.6cqw;top:2.6cqw;filter:none}
.face-seal:has(>svg.ico-front)>.seal-shape{display:none}
/* a soft dark halo keeps the badge legible on bright art (silver bolt on paper, gold on sunsets) */
.face-seal:has(>svg.ico-front){background:radial-gradient(circle,rgba(4,10,16,.55) 0 30%,rgba(4,10,16,.25) 52%,transparent 72%);border-radius:50%}
.dossier-head .face-seal:has(>svg.ico-front){background:none}
.face-seal>svg.ico-front,.seal-rare>svg.ico-front,.seal-epic>svg.ico-front,.seal-legendary>svg.ico-front{position:absolute;left:0;top:0;width:100%;height:100%;filter:drop-shadow(0 .5cqw .8cqw #000e) drop-shadow(0 0 .4cqw #000a)}
.face-seal>svg.ico-diplomacy{filter:brightness(1.3) saturate(1.1) drop-shadow(0 0 .5cqw #9fd0ff55) drop-shadow(0 .5cqw .8cqw #000e)}
/* v032.1: in the preview panel the badge sits in the header row, top right (no offsets: cqw there would resolve against the viewport) */
.dossier-head .face-seal:has(>svg.ico-front){position:relative;right:auto;top:auto;width:40px;height:40px;margin-left:auto;align-self:flex-start}
/* blue badges are dark on the navy card: lift them like the globe */
.face-seal>svg.ico-ev-dip,.face-seal>svg.ico-rs-dip{filter:brightness(1.25) drop-shadow(0 0 .5cqw #9fd0ff55) drop-shadow(0 .5cqw .8cqw #000e)}
.fh-name svg.ico-front{width:21px;height:21px}
.ars-chip svg.ico-front{width:15px;height:15px}
.rs-front-name svg.ico-front{width:1.25em;height:1.25em}
@media (max-width:1450px){.fh-name svg.ico-front{width:17px;height:17px}}

/* empty positions: the front icon is a quiet, muted blue silhouette; it wakes up when the position can take the card.
   The three paintings differ a lot in brightness (gold $ mean luminance ~101, globe ~61, red shield ~41), so each gets
   its own brightness before the same blue tint; the three then read as one palette. */
.empty-slot svg.ico-front{opacity:.62;--k:1;filter:grayscale(1) brightness(var(--k)) sepia(.6) hue-rotate(168deg) saturate(2.2) drop-shadow(0 1px 1px #000a)}
.empty-slot svg.ico-economy{filter:grayscale(1) brightness(.6) contrast(.9) sepia(.6) hue-rotate(168deg) saturate(2.2) drop-shadow(0 1px 1px #000a)}
.empty-slot svg.ico-military{filter:grayscale(1) brightness(1.5) sepia(.6) hue-rotate(168deg) saturate(2.2) drop-shadow(0 1px 1px #000a)}
.empty-slot svg.ico-diplomacy{filter:grayscale(1) brightness(1) sepia(.6) hue-rotate(168deg) saturate(2.2) drop-shadow(0 1px 1px #000a)}
.field-slot.drop-valid .empty-slot svg.ico-front,.empty-slot.target-valid svg.ico-front,.field-slot.target-valid .empty-slot svg.ico-front{opacity:.85}
.field-slot.drop-valid .empty-slot svg.ico-economy,.empty-slot.target-valid svg.ico-economy,.field-slot.target-valid .empty-slot svg.ico-economy{filter:grayscale(1) brightness(.78) contrast(.9) sepia(.6) hue-rotate(168deg) saturate(2.6) drop-shadow(0 0 4px #6fb6e8aa)}
.field-slot.drop-valid .empty-slot svg.ico-military,.empty-slot.target-valid svg.ico-military,.field-slot.target-valid .empty-slot svg.ico-military{filter:grayscale(1) brightness(1.95) sepia(.6) hue-rotate(168deg) saturate(2.6) drop-shadow(0 0 4px #6fb6e8aa)}
.field-slot.drop-valid .empty-slot svg.ico-diplomacy,.empty-slot.target-valid svg.ico-diplomacy,.field-slot.target-valid .empty-slot svg.ico-diplomacy{filter:grayscale(1) brightness(1.3) sepia(.6) hue-rotate(168deg) saturate(2.6) drop-shadow(0 0 4px #6fb6e8aa)}

/* ---------------------------------------------------------------- package B: Shield break (Voronoi fracture) */
#duel-fx .fx-shield-break .sb-dark{fill:#020c1c;opacity:0}
#duel-fx .fx-shield-break .sb-frost{fill:#eaf8ff;opacity:.16}
#duel-fx .fx-shield-break polyline.sb-spoke{stroke-width:2.2px}
#duel-fx .fx-shield-break polyline.sb-wall{stroke-width:1.4px;stroke:#e4f6ff}
#duel-fx .fx-shield-break:not(.is-full) .sb-tint{opacity:.55}
#duel-fx .fx-shield-hot{position:absolute;z-index:5;width:46px;height:46px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0 14%,#d6f2ff 24%,rgba(110,200,255,.75) 42%,rgba(40,140,255,.25) 62%,transparent 72%)}
/* the absorption: a ring of hex cells runs out from the impact over the field */
@property --rr{syntax:'<length>';inherits:false;initial-value:0px}
#duel-fx .fx-hex-ripple{position:absolute;z-index:4;pointer-events:none;border-radius:6%/4.5%;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27.7128'%3E%3Cpath d='M8.00 0.00L16.00 4.62L16.00 13.86L8.00 18.48L0.00 13.86L0.00 4.62ZM16.00 13.86L24.00 18.48L24.00 27.71L16.00 32.33L8.00 27.71L8.00 18.48ZM0.00 13.86L8.00 18.48L8.00 27.71L0.00 32.33L-8.00 27.71L-8.00 18.48Z' fill='%2378c8ff' fill-opacity='.35' stroke='%23f2fbff' stroke-opacity='.95' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size:16px 27.7128px;filter:drop-shadow(0 0 4px #6fc8ff);
  -webkit-mask:radial-gradient(circle at var(--ix) var(--iy),transparent calc(var(--rr) - 26px),#000 calc(var(--rr) - 12px),#000 var(--rr),transparent calc(var(--rr) + 10px));
  mask:radial-gradient(circle at var(--ix) var(--iy),transparent calc(var(--rr) - 26px),#000 calc(var(--rr) - 12px),#000 var(--rr),transparent calc(var(--rr) + 10px))}

/* ---------------------------------------------------------------- package B: Shield gained */
#duel-fx .fx-shield-raise .sr-hex{position:absolute;inset:0;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27.7128'%3E%3Cpath d='M8.00 0.00L16.00 4.62L16.00 13.86L8.00 18.48L0.00 13.86L0.00 4.62ZM16.00 13.86L24.00 18.48L24.00 27.71L16.00 32.33L8.00 27.71L8.00 18.48ZM0.00 13.86L8.00 18.48L8.00 27.71L0.00 32.33L-8.00 27.71L-8.00 18.48Z' fill='%2378c8ff' fill-opacity='.22' stroke='%23e6f7ff' stroke-opacity='.85' stroke-width='.9'/%3E%3C/svg%3E");
  background-size:16px 27.7128px;-webkit-mask:linear-gradient(0deg,#000 55%,rgba(0,0,0,.35));mask:linear-gradient(0deg,#000 55%,rgba(0,0,0,.35))}
#duel-fx .fx-shield-raise .sr-edge{height:4px;box-shadow:0 0 6px #fff,0 0 14px #9ad9ff,0 0 30px #3a9cff,0 0 50px #2a8aff}
/* the lock: a card-shaped ring with a red/cyan split that snaps in */
#duel-fx .fx-lock-ring{position:absolute;z-index:5;pointer-events:none;border-radius:6%/4.5%;
  box-shadow:0 0 0 2px #f2fbff,3px 0 0 2px rgba(255,70,90,.75),-3px 0 0 2px rgba(60,220,255,.85),0 0 18px 4px rgba(120,200,255,.7),inset 0 0 18px rgba(160,225,255,.6)}

/* ---------------------------------------------------------------- package B: impact mark on a card hit in the Clash */
#duel-fx .fx-hit-mark{position:absolute;z-index:4;pointer-events:none;border-radius:6%/4.5%;overflow:hidden}
#duel-fx .fx-hit-mark .hm-light{position:absolute;inset:0;mix-blend-mode:screen;background:linear-gradient(var(--from),rgba(255,220,170,.75),rgba(255,140,80,.35) 22%,transparent 55%)}
#duel-fx .fx-hit-mark .hm-scorch{position:absolute;left:var(--hx);top:var(--hy);width:34%;aspect-ratio:1.5;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,240,214,.9) 0 5%,rgba(255,170,100,.75) 10%,rgba(170,60,28,.55) 20%,rgba(40,10,4,.6) 36%,rgba(20,6,2,.35) 54%,transparent 70%)}
#duel-fx .fx-hit-mark svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 2px #ff7a3c)}
#duel-fx .fx-hit-mark polyline{fill:none;stroke:#ffb066;stroke-width:1.8px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#duel-fx .fx-hit-mark.is-absorbed .hm-light{background:linear-gradient(var(--from),rgba(200,235,255,.7),rgba(110,190,255,.3) 22%,transparent 55%)}

/* ---------------------------------------------------------------- package B: Shield trail — sparks off the head; 3+ Shield adds a counter-rotating trail */
.shield-aura[data-shield="3"] .shield-trail:not(.rev),.shield-aura[data-shield="4"] .shield-trail:not(.rev){background:conic-gradient(from var(--shield-angle),transparent 0 28%,rgba(0,150,255,.12) 42%,rgba(0,185,255,.6) 72%,rgba(110,225,255,1) 88%,#ffffff 93%,transparent 94%)}
.shield-trail.rev{background:conic-gradient(from var(--shield-angle),transparent 0 6%,#ffffff 7%,rgba(110,225,255,1) 12%,rgba(0,185,255,.6) 28%,rgba(0,150,255,.12) 58%,transparent 72%);animation-direction:reverse}
.shield-sparks{position:absolute;inset:-11px;border-radius:inherit;padding:9px;pointer-events:none;opacity:.95;mix-blend-mode:screen;filter:drop-shadow(0 0 2px #8fd6ff) drop-shadow(0 0 4px #3a9cff);
  background:radial-gradient(circle,#ffffff 0 1.1px,transparent 1.7px) 0 0/23px 19px,radial-gradient(circle,#bfe8ff 0 .8px,transparent 1.4px) 7px 3px/29px 13px,radial-gradient(circle,#8fd6ff 0 1.3px,transparent 2px) 13px 9px/17px 31px;
  -webkit-mask:conic-gradient(from var(--shield-angle),transparent 0 84%,#000 89%,#000 92.5%,transparent 93.5%),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:source-in,xor;
  mask:conic-gradient(from var(--shield-angle),transparent 0 84%,#000 89%,#000 92.5%,transparent 93.5%),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:intersect,exclude;
  animation:shield-orbit 2.8s linear infinite,shield-spark-flick .21s steps(3,end) infinite}
@keyframes shield-spark-flick{to{background-position:11px 25px,-17px 8px,5px -22px}}
html.wo-reduced-motion .shield-sparks{display:none}