/* --- FUENTES (self-hosted, ver Fase 2 del port de detalles de WhatPiece) --- */
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/press-start-2p/press-start-2p-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/press-start-2p/press-start-2p-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/roboto/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/roboto/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/roboto-condensed/roboto-condensed-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/roboto-condensed/roboto-condensed-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   RESET GLOBAL + .container + .stretched-link
   (réplica funcional de Bootstrap 5.3 Reboot/grid — ver Fase 3 del port de
   detalles de WhatPiece, mismo patrón que su commit d48fdfb2)

   - box-sizing:border-box global + margin:0 en body + márgenes de h1-h6/p/ul:
     varias reglas propias (modals, cards) ya asumen esto porque hasta ahora
     lo ponía el Reboot de Bootstrap. Sin el margin:0 de body, el margin por
     defecto del user-agent (~8px) separaba el header de los bordes del
     viewport — regresión real detectada tras quitar el CDN.
   - .container: usado SIN override propio en 404.php, friends.php,
     index.php, news.php, noticia.php, profile.php, ranking.php,
     settings.php. Breakpoints y max-width son los valores stock de
     Bootstrap 5.3 (bootstrap@5.3.0, la misma versión que se está quitando).
   - .stretched-link: expande el <a> de las cards del home a todo
     .card-wrap. CRÍTICO — sin esto las cards del home dejan de ser
     cliqueables salvo en el texto del enlace (regresión real ya sufrida en
     WhatPiece al quitar Bootstrap, commit ecad2ec8).
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.container {
    width: 100%;
    box-sizing: border-box;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* --- VARIABLES GLOBALES --- */
:root {
    --poke-red:      #EE1515;
    --poke-yellow:   #FFCB05;
    --poke-blue:     #3D7DCA;
    --poke-navy:     #003A70;
    --poke-dark:     #0a0e1a;
    --gold-treasure: #FFCB05;   /* alias: home.css lo usa en cards */
    --lang-banner-h: 0px;
    /* altura del banner de sugerencia de idioma; JS la actualiza */

    /* --- Escala de espaciado (ver app/STYLE_GUIDE.md) ---
       Calculada sobre el uso real del proyecto, no una escala genérica:
       los dos valores más usados (20px, 40px) caen exactos, delta 0. */
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 20px;
    --space-7: 24px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;
    --space-11: 64px;

    /* --- Radios --- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    /* estándar único de modal */
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* --- Color: consolidación de tonos redundantes usados en UI genérica
       (cajas/modales/divs fuera del tablero de cada juego — el color de
       tablero de cada juego queda fuera, ver app/STYLE_GUIDE.md) --- */
    --poke-navy-light: #0d2a5a;
    /* consolida #0d2a5a / #1a3a6e / #2a4a8a */
    --poke-navy-dark: #001a40;
    /* consolida #001a40 / #001d4a / #002050 */
    --poke-gold-deep: #ffb300;
    /* dorado oscurecido para contraste, uso sistemático ya existente */
    /* Estados de juego: una sola fuente de color para intentos, tableros,
       tutoriales, animaciones y cajas de resultado. */
    --state-correct: #2e7d32;
    --state-correct-dark: #1b5e20;
    --state-correct-surface: #bfe7c8;
    --state-correct-ink: #123a1d;
    --state-correct-on: #ffffff;
    --state-partial: #ef6c00;
    --state-partial-dark: #a94c00;
    --state-partial-surface: #ffd08a;
    --state-partial-ink: #4a2500;
    --state-partial-on: #241500;
    --state-incorrect: #c62828;
    --state-incorrect-dark: #8d1616;
    --state-incorrect-surface: #f2b2b5;
    --state-incorrect-ink: #4a1115;
    --state-incorrect-on: #ffffff;
    --state-unknown: #546070;
    --state-unknown-dark: #343c48;
    --state-unknown-surface: #b8c0ca;
    --state-unknown-ink: #1f2730;
    --state-unknown-on: #ffffff;
    --color-success: var(--state-correct);
    --color-success-dark: var(--state-correct-dark);
    --color-danger: var(--state-incorrect);
    --color-danger-dark: var(--state-incorrect-dark);
}

/* Paleta Okabe-Ito ampliada: separa acierto/fallo sin depender del eje
   rojo-verde. El significado sigue reforzado con glifos, bordes y texto. */
html.accessible-palette {
    --state-correct: #0072b2;
    --state-correct-dark: #00466d;
    --state-correct-surface: #89cff0;
    --state-correct-ink: #062b40;
    --state-correct-on: #ffffff;
    --state-partial: #e69f00;
    --state-partial-dark: #775200;
    --state-partial-surface: #ffd166;
    --state-partial-ink: #332200;
    --state-partial-on: #211500;
    --state-incorrect: #a33a78;
    --state-incorrect-dark: #6f1d4c;
    --state-incorrect-surface: #e7a6c8;
    --state-incorrect-ink: #3b0e27;
    --state-incorrect-on: #ffffff;
    --state-unknown: #4e5663;
    --state-unknown-dark: #2f3540;
    --state-unknown-surface: #aeb6c2;
    --state-unknown-ink: #1b2028;
    --state-unknown-on: #ffffff;
}

/* Toggle compartido: mismo interruptor Poké Ball que Ajustes en todos los juegos. */
.pokemon-switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex: 0 0 52px;
}

.pokemon-switch input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pokemon-switch-track {
    position: absolute;
    inset: 0;
    border: 2px solid var(--state-unknown-dark);
    border-radius: 999px;
    background: var(--state-unknown);
    transition: background .2s ease, border-color .2s ease;
    pointer-events: none;
}

.pokemon-switch-track::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--poke-red) 0 43%, #151515 43% 57%, #fff 57%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}

.pokemon-switch input:checked + .pokemon-switch-track {
    border-color: var(--state-correct-dark);
    background: var(--state-correct);
}

.pokemon-switch input:checked + .pokemon-switch-track::before {
    transform: translateX(24px);
}

.pokemon-switch input:focus-visible + .pokemon-switch-track {
    outline: 3px solid rgba(255, 179, 0, .68);
    outline-offset: 3px;
}

.state-symbol,
.bingo-cell-status,
.grid-cell-status,
.col-result,
.accessibility-preview-item i {
    font-family: Arial, "Helvetica Neue", sans-serif !important;
    font-variant-emoji: text;
}

/* ============================================================
   LIGHT PANEL ("Game Boy cartridge" claro) — reutilizable en las
   páginas de cuenta (profile/friends/ranking/settings). Extraído de
   .card-wrap.dbox-gb (dialog-boxes.css, tarjetas de la home) porque el
   CSS de dbox-gb recolorea vía selectores hijos (.card-title/
   .card-desc/.btn-pokemon-play) específicos de esa tarjeta -- aquí
   solo se reutiliza la caja exterior (fondo + doble marco + esquinas
   pokéball), compuesta igual que en index.php
   (class="card-wrap dbox-gb"): class="X pokebox-light [pokebox-light--corners]"
   ============================================================ */
.pokebox-light {
    position: relative;
    background: #f0f0e8;
    /* Negro puro, calco exacto de .dbox-gb -- un acento de color (rojo)
       a la escala de un marco entero de caja resulta agresivo; el acento
       vivo vive en detalles pequeños (botones), no en el borde. */
    border: 4px solid #1a1a1a;
    /* Esquinas casi cuadradas a propósito: .dbox-gb (el origen de este
       componente) usa border-radius:0 -- un radio grande chocaba
       visualmente con las esquinas pokéball de .pokebox-light--corners
       (círculos, no siguen una curva de esquina redondeada). Las páginas
       que usan .pokebox-light ya NO declaran su propio border-radius. */
    border-radius: 4px;
    box-shadow:
        0 0 0 4px #f0f0e8,
        0 0 0 8px #1a1a1a,
        5px 7px 0 8px rgba(0, 0, 0, 0.28);
    color: #2a2a2a;
}

/* Esquinas pokéball -- mismo SVG/técnica que .dbox-gb, copiado literal
   (dialog-boxes.css:261-275). Usa ::after, NO ::before: .poke-profile-hero
   ya tiene su propio ::before (el rombo de fondo) y un elemento solo
   puede tener un ::before efectivo -- usar ::before aquí lo pisaría en
   silencio. Aditiva y opcional: solo en la caja "hero" de cada página,
   nunca en grids repetidos (con gap < 18px las esquinas de tarjetas
   vecinas se solaparían). */
.pokebox-light--corners::after {
    content: '';
    position: absolute;
    inset: -18px;
    pointer-events: none;
    z-index: 5;
    background-image:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'><circle cx='10' cy='10' r='9' fill='%231a1a1a'/><path d='M1 10 A9 9 0 0 0 19 10 Z' fill='%23f0f0e8'/><circle cx='10' cy='10' r='4' fill='%23f0f0e8'/><circle cx='10' cy='10' r='3' fill='%231a1a1a'/><circle cx='10' cy='10' r='1.5' fill='%23f0f0e8'/><circle cx='10' cy='10' r='9' fill='none' stroke='%231a1a1a' stroke-width='1.5'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'><circle cx='10' cy='10' r='9' fill='%231a1a1a'/><path d='M1 10 A9 9 0 0 0 19 10 Z' fill='%23f0f0e8'/><circle cx='10' cy='10' r='4' fill='%23f0f0e8'/><circle cx='10' cy='10' r='3' fill='%231a1a1a'/><circle cx='10' cy='10' r='1.5' fill='%23f0f0e8'/><circle cx='10' cy='10' r='9' fill='none' stroke='%231a1a1a' stroke-width='1.5'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'><circle cx='10' cy='10' r='9' fill='%231a1a1a'/><path d='M1 10 A9 9 0 0 0 19 10 Z' fill='%23f0f0e8'/><circle cx='10' cy='10' r='4' fill='%23f0f0e8'/><circle cx='10' cy='10' r='3' fill='%231a1a1a'/><circle cx='10' cy='10' r='1.5' fill='%23f0f0e8'/><circle cx='10' cy='10' r='9' fill='none' stroke='%231a1a1a' stroke-width='1.5'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'><circle cx='10' cy='10' r='9' fill='%231a1a1a'/><path d='M1 10 A9 9 0 0 0 19 10 Z' fill='%23f0f0e8'/><circle cx='10' cy='10' r='4' fill='%23f0f0e8'/><circle cx='10' cy='10' r='3' fill='%231a1a1a'/><circle cx='10' cy='10' r='1.5' fill='%23f0f0e8'/><circle cx='10' cy='10' r='9' fill='none' stroke='%231a1a1a' stroke-width='1.5'/></svg>");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}

.avatar-unlock-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;background:rgba(0,20,50,.75);opacity:0;transition:opacity .2s}.avatar-unlock-overlay.is-visible{opacity:1}.avatar-unlock-card{width:min(440px,100%);padding:30px;text-align:center;background:linear-gradient(160deg,#123766,#061d3b);border:3px solid var(--poke-yellow);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.5);transform:scale(.94);transition:transform .2s}.avatar-unlock-overlay.is-visible .avatar-unlock-card{transform:scale(1)}.avatar-unlock-kicker{color:var(--poke-yellow);font-family:'Press Start 2P',sans-serif;font-size:.72rem}.avatar-unlock-image{width:150px;height:150px;margin:22px auto;display:grid;place-items:center;border-radius:50%;background:#fff;border:6px solid var(--poke-blue);box-shadow:0 0 0 5px var(--poke-yellow)}.avatar-unlock-image img{width:120px;height:120px;object-fit:contain}.avatar-unlock-card h2{color:#fff}.avatar-unlock-card p{color:#d8e8ff}.avatar-unlock-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}.avatar-unlock-actions button{padding:12px 22px;border-radius:8px;border:2px solid var(--poke-yellow);font-weight:800;cursor:pointer}.avatar-unlock-actions [data-skip]{background:transparent;color:#fff}.avatar-unlock-actions [data-equip]{background:var(--poke-yellow);color:var(--poke-navy)}

/* --- BASE & TYPOGRAPHY --- */
html {
    overflow-x: hidden;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #e0e0e0;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    background-color: #0a0e1a;
    isolation: isolate;
}

/* Fondo fijo por dispositivo. El pseudo-elemento evita saltos de viewport en
   navegadores móviles cuando aparece o desaparece la barra de navegación. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100lvh;
    z-index: -2;
    pointer-events: none;
    background-color: #0a0e1a;
    background-image: url('../img/backgrounds/pokemon-desktop.webp?v=1');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (min-width: 601px) and (max-width: 1039px) {
    body::before {
        background-image: url('../img/backgrounds/pokemon-tablet.webp?v=1');
    }
}

@media (max-width: 600px) {
    body::before {
        background-image: url('../img/backgrounds/pokemon-mobile.webp?v=1');
    }
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(rgba(212, 212, 223, 0.25), rgba(212, 212, 223, 0.25));
}

/* --- HEADER GLOBAL --- */
.site-header {
    position: relative;
    z-index: 60;
    /* Por encima de los anuncios laterales; el header ya no reserva un hero. */
}

/* --- NAVEGACIÓN --- */
.nav-bar {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 74px;
    padding: 9px clamp(14px, 2.6vw, 38px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(227, 53, 47, .16), transparent 28%, transparent 72%, rgba(227, 53, 47, .16)),
        linear-gradient(180deg, #102f59 0%, #071b35 56%, #041226 100%);
    border-top: 3px solid #e3352f;
    border-bottom: 3px solid #ffcb05;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .14);
    z-index: 20;
}

.nav-bar::before,
.nav-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(23vw, 330px);
    opacity: .24;
    pointer-events: none;
    background: repeating-linear-gradient(125deg, transparent 0 18px, #3d7dca 18px 21px);
}

.nav-bar::before { left: 0; }
.nav-bar::after { right: 0; transform: scaleX(-1); }

.brand-wordmark {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--poke-yellow);
    text-decoration: none;
    line-height: 1;
    z-index: 2;
}

.brand-wordmark__badge {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .62));
}

.brand-wordmark__text {
    color: var(--poke-yellow);
    font: 1.28rem/1 'Press Start 2P', cursive;
    letter-spacing: -.07em;
    -webkit-text-stroke: 1.5px #245a9a;
    paint-order: stroke fill;
    text-shadow: 2px 3px 0 #00142d, 0 0 12px rgba(61, 125, 202, .5);
    white-space: nowrap;
}

.nav-primary {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    padding: 4px;
    background: rgba(2, 15, 34, .88);
    border: 1px solid #315f93;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        inset 0 -2px 0 #010b19,
        0 3px 0 rgba(0, 8, 20, .72);
    z-index: 3;
}

.nav-primary::before,
.nav-primary::after {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    margin: 0 5px;
    background: #6da7df;
    border: 1px solid #00142d;
    border-radius: 50%;
    box-shadow: inset 0 1px rgba(255, 255, 255, .6);
    opacity: .7;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    min-height: 36px;
    padding: 7px 13px 7px 12px;
    color: #d9e8f8;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 11px;
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    transition: color .16s ease, background-color .16s ease;
}

.nav-btn + .nav-btn::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 1px;
    background: linear-gradient(transparent, #3b689a 28%, #3b689a 72%, transparent);
}

.nav-btn.active {
    padding-right: 14px;
    padding-left: 14px;
    color: #082449;
    background: var(--poke-yellow);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        inset 0 -2px 0 #c79600,
        0 0 0 1px #ffe470;
}

.nav-btn.active::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 5px;
    width: 7px;
    height: 7px;
    background:
        radial-gradient(circle, #fff 0 25%, #082449 27% 40%, transparent 42%),
        linear-gradient(#e3352f 0 44%, #082449 45% 57%, #f8fbff 58%);
    border: 1px solid #082449;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.nav-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #8ec5f4;
    transition: color .16s ease;
}

.nav-btn.active .nav-icon {
    color: #0b3768;
}

@media (hover: hover) and (pointer: fine) {
    .nav-btn:hover {
        color: #fff;
        background: #173e6b;
    }

    .nav-btn:hover .nav-icon {
        color: var(--poke-yellow);
    }

    .nav-btn.active:hover {
        color: #061d3d;
        background: #ffdc4a;
    }

    .nav-btn.active:hover .nav-icon {
        color: #0b3768;
    }

    .brand-wordmark:hover { color: var(--poke-yellow); }
}

.nav-btn:focus-visible,
.brand-wordmark:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Móvil: marca arriba, navegación abajo, todo en solo 106px. */
@media (max-width: 600px) {
    .nav-bar {
        min-height: 106px;
        padding: 7px 8px;
    }

    .brand-wordmark {
        top: 7px;
        transform: translateX(-50%);
        gap: 6px;
    }

    .brand-wordmark__badge {
        width: 45px;
        height: 45px;
    }

    .brand-wordmark__text {
        font-size: 1rem;
        -webkit-text-stroke-width: 1.25px;
    }

    .nav-primary {
        position: absolute;
        left: 50%;
        bottom: 4px;
        transform: translateX(-50%);
        padding: 3px;
    }

    .nav-primary::before,
    .nav-primary::after { display: none; }

    /* Home al centro del grupo (Perfil/Amigos antes, Ranking/Ajustes después)
       — el pulgar cae ahí de forma natural en móvil. */
    .nav-primary .nav-btn:nth-child(1) { order: 3; }
    .nav-primary .nav-btn:nth-child(2) { order: 1; }
    .nav-primary .nav-btn:nth-child(3) { order: 2; }
    .nav-primary .nav-btn:nth-child(4) { order: 4; }
    .nav-primary .nav-btn:nth-child(5) { order: 5; }

    .nav-btn {
        width: clamp(48px, 13vw, 56px);
        min-height: 36px;
        padding: 0;
        border-radius: 10px;
    }

    .nav-btn.active {
        padding: 0;
    }

    .nav-text { display: none; }

    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .nav-icon--lg {
        width: 23px;
        height: 23px;
    }
}

/* Desde tablet, el menú comparte la misma fila de 74px con la marca.
   El anuncio lateral mide esta altura real para decidir si cabe. */
@media (min-width: 601px) and (max-width: 1799px) {
    .nav-bar {
        min-height: 74px;
        padding: 9px 16px;
    }

    .brand-wordmark {
        left: auto;
        right: 16px;
        transform: translateY(-50%);
    }

    .nav-primary {
        position: relative;
        width: max-content;
        max-width: none;
    }

    .nav-btn {
        padding-right: clamp(10px, 1.5vw, 13px);
        padding-left: clamp(10px, 1.5vw, 12px);
        white-space: nowrap;
    }

    .nav-btn.active {
        padding-right: clamp(12px, 1.7vw, 14px);
        padding-left: clamp(12px, 1.7vw, 14px);
    }
}

/* Los iconos conservan el acceso a las cinco secciones cuando el texto
   traducido no cabe junto al logo. */
@media (min-width: 601px) and (max-width: 1099px) {
    .nav-btn {
        width: 52px;
        padding: 0;
    }

    .nav-btn.active { padding: 0; }

    .nav-text { display: none; }

    .nav-icon {
        width: 19px;
        height: 19px;
    }

    .nav-icon--lg {
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 900px) and (max-width: 1099px),
       (min-width: 1500px) and (max-width: 1799px) {
    .brand-wordmark {
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 360px) {
    .nav-btn { width: 49px; }
    .brand-wordmark__badge { width: 42px; height: 42px; }
    .brand-wordmark__text { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-btn { transition: none; }
}

/* --- SUBTITLE CONTAINER --- */
.subtitle-container {
    display: flex;
    /* Updated to Flex for Help Button Support */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    /* Added gap */
    text-align: center;
    padding: 21px 14px 14px;
    position: relative;
    z-index: 10;
}

.page-subtitle {
    font-family: 'Press Start 2P', cursive;
    /* clamp en vez de un solo salto en 600px: escala en continuo entre
       móvil y escritorio en vez del salto brusco de antes. */
    font-size: clamp(1.05rem, 4vw, 2.5rem);
    color: var(--gold-treasure);
    text-shadow:
        2px 2px 0 var(--poke-navy),
        -1px -1px 0 var(--poke-navy),
        1px -1px 0 var(--poke-navy),
        -1px 1px 0 var(--poke-navy),
        1px 1px 0 var(--poke-navy);
    margin: 0;
    line-height: 1.2;
    position: relative;
    display: inline-block;
    padding: 0 32px;
}

/* El clamp de arriba ya toca su techo (2.5rem) desde ~1000px de ancho de
   viewport, así que se queda fijo también en el tramo 1040-1439px, justo
   donde el body reserva 185px+185px para el lateral de Playwire (ver
   @media (min-width:1040px) más abajo, "body:has([data-playwire-reserved])")
   y el contenedor real de la página se estrecha de golpe al cruzar 1040.
   Mismo --k que usa home.css para las cards en esta banda (min(1, ancho útil
   / ancho útil máximo de la banda) ) para que el título quede proporcional
   y no se vea sobredimensionado; --k llega a 1 justo al tocar 1439px, igual
   que las cards, así que no hay salto visible al entrar en el tramo ≥1440px
   (donde ya no hace falta escalar: manda el clamp normal de arriba). */
@media (min-width: 1040px) and (max-width: 1439px) {
    .page-subtitle {
        --k: min(1, calc((100vw - 370px) / 1069px));
        font-size: calc(2.5rem * var(--k));
    }
}

.subtitle-wrapper {
    position: relative;
    display: inline-block;
}


/* --- ESTILOS DEL TÍTULO MADERA Y ORO (CORREGIDO) --- */

.main-header-text {
    text-align: center;
    padding: 15px 0 20px 0;
    position: relative;
    z-index: 20;
}

/* 1. Reseteamos el h1 contenedor para que no pinte nada raro */
.app-title-wood {
    margin: 0;
    line-height: 1;
    text-shadow: none !important;
    /* Mata la sombra roja del h1 padre */
}

.app-title-wood a {
    font-family: 'Press Start 2P', cursive;
    font-size: 4rem;
    text-decoration: none !important;
    display: inline-block;
    transition: transform 0.2s ease;
    cursor: pointer;

    /* 2. EL RELLENO (Madera Marrón Oscuro) */
    color: var(--poke-navy) !important;

    /* 3. EL BORDE (Marco Dorado) */
    -webkit-text-stroke: 2px var(--gold-treasure);

    /* 4. PAINT ORDER (Clave para que el borde no tape la letra) */
    paint-order: stroke fill;

    /* 5. ELIMINAR SOMBRA ROJA Y DAR PROFUNDIDAD NEGRA */
    /* El !important aquí borra la sombra roja global */
    text-shadow: none !important;

    /* Usamos filter: drop-shadow para la profundidad 3D externa */
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.8));
}

/* Efecto Hover */
.app-title-wood a:hover {
    transform: scale(1.05) rotate(-1deg);
    color: var(--poke-navy-light) !important;
    -webkit-text-stroke: 2px var(--poke-yellow);
    /* Oro más brillante */
    /* Brillo dorado exterior */
    filter: drop-shadow(0 0 5px rgba(255, 179, 0, 0.6));
}

/* Ajustes Mobile */
@media (max-width: 600px) {
    .app-title-wood a {
        font-size: 3rem;
        -webkit-text-stroke: 1.5px var(--gold-treasure);
    }
}

/* --- NAVBAR DE JUEGOS (páginas de juego, lo pinta inc/ui/game_nav.php) ------
   Sustituye al bloque .game-links/.btn-navegacion que se portó en su día desde
   WhatPiece y que nunca llegó a usarse (dependía de img/card.png, el pergamino
   pirata). Aquí las tarjetas imitan las cajas de diálogo Game Boy del home
   (.card-wrap.dbox-gb de home.css + dialog-boxes.css), en versión reducida.
   Vive en common.css porque head_seo.php la carga en todas las páginas: así
   ninguna página de juego tiene que tocar su <head>.                        */

.game-nav {
    display: grid;
    /* Tantas columnas como quepan; con 4 juegos caben en una fila */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    /* gap tiene que superar los 16px que el doble marco de .game-nav-card
       sobresale a cada lado (8px + 8px, ver box-shadow ahí abajo) para que
       quede un hueco VISIBLE entre tarjetas -- con 14px los marcos se
       solapaban 2px y las tarjetas se veían pegadas. Bug real visto el 26
       agosto. */
    gap: 34px;
    width: 100%;
    max-width: 620px;
    margin: 28px auto 24px;
    padding: 0 10px;
}

.game-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 112px;
    padding: 12px 8px;

    background: #f0f0e8;
    border: 4px solid #1a1a1a;
    /* Doble marco + sombra dura: el mismo recurso que .dbox-gb del home.
       Sobresale 8px por lado, de ahí que el gap no baje de 14px. */
    box-shadow:
        0 0 0 4px #f0f0e8,
        0 0 0 8px #1a1a1a,
        5px 7px 0 8px rgba(0, 0, 0, 0.28);

    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.game-nav-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.game-nav-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.55rem;
    line-height: 1.35;
    color: var(--poke-navy);
    text-align: center;
    /* Medido: el nombre más largo de los 5 juegos en los 10 idiomas es
       "Indovina la Silhouette" (it), que ocupa 2 líneas. El límite se pone en 3
       como válvula de seguridad: si en algún idioma la fuente mide algo más de
       lo previsto, la tarjeta crece en vez de recortar el nombre del juego. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-nav-card:hover {
    transform: translateY(-3px) scale(1.04);
    filter: brightness(1.05);
}

/* WhatPiece no tiene indicador de foco: navegar con teclado es invisible. */
.game-nav-card:focus-visible {
    outline: 3px solid var(--poke-yellow, #FFCB05);
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .game-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        margin: 24px auto 20px;
    }

    .game-nav-card {
        min-height: 96px;
        padding: 10px 6px;
    }

    /* En WhatPiece el icono CRECE en móvil (65px -> 70px); aquí se reduce. */
    .game-nav-icon {
        width: 44px;
        height: 44px;
    }

    .game-nav-label {
        font-size: 0.5rem;
    }

    .game-nav-card:hover {
        transform: none;
        filter: none;
    }
}

/* --- BOTÓN VOLVER --- */

.back-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top explícito (no depender solo del margin-bottom de .game-nav
       colapsando con este): con los 10px/8px de antes apenas quedaba hueco
       entre el nav de juegos y este botón. */
    margin: 24px auto 10px;
    width: 100%;
}

.btn-back {
    /* Estética de madera oscura (similar a tu nav-bar) */
    background: linear-gradient(to bottom, var(--poke-navy), var(--poke-navy-dark));
    color: var(--poke-yellow);
    /* Dorado */
    font-family: 'Press Start 2P', cursive;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 10px 40px;
    border: 2px solid #795548;
    border-radius: 4px;

    /* Sombras para dar profundidad */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 0 #000;

    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.btn-back:hover {
    background: linear-gradient(to bottom, var(--poke-navy-light), var(--poke-navy));
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
    color: #fff;
    border-color: var(--gold-treasure);
    /* Borde dorado al pasar el ratón */
}

/* =========================================
   1. CONTENEDOR GENÉRICO DE JUEGO
   ========================================= */
.game-container {
    background: rgba(255, 248, 225, 0.6);
    border: 3px double var(--poke-navy-light);
    border-radius: 12px;
    padding: 30px;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.3),
        inset 0 0 50px rgba(161, 136, 127, 0.2);
    margin-bottom: 40px;
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 20;
}

/* =========================================
   2. SISTEMA DE PISTAS (HINTS)
   ========================================= */
.hint-container {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.hint-box {
    background: linear-gradient(to bottom, var(--poke-navy-light), var(--poke-navy));
    border: 2px solid #8d6e63;
    border-radius: var(--radius-sm);
    padding: var(--space-5) var(--space-6);
    color: #d7ccc8;
    /* min-width:0 (no un valor fijo) para que el flex item pueda encogerse por
       debajo del ancho intrínseco de su contenido — necesario para que
       .hint-title pueda envolver en vez de forzar overflow con textos
       traducidos largos (alemán/italiano). Ver app/STYLE_GUIDE.md. */
    min-width: 0;
    flex: 1;
    max-width: 450px;
    display: flex;
    flex-direction: row;
    /* Escritorio: En línea */
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.hint-box.disabled {
    opacity: 0.8;
    background: var(--poke-navy-dark);
    border-color: var(--poke-navy-light);
    cursor: not-allowed;
}

.hint-box.enabled {
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.hint-box.active,
.hint-box.revealed {
    background: #ffecb3;
    color: var(--poke-navy);
    border-color: var(--poke-gold-deep);
}

.hint-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.4rem;
    letter-spacing: 1px;
    /* Antes white-space:nowrap forzaba el ancho del texto sobre el de la caja
       (bug de overflow con textos largos). Se permite envolver — truncar con
       ellipsis ocultaría contenido funcional para jugar. */
    overflow-wrap: break-word;
}

.hint-lock {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9rem;
    color: var(--poke-gold-deep);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 179, 0, 0.3);
    white-space: nowrap;
}

/* Pistas Reveladas (Texto) */
.revealed-hints-container {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.revealed-hint-line {
    background: rgba(255, 253, 231, 0.95);
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 6px;
    border-left: 5px solid var(--poke-gold-deep);
    font-weight: 500;
    color: var(--poke-navy);
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.5s ease;
    width: fit-content;
    min-width: 60%;
    max-width: 90%;
    text-align: center;
}

/* =========================================
   3. INPUT Y BÚSQUEDA (SEARCH WRAP)
   ========================================= */
.searchWrap {
    position: relative;
    max-width: 600px;
    margin: 0 auto 30px;
    z-index: 50;
}

.input-group {
    display: flex;
    gap: 10px;
    border-radius: 50px;
}

#guessInput {
    flex: 1;
    padding: 15px 25px;
    font-size: 1.1rem;
    font-family: 'Roboto', sans-serif;
    color: var(--poke-navy);
    background-color: #fffbf0;
    border: 2px solid #8d6e63;
    border-radius: 50px;
    outline: none;
    transition: border-color 0.3s;
}

#guessInput:focus {
    border-color: #8d6e63;
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.2);
}

#guessBtn {
    background: linear-gradient(to bottom, var(--poke-navy), var(--poke-navy-dark));
    color: var(--poke-yellow);
    border: 2px solid #000000;
    padding: 12px 12px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s;
}

#guessBtn:active {
    transform: translateY(2px);
}

#guessBtn svg {
    stroke: var(--poke-yellow);
}

/* =========================================
   4. AUTOCOMPLETE
   ========================================= */
#autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--poke-navy-light);
    border: none;
    border-radius: 8px;
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    text-align: left !important;
}

#autocomplete::-webkit-scrollbar {
    width: 8px;
}

#autocomplete::-webkit-scrollbar-track {
    background: var(--poke-navy);
}

#autocomplete::-webkit-scrollbar-thumb {
    background: #8d6e63;
    border-radius: 4px;
}

.ac-item {
    padding: 10px 15px;
    border-bottom: 1px solid var(--poke-navy-light);
    color: #d7ccc8;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: block;
}

.ac-item:last-child {
    border-bottom: none;
}

.ac-item:hover,
.ac-item.highlighted {
    background: var(--poke-navy-light);
}

/* Flexbox para la fila interna */
.ac-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
}

.ac-avatar {
    display: block;
    width: 50px !important;
    height: 50px !important;
    object-fit: cover;
    object-position: top center;
    border-radius: 4px;
    border: 1px solid #8d6e63;
    flex: 0 0 50px !important;
    margin-right: 15px !important;
}

.ac-texts {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0;
    line-height: 1.2;
}

.ac-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffecb3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.ac-alias {
    font-size: 0.9rem;
    color: #a1887f;
    font-style: italic;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.ac-item:hover .ac-name,
.ac-item.highlighted .ac-name {
    color: var(--poke-yellow);
}

.ac-item:hover .ac-alias,
.ac-item.highlighted .ac-alias {
    color: #d7ccc8;
}

.ac-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.ac-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 202, 40, 0.25);
    border-top-color: var(--poke-yellow);
    border-radius: 50%;
    animation: ac-spin 0.7s linear infinite;
}

@keyframes ac-spin {
    to {
        transform: rotate(360deg);
    }
}

.ac-no-results {
    padding: 14px 20px;
    color: #a1887f;
    font-style: italic;
    text-align: center;
    font-size: 0.95rem;
}

.ac-load-more {
    padding: 10px 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #bcaaa4;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s, color 0.15s;
}

.ac-load-more:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #efebe9;
}

.ac-loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================================
   5. (antes: mensaje de victoria — ver Fase 1 del plan de sistematización)
   ========================================= */
/* Este bloque contenía #winMsg{margin:10px;margin-top:20px;...},
   .win-content, .jolly-roger img, #winMsg h2/p — código muerto: ninguna
   página usa .win-content/.jolly-roger (confirmado por grep), y la regla por
   ID #winMsg ganaba por especificidad sobre `.game-result-modal` (la que de
   verdad se usa, sección "UNIFIED GAME RESULT SCREENS" más abajo) en las 4
   páginas de juego que la cargan — así que el margen real de esas 4 páginas
   era 10px/20px-top en vez del `margin:20px auto` que la clase viva declara.
   Se borra para que .game-result-modal gobierne sin interferencia; el padre
   real (.message-container) ya centra por flex, así que el resultado visual
   es igual o mejor centrado, nunca peor. */

.hidden {
    display: none !important;
}

/* =========================================
   6. MENSAJES DE ERROR
   ========================================= */
.error-message {
    background-color: var(--state-incorrect-surface);
    color: var(--state-incorrect-ink);
    border: 1px solid var(--state-incorrect-dark);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    text-align: center;
    font-weight: bold;
    animation: fadeIn 0.3s ease;
}

.error-message.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* =========================================
   7. ANIMACIONES COMUNES
   ========================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* =========================================
   11. TUTORIAL / MODAL SYSTEMS (COMMON)
   ========================================= */

/* Overlay */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Toggle classes for visibility */
/* Toggle classes for visibility */
.tutorial-overlay.active,
.tutorial-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tutorial-overlay.hidden {
    /* display: none (y no flex) a propósito: mientras el overlay siga en el
       layout, iOS Safari mantiene viva su capa compuesta de backdrop-filter
       y sigue desenfocando la página entera después de cerrarlo, hasta que
       se recarga. Sacarlo del render tree es lo único que garantiza que esa
       capa se destruya. El coste es perder el fundido de 0.3s al cerrar. */
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Base Tutorial Card */
.tutorial-content {
    /* Alias for backward compatibility */
    margin: auto;
    /* Fallback centering */
    background: linear-gradient(135deg, var(--poke-navy), var(--poke-navy-light));
    border: 3px solid var(--poke-gold-deep);
    padding: 35px 25px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 60px rgba(255, 179, 0, 0.15);
    position: relative;
    max-height: 90vh;
    color: #fff8e1;
    font-family: 'Roboto', sans-serif;
    overflow-y: auto;
}

/* Tutoriales de juego (Bingo/Grid/Higher-Lower/Silueta comparten este
   sistema vía #tutorialModal): fondo blanco a petición explícita, en vez del
   navy oscuro de base. Escapado por #tutorialModal (no .tutorial-content a
   secas) para no afectar a #newDayModal, que reutiliza la misma clase pero
   no es un tutorial de juego. */
#tutorialModal .tutorial-content {
    background: #ffffff;
    color: var(--poke-navy);
    /* El glow negro al 0.9 de alpha de la base estaba pensado para resaltar
       sobre el card navy -- sobre blanco se lee como un halo demasiado
       duro; una sombra de tarjeta normal encaja mejor con el tema claro. */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 179, 0, 0.12);
    /* Hueco para la franja roja tipo cabecera de Pokédex (::before de abajo). */
    padding-top: 56px;
}

/* Franja roja tipo cabecera de Pokédex, eco decorativo de
   pokedex-frame.css (.pokedex-header) para que el tutorial se lea como
   parte del mismo lenguaje visual aunque sea un componente aparte. Sin
   luces de estado: ese rincón ya lo ocupa el botón × real en los 6 juegos. */
#tutorialModal .tutorial-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    background: var(--poke-red);
    border-radius: 9px 9px 0 0;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

#tutorialModal .tutorial-content::-webkit-scrollbar-track {
    background: rgba(0, 58, 112, 0.12);
}

#tutorialModal .tutorial-content h2,
#tutorialModal .tutorial-title {
    color: var(--poke-navy);
    text-shadow: none;
}

/* Mini pokeball antes del título -- dos semicírculos + banda central, dibujada
   en CSS puro (mismo truco que .bingo-demo-ball). */
#tutorialModal .tutorial-content h2::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin-right: 9px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--poke-red) 0 47%, #1a1a1a 47% 53%, #fff 53% 100%);
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.15);
}

#tutorialModal .tutorial-content p {
    color: #33475b;
}

#tutorialModal .btn-close-tutorial {
    color: var(--poke-navy);
}

#tutorialModal .btn-close-tutorial:hover {
    color: var(--poke-gold-deep);
}

/* ═══════════════════════════════════════════════════════════════════════
   TUTORIAL MODAL — RECETA COMPARTIDA (v2 gris/navy/amarillo)
   Guess Pokémon, Wordle, Bingo, Grid, Higher-or-Lower y Silueta comparten
   esta misma caja (antes copy-pasteada por separado en cada CSS de juego,
   con pequeñísimas diferencias de un copy-paste a otro ya normalizadas
   aquí). Cada CSS de juego se queda solo con lo que de verdad varía
   (anchos, paddings, tipografía de contenido, animaciones propias).
   ═══════════════════════════════════════════════════════════════════════ */

/* A. Caja exterior del modal -- común a los 6. */
#tutorialModal .pokemon-tutorial-content,
.wordle-tutorial-content,
#tutorialModal .bingo-tutorial-content,
#tutorialModal .grid-tutorial-content,
#tutorialModal .hl-op-tutorial-content,
#tutorialModal .silueta-tutorial-content {
    box-sizing: border-box;
    border: 4px solid var(--poke-navy);
    border-radius: 11px;
    background: rgb(224, 224, 224);
    color: var(--poke-navy);
    box-shadow:
        0 0 0 4px var(--poke-yellow),
        0 0 0 7px #151515,
        0 24px 70px rgba(0, 0, 0, .45);
}

/* B. Botón de cerrar (X) + SVG -- común a los 3 que lo tienen
   (Bingo/Grid/Higher-or-Lower no tienen aspa, solo botón "Jugar"). */
#tutorialModal .pokemon-tutorial-content .btn-close-tutorial,
.wordle-tutorial-content .btn-close-tutorial,
#tutorialModal .silueta-tutorial-content .btn-close-tutorial {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 3px solid var(--poke-navy);
    border-radius: 50%;
    background: #f5f5f5;
    color: var(--poke-red);
    box-shadow: 2px 2px 0 var(--poke-yellow);
    cursor: pointer;
}
#tutorialModal .pokemon-tutorial-content .btn-close-tutorial svg,
.wordle-tutorial-content .btn-close-tutorial svg,
#tutorialModal .silueta-tutorial-content .btn-close-tutorial svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}
#tutorialModal .pokemon-tutorial-content .btn-close-tutorial:hover,
#tutorialModal .pokemon-tutorial-content .btn-close-tutorial:focus-visible,
.wordle-tutorial-content .btn-close-tutorial:hover,
.wordle-tutorial-content .btn-close-tutorial:focus-visible,
#tutorialModal .silueta-tutorial-content .btn-close-tutorial:hover,
#tutorialModal .silueta-tutorial-content .btn-close-tutorial:focus-visible {
    transform: translate(-1px, -1px);
    background: var(--poke-red);
    color: #fff;
    box-shadow: 4px 4px 0 var(--poke-yellow);
}

/* C. Pantalla-demo gris interior -- común a Guess Pokémon/Higher-or-Lower/
   Silueta (Bingo/Grid tienen una demo combinada de otro tamaño y color;
   Wordle usa su propio contenedor de ejemplos con alto por contenido, no
   fijo -- ninguno de los tres encaja en esta pieza). */
#tutorialModal .pokemon-tutorial-content .pokemon-step-demo,
#tutorialModal .hl-op-tutorial-content .hl-op-anim-box,
#tutorialModal .silueta-tutorial-content .silueta-step-demo {
    height: 70px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid #9bb0c3;
    border-radius: 7px;
    background: rgb(224, 224, 224);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .62);
}

/* ── Tutorial interactivo tipo Pokédex ────────────────────────────────────
   El exterior conserva el cartucho claro del sitio y cada paso vive en una
   pantalla navy. Los juegos aportan su mini-demo; todos los pasos permanecen
   visibles a la vez, como en WhatPiece, sin carrusel ni paginación. */
#tutorialModal [data-tutorial-panel] {
    width: min(640px, 96vw);
    max-width: 640px;
    max-height: min(760px, 94dvh);
    overflow-x: hidden;
    border: 4px solid var(--poke-navy);
    border-radius: 4px;
    box-shadow:
        0 0 0 4px #f4f1dc,
        0 0 0 8px #1a1a1a,
        8px 10px 0 8px rgba(0, 0, 0, 0.3);
}

#tutorialModal .tutorial-content[data-tutorial-panel],
#tutorialModal .wordle-tutorial-content[data-tutorial-panel] {
    max-width: 760px;
}

#tutorialModal [data-tutorial-panel]::after {
    content: '';
    position: absolute;
    inset: 34px 0 auto;
    height: 5px;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, var(--poke-yellow) 0 14px, var(--poke-navy) 14px 20px);
}

#tutorialModal [data-tutorial-panel] > h2 {
    margin-bottom: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1rem, 3vw, 1.35rem);
    line-height: 1.45;
}

.it-lead {
    max-width: 540px;
    margin: 0 auto 12px !important;
    color: #33475b !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
}

#tutorialModal .it-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    place-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
}

#tutorialModal .it-step {
    min-width: 0;
    min-height: 238px;
    display: grid;
    grid-template-rows: minmax(125px, 1fr) auto;
    place-items: center;
    align-content: center;
    gap: 9px;
    padding: 10px 8px;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px),
        radial-gradient(circle at 50% 0, #174d87, #061b38 72%);
    border: 3px solid #1a1a1a;
    border-radius: 3px;
    box-shadow: inset 0 0 0 2px #5278a0, 4px 4px 0 rgba(0,0,0,.24);
    color: #fff;
    animation: itStepIn .38s steps(4, end) both;
    transition: transform .16s, border-color .16s;
}

#tutorialModal .it-step:nth-child(2) { animation-delay: .12s; }
#tutorialModal .it-step:nth-child(3) { animation-delay: .24s; }
#tutorialModal .it-step:hover { transform: translateY(-3px); border-color: var(--poke-yellow); }

#tutorialModal .it-step p,
#tutorialModal .it-step h3 {
    max-width: 500px;
    margin: 0;
    color: #f7fbff;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

#tutorialModal .it-step h3 {
    color: var(--poke-yellow);
    font-family: 'Press Start 2P', cursive;
    font-size: 0.68rem;
    line-height: 1.55;
    text-transform: uppercase;
}

.it-visual {
    width: 100%;
    min-height: 112px;
    display: grid;
    place-items: center;
    position: relative;
}

[data-tutorial-actions] { margin-top: 12px; }

/* Mini interfaces animadas y compartidas. */
.it-search-box {
    width: min(330px, 92%);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    overflow: hidden;
    background: #fff;
    border: 3px solid var(--poke-yellow);
    border-radius: 3px;
    color: var(--poke-navy);
    box-shadow: 5px 5px 0 rgba(0,0,0,.45);
    font: 800 .9rem/1 'Roboto', sans-serif;
}

.it-search-box .it-typed { white-space: nowrap; overflow: hidden; }
.it-step .it-search-box .it-typed { animation: itType 1.3s steps(8, end) both; }
.it-search-box kbd { padding: 7px 9px; background: var(--poke-red); border: 2px solid #1a1a1a; color: #fff; font: 900 .72rem/1 monospace; }

.it-step .it-search-box {
    width: 96%;
    height: auto;
    min-height: 82px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 10px 6px;
}

.it-comparison-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.it-comparison-cell { min-width: 44px; padding: 9px 6px; border: 3px solid rgba(255,255,255,.85); border-radius: 3px; color:#fff; font-weight:900; box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.it-comparison-cell.correct { background:var(--state-correct); }
.it-comparison-cell.partial { background:var(--state-partial); }
.it-comparison-cell.incorrect { background:var(--state-incorrect); }
.it-step .it-comparison-cell { animation: itCellReveal .5s steps(4, end) both; }
.it-step .it-comparison-cell:nth-child(2) { animation-delay:.18s; }
.it-step .it-comparison-cell:nth-child(3) { animation-delay:.36s; }

.it-arrow-demo { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; color:#fff; }
.it-arrow-demo span { display:grid; place-items:center; min-width:68px; padding:9px 5px; border:3px solid var(--poke-yellow); background:rgba(0,0,0,.28); font-weight:900; }
.it-arrow-demo b { color:var(--poke-yellow); font-size:1.45rem; }
.it-step .it-arrow-demo b { animation: itArrowBob .8s steps(2,end) infinite; }

.it-clock { display:flex; align-items:center; gap:14px; color:var(--poke-yellow); font-family:'Press Start 2P',cursive; font-size:1.45rem; }
.it-clock::before { content:'◷'; display:grid; place-items:center; width:58px; height:58px; border:4px solid var(--poke-red); border-radius:50%; background:#fff; color:var(--poke-red); }
.it-step .it-clock::before { animation:itClockTick 1s steps(4,end) infinite; }

.it-hint-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.it-hint-chip { padding:12px 14px; border:3px solid var(--poke-yellow); border-radius:3px; background:rgba(0,0,0,.28); color:#fff; font-weight:800; box-shadow:4px 4px 0 rgba(0,0,0,.35); }
.it-step .it-hint-chip { animation:itUnlock .55s steps(4,end) both; }
.it-step .it-hint-chip:nth-child(2) { animation-delay:.35s; }

.it-life { display:flex; align-items:center; gap:8px; color:#fff; font:900 1rem/1 'Roboto',sans-serif; }
.it-life span { font-size:2.3rem; filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.it-step .it-life span { animation:itHeart .75s steps(2,end) infinite; }

#tutorialModal .it-step .tutorial-legend-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 0;
}

#tutorialModal .it-step .t-legend-item {
    color: #fff;
    font-size: .7rem;
}

#tutorialModal .it-step .wordle-tutorial-row { margin: 0; gap: 4px; }
#tutorialModal .it-step .wordle-tutorial-tile { width: 28px; height: 28px; font-size: .7rem; }
#tutorialModal .it-step .wordle-tutorial-tile { animation: itTileFlip .5s steps(4,end) both; }
#tutorialModal .it-step .wordle-tutorial-tile:nth-child(2) { animation-delay:.08s; }
#tutorialModal .it-step .wordle-tutorial-tile:nth-child(3) { animation-delay:.16s; }
#tutorialModal .it-step .wordle-tutorial-tile:nth-child(4) { animation-delay:.24s; }
#tutorialModal .it-step .wordle-tutorial-tile:nth-child(5) { animation-delay:.32s; }

#tutorialModal .it-step .bingo-tutorial-demo {
    width: 100%;
    min-height: 116px;
    flex-basis: auto;
    gap: 5px;
    padding: 8px 4px;
}

#tutorialModal .it-step .bingo-tutorial-cell { width: 68px; min-height: 48px; padding: 5px; font-size: .58rem; }
#tutorialModal .it-step .grid-tutorial-anim-box { width:100%; min-height:112px; padding:5px; }
#tutorialModal .it-step .silueta-tutorial-demo { margin:0; }
#tutorialModal .it-step .silueta-tutorial-shape { animation:itSilhouette 1.3s steps(3,end) infinite; }

@keyframes itStepIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes itType { from { width:0; } to { width:8ch; } }
@keyframes itCellReveal { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:none; } }
@keyframes itArrowBob { 50% { transform:translateY(-7px); } }
@keyframes itClockTick { 50% { transform:rotate(18deg); } }
@keyframes itUnlock { from { opacity:.15; transform:scale(.8); filter:grayscale(1); } to { opacity:1; transform:none; filter:none; } }
@keyframes itHeart { 50% { transform:scale(1.18); } }
@keyframes itTileFlip { from { opacity:0; transform:rotateX(90deg); } to { opacity:1; transform:none; } }
@keyframes itSilhouette { 50% { transform:scale(1.12); color:var(--poke-yellow); } }

@media (max-width: 600px), (max-height: 620px) {
    #tutorialModal [data-tutorial-panel] { padding: 46px 8px 10px; max-height: calc(100dvh - 10px); }
    #tutorialModal [data-tutorial-panel] > h2 { margin-bottom:6px; font-size:.82rem; }
    .it-lead { display:none; }
    #tutorialModal .it-track { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
    #tutorialModal .it-step { min-height:190px; grid-template-rows:minmax(90px,1fr) auto; gap:5px; padding:6px 3px; }
    #tutorialModal .it-step p { font-size:.62rem; line-height:1.22; }
    #tutorialModal .it-step h3 { font-size:.5rem; line-height:1.35; }
    #tutorialModal .it-step .wordle-tutorial-row { gap:2px; }
    #tutorialModal .it-step .wordle-tutorial-tile { width:18px; height:22px; border-width:1px; font-size:.5rem; }
    #tutorialModal .it-step .tutorial-legend-grid { gap:3px; }
    #tutorialModal .it-step .t-legend-item { gap:4px; font-size:.52rem; }
    #tutorialModal .it-step .t-legend-item .color-box { width:13px; height:13px; }
    #tutorialModal .it-step .bingo-tutorial-demo { min-height:90px; }
    #tutorialModal .it-step .bingo-demo-pokemon { width:44px; height:44px; }
    #tutorialModal .it-step .bingo-tutorial-cell { width:50px; min-height:38px; font-size:.48rem; }
    #tutorialModal .it-step .grid-tutorial-anim-box { min-height:90px; }
    .it-search-box kbd { padding:5px; font-size:.52rem; }
    .it-step .it-search-box { min-height:68px; gap:6px; font-size:.62rem; }
    .it-arrow-demo span { min-width:48px; padding:6px 2px; font-size:.62rem; }
    .it-arrow-demo b { font-size:1rem; }
    .it-clock { gap:5px; font-size:.72rem; }
    .it-clock::before { width:36px; height:36px; border-width:2px; }
    .it-hint-chips { gap:4px; }
    .it-hint-chip { padding:7px 4px; border-width:2px; font-size:.52rem; }
    [data-tutorial-actions] { margin-top:7px; }
}

@media (prefers-reduced-motion: reduce) {
    .it-step,
    .it-step *,
    .bingo-demo-arrow,
    .bingo-demo-pokemon,
    .gd-highlight { animation: none !important; transition: none !important; }
}

/* ── Pokédex tutorial v2: composición 2×2 basada en WhatPiece ────────────── */
#tutorialModal [data-tutorial-panel] {
    width: min(760px, 94vw);
    max-width: 760px;
    max-height: min(720px, 94dvh);
    padding: 55px 22px 20px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -20%, rgba(61,125,202,.36), transparent 43%),
        linear-gradient(145deg, #102f61, #06182f 76%);
    border: 3px solid var(--poke-yellow);
    border-radius: 12px;
    box-shadow:
        0 0 0 4px var(--poke-navy),
        0 0 0 7px #111,
        0 22px 70px rgba(0,0,0,.65),
        inset 0 0 35px rgba(0,0,0,.22);
}

#tutorialModal [data-tutorial-panel] > h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: clamp(1rem, 3vw, 1.3rem);
    text-shadow: 3px 3px 0 #001a40;
}

#tutorialModal [data-tutorial-panel] > .it-lead {
    margin: 0 auto 14px !important;
    color: #dbeaff !important;
    font-size: .88rem !important;
}

#tutorialModal [data-tutorial-panel] .it-track {
    counter-reset: tutorial-step;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#tutorialModal [data-tutorial-panel] .it-step {
    counter-increment: tutorial-step;
    position: relative;
    min-width: 0;
    min-height: 165px;
    display: grid;
    grid-template-rows: 72px auto 1fr;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 12px 14px 11px;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px),
        linear-gradient(145deg, rgba(19,58,111,.94), rgba(5,25,53,.98));
    border: 2px solid #477ec0;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 4px 4px 0 rgba(0,0,0,.24);
    animation: pdTutorialCardIn .45s steps(5,end) both;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}

#tutorialModal [data-tutorial-panel] .it-step::before {
    content: '0' counter(tutorial-step);
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 2px solid var(--poke-yellow);
    border-radius: 50%;
    background: #06182f;
    color: var(--poke-yellow);
    font: 700 .48rem/1 'Press Start 2P',cursive;
}

#tutorialModal [data-tutorial-panel] .it-step:nth-child(2) { animation-delay: .1s; }
#tutorialModal [data-tutorial-panel] .it-step:nth-child(3) { animation-delay: .2s; }
#tutorialModal [data-tutorial-panel] .it-step:nth-child(4) { animation-delay: .3s; }

#tutorialModal [data-tutorial-panel] .it-step:hover {
    transform: translateY(-3px);
    border-color: var(--poke-yellow);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 4px 7px 0 rgba(0,0,0,.3);
}

#tutorialModal [data-tutorial-panel] .it-step h3 {
    margin: 0;
    color: var(--poke-yellow);
    font-size: .64rem;
    line-height: 1.45;
}

#tutorialModal [data-tutorial-panel] .it-step p {
    align-self: start;
    margin: 0;
    color: #edf5ff;
    font-size: .78rem;
    line-height: 1.34;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

#tutorialModal [data-tutorial-panel] .it-visual,
#tutorialModal [data-tutorial-panel] .grid-tutorial-anim-box,
#tutorialModal [data-tutorial-panel] .bingo-tutorial-demo {
    width: 100%;
    min-height: 68px;
    height: 68px;
    margin: 0;
    padding: 3px;
}

#tutorialModal [data-tutorial-panel] .it-search-box {
    width: min(225px, 88%);
    height: 38px;
    min-height: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
    padding: 0 5px 0 11px;
}

#tutorialModal [data-tutorial-panel] .it-search-box .it-typed {
    animation: pdTutorialType 2.4s steps(8,end) infinite;
}

#tutorialModal [data-tutorial-panel] .tutorial-legend-grid {
    width: 86%;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px;
    margin: 0;
}

#tutorialModal [data-tutorial-panel] .t-legend-item {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    color: #fff;
    font-size: .57rem;
}

#tutorialModal [data-tutorial-panel] .t-legend-item .color-box {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,.8);
    animation: pdTutorialSignal 1.8s steps(3,end) infinite;
}

#tutorialModal [data-tutorial-panel] .it-hint-chip {
    padding: 8px 10px;
    font-size: .66rem;
    animation: pdTutorialUnlock 2.2s steps(4,end) infinite;
}

#tutorialModal [data-tutorial-panel] .it-hint-chip:nth-child(2) { animation-delay: .25s; }
#tutorialModal [data-tutorial-panel] .it-hint-chip:nth-child(3) { animation-delay: .5s; }

#tutorialModal [data-tutorial-panel] .wordle-tutorial-row { margin: 0; gap: 5px; }
#tutorialModal [data-tutorial-panel] .wordle-tutorial-tile {
    width: 32px;
    height: 32px;
    font-size: .72rem;
    animation: pdTutorialTile 2.4s steps(4,end) infinite;
}
#tutorialModal [data-tutorial-panel] .wordle-tutorial-tile:nth-child(2) { animation-delay:.08s; }
#tutorialModal [data-tutorial-panel] .wordle-tutorial-tile:nth-child(3) { animation-delay:.16s; }
#tutorialModal [data-tutorial-panel] .wordle-tutorial-tile:nth-child(4) { animation-delay:.24s; }
#tutorialModal [data-tutorial-panel] .wordle-tutorial-tile:nth-child(5) { animation-delay:.32s; }

#tutorialModal [data-tutorial-panel] .bingo-demo-pokemon { width:58px; height:58px; }
#tutorialModal [data-tutorial-panel] .bingo-tutorial-cell {
    width: 72px;
    min-height: 54px;
    padding: 5px;
    font-size: 1.1rem;
    animation: pdTutorialSignal 1.8s steps(3,end) infinite;
}

#tutorialModal [data-tutorial-panel] .grid-demo-mini { transform: scale(.72); }
#tutorialModal [data-tutorial-panel] .grid-match-demo { transform: scale(.82); }
#tutorialModal [data-tutorial-panel] .hl-tutorial-demo { min-height:64px; padding:5px 12px; }
#tutorialModal [data-tutorial-panel] .it-arrow-demo span { padding:5px; }
#tutorialModal [data-tutorial-panel] .silueta-tutorial-demo { width:64px; height:64px; }
#tutorialModal [data-tutorial-panel] .silueta-tutorial-shape { animation:pdTutorialSilhouette 1.8s steps(3,end) infinite; }

.it-win-demo {
    width: min(205px, 88%);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    padding: 9px;
    border: 2px solid var(--poke-yellow);
    border-radius: 5px;
    background: #06182f;
    color: #fff;
}

.it-win-demo b {
    grid-column: 1 / -1;
    color: var(--poke-yellow);
    font: 700 .68rem/1.2 'Press Start 2P',cursive;
}

.it-win-demo span {
    height: 6px;
    background: #36a852;
    transform-origin: left;
    animation: pdTutorialBar 2s steps(4,end) infinite;
}

@keyframes pdTutorialCardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes pdTutorialType { 0%,12% { width:0; } 48%,78% { width:8ch; } 92%,100% { width:0; } }
@keyframes pdTutorialSignal { 0%,20% { transform:scale(.82); filter:brightness(.6); } 45%,78% { transform:scale(1.08); filter:brightness(1.25); } 100% { transform:scale(1); } }
@keyframes pdTutorialUnlock { 0%,18% { opacity:.2; transform:translateY(8px); filter:grayscale(1); } 48%,82% { opacity:1; transform:none; filter:none; } 100% { opacity:.2; } }
@keyframes pdTutorialTile { 0%,18% { opacity:.35; transform:rotateX(90deg); } 42%,82% { opacity:1; transform:none; } 100% { opacity:.35; } }
@keyframes pdTutorialSilhouette { 0%,100% { transform:scale(.9); color:#0a1430; } 50% { transform:scale(1.12); color:var(--poke-yellow); } }
@keyframes pdTutorialBar { 0%,18% { transform:scaleX(0); } 58%,86% { transform:scaleX(1); } 100% { transform:scaleX(0); } }

@media (max-width:600px), (max-height:620px) {
    #tutorialModal [data-tutorial-panel] {
        width: min(720px, 96vw);
        padding: 46px 8px 10px;
        max-height: calc(100dvh - 10px);
    }
    #tutorialModal [data-tutorial-panel] > h2 { font-size:.82rem; }
    #tutorialModal [data-tutorial-panel] > .it-lead { display:none; }
    #tutorialModal [data-tutorial-panel] .it-track { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
    #tutorialModal [data-tutorial-panel] .it-step {
        min-height:132px;
        grid-template-rows:52px auto 1fr;
        gap:3px;
        padding:7px 5px 5px;
    }
    #tutorialModal [data-tutorial-panel] .it-step::before { width:19px; height:19px; top:4px; left:4px; font-size:.38rem; }
    #tutorialModal [data-tutorial-panel] .it-step h3 { font-size:.48rem; line-height:1.3; }
    #tutorialModal [data-tutorial-panel] .it-step p { font-size:.59rem; line-height:1.2; }
    #tutorialModal [data-tutorial-panel] .it-visual,
    #tutorialModal [data-tutorial-panel] .grid-tutorial-anim-box,
    #tutorialModal [data-tutorial-panel] .bingo-tutorial-demo { height:50px; min-height:50px; }
    #tutorialModal [data-tutorial-panel] .it-search-box { width:88%; height:29px; font-size:.56rem; }
    #tutorialModal [data-tutorial-panel] .it-search-box kbd { padding:4px; font-size:.46rem; }
    #tutorialModal [data-tutorial-panel] .tutorial-legend-grid { width:94%; gap:2px; }
    #tutorialModal [data-tutorial-panel] .t-legend-item { font-size:.45rem; }
    #tutorialModal [data-tutorial-panel] .t-legend-item .color-box { width:16px; height:16px; }
    #tutorialModal [data-tutorial-panel] .wordle-tutorial-row { gap:2px; }
    #tutorialModal [data-tutorial-panel] .wordle-tutorial-tile { width:21px; height:23px; font-size:.5rem; border-width:1px; }
    #tutorialModal [data-tutorial-panel] .bingo-demo-pokemon { width:43px; height:43px; }
    #tutorialModal [data-tutorial-panel] .bingo-tutorial-cell { width:48px; min-height:40px; font-size:.8rem; }
    #tutorialModal [data-tutorial-panel] .it-hint-chip { padding:5px 4px; font-size:.48rem; }
#tutorialModal [data-tutorial-panel] .it-win-demo { padding:6px; }
}

#tutorialModal [data-tutorial-panel] [data-tutorial-actions] {
    margin-top: 13px;
    opacity: 1;
    filter: none;
    pointer-events: auto;
    transform: none;
}

#tutorialModal [data-tutorial-panel] .btn-tutorial-level,
#tutorialModal [data-tutorial-panel] .btn-play,
#tutorialModal [data-tutorial-panel] .btn-tutorial-play {
    background: linear-gradient(#ffe36b, var(--poke-yellow));
    color: var(--poke-navy);
    border: 2px solid #fff4b0;
    box-shadow: 0 4px 0 #a87900, 0 0 0 2px #071a35;
}

#tutorialModal [data-tutorial-panel] .btn-tutorial-level:hover,
#tutorialModal [data-tutorial-panel] .btn-play:hover,
#tutorialModal [data-tutorial-panel] .btn-tutorial-play:hover {
    background: var(--poke-red);
    color: #fff;
    border-color: #ff8b8b;
}

#tutorialModal [data-tutorial-panel] .btn-close-tutorial {
    color: #fff;
    text-shadow: 2px 2px 0 #7c0b0b;
}

#tutorialModal [data-tutorial-panel] .tutorial-choose-text,
#tutorialModal [data-tutorial-panel] .bingo-toggle-label,
#tutorialModal [data-tutorial-panel] .grid-toggle-label {
    color: var(--poke-yellow);
    text-shadow: 2px 2px 0 #001a40;
}

/* El movimiento de estos ejemplos enseña la mecánica. En modo reducido se
   conserva una versión lenta, basada sobre todo en opacidad/color, y se
   eliminan las entradas y desplazamientos decorativos. */
@keyframes pdTutorialSoftPulse { 0%,100% { opacity:.62; } 50% { opacity:1; filter:brightness(1.18); } }
@keyframes pdTutorialSoftReveal { 0%,18%,100% { opacity:.55; } 45%,82% { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
    #tutorialModal [data-tutorial-panel] .it-step {
        animation: none !important;
        transition: none !important;
    }
    #tutorialModal [data-tutorial-panel] .it-search-box .it-typed {
        animation: pdTutorialType 4s steps(8,end) infinite !important;
    }
    #tutorialModal [data-tutorial-panel] .t-legend-item .color-box,
    #tutorialModal [data-tutorial-panel] .bingo-tutorial-cell,
    #tutorialModal [data-tutorial-panel] .silueta-tutorial-shape {
        animation: pdTutorialSoftPulse 3s steps(2,end) infinite !important;
    }
    #tutorialModal [data-tutorial-panel] .wordle-tutorial-tile,
    #tutorialModal [data-tutorial-panel] .it-hint-chip,
    #tutorialModal [data-tutorial-panel] .it-win-demo span {
        animation: pdTutorialSoftReveal 3.4s steps(3,end) infinite !important;
    }
}

/* Custom Scrollbar for Tutorial */
.tutorial-content::-webkit-scrollbar {
    width: 8px;
}

.tutorial-content::-webkit-scrollbar-track {
    background: rgba(62, 39, 35, 0.5);
    border-radius: 0 12px 12px 0;
}

.tutorial-content::-webkit-scrollbar-thumb {
    background: var(--poke-gold-deep);
    border-radius: 4px;
}

.tutorial-content h2 {
    font-family: 'Press Start 2P', cursive;
    color: var(--poke-yellow);
    /* 2.5rem (el tamaño de un h1 de página) es demasiado para el título de
       un modal -- guess-pokemon.css ya lo traía corregido a mano a 0.8rem
       (sin overridear esto, bingo/grid/silueta/wordle se quedaban con el
       título del tutorial gigante); promovido aquí para que sea el
       tamaño real de base y no una excepción de un solo juego. clamp
       para que además se achique un poco más en pantallas muy estrechas. */
    font-size: clamp(0.68rem, 0.52rem + 1.2vw, 0.8rem);
    margin-bottom: 20px;
    text-shadow: 2px 2px 0 var(--poke-navy);
    line-height: 1.3;
}

.tutorial-content p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #fff8e1;
}

.tutorial-content .new-day-desc {
    margin-bottom: 30px;
}

@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Close Button */
.btn-close-tutorial {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--poke-gold-deep);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    transition: transform 0.2s;
    font-family: Arial, sans-serif;
    padding: 0;
}

.btn-close-tutorial:hover {
    color: var(--poke-yellow);
    transform: scale(1.1);
}

/* Help Button in Header */
.btn-help {
    background: var(--poke-navy);
    color: var(--poke-gold-deep);
    border: 2px solid var(--poke-gold-deep);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: transform 0.2s;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;

    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

/* Tutorial Title Generic */
.tutorial-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 2.2rem;
    color: var(--poke-yellow);
    margin: 0 0 25px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    line-height: 1;
}

/* Tutorial Steps (2×2 grid for 4 steps) */
.tutorial-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;

    /* Wrapper box similar to wordle.css .tutorial-examples */
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(141, 110, 99, 0.5);
}

.tutorial-steps .step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tutorial-steps .anim-box {
    background: rgba(255, 248, 225, 0.15);
    border: 2px solid #8d6e63;
    border-radius: 8px;
    padding: 0;
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tutorial-steps .step-emoji {
    font-size: 2.2rem;
    line-height: 1;
}

.tutorial-steps .step-card h3 {
    font-family: 'Press Start 2P', cursive;
    color: var(--poke-yellow);
    margin: 12px 0 6px;
    font-size: 1.1rem;
    text-shadow: 1px 1px 0 var(--poke-navy);
}

.tutorial-steps .step-card p {
    font-size: 0.85rem;
    color: #d7ccc8;
    line-height: 1.3;
    margin: 0;
    padding: 0 5px;
}

/* Play Button (Tutorial) */
.btn-play {
    margin-top: 10px;
    background: var(--poke-gold-deep);
    color: var(--poke-navy);
    border: 3px solid var(--poke-navy);
    padding: 10px 40px;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.6rem;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 5px 0 var(--poke-navy);
    text-transform: uppercase;
    width: 100%;
    max-width: 250px;
}

.btn-play:hover {
    background: var(--poke-yellow);
}

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

/* Tutorial Options (Difficulty Buttons container) */
.tutorial-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* Tutorial Level Button */
.btn-tutorial-level {
    background: #fff8e1;
    color: var(--poke-navy);
    border: 3px solid #8d6e63;
    padding: 12px 25px;
    font-size: 1.2rem;
    font-family: 'Press Start 2P', cursive;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 5px 0 var(--poke-navy-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-tutorial-level:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: var(--poke-gold-deep);
    color: var(--poke-gold-deep);
    box-shadow: 0 7px 0 var(--poke-navy-light);
}

.btn-tutorial-level:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--poke-navy-light);
}

@media (max-width: 600px) {
    .tutorial-options {
        margin-top: 15px;
        width: 100%;
        gap: 10px;
    }

    .btn-tutorial-level {
        padding: 10px 15px;
        font-size: 1rem;
        border-radius: 20px;
        flex: 1 1 auto;
        min-width: 80px;
    }

    #newDayModal .btn-play {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    /* Antes 480px: verificado con Playwright a 550px, el padding/título más
       compactos no se ven forzados — coherente con el resto de la UI que ya
       se compacta a este ancho. (.tutorial-steps/.step-card de aquí abajo son
       código muerto: ninguna página usa esas clases, ver STYLE_GUIDE.md.) */
    .tutorial-content {
        padding: 20px 18px;
    }

    .tutorial-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px;
        margin-bottom: 12px;
    }

    .tutorial-steps .step-card {
        width: 100%;
        max-width: none;
    }

    .tutorial-steps .anim-box {
        height: 44px;
    }

    .tutorial-steps .step-emoji {
        font-size: 1.4rem;
    }

    .tutorial-steps .step-card h3 {
        margin: 4px 0 3px;
        font-size: 1rem;
    }

    .tutorial-steps .step-card p {
        font-size: 0.78rem;
        padding: 0 2px;
    }

    .tutorial-title {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }
}

/* Utility: Blur Background */
.blur-background {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

/* =========================================
   12. HOW TO PLAY STEPS (GENERIC)
   ========================================= */
.info-steps-visual {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: var(--space-5);
    margin: var(--space-7) 0;
    flex-wrap: wrap;

    /* Wrapper box similar to wordle.css .tutorial-examples */
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-6);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(141, 110, 99, 0.5);
}

.static-step {
    flex: 1;
    min-width: 140px;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.static-step .anim-box {
    width: 100%;
    height: 70px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #a1887f;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    font-size: 2.2rem;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.static-text {
    text-align: center;
}

.static-text strong {
    display: block;
    font-family: 'Press Start 2P', cursive;
    color: var(--poke-yellow);
    font-size: 1.25rem;
    margin-bottom: var(--space-3);
    line-height: 1.1;
    text-shadow: 1px 1px 0 #000;
}

.static-text span {
    font-size: 0.9rem;
    color: #d7ccc8;
    display: block;
    line-height: 1.3;
}

.note-game {
    font-size: 0.78rem;
    color: rgba(240, 232, 208, 0.55);
    margin: 0 !important;
}

@media (max-width: 600px) {
    /* Antes 500px: a 550px el wrap de 2+1 columnas queda descompensado (una
       caja huérfana sola en la segunda fila) — en una sola columna se lee
       mejor y no es un "forzado", es una mejora (verificado con Playwright). */
    .info-steps-visual {
        flex-direction: column;
        align-items: center;
        gap: var(--space-8);
    }

    .static-step {
        width: 100%;
        max-width: 280px;
    }

    .static-step .anim-box {
        width: 70px;
        height: 70px;
        margin-bottom: var(--space-4);
        border-radius: var(--radius-md);
    }
}

/* =========================================
   8. GAME RESULT — piezas compartidas que siguen vivas
   ========================================= */
/* Aquí había una segunda definición COMPLETA de .game-result-modal /
   .game-result-content / .game-result-icon / .game-result-text /
   .game-result-title / .game-result-desc / .game-result-extra /
   .game-result-content.is-loss, duplicada de la sección "UNIFIED GAME RESULT
   SCREENS" de más abajo. La de abajo es la que de verdad se aplica (gana por
   venir después en la cascada); esta se ha borrado para que solo quede una
   fuente de verdad — edita solo la sección UNIFIED.
   Lo que queda aquí es justo lo que esa sección NO redefine, así que sigue
   siendo la única declaración viva de estas piezas concretas: */

/* Character Portrait in Result */
.character-portrait {
    width: 100px;
    height: 100px;
    min-height: 80px;

    object-fit: cover;
    object-position: top center;

    border-radius: 10%;
    border: 1px solid #fff;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Helper for text icons (skull, etc) */
.text-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Variante de derrota: la sección UNIFIED de abajo solo recolorea el fondo de
   .game-result-content.is-loss; el título y el retrato necesitan su propio
   tono aquí para no quedarse en gold/blanco sobre un fondo rojo. */
.game-result-content.is-loss .game-result-title {
    color: color-mix(in srgb, var(--state-incorrect) 25%, white);
    /* Pinkish White */
    text-shadow: 2px 2px 0 var(--state-incorrect-dark);
}

.game-result-content.is-loss .character-portrait {
    border-color: color-mix(in srgb, var(--state-incorrect) 25%, white);
}

/* =========================================
   9. ACTION BUTTONS (Surrender, etc)
   ========================================= */

.btn-surrender {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    /* Slightly larger matching height of standard inputs usually */
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--color-danger), var(--color-danger-dark));
    color: #fff;
    border: 2px solid #8d0000;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    flex-shrink: 0;

    /* Position */
    margin-left: var(--space-4);
}


.btn-surrender:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-surrender svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

/* =========================================
   8. RESPONSIVE COMÚN (MÓVIL)
   ========================================= */
@media (max-width: 600px) {
    .game-container {
        padding: 15px 10px;
    }

    /* Input y Botón apilados */
    .searchWrap {
        max-width: 100%;
        position: relative;
    }

    .input-group {
        flex-direction: column;
        gap: 10px;
    }

    #guessInput {
        width: 100%;
        font-size: 1.2rem;
    }

    #guessBtn {
        width: 100%;
        justify-content: center;
        padding: 12px 0;
        font-size: 1.4rem;
    }

    /* Autocomplete posicionado bajo el input */
    #autocomplete {
        top: 60px;
        z-index: 200;
        width: 100%;
    }

    /* Pistas apiladas verticalmente */
    .hint-container {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }

    .hint-box {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 10px;
        gap: 8px;
        height: auto;
    }

    .hint-title {
        white-space: normal;
        text-align: left;
    }

    .hint-lock {
        /* Antes flex-shrink:0 + white-space:nowrap del padre forzaba overflow
           horizontal con textos largos ("X Versuche" en alemán) — se le deja
           encoger y envolver, igual que .hint-title. */
        flex-shrink: 1;
        min-width: 0;
        white-space: normal;
        text-align: right;
    }

    .hint-lock span {
        /* .hint-lock es flex; el span de texto es su propio flex item y
           también necesita min-width:0 para poder envolver. */
        min-width: 0;
    }

    .revealed-hint-line {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================
   9. SECCIÓN DE INFORMACIÓN / TUTORIAL
   ========================================= */
.info-game {
    max-width: 820px;
    margin: 40px auto 20px;
    padding: 28px 30px;
    background: linear-gradient(135deg, #0d1a3a, #162040);
    border: 1px solid rgba(61, 125, 202, 0.2);
    border-radius: 16px;
    color: #c0cfea;
    font-size: 0.9rem;
    line-height: 1.6;
}

.info-game h3 {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.65rem;
    color: var(--poke-yellow);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    margin: 0 0 12px;
}

.info-game p {
    margin: 0 0 20px;
}

.color-legend {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.color-legend li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.85rem;
}

.color-legend strong {
    display: block;
    color: #e8d48b;
    margin-bottom: 2px;
}

.color-legend span {
    font-size: 0.8rem;
    color: #c0cfea;
}

.color-legend .color-box {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 2px;
}

.game-legend-container .color-box {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-xs);
    border: 1px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.color-box {
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.color-box.green {
    background: linear-gradient(145deg, var(--state-correct), var(--state-correct-dark));
}

.color-box.yellow {
    background: linear-gradient(145deg, var(--state-partial), var(--state-partial-dark));
}

.color-box.gray {
    background: linear-gradient(145deg, var(--state-unknown), var(--state-unknown-dark));
}

.color-box.red {
    background: linear-gradient(145deg, var(--state-incorrect), var(--state-incorrect-dark));
}

/* --- BANNER DE SUGERENCIA DE IDIOMA (Estilo Madera Oscura Noble) ---
   Tarjeta centrada con los MISMOS tramos de ancho que WhatPiece/Naru2day
   (calc(100%-18px) / min(760px,100%-24px) / min(700px,100vw-380px) /
   min(930px,100%-72px)) — NO los de .container-home (540/720/960/1320px,
   pensados para el banner de campaña). Se probó primero con los de
   .container-home, pero esos dejan mucho menos margen a los lados (solo
   12-108px en el rango 1040-1789px del anuncio lateral, muy por debajo de
   los 167px que ocupa el riel), así que había que esperar a que el banner
   de idioma se cerrase del todo para mostrar el anuncio. Con estos tramos
   (mismos que WhatPiece/Naruto, que sí dejan ≥190px de margen) el anuncio
   ya no necesita esperar: el script de footer_common.php solo mide
   .nav-bar, igual que en los otros dos proyectos.

   margin-top: 10px fijo en todos los tramos (aire respecto al nav-bar). Al
   ser el SEGUNDO hijo de .site-header (después de .nav-bar, ver
   header_common.php) este margin SÍ cuenta en la altura que mide el script
   de footer_common.php — si se cambia, revisar que el lateral sigue cabiendo. */
#lang-suggestion-banner {
    display: none;
    /* JS lo activa */
    margin: 10px auto 0;
    width: calc(100% - 18px);

    background: linear-gradient(to bottom, var(--poke-navy), var(--poke-navy-dark));
    border-radius: 14px;
    border: 2px solid var(--gold-treasure);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);

    color: #fff8e1;
    /* Blanco hueso para el texto, contraste perfecto */
    padding: 12px 0;
    position: relative;
    z-index: 1000;

    animation: slideDown 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 601px) and (max-width: 1039px) {
    #lang-suggestion-banner { width: min(760px, calc(100% - 24px)); }
}

@media (min-width: 1040px) and (max-width: 1439px) {
    #lang-suggestion-banner { width: min(700px, calc(100vw - 380px)); }
}

@media (min-width: 1440px) {
    #lang-suggestion-banner { width: min(930px, calc(100% - 72px)); }
}

.lang-banner-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    font-family: 'Roboto', sans-serif;
}

.lang-banner-text {
    font-size: 1.05rem;
    color: #efebe9;
    /* Sombra de texto sutil para darle profundidad sobre lo oscuro */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    /* "Detected preference:" y el <strong> del idioma mezclan tamaños/fuentes
       muy distintos (1.05rem sans-serif vs 1.4rem 'Press Start 2P') en la
       misma línea -- con el vertical-align:baseline por defecto de un span
       en flujo normal, el texto pequeño queda descolgado respecto al
       grande. inline-flex + align-items:center los centra entre sí. */
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.lang-banner-text strong {
    font-family: 'Press Start 2P', cursive;
    color: #ffecb3;
    /* Oro pálido */
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    /* El gap del flex en .lang-banner-text ya separa este bloque del texto anterior */
    line-height: 1.2;
}

/* EL BOTÓN (Estilo Moneda de Oro - Sin cambios, ya era perfecto) */
.btn-lang-switch {
    background: linear-gradient(to bottom, var(--poke-yellow), var(--poke-gold-deep));
    color: var(--poke-navy);
    font-family: 'Press Start 2P', cursive;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 6px 20px;
    border-radius: 4px;
    border: 1px solid #c49000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    gap: 8px;
    white-space: nowrap;
}

.btn-lang-switch:hover {
    background: linear-gradient(to bottom, #ffe082, var(--poke-yellow));
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: var(--poke-navy-dark);
}

.btn-lang-switch:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* BOTÓN CERRAR */
.btn-lang-close {
    background: transparent;
    border: none;
    color: #bcaaa4;
    /* Un poco más claro para que se vea sobre lo oscuro */
    font-size: 1.8rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 0.8;
    transition: color 0.2s, transform 0.2s;
    opacity: 0.8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-lang-close:hover {
    color: var(--gold-treasure);
    /* Al pasar el ratón se vuelve dorado */
    opacity: 1;
    transform: scale(1.1);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* AJUSTE — una sola línea (texto + botón + cerrar), igual que en
   WhatPiece/Naru2day. 'Press Start 2P' es una fuente de píxeles más ancha
   por carácter que el 'Pirata One' cursivo de OP, así que aquí los tamaños
   mínimos son un poco mayores para seguir siendo legibles; el texto usa
   ellipsis si el nombre del idioma no cabe, y botón/cerrar no encogen
   (flex-shrink: 0) para no perderlos.

   El corte es 1039px y no 600px: verificado a mano que a 683px (tramo de
   #lang-suggestion-banner con max-width:540px, ver arriba) el layout de
   escritorio con la fuente de píxeles se desbordaba del recuadro, no solo
   envolvía. Desde 1040px la tarjeta salta a max-width:1320px, con hueco de
   sobra para el layout completo sin comprimir. */
@media (max-width: 1039px) {
    #lang-suggestion-banner {
        padding: 6px 0;
    }

    .lang-banner-content {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        text-align: left;
        padding: 0 10px;
    }

    .lang-banner-text {
        font-size: 0.62rem;
        gap: 3px;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .lang-banner-text strong {
        font-size: 0.68rem;
    }

    .btn-lang-switch {
        width: auto;
        max-width: none;
        flex-shrink: 0;
        justify-content: center;
        font-size: 0.56rem;
        padding: 6px 10px;
        min-height: 32px;
        gap: 4px;
    }

    .btn-lang-close {
        position: static;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        padding: 0 0 0 2px;
        font-size: 1.35rem;
    }
}

/* Message Container Wrapper for Centering */
.message-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* =========================================
   8. UNIFIED GAME RESULT SCREENS (COMMON)
   ========================================= */
/* Generic Container for Modal/Overlay results */
.game-result-modal {
    margin: var(--space-6) auto;
    width: 100%;
    max-width: 500px;
    /* Juegos con board ~500px. Overridear en CSS específico si el board es más ancho */
    animation: bounceIn 0.8s;
    text-align: center;
    z-index: 200;

    /* Stack content (card) and countdown vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-5);
    /* Space between card and countdown */
}

/* Móvil: antes esto vivía duplicado (o directamente faltaba) por juego --
   #winMsg/#looseMsg en bingo.css lo tenía a mano con width:92% (~17px de
   margen a cada lado en un móvil de ~430px), grid.css no tenía nada
   (heredaba el padding sin definir de .container-character, que tampoco
   vive en common.css). Un solo sitio para todos los juegos, y con menos
   margen que el 92% original: padding fijo de 10px en el contenedor en
   vez de un ancho en porcentaje, que además escala mal en pantallas más
   anchas. El max-width por juego (700px bingo, 600px grid, 420px
   wordle...) se sigue pudiendo overridear en el CSS de cada uno. */
@media (max-width: 768px) {
    .message-container {
        padding: 0 10px;
        box-sizing: border-box;
    }
}

/* Flex content wrapper (THE CARD) */
.game-result-content {
    border: 3px solid var(--poke-gold-deep);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    color: white;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    /* Win Green */

    width: 100%;
    /* Se acota por el max-width del padre (.game-result-modal) */
}

/* LOSS Variant */
.game-result-content.is-loss {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
    box-shadow: 0 0 20px color-mix(in srgb, var(--state-incorrect) 40%, transparent);
}

/* Icon / Image container */
.game-result-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text Icon (Skull, etc) */
.game-result-icon.text-icon,
.game-result-icon .text-icon {
    font-size: 3.5rem;
    /* Larger icon */
    margin-bottom: 0;
}

/* Text Wrapper */
.game-result-text {
    flex: 1;
    /* min-width:0 anula el min-width:auto por defecto de los flex items: sin
       esto, un título en 'Press Start 2P' (fuente ancha) con una palabra
       larga como "conseguiste!" no encoge por debajo de su ancho intrínseco,
       desborda la fila flex, y justify-content:center reparte ese desborde
       mitad a cada lado -- el retrato circular de .game-result-icon
       (flex-shrink:0) se sale visiblemente por el borde izquierdo de la
       tarjeta. Bug real visto en Adivina el Pokémon el 26 agosto. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Force center alignment for text */
    text-align: center;
    /* Force center text */
    justify-content: center;
}

.game-result-text.centered {
    width: 100%;
    align-items: center;
}

.total-score-highlight {
    font-size: 2.5rem;
    margin: var(--space-4) 0;
}

/* Titles */
.game-result-modal h2,
.game-result-title {
    font-family: 'Press Start 2P', cursive;
    color: var(--poke-yellow);
    /* clamp: sin mobile override el título de "¡Bingo! Board complete!"
       llegaba a partirse en 3 líneas en un modal ya estrecho de por sí. */
    font-size: clamp(1rem, 2.6vw, 1.5rem);
    margin: 0 0 var(--space-4) 0;
    text-shadow: 2px 2px 0px var(--poke-navy);
    line-height: 1.1;
    overflow-wrap: break-word;
}

/* Descriptions */
.game-result-modal p,
.game-result-desc {
    margin: var(--space-5) 0;
    font-size: 1.2rem;
    /* Larger readable text */
    color: #fff;
    line-height: 1.3;
    overflow-wrap: break-word;
}

/* Extra info (scores, solutions) */
.game-result-extra {
    margin-top: var(--space-4);
    font-weight: bold;
    color: var(--poke-yellow);
}

/* Aviso mostrado cuando esta puntuación no entra en el ranking porque otro
   dispositivo de la misma cuenta ya jugó hoy */
.game-result-duplicate-note {
    margin: 10px 0 0 !important;
    font-size: 0.95rem !important;
    color: #ff8a80;
    background: rgba(238, 21, 21, 0.12);
    border: 1px solid rgba(238, 21, 21, 0.35);
    border-radius: 4px;
    padding: 6px 10px;
    line-height: 1.35;
}

/* Responsive */
@media (max-width: 600px) {
    .game-result-content {
        flex-direction: column;
        text-align: center;
    }

    .game-result-text {
        align-items: center;
        text-align: center;
    }
}

/* =========================================
   SEARCH ACTIONS (Common for Personaje/Fruta)
   ========================================= */
.search-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ajustes Responsive para la barra de búsqueda */
@media (max-width: 600px) {
    .input-group {
        display: flex;
        flex-direction: column;
        /* Force column layout on mobile */
        gap: 10px;
        background: transparent;
        border-radius: 0;
    }

    /* FILA 1: Input ocupa todo el ancho */
    #guessInput {
        width: 100%;
        border-radius: 50px;
        margin: 0;
        /* Clear previous margins */
        text-align: center;
    }

    /* FILA 2: Contenedor de botones acciones */
    .search-actions {
        display: flex;
        width: 100%;
        gap: 10px;
        /* Default flex row behaviour is good here */
    }

    /* FILA 2: Botón Adivinar (~83% visual) */
    #guessBtn {
        flex: 5;
        border-radius: 50px;
        justify-content: center;
        padding: 20px 20px;
        width: auto;
        /* Reset fixed width */
        margin: 0;
    }

    #guessBtn span {
        display: inline;
        font-size: 1rem;
    }

    /* FILA 2: Botón Rendirse (~17% visual) */
    .btn-surrender {
        flex: 1;
        margin: 0;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        /* Remove explicit circle aspect */
        border-radius: 50px;
        padding: 0;
        align-self: stretch;
        /* Match height of guessBtn */
    }

    .btn-surrender svg {
        width: 24px;
        height: 24px;
    }
}

/* =========================================
   10. MODAL ESTÁTICO (Rendición/Confirmación)
   ========================================= */

/* Overlay que cubre toda la pantalla y desenfoca el fondo */
.modal-static-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    /* Por encima de todo */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    /* Efecto borroso */
    display: none;
    /* Oculto por defecto */
    justify-content: center;
    align-items: center;
}

.modal-static-overlay.active {
    display: flex;
    /* Flex para centrar el contenido */
}

/* Caja del modal centrada — el centrado ya lo da el flex del overlay
   (.modal-static-overlay), no necesita su propio position/transform. */
.modal-static-content {
    width: 90%;
    max-width: 500px;
    padding: 30px;

    background: linear-gradient(to bottom, var(--poke-navy), var(--poke-navy-dark));
    /* Fondo oscuro noble */
    color: var(--poke-yellow);
    /* Dorado */
    border: 2px solid #000000;
    /* Borde negro solicitado */
    border-radius: var(--radius-md);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    text-align: center;
}

.modal-static-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0 #000;
}

.modal-static-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    margin-bottom: var(--space-7);
    color: #fff8e1;
    /* Texto blanco hueso para lectura */
}

.modal-static-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
}

/* Botones del modal */
.btn-modal-action {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    cursor: pointer;
    border: 2px solid #000;
    transition: transform 0.1s;
}

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

.btn-modal-cancel {
    background: #757575;
    color: #fff;
    border-color: #424242;
}

.btn-modal-cancel:hover {
    background: #616161;
}

.btn-modal-confirm {
    background: var(--color-danger);
    /* Rojo peligro */
    color: #fff;
    border-color: var(--color-danger-dark);
}

.btn-modal-confirm:hover {
    background: #d32f2f;
}

.btn-modal-success {
    background: #f9a825;
    color: #1a1a1a;
    border-color: #f57f17;
}

.btn-modal-success:hover {
    background: var(--poke-gold-deep);
}

.modal-static-game-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.modal-static-game-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 202, 40, 0.15);
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #fff8e1;
}

.modal-static-game-list li:last-child {
    border-bottom: none;
}

.modal-static-game-streak {
    font-weight: 700;
    color: var(--poke-yellow);
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .modal-static-content {
        padding: 20px;
        width: 95%;
    }

    .modal-static-title {
        font-size: 1.6rem;
    }

    /* Los botones (p.ej. "Seguir Intentando" / "Rendirse") en Press Start 2P
       a 1.2rem sin encoger ni envolver desbordaban el modal en móvil — se
       apilan en columna y ocupan todo el ancho disponible. */
    .modal-static-actions {
        flex-direction: column;
        gap: var(--space-4);
    }

    .btn-modal-action {
        width: 100%;
        font-size: 0.85rem;
        padding: var(--space-4) var(--space-5);
    }
}

/* ── Modal hito de racha ── */
.streak-milestone-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 10px;
    animation: milestone-pulse 0.6s ease-out;
}

@keyframes milestone-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Disabled Level Buttons */
.btn-level.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--poke-navy) !important;
    pointer-events: none;
    box-shadow: none;
    transform: none;
    color: #9e9e9e;
    border-color: var(--poke-navy-light);
}

/* =========================================
   8. COMMON RESULTS UI (Wordle, Character, Fruta)
   ========================================= */

/* YESTERDAY BANNER */
.yesterday-banner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
    background-color: #f7ebc7;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05));
    border: 3px solid var(--poke-navy-light);
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(161, 136, 127, 0.4);
    padding: 10px 15px;
    position: relative;
    color: var(--poke-navy);
    z-index: 0;
}

.yesterday-img-container {
    width: 50px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 15px;
    border: 2px solid var(--poke-navy-light);
    background: #eeefff;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    transform: rotate(-2deg);
}

.yesterday-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Focus on face usually at top */
}

.yesterday-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.yesterday-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: var(--poke-navy-light);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.yesterday-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.5rem;
    color: var(--poke-navy-dark);
    line-height: 1;
}

/* COUNTDOWN (Themed & Professional) */
.countdown-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 15px; Removed, parent gap handles it */
    gap: 15px;

    /* WIDTH CONTROL — se acota por el max-width del padre (.game-result-modal) */
    width: 100%;
    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.hourglass-icon {
    width: 32px;
    /* Slightly larger */
    height: 32px;
    stroke: var(--poke-yellow);
    /* Gold stroke */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

.countdown-text {
    display: flex;
    flex-direction: column;
    /* Stack label and time for better hierarchy */
    align-items: flex-start;
    /* Align text left within block */
    line-height: 1;
}

.countdown-label {
    font-family: 'Press Start 2P', cursive;
    /* Thematic font */
    font-size: 0.9rem;
    color: #bdbdbd;
    /* Silver-ish */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.countdown-timer {
    font-family: 'Press Start 2P', cursive;
    /* Thematic font for numbers too */
    font-size: 1.3rem;
    color: var(--poke-yellow);
    /* Gold */
    background: transparent;
    padding: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    letter-spacing: 1px;
}

/* =========================================
   BOTÓN COMPARTIR (compartido por los 6 juegos)
   ========================================= */
/* Bloque idéntico repetido en varios CSS de juego — promovido aquí (ver
   app/STYLE_GUIDE.md). Guess Pokémon tenía su propia variante contorneada
   (guess-pokemon.css .btn-share-result); se quitó para que los 6 juegos se
   vean y comporten igual. */
.btn-share-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--poke-yellow);
    color: #1e2a4a;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-share-result:hover {
    background: #ffd633;
    transform: translateY(-1px);
}

.btn-share-result:active {
    transform: scale(0.96);
}

/* =========================================
   XX. ESTILOS DEL FOOTER (footer_common.php)
   ========================================= */
.main-footer {
    background: rgba(10, 10, 20, 0.95);
    border-top: 3px solid var(--poke-yellow);
    padding: 40px 20px 20px;
    color: #fff;
    position: relative;
    z-index: 10;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.5);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) minmax(190px, .7fr) minmax(210px, .7fr);
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
}

.footer-content .links-section { justify-self: center; min-width: 190px; }

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-title {
    color: var(--poke-yellow);
    font-family: 'Press Start 2P', cursive;
    font-size: 1.0rem;
    margin: 0;
    text-shadow: 2px 2px 0 var(--poke-navy);
    letter-spacing: 1px;
}

.footer-text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

.footer-text.small {
    font-size: 0.85rem;
    opacity: 0.6;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--poke-yellow);
    transform: translateX(5px);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.social-icon-placeholder {
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    cursor: default;
}

.social-icons a:hover {
    background: var(--poke-yellow);
    color: var(--poke-navy);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 203, 5, 0.4);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .footer-content .links-section { justify-self: stretch; min-width: 0; }

    .social-icons {
        justify-content: center;
    }

    .footer-playwire-badge {
        align-self: center !important;
    }

    .footer-playwire-badge p {
        text-align: center !important;
    }
}

/* =========================
   SHARE BUTTON (Reusable)
   ========================= */
.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--poke-navy-light), var(--poke-navy));
    color: #f7ebc7;
    border: 2px solid var(--poke-navy-light);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.btn-share:hover {
    background: linear-gradient(135deg, var(--poke-navy-light), var(--poke-navy-light));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(93, 64, 55, 0.4);
    border-color: var(--poke-navy);
}

.btn-share:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.btn-share svg {
    flex-shrink: 0;
}

/* =========================
   SHARE TOAST (Reusable)
   ========================= */
.share-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: linear-gradient(135deg, var(--poke-navy-dark), var(--poke-navy));
    color: #f7ebc7;
    padding: 12px 28px;
    border-radius: 10px;
    border: 2px solid var(--poke-navy-light);
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    white-space: nowrap;
}

.share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================
   SHARE MODAL (Reusable)
   ========================= */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.share-modal-overlay.show {
    opacity: 1;
}

.share-modal-content {
    background: linear-gradient(145deg, var(--poke-navy), var(--poke-navy-dark));
    border: 2px solid var(--poke-navy-light);
    border-radius: 16px;
    padding: 28px 32px;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.share-modal-overlay.show .share-modal-content {
    transform: scale(1) translateY(0);
}

.share-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: #a1887f;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    padding: 4px;
}

.share-modal-close:hover {
    color: #f7ebc7;
}

.share-modal-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.4rem;
    color: #f7ebc7;
    margin: 0 0 20px 0;
    text-align: center;
}

.share-modal-options {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #f7ebc7;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 80px;
}

.share-option:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #d4a843;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 168, 67, 0.2);
    color: #f7ebc7;
}

.share-option:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   Game Ranking Card (shared across games)
   ═══════════════════════════════════════════ */
.game-ranking {
    width: 100%;
    /* Se acota por el max-width del padre (.game-result-modal) */
    box-sizing: border-box;
    margin: 15px auto 0;
    padding: 16px 16px 18px;
    background: linear-gradient(135deg, #1c1408, #251a0a);
    border: 2px solid rgba(255, 179, 0, 0.45);
    border-radius: 10px;
}

.ranking-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.82rem;
    color: var(--poke-yellow);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ranking-title::before,
.ranking-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 179, 0, 0.35);
}

.ranking-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ranking-row {
    display: flex;
    align-items: center;
    /* Menos gap/padding lateral que antes: el marcador de Pokémon es
       "1:10" (formato M:SS) frente a los "35s" de OP, así que .ranking-name
       (flex:1) necesita recuperar ese hueco de donde se pueda para no
       truncar hasta "Anonymous...". */
    gap: 8px;
    padding: 8px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.ranking-row.is-me {
    background: rgba(255, 213, 79, 0.1);
    border-color: rgba(255, 213, 79, 0.4);
}

.ranking-own-position {
    margin-top: 7px;
    border-top-color: rgba(255, 213, 79, 0.4);
}

.ranking-medal {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 26px;
    text-align: center;
    line-height: 1;
}

/* Sin esta regla el <img> del avatar se pintaba a su tamaño natural
   (el artwork completo, cientos de px) en vez de encajar en la fila --
   .ranking-avatar nunca había tenido estilos propios. Medidas calcadas
   de assets/css/ranking.css de OP: caja 40x40 centrada (hueco también
   para el emoji de respaldo a 1.6rem), imagen circular 36x36 dentro. */
.ranking-avatar {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ranking-rank-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: var(--poke-yellow);
    letter-spacing: 0.3px;
}

.ranking-rank-locked {
    font-size: 1.15rem;
    opacity: 0.55;
}

.ranking-locked-note {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 4px 0 0 !important;
    padding: 0 6px;
    line-height: 1.3;
}

.ranking-name {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Sin negrita a propósito: el peso extra ensancha el texto (menos sitio
   para el nombre en la fila); ya se distingue por color. */
.ranking-name strong {
    font-weight: 400;
    color: #fff;
}

.ranking-you-tag {
    font-size: 0.7rem;
    color: var(--poke-yellow);
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    background: rgba(255, 213, 79, 0.15);
    border: 1px solid rgba(255, 213, 79, 0.4);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 6px;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.ranking-score {
    font-family: 'Press Start 2P', cursive;
    /* OP usa el mismo 1.05rem pero con Pirata One, mucho más compacta por
       carácter -- con Press Start 2P (monoespaciada y ancha) ese tamaño se
       comía casi todo el ancho de la fila y dejaba .ranking-name (flex:1)
       sin sitio ni para "Anonymous" sin truncar. */
    font-size: 0.75rem;
    color: var(--poke-yellow);
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.ranking-row.is-me .ranking-score {
    color: #ffe57f;
    text-shadow: 0 0 8px rgba(255, 213, 79, 0.4);
}

.ranking-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    margin: 0;
    padding: 8px 0;
}

.ranking-streak-note {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 16px !important;
    color: rgba(255, 160, 0, 0.5);
    margin: 6px 0 16px;
    padding: 5px 6px;
    background: rgba(255, 140, 0, 0.06);
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: 4px;
    line-height: 1.3;
}

.top5-inline-note {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.88rem;
    color: var(--poke-yellow);
    text-align: center;
    margin: 10px 0 !important;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════
   Top 5 Ranking Modal (shared across games)
   ═══════════════════════════════════════════ */
.top5-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.top5-modal-overlay.hidden {
    display: none;
}

.top5-modal-content {
    background: linear-gradient(135deg, var(--poke-navy), var(--poke-navy-light));
    border: 3px solid var(--poke-gold-deep);
    border-radius: 12px;
    padding: 35px 28px 28px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 60px rgba(255, 179, 0, 0.15);
    color: #fff8e1;
    font-family: 'Roboto', sans-serif;
}

.top5-modal-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.top5-modal-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem;
    color: var(--poke-yellow);
    margin: 0 0 10px;
    text-shadow: 2px 2px 0 var(--poke-navy);
    line-height: 1.1;
}

.top5-modal-desc {
    font-size: 1rem;
    color: #fff8e1;
    margin: 0 0 20px;
    line-height: 1.5;
}

.top5-modal-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 248, 225, 0.7);
    margin-bottom: 10px;
}

.top5-nickname-input {
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 2px solid rgba(255, 179, 0, 0.5) !important;
    border-radius: 10px !important;
    color: #fff8e1 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1rem !important;
    padding: 10px 16px !important;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.top5-nickname-input::placeholder {
    color: rgba(255, 248, 225, 0.35) !important;
}

.top5-nickname-input:focus {
    border-color: var(--poke-gold-deep) !important;
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.3) !important;
}

.top5-nick-error {
    font-size: 0.85rem;
    color: #ff6b6b;
    margin: 4px 0 8px;
}

.top5-nick-error.hidden {
    display: none;
}

.top5-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.top5-modal-actions .btn-play {
    font-size: 1.1rem;
    padding: 10px 24px;
    background: linear-gradient(to bottom, var(--poke-navy), var(--poke-navy-dark));
    color: var(--poke-yellow);
    border: 2px solid var(--poke-yellow);
    border-radius: 20px;
    text-transform: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.15s;
}

.top5-modal-actions .btn-play:hover {
    background: var(--poke-yellow);
    color: #141d38;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.top5-modal-actions .btn-play:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.top5-modal-actions .btn-play:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Ranking ⓘ nick-hint button */
.ranking-nick-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 213, 79, 0.12);
    border: 1px solid rgba(255, 213, 79, 0.6);
    border-radius: 50%;
    color: var(--poke-yellow);
    font-size: 0.8rem;
    width: 19px;
    height: 19px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.ranking-nick-info-btn:hover {
    background: rgba(255, 213, 79, 0.25);
    border-color: var(--poke-yellow);
}

/* Ranking nick popover */
.ranking-nick-popover {
    display: none;
    position: fixed;
    width: 220px;
    background: linear-gradient(145deg, #1e1005, #2e1a08);
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.8rem;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 215, 0, 0.1);
    white-space: normal;
}

.ranking-nick-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(255, 215, 0, 0.45);
}

.ranking-nick-popover.above::before {
    top: auto;
    bottom: -6px;
    border-bottom: none;
    border-top: 6px solid rgba(255, 215, 0, 0.45);
}

.ranking-nick-popover.open {
    display: block;
}

.ranking-nick-popover-link {
    display: inline-block;
    margin-left: 4px;
    color: var(--poke-yellow);
    text-decoration: none;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4);
}

/* ── Streak badge en filas de ranking ── */
.ranking-streak-badge {
    flex-shrink: 0;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 2px 4px;
    border-radius: 10px;
    border: 1px solid;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.4;
    pointer-events: none;
}

.ranking-streak-badge.ranking-streak-empty {
    visibility: hidden;
}

.ranking-streak-badge.tier-1 {
    background: linear-gradient(135deg, #2a2510, #3d3518);
    border-color: #d4b44a;
    color: #d4b44a;
    box-shadow: 0 0 4px rgba(212, 180, 74, 0.2);
}

.ranking-streak-badge.tier-2 {
    background: linear-gradient(135deg, #2a1500, #3e1f00);
    border-color: #ff6a00;
    color: #ff6a00;
    box-shadow: 0 0 6px rgba(255, 106, 0, 0.25);
}

.ranking-streak-badge.tier-3 {
    background: linear-gradient(135deg, #1a0008, #3a0010);
    border-color: #ff2d2d;
    color: #ff2d2d;
    box-shadow: 0 0 8px rgba(255, 45, 45, 0.3);
}

.ranking-streak-badge.tier-4 {
    background: linear-gradient(135deg, #1a1a2e, #2a2040 50%, #1a1a2e);
    border-color: #e8e0f0;
    color: #f0ecf5;
    text-shadow: 0 0 4px rgba(200, 180, 255, 0.6);
    box-shadow: 0 0 10px rgba(220, 200, 255, 0.3);
}

.btn-skip-text {
    background: none;
    border: none;
    color: rgba(255, 248, 225, 0.40);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    transition: color 0.2s;
    padding: 4px 8px;
}

.btn-skip-text:hover {
    color: rgba(255, 248, 225, 0.70);
}

/* ========== ADS ========== */

/* Banner top móvil (320×100) — encima del h1, oculto en escritorio */
.ad-mobile-top-wrap {
    display: none;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 35px;
    text-align: center;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ad-mobile-top-wrap ins {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 0 auto;
}

/* Solo hasta 767px: la unidad que rellena esta clase (standard_iab) está en
   on=false para Tablet y Desktop en el panel de Playwire, así que de 768px
   arriba el hueco se quedaría vacío. Ese tramo lo cubre .ad-leaderboard-cards-wrap
   con un 728x90, que sí es una unidad de tablet. */
@media (max-width: 767px) {
    .ad-mobile-top-wrap {
        display: block;
        height: 100px;
        max-height: 100px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 600px) {
    .subtitle-container {
        padding-top: 10px;
    }
}

/* Banner entre cards (320×100) — oculto en escritorio */
.ad-mobile-cards-wrap {
    display: none;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 35px;
    text-align: center;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ad-mobile-cards-wrap ins {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 0 auto;
}

/* Mismo motivo que .ad-mobile-top-wrap: solo móvil puro. */
@media (max-width: 767px) {
    .ad-mobile-cards-wrap {
        display: block;
        height: 100px;
        max-height: 100px !important;
        overflow: hidden !important;
    }
}

/* ========== Tablet vertical (768-1039px): leaderboard 728x90 ==========
   Unidad propia de Playwire (.ad-leaderboard-cards-wrap), configurada para
   tablet. Ocupa el mismo sitio que los huecos móviles —encima del h1 y entre
   las cards— pero en el tramo donde aquellos no se rellenan.
   Por debajo de ~750px de ancho útil el 728x90 no cabe; RAMP cae entonces al
   320x50 que la unidad también tiene dado de alta, así que el contenedor va a
   ancho completo y solo se fija la altura. */
.ad-leaderboard-cards-wrap {
    display: none;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

@media (min-width: 768px) and (max-width: 1039px) {
    .ad-leaderboard-cards-wrap {
        display: block;
        height: 90px;
        max-height: 90px !important;
        overflow: hidden !important;
    }

    /* El de cabecera necesita el mismo aire que tenía el banner móvil */
    .ad-leaderboard-top {
        margin-top: 35px;
    }
}

.ad-card-break {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
}

/* Usuarios exentos de publicidad (perk ad_free): ads.php no emite ningún hueco,
   pero estas columnas de corte están escritas a mano en index.php, así que se
   quedaban vacías cobrando igualmente el gutter del row y su margin-bottom — el
   listado se veía con un salto de más cada 3 tarjetas sin nada dentro.
   :not(:has(*)) y no :empty porque el marcado deja saltos de línea dentro del
   div, y :empty no casa cuando hay nodos de texto en blanco.
   El descendiente de .row es necesario: :has() aporta 0 a la especificidad, así
   que sin él esta regla empata con .ad-card-break-tablet { display: block } y
   pierde por orden de aparición. */
.row > .ad-card-break:not(:has(*)) {
    display: none;
}

@media (max-width: 767px) {
    .ad-card-break {
        margin-bottom: 35px;
    }
}

/* En escritorio el anuncio está oculto; eliminar la columna entera evita
   el hueco fantasma que añade el gy-md-5 del row */
@media (min-width: 1040px) {
    .ad-card-break {
        display: none;
    }
}

/* Los cortes de anuncio siguen la cantidad de columnas del catálogo:
   móvil (1 columna) tras cada 3 cards; tablet (2 columnas) tras cada 2 cards. */
@media (min-width: 768px) {
    .ad-card-break-mobile {
        display: none !important;
    }
}

.ad-card-break-tablet {
    display: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0;
    margin-bottom: 20px;
}

@media (min-width: 768px) and (max-width: 1039px) {
    .ad-card-break-tablet {
        display: block;
    }
}

/* Banner inferior — solo móvil. Lo alimenta standard_iab, que está en on=false
   para Tablet y Desktop en el panel de Playwire, así que por encima de 767px
   reservaba 120px de alto que nunca se rellenaban: una banda vacía en todas las
   páginas (y una segunda, .ad-banner-inferior-2, bajo el "Cómo jugar"). El div
   se queda en el DOM para que siga enganchando
   body:has([data-playwire-reserved]); solo deja de ocupar sitio.
   Si algún día activan la unidad para tablet/escritorio, basta con ampliar este
   media query. */
.ad-banner-inferior {
    display: none;
}

@media (max-width: 767px) {
    .ad-banner-inferior {
        display: block;
        width: 100%;
        max-width: 970px;
        margin: 1.5rem auto 1.5rem;
        padding: 0 1rem;
        min-height: 120px;
        text-align: center;
        box-sizing: border-box;
        align-self: center;
    }
}

.ad-banner-inferior ins {
    display: block !important;
    margin: 0 auto;
}

/* ========== Laterales 160x600 (1040-1789px) ==========
   Unidad in-page propia (.ad-lateral-small), a diferencia del raíl out-of-page
   que Playwire coloca por su cuenta. Sustituye a las dos de la era AdSense
   (.ad-lateral desde 1440px y .ad-side-game en 1040-1439px), que usaban clases
   que Playwire no tiene configuradas y por tanto no se rellenaban nunca.

   Va dentro de la franja de 185px que el body reserva justo abajo. NO
   centrado a (185-160)/2≈12px: a esa distancia del borde invade la hitbox de
   la card de juego inclinada (rotate) que sobresale de su contenedor cerca
   del edge. Se mantiene a 7px (el valor que ya funcionaba con la franja de
   175px), dejando más aire del lado del contenido que del lado del borde.

   Por qué el corte es 1789 y no 1439: el raíl nativo tiene contentWidth 1470 en
   la config de Playwire, así que necesita (ventana-1470)/2 ≥ 162px y no se
   renderiza hasta 1790px — medido con un barrido en staging de WhatPiece. De
   1040 a 1789px la franja reservada estaría vacía, y desde 1790px manda su
   raíl. Si ellos bajan el contentWidth, este 1789 baja con él.

   top y el gate de "cabe o no" ya NO son números fijos: dependían de que el
   header (88px) y el banner de idioma se sumaran a mano, y eso se rompía en
   cuanto cualquiera de los dos cambiaba de alto. El script de
   footer_common.php mide solo el alto real de .nav-bar (NO todo
   .site-header) con ResizeObserver — no hace falta sumar
   #lang-suggestion-banner porque sus tramos de ancho (los mismos que
   WhatPiece/Naru2day, ver common.css) dejan siempre ≥190px de margen a cada
   lado en este rango de anchos, más que los 167px que ocupa el riel, así
   que nunca se solapan horizontalmente aunque el banner esté abierto.
   Publica --ad-lateral-top y decide si cabe comparando con el alto real del
   viewport, marcando <body class="ads-lateral-fit"> solo cuando sí. */
.ad-lateral-small {
    display: none;
}

@media (min-width: 1040px) and (max-width: 1789px) {
    body.ads-lateral-fit .ad-lateral-small {
        display: block;
        position: fixed;
        top: var(--ad-lateral-top, 88px);
        width: 160px;
        height: 600px;
        overflow: hidden;
        /* Por debajo del header y de cualquier modal */
        z-index: 50;
    }

    body.ads-lateral-fit .ad-lateral-small--izq {
        left: 7px;
    }

    body.ads-lateral-fit .ad-lateral-small--der {
        right: 7px;
    }
}

/* Desde 1040px (no 1440px): por debajo mandan los banners móviles y el
   leaderboard de tablet, que se ocultan justo en ese corte. El mismo valor de
   reserva en todo el escritorio evita que el ancho útil salte al cruzar 1440. */
@media (min-width: 1040px) {

    /* El body cede espacio lateral para los ads */
    body:has([data-playwire-reserved]) {
        padding-left: 185px;
        padding-right: 185px;
    }

    /* Header y footer rompen el padding para seguir siendo full-width */
    body:has([data-playwire-reserved]) .site-header,
    body:has([data-playwire-reserved]) .main-footer {
        margin-left: -185px;
        margin-right: -185px;
        width: calc(100% + 370px);
        box-sizing: border-box;
    }

    /* El footer recupera el espacio para que su contenido no quede bajo los ads */
    body:has([data-playwire-reserved]) .main-footer {
        padding-left: 195px;
        padding-right: 195px;
    }

    /* Los ads quitan 370px al ancho disponible; reducimos el padding del game-container
       de 30px a 15px por lado (ahorra 30px) para que las tablas anchas no hagan scroll. */
    body:has([data-playwire-reserved]) .game-container {
        padding: 15px;
    }

    /* Con los ads laterales quedan ~1070px. Las 4 tarjetas del navbar caben de
       sobra, pero se afina el mínimo para que no se estiren de más. */
    body:has([data-playwire-reserved]) .game-nav {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* En pantallas ≥1920px hay margen suficiente para anuncios de 300px,
   lo que desbloquea los formatos 300×250 y 300×600 (mayor CPM). */
@media (min-width: 1920px) {
    body:has([data-playwire-reserved]) {
        padding-left: 315px;
        padding-right: 315px;
    }

    body:has([data-playwire-reserved]) .site-header,
    body:has([data-playwire-reserved]) .main-footer {
        margin-left: -315px;
        margin-right: -315px;
        width: calc(100% + 630px);
    }

    body:has([data-playwire-reserved]) .main-footer {
        padding-left: 335px;
        padding-right: 335px;
    }
}

/* Los anuncios laterales medianos de 1040-1439px los cubre ahora
   .ad-lateral-small, arriba. El bloque .ad-side-game que había aquí usaba una
   clase que Playwire no tiene configurada: reservaba hueco y no se rellenaba. */
@media (min-width: 1040px) and (max-width: 1439px) {
    .info-game {
        max-width: 950px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Reportar fallo ─────────────────────────────────────────────────────────
   El enlace es deliberadamente terciario: va por debajo de "jugar" y de
   "compartir". Estático (nada de position:fixed) para no pelearse con el
   banner inferior de anuncios ni saltar con el teclado virtual en iOS.       */

.report-bug-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-3);
}

.report-bug-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    box-sizing: border-box;
    gap: var(--space-3);
    background: rgba(0, 58, 112, 0.72);
    border: 1px solid rgba(255, 203, 5, 0.3);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    font-size: 0.85rem;
    font-family: inherit;
    color: #fff8e1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.report-bug-link:hover,
.report-bug-link:focus-visible {
    background: rgba(0, 58, 112, 0.92);
    border-color: var(--poke-yellow);
}

.report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    z-index: 10001;
}

/* Tema claro, igual que #tutorialModal .tutorial-content -- migrado desde el
   navy oscuro original para que se lea como parte del mismo sistema de
   modales claros del sitio (tutoriales de juego), no como una pieza aparte. */
.report-modal {
    background: #ffffff;
    border: 3px solid var(--poke-gold-deep);
    border-radius: var(--radius-md);
    padding: var(--space-7) var(--space-7);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--poke-navy);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 179, 0, 0.12);
}

.report-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--poke-navy);
    margin: 0 0 var(--space-3);
    text-align: center;
}

.report-intro {
    margin: 0 0 var(--space-5);
    font-size: 0.92rem;
    color: #33475b;
    opacity: 0.85;
    text-align: center;
}

/* Desplegable propio, no <select> nativo: el <select> nativo abre la rueda
   del sistema encima del modal y no se puede estilar, y las cuatro
   categorías como botones apilados dejaban el modal más alto que la
   pantalla en móvil. */
.report-select {
    position: relative;
    margin-bottom: var(--space-5);
}

.report-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: #fff;
    border: 1px solid rgba(0, 58, 112, 0.3);
    border-radius: var(--radius-sm);
    color: #2a2a2a;
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.report-select-trigger:hover {
    background: rgba(0, 58, 112, 0.06);
}

.report-select-trigger:focus-visible,
.report-select-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--poke-navy);
}

.report-select-text {
    flex: 1;
}

/* Mientras no se elige nada el texto es una indicación, no un valor: se
   atenúa para que se note que falta contestar. */
.report-select-text.report-select-empty {
    opacity: 0.65;
}

.report-select-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.report-select-trigger[aria-expanded="true"] .report-select-arrow {
    transform: rotate(180deg);
}

/* Fondo opaco a propósito: la lista flota sobre el comentario y con un
   blanco translúcido se leerían las dos capas a la vez. */
.report-select-list {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: #fffaf0;
    border: 1px solid rgba(0, 58, 112, 0.3);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    z-index: 5;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.report-select-list.open {
    display: block;
}

.report-select-option {
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-xs);
    font-size: 0.92rem;
    color: #2a2a2a;
    cursor: pointer;
    transition: background 0.15s ease;
}

.report-select-option:hover,
.report-select-option:focus-visible {
    outline: none;
    background: rgba(0, 58, 112, 0.08);
}

.report-select-option.selected {
    background: rgba(255, 203, 5, 0.25);
    font-weight: 700;
}

.report-guidance {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(255, 179, 0, 0.45);
    border-radius: var(--radius-sm);
    background: rgba(255, 179, 0, 0.08);
}

.report-guidance.hidden {
    display: none;
}

.report-guidance-title {
    margin: 0 0 var(--space-2);
    color: var(--poke-navy);
    font-size: 0.96rem;
}

.report-guidance-text {
    margin: 0 0 var(--space-4);
    color: #33475b;
    font-size: 0.88rem;
    line-height: 1.45;
}

.report-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: #33475b;
    font-size: 0.86rem;
    line-height: 1.35;
    cursor: pointer;
}

.report-confirm input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--poke-yellow);
}

.report-textarea {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: #fff;
    border: 1px solid rgba(0, 58, 112, 0.3);
    border-radius: var(--radius-sm);
    color: #2a2a2a;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
}

.report-textarea::placeholder {
    color: rgba(0, 58, 112, 0.35);
}

.report-textarea:focus {
    outline: none;
    border-color: var(--poke-navy);
}

/* Campo de email opcional -- misma caja que el comentario, sin poder
   redimensionarse (es una sola línea). */
.report-email-input {
    margin-top: var(--space-3);
    resize: none;
}

.report-status {
    min-height: 1.2em;
    margin: var(--space-4) 0 0;
    font-size: 0.88rem;
    text-align: center;
}

.report-status:empty {
    display: none;
}

.report-status.report-ok { color: var(--color-success); }
.report-status.report-ko { color: var(--color-danger); }

.report-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: flex-end;
    margin-top: var(--space-6);
}

.report-btn-primary,
.report-btn-secondary {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    border: 1px solid transparent;
}

/* Simple a propósito: la fuente pixel + píldora + hover-invert del resto de
   CTAs del sitio (.poke-button) recarga demasiado un modal que ya lleva
   desplegable + textarea + checkbox -- aquí basta un botón plano de toda
   la vida. */
.report-btn-primary {
    background: var(--poke-yellow);
    color: var(--poke-navy-dark);
    font-weight: 700;
    transition: filter 0.15s;
}

.report-btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
}

.report-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mismo rojo que ya usan los botones "Jugar" del sitio (--poke-red), para
   que Cancelar se lea como la acción de salir sin guardar. */
.report-btn-secondary {
    background: var(--poke-red);
    color: #fff;
    font-weight: 700;
    transition: filter 0.15s;
}

.report-btn-secondary:hover {
    filter: brightness(1.1);
}

/* Ajuste fino de móvil pequeño: con el bloque de guidance añadido el modal
   completo (categoría + aviso + checkbox + textarea) puede superar la altura
   de un iPhone SE en horizontal si no se aprieta cada margen — de ahí valores
   en px sueltos en vez del token más cercano de la escala. */
@media (max-width: 480px) {
    .report-overlay {
        padding: var(--space-3);
    }

    .report-modal {
        padding: 15px 14px;
        max-height: calc(100dvh - 16px);
    }

    .report-title {
        font-size: 1.3rem;
        line-height: 1.1;
        margin-bottom: var(--space-2);
    }

    .report-intro {
        margin-bottom: var(--space-4);
        font-size: 0.84rem;
    }

    .report-select {
        margin-bottom: var(--space-4);
    }

    .report-select-trigger {
        padding: 9px 11px;
        font-size: 0.88rem;
    }

    .report-guidance {
        margin-bottom: var(--space-4);
        padding: 9px 10px;
    }

    .report-guidance-title {
        margin-bottom: var(--space-2);
        font-size: 0.88rem;
    }

    .report-guidance-text {
        margin-bottom: var(--space-3);
        font-size: 0.79rem;
        line-height: 1.32;
    }

    .report-confirm {
        gap: var(--space-3);
        font-size: 0.78rem;
        line-height: 1.28;
    }

    .report-confirm input {
        width: 16px;
        height: 16px;
    }

    .report-textarea {
        min-height: 64px;
        padding: var(--space-3) var(--space-4);
        font-size: 0.84rem;
    }

    .report-actions {
        margin-top: var(--space-4);
    }

    .report-btn-primary,
    .report-btn-secondary {
        padding: 9px var(--space-4);
        flex: 1;
        width: auto;
    }
}

/* ── FAQ (SEO) — misma caja exacta que usa OP para su sección de FAQ/info de
   juego (.info-game en game-ui.css: gradiente oscuro + borde grueso dorado +
   sombra + <details>/<summary> con barra de acento y +/-), recoloreada a la
   paleta navy/gold de Pokémon. Compartida por las páginas de juego que llevan
   preguntas frecuentes (render_faq_schema(), inc/ui/structured_data.php).
   higher-lower.php tiene su propia copia prefijada (.hl-faq-*,
   higher-lower.css) por una decisión anterior de no arrastrar el layout de
   info-pages.css a una página de juego -- no se toca, sigue funcionando.
   Este bloque sin prefijo es para el resto de juegos, ya que common.css se
   carga en todas las páginas vía head_seo.php y evita duplicar el mismo CSS
   una vez por juego. ── */
.faq-section {
    background: linear-gradient(135deg, var(--poke-navy), var(--poke-navy-dark));
    border: 3px solid var(--poke-yellow);
    border-radius: 12px;
    padding: 30px;
    margin: 40px clamp(18px, 4vw, 44px);
    color: #dbe9f9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    position: relative;
    overflow: hidden;
}

.faq-section-title {
    font: .9rem/1.5 'Press Start 2P', cursive;
    color: var(--poke-yellow);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 203, 5, .3);
}

.faq-item {
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 203, 5, .34);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: inset 3px 0 0 rgba(255, 203, 5, .72);
}

.faq-item:last-child { margin-bottom: 0; }

.faq-item summary {
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    color: #ffe9a8;
    transition: color .15s;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    color: var(--poke-yellow);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.faq-item[open] summary::after { content: '\2212'; }

.faq-item summary:hover { color: var(--poke-yellow); }

.faq-answer { padding: 0 20px 18px; line-height: 1.6; color: #dbe9f9; opacity: .9; }

@media (max-width: 600px) {
    .faq-section { padding: 20px; margin: 30px 12px; }
    .faq-section-title { font-size: .68rem; }
}

/* ── SCROLLBAR PERSONALIZADO (paleta Pokémon) ────────────────────────────────
   Barra global con la paleta de la web: raíl azul marino oscuro y pulgar azul
   Pokémon con brillo dorado (amarillo Pokémon al pasar el ratón).
   scrollbar-width/scrollbar-color son propiedades HEREDADAS, así que
   declararlas en html basta para que Firefox las aplique también a los
   scrollers internos que no las sobrescriban. */
:root {
    --scroll-track: rgba(61, 125, 202, 0.10);
    --scroll-track-root: var(--poke-navy-dark);
    --scroll-thumb: var(--poke-blue);
}

/* Firefox (y cualquier motor sin ::-webkit-scrollbar): propiedades estándar.
   OJO: en Chrome 121+ declarar scrollbar-width/scrollbar-color sobre un
   elemento ANULA sus reglas ::-webkit-scrollbar, y ambas se heredan, asi que
   ponerlas en html sin aislar dejaria la barra gris por defecto en todo el
   sitio. Por eso van dentro de @supports not selector(::-webkit-scrollbar). */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    }
}

/* Scrollers internos (listas, modales, tablas...) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5a9bdc 0%, var(--poke-blue) 50%, var(--poke-navy) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 203, 5, .35);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--poke-yellow) 0%, var(--poke-gold-deep) 55%, #a86f00 100%);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, var(--poke-gold-deep) 0%, #a86f00 100%);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Barra de la página: un poco más ancha y con raíl navy oscuro, a juego con
   el fondo de la web (--poke-dark). */
html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: var(--scroll-track-root);
    border-left: 1px solid rgba(0, 0, 0, .35);
    border-radius: 0;
}

html::-webkit-scrollbar-thumb {
    border-width: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 203, 5, .45),
        inset 0 -1px 0 rgba(0, 26, 64, .35);
}

/* En móvil la barra es un overlay del sistema: recuperamos el ancho fino
   para no comer espacio útil. */
@media (max-width: 768px) {

    ::-webkit-scrollbar,
    html::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb,
    html::-webkit-scrollbar-thumb {
        border-width: 1px;
    }
}

/* ── Footer: juegos hermanos (WhatPiece/Naru2day) ────────────────────────
   Mismo tratamiento visual que .avatar-unlock-card (navy degradado + borde
   dorado + icono circular con anillo azul/amarillo), reutilizado aquí para
   que la card encaje con el resto del sitio en vez de inventar un estilo
   nuevo. */
.other-games-section {
    max-width: 480px;
    margin: var(--space-9, 40px) auto var(--space-7, 24px);
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.other-games-card {
    padding: 20px 24px;
    text-align: center;
    background: linear-gradient(160deg, #123766, #061d3b);
    border: 3px solid var(--poke-yellow);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.other-games-title {
    color: var(--poke-yellow);
    font-family: 'Press Start 2P', sans-serif;
    font-size: .85rem;
    margin: 0 0 6px;
}

.other-games-subtitle {
    color: #d8e8ff;
    margin: 0 0 14px;
    font-size: .85rem;
}

.other-games-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
}

.other-game-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 92px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease;
}

.other-game-item:hover,
.other-game-item:focus-visible {
    transform: translateY(-3px) scale(1.05);
}

.other-game-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid var(--poke-blue);
    box-shadow: 0 0 0 3px var(--poke-yellow);
}

.other-game-name {
    font-weight: 800;
    font-size: .9rem;
    color: #fff;
}

.other-game-sub {
    font-size: .72rem;
    color: rgba(216, 232, 255, .75);
}

@media (max-width: 480px) {
    .other-games-list { gap: 18px; }
    .other-game-item { width: 78px; }
    .other-game-icon { width: 48px; height: 48px; }
}