/* Estilos propios de Anistat. Lo compartido (barra de arriba, buscador, modales) está en /assets/base.css. */

/* ---------- inicio: compartido en /assets/base.css (.start-card, 25/10/2026) ---------- */
.close-word { color: var(--close); }

/* ---------- en juego ---------- */
.progress { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bars { display: flex; gap: 4px; }
.bars span { width: 18px; height: 4px; border-radius: 2px; background: var(--border); }
.bars span.on { background: var(--accent); }

.sheet {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.hidden-tile {
  grid-row: span 2; background: var(--text); color: var(--bg); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 120px;
}
.hidden-tile b { font-family: var(--font-title); font-weight: 800; font-size: 52px; line-height: 1; color: var(--accent); }
.hidden-tile span { font-size: 11px; font-weight: 600; letter-spacing: 1px; }
.tile {
  border-radius: 10px; background: var(--surface-2); padding: 8px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tile .k { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.tile .v { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.tile.wide2 { grid-column: span 2; }
.tile.wide3 { grid-column: span 3; }
.tile.season { justify-content: center; padding: 10px; border: 1px solid var(--accent); }
.tile.season .v { font-family: var(--font-title); font-weight: 700; font-size: 22px; }
.tile.fresh { animation: pop 0.35s ease-out; }
.tile.waiting, .tile.locked { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); }
.tile.waiting .v { color: var(--border-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chips span { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--chip); }
.chips span.trope { background: transparent; border: 1px solid var(--accent); color: var(--link); } /* tropos: se distinguen de los géneros */
/* ⓘ en cada chip (29/10/2026) */
.chips span { display: inline-flex; align-items: center; }
.chips .cat-info { margin-left: 4px; }
.chips .trope .cat-info { color: var(--link); }
.chips .trope .cat-info:hover, .chips .trope .cat-info.open { color: var(--accent); }
@keyframes pop { from { transform: scale(0.94); opacity: 0.3; } to { transform: none; opacity: 1; } }

.guesses { display: flex; flex-direction: column; gap: 6px; }
.guesses[hidden] { display: none; }
#guesses { display: flex; flex-direction: column; gap: 6px; }
.guess-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
}
.guess-row .name { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.guess-row .tag { font-size: 11px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.guess-row.skip .name { text-decoration: none; font-style: italic; }
.guess-names { display: flex; flex-direction: column; min-width: 0; }
.guess-names .sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guess-row.close { background: var(--close-bg); border-color: var(--close); }
.guess-row.close .name { color: var(--text); text-decoration: none; font-weight: 600; }
.guess-row.close .sub { font-size: 11px; color: var(--close-text); }
.guess-row.close .tag { color: var(--close); font-weight: 700; }

/* El cuadro va pegado debajo de la ficha y la lista baja (Juan Cruz, 28/10/2026, probando en el iPhone: abajo de todo
   quedaba un hueco enorme con el teclado abierto). Los intentos van después. */
.guess-box { display: flex; flex-direction: column; gap: 6px; order: 2; }
#screen-play .guesses { order: 3; }
.guess-box .suggestions { bottom: auto; top: 52px; max-height: 264px; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- resultado ---------- */
.result-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; }
.result-title { font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.result-title.won { color: var(--ok); }
.result-title.lost { color: var(--bad); font-family: var(--font-title); font-size: 28px; letter-spacing: 1px; }
.result-points { font-family: var(--font-title); font-weight: 800; font-size: 46px; line-height: 1; }
.result-points small { font-size: 24px; color: var(--muted); }
.answer { display: flex; flex-direction: column; gap: 10px; }
.answer-top { display: flex; gap: 12px; align-items: center; }
#answer-cover { width: 104px; height: 146px; object-fit: cover; border-radius: 8px; background: var(--surface-2); flex-shrink: 0; }
.answer-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.answer-en { font-family: var(--font-title); font-weight: 700; font-size: 20px; line-height: 1.15; }
.answer-na { font-size: 13px; color: var(--text-2); }
.answer-ro { font-size: 12px; color: var(--muted); }
.answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.answer-grid .tile { border-radius: 8px; padding: 7px; }
.answer-grid .tile .v { font-size: 13px; }
/* Resultado en una pantalla del celu (390×750, Juan Cruz 28/10/2026): tira en una fila, botones lado a lado. */
.run { display: flex; gap: 12px; align-items: center; justify-content: center; }
.run-boxes { display: flex; gap: 6px; }
.run-boxes span {
  width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.run-boxes .miss { background: var(--border-strong); }
.run-boxes .near { background: var(--close); color: var(--bg); }
.run-boxes .hit { background: var(--ok); color: var(--bg); }
.run-boxes .unused { border: 1px dashed var(--border-strong); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.result-actions .countdown { grid-column: 1 / -1; }
/* Segunda ronda (días bonus, 29/10/2026): el botón va en el lugar de Back to menu y la nota a lo ancho. */
#round2-pill[hidden], #round2-btn[hidden], #round2-note[hidden], #back-btn[hidden] { display: none; }
.result-actions .round2-note { grid-column: 1 / -1; text-align: center; }
.brand .round2-pill { align-self: center; white-space: nowrap; }
@media (max-width: 480px) {
  .brand .round2-pill { font-size: 9px; letter-spacing: 0.5px; padding: 2px 6px; }
  .brand:has(.round2-pill:not([hidden])) .number { display: none; } /* sin lugar para las dos cosas en el celu */
}

#result-cover { display: none; }

/* ---------- estadísticas ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.stat-tiles div { border-radius: 10px; background: var(--surface-2); padding: 10px 4px; display: flex; flex-direction: column; align-items: center; }
.stat-tiles b { font-family: var(--font-title); font-weight: 800; } /* tamaño: #stats-modal en base.css */
.stat-tiles span { color: var(--muted); text-align: center; }
.dist { display: flex; flex-direction: column; gap: 8px; }
.dist-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; height: 140px; }
.dist-bars div { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-end; height: 100%; }
.dist-bars span { font-size: 12px; }
.dist-bars i { width: 100%; border-radius: 6px 6px 0 0; background: var(--accent); min-height: 2px; }
.dist-axis {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; text-align: center;
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 6px;
}
.stat-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------- compu (≥1040 px; Juan Cruz, 28/10/2026: todo más grande, sin espacio de sobra y en una pantalla) ----------
   En juego: arriba pistas (izquierda) e intentos (derecha) y ABAJO, a todo el ancho, la fila buscador + Skip + Guess
   (Juan Cruz, 31/10/2026: "como estaba al principio"; el 30/10 había quedado en la columna derecha, debajo de los
   intentos). La lista de sugerencias se abre hacia ARRIBA (puede tapar parte de la tarjeta mientras se escribe): no
   tapa la publicidad de abajo ni obliga a scrollear. Resultado: póster grande a la izquierda y la ficha a la derecha.
   En el celu queda todo como antes. */
@media (min-width: 1040px) {
  .app:has(> #screen-play:not([hidden])), .app:has(> #screen-result:not([hidden])) { max-width: 980px; }
  #screen-play:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto auto;
    align-content: start; gap: 14px 16px;
    grid-template-areas: 'progress progress' 'sheet guesses' 'box box';
  }
  #screen-play .progress { grid-area: progress; font-size: 13px; }
  #screen-play .sheet { grid-area: sheet; padding: 16px; gap: 10px; }
  #screen-play .guesses { grid-area: guesses; min-height: 0; align-self: start; }
  /* fila de abajo a todo el ancho: buscador | Skip + Guess */
  #screen-play .guess-box {
    grid-area: box; margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 6px 10px;
  }
  #screen-play .guess-box > .label { grid-column: 1 / -1; }
  .guess-box .search input { height: 50px; font-size: 16px; }
  .guess-box .btn { height: 50px; font-size: 15px; }
  .guess-box .suggestions { top: auto; bottom: 56px; max-height: 360px; }
  .suggestions .main { font-size: 15px; }
  .suggestions .alt { font-size: 12px; }
  /* sin intentos todavía: la columna igual se ve (no queda un hueco) */
  #screen-play .guesses[hidden] { display: flex; }
  #guesses:empty::after {
    content: "Wrong guesses and skips show up here. Each one reveals the next clue."; color: var(--muted); font-size: 13px; line-height: 1.5;
    padding: 14px; border: 1px dashed var(--border-strong); border-radius: 10px;
  }
  .hidden-tile { min-height: 150px; }
  .hidden-tile b { font-size: 64px; }
  .hidden-tile span, .tile .k { font-size: 11.5px; }
  .tile { padding: 10px 12px; gap: 3px; }
  .tile .v { font-size: 17px; }
  .tile.season .v { font-size: 28px; }
  .chips span { font-size: 14px; padding: 4px 10px; }
  .guess-row { padding: 10px 14px; }
  .guess-row .name { font-size: 16px; }
  .guess-names .sub, .guess-row .tag { font-size: 12px; }

  #screen-result:not([hidden]) {
    display: grid; grid-template-columns: 250px minmax(0, 1fr); align-content: start; gap: 14px 22px;
    grid-template-areas: 'cover head' 'cover answer' 'cover run' 'cover actions';
  }
  #screen-result .result-head { grid-area: head; align-items: flex-start; padding: 0; }
  #screen-result .answer { grid-area: answer; padding: 14px; }
  #screen-result .run { grid-area: run; flex-direction: row; justify-content: flex-start; gap: 12px; }
  #screen-result .result-actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
  #screen-result .countdown { grid-column: 1 / -1; }
  /* el póster grande (#result-cover) va en la columna izquierda; el chico de la tarjeta se esconde */
  #result-cover { display: block; grid-area: cover; width: 250px; height: 355px; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
  #answer-cover { display: none; }
  .answer-en { font-size: 26px; }
  .answer-ro { font-size: 13px; }
  .answer-na { font-size: 14px; }
  .answer-grid .tile .v { font-size: 14.5px; }
}
/* Pantallas grandes (1920×1080…): el zoom general ya llegó a su tope y sobraba alto; juego y resultado crecen un poco
   más (fit.js lo vuelve a achicar si no entra). */
@media (min-width: 1600px) and (min-height: 950px) {
  .app:has(> #screen-play:not([hidden])), .app:has(> #screen-result:not([hidden])) { max-width: 1110px; }
  #screen-play, #screen-result { zoom: 1.13; }
}
/* Pantallas grandes desde 1600 px (Juan Cruz, 2/11/2026: en su 1920×970 la ficha del resultado se veía chica): póster
   más grande y la ficha con letra más grande. Con los laterales de publicidad el ancho es lo que manda. */
@media (min-width: 1600px) and (min-height: 900px) {
  /* la tira de intentos va debajo del póster y los botones al lado: el póster toma el alto de la ficha */
  #screen-result:not([hidden]) {
    grid-template-columns: 330px minmax(0, 1fr); gap: 14px 24px;
    grid-template-areas: 'cover head' 'cover answer' 'run actions';
  }
  #result-cover { width: 330px; height: 100%; min-height: 440px; align-self: stretch; border-radius: 14px; }
  /* En juego (4/11/2026, Juan Cruz: "que sea más grande la tarjeta"): la ficha ocupa más ancho y las pistas crecen. */
  #screen-play:not([hidden]) { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
  #screen-play .sheet { padding: 20px; gap: 12px; }
  .hidden-tile { min-height: 200px; }
  .hidden-tile b { font-size: 84px; }
  .hidden-tile span, .tile .k { font-size: 13px; }
  .tile { padding: 14px 16px; gap: 5px; }
  .tile .v { font-size: 21px; }
  .tile.season .v { font-size: 36px; }
  .chips span { font-size: 15.5px; padding: 5px 12px; }
  #screen-result .run { justify-content: center; align-self: start; }
  #screen-result .answer { padding: 16px 18px; gap: 12px; }
  .answer-en { font-size: 30px; }
  .answer-ro { font-size: 14px; }
  .answer-na { font-size: 16px; }
  .answer-grid { gap: 8px; }
  .answer-grid .tile { padding: 9px 11px; }
  .answer-grid .tile .k { font-size: 12px; }
  .answer-grid .tile .v { font-size: 17px; }
  .answer-grid .chips span { font-size: 14px; }
}
/* Ronda 2 (30/10/2026): Share | Back to menu y abajo "See round 1" chico al lado de la cuenta regresiva (así entra en
   una pantalla del celu, 390×750). */
.result-actions.r2view .round2-btn { min-height: 0; height: 34px; padding: 0 12px; font-size: 13px; }
.result-actions.r2view .countdown { grid-column: auto; align-self: center; }
#screen-result .result-actions.r2view .countdown { grid-column: auto; }

/* Publicidad (30/10/2026, assets/ads.js): con la barra de abajo del celu, el resultado se compacta ~50 px para
   seguir entrando en 390×750. Con ADS_MODE 'off' no cambia nada. */
@media (max-width: 1039px) {
  .ads-on #screen-result { gap: 10px; }
  .ads-on #answer-cover { width: 84px; height: 118px; }
  .ads-on .answer-grid .tile { padding: 5px 7px; }
  .ads-on .result-points { font-size: 40px; }
}