/* Ravendral · fondo cinematografico (portada y servidores) */
.cine{position:fixed;inset:0;z-index:0;overflow:hidden;background:#06100c;pointer-events:none}
.cine::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 65% 45%,rgba(5,11,14,0) 40%,rgba(5,11,14,.5) 100%),linear-gradient(90deg,rgba(5,11,14,.78) 0%,rgba(5,11,14,.38) 34%,rgba(5,11,14,0) 58%),linear-gradient(180deg,rgba(5,11,14,.3),rgba(5,11,14,0) 18%,rgba(5,11,14,0) 78%,rgba(5,11,14,.75));z-index:3}
.cine-stage{position:absolute;width:1672px;height:941px;transform-origin:0 0;transform:scale(var(--fit,1));animation:cineCam 80s ease-in-out infinite alternate;will-change:transform}
@keyframes cineCam{from{transform:scale(var(--fit,1)) translate(0,0)}to{transform:scale(calc(var(--fit,1) * 1.09)) translate(-46px,-24px)}}
.cine-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.06) brightness(1)}
.cine-lines{position:absolute;inset:0;width:100%;height:100%}
.cine-lines path{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:16 10;animation:cineDash 1.6s linear infinite}
.cine-lines path.own{stroke:#e2c773;opacity:.75}.cine-lines path.enemy{stroke:#f16459;opacity:.8}
.cine-lines path.front{stroke:#ff3b3b;stroke-width:4;stroke-dasharray:10 8;opacity:.75;filter:drop-shadow(0 0 6px #ff3b3b)}
@keyframes cineDash{to{stroke-dashoffset:-26}}
.cine-u{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);offset-path:var(--p);offset-rotate:auto;animation:cineMove var(--d) linear var(--dl) infinite;z-index:2}
.cine-u img{width:100%;height:100%;object-fit:contain;transform:rotate(var(--r,45deg));filter:drop-shadow(3px 6px 4px rgba(0,0,0,.6))}
@keyframes cineMove{from{offset-distance:0%}to{offset-distance:100%}}
.cine-u.jet::before{content:"";position:absolute;right:55%;top:50%;width:190px;height:5px;margin-top:-2.5px;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55));filter:blur(1px)}
.cine-u.enemy img{filter:drop-shadow(3px 6px 4px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(241,100,89,.55))}
.cine-fx{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;background:url(/graphics-pro/assets/fx/explosion.webp) center/contain no-repeat;opacity:0;animation:cineBlast 6.8s ease-out var(--dl) infinite;z-index:2;mix-blend-mode:screen}
@keyframes cineBlast{0%{opacity:0;transform:scale(.3)}3%{opacity:1;transform:scale(.8)}14%{opacity:0;transform:scale(1.35)}100%{opacity:0}}
.cine-smoke{position:absolute;width:140px;height:140px;margin:-70px 0 0 -70px;background:url(/graphics-pro/assets/fx/smoke.webp) center/contain no-repeat;opacity:0;animation:cineSmoke 6.8s ease-out var(--dl) infinite;z-index:1}
@keyframes cineSmoke{0%{opacity:0;transform:translate(0,0) scale(.5)}10%{opacity:.75}60%{opacity:0;transform:translate(26px,-60px) scale(1.6)}100%{opacity:0}}
.cine-radar{position:absolute;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;border:1px solid rgba(150,245,210,.45);background:conic-gradient(from 0deg,transparent 0deg,transparent 200deg,rgba(150,245,210,.12) 290deg,rgba(150,245,210,.5) 358deg,rgba(230,255,245,.9) 360deg);animation:cineSweep 4s linear infinite;z-index:1}
@keyframes cineSweep{to{transform:rotate(360deg)}}
.cine-stage.still,.cine-stage.still *{animation:none!important}
@media (max-width:900px){.cine::after{background:linear-gradient(180deg,rgba(5,11,14,.55),rgba(5,11,14,.35) 40%,rgba(5,11,14,.92))}}

/* 5.10.36 · unidades 2.5D: no se giran (la vista ya lleva la orientacion) */
.cine-u{offset-rotate:0deg!important}.cine-u img{transform:none!important;filter:drop-shadow(2px 5px 4px rgba(0,0,0,.55))!important}
.cine-u.jet::before{right:auto!important;left:50%!important;top:50%!important;width:5px!important;height:190px!important;margin:0 0 0 -2.5px!important;transform-origin:50% 0!important;transform:rotate(calc(var(--hd,0deg) + 180deg))!important;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))!important}
/* 5.10.36 · portada: mapa del teatro bien visible; el texto se protege solo a la izquierda */
.cine::after{background:radial-gradient(ellipse at 62% 45%,rgba(5,11,14,0) 45%,rgba(5,11,14,.35) 100%),linear-gradient(90deg,rgba(5,11,14,.72) 0%,rgba(5,11,14,.38) 30%,rgba(5,11,14,0) 52%),linear-gradient(180deg,rgba(5,11,14,.25),rgba(5,11,14,0) 16%,rgba(5,11,14,0) 82%,rgba(5,11,14,.7))!important}
.cine-map{filter:saturate(1.3) contrast(1.1) brightness(1.42)!important}
/* mientras carga el mapa: degradado del mismo tono (nunca negro) y fundido al aparecer */
.cine{background:radial-gradient(ellipse at 60% 40%,#3f5a3a 0%,#2a4030 45%,#14231d 100%)!important}
.cine-map{opacity:0;transition:opacity .8s ease}.cine-map.ready{opacity:1}
.cine::after{background:radial-gradient(ellipse at 66% 45%,rgba(5,11,14,0) 40%,rgba(5,11,14,.4) 100%),linear-gradient(90deg,rgba(5,11,14,.88) 0%,rgba(5,11,14,.78) 30%,rgba(5,11,14,.35) 48%,rgba(5,11,14,0) 62%),linear-gradient(180deg,rgba(5,11,14,.35),rgba(5,11,14,0) 16%,rgba(5,11,14,0) 82%,rgba(5,11,14,.75))!important}
.cine-map{filter:saturate(1.25) contrast(1.08) brightness(1.25)!important}