/* ═══════════════════════════════════════════════════════════════════════════════
   INFINITY STAR X — GRAND STAR TOURNAMENT ARENA
   Battle system styles for the online turn-based combat system.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts imported in HTML ──────────────────────────────────────────── */

:root {
    --primary-dark:   #0A0E1A;
    --secondary-dark: #121826;
    --accent-cyan:    #00D9FF;
    --accent-purple:  #B794F6;
    --accent-gold:    #FBBF24;
    --accent-green:   #22c55e;
    --accent-red:     #ef4444;
    --text-primary:   #E8E9F3;
    --text-secondary: #A0A3BD;
    --transition:     0.3s;
}

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--primary-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Navigation Bar ─────────────────────────────────────────────────────────── */
.arena-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: rgba(10,14,26,0.97);
    border-bottom: 1px solid rgba(0,217,255,0.18);
    backdrop-filter: blur(12px);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
}
.arena-nav-logo {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    letter-spacing: 2px;
    flex-shrink: 0;
}
.arena-nav-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Queue Entry Progress Bar ───────────────────────────────────────────────── */
.queue-progress {
    flex: 1;
    display: flex;
    align-items: center;   /* vertically center the bar group in the nav */
    justify-content: center;
    gap: 0;
    overflow: visible;     /* allow glow box-shadows to render */
    padding: 0 0.5rem;
}

/* Individual step: dot on top, label below */
.queue-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* Dot indicator */
.qs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.16);
    transition: all 0.35s ease;
    flex-shrink: 0;
}

/* Step label beneath dot */
.qs-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    transition: color 0.35s ease;
    white-space: nowrap;
    line-height: 1;
}

/*  Connector line between steps.
    With align-items:center on parent and a step height ≈ 21px:
      connector margin-box = 2px + 11px margin-bottom = 13px
      centering 13px within 21px → visual top = 4px → visual center = 5px
      dot center = 5px  ✓  (perfect alignment)                             */
.queue-connector {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.09);
    margin-bottom: 11px;
    transition: background 0.4s ease;
    min-width: 8px;
    max-width: 36px;
    flex-shrink: 1;
}
.queue-connector.filled { background: var(--accent-gold); }

/* Active step — glowing gold dot */
.queue-step.active .qs-dot {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    box-shadow: 0 0 7px rgba(251,191,36,0.75), 0 0 14px rgba(251,191,36,0.35);
    transform: scale(1.3);
}
.queue-step.active .qs-label { color: var(--accent-gold); }

/* Completed step — solid dot, slightly dimmer label */
.queue-step.completed .qs-dot {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    box-shadow: 0 0 4px rgba(251,191,36,0.3);
}
.queue-step.completed .qs-label { color: rgba(251,191,36,0.55); }

/* ── Queue Up button (far right) ────────────────────────────────────────────── */
.btn-queue-up {
    padding: 8px 18px;
    border-radius: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0a0e1a;
    transition: all 0.2s;
    box-shadow: 0 0 16px rgba(251,191,36,0.22);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-queue-up:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 26px rgba(251,191,36,0.5);
}
.btn-queue-up:disabled {
    opacity: 0.28;
    cursor: not-allowed;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.35);
    box-shadow: none;
}

/* ── Screens ────────────────────────────────────────────────────────────────── */
.arena-screen {
    display: none;
    min-height: 100vh;
    padding-top: 56px; /* nav height */
}
.arena-screen.active { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════════════════════
   LOBBY SCREEN — Queue Entry Wizard
   ═══════════════════════════════════════════════════════════════════════════════ */
#lobbyScreen {
    background:
        radial-gradient(ellipse at 50% 20%, rgba(251,191,36,0.07) 0%, transparent 60%),
        linear-gradient(180deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 80px; /* nav height + breathing room */
    padding-bottom: 100px; /* space for fixed bottom bar */
    overflow-y: auto;
}

/* Division cards grid */
.division-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
    max-width: 860px;
    padding: 0 1.5rem;
    margin: 0 auto;
}

.division-card {
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    background: rgba(18,24,38,0.8);
    transition: all 0.25s;
    text-align: center;
}
.division-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.25s;
}
.division-card:hover { transform: translateY(-4px); border-color: currentColor; }
.division-card:hover::before { opacity: 1; }
.division-card.selected { transform: translateY(-4px); border-color: currentColor; box-shadow: 0 0 24px rgba(0,0,0,0.4); }
.division-card.selected::before { opacity: 1; }

/* Lightweight — green */
.div-lightweight { color: var(--accent-green); }
.div-lightweight::before { background: radial-gradient(ellipse at 50% 0%, rgba(34,197,94,0.12) 0%, transparent 70%); }

/* Heavyweight — gold */
.div-heavyweight { color: var(--accent-gold); }
.div-heavyweight::before { background: radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.12) 0%, transparent 70%); }

/* Freeform — purple */
.div-freeform { color: var(--accent-purple); }
.div-freeform::before { background: radial-gradient(ellipse at 50% 0%, rgba(183,148,246,0.12) 0%, transparent 70%); }

.div-icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.div-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}
.div-rule {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.div-rule strong { color: var(--text-primary); }

/* Team selector section */
.lobby-team-section {
    width: 100%;
    max-width: 860px;
    padding: 0 1.5rem;
    margin: 1.75rem auto 0;
}
.lobby-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.lobby-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.lobby-team-card {
    border-radius: 12px;
    padding: 1rem;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(18,24,38,0.7);
    cursor: pointer;
    transition: all 0.2s;
}
.lobby-team-card:hover { border-color: rgba(0,217,255,0.4); background: rgba(0,217,255,0.04); }
.lobby-team-card.selected {
    border-color: var(--accent-cyan);
    background: rgba(0,217,255,0.07);
    box-shadow: 0 0 16px rgba(0,217,255,0.15);
}
.lobby-team-card.invalid {
    opacity: 0.4;
    cursor: not-allowed;
}
.lobby-team-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}
.lobby-team-icons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.lobby-team-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.lobby-team-div-tag {
    margin-top: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
}
.tag-lightweight { color: var(--accent-green); background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); }
.tag-heavyweight { color: var(--accent-gold); background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); }
.tag-freeform    { color: var(--accent-purple); background: rgba(183,148,246,0.08); border: 1px solid rgba(183,148,246,0.3); }
.tag-mixed       { color: var(--accent-red); background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); }

.lobby-no-teams {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 12px;
}
.lobby-no-teams a { color: var(--accent-cyan); text-decoration: none; font-weight: 700; }

/* GeoDex quick-link used in lobby bottom nav */
.btn-geodex-link {
    padding: 8px 16px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(0,217,255,0.35);
    background: rgba(0,217,255,0.05);
    color: var(--accent-cyan);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}
.btn-geodex-link:hover { background: rgba(0,217,255,0.12); }

/* ═══════════════════════════════════════════════════════════════════════════════
   BATTLE SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */
#battleScreen {
    /* Plain dark background — stage image is applied to .battle-plate, not the full screen */
    background: linear-gradient(180deg, #080c18 0%, #0a0e1a 100%);
    flex-direction: column;
    padding: 56px 0 0;
    /* Lock to viewport so battle log cannot push content off-screen */
    height: 100vh;
    overflow: hidden;
}

/* Battle header bar */
.battle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.battle-turn-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent-cyan);
    text-transform: uppercase;
}
.battle-division-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 12px;
    letter-spacing: 1px;
}
.battle-turn-counter {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Main battle area — 3-column: stats panel | battlefield | log+actions */
.battle-arena {
    display: grid;
    grid-template-columns: 220px 1fr 310px;
    flex: 1;
    overflow: hidden;
    /* min-height:0 prevents flex children from overflowing their container */
    min-height: 0;
}

/* ── Battlefield (left column) ─────────────────────────────────────────────── */
.battlefield {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    overflow-y: auto;
    min-height: 0;
}

/* Team bar (enemy / player) */
.team-bar {
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgba(18,24,38,0.6);
    border: 1px solid rgba(255,255,255,0.06);
    align-items: center;
}
.team-bar-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    min-width: 24px;
}
.team-slots {
    display: flex;
    gap: 0.5rem;
    flex: 1;
}

/* Mini creature slot in team bar */
.team-slot-mini {
    flex: 1;
    border-radius: 10px;
    padding: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    position: relative;
    min-width: 0;
}
.team-slot-mini.active-slot {
    border-color: var(--accent-cyan);
    background: rgba(0,217,255,0.07);
    box-shadow: 0 0 12px rgba(0,217,255,0.15);
}
.team-slot-mini.fainted { opacity: 0.3; }

.slot-mini-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.team-slot-mini.fainted .slot-mini-img { filter: grayscale(1) drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }

.slot-mini-hp-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.slot-mini-hp-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease, background 0.3s;
    background: var(--accent-green);
}
.slot-mini-hp-fill.hp-mid  { background: var(--accent-gold); }
.slot-mini-hp-fill.hp-low  { background: var(--accent-red); }

.slot-mini-name {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Battle Plate — the stage background image lives here, not on the full screen.
   Wraps .vs-stage so the image is confined to the combatant fight area only. */
.battle-plate {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    margin: 0 0.25rem;
    /* Stage image set via inline style by JS; dark overlay baked into the gradient layer */
    background-color: #05080f;       /* fallback when no stage is selected */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* Thin border + glow to visually frame the arena */
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.55), 0 0 20px rgba(0,0,0,0.4);
    flex-shrink: 0;
}

/* VS arena stage — compact; takes only what it needs */
.vs-stage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    gap: 0.75rem;
    min-height: 140px;
    max-height: 200px;
    position: relative;
}

/* Active combatant card — compact width */
.combatant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    max-width: 160px;
}
.combatant.combatant-enemy { flex-direction: column-reverse; }

/* Active combatant portrait — compact size so vs-stage stays tight */
.combatant-portrait {
    position: relative;
    width: 88px;
    height: 88px;
}
.combatant-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.7));
    transition: transform 0.15s;
}
/* Shake animation for taking damage */
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}
@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.combatant-portrait.shake img { animation: shake 0.4s ease; }
.combatant-portrait.bounce img { animation: bounce 0.5s ease; }

/* Damage float text */
.damage-float {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    pointer-events: none;
    animation: floatUp 1.2s ease forwards;
    z-index: 10;
}
@keyframes floatUp {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    60%  { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1.1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.8); }
}
.damage-float.phys { color: #ff6b35; text-shadow: 0 0 8px rgba(255,107,53,0.6); }
.damage-float.spell { color: #a78bfa; text-shadow: 0 0 8px rgba(167,139,250,0.6); }
.damage-float.heal { color: #22c55e; text-shadow: 0 0 8px rgba(34,197,94,0.6); }
.damage-float.miss { color: var(--text-secondary); font-size: 0.9rem; }

/* Speed bar row inside combatant-info card */
.combatant-spd-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}
.combatant-spd-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #3b82f6;
    min-width: 22px;
}
.combatant-spd-track {
    flex: 1;
    height: 3px;
    background: rgba(59,130,246,0.12);
    border-radius: 2px;
    overflow: hidden;
}
.combatant-spd-fill {
    height: 100%;
    border-radius: 2px;
    background: #3b82f6;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(59,130,246,0.5);
}
.combatant-spd-val {
    font-size: 0.58rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 22px;
    text-align: right;
}

/* Name + HP bar card */
.combatant-info {
    width: 100%;
    background: rgba(8,12,24,0.8);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.07);
}
.combatant-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.combatant-hp-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.combatant-hp-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.combatant-hp-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-green);
    transition: width 0.5s ease, background 0.3s;
}
.combatant-hp-fill.hp-mid  { background: var(--accent-gold); }
.combatant-hp-fill.hp-low  { background: var(--accent-red); }

/* Enemy HP bar is always red — signals threat level to the player */
#enemyHpFill           { background: #ef4444; }
#enemyHpFill.hp-mid    { background: #b91c1c; }
#enemyHpFill.hp-low    { background: #7f1d1d; }
.combatant-hp-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}
.combatant-status {
    margin-top: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    display: inline-block;
}
.status-burn    { background: rgba(255,107,53,0.15); color: #ff6b35; border: 1px solid rgba(255,107,53,0.3); }
.status-poison  { background: rgba(167,139,250,0.15); color: #a78bfa; border: 1px solid rgba(167,139,250,0.3); }
.status-stun    { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }

/* ── Status Effect — Sprite glow animations ─────────────────────────────────
   Applied to .combatant-portrait when a status is active.
   The img filter creates a visible tint + glow on the sprite.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes spriteBurn {
    0%, 100% { filter: drop-shadow(0 0 10px #ff6b35) drop-shadow(0 0 20px rgba(255,107,53,0.5)) brightness(1.15) saturate(1.5); }
    50%      { filter: drop-shadow(0 0 22px #ff3300) drop-shadow(0 0 30px rgba(255,51,0,0.7))   brightness(1.4)  saturate(2.0); }
}
@keyframes spritePoison {
    0%, 100% { filter: drop-shadow(0 0 10px #a78bfa) drop-shadow(0 0 18px rgba(167,139,250,0.5)) hue-rotate(240deg) saturate(2.0) brightness(0.9); }
    50%      { filter: drop-shadow(0 0 22px #7c3aed) drop-shadow(0 0 28px rgba(124,58,237,0.7))  hue-rotate(260deg) saturate(3.0) brightness(0.75); }
}
@keyframes spriteStun {
    0%, 100% { filter: drop-shadow(0 0 12px #fbbf24) drop-shadow(0 0 20px rgba(251,191,36,0.6)) brightness(1.2) saturate(0.5); }
    50%      { filter: drop-shadow(0 0 24px #f59e0b) drop-shadow(0 0 32px rgba(245,158,11,0.8)) brightness(0.6) saturate(0.1); }
}

/* Apply sprite animations via classes added by refreshBattleUI() */
.combatant-portrait.status-burn   img { animation: spriteBurn   1.1s ease-in-out infinite; }
.combatant-portrait.status-poison img { animation: spritePoison 1.3s ease-in-out infinite; }
.combatant-portrait.status-stun   img { animation: spriteStun   0.7s ease-in-out infinite; }

/* Shake/bounce take priority — remove status animation during hit flash */
.combatant-portrait.shake  img { animation: shake  0.4s ease !important; }
.combatant-portrait.bounce img { animation: bounce 0.5s ease !important; }

/* ── Status Effect — HUD card pulse ─────────────────────────────────────────
   Applied to .combatant-info when a status is active.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes hudBurn {
    0%, 100% { border-color: rgba(255,107,53,0.15); box-shadow: none; }
    50%      { border-color: rgba(255,107,53,0.7);  box-shadow: 0 0 16px rgba(255,107,53,0.35) inset, 0 0 8px rgba(255,107,53,0.2); }
}
@keyframes hudPoison {
    0%, 100% { border-color: rgba(167,139,250,0.15); box-shadow: none; }
    50%      { border-color: rgba(167,139,250,0.7);  box-shadow: 0 0 16px rgba(167,139,250,0.35) inset, 0 0 8px rgba(167,139,250,0.2); }
}
@keyframes hudStun {
    0%, 100% { border-color: rgba(251,191,36,0.15); box-shadow: none; }
    50%      { border-color: rgba(251,191,36,0.7);  box-shadow: 0 0 16px rgba(251,191,36,0.35) inset, 0 0 8px rgba(251,191,36,0.2); }
}

.combatant-info.status-burn   { animation: hudBurn   1.1s ease-in-out infinite; }
.combatant-info.status-poison { animation: hudPoison 1.3s ease-in-out infinite; }
.combatant-info.status-stun   { animation: hudStun   0.7s ease-in-out infinite; }

/* ── Right column: log + action panel ─────────────────────────────────────── */
.battle-side-panel {
    border-left: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    background: rgba(5,8,18,0.5);
    overflow: hidden;
    /* Must have min-height:0 for flex child scroll to work */
    min-height: 0;
}

/* Battle log — fixed-height scrollable region, never expands outward */
.battle-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,217,255,0.2) transparent;
}
.log-entry { padding: 2px 0; }
.log-entry.log-player { color: var(--accent-cyan); }
.log-entry.log-enemy  { color: #f87171; }
.log-entry.log-system { color: var(--text-secondary); font-style: italic; }
.log-entry.log-crit   { color: var(--accent-gold); font-weight: 700; }

/* Action panel */
.action-panel {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 1rem;
    flex-shrink: 0;
}

.action-panel-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}

/* Main action menu */
.action-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.action-btn {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(18,24,38,0.8);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}
.action-btn:hover:not(:disabled) { border-color: var(--accent-cyan); background: rgba(0,217,255,0.07); }
.action-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.action-btn.btn-attack  { border-color: rgba(255,107,53,0.3); color: #ff8c5a; }
.action-btn.btn-items   { border-color: rgba(34,197,94,0.3);  color: #4ade80; }
.action-btn.btn-switch  { border-color: rgba(0,217,255,0.3);  color: var(--accent-cyan); }
.action-btn.btn-forfeit { border-color: rgba(239,68,68,0.2);  color: #f87171; }

/* Move selection grid — buttons are color-coded per element via --move-type-color CSS var */
.move-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    display: none;
}
.move-grid.visible { display: grid; }
.move-btn {
    padding: 10px 10px;
    border-radius: 10px;
    /* --move-type-color set by JS per move type */
    border: 1px solid var(--move-type-color, rgba(255,255,255,0.1));
    background: color-mix(in srgb, var(--move-type-color, #ffffff) 9%, rgba(18,24,38,0.9));
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.move-btn:hover {
    border-color: var(--move-type-color, rgba(255,107,53,0.5));
    background: color-mix(in srgb, var(--move-type-color, #ff6b35) 18%, rgba(18,24,38,0.9));
    box-shadow: 0 0 10px color-mix(in srgb, var(--move-type-color, #ff6b35) 40%, transparent);
}
.move-btn .move-power { font-size: 0.68rem; color: var(--text-secondary); display: block; margin-top: 2px; }
.move-btn .move-effect { font-size: 0.62rem; color: var(--accent-purple); display: block; }

/* ── Skill Info Panel — shown above the move grid on hover ─────────────────── */
.skill-info-panel {
    display: none;   /* JS adds .visible to show */
    flex-direction: column;
    gap: 6px;
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    background: rgba(8,12,24,0.92);
    border: 1px solid rgba(255,255,255,0.09);
    margin-bottom: 0.5rem;
    backdrop-filter: blur(8px);
    animation: sipFadeIn 0.12s ease forwards;
}
.skill-info-panel.visible { display: flex; }

@keyframes sipFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header: name + type chip */
.sip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sip-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sip-type-chip {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    /* colour set by JS per type */
}

/* Category + power labels */
.sip-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sip-category {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    padding: 1px 7px;
    border-radius: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
}
/* Category colour variants */
.sip-category.cat-physical { color: #ff8c5a; border-color: rgba(255,107,53,0.3); background: rgba(255,107,53,0.08); }
.sip-category.cat-spell    { color: #c4b5fd; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.08); }
.sip-category.cat-status   { color: #67e8f9; border-color: rgba(6,182,212,0.3);  background: rgba(6,182,212,0.08); }
.sip-power {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

/* Power bar */
.sip-power-bar-wrap { width: 100%; }
.sip-power-track {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
}
.sip-power-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.2s ease;
    /* colour set by JS per type */
}

/* Status effect warning */
.sip-effect {
    display: none;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    align-self: flex-start;
}
.sip-effect.visible                { display: inline-block; }
.sip-effect.effect-burn   { color: #ff6b35; background: rgba(255,107,53,0.12); border: 1px solid rgba(255,107,53,0.3); }
.sip-effect.effect-poison { color: #a78bfa; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.3); }
.sip-effect.effect-stun   { color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); }

/* Flavour description text */
.sip-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    line-height: 1.45;
    font-style: italic;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 5px;
    margin-top: 1px;
}

/* Item grid — shown when Items button is pressed */
.item-grid {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.item-grid.visible { display: grid; }
.item-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(34,197,94,0.2);
    background: rgba(34,197,94,0.04);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    position: relative;
}
.item-btn:hover:not(:disabled) {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.10);
    box-shadow: 0 0 10px rgba(34,197,94,0.15);
}
.item-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.item-btn-icon  { font-size: 1.1rem; line-height: 1; margin-bottom: 1px; }
.item-btn-name  { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
.item-btn-desc  { font-size: 0.6rem; font-weight: 400; color: var(--text-secondary); line-height: 1.3; }
.item-btn-count {
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #4ade80;
    opacity: 0.8;
}
.item-btn-count.empty { color: #f87171; }

/* Rarity badge on item buttons */
.item-rarity {
    position: absolute;
    bottom: 5px;
    right: 7px;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    pointer-events: none;
}
.item-rarity.rarity-common { color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.04); }
.item-rarity.rarity-rare   { color: #60a5fa; background: rgba(96,165,250,0.10); }
.item-rarity.rarity-epic   { color: #c084fc; background: rgba(192,132,252,0.12); }

/* Item target picker — shown over item-grid when item needs a target */
.item-target-list {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
}
.item-target-list.visible { display: flex; }
.item-target-header {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.item-target-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid rgba(34,197,94,0.2);
    background: rgba(34,197,94,0.04);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.item-target-btn:hover:not(:disabled) {
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.09);
}
.item-target-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.item-target-btn img { width: 28px; height: 28px; object-fit: contain; }
.item-target-hp-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.item-target-hp-fill { height: 100%; background: var(--accent-green); border-radius: 2px; }

/* Switch grid */
.switch-grid {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
}
.switch-grid.visible { display: flex; }
.switch-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,217,255,0.15);
    background: rgba(0,217,255,0.03);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.switch-btn:hover:not(:disabled) { border-color: var(--accent-cyan); background: rgba(0,217,255,0.08); }
.switch-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.switch-btn img { width: 32px; height: 32px; object-fit: contain; }
.switch-btn .sw-hp-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.switch-btn .sw-hp-fill { height: 100%; background: var(--accent-green); border-radius: 2px; }

.action-back-btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.action-back-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); }

/* Enemy turn indicator */
.enemy-thinking {
    display: none;
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}
.enemy-thinking.visible { display: block; }
.thinking-dots::after {
    content: '...';
    animation: dots 1.2s infinite;
}
@keyframes dots {
    0%   { content: '.'; }
    33%  { content: '..'; }
    66%  { content: '...'; }
    100% { content: '.'; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESULT SCREEN — Victory / Defeat
   ═══════════════════════════════════════════════════════════════════════════════ */
#resultScreen {
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(251,191,36,0.1) 0%, transparent 60%),
        linear-gradient(180deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
}

.result-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1;
    margin-bottom: 1rem;
}
.result-title.victory { color: var(--accent-gold); text-shadow: 0 0 40px rgba(251,191,36,0.4); }
.result-title.defeat  { color: #ef4444; text-shadow: 0 0 40px rgba(239,68,68,0.3); }

.result-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 2.5rem;
}
.result-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.result-stat {
    text-align: center;
}
.result-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-gold);
    display: block;
}
.result-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.result-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-rematch, .btn-return {
    padding: 12px 30px;
    border-radius: 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}
.btn-rematch {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0a0e1a;
    border: none;
    box-shadow: 0 0 24px rgba(251,191,36,0.3);
}
.btn-rematch:hover { box-shadow: 0 0 36px rgba(251,191,36,0.5); transform: translateY(-2px); }
.btn-return {
    background: rgba(0,217,255,0.07);
    border: 1px solid rgba(0,217,255,0.4);
    color: var(--accent-cyan);
}
.btn-return:hover { background: rgba(0,217,255,0.14); }

/* ═══════════════════════════════════════════════════════════════════════════════
   BATTLE INTRO OVERLAY — VS Cinematic
   Classic competitive sports "clash intro": two panels slide from opposite edges,
   white flash on collision, VS badge springs into center, then BATTLE! text.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Full-screen container */
.battle-intro {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background: #000;
    display: flex;
}
.battle-intro.hidden { display: none; }

/* ── Radial white impact flash (fires at the clash moment) ──────────────────── */
.intro-clash-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.55) 30%,
        transparent 65%);
    z-index: 6;
    opacity: 0;
    pointer-events: none;
}
.battle-intro.clash .intro-clash-flash {
    animation: introClashFlash 0.65s ease forwards;
}
@keyframes introClashFlash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Left and right panels ──────────────────────────────────────────────────── */
.intro-side {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
}

/* Panels start completely off-screen */
.intro-left  { transform: translateX(-110%); }
.intro-right { transform: translateX(110%); }

/* Slide in with sporty spring overshoot when .playing is added */
.battle-intro.playing .intro-left {
    transform: translateX(0);
    transition: transform 0.65s cubic-bezier(0.22, 1.18, 0.36, 1);
}
.battle-intro.playing .intro-right {
    transform: translateX(0);
    transition: transform 0.65s cubic-bezier(0.22, 1.18, 0.36, 1);
}

/* Base gradient (overridden inline by JS to match captain colour) */
.intro-left  { background: linear-gradient(145deg, #050710 0%, #0d0b1f 100%); }
.intro-right { background: linear-gradient(215deg, #050710 0%, #0d0b1f 100%); }

/* Angled divider seam — each side hides its inner edge with a skewed black strip */
.intro-left::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: -28px;
    width: 56px;
    background: #000;
    transform: skewX(-6deg);
    z-index: 4;
}
.intro-right::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -28px;
    width: 56px;
    background: #000;
    transform: skewX(-6deg);
    z-index: 4;
}

/* Per-side colour glow layer (background set inline by JS) */
.intro-side-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Animated energy scan-line that sweeps across each panel */
.battle-intro.playing .intro-left .intro-side-bg::after,
.battle-intro.playing .intro-right .intro-side-bg::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.05) 50%,
        transparent 100%);
    animation: introScanLine 2.2s ease-in-out 0.8s infinite;
}
.intro-left  .intro-side-bg::after { left: -80px; }
.intro-right .intro-side-bg::after { right: -80px; animation-direction: reverse; }
@keyframes introScanLine {
    0%   { transform: translateX(0)     opacity: 0.3; }
    50%  { opacity: 0.6; }
    100% { transform: translateX(200%); opacity: 0; }
}

/* ── Side content (sits above the glow bg) ──────────────────────────────────── */
.intro-side-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-align: center;
}

/* ── Captain splash video / fallback portrait ───────────────────────────────── */
.intro-splash-wrap {
    position: relative;
    width: min(260px, 32vw);
    height: min(260px, 32vw);
    filter: drop-shadow(0 0 30px rgba(255,255,255,0.08));
}
.intro-splash-video,
.intro-splash-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Show fallback only when video fails (set to opacity:1 by JS) */
.intro-splash-fallback { opacity: 0; }

/* Mirror the right-side captain so they face left (toward the player) */
.intro-right .intro-splash-video,
.intro-right .intro-splash-fallback {
    transform: scaleX(-1);
}

/* ── Captain label and affinity ─────────────────────────────────────────────── */
.intro-captain-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.9rem, 2.2vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,1), 0 0 40px rgba(255,255,255,0.15);
    line-height: 1.1;
}
.intro-captain-affinity {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

/* ── Team roster mini-icons below the captain ───────────────────────────────── */
.intro-team-roster {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 0.5rem;
}
.intro-team-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.12);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}

/* ── VS badge (absolute, center of overlay) ─────────────────────────────────── */
.intro-vs {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    pointer-events: none;
    /* Hidden and rotated before the clash */
    transform: translate(-50%, -50%) scale(0) rotate(-14deg);
    opacity: 0;
}
/* Spring-pop into view right after the clash flash */
.battle-intro.clash .intro-vs {
    animation: introVsReveal 0.6s cubic-bezier(0.34, 1.58, 0.64, 1) 0.1s forwards;
}
@keyframes introVsReveal {
    0%   { transform: translate(-50%, -50%) scale(0)    rotate(-14deg); opacity: 0; }
    65%  { transform: translate(-50%, -50%) scale(1.18) rotate(5deg);   opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg);   opacity: 1; }
}
/* Gold glowing VS text that slowly breathes */
.intro-vs-text {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.2rem, 7.5vw, 6rem);
    font-weight: 900;
    letter-spacing: 10px;
    color: #fff;
    text-shadow:
        0 0 10px rgba(251,191,36,1),
        0 0 30px rgba(251,191,36,0.8),
        0 0 70px rgba(251,191,36,0.5);
    display: block;
    line-height: 1;
    animation: introVsPulse 1.2s ease-in-out 0.8s infinite alternate;
}
@keyframes introVsPulse {
    from { text-shadow: 0 0 10px rgba(251,191,36,1), 0 0 30px rgba(251,191,36,0.8), 0 0 70px rgba(251,191,36,0.5); }
    to   { text-shadow: 0 0 18px rgba(251,191,36,1), 0 0 50px rgba(251,191,36,0.9), 0 0 110px rgba(251,191,36,0.65); }
}

/* ── BATTLE! text (fires just before fade-out) ──────────────────────────────── */
.intro-battle-flash {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
}
.intro-battle-flash.visible {
    animation: introBattleFlashAnim 0.9s ease forwards;
}
@keyframes introBattleFlashAnim {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
}
.intro-battle-text {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.2rem, 9vw, 6.5rem);
    font-weight: 900;
    letter-spacing: 8px;
    color: var(--accent-gold);
    text-shadow:
        0 0 22px rgba(251,191,36,1),
        0 0 55px rgba(251,191,36,0.65),
        0 0 100px rgba(251,191,36,0.35);
    animation: introBattleTextScale 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
@keyframes introBattleTextScale {
    0%   { transform: scale(0.15) skewX(-15deg); }
    60%  { transform: scale(1.1)  skewX(3deg);  }
    100% { transform: scale(1)    skewX(0deg);  }
}

/* ── Overlay fade-out ───────────────────────────────────────────────────────── */
.battle-intro.fading-out {
    animation: introFadeOut 0.55s ease forwards;
}
@keyframes introFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Skip button ────────────────────────────────────────────────────────────── */
.intro-skip-btn {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 30;
    padding: 5px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.6);
    color: rgba(255,255,255,0.38);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s;
    backdrop-filter: blur(6px);
}
.intro-skip-btn:hover {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.4);
}

/* ── Responsive — keep intro readable on small screens ──────────────────────── */
@media (max-width: 600px) {
    .intro-captain-label { letter-spacing: 1px; }
    .intro-vs-text        { font-size: 2.5rem; letter-spacing: 6px; }
    .intro-battle-text    { font-size: 2rem;   letter-spacing: 4px; }
    .intro-splash-wrap    { width: 44vw; height: 44vw; }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Stack panels vertically on tablet/mobile */
    .battle-arena { grid-template-columns: 1fr; }
    .battle-side-panel { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); max-height: 50vh; }
    .division-grid { grid-template-columns: 1fr; }
    /* On mobile let the screen scroll naturally — stacked layout can exceed viewport */
    #battleScreen { height: auto; min-height: 100vh; overflow: visible; }
    .battle-arena { overflow: visible; }
    .battlefield  { overflow: visible; }
}

@media (max-width: 600px) {
    .arena-nav { padding: 0 1rem; gap: 0.5rem; }
    .arena-nav-title { display: none; }
    .division-grid { grid-template-columns: 1fr; }
    .vs-stage { flex-direction: column; align-items: center; }
    .queue-progress { display: none; } /* hide bar on very small screens */
}

/* -------------------------------------------------------------------------------
   LOBBY WIZARD — Step layout, Option cards, Format, Opponent
   ------------------------------------------------------------------------------- */

/* -- Step container: hidden until revealed; stacks vertically on progression -- */
.lobby-step {
    display: none; /* Hidden until JS reveals it */
    width: 100%;
    max-width: 900px;
    padding: 1.75rem 1.5rem 0;
    margin: 0 auto;
    flex-direction: column;
}

/* Active: currently presented to the player (full opacity, interactive) */
.lobby-step.active {
    display: flex;
}

/* Slide-in animation — added one frame after .active to trigger correctly */
.lobby-step.step-entering {
    animation: stepFadeIn 0.4s ease forwards;
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Done: selection made — stays visible, dimmed, non-interactive.
   A subtle separator below marks the boundary to the next step.     */
.lobby-step.done {
    display: flex;
    opacity: 0.55;
    pointer-events: none;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 0.25rem;
}

/* -- Step back button / bottom nav -------------------------------------------- */
.lobby-step-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: rgba(10,14,26,0.95);
    border-top: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    z-index: 900;
}
.btn-lobby-back {
    padding: 8px 20px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    transition: all 0.2s;
}
.btn-lobby-back:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.25);
}

/* Step header row: number badge + title + optional subtitle */
.step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.4);
    color: var(--accent-gold);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.step-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: auto;
    font-style: italic;
}

/* -- Generic option card (League, Format, Opponent) --------------------------- */
.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}
.format-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.opponent-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 480px;
}

.option-card {
    border-radius: 14px;
    padding: 1rem 0.75rem;
    border: 2px solid rgba(255,255,255,0.07);
    background: rgba(18,24,38,0.7);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}
.option-card:hover {
    border-color: rgba(0,217,255,0.4);
    background: rgba(0,217,255,0.04);
    transform: translateY(-2px);
}
.option-card.selected {
    border-color: var(--accent-cyan);
    background: rgba(0,217,255,0.08);
    box-shadow: 0 0 18px rgba(0,217,255,0.12);
}
.option-card.selected::after {
    content: '?';
    position: absolute;
    top: 6px;
    right: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-cyan);
}
.option-card.coming-soon {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none !important;
    border-color: rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
}
.option-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.45rem;
    line-height: 1;
}
.option-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
.option-desc {
    font-size: 0.64rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.option-badge {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    color: var(--text-secondary);
}

/* -- Team selector (kept from old lobby, now inside .lobby-step) --------------- */
#stepTeam .lobby-team-grid {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------------
   CAPTAIN CARDS
   ------------------------------------------------------------------------------- */
.captain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}
.captain-card {
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.08);
    background: rgba(12,18,32,0.85);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}
.captain-card:hover {
    transform: translateY(-5px);
    border-color: var(--cap-color, var(--accent-cyan));
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.captain-card.selected {
    border-color: var(--cap-color, var(--accent-cyan));
    box-shadow: 0 0 24px rgba(0,0,0,0.3);
}
.captain-card.selected::after {
    content: '?';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--cap-color, var(--accent-cyan));
    text-shadow: 0 0 6px currentColor;
    z-index: 2;
}
.captain-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.3s ease;
}
.captain-card:hover .captain-portrait { transform: scale(1.05); }
.captain-info {
    padding: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.captain-affinity-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 9px;
    border-radius: 10px;
    margin-bottom: 0.45rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}
.captain-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.captain-passive-name {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cap-color, var(--accent-cyan));
    margin-bottom: 0.25rem;
}
.captain-passive-desc {
    font-size: 0.62rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 0.4rem;
}
.captain-type-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.captain-type-pip {
    font-size: 0.57rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    text-transform: capitalize;
}

/* -------------------------------------------------------------------------------
   STAGE SELECT � Smash-Bros-style grid
   ------------------------------------------------------------------------------- */
.stage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.stage-card {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.07);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    aspect-ratio: 5 / 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.stage-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.stage-card.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 22px rgba(251,191,36,0.22), 0 8px 22px rgba(0,0,0,0.45);
}
.stage-card.selected::after {
    content: '?';
    position: absolute;
    top: 7px;
    right: 9px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 0 0 8px rgba(251,191,36,0.8);
    z-index: 2;
}
/* Colour gradient panel behind the stage */
.stage-bg {
    position: absolute;
    inset: 0;
}
/* Stage icon floats top-left */
.stage-icon {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
/* Info sits above the gradient */
.stage-info {
    position: relative;
    z-index: 1;
    padding: 0.45rem 0.6rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 80%, transparent 100%);
}
.stage-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.stage-env {
    font-size: 0.57rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 3px;
}
.stage-type-pills {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.stage-pill {
    font-size: 0.53rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 5px;
    text-transform: capitalize;
}
.stage-pill.boost     { background: rgba(34,197,94,0.18);  color: #4ade80;  border: 1px solid rgba(34,197,94,0.35); }
.stage-pill.suppress  { background: rgba(239,68,68,0.15);  color: #f87171;  border: 1px solid rgba(239,68,68,0.3); }

/* Stage card preview — background-image is set via inline style in JS (renderStages). */
/* Base rules handle sizing and apply a gradient overlay so text stays readable.       */
.stage-bg {
    position: absolute;
    inset: 0;
    background-color: #0a0e1a; /* fallback while image loads */
    background-size:   cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    border-radius: 8px 8px 0 0;
    transition: transform 0.35s ease;
}
/* Gradient strip at bottom of card makes stage name always legible */
.stage-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.78) 100%);
    border-radius: inherit;
}

/* Battle screen background is applied as inline backgroundImage in startBattle(). */
/* This fallback keeps it dark if no stage is selected or image is unavailable.    */
#battleScreen {
    background-color: #040812;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}


/* ── Participant HUD strip — compact captain + team roster per side ──────────── */
.participant-hud {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.7rem;
    border-radius: 12px;
    background: rgba(8,12,24,0.82);
    border: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    min-height: 50px;
    backdrop-filter: blur(8px);
}

/* Player HUD glows faintly cyan; enemy HUD glows faintly red */
.hud-player { border-color: rgba(0,217,255,0.14); }
.hud-enemy  { border-color: rgba(239,68,68,0.14); }

/* Captain micro-portrait + name + passive name */
.hud-captain-strip {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    min-width: 0;
}
.hud-captain-portrait {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid var(--accent-gold);
    flex-shrink: 0;
    filter: drop-shadow(0 0 7px rgba(251,191,36,0.35));
}
.hud-captain-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.hud-captain-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.hud-captain-passive {
    font-size: 0.54rem;
    font-weight: 600;
    color: var(--accent-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.hud-captain-affinity {
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    white-space: nowrap;
}

/* Vertical separator between captain strip and roster */
.hud-sep {
    width: 1px;
    height: 34px;
    background: rgba(255,255,255,0.09);
    flex-shrink: 0;
}

/* Compact roster slot row */
.hud-roster {
    display: flex;
    gap: 0.28rem;
    flex: 1;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Override .team-slot-mini dimensions specifically inside .hud-roster */
.hud-roster .team-slot-mini {
    flex: 0 0 40px;
    max-width: 40px;
    padding: 3px;
    gap: 2px;
    border-radius: 7px;
    cursor: default;
}
.hud-roster .slot-mini-img  { width: 26px; height: 26px; }
.hud-roster .slot-mini-name { display: none; }  /* No name label in compact HUD */

/* Compact stage identifier in the battle header bar */
.battle-stage-compact {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    flex: 1;
    text-align: center;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BATTLE STATS PANEL — Left column; real-time iStar stats & type matchup
   ═══════════════════════════════════════════════════════════════════════════════ */

.battle-stats-panel {
    /* Left border to visually separate from battlefield */
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(5,8,18,0.55);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.65rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,217,255,0.15) transparent;
    min-height: 0;
}

/* iStar stat card — enemy (top) and player (bottom) */
.bsp-card {
    border-radius: 10px;
    padding: 0.6rem 0.65rem;
    background: rgba(12,17,30,0.7);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bsp-enemy { border-color: rgba(239,68,68,0.18); }
.bsp-player { border-color: rgba(0,217,255,0.14); }

/* Card header: OPPONENT/YOU label + type chip */
.bsp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}
.bsp-card-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.bsp-type-chip {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 6px;
    /* Background/color set by JS via inline style */
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
.bsp-role-chip {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

/* Stat bar rows — ATK DEF SPD SPL RES */
.bsp-stat-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bsp-stat-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.bsp-stat-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    min-width: 22px;
    text-transform: uppercase;
}
.bsp-stat-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
}
.bsp-stat-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.bsp-stat-val {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 22px;
    text-align: right;
}

/* Type matchup indicator */
.bsp-matchup {
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    background: rgba(12,17,30,0.7);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.bsp-matchup-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
}
.bsp-matchup-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    transition: color 0.3s, text-shadow 0.3s;
}
/* Effectiveness colour modifiers — applied by JS */
.bsp-matchup-badge.super   { color: #4ade80; text-shadow: 0 0 10px rgba(74,222,128,0.5); }
.bsp-matchup-badge.resist  { color: #f87171; text-shadow: 0 0 10px rgba(248,113,113,0.4); }
.bsp-matchup-badge.immune  { color: var(--text-secondary); }
.bsp-matchup-badge.normal  { color: var(--text-secondary); }
.bsp-matchup-detail {
    font-size: 0.56rem;
    color: rgba(255,255,255,0.3);
    text-transform: capitalize;
}

/* Stage effects reminder at the bottom of the stats panel */
.bsp-stage {
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    background: rgba(12,17,30,0.6);
    border: 1px solid rgba(251,191,36,0.12);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.bsp-stage-header {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(251,191,36,0.45);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.bsp-stage-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.bsp-stage-pill {
    font-size: 0.52rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 5px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}
.bsp-stage-pill.boost    { background: rgba(34,197,94,0.12);  color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.bsp-stage-pill.suppress { background: rgba(239,68,68,0.10);  color: #f87171; border: 1px solid rgba(239,68,68,0.22); }

/* -- Stage + format responsive fixes ------------------------------------------ */
@media (max-width: 700px) {
    .stage-grid   { grid-template-columns: repeat(2, 1fr); }
    .format-grid  { grid-template-columns: repeat(2, 1fr); }
    .option-grid  { grid-template-columns: repeat(2, 1fr); }
    .captain-grid { grid-template-columns: repeat(2, 1fr); }
    .step-subtitle { display: none; }
    .battle-stage-compact { display: none; } /* hide stage tag on small screens — saves header space */
    /* Collapse to 2-column on small screens: hide stats panel */
    .battle-arena { grid-template-columns: 1fr 290px; }
    .battle-stats-panel { display: none; }
}
@media (max-width: 420px) {
    .stage-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .option-grid { grid-template-columns: 1fr 1fr; }
}