.arena-app .arena-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.arena-app .battle-preferences { display: flex; flex-wrap: wrap; gap: 8px; }
.arena-app .battle-preferences button { min-height: 32px; padding: 6px 11px; font-size: 10px; color: #ada498; background: #14120f; }
.arena-app .battle-preferences button[aria-pressed="true"] { border-color: #776036; color: #f0c879; }
.arena-app .battle-camera { position: relative; overflow: hidden; isolation: isolate; border: 1px solid #3a3022; border-radius: 7px; background: radial-gradient(ellipse at 20% 65%, #65501b30, transparent 55%), radial-gradient(ellipse at 80% 65%, #17696325, transparent 55%), #0c0e10; }
.arena-app .battle-world { padding: 22px 22px 5px; position: relative; transform-origin: center; }
.arena-app .battle-world::before { content: ''; position: absolute; inset: 38% -20% -30%; background: linear-gradient(#b8954230 1px, transparent 1px), linear-gradient(90deg, #b8954220 1px, transparent 1px); background-size: 48px 48px; transform: perspective(370px) rotateX(54deg); opacity: .45; mask-image: linear-gradient(transparent, #000 45%); pointer-events: none; }
.arena-app .battle-world::after { content: ''; position: absolute; left: 10%; right: 10%; height: 22%; bottom: 4%; border: 1px solid #d8ac4955; border-radius: 50%; box-shadow: 0 0 24px #dfb3440d, inset 0 0 18px #dfb3440d; pointer-events: none; }
.arena-app .battle-camera .battle-field { padding-top: 55px; z-index: 1; gap: 12px; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
.arena-app .battle-camera .fighter-visual { will-change: transform; transform-origin: 50% 70%; max-width: 400px; }
.arena-app .battle-camera .opponent canvas { transform: scaleX(-1); }
.arena-app .battle-camera .fighter-name, .arena-app .battle-camera .hp-track, .arena-app .battle-camera .hp-caption { position: relative; z-index: 5; }
.arena-app .battle-camera .fighter-name { min-height: 46px; }
.arena-app .battle-camera .versus { opacity: .25; z-index: 0; }
.arena-app .battle-camera .versus small { display: none; }
.arena-app .battle-camera .hp-track { height: 7px; overflow: visible; }
.arena-app .battle-camera .hp-track i { transition: width .16s ease-out; border-radius: inherit; }
.arena-app .battle-camera .is-hit .hp-track { box-shadow: 0 0 15px #ffb25377; }
.arena-app .battle-camera .is-hit.opponent .hp-track { box-shadow: 0 0 15px #77e8e777; }
.arena-app .battle-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
.arena-app .skill-callout { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9; text-align: center; opacity: 0; transition: opacity .12s; pointer-events: none; min-width: 180px; padding: 8px 26px; background: linear-gradient(90deg, transparent, #322b1de6 20%, #322b1de6 80%, transparent); color: #ffce76; }
.arena-app .skill-callout[data-side="opponent"] { color: #87e9e5; background: linear-gradient(90deg, transparent, #17302fe6 20%, #17302fe6 80%, transparent); }
.arena-app .skill-callout.visible { opacity: 1; }
.arena-app .skill-callout strong { display: block; font-size: 16px; letter-spacing: 2px; white-space: nowrap; }
.arena-app .skill-callout small { display: block; font-family: monospace; font-size: 8px; letter-spacing: 3px; margin-top: 3px; }
.arena-app .battle-phase { position: absolute; right: 14px; top: 15px; color: #a09b8f; font-size: 9px; letter-spacing: 1px; z-index: 9; }
.arena-app .battle-camera .damage-float { top: 52%; font-size: 43px; z-index: 10; font-family: monospace; text-shadow: 0 2px 0 #512800, 0 0 18px #ffae4966; }
.arena-app .battle-camera .opponent .damage-float { color: #b6ffff; text-shadow: 0 2px 0 #104746, 0 0 18px #6de6df66; }
.arena-app .battle-camera .damage-float.show { animation: battle-hit-number .65s ease-out both; }
@keyframes battle-hit-number { 0% { opacity: 1; transform: translate(-50%, 8px) scale(1.5); } 20% { opacity: 1; transform: translate(-50%, -7px) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -43px) scale(.88); } }
@media (max-width: 800px) { .arena-app .battle-world { padding-inline: 12px; } .arena-app .battle-camera .battle-field { grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr); gap: 6px; } .arena-app .battle-phase { font-size: 8px; } }
@media (max-width: 600px) {
  .arena-app .arena-tools { width: 100%; align-items: stretch; }
  .arena-app .battle-preferences { justify-content: flex-end; }
  .arena-app .battle-world { padding: 20px 9px 12px; }
  .arena-app .battle-camera .battle-field { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 50px; }
  .arena-app .battle-camera .fighter-name { min-height: 60px; }
  .arena-app .battle-camera .fighter-visual { width: 145%; max-width: none; margin: 0 -22.5%; }
  .arena-app .battle-camera .hp-track { height: 5px; }
  .arena-app .skill-callout { top: 20px; padding: 7px 14px; min-width: 150px; }
  .arena-app .skill-callout strong { font-size: 12px; letter-spacing: 1px; }
  .arena-app .skill-callout small { font-size: 6px; }
  .arena-app .battle-phase { top: 7px; right: 8px; font-size: 7px; }
  .arena-app .battle-camera .damage-float { font-size: 27px; top: 68%; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-app .battle-camera .damage-float.show { animation: none !important; opacity: 1; transform: translateX(-50%); }
  .arena-app .battle-camera .fighter:not(.is-hit) .damage-float { opacity: 0; }
  .arena-app .battle-camera .is-attacking .fighter-visual { outline: 1px solid #efd59444; border-radius: 50%; }
}