/* Acertijos (/acertijos): lo específico de la partida. El resto —portada, resultado,
   ranking— reutiliza las clases de la página del Reto (game.css). */

.riddle-hero-icon {
  font-size: 2.6rem; line-height: 1; color: inherit;
  background: rgba(99, 102, 241, .16); border-color: rgba(99, 102, 241, .38);
}

.riddle-play {
  width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box;
  padding: 4px 14px calc(88px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.riddle-topbar { width: 100%; display: flex; align-items: center; gap: 10px; }
.riddle-streak { flex: 1 1 auto; font-weight: 800; font-size: 1.05rem; color: var(--heading, #f1f5f9); }
.riddle-close {
  flex: 0 0 auto; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font-size: 1rem; font-weight: 800; line-height: 1; color: var(--text-muted, #94a3b8);
  background: transparent; border: 1px solid var(--border-color, rgba(148, 163, 184, .3));
}
.riddle-close.is-armed { border-color: #ef4444; color: #f87171; font-size: .85rem; }
.riddle-streak strong { color: #f59e0b; font-size: 1.35rem; margin-left: 4px; }
.riddle-timer {
  min-width: 2.4ch; text-align: right; font-weight: 900; font-size: 1.7rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--heading, #f1f5f9);
}
.riddle-timer.is-warning { color: #f59e0b; }
.riddle-timer.is-urgent { color: #ef4444; animation: riddle-pulse .7s ease-in-out infinite; }

.riddle-timebar { width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, .22); }
.riddle-timebar-fill {
  height: 100%; width: 100%; border-radius: 999px; background: #22c55e;
  transform-origin: left center; transition: transform .25s linear, background-color .4s;
}
.riddle-timebar-fill.is-warning { background: #f59e0b; }
.riddle-timebar-fill.is-urgent { background: #ef4444; }

.riddle-clue-card {
  width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; text-align: center;
  background: var(--surface, #1e293b); border: 1px solid var(--border-color, rgba(148, 163, 184, .22));
}
.riddle-clue { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.38; color: var(--text-color, #e5e7eb); }
/* Acertijo nuevo: la tarjeta salta, se llena de color con la letra en blanco y se serena; el tablero espera un
   instante y aparece de golpe (sin cascada) para que la vista caiga antes en la definición. */
.riddle-clue-card.is-new { animation: riddle-clue-nudge 1.7s ease-out backwards; }
.riddle-clue-card.is-new .riddle-clue { animation: riddle-clue-ink 1.7s ease-out backwards; }
body.riddle-page #grid .letter.grid-enter { animation: grid-enter .28s ease-out .45s both !important; animation-delay: .45s !important; }

/* Se acabó el tiempo: la palabra que quedó se enciende letra a letra y el resto del tablero se apaga. */
#grid.is-revealing .letter { transition: opacity .35s; }
#grid.is-revealing .letter:not(.reveal-path) { opacity: .25; }
#grid .letter.reveal-path {
  background: linear-gradient(145deg, #fbbf24, #d97706); color: #fff; opacity: 1;
  animation: riddle-reveal .4s cubic-bezier(.34, 1.56, .64, 1) var(--reveal-delay, 0ms) both;
}

.riddle-attribution { margin: 8px 0 0; font-size: .72rem; color: var(--text-muted, #94a3b8); }
.riddle-attribution a { color: inherit; text-decoration: underline; }

/* Tres pistas selladas: candado y coste, con borde discontinuo y un latido suave que invita a abrirlas.
   Al tocar una se da la vuelta y enseña su valor en el mismo sitio (borde continuo, sin candado ni coste). */
.riddle-hints { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.riddle-hint {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 68px; padding: 6px 4px; border-radius: 14px; cursor: pointer; color: var(--text-color, #e5e7eb);
  background: linear-gradient(160deg, rgba(99, 102, 241, .20), rgba(79, 70, 229, .08));
  border: 2px dashed rgba(129, 140, 248, .6);
  animation: riddle-seal 2.6s ease-in-out infinite;
}
.riddle-hint:nth-child(2) { animation-delay: .25s; }
.riddle-hint:nth-child(3) { animation-delay: .5s; }
.riddle-hint-value { font-size: 1.35rem; line-height: 1.1; }
.riddle-hint-name { font-size: .78rem; font-weight: 800; }
.riddle-hint-cost { font-size: .68rem; font-weight: 700; color: var(--text-muted, #94a3b8); }
.riddle-hint:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.riddle-hint:disabled:not(.is-open) { opacity: .42; cursor: default; animation: none; }
.riddle-hint.is-open {
  cursor: default; animation: none; opacity: 1;
  background: rgba(99, 102, 241, .28); border: 2px solid rgba(129, 140, 248, .95);
}
.riddle-hint.is-open .riddle-hint-value { font-size: clamp(1.6rem, 3.4dvh, 2.2rem); font-weight: 900; }
.riddle-hint.is-open .riddle-hint-cost { visibility: hidden; }
.riddle-hint.just-opened .riddle-hint-value { animation: riddle-flip .45s cubic-bezier(.34, 1.56, .64, 1) both; }

/* Modo inmersivo: mientras se juega no hay cabecera ni barra inferior y la partida ocupa toda la
   pantalla. El panel se lleva el hueco que sobra y es lo más grande que quepa (cqmin = el lado menor del
   contenedor), así que no hay que adivinar alturas para cada móvil. */
body.riddle-playing .page-topbar,
body.riddle-playing .home-nav--fixed { display: none; }
body.riddle-playing.has-bottom-nav { padding-bottom: 0; }
/* La página ya trae su margen lateral en el body: no se suma otro (antes el panel perdía 56 px de ancho). */
body.riddle-playing { padding: 0 8px; }
body.riddle-playing .riddle-play {
  /* Altura DEFINIDA: solo así los hijos flex se reparten el sobrante o se encogen; con un min-height la
     caja crece con su contenido y desborda. Si aun encogido todo no cabe, esta caja se desplaza. */
  height: 100dvh; overflow-y: auto; box-sizing: border-box;
  /* El sobrante (móviles altos) se reparte a partes iguales entre los elementos: ni una tarjeta enorme
     con una línea perdida ni aire muerto pegado al panel. */
  justify-content: space-evenly; gap: clamp(6px, 1.1dvh, 14px);
  padding: max(10px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
}
/* Lo que rodea al panel crece con la altura que sobra (móviles altos) y se compacta en los bajos. */
body.riddle-playing .riddle-clue { font-size: clamp(1rem, 2.3dvh, 1.4rem); }
body.riddle-playing .riddle-clue-card { padding: clamp(10px, 1.6dvh, 20px) 16px; }
body.riddle-playing .riddle-timer { font-size: clamp(1.6rem, 3.3dvh, 2.2rem); }
body.riddle-playing .riddle-hint { min-height: clamp(62px, 8dvh, 92px); }
@media (max-height: 700px) {
  body.riddle-playing .riddle-hints { gap: 6px; }
  body.riddle-playing .riddle-hint { min-height: 56px; padding-block: 4px; }
  body.riddle-playing .riddle-hint-value { font-size: 1.15rem; }
  body.riddle-playing .riddle-hint-name { font-size: .72rem; }
}
.riddle-board-area {
  /* Cuadrado y del ancho de la pantalla; si falta altura se encoge (flex-shrink) hasta 220 px y el
     panel se ajusta al lado menor. Si sobra, no crece: el sobrante se reparte entre todos (space-evenly). */
  flex: 0 1 auto; aspect-ratio: 1 / 1; min-height: 220px; width: 100%; padding: 0;
  container-type: size; display: grid; place-items: center;
}

.riddle-page .grid-container { padding: 6px; box-sizing: border-box; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
.riddle-page .grid { width: 100%; height: 100%; }
/* Sin container queries (WebView muy antiguo): el cálculo por altura de antes. */
@supports not (width: 1cqw) {
  .riddle-page .grid-container { width: min(96vw, calc(100dvh - 330px)); height: min(96vw, calc(100dvh - 330px)); }
}
.riddle-page .current-word { width: 100%; max-width: 100%; margin: 0; padding: 8px 12px; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.riddle-status { position: relative; width: 100%; }

#riddle-best { margin-bottom: 18px; }
#riddle-best[hidden] { display: none; }
#riddle-end-icon { font-size: 3rem; line-height: 1; }

.riddle-feedback {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 12px;
  font-weight: 800; font-size: 1.1rem; text-align: center; color: var(--heading, #f1f5f9);
  background: var(--surface, #1e293b); pointer-events: none;
}
.riddle-feedback:empty { display: none; }
.riddle-feedback.is-ok { color: #22c55e; animation: riddle-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.riddle-feedback.is-bad { color: #f87171; }
.riddle-feedback.is-reveal { color: #fbbf24; animation: riddle-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }

.riddle-reveal {
  margin: 14px 0; padding: 12px 14px; border-radius: 14px; text-align: center;
  background: var(--surface, #1e293b); color: var(--text-color, #e5e7eb);
  border: 1px solid var(--border-color, rgba(148, 163, 184, .25));
}
.riddle-reveal[hidden] { display: none; }
.riddle-reveal-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted, #94a3b8); }
.riddle-reveal-word { margin-top: 2px; font-size: 1.6rem; font-weight: 900; letter-spacing: .08em; color: var(--heading, var(--text-color, #f1f5f9)); }
/* Etiquetas de la pantalla de fin: sobre el degradado el gris tenue y el 55 % de opacidad no se leen. */
.riddle-page #riddle-end-streak-label { opacity: .9; font-weight: 700; }
.riddle-reveal-clue { margin: 6px 0 0; font-size: .92rem; font-weight: 600; color: var(--text-color, #e5e7eb); }

/* Modo claro: lo que va directamente sobre el degradado, en claro. */
body.theme-light.riddle-page .riddle-streak,
body.theme-light.riddle-page .riddle-timer { color: #f8fafc; }
/* El mensaje va sobre la barra de la palabra, que en claro es una tarjeta blanca. */
body.theme-light.riddle-page .riddle-feedback { color: #1f2937; background: rgba(255, 255, 255, .95); }
/* Portada en claro: la descripción lavanda y el naranja de la tanda máxima no se leen sobre el degradado. */
body.theme-light.riddle-page .reto-sub { color: #f8fafc; }
body.theme-light.riddle-page #riddle-best { color: #fff; }
body.theme-light.riddle-page #riddle-best-num { color: #fde68a; }
body.theme-light.riddle-page #riddle-end-record { color: #fff; background: #b45309; border-color: #92400e; }
body.theme-light.riddle-page .riddle-feedback.is-reveal { color: #b45309; }
body.theme-light.riddle-page .riddle-hint { color: #1f2937; background: rgba(255, 255, 255, .88); border-color: rgba(79, 70, 229, .65); }
body.theme-light.riddle-page .riddle-hint-cost { color: #6b7280; }
body.theme-light.riddle-page .riddle-close { color: #f8fafc; border-color: rgba(248, 250, 252, .55); }
body.theme-light.riddle-page .riddle-hint.is-open { background: #e0e7ff; border-color: #4f46e5; }

@keyframes riddle-pulse { 50% { transform: scale(1.12); } }
@keyframes riddle-seal { 50% { border-color: rgba(165, 180, 252, 1); box-shadow: 0 0 0 3px rgba(129, 140, 248, .18); } }
@keyframes riddle-flip { from { transform: rotateY(90deg) scale(.6); opacity: 0; } to { transform: rotateY(0) scale(1); opacity: 1; } }
@keyframes riddle-clue-nudge {
  0% { transform: scale(.97); background: #6366f1; border-color: #c7d2fe; box-shadow: 0 0 0 0 rgba(129, 140, 248, .75); }
  16% { transform: scale(1.03); background: #6366f1; border-color: #c7d2fe; box-shadow: 0 0 0 12px rgba(129, 140, 248, .3), 0 10px 26px rgba(79, 70, 229, .55); }
  32% { transform: scale(1); background: #6366f1; border-color: #c7d2fe; box-shadow: 0 0 0 4px rgba(129, 140, 248, .25); }
  70% { background: #6366f1; border-color: #c7d2fe; box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
}
@keyframes riddle-clue-ink { 0%, 70% { color: #fff; } }
@keyframes riddle-reveal { from { transform: scale(.7); } 60% { transform: scale(1.14); } to { transform: scale(1.05); } }
@keyframes riddle-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .riddle-clue-card.is-new, .riddle-clue-card.is-new .riddle-clue, #grid .letter.reveal-path, .riddle-feedback.is-reveal { animation: none; }
  body.riddle-page #grid .letter.grid-enter { animation: none !important; }
  .riddle-timer.is-urgent, .riddle-hint, .riddle-hint.just-opened .riddle-hint-value, .riddle-feedback.is-ok { animation: none; }
  .riddle-timebar-fill { transition: none; }
}

/* Nombre para el ranking, en el fin de tanda */
.riddle-name-offer { margin: 14px 0 4px; text-align: center; }
.riddle-name-lead { font-weight: 700; margin: 0 0 8px; }
.riddle-name-row { display: flex; gap: 8px; justify-content: center; }
.riddle-name-row input { flex: 1; min-width: 0; max-width: 220px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-color, rgba(255,255,255,.2)); background: transparent; color: inherit; font: inherit; }
.riddle-name-row .btn { margin: 0; white-space: nowrap; }
.riddle-name-msg { margin: 8px 0 0; font-size: .85rem; opacity: .85; }
.riddle-name-done { margin: 0; font-weight: 700; color: var(--success, #22c55e); }