/* battle.css — Horde battle extras (HP numbers, potion shop, satchel button). Core duel styles still live in styles.css. */
#lc-satchel { position: fixed; right: 10px; bottom: 84px; z-index: 40; padding: 6px 10px; border-radius: 14px; border: 1px solid #c9a24a; background: rgba(18, 12, 8, 0.85); color: #f6e7b2; font: 600 12px Outfit, sans-serif; }
.cutscene.gate .lc-shop { position: relative; z-index: 1; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.cutscene.gate .lc-shop button { padding: 4px 8px; font-size: 12px; }
.cutscene.gate .actions { flex-wrap: wrap; }
.cutscene.gate .actions button[disabled] { opacity: 0.45; }
.lc-hp { height: 10px; border-radius: 5px; background: #2a1d12; overflow: hidden; margin: 8px 0; }
.lc-hp i { display: block; height: 100%; background: linear-gradient(90deg, #8b1d2c, #e23b3b); }

/* ---- 3D arena: perspective stage, tilted floor, parallax fog, idle bob, depth shadows ---- */
.lc3d .lc-stage { position: relative; z-index: 1; perspective: 700px; perspective-origin: 50% 30%; padding-bottom: 6px; }
.lc3d .lc-floor { position: absolute; left: -20%; right: -20%; bottom: -30px; height: 160px; transform: rotateX(68deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, rgba(201,162,74,.18) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(201,162,74,.18) 0 1px, transparent 1px 48px), radial-gradient(ellipse at 50% 40%, rgba(226,59,120,.35), rgba(10,6,4,.9) 70%);
  animation: lc-floor 6s linear infinite; pointer-events: none; }
@keyframes lc-floor { to { background-position: 0 48px, 0 48px, 0 0; } }
.lc3d .lc-fog { position: absolute; inset: -10% -30%; background: radial-gradient(ellipse at 30% 60%, rgba(226,59,120,.18), transparent 55%), radial-gradient(ellipse at 75% 40%, rgba(255,122,46,.15), transparent 50%); animation: lc-fog 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes lc-fog { to { transform: translateX(8%) scale(1.08); } }
.lc3d .duel { transform-style: preserve-3d; transform: rotateX(8deg); }
.lc3d .duelist.you img { transform: translateZ(40px) rotateY(14deg); filter: drop-shadow(0 18px 10px rgba(0,0,0,.7)); }
.lc3d .duel .pack { transform: translateZ(-10px) rotateY(-14deg); filter: drop-shadow(0 18px 12px rgba(0,0,0,.75)); }
.lc3d.phase-open .duelist.you img, .lc3d.phase-guard .duelist.you img { animation: lc-bob 2.2s ease-in-out infinite; }
@keyframes lc-bob { 50% { transform: translateZ(40px) rotateY(14deg) translateY(-6px); } }
.lc3d .duelist i { transition: width .45s cubic-bezier(.22,.61,.36,1); }
.lc3d .dmg { font-size: 30px; text-shadow: 0 3px 0 #000, 0 0 12px rgba(255,80,60,.8); animation: lc-dmg .6s cubic-bezier(.2,.9,.3,1.3) both; }
.lc3d .dmg.heal { position: absolute; left: 18%; top: 10%; z-index: 3; color: #7dffa0; text-shadow: 0 3px 0 #000, 0 0 12px rgba(80,255,140,.8); }
@keyframes lc-dmg { from { transform: translateY(14px) scale(.4); opacity: 0; } 40% { transform: translateY(-10px) scale(1.25); opacity: 1; } to { transform: translateY(-26px) scale(1); opacity: .9; } }
.lc3d.crit .flash { animation: lc-crit .35s ease-out; }
.lc3d.crit .dmg { font-size: 42px; color: #ffd84a; }
@keyframes lc-crit { from { opacity: .95; background: #fff6d0; } to { opacity: 0; } }
.lc3d.crit { animation: lc-shake .3s; }
@keyframes lc-shake { 25% { transform: translate(6px,-3px); } 50% { transform: translate(-6px,3px); } 75% { transform: translate(3px,2px); } }
.lc-burst { position: absolute; left: 22%; top: 45%; z-index: 3; pointer-events: none; }
.lc-burst i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #7dffa0; box-shadow: 0 0 10px #7dffa0; animation: lc-pop .55s ease-out both; --a: calc(var(--i) * 25.7deg); }
.potion-fury .lc-burst i { background: #ffb43a; box-shadow: 0 0 10px #ff7a2e; }
@keyframes lc-pop { from { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; } to { transform: rotate(var(--a)) translateX(70px) scale(.2); opacity: 0; } }
@media (max-width: 480px) { .lc3d .lc-floor { height: 110px; } .lc3d .duel { transform: none; } }
body.reduce .lc3d *, body.reduce .lc3d { animation: none !important; }
body:has(#modal:not([hidden])) #lc-satchel { display: none; }
@media (max-width: 480px) { .lc3d .lc-fog, .lc3d .lc-floor { animation: none; } }
.lc3d .lc-floor, .lc3d .lc-fog { z-index: 0; }
.lc3d .duel { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .cutscene.gate.lc3d .duel { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) !important; gap: 6px; align-items: end; }
  .cutscene.gate.lc3d .duel > * { position: relative !important; inset: auto !important; transform: none; min-width: 0; }
  .cutscene.gate.lc3d .duelist img { width: 100% !important; height: 120px !important; transform: none; }
  .cutscene.gate.lc3d .duel .pack { width: 100% !important; height: 100px !important; transform: none; }
  .cutscene.gate.lc3d .duelist b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .lc3d.phase-open .duelist.you img, .lc3d.phase-guard .duelist.you img { animation: lc-bob-m 2.2s ease-in-out infinite; }
}
@keyframes lc-bob-m { 50% { transform: translateY(-5px); } }