body.environment-battle {
    background: url("/assets/backgrounds/sample-b79fae3b.jpg") no-repeat center center;
    background-size: cover;
}


.battle-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}

/* The arena backgrounds are 16:9 (320x180) pokerogue assets. Sprites and
   info panels are pinned to opposite corners; the sprite centers double as
   the battle-anim anchor points, so keep the .combat-sprite-anchor
   percentages in sync with PLAYER_ANCHOR/ENEMY_ANCHOR in
   battle_anim_controller.js. */
.battlefield {
    position: relative;
    /* Whichever dimension binds first wins: the container, the design cap, or
       the height the viewport can actually spare (16:9 back into a width). So
       a landscape phone gets the whole arena on screen instead of a slice of
       it, and the desktop layout is unchanged at >= 1024px wide. */
    width: min(100%, 1024px, (100dvh - var(--battle-chrome)) * 16 / 9);
    aspect-ratio: 320 / 180;
    margin: 0 auto;
    background-size: 100% 100%;
    image-rendering: pixelated;
}

/* each card spans the whole field and pins its children to its corners */
.battlefield .combat-character {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.combat-sprite-anchor {
    position: absolute;
    /* The sprite inside is a fixed pixel size (see pokemon_sprite_controller),
       so it has to be scaled to whatever width the arena actually got —
       --field-scale, published by battlefield_controller. Scaling the anchor
       rather than the sprite leaves .combat-sprite free for the hit and faint
       animations, which drive transform themselves. */
    transform: translate(-50%, -50%) scale(var(--field-scale, 1));
}

.combat-character-enemy .combat-sprite-anchor {
    left: 78%;
    top: 30%;
}

.combat-character-player .combat-sprite-anchor {
    left: 22%;
    top: 72%;
}

.combat-character .combat-panel {
    position: absolute;
    pointer-events: auto;
    /* 500px of the 1024px design width — as a percentage of the arena it
       holds that proportion at every size instead of overflowing it. */
    width: 49%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.combat-character-enemy .combat-panel {
    left: 2%;
    top: 5%;
}

.combat-character-player .combat-panel {
    right: 2%;
    bottom: 0;
}

/* battlefield with the switch list as a column to its right */
.battle-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}

.battle-layout .battlefield {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

/* moves stack under the player's name/hp panel inside .combat-panel */
.move-panel {
    padding: 0.5rem 0.75rem;
}

.move-panel.nes-container.with-title > .title {
    margin: -1rem auto 1rem;
}

/* always a fixed 2x2 grid, so the panel keeps its size and each move stays
   in its slot regardless of how many moves the pokemon knows */
.move-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 40px;
    gap: 6px;
}

.move-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
}

/* Any element that owns a .move-tooltip: reveal it on hover/focus. Used by
   the battle move slots and the move-replace buttons. */
.move-tooltip-anchor {
    position: relative;
}

/* Hover tooltip: move name, type, power, accuracy and flavour text. */
.move-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 60;
    width: max-content;
    max-width: 260px;
    padding: 10px 12px;
    background: #212529;
    color: #fff;
    border: 4px solid #fff;
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease-in;
}

.move-tooltip-anchor:hover .move-tooltip,
.move-tooltip-anchor:focus-within .move-tooltip,
/* Set by move_inspect_controller.js when a finger presses and holds — the
   touch stand-in for hovering. */
.move-tooltip-anchor.is-inspecting .move-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Wraps rather than overflows: the tooltip is capped at 260px, and a long move
   name plus the badges doesn't always fit on one line. */
.move-tooltip-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 8px;
}

.move-tooltip-name {
    font-weight: bold;
    overflow-wrap: anywhere;
}

.move-tooltip-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
}

.move-tooltip-estimate {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
    padding-top: 6px;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.move-tooltip-estimate .is-super    { color: #6ad36a; }
.move-tooltip-estimate .is-resisted { color: #f0a35e; }
.move-tooltip-estimate .is-immune   { color: #9aa0a6; }
.move-tooltip-estimate .is-neutral  { color: #fff; }

.move-tooltip-desc {
    margin: 0;
    color: #cfcfcf;
}

/* Category glyph and type badge, right-aligned as a pair (margin, not
   justify-content, so they stay right-aligned once they wrap to their own
   line). flex: none is load-bearing — nes.css positions the badge's label
   absolutely, so the badge's min-content width is 0 and it would otherwise
   shrink until the nowrap label spilled out of the tooltip. */
.move-tooltip-badges {
    display: flex;
    align-items: center;
    flex: none;
    gap: 6px;
    margin-left: auto;
}

.move-category-icon {
    flex: none;
}

.move-category-icon--physical { color: #e76e55; }
.move-category-icon--special  { color: #209cee; }
.move-category-icon--status   { color: #9aa0a6; }

/* Shrink the pixel type badge so it fits the compact tooltip header. nes.css
   sizes .nes-badge entirely in em, so scaling the font shrinks the layout box
   too — a transform would leave a full-size gap next to the category glyph. */
.move-tooltip .nes-badge {
    font-size: 0.63em;
    margin: 0;
}

/* nes.css's 17.5em is sized for a two-type badge; a move only ever has one, and
   the extra dead width is what pushes the header past the tooltip's 260px cap.
   11em clears the longest type name ("Electric", "Fighting"). */
.move-tooltip .type-badge:not(.is-splited) {
    width: 11em;
}

/* Stands in for the 2x2 grid while a two-turn move is mid-flight, keeping the
   panel the same height so the layout doesn't jump. */
.move-grid--locked {
    display: grid;
    grid-template-rows: repeat(2, 40px);
    place-items: center;
}

.move-locked {
    grid-row: 1 / span 2;
    margin: 0;
    text-align: center;
    opacity: 0.75;
}

.move-slot-empty {
    justify-content: center;
    border: 2px dashed rgba(128, 128, 128, 0.4);
    opacity: 0.5;
}

.move-slot .move-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 6px;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-slot .move-btn.auto-choice {
    text-decoration: underline;
}

/* While an already-executed turn is replayed the buttons are inert, but the
   queued action keeps its highlight (an explicit pick, is-primary, or the
   auto-picked default, auto-choice) so the player can still see their choice. */
.nes-btn.is-replaying {
    cursor: default;
    opacity: 0.45;
}

.nes-btn.is-replaying.is-primary,
.move-slot .move-btn.is-replaying.auto-choice {
    opacity: 1;
}

.move-slot .move-pp {
    flex: none;
    font-size: 0.65rem;
    white-space: nowrap;
}

.switch-panel {
    margin-top: 38px;
    flex: none;
    width: 150px;
    padding: 0;
}

.switch-panel .switch-option {
    margin-bottom: 8px;
}

.switch-panel .switch-option .nes-btn {
    padding: 10px 20px;
}
.switch-panel .switch-option .nes-btn .health-bar {
    height: 12px;
}

.battlefield-default {
    background-image: url("/poke-assets/images/arenas/forest_bg.png");
}

.battlefield-forest {
    background-image: url("/poke-assets/images/arenas/forest_bg.png");
}

.battlefield-desert {
    background-image: url("/poke-assets/images/arenas/desert_bg.png");
}

.battlefield-mountain {
    background-image: url("/poke-assets/images/arenas/mountain_bg.png");
}

.battlefield-abyss {
    background-image: url("/poke-assets/images/arenas/abyss_bg.png");
}

.battlefield-badlands {
    background-image: url("/poke-assets/images/arenas/badlands_bg.png");
}

.battlefield-beach {
    background-image: url("/poke-assets/images/arenas/beach_bg.png");
}

.battlefield-cave {
    background-image: url("/poke-assets/images/arenas/cave_bg.png");
}

.battlefield-construction_site {
    background-image: url("/poke-assets/images/arenas/construction_site_bg.png");
}

.battlefield-dojo {
    background-image: url("/poke-assets/images/arenas/dojo_bg.png");
}

.battlefield-fairy_cave {
    background-image: url("/poke-assets/images/arenas/fairy_cave_bg.png");
}

.battlefield-factory {
    background-image: url("/poke-assets/images/arenas/factory_bg.png");
}

.battlefield-end {
    background-image: url("/poke-assets/images/arenas/end_bg.png");
}

.battlefield-grass {
    background-image: url("/poke-assets/images/arenas/grass_bg.png");
}

.battlefield-graveyard {
    background-image: url("/poke-assets/images/arenas/graveyard_bg.png");
}

.battlefield-ice_cave {
    background-image: url("/poke-assets/images/arenas/ice_cave_bg.png");
}

.battlefield-island {
    background-image: url("/poke-assets/images/arenas/island_bg.png");
}

.battlefield-jungle {
    background-image: url("/poke-assets/images/arenas/jungle_bg.png");
}

.battlefield-laboratory {
    background-image: url("/poke-assets/images/arenas/laboratory_bg.png");
}

.battlefield-lake {
    background-image: url("/poke-assets/images/arenas/lake_bg.png");
}

.battlefield-meadow {
    background-image: url("/poke-assets/images/arenas/meadow_bg.png");
}

.battlefield-metropolis {
    background-image: url("/poke-assets/images/arenas/metropolis_bg.png");
}

.battlefield-plains {
    background-image: url("/poke-assets/images/arenas/plains_bg.png");
}

.battlefield-power_plant {
    background-image: url("/poke-assets/images/arenas/power_plant_bg.png");
}

.battlefield-ruins {
    background-image: url("/poke-assets/images/arenas/ruins_bg.png");
}

.battlefield-sea {
    background-image: url("/poke-assets/images/arenas/sea_bg.png");
}

.battlefield-seabed {
    background-image: url("/poke-assets/images/arenas/seabed_bg.png");
}

.battlefield-slum {
    background-image: url("/poke-assets/images/arenas/slum_bg.png");
}

.battlefield-snowy_forest {
    background-image: url("/poke-assets/images/arenas/snowy_forest_bg.png");
}

.battlefield-space {
    background-image: url("/poke-assets/images/arenas/space_bg.png");
}

.battlefield-swamp {
    background-image: url("/poke-assets/images/arenas/swamp_bg.png");
}

.battlefield-tall_grass {
    background-image: url("/poke-assets/images/arenas/tall_grass_bg.png");
}

.battlefield-temple {
    background-image: url("/poke-assets/images/arenas/temple_bg.png");
}

.battlefield-town {
    background-image: url("/poke-assets/images/arenas/town_bg.png");
}

.battlefield-volcano {
    background-image: url("/poke-assets/images/arenas/volcano_bg.png");
}

.battlefield-wasteland {
    background-image: url("/poke-assets/images/arenas/wasteland_bg.png");
}

/* --- Turn log ------------------------------------------------------------
   Desktop: a plain block under the arena. Everywhere it is shown it can be
   dismissed (the × toggle) and it dims itself once a turn has had time to be
   read — see battle_log_controller.js. */

.battle-log {
    position: relative;
    transition: opacity 0.6s ease;
}

.battle-log.is-faded {
    opacity: 0.35;
}

/* The widen control belongs to the phone layout, where the log is a narrow
   column beside the arena (see z_mobile.css). At the bottom of a desktop
   screen the log already has all the width it needs, so it is not shown. */
.battle-log__toggle {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 0.4rem;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    /* Always tappable, even when the panel itself ignores pointer events. */
    pointer-events: auto;
}