/* ==========================================================================
   HOJA DE ESTILOS: GUESS POKÉMON
   Basada en personaje.css de OP, adaptada a paleta Pokémon
   ========================================================================== */

/* =========================================
   0. .game-container — reset dentro de la pantalla Pokédex
   Estilos del marco: assets/css/pokedex-frame.css
   ========================================= */
.game-container {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    border: none !important;
    border-image: none !important;
    padding: 16px 12px;
    background: transparent;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .game-container { padding: 0; }
}

/* =========================================
   1. CONTENEDOR PRINCIPAL
   ========================================= */
.container-character {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 5;
}

/* =========================================
   2. HINT BOXES (PISTAS CON CANDADO)
   ========================================= */
.hint-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0 8px;
}

.hint-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 14px;
    border: 2px solid var(--poke-navy, #003a70);
    background: var(--poke-blue, #3d7dca);
    min-width: 0;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.hint-box.disabled {
    opacity: 0.7;
    cursor: default;
}

.hint-box.enabled {
    border-color: var(--poke-yellow, #ffcb05);
    cursor: pointer;
}

.hint-box.enabled:hover {
    background: var(--poke-navy, #003a70);
}

.hint-box.active {
    background: var(--poke-navy, #003a70);
    border-color: var(--poke-yellow, #ffcb05);
    color: #fff;
}

.hint-icon {
    color: var(--poke-yellow, #ffcb05);
}

.hint-sprite-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-top: 2px;
    /* Es una pista, no la respuesta: se muestra como silueta blanca (mismo
       recurso que el juego de Silueta, brightness(0), invertida a blanco
       para que se vea bien sobre el fondo azul), nunca a color. */
    filter: brightness(0) invert(1);
}

.hint-value {
    color: #fff;
    font-size: 0.85rem;
}

.hint-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    color: var(--poke-yellow, #ffcb05);
    display: block;
}

.hint-lock {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 0.78rem;
}

.hint-lock svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Desde 1440px las 3 columnas (1fr) se reparten todo el ancho del
   contenedor aunque el contenido (icono + título + candado) no lo
   necesite -- cada caja acababa mucho más ancha de lo que su contenido
   pedía, con un hueco vacío enorme alrededor. Se limita el ancho total y
   se centra, en vez de dejar que crezca con la pantalla. */
@media (min-width: 1440px) {
    .hint-container {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }
}

.revealed-hints-container {
    text-align: center;
    min-height: 8px;
    margin-bottom: 8px;
}

.revealed-hint-line {
    display: inline-block;
    margin: 4px 8px;
    padding: 5px 14px;
    background: rgba(61, 125, 202, 0.1);
    border: 1px solid rgba(61, 125, 202, 0.35);
    border-radius: 20px;
    font-size: 0.85rem;
    color: #c0d8ff;
}

/* =========================================
   3. TABLA DE RESULTADOS (SCROLL HORIZONTAL)
   ========================================= */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 25px;
    scrollbar-width: thin;
    scrollbar-color: var(--poke-yellow, #ffcb05) var(--poke-navy, #003a70);
}

.table-scroll-wrapper::-webkit-scrollbar { height: 10px; }
.table-scroll-wrapper::-webkit-scrollbar-track { background: var(--poke-navy, #003a70); border-radius: 0 0 10px 10px; }
.table-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--poke-yellow, #ffcb05); border-radius: 8px; }


/* Tabla */
#results {
    width: 100%;
    /* Antes 1300px: en un wrapper --md/default (1400px máx) el área jugable
       real ronda los ~1290px una vez restados los laterales/bezel/padding
       de la Pokédex, así que la tabla forzaba scroll horizontal incluso en
       escritorio ancho sin anuncio lateral. 1120px cabe sin scroll a partir
       de ~1280px de ventana (portátiles habituales); pantallas más
       estrechas siguen usando el scroll de .table-scroll-wrapper como
       fallback, esperable en una tabla de 13 columnas. */
    min-width: 1120px;
    border-collapse: separate;
    border-spacing: 6px 10px;
    table-layout: fixed;
    margin-top: -10px;
}

/* Cabeceras */
#results th {
    background: linear-gradient(to bottom, var(--poke-navy, #003a70), #001d4a);
    color: var(--poke-yellow, #ffcb05);
    font-family: 'Press Start 2P', cursive;
    font-size: 0.45rem;
    padding: 12px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(61, 125, 202, 0.5);
    border-bottom: 3px solid var(--poke-blue, #3d7dca);
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Celdas */
#results td {
    padding: 10px 8px;
    vertical-align: middle;
    text-align: center;
    color: #e0e0e0;
    font-size: 0.8rem;
    font-weight: 500;
    border: 2px solid rgba(61, 125, 202, 0.2);
    border-radius: 10px;
    background: rgba(30, 42, 74, 0.9);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
    height: 100px !important;
    max-height: 100px;
    white-space: normal;
    line-height: 1.2;
}

/* Columna 1: Nombre */
#results th:nth-child(1),
#results td:nth-child(1) { width: 115px; text-align: left; }
#results td:nth-child(1) { padding-left: 10px; }

/* Columna 2: Foto */
#results th:nth-child(2),
#results td:nth-child(2) { width: 68px; }
#results td:nth-child(2) { padding: 0; overflow: hidden; }

/* ── Estados de resultado ── */
#results td.correct {
    background: color-mix(in srgb, var(--state-correct) 90%, transparent) !important;
    color: var(--state-correct-on) !important;
    border-color: var(--state-correct-dark);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

#results td.partial {
    background: color-mix(in srgb, var(--state-partial) 90%, transparent) !important;
    color: var(--state-partial-on) !important;
    border-color: var(--state-partial-dark);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

#results td.incorrect {
    background: color-mix(in srgb, var(--state-incorrect) 90%, transparent) !important;
    color: var(--state-incorrect-on) !important;
    border-color: var(--state-incorrect-dark);
}

#results td.unknown {
    background: color-mix(in srgb, var(--state-unknown) 90%, transparent) !important;
    color: var(--state-unknown-on) !important;
}

/* Refuerzo visual de estado: el mismo distintivo discreto de WhatPiece.
   Queda en la esquina para no competir con las flechas de mayor/menor. */
#results td[data-status]::before {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 20;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1px solid rgba(240, 211, 138, 0.42);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(23, 38, 67, 0.92), rgba(5, 15, 35, 0.86));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 1px 2px rgba(0, 0, 0, 0.32);
    color: rgba(255, 248, 225, 0.94);
    font: 700 9px/1 Arial, sans-serif;
    text-shadow: none;
    pointer-events: none;
}

#results td[data-status="correct"]::before { content: "\2713\FE0E"; }
#results td[data-status="partial"]::before { content: "\2248"; }
#results td[data-status="incorrect"]::before {
    content: "\00D7\FE0E";
    font-size: 11px;
}
#results td[data-status="unknown"]::before { content: "?"; }

/* Foto en tabla */
.character-photo {
    width: 100%;
    height: 100%;
    min-height: 80px;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    border: none;
    display: block;
    margin: 0;
}

/* Nombre del Pokémon (col 1) — columna a ancho fijo (130px); nombres
   traducidos largos (alemán/italiano) se truncan con ellipsis en vez de
   desbordar verticalmente contra el height:100px!important de #results td.
   Mismo patrón que .ac-name/.ranking-name en common.css. */
.character-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.42rem;
    line-height: 1.4;
    color: #e0e0e0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Flechas de pista (hint-up / hint-down) ── */
td.hint-up,
td.hint-down {
    position: relative;
}

td.hint-up::after,
td.hint-down::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6.5rem;
    font-weight: 900;
    opacity: 1;
    pointer-events: none;
    font-family: sans-serif;
    line-height: 1;
    z-index: 2;
}

td.hint-up::after   { content: "\2B06\FE0E"; color: rgba(3, 12, 27, 0.64); }
td.hint-down::after { content: "\2B07\FE0E"; color: rgba(3, 12, 27, 0.64); }

/* El texto debe quedar sobre la flecha */
.cell-content {
    position: relative;
    z-index: 10;
    display: inline-block;
    width: 100%;
}

/* =========================================
   4. LEYENDA INLINE (BARRA SOBRE LA TABLA)
   ========================================= */
.game-legend-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding: 10px 24px;
    background: linear-gradient(to bottom, #003A70, #001d4a);
    border: 2px solid rgba(61, 125, 202, 0.35);
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e8d48b;
    font-size: 0.78rem;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.game-legend-container .color-box {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--state-symbol-color, #fff);
    font: 900 12px/1 Arial, sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

.game-legend-container .color-box.correct::before { content: "\2713\FE0E"; }
.game-legend-container .color-box.partial::before { content: "\2248"; }
.game-legend-container .color-box.incorrect::before { content: "\00D7\FE0E"; font-size: 15px; }
.game-legend-container .color-box.unknown::before { content: "?"; }

.color-box.correct   { background: var(--state-correct); box-shadow: 0 0 5px var(--state-correct); --state-symbol-color: var(--state-correct-on); }
.color-box.partial   { background: var(--state-partial); box-shadow: 0 0 5px var(--state-partial); --state-symbol-color: var(--state-partial-on); }
.color-box.incorrect { background: var(--state-incorrect); box-shadow: 0 0 5px var(--state-incorrect); --state-symbol-color: var(--state-incorrect-on); }
.color-box.unknown   { background: var(--state-unknown); --state-symbol-color: var(--state-unknown-on); }

/* Flechas en la leyenda */
.game-legend-container .arrow-icon,
.color-legend .arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid;
}

.game-legend-container .arrow-icon {
    width: 22px;
    height: 22px;
    font-size: 1rem;
}

.color-legend .arrow-icon {
    width: 30px;
    height: 30px;
    font-size: 1.3rem;
    border-width: 2px;
    margin-right: 4px;
}

.arrow-icon.up   { background: rgba(33, 150, 243, 0.7); border-color: #2196F3; color: #fff; }
.arrow-icon.down { background: rgba(156, 39, 176, 0.7); border-color: #9C27B0; color: #fff; }

.arrow-icon.up::before   { content: "\2B06\FE0E"; }
.arrow-icon.down::before { content: "\2B07\FE0E"; }

/* =========================================
   5. YESTERDAY BANNER
   ========================================= */
.yesterday-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    margin: 20px auto;
    background: rgba(14, 22, 45, 0.7);
    border: 1px solid rgba(61, 125, 202, 0.25);
    border-radius: 12px;
    max-width: 380px;
    min-height: 52px;
}

.yesterday-img-container {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.yesterday-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.yesterday-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yesterday-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.38rem;
    color: rgba(255, 203, 5, 0.7);
    text-transform: uppercase;
}

.yesterday-name {
    font-size: 0.9rem;
    color: #f0e8d0;
    font-weight: 600;
    text-transform: capitalize;
}

/* =========================================
   6. WIN / LOSS MODALS (game-result-modal)
   ========================================= */
/* Sin override propio: usa el sistema compartido .game-result-content /
   .game-result-icon / .character-portrait / .game-result-text de
   common.css tal cual, igual que Silueta/Bingo/Grid/Wordle. Antes esta
   página tenía su propia versión (gap:20px, retrato 90x90 object-fit:
   contain) que se veía distinta y peor que el resto -- unificado el 26
   agosto. */

/* Countdown: sin override propio -- usa .countdown-container/.countdown-text/
   .countdown-label/.countdown-timer de common.css tal cual, igual que
   Higher-or-Lower/Silueta/Bingo/Grid/Wordle. Antes tenía su propia versión
   transparente sin tarjeta (se veía distinta al resto) -- unificado. */

/* Share button: sin override propio -- usa .btn-share-result de common.css
   tal cual, igual que Silueta/Wordle/Bingo/Grid/Higher-or-Lower. Antes tenía
   su propia píldora contorneada azul (se veía distinta al resto) --
   unificado. */

/* =========================================
   7. BOTONES DE DIFICULTAD (EASIER / HARDER)
   ========================================= */
.levels-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 28px 0;
    flex-wrap: wrap;
}

/* .levels-container no vive dentro de ninguna tarjeta -- se pinta directo
   sobre el fondo fotográfico de pokedex-frame.css, así que necesita un
   fondo casi opaco para leerse (mismo motivo que .btn-share-result arriba). */
.btn-level {
    background: rgba(10, 20, 35, 0.75);
    color: var(--poke-yellow, #ffcb05);
    border: 2px solid rgba(255, 203, 5, 0.5);
    padding: 10px 24px;
    border-radius: 28px;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    min-height: 40px;
    transition: all 0.2s;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.btn-level:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(20, 30, 50, 0.9);
    border-color: var(--poke-yellow, #ffcb05);
    box-shadow: 0 0 12px rgba(255, 203, 5, 0.3);
}

.btn-level:disabled,
.btn-level.disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* =========================================
   8. ANIMACIONES — cardFlipIn (rotateY, OP)
   ========================================= */
@keyframes cardFlipIn {
    0%   { opacity: 0; transform: perspective(1000px) rotateY(90deg)  scale(0.95); }
    60%  { opacity: 1; transform: perspective(1000px) rotateY(-5deg)  scale(1.02); }
    100% { opacity: 1; transform: perspective(1000px) rotateY(0)      scale(1);    }
}

tr.fade-in td {
    animation-name: cardFlipIn;
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backface-visibility: hidden;
    will-change: transform, opacity;
    transform-origin: center center;
}

/* Retardo escalonado — desktop (0.3s) */
tr.fade-in td:nth-child(1)  { animation-delay: 0.3s;  }
tr.fade-in td:nth-child(2)  { animation-delay: 0.6s;  }
tr.fade-in td:nth-child(3)  { animation-delay: 0.9s;  }
tr.fade-in td:nth-child(4)  { animation-delay: 1.2s;  }
tr.fade-in td:nth-child(5)  { animation-delay: 1.5s;  }
tr.fade-in td:nth-child(6)  { animation-delay: 1.8s;  }
tr.fade-in td:nth-child(7)  { animation-delay: 2.1s;  }
tr.fade-in td:nth-child(8)  { animation-delay: 2.4s;  }
tr.fade-in td:nth-child(9)  { animation-delay: 2.7s;  }
tr.fade-in td:nth-child(10) { animation-delay: 3.0s;  }
tr.fade-in td:nth-child(11) { animation-delay: 3.3s;  }
tr.fade-in td:nth-child(12) { animation-delay: 3.6s;  }
tr.fade-in td:nth-child(13) { animation-delay: 3.9s;  }

/* Retardo escalonado — tablet/móvil (0.5s) */
@media (max-width: 1024px) {
    tr.fade-in td:nth-child(1)  { animation-delay: 0.5s;  }
    tr.fade-in td:nth-child(2)  { animation-delay: 1.0s;  }
    tr.fade-in td:nth-child(3)  { animation-delay: 1.5s;  }
    tr.fade-in td:nth-child(4)  { animation-delay: 2.0s;  }
    tr.fade-in td:nth-child(5)  { animation-delay: 2.5s;  }
    tr.fade-in td:nth-child(6)  { animation-delay: 3.0s;  }
    tr.fade-in td:nth-child(7)  { animation-delay: 3.5s;  }
    tr.fade-in td:nth-child(8)  { animation-delay: 4.0s;  }
    tr.fade-in td:nth-child(9)  { animation-delay: 4.5s;  }
    tr.fade-in td:nth-child(10) { animation-delay: 5.0s;  }
    tr.fade-in td:nth-child(11) { animation-delay: 5.5s;  }
    tr.fade-in td:nth-child(12) { animation-delay: 6.0s;  }
    tr.fade-in td:nth-child(13) { animation-delay: 6.5s;  }
}

/* =========================================
   9. TUTORIAL MODAL
   ========================================= */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-overlay.hidden { display: none; }

.tutorial-content {
    background: #ffffff;
    border: 2px solid var(--poke-yellow, #ffcb05);
    border-radius: 16px;
    padding: 30px 28px;
    max-width: 560px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    color: var(--poke-navy);
}

/* La franja roja + hueco superior vienen heredados de common.css
   (#tutorialModal .tutorial-content::before, mismo id que usan
   bingo/grid/higher-lower/silueta) -- solo se ajusta el radio al borde
   16px propio de esta tarjeta. */
#tutorialModal .tutorial-content::before {
    border-radius: 14px 14px 0 0;
}

/* Posición/tamaño propios (más compacto que el botón × genérico de
   common.css); el color ya viene de #tutorialModal .btn-close-tutorial. */
.btn-close-tutorial {
    position: absolute;
    top: 8px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 1;
}

/* Tamaño/color/margin ya vienen de common.css (.tutorial-content h2) --
   aquí solo queda el hueco para que el título no choque con el botón
   de cerrar (×), posicionado arriba a la derecha. */
.tutorial-content h2 {
    padding-right: 24px;
}

.tutorial-body {
    margin: 0 0 16px;
}

.tutorial-text-column { width: 100%; }

.tutorial-desc {
    font-size: 0.9rem;
    color: var(--poke-navy);
    line-height: 1.6;
    margin: 0 0 16px;
}

/* Mini-leyenda dentro del tutorial */
.tutorial-legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.t-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--poke-navy);
}

.t-legend-item .color-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 58, 112, 0.2);
    flex-shrink: 0;
}

.t-legend-item .arrow-icon {
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
    border-width: 1px;
    flex-shrink: 0;
}

.tutorial-choose-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.65rem;
    color: var(--poke-navy);
    text-shadow: none;
    margin: 12px 0 10px;
    text-align: center;
}

.tutorial-options {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-tutorial-level {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    padding: 12px 22px;
    border-radius: 20px;
    background: var(--poke-navy);
    border: 2px solid var(--poke-yellow, #ffcb05);
    color: var(--poke-yellow, #ffcb05);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-tutorial-level:hover,
.btn-tutorial-level:focus {
    background: var(--poke-yellow, #ffcb05);
    color: var(--poke-navy, #003a70);
    outline: none;
}

/* Blur fondo mientras el tutorial está activo */
.game-container.blur-background,
.game-container.blurred,
.subtitle-container.blur-background,
.subtitle-container.blurred {
    filter: blur(4px);
    pointer-events: none;
}

/* =========================================
   10. INFO GAME (SECCIÓN INFERIOR)
   ========================================= */
/* Sin override propio -- esta página tenía la caja "cómo jugar" que se
   consideró la correcta (borde fino, texto pixel pequeño, grid de 2
   columnas), así que se promovió tal cual a .info-game/.color-legend/
   .note-game de common.css, y son Silueta/Wordle/Bingo/Grid/Higher-or-Lower
   los que ahora la heredan de ahí -- antes era al revés (usaban la caja
   estilo OP con borde dorado grueso, que era la que desentonaba). Las
   clases de color de los estados (.color-box.correct/.partial/.incorrect,
   .arrow-icon.up/.down) siguen definidas más abajo, son independientes de
   la caja y también las usa la leyenda compacta del pie de página. */

/* =========================================
   11. RESPONSIVE — MÓVIL
   ========================================= */
@media (max-width: 600px) {
    .container-character { padding: 0 8px; }

    .hint-container { gap: 8px; }
    .hint-box {
        padding: 14px 8px;
        gap: 7px;
        border-radius: 12px;
    }
    .hint-icon { width: 18px; height: 18px; }
    .hint-sprite-img { width: 36px; height: 36px; }
    .hint-title { font-size: 0.44rem; line-height: 1.4; }
    .hint-lock {
        font-size: 0.62rem;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hint-lock svg { width: 13px; height: 13px; }

    .game-legend-container {
        width: 100%;
        border-radius: 12px;
        padding: 12px;
        gap: 10px;
    }
    .legend-item { font-size: 0.7rem; width: 45%; }

    .levels-container { gap: 10px; }
    .btn-level { padding: 8px 14px; font-size: 0.45rem; }

    td.hint-up::after,
    td.hint-down::after { font-size: 5.75rem; }

    .tutorial-content { padding: 20px 16px; width: 96%; }
    .tutorial-legend-grid { grid-template-columns: 1fr; }

    .color-legend { grid-template-columns: 1fr; }

    .info-game { padding: 20px; }

    .yesterday-banner { max-width: 100%; }
}

/* =========================================
   12. TABLA COMPACTA CON ADS LATERALES
   ========================================= */
@media (min-width: 1440px) {
    body:has([data-playwire-reserved]) #results {
        min-width: 960px;
        border-spacing: 4px 8px;
    }
    body:has([data-playwire-reserved]) #results th {
        font-size: 0.38rem;
        padding: 8px 5px;
    }
    body:has([data-playwire-reserved]) #results td {
        padding: 6px 4px;
        height: 85px !important;
        max-height: 85px;
        font-size: 0.72rem;
        border-radius: 7px;
    }
    body:has([data-playwire-reserved]) #results th:nth-child(2),
    body:has([data-playwire-reserved]) #results td:nth-child(2) { width: 65px; }
    body:has([data-playwire-reserved]) #results td:nth-child(2) { padding: 0; }
    body:has([data-playwire-reserved]) td.hint-up::after,
    body:has([data-playwire-reserved]) td.hint-down::after { font-size: 5.25rem; }
}

/* =========================================
   13. TUTORIAL GUESS POKEMON — SECUENCIA OP
   ========================================= */
#tutorialModal {
    padding: 12px;
    background: rgba(3, 12, 27, 0.84);
    backdrop-filter: blur(7px);
}

/* Caja exterior, botón de cerrar+svg y hover -- receta compartida en
   common.css (sección "TUTORIAL MODAL — RECETA COMPARTIDA"). Aquí solo
   queda lo que varía: dimensiones y animación de entrada propias. */
#tutorialModal .pokemon-tutorial-content {
    width: min(780px, 100%);
    max-width: 780px;
    max-height: calc(100dvh - 24px);
    padding: 23px 25px 21px;
    overflow-x: hidden;
    overflow-y: auto;
    animation: pokemonTutEnter 0.34s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

#tutorialModal .pokemon-tutorial-content::before,
#tutorialModal .pokemon-tutorial-content::after {
    display: none;
}

.pokemon-tutorial-heading {
    padding: 0 42px 13px;
    text-align: center;
}

.pokemon-tutorial-kicker {
    display: inline-block;
    margin-bottom: 7px;
    padding: 5px 9px;
    border: 2px solid var(--poke-navy, #12355b);
    border-radius: 999px;
    background: var(--poke-yellow, #ffcb05);
    color: var(--poke-navy, #12355b);
    font: 0.52rem/1 'Press Start 2P', cursive;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#tutorialModal .pokemon-tutorial-heading h2 {
    margin: 0 0 7px;
    color: var(--poke-navy, #12355b);
    font: 1.12rem/1.25 'Press Start 2P', cursive;
    text-shadow: 2px 2px 0 var(--poke-yellow, #ffcb05);
}

#tutorialModal .pokemon-tutorial-heading h2::before,
#tutorialModal .pokemon-tutorial-heading h2::after {
    display: none;
}

.pokemon-tutorial-heading p {
    max-width: 610px;
    margin: 0 auto;
    color: #284969;
    font: 500 0.84rem/1.35 Roboto, Arial, sans-serif;
}

.pokemon-tutorial-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pokemon-step-card {
    position: relative;
    min-width: 0;
    padding: 10px 10px 11px;
    display: grid;
    grid-template-rows: 70px min-content 1fr;
    gap: 7px;
    border: 2px solid var(--poke-navy, #12355b);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 3px 3px 0 rgba(18, 53, 91, 0.23);
    text-align: center;
}

.pokemon-step-card::before {
    content: attr(data-step);
    position: absolute;
    z-index: 2;
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 2px solid var(--poke-yellow, #ffcb05);
    border-radius: 50%;
    background: var(--poke-navy, #12355b);
    color: #fff;
    font: 0.42rem/1 'Press Start 2P', cursive;
    box-shadow: 1px 1px 0 #111;
}

/* .pokemon-step-demo: caja gris compartida, ahora en common.css (pieza C). */

.pokemon-step-card h3 {
    margin: 0;
    color: var(--poke-navy, #12355b);
    font: 0.58rem/1.35 'Press Start 2P', cursive;
    text-shadow: 1px 1px 0 var(--poke-yellow, #ffcb05);
}

.pokemon-step-card p {
    margin: 0;
    color: #334e68;
    font: 500 0.72rem/1.28 Roboto, Arial, sans-serif;
}

.pokemon-tut-search {
    width: min(215px, 78%);
    height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: stretch;
    overflow: hidden;
    border: 2px solid var(--poke-yellow, #ffcb05);
    border-radius: 6px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--poke-navy, #12355b);
}

.pokemon-tut-search span {
    align-self: center;
    width: 0;
    overflow: hidden;
    color: var(--poke-navy, #12355b);
    white-space: nowrap;
    font: 0.58rem/1 'Press Start 2P', cursive;
    animation: pokemonTutType 4.3s steps(7, end) infinite;
}

.pokemon-tut-search b {
    display: grid;
    place-items: center;
    border-left: 2px solid var(--poke-navy, #12355b);
    background: var(--poke-red, #e3350d);
    color: #fff;
    font: 0.48rem/1 'Press Start 2P', cursive;
    animation: pokemonTutOk 4.3s ease-in-out infinite;
}

.pokemon-tut-compare {
    width: min(235px, 86%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.pokemon-tut-compare i {
    --cell-bg: #f5f5f5;
    --cell-border: #8da2b5;
    --cell-color: var(--poke-navy, #12355b);
    min-width: 0;
    min-height: 43px;
    padding: 4px 2px;
    display: grid;
    place-items: center;
    gap: 2px;
    border: 2px solid #8da2b5;
    border-radius: 5px;
    background: #f5f5f5;
    color: var(--poke-navy, #12355b);
    font-style: normal;
    box-shadow: 1px 1px 0 rgba(18, 53, 91, 0.28);
    animation: pokemonTutCell 4.2s ease-in-out infinite;
}

.pokemon-tut-compare i:nth-child(2) { animation-delay: 0.35s; }
.pokemon-tut-compare i:nth-child(3) { animation-delay: 0.7s; }
.pokemon-tut-compare .is-match { --cell-bg: var(--state-correct); --cell-border: var(--state-correct-dark); --cell-color: var(--state-correct-on); }
.pokemon-tut-compare .is-partial { --cell-bg: var(--state-partial); --cell-border: var(--state-partial-dark); --cell-color: var(--state-partial-on); }
.pokemon-tut-compare .is-higher { --cell-bg: var(--state-incorrect); --cell-border: var(--state-incorrect-dark); --cell-color: var(--state-incorrect-on); }

.pokemon-tut-compare small {
    overflow: hidden;
    max-width: 100%;
    color: inherit;
    font: 600 0.48rem/1 Roboto, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pokemon-tut-compare b {
    color: inherit;
    font: 0.72rem/1 'Press Start 2P', cursive;
}

.pokemon-tut-compare .is-higher b { color: #78c7ff; }

.pokemon-tut-hint-unlock {
    position: relative;
    width: 126px;
    height: 59px;
    display: grid;
    place-items: center;
}

.pokemon-tut-hint-icons {
    display: grid;
    grid-template-columns: repeat(3, 31px);
    gap: 5px;
}

.pokemon-tut-hint-icons b {
    height: 31px;
    display: grid;
    place-items: center;
    border: 2px solid var(--poke-navy, #12355b);
    border-radius: 5px;
    background: #aeb8c2;
    color: var(--poke-navy, #12355b);
    font: 0.42rem/1 'Press Start 2P', cursive;
    animation: pokemonTutHint 4.8s ease-in-out infinite;
}

.pokemon-tut-hint-icons b:nth-child(2) { animation-delay: 0.25s; }
.pokemon-tut-hint-icons b:nth-child(3) { animation-delay: 0.5s; }

.pokemon-tut-lock {
    position: absolute;
    top: 4px;
    right: -3px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 2px solid var(--poke-navy, #12355b);
    border-radius: 50%;
    background: var(--poke-red, #e3350d);
    color: #fff;
    animation: pokemonTutUnlock 4.8s ease-in-out infinite;
}

.pokemon-tut-lock svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.pokemon-tut-hint-unlock > i {
    position: absolute;
    bottom: 3px;
    left: 15px;
    width: 96px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.pokemon-tut-hint-unlock u {
    height: 4px;
    overflow: hidden;
    border-radius: 3px;
    background: #9eabb7;
    text-decoration: none;
    animation: pokemonTutHintProgress 4.8s ease-in-out infinite;
}

.pokemon-tut-hint-unlock u:nth-child(2) { animation-delay: 0.25s; }
.pokemon-tut-hint-unlock u:nth-child(3) { animation-delay: 0.5s; }

.pokemon-tut-answer {
    position: relative;
    width: min(205px, 74%);
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--poke-yellow, #ffcb05);
    border-radius: 6px;
    background: var(--poke-navy, #12355b);
    box-shadow: 2px 2px 0 #111;
}

.pokemon-tut-answer > span,
.pokemon-tut-answer > b {
    grid-area: 1 / 1;
    margin-bottom: 10px;
    font: 0.58rem/1 'Press Start 2P', cursive;
}

.pokemon-tut-answer > span {
    color: #a8b6c4;
    animation: pokemonTutQuestion 4.2s ease-in-out infinite;
}

.pokemon-tut-answer > b {
    color: var(--poke-yellow, #ffcb05);
    opacity: 0;
    animation: pokemonTutAnswer 4.2s ease-in-out infinite;
}

.pokemon-tut-answer > i {
    position: absolute;
    right: 9px;
    bottom: 7px;
    left: 9px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.pokemon-tut-answer u {
    height: 5px;
    border-radius: 3px;
    background: #70849a;
    text-decoration: none;
    animation: pokemonTutResultCell 4.2s ease-in-out infinite;
}

.pokemon-tut-answer u:nth-child(2) { animation-delay: 0.12s; }
.pokemon-tut-answer u:nth-child(3) { animation-delay: 0.24s; }
.pokemon-tut-answer u:nth-child(4) { animation-delay: 0.36s; }

#tutorialModal .tutorial-choose-text {
    margin: 13px 0 8px;
    color: var(--poke-navy, #12355b);
    font: 0.67rem/1.35 'Press Start 2P', cursive;
    text-align: center;
    text-shadow: 1px 1px 0 var(--poke-yellow, #ffcb05);
}

#tutorialModal .tutorial-options {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#tutorialModal .btn-tutorial-level {
    min-width: 0;
    padding: 10px 5px;
    border: 3px solid var(--poke-navy, #12355b);
    border-radius: 7px;
    background: var(--poke-red, #e3350d);
    color: #fff;
    box-shadow: 2px 2px 0 var(--poke-yellow, #ffcb05);
    font: 0.55rem/1.2 'Press Start 2P', cursive;
}

#tutorialModal .btn-tutorial-level:hover,
#tutorialModal .btn-tutorial-level:focus-visible {
    transform: translate(-1px, -1px);
    background: var(--poke-navy, #12355b);
    color: var(--poke-yellow, #ffcb05);
    box-shadow: 4px 4px 0 var(--poke-yellow, #ffcb05);
}

@keyframes pokemonTutEnter {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

@keyframes pokemonTutType {
    0%, 10% { width: 0; }
    48%, 79% { width: 7.4em; }
    91%, 100% { width: 0; }
}

@keyframes pokemonTutOk {
    0%, 51%, 76%, 100% { filter: brightness(1); transform: none; }
    57%, 65% { filter: brightness(1.2); transform: scale(0.88); }
}

@keyframes pokemonTutCell {
    0%, 19%, 76%, 100% { border-color: #8da2b5; background: #f5f5f5; color: var(--poke-navy, #12355b); transform: scale(0.92); opacity: 0.68; }
    31%, 68% { border-color: var(--cell-border); background: var(--cell-bg); color: var(--cell-color); transform: scale(1); opacity: 1; }
}

@keyframes pokemonTutHint {
    0%, 16%, 86%, 100% { background: #aeb8c2; transform: scale(0.92); }
    29%, 77% { background: var(--poke-yellow, #ffcb05); transform: scale(1); }
}

@keyframes pokemonTutUnlock {
    0%, 24% { opacity: 1; transform: rotate(0) scale(1); }
    37%, 80% { opacity: 0; transform: rotate(22deg) scale(0.55); }
    92%, 100% { opacity: 1; transform: none; }
}

@keyframes pokemonTutHintProgress {
    0%, 18%, 88%, 100% { background: #9eabb7; transform: scaleX(0.2); }
    34%, 79% { background: var(--poke-yellow, #ffcb05); transform: scaleX(1); }
}

@keyframes pokemonTutQuestion {
    0%, 28%, 84%, 100% { opacity: 1; transform: scale(1); }
    41%, 74% { opacity: 0; transform: scale(0.72); }
}

@keyframes pokemonTutAnswer {
    0%, 30%, 86%, 100% { opacity: 0; transform: translateY(6px); }
    43%, 76% { opacity: 1; transform: none; }
}

@keyframes pokemonTutResultCell {
    0%, 34%, 86%, 100% { background: #70849a; transform: scaleX(0.25); }
    48%, 78% { background: var(--state-correct); transform: scaleX(1); }
}

@media (max-width: 600px) {
    #tutorialModal { padding: 7px; }

    #tutorialModal .pokemon-tutorial-content {
        width: 100%;
        max-height: calc(100dvh - 14px);
        padding: 16px 11px 14px;
        border-width: 3px;
        box-shadow: 0 0 0 3px var(--poke-yellow, #ffcb05), 0 0 0 5px #151515, 0 14px 35px rgba(0, 0, 0, 0.42);
    }

    #tutorialModal .btn-close-tutorial {
        top: 5px;
        right: 5px;
        width: 34px;
        height: 34px;
        border-width: 2px;
    }

    .pokemon-tutorial-heading { padding: 0 32px 9px; }
    .pokemon-tutorial-kicker { margin-bottom: 5px; padding: 4px 7px; font-size: 0.4rem; }
    #tutorialModal .pokemon-tutorial-heading h2 { margin-bottom: 5px; font-size: 0.76rem; }
    .pokemon-tutorial-heading p { font-size: 0.68rem; line-height: 1.25; }
    .pokemon-tutorial-steps { gap: 7px; }

    .pokemon-step-card {
        padding: 7px 5px 8px;
        grid-template-rows: 56px min-content 1fr;
        gap: 5px;
        border-radius: 7px;
        box-shadow: 2px 2px 0 rgba(18, 53, 91, 0.23);
    }

    .pokemon-step-card::before { top: 3px; left: 3px; width: 20px; height: 20px; font-size: 0.34rem; }
    .pokemon-step-demo { height: 56px; }
    .pokemon-step-card h3 { font-size: 0.46rem; line-height: 1.3; }
    .pokemon-step-card p { font-size: 0.61rem; line-height: 1.18; }
    .pokemon-tut-search { transform: scale(0.78); width: 112%; }
    .pokemon-tut-compare { transform: scale(0.76); width: 122%; }
    .pokemon-tut-hint-unlock { transform: scale(0.78); }
    .pokemon-tut-answer { transform: scale(0.78); width: 104%; }
    #tutorialModal .tutorial-choose-text { margin: 9px 0 6px; font-size: 0.54rem; }
    #tutorialModal .tutorial-options { gap: 6px; }
    #tutorialModal .btn-tutorial-level { padding: 8px 3px; border-width: 2px; font-size: 0.44rem; }
}

@media (max-height: 680px) and (max-width: 600px) {
    #tutorialModal .pokemon-tutorial-content { padding: 11px 9px 12px; }
    .pokemon-tutorial-heading { padding-bottom: 8px; }
    .pokemon-tutorial-kicker { display: none; }
    #tutorialModal .pokemon-tutorial-heading h2 { font-size: 0.7rem; }
    .pokemon-tutorial-heading p { display: none; }
    .pokemon-step-card { padding: 7px 4px 8px; grid-template-rows: 57px min-content 1fr; gap: 4px; }
    .pokemon-step-demo { height: 57px; }
    .pokemon-step-card h3 { font-size: 0.42rem; }
    .pokemon-step-card p { font-size: 0.57rem; line-height: 1.14; }
    .pokemon-tut-search { transform: scale(0.75); }
    .pokemon-tut-compare { transform: scale(0.73); }
    .pokemon-tut-hint-unlock { transform: scale(0.74); }
    .pokemon-tut-answer { transform: scale(0.75); }
    #tutorialModal .tutorial-choose-text { margin: 7px 0 5px; font-size: 0.49rem; }
    #tutorialModal .btn-tutorial-level { padding: 7px 2px; font-size: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    #tutorialModal .pokemon-tutorial-content,
    #tutorialModal .pokemon-tut-search span,
    #tutorialModal .pokemon-tut-search b,
    #tutorialModal .pokemon-tut-compare i,
    #tutorialModal .pokemon-tut-hint-icons b,
    #tutorialModal .pokemon-tut-lock,
    #tutorialModal .pokemon-tut-hint-unlock u,
    #tutorialModal .pokemon-tut-answer > span,
    #tutorialModal .pokemon-tut-answer > b,
    #tutorialModal .pokemon-tut-answer u {
        animation: none !important;
        transition: none !important;
    }

    #tutorialModal .pokemon-tut-search span { width: 7.4em; }
    #tutorialModal .pokemon-tut-compare i { border-color: var(--cell-border); background: var(--cell-bg); color: var(--cell-color); opacity: 1; transform: none; }
    #tutorialModal .pokemon-tut-hint-icons b { background: var(--poke-yellow, #ffcb05); transform: none; }
    #tutorialModal .pokemon-tut-lock { opacity: 0; }
    #tutorialModal .pokemon-tut-hint-unlock u { background: var(--poke-yellow, #ffcb05); transform: none; }
    #tutorialModal .pokemon-tut-answer > span { opacity: 0; }
    #tutorialModal .pokemon-tut-answer > b { opacity: 1; transform: none; }
    #tutorialModal .pokemon-tut-answer u { background: var(--state-correct); transform: none; }
}