/* ============================================================
   CARCASA TAMAGOTCHI
   Forma de huevo rosa con corazones, anilla, logo y marco de
   pantalla en pico, como el Tamagotchi original.
   El tamaño es SIEMPRE el mismo: todas las pantallas del juego
   (bloqueo, selector y partida) viven dentro de la pantallita.
   ============================================================ */

html { height: 100%; }

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: radial-gradient(circle at 50% 30%, #3b4a5a 0%, #2c3e50 60%, #222c38 100%);
    font-family: 'Press Start 2P', cursive;
}

.hidden { display: none !important; }

/* Ninguna imagen del juego debe abrir el menú nativo del navegador
   (copiar/descargar/buscar con Lens) al mantener pulsado en móvil.
   -webkit-touch-callout cubre iOS; el resto lo bloquea engine.js
   interceptando el evento "contextmenu" (imprescindible en Android,
   donde esta propiedad CSS no tiene efecto). */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Centra la carcasa y deja scroll si la ventana es muy baja */
.tama-wrap {
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0 24px;
    box-sizing: border-box;
}

/* ---------- El huevo ---------- */

.tamagotchi-casing {
    position: relative;
    width: 360px;
    height: 530px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 44px 20px 0;

    /* Óvalo tipo huevo. El radio horizontal de arriba (38 %) es el que manda:
       cuanto menor, más rectos suben los lados y más ancho queda el óvalo a la
       altura del marco, que es donde va justo. Con 38 % hay 283 px libres ahí,
       suficiente para un marco de 264 px con ~10 px de aire a cada lado.
       Los radios verticales suman 100 % (54 + 46), así que no se pueden subir. */
    border-radius: 38% 38% 44% 44% / 54% 54% 46% 46%;

    background:
        radial-gradient(ellipse at 32% 22%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 42%),
        radial-gradient(ellipse at 50% 62%, #f04f92 0%, #e02d7b 55%, #c11f66 100%);
    border: 2px solid #a81a58;
    box-shadow:
        inset -10px -14px 26px rgba(120, 10, 60, 0.45),
        inset 8px 10px 22px rgba(255, 255, 255, 0.22),
        0 14px 28px rgba(0, 0, 0, 0.45);
}

/* Junta lateral de la carcasa (las dos mitades del Tamagotchi) */
.tamagotchi-casing::after {
    content: "";
    position: absolute;
    left: -1px; right: -1px;
    top: 56%;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(140, 20, 70, 0.55) 0 12%,
        rgba(140, 20, 70, 0) 22%,
        rgba(140, 20, 70, 0) 78%,
        rgba(140, 20, 70, 0.55) 88% 100%);
    pointer-events: none;
}

/* Anilla del llavero */
.tama-anilla {
    position: absolute;
    top: -16px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    border-radius: 50%;
    border: 5px solid #c9ccd4;
    background: transparent;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4);
}

.tama-anilla::after {
    content: "";
    position: absolute;
    top: 17px; left: 50%;
    width: 22px; height: 14px;
    margin-left: -11px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #eceff3, #b9bec7);
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ---------- Corazones decorativos ---------- */

.tama-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.corazon {
    position: absolute;
    width: 22px;
    height: 20px;
    opacity: 0.5;
}

/* Corazón hecho con dos círculos y un cuadrado girado */
.corazon::before,
.corazon::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 17px;
    border-radius: 11px 11px 0 0;
    background: #ff9ec4;
}

.corazon::before { left: 11px; transform: rotate(-45deg); transform-origin: 0 100%; }
.corazon::after  { left: 0;    transform: rotate(45deg);  transform-origin: 100% 100%; }

.c1 { top: 8%;  left: 12%; transform: scale(1.5) rotate(-12deg); opacity: .38; }
.c2 { top: 14%; right: 13%; transform: scale(1.1) rotate(14deg); opacity: .45; }
.c3 { top: 30%; left: 6%;  transform: scale(.8)  rotate(-6deg);  opacity: .35; }
.c4 { bottom: 22%; right: 8%; transform: scale(1.35) rotate(10deg); opacity: .4; }
.c5 { bottom: 12%; left: 16%; transform: scale(1)   rotate(-16deg); opacity: .42; }
.c6 { bottom: 30%; left: 44%; transform: scale(.7)  rotate(8deg);   opacity: .3; }

/* ---------- Logo ---------- */

/* Logo tipo burbuja: letras redondeadas, blancas con contorno magenta,
   alternando altura como en el Tamagotchi original. */
.tama-logo {
    position: relative;
    z-index: 2;
    text-align: center;
    font-family: 'Baloo 2', 'Press Start 2P', cursive;
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.5px;
    /* Este margen baja el marco hasta donde el óvalo ya es ancho */
    margin-bottom: 12px;
    white-space: nowrap;
}

.tama-logo .letra {
    display: inline-block;
    color: #fff;
    text-shadow:
        -1.5px -1.5px 0 #b3195e, 1.5px -1.5px 0 #b3195e,
        -1.5px  1.5px 0 #b3195e, 1.5px  1.5px 0 #b3195e,
         0 3px 0 #8d1149,
         0 5px 6px rgba(90, 5, 45, .5);
}

/* Las minúsculas van algo más pequeñas y bailadas */
.tama-logo .baja {
    font-size: 0.76em;
    transform: translateY(3px) rotate(-4deg);
}

.tama-logo .alta {
    transform: translateY(-1px) rotate(3deg);
}

.tama-logo .marca {
    font-size: 0.3em;
    vertical-align: super;
    color: #ffd9e8;
    text-shadow: 0 1px 0 #b3195e;
    margin-left: 1px;
}

/* ---------- Marco de la pantalla (en pico, como el original) ---------- */

/* El marco tiene un ancho FIJO más estrecho que la carcasa: el huevo es
   un óvalo y a esta altura solo mide ~255 px, así que un marco de 100 %
   se saldría por los lados. Y el contorno ondulado queda siempre por
   fuera de la pantalla (valles al 4 %, relleno de 18 px). */
.lcd-marco {
    position: relative;
    z-index: 2;
    width: 264px;
    height: 312px;
    margin: 0 auto;
    padding: 17px;
    box-sizing: border-box;
    background: linear-gradient(160deg, #d3bbef 0%, #b394de 45%, #9773c6 100%);
    clip-path: polygon(
        /* borde superior (izq → der) */
        4% 4%, 18% 0%, 32% 4%, 50% 0%, 68% 4%, 82% 0%, 96% 4%,
        /* lado derecho (arriba → abajo) */
        100% 14%, 96% 28%, 100% 42%, 96% 58%, 100% 72%, 96% 86%, 100% 96%,
        /* borde inferior (der → izq) */
        96% 96%, 82% 100%, 68% 96%, 50% 100%, 32% 96%, 18% 100%, 4% 96%,
        /* lado izquierdo (abajo → arriba) */
        0% 96%, 4% 86%, 0% 72%, 4% 58%, 0% 42%, 4% 28%, 0% 14%
    );
}

/* ---------- La pantalla ---------- */

.lcd-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 3px solid #2f2740;
    border-radius: 4px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45);
    /* Fondo por defecto (bloqueo y selector) */
    background: linear-gradient(180deg, #e6e9c8 0%, #d7dcb0 100%);
}

/* Entorno fijo de cada mascota (GDD §9): solo cambia en los minijuegos */
.lcd-screen.escena-perro {
    background: linear-gradient(180deg, #aadcf5 0%, #cde9c9 55%, #d8b370 78%, #c49a58 100%);
}

.lcd-screen.escena-gato {
    background: linear-gradient(180deg, #d8c7ee 0%, #e9d9c9 55%, #a97c50 78%, #8f6844 100%);
}

/* Cada pantalla del juego ocupa toda la pantallita */
.pantalla {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Pantalla de bloqueo ---------- */

#lockScreen {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 14px;
    box-sizing: border-box;
    background: #1d1a24;
    color: #ff6b6b;
}

#lockScreen h1 {
    font-size: 11px;
    margin: 0 0 12px;
    line-height: 1.5;
}

#lockScreen p {
    font-size: 7px;
    color: #bdc3c7;
    line-height: 1.7;
    margin: 0;
}

/* ---------- Selector de mascota ---------- */

#selectScreen {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

#selectScreen h1 {
    font-size: 9px;
    margin: 0 0 14px;
    color: #4a3b6b;
}

.select-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.select-btn {
    background: rgba(255, 255, 255, 0.5);
    color: #2f2740;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 8px 6px;
    border: 2px solid #8d6cc0;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(90, 70, 130, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 86px;
}

.select-btn:active {
    box-shadow: none;
    transform: translateY(3px);
}

.select-portada {
    width: 54px;
    height: 54px;
    image-rendering: pixelated;
    object-fit: contain;
}

.select-nombre { font-size: 9px; color: #6a3a7a; }

.select-estado {
    font-size: 6px;
    color: #5c5470;
    min-height: 8px;
    line-height: 1.4;
}

/* ---------- Partida: barra superior y stats ---------- */

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    font-size: 7px;
    color: #1c2833;
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(28, 40, 51, 0.35);
    overflow: hidden;
    white-space: nowrap;
}

#money-display { flex-shrink: 0; }

#counters {
    font-size: 6px;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Las stats van en UNA fila arriba: cada una es un emoji rodeado por
   una circunferencia que se llena según su valor. Así la mascota se
   queda con casi toda la pantalla. */
.stats-panel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4px 3px;
    gap: 1px;
}

.stat-anillo {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.stat-anillo svg {
    width: 100%;
    height: 100%;
    /* Empieza a llenarse desde arriba */
    transform: rotate(-90deg);
}

.stat-anillo circle {
    fill: none;
    stroke-width: 3.2;
    stroke-linecap: round;
}

.stat-anillo .pista { stroke: rgba(28, 40, 51, 0.22); }

.stat-anillo .arco {
    stroke: #27ae60;
    transition: stroke-dashoffset 0.4s, stroke 0.4s;
}

.stat-anillo .arco.ok      { stroke: #27ae60; }
.stat-anillo .arco.media   { stroke: #f39c12; }
.stat-anillo .arco.critica { stroke: #e74c3c; }

.stat-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

/* ---------- Zona de la mascota ---------- */

.pet-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 0;
}

.sprite-wrap { position: relative; }

/* Con las stats en anillos arriba, la mascota gana bastante sitio */
#pet-img {
    width: 116px;
    height: 116px;
    image-rendering: pixelated;
    object-fit: contain;
    user-select: none;
}

#pet-badge {
    position: absolute;
    top: -4px;
    right: -12px;
    font-size: 18px;
}

#claws-chip {
    position: absolute;
    bottom: -2px;
    right: -12px;
    font-size: 14px;
}

/* Etiqueta del asset que falta (placeholders, GDD §12.bis) */
#pet-caption {
    font-size: 5.5px;
    color: rgba(28, 40, 51, 0.6);
    margin-top: 3px;
    min-height: 7px;
}

/* Arenero del gato: se ensucia visiblemente con el tiempo (GDD §8) */
#arenero {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 15px;
    letter-spacing: -4px;
}

.status-message {
    font-size: 6.5px;
    text-align: center;
    padding: 6px 5px;
    color: #1c2833;
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px dashed rgba(28, 40, 51, 0.5);
    min-height: 30px;
    box-sizing: border-box;
    line-height: 1.6;
}

/* ---------- Botonera ---------- */

/* ---------- Franja de acciones dentro de la pantalla ----------
   Indica qué hace cada uno de los 4 botones de la carcasa. */

.acciones-hud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 4px 3px;
    background: rgba(255, 255, 255, 0.55);
    border-top: 2px solid rgba(28, 40, 51, 0.4);
}

.accion-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 1px;
    border-radius: 3px;
    min-height: 16px;
}

.accion-item .nombre {
    font-size: 5px;
    color: #1c2833;
    letter-spacing: -0.3px;
    text-align: center;
    line-height: 1.3;
}

/* La acción resaltada (curar cuando está enfermo) */
.accion-item.destacada {
    background: rgba(41, 128, 185, 0.28);
    box-shadow: inset 0 0 0 1px rgba(41, 128, 185, 0.75);
}

/* Acción no disponible ahora mismo */
.accion-item.apagada { opacity: 0.35; }

/* ---------- Los 4 botones físicos ---------- */

/* Mismo ancho y relleno que el marco: cada botón cae justo debajo de su
   etiqueta en la pantalla. */
.tama-fisicos {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    width: 264px;
    margin: 16px auto 0;
    padding: 0 17px;
    box-sizing: border-box;
}

.tama-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #c9427c;
    background: radial-gradient(circle at 36% 30%, #ffd9e8 0%, #f7a8c9 58%, #e07ba6 100%);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.85),
        inset 0 -4px 6px rgba(160, 40, 90, .45),
        0 4px 0 rgba(150, 25, 80, .75),
        0 5px 7px rgba(0, 0, 0, .35);
    cursor: pointer;
    padding: 0;
    font-size: 0;               /* botón liso: sin texto ni icono */
    transition: all .08s;
}

.tama-btn:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.7),
        inset 0 -2px 4px rgba(160, 40, 90, .5),
        0 0 0 rgba(150, 25, 80, .75);
}

.tama-btn:disabled {
    background: radial-gradient(circle at 36% 30%, #e8d5dc 0%, #cdb6bf 60%, #b49aa4 100%);
    border-color: #a8929b;
    box-shadow: inset 0 2px 3px rgba(255,255,255,.5), 0 4px 0 rgba(120, 100, 108, .7);
    cursor: not-allowed;
    opacity: .85;
}

/* El de curar se distingue también en la carcasa */
.tama-btn.curar {
    background: radial-gradient(circle at 36% 30%, #d6efff 0%, #8fcbf7 58%, #5aa6dd 100%);
    border-color: #4a9cd4;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.85),
        inset 0 -4px 6px rgba(30, 90, 130, .4),
        0 4px 0 rgba(40, 110, 155, .8),
        0 5px 7px rgba(0, 0, 0, .35);
    color: #10405f;
}

/* Cambiar de mascota: mismo botón físico que los otros cuatro pero azul y
   algo más pequeño, para que se lea como "el otro botón" de la carcasa.
   Sin texto ni icono (font-size: 0), como el resto. */
.switch-btn {
    position: relative;
    z-index: 2;
    display: block;
    width: 30px;
    height: 30px;
    margin: 12px auto 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #4a9cd4;
    background: radial-gradient(circle at 36% 30%, #d6efff 0%, #8fcbf7 58%, #5aa6dd 100%);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.85),
        inset 0 -4px 6px rgba(30, 90, 130, .4),
        0 4px 0 rgba(40, 110, 155, .8),
        0 5px 7px rgba(0, 0, 0, .35);
    cursor: pointer;
    font-size: 0;
    transition: all .08s;
}

.switch-btn:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.7),
        inset 0 -2px 4px rgba(30, 90, 130, .5),
        0 0 0 rgba(40, 110, 155, .8);
}

/* Red de seguridad del bloqueo: aunque algo dejase un botón en pie, la
   carcasa entera deja de responder mientras la sesión esté bloqueada. */
body.sesion-bloqueada .tama-fisicos,
body.sesion-bloqueada .switch-btn {
    pointer-events: none;
}

/* ---------- Móviles estrechos ---------- */

@media (max-width: 380px) {
    .tamagotchi-casing {
        width: 316px;
        height: 500px;
        padding: 40px 14px 0;
    }
    /* Se mantiene la proporción: el marco nunca más ancho que el óvalo
       (a la altura del marco quedan ~250 px libres, el marco pide 238) */
    .lcd-marco { width: 232px; height: 294px; padding: 16px; }
    .tama-fisicos { width: 232px; padding: 0 16px; }
    .tama-logo { font-size: 10px; }
    .tama-btn { width: 38px; height: 38px; }
    .switch-btn { width: 27px; height: 27px; margin-top: 10px; }
}

/* ---------- Overlay de minijuegos (Fase 3) ---------- */

/* Grid de 3 filas: HUD / zona de juego / mensaje.
   El decorado y el campo comparten la fila central, así la escena
   ocupa justo el área jugable y no queda tapada por HUD ni mensaje. */
#minigame-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-rows: auto 1fr auto;
    touch-action: none;
    user-select: none;
}

/* Escenas del minijuego: calle (perro) y salón (gato).
   El degradado es el cielo/ambiente base; encima va #mg-escena con el
   decorado dibujado (o la foto real si existe). */
#minigame-overlay[data-escena="calle"] {
    background: linear-gradient(180deg, #7ec8ef 0%, #a5d6a7 55%, #9e9e9e 78%, #757575 100%);
}

#minigame-overlay[data-escena="salon"] {
    background: linear-gradient(180deg, #f4d8a8 0%, #e8c088 60%, #b0713e 78%, #935c31 100%);
}

/* ---------- Decorado de la escena ---------- */

#mg-escena {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    overflow: hidden;
    pointer-events: none;        /* nunca estorba a los retos */
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
}

#mg-escena > * { position: absolute; }

/* --- Escena CALLE: parque --- */

.esc-cielo {
    top: 0; left: 0; right: 0; height: 62%;
    background: linear-gradient(180deg, #6ec1ea 0%, #9ad9f0 70%, #c7e9f5 100%);
}

.esc-sol {
    top: 6%; right: 12%;
    width: 26px; height: 26px;
    background: #ffe27a;
    border: 3px solid #ffd54f;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 213, 79, 0.8);
}

/* Nubes pixeladas: tres bloques que forman la silueta */
.esc-nube {
    height: 10px;
    background: #fff;
    box-shadow: 8px -6px 0 0 #fff, 20px 0 0 0 #fff, 14px -10px 0 0 #fff;
    opacity: 0.9;
}

.esc-nube-1 { top: 9%;  left: 12%; width: 26px; }
.esc-nube-2 { top: 18%; left: 52%; width: 20px; transform: scale(0.8); }
.esc-nube-3 { top: 5%;  left: 68%; width: 22px; transform: scale(0.7); }

/* Franja de vegetación lejana */
.esc-lejania {
    top: 52%; left: 0; right: 0; height: 12%;
    background: #6b9e5e;
    border-top: 3px solid #5c8a51;
}

/* Árboles: copa + tronco */
.esc-arbol > .esc-copa {
    position: absolute;
    bottom: 18px; left: 50%;
    width: 34px; height: 34px;
    margin-left: -17px;
    background: #4a8b3f;
    border: 3px solid #3d7434;
    border-radius: 50% 50% 45% 45%;
}

.esc-arbol > .esc-tronco {
    position: absolute;
    bottom: 0; left: 50%;
    width: 10px; height: 22px;
    margin-left: -5px;
    background: #7a5230;
    border: 2px solid #5f3f25;
}

.esc-arbol-1 { bottom: 32%; left: 8%;  width: 40px; height: 56px; }
.esc-arbol-2 { bottom: 34%; left: 44%; width: 40px; height: 50px; transform: scale(0.85); }
.esc-arbol-3 { bottom: 33%; right: 6%; width: 40px; height: 54px; transform: scale(0.95); }

/* Banco de parque */
.esc-banco {
    bottom: 30%; left: 24%;
    width: 44px; height: 16px;
    background: #8d6039;
    border: 2px solid #6b4526;
    box-shadow: 0 6px 0 -2px #6b4526, 4px 10px 0 -3px #5f3f25, 34px 10px 0 -3px #5f3f25;
}

/* Farola */
.esc-farola {
    bottom: 30%; right: 26%;
    width: 6px; height: 46px;
    background: #55606b;
    border: 2px solid #3d4650;
}

.esc-farola-luz {
    position: absolute;
    top: -10px; left: -7px;
    width: 16px; height: 12px;
    background: #ffe9a8;
    border: 2px solid #d4b45c;
    border-radius: 4px 4px 2px 2px;
}

/* Suelo: césped + camino de tierra */
.esc-cesped {
    bottom: 0; left: 0; right: 0; height: 32%;
    background: linear-gradient(180deg, #7cb867 0%, #63a052 100%);
    border-top: 3px solid #52894a;
}

.esc-camino {
    bottom: 0; left: 0; right: 0; height: 13%;
    background: repeating-linear-gradient(
        90deg,
        #c2a06b 0 10px,
        #b8945f 10px 20px
    );
    border-top: 3px solid #9c7c4d;
}

/* Matas de hierba sueltas */
.esc-mata {
    bottom: 15%;
    width: 12px; height: 8px;
    background: #4f9142;
    border-radius: 50% 50% 0 0;
}

.esc-mata-1 { left: 18%; }
.esc-mata-2 { right: 20%; width: 9px; height: 6px; }

/* --- Escena SALÓN: casa del gato --- */

.esc-pared {
    top: 0; left: 0; right: 0; height: 72%;
    background: linear-gradient(180deg, #f0dcc0 0%, #e6cda9 100%);
}

.esc-ventana {
    top: 12%; left: 10%;
    width: 62px; height: 48px;
    background: linear-gradient(180deg, #8fd4f0 0%, #bde7f7 100%);
    border: 4px solid #a9825a;
    box-shadow: inset 0 0 0 2px #fff;
}

.esc-ventana-cruz-v {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 4px;
    margin-left: -2px;
    background: #a9825a;
}

.esc-ventana-cruz-h {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    margin-top: -2px;
    background: #a9825a;
}

.esc-cuadro {
    top: 16%; right: 14%;
    width: 36px; height: 28px;
    background: #cf8f6a;
    border: 4px solid #8d5c3a;
    box-shadow: inset 0 0 0 2px #f3d9b8;
}

/* Planta de interior */
.esc-planta { bottom: 26%; right: 8%; width: 30px; height: 44px; }

.esc-planta-hojas {
    position: absolute;
    bottom: 16px; left: 50%;
    width: 30px; height: 28px;
    margin-left: -15px;
    background: #4d8f4a;
    border: 2px solid #3d7439;
    border-radius: 50% 50% 40% 40%;
}

.esc-planta-maceta {
    position: absolute;
    bottom: 0; left: 50%;
    width: 20px; height: 18px;
    margin-left: -10px;
    background: #b5623c;
    border: 2px solid #8d4a2c;
    border-radius: 0 0 4px 4px;
}

/* Mueble bajo */
.esc-mueble {
    bottom: 26%; left: 16%;
    width: 70px; height: 26px;
    background: #a9754a;
    border: 3px solid #7d5233;
    box-shadow: inset 0 6px 0 -3px #c08a5c;
}

.esc-rodapie {
    bottom: 26%; left: 0; right: 0; height: 8px;
    background: #c9a274;
    border-top: 2px solid #a9825a;
}

.esc-suelo {
    bottom: 0; left: 0; right: 0; height: 26%;
    background: repeating-linear-gradient(
        90deg,
        #b8794a 0 14px,
        #a96c40 14px 28px
    );
    border-top: 3px solid #8d5733;
}

/* Alfombra donde juega el gato */
.esc-alfombra {
    bottom: 3%; left: 50%;
    width: 62%; height: 15%;
    margin-left: -31%;
    background: #c94f4f;
    border: 3px solid #a83c3c;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #e07b7b;
    opacity: 0.9;
}

/* HUD y mensaje: por encima del decorado y legibles sobre cualquier fondo */
#mg-hud {
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    padding: 5px 7px;
    font-size: 6px;
    color: #1c2833;
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 2px solid rgba(28, 40, 51, 0.35);
    position: relative;
    z-index: 2;
    overflow: hidden;
    white-space: nowrap;
}

#mg-titulo { overflow: hidden; text-overflow: ellipsis; }
#mg-timer { flex-shrink: 0; }

/* Comparte celda con #mg-escena: el juego va encima del decorado */
#mg-field {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#mg-msg {
    grid-row: 3;
    font-size: 6px;
    text-align: center;
    padding: 7px 5px;
    min-height: 24px;
    color: #1c2833;
    background: rgba(255, 255, 255, 0.72);
    border-top: 2px solid rgba(28, 40, 51, 0.35);
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

/* Reto: tocar a tiempo — pelota con brillo y sombra en el suelo */
.mg-target {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ff8a7a 0%, #e74c3c 55%, #b3352a 100%);
    border: 3px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    animation: mg-bota 0.7s infinite alternate ease-in-out;
}

.mg-target::before {
    content: "";
    position: absolute;
    bottom: -12px; left: 50%;
    width: 34px; height: 8px;
    margin-left: -17px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 50%;
}

.mg-target::after { content: "🐾"; font-size: 18px; }

@keyframes mg-bota {
    from { transform: translateY(0); }
    to   { transform: translateY(-5px); }
}

.mg-ring {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 4px dashed #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(28, 40, 51, 0.35), inset 0 0 0 2px rgba(28, 40, 51, 0.35);
}

/* Reto: mantener — medidor con marco de madera */
.mg-vbar {
    position: absolute;
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: 34px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.55);
    border: 3px solid #7d5233;
    border-radius: 6px;
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.mg-vzona {
    position: absolute;
    left: 0; right: 0;
    background: rgba(39, 174, 96, 0.75);
}

.mg-vfill {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(241, 196, 15, 0.9);
}

.mg-hint {
    position: absolute;
    bottom: 4%;
    width: 100%;
    text-align: center;
    font-size: 22px;
    pointer-events: none;
    animation: mg-pulse 0.8s infinite alternate;
}

@keyframes mg-pulse { from { opacity: 0.4; } to { opacity: 1; } }

/* Reto: barra — con marco de madera y marcador tipo correa */
.mg-hbar {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 28px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.55);
    border: 3px solid #7d5233;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.mg-hzona {
    position: absolute;
    top: 0; bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(39, 174, 96, 0.85) 0 6px,
        rgba(46, 204, 113, 0.85) 6px 12px
    );
}

.mg-marker {
    position: absolute;
    top: -7px;
    bottom: -7px;
    width: 8px;
    background: #e74c3c;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Reto: secuencia — piedritas numeradas del camino */
.mg-seq {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
    background: radial-gradient(circle at 34% 30%, #d8c6a8 0%, #b9a382 55%, #8f7c5f 100%);
    border: 3px solid #7a6a51;
    color: #3b3020;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}

.mg-seq-ok {
    background: radial-gradient(circle at 34% 30%, #7fe0a0 0%, #27ae60 60%, #1e8449 100%);
    border-color: #1e8449;
    color: #fff;
    pointer-events: none;
}

/* Reto: deslizar */
.mg-flecha {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 52px;
    pointer-events: none;
    animation: mg-pulse 0.5s infinite alternate;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4));
}

/* ---------- Actor: el animal en la escena del minijuego ---------- */

#mg-actor {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    pointer-events: none;
    z-index: 1;                 /* sobre el decorado, bajo los retos */
}

.mg-actor-img {
    position: absolute;
    bottom: 4%;
    left: 50%;
    width: 74px;
    height: 74px;
    margin-left: -37px;
    image-rendering: pixelated;
    object-fit: contain;
    filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.35));
    animation: mg-actor-idle 1.1s infinite alternate ease-in-out;
}

@keyframes mg-actor-idle {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-4px) scale(1.02); }
}

.mg-actor-bien { animation: mg-actor-salto 0.5s ease-out; }
.mg-actor-mal  { animation: mg-actor-tiemble 0.5s ease-out; }

@keyframes mg-actor-salto {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-18px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes mg-actor-tiemble {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25%      { transform: translateX(-6px) rotate(-4deg); }
    75%      { transform: translateX(6px) rotate(4deg); }
}

/* Aviso de roce en el juego del gato */
.mg-roce {
    position: absolute;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 2px 0 #d81b60;
    pointer-events: none;
    animation: mg-roce-sube 0.7s ease-out forwards;
}

@keyframes mg-roce-sube {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-22px); }
}

/* Juego del gato: sombra bajo el gato y ovillo con hilo */
.mg-gato {
    position: absolute;
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.35));
}

/* Cuando te tiene encima: aviso visual de peligro */
.mg-gato-cerca {
    filter: drop-shadow(0 0 6px #ff1744) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.35));
}

.mg-cuerda {
    position: absolute;
    font-size: 26px;
    pointer-events: none;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
    animation: mg-ovillo 1.2s infinite linear;
}

/* El hilo que va quedando detrás del ovillo */
.mg-cuerda::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 26px; height: 3px;
    background: repeating-linear-gradient(
        90deg,
        rgba(231, 76, 60, 0.85) 0 5px,
        transparent 5px 9px
    );
    transform: translate(-100%, -50%);
    pointer-events: none;
}

@keyframes mg-ovillo {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

/* ---------- Modal de eventos (Fase 2) ---------- */

.modal {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(236, 240, 241, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-align: center;
    z-index: 30;    /* por encima del overlay de minijuegos */
}

#event-text {
    font-size: 6.5px;
    line-height: 1.7;
    color: #1c2833;
    margin: 0 0 14px;
    max-height: 55%;
    overflow-y: auto;
    white-space: pre-line;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 88%;
}

.modal-btn {
    background-color: #2f2740;
    color: #ecf0f1;
    font-family: 'Press Start 2P', cursive;
    font-size: 6.5px;
    padding: 8px 6px;
    border: 2px solid #2f2740;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
}

.modal-btn:active { transform: translateY(2px); }