.battle-screen[hidden]{display:none}.battle-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 35%,#283b4c,#0b1422 72%);overflow:auto;padding:22px 4%;color:#e8dcc5}.battle-top{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #8a704a;padding-bottom:16px}.battle-top h2{margin:0;font-size:28px;letter-spacing:4px}.battle-order{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;font-size:14px}.battle-order span{border:1px solid #6f634d;padding:6px 10px;background:#152536}.battle-order span:first-child{color:#efd39c;border-color:#e0b870}.battle-field{display:grid;grid-template-columns:1fr 1fr;gap:4%;min-height:330px;background:linear-gradient(transparent 70%,#070d1480);border-bottom:1px solid #806744}.battle-team{display:flex;align-items:end;justify-content:space-around;gap:6px}.battle-unit{width:25%;min-width:0;border:1px solid transparent;background:transparent;color:inherit;font:inherit;padding:5px;cursor:pointer;border-radius:3px}.battle-unit.current{background:#8ba5bf15;border-color:#c5a46b}.battle-unit.target{border-color:#eac88b;box-shadow:0 0 20px #c5a46b35}.battle-unit:disabled{cursor:default}.battle-unit.dead{opacity:.48}.battle-unit img{display:block;width:100%;height:clamp(150px,27vh,310px);object-fit:contain;object-position:center bottom}.battle-unit.ally img{transform:scaleX(-1)}.battle-unit.enemy img{height:clamp(130px,22vh,240px);object-fit:contain;padding:12px;opacity:.85}.battle-unit strong{font-size:16px;display:block;margin:5px 0}.battle-unit small{display:block;font-size:13px;min-height:32px;color:#b8c7d1}.battle-unit progress{width:100%;height:9px;accent-color:#91b59e}.battle-unit.enemy progress{accent-color:#b17865}.battle-bottom{display:grid;grid-template-columns:1fr 320px;gap:24px;padding-top:18px}.battle-controls{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}.battle-command{background:none;border:0;color:inherit;cursor:pointer;font:inherit;width:100px;padding:0}.battle-command[aria-pressed=true]{color:#f4d291}.battle-command:disabled{opacity:.4;cursor:default}.skill-icon{display:block;position:relative;width:96px;height:96px;margin:auto auto 7px}.skill-inner{position:absolute;inset:11%;overflow:hidden;border-radius:12%;background:#09111c}.skill-inner img{width:100%;height:100%;object-fit:contain}.skill-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.battle-command b{font-size:16px}.battle-command small{display:block;font-size:13px;margin-top:4px}.battle-desc{line-height:1.7;min-height:55px;font-size:16px;margin:12px 0}.battle-log{background:#07111c85;border:1px solid #725e4055;padding:12px;font-size:14px;line-height:1.6;max-height:190px;overflow:auto}.battle-result{padding:20px;border:1px solid #b49865;background:#122236;text-align:center}.battle-status{font-size:16px;color:#cbd4d9}.battle-start{display:grid;gap:18px;max-width:800px;margin:35px auto}.battle-start p{line-height:1.8}.battle-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.battle-picks label{background:#14273b;border:1px solid #8a704a;padding:12px;cursor:pointer}.battle-picks img{width:100%;height:140px;object-fit:cover;object-position:50% 20%}.battle-picks strong{display:block;margin:8px 0}.battle-picks small{line-height:1.7;display:block}.battle-picks input{accent-color:#b8a06a}.battle-screen button:focus-visible,.battle-picks:focus-within{outline:2px solid #f0d1a0;outline-offset:3px}@media(max-width:760px){.battle-screen{padding:15px}.battle-top h2{font-size:21px}.battle-bottom{grid-template-columns:1fr}.battle-field{gap:2%;min-height:250px}.battle-unit{padding:2px}.battle-unit strong{font-size:13px}.battle-unit small{font-size:12px}.battle-unit img{height:170px}.battle-unit.enemy img{height:150px;padding:3px}.battle-picks{grid-template-columns:repeat(2,1fr)}.battle-command{width:90px}.skill-icon{width:82px;height:82px}.battle-log{max-height:120px}}

.battle-sprite{display:block;position:relative;height:clamp(150px,27vh,310px);pointer-events:none}.battle-unit.ally .battle-sprite img{position:absolute;left:50%;bottom:0;width:auto;max-width:none;height:100%;transform:translateX(-50%) scaleX(-1)}.battle-unit.enemy .battle-sprite{height:clamp(130px,22vh,240px)}.battle-unit.enemy .battle-sprite img{height:100%}@media(max-width:760px){.battle-sprite{height:170px}.battle-unit.enemy .battle-sprite{height:150px}}

.enemy-action{display:flex;align-items:flex-end;justify-content:center;overflow:visible}.enemy-action>span{display:block;width:auto;height:100%;aspect-ratio:3/4;background-size:400% 200%;background-repeat:no-repeat;flex-shrink:0}

.battle-unit.enemy .battle-sprite img{position:absolute;left:50%;bottom:0;width:auto;max-width:none;height:100%;padding:0;opacity:1;transform:translateX(-50%);aspect-ratio:640/512}

.battle-unit .battle-sprite canvas{display:block;position:absolute;left:50%;bottom:0;width:auto;max-width:none;height:100%;transform:translateX(-50%);aspect-ratio:660/540}.battle-unit.ally .battle-sprite canvas{transform:translateX(-50%) scaleX(-1)}.battle-unit.enemy .battle-sprite canvas{aspect-ratio:640/512}
.battle-screen.cinematic .battle-unit{filter:brightness(.45)}
.battle-cinema{position:fixed;inset:0;z-index:110;pointer-events:none;overflow:hidden}.cinema-shade{position:absolute;inset:0;background:#02060dd9;opacity:1;animation:cinema-in .22s ease-out}.cinema-performer{position:absolute;transform:translateX(-50%)}.cinema-body{height:100%;transform-origin:center bottom}.cinema-body canvas{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px #0008)}.cinema-performer.ally canvas{transform:scaleX(-1)}.cinema-particles{position:absolute;inset:0;width:100%;height:100%;z-index:2}.cinema-damage{position:absolute;z-index:3;transform:translateX(-50%);font-size:34px;color:#f2deae;text-shadow:0 2px 4px #000;font-weight:600;animation:damage-rise .65s ease-out forwards}.battle-cinema.returning .cinema-shade{transition:opacity .3s;opacity:0}.battle-cinema.returning .cinema-particles,.battle-cinema.returning .cinema-damage{opacity:0}@keyframes cinema-in{from{opacity:0}to{opacity:1}}@keyframes damage-rise{from{opacity:1;translate:0 10px}to{opacity:0;translate:0 -45px}}@media(max-width:600px){.cinema-performer{max-height:300px}.cinema-damage{font-size:27px}}@media(prefers-reduced-motion:reduce){.cinema-shade,.cinema-damage{animation:none}.cinema-damage{font-size:25px}}
.cinema-skill-title{position:absolute;left:50%;top:13%;transform:translateX(-50%);color:#f5d495;font-size:30px;letter-spacing:6px;text-shadow:0 2px 10px #000;border-bottom:1px solid #bea66c;padding:8px 24px;animation:cinema-in .2s ease-out}.cinema-damage.gain{font-size:23px;color:#bfe9ff;white-space:nowrap;animation-duration:1s}.cinema-damage{font-size:40px;animation-duration:.85s}.battle-cinema.returning .cinema-skill-title{opacity:0;transition:opacity .2s}@media(max-width:600px){.cinema-skill-title{font-size:24px;top:10%}.cinema-damage.gain{font-size:16px}}

.battle-command{position:relative;border:2px solid transparent;border-radius:6px;padding:10px 3px 7px;width:112px}.battle-command[aria-pressed=true]{border-color:#ffe1a0;background:#b18b3a24;box-shadow:inset 0 0 0 2px #5d482c,0 0 14px #e9bd5845}.battle-command[aria-pressed=true] .skill-icon{filter:drop-shadow(0 0 4px #ffd38c70)}

.cinema-texture{position:absolute;z-index:2;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 7px #c5d8ff55)}.battle-cinema.returning .cinema-texture{opacity:0!important;transition:opacity .15s}

.cinema-performer{z-index:1}.cinema-texture{z-index:5}.cinema-damage,.cinema-skill-title{z-index:6}.knife-echo{filter:sepia(1) saturate(7) hue-rotate(225deg) drop-shadow(0 0 6px #b271ed);}

.battle-action-detail{font-size:14px;line-height:1.8;padding:10px 14px;margin:0 0 14px;border-left:3px solid #d6b574;background:#162b3d;color:#edddbd}.battle-state-tags{display:flex;flex-direction:column;gap:3px;margin:6px 0;font-size:12px;line-height:1.5;color:#bbd5e7}.battle-state-tags span{padding:2px 4px;border:1px solid #7596ae55;background:#102438}.battle-target-label{display:block;font-size:14px;color:#ffe1a0;margin-top:6px}.battle-unit.target{border:2px solid #ffe1a0;background:#b18b3a18;box-shadow:inset 0 0 0 2px #5d482c,0 0 20px #c5a46b35}.battle-unit.target:disabled{opacity:1}.battle-unit.dead.target{opacity:.48}

/* Head markers replace unit card selection frames. */
.battle-unit.current,.battle-unit.target{border:1px solid transparent;background:transparent;box-shadow:none}
.battle-target-label{display:none}
.battle-unit.current .battle-sprite::after,.battle-unit.target .battle-sprite::after{content:"";position:absolute;z-index:3;left:50%;top:5%;width:14px;height:14px;transform:translate(-50%,-130%) rotate(45deg);background:linear-gradient(135deg,#ffe8b3,#c89b50);border:1px solid #fff0cf;box-shadow:0 0 0 2px #142333,0 2px 8px #0009;pointer-events:none}
.battle-unit.current .battle-sprite::after{background:linear-gradient(135deg,#d2f2ff,#608dab);border-color:#e2f5ff}
.battle-unit.dead .battle-sprite::after{display:none}
@media(max-width:760px){.battle-unit.current .battle-sprite::after,.battle-unit.target .battle-sprite::after{width:11px;height:11px}}

.battle-unit-slot{width:25%;min-width:0;text-align:center}.battle-unit-slot .battle-unit{width:100%}.battle-unit-info{display:block;font-size:13px;line-height:1.5;min-height:40px;color:#b8c7d1}.battle-buff-bar{height:38px;display:flex;gap:4px;align-items:center;justify-content:center;overflow-x:auto;overflow-y:hidden;padding:3px 1px}.battle-buff-icon{flex:0 0 27px;width:27px;height:27px;padding:0;background:#142c40;border:1px solid #b7a16e;color:#e9d4a6;font:inherit;font-size:14px;border-radius:3px;cursor:help}.battle-buff-icon:hover,.battle-buff-icon[aria-expanded=true]{border-color:#ffe1a0;background:#28435a;box-shadow:0 0 6px #ddb66a55}.battle-buff-tooltip{position:fixed;z-index:130;width:280px;max-width:calc(100vw - 16px);padding:12px 14px;background:#0e2033;border:1px solid #c6a66f;box-shadow:0 5px 20px #0009;font-size:14px;line-height:1.65;color:#e4dac8}.battle-buff-tooltip strong{display:block;color:#efcf8c;margin-bottom:5px}.battle-unit.current .battle-sprite::after,.battle-unit.target .battle-sprite::after{background:transparent;border:2px solid #ffe0a0;box-shadow:0 0 6px #f1c778,inset 0 0 5px #f1c778;filter:drop-shadow(0 0 3px #eeb653)}.battle-unit.current .battle-sprite::after{background:transparent;border-color:#bfefff;box-shadow:0 0 6px #8ed9ff,inset 0 0 5px #8ed9ff;filter:drop-shadow(0 0 3px #74cfff)}@media(max-width:760px){.battle-unit-info{font-size:12px}.battle-buff-icon{flex-basis:24px;width:24px;height:24px;font-size:13px}}

.skill-inner canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.skill-icon{border:1px solid #96764c;border-radius:12%;box-sizing:border-box}.skill-fallback{display:grid;position:absolute;inset:0;place-items:center;font-size:30px;color:#c0a36d}.icon-ready .skill-fallback{display:none}.battle-unit{position:relative}.battle-hit-number{position:absolute;left:50%;top:25%;z-index:8;color:#f2deae;font-size:28px;text-shadow:0 2px 4px #000;pointer-events:none;animation:damage-rise .85s ease-out both}

.battle-unit.dead.in-range{opacity:.7;cursor:pointer}.battle-unit.dead.target .battle-sprite::after{display:block}

/* Flat cartoon backstreet stage; keep the ground visible at every viewport. */
.battle-field{background:#29231f url("combat/backstreet-dusk-background.webp") center bottom/cover no-repeat;border:1px solid #80674466;border-radius:3px;isolation:isolate}

.battle-unit.dead,.battle-unit.dead.target,.battle-unit.dead.in-range{opacity:1}.battle-unit.dead .battle-sprite canvas{filter:brightness(.25)}.battle-controls{align-items:center}.battle-controls [data-confirm]{margin-left:auto;white-space:nowrap}.battle-desc{white-space:nowrap;overflow-x:auto;min-height:0}.battle-bottom{grid-template-columns:minmax(0,1fr) 270px}.battle-bottom>div{min-width:0}@media(max-width:760px){.battle-bottom{grid-template-columns:minmax(0,1fr)}}


.battle-controls{flex-wrap:nowrap;gap:clamp(6px,1.2vw,18px)}.battle-controls .battle-command{flex:1 1 80px;max-width:100px;min-width:0}.battle-controls .skill-icon{width:min(96px,100%);height:auto;aspect-ratio:1}.battle-controls [data-confirm]{flex:0 0 82px;width:82px;height:32px;min-height:0;padding:0 6px;margin-left:0;align-self:center;font-size:14px;line-height:1;letter-spacing:0;border-width:1px;box-sizing:border-box}.battle-controls [data-confirm]::before{inset:3px}.battle-command b{font-size:clamp(12px,1.15vw,16px)}

.ash-particles{position:fixed;inset:0;width:100vw;height:100vh;z-index:114;pointer-events:none}.battle-sprite .corpse-timer{position:absolute;z-index:5;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:30px;height:30px;min-width:0;margin:0;padding:0;box-sizing:border-box;color:#efad91;background:#281b20;border:1px solid #b97365;box-shadow:0 0 8px #c4543825;border-radius:50%;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:600;letter-spacing:-.6px;line-height:1;pointer-events:auto;cursor:default}

/* Keep the acting sprite in front, with every visual effect above both units. */
.cinema-performer.cinema-actor{z-index:3}.cinema-performer{z-index:1}.cinema-particles,.cinema-texture,.cinema-support-effect,.cinema-blunt-impact,.cinema-item-effect,.cinema-item-aura{z-index:8}.cinema-damage,.cinema-skill-title{z-index:9}
.cinema-item-effect{position:absolute;width:110px;height:110px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 9px #82bcb6);animation:item-appear .95s ease-out both}.cinema-item-effect svg{width:100%;height:100%;fill:#192b31;stroke:#c0a777;stroke-width:3;stroke-linejoin:round}.cinema-item-effect .item-liquid{fill:#80b9a8;stroke:none}.cinema-item-effect .item-ring{fill:none;stroke:#85b7b5;stroke-dasharray:5 9;opacity:.65}.cinema-item-aura{position:absolute;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#77b3a535,transparent 65%);animation:item-appear .95s ease-out both}.cinema-item-aura i{position:absolute;left:calc(12% + var(--i)*12%);top:65%;width:5px;height:5px;background:#9acbb8;box-shadow:0 0 8px #9acbb8;animation:item-mote .8s ease-out both;animation-delay:calc(var(--i)*.035s)}.battle-cinema.returning .cinema-item-effect,.battle-cinema.returning .cinema-item-aura{opacity:0}
@keyframes item-appear{0%{opacity:0;scale:.75}18%,70%{opacity:1;scale:1}100%{opacity:0;scale:1.1}}@keyframes item-mote{from{opacity:0;translate:0 20px}30%{opacity:1}to{opacity:0;translate:0 -80px}}@media(prefers-reduced-motion:reduce){.cinema-item-effect,.cinema-item-aura,.cinema-item-aura i{animation:none}}

.battle-screen .battle-top{justify-content:flex-start}.battle-exit-actions{display:flex;gap:9px;align-items:center}.battle-exit-actions .seal{padding:8px 16px;min-width:70px}.battle-exit-actions .battle-withdraw{background:#732e30;border-color:#ba6b60;color:#ffe2d5}.battle-exit-actions .battle-withdraw:hover{background:#963b3e}.battle-top .battle-round{position:static;margin-right:12px}

.battle-exit-dialog{width:min(500px,calc(100vw - 40px));box-sizing:border-box;padding:28px;color:#e5dac5;background:linear-gradient(145deg,#1b2e3e,#0d1b2a);border:1px solid #b99b60;box-shadow:0 12px 65px #000b}.battle-exit-dialog::backdrop{background:#030914b8;backdrop-filter:blur(5px)}.battle-exit-dialog h2{color:#e8c982;margin:0 0 18px}.battle-exit-dialog p{line-height:1.8;font-size:16px}.battle-exit-dialog-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:22px}.battle-exit-dialog .battle-withdraw{background:#732e30;border-color:#ba6b60;color:#ffe2d5}.dice-panel{display:flex;flex-direction:column;align-items:center;gap:12px}.yellow-dice{width:86px;height:86px;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;padding:14px;border-radius:15px;background:linear-gradient(135deg,#f6dd78,#c39528);border:2px solid #f8dfa0;box-shadow:inset -5px -6px 0 #86631b66,inset 3px 3px 0 #fff5,8px 14px 15px #0009;transform:rotate(-8deg)}.yellow-dice i{display:block;border-radius:50%}.yellow-dice i.pip{background:#392914;box-shadow:inset 1px 2px 2px #0009,0 1px 0 #ffe3a6}.yellow-dice.rolling{animation:yellow-dice-tumble .32s linear infinite}.yellow-dice.landed{animation:yellow-dice-land .22s ease-out}.dice-panel p{margin:0;line-height:1.7}@keyframes yellow-dice-tumble{0%{transform:translate(-30px,-15px) rotate(-35deg) scale(.9)}25%{transform:translate(5px,-35px) rotate(70deg) scale(1)}50%{transform:translate(32px,-5px) rotate(165deg) scale(.85)}75%{transform:translate(5px,-24px) rotate(260deg) scale(1)}100%{transform:translate(-30px,-15px) rotate(325deg) scale(.9)}}@keyframes yellow-dice-land{from{transform:translateY(-15px) rotate(18deg)}to{transform:translateY(0) rotate(-8deg)}}@media(prefers-reduced-motion:reduce){.yellow-dice.rolling,.yellow-dice.landed{animation:none}}

.battle-team .battle-position-holder{flex:1 1 0;display:flex;align-items:flex-end}.battle-unit-slot{width:100%}.battle-team.ally,.battle-team.enemy{align-items:flex-end}.battle-screen .enemy-tp-spacer{height:24px}.battle-screen .tp-pips{height:24px;margin:0;padding:4px 0}.battle-cinema .cinema-crown-fire{position:absolute;width:210px;height:240px;transform:translate(-50%,-50%);z-index:8;filter:drop-shadow(0 0 24px #eeb552);animation:holy-fire 1.2s ease-out both}.cinema-crown-fire svg{width:100%;height:100%}.holy-flame{fill:#e9b447;stroke:#ffe29a;stroke-width:2}.fire-bowl{fill:#947144;stroke:#d8ba75;stroke-width:4}.fire-crown{fill:none;stroke:#e9ca75;stroke-width:5}@keyframes holy-fire{0%{opacity:0;scale:.6}20%,75%{opacity:1;scale:1}100%{opacity:0;scale:1.2}}
.battle-confirm-stack{display:flex;position:relative;align-self:stretch;align-items:flex-end}.battle-auto{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font:inherit;font-size:14px;color:#e4d2ad;border:1px solid #a58a59;background:#172638;padding:6px 10px;cursor:pointer}.battle-auto[aria-pressed="true"]{background:#455642;border-color:#bdd39d;color:#e2efcf}.battle-screen [data-speed]{min-width:96px}.battle-confirm-stack [data-confirm]{height:100%}.battle-cinema,.battle-screen{--battle-speed:1}

.battle-controls .battle-confirm-stack{align-self:center;height:32px;flex:0 0 82px}.battle-confirm-stack .battle-auto{bottom:calc(100% + 8px);font-size:13px;padding:5px 7px}.battle-confirm-stack [data-confirm]{height:32px}

.battle-test-setup{width:min(100%,1100px);max-width:1100px;margin:12px auto;gap:14px}.battle-test-setup h3,.battle-test-setup h4,.battle-test-setup p{margin:0}.battle-test-team{border:1px solid #80674466;background:#101f30aa;padding:14px}.battle-test-team h4{margin-bottom:10px;color:#dfc28b}.battle-test-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.battle-test-slot{display:grid;gap:8px;min-width:0;text-align:center}.battle-test-slot>span{font-size:14px;color:#bdad92}.battle-test-mini{height:105px;display:flex;align-items:center;justify-content:center;background:#09121b66}.battle-test-mini img{width:100%;height:100%;object-fit:contain}.battle-test-slot select,.battle-test-background select{width:100%;min-width:0;background:#122536;color:#e8dcc5;border:1px solid #8a704a;padding:10px;font:inherit;border-radius:3px}.battle-test-background{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:18px;align-items:center}.battle-test-background label{display:grid;gap:10px}.battle-test-background img{width:100%;height:110px;object-fit:cover;object-position:center 55%;border:1px solid #80674466}.battle-test-setup>p{font-size:14px;color:#bcb4a7;line-height:1.6}.battle-test-setup #battle-error{color:#f1be9a}@media(max-width:650px){.battle-test-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.battle-test-background{grid-template-columns:1fr}.battle-test-mini{height:85px}}