/* Variables de color para facilitar la gestión de estilos */
        :root {
            --color-background-soft: #f0f4f8;
            --color-white: #ffffff;
            --color-gray-800: #1f2937;
            --color-gray-700: #374151;
            --color-gray-100: #f3f4f6;
            --color-gray-200: #e5e7eb;
            --color-gray-400: #9ca3af;
            --color-blue-600: #2563eb;
            --color-blue-100: #dbeafe;
            --color-blue-800: #1e40af;
            --color-blue-500: #3b82f6;
            --color-blue-600-hover: #2563eb;
            --color-purple-vibrant: #4f46e5;
            --color-purple-darker: #4338ca;
            --color-red-error: #ef4444;
            --color-green-success: #10b981;
            --color-green-darker: #059669;
            --color-success-bg: #ecfdf5;
            --color-success-text: #065f46;
            --color-error-bg: #fee2e2;
            --color-error-text: #991b1b;
        }
.logo-game{width:400px!important;height:auto;}
.game{margin-bottom:64px; background-color: #e5f9ff;border-radius: 15px;padding:16px 0px;}
.game label{width:auto!important;} 
.game select{width:auto;}       
.hidden { display:none; }
select{appearance: menulist-button!important;}
/* El modal NO debe existir visualmente ni para el hit-testing */
#gameOverModal.is-hidden,
#gameOverModal[aria-hidden="true"], #rulesModal.is-hidden,
#rulesModal[aria-hidden="true"],#restartButton.is-hidden{
  display: none !important;
}

/* Blindaje adicional por si queda montado: */
#gameOverModal.is-hidden .adsbygoogle,
#gameOverModal.is-hidden iframe {
  pointer-events: none !important;
}


.initial-screen { text-align:center; padding:2rem; }

.loading.hidden { display:none; }

       
        .game-container {
            background-color: #e5f9ff;
            border-radius: 15px;
            width: 100%;
            max-width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            position: relative; /* Necesario para posicionar la animación de puntuación */
        }
        .game-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 15px;
        }

        /* Información del juego: Puntuación, Vidas, Temporizador */
        .game-info-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }
        .game-info-item {
            display: flex;
            align-items: center;
            color: #4a4a4a;
            font-size: 1.1rem;
            font-weight: 600;
            position: relative; /* Para el score animation container */
        }
        .game-info-item span:first-child { margin-left: 0px;}
        .game-info-item span {
            margin-left: 8px;
            color: #007bff;
        }
        .heart-icon {
            color: #dc3545;
            font-size: 1.5rem;
            margin-left: 5px;
        }
        .timer-text {
            font-size: 1.5rem;
            font-weight: bold;
            color: #28a745;
        }

        /* Pista (Descripción de la palabra) */
        .hint-box {
            background-color: #c3f0fe;
            padding: 15px;
            margin-bottom: 20px;
        }
         .hint-box p{
            margin:0px;
        }
        .hint-text {
            color: #0056b3;
            font-size: 1rem;
            font-style: italic;
        }

        #formed-word-container.word-area{background-color:#311866;border-radius:0px;border:0px solid red!important;}
        /* Área de la palabra formada y letras desordenadas */
        .word-area {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            min-height: 60px;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 1px solid #dee2e6;
        }
        .word-area.hidden {
            display: none;
        }
        #scrambled-letters-container{background-color:transparent!important;border:0px solid red!important;}
        #scrambled-letters-container.word-area{gap:10px!important;}

        .letter-button {
            background: linear-gradient(-180deg,rgba(255, 215, 95, 1) 0%, rgba(215, 146, 12, 1) 100%);
            color: #232323;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 1.3rem;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
            border: none;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-width: 45px;
            height: 45px;
            touch-action: manipulation;
        }
        .letter-button:hover {
            background-color: #5a35a1;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }
        .letter-button:active {
            transform: translateY(0);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        .formed-letter {
            background: linear-gradient(-180deg,rgba(255, 215, 95, 1) 0%, rgba(215, 146, 12, 1) 100%);
            color: #232323;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 1.3rem;
            font-weight: bold;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-width: 45px;
            height: 45px;
            margin: 5px;
            cursor: pointer;
        }
        .formed-letter.placeholder {
            background-color: transparent!important;
            background:none!important;
            border: 2px dashed #ced4da;
            color: #ced4da;
        }

        /* Botones de control */
        .main-button {
            background-color: #28a745; /* Verde */
            color: white;
            font-weight: bold;
            padding: 12px 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s, background-color 0.2s;
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
        }
        .main-button:hover {
            background-color: #218838;
            transform: scale(1.02);
        }

        .rules-button {
            color: #007bff;
            transition: transform 0.2s, background-color 0.2s;
            margin-top: 15px;
            border: none;
            cursor: pointer;
            font-size: 1rem;background-color:transparent;
        }
        .rules-button:hover {
            color: #003e80;
            transform: scale(1.02);
        }
        .rules-button.hidden {
            display: none;
        }

        /* Estilos para botones deshabilitados */
        .main-button:disabled,
        .rules-button:disabled,
        .letter-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Contenedores de mensajes */
        .message-box {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            text-align: center;
            font-size: 1.1rem;
            color: #333;
        }
        .message-box.success {
            border-color: #28a745;
            background-color: #d4edda;
            color: #155724;
        }
        .message-box.error {
            border-color: #dc3545;
            background-color: #f8d7da;
            color: #721c24;
        }

        /* Modales (Game Over y Reglas) */
        #rulesModal .modal-content{align-items: self-start;}
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .modal.show {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background-color: white!important;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            transform: scale(0.9);
            transition: transform 0.3s ease;
            max-width: 700px;
            width: 90%;
            position: relative;
        }
        .modal.show .modal-content {
            transform: scale(1);
        }
        .modal-button {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
            margin-top: 20px;
            border: none;
        }
        .modal-button:hover {
            background-color: #218838;
            transform: translateY(-2px);
        }
        .close-button {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5rem;
            color: #6c757d;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
        }
        .close-button:hover {
            color: #dc3545;
        }

        /* Estilos específicos del modal de reglas */
        .rules-modal-title {
            font-size: 1.8rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
        }
        .rules-text {
            color: #495057;
            margin-bottom: 0.75rem!important;
            font-size:16px!important;
            text-align: left;
            line-height: 1.5;
        }
        .rules-text p{
            color: #495057;
            margin-bottom: 0.75rem!important;
            font-size:16px!important;
            text-align: left;
            line-height: 1.5;
        }
        .rules-list {
            list-style-type: disc;
            list-style-position: inside;
            color: #495057;
            margin-bottom: 0.75rem;
            text-align: left;
            padding-left: 20px;
            font-size:16px;
        }
        .rules-list strong {
            font-weight: bold;
        }

        /* Animación de puntuación */
        .score-animation-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .score-animation {
            position: absolute;
            color: #28a745; /* Verde */
            font-size: 1.8rem;
            font-weight: bold;
            opacity: 0;
            animation: scorePop 1.5s forwards;
            pointer-events: none; /* Para que no interfiera con los clics */
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            display: inline-block;   /* evita que se trate como un bloque que pueda colapsar de ancho */
            white-space: nowrap;     /* no permitir saltos de línea dentro del texto */
            line-height: 1;          /* altura compacta para que no “salte” verticalmente */
            writing-mode: horizontal-tb;
        }

        @keyframes scorePop {
            0% {
                transform: translateY(0) scale(0.8);
                opacity: 0;
            }
            20% {
                transform: translateY(-20px) scale(1.1);
                opacity: 1;
            }
            80% {
                transform: translateY(-50px) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-70px) scale(0.7);
                opacity: 0;
            }
        }

        /* Animación de pérdida de corazón (añadida para consistencia) */
        .heart-loss-animation-container {
            position: absolute;
            top: 0;
            left: 50%; /* Ajustado para estar más centrado en el contenedor de vidas */
            transform: translateX(-50%); /* Centrar */
        }
        .lost-heart-animation {
            position: absolute;
            color: #dc3545; /* Rojo */
            font-size: 2.2rem;
            opacity: 0;
            animation: heartLost 1s forwards;
            pointer-events: none;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes heartLost {
            0% {
                transform: translate(-50%, 0) scale(0.8);
                opacity: 0;
            }
            30% {
                transform: translate(-50%, -30px) scale(1.2);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -60px) scale(0.7);
                opacity: 0;
            }
        }