/* 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); } }

/* ---- battle-2: life-size 3D horde ---- */
.lc3d .pack-wrap { perspective: 600px; perspective-origin: 50% 20%; }
.cutscene.gate.lc3d .duel { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) !important; align-items: end; }
.cutscene.gate.lc3d .duel > * { position: relative !important; inset: auto !important; min-width: 0; }
.cutscene.gate.lc3d .duelist.you { order: 1; } .cutscene.gate.lc3d .pack-wrap { order: 2; } .cutscene.gate.lc3d .duelist.foe { order: 3; }
.lc-horde { position: relative; width: 100%; max-width: 340px; height: 200px; transform-style: preserve-3d; margin: 0 auto; }
.lc-fig { position: absolute; left: 50%; bottom: 6px; width: 300px; height: 169px; margin-left: -150px;
  transform: translateX(var(--x)) translateZ(var(--z)) scale(var(--s)); transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; }
.lc-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 0 10px rgba(226, 59, 120, 0.35)) brightness(0.95); transform-origin: 50% 100%;
  animation: lc-breathe 2.4s ease-in-out infinite; animation-delay: var(--d); }
.lc-fig:not(:last-of-type) img { filter: drop-shadow(0 0 10px rgba(226, 59, 120, 0.35)) brightness(0.8) saturate(0.85); } /* far rows darker */
.lc-shadow { position: absolute; left: 10%; right: 10%; bottom: -6px; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.75), transparent 70%); transform-origin: 50% 50%; animation: lc-shadow-b 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes lc-breathe { 0%, 100% { transform: scaleY(1) rotate(-1deg); } 50% { transform: scaleY(1.035) rotate(1.2deg) translateY(-2px); } }
@keyframes lc-shadow-b { 50% { transform: scaleX(0.92); opacity: 0.85; } }
/* lunge toward camera on the horde's answer; shadow stretches as it leaves the ground */
.lc3d.phase-answer .lc-fig { animation: lc-lunge 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(var(--d) * 0.15); }
.lc3d.phase-answer .lc-shadow { animation: lc-shadow-lunge 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes lc-lunge { 0% { transform: translateX(var(--x)) translateZ(var(--z)) scale(var(--s)); }
  45% { transform: translateX(calc(var(--x) * 0.6)) translateZ(calc(var(--z) + 140px)) translateY(8px) scale(calc(var(--s) * 1.35)); }
  100% { transform: translateX(var(--x)) translateZ(var(--z)) scale(var(--s)); } }
@keyframes lc-shadow-lunge { 45% { transform: scaleX(1.6) scaleY(1.3); opacity: 1; } }
/* recoil + white hit flash when struck */
.lc3d.phase-strike .lc-fig { animation: lc-recoil 0.38s cubic-bezier(0.3, 0.6, 0.3, 1) both; animation-delay: calc(var(--d) * 0.1); }
.lc3d.phase-strike .lc-fig img { animation: lc-hitflash 0.38s ease-out both; }
@keyframes lc-recoil { 0% { transform: translateX(var(--x)) translateZ(var(--z)) scale(var(--s)); }
  30% { transform: translateX(calc(var(--x) + 6%)) translateZ(calc(var(--z) - 50px)) rotate(4deg) scale(var(--s)); }
  60% { transform: translateX(calc(var(--x) - 3%)) translateZ(var(--z)) rotate(-2deg) scale(var(--s)); }
  100% { transform: translateX(var(--x)) translateZ(var(--z)) scale(var(--s)); } }
@keyframes lc-hitflash { 0% { filter: brightness(3) saturate(0); } 100% { filter: brightness(0.95); } }
.lc3d.crit .lc-horde { animation: lc-shake 0.3s; }
.lc-embers { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(2px 2px at 20% 80%, #ff9a4a, transparent), radial-gradient(2px 2px at 60% 70%, #ff5c8a, transparent),
  radial-gradient(1.5px 1.5px at 80% 90%, #ffd27a, transparent), radial-gradient(2px 2px at 40% 95%, #ff7a2e, transparent);
  animation: lc-embers 2.6s linear infinite; opacity: 0.8; }
@keyframes lc-embers { from { transform: translateY(10px); opacity: 0; } 20% { opacity: 0.9; } to { transform: translateY(-120px); opacity: 0; } }
@media (max-width: 600px) {
  .lc-horde { height: 120px; }
  .lc-fig { width: 170px; height: 96px; margin-left: -85px; }
  .lc-fig:nth-last-of-type(n+3) { display: none; } /* phone: at most 2 ranks */
}
body.reduce .lc-fig, body.reduce .lc-fig img, body.reduce .lc-shadow, body.reduce .lc-embers { animation: none !important; }
.lc-trait { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0; padding: 1px 7px; border-radius: 10px; border: 1px solid rgba(226,59,120,.6); background: rgba(30,10,18,.75); color: #f6d6e2; font-size: 11px; cursor: help; }
.lc-trait .lc-ticon { font-weight: normal; }