/* v67.32 — cinematic, specimen-aware combat. No bitmap effects or third-party renderer. */
#battleOverlay { background:rgba(2,8,18,.88); backdrop-filter:blur(9px); padding:14px; }
#battleOverlay .battle-scene { position:relative; isolation:isolate; width:min(100%,1040px); padding:18px; border:1px solid #536b7c; border-radius:24px; background:linear-gradient(145deg,#152a3d,#091421 65%); box-shadow:0 28px 100px #000b,inset 0 1px #fff1; }
#battleOverlay .battle-head { position:relative; z-index:24; font-size:13px; border-bottom:1px solid #7ab9ce24; padding:0 0 12px; letter-spacing:.05em; }
#battleOverlay .battle-head button { width:36px; height:36px; padding:0; border:1px solid #c9eaff26; background:#142c40; }
#battleArena { --battle-color:#9be8c1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; min-height:368px; margin-top:12px; border-radius:18px; padding:30px 30px 20px; border:1px solid #9ae7d42b; background:radial-gradient(ellipse at 50% 120%,#1e625b85,transparent 70%),linear-gradient(#0b1d30,#102b38 70%,#112f30); }
#battleArena[data-element=fire] { --battle-color:#ffb478; background:radial-gradient(ellipse at 50% 120%,#8a412466,transparent 70%),linear-gradient(#211a31,#2d2733 70%,#432f2f); }
#battleArena[data-element=water],#battleArena[data-element=ice] { --battle-color:#86e9ff; background:radial-gradient(ellipse at 50% 120%,#266ba16b,transparent 70%),linear-gradient(#101e37,#15354f 70%,#134c5b); }
#battleArena[data-element=dark] { --battle-color:#c6a4ff; background:radial-gradient(ellipse at 50% 120%,#6745a16b,transparent 70%),linear-gradient(#17152e,#242343 70%,#322c54); }
#battleArena[data-element=light],#battleArena[data-element=lightning] { --battle-color:#ffe69b; }
.battle-stage-orbit { position:absolute; left:12%; right:12%; bottom:31%; height:26%; border:1px solid var(--battle-color); opacity:.17; border-radius:50%; box-shadow:0 0 0 24px #a6d3e108,0 0 0 52px #a6d3e105; pointer-events:none; }
.battle-stage-grid { position:absolute; inset:45% -30% -60%; pointer-events:none; opacity:.12; background-image:linear-gradient(#c5e8db55 1px,transparent 1px),linear-gradient(90deg,#c5e8db55 1px,transparent 1px); background-size:48px 48px; transform:perspective(240px) rotateX(55deg); mask-image:linear-gradient(transparent,#000); }
#battleParticles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; }
.battle-turn-chip { position:absolute; z-index:3; top:14px; left:50%; transform:translateX(-50%); color:#d1e3e7; padding:5px 14px; border:1px solid #b1d8eb24; border-radius:100px; background:#0716258c; font-size:11px; letter-spacing:.10em; }
#battleArena .battle-monster { position:relative; grid-row:1; gap:5px; z-index:2; }
#battleArena .battle-monster { align-self:start; }
#battleArena .battle-monster.ally { grid-column:1; }
#battleArena .battle-monster.enemy { grid-column:2; }
#battleArena .battle-monster > .battle-creature-host { position:relative; width:clamp(120px,21vw,220px); height:clamp(120px,21vw,220px); display:block; animation:none !important; transform:none; filter:none; }
.battle-creature-host::after { content:""; position:absolute; bottom:9%; left:25%; width:50%; height:10%; z-index:-1; border-radius:50%; background:#0005; filter:blur(6px); }
.battle-creature-sprite { position:absolute; inset:0; display:block; background-repeat:no-repeat; background-size:contain; background-position:center; image-rendering:pixelated; filter:drop-shadow(0 3px 0 #0004); }
.battle-creature-sprite.parts-ready { background-size:1200% 100%; background-position-y:0; animation:lwPartFrames var(--battle-sprite-seconds,2s) steps(12,end) infinite; }
.battle-creature-sprite.parts-ready:is([data-state=attack],[data-state=skill],[data-state=hurt],[data-state=faint]) { animation:lwPartFramesOnce var(--battle-sprite-seconds,.75s) steps(11,end) 1 both; }
.battle-creature-sprite.is-shiny { filter:drop-shadow(0 0 10px #ffda806b); }
.battle-traveler { position:absolute; inset:0; display:grid; place-items:center; font-size:90px; }
#battleArena .battle-monster > strong { font-size:16px; letter-spacing:.025em; }
#battleArena .battle-monster > strong { min-height:24px; display:flex; align-items:center; justify-content:center; }
#battleArena #allyElement,#battleArena #enemyElement { min-height:34px; display:flex; align-items:center; justify-content:center; font-size:11px !important; font-weight:500 !important; line-height:1.5 !important; }
#battleArena .battle-monster > small { font-size:11px; color:#a3c3d1; }
#battleArena .battle-part-badges { display:none; }
#battleArena .battle-hp { width:min(205px,95%); height:8px; margin-top:4px; background:#070f1a; border-color:#bed8e331; }
#battleArena .battle-hp span { background:linear-gradient(90deg,#64c7aa,#c2f6a6); transition:width .5s cubic-bezier(.2,.7,.3,1); }
#battleArena .enemy .battle-hp span { background:linear-gradient(90deg,#ef937d,#ffdb8b); }
#battleArena .battle-vs { position:absolute; left:50%; top:43%; transform:translate(-50%,-50%); color:#d3c693; opacity:.6; z-index:1; font-size:17px; font-style:italic; letter-spacing:.15em; }
.battle-skill-banner { position:absolute; top:15%; left:50%; transform:translate(-50%,-12px); z-index:9; padding:8px 22px; min-width:160px; text-align:center; border-block:1px solid #d8eafa66; border-radius:4px; color:#e7ffff; background:linear-gradient(90deg,transparent,#0d263ae8 25%,#0d263ae8 75%,transparent); font-size:15px; font-weight:800; opacity:0; transition:opacity .18s,transform .18s; pointer-events:none; }
.battle-skill-banner.show { opacity:1; transform:translate(-50%,0); }
.battle-skill-banner[data-element=fire] { color:#ffd09b; border-color:#ffb78499; }
.battle-skill-banner[data-element=dark] { color:#dab4ff; border-color:#d5acff99; }
.battle-damage-number { position:absolute; z-index:10; display:flex; flex-direction:column; align-items:center; pointer-events:none; color:#fff5d4; transform:translate(-50%,-50%); animation:battleDamageRise 1.2s ease-out both; text-shadow:0 3px 0 #102131,0 0 14px #000b; }
.battle-damage-number strong { font-size:35px; line-height:1; font-variant-numeric:tabular-nums; }
.battle-damage-number small { margin-top:6px; font-size:10px; font-weight:800; white-space:nowrap; }
.battle-damage-number[data-effectiveness=strong] { color:#ffce87; }
.battle-damage-number[data-effectiveness=weak] { color:#a7c9df; }
@keyframes battleDamageRise { 0% {opacity:0;translate:0 15px;scale:.65;} 15% {opacity:1;scale:1.12;} 35% {scale:1;} 75% {opacity:1;} 100% {opacity:0;translate:0 -55px;} }
.battle-impact-shake { animation:battleImpactShake .25s ease-out; }
@keyframes battleImpactShake { 20% {translate:-3px 1px;} 40% {translate:3px -1px;} 65% {translate:-2px 0;} 100% {translate:0 0;} }
#battleOverlay .battle-log { min-height:45px; margin:12px 0; border:1px solid #7197b027; color:#b9d4e3; background:#071421b8; border-radius:12px; font-size:12px; }
#battleOverlay .battle-moves { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:200px; gap:8px; }
#battleOverlay .battle-move { min-height:60px !important; border-color:#84c8df26 !important; background:linear-gradient(145deg,#1a394b,#112737) !important; }
#battleOverlay .battle-move:hover:not(:disabled) { border-color:#9ae8d8a6 !important; background:#1d4655 !important; }
#battleOverlay.is-presenting .battle-moves { opacity:.6; }
.battle-cutscene { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; overflow:hidden; text-align:center; border-radius:24px; background:radial-gradient(ellipse at 50% 45%,#244f5ae6,#050e1af5 70%); animation:battleCinemaReveal .3s ease-out both; }
.battle-cutscene[hidden] { display:none !important; }
.battle-cutscene::before,.battle-cutscene::after { content:""; position:absolute; left:0; right:0; height:11%; background:#02070de8; pointer-events:none; }
.battle-cutscene::before { top:0; }.battle-cutscene::after { bottom:0; }
.battle-cinema-lines { position:absolute; inset:-70%; opacity:.14; background:repeating-conic-gradient(from 10deg,#d4f8f0 0deg 1deg,transparent 1deg 18deg); mask-image:radial-gradient(transparent 15%,#000 75%); animation:battleCinemaOrbit 22s linear infinite; pointer-events:none; }
.battle-cinema-kicker { color:#96c9c7; font-size:10px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; margin:0; z-index:1; }
.battle-cinema-portrait { width:180px; height:180px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 12px 22px #02090e80); z-index:1; animation:battlePortraitReveal .6s cubic-bezier(.2,.8,.2,1) both; }
.battle-cutscene h2 { color:#e1fff5; font-size:clamp(32px,6vw,66px); line-height:1.15; margin:0; letter-spacing:.04em; z-index:1; text-shadow:0 2px 28px #b0ffe742; }
#battleCutsceneDetail { color:#b1d4db; margin:0; padding:0 18px; font-size:14px; z-index:1; }
#battleCutsceneSkip { position:absolute; bottom:14%; right:24px; padding:7px 15px; z-index:2; font-size:11px; border:1px solid #c6e8f72b; border-radius:100px; color:#c2dbe8; background:#0e2034; }
.battle-cutscene[data-scene=victory] { background:radial-gradient(ellipse at 50% 40%,#5c4b31ed,#100f19f5 75%); }
.battle-cutscene[data-scene=victory] h2 { color:#ffe3a0; text-shadow:0 3px 35px #ffcd7766; }
.battle-cutscene[data-scene=victory] .battle-cinema-kicker { color:#e5c387; }
.battle-cutscene[data-scene=defeat] { background:radial-gradient(ellipse at 50% 45%,#473a59eb,#090f1af5 75%); }
.battle-cutscene[data-scene=skill] .battle-cinema-portrait { width:130px; height:130px; }
@keyframes battleCinemaReveal { from {opacity:0;} to {opacity:1;} }
@keyframes battlePortraitReveal { from {opacity:0;translate:0 24px;scale:.8;} to {opacity:1;translate:0 0;scale:1;} }
@keyframes battleCinemaOrbit { to {rotate:1turn;} }
@media(max-width:600px) {
  #battleOverlay { padding:8px; }
  #battleOverlay .battle-scene { padding:12px; border-radius:18px; max-height:calc(100dvh - 16px); }
  #battleArena { min-height:300px; padding:35px 8px 16px; gap:24px; }
  #battleArena .battle-monster > .battle-creature-host { width:clamp(110px,33vw,180px); height:clamp(110px,33vw,180px); }
  #battleArena .battle-monster > strong { font-size:13px; }
  #battleArena .battle-monster > small { font-size:10px; }
  #battleOverlay .battle-moves { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:170px; }
  .battle-cinema-portrait { width:145px; height:145px; }
}
@media(prefers-reduced-motion:reduce) {
  .battle-creature-sprite.parts-ready,.battle-cinema-lines,.battle-cinema-portrait,.battle-impact-shake { animation:none !important; }
  .battle-damage-number { animation-duration:.2s; }
}