/* === 30.03.26 BIEN ======================================= */

/* === ROOT ================================================ */
    :root {

        --color-numero: rgb(36, 15, 8);
        --color-numeroActivo: rgb(36, 15, 8);

        --color-numeroFijo: rgb(36, 15, 8);
        --color-numeroEscrito: rgb(0, 0, 0);
        --color-numeroActMas: rgb(0, 170, 0);
        --color-numeroActMenos: rgb(204, 0, 0);
        --color-numeroBorrado: rgb(204, 0, 0);
        --color-numeroDorado: rgb(255, 215, 0);
        --color-celda: rgb(220, 220, 220);
        --color-celdaVacia: rgb(220, 220, 220);
        --color-celdaFija: rgb(200, 230, 200);
        --color-celdaEscrita: rgb(200, 230, 200);
        --color-celdaDorada: rgb(38, 0, 255);
        --color-muroPerimetral: black;
        --color-muroFijo: black;
        --color-muroAuto: gray;
        --color-lineasInternas: rgb(200,200,200);

        --tam-numero: clamp(0.6rem, 6vw, 6rem);
        --tam-numeroFijo: clamp(0.2rem, 2vw, 2rem);
        --tam-numeroEscrito: clamp(0.6rem, 6vw, 6rem);
        --peso-numeroFijo: 900;
        --peso-numeroEscrito: 500;

        --grosor-muroPerimetral: 9px;
        --grosor-muroFijo: 3px;
        --grosor-muroAuto: 3px;
        --grosor-lineasInternas: 0.1px;

        --fondo-tablero: rgb(255, 255, 255);
        --color-boton: rgb(100, 35, 35);
        --border-boton: rgb(70, 0, 0);

        --color-mensajeFinal: rgb(59, 18, 5);

        --tams-Numero: clamp(0.6rem, 6vw, 5rem);
        --pct-color: 90%;

        /* === TEMA POR DEFECTO */
        --base-numero: #3c2814;
        --base-celda: #f2e2c4;
        --base-muro: #8b6a3a;
        --base-boton: #a67c52;
        --base-fondo: #f7ecd9;
    }
/* === ROOT ================================================ */

/* === TEMAS DISEÑADOS====================================== */

    body {
        --color-numeroFijo:           var(--base-numero);
        --color-numeroEscrito:  color-mix(in srgb,       var(--base-numero) var(--pct-color), black        calc(100% - var(--pct-color)));
        --color-numeroActivo:         var(--base-numero);

        --color-celdaFija:            var(--base-celda);
        --color-celdaEscrita:   color-mix(in srgb,       var(--base-celda) var(--pct-color), rgb(4, 0, 0) calc(100% - var(--pct-color)));

        --color-celdaVacia:           var(--base-fondo);

        --color-muroPerimetral: var(--base-muro);
        --color-muroFijo: var(--base-muro);

        --color-muroAuto:       color-mix(in srgb,       var(--base-muro)  var(--pct-color), rgb(0, 0, 0) calc(30% - var(--pct-color)));
        --color-lineasInternas: color-mix(in srgb,       var(--base-muro)  var(--pct-color), black        calc(50% - var(--pct-color)));

        --border-boton: var(--base-muro);

        transition:
            background-color 0.6s ease,
            color 0.6s ease,
            --base-numero 0.6s ease,
            --base-celda 0.6s ease,
            --base-muro 0.6s ease,
            --base-boton 0.6s ease,
            --base-fondo 0.6s ease;
    }
    body.tema-personalizado {
            --base-numero: var(--base-numero);
            --base-celda: var(--base-celda);
            --base-muro: var(--base-muro);
            --base-boton: var(--base-boton);
            --base-fondo: var(--base-fondo);
    }
    /* === TEMAS DISEÑADOS=======================================*/
        .tema-clasico     { --base-numero:#2b2b2b; --base-celda:#f0f0f0; --base-muro:#000; --base-boton:#6b2c2c; --base-fondo:#fff; }
        .tema-fuego       { --base-numero:#ff4500; --base-celda:#ffe5d1; --base-muro:#cc3300; --base-boton:#ff2200; --base-fondo:#fff3e6; }
        .tema-hielo       { --base-numero:#00c8ff; --base-celda:#e6faff; --base-muro:#0088aa; --base-boton:#00aadd; --base-fondo:#f0fcff; }
        .tema-naturaleza  { --base-numero:#2e8b57; --base-celda:#e8f5e9; --base-muro:#1f5f3c; --base-boton:#3fa76b; --base-fondo:#f3fbf4; }
        .tema-galaxia     { --base-numero:#c084ff; --base-celda:#1a1025; --base-muro:#6a0dad; --base-boton:#8a2be2; --base-fondo:#0d0714; }
        .tema-limonada    { --base-numero:#556b2f; --base-celda:#f7ffcc; --base-muro:#99aa33; --base-boton:#cddc39; --base-fondo:#fcffe6; }
        .tema-cupcake     { --base-numero:#ff8fb1; --base-celda:#ffe6f0; --base-muro:#ff6f9c; --base-boton:#ff4f88; --base-fondo:#fff5fa; }
        .tema-infantil    { --base-numero:#ff6f61; --base-celda:#ffe8d6; --base-muro:#ff9a76; --base-boton:#ff6f61; --base-fondo:#fff5ee; }
        .tema-minimalista { --base-numero:rgb(10,66,66); --base-celda:rgb(2,224,224);      --base-muro:rgb(13,45,45); --base-boton:rgb(2,224,224); --base-fondo:rgb(200,224,224); }
        .tema-contraste   { --base-numero:#fff;    --base-celda:#000;    --base-muro:#ff0; --base-boton:#f00; --base-fondo:#000; }
        .tema-pastel      { --base-numero:#6a5acd; --base-celda:#e6e6fa; --base-muro:#9370db; --base-boton:#ba55d3; --base-fondo:#faf0ff; }
        .tema-matrix      { --base-numero:#00ff41; --base-celda:#001a00; --base-muro:#00ff41; --base-boton:#009933; --base-fondo:#000; }
        .tema-azulmarino  { --base-numero:#cce6ff; --base-celda:#002244; --base-muro:#004488; --base-boton:#0055aa; --base-fondo:#001122; }
        .tema-cobre       { --base-numero:#ffddaa; --base-celda:#5a3e2b; --base-muro:#8b5a2b; --base-boton:#c47a3f; --base-fondo:#3b2a1f; }
        .tema-claro       { --base-numero:#241508; --base-celda:#e0e0e0; --base-muro:#000; --base-boton:#642323; --base-fondo:#f5f5f5; }
        .tema-oscuro      { --base-numero:#fff;    --base-celda:#303030; --base-muro:#aaa; --base-boton:#b04040; --base-fondo:#1a1a1a; }
        .tema-neon        { --base-numero:#00ffea; --base-celda:#111;    --base-muro:#0ff; --base-boton:#f0a; --base-fondo:#000; }
        .tema-retro       { --base-numero:#2b2b2b; --base-celda:#020201; --base-muro:#5a4a2f; --base-boton:#8b6f47; --base-fondo:#f7f3d6; }
        .tema-azul        { --base-numero:#003366; --base-celda:#e6f0ff; --base-muro:#004488; --base-boton:#0055aa; --base-fondo:#f0f7ff; }
        .tema-dorado      { --base-numero:#daa520; --base-celda:#fff8dc; --base-muro:#8b7500; --base-boton:#cfa300; --base-fondo:#fffaf0; }
    /* === CSS TEMAS=============================================*/
        #tab-temas .fila-config {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin-top: 10px;
        }
        #tab-temas label {
            font-size: 1rem;
            font-weight: 600;
            color: #2412c1;
        }
        #tema-selector {
            width: 100%;
            padding: 12px 14px;
            font-size: 1.1rem;
            border-radius: 8px;
            border: 2px solid rgba(255,255,255,0.4);
            background: rgb(255, 255, 255);
            color: rgb(92, 16, 16);
            backdrop-filter: blur(4px);
            cursor: pointer;
            height: 35px;
        }
        #tema-selector:hover {
            background: rgba(255,255,255,0.25);
        }
        #tema-selector:focus {
            outline: none;
            border-color: #ffd700;
            background: rgba(255,255,255,0.3);
        }
/* === TEMAS DISEÑADOS====================================== */

/* --- NUMEROS --------------------------------------------- */
    .numero {
        font-size: min(var(--tam-numero), 100%);
        line-height: 1;
        pointer-events: none;
    }
    .numeroFijo {
        animation: aparecerNumero 2s ease-out;
        pointer-events: none;
        color: var(--color-numeroFijo);
        font-size: min(var(--tam-numeroFijo), 100%);
        line-height: 1;
        font-weight: var(--peso-numeroFijo);
        font-family: 'Roboto Condensed', sans-serif;
        letter-spacing: -0.06em;
        overflow: hidden;
        padding: 5%;
        font-family: 'Roboto Condensed', sans-serif;
        font-family: 'Inter Tight', sans-serif;
        font-family: 'Oswald', sans-serif;
    }
    @keyframes aparecerNumero {
        0%   { opacity: 0; transform: scale(0.2); }
        60%  { opacity: 1; transform: scale(1.05); }
        100% { opacity: 1; transform: scale(1); }
    }
    @keyframes aparecerNumero {
        0%   { opacity: 1; transform: scale(0.5); }
        60%  { opacity: 1; transform: scale(1); }
        100% { opacity: 1; transform: scale(1); }
    }
    .numeroEscrito {
        animation: aparecerNumero 1s ease-out;
        color: var(--color-numeroEscrito);
        font-size: min(var(--tam-numeroFijo), 100%);
        line-height: 1;
        font-weight: var(--peso-numeroEscrito);
        font-family: 'Roboto Condensed', sans-serif;
        letter-spacing: -0.06em;
        overflow: hidden;
        padding: 5%;
        font-family: 'Roboto Condensed', sans-serif;
        font-family: 'Inter Tight', sans-serif;
        font-family: 'Oswald', sans-serif;
    }
    .numeroActMas {
        color: var(--color-numeroActMas);
        color: inherit;
    }
    .numeroActMenos {
        color: var(--color-numeroActMenos);
        color: inherit;
    }
    .numeroActivo {
        animation: pulsoActiva 0.9s infinite ease-in-out;
        color: var(--color-numeroActivo);
        transform-origin: center center;
    }
    @keyframes pulsoActiva {
        0%   { transform: scale(1); }
        50%  { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
    @keyframes pulsoActiva {
        0%   { transform: translate(-50%, -50%) scale(1); }
        50%  { transform: translate(-50%, -50%) scale(1.5); }
        100% { transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes pulsoActiva {
        0%   { transform: translate(-50%, -50%) scale(1); }
        50%  { transform: translate(-50%, -50%) scale(1.5); }
        100% { transform: translate(-50%, -50%) scale(1); }
    }
    .numeroDorado {
        color: var(--color-numeroDorado);
    }
    /* ============================================
   N Ú M E R O S   (normales)
    ============================================ */

    .numero,
    .numeroFijo,
    .numeroEscrito {
        position: relative;            /* ocupan espacio real */
        z-index: 1;
        line-height: 1;
        margin: 0;
        padding: 5%;
    }
    .numeroActivo {
        position: absolute;            /* no altera la altura de la celda */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center center;
        z-index: 20;
        pointer-events: none;
        animation: pulsoActiva 0.9s infinite ease-in-out;
    }
    /* Animación del pulso */
    @keyframes pulsoActiva {
    0%   { transform: translate(-50%, -50%) scale(1); }
    50%  { transform: translate(-50%, -50%) scale(1.5); }
    100% { transform: translate(-50%, -50%) scale(1); }
    }
    /* Animación que hace un efecto de “latido” */
    @keyframes pulsoActiva {
        0%   { transform: translate(-50%, -50%) scale(1); }   /* Posición centrada + tamaño normal */
        50%  { transform: translate(-50%, -50%) scale(1.5); } /* Se agranda al 150% */
        100% { transform: translate(-50%, -50%) scale(1); }   /* Vuelve al tamaño original */
    }
/* --- NUMEROS --------------------------------------------- */
/* --- CELDAS ---------------------------------------------- */  
      .celda {
        font-size: min(var(--tam-numero), 70%);
        background-color: var(--color-celda);
        font-size: clamp(0.6rem, 2.2vw, 2rem);
        overflow: visible;
        width: 100%;
        height: 100%;
        font-size: min(8vw, 10vh);
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        border-right: var(--grosor-lineasInternas) dashed var(--color-lineasInternas);
        border-bottom: var(--grosor-lineasInternas) dashed var(--color-lineasInternas);
        overflow: hidden;
        transition: background-color 0.25s ease, outline 0.25s ease;
    }
    .celdaVacia { background-color: var(--color-celdaVacia); }
    .celdaFija { background-color: var(--color-celdaFija); }
    .celdaEscrita { background-color: var(--color-celdaEscrita); }
    .celdaEscrita-resaltada {
        background-color: rgba(255, 200, 0, 0.35);
    }
    .celdaActMas { background-color: var(--color-celdaActMas); }
    .celdaActMenos { background-color: var(--color-celdaActMenos); }
    .celdaDorada {
        background-color: var(--color-celdaDorada);
        animation: brilloDorado 4.6s ease-in-out forwards;
    }
    @keyframes brilloDorado {
        0%   { background-color: rgb(107, 105, 70); }
        50%  { background-color: rgb(255,215,20); }
        100% { background-color: rgb(255, 215, 0); }
    }
        .celda {
        position: relative;
        overflow: hidden;              /* mantiene la cuadrícula estable */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Solo la celda con número activo deja escapar el pulso */
    .celda:has(.numeroActivo) {
        overflow: visible !important;
    }
    .celdaEscrita-resaltada {
        background-color: rgba(255, 200, 0, 0.35); /* ejemplo */
    }

/* --- CELDAS ---------------------------------------------- */  
/* --- MUROS ----------------------------------------------- */  
    .muroFijo-arriba    { border-top:    var(--grosor-muroFijo) solid var(--color-muroFijo); }
    .muroFijo-abajo     { border-bottom: var(--grosor-muroFijo) solid var(--color-muroFijo); }
    .muroFijo-izquierda { border-left:   var(--grosor-muroFijo) solid var(--color-muroFijo); }
    .muroFijo-derecha   { border-right:  var(--grosor-muroFijo) solid var(--color-muroFijo); }

    .muroAuto-arriba    { border-top:    var(--grosor-muroAuto) solid var(--color-muroAuto); }
    .muroAuto-abajo     { border-bottom: var(--grosor-muroAuto) solid var(--color-muroAuto); }
    .muroAuto-izquierda { border-left:   var(--grosor-muroAuto) solid var(--color-muroAuto); }
    .muroAuto-derecha   { border-right:  var(--grosor-muroAuto) solid var(--color-muroAuto); }

    .muroPerimetral-arriba    { border-top:    var(--grosor-muroPerimetral) solid var(--color-muroPerimetral); }
    .muroPerimetral-abajo     { border-bottom: var(--grosor-muroPerimetral) solid var(--color-muroPerimetral); }
    .muroPerimetral-izquierda { border-left:   var(--grosor-muroPerimetral) solid var(--color-muroPerimetral); }
    .muroPerimetral-derecha   { border-right:  var(--grosor-muroPerimetral) solid var(--color-muroPerimetral); }
/* --- MUROS ----------------------------------------------- */ 

/* === WRAPPER ============================================= */
    #numego-wrapper {
        position: relative;
        width: 100%;
        min-height: 100dvh; /* evita saltos verticales */
        overflow: hidden;  /* evita que nada sobresalga al animar */
    }
    #numego-wrapper {
        position: relative;                /* Permite posicionar pantallas absolutas dentro */
        width: 100%;                       /* Ocupa todo el ancho */
        height: 100dvh;                    /* Altura real visible del móvil */
        overflow: hidden;                  /* Evita scroll interno y recorta animaciones */
    }
/* === WRAPPER ============================================= */

/* === NumeGo® Entrena tu mente ============================ */
    .titulo-numego {
        font-size: 26px;      /* tamaño base */
        font-weight: 600;
        display: flex;
        gap: 4px;
        margin-bottom: 0px;
        margin-top: 0px;
        position: relative;
        flex-wrap: nowrap;                              /* Evita saltos de línea en PC */
        align-items: center;  /* ← Alinea verticalmente botones + número */
        width: 100%;
        text-align: center;
        white-space: nowrap;
        font-size: 5.0vw;
        font-weight: 800;
        color: rgb(100, 35, 35);
        pointer-events: none;
        opacity: 1;
        max-width: 100%;
        /*inset: 0;*/
        display: flex;
        justify-content: center;
        align-items: baseline;
        background:none; /* dorado suave translúcido */
        margin-bottom: 10px; /* separa el título de los botones */
        font-size: clamp(18px, 3vw, 42px); /* ← ESTA ES LA CLAVE */

        text-shadow:
            0 0 0.5vh rgb(255,255,0),
            0 0 0.5vh rgb(255,255,0),
            0 0 0.5vh rgb(255,255,0),
            0 0 0.5vh rgb(255,255,0),
            0 0 0.5vh rgb(255,255,0);
            animation: fadeIn 0.8s ease-out forwards;
            }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to   { opacity: 1; transform: scale(1); }
            }
    .titulo-numego .marca {
        font-size: 7vw;      /* más grande que el resto */
        font-weight: 900;    /* más contundente */
        color: rgb(100, 35, 35); /* mismo color o el que quieras */
        line-height: 1;
        }
    @media (max-width: 600px) {.titulo-numego {
        margin-bottom: 0;        /* pega el título a los botones */
        line-height: 0.9;        /* reduce la altura vertical real */
        align-items: center;     /* evita que baseline añada espacio */
        }}
    @media (max-width: 600px) {.titulo-numego .marca {
        line-height: 0.9;        /* igual para la marca */
        }
        }
/* === NumeGo® Entrena tu mente ============================ */

/*=== PANTALLAS ====================================== */
    .pantalla {
        width: 100%;
        height: 100%;
        display: none !important;
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        transition: opacity .35s ease, transform .35s ease;
        width: 100%;
        min-height: 100vh;
        box-sizing: border-box;
    }
/*=== PANTALLAS ====================================== */

/* SUBTITULOS PANTALLAS=============================== */
  /*  .tituloInicio {
        font-size: 20px;
        margin-bottom: 20px;
    color: rgb(255, 255, 255);
        justify-content: center;

    }  */
/* SUBTITULOS PANTALLAS=============================== */

/* === PANTALLA 1 INICIO ============================= */

    #pantalla-inicio {
        display: flex;                     /* Flexbox para centrar contenido */
        flex-direction: column;            /* Elementos en columna */
        justify-content: center;           /* centra verticalmente */
        align-items: center;               /* centra horizontalmente */
        min-height: 75vh;                  /* ⭐ ocupa el 75% sin forzar */
        padding: 20px 0;                   /* evita que toque bordes */
        box-sizing: border-box;            /* Padding incluido en el tamaño total */
        height: 100%;                      /* Ocupa toda la pantalla asignada */
    }
/* ====== CONTAINER INICIO =========================== */

    #CasaBotonesInicio {                                                    /* Estilos del contenedor */
            max-width: 400px;
            max-height: 900px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 12px;
            margin: 60px auto 20px auto;
    }
    /* EN MOVIL 400PX */
    @media (max-width: 400px) {#CasaBotonesInicio {
            margin: 15px auto;
            border-radius: 12px;
            margin-top: 80px !important;
            width: 80% !important;
        }        }
    /* Oculta CASABOTONESTABLERO cuando este contenedor está visible */
    #CasaBotonesInicio:not(.oculto) ~ #CasaBotonesTablero {display: none;}  /* Oculta el tablero cuando este contenedor está visible */

/* ========= BOTONES INICIO ========================== */
    .botonesInicio {                                                        /* Estilos de los botones */
            text-align: center;
            padding: 12px;
            font-size: 20px;
            cursor: pointer;
            border-radius: 8px;
            border: none;
            background: #0073aa;
            color: white;
            height: 40px;
            width: 100%;
            margin-bottom: 6px; /* reemplaza gap del contenedor */
        }

    .botonesInicio:hover {background: rgb(0, 95, 135);}
    /* Títulos opcionales 
    .titulo-inicio    { font-size: 42px;margin-bottom: 10px;}
    .subtitulo-inicio { font-size: 20px;margin-bottom: 30px;}*/
/* === PANTALLA 1 INICIO ============================= */

/* === PANTALLA 2 TAMAÑOS ============================ */
    #pantalla-tamano {
        text-align: center;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
/* ====== CONTENEDOR TAMAÑOS Y CARD ================== */
    /*.titulo-tamano {
    font-size: 20px;
    margin-bottom: 20px;
    color: #ffffff;
    justify-content: center;
    }   */
    .btn-volver {
        margin-top:20PX;
        padding: 12px 20px;
        font-size: 18px;
        border-radius: 8px;
        border: none;
        background: #222;
        color: white;
        cursor: pointer;
        margin-bottom: 40PX;
    }
    #lista-tamanos {                   /* CONTENEDOR CARD-TAMAÑOS */
        width: 100%;
        color: #a4e4f8;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 16px;
        padding: 20px;
        /* Evita saltos al cargar */
        min-height: 60vh;
    }
    /* ============================
    FORMATO CARD
    ============================ */
    .card-tamano {                     /* BOTONES TAMAÑO */
        transform: translateY(10px);
        transition: transform .2s ease, box-shadow .2s ease;
        
        background: rgb(0, 115, 170);
        border-radius: 12px;
        padding: 12px; /* antes 18px */
        text-align: center;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        /* Evita gigantismo */
        max-width: 150px;
        width: 100%;
        margin: 0 auto;
        /* Animación suave sin mover el layout */
        opacity: 0;
        transform: scale(0.92);
        animation: aparecer 0.35s ease forwards;


        /* Optimiza animación, evita saltos */
        will-change: transform, opacity;

        transition: transform .2s ease, box-shadow .2s ease;
    }
    @keyframes aparecer {
        from {
            opacity: 0;
            transform: scale(0.92);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes aparecer {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
    }
    .card-tamano:hover {               /* BOTONES TAMAÑO HOVER */
        transform: translateY(-4px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.15);
        transform: scale(1.03);
    }
/* ========= TEXTOS CARD TAMAÑOS - PROGRESO ==================== */
            .card-tamano .tamano {             /* BOTONES TEXTO BOTONES TAMAÑO 00X00 */
            font-size: 1.0rem;
            font-weight: bold;
            margin-bottom: 8px;
            color: rgb(255, 255, 255);
        }

    .card-tamano .tamano {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 6px;
        color: white;
    }
    .card-tamano .progreso {           /* BOTONES TEXTO DE PROGRESO */
        font-size: 0.85rem;
        color: #e0e0e0;
    }
/* ========= TEXTOS CARD TAMAÑOS - PROGRESO ==================== */
    /* ============================
    ANIMACIÓN
    ============================ */

    /* ============================
    MÓVIL
    ============================ */
    @media (max-width: 480px) {

        #lista-tamanos {
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 12px;
            padding: 16px;
        }

        .card-tamano {
            padding: 10px;
            max-width: 130px;
        }

        .card-tamano .tamano {
            font-size: 1.15rem;
        }

        .card-tamano .progreso {
            font-size: 0.8rem;
        }
    }
    
/* ====== CONTENEDOR TAMAÑOS Y CARD ================== */
/* === PANTALLA 2 TAMAÑOS ============================ */

/* === PANTALLA 3 JUEGO ============================== */
    #pantalla-juego {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
/* ====== CONTAINER BOTONES TABLERO    DIF-TAM-Nº===== */
    #CasaBotonesTablero {
        display: flex;
        gap: 4px;
        margin-bottom: 0px;
        margin-top: 10px;
        position: relative;
        flex-wrap: nowrap;                              /* Evita saltos de línea en PC */
        align-items: center;  /* ← Alinea verticalmente botones + número */
        }  
    @media (max-width: 600px) {#CasaBotonesTablero {
        bottom: 0px;  /* opcional, queda más bonito */
        }
        }
    .botonesTablero         {
        width: 50px;                                    /* Ancho estándar PC */
        height: 30px;                                   /* Alto estándar PC */
        font-size: 12px;
        font-weight: bold;
        border: 3px solid var(--border-boton);   
        border-radius: 6px;
        cursor: pointer;
        background-color:rgb(70, 0,0);
        background-size: auto 90%;                     /* Icono adaptado a la altura del botón */
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 0px;
        margin-top: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;                                   /* Evita que el padding altere la altura */
        box-sizing: border-box;
        }
    @media (max-width: 600px){.botonesTablero {   /* MOVIL */
        width: 40px;/*ancho */
        height: 25px; /*alto*/
        font-size: 12px;
        background-size: auto 90%;} /* Iconos más pequeños */
        }    

    .botonesTablero:hover   {
        background-color: rgb(100, 9, 4);     /* Ligero cambio de fondo */
        transform: scale(1.05);}
    .botonesTablero:active  {
        background-color: rgb(107, 21, 31);     /* Ligero cambio de fondo */
        transform: scale(0.85);}
    .botonesTablero.activo {
        background-color:   rgba(117, 255, 4, 0.979); /* color encendido */
        box-shadow: 0 0 10px rgb(100, 0, 0); /*resplandor boton*/
        transform: scale(1.05); /*tamaño mientras activo*/
        border-radius: 5%;
        border-color: #00aa00;
        }
    #btnMenuInicio  { background-image: url("icons/pngMenuInicio.png");
        background-size: auto 100%; }     /* Icono adaptado a la altura del botón */
    #btnRecargar  { background-image: url("icons/pngRecargar.png");
        background-size: auto 100%; }     /* Icono adaptado a la altura del botón */
    /* BTN SIGUIENTE OCULTO EN PC Y MOVIL */
        #btnSiguiente {
            background-image: url("icons/pngSiguiente.png");
            display: none;
            background-size: auto 100%;    }
        @media (max-width: 768px) {#btnSiguiente {
                display: none;
            }    }
    /* BTN SIGUIENTE OCULTO EN PC Y MOVIL */
    #btnConfig    { background-image: url("icons/botonConfiguracion.png");
        background-size: auto 100%; }     /* Icono adaptado a la altura del botón */
    /* BTN BORRAR OCULTO */
        #btnBorrar    { background-image: url("icons/goma.png");
            background-size: auto 50%;      /* Icono adaptado a la altura del botón */
            background-repeat: no-repeat;
            background-position: center;
            font-size: 0; }                  /* Oculta cualquier texto interno */
        #btnBorrar {                                                         /* CON ESTO DESAPARECE EL BOTON*/
            position: absolute;
            left: -9999px;
            top: -9999px;
            opacity: 0;
            pointer-events: none;
            }
    /* BTN BORRAR OCULTO */
    #numTablero {
        position: absolute;
        top: 50%;
        transform: translateY(-50%); /* ← centra verticalmente */
        right: 8px;
        font-weight: bold;
        color: rgb(250, 249, 249);
        pointer-events: none;
        font-size: 30px;
     }

    @media (max-width: 600px) {#numTablero {
        font-size: 15px;  /* opcional, queda más bonito */
        bottom: -3px;  /* opcional, queda más bonito */
        }
        }
/* ====== CONTAINER BOTONES TABLERO    DIF-TAM-Nº ==== */
/* ========= DENTRO DE BOTON CONFIG ================== */
    #DentroBtnConfig {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        margin: 10px auto;
        margin-top: 10px;
        width: 100%;
        max-width: 420px;
        background: rgba(255,255,255,0.85);
        border-radius: 8px;
        box-shadow: 0 2px 2px rgba(242, 241, 241, 0.859);
        }
    #DentroBtnConfig input, #DentroBtnConfig select, #DentroBtnConfig button {
        margin-top: 10px;
        font-size: 0.9rem;
        padding: 6px 8px;
        border-radius: 6px;
        }
    .oculto {
        display: none !important;
        }
    .grupo-config {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px;
        color: rgb(255, 255, 255);
        }
    .grupo-config label {
        font-size: 0.9rem;
        margin-bottom: 5px;
        color: #fbf8f8;
        }
    .grupo-config input[type="color"],
    .grupo-config input[type="range"],
    .grupo-config select {
        padding: 5px;
        border-radius: 4px;
        border: 1px solid rgb(255, 255, 255);
        cursor: pointer;
        }
    @media (max-width: 600px) {
    #DentroBtnConfig {
            gap: 3px;
            width: 100%;
            max-width: 400px;
            padding: 2px;
            font-size: 0.85rem;
            border-radius: 8px;
            margin: 10px 0px auto;
        }
    .tabs {
            gap: 4px;
        }
    .tabs button {
            padding: 5px;
            font-size: 0.75rem;
            border-radius: 5px;
        }
    .tab-content {
            padding: 6px;
            border-radius: 4px;
        }
    #DentroBtnConfig label {
            font-size: 0.8rem;
        }
    #DentroBtnConfig input[type="range"],
    #DentroBtnConfig input[type="color"] {
            font-size: 0.8rem;
            margin-bottom: 4px;
            height: 25px;
        }
    .CasaGuardarVolver {
        display: flex;
        justify-content: space-between; /* uno a cada lado */
        align-items: center;
        right: 5%;
        left: 5%;
        width: 90%;
        margin-top: 10px;margin-left: 5%;margin-right: 25%;
        }
    #guardar-config {
            padding: 6px 10px;
            font-size: 0.8rem;
            border-radius: 6px;
            left: 10px;
        }
    #volver-config {
            padding: 6px 10px;
            font-size: 0.8rem;
            border-radius: 6px;
            right: 10px;
        }
    }
    #DentroBtnConfig input[type="color"] {
        height: 28px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        }
    #DentroBtnConfig input[type="range"] {
        width: 100%;
        height: 8px;
        background: #ddd;
        border-radius: 5px;
        cursor: pointer;
    }
    #DentroBtnConfig input[type="range"]::-webkit-slider-runnable-track {
        height: 8px;
        background: #b30000;
        border-radius: 5px;
    }
    #DentroBtnConfig input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        background: #ffd700;
        border-radius: 50%;
        border: 2px solid #333;
        margin-top: -5px;
        cursor: pointer;
    }
/* ========= DENTRO DE BOTON CONFIG ================== */
/* ========= ALINEACIÓN   CONFIG DE FILAS CONFIG ===== */
    .fila-config {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 3px 0; /* más compacto */
        gap: 10px;

        }
        /* Label ocupa el 70% */
    .fila-config label {
        flex: 0 0 50%;
        margin: 0;
        }

        /* Input ocupa 30% menos margen derecho */
    .fila-config input,
    .fila-config select {
        flex: 0 0 calc(50% - 10px);
        margin-top: 0 !important;
        margin-right: 10px;

        height: 35px;      /* iguala color, number, select */
        padding: 2px 6px;  /* más fino */
        }
/* ========= ALINEACIÓN   CONFIG DE FILAS CONFIG ===== */
/* ========= MODAL COLOR CONFIG ====================== */
    .color-modal {
        position: fixed;
        inset: 0;
        background: #2e2e2e;
        color: white;
        display: flex;
        flex-direction: column;
        padding: 15px;
        z-index: 9999;
        }
    .color-modal.oculto {
        display: none;
        }
    .color-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        margin-bottom: 10px;
        }
    #color-modal-cerrar {
        background: none;
        border: none;
        color: white;
        font-size: 22px;
        cursor: pointer;
        }
    .color-preview {
        height: 60px;
        border: 1px solid #555;
        margin-bottom: 15px;
        }
    .color-picker-area {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        }
    #color-square {
        width: 220px;
        height: 220px;
        border: 1px solid #555;
        }
    #color-hue {
        width: 30px;
        height: 220px;
        border: 1px solid #555;
        }
    .rgb-controls {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        }
    .rgb-controls label {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        }
    .btn-aceptar {
        background: #4caf50;
        border: none;
        padding: 12px;
        font-size: 18px;
        color: white;
        border-radius: 6px;
        cursor: pointer;
        }
/* ========= MODAL COLOR CONFIG ====================== */
/*====== TABLERO DINAMICO =============================== */
       
    #tablero {
        width: 100%;          /* Ocupa todo el ancho disponible */
        height: 75vh;         /* Altura relativa a la ventana */
        max-width: 100%;
        max-height: 85%;
        display: grid;        /* El JS define las filas/columnas */
        gap: 0;
        background: var(--color-celdaVacia);
        margin: 0 auto;
        border: 2px solid #ccc;
        box-sizing: border-box; 
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        position: relative;
        overflow: visible;
    }
    #tablero .celda { width: 100%;  height: 100%;}
    @media (max-width: 600px) {
    #tablero {max-width: 95vw;       
        }}  
    
/*====== TABLERO DINAMICO =============================== */
/* CONTENEDOR TABLERO MENSAJE ANTIGUO TUTORIAL ======= */
    #numego-contenedor {                             /* ESTO ES EL CONTENEDOR DEL TABLERO DE JUEGO      */
        display: flex;
        flex-direction: column;
        height: 100vh;      /* Ocupa toda la pantalla */
        overflow: visible;   /* Evita desbordes */
        }
    .mensajenooo-instruccion {
        position: absolute;
        top: 0px;               /* arriba del tablero */
        transform: translateX(0%);
        background: rgba(255, 236, 27, 0.9);
        color: rgb(69, 32, 13);
        padding: 10px 15px;
        line-height: 1; /* mínimo interlineado */
        border-radius: 25px;
        font-size: 18px;
        font-weight: bold;
        max-width: 90%; /* más ancho pero con margen */
        width: 80vw;
        max-width: 80vw;
        z-index: 9999;          /* por encima del grid */
        pointer-events: none;   /* no bloquea clics */
        left: 5%;              /* centrado */
        animation: flotarTutorial 15s ease-in-out infinite;}
        @keyframes flotarTutorial {
        0%   { transform: translate(0px, 20px); }
        90% { transform: translate(0px, 100px); }
        100% { transform: translate(0px,20px); }
        }
        /* Ajustes para móvil */
        @media (max-width: 600px) {.mensaje-instruccion {
        font-size: 16px;
        padding: 6px 10px;
        top: 40px;
        left: 10%;
        transform: translateX(-50%); /* centrado real */
        max-width: 90%; /* más ancho pero con margen */
        text-align: center; /* evita saltos raros */
        line-height: 1.2; /* mejora la lectura */
        width: 80vw;
        max-width: 80vw;
        }
        }
/* CONTENEDOR TABLERO MENSAJE ANTIGUO TUTORIAL ======= */
/* === PANTALLA 3 JUEGO ============================== */

/* Pantalla ACTIVA */
    .pantalla.activa {                 /*PANTALLAS YA NO TAPAN EL TABLERO */
        display: block !important;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;


        position: static !important;
        height: auto !important;
    }
/* Pantalla ACTIVA */

/*=== ANIMACION FINAL ==================================================*/
    .anuncio-final {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 🔥 CONFIGURABLES */
        font-size: 50px;          /* tamaño del texto */
        font-weight: 900;         /* grosor */
        color: #3b1205;           /* color del texto */
        background:none; /* fondo */
        text-shadow: 0 0 12px rgba(227, 104, 28, 0.9); /* brillo dorado */
        /* 🔥 EFECTO */
        pointer-events: none;
        opacity: 1;
        text-shadow:
        0 0 15px rgb(255, 255, 0), 
        0 0 15px rgb(255, 255, 0),   
        0 0 15px rgb(255, 255, 0),   
        0 0 15px rgb(255, 255, 0),   
    
        0 0 20px rgb(121, 55, 8),    
        0 0 20px rgb(100, 35, 35),
        0 0 20px rgb(100, 35, 35),
        0 0 20px rgb(100, 35, 35),
        0 0 20px rgb(100, 35, 35),
        0 0 20px rgb(100, 35, 35),
        0 0 30px rgb(100, 35, 35),
        0 0 30px rgb(100, 35, 35),
        0 0 30px rgb(100, 35, 35),
        0 0 30px rgb(100, 35, 35),
        0 0 30px rgb(100, 35, 35),  
        0 0 40px rgb(100, 35, 35);

        animation: flotarSuave 3s ease-in-out infinite;
        }
    @keyframes flotarSuave {
        0%   { transform: translateY(0px); }
        50%  { transform: translateY(-66px); }
        100% { transform: translateY(0px); }
        }
/*=== ANIMACION FINAL ==================================================*/

/* Evita scroll global y bloquea gestos del navegador */
    html, body {
        touch-action: none;                /* ❗ Evita que el navegador capture gestos táctiles */
        height: 100%;
        overflow: hidden;      /* sigue sin permitir scroll real */
        touch-action: pan-y;   /* permite gesto vertical sin mover nada */
    }
/* Evita scroll global y bloquea gestos del navegador */