/* V5 ASHEN CINEMA — high fidelity photographic 2.5D combat composition.
   Cinematic art is intentionally labeled differently from true animated WebGL GLB. */
:root{--cinema-gold:#dcb894;--cinema-rim:#8e6d52;--cinema-text:#f6ecda;--cinema-red:#dd7064}
body{background:radial-gradient(ellipse 95% 35% at 50% -5%,#8e554417,transparent 78%),#050508}
.app{max-width:1160px;padding-left:16px;padding-right:16px}
.topbar{height:75px;padding:4px 7px 7px}.brand-icon{width:49px;height:49px;border-radius:50%;font-size:24px;border-color:#bc9567aa}
.brand h1{font:700 clamp(18px,2vw,24px) Georgia,serif;letter-spacing:2px}
.eyebrow{letter-spacing:3.2px;color:#e5b782}
.hero-summary{gap:6px;margin:4px 0 8px}
.summary-stat{min-height:70px;border-radius:5px;padding:10px 17px;background:linear-gradient(125deg,#14161e,#0d1016 90%);border:1px solid #6f5d5070}
.summary-stat:after{left:0;right:0;background:linear-gradient(90deg,transparent,#c49c74c8,transparent)}
.summary-stat strong{font-size:clamp(23px,3vw,32px);font-family:Georgia,serif;line-height:1}
.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:min(720px,72vw);min-height:570px;border-radius:6px;position:relative;border:1px solid #93755a8c;box-shadow:0 0 0 1px #171618,0 24px 64px #000b}
.arena-top{z-index:23;top:18px;left:28px;right:22px}
.arena-top h2{font:700 clamp(26px,3.3vw,38px)/1.07 Georgia,serif;max-width:350px;text-shadow:0 2px 22px #000,0 6px 30px #000;letter-spacing:.2px}
.stage-pill{color:#ffe4c0;min-width:107px;background:#090b10e9}
.display-mode{position:absolute;right:23px;top:125px;z-index:32;height:38px;padding:0 15px;font-size:10px;font-weight:800;letter-spacing:.8px;color:#e7c5a0;background:linear-gradient(#2c221ddc,#14151cde);border:1px solid #987758;border-radius:5px;box-shadow:0 3px 20px #0008;white-space:nowrap}
.display-mode:hover{border-color:#f4c994;color:#fff6df}
html.cinema-art-mode #sceneMode,html.cinema-art-mode #cameraMode,html.cinema-art-mode #qualityMode,html.cinema-art-mode #rigStatus{display:none!important}
html:not(.cinema-art-mode) #displayMode{right:auto;left:20px}
html:not(.cinema-art-mode) #sceneMode{top:125px;left:230px;max-width:140px}
html:not(.cinema-art-mode) #cameraMode{top:125px;left:calc(50% - 60px)}
html:not(.cinema-art-mode) #qualityMode{top:125px}
.film-stage{position:absolute;inset:0;overflow:hidden;display:none;z-index:2;isolation:isolate;pointer-events:none}
html.cinema-art-mode .film-stage{display:block}
html.cinema-art-mode .arena:before,html.cinema-art-mode .arena:after{z-index:1;pointer-events:none}
html.cinema-art-mode .arena-grid,html.cinema-art-mode .arena-glow,html.cinema-art-mode .moon,html.cinema-art-mode .ruins,html.cinema-art-mode .embers,html.cinema-art-mode #arena3d,html.cinema-art-mode .world-vignette{display:none!important}
html.cinema-art-mode .battle-scene .character,html.cinema-art-mode .battle-scene .versus{display:none!important}
html.cinema-art-mode .battle-scene{z-index:24;inset:190px 20px 63px;pointer-events:none}
html.cinema-art-mode .combatant-name{top:auto!important;bottom:58px!important;font:700 15px Georgia,serif!important;letter-spacing:1px;padding:5px 4px;color:#f6eadb!important;background:linear-gradient(90deg,transparent,#06080dc9 15%,#05080bdc 85%,transparent)!important}
html.cinema-art-mode .combatant-name small{display:block;font:800 9px system-ui,sans-serif;letter-spacing:1.5px;color:#debca0!important}
html.cinema-art-mode .health-track{margin-top:0;height:14px;border:1px solid #d3a58a6c;background:#050609e5;border-radius:2px}
html.cinema-art-mode .health-number{font:700 12px Georgia,serif;margin-top:6px;color:#fff0d5}
html.cinema-art-mode .combatant{width:43%;z-index:24}
html.cinema-art-mode .combatant:before{opacity:0}
.film-backdrop{position:absolute;inset:-2%;background-image:linear-gradient(180deg,#05070ed7 0,#08081225 28%,#090c1627 67%,#040506ed 100%),url(cinema_ember.webp);background-size:cover;background-position:center 47%;transform:translateX(var(--parallax,0px)) scale(1.045);animation:film-pan 29s ease-in-out infinite alternate;will-change:transform}
.film-stage[data-zone='1'] .film-backdrop,.film-stage[data-zone='3'] .film-backdrop{background-image:linear-gradient(180deg,#040512d7 0,#07081818 39%,#050612b5 100%),url(cinema_void.webp)}
.film-depth{position:absolute;inset:0;background:linear-gradient(90deg,#02040591 0,transparent 23%,transparent 75%,#020308b3 100%),radial-gradient(ellipse 45% 20% at 50% 79%,#d8a57d27,transparent 72%),linear-gradient(0deg,#030407ec,transparent 33%);z-index:2}
.film-light{position:absolute;width:49%;height:61%;top:32%;filter:blur(51px);mix-blend-mode:screen;opacity:.42;z-index:3}
.film-light-hero{left:0;background:radial-gradient(ellipse at center,#879dab42,transparent 67%)}
.film-light-enemy{right:0;background:radial-gradient(ellipse at center,#d778423d,transparent 67%)}
.film-fighter{position:absolute;bottom:95px;z-index:6;will-change:transform,filter;transition:opacity .28s;pointer-events:none;transform-origin:52% 85%}
.film-fighter img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 22px 20px #000e) contrast(1.08) saturate(.88);user-select:none;-webkit-user-drag:none}
.film-fighter-hero{left:-7.5%;width:62%;animation:film-breathe-hero 3.5s ease-in-out infinite alternate}
.film-fighter-enemy{right:-9%;width:68%;animation:film-breathe-enemy 3.9s ease-in-out infinite alternate}
.film-stage[data-path='flame'] .film-fighter-hero img{filter:drop-shadow(0 0 19px #f5753957) contrast(1.06)}
.film-stage[data-path='shadow'] .film-fighter-hero img{filter:drop-shadow(0 0 21px #a68cfd54) contrast(1.05)}
.film-stage[data-path='iron'] .film-fighter-hero img{filter:drop-shadow(0 0 21px #73c8d454) contrast(1.08)}
.film-stage[data-kind='shade'] .film-fighter-enemy img{filter:drop-shadow(0 0 27px #aa8ce48d) contrast(1.16)}
.film-stage[data-kind='boss'] .film-fighter-enemy{width:74%;right:-14%}
.film-ground{position:absolute;z-index:4;bottom:88px;width:43%;height:22px;filter:blur(13px);border-radius:50%;background:#000d}
.film-ground-left{left:11%}.film-ground-right{right:6%}
.film-smoke{position:absolute;bottom:0;height:38%;inset-inline:-10%;background:radial-gradient(ellipse 48% 46% at 10% 88%,#a3a5b421,transparent 76%),radial-gradient(ellipse 62% 43% at 85% 89%,#bda9a41e,transparent 78%);filter:blur(23px);opacity:.7;z-index:12;animation:film-drift 11s ease-in-out infinite alternate}
.film-mood{position:absolute;left:50%;transform:translateX(-50%);top:20%;font:750 10px system-ui,sans-serif;letter-spacing:2.1px;color:#e4b387a3;text-shadow:0 2px 14px #000;z-index:24;text-align:center;white-space:nowrap}
.film-impact{position:absolute;z-index:15;left:50%;top:57%;width:90px;height:90px;opacity:0;pointer-events:none}
.film-impact:before{content:'';position:absolute;inset:-20px;border-radius:50%;border:3px solid #ffd8aa;box-shadow:0 0 36px #fda366;opacity:0}
.film-impact i{position:absolute;left:50%;top:50%;height:2px;width:140px;transform-origin:0 50%;background:linear-gradient(90deg,#fff0c8,#efa15f99,transparent);box-shadow:0 0 14px #fcb07e}
.film-impact i:nth-child(1){transform:rotate(12deg)}.film-impact i:nth-child(2){transform:rotate(95deg)}.film-impact i:nth-child(3){transform:rotate(176deg)}.film-impact i:nth-child(4){transform:rotate(250deg)}.film-impact i:nth-child(5){transform:rotate(310deg)}
.film-flare,.film-surge{animation:film-flare .56s ease-out both}.film-surge{filter:hue-rotate(39deg) brightness(1.4);animation-duration:.8s}
.film-jolt{animation:film-jolt .24s ease-in-out}.film-quake{animation:film-jolt .62s ease-in-out}
.film-attack{animation:film-charge 1.16s cubic-bezier(.23,.55,.26,.99) both!important}
.film-special{animation:film-charge 1.43s cubic-bezier(.27,.63,.26,.99) both!important;filter:drop-shadow(0 0 17px #fca25c7a)}
.film-recoil{animation:film-recoil .74s ease-out both!important}
.film-retaliate{animation:film-retaliate 1.14s ease-in-out both!important}
.film-block{animation:film-block .82s ease-in-out both!important}
.film-die{animation:film-death 1.25s cubic-bezier(.23,.6,.5,1) both!important}
.film-entrance{animation:film-enter .72s ease-out both!important}
.film-dead{filter:grayscale(.7) brightness(.6)}
.film-paused .film-fighter{animation-play-state:paused!important}
html.cinema-art-mode .arena .combat-feed{z-index:31;bottom:0;background:linear-gradient(90deg,#0a0b11f4,#19151af4 50%,#090a0cf6);border-top:1px solid #9c7f6185;min-height:56px;font:700 clamp(10px,1.2vw,13px) Georgia,serif;letter-spacing:.3px;color:#f4dab5}
html.cinema-art-mode .arena .combat-effects,html.cinema-art-mode .arena #ashFX{z-index:18}
html.cinema-art-mode .arena .blade-arc,html.cinema-art-mode .arena .impact-ring,html.cinema-art-mode .arena .battle-flash{z-index:17}
html.cinema-art-mode .arena .boss-intro{z-index:50}
.battle-director{border-radius:4px;grid-template-columns:1fr 2fr 1fr;background:linear-gradient(90deg,#141219,#111219,#18131a);border-color:#79604e8f;margin:7px 0}
.director-label strong{color:#ead0a8}.director-right strong{color:#e4c6a2}
.progress-card,.navtabs,.tabpanel,.daily-card,.stats-card,.world-banner{border-radius:5px!important;border-color:#85715c66!important;background:linear-gradient(160deg,#17151c,#0c0e14)!important}
.progress-card{margin-top:8px;padding:16px 19px}
.quickdock{border:1px solid #ac805b75;background:#08090cf7;border-radius:6px;box-shadow:0 0 0 1px #08090c,0 10px 35px #000a}
.quickdock button{border-radius:4px;font-family:Georgia,serif;letter-spacing:.3px;font-size:13px}
.navtab,.skill-button,.auto-button,.upgrade-row{border-radius:5px}
@keyframes film-breathe-hero{0%{transform:translateY(0) rotate(-.25deg)}100%{transform:translateY(-7px) rotate(.3deg)}}
@keyframes film-breathe-enemy{0%{transform:translateY(0) rotate(.4deg)}100%{transform:translateY(-9px) rotate(-.6deg)}}
@keyframes film-charge{0%{transform:translate(0,0) rotate(-1deg)}22%{transform:translate(-15px,8px) rotate(-4deg)}52%{transform:translate(27%, -19px) rotate(3deg) scale(1.055)}66%{transform:translate(22%,-17px) rotate(3deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes film-recoil{0%{transform:translateX(0) rotate(0);filter:brightness(1)}14%{transform:translateX(9%) rotate(4deg);filter:brightness(2.1)}43%{transform:translateX(12%) rotate(5deg);filter:brightness(1.2)}100%{transform:translateX(0) rotate(0);filter:brightness(1)}}
@keyframes film-retaliate{0%{transform:translateX(0) rotate(0)}23%{transform:translateX(9%) rotate(5deg)}52%{transform:translateX(-28%) rotate(-5deg) scale(1.07)}70%{transform:translateX(-15%) rotate(-3deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes film-block{0%{transform:translateX(0) rotate(0)}43%{transform:translateX(-8%) rotate(-4deg)}76%{transform:translateX(-4%) rotate(-1deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes film-death{0%{transform:translateY(0) rotate(0);opacity:1}49%{transform:translateY(24px) rotate(8deg);opacity:.88}100%{transform:translateY(88px) rotate(15deg) scale(.88);opacity:0}}
@keyframes film-enter{0%{transform:translateX(25%) scale(.85);opacity:0}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes film-jolt{0%,100%{filter:none}23%{filter:brightness(1.17);transform:translate(-5px,1px)}46%{transform:translate(6px,-2px)}69%{transform:translate(-2px,0)}}
@keyframes film-flare{0%{opacity:0;transform:scale(.1) rotate(18deg)}23%{opacity:1}100%{opacity:0;transform:scale(2) rotate(-12deg)}}
@keyframes film-pan{0%{transform:translateX(calc(var(--parallax,0px) - 7px)) scale(1.05)}100%{transform:translateX(calc(var(--parallax,0px) + 7px)) scale(1.09)}}
@keyframes film-drift{0%{transform:translateX(-5%)}100%{transform:translateX(4%)}}
@media(max-width:680px){
 .app{padding-inline:9px}.topbar{height:77px}.brand-icon{width:43px;height:43px}.brand h1{font-size:18px}
 .summary-stat{min-height:66px;padding:9px 10px}.summary-label{font-size:8px;letter-spacing:1px}
 .arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:590px;min-height:0;border-radius:5px}
 .arena-top{left:14px;right:11px;top:13px}.arena-top h2{font-size:24px;max-width:226px}.location-eyebrow{letter-spacing:1.7px;font-size:8px}
 .stage-pill{min-width:64px;padding:9px 5px;font-size:9px}
 .display-mode{top:121px;left:12px;right:auto;height:32px;padding-inline:12px;font-size:9px}
 html:not(.cinema-art-mode) #displayMode{top:119px;left:8px}
 html:not(.cinema-art-mode) #sceneMode{top:119px;left:143px;width:87px;font-size:8px}
 html:not(.cinema-art-mode) #cameraMode{top:160px;left:11px;width:91px}
 html:not(.cinema-art-mode) #qualityMode{top:160px;right:11px;width:91px}
 .film-backdrop{background-position:53% center}
 .film-fighter{bottom:125px}
 .film-fighter-hero{width:90%;left:-26%}
 .film-fighter-enemy{width:97%;right:-35%}
 .film-stage[data-kind='boss'] .film-fighter-enemy{width:102%;right:-39%}
 .film-ground{bottom:131px;width:47%}.film-ground-left{left:5%}.film-ground-right{right:5%}
 .film-mood{top:30%;font-size:8px;letter-spacing:1.2px}
 html.cinema-art-mode .battle-scene{inset:172px 5px 56px}
 html.cinema-art-mode .combatant-name{bottom:54px!important;font-size:10px!important;min-height:30px;padding:3px 0}
 html.cinema-art-mode .combatant-name small{font-size:8px}
 html.cinema-art-mode .health-track{height:12px}
 html.cinema-art-mode .health-number{font-size:10px}
 html.cinema-art-mode .arena .combat-feed{min-height:52px;font-size:10px;padding:11px 12px}
 .battle-director{grid-template-columns:1.1fr 1.7fr;padding:10px 11px}.director-label strong{font-size:11px}
 .quickdock button{font-size:11px}
}
@media(max-width:365px){.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:533px}.film-fighter{bottom:121px}.film-fighter-hero{width:99%;left:-31%}.film-fighter-enemy{width:105%;right:-42%}.film-mood{top:31%}.arena-top h2{font-size:21px;max-width:180px}}
@media(prefers-reduced-motion:reduce){.film-stage .film-fighter,.film-backdrop,.film-smoke{animation:none!important}.film-attack,.film-special,.film-recoil,.film-retaliate,.film-block,.film-die,.film-entrance{animation:none!important}}

/* Final framing pass */
@media(min-width:681px){.film-fighter-hero{width:55%;left:-4%;bottom:90px}.film-fighter-enemy{width:65%;right:-9%}}
@media(max-width:680px){.film-fighter-hero{width:84%;left:-24%;bottom:125px}.film-fighter-enemy{width:104%;right:-41%;bottom:126px}}
@media(max-width:365px){.film-fighter-hero{width:89%;left:-25%}.film-fighter-enemy{width:110%;right:-45%}}