/* Valens Books · El caso del día (/martina/caso-del-dia/).
   La estética de los libros: el parte en papel de nota con su clip, los
   sospechosos en polaroids, la pizarra y el oro de la contraportada, la
   rejilla de tinta y la tipografía de máquina de escribir. El acento es el
   color del libro hacia el que empuja el caso (--acento, en el <body>). */

.pagina-caso {
    --pizarra: #232323;
    --papel-nota: #fbf5e6;
    --papel-borde: #e8dcc0;
    --tinta-nota: #2a1d14;
    --oro-claro: #e2b863;
    --celda: 40px;
    background: #f7f4ee;
}

.caso-pagina { max-width: 1080px; margin: 0 auto; padding: 8px 16px 56px; }

/* ── Cabecera de la página ───────────────────────────────────────────── */

.caso-intro { max-width: 46em; padding: 18px 0 8px; }
.caso-intro h1 { margin-bottom: .2em; }
.caso-entradilla { margin: 0 0 .6em; font-size: 1.08rem; }
.caso-fecha {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 0; font-family: var(--titulos); font-weight: 600; color: var(--tinta-suave);
}
.caso-nivel .puntos { color: var(--acento); letter-spacing: .1em; }
.caso-racha {
    margin-left: auto; padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px;
    background: #fff; color: var(--tinta); font: 600 .9rem/1.2 var(--titulos); cursor: pointer;
}
.caso-racha:hover { border-color: var(--acento); }
.aviso-borrador {
    margin: 12px 0 0; padding: 8px 12px; background: #fff3c4; border: 1px solid #ecd27a; border-radius: 8px;
    font: 600 .85rem/1.4 var(--titulos);
}
.aviso-borrador p { margin: 0 0 4px; }
.aviso-borrador ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.aviso-borrador a { color: var(--tinta); font-weight: 500; }
.aviso-borrador a[aria-current] { font-weight: 800; text-decoration: none; }
.aviso-repetido {
    grid-column: 1 / -1; margin: 0; padding: 10px 14px; background: #fff; border: 1px solid var(--linea); border-radius: 8px;
    font-size: .95rem;
}
.caso-vacio { padding: 40px 0; }
.caso-temporada {
    margin: 0; padding: 12px 16px; border: 1px solid var(--linea); border-radius: 8px; background: #fff;
    font-size: .95rem; line-height: 1.55; color: var(--tinta-suave);
}
.caso-temporada strong { color: var(--tinta); font-family: var(--titulos); }

/* ── Estructura ──────────────────────────────────────────────────────── */

/* minmax(0, …) y min-width: 0 en todas las rejillas: sin ellos, la tabla de la
   rejilla ensancha la página en el móvil en lugar de desplazarse dentro. */
.caso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 18px; }
.caso > *, .mesa > *, .caso-cabeza > *, .tablero > * { min-width: 0; }
.caso h3 { margin: 0 0 .6em; font-size: 1.15rem; }
.caso-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.mesa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 900px) {
    .pagina-caso { --celda: 44px; }
    .caso-cabeza { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .mesa { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); }
    .pistas-bloque { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
    .con-js .pistas-a-mano { display: none; }
}
@media (max-width: 899px) {
    .con-js .pistas-bloque { display: none; }
}

/* ── El parte: la nota de Martina ────────────────────────────────────── */

.parte {
    position: relative;
    padding: 26px 26px 20px;
    background: var(--papel-nota);
    border: 1px solid var(--papel-borde);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 34px -16px rgba(34,38,46,.4);
    color: var(--tinta-nota);
    font-family: "Special Elite", "Courier New", monospace;
    font-size: .98rem;
    line-height: 1.65;
}
.parte::before {   /* el clip */
    content: ""; position: absolute; top: -14px; left: 26px;
    width: 14px; height: 40px; border: 3px solid #9aa1a8; border-radius: 8px;
}
.parte h2 { margin: .1em 0 .5em; font-family: var(--titulos); font-size: clamp(1.45rem, 2.4vw + .8rem, 2rem); color: var(--tinta); }
.parte p { margin: 0 0 .9em; }
.claqueta {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0;
    margin: 0 0 .4em !important;
    background: var(--pizarra); color: #fff; border-radius: 3px; overflow: hidden;
    font: 600 .72rem/1 var(--titulos); letter-spacing: .12em;
}
.claqueta span {
    padding: 7px 10px;
    background: repeating-linear-gradient(-45deg, #fff 0 8px, var(--pizarra) 8px 16px);
    color: transparent; width: 52px; overflow: hidden; white-space: nowrap;
}
.claqueta { padding-right: 10px; }
.claqueta span + * { margin-left: 10px; }
.parte-loro { display: flex; align-items: center; gap: 10px; font-style: italic; }
.parte-loro img { width: 40px; height: auto; border-radius: 50%; border: 2px solid var(--papel-borde); }
.parte .firma {
    margin: .2em 0 0; text-align: right;
    font-family: "Parisienne", var(--serif); font-size: 1.8rem; line-height: 1;
}

/* La rana escondida en el parte: discreta, como en las ilustraciones. */
.rana {
    position: absolute; transform: translate(-50%, -50%);
    width: 34px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
    color: rgba(42, 29, 20, .32);
}
.rana svg { display: block; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rana svg .ojo { fill: currentColor; stroke: none; }
.rana:hover, .rana:focus-visible { color: rgba(42, 29, 20, .55); outline: none; }
.rana.hallada { color: #3f7d3a; }
.rana.hallada svg { fill: rgba(63, 125, 58, .18); animation: salto .5s ease-out; }
@keyframes salto { 40% { transform: translateY(-10px) scale(1.15); } }

/* ── Los sospechosos: polaroids ──────────────────────────────────────── */

.polaroids {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px;
}
.polaroid {
    position: relative; padding: 8px 8px 10px; background: #fff; border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 10px 22px -12px rgba(34,38,46,.45);
    transform: rotate(-1.2deg); transition: transform .2s, box-shadow .2s;
    font-size: .82rem; line-height: 1.35;
}
.polaroid:nth-child(2n) { transform: rotate(1deg); }
.polaroid:nth-child(3n) { transform: rotate(-.4deg); }
.polaroid::before {   /* la chincheta */
    content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0d38d, var(--oro) 60%, #8b6a2b);
    box-shadow: 0 2px 2px rgba(0,0,0,.3);
}
.polaroid img { width: 100%; aspect-ratio: 16 / 15; object-fit: cover; background: #f8efdc; }
.polaroid strong { display: block; margin-top: 6px; font: 400 1rem/1.2 "Special Elite", monospace; }
.polaroid-rol { display: block; color: #a07a35; font-family: var(--titulos); font-weight: 600; }
.polaroid-rasgo { display: block; margin-top: 4px; color: var(--tinta-suave); font-family: var(--serif); font-style: italic; }
.polaroid.resaltado { transform: rotate(0) scale(1.04); box-shadow: 0 0 0 3px var(--acento), 0 14px 26px -12px rgba(34,38,46,.5); }

/* ── Mecánica del día ────────────────────────────────────────────────── */

.modulo {
    padding: 20px; background: #fff; border: 1px solid var(--linea); border-radius: 8px;
}
.modulo-intro { margin: 0 0 .8em; color: var(--tinta-suave); }
.modulo-respuesta { margin: .8em 0 0; font-weight: 600; min-height: 1.6em; }

/* Martes: las dos notas */
.notas { width: 100%; border-collapse: collapse; font-family: "Special Elite", monospace; font-size: .95rem; }
.notas th, .notas td { padding: 8px 10px; border-bottom: 1px dashed var(--papel-borde); text-align: left; }
.notas thead th { font-family: var(--titulos); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.notas tbody { background: var(--papel-nota); }
.fila-nota {
    padding: 0; border: 0; background: none; font: inherit; color: var(--acento);
    text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
.notas tr.elegida { background: #fff3c4; }
.notas tr.acierto { background: #e3f1e1; }

/* Miércoles: Repetimonas */
.bocadillo {
    position: relative; display: inline-block; margin: 0 0 1em; padding: 12px 18px;
    background: var(--pizarra); color: #fff; border-radius: 16px;
    font: 400 1.2rem/1.3 "Special Elite", monospace;
}
.bocadillo::after {
    content: ""; position: absolute; left: 24px; bottom: -10px;
    border: 10px solid transparent; border-top-color: var(--pizarra); border-bottom: 0;
}
.loro-pregunta { margin: 0 0 .5em; font-weight: 600; }
.loro-opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.loro-opcion {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 8px;
    border: 1px solid var(--linea); border-radius: 8px; background: #fff; cursor: pointer; font: 600 .9rem var(--titulos);
}
.loro-opcion img { width: 48px; height: auto; border-radius: 50%; }
.loro-opcion:hover { border-color: var(--acento); }
.loro-opcion.acierto { border-color: #3f7d3a; box-shadow: 0 0 0 2px #3f7d3a; }

/* Jueves: el interrogatorio */
.interrogatorio-pasos { margin: 0 0 1em; padding-left: 1.3em; color: var(--tinta-suave); font-size: .98rem; }
.interrogatorio-pasos li { margin-bottom: .3em; }
.interrogatorio-pasos strong { color: var(--tinta); }
.declaraciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.declaracion { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.declaracion img { width: 52px; height: auto; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.declaracion p {
    margin: 0; padding: 10px 14px; background: var(--papel-nota);
    border: 1px solid var(--papel-borde); border-radius: 12px; font-size: .98rem; transition: background .15s, opacity .15s;
}
.boton-miente {
    grid-column: 2; justify-self: start; padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px;
    background: #fff; color: var(--tinta); font: 600 .88rem/1.2 var(--titulos); cursor: pointer;
}
@media (min-width: 640px) {
    .declaracion { grid-template-columns: 52px minmax(0, 1fr) auto; }
    .boton-miente { grid-column: 3; }
}
.boton-miente:hover { border-color: var(--tinta-suave); }
.boton-miente:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.boton-miente[aria-pressed="true"] { background: var(--error); border-color: var(--error); color: #fff; }
.declaracion.supuesta-mentira p { background: #fde4e4; border-color: #e0a3a3; text-decoration: line-through; text-decoration-color: rgba(179, 38, 30, .5); }
.declaracion.supuesta-verdad p { background: #e9f3e7; border-color: #bcd8b6; }
.declaracion.supuesta-verdad .boton-miente { color: #3f7d3a; }
.suposicion { margin-top: 16px; padding: 14px 16px; background: #f7f4ee; border-radius: 8px; }
.suposicion p { margin: 0; }
.suposicion-vacia { color: var(--tinta-suave); font-style: italic; }
.suposicion-titulo { font: 700 1rem var(--titulos); margin-bottom: 6px !important; }
.suposicion-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.suposicion-lista .falso span { color: var(--error); font-weight: 700; }
.suposicion-lista .cierto span { color: #3f7d3a; font-weight: 700; }
.suposicion-consejo { font-size: .9rem; color: var(--tinta-suave); }

/* Viernes: el plano */
.plano-marco { max-width: 560px; }
.plano { width: 100%; height: auto; display: block; touch-action: manipulation; }
.plano-suelo { fill: var(--papel-nota); stroke: var(--tinta-nota); stroke-width: 1.5; }
.trama-linea { stroke: rgba(42, 29, 20, .16); stroke-width: 2; }
.plano-adorno { fill: rgba(42, 29, 20, .05); stroke: rgba(42, 29, 20, .3); stroke-dasharray: 4 3; }
.plano-adorno-texto { font: 400 12px "Special Elite", monospace; fill: rgba(42, 29, 20, .5); text-anchor: middle; }
.zona { cursor: pointer; outline: none; }
.zona-forma { fill: url(#trama); stroke: var(--tinta-nota); stroke-width: 1.6; transition: stroke .15s; }
.zona-texto { font: 400 11px "Special Elite", monospace; fill: var(--tinta-nota); text-anchor: middle; pointer-events: none; }
.zona.destino .zona-forma { stroke: var(--acento); stroke-width: 3; stroke-dasharray: 6 4; }
.zona:hover .zona-forma, .zona:focus-visible .zona-forma { stroke: var(--acento); stroke-width: 3; }
.ocupante { pointer-events: none; }
.plano-bandeja { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ficha-plano {
    display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--linea);
    border-radius: 999px; background: #fff; font: 600 .9rem var(--titulos); cursor: grab; touch-action: none;
}
.ficha-plano img { width: 36px; height: auto; border-radius: 50%; pointer-events: none; }
.ficha-plano.colocada { opacity: .55; }
.ficha-plano.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); opacity: 1; }
.fantasma {
    position: fixed; z-index: 50; width: 52px; height: auto; margin: -26px 0 0 -26px; border-radius: 50%;
    pointer-events: none; box-shadow: 0 8px 18px rgba(0,0,0,.35); border: 2px solid #fff;
}

/* Sábado: la nota en clave y su disco */
.mensaje-cifrado {
    margin: 0; padding: 12px 16px; background: var(--pizarra); color: #fff; border-radius: 6px;
    font: 400 1.15rem/1.5 "Special Elite", monospace; letter-spacing: .12em; word-spacing: .4em;
}
.clave-juego { display: grid; gap: 18px; align-items: center; margin-top: 16px; }
@media (min-width: 640px) { .clave-juego { grid-template-columns: 250px 1fr; } }
.disco { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.disco-exterior, .disco-interior { position: absolute; inset: 0; border-radius: 50%; }
.disco-exterior { background: var(--pizarra); }
.disco-interior { inset: 30px; background: var(--papel-nota); transition: transform .25s ease; }
.disco-exterior span, .disco-interior span {
    position: absolute; left: 50%; top: 50%; width: 18px; margin: -9px 0 0 -9px; text-align: center;
    font: 400 15px/18px "Special Elite", monospace;
}
.disco-exterior span { color: #fff; transform: rotate(calc(var(--i) * 360deg / 26)) translateY(-106px); }
.disco-interior span { color: var(--tinta-nota); transform: rotate(calc(var(--i) * 360deg / 26)) translateY(-76px); }
.disco-centro {
    position: absolute; inset: 86px; display: grid; place-items: center; border-radius: 50%;
    background: var(--oro); color: var(--pizarra); font: 700 .7rem var(--titulos); letter-spacing: .14em;
}
.clave-ayuda { margin: 0 0 .6em; font-size: .92rem; color: var(--tinta-suave); }
.clave-botones { display: flex; align-items: center; gap: 10px; }
.clave-botones input { flex: 1; accent-color: var(--acento); }
.giro { display: block; margin-top: 4px; font: 600 .85rem var(--titulos); color: var(--tinta-suave); }
.descifrado {
    margin: .7em 0; padding: 10px 14px; min-height: 2.8em; background: var(--papel-nota); border: 1px dashed var(--papel-borde);
    font: 400 1.1rem/1.5 "Special Elite", monospace; letter-spacing: .1em; word-spacing: .4em;
}

/* Domingo: el candado */
.candado-letras { margin: 0 0 .8em; font-size: .95rem; }
.candado {
    display: inline-flex; gap: clamp(3px, 1.2vw, 6px); padding: 14px clamp(10px, 3vw, 16px); border-radius: 14px;
    background: linear-gradient(#d8b46a, #a77d32); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 8px 18px -8px rgba(0,0,0,.5);
}
.rueda {
    display: flex; flex-direction: column; align-items: center; width: clamp(32px, 10vw, 42px); border-radius: 8px;
    background: var(--pizarra); color: #fff; outline: none;
}
.rueda:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--acento); }
.rueda-letra { font: 700 1.5rem/1.6 var(--titulos); }
.rueda-flecha { width: 100%; padding: 2px 0; border: 0; background: none; color: var(--oro-claro); cursor: pointer; font-size: .8rem; }
.candado.abierto { background: linear-gradient(#bfe0b7, #6aa25f); }
.candado-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }

/* ── Pistas ──────────────────────────────────────────────────────────── */

.pistas-bloque, .pistas-a-mano {
    padding: 18px 20px; background: var(--papel-nota); border: 1px solid var(--papel-borde); border-radius: 6px;
}
.pistas-nota { display: block; margin-top: 2px; font: 400 .85rem var(--serif); font-style: italic; color: var(--tinta-suave); }
.pistas { margin: 0; padding-left: 1.4em; font-size: .98rem; line-height: 1.5; }
.pistas li { margin: 0 0 .55em; padding-left: .2em; }
.con-js .pistas li { cursor: pointer; }
.pistas li.usada { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.pistas li.extra { list-style: "★ "; }
.extra-origen { font: 600 .8rem var(--titulos); color: var(--acento); text-transform: uppercase; letter-spacing: .05em; }
.ref {
    font-weight: 600; text-decoration: underline dotted rgba(0,0,0,.35); text-underline-offset: 3px;
    border-radius: 3px; transition: background .2s;
}
.con-js .ref { cursor: pointer; }
.ref.resaltado { background: #fff1b8; }
.hecho { margin: 1em 0 0; padding: 10px 12px; background: #fff; border-radius: 6px; font-size: .98rem; }
.hecho > span:first-child { font: 700 .78rem var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--rojo); }

/* En el móvil, las pistas van pegadas encima de la rejilla y se pliegan. */
.pistas-a-mano { position: sticky; top: 0; z-index: 5; max-height: 42vh; overflow: auto; padding: 0 16px 10px; }
.pistas-a-mano summary {
    position: sticky; top: 0; padding: 10px 0; background: var(--papel-nota); cursor: pointer;
    font: 700 1rem var(--titulos);
}
.pistas-a-mano .hecho { margin-top: .4em; }

/* ── Tablero: la rejilla ─────────────────────────────────────────────── */

.tablero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.bloque-rejilla, .acusacion, .ayudas, .sopa-bloque {
    padding: 18px; background: #fff; border: 1px solid var(--linea); border-radius: 8px;
}
.rejilla-herramientas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.herramienta {
    padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta);
    font: 600 .85rem/1.2 var(--titulos); cursor: pointer;
}
.herramienta:hover:not(:disabled) { border-color: var(--acento); }
.herramienta:disabled { opacity: .4; cursor: default; }
.herramienta[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.herramienta:focus-visible, .celda:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

.rejilla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
/* En el móvil, la casilla sale del ancho que queda (pantalla − márgenes − nombres),
   repartido entre las columnas; nunca menos de 24 px (WCAG 2.2, tamaño de objetivo). */
@media (max-width: 899px) {
    .rejilla-marco { --celda: clamp(24px, calc((100vw - 120px) / var(--columnas, 8)), 40px); }
    .bloque-rejilla { padding: 14px 10px; }
}
.rejilla { border-collapse: collapse; margin: 0 auto; }
.rejilla td, .rejilla th { padding: 0; }
.rejilla .grupo {
    padding: 0 0 6px; text-align: center; font: 700 .78rem var(--titulos); letter-spacing: .04em; color: var(--tinta-suave);
}
.rejilla .columna { vertical-align: bottom; height: 108px; }
.rejilla .columna span {
    display: block; margin: 0 auto 6px; writing-mode: vertical-rl; transform: rotate(180deg);
    font: 400 .82rem/1.1 "Special Elite", monospace; white-space: nowrap; max-height: 104px; overflow: hidden; text-overflow: ellipsis;
}
.fila-nombre { padding-right: 8px !important; text-align: left; white-space: nowrap; }
.fila-nombre img { display: inline-block; width: 32px; height: auto; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.fila-nombre span { font: 400 .9rem "Special Elite", monospace; vertical-align: middle; }
/* Por debajo de 900 px, la columna de nombres mide siempre 64 px (retrato
   arriba, nombre debajo): es lo que descuenta el cálculo de --celda de arriba.
   Si fuera más ancha, la tabla no cabría y Safari la apretaría hasta que el
   nombre pisara las casillas (pasaba en el iPhone Pro Max, de 430 px). */
@media (max-width: 899px) {
    .fila-nombre { width: 64px; min-width: 64px; max-width: 64px; padding: 2px 4px 2px 0 !important; text-align: center; white-space: normal; }
    .fila-nombre img { display: block; width: 30px; margin: 0 auto 2px; }
    .fila-nombre span { display: block; font-size: .7rem; line-height: 1.1; overflow-wrap: anywhere; }
}
.celda {
    display: block; width: var(--celda); height: var(--celda); padding: 0;
    border: 1px solid #c9c3b6; border-radius: 0; background: #fff;
    font: 700 1.05rem/1 var(--titulos); color: var(--tinta); cursor: pointer;
    transition: background .12s, transform .08s;
}
.celda:active { transform: scale(.92); }
td.inicio-grupo .celda { border-left: 2px solid var(--tinta); }
.rejilla tbody tr:first-child .celda { border-top: 2px solid var(--tinta); }
.celda-x { color: var(--tinta); }
.celda-v { color: #fff; background: var(--acento); }
.celda-a { color: #c4beb1; }
.celda-lapiz { background: repeating-linear-gradient(-45deg, #fff 0 4px, #f0eee9 4px 8px); color: #8a8478; }
.celda-v.celda-lapiz { background: #b9c7c6; color: #fff; }
.celda-choque { box-shadow: inset 0 0 0 3px var(--error); }
.celda-ayuda { box-shadow: inset 0 0 0 3px var(--oro); }
.rejilla .foco, .rejilla .resaltado { background: #fff7d6; }
.rejilla tr.resaltado .celda:not(.celda-v), .rejilla td.resaltado .celda:not(.celda-v), .rejilla tr.foco .celda:not(.celda-v), .rejilla td.foco .celda:not(.celda-v) { background: #fff7d6; }
.rejilla th.resaltado span, .rejilla th.foco span { color: var(--acento); font-weight: 700; }

/* ── Ayudas ──────────────────────────────────────────────────────────── */

.ayudas { display: flex; gap: 12px; align-items: flex-start; }
.ayudas-loro { flex: none; width: 44px; height: auto; border-radius: 50%; }
.boton-ayuda {
    padding: 8px 14px; border: 1px dashed var(--acento); border-radius: 999px; background: #fff;
    color: var(--acento); font: 600 .92rem var(--titulos); cursor: pointer;
}
.boton-ayuda:hover { background: #f1f7f6; }
.ayuda { margin: .6em 0 0; padding: 8px 12px; background: var(--papel-nota); border-radius: 10px; font-size: .95rem; }
.ayudas[hidden], .boton-ayuda[hidden] { display: none; }

/* ── Acusación ───────────────────────────────────────────────────────── */

.acusacion fieldset { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.acusacion legend { margin-bottom: 6px; font: 700 .95rem var(--titulos); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span {
    display: inline-block; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 8px; background: #fff;
    font: 600 .92rem/1.2 var(--titulos);
}
.opcion-foto { display: flex; flex-direction: column; align-items: center; width: 86px; padding: 6px 6px 0; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
.opcion-foto img { width: 64px; height: auto; border-radius: 4px; }
.opcion-foto span { border: 0; padding: 4px 0 6px; background: none; }
.opcion input:checked + span, .opcion input:checked ~ span { background: var(--acento); border-color: var(--acento); color: #fff; }
.opcion-foto:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); background: var(--acento); }
.opcion-foto input:checked ~ span { background: none; }
.opcion input:focus-visible + span, .opcion input:focus-visible ~ span { outline: 3px solid var(--tinta); outline-offset: 2px; }
.acusacion-aviso { min-height: 1.5em; margin: 0 0 10px; font-weight: 600; color: var(--error); }
.enlace-rendirse {
    display: inline-block; margin-top: 10px; padding: 4px 0; border: 0; background: none; color: var(--tinta-suave);
    font: 400 .9rem var(--serif); text-decoration: underline; cursor: pointer;
}
.rendirse-confirma { margin-top: 10px; padding: 12px; background: #fdf1f1; border-radius: 8px; }
.rendirse-confirma p { margin: 0 0 8px; }
.rendirse-confirma .boton { padding: 10px 18px; font-size: .95rem; margin-right: 10px; }
.caso-terminado .acusacion, .caso-terminado .ayudas { display: none; }

.sacude { animation: sacude .4s; }
@keyframes sacude { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.tablero-pie { margin: 0; text-align: right; }

/* ── Sopa de letras ──────────────────────────────────────────────────── */

.opcional { font: 400 .8rem var(--serif); font-style: italic; color: var(--tinta-suave); margin-left: 6px; }
.sopa-juego { display: grid; gap: 18px; align-items: start; }
@media (min-width: 720px) { .sopa-juego { grid-template-columns: auto 1fr; } }
.sopa {
    display: grid; grid-template-columns: repeat(var(--columnas), clamp(26px, 8vw, 36px)); gap: 0;
    width: max-content; max-width: 100%; margin: 0 auto;
    background: var(--papel-nota); border: 2px solid var(--tinta-nota); user-select: none; -webkit-user-select: none;
    touch-action: none;
}
.letra {
    display: grid; place-items: center; aspect-ratio: 1; font: 400 clamp(.9rem, 3.6vw, 1.15rem) "Special Elite", monospace;
    color: var(--tinta-nota); cursor: pointer;
}
.letra.seleccion { background: #fff1b8; }
.letra.encontrada { background: color-mix(in srgb, var(--acento) 22%, transparent); }
.letra.sobrante { background: #f6e0a8; font-weight: 700; }
.sopa-palabras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font: 400 .92rem "Special Elite", monospace; }
.sopa-palabras .hallada { text-decoration: line-through; color: var(--tinta-suave); }
.porque-titulo { margin: 1.2em 0 .4em; font: 700 .95rem var(--titulos); }
.porque-molde { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.porque-palabra { display: inline-flex; gap: 2px; }
.porque-hueco {
    display: grid; place-items: center; width: 24px; height: 30px; border-bottom: 2px solid var(--tinta-nota);
    font: 700 1.05rem var(--titulos); color: var(--tinta-nota);
}
.porque-hueco.lleno { animation: cae .3s ease-out; }
@keyframes cae { from { transform: translateY(-12px); opacity: 0; } }

/* ── Cierre ──────────────────────────────────────────────────────────── */

.caso-final {
    position: relative; padding: 30px 22px 26px; border-radius: 10px; overflow: hidden;
    background: var(--pizarra); color: #e9e4d8;
}
.caso-final:focus { outline: none; }
.caso-final h2 { margin: 0 0 .6em; color: #fff; font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem); }
.caso-final a:not(.boton):not(.boton-amazon) { color: var(--oro-claro); }
.cierre-sello {
    position: absolute; right: 14px; top: 18px; padding: 6px 14px; border: 3px solid #e05a5a; border-radius: 6px;
    color: #e05a5a; font: 800 1.1rem var(--titulos); letter-spacing: .14em; text-transform: uppercase;
    transform: rotate(8deg); opacity: .9;
}
.caso-final:not([hidden]) .cierre-sello { animation: sello .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sello { from { transform: rotate(-10deg) scale(2.4); opacity: 0; } }
.caso-final.rendido .cierre-sello { border-color: var(--oro); color: var(--oro); }
.cierre-fue { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 18px; }
.cierre-fue div { padding: 12px 14px; background: rgba(255,255,255,.06); border-radius: 8px; }
.cierre-fue dt { font: 600 .78rem var(--titulos); letter-spacing: .08em; text-transform: uppercase; color: var(--oro-claro); }
.cierre-fue dd { margin: 4px 0 0; font: 400 1.15rem "Special Elite", monospace; color: #fff; }
.cierre-porque { grid-column: 1 / -1; }
.cierre-letra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--titulos); }
.cierre-letra-nota { flex-basis: 100%; font: 400 .9rem var(--serif); color: #bdb6a8; }
.letra-panel {
    position: relative; display: inline-grid; place-items: center; width: 52px; height: 64px; border-radius: 6px;
    background: #111; color: #fff; font: 800 2.2rem var(--titulos); box-shadow: inset 0 -2px 0 rgba(255,255,255,.1);
}
.letra-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.18); }
.letra-panel.fija { color: var(--oro-claro); }
.letra-panel.mini { width: 30px; height: 38px; font-size: 1.2rem; margin-right: 4px; background: var(--pizarra); }
.cierre-datos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.cierre-datos li { padding: 6px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font: 600 .9rem var(--titulos); }
/* Retar a alguien: tras la nota de Martina, antes del libro. Ancho completo en el móvil. */
.reto { margin: 0 0 22px; }
.boton-reto { display: block; width: 100%; padding: 18px 24px; font-size: 1.2rem; }
@media (min-width: 600px) { .boton-reto { display: inline-block; width: auto; min-width: 320px; } }
.reto-nota { margin: 8px 0 0; font: 400 .85rem var(--serif); color: #bdb6a8; }
.reto-opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.reto-opciones[hidden] { display: none; }
.boton-reto-opcion {
    flex: 1 1 140px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 14px;
    background: transparent; color: #fff !important; font: 600 1rem/1.2 var(--titulos); text-align: center;
    text-decoration: none; cursor: pointer;
}
.boton-reto-opcion:hover { background: rgba(255,255,255,.08); }
.boton-reto-opcion:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.caso-final .boton { background: #fff; color: var(--pizarra); }
.cierre-pasos { margin: 0 0 18px; padding: 14px 16px; background: rgba(255,255,255,.06); border-radius: 8px; }
.cierre-pasos summary { cursor: pointer; font: 700 1rem var(--titulos); color: #fff; }
.cierre-pasos ol { margin: 12px 0 0; padding-left: 1.3em; }
.cierre-pasos li { margin-bottom: .5em; }
.como-acabo {
    margin: 0 0 22px; padding: 22px 22px 14px; background: var(--papel-nota); color: var(--tinta-nota); border-radius: 3px;
    font-family: "Special Elite", monospace; line-height: 1.65; transform: rotate(-.4deg);
}
.como-acabo h3 { font-family: var(--titulos); color: var(--tinta); }
.como-acabo .firma { text-align: right; font: 1.8rem/1 "Parisienne", var(--serif); margin: 0; }
.cierre-libro {
    display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; margin: 0 0 20px; padding: 18px;
    background: #fff; color: var(--tinta); border-radius: 8px;
}
.cierre-libro h3 { margin: 0 0 .3em; font-size: 1.25rem; }
.cierre-libro p { margin: 0 0 .8em; }
.cierre-libro .antetitulo { margin: 0 0 .2em; }
.cierre-libro a:not(.boton-amazon) { color: var(--acento) !important; }
.cierre-libro .portada { width: 110px; }
.cierre-mas p { margin: 0 0 .8em; }
.cierre-novedades { margin-top: 20px; padding: 18px; background: rgba(255,255,255,.06); border-radius: 8px; }
.cierre-novedades h3 { color: #fff; }
.cierre-novedades label, .cierre-novedades .letra-pequena { color: #d9d3c6; }
.cierre-novedades .letra-pequena a { color: var(--oro-claro); }
@media (max-width: 520px) {
    .cierre-libro { grid-template-columns: 80px 1fr; }
    .cierre-libro .portada { width: 80px; }
    .cierre-sello { font-size: .8rem; right: 8px; top: 8px; }
}

/* ── Racha ───────────────────────────────────────────────────────────── */

.racha-dialogo {
    width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.racha-dialogo::backdrop { background: rgba(21, 23, 28, .55); }
.racha-dialogo h2 { margin: 0 0 .6em; }
.racha-cerrar { position: absolute; right: 12px; top: 8px; border: 0; background: none; font-size: 1.8rem; cursor: pointer; color: var(--tinta-suave); }
.racha-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 18px; text-align: center; }
.racha-cifras dd { margin: 0; font: 800 1.8rem var(--titulos); }
.racha-cifras dt { order: 2; font: 600 .72rem var(--titulos); color: var(--tinta-suave); }
.racha-cifras div { display: flex; flex-direction: column-reverse; }
.racha-barras { display: grid; gap: 6px; margin-bottom: 16px; }
.barra { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font: 600 .8rem var(--titulos); }
.barra-relleno { display: block; padding: 2px 6px; background: var(--acento); color: #fff; border-radius: 3px; text-align: right; }
.racha-letras { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font: 600 .9rem var(--titulos); }

/* ── Cómo se juega ───────────────────────────────────────────────────── */

.caso-como { max-width: 46em; margin-top: 48px; }
.caso-como h2 { margin-top: 0; }
.pasos-juego li, .semana-juego li { margin-bottom: .5em; }

/* ── Imprimir: el caso para resolver con lápiz ───────────────────────── */

@media print {
    .promo, .cabecera, .migas, .pie, .caso-racha, .rejilla-herramientas, .ayudas, .acusacion, .tablero-pie,
    .caso-final, .caso-como, .pistas-a-mano, .rana, .plano-bandeja, .clave-mandos, .candado-botones, .aviso-repetido,
    .fichas .polaroid-rasgo { display: none !important; }
    .pagina-caso { background: #fff; }
    .con-js .pistas-bloque { display: block !important; position: static; max-height: none; }
    .mesa, .caso-cabeza { grid-template-columns: 1fr 1fr !important; }
    .parte, .polaroid, .como-acabo { box-shadow: none; transform: none; }
    .celda-v { background: #fff; color: var(--tinta); }
    .sopa-bloque[hidden] { display: block !important; }
    .modulo, .bloque-rejilla, .sopa-bloque { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-caso *, .pagina-caso *::before, .pagina-caso *::after { animation: none !important; transition: none !important; }
}

/* Candado: la rueda sin letra (quien empezó a mitad de semana) se ve apagada. */
.rueda.desconocida { background: #4a4a4a; }
.rueda.desconocida .rueda-letra { color: var(--oro-claro); }