/* ═══════════════════════════════════════════════════════════════════════════
   SILUETA — "Adivina la Silueta"

   Archivo corto a propósito: el banner de ayer, los modales de resultado, el
   tutorial y los pasos de "cómo jugar" ya viven en common.css. Aquí solo va lo
   propio del juego: la silueta, las pistas (aspecto propio, mismo patrón que
   guess-pokemon.css — el mecanismo de clic/revelado sigue en common.css), la
   tabla de intentos y el tema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Carcasa decorativa aclarada al tema crema del sitio. Los colores de
   acierto/fallo de la tabla de intentos (td.correct/.incorrect, más abajo)
   son informativos y NO se tocan. */
:root {
    --silueta-screen-bg: #f0f0e8;
    --silueta-panel-bg:  transparent;
    --silueta-box-bg:    radial-gradient(circle at 50% 45%, #ffffff 0%, #e6e2d4 70%);
    --silueta-border:    rgba(0, 58, 112, 0.4);
    --silueta-text:      #2a2a2a;
}

/* Pantalla de la Pokédex y contenedor: mismo tratamiento que wordle/bingo/grid */
.pokedex-screen {
    background: var(--silueta-screen-bg) !important;
}

/* .game-container transparente: pokedex-frame.css ya documenta que este
   contenedor debe ser transparente y sin borde -- el panel oscuro que
   había aquí era una sobreescritura decorativa, no necesaria. */
.silueta-container.game-container {
    background: var(--silueta-panel-bg) !important;
    border-color: transparent !important;
    /* Sin max-width/margin:auto: dejaba un margen crema plano muy visible
       a los lados en pantallas anchas (antes se disimulaba porque la
       pantalla era oscura). .hint-container (1fr) y .results-table (100%)
       ya se estiran solos con el nuevo ancho completo. */
    width: 100%;
    margin: 0 auto 20px;
    padding: 26px 22px 34px;
    text-align: center;
}

/* ── Pistas (Tipo / Generación) — mismo patrón que guess-pokemon.css ──────── */
.hint-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0 0 18px;
}

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

.hint-box.disabled { opacity: 0.7; cursor: default; }
.hint-box.enabled  { border-color: var(--poke-yellow, #ffcb05); cursor: pointer; }
.hint-box.enabled:hover { background: var(--poke-navy, #003a70); }
.hint-box.active {
    background: var(--poke-navy, #003a70);
    border-color: var(--poke-yellow, #ffcb05);
    color: #fff;
}

.hint-icon  { color: var(--poke-yellow, #ffcb05); }
.hint-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    color: var(--poke-yellow, #ffcb05);
    display: block;
}
.hint-lock {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 0.78rem;
}

/* ── La silueta ───────────────────────────────────────────────────────────── */
.silhouette-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 22px;
    padding: 12px;
    background: var(--silueta-box-bg);
    border: 3px solid var(--silueta-border);
    border-radius: 16px;
    /* Sombra interior suavizada para el fondo claro -- la silueta negra
       (filter: brightness(0), sin tocar) gana contraste sobre crema. */
    box-shadow: inset 0 0 24px rgba(0, 58, 112, 0.12);
}

/* brightness(0) pinta de negro solo los píxeles opacos: el artwork oficial es
   PNG con canal alfa, así que el fondo se queda transparente y sale una silueta
   limpia sin recortar nada a mano. */
.silhouette-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0);
    transition: filter 0.6s ease;
    /* Que no se pueda arrastrar la imagen fuera para verla a color */
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.silhouette-img.revealed {
    filter: none;
}

/* ── Tabla de intentos (medidas del fruta de WhatPiece) ───────────────────── */
.silueta-table-wrap {
    max-height: 340px;
    overflow-y: auto;
    margin: 20px auto 0;
    /* La tabla en sí no necesita el ancho completo de la pantalla (queda
       demasiado dispersa con solo 3 columnas) -- .hint-container y la
       silueta sí aprovechan el ancho nuevo, la tabla se queda más legible. */
    max-width: 640px;
    border-radius: 8px;
}

/* Historial compacto: mismo lenguaje visual que el results-table de
   Fruta/Wanted en OP (fruta.css, wanted.css) -- sin thead visible, filas
   tipo tarjeta con un único acento de color en la primera celda (no un
   borde pintado en cada columna) y padding ajustado. */
.results-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    background: transparent;
}

.results-table thead {
    display: none;
}

.results-table tbody td {
    padding: 6px 10px;
    vertical-align: middle;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--silueta-text);
    border: 0;
}

.results-table tbody tr {
    filter: drop-shadow(0 4px 7px rgba(18, 53, 91, 0.14));
}

.results-table tbody td:first-child {
    border-radius: 8px 0 0 8px;
}

.results-table tbody td:last-child {
    border-radius: 0 8px 8px 0;
}

.col-img    { width: 20%; }
/* word-break antes solo estaba protegido en el media query móvil — nombres
   traducidos largos (una sola palabra compuesta en alemán) podían desbordar
   la columna en escritorio también. */
.col-name   { width: 50%; font-size: 1.1rem; word-break: break-word; }
.col-result { width: 30%; }

.results-table img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.results-table td.correct {
    color: var(--state-correct-ink);
    background: color-mix(in srgb, var(--state-correct-surface) 72%, transparent);
    font-weight: 700;
}

.results-table td.incorrect {
    color: var(--state-incorrect-ink);
    background: color-mix(in srgb, var(--state-incorrect-surface) 66%, transparent);
}

/* El acento de color va solo en la primera celda de la fila (la imagen),
   no repetido en las tres columnas -- igual que OP (border-left solo en
   tbody tr td:first-child). */
.col-img.correct   { border-left: 4px solid var(--state-correct); }
.col-img.incorrect { border-left: 4px solid var(--state-incorrect); }

.col-result.correct,
.col-result.incorrect {
    font-size: 1.35rem;
    font-weight: 700;
}

.results-table tbody tr.fade-in {
    animation: siluetaRowIn 0.35s ease;
}

@keyframes siluetaRowIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.results-table tbody tr.shake-row {
    animation: siluetaShake 0.4s ease;
}

@keyframes siluetaShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

/* ── Banner ayer ──────────────────────────────────────────────────────────
   Sin override propio hasta ahora: heredaba la versión "polaroid"
   crema/marco navy de common.css (pensada como tarjeta grande), muy
   distinta a la de guess-pokemon.php/wordle.php. Mismo chip oscuro
   compacto que esas dos páginas (accent chip pequeño, igual que
   .hint-box -- no hace falta aclararlo como el resto de la pantalla). */
.yesterday-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    margin: 20px auto;
    background: rgba(14, 22, 45, 0.7);
    border: 1px solid rgba(61, 125, 202, 0.25);
    border-radius: 12px;
    max-width: 380px;
    min-height: 52px;
}

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

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

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

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

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

/* ── Tutorial (namespaced para no pisar el sistema compartido) ────────────── */
.silueta-tutorial-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 6px 0 16px;
}

/* Viñeta oscura de la silueta (paso 1 del tutorial): widget interior sobre
   la pantalla gris común .silueta-step-demo, mismo patrón que el resto de
   widgets internos (buscador, chips, revelado). */
.silueta-tutorial-demo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--silueta-box-bg);
    border: 3px solid var(--silueta-border);
    border-radius: 8px;
}

.silueta-tutorial-shape {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.1rem;
    color: #0a1430;
    text-shadow: 0 0 12px rgba(255, 203, 5, 0.5);
}

.silueta-tutorial-text {
    flex: 1 1 220px;
    min-width: 200px;
    text-align: left;
}

/* Vive dentro del tutorial modal -- sin color propio, hereda el color
   oscuro de #tutorialModal .tutorial-content p (common.css, fondo blanco).
   Antes usaba var(--silueta-text), que es oscuro para la tabla de intentos
   y quedaría invisible aquí si el modal siguiera siendo oscuro. */
.silueta-tutorial-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
}

/* ── Tutorial Silueta: composición OP, colorimetría Pokémon (mismo patrón
   que guess-pokemon/wordle/bingo/grid/higher-lower) — antes usaba el
   sistema compartido .it-*/[data-tutorial-panel] de common.css (tema
   oscuro navy/amarillo, "Pokédex tutorial v2"), namespaced aquí para que
   Silueta tenga la misma caja gris clara que el resto. ── */
#tutorialModal {
    padding: 12px;
    background: rgba(3, 12, 27, .84);
    backdrop-filter: blur(7px);
}

/* Caja exterior: receta compartida en common.css (sección "TUTORIAL
   MODAL — RECETA COMPARTIDA"). Aquí solo lo que varía: dimensiones. */
#tutorialModal .silueta-tutorial-content {
    width: min(760px, 100%);
    max-width: 760px;
    max-height: calc(100dvh - 24px);
    padding: 22px 24px 21px;
    overflow: hidden auto;
}

/* Anula la franja roja tipo Pokédex + el icono de pokebola que
   #tutorialModal .tutorial-content::before/h2::before de common.css meten
   por defecto (pensados para el tema blanco liso) -- igual que hace
   higher-lower.css con .hl-op-tutorial-content::before/::after. */
#tutorialModal .silueta-tutorial-content::before,
#tutorialModal .silueta-tutorial-content::after {
    display: none;
}

.silueta-tutorial-heading {
    text-align: center;
}

.silueta-tutorial-kicker {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    overflow: hidden;
    border: 2px solid var(--poke-navy);
    border-radius: 999px;
    background: var(--poke-yellow);
    color: var(--poke-navy);
    font: .49rem/1 'Press Start 2P', cursive;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.silueta-tutorial-kicker > span {
    color: var(--poke-red);
    font-size: .72rem;
}

#tutorialModal .silueta-tutorial-heading .tutorial-title {
    margin: 8px 0 7px;
    padding: 0;
    border: 0;
    color: var(--poke-navy);
    font: .96rem/1.3 'Press Start 2P', cursive;
    text-shadow: 2px 2px 0 var(--poke-yellow);
}

#tutorialModal .silueta-tutorial-heading .tutorial-title::before {
    display: none;
}

.silueta-tutorial-lead {
    width: min(620px, 100%);
    margin: 0 auto 12px;
    color: #284969;
    font: 500 .82rem/1.4 Roboto, Arial, sans-serif;
}

/* .btn-close-tutorial + svg + hover: receta compartida en common.css
   (pieza B). */

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

/* Misma receta exacta que .hl-op-step-card de higher-lower.css (única
   fuente de verdad copiada aquí, no una aproximación): mismo padding, misma
   fila de 70px para la pantalla-demo, mismo borde/radio/sombra/tipografía. */
.silueta-tutorial-step-card {
    position: relative;
    min-width: 0;
    padding: 10px 9px 11px;
    display: grid;
    grid-template-rows: 70px min-content 1fr;
    justify-items: center;
    gap: 6px;
    overflow: hidden;
    border: 2px solid var(--poke-navy);
    border-radius: 9px;
    background: rgba(255, 255, 255, .58);
    box-shadow: 3px 3px 0 rgba(18, 53, 91, .23);
    text-align: center;
}
.silueta-tutorial-step-card::before {
    content: attr(data-step);
    position: absolute;
    z-index: 4;
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 2px solid var(--poke-yellow);
    border-radius: 50%;
    background: var(--poke-navy);
    color: #fff;
    font: .4rem/1 'Press Start 2P', cursive;
    box-shadow: 1px 1px 0 #111;
}
.silueta-tutorial-step-card > h3 {
    margin: 0;
    color: var(--poke-navy);
    font: .55rem/1.35 'Press Start 2P', cursive;
    text-shadow: 1px 1px 0 var(--poke-yellow);
}
.silueta-tutorial-step-card > p {
    margin: 0;
    color: #334e68;
    font: 500 .71rem/1.28 Roboto, Arial, sans-serif;
}

/* Pantalla gris común a los 4 pasos: receta compartida en common.css
   (pieza C, mismo elemento que .hl-op-anim-box/.pokemon-step-demo). width:100%
   es propio de Silueta -- su tarjeta usa justify-items:center, así que sin
   esto la pantalla no ocuparía todo el ancho de la tarjeta. */
.silueta-step-demo {
    width: 100%;
}

/* Paso 2: chips de pistas */
.silueta-hint-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.silueta-hint-chip {
    padding: 6px 8px;
    border: 2px solid var(--poke-yellow);
    border-radius: 4px;
    background: var(--poke-navy);
    color: #fff;
    font: 700 .52rem/1.2 Roboto, Arial, sans-serif;
    box-shadow: 2px 2px 0 rgba(18, 53, 91, .3);
}

/* Paso 3: buscador -- mismo lenguaje visual que .pokemon-tut-search de
   Guess Pokémon (caja blanca + botón de acción a la derecha). */
.silueta-search-box {
    width: min(180px, 90%);
    height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: stretch;
    overflow: hidden;
    border: 2px solid var(--poke-yellow);
    border-radius: 6px;
    background: #fff;
    box-shadow: 2px 2px 0 var(--poke-navy);
}
.silueta-typed {
    align-self: center;
    padding-left: 8px;
    overflow: hidden;
    color: var(--poke-navy);
    white-space: nowrap;
    font: .52rem/1 'Press Start 2P', cursive;
}
.silueta-search-box kbd {
    display: grid;
    place-items: center;
    border-left: 2px solid var(--poke-navy);
    background: var(--poke-red);
    color: #fff;
    font: 700 .4rem/1 monospace;
}

/* Paso 4: revelado final -- nombre + barras de intentos coloreadas */
.silueta-win-demo {
    width: min(160px, 90%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 7px;
    border: 2px solid var(--poke-yellow);
    border-radius: 5px;
    background: var(--poke-navy);
}
.silueta-win-demo b {
    grid-column: 1 / -1;
    color: var(--poke-yellow);
    font: 700 .48rem/1.2 'Press Start 2P', cursive;
    text-align: center;
}
.silueta-win-demo span {
    height: 5px;
    border-radius: 3px;
    background: var(--state-correct, #36a852);
}

/* Botón "Jugar" del tutorial -- sin este override usaría el .btn-play
   genérico del resto de la página en vez del rojo/navy propio del
   tutorial, igual que higher-lower.css. Selector descendiente (sin ">"):
   a diferencia de higher-lower, aquí el botón vive dentro de
   [data-tutorial-actions], no como hijo directo de .silueta-tutorial-content. */
#tutorialModal .silueta-tutorial-content .btn-play {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 10px 0 0;
    padding: 11px 24px;
    border: 3px solid var(--poke-navy);
    border-radius: 8px;
    background: var(--poke-red);
    color: #fff;
    box-shadow: 0 5px 0 var(--poke-navy), 2px 7px 0 var(--poke-yellow);
    font: .7rem/1.2 'Press Start 2P', cursive;
}

#tutorialModal .silueta-tutorial-content .btn-play:hover,
#tutorialModal .silueta-tutorial-content .btn-play:focus-visible {
    transform: translate(-1px, -1px);
    background: #bd1010;
    color: #fff;
}

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

/* El .ac-avatar de common.css está calibrado para retratos de personaje de OP
   (cover + top center); un sprite de Pokémon hay que verlo entero. */
#autocomplete .ac-avatar {
    object-fit: contain !important;
    object-position: center !important;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .silueta-container.game-container {
        padding: 18px 10px 26px;
        width: 100%;
    }
    .silhouette-box {
        max-width: 240px;
        padding: 8px;
        border-width: 2px;
    }
    .hint-container { gap: 8px; }
    .hint-box {
        padding: 14px 8px;
        gap: 7px;
        border-radius: 12px;
    }
    .hint-icon { width: 18px; height: 18px; }
    .hint-title { font-size: 0.44rem; line-height: 1.4; }
    .hint-lock {
        font-size: 0.62rem;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hint-lock svg { width: 13px; height: 13px; }
    .silueta-table-wrap { max-height: 280px; }
    .results-table { border-spacing: 0 7px; }
    .results-table tbody td { padding: 6px; }
    .col-name { font-size: 0.95rem; line-height: 1.2; word-break: break-word; }
    .results-table img { width: 42px; height: 42px; }
    .silueta-tutorial-text { flex-basis: 100%; text-align: center; }
}

@media (max-width: 380px) {
    .silhouette-box { max-width: 200px; }
    .results-table img { width: 36px; height: 36px; }
    .col-result.correct, .col-result.incorrect { font-size: 1.1rem; }
}

/* ── Tutorial responsive: mismos breakpoints/valores que higher-lower.css ── */
@media (max-width: 575px) {
    #tutorialModal { padding: 7px; }

    .silueta-tutorial-kicker { padding: 4px 8px; font-size: .4rem; }
    #tutorialModal .silueta-tutorial-heading .tutorial-title { margin: 6px 0 5px; font-size: .68rem; }
    .silueta-tutorial-lead { margin-bottom: 9px; font-size: .68rem; line-height: 1.27; }

    .silueta-tutorial-step-card {
        padding: 7px 5px 8px;
        grid-template-rows: 57px min-content 1fr;
    }
    .silueta-tutorial-step-card::before { top: 3px; left: 3px; width: 20px; height: 20px; font-size: .32rem; }
    .silueta-step-demo { height: 57px; }
    .silueta-tutorial-step-card > h3 { font-size: .43rem; line-height: 1.3; }
    .silueta-tutorial-step-card > p { font-size: .6rem; line-height: 1.17; }
    #tutorialModal .silueta-tutorial-content .btn-play { margin-top: 7px; padding: 8px 15px; font-size: .53rem; }
}

@media (max-height: 680px) and (max-width: 575px) {
    #tutorialModal .silueta-tutorial-content { padding: 9px 8px 10px; }
    .silueta-tutorial-kicker { display: none; }
    #tutorialModal .silueta-tutorial-heading .tutorial-title { margin-top: 0; font-size: .62rem; }
    .silueta-tutorial-lead { display: none; }

    .silueta-tutorial-step-card { padding: 5px 4px 6px; grid-template-rows: 48px min-content 1fr; gap: 3px; }
    .silueta-step-demo { height: 48px; }
    .silueta-tutorial-step-card > h3 { font-size: .39rem; }
    .silueta-tutorial-step-card > p { font-size: .55rem; line-height: 1.12; }
    #tutorialModal .silueta-tutorial-content .btn-play { margin-top: 5px; padding: 6px 12px; font-size: .47rem; }
}

/* common.css fuerza width:70px en los pasos del tutorial en móvil */
.info-game .static-step .anim-box {
    width: 100% !important;
    height: auto !important;
}