/* Test74.3 — a single, finite reveal. Only opacity and transforms animate. */
body.arena74.arena52.arena58 #detail-dialog[data-surface="faction-draw"]{inset:0;margin:auto;padding:0;width:min(600px,calc(100vw - 24px));max-width:600px;max-height:calc(100svh - 24px);border:1px solid #ac957360;border-radius:28px;background:#0b141e;box-shadow:0 32px 110px #000b;overflow:auto;isolation:isolate}
body.arena74.arena52.arena58 #detail-dialog[data-surface="faction-draw"]::backdrop{background:#02070de8;backdrop-filter:blur(12px)}
body.arena74.arena52.arena58 #detail-dialog[data-surface="faction-draw"] #close-dialog{position:absolute;top:12px;right:12px;margin:0;background:#0a162dcc;border-color:#bba88240}
.arena74 .faction-reveal{position:relative;isolation:isolate;min-height:644px;overflow:hidden;text-align:center;color:#f7f2e7;background:radial-gradient(ellipse at 50% 42%,var(--draw-surface),#08111c 75%);padding:38px 28px 28px}
.arena74 .draw-landscape{position:absolute;inset:0;z-index:-1;opacity:0;animation:draw-landscape 2800ms ease-out both;pointer-events:none}
body.arena74.arena52.arena58 .draw-landscape .faction-landscape{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 35%;border:0;border-radius:0;filter:none;opacity:1;mask-image:linear-gradient(#0008,#0009 35%,#0000 90%)}
.arena74 .draw-heading{position:relative;z-index:3;min-height:80px;padding:0 16px}
.arena74 .draw-heading .eyebrow{color:#dec9a6;font-size:10px;letter-spacing:.23em;text-transform:uppercase}
.arena74 #dialog-body .draw-heading h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(26px,6vw,38px);line-height:1.12;letter-spacing:-.025em;margin:14px 0 0;padding:0;text-wrap:balance;text-shadow:0 2px 20px #0009}
.arena74 .draw-stage{width:280px;height:280px;position:relative;left:50%;margin:4px 0 8px -140px;pointer-events:none}
.arena74 .draw-halo{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,var(--draw-accent),transparent 65%);opacity:.1;animation:draw-halo 2800ms ease-in-out both}
.arena74 .draw-ring{position:absolute;inset:12%;border:1px solid #c8ae7755;border-radius:50%;box-shadow:0 0 0 6px #d5b98306,0 0 0 7px #d5b98317,inset 0 0 28px #0005}
.arena74 .draw-ring:before,.arena74 .draw-ring:after{content:'';position:absolute;inset:-6px;border:1px solid transparent;border-top-color:#dcc69b;border-bottom-color:#dcc69b;border-radius:50%;opacity:.6}
.arena74 .draw-ring:after{inset:10px;transform:rotate(90deg);opacity:.3}
.arena74 .draw-ring-outer{animation:draw-ring 2800ms cubic-bezier(.16,1,.3,1) both}
.arena74 .draw-ring-inner{inset:24%;border-style:dashed;border-color:#d8c29344;animation:draw-inner 2800ms ease-out both}
.arena74 .draw-constellation{position:absolute;inset:0;animation:draw-orbit 2800ms cubic-bezier(.2,.65,.25,1) both}
.arena74 .draw-constellation>span{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;transform:rotate(var(--orbit)) translateY(-119px) rotate(calc(0deg - var(--orbit)));border:1px solid #d5c29340;background:linear-gradient(150deg,#25323ce6,#09101be6);border-radius:50%;box-shadow:0 4px 16px #0007;display:grid;place-items:center}
body.arena74.arena52.arena58 .draw-constellation .faction-emblem{width:34px;height:34px;object-fit:contain;margin:0;border:0;filter:drop-shadow(0 2px 3px #0009)}
.arena74 .draw-seal{position:absolute;inset:32%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:50%;border:1px solid #c9ac7770;background:radial-gradient(circle at 35% 25%,#585247,#161d27 70%);color:#e8d3a9;box-shadow:inset 0 0 0 5px #141d26,inset 0 0 0 6px #bda27635,0 10px 35px #0008;animation:draw-seal 2800ms ease-in-out both}
.arena74 .draw-seal .ui-icon{width:34px;height:34px}.arena74 .draw-seal>span{font:11px Georgia,serif;letter-spacing:.24em;padding-left:.24em}
.arena74 .draw-rays{position:absolute;inset:4%;background:conic-gradient(from 15deg,transparent 0deg 35deg,#e6d5a22b 45deg,transparent 55deg 115deg,#e6d5a226 125deg,transparent 135deg 215deg,#e6d5a226 225deg,transparent 235deg 295deg,#e6d5a22b 305deg,transparent 315deg);border-radius:50%;mask-image:radial-gradient(circle,#0000 20%,#0008 40%,#0000 70%);animation:draw-rays 2800ms ease-out both}
.arena74 .draw-crest{position:absolute;inset:19%;display:grid;place-items:center;animation:draw-crest 2800ms cubic-bezier(.16,1,.3,1) both}
body.arena74.arena52.arena58 .draw-crest .faction-emblem{width:100%;height:100%;max-width:none;object-fit:contain;border:0;margin:0;filter:drop-shadow(0 12px 16px #000a) drop-shadow(0 0 22px #dfc49628)}
.arena74 .draw-dust{position:absolute;inset:0;animation:draw-dust 2800ms ease-out both}
.arena74 .draw-dust i{position:absolute;left:50%;top:50%;width:3px;height:3px;background:var(--draw-accent);border-radius:50%;transform:rotate(var(--ray)) translateY(-105px);box-shadow:0 0 8px var(--draw-accent)}
.arena74 .draw-copy{position:relative;z-index:2;min-height:176px}
.arena74 #dialog-body #draw-status{font-size:12px;line-height:1.5;color:#c6ccd0;margin:0 0 12px}
.arena74 #dialog-body .draw-motto{font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.4;color:var(--draw-accent);margin:0 0 16px;text-wrap:balance}
.arena74 .draw-generals{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:22px}
.arena74 .draw-generals>span{display:flex;align-items:center;gap:9px;font-size:13px}
body.arena74.arena52.arena58 .draw-generals .general-art{position:relative;inset:auto;width:40px;height:48px;min-width:40px;aspect-ratio:auto;margin:0;border-radius:10px;border:1px solid #c2ad7955;overflow:hidden}
.arena74 #draw-continue{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;max-width:360px;margin:0 auto;border:1px solid #e2c793;background:linear-gradient(115deg,#e5cf9d,#b89860);color:#18202b;box-shadow:0 8px 28px #0004;font-weight:700;border-radius:14px}
.arena74 #draw-continue .ui-icon:last-child{margin-left:auto}.arena74 #draw-continue>span{margin-right:auto}
.arena74 #draw-skip{display:flex;align-items:center;justify-content:center;gap:7px;margin:18px auto 0;min-height:48px;padding:8px 20px;border:1px solid #a3b3bd42;border-radius:30px;background:#0c1828aa;color:#dde4e8;font-size:12px}
.arena74 #draw-result[hidden],.arena74 #draw-skip[hidden]{display:none}
.arena74 .faction-reveal[data-revealed="true"] .draw-landscape{animation:none;opacity:.65}
.arena74 .faction-reveal[data-revealed="true"] .draw-crest{animation:none;opacity:1;transform:none}
.arena74 .faction-reveal[data-revealed="true"] .draw-halo{animation:none;opacity:.23;transform:none}
.arena74 .faction-reveal[data-revealed="true"] .draw-ring{animation:none;opacity:.45;transform:rotate(70deg)}
.arena74 .faction-reveal[data-revealed="true"] .draw-ring-inner{transform:rotate(-100deg)}
.arena74 .faction-reveal[data-revealed="true"] .draw-constellation,.arena74 .faction-reveal[data-revealed="true"] .draw-seal,.arena74 .faction-reveal[data-revealed="true"] .draw-rays,.arena74 .faction-reveal[data-revealed="true"] .draw-dust{animation:none;opacity:0}
@keyframes draw-landscape{0%,46%{opacity:0;transform:scale(1.06)}100%{opacity:.65;transform:scale(1)}}
@keyframes draw-ring{0%{opacity:0;transform:rotate(-90deg) scale(.8)}25%{opacity:1}100%{opacity:.45;transform:rotate(70deg) scale(1)}}
@keyframes draw-inner{0%{opacity:0;transform:rotate(40deg) scale(.75)}25%{opacity:.7}100%{opacity:.45;transform:rotate(-100deg) scale(1)}}
@keyframes draw-orbit{0%{opacity:0;transform:rotate(-18deg) scale(.88)}18%,40%{opacity:1}62%,100%{opacity:0;transform:rotate(14deg) scale(.35)}}
@keyframes draw-seal{0%{opacity:0;transform:scale(.75)}18%,43%{opacity:1;transform:scale(1)}58%,100%{opacity:0;transform:scale(.65)}}
@keyframes draw-halo{0%{opacity:0;transform:scale(.7)}48%{opacity:.14}66%{opacity:.35;transform:scale(1.2)}100%{opacity:.23;transform:scale(1)}}
@keyframes draw-crest{0%,49%{opacity:0;transform:scale(.65) translateY(10px)}78%,100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes draw-rays{0%,45%{opacity:0;transform:scale(.5) rotate(-20deg)}64%{opacity:.8}100%{opacity:0;transform:scale(1.25) rotate(20deg)}}
@keyframes draw-dust{0%,50%{opacity:0;transform:scale(.3) rotate(-8deg)}68%{opacity:.6}100%{opacity:0;transform:scale(1.2) rotate(8deg)}}
@media(max-width:420px){.arena74 .faction-reveal{padding:34px 18px 24px;min-height:620px}.arena74 .draw-stage{margin-top:0;transform:scale(.92);margin-bottom:-8px}.arena74 .draw-generals{gap:18px}}
@media(max-height:640px){.arena74 .faction-reveal{min-height:0;padding-top:24px}.arena74 .draw-heading{min-height:64px}.arena74 .draw-stage{width:280px;height:280px;transform:scale(.65);transform-origin:top center;margin:0 0 -90px -140px}.arena74 .draw-generals{margin-bottom:12px}.arena74 #dialog-body .draw-motto{margin-bottom:10px}.arena74 .draw-copy{min-height:0}}
@media(prefers-reduced-motion:reduce){.arena74 .faction-reveal *{animation:none!important;transition:none!important}}