.battle-arena {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #f6f2e9;
    background: #0c0e16;
    padding: 18px max(16px, calc((100% - 860px) / 2)) 16px;
    border-bottom: 1px solid #bba36b;
    box-shadow: 0 10px 30px #10121b25;
    font-family: 'Open Sans', sans-serif;
}

.battle-arena *, .battle-arena *::before, .battle-arena *::after { box-sizing: border-box; }
.battle-arena [hidden] { display: none !important; }
.arena-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.arena-atmosphere::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .32;
    background: linear-gradient(110deg, var(--team-left) 0%, transparent var(--clash-position), var(--team-right) 100%);
}
.arena-atmosphere::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, transparent, #0c0e1670 70%), repeating-linear-gradient(0deg, transparent 0 3px, #00000012 3px 4px);
}
.arena-grid {
    position: absolute;
    inset: 40% -30% -65%;
    opacity: .13;
    background-image: linear-gradient(#c6d0ed55 1px, transparent 1px), linear-gradient(90deg, #c6d0ed55 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(380px) rotateX(60deg);
    mask-image: linear-gradient(transparent, #000 40%, transparent);
    animation: arena-grid-drift 12s linear infinite;
}
.arena-heading { text-align: center; }
.arena-eyebrow { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 0 0 5px; color: #c9b98e; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.arena-eyebrow > span { width: 6px; height: 6px; border: 1px solid #e7c982; transform: rotate(45deg); }
.arena-heading h1 { margin: 0; font-size: clamp(18px, 2.4vw, 23px); letter-spacing: -.035em; font-weight: 700; overflow-wrap: anywhere; }

.arena-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: start; padding: 18px 0 16px; }
.arena-energy-line { position: absolute; top: 82px; left: 17%; right: 17%; height: 2px; background: linear-gradient(90deg, var(--team-left), #ecdcba 50%, var(--team-right)); opacity: .45; box-shadow: 0 0 24px #e9d7a855; }
.arena-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.arena-fighter { --fighter-color: var(--team-left); --attack-offset: 12px; position: relative; min-width: 0; text-align: center; }
.arena-fighter-right { --fighter-color: var(--team-right); --attack-offset: -12px; }
.arena-crest { position: relative; display: grid; place-items: center; width: 128px; height: 128px; margin: 0 auto 8px; }
.arena-crest::before { content: ''; position: absolute; inset: 16%; background: var(--fighter-color); opacity: .4; filter: blur(32px); border-radius: 50%; animation: arena-aura 5.6s ease-in-out infinite; }
.arena-crest img { position: relative; display: block; width: 96px; height: 110px; max-height: none; object-fit: contain; filter: drop-shadow(0 8px 7px #0008); animation: arena-fighter-duel 5.6s ease-in-out infinite; }
.arena-fighter-right .arena-crest img { animation-delay: -2.8s; }
.arena-orbit { position: absolute; inset: 0; border: 1px solid #ffffff16; border-top-color: #e7d9b7a0; border-bottom-color: var(--fighter-color); border-radius: 50%; animation: arena-orbit 18s linear infinite; }
.arena-orbit::after { content: ''; position: absolute; top: 16px; right: 16px; width: 4px; height: 4px; background: #e9d5a5; transform: rotate(45deg); box-shadow: 0 0 15px #ffe5b5; }
.arena-orbit-inner { inset: 9px; border-style: dashed; opacity: .35; animation-direction: reverse; animation-duration: 28s; }
.arena-fighter-right .arena-orbit { animation-direction: reverse; }
.arena-crest-fallback { position: relative; font-size: 42px; font-weight: 800; text-shadow: 0 0 32px var(--fighter-color); }
.arena-fighter h2 { margin: 0; color: #f4f0e6; font-size: clamp(14px, 2.4vw, 18px); font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.arena-score { margin: 3px 0 7px; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; }
.arena-score > span:first-child { font-size: clamp(32px, 6.5vw, 46px); font-weight: 800; letter-spacing: -.06em; line-height: 1.15; overflow-wrap: anywhere; max-width: 100%; }
.arena-score-unit { color: #a9a8b3; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.arena-versus { position: relative; padding-top: 40px; text-align: center; color: #e9d5a5; }
.arena-versus-symbol { width: 44px; height: 44px; margin: 0 auto 8px; padding: 8px; background: #11131ce8; border: 1px solid #e9d5a544; transform: rotate(45deg); box-shadow: 0 0 36px #e9d5a515; }
.arena-versus-symbol svg { width: 100%; height: 100%; transform: rotate(-45deg); }
.arena-versus > span { display: block; margin-top: 13px; font-size: 23px; font-style: italic; font-weight: 800; letter-spacing: -.04em; }
.arena-versus small { display: block; margin-top: 6px; font-size: 8px; color: #a9a8b3; text-transform: uppercase; letter-spacing: .1em; line-height: 1.8; }
.arena-bottom { max-width: 800px; margin: 0 auto; }
.arena-balance-label { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 9px; color: #b5b2c0; text-transform: uppercase; font-size: 9px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.arena-balance { position: relative; height: 7px; background: var(--team-right); border-radius: 2px; box-shadow: 0 0 0 1px #ffffff24; }
.arena-balance-left { position: absolute; inset: 0 auto 0 0; width: var(--left-share); background: var(--team-left); border-radius: 2px 0 0 2px; }
.arena-balance::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#ffffff38, transparent); }
.arena-balance-marker { position: absolute; z-index: 1; left: clamp(5px, var(--left-share), calc(100% - 5px)); top: -3px; width: 4px; height: 13px; transform: translateX(-50%) skewX(-15deg); background: #f2e6c5; box-shadow: 0 0 14px #fff4d4b0; }
.arena-status-row { text-align: center; margin-top: 10px; }
.arena-status { margin: 0; color: #b5b2c0; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.arena-status strong { color: #f0e7d1; font-weight: 600; }
.arena-status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #e9d5a5; margin: 0 8px 2px 0; box-shadow: 0 0 9px #e9d5a575; }
.battle-arena.is-paused *, .battle-arena.is-paused *::before, .battle-arena.is-paused *::after { animation-play-state: paused !important; }

@keyframes arena-orbit { to { transform: rotate(360deg); } }
@keyframes arena-grid-drift { to { background-position: 0 60px; } }
@keyframes arena-aura { 0%, 100% { opacity: .3; transform: scale(.9); } 50% { opacity: .55; transform: scale(1.15); } }
@keyframes arena-fighter-duel {
    0%, 100% { transform: translate(0, 0) rotate(-2deg); }
    30% { transform: translate(0, -7px) rotate(1deg); }
    42% { transform: translate(calc(var(--attack-offset) * -.45), -5px) rotate(-3deg); }
    49% { transform: translate(var(--attack-offset), -2px) rotate(3deg); }
    60% { transform: translate(0, 1px) rotate(-1deg); }
    80% { transform: translate(0, -5px) rotate(1deg); }
}

@media (max-width: 600px) {
    .battle-arena { padding: 15px 14px 13px; }
    .arena-grid { animation: none; }
    .arena-heading h1 { font-size: 18px; line-height: 1.3; }
    .arena-eyebrow { font-size: 7px; letter-spacing: .16em; }
    .arena-stage { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); padding: 16px 0 13px; }
    .arena-fighter { --attack-offset: 7px; }
    .arena-fighter-right { --attack-offset: -7px; }
    .arena-crest { width: 98px; max-width: 100%; height: 106px; margin-bottom: 7px; }
    .arena-crest img { width: 76px; max-width: 88%; height: 90px; }
    .arena-orbit { inset: 5px 0; }
    .arena-orbit-inner { inset: 12px 7px; }
    .arena-orbit::after { top: 12px; right: 12px; width: 3px; height: 3px; }
    .arena-versus { padding-top: 37px; }
    .arena-versus-symbol { width: 30px; height: 30px; padding: 5px; }
    .arena-versus > span { font-size: 19px; margin-top: 12px; }
    .arena-versus small { display: none; }
    .arena-energy-line { top: 69px; }
    .arena-fighter h2 { font-size: 14px; }
    .arena-score { column-gap: 5px; row-gap: 0; }
    .arena-score > span:first-child { font-size: clamp(29px, 8.5vw, 38px); }
    .arena-score-unit { font-size: 7px; }
    .arena-balance-label { font-size: 8px; margin-bottom: 7px; }
    .arena-status { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .battle-arena *, .battle-arena *::before, .battle-arena *::after { animation: none !important; transition: none !important; }
}