/* =========================================
   BATTLE UI V5 — MOBILE FIRST
   Mechanics stay in battle-ui.js / battle.js.
   Primary target: portrait phones 360–430 CSS px.
   ========================================= */

#battle-arena {
    bottom: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at 50% 10%, rgba(118,75,33,.22), transparent 38%),
        url("../assets/ui/wood-texture.svg"),
        #110b07 !important;
    background-repeat: no-repeat, repeat, no-repeat !important;
    color: #f4dfb4 !important;
}

#battle-arena .arena-top-card,
#battle-arena .arena-center-box {
    display: none !important;
}

/* =========================================
   BATTLE FIELD
   ========================================= */

#battle-target-selector {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1200 / 900 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10% 3.8% 6.5% !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../assets/ui/battle/battle-field-frame.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
}

#battle-target-selector .battle-target-selector-title,
#battle-target-buttons .battle-team-title {
    display: none !important;
}

#battle-target-buttons {
    width: 92% !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 2% !important;
    align-items: start !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

#battle-target-buttons .battle-team-column {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#battle-target-buttons .battle-team-list {
    width: 100% !important;
    max-height: 45vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    scrollbar-width: thin;
}

#battle-target-buttons .battle-team-unit {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 4px 5px 5px !important;
    overflow: hidden !important;
    border: 1px solid rgba(117,82,45,.82) !important;
    border-radius: 7px !important;
    background:
        linear-gradient(180deg,rgba(239,216,168,.96),rgba(201,166,107,.96))
        !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,241,199,.38),
        0 2px 4px rgba(0,0,0,.38)
        !important;
    text-align: left !important;
    color: #352315 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

#battle-target-buttons .battle-team-unit.ally {
    border-color: rgba(61,100,151,.88) !important;
}

#battle-target-buttons .battle-team-unit.enemy {
    border-color: rgba(143,56,43,.9) !important;
}

#battle-target-buttons .battle-team-unit.is-selected,
#battle-target-buttons .battle-team-unit.is-ally-selected {
    filter: brightness(1.08) drop-shadow(0 0 4px rgba(255,215,112,.72)) !important;
}

.battle-unit-name-v5 {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 0 3px !important;
}

.battle-unit-portrait-v5 {
    width: clamp(31px,9vw,40px) !important;
    max-width: 40px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    padding: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: url("../assets/ui/battle/battle-portrait-frame.png") center / contain no-repeat !important;
}

.battle-unit-portrait-v5 img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

.battle-unit-portrait-fallback-v5 {
    display: none !important;
}

.battle-unit-name-text-v5 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #3a2617 !important;
    font-size: clamp(9px,2.5vw,12px) !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255,247,221,.75) !important;
}

.battle-resource-track-v5 {
    position: relative !important;
    width: 100% !important;
    height: clamp(11px,3vw,14px) !important;
    margin: 2px auto 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(66,41,23,.9) !important;
    border-radius: 999px !important;
    background: #3a3029 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.75) !important;
}

.battle-resource-fill-v5 {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    border-radius: inherit !important;
    transition: width .15s linear !important;
}

.battle-resource-track-v5.hp.ally .battle-resource-fill-v5 {
    background: linear-gradient(180deg,#72d05f,#2d943f) !important;
}

.battle-resource-track-v5.hp.enemy .battle-resource-fill-v5 {
    background: linear-gradient(180deg,#ff6560,#c72d2a) !important;
}

.battle-resource-track-v5.mp .battle-resource-fill-v5 {
    background: linear-gradient(180deg,#5aa8ff,#1d64bc) !important;
}

.battle-resource-label-v5 {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff8e8 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(7px,2vw,9px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px #000, 0 0 2px #000 !important;
    pointer-events: none !important;
}

/* =========================================
   UNIT BUFF / DEBUFF ICONS
   Card height grows only while effects exist.
   ========================================= */

.battle-unit-effects-v5 {
    width: 100% !important;
    min-height: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 1px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    line-height: 1 !important;
}

.battle-effect-icon-v5 {
    --battle-effect-angle: 0deg;
    position: relative !important;
    width: clamp(16px,4.5vw,19px) !important;
    height: clamp(16px,4.5vw,19px) !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(80,80,80,.92) !important;
    border-radius: 2px !important;
    background: rgba(28,24,21,.92) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        0 1px 2px rgba(0,0,0,.5)
        !important;
    transition:
        opacity .15s linear,
        filter .15s linear
        !important;
    pointer-events: none !important;
}

.battle-effect-icon-v5.positive {
    border-color: rgba(68,145,73,.96) !important;
}

.battle-effect-icon-v5.negative {
    border-color: rgba(168,62,53,.96) !important;
}

.battle-effect-icon-v5::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background:
        conic-gradient(
            from 0deg,
            rgba(64,64,64,.68) 0deg var(--battle-effect-angle),
            transparent var(--battle-effect-angle) 360deg
        )
        !important;
    pointer-events: none !important;
}

.battle-effect-icon-v5.no-timer::after {
    display: none !important;
}

.battle-effect-art-v5 {
    position: absolute !important;
    inset: 1px !important;
    z-index: 1 !important;
    width: calc(100% - 2px) !important;
    height: calc(100% - 2px) !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 1px !important;
    pointer-events: none !important;
}

.battle-effect-icon-v5.has-art
.battle-effect-fallback-v5 {
    display: none !important;
}

.battle-effect-fallback-v5 {
    position: relative !important;
    z-index: 1 !important;
    color: #f4ead1 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(9px,2.5vw,11px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px #000 !important;
}

.battle-effect-stack-v5 {
    position: absolute !important;
    right: 0 !important;
    bottom: -1px !important;
    z-index: 3 !important;
    min-width: 7px !important;
    padding: 0 1px !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 9px !important;
    text-align: right !important;
    text-shadow:
        -1px -1px 1px #000,
        1px -1px 1px #000,
        -1px 1px 1px #000,
        1px 1px 1px #000
        !important;
    pointer-events: none !important;
}


#battle-target-buttons .battle-team-extra,
#ba-player-mp-text,
#ba-mob-mp-text,
#ba-mob-mp-container {
    display: none !important;
}

/* =========================================
   LOWER CONTROLS — MOBILE FIRST / BOTTOM ANCHORED
   One spacing unit is used everywhere: the same 3px
   gap that separates skill slots.
   ========================================= */

#battle-action-panel {
    --battle-phone-width: min(100%, 430px);
    --battle-gap: 3px;
    --battle-item-size: clamp(44px, 12vw, 52px);
    --battle-scroll-width: clamp(112px, 32vw, 134px);

    position: static !important;
    width: var(--battle-phone-width) !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    align-self: center !important;
    margin: 0 auto !important;
    padding: 0 8px var(--battle-gap) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: var(--battle-gap) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(88,53,26,.26), transparent 48%),
        url("../assets/ui/wood-texture.svg"),
        #110b07 !important;
    background-repeat: no-repeat, repeat, no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* HP | MP | Scroll — smaller and directly above command block. */
#battle-action-panel .battle-consumables-v5 {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns:
        var(--battle-item-size)
        var(--battle-item-size)
        var(--battle-scroll-width) !important;
    column-gap: var(--battle-gap) !important;
    align-items: center !important;
    justify-content: center !important;
}

#ba-potion-hp,
#ba-potion-mp {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../assets/ui/battle/battle-item-slot.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
}

.battle-potion-art-v5 {
    position: absolute !important;
    inset: 18% !important;
    z-index: 1 !important;
    width: 64% !important;
    height: 64% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)) !important;
}

.battle-item-count-v5 {
    position: absolute !important;
    right: 8% !important;
    bottom: 8% !important;
    z-index: 4 !important;
    min-width: 16px !important;
    padding: 1px 4px !important;
    border: 1px solid rgba(225,196,128,.72) !important;
    border-radius: 5px !important;
    background: rgba(20,14,9,.86) !important;
    color: #f2dfb2 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(8px,2.3vw,10px) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px #000 !important;
    pointer-events: none !important;
}

#ba-potion-hp.is-empty .battle-potion-art-v5,
#ba-potion-mp.is-empty .battle-potion-art-v5 {
    opacity: .42 !important;
    filter: grayscale(.45) drop-shadow(0 2px 2px rgba(0,0,0,.45)) !important;
}

/* Floating combat numbers above HP bars. */
#battle-floating-layer-v5 {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.battle-floating-feedback-v5 {
    --battle-float-rise: 42px;
    position: fixed !important;
    left: var(--battle-float-x, 50vw) !important;
    top: var(--battle-float-y, 50vh) !important;
    z-index: 1 !important;
    display: block !important;
    width: max-content !important;
    pointer-events: none !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(13px,3.7vw,18px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform:
        translate(-50%, -50%)
        translateY(0)
        scale(1);
    animation:
        battle-floating-feedback-v5
        2s
        linear
        forwards !important;
    will-change: transform, opacity;
}

.battle-floating-feedback-v5.damage {
    color: #ff4b43 !important;
    text-shadow:
        0 2px 2px #3c0000,
        0 0 3px rgba(255,35,25,.65) !important;
}

.battle-floating-feedback-v5.crit {
    color: #ffd34f !important;
    font-size: clamp(16px,4.5vw,22px) !important;
    text-shadow:
        0 2px 2px #7b0800,
        0 0 3px #e02b16,
        0 0 6px rgba(255,181,34,.85) !important;
    animation-name:
        battle-floating-feedback-crit-v5
        !important;
    animation-duration:
        4s
        !important;
}

.battle-floating-feedback-v5.heal {
    color: #62e978 !important;
    text-shadow:
        0 2px 2px #063c10,
        0 0 4px rgba(50,220,90,.65) !important;
}

.battle-floating-feedback-v5.miss {
    color: #f3e2b8 !important;
    font-size: clamp(11px,3.2vw,15px) !important;
    text-shadow:
        0 2px 2px #000,
        0 0 4px rgba(104,77,43,.85) !important;
}

/* Без паузи: цифра весь час рухається,
   а в останній третині плавно розчиняється. */
@keyframes battle-floating-feedback-v5 {
    0% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translateY(0)
            scale(.96);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translateY(
                calc(
                    -1 *
                    var(--battle-float-rise)
                )
            )
            scale(1);
    }
}

/* Крит живе вдвічі довше,
   але так само не зупиняється. */
@keyframes battle-floating-feedback-crit-v5 {
    0% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translateY(0)
            scale(.96);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translateY(
                calc(
                    -1 *
                    var(--battle-float-rise)
                )
            )
            scale(1);
    }
}

#battle-action-panel .battle-scroll-wrap {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#ba-scroll-btn {
    width: 100% !important;
    aspect-ratio: 1200 / 400 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../assets/ui/battle/battle-scroll-frame.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: #f6e3b6 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(9px,2.5vw,12px) !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 2px #000 !important;
    white-space: nowrap !important;
}

/* Auto is exactly the same column width as Attack.
   Auto -> Attack uses the same 3px gap as the skills. */
#battle-action-panel .battle-command-layout-v5 {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 24% 68% !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "auto ."
        "attack skills" !important;
    justify-content: space-between !important;
    column-gap: 0 !important;
    row-gap: var(--battle-gap) !important;
    align-items: start !important;
}

#ba-auto-attack-toggle {
    grid-area: auto !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1000 / 500 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 6% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--battle-gap) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../assets/ui/battle/battle-auto-frame.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: #f4d89b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(8px,2.35vw,10px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 2px #000 !important;
}

#ba-auto-attack-toggle::before {
    content: "";
    width: clamp(11px,3vw,14px) !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    border: 1px solid #b98b4c !important;
    border-radius: 50% !important;
    background: #16100b !important;
    box-shadow: inset 0 1px 3px #000 !important;
}

#ba-auto-attack-toggle.is-on::before {
    background: radial-gradient(circle, #62b8ff 0 42%, #0a4a86 48% 100%) !important;
    box-shadow:
        0 0 6px rgba(73,166,255,.8),
        inset 0 1px 2px rgba(255,255,255,.35) !important;
}

#ba-basic-attack-btn {
    grid-area: attack !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18% 7% 10% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../assets/ui/battle/battle-attack-frame.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: #f6e3b6 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(10px,2.8vw,12px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-shadow: 0 2px 2px #000 !important;
}

#battle-action-panel .battle-skills-row {
    grid-area: skills !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    grid-auto-flow: row !important;
    gap: var(--battle-gap) !important;
    align-items: start !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    align-self: start !important;
}

#battle-action-panel .battle-skills-row > .action-slot.main-slot {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../assets/ui/battle/battle-skill-slot.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
}

#battle-action-panel .battle-skills-row > .action-slot.main-slot > :not(.cd-overlay) {
    display: none !important;
}

#battle-action-panel .battle-skills-row > .action-slot.main-slot.empty {
    opacity: .68 !important;
}

#battle-action-panel .battle-skills-row > #skill-slot-6 {
    grid-column: 2 !important;
}

#battle-action-panel .battle-skills-row > #skill-slot-7 {
    grid-column: 3 !important;
}

#battle-action-panel .battle-skills-row > #skill-slot-8.empty,
#battle-action-panel .battle-skills-row > #skill-slot-9.empty {
    display: none !important;
}

/* Escape keeps its current size, but is now the final element
   with exactly one skill-gap from the command block and screen edge. */
#battle-action-panel .arena-escape-row {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#battle-action-panel .arena-escape-btn {
    width: 52% !important;
    max-width: 220px !important;
    aspect-ratio: 1200 / 400 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../assets/ui/battle/battle-escape-frame.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: #f4d89b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(10px,2.7vw,12px) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-shadow: 0 2px 2px #000 !important;
}

#battle-action-panel .arena-escape-btn:disabled {
    opacity: 0.55 !important;
    filter: grayscale(1) brightness(0.6);
    cursor: not-allowed !important;
}

/* =========================================
   COOLDOWNS / MENUS / TRAINING
   ========================================= */

#battle-scroll-menu {
    z-index: 50 !important;
}

#training-stats-panel {
    margin: 4px 8px !important;
    color: #ead7ae !important;
    background: rgba(28,18,12,.88) !important;
    border-color: rgba(177,123,53,.8) !important;
}

.skill-slot-subtext {
    display: none !important;
}

.cd-overlay,
#ba-potion-hp .cd-overlay,
#ba-potion-mp .cd-overlay,
#battle-action-panel .battle-skills-row .cd-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: clamp(10px,3vw,14px) !important;
    text-shadow: 0 1px 2px #000 !important;
}

/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 359px) {
    #battle-action-panel {
        --battle-item-size: 40px;
        --battle-scroll-width: 106px;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #battle-action-panel .battle-command-layout-v5 {
        grid-template-columns: 24% 69% !important;
    }

    #battle-action-panel {
        --battle-gap: 2px;
    }
}

/* =========================================
   TABLET / DESKTOP
   Phone layout remains the source of truth.
   We only scale the finished composition.
   ========================================= */

@media (min-width: 600px) {
    #battle-action-panel {
        --battle-phone-width: 520px;
        --battle-item-size: 60px;
        --battle-scroll-width: 154px;
        --battle-gap: 5px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #battle-action-panel .battle-command-layout-v5 {
        grid-template-columns: 120px 350px !important;
        justify-content: space-between !important;
    }

    #battle-action-panel .arena-escape-btn {
        width: 260px !important;
        max-width: none !important;
    }
}