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

.topbar-spacer { width: 44px; }
.topbar-spacer[hidden] { display: none; }

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

/* ---------- categoría y resultado ---------- */
.category {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); text-align: center;
}
.category-k { font-size: 11px; letter-spacing: 2px; color: var(--muted); }
.category-v { font-family: var(--font-title); font-weight: 800; font-size: 22px; line-height: 1.15; }
.category-sub { font-size: 13px; color: var(--muted); }

.result-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--close-bg); border: 1px solid var(--close);
}
.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; color: var(--close); }
.result-sub { font-size: 13px; color: var(--close-text); }
.result-points { font-family: var(--font-title); font-weight: 800; font-size: 40px; line-height: 1; }
.result-banner.won { background: #123A33; border-color: var(--ok); }
.result-banner.won .result-title { color: var(--ok); font-size: 28px; }
.result-banner.won .result-sub { color: #C9F0E8; }
.result-banner.lost { background: #3A1418; border-color: var(--bad); }
.result-banner.lost .result-title { color: #FF9E9E; }
.result-banner.lost .result-sub { color: #FFD9D9; }

/* ---------- estantería ---------- */
.shelves { display: flex; flex-direction: column; gap: 6px; }
.shelf-row { display: flex; justify-content: center; gap: 6px; align-items: flex-start; }
.shelf { height: 6px; margin-top: 4px; border-radius: 3px; background: linear-gradient(#3A4250, #232A35); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); }

.poster {
  width: min(100px, calc((100% - 18px) / 4)); display: flex; flex-direction: column; gap: 3px;
  padding: 0; border: none; background: none; color: var(--text); text-align: left; font: inherit;
}
.poster:disabled { cursor: default; opacity: 1; }
.poster:focus-visible { outline: none; }
.poster:focus-visible .cover { box-shadow: 0 0 0 2px var(--link); }
.cover {
  position: relative; width: 100%; aspect-ratio: 70 / 98; border-radius: 8px; border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, #2A313C, #181D25); transition: transform 0.12s ease;
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
/* El borde de estado va encima de la portada (así no cambia el tamaño del póster). */
.cover::after { content: ''; position: absolute; inset: -1px; border-radius: 8px; border: 3px solid transparent; pointer-events: none; }
.poster:not(:disabled):hover .cover { transform: translateY(-2px); }
.badge {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 999px; z-index: 1;
  color: var(--bg); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
/* El nombre va completo (sin cortar con "…"); los muy largos, con letra un poco más chica. */
.ptitle { display: flex; align-items: flex-start; gap: 2px; font-size: 10px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
/* Nombre en 3 renglones como mucho (el completo, en el ⓘ). */
.ptitle-txt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ptitle .name-info { margin: 1px 0 0 2px; }
.ptitle.long { font-size: 9px; }
.pjp { font-size: 8.5px; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster.dim .pjp { opacity: 0.5; }
.pnote { font-size: 9px; line-height: 1.2; color: var(--muted); overflow-wrap: anywhere; }

.poster.selected .cover::after { border-color: var(--accent); }
.poster.selected .badge { background: var(--accent); }
.poster.found .cover::after { border-color: var(--ok); }
.poster.found .badge { background: var(--ok); }
.poster.caught .cover::after { border-color: var(--bad); }
.poster.caught .badge { background: var(--bad); }
.poster.caught .ptitle { color: #FFD9D9; }
.poster.caught .pnote { color: #FF9E9E; }
.poster.missed .cover::after { border: 3px dashed var(--ok); }
.poster.missed .ptitle { color: #C9F0E8; }
.poster.dim .cover { border-color: #232A35; }
.poster.dim .cover img { opacity: 0.35; }
.poster.dim .ptitle { color: #6F7884; opacity: 0.6; }
.poster.fresh .cover { animation: pop 0.3s ease-out; }
@keyframes pop { from { transform: scale(0.92); } to { transform: none; } }

.play-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.play-foot[hidden] { display: none; }
.play-status { font-size: 13px; color: var(--muted); text-align: center; min-height: 18px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }

/* ---------- modales ---------- */
.modal-text { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.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; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; 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(--accent); min-height: 2px; }
.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: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------- compu: pósters grandes (Juan Cruz, 28/10/2026) ----------
   Categoría, resultado y botones en una columna a la izquierda; los 10 pósters a la derecha en dos estantes de 5.
   El ancho del póster sale del alto de la pantalla (dividido por el zoom de fit.js), así todo entra sin scroll,
   también al terminar (el cartel del resultado va en la columna de la izquierda y no suma alto). */
@media (min-width: 900px) {
  .app:has(> #screen-play:not([hidden])) { max-width: 1200px; }
  #screen-play {
    display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-auto-rows: min-content;
    column-gap: 28px; row-gap: 14px; align-content: start;
  }
  #screen-play > :not(.shelves) { grid-column: 1; }
  #screen-play > .shelves { grid-column: 2; grid-row: 1 / span 6; align-self: center; gap: 10px; }
  .category { padding: 18px 14px; }
  .category-v { font-size: 26px; }
  .category-sub { font-size: 14px; }
  .play-foot { margin-top: 0; }
  .two { grid-template-columns: 1fr; }
  .shelf-row { gap: 14px; }
  .poster { width: min(180px, calc((100% - 56px) / 5), calc(((((100dvh - var(--ad-b, 0px)) / var(--zoom, 1)) - 104px) / 2 - 92px) * 0.714)); gap: 4px; }
  .ptitle { font-size: 13px; }
  .ptitle.long { font-size: 12px; }
  .pjp { font-size: 11px; }
  .pnote { font-size: 11px; }
  .badge { width: 26px; height: 26px; font-size: 14px; }
}

/* ---------- celu: el resultado entra en una pantalla (Juan Cruz, 28/10/2026; 390×750 con las barras de Safari) ----------
   Cartel y categoría compactos, sin el renglón japonés ni el desfase de los pósters, y el ancho del póster sale del
   alto de la pantalla. El motivo completo de cada impostor sigue al tocar el póster. */
@media (max-width: 899px) {
  .ended { gap: 8px; }
  .ended .result-banner { padding: 8px 14px; }
  .ended .result-title, .ended .result-banner.won .result-title { font-size: 19px; }
  .ended .result-sub { font-size: 12px; }
  .ended .result-points { font-size: 30px; }
  .ended .category { padding: 6px 10px; gap: 2px; }
  .ended .category-k { display: none; }
  .ended .category-v { font-size: 17px; }
  .ended .category-sub { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ended .shelves { gap: 2px; }
  .ended .shelf { margin-top: 2px; }
  .ended .poster { padding-top: 0 !important; width: min(100px, calc((100% - 18px) / 4), calc(((100svh - min(var(--ad-b, 0px), 50px) - 290px) / 3 - 46px) * 0.714)); }
  .ended .pjp { display: none; }
  .ended .ptitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ended .pnote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ended .btn-lg { height: 44px; }
}

/* Día bonus: segunda ronda (29/10/2026) */
#round2-btn[hidden], #back-btn[hidden], #round2-note[hidden], #round1-link[hidden], .round2-pill[hidden], #countdown[hidden] { display: none !important; }
#round2-note { text-align: center; }
#round2-pill-start { align-self: flex-start; }
.category-k .round2-pill { margin-left: 6px; vertical-align: 1px; }
.round1-link { align-self: center; background: none; border: 0; padding: 2px 6px; color: #FF7A5C; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
/* Ronda 2 (30/10/2026): "See round 1" en el renglón de la cuenta regresiva (así el resultado entra en 390×750). */
#result-foot:has(#round1-link:not([hidden])) { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 10px; }
#result-foot:has(#round1-link:not([hidden])) > .two { flex-basis: 100%; }

/* ANIMPOSTOR (2/11/2026): el logo es más largo; en el celu se achican logo, botones y pastilla (como ANICHARACTER)
   para que la barra de arriba no se pase del ancho con la pastilla del modo. */
@media (max-width: 420px) {
  .topbar { gap: 6px; }
  .topbar .logo { font-size: 18px; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .topbar .brand .number { font-size: 11px; }
  #mode-pill { min-width: 0; padding: 4px 8px; }
}
@media (max-width: 380px) {
  .topbar .logo { font-size: 16px; }
  .topbar-left { gap: 4px; }
}

/* Celu: sin los renglones de romaji y japonés (no entraban): el ⓘ del título los muestra (3/11/2026). */
@media (max-width: 899px) { .pjp { display: none; } }

/* Celu, en juego (Juan Cruz, 3/11/2026: en All at once no entraba todo en el iPhone): el ancho del póster sale del alto
   de la pantalla, como en el resultado, así los 10 pósters y el botón entran sin deslizar. */
@media (max-width: 899px) {
  #screen-play:not(.ended) .category { padding: 8px 12px; gap: 2px; }
  #screen-play:not(.ended) .category-k { display: none; }
  /* svh = alto con las barras de Safari a la vista: así no cambia de tamaño al deslizar (Juan Cruz, 3/11/2026: arrancaba
     chico y al bajar un poco se agrandaba y ya no entraba). */
  #screen-play:not(.ended) .shelves { gap: 2px; }
  #screen-play:not(.ended) .poster { padding-top: 0 !important; width: min(100px, calc((100% - 18px) / 4), calc(((100svh - min(var(--ad-b, 0px), 50px) - 250px) / 3 - 44px) * 0.714)); }
  #screen-play:not(.ended) .ptitle-txt { -webkit-line-clamp: 2; }
}

/* ⓘ de nombres sobre la portada, abajo a la derecha, con fondo oscuro para que se vea sobre cualquier imagen (3/11/2026). */
.cover .cover-info { position: absolute; right: 3px; bottom: 3px; z-index: 2; margin: 0; background: rgba(14, 17, 22, 0.82); border-radius: 999px; }

/* Pósters completos en el celu mientras se juega (4/11/2026, como ANILINKS; boceto aprobado): sin el título abajo (queda
   en ⤢ y en el ⓘ), así el póster crece. En el resultado vuelven el título y el motivo. En la compu, sin ⤢. */
.cover { position: relative; }
@media (max-width: 899px) {
  #screen-play:not(.ended) .ptitle { display: none; }
  #screen-play:not(.ended) .poster { width: min(120px, calc((100% - 18px) / 4), calc(((100svh - min(var(--ad-b, 0px), 50px) - 250px) / 3 - 8px) * 0.714)); }
}
@media (min-width: 900px) { .cover .poster-zoom { display: none; } }