/* Estilos propios de ANILINKS. Lo compartido (barra de arriba, botones, modales) está en /assets/base.css.
   Mockups de referencia: mockups/anilinks/ */

.topbar-left, .topbar-right { width: 94px; }
.topbar-right { display: flex; justify-content: flex-end; }
.app { gap: 12px; }

/* ---------- inicio: compartido en /assets/base.css (.start-card, 25/10/2026) ---------- */

/* ---------- tablero ---------- */
.screen { gap: 12px; }
.board { display: flex; flex-direction: column; gap: 6px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.tile {
  position: relative; padding: 4px 4px 0; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; display: flex; flex-direction: column; gap: 3px;
  transition: transform 0.1s ease;
}
.tile:disabled { cursor: default; opacity: 1; }
.tile:not(:disabled):hover { border-color: var(--border-strong); }
.tile:not(:disabled):active { transform: scale(0.97); }
.tile:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
/* Póster grande (Juan Cruz, 26/10/2026: "las imágenes tienen que entrar mejor"): proporción de portada, a lo ancho. */
.tile-cover { display: block; width: 100%; aspect-ratio: 3 / 4; max-height: var(--cover-max, 999px); border-radius: 6px; background: linear-gradient(160deg, #2A313C, #181D25); overflow: hidden; flex-shrink: 0; }
.tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El alto máximo (--cover-max) lo pone fitCovers() en anilinks.js: lo más grande que entra sin scroll. */
/* El nombre va completo (sin "…"); los muy largos, con letra un poco más chica. */
.tile-title { font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; padding-bottom: 5px; overflow-wrap: anywhere; hyphens: auto; }
.tile-title.long { font-size: 9px; }
/* Romaji y kanji abajo en chico (como ANICHOICE). */
.tile-alt { font-size: 8.5px; line-height: 1.2; text-align: center; color: var(--muted); margin-top: -2px; padding-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-title:has(+ .tile-alt) { padding-bottom: 0; }
.tile.selected .tile-alt { color: #E8B5A6; }
.tile.selected { border: 2px solid var(--accent); background: #3A2219; padding: 3px 3px 0; }
.tile.selected .tile-title { color: #FFD9CE; }
.tile.shake { animation: shake 0.35s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* Bloques resueltos: dos colores que se alternan (naranja / turquesa); los que faltaron, en gris. */
.block {
  min-height: 84px; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--bg);
}
.block.c0 { background: var(--accent); }
.block.c1 { background: var(--ok); }
.block.missed { background: var(--chip); border: 1px dashed var(--border-strong); color: var(--text); }
.block.fresh { animation: pop 0.35s ease-out; }
@keyframes pop { from { transform: scale(0.94); opacity: 0.6; } to { transform: none; opacity: 1; } }
.block-covers { display: flex; flex-shrink: 0; }
.block-covers img { width: 32px; height: 46px; object-fit: cover; border-radius: 4px; border: 2px solid rgba(14, 17, 22, 0.55); background: #2A313C; }
.block-covers img + img { margin-left: -8px; }
.block.missed .block-covers { opacity: 0.6; }
.block-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.block-tag { font-size: 9px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.block-title { font-family: var(--font-title); font-weight: 800; font-size: 14px; line-height: 1.1; text-transform: uppercase; }
.block-items { font-size: 10.5px; line-height: 1.3; color: rgba(14, 17, 22, 0.78); }
.block.missed .block-items { color: var(--text-2); }

/* ---------- vidas, botones y mensajes ---------- */
.play-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.lives { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dots { display: flex; gap: 12px; }
.dots.many { gap: 8px; }
.dot { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--text); }
.dot.lost { background: var(--bad); border-color: var(--bad); }
.lives-left { font-size: 11px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.two[hidden] { display: none; }
.message-row { display: flex; justify-content: center; min-height: 28px; }
.message { font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; color: var(--muted); }
.message:empty { display: none; }
.message.ok { color: var(--ok); background: #123A33; }
.message.close { color: var(--close); background: var(--close-bg); }
.message.wrong { color: var(--bad); background: #2E1A1C; }
.countdown[hidden], .lives[hidden], .message-row[hidden] { display: none; }

/* ---------- resultado ---------- */
.result-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
}
.result-banner[hidden] { display: none; }
.result-text { display: flex; flex-direction: column; min-width: 0; }
.result-title { font-family: var(--font-title); font-weight: 800; font-size: 22px; line-height: 1.15; }
.result-sub { font-size: 13px; }
.result-points { font-family: var(--font-title); font-weight: 800; font-size: 40px; line-height: 1; }
.result-banner.won { background: #123A33; border: 1px solid var(--ok); }
.result-banner.won .result-title { color: var(--ok); }
.result-banner.won .result-sub { color: #C9F0E8; }
.result-banner.lost { background: #2E1A1C; border: 1px solid var(--bad); }
.result-banner.lost .result-title { color: var(--bad); }
.result-banner.lost .result-sub { color: #F5D0D0; }

/* ---------- estadísticas (tamaño de la ventana y de los números: base.css, igual en todos los juegos; 28/10/2026) ---------- */
.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; }
.stat-tiles span { color: var(--muted); text-align: center; }
.dist { display: flex; flex-direction: column; gap: 8px; }
.dist-bars { display: grid; gap: 5px; align-items: end; height: 140px; }
.dist-bars div { display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: flex-end; height: 100%; }
.dist-bars span { font-size: 12px; }
.dist-bars i { width: 100%; border-radius: 4px 4px 0 0; background: var(--border-strong); min-height: 3px; }
.dist-bars .today i { background: var(--accent); }
.dist-bars em { font-style: normal; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); width: 100%; text-align: center; padding-top: 4px; }
.stat-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
#stats-share[hidden] { display: none; }

/* "Back to menu" va solo al terminar: .back-btn (base.css) le pone display y tapaba el [hidden]. */
#back-btn[hidden] { display: none; }
#stats-modal .dist .label { font-size: 12px; }
/* Segunda ronda (días bonus, 29/10/2026): botón en el lugar de Back to menu y nota en el de la cuenta regresiva. */
#round2-btn { width: 100%; }
#round2-btn[hidden], #round2-note[hidden], #round2-pill[hidden] { display: none; }
#round2-note { text-align: center; }
/* La pastilla "2nd round" va debajo de la del modo (al lado del logo no entraba en 390 px). */
.topbar-right { flex-direction: column; align-items: flex-end; gap: 3px; }
.topbar-right .round2-pill { white-space: nowrap; font-size: 10px; padding: 1px 8px; }

/* ---------- celu: los textos de la ficha van uno abajo del otro (no cambia nada respecto de antes) ---------- */
.tile-txt { display: contents; }
.tile-alt2 { display: none; }
.side { display: contents; }

/* ---------- compu: boceto B "fichas apaisadas" (aprobado por Juan Cruz el 29/10/2026) ----------
   Tablero 4×4 del alto de la pantalla (dividido por el zoom de fit.js) y panel a la derecha con el cartel, las vidas,
   Submit/Clear y los mensajes. Cada ficha: póster a la izquierda y a la derecha el nombre en inglés grande + romaji y
   kanji. Un grupo resuelto es una fila de color a lo ancho con sus 4 fichas (.grow, lo arma groupRow() en anilinks.js),
   así el tablero nunca cambia de tamaño. Mismo corte que `wide` en anilinks.js. */
@media (min-width: 900px) {
  .app:has(> #screen-play:not([hidden])) { max-width: 1440px; padding-left: 20px; padding-right: 20px; }
  #screen-play {
    display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px;
    /* .screen trae flex: 1 y le ganaba al alto. Con publicidad, el tablero deja además media barra de aire arriba de la
       barra de abajo (Juan Cruz, 31/10/2026: que la barra de 728×90 entre cómoda; 1920×1080 → 45 px, 1366×768 → 25). */
    flex: none; height: calc((100dvh - var(--ad-b, 0px)) / var(--zoom, 1) - 100px - var(--ad-b, 0px) * 0.5);
  }
  .board {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10px; min-height: 0;
  }
  .tiles { display: contents; }
  .board > .grow { grid-column: 1 / -1; }

  .board .tile { flex-direction: row; align-items: stretch; gap: 10px; padding: 6px; min-width: 0; min-height: 0; overflow: hidden; text-align: left; }
  .board .tile.selected { padding: 5px; }
  .board .tile-cover { height: 100%; width: auto; max-height: none; aspect-ratio: 3 / 4; }
  .board .tile-txt { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
  .board .tile-title, .board .tile-title.long {
    font-size: 15px; line-height: 1.2; text-align: left; padding: 0; hyphens: auto; overflow-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .board .tile-title.word { font-size: 13px; }
  .board .tile-alt { display: none; }
  .board .tile-alt2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere;
  }
  .board .tile.selected .tile-alt2 { color: #E8B5A6; }

  /* grupo resuelto: fila de color con el título arriba y sus 4 fichas */
  .grow {
    border-radius: 12px; padding: 4px 8px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr); gap: 4px 8px; min-height: 0;
  }
  .grow.c0 { background: var(--accent); }
  .grow.c1 { background: var(--ok); }
  .grow.missed { background: var(--chip); border: 1px dashed var(--border-strong); }
  .grow.fresh { animation: pop 0.35s ease-out; }
  .grow-head {
    grid-column: 1 / -1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 2px;
    font: 800 15px/1.2 var(--font-title); text-transform: uppercase; color: var(--bg);
  }
  .grow.missed .grow-head { color: var(--text); }
  .grow-head .block-tag { font-family: var(--font-body, inherit); font-weight: 600; margin-right: 4px; }
  .grow .tile { border: 0; background: rgba(14, 17, 22, 0.25); }
  .grow .tile-title { color: var(--bg); }
  .grow .tile-alt2 { color: rgba(14, 17, 22, 0.7); -webkit-line-clamp: 1; }
  .board .grow .tile-title { -webkit-line-clamp: 2; }
  .grow.missed .tile { background: rgba(14, 17, 22, 0.35); }
  .grow.missed .tile-title { color: var(--text); }
  .grow.missed .tile-alt2 { color: var(--muted); }
  .grow.missed .tile-cover { opacity: 0.75; }

  /* panel de la derecha */
  .side {
    display: flex; flex-direction: column; gap: 14px; min-height: 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  }
  /* El panel es angosto: "Congratulations! You won!" no entra al lado de los puntos, así que los puntos van abajo. */
  .result-banner { flex-wrap: wrap; row-gap: 4px; }
  .result-text { flex: 1 1 100%; }
  .result-title { font-size: 24px; }
  .result-points { font-size: 44px; margin-left: auto; }
  .play-foot { flex: 1; justify-content: flex-end; gap: 12px; }
  .play-foot .message-row { order: -1; }
  .play-foot .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Al terminar, en la compu sí entran las vidas (en el celu se esconden para que el resultado entre en una pantalla). */
  #screen-play .lives[hidden] { display: flex; }
  #screen-play:has(#result-banner:not([hidden])) .lives { order: -2; margin-bottom: auto; }
  .lives-left { font-size: 12px; }
  .countdown { text-align: center; font-size: 13px; }
}
/* Pantallas grandes (1920×1080): las fichas quedan más anchas, letra un poco más grande. */
@media (min-width: 1600px) and (min-height: 900px) {
  .board .tile-title, .board .tile-title.long { font-size: 17px; }
  .board .tile-title.word { font-size: 15px; }
  .board .tile-alt2 { font-size: 13.5px; }
  .board .tile { gap: 12px; }
}

/* Publicidad (30/10/2026): el rectángulo 300×250 sale solo con la partida terminada (assets/ads.js). */
.ads-on #result-buttons[hidden] ~ .ad-rect { display: none; }
/* Con laterales (compu): las fichas apaisadas necesitan ~1200 px de ancho entre los laterales (si no hay, ads.js no
   pone laterales: en 1366×768 queda como antes) y el póster no pasa del 45 % de la ficha, así el nombre tiene lugar. */
@media (min-width: 900px) {
  .app:has(> #screen-play:not([hidden])) { --ads-need: 1200px; }
  :is([data-ad-side="160"], [data-ad-side="300"]) .board .tile-cover { height: auto; width: 45%; max-height: 100%; align-self: center; flex: none; }
}

/* Celu: sin el renglón japonés (no entraba): el ⓘ del título muestra los tres nombres (3/11/2026). */
@media (max-width: 899px) { .tile-alt { display: none; } .tile-title:has(+ .tile-alt) { padding-bottom: 5px; } }
.tile-title .name-info { margin-left: 3px; vertical-align: -0.15em; }

/* Pósters completos en el celu (4/11/2026, boceto 2026-11-04_1_posters_completos aprobado por Juan Cruz): sin nombre
   abajo; ⤢ arriba a la derecha y ⓘ abajo a la derecha (assets/poster-zoom.js). La compu sigue con las fichas apaisadas. */
.tile-cover { position: relative; }
@media (max-width: 899px) {
  .tiles .tile { padding: 0; border: 2px solid transparent; background: var(--surface-2); overflow: hidden; border-radius: 9px; }
  .tiles .tile .tile-txt { display: none; }
  .tiles .tile .tile-cover { border-radius: 7px; }
  .tiles .tile.selected { border-color: var(--accent); padding: 0; background: var(--surface-2); box-shadow: 0 0 0 2px rgba(255, 90, 54, 0.35); }
  .tiles .tile.selected .tile-cover::after { content: ''; position: absolute; inset: 0; background: rgba(255, 90, 54, 0.2); pointer-events: none; }
}
@media (min-width: 900px) {
  .board .poster-zoom, .board .cover-name-info { display: none; }
}