/* ═════════════════════════════════════════════════════════════════════════════
   ECOCLASIFICA UDEA // FONDOS VECTORIALES ARCADE (ATARDECER & DÍA CLARO)
   Fondo en z-0, canvas transparente en z-10, HUD y controles en z-20.
   Sincronización matemática de la línea de suelo (y=1510) con ArcadeLayout.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Fondo Predeterminado / Jugador 1 / Modo Individual: Atardecer UdeA ─── */
.arcade-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #180b28;
    background-image: url('/media/images/udea-sunset.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

/* Ocultar flaps artificiales: el SVG panorámico 2560px cubre el 100% de la pantalla sin cortes */
.arcade-background::before,
.arcade-background::after {
    display: none;
}

/* ─── 2. Jugador 2 en Modo Dúo: Día Claro Radiante UdeA ─── */
.arcade-background.daylight,
.duo-backgrounds .arcade-background:nth-child(2) {
    background-color: #0284c7;
    background-image: url('/media/images/udea-daylight.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.arcade-background.daylight::before,
.arcade-background.daylight::after,
.duo-backgrounds .arcade-background:nth-child(2)::before,
.duo-backgrounds .arcade-background:nth-child(2)::after {
    display: none;
}

/* ─── 3. Jerarquía de Capas e Interfaz ─── */
#game-container,
#duo-stage {
    isolation: isolate;
}

#game-container canvas,
#duo-canvas {
    position: absolute;
    inset: 0;
    z-index: 10;
}

#game-container .start-game-overlay,
#game-container .tutorial-banner-overlay,
#player-panels {
    z-index: 20;
}

.controls-ui,
.scoreboards,
#desktop-hud,
body > section:first-of-type {
    position: relative;
    z-index: 20;
}

/* ─── 4. Contenedor de Fondos en Pantalla Dividida (Modo Dúo) ─── */
.duo-backgrounds {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    pointer-events: none;
}

.duo-backgrounds .arcade-background {
    position: relative;
}