:root{--ink:#0b0908;--aes:#b98a3e;--aes-hi:#e3b865;--sang:#c7351f;--sang-d:#6e140c;--os:#e8dcc0;--parch:#d9c7a3;--dim:#8f7552;--frame:#3a2a18;--frame2:#5a4020;--stress:#b59bd9;--heal:#7fd06a;--poison:#8fc23a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#030203;overflow:hidden;color:var(--os);font-family:'Cormorant Garamond',Georgia,serif;user-select:none;-webkit-user-select:none}
#viewport{position:fixed;inset:0;overflow:clip}
#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:0 0;overflow:clip;background:#000;font-size:18px}
#screen{position:absolute;inset:0}
.boot{position:absolute;inset:0;display:grid;place-items:center;font-family:'Cinzel Decorative';font-size:80px;color:var(--aes);letter-spacing:.2em;background:#000;transition:opacity .6s;pointer-events:none}
.boot.gone{opacity:0}
button{font-family:Cinzel;cursor:pointer}

/* ---------- generic gothic pieces ---------- */
.btn{font-family:Cinzel;font-weight:700;letter-spacing:.12em;font-size:17px;color:var(--parch);background:linear-gradient(#2c1d14,#130c08);border:2px solid var(--frame2);outline:1px solid #000;box-shadow:inset 0 0 0 1px #000,inset 0 1px 0 #6a4c2a,0 4px 14px #000a;padding:12px 26px;text-transform:uppercase;transition:color .15s,border-color .15s,filter .15s}
.btn:hover{color:var(--aes-hi);border-color:var(--aes);filter:brightness(1.15)}
.btn.gold{color:#140c06;background:linear-gradient(#e7bf6c,#a7782e 60%,#7a5220);border-color:#e3b865}
.btn.gold:hover{color:#000;filter:brightness(1.1)}
.btn:disabled{opacity:.4;cursor:default;filter:grayscale(.6)}
.panel{background:radial-gradient(ellipse at 30% 0,#2a1a12,#0d0907 75%);border:3px solid #2a1f14;outline:1px solid #7a5a2a;box-shadow:0 0 0 6px #0c0907,0 0 0 7px #3a2a18,0 20px 60px #000}
.lbl{font-family:Cinzel;font-weight:700;font-size:14px;letter-spacing:.24em;color:var(--dim);display:flex;align-items:center;gap:10px;text-transform:uppercase}
.lbl:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#5a4020,#0000)}
.tooltip{position:absolute;z-index:100;pointer-events:none;min-width:260px;max-width:380px;padding:14px 16px 12px;background:linear-gradient(170deg,#1f1510f5,#0c0806f8);border:2px solid var(--frame2);outline:1px solid #000;box-shadow:0 0 0 4px #0c0907e0,0 10px 30px #000;color:var(--os);font-size:17px;line-height:1.25;opacity:0;transition:opacity .12s}
.tooltip.on{opacity:1}
.tooltip h4{margin:0 0 2px;font-family:Cinzel;font-weight:700;font-size:18px;color:var(--aes-hi);letter-spacing:.05em}
.tooltip .sub{font-family:Cinzel;font-size:12px;letter-spacing:.2em;color:var(--sang);margin-bottom:6px}
.tooltip .desc{font-style:italic;color:#d8c8a6;margin:6px 0}
.tooltip .row{display:flex;justify-content:space-between;gap:12px;font-size:15.5px;color:#c8b99a;border-bottom:1px dotted #3a2a1a;padding:1px 0}
.tooltip .row b{font-family:Cinzel;font-size:14px;color:var(--os)}
.tooltip .eff{font-size:15.5px;color:#cfc0a0;margin:2px 0}
.tooltip .eff.bad{color:#e07a6a}.tooltip .eff.good{color:#b9d08c}.tooltip .eff.str{color:var(--stress)}
.tooltip .warn{color:#e07a6a;font-family:Cinzel;font-size:13px;letter-spacing:.1em;margin-top:6px}
.pips{display:flex;align-items:center;gap:14px;margin:6px 0 4px;font-family:Cinzel;font-size:11px;letter-spacing:.15em;color:var(--dim)}
.pips .grp{display:flex;gap:4px;align-items:center;position:relative}
.pips .pip{width:14px;height:14px;border-radius:50%;border:2px solid #4a3a28;background:#0a0706}
.pips .pip.on{background:radial-gradient(circle at 40% 35%,#ffe29a,#c98f2e);border-color:#f0c56a;box-shadow:0 0 6px #e3b86588}
.pips .grp.tg .pip.on{background:radial-gradient(circle at 40% 35%,#ff9a80,#b3261a);border-color:#ff7055;box-shadow:0 0 6px #c7351f88}
.pips .grp.tg.ally .pip.on{background:radial-gradient(circle at 40% 35%,#c8f0a0,#4f8a2a);border-color:#a8e070;box-shadow:0 0 6px #7fd06a88}
.pips .grp.all:after{content:'';position:absolute;left:6px;right:6px;top:6px;height:2px;background:currentColor;z-index:-1}
.pips .grp.tg.all:after{background:#ff7055}.pips .grp.tg.ally.all:after{background:#a8e070}
.pips .grp .pip{position:relative;z-index:1}

/* ---------- battle stage ---------- */
.battle{position:absolute;inset:0;overflow:clip;background:#000}
.world{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:800px 450px;will-change:transform}
.world .cam{position:absolute;inset:0;transform:translateY(-90px)}
.layer{position:absolute;inset:0;pointer-events:none}
.layer img.bg{position:absolute;left:0;top:0;width:1600px;height:900px}
.fighters{pointer-events:none}
.fighter{position:absolute;left:0;top:0;width:0;height:0;transition-property:transform;transition-timing-function:cubic-bezier(.3,.7,.3,1);transition-duration:.45s}
.fighter .fig{position:absolute;left:-171px;top:342px;width:341px;height:480px;transform-origin:50% 95%}
.fighter .fig .spr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 0 #0000)}
.fighter.flip .fig .spr{transform:scaleX(-1)}
.fighter .shadow{position:absolute;left:-110px;top:782px;width:220px;height:36px;border-radius:50%;background:radial-gradient(ellipse,#000c,#0000 70%)}
.fighter .ring{position:absolute;left:-120px;top:778px;width:240px;height:44px;border-radius:50%;border:3px solid transparent;opacity:0;transition:opacity .2s,border-color .2s,box-shadow .2s}
.fighter.active .ring{opacity:1;border-color:#e3b865;box-shadow:0 0 18px #e3b865aa,inset 0 0 14px #e3b86566;animation:ringp 1.6s ease-in-out infinite}
.fighter.tgt .ring{opacity:.95;border-color:#e0402a;border-width:4px;background:radial-gradient(ellipse,#c7351f55,#c7351f11 60%,#0000 72%);box-shadow:0 0 22px #c7351fcc,inset 0 0 16px #c7351f88}
.fighter.tgt.ally .ring{border-color:#8fe070;background:radial-gradient(ellipse,#7fd06a44,#7fd06a11 60%,#0000 72%);box-shadow:0 0 22px #7fd06acc,inset 0 0 16px #7fd06a88}
.fighter.tgt.hot .ring{opacity:1;border-width:5px;border-color:#ff7a50;animation:ringp .7s ease-in-out infinite}
.fighter.tgt.ally.hot .ring{border-color:#c0ff90}
@keyframes ringp{50%{transform:scale(1.06);opacity:.75}}
.fighter.tgt .spr{filter:drop-shadow(0 0 3px #ff4a2a88)}
.fighter.tgt.ally .spr{filter:drop-shadow(0 0 3px #7fd06a88)}
.fighter.tgt.hot .spr{filter:drop-shadow(0 0 6px #ff4a2a) brightness(1.15)}
.fighter.tgt.ally.hot .spr{filter:drop-shadow(0 0 6px #9fe07a) brightness(1.15)}
.fighter.dim .spr{filter:brightness(.7) saturate(.8)}
.hitzone{position:absolute;left:-120px;top:360px;width:240px;height:470px;pointer-events:auto;cursor:default}
.fighter.tgt .hitzone{cursor:crosshair}
.fighter .chev{position:absolute;left:-24px;top:300px;width:48px;height:40px;opacity:0;transition:opacity .2s;filter:drop-shadow(0 0 6px #000)}
.fighter.tgt.hot .chev{opacity:1;animation:chev .7s ease-in-out infinite}
@keyframes chev{50%{transform:translateY(8px)}}
.fighter .flash{position:absolute;inset:0;background:#ff1a0a;mix-blend-mode:color-dodge;opacity:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.fighter.flip .flash{transform:scaleX(-1)}

/* per-unit HUD, in world space under the feet */
.uhud{position:absolute;left:-80px;top:804px;width:160px;pointer-events:none}
.uhud .nm{font-family:Cinzel;font-weight:700;font-size:15.5px;letter-spacing:.08em;color:var(--parch);text-align:center;text-shadow:0 2px 3px #000,0 0 6px #000;white-space:nowrap;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis}
.fighter.enemy .uhud .nm{color:#e8a08a}
.hp{position:relative;height:16px;background:#120605;border:2px solid #000;outline:1px solid #6a4c2a;box-shadow:0 2px 6px #000}
.hp .trail,.hp .fill{position:absolute;left:0;top:0;bottom:0}
.hp .trail{background:#f0d890;transition:width .6s .35s ease-out}
.hp .fill{background:linear-gradient(#e2412a,#a01a0e 55%,#6e0d06);transition:width .25s ease-out}
.hp .fill.healing{background:linear-gradient(#9fe07a,#4f9a2a 55%,#2e6a16)}
.hp .num{position:absolute;inset:-1px 0 0;text-align:center;font-family:Cinzel;font-weight:700;font-size:13px;line-height:16px;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;opacity:.95}
.hp .skull{position:absolute;left:-28px;top:-7px;width:24px;height:24px;display:none;filter:drop-shadow(0 0 4px #c7351f)}
.fighter.dd .hp .skull{display:block;animation:ddp 1s ease-in-out infinite}
.fighter.dd .hp{outline-color:#c7351f;box-shadow:0 0 10px #c7351f}
@keyframes ddp{50%{transform:scale(1.2)}}
.stressbar{display:flex;gap:2px;margin-top:4px;height:10px}
.stressbar i{flex:1;background:#140f18;border:1px solid #000;outline:1px solid #3a2f44;transition:background .3s,box-shadow .3s}
.stressbar i.on{background:linear-gradient(#e8dcf8,#9a7cc8);box-shadow:0 0 5px #b59bd9aa}
.stressbar.hi i.on{background:linear-gradient(#f0b8f0,#a84aa0)}
.stats-row{position:absolute;left:-10px;right:-10px;bottom:calc(100% + 3px);display:flex;flex-wrap:wrap-reverse;justify-content:center;gap:3px}
.sicon{position:relative;width:26px;height:26px;background:#0a0706e8;border:1px solid #6a4c2a;box-shadow:0 2px 4px #000;display:grid;place-items:center;pointer-events:auto}
.sicon svg{width:20px;height:20px}
.sicon .t{position:absolute;right:-4px;bottom:-6px;font-family:Cinzel;font-weight:900;font-size:12px;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.sicon.pop{animation:spop .45s ease-out}
@keyframes spop{0%{transform:scale(2.2);filter:brightness(2)}100%{transform:scale(1)}}
.afftag{position:absolute;left:-30px;right:-30px;top:-58px;text-align:center;font-family:Cinzel;font-weight:700;font-size:12px;letter-spacing:.14em;color:#e07a6a;text-shadow:0 0 6px #000;display:none}
.afftag.virtue{color:var(--aes-hi)}
.fighter.aff .afftag{display:block}
.stars{position:absolute;left:-60px;width:120px;height:40px;display:none}
.fighter.stunned .stars{display:block}
.stars span{position:absolute;left:50%;top:50%;font-size:22px;color:#ffe066;text-shadow:0 0 8px #ffb000;animation:orbit 1.3s linear infinite}
.stars span:nth-child(2){animation-delay:-.43s}.stars span:nth-child(3){animation-delay:-.86s}
@keyframes orbit{0%{transform:translate(-50%,-50%) rotate(0) translateX(46px) rotate(0) scaleY(1)}100%{transform:translate(-50%,-50%) rotate(360deg) translateX(46px) rotate(-360deg)}}
.bark{position:absolute;transform:translate(-50%,-100%);max-width:260px;padding:8px 14px;background:#e8dcc0;color:#1a100a;font-family:'Cormorant Garamond';font-style:italic;font-weight:700;font-size:19px;line-height:1.1;border:2px solid #2a1a0e;box-shadow:0 4px 12px #000c;border-radius:4px;white-space:normal;text-align:center;pointer-events:none;z-index:30}
.bark:after{content:'';position:absolute;left:50%;bottom:-11px;margin-left:-8px;border:9px solid transparent;border-top-color:#2a1a0e;border-bottom:0}
.bark.enemy{background:#2a1512;color:#f0c8b8;border-color:#7a2a1a}
.bark.enemy:after{border-top-color:#7a2a1a}

/* fx */
.fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.pt{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity}
.float{position:absolute;transform:translate(-50%,-50%);font-family:Cinzel;font-weight:900;font-size:54px;white-space:nowrap;text-shadow:0 3px 0 #000,0 0 10px #000,0 0 2px #000;pointer-events:none;z-index:40;letter-spacing:.02em}
.float.dmg{color:#ff5a3a}
.float.crit{font-size:80px;line-height:.9;color:#ffcf4a;-webkit-text-stroke:1px #6e140c}
.float.crit small{display:block;font-size:24px;letter-spacing:.2em;color:#ff5a3a;text-align:center;-webkit-text-stroke:0}
.float.heal{color:#8fe070}
.float.stress{color:#c9a8f0;font-size:30px}
.float.relief{color:#f0f0ff;font-size:28px}
.float.miss{color:#d8d0c0;font-size:32px;letter-spacing:.14em}
.float.info{color:var(--parch);font-size:26px;letter-spacing:.1em}
.float.bad{color:#e8a040;font-size:26px;letter-spacing:.1em}
.float.good{color:#b9e08c;font-size:26px;letter-spacing:.1em}
.float.resist{color:#9a9a9a;font-size:24px;letter-spacing:.1em}
.float.poison{color:#a8e040}
.float.bleed{color:#ff4030}
.float.gold{color:#ffd24a;font-size:28px}
.screenflash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;mix-blend-mode:overlay;z-index:20}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 45%,#0000 55%,#000a 85%,#000e);z-index:5}
.ddvig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 65% at 50% 45%,#0000 45%,#8a0a0088 100%);opacity:0;z-index:6}

/* ---------- screen-space UI ---------- */
.ui{position:absolute;inset:0;pointer-events:none;z-index:10}
.ui>*{pointer-events:auto}
.topl{position:absolute;left:18px;top:14px;display:flex;align-items:center;gap:14px}
.round{font-family:Cinzel;font-weight:900;color:var(--aes-hi);text-align:center;background:linear-gradient(#1c130ee8,#0a0706e8);border:2px solid var(--frame2);outline:1px solid #000;box-shadow:0 4px 12px #000;padding:6px 12px 5px;min-width:88px}
.round small{display:block;font-size:11px;letter-spacing:.3em;color:var(--dim)}
.round b{font-size:30px;line-height:1}
.order{display:flex;gap:5px;align-items:flex-end}
.por{position:relative;width:42px;height:42px;border:2px solid var(--frame2);outline:1px solid #000;background-color:#140d0a;background-repeat:no-repeat;box-shadow:0 3px 8px #000;flex:none}
.por.enemy{border-color:#7a2a1a;background-color:#1a0a08}
.por.cur{width:58px;height:58px;border-color:var(--aes-hi);box-shadow:0 0 12px #e3b865aa,0 3px 8px #000}
.por.flip{transform:scaleX(-1)}
.por.dead{filter:grayscale(1) brightness(.4)}
.order .sep{width:2px;height:40px;background:linear-gradient(#0000,#7a5a2a,#0000);margin:0 4px}
.crowdm{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:420px;text-align:center}
.crowdm .t{font-family:Cinzel;font-weight:700;font-size:15px;letter-spacing:.32em;color:var(--parch);text-shadow:0 2px 4px #000}
.crowdm .t b{color:var(--aes-hi);margin-left:8px;letter-spacing:.05em}
.crowdm .bar{position:relative;height:18px;margin-top:4px;background:#0a0706;border:2px solid #000;outline:1px solid #7a5a2a;box-shadow:0 0 0 3px #0c0907,0 4px 14px #000}
.crowdm .bar .f{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#6e140c,#c7351f 20%,#9a6a2a 50%,#e3b865 80%,#fff0b0);transition:width .6s cubic-bezier(.3,1.4,.5,1);box-shadow:inset 0 -4px 6px #0006}
.crowdm .bar .z{position:absolute;top:-2px;bottom:-2px;width:2px;background:#000a;border-left:1px solid #e8dcc055}
.crowdm .bar .lo{position:absolute;left:0;top:0;bottom:0;width:20%;background:repeating-linear-gradient(135deg,#0000 0 5px,#c7351f22 5px 8px)}
.crowdm .bar .hi{position:absolute;right:0;top:0;bottom:0;width:20%;background:repeating-linear-gradient(135deg,#0000 0 5px,#e3b86522 5px 8px)}
.crowdm .st{height:18px;margin-top:3px;font-family:Cinzel;font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--dim)}
.crowdm.high .t b,.crowdm.high .st{color:var(--aes-hi);text-shadow:0 0 10px #e3b865}
.crowdm.high .bar{box-shadow:0 0 0 3px #0c0907,0 0 22px #e3b865aa}
.crowdm.low .st{color:#ff6a4a;animation:lowp 1s ease-in-out infinite}
.crowdm.low .bar{box-shadow:0 0 0 3px #0c0907,0 0 22px #c7351faa}
@keyframes lowp{50%{opacity:.5}}
.crowdm .dlt{position:absolute;right:-56px;top:20px;font-family:Cinzel;font-weight:900;font-size:22px;text-shadow:0 2px 3px #000;opacity:0}
.topr{position:absolute;right:16px;top:14px;display:flex;gap:6px;align-items:center}
.ibtn{font-family:Cinzel;font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--parch);min-width:42px;height:38px;padding:0 10px;background:linear-gradient(#2c1d14,#130c08);border:2px solid var(--frame2);outline:1px solid #000;box-shadow:inset 0 1px 0 #6a4c2a,0 3px 8px #000;display:flex;align-items:center;justify-content:center}
.ibtn:hover{border-color:var(--aes);color:var(--aes-hi)}
.ibtn.on{color:#140c06;background:linear-gradient(#e7bf6c,#a7782e);border-color:#e3b865}
.ibtn .x{font-family:"Cormorant Garamond";font-size:18px;margin-left:1px}
.ibtn svg{width:22px;height:22px}
.narr{position:absolute;left:50%;top:80px;margin-left:-500px;width:1000px;text-align:center;font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-size:31px;line-height:1.2;color:#eadcbc;text-shadow:0 2px 4px #000,0 0 18px #000,0 0 30px #000;opacity:0;pointer-events:none;padding:12px 60px;background:radial-gradient(ellipse 50% 50% at 50% 50%,#000b,#0000 100%)}
.skillban{position:absolute;left:50%;top:176px;transform:translateX(-50%);font-family:Cinzel;font-weight:900;font-size:40px;letter-spacing:.14em;color:var(--aes-hi);text-shadow:0 3px 0 #000,0 0 18px #000,0 0 30px #000;white-space:nowrap;opacity:0;pointer-events:none;text-transform:uppercase}
.skillban.enemy{color:#ff8a6a}
.bigban{position:absolute;left:0;right:0;top:300px;text-align:center;pointer-events:none;opacity:0}
.bigban .a{font-family:'Cormorant Garamond';font-style:italic;font-size:30px;color:var(--parch);text-shadow:0 2px 6px #000}
.bigban .b{font-family:'Cinzel Decorative';font-weight:900;font-size:78px;letter-spacing:.06em;line-height:1.05;text-shadow:0 4px 0 #000,0 0 30px #000}
.bigban.aff .b{color:#e0402a}.bigban.vir .b{color:#ffd76a}.bigban.dd .b{color:#c7351f;font-size:64px}.bigban.round .b{color:var(--aes-hi);font-size:56px}
.bigban .band{position:absolute;left:0;right:0;top:-20px;bottom:-20px;background:linear-gradient(90deg,#0000,#000c 25%,#000c 75%,#0000);z-index:-1}

/* bottom panel */
.bottom{position:absolute;left:0;right:0;bottom:0;height:118px;display:flex;align-items:stretch;background:linear-gradient(#1a110cf8,#0b0706);border-top:3px solid #2a1f14;box-shadow:0 -1px 0 #7a5a2a,0 -10px 30px #000c}
.bottom:before{content:'';position:absolute;inset:6px;border:1px solid #3a2a1a;pointer-events:none}
.who{display:flex;align-items:center;gap:14px;width:470px;padding:10px 16px 10px 20px;border-right:1px solid #3a2a1a}
.who .por{width:88px;height:88px}
.who .nm{font-family:Cinzel;font-weight:700;font-size:23px;color:var(--aes-hi);line-height:1.05;white-space:nowrap}
.who .nick{font-style:italic;color:var(--parch);font-size:17px}
.who .cl{font-family:Cinzel;font-weight:700;font-size:12px;letter-spacing:.28em;color:var(--sang);margin-top:2px}
.who .vals{display:flex;gap:14px;margin-top:4px;font-family:Cinzel;font-size:14px;color:#c8b99a}
.who .vals b{color:#ff7a5a}.who .vals .s b{color:var(--stress)}
.who.enemy .nm{color:#ff8a6a}
.skills{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px}
.sk{position:relative;width:84px;height:84px;padding:0;border:2px solid #5a4020;background:linear-gradient(160deg,#3a261a,#120b08);box-shadow:inset 0 0 0 2px #000,inset 0 0 20px #000,0 3px 8px #000;display:grid;place-items:center;transition:transform .12s,border-color .12s,filter .12s}
.sk svg{width:62%;height:62%}
.sk .k{position:absolute;left:4px;top:2px;font-size:12px;color:var(--dim);font-family:Cinzel;font-weight:700}
.sk .cd{position:absolute;inset:0;display:grid;place-items:center;font-family:Cinzel;font-weight:900;font-size:30px;color:#fff;background:#000a;text-shadow:0 0 4px #000}
.sk:hover:not(:disabled){border-color:var(--aes);transform:translateY(-3px);filter:brightness(1.2)}
.sk.sel{border-color:var(--aes-hi);box-shadow:inset 0 0 0 2px #000,inset 0 0 20px #000,0 0 0 2px #000,0 0 16px #e3b865cc;transform:translateY(-4px)}
.sk:disabled,.sk.off{filter:grayscale(.9) brightness(.45);cursor:default}
.sk.foe{border-color:#6a2a1a;cursor:default}
.skills .div{width:2px;height:70px;background:linear-gradient(#0000,#7a5a2a,#0000);margin:0 8px}
.mv{width:62px;height:62px;border:2px solid #5a4020;background:linear-gradient(160deg,#2a1c14,#0e0906);box-shadow:inset 0 0 0 2px #000,0 3px 8px #000;display:grid;place-items:center;position:relative;padding:0}
.mv svg{width:34px;height:34px}
.mv .k{position:absolute;left:4px;top:1px;font-size:11px;color:var(--dim);font-family:Cinzel;font-weight:700}
.mv:hover:not(:disabled){border-color:var(--aes);filter:brightness(1.3)}
.mv:disabled{filter:grayscale(1) brightness(.4);cursor:default}
.hint{width:330px;padding:14px 22px;border-left:1px solid #3a2a1a;display:flex;flex-direction:column;justify-content:center;gap:4px}
.hint .h1{font-family:Cinzel;font-weight:700;font-size:16px;letter-spacing:.12em;color:var(--parch)}
.hint .h2{font-style:italic;font-size:17px;color:#b8a888;line-height:1.2}
.hint .kbd{font-family:Cinzel;font-size:12px;color:var(--dim);letter-spacing:.08em}
.waiting .skills{opacity:.9}

/* overlays */
.overlay{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#000a,#000e);opacity:0;animation:cfadein .8s forwards}
@keyframes cfadein{to{opacity:1}}
.endbox{text-align:center;padding:40px 70px 40px;min-width:760px}
.endbox .ttl{font-family:'Cinzel Decorative';font-weight:900;font-size:96px;line-height:1;letter-spacing:.06em;text-shadow:0 5px 0 #000,0 0 40px #000}
.endbox.win .ttl{color:#f0c86a;text-shadow:0 5px 0 #000,0 0 30px #e3b86566,0 0 60px #000}
.endbox.lose .ttl{color:#c7351f;text-shadow:0 5px 0 #000,0 0 30px #c7351f66,0 0 60px #000}
.endbox .q{font-style:italic;font-size:25px;color:var(--parch);margin:10px 0 22px}
.endbox .rw{display:flex;justify-content:center;gap:30px;margin:10px 0 18px}
.endbox .rw div{min-width:150px;padding:10px 16px;border:1px solid #3a2a1a;background:#0008}
.endbox .rw small{display:block;font-family:Cinzel;font-size:12px;letter-spacing:.24em;color:var(--dim)}
.endbox .rw b{font-family:Cinzel;font-size:32px;color:var(--aes-hi)}
.endbox .surv{display:flex;justify-content:center;gap:14px;margin:6px 0 26px}
.endbox .surv .s{width:96px;text-align:center;font-family:Cinzel;font-size:12px;color:#c8b99a}
.endbox .surv .s .por{width:96px;height:96px;margin-bottom:4px}
.endbox .surv .s.dead{color:#8a4a3a}
.endbox .btns{display:flex;justify-content:center;gap:18px}

/* ---------- menus ---------- */
.menu{position:absolute;inset:0;background:#000;overflow:clip}
.menu .bgimg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(3px) brightness(.35) saturate(.8);transform:scale(1.04)}
.menu .vignette{z-index:0}
.menu .inner{position:absolute;inset:0;padding:26px 60px;display:flex;flex-direction:column}
.menu h1{font-family:'Cinzel Decorative';font-weight:900;font-size:54px;letter-spacing:.1em;margin:0;color:var(--aes-hi);text-shadow:0 4px 0 #000,0 0 30px #000;text-align:center;line-height:1}
.menu h1 small{display:block;font-family:Cinzel;font-weight:700;font-size:16px;letter-spacing:.5em;color:var(--sang);margin-top:10px}
.menu h2{font-family:Cinzel;font-weight:700;font-size:19px;letter-spacing:.3em;color:var(--parch);text-align:center;margin:12px 0 14px;text-shadow:0 2px 4px #000}
.encs{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 16px;overflow:auto;padding:8px 6px 20px;flex:1;align-content:start}
.enc{position:relative;cursor:pointer;background:#0c0806;border:3px solid #2a1f14;outline:1px solid #7a5a2a;box-shadow:0 0 0 5px #0c0907,0 0 0 6px #3a2a18,0 14px 30px #000;transition:transform .15s,outline-color .15s}
.enc:hover{transform:translateY(-4px);outline-color:var(--aes-hi)}
.enc .th{position:relative;height:165px;background-size:auto 300px;background-position:center 78%;overflow:hidden}
.enc .th:after{content:'';position:absolute;inset:0;background:linear-gradient(#0000 40%,#0c0806)}
.enc .foes{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center;z-index:1}
.enc .foes img{height:152px;margin:0 -22px;filter:drop-shadow(0 4px 4px #000)}
.enc .foes img.flip{transform:scaleX(-1)}
.enc .bd{padding:8px 14px 12px}
.enc .nm{font-family:Cinzel;font-weight:700;font-size:19px;line-height:1.1;color:var(--aes-hi)}
.enc .sc{font-family:Cinzel;font-size:12px;letter-spacing:.24em;color:var(--sang)}
.enc .in{font-style:italic;color:#cbbd9f;font-size:15.5px;line-height:1.18;margin-top:5px;height:56px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.enc .rw{font-family:Cinzel;font-size:12px;color:var(--dim);margin-top:6px;letter-spacing:.06em}
.enc.boss{outline-color:#c7351f}
.enc.boss .tag{position:absolute;right:10px;top:10px;z-index:2;font-family:Cinzel;font-weight:900;font-size:13px;letter-spacing:.24em;color:#fff;background:#8a1a0e;padding:4px 10px;border:1px solid #ff6a4a}
.roster{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin:0 auto;width:1180px}
.hcard{position:relative;cursor:pointer;background:linear-gradient(170deg,#1c1411,#0e0a08);border:2px solid #3a2a1a;padding:6px 6px 8px;text-align:center;transition:transform .12s,border-color .12s}
.hcard:hover{transform:translateY(-3px);border-color:var(--aes)}
.hcard .por{width:120px;height:120px;margin:0 auto}
.hcard .nm{font-family:Cinzel;font-weight:700;font-size:13.5px;color:var(--parch);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .cl{font-family:Cinzel;font-size:10px;letter-spacing:.14em;color:var(--sang);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard.in{border-color:var(--aes-hi);filter:brightness(.55)}
.hcard.in:after{content:'✓';position:absolute;right:8px;top:4px;font-size:26px;color:var(--aes-hi);text-shadow:0 0 6px #000}
.slots{display:flex;justify-content:center;gap:0;align-items:flex-end;margin:0 auto 14px;position:relative}
.slot{position:relative;width:190px;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.slot .fl{position:absolute;bottom:34px;width:160px;height:30px;border-radius:50%;border:2px dashed #5a4020;background:radial-gradient(ellipse,#e3b86518,#0000 70%)}
.slot img{position:relative;height:270px;margin-bottom:26px;pointer-events:none;filter:drop-shadow(0 6px 6px #000)}
.slot .rk{position:absolute;bottom:0;font-family:Cinzel;font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--dim)}
.slot .nm{position:absolute;top:0;font-family:Cinzel;font-weight:700;font-size:14px;color:var(--parch);text-shadow:0 2px 3px #000}
.slot.drag{opacity:.4}
.slot.over .fl{border-color:var(--aes-hi);background:radial-gradient(ellipse,#e3b86555,#0000 70%)}
.slot.fill{cursor:grab}
.slot .x{position:absolute;top:22px;right:18px;width:26px;height:26px;border-radius:50%;background:#2a0a06;border:1px solid #c7351f;color:#ff8a6a;font-size:16px;line-height:22px;display:none;padding:0;z-index:2}
.slot.fill:hover .x{display:block}
.pbar{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:14px}
.pbar .info{font-style:italic;font-size:18px;color:#b8a888}
.ptop{display:flex;align-items:center;justify-content:space-between}
.encinfo{font-family:Cinzel;font-weight:700;color:var(--aes-hi);font-size:20px;letter-spacing:.1em;text-align:center}
.encinfo small{display:block;font-family:'Cormorant Garamond';font-style:italic;font-weight:500;color:var(--parch);font-size:18px;letter-spacing:0}

/* =====================================================================================
   v2 COMBAT-UI additions (review 07 UX, 02 poses/camera, 03 scene light)
   ===================================================================================== */
.layer.back img.bg{scale:1.045}
.layer.dimmer{background:#000;opacity:0;transition:opacity .25s ease-out}
.fighter .fig .spr.pose{position:absolute;display:none}
.fighter .fig{will-change:transform}
/* colour-blind-safe markers: shape + glyph, not only hue */
.fighter.active .ring{border-width:4px;outline:3px double #e3b865;outline-offset:6px;border-radius:50%}
.fighter.enemy.active .ring{border-color:#ff7a50;outline-color:#ff7a50;outline-style:dashed;box-shadow:0 0 18px #c7351faa}
.actmark{position:absolute;width:44px;height:40px;display:none;pointer-events:none;filter:drop-shadow(0 0 6px #000) drop-shadow(0 0 10px #e3b86588)}
.fighter.enemy .actmark{filter:drop-shadow(0 0 6px #000) drop-shadow(0 0 10px #c7351f88)}
.fighter.active .actmark{display:block;animation:actbob 1.2s ease-in-out infinite}
@keyframes actbob{50%{transform:translateY(-8px)}}
.fighter.hudf.active .uhud .nm span{color:#ffe29a;text-shadow:0 0 10px #e3b865,0 2px 3px #000}
.fighter.hudf.enemy.active .uhud .nm span{color:#ffb09a;text-shadow:0 0 10px #c7351f,0 2px 3px #000}
.fighter.tgt .ring{border-style:solid}
.fighter.tgt.ally .ring{border-style:dashed;border-width:4px}
.tglyph{position:absolute;left:-16px;top:752px;width:32px;height:32px;display:none;pointer-events:none;filter:drop-shadow(0 0 4px #000)}
.fighter.tgt .tglyph{display:block}
.fighter.tgt.hot .tglyph{transform:scale(1.35)}
.fighter.tgt.hot .ring{border-color:#fff!important;box-shadow:0 0 0 3px #c7351f,0 0 26px #ff5a3a}
.fighter.tgt.ally.hot .ring{box-shadow:0 0 0 3px #4f8a2a,0 0 26px #9fe07a}
.fighter.tgt .chev{opacity:.55}
.fighter.tgt.hot .chev{opacity:1}
.pips .grp.tg .pip.on{position:relative}
.pips .grp.tg .pip.on:before{content:'×';position:absolute;inset:-4px 0 0;text-align:center;font:900 13px/14px Cinzel;color:#2a0404}
.pips .grp.tg.ally .pip.on:before{content:'+';color:#0e2a04}
.pips .selfp{font-size:13px;color:#b9d08c}
/* level / tier badge on the name plate */
.uhud .nm{display:flex;align-items:center;justify-content:center;gap:5px}
.uhud .nm span{overflow:hidden;text-overflow:ellipsis}
.uhud .nm .lv{flex:none;min-width:20px;height:20px;padding:0 4px;font:900 12px/18px Cinzel;color:#140c06;background:linear-gradient(#f0cf7a,#a7782e);border:1px solid #000;clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);letter-spacing:0;text-shadow:none}
.uhud .nm .lv.tier{color:#fff;background:linear-gradient(#b3261a,#5a0a04)}
/* target preview card + HP ghost */
.pvcard{position:absolute;z-index:45;transform:translate(-50%,-100%);min-width:200px;padding:7px 12px 6px;background:linear-gradient(170deg,#1f1510f2,#0c0806f5);border:2px solid #5a4020;outline:1px solid #000;box-shadow:0 0 0 3px #0c0907d0,0 8px 20px #000;font-family:Cinzel;color:#e8dcc0;pointer-events:none;text-align:left}
.pvcard .hit{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.pvcard .hit b{font-size:30px;font-weight:900;color:#ffe29a;line-height:1}
.pvcard .hit span{font-size:12px;letter-spacing:.2em;color:#8f7552}
.pvcard .hit.ally span{color:#b9d08c;font-size:13px}
.pvcard .row{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:#c8b99a;border-top:1px dotted #3a2a1a;padding-top:2px;margin-top:3px}
.pvcard .row b{color:#fff}
.pvcard .kill{color:#ff7a5a;font-weight:900;letter-spacing:.1em;font-size:14px;margin-top:3px}
.pvcard .kill.dd{color:#ffb070}
.pvcard .eff{font-family:'Cormorant Garamond';font-size:16px;color:#e07a6a;line-height:1.15}
.pvcard .eff.good{color:#b9d08c}
.pvcard .grd{font-family:'Cormorant Garamond';font-style:italic;font-size:16px;color:#9ab8e0;max-width:240px}
.pvcard.low .hit b{color:#ff8a6a}
.pvcard.compact{min-width:120px;padding:5px 9px}
.pvcard.compact .hit b{font-size:24px}
.pvcard.ally{border-color:#4f8a2a}
.hp .ghost{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,#fff9 0 4px,#fff3 4px 8px);animation:ghostp .8s ease-in-out infinite;z-index:1}
@keyframes ghostp{50%{opacity:.45}}
.tooltip .items{margin-top:6px;border-top:1px solid #3a2a1a;padding-top:4px}
.tooltip .items .it{font-family:Cinzel;font-size:13.5px;display:flex;align-items:center;gap:6px}
.tooltip .items .it svg{width:16px;height:16px}
.tooltip .gl{color:#ffd76a;font-family:Cinzel;font-size:13px;letter-spacing:.06em;margin:4px 0}
.tooltip .row b small{font-family:'Cormorant Garamond';color:var(--dim);font-size:14px}
/* skill buttons: reason label, favour cost */
.sk .why{position:absolute;left:-2px;right:-2px;bottom:-2px;font:700 10.5px/15px Cinzel;letter-spacing:.04em;color:#ffb09a;background:#1a0604e8;border-top:1px solid #6a2a1a;text-align:center;filter:none;white-space:nowrap;overflow:hidden}
.sk.off{filter:none}
.sk.off svg{filter:grayscale(.9) brightness(.45)}
.sk.gloria{border-color:#a8801a;background:linear-gradient(160deg,#4a3410,#140c04)}
.sk.gloria:not(.off){box-shadow:inset 0 0 0 2px #000,inset 0 0 20px #000,0 0 14px #ffd76a55,0 3px 8px #000}
.sk .fc{position:absolute;right:2px;top:2px;display:flex;align-items:center;gap:1px;font:900 13px Cinzel;color:#ffd76a;text-shadow:0 0 3px #000}
.sk .fc svg{width:14px;height:14px}
.mv.digitum{border-color:#6a2a1a}
.mv.digitum:hover:not(:disabled){border-color:#ff8a6a}
.ibtn.warn svg{width:22px;height:22px}
.crowdm .bar .cost{position:absolute;top:0;bottom:0;width:0;background:repeating-linear-gradient(135deg,#fff0 0 4px,#ffd76acc 4px 8px);box-shadow:inset 0 0 0 1px #ffd76a;z-index:1;animation:ghostp .8s ease-in-out infinite}
.crowdm .bar .cost.short{background:repeating-linear-gradient(135deg,#fff0 0 4px,#ff5a3acc 4px 8px);box-shadow:inset 0 0 0 1px #ff5a3a}
.hint .h1.foe{color:#ff8a6a}
/* fast-forward indicator */
.ffind{position:absolute;right:20px;top:62px;font:900 20px Cinzel;letter-spacing:.2em;color:#ffe29a;text-shadow:0 0 10px #000;display:none;pointer-events:none}
.ffind.on{display:block}
.bigban.dd .a{color:#ff9a80;font-family:Cinzel;font-style:normal;font-weight:700;font-size:34px;letter-spacing:.08em}
.bigban.gloria .b{color:#ffd76a;font-size:64px;text-shadow:0 4px 0 #000,0 0 30px #e3b86599}
.bigban.digitum .b{color:#d9c7a3;font-size:64px}
.float.big{font-size:70px}
.float.small{font-size:40px}
.float.gloria{color:#ffd76a}
.float.gloria small{color:#e3b865}
/* missio verdict */
.missio{position:absolute;inset:0;z-index:55;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse 60% 60% at 50% 45%,#0008,#000c);opacity:0}
.missio .m1{font:900 44px Cinzel;letter-spacing:.3em;color:var(--parch);text-shadow:0 3px 0 #000,0 0 20px #000}
.missio .thumb{width:170px;height:210px;margin:10px 0;filter:drop-shadow(0 8px 12px #000) drop-shadow(0 0 20px #e3b86544);rotate:90deg}
.missio .thumb svg{width:100%;height:100%}
.missio .m2{font:900 76px 'Cinzel Decorative';letter-spacing:.08em;height:84px;line-height:84px;text-shadow:0 4px 0 #000,0 0 30px #000}
.missio.granted .m2{color:#ffd76a}
.missio.granted .thumb{filter:drop-shadow(0 8px 12px #000) drop-shadow(0 0 30px #ffd76a)}
.missio.denied .m2{color:#e0402a}
.missio.denied .thumb{filter:drop-shadow(0 8px 12px #000) drop-shadow(0 0 30px #c7351f)}
.missio .m3{font:italic 600 26px 'Cormorant Garamond';color:#d8c8a6;text-shadow:0 2px 4px #000}
/* modal confirm */
.modal{position:absolute;inset:0;z-index:80;display:grid;place-items:center;background:#000a;animation:cfadein .2s forwards;opacity:0}
.modal .mbox{max-width:640px;padding:28px 40px 24px;text-align:center}
.modal h3{margin:0 0 10px;font:900 34px Cinzel;letter-spacing:.08em;color:var(--aes-hi);display:flex;align-items:center;justify-content:center;gap:12px}
.modal h3 .dg svg{width:40px;height:40px;display:block}
.modal .mt{font-size:22px;line-height:1.3;color:var(--parch);margin-bottom:20px}
.modal .btns{display:flex;justify-content:center;gap:18px}
.modal .btn{min-width:180px;min-height:52px}
/* coach marks */
.coachm{position:absolute;z-index:70;max-width:440px;padding:14px 18px 12px;background:#e8dcc0;color:#1a100a;border:3px solid #2a1a0e;box-shadow:0 0 0 4px #e3b865,0 12px 30px #000;font-family:'Cormorant Garamond';font-size:20px;line-height:1.2}
.coachm h5{margin:0 0 4px;font:900 15px Cinzel;letter-spacing:.14em;color:#6e140c}
.coachm button{margin-top:8px;font:700 14px Cinzel;letter-spacing:.12em;padding:8px 18px;min-height:40px;background:#2a1a0e;color:#e8dcc0;border:0;cursor:pointer}
.coachm:after{content:'';position:absolute;left:var(--ax,50%);bottom:-16px;margin-left:-12px;border:12px solid transparent;border-top-color:#2a1a0e;border-bottom:0}
/* end-of-battle report */
.endbox{min-width:900px;max-width:1300px;padding:30px 50px 30px}
.endbox .ttl{font-size:84px}
.endbox.sur .ttl{color:#d9c7a3;text-shadow:0 5px 0 #000,0 0 30px #0008}
.endbox .q{margin:8px 0 16px;font-size:23px}
.endbox .q.sub{font-style:normal;font-family:Cinzel;font-size:17px;letter-spacing:.08em;color:#e07a6a;margin:4px 0 -6px}
.endbox .rw small.bad{color:#e07a6a;letter-spacing:.05em}
.endbox .surv{gap:16px;flex-wrap:wrap;margin:6px 0 16px}
.endbox .hc{position:relative;width:196px;padding:10px 8px 10px;background:#0009;border:1px solid #3a2a1a;text-align:center;font-family:Cinzel}
.endbox .hc .por{width:92px;height:92px;margin:0 auto 6px;position:relative}
.endbox .hc .por .x{position:absolute;inset:18px;opacity:.9}
.endbox .hc .por .x svg{width:100%;height:100%}
.endbox .hc .por.flip .x{transform:scaleX(-1)}
.endbox .hc .nm{font-weight:700;font-size:15px;color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.endbox .hc .nm .lv{font-size:11px;color:var(--dim)}
.endbox .hc .stt{font-size:13px;color:#b9d08c;letter-spacing:.08em;margin:2px 0}
.endbox .hc .stt.dead{color:#e0402a;font-weight:900;letter-spacing:.2em}
.endbox .hc .stt.spared{color:#ffd76a}
.endbox .hc .st{font-family:'Cormorant Garamond';font-size:15px;color:#b8a888}
.endbox .hc .xp{font-weight:900;font-size:20px;color:#e3b865;margin-top:4px}
.endbox .hc .lvup{font-weight:900;font-size:15px;color:#ffd76a;letter-spacing:.08em;margin-top:2px;animation:lvp 1.2s ease-in-out infinite}
.endbox .hc .lvup small{display:block;font-size:11px;color:var(--parch);letter-spacing:.14em}
@keyframes lvp{50%{text-shadow:0 0 12px #ffd76a}}
.endbox .hc.up{border-color:#e3b865;box-shadow:0 0 16px #e3b86555}
.endbox .hc.dead{border-color:#6e140c;background:#1a0404aa}
.endbox .hc.dead .nm{color:#a86a5a}
.endbox .fallen{display:flex;align-items:center;justify-content:center;gap:10px;font:italic 600 22px 'Cormorant Garamond';color:#e0a090;margin:0 0 14px}
.endbox .fallen svg{width:30px;height:30px}
.endbox .loot{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;font-family:Cinzel;font-size:15px}
.endbox .loot small{letter-spacing:.24em;color:var(--dim);font-size:12px}
.endbox .btn{min-height:52px;min-width:190px}
/* small / touch screens: bigger controls (>= 44 px after scaling) */
.battle.bigui .bottom{transform:scale(1.5);transform-origin:50% 100%;left:16.66%;right:16.66%}
.battle.bigui .bottom .hint{display:none}
.battle.bigui .bottom .who{width:300px}
.battle.bigui .bottom .who .vals{display:none}
.battle.bigui .uhud{transform:scale(1.35);transform-origin:50% 0}
.battle.bigui .topr{transform:scale(1.35);transform-origin:100% 0}
.battle.bigui .crowdm{transform:translateX(-50%) scale(1.2);transform-origin:50% 0}
/* reduced motion */
.battle.calm .actmark,.battle.calm .hp .ghost,.battle.calm .crowdm .bar .cost{animation:none}
.battle.calm .ddvig{display:none}
.battle.acting .actmark{display:none}
.fighter.dim .spr{filter:brightness(.42) saturate(.6)}
.battle.calm .fighter.dim .spr{filter:brightness(.75)}
.hint .h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint .kbd{font-size:11px;line-height:1.3}
/* contact shadows drawn by the UI (scenes no longer bake them) */
.fighter .shadow{left:-118px;top:778px;width:236px;height:40px;background:radial-gradient(ellipse at 50% 50%,#000e 0,#000b 35%,#0006 55%,#0000 72%);filter:blur(1px)}
.fighter.dim .shadow{opacity:.8}