/* Phase 3: AAA action presentation. Short, state-driven effects only; no continuous GPU loops. */

/* Physical deck origins make draws and rival actions spatially legible. */
.opponent-overview,.player-overview{position:relative}
.physical-deck{position:absolute;z-index:4;width:42px;height:58px;display:grid;place-items:end center;padding-bottom:3px;border:1px solid #c19a5f73;border-radius:3px;background:repeating-linear-gradient(90deg,#d8c49b 0 1px,#6e5437 1px 2px) 2px 2px/calc(100% - 4px) calc(100% - 4px) no-repeat,linear-gradient(145deg,#3d2525,#120b0e);box-shadow:-2px 3px 0 #9a805c,-4px 6px 0 #4c3928,0 8px 13px #000a,inset 0 0 0 3px #12090a;color:#e4cc91;pointer-events:none;transform:rotate(var(--deck-angle));transform-origin:center bottom}
.physical-deck::before{content:"✦";position:absolute;inset:8px 7px 17px;display:grid;place-items:center;border:1px solid #c29b5e6b;background:radial-gradient(circle,#b98c4c38,transparent 65%);color:#d7b870;font:12px Cinzel,serif}
.physical-deck i{position:absolute;inset:2px;border:1px solid #ead9ad2b}
.physical-deck span{position:relative;z-index:1;padding:1px 3px;background:#100a09d9;color:#c6b48f;font:600 6px Cinzel,serif;letter-spacing:.12em;text-transform:uppercase}
.opponent-deck{left:30px;top:31px;--deck-angle:2deg}.player-deck{left:30px;top:50%;--deck-angle:-2deg;transform:translateY(-50%) rotate(var(--deck-angle))}
/* Keep the decorative decks over the portrait rail, never between readable stats. */
.player-overview .mage-identity{gap:4px}.player-overview .mage-name{flex:0 0 auto;transform:translateY(-6px)}

/* Engraved conduits brighten only while an action is being staged. */
.arcane-conduits{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.arcane-conduits i{position:absolute;left:50%;top:50%;width:48%;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,#d7b76c4d,transparent);box-shadow:0 0 4px #d7b76c1f;opacity:.35}
.arcane-conduits [data-conduit="opponent"]{transform:rotate(-90deg)}.arcane-conduits [data-conduit="catastrophe"]{transform:rotate(180deg)}.arcane-conduits [data-conduit="grimoire"]{transform:rotate(0)}.arcane-conduits [data-conduit="player"]{transform:rotate(90deg)}
.arena-focused{z-index:3;box-shadow:inset 0 0 42px #d8b76b1c,0 0 0 1px #e2c47e52,0 12px 40px #0008}
.arena-focused .arcane-conduits i{opacity:.85;box-shadow:0 0 8px #d8b76b5c}
.middle-zone>.panel::before{transition:background-color .2s ease}
@supports selector(:has(*)){.middle-zone:has(.arena-focused)>.panel::before{z-index:0;background-color:#05030247}}
.impact-surface{position:absolute;z-index:0;inset:0;pointer-events:none}

/* Travel effects use one transient node per staged card, capped in motion.js. */
.action-trail{position:absolute;left:var(--x);top:var(--y);z-index:4;width:13px;height:18px;border:1px solid var(--trail-color);border-radius:2px;background:linear-gradient(145deg,#f1dfb4,var(--trail-color) 18%,#1a1010 22% 100%);box-shadow:0 0 13px var(--trail-color),0 4px 7px #0008;will-change:transform,opacity}
.action-trail::after{content:"";position:absolute;right:50%;top:50%;width:48px;height:2px;background:linear-gradient(90deg,transparent,var(--trail-color));filter:drop-shadow(0 0 4px var(--trail-color));transform:translateY(-50%)}
.action-trail-spell{width:9px;height:9px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 7px 3px var(--trail-color),0 0 22px 8px color-mix(in srgb,var(--trail-color) 55%,transparent)}
.action-trail-spell::after{width:82px;height:3px}

/* Short-lived elemental impact marks. They fade completely and never accumulate in the DOM. */
.impact-mark{position:absolute;left:var(--x);top:var(--y);z-index:3;width:var(--impact-size);aspect-ratio:1;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 0 9px var(--impact-color))}
.impact-mark-fire{background:repeating-conic-gradient(from 8deg,transparent 0 16deg,var(--impact-color) 17deg 18deg,transparent 19deg 44deg);clip-path:polygon(50% 0,60% 35%,91% 13%,70% 44%,100% 55%,66% 61%,87% 93%,57% 70%,43% 100%,38% 68%,4% 86%,31% 58%,0 43%,35% 42%)}
.impact-mark-water{border:3px solid var(--impact-color);border-radius:50%;box-shadow:inset 0 0 0 8px transparent,inset 0 0 0 10px var(--impact-color),0 0 0 18px transparent,0 0 0 20px color-mix(in srgb,var(--impact-color) 55%,transparent)}
.impact-mark-stone{background:repeating-conic-gradient(from 18deg,transparent 0 19deg,var(--impact-color) 20deg 22deg,transparent 23deg 48deg);clip-path:polygon(50% 0,57% 42%,84% 16%,62% 47%,100% 50%,64% 55%,82% 86%,57% 60%,50% 100%,45% 61%,14% 84%,40% 55%,0 50%,41% 47%,16% 14%,45% 42%)}
.impact-mark-wind{border:3px solid var(--impact-color);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-shadow:14px -7px 0 -11px var(--impact-color),26px 4px 0 -10px var(--impact-color)}
.impact-mark-nature{background:radial-gradient(ellipse at 50% 82%,var(--impact-color) 0 5%,transparent 6%),conic-gradient(from 8deg at 50% 82%,transparent 0 8%,var(--impact-color) 9% 11%,transparent 12% 23%,var(--impact-color) 24% 27%,transparent 28% 72%,var(--impact-color) 73% 76%,transparent 77% 89%,var(--impact-color) 90% 92%,transparent 93%)}

/* Victory tableau turns the existing result dialog into a ceremonial artifact. */
.end-dialog{isolation:isolate;overflow:hidden}
.victory-tableau{position:absolute;z-index:1;left:50%;top:44%;width:min(370px,72%);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;opacity:.78}
.tableau-ray{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 4deg,#e8ca7840 0 1deg,transparent 1deg 12deg);mask-image:radial-gradient(circle,transparent 0 21%,#000 22% 56%,transparent 74%)}
.tableau-crest{position:relative;width:82px;aspect-ratio:1;display:grid;place-items:center;border:3px double #e6c46d;border-radius:50%;background:radial-gradient(circle,#9b713d,#24130f 68%);box-shadow:0 0 0 8px #160c0a,0 0 0 10px #b78d4b99,0 0 30px #d9b45b5c;color:#ffe6a1;font:36px Cinzel,serif;text-shadow:0 0 12px #fff0ae}
.tableau-laurel{position:absolute;top:24%;width:32%;height:52%;border:5px double #c6a352;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%}
.tableau-laurel-left{left:17%;transform:rotate(-18deg);border-right-color:transparent}.tableau-laurel-right{right:17%;transform:rotate(18deg);border-left-color:transparent}
.end-dialog[data-outcome="defeat"] .victory-tableau{filter:grayscale(.7) brightness(.62)}.end-dialog[data-outcome="defeat"] .tableau-crest{color:#aeb5bd;border-color:#777f87}.end-dialog[data-outcome="draw"] .victory-tableau{filter:saturate(.55)}
.end-dialog .end-copy{position:relative;z-index:2}

@media(min-width:1200px) and (min-height:680px){
  .opponent-deck,.player-deck{left:30px;width:38px;height:53px}
}
@media(max-width:1199px),(max-height:679px){
  .physical-deck{display:none}
  @supports selector(:has(*)){.middle-zone:has(.arena-focused)>.panel::before{background-color:transparent}}
}
@media(max-width:800px){
  .victory-tableau{top:31%;width:300px;opacity:.58}
  .tableau-crest{width:64px;font-size:27px}
}
@media(prefers-reduced-motion:reduce){
  .action-trail,.impact-mark{display:none}
  .middle-zone>.panel::before{transition:none}
  @supports selector(:has(*)){.middle-zone:has(.arena-focused)>.panel::before{background-color:transparent}}
}