/* ═══════════════════════════════════════════════════════════════════════════
   BINGO — estructura y medidas heredadas del bingo de WhatPiece, tema visual
   de Pokemon (paleta navy/oro de common.css, Press Start 2P + Roboto).

   Todo lo específico va prefijado .bingo-* / --bingo-*. Las clases del tutorial
   también van prefijadas (.bingo-tutorial-*) para no pisar el sistema de
   tutorial compartido de otras páginas, que es lo que hace el bingo de OP.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Carcasa decorativa aclarada al tema crema del sitio. --bingo-correct/
   -error (acierto/fallo) y los 18 colores oficiales de tipo en
   .bingo-type-* NO se tocan -- son informativos. */
:root {
    --bingo-screen-bg:    #f0f0e8;
    --bingo-cell-bg:      #ffffff;
    --bingo-cell-border:  rgba(0, 58, 112, 0.4);
    --bingo-correct:      color-mix(in srgb, var(--state-correct) 55%, transparent);
    --bingo-correct-solid:color-mix(in srgb, var(--state-correct) 80%, transparent);
    --bingo-error:        color-mix(in srgb, var(--state-incorrect) 40%, transparent);
    --bingo-error-strong: color-mix(in srgb, var(--state-incorrect) 62%, transparent);
    --bingo-panel-bg:     transparent;
}

/* Pantalla de la Pokédex y contenedor: mismo tratamiento que wordle.css.
   .game-container transparente: pokedex-frame.css ya documenta que debe
   serlo -- el panel oscuro era una sobreescritura decorativa. */
.pokedex-screen {
    background: var(--bingo-screen-bg) !important;
}

.bingo-container.game-container {
    background: var(--bingo-panel-bg) !important;
    border-color: transparent !important;
    /* El tablero real (.bingo-wrapper) tiene su propio max-width y se
       centra solo -- este contenedor solo necesita ser lo bastante ancho
       para no recortarlo. Ver .bingo-wrapper/.bingo-grid para el ajuste
       que realmente reduce el margen crema plano en pantallas anchas. */
    max-width: 800px;
    width: 95%;
    margin: 20px auto;
    padding: 30px 25px 40px;
}

.bingo-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.bingo-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* Ampliado junto con .bingo-grid (ver más abajo) para reducir el
       margen crema plano que quedaba en pantallas anchas -- antes el
       tablero quedaba mucho más estrecho que la pantalla, ahora está
       más disimulado porque era oscura. */
    max-width: 740px;
    width: 100%;
}

/* ── Cabecera: temporizador · Pokémon · skip ──────────────────────────────── */
.bingo-header {
    display: flex;
    /* nowrap (igual que OP): con wrap la fila se partía en varias líneas.
       El gap sustituye al padding-right/left de 15px que llevaban
       .bingo-left/.bingo-right -- así la separación mínima se mantiene
       aunque los hijos se encojan. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 10px;
    gap: 8px;
}

.bingo-left,
.bingo-right {
    /* Sí pueden encogerse (a diferencia de OP, que no necesita hacerlo:
       OP no tiene marco de Pokédex ni esquinas pokéball, así que su fila
       dispone de más ancho real en el mismo viewport). Con flex-shrink:0
       la fila dejaba de partirse pero se salía del contenedor en móvil
       -- el ancho extra que come el marco de Pokédex de Pokémon no
       estaba contado en los px fijos calcados de OP. */
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.bingo-left  { justify-content: flex-start; }
.bingo-right { justify-content: flex-end; }

.bingo-center {
    /* basis 200px en vez de width fijo: con flex-shrink puede encogerse
       por debajo cuando no cabe, sin necesitar un valor de anchura por
       breakpoint (ver .bingo-pool-container, que ahora se ajusta solo). */
    flex: 0 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px 2% 0 0;
}

.bingo-timer {
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    color: var(--poke-yellow);
    background: rgba(0, 0, 0, 0.55);
    border: 3px solid var(--poke-blue);
    border-radius: 10px;
    padding: 10px 14px;
    /* Sin min-width: el contenido son siempre 5 caracteres con
       tabular-nums (ancho ya estable por sí solo); un mínimo fijo era
       precisamente lo que impedía encogerse cuando no había sitio. */
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.skip-btn {
    background: var(--poke-navy);
    color: var(--poke-yellow);
    border: 3px solid var(--poke-blue);
    padding: 12px 20px;
    font-size: 14px;
    font-family: 'Press Start 2P', cursive;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 5px;
    box-shadow: 0 4px 0 #001d3d;
    transition: all 0.15s ease;
    text-transform: uppercase;
    line-height: 1;
}

.skip-btn:hover:not(:disabled) { background: #004a8f; }

.skip-btn:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: none;
}

/* ── Pokémon actual ───────────────────────────────────────────────────────── */
.bingo-pool-container {
    /* Fluido y cuadrado en vez de 180px fijos (con reducciones manuales
       por breakpoint): se ajusta solo al ancho real que le deje
       .bingo-center tras encogerse, así nunca desborda su contenedor y
       no hace falta perseguir un valor fijo por cada ancho de pantalla. */
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px 0 12px;
    position: relative;
}

.bingo-character-img {
    width: 100%;
    height: 100%;
    /* contain, no cover: los sprites oficiales ya vienen con su propio margen y
       recortarlos escondería parte del Pokémon. */
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 3px solid var(--poke-blue);
}

@keyframes bingo-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.bingo-pool-container.bingo-photo-loading .bingo-character-img { opacity: 0; }

.bingo-pool-container.bingo-photo-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(61, 125, 202, 0.3);
    border-top-color: var(--poke-yellow);
    border-radius: 50%;
    animation: bingo-spin 0.8s linear infinite;
}

.bingo-character-name {
    font-family: 'Press Start 2P', cursive;
    color: var(--poke-yellow);
    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);
    margin: 0;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.4;
}

/* ── Tablero ──────────────────────────────────────────────────────────────── */
/* Safari/WebKit necesita un ancho definido para resolver correctamente el
   grid porcentual dentro del inline-flex. Sin él, el cálculo intrínseco de
   las imágenes con max-width/max-height porcentual puede colapsar el tablero
   (mismo bug ya corregido en OP/WhatPiece). */
.bingo-grid-wrapper { position: relative; width: 100%; }

.bingo-cooldown-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: all;
    display: none;
}

.bingo-cooldown-overlay.active { display: block; }

.bingo-grid {
    margin: 0 auto;
    width: 100%;
    display: grid;
    /* Columnas fluidas (1fr) en vez de píxel fijo: con celdas de tamaño
       fijo, cualquier ancho de .bingo-wrapper por encima del tablero
       dejaba un margen crema muerto a los lados -- ahora el tablero
       siempre llena el ancho disponible, en cualquier viewport. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.6vw, 14px);
    transition: opacity 0.25s ease;
}

/* Antes era opacity:0.4 en .bingo-grid entero: con el fondo de pantalla
   ahora claro (--bingo-screen-bg), atenuar TODO el tablero -- incluida la
   celda marcada en rojo -- lo desvaía hacia blanco y el flash rojo
   (.blink-error, más abajo) quedaba invisible ("pantalla en blanco, la
   celda no se pone roja"). Atenuar solo las celdas que NO son la que
   falló: el resto del tablero se sigue viendo en pausa, pero el aviso
   rojo se ve a toda intensidad, como en el bingo de referencia (OP). */
.bingo-grid.cooldown-dim .bingo-cell:not(.blink-error) { opacity: 0.4; }

.bingo-cell {
    background: var(--bingo-cell-bg);
    border: 2px solid var(--bingo-cell-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    transition: 0.25s ease;
    cursor: pointer;
    position: relative;
}

.bingo-cell .category-art { z-index: 1; }

@media (hover: hover) and (pointer: fine) {
    .bingo-cell:hover {
        transform: scale(1.05);
        border-color: var(--poke-yellow);
    }
}

/* Color por defecto para celdas sin tipo asignado -- las celdas
   .bingo-type-* (informativas) recolorean esto por su cuenta más abajo,
   sin tocar. */
.bingo-label {
    color: #1a2a4a;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    line-height: 1.25;
    z-index: 1;
    /* Etiquetas largas (p. ej. "Legendario o singular") deben partir sin
       desbordar la celda cuadrada. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Overlay común de estado (invisible por defecto) */
.bingo-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
}

.bingo-cell.cell-correct::after {
    background: var(--bingo-correct);
    opacity: 1;
}

.bingo-cell.cell-correct {
    border-color: var(--state-correct);
    box-shadow: 0 0 14px color-mix(in srgb, var(--state-correct) 38%, transparent);
}

.bingo-cell-status {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    scale: .84;
    color: #fff;
    background: none;
    border: 0;
    font: 600 clamp(3.3rem, 5.625vw, 4.65rem)/1 Arial, sans-serif;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .62);
    opacity: 0;
    pointer-events: none;
}

.bingo-cell.cell-correct .bingo-cell-status {
    opacity: .55;
    animation: bingo-status-pop .24s cubic-bezier(.2, .8, .25, 1) both;
}

.bingo-cell.blink-error .bingo-cell-status {
    opacity: .55;
    animation: bingo-status-pop .24s cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes bingo-status-pop {
    from { opacity: .24; scale: .84; }
    to { opacity: .55; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bingo-cell-status { animation: none !important; }
    .bingo-cell.cell-correct .bingo-cell-status,
    .bingo-cell.blink-error .bingo-cell-status { scale: 1; }
}

.bingo-cell.blink-error::after {
    animation: blinkRed 0.6s ease;
    opacity: 1;
}

.cell-blocked {
    pointer-events: none;
    opacity: 1;
}

@keyframes blinkRed {
    0%   { background-color: var(--bingo-error); }
    50%  { background-color: var(--bingo-error-strong); }
    100% { background-color: var(--bingo-error); }
}

.shake { animation: shakeAnim 0.4s; }

@keyframes shakeAnim {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-6px); }
    50%  { transform: translateX(6px); }
    75%  { transform: translateX(-6px); }
    100% { transform: translateX(0); }
}

/* ── Colores canónicos de tipo ─────────────────────────────────────────────
   Sustituyen a los iconos PNG por categoría del bingo de OP (que aquí no
   existen): la celda de tipo se tiñe con el color oficial del tipo, y el texto
   se fuerza a oscuro o claro según el contraste de cada fondo. */
.bingo-cell.bingo-type-normal   { background: #A8A77A; }
.bingo-cell.bingo-type-fire     { background: #EE8130; }
.bingo-cell.bingo-type-water    { background: #6390F0; }
.bingo-cell.bingo-type-electric { background: #F7D02C; }
.bingo-cell.bingo-type-grass    { background: #7AC74C; }
.bingo-cell.bingo-type-ice      { background: #96D9D6; }
.bingo-cell.bingo-type-fighting { background: #C22E28; }
.bingo-cell.bingo-type-poison   { background: #A33EA1; }
.bingo-cell.bingo-type-ground   { background: #E2BF65; }
.bingo-cell.bingo-type-flying   { background: #A98FF3; }
.bingo-cell.bingo-type-psychic  { background: #F95587; }
.bingo-cell.bingo-type-bug      { background: #A6B91A; }
.bingo-cell.bingo-type-rock     { background: #B6A136; }
.bingo-cell.bingo-type-ghost    { background: #735797; }
.bingo-cell.bingo-type-dragon   { background: #6F35FC; }
.bingo-cell.bingo-type-dark     { background: #705746; }
.bingo-cell.bingo-type-steel    { background: #B7B7CE; }
.bingo-cell.bingo-type-fairy    { background: #D685AD; }

/* Fondos oscuros → texto blanco para mantener el contraste legible.
   .category-art-label (category-card.css) es el elemento que de verdad se
   pinta -- la etiqueta usa siempre su navy oscuro por defecto, ilegible
   sobre fondos negros/morados/granate oscuro. Categorías identificadas
   muestreando el color real de cada .webp (franja inferior, que es donde
   se apoya el texto): 4 tipos + 4 categorías sin tipo. */
.bingo-cell.bingo-type-dark .category-art-label,
.bingo-cell.bingo-type-dragon .category-art-label,
.bingo-cell.bingo-type-fighting .category-art-label,
.bingo-cell.bingo-type-poison .category-art-label,
.bingo-cell[data-id="captura_dificil"] .category-art-label,
.bingo-cell[data-id="pesado_100kg"] .category-art-label,
.bingo-cell[data-id="pesado_200kg"] .category-art-label,
.bingo-cell[data-id="color_black"] .category-art-label {
    color: #fff;
}

/* ── Mensajes de victoria / derrota ───────────────────────────────────────── */
#winMsg,
#looseMsg {
    max-width: 700px;
}

/* .btn-share-result vive ahora en common.css (compartido con Wordle/Grid/
   Silueta) — ver app/STYLE_GUIDE.md. */

.bingo-lose-score-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 205, 210, 0.35);
    border-radius: 12px;
    padding: 0.5rem 2rem;
    margin: 0.8rem 0 0.6rem;
    gap: 0.1rem;
}

.bingo-lose-score-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: color-mix(in srgb, var(--state-incorrect) 32%, white);
    opacity: 0.85;
}

.bingo-lose-score-num {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Misma rejilla que el tablero (4 col) para que el resumen se lea igual */
.bingo-lose-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin: 0.4rem auto 0.2rem;
    max-width: 160px;
}

.bingo-mini-cell {
    aspect-ratio: 1;
    border-radius: 5px;
}

.mini-correct {
    background: var(--bingo-correct-solid);
    box-shadow: 0 0 6px color-mix(in srgb, var(--state-correct) 50%, transparent);
}

.mini-missed {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── Tutorial (prefijado para no filtrar a otras páginas) ─────────────────── */
.bingo-tutorial-body {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 20px 0;
}

/* Demo del mecanismo en CSS puro: Pokemon no tiene el gif de tutorial que usa
   OP (assets/img/tutorial está vacío), así que se explica con dos celdas de
   ejemplo, acierto y fallo. */
.bingo-tutorial-demo {
    flex: 0 0 255px;
    min-height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: 2px solid rgba(61,125,202,.55);
    border-radius: 10px;
    background: rgba(4,13,35,.55);
}

.bingo-demo-pokemon { width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.08); animation:bingoDemoFloat 1.8s ease-in-out infinite; }
.bingo-demo-ball { width:48px; height:48px; border-radius:50%; border:4px solid #111; background:linear-gradient(to bottom,#ee1515 0 44%,#111 44% 56%,#fff 56%); position:relative; }
.bingo-demo-ball::after { content:''; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid #111; left:50%; top:50%; transform:translate(-50%,-50%); }
.bingo-demo-arrow { color:var(--poke-yellow); font-size:1.5rem; animation:bingoDemoArrow 1.2s ease-in-out infinite; }
.bingo-demo-cells { display:grid; gap:8px; }

.bingo-tutorial-cell {
    width:92px;
    min-height:58px;
    border-radius: 12px;
    border: 2px solid var(--bingo-cell-border);
    background: var(--bingo-cell-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #1a2a4a;
    text-align: center;
    padding: 4px;
    position: relative;
}

@keyframes bingoDemoFloat { 50% { transform:translateY(-6px); } }
@keyframes bingoDemoArrow { 50% { transform:translateX(5px); } }

#tutorialModal .tutorial-content { max-width: 680px; }

.bingo-tutorial-cell.is-correct { box-shadow: inset 0 0 0 999px var(--bingo-correct); }
.bingo-tutorial-cell.is-wrong   { box-shadow: inset 0 0 0 999px var(--bingo-error); }

.bingo-tutorial-text {
    flex: 1;
    text-align: left;
}

.bingo-tutorial-text p {
    margin: 0 10px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.bingo-tutorial-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 25px 0;
}

/* Vive directamente sobre el fondo blanco del tutorial (fuera de
   .bingo-tutorial-demo, que sí tiene su propia caja oscura) -- color propio
   oscuro en vez de --poke-yellow, que quedaría con poco contraste aquí. */
.bingo-toggle-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--poke-navy);
}

.blur-background {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

/* ── Leyenda de la sección "cómo jugar" ───────────────────────────────────── */
/* Sin margin-right propio: el gap de .color-legend li (common.css) ya separa
   el swatch del texto — sumar los dos desalineaba a Bingo frente a Guess
   Pokémon/Wordle en la misma leyenda. El tamaño (18px vs 26-30px de los
   demás) se deja como está — es densidad deliberada de Bingo, no un bug. */
.bingo-legend-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    vertical-align: middle;
}

.bingo-legend-swatch.is-correct { background: var(--bingo-correct-solid); }
.bingo-legend-swatch.is-wrong   { background: var(--bingo-error-strong); }

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Portátiles / FullHD: tablero algo más compacto para que quepa sin scroll */
@media screen and (min-width: 901px) and (max-height: 1080px) {
    .bingo-container.game-container {
        max-width: 660px;
        padding: 20px 20px 30px;
    }

    .bingo-wrapper   { max-width: 600px; }
    .bingo-center    { flex-basis: 170px; margin-top: 15px; }
    .bingo-pool-container { max-width: 150px; }
    .bingo-timer     { font-size: 17px; padding: 8px 12px; }
    .skip-btn        { font-size: 12px; padding: 10px 16px; }
    .bingo-label     { font-size: 13px; }

    #winMsg,
    #looseMsg { max-width: 580px; }
}

/* Tablet y móvil: 3 columnas (el tablero de 12 pasa a 3×4) */
@media (max-width: 900px) {
    .bingo-character-name { margin-top: -6px; font-size: 0.95rem; }

    .bingo-grid {
        width: 100%;
        max-width: 420px;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .bingo-center         { flex-basis: 150px; }
    .bingo-pool-container { max-width: 130px; }
    .bingo-timer          { font-size: 16px; padding: 8px 10px; }
    .skip-btn             { font-size: 12px; padding: 10px 16px; }
    .bingo-label          { font-size: 13px; }
    /* La rejilla del resumen de derrota sigue al tablero */
    .bingo-lose-mini-grid { grid-template-columns: repeat(3, 1fr); max-width: 132px; }
}

/* width:92% en móvil ahora vive en común (.game-result-modal, common.css)
   -- ya no hace falta repetirlo aquí por #winMsg/#looseMsg. */

@media (max-width: 480px) {
    .bingo-container.game-container { padding: 18px 10px 28px; }

    .bingo-header { margin-bottom: 5px; }

    .skip-btn {
        padding: 6px 10px;
        font-size: 10px;
        border-radius: 6px;
        border-width: 2px;
        box-shadow: 0 2px 0 #001d3d;
    }

    .skip-btn:active:not(:disabled) { transform: translateY(2px); }

    .bingo-timer  { font-size: 12px; padding: 5px 7px; }
    .bingo-center { flex-basis: 115px; margin-top: 12px; }
    .bingo-pool-container { max-width: 100px; margin: 6px 0 8px; }

    .bingo-grid {
        max-width: 100%;
        padding: 0 4px;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    /* Sin padding: la imagen de categoría (.category-art-image, width/
       height:100%) ya rellena la celda entera -- un padding aquí solo
       dejaba un reborde crema visible entre el borde de la celda y la
       imagen, sin que la imagen llegara nunca a encajar perfectamente. */
    .bingo-cell  { border-radius: 10px; }
    .bingo-label { font-size: 11px; line-height: 1.2; }

    .bingo-tutorial-body { flex-direction: column; }
    .bingo-tutorial-text { text-align: center; }
    .bingo-tutorial-text p { font-size: 1rem; margin: 0; }
    .bingo-toggle-label { font-size: 0.95rem; }
}

@media (max-width: 360px) {
    .skip-btn     { padding: 5px 8px; font-size: 9px; }
    .bingo-timer  { font-size: 10px; padding: 4px 6px; }
    .bingo-center { flex-basis: 100px; }
    .bingo-pool-container { max-width: 85px; }
    .bingo-grid   { gap: 5px; }
    .bingo-label  { font-size: 10px; }
}
/* ============================================================
   TUTORIAL DE BINGO — PARTIDA ANIMADA ESTILO OP
   Mantiene todo visible en un solo modal y usa datos reales del día.
   ============================================================ */
/* Caja exterior: receta compartida en common.css (sección "TUTORIAL
   MODAL — RECETA COMPARTIDA"). Aquí solo lo que varía: dimensiones. */
#tutorialModal .bingo-tutorial-content {
    width: min(680px, 100%);
    max-width: 680px;
    max-height: calc(100dvh - 16px);
    padding: 22px 24px 20px;
    overflow: hidden;
}

#tutorialModal .bingo-tutorial-content::before { display: none; }

.bingo-tutorial-heading { padding: 0; text-align: center; }

.bingo-tutorial-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 11px;
    border: 2px solid rgba(0,58,112,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    color: var(--poke-navy);
    font-family: 'Press Start 2P', cursive;
    font-size: .57rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.bingo-tutorial-kicker-ball {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid #161616;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--poke-red) 0 43%, #161616 43% 57%, #fff 57%);
}

.bingo-tutorial-kicker-ball::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border: 1px solid #161616;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%,-50%);
}

#tutorialModal .bingo-tutorial-heading h2 {
    margin: 9px 0 7px;
    color: var(--poke-navy);
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(.92rem, 2.7vw, 1.18rem);
    line-height: 1.25;
    text-shadow: 2px 2px 0 rgba(255,203,5,.75);
}

#tutorialModal .bingo-tutorial-heading h2::before { display: none; }

#tutorialModal .bingo-tutorial-heading p {
    width: min(570px, 100%);
    margin: 0 auto 13px;
    color: #26384f;
    font-size: .88rem;
    line-height: 1.4;
}

#tutorialModal .bingo-tutorial-demo {
    position: relative;
    display: grid;
    grid-template-columns: auto 52px 168px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: auto;
    min-height: 190px;
    margin: 0;
    padding: 17px 20px;
    overflow: hidden;
    border: 2px solid rgba(0,58,112,.32);
    border-radius: 14px;
    background: rgb(224, 224, 224);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.52), 0 5px 0 rgba(0,58,112,.16);
}

#tutorialModal .bingo-tutorial-demo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.62) 49%, transparent 64%);
    transform: translateX(-100%);
    animation: bingoTutShine 8s ease-in-out infinite;
}

.bingo-tut-character {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
}

.bingo-tut-character-main { display: grid; justify-items: center; gap: 7px; }

.bingo-tut-avatar {
    position: relative;
    width: 104px;
    height: 124px;
    overflow: hidden;
    border: 3px solid var(--poke-navy);
    border-radius: 12px;
    background: #f7f7f7;
    box-shadow: 0 8px 0 rgba(0,58,112,.2), 0 0 0 4px rgba(255,203,5,.28);
    animation: bingoTutAvatarPop 8s ease-in-out infinite;
}

.bingo-tut-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
    opacity: 0;
}

.bingo-tut-photo.is-a { animation: bingoTutPhotoA 8s linear infinite; }
.bingo-tut-photo.is-b { animation: bingoTutPhotoB 8s linear infinite; }

.bingo-tut-name {
    position: relative;
    display: grid;
    width: 116px;
    min-height: 23px;
    place-items: center;
    padding: 4px 8px;
    overflow: hidden;
    border: 2px solid rgba(0,58,112,.32);
    border-radius: 999px;
    background: rgba(255,255,255,.5);
    color: var(--poke-navy);
}

.bingo-tut-name b {
    grid-area: 1 / 1;
    max-width: 100%;
    overflow: hidden;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.bingo-tut-name b.is-a { animation: bingoTutPhotoA 8s linear infinite; }
.bingo-tut-name b.is-b { color: var(--poke-red); animation: bingoTutPhotoB 8s linear infinite; }

.bingo-tut-route {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--poke-navy);
}

.bingo-tut-route i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,58,112,.2);
    animation: bingoTutRoute 1.5s ease-in-out infinite;
}

.bingo-tut-route i:nth-child(2) { animation-delay: .18s; }
.bingo-tut-route i:nth-child(3) { animation-delay: .36s; }
.bingo-tut-route span { margin-left: 1px; font: 2rem/1 Arial, sans-serif; }

.bingo-tut-board {
    --tut-cell-w: 46px;
    --tut-cell-h: 38px;
    --tut-gap: 7px;
    --tut-pad: 9px;
    --cursor-wrong-x: calc(var(--tut-pad) + (var(--tut-cell-w) + var(--tut-gap)) * 2 + 29px);
    --cursor-wrong-y: calc(var(--tut-pad) + 5px);
    --cursor-correct-x: calc(var(--tut-pad) + var(--tut-cell-w) + var(--tut-gap) + 11px);
    --cursor-correct-y: calc(var(--tut-pad) + var(--tut-cell-h) + var(--tut-gap) + 7px);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, var(--tut-cell-w));
    gap: var(--tut-gap);
    width: max-content;
    padding: var(--tut-pad);
    border: 3px solid var(--poke-navy);
    border-radius: 12px;
    background: #f4f4f4;
    box-shadow: 0 8px 0 rgba(0,58,112,.23);
}

.bingo-tut-cell {
    position: relative;
    display: grid;
    width: var(--tut-cell-w);
    height: var(--tut-cell-h);
    place-items: center;
    overflow: visible;
    border: 2px solid rgba(0,58,112,.3);
    border-radius: 6px;
    background: #fff;
    color: var(--poke-navy);
    font-style: normal;
}

.bingo-tut-cell .category-art { width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 4px; }
.bingo-tut-cell .category-art-image { width: 100%; height: 100%; object-fit: cover; }
.bingo-tut-cell .category-art-label,
.bingo-tut-cell .category-art-fallback { display: none; }
.bingo-tut-cell.is-filled { border-color: var(--state-correct-dark); background: var(--state-correct-surface); color: var(--state-correct-ink); }
.bingo-tut-cell.is-filled .category-art-image { opacity: .72; }
.bingo-tut-cell.is-wrong-target { animation: bingoTutWrong 8s linear infinite; }
.bingo-tut-cell.is-correct-target { animation: bingoTutCorrect 8s linear infinite; }

.bingo-tut-mark {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 4;
    display: none;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.35);
    color: #fff;
    font: 900 .62rem/1 Arial, sans-serif;
    opacity: 0;
    transform: scale(.4);
}

.is-wrong-target .bingo-tut-mark-x { display: grid; background: var(--state-incorrect); animation: bingoTutMarkWrong 8s linear infinite; }
.is-correct-target .bingo-tut-mark-check { display: grid; background: var(--state-correct); animation: bingoTutMarkCorrect 8s linear infinite; }

.bingo-tut-cursor {
    position: absolute;
    top: var(--cursor-correct-y);
    left: var(--cursor-correct-x);
    z-index: 5;
    font-size: 1.4rem;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
    animation: bingoTutCursor 8s ease-in-out infinite;
}

.bingo-tut-skip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 2px solid rgba(0,58,112,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    color: #68778a;
    font-family: 'Roboto', sans-serif;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
    animation: bingoTutSkipPill 8s linear infinite;
}

.bingo-tut-skip-cursor {
    position: absolute;
    right: -8px;
    bottom: -15px;
    font-size: 1.2rem;
    opacity: 0;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
    animation: bingoTutSkipCursor 8s linear infinite;
}

.bingo-tutorial-cues {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 0;
}

.bingo-tutorial-cues > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 10px;
    border: 2px solid rgba(0,58,112,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    color: #26384f;
    font-size: .7rem;
}

.bingo-tutorial-cues b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bingo-tutorial-cues i { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; color: #fff; font-style: normal; font-weight: 900; }
.bingo-tutorial-cues .is-correct i { background: var(--state-correct); }
.bingo-tutorial-cues .is-incorrect i { background: var(--state-incorrect); }
.bingo-tutorial-cues .is-skip i { background: var(--poke-navy); color: var(--poke-yellow); }

#tutorialModal .bingo-tutorial-content .bingo-tutorial-options { margin: 12px 0; }
#tutorialModal .bingo-tutorial-content [data-tutorial-actions] { margin-top: 0; }

#tutorialModal .bingo-tutorial-content .btn-play {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 11px 30px;
    border: 3px solid var(--poke-navy);
    border-radius: 7px;
    background: var(--poke-red);
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: .9rem;
    box-shadow: 0 5px 0 #8f1111, 0 8px 16px rgba(0,0,0,.2);
}

#tutorialModal .bingo-tutorial-content .btn-play:hover {
    background: var(--poke-navy);
    color: var(--poke-yellow);
    border-color: var(--poke-yellow);
    transform: translateY(-2px);
}

#tutorialModal .bingo-tutorial-content .btn-play:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--poke-yellow) 72%, white);
    outline-offset: 3px;
    border-color: var(--poke-yellow);
}

@keyframes bingoTutShine { 0%,62% { transform:translateX(-100%); } 92%,100% { transform:translateX(100%); } }
@keyframes bingoTutPhotoA { 0%,27.9% { opacity:1; } 28%,70.9% { opacity:0; } 71%,100% { opacity:1; } }
@keyframes bingoTutPhotoB { 0%,27.9% { opacity:0; } 28%,70.9% { opacity:1; } 71%,100% { opacity:0; } }
@keyframes bingoTutAvatarPop {
    0%,26%,69%,100% { border-color:var(--poke-navy); transform:scale(1); }
    28%,71% { border-color:var(--poke-red); transform:scale(1.06); box-shadow:0 8px 0 rgba(0,58,112,.2),0 0 0 5px rgba(255,203,5,.72); }
    33%,76% { transform:scale(1); }
}
@keyframes bingoTutRoute { 0%,100% { background:rgba(0,58,112,.2); transform:scale(.75); } 45% { background:var(--poke-yellow); transform:scale(1.15); box-shadow:0 0 8px rgba(255,203,5,.7); } }
@keyframes bingoTutWrong {
    0%,35%,53%,100% { border-color:rgba(0,58,112,.3); background:#fff; transform:translateX(0); box-shadow:none; }
    37%,50% { border-color:var(--state-incorrect); background:var(--state-incorrect-surface); color:var(--state-incorrect-ink); transform:translateX(-2px); box-shadow:0 0 0 3px color-mix(in srgb, var(--state-incorrect) 13%, transparent); }
    43% { transform:translateX(2px); }
}
@keyframes bingoTutCorrect {
    0%,12% { border-color:rgba(0,58,112,.3); background:#fff; box-shadow:none; }
    14%,23% { border-color:var(--state-correct-dark); background:var(--state-correct-surface); color:var(--state-correct-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--state-correct) 15%, transparent); }
    25%,100% { border-color:var(--state-correct-dark); background:var(--state-correct-surface); color:var(--state-correct-ink); box-shadow:none; }
}
@keyframes bingoTutMarkWrong { 0%,36%,53%,100% { opacity:0; transform:scale(.4) rotate(-8deg); } 39%,48% { opacity:1; transform:scale(1); } }
@keyframes bingoTutMarkCorrect { 0%,12%,26%,100% { opacity:0; transform:scale(.4); } 15%,22% { opacity:1; transform:scale(1); } }
@keyframes bingoTutCursor {
    0%,4% { opacity:0; left:var(--cursor-correct-x); top:var(--cursor-correct-y); transform:translateY(-5px) scale(.8); }
    7%,11% { opacity:1; left:var(--cursor-correct-x); top:var(--cursor-correct-y); transform:translateY(0) scale(1); }
    13%,16% { opacity:1; left:var(--cursor-correct-x); top:var(--cursor-correct-y); transform:translateY(4px) scale(.82); }
    19%,24% { opacity:1; left:var(--cursor-correct-x); top:var(--cursor-correct-y); transform:translateY(0) scale(1); }
    26%,33% { opacity:0; left:var(--cursor-correct-x); top:var(--cursor-correct-y); transform:translateY(4px) scale(.75); }
    36%,39% { opacity:1; left:var(--cursor-wrong-x); top:var(--cursor-wrong-y); transform:translateY(0) scale(1); }
    41%,44% { opacity:1; left:var(--cursor-wrong-x); top:var(--cursor-wrong-y); transform:translateY(4px) scale(.82); }
    47%,52% { opacity:1; left:var(--cursor-wrong-x); top:var(--cursor-wrong-y); transform:translateY(0) scale(1); }
    55%,100% { opacity:0; left:var(--cursor-wrong-x); top:var(--cursor-wrong-y); transform:translateY(4px) scale(.75); }
}
@keyframes bingoTutSkipPill {
    0%,60%,100% { border-color:rgba(0,58,112,.28); background:rgba(255,255,255,.45); color:#68778a; transform:scale(1); box-shadow:none; }
    63%,66% { border-color:var(--state-incorrect); background:var(--state-incorrect-surface); color:var(--state-incorrect-ink); transform:scale(1.05); box-shadow:0 0 10px color-mix(in srgb, var(--state-incorrect) 25%, transparent); }
    69%,70% { transform:translateY(2px) scale(.95); }
    72%,75% { border-color:var(--state-incorrect); background:var(--state-incorrect-surface); color:var(--state-incorrect-ink); transform:scale(1); }
}
@keyframes bingoTutSkipCursor {
    0%,59% { opacity:0; transform:translate(-10px,-10px) scale(.7); }
    62%,65% { opacity:1; transform:translate(-3px,-3px) scale(1); }
    68%,70% { opacity:1; transform:translate(0,2px) scale(.85); }
    73%,100% { opacity:0; transform:translate(4px,6px) scale(.7); }
}

@media (max-width:600px) {
    #tutorialModal { padding: 7px; }
    #tutorialModal .bingo-tutorial-content { max-height:calc(100dvh - 14px); padding:15px 10px 12px; }
    .bingo-tutorial-kicker { padding:4px 8px; font-size:.44rem; }
    #tutorialModal .bingo-tutorial-heading h2 { margin:7px 0 5px; font-size:.78rem; }
    #tutorialModal .bingo-tutorial-heading p { margin-bottom:8px; font-size:.72rem; line-height:1.3; }
    #tutorialModal .bingo-tutorial-demo { grid-template-columns:auto 20px 116px; gap:8px; min-height:158px; padding:10px 6px; }
    .bingo-tut-character { gap:5px 6px; }
    .bingo-tut-avatar { width:72px; height:88px; border-width:2px; border-radius:9px; }
    .bingo-tut-name { width:84px; min-height:20px; padding:2px 6px; }
    .bingo-tut-name b { font-size:.48rem; }
    .bingo-tut-route { gap:3px; }
    .bingo-tut-route i { width:5px; height:5px; }
    .bingo-tut-route span { font-size:1.45rem; }
    .bingo-tut-board {
        --tut-cell-w:28px;
        --tut-cell-h:27px;
        --tut-gap:5px;
        --tut-pad:7px;
        --cursor-wrong-x:calc(var(--tut-pad) + (var(--tut-cell-w) + var(--tut-gap)) * 2 + 16px);
        --cursor-wrong-y:calc(var(--tut-pad) + 4px);
        --cursor-correct-x:calc(var(--tut-pad) + var(--tut-cell-w) + var(--tut-gap) + 7px);
        --cursor-correct-y:calc(var(--tut-pad) + var(--tut-cell-h) + var(--tut-gap) + 5px);
        border-width:2px;
        border-radius:9px;
    }
    .bingo-tut-cell { border-width:1px; border-radius:4px; }
    .bingo-tut-cell .category-art { border-radius:3px; }
    .bingo-tut-mark { top:-5px; right:-5px; width:13px; height:13px; font-size:.48rem; }
    .bingo-tut-cursor { font-size:1.05rem; }
    .bingo-tut-skip { padding:4px 7px; font-size:.5rem; }
    .bingo-tut-skip-cursor { right:-6px; bottom:-12px; font-size:1rem; }
    .bingo-tutorial-cues { flex-wrap:nowrap; gap:4px; margin-top:8px; }
    .bingo-tutorial-cues > span { flex:0 1 auto; gap:3px; padding:4px 5px; font-size:.52rem; }
    .bingo-tutorial-cues i { width:15px; height:15px; flex-basis:15px; font-size:.55rem; }
    #tutorialModal .bingo-tutorial-content .bingo-tutorial-options { margin:8px 0; }
    #tutorialModal .bingo-tutorial-content .bingo-toggle-label { font-size:.82rem; }
    #tutorialModal .bingo-tutorial-content .btn-play { padding:9px 20px; font-size:.72rem; }
}

@media (max-height:650px) {
    #tutorialModal .bingo-tutorial-content { padding-top:9px; padding-bottom:10px; }
    .bingo-tutorial-kicker { display:none; }
    #tutorialModal .bingo-tutorial-heading h2 { margin-top:0; }
    #tutorialModal .bingo-tutorial-heading p { margin-bottom:6px; }
    #tutorialModal .bingo-tutorial-demo { min-height:143px; padding-top:6px; padding-bottom:6px; }
    .bingo-tutorial-cues { margin-top:6px; }
    #tutorialModal .bingo-tutorial-content .bingo-tutorial-options { margin:6px 0; }
    #tutorialModal .bingo-tutorial-content .btn-play { padding-top:7px; padding-bottom:7px; }
}

@media (prefers-reduced-motion: reduce) {
    #tutorialModal .bingo-tutorial-demo::after,
    .bingo-tut-route i,
    .bingo-tut-avatar { animation:none !important; }

    /* Acierto, fallo, cambio de Pokémon y SKIP no son decoración: son el
       propio contenido del tutorial. Igual que en OP, la secuencia de 8 s se
       conserva incluso si el sistema pide menos movimiento. */
    .bingo-tut-photo.is-a,
    .bingo-tut-name b.is-a { animation:bingoTutPhotoA 8s linear infinite !important; }
    .bingo-tut-photo.is-b,
    .bingo-tut-name b.is-b { animation:bingoTutPhotoB 8s linear infinite !important; }
    .bingo-tut-cell.is-correct-target { animation:bingoTutCorrect 8s linear infinite !important; }
    .bingo-tut-cell.is-wrong-target { animation:bingoTutWrong 8s linear infinite !important; }
    .is-correct-target .bingo-tut-mark-check { animation:bingoTutMarkCorrect 8s linear infinite !important; }
    .is-wrong-target .bingo-tut-mark-x { animation:bingoTutMarkWrong 8s linear infinite !important; }
    .bingo-tut-cursor { animation:bingoTutCursor 8s ease-in-out infinite !important; }
    .bingo-tut-skip { animation:bingoTutSkipPill 8s linear infinite !important; }
    .bingo-tut-skip-cursor { animation:bingoTutSkipCursor 8s linear infinite !important; }
}