/* Both sides use the same readable playback, with their own field color. */
.action-feed.side-0{border-left-color:#a6e4ff;background:linear-gradient(100deg,#153a4bf5,#11202bf7 65%)}
.action-feed.side-0 .action-feed-label,.action-feed.side-0 .move-details{color:#b5e7ff}
.action-feed.side-0.playing{border-color:#81bedb}
#move-effects.side-0{--move-color:#a5e2ff;--move-glow:#56b7e999}
#move-effects.side-1{--move-color:#f0d295;--move-glow:#d6a84a99}
.move-link.side-0:not(.attack):not(.distort){color:#abedff}
.unit.flight-landing{animation-duration:var(--arrival-delay,900ms)}
.flying-card{border-color:var(--move-color,#f0d295);box-shadow:0 0 24px var(--move-glow,#d2b37e77);animation-duration:var(--move-duration,900ms)}
.flying-card.deploy-flight{animation-name:deploy-card}
.flying-card.move-flight{animation-name:travel-card}
.flying-card.compass-flight{animation-name:compass-card}
.flying-card.withdraw-flight{animation-name:recall-card}
.flying-card.equip-flight{animation-name:attach-card}
.flying-card.portal-departure,.flying-card.portal-arrival{border-color:#e0bcff;box-shadow:0 0 32px #be84eebb;animation-timing-function:ease-in-out}
.flying-card.portal-departure{animation-name:portal-collapse;animation-duration:var(--portal-half,450ms)}
.flying-card.portal-arrival{animation-name:portal-emerge;animation-duration:var(--portal-half,450ms);animation-delay:var(--portal-half,450ms)}
.travel-route{position:absolute;inset:0;width:100%;height:100%;color:#b9eaff;filter:drop-shadow(0 0 5px #6aaddc)}
.travel-route.side-1{color:#f0d295;filter:drop-shadow(0 0 5px #d2a85b)}
.travel-route path{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:7 9;stroke-linecap:round;animation:route-flow var(--move-duration,900ms) linear both}
.travel-route.withdraw-route{color:#c3d1df;opacity:.7}.travel-route.withdraw-route path{stroke-width:2;stroke-dasharray:3 10}
.move-ring{position:absolute;transform:translate(-50%,-50%);border:3px solid var(--move-color,#f0d295);border-radius:50%;box-shadow:0 0 24px var(--move-glow,#d2b37e77),inset 0 0 20px var(--move-glow,#d2b37e77);animation:ring-expand var(--move-duration,900ms) ease-out both}
.move-ring:before,.move-ring:after{content:'';position:absolute;border:1px solid currentColor;border-radius:50%;inset:8px}
.move-ring:after{inset:-12px;opacity:.45}
.move-ring.portal-out,.move-ring.portal-in{color:#dfb2ff;border-color:#d39bff;background:radial-gradient(ellipse,#100920b5 20%,#b372d857 50%,transparent 70%);box-shadow:0 0 36px #bc7bff99,inset 0 0 22px #cf99ffbb;animation-name:portal-vortex}
.move-ring.portal-in{animation-delay:var(--portal-half,450ms);animation-duration:var(--portal-half,450ms)}
.move-ring.hand-return{color:#d4e6ed;animation-name:hand-catch;max-width:130px;max-height:100px}
.move-ring.equip-ring{color:#ffe5a8;animation-name:gear-ring}
.move-ring.compass-out,.move-ring.compass-in{border-style:dashed;animation-name:compass-ring}
@keyframes deploy-card{0%{opacity:1;transform:translate(0,0) scale(.6) rotate(-7deg)}80%{opacity:1;transform:translate(var(--travel-x),var(--travel-y)) scale(1.07) rotate(1deg)}100%{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) scale(1)}}
@keyframes travel-card{0%{opacity:1;transform:translate(0,0) rotate(0)}45%{opacity:1;transform:translate(calc(var(--travel-x)*.45),calc(var(--travel-y)*.45 - 22px)) rotate(-4deg) scale(1.08)}90%{opacity:1}100%{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) rotate(0)}}
@keyframes recall-card{0%{opacity:1;transform:translate(0,0) scale(1)}40%{opacity:1;transform:translate(calc(var(--travel-x)*.35),calc(var(--travel-y)*.35 - 30px)) scale(.8) rotate(10deg)}100%{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) scale(.12) rotate(-16deg)}}
@keyframes compass-card{0%{opacity:1;transform:translate(0,0) scale(.9);filter:brightness(1)}30%{opacity:0;transform:translate(0,0) scale(.15);filter:brightness(2)}65%{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) scale(.2);filter:brightness(2)}85%{opacity:1;transform:translate(var(--travel-x),var(--travel-y)) scale(1.08)}100%{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) scale(1);filter:brightness(1)}}
@keyframes portal-collapse{0%{opacity:1;transform:scale(1);filter:brightness(1)}60%{opacity:1;transform:scaleX(.25) scaleY(1.15) rotate(7deg);filter:brightness(1.6)}100%{opacity:0;transform:scaleX(0) scaleY(.2) rotate(18deg);filter:brightness(2)}}
@keyframes portal-emerge{0%{opacity:0;transform:scaleX(0) scaleY(.2) rotate(-18deg);filter:brightness(2)}55%{opacity:1;transform:scaleX(.75) scaleY(1.1) rotate(-4deg);filter:brightness(1.4)}90%{opacity:1;transform:scale(1);filter:brightness(1)}100%{opacity:0;transform:scale(1)}}
@keyframes attach-card{0%{opacity:1;transform:translate(0,0) scale(.6)}75%{opacity:1;transform:translate(var(--travel-x),var(--travel-y)) scale(.85);filter:brightness(1.6)}100%{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) scale(.2);filter:brightness(2)}}
@keyframes route-flow{0%{stroke-dashoffset:30;opacity:0}20%,75%{opacity:.85}100%{stroke-dashoffset:-35;opacity:0}}
@keyframes ring-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}35%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes portal-vortex{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.1) rotate(-30deg)}25%,70%{opacity:1;transform:translate(-50%,-50%) scaleX(.75) rotate(20deg)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(.05) rotate(90deg)}}
@keyframes hand-catch{0%,60%{opacity:0;transform:translate(-50%,-50%) scale(.5)}80%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes gear-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-20deg)}55%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2) rotate(40deg)}}
@keyframes compass-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-80deg)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1) rotate(120deg)}}

/* Each actual point has its own readable celebration and counter step. */
.point-stage{--point:#a7e7ff;--point-rgb:100,197,242;position:fixed;inset:0;z-index:25;display:grid;place-items:center;pointer-events:none;padding:16px}
.point-stage.side-1{--point:#ffe0a0;--point-rgb:230,180,83}
.point-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(var(--point-rgb),.12),#02091245 62%);animation:point-veil .35s ease-out both}
.point-announcement{position:relative;isolation:isolate;width:min(430px,85vw);padding:24px 30px;text-align:center;border:1px solid rgba(var(--point-rgb),.8);border-radius:16px;background:linear-gradient(145deg,#0b1e2af7,#06111df5);box-shadow:0 0 0 5px rgba(var(--point-rgb),.07),0 0 70px rgba(var(--point-rgb),.25),0 25px 70px #000a;animation:point-reveal .5s cubic-bezier(.16,1,.3,1) both}
.point-owner{font-size:13px;font-weight:800;letter-spacing:.27em;color:var(--point)}
.point-gain{font-family:Georgia,serif;color:#fff;font-size:86px;line-height:1.1;text-shadow:0 0 26px rgba(var(--point-rgb),.6);margin:4px 0}
.point-gain>span{display:block;font-family:system-ui,sans-serif;font-size:14px;letter-spacing:.3em;color:var(--point);margin-top:1px}
.point-reason{font-size:14px;line-height:1.4;margin:14px 0;color:#e3edf5;overflow-wrap:anywhere}
.point-total{display:flex;gap:15px;align-items:baseline;justify-content:center;padding-top:12px;border-top:1px solid rgba(var(--point-rgb),.25);font-family:Georgia,serif;font-size:24px;color:#aab8c7}
.point-total strong{font-size:39px;color:var(--point);animation:point-counter .45s .12s ease-out both}.point-total small{font:9px system-ui,sans-serif;letter-spacing:.15em}
.point-rays{position:absolute;inset:0;z-index:-1;pointer-events:none}.point-rays i{position:absolute;left:50%;top:50%;height:4px;width:90px;background:linear-gradient(90deg,var(--point),transparent);transform-origin:left;animation:point-ray .8s ease-out both;--angle:calc(var(--ray)*45deg)}
.lane.scoring-location{border-color:#9ee2ff;box-shadow:0 0 20px #83d8ff66}.lane.scoring-location.side-1{border-color:#f1cb82;box-shadow:0 0 20px #e1b16666}
.score-awarded{animation:score-awarded .8s ease-out both}
@keyframes point-veil{from{opacity:0}to{opacity:1}}
@keyframes point-reveal{from{opacity:0;transform:translateY(15px) scale(.8)}to{opacity:1;transform:none}}
@keyframes point-counter{from{transform:scale(1.5);filter:brightness(1.8)}to{transform:scale(1);filter:brightness(1)}}
@keyframes point-ray{0%{opacity:0;transform:rotate(var(--angle)) translateX(35px) scaleX(.3)}25%{opacity:.7}100%{opacity:0;transform:rotate(var(--angle)) translateX(240px) scaleX(.8)}}

/* A transparent metal render of the supplied emblem emerges through a portal. */
dialog.end-cinematic{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#03070e;overflow:auto;color:#eef5ff}
dialog.end-cinematic::backdrop{background:#01040a}
dialog.end-cinematic>.dialog-head{display:none}
dialog.end-cinematic #dialog-body{padding:0;min-height:100%}
.ending-scene{--end:#b7e9ff;--end-rgb:105,183,237;position:relative;isolation:isolate;min-height:100dvh;display:grid;place-items:center;overflow:hidden;background:#03070e;padding:55px 24px 36px}
.ending-scene.defeat{--end:#f2c18f;--end-rgb:206,114,75}
.ending-scene.draw{--end:#ddc4ff;--end-rgb:161,117,232}
.ending-nebula{position:absolute;inset:-30%;z-index:-2;background:radial-gradient(ellipse at 50% 40%,rgba(var(--end-rgb),.3),transparent 40%),radial-gradient(ellipse at 20% 70%,#1c285d55,transparent 40%),radial-gradient(ellipse at 80% 20%,#48346733,transparent 35%);animation:ending-atmosphere 9s ease-out both}
.ending-stars{position:absolute;inset:0;z-index:-1;opacity:.45;background-image:radial-gradient(circle,#c0deff 1px,transparent 1.5px),radial-gradient(circle,#e5e6ff 1px,transparent 2px);background-size:131px 179px,227px 257px;background-position:20px 30px,65px 80px;mask-image:radial-gradient(ellipse,black,transparent 80%);animation:ending-stars 7s ease-out both}
.ending-content{width:min(100%,900px);display:grid;justify-items:center;text-align:center;gap:20px}
.ending-emblem{--portal-radius:clamp(90px,16.5vh,165px);width:clamp(180px,33vh,330px);aspect-ratio:1;position:relative;display:grid;place-items:center;isolation:isolate;perspective:800px}
.ending-logo{width:100%;height:auto;display:block;filter:drop-shadow(0 0 16px rgba(var(--end-rgb),.45));position:relative;z-index:2;animation:logo-through-portal 1.8s .75s cubic-bezier(.15,.7,.25,1) both}
.ending-emblem:before{content:'';position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(var(--end-rgb),.3),transparent 68%);filter:blur(22px)}
.ending-portal{position:absolute;inset:-13%;border-radius:50%;z-index:0;animation:portal-open 3.2s ease-out both}
.portal-depth{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(ellipse,#020711 25%,rgba(var(--end-rgb),.12) 54%,rgba(var(--end-rgb),.55) 68%,#c9f3ff88 70%,transparent 73%);box-shadow:0 0 55px rgba(var(--end-rgb),.25),inset 0 0 45px rgba(var(--end-rgb),.4);animation:portal-depth 4s ease-out both}
.portal-rim{position:absolute;inset:1%;padding:4px;border-radius:50%;background:conic-gradient(from 40deg,transparent,#ddf7ff 9%,rgba(var(--end-rgb),.15) 16%,transparent 24%,rgba(var(--end-rgb),.9) 38%,#fff 44%,transparent 51%,rgba(var(--end-rgb),.8) 67%,#dcf7ff 75%,transparent 86%,rgba(var(--end-rgb),.6));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 8px rgba(var(--end-rgb),.8));animation:portal-rim-turn 4s .15s cubic-bezier(.1,.5,.2,1) both}
.portal-rim.inner{inset:7%;padding:2px;animation-direction:reverse;opacity:.8}
.portal-sparks{position:absolute;inset:0;pointer-events:none}.portal-sparks i{--angle:calc(var(--spark)*12.857deg);position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#ddf8ff;box-shadow:0 0 5px var(--end);animation:portal-spark 1.9s calc(.35s + var(--spark)*.022s) ease-out both}
.ending-light{position:absolute;left:-65%;right:-65%;top:49%;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--end-rgb),.25),#fff,rgba(var(--end-rgb),.25),transparent);box-shadow:0 0 15px rgba(var(--end-rgb),.7);z-index:3;animation:ending-flare 1.5s 1.1s ease-out both}
.ending-result{width:100%;max-width:650px}
.ending-brand{font-family:Georgia,serif;letter-spacing:.3em;color:#e7f0fa;font-size:18px;animation:ending-text 1s 2.1s ease-out both}
.ending-caption{font-size:9px;text-transform:uppercase;letter-spacing:.25em;color:#8ca6bc;margin:11px 0 18px;animation:ending-text .8s 2.35s ease-out both}
.ending-title{font-family:Georgia,serif;font-size:clamp(32px,5vw,58px);font-weight:400;letter-spacing:.13em;color:var(--end);line-height:1.2;text-shadow:0 0 30px rgba(var(--end-rgb),.5);animation:ending-title 1s 2.55s cubic-bezier(.16,1,.3,1) both}
.ending-subtitle{font-size:13px;color:#b6c9d9;line-height:1.5;margin-top:12px;animation:ending-text .8s 2.75s ease-out both}
.cinematic-score{display:flex;align-items:center;justify-content:center;gap:35px;margin:24px 0 12px;animation:ending-text .8s 3s ease-out both}
.cinematic-score>div{min-width:95px}.cinematic-score>div>span{display:block;font:9px system-ui,sans-serif;letter-spacing:.2em;padding:0;color:#9cabbc}
.cinematic-score strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:76px;line-height:1.15;color:#a3b7c9}.cinematic-score .winner strong{color:#fff;text-shadow:0 0 25px rgba(var(--end-rgb),.45)}
.cinematic-score .score-divider{font-size:32px;font-weight:400;color:#4a6377;padding:0}
.ending-round{font-size:10px;letter-spacing:.08em;color:#839bb0;animation:ending-text .8s 3.2s ease-out both}
.ending-result .end-actions{margin-top:26px;gap:12px;animation:ending-text .8s 3.35s ease-out both;flex-wrap:wrap}
.ending-result .end-actions button{min-width:130px;min-height:43px;border-color:rgba(var(--end-rgb),.4);background:#112536;color:#cde5f5}
.ending-result .end-actions .primary{background:var(--end);color:#071624;font-weight:700}
.ending-skip-button{position:absolute;right:18px;top:15px;z-index:8;background:#10202c99;border:1px solid #6b839255;color:#bdcddd;font-size:10px;padding:9px 13px}
.ending-skip .ending-scene *{animation:none!important;opacity:1;transform:none}.ending-skip .ending-light,.ending-skip .ending-skip-button,.ending-skip .portal-sparks{display:none}.ending-skip .ending-portal{opacity:.35}
@keyframes portal-open{0%{opacity:0;transform:scaleX(.015) scaleY(.4)}12%{opacity:1;transform:scaleX(.035) scaleY(.85)}32%{opacity:1;transform:scaleX(1) scaleY(1)}55%{opacity:.95;transform:scale(1.05)}100%{opacity:.35;transform:scale(1)}}
@keyframes portal-depth{0%{filter:brightness(.5)}35%{filter:brightness(1.5)}100%{filter:brightness(.7)}}
@keyframes portal-rim-turn{from{transform:rotate(-150deg)}to{transform:rotate(190deg)}}
@keyframes portal-spark{0%{opacity:0;transform:rotate(var(--angle)) translateX(calc(var(--portal-radius)*.7)) scale(.5)}25%{opacity:.9}100%{opacity:0;transform:rotate(calc(var(--angle) + 25deg)) translateX(calc(var(--portal-radius)*1.55)) scale(.1)}}
@keyframes logo-through-portal{0%{opacity:0;transform:translateZ(-220px) scale(.12) rotateY(65deg);clip-path:circle(0% at 50% 50%);filter:blur(8px) brightness(2)}45%{opacity:1;clip-path:circle(70% at 50% 50%);filter:blur(1px) brightness(1.7)}75%{transform:translateZ(18px) scale(1.04) rotateY(-4deg)}100%{opacity:1;transform:translateZ(0) scale(1) rotateY(0);clip-path:circle(75% at 50% 50%);filter:drop-shadow(0 0 16px rgba(var(--end-rgb),.45))}}
@keyframes ending-flare{0%{opacity:0;transform:scaleX(.1)}35%{opacity:.9;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.4)}}
@keyframes ending-atmosphere{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ending-stars{from{opacity:0;transform:scale(1.15)}to{opacity:.45;transform:scale(1)}}
@keyframes ending-text{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ending-title{from{opacity:0;letter-spacing:.35em;transform:translateY(10px) scale(1.1)}to{opacity:1;letter-spacing:.13em;transform:none}}
@media(max-width:600px){
 .point-announcement{width:min(360px,86vw);padding:19px 20px}.point-gain{font-size:68px}.point-owner{font-size:11px}.point-reason{font-size:12px}.point-total{font-size:20px}.point-total strong{font-size:32px}
 .ending-scene{padding:50px 20px 28px}.ending-emblem{--portal-radius:clamp(80px,14vh,135px);width:clamp(160px,28vh,270px)}.ending-content{gap:18px}.ending-brand{font-size:14px}.ending-caption{margin-bottom:13px}.ending-title{font-size:35px}.ending-subtitle{font-size:12px}
 .cinematic-score{gap:25px;margin-top:18px}.cinematic-score strong{font-size:64px}.ending-result .end-actions{margin-top:22px}
}
@media(orientation:landscape) and (max-height:600px){
 .point-announcement{padding:12px 25px;width:390px}.point-owner{font-size:10px}.point-gain{font-size:52px}.point-gain>span{font-size:10px}.point-reason{margin:8px 0;font-size:11px}.point-total{padding-top:7px;font-size:18px}.point-total strong{font-size:28px}
 .ending-scene{padding:44px 35px 24px}.ending-content{grid-template-columns:minmax(160px,.85fr) minmax(290px,1.15fr);gap:40px;align-items:center;width:min(100%,1050px)}
 .ending-emblem{--portal-radius:min(16vw,31.5vh);width:min(32vw,63vh)}.ending-brand{font-size:13px}.ending-caption{font-size:8px;margin:6px 0 10px}.ending-title{font-size:clamp(24px,4vw,40px)}.ending-subtitle{font-size:11px;margin-top:7px}
 .cinematic-score{margin:13px 0 8px;gap:22px}.cinematic-score strong{font-size:53px}.cinematic-score>div{min-width:75px}.ending-round{font-size:9px}.ending-result .end-actions{margin-top:15px}.ending-result .end-actions button{min-height:36px;font-size:11px;min-width:110px}
}
@media(prefers-reduced-motion:reduce){
 .point-stage *,.ending-scene *{animation:none!important;transition:none!important;transform:none;opacity:1}.point-rays,.ending-light,.portal-sparks{display:none}.ending-stars{opacity:.3}.ending-portal{opacity:.35}.ending-skip-button{display:none}
 .unit.flight-landing{opacity:1;animation:none!important}
}