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

.topbar-spacer { width: 44px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

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

/* ---------- cabecera de la lista ---------- */
.list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.list-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.list-name { font-family: var(--font-title); font-weight: 800; font-size: 34px; line-height: 1.05; }
.list-name.long { font-size: 26px; }
.list-hint { font-size: 12px; color: var(--muted); }
.list-hint:empty { display: none; }
.list-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.big-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; font-size: 15px; font-variant-numeric: tabular-nums; }
.big-pill.low { border-color: var(--bad); color: var(--bad); }
.big-pill .strike { font-size: 16px; color: var(--border-strong); }
.big-pill .strike.on { color: var(--bad); }
.count { font-size: 12px; color: var(--muted); }

/* ---------- la lista de 10: dos columnas en el celular (1–5 y 6–10) ---------- */
.play-area { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.spots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 8px;
}
.spot {
  height: 64px; border-radius: 10px; border: 1px dashed var(--border-strong);
  display: flex; align-items: center; gap: 8px; padding: 0 8px; min-width: 0;
}
.spot .n { font-size: 12px; color: var(--muted); width: 16px; flex: none; text-align: right; }
.spot .cover { width: 30px; height: 42px; border-radius: 4px; flex: none; background: var(--surface-2); object-fit: cover; }
.spot .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spot .t {
  font-size: 11.5px; line-height: 1.2; font-weight: 600; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.spot .tx:has(.sub) .t { -webkit-line-clamp: 2; }
/* romaji / kanji abajo en chico, un renglón (completo al pasar el mouse) */
.spot .sub { font-size: 9.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot.ok { border: 1px solid var(--ok); background: #12302B; color: var(--text); } /* base.css pinta .ok de turquesa */
.spot.ok .n { color: var(--ok); }
.spot.fresh { animation: pop 0.35s ease-out; }
@keyframes pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
/* bonus por rareza */
.spot .rb { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--accent); }
.rare-note { color: var(--accent); }
.spot.miss { border: 1px solid var(--border); background: var(--surface); }
.spot.miss .cover { filter: grayscale(1); opacity: 0.55; }
.spot.miss .t { color: var(--muted); font-weight: 500; }

.message { text-align: center; font-size: 13px; min-height: 18px; }
.message.ok { color: var(--ok); }
.message.bad { color: var(--bad); }
.message.info { color: var(--muted); }
.message.shake { animation: shake 0.4s; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.guess-row { display: flex; gap: 8px; margin-top: auto; }
.guess-row .search { flex: 1; }
.guess-row[hidden] { display: none; }
.flag-btn { width: 46px; height: 46px; border-color: var(--border-strong); background: transparent; flex-shrink: 0; }

/* ---------- resultado ---------- */
.result { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.result[hidden] { display: none; }
/* Resultado en UNA pantalla del celu (Juan Cruz, 28/10/2026, iPhone 390×750): sin el renglón de mensajes, lugares un
   poco más bajos y los puntos al lado del texto. */
.ended .message { display: none; }
.ended .play-area { flex: none; }
.ended .spot { height: 56px; }
.ended .result { gap: 8px; }
.ended .result-points { font-size: 34px; }
.legend { display: flex; gap: 14px; justify-content: center; font-size: 12px; color: var(--muted); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.ok-sw { background: var(--ok); }
.miss-sw { background: var(--border-strong); }
.result-score { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 15px; text-align: center; }
.result-points { font-family: var(--font-title); font-weight: 800; font-size: 40px; color: var(--accent); line-height: 1.1; white-space: nowrap; }
.result-points small { font-size: 18px; color: var(--muted); }
.result-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-text { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }

/* ---------- estadísticas ---------- */
.today-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-2); }
.today-row[hidden] { display: none; }
.today-row b { color: var(--text); white-space: nowrap; }
.today-row b span { color: var(--accent); }
.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 2px; display: flex; flex-direction: column; align-items: center; }
/* tamaño de números y textos: el común de base.css (#stats-modal) */
.stat-tiles b { font-family: var(--font-title); font-weight: 800; }
.stat-tiles span { color: var(--muted); text-align: center; }
.stat-tiles .hi { background: var(--accent); color: var(--bg); }
.stat-tiles .hi span { color: var(--bg); }
.dist { display: flex; flex-direction: column; gap: 6px; }
.hist { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; align-items: end; height: 120px; }
.hist div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; font-size: 12px; height: 100%; }
.hist i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--border-strong); min-height: 2px; }
.hist .today i { background: var(--accent); }
.axis { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; text-align: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 5px; }
.stats-actions { display: flex; flex-direction: column; gap: 8px; }
.stats-actions[hidden] { display: none; }

/* ---------- compu: una sola columna, buscador arriba de la lista ---------- */
@media (min-width: 700px) {
  .app { max-width: 520px; }
  .spots { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 6px; }
  .spot { height: 50px; }
  .spot .cover { width: 26px; height: 36px; }
  .spot .t, .spot .tx:has(.sub) .t { font-size: 14px; -webkit-line-clamp: 1; }
  .spot .sub { font-size: 11px; }
  .guess-row { order: -2; margin-top: 0; }
  .message { order: -1; }
  .guess-row .suggestions { bottom: auto; top: 52px; }
}
/* Compu ancha (28/10/2026, Juan Cruz: todo tiene que entrar en una pantalla, también en 1366×768): la lista en dos columnas
   (1–5 y 6–10), como en el celu, así entra con zoom y aprovecha el ancho. */
@media (min-width: 1000px) {
  .app { max-width: 820px; }
  .spots { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 8px 10px; }
  .spot { height: 62px; padding: 0 10px; }
  .spot .cover { width: 32px; height: 46px; }
  .spot .t, .spot .tx:has(.sub) .t { font-size: 15px; }
  .spot .sub { font-size: 12px; }
  .spot .rb { font-size: 13px; }
  /* resultado en dos renglones: puntos al lado del texto y los tres botones en fila */
  .result { gap: 10px; }
  .result-score { flex-direction: row; justify-content: center; align-items: baseline; gap: 14px; }
  .result-actions { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0; }
  .result-actions .two { display: contents; }
  .result-actions .btn-lg { height: auto; }
  .result-actions .countdown { grid-column: 1 / -1; }
}

/* ---------- segunda ronda (días bonus, 29/10/2026) ---------- */
.result-actions [hidden], .round2-pill[hidden] { display: none !important; }
.round2-note.center { text-align: center; }
.round2-note .link-btn { background: none; border: 0; padding: 0; color: var(--link, #FF7A5C); font: inherit; text-decoration: underline; cursor: pointer; }
.brand .round2-pill { margin-left: 6px; align-self: center; }
@media (min-width: 1000px) { .result-actions .round2-note { grid-column: 1 / -1; } }

/* Publicidad (30/10/2026, assets/ads.js): con la barra de abajo del celu, el resultado se compacta ~30 px (lugares
   un poco más bajos, puntos al lado del texto) para seguir entrando en 390×750. Con ADS_MODE 'off' no cambia nada. */
@media (max-width: 999px) {
  .ads-on .ended .spot { height: 52px; }
  .ads-on .ended .result-score { flex-direction: row; justify-content: center; align-items: baseline; gap: 12px; }
}

/* Teclado del celu (3/11/2026, common.js pone .kb-open y --vvh): sin barra de arriba, la lista más baja (sin portadas)
   y el buscador debajo, pegado al teclado; las sugerencias se abren hacia arriba (base.css). */
@media (max-width: 699px) {
  .kb-open .topbar { display: none; }
  .kb-open .list-name { font-size: 22px; }
  .kb-open .list-hint, .kb-open .count { display: none; }
  .kb-open .play-area { gap: 6px; }
  .kb-open .spots { gap: 4px; }
  .kb-open .spot { height: clamp(34px, calc((var(--vvh, 100dvh) - var(--kb-acc, 0px) - 150px) / 5), 56px); }
  .kb-open .spot .cover, .kb-open .spot .sub { display: none; }
  .kb-open .spot .t { -webkit-line-clamp: 1 !important; }
  .kb-open .guess-row { margin-top: 0; }
  .kb-open .message:empty { display: none; }
}