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

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ---------- miniatura del inicio: la carta arriba y las 12 casillas, dos dadas vuelta ---------- */
.pv-bingo { display: flex; flex-direction: column; align-items: center; gap: 0.7em; }
.pv-card { width: 3.6em; height: 4.6em; }
.pv-cells { display: grid; grid-template-columns: repeat(3, 4.4em); grid-auto-rows: 3.6em; gap: 0.4em; }
.pv-cells .ok { background: linear-gradient(160deg, #2C5F57, #12302B); }

/* ---------- en juego: reloj (o errores) · carta · Skip ---------- */
.deal { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.deal[hidden], .card-name[hidden], .play-foot[hidden], .result-head[hidden], .result-actions[hidden] { display: none; }
.meter {
  --p: 100%; --c: var(--accent);
  width: 68px; height: 68px; border-radius: 999px; flex: none; position: relative;
  background: conic-gradient(var(--c) 0 var(--p), var(--border) var(--p) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.meter::before { content: ''; position: absolute; inset: 6px; border-radius: 999px; background: var(--bg); }
.meter span, .meter small { position: relative; }
.meter span { font-family: var(--font-title); font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: 1px; }
.meter small { font-size: 9px; font-weight: 600; color: var(--muted); letter-spacing: 0.5px; margin-top: 2px; }
.meter.low { --c: var(--bad); }
.meter.lives { background: none; border: 2px solid var(--border); box-sizing: border-box; }
.meter.lives::before { display: none; }
.meter.lives span { font-size: 15px; letter-spacing: 2px; }
.meter .x-on { color: var(--bad); } .meter .x-off { color: var(--border-strong); }
/* "−2 s" que sube al errar una casilla con reloj */
.meter .lost {
  position: absolute; top: -4px; right: -14px; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0;
  color: var(--bad); pointer-events: none; animation: lost 0.8s ease-out forwards;
}
@keyframes lost { from { transform: translateY(6px); opacity: 1; } to { transform: translateY(-14px); opacity: 0; } }

.cardnow {
  width: 118px; height: 152px; border-radius: 12px; border: 2px solid var(--accent); background: var(--surface-2) center 20% / cover no-repeat;
  box-shadow: 0 6px 18px #0008;
}
.cardnow.in { animation: deal 0.18s ease-out; }
@keyframes deal { from { transform: translateY(-8px) scale(0.96); opacity: 0.4; } }
.skip { width: 72px; height: 46px; font-weight: 700; }
.card-name { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: -6px; min-height: 24px; text-align: center; }
.card-name b { font-family: var(--font-title); font-weight: 800; font-size: 20px; line-height: 1.15; }
/* romaji · kanji abajo en chico, en un renglón (Juan Cruz, 28/10/2026) */
.sub { font-size: 11px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-name .sub:empty { display: none; }

/* ---------- tablero ---------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cell {
  aspect-ratio: 1 / 0.86; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); position: relative;
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 6px;
  color: var(--text); font-family: inherit; text-align: center; cursor: pointer;
}
.cell:disabled { cursor: default; opacity: 1; }
.cell .cv { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0.28; }
.cell .t { position: relative; font-size: 11.5px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 3px #000; }
.cell .k { position: relative; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--bad); font-weight: 700; }
.cell.wrong { border: 2px solid var(--bad); background: #2E1A1C; animation: shake 0.35s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.cell.done { border: 2px solid var(--ok); padding: 0; background: var(--surface-2) center 20% / cover no-repeat; }
.cell.done.flip { animation: flip 0.35s ease-out; }
@keyframes flip { from { transform: rotateY(90deg); } }
.cell .badge {
  position: absolute; top: 4px; right: 4px; max-width: calc(100% - 8px); box-sizing: border-box; font-size: 9px; font-weight: 700;
  padding: 3px 6px; border-radius: 8px; background: #0E1116dd; line-height: 1.15; text-align: right;
}
.cell .who {
  position: absolute; bottom: 0; left: 0; right: 0; font-size: 10px; font-weight: 700; padding: 10px 4px 4px;
  background: linear-gradient(transparent, #0E1116ee);
}
.cell.reveal, .cell.reveal:disabled { border: 1px dashed var(--border-strong); filter: grayscale(1); opacity: 0.6; }

.play-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

/* ---------- resultado ---------- */
.result-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.result-line { font-size: 11px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.result-points { font-family: var(--font-title); font-weight: 800; font-size: 46px; line-height: 1; }
.result-points small { font-size: 22px; }
.result-calc { font-size: 13px; color: var(--muted); }
.result-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
/* Resultado en una sola pantalla del celu (390×750 con las barras de Safari): puntos al lado del texto y casillas más bajas */
.screen.is-end { gap: 12px; }
.is-end .result-head { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.is-end .result-head .result-points { grid-row: 1 / span 3; grid-column: 1; }
.is-end .result-head .result-line, .is-end .result-head .result-calc { grid-column: 2; }
.is-end .board .cell { aspect-ratio: 1 / 0.78; }
.names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.names li { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.names li.got { border-color: #2C5F57; }
.names .nm { display: flex; flex-direction: column; min-width: 0; }
.names .nm b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.names .nm.r { text-align: right; }
.names .nm.r b { font-weight: 600; }
.names li:not(.got) .nm.r b { color: var(--muted); }

/* ---------- estadísticas (tamaño de la ventana y de los números: base.css, igual en todos los juegos) ---------- */
.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: 12px 2px; 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; }
.stat-block { display: flex; flex-direction: column; gap: 8px; }
.dist { display: flex; flex-direction: column; gap: 4px; }
.bar { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bar .k { width: 20px; text-align: right; color: var(--muted); flex: none; }
.bar i {
  height: 18px; border-radius: 4px; background: var(--border-strong); min-width: 24px; font-style: normal; font-weight: 700;
  font-size: 12px; display: flex; align-items: center; justify-content: flex-end; padding: 0 7px;
}
.bar i.today { background: var(--accent); color: var(--bg); }

.record { white-space: nowrap; }

/* ---------- resultado en la compu: puntos, tablero 4 × 3 y botones en una pantalla (Juan Cruz, 28/10/2026) ---------- */
@media (min-width: 900px) {
  /* Puntos y botones a la izquierda, tablero 4 × 3 a la derecha */
  .app:has(> #screen-play.is-end) { max-width: 1000px; }
  #screen-play.is-end .board .cell { aspect-ratio: 1 / 0.86; }
  #screen-play.is-end {
    display: grid; grid-template-columns: 270px minmax(0, 1fr); column-gap: 24px; row-gap: 16px; align-content: start;
    grid-template-areas: 'head board' 'actions board';
  }
  #screen-play.is-end .result-head { grid-area: head; display: flex; align-self: end; }
  #screen-play.is-end .board { grid-area: board; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #screen-play.is-end .result-actions { grid-area: actions; margin-top: 0; align-self: start; }
  #screen-play.is-end .three { grid-template-columns: 1fr 1fr; }
  #screen-play.is-end .three .back-btn { grid-column: span 2; }
}

/* ---------- en juego en la compu: vertical como en el celu, pero más grande (Juan Cruz, 29/10/2026: "anibingo apaisado
   NO VA, que vuelva la imagen arriba y bingo abajo"). Carta + reloj + Skip arriba, tablero 4 × 3 abajo, centrado. ---------- */
@media (min-width: 900px) {
  .app:has(> #screen-play:not([hidden]):not(.is-end)) { max-width: 740px; }
  #screen-play:not(.is-end) { gap: 10px; }
  #screen-play:not(.is-end) .deal { justify-content: center; gap: 48px; }
  #screen-play:not(.is-end) .meter { width: 76px; height: 76px; }
  #screen-play:not(.is-end) .meter span { font-size: 24px; }
  #screen-play:not(.is-end) .cardnow { width: 150px; height: 194px; }
  #screen-play:not(.is-end) .skip { width: 96px; height: 48px; }
  #screen-play:not(.is-end) .card-name { margin-top: 0; }
  #screen-play:not(.is-end) .card-name b { font-size: 22px; }
  #screen-play:not(.is-end) .card-name .sub { font-size: 12px; }
  #screen-play:not(.is-end) .board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #screen-play:not(.is-end) .cell { aspect-ratio: 1 / 0.66; }
  #screen-play:not(.is-end) .cell .t { font-size: 13px; }
  #screen-play:not(.is-end) .play-foot { margin-top: 0; }
}

/* Día bonus (29/10/2026): "Play 2nd round" / "See round 1" en la misma fila que Share, para no sumar alto. */
.share-row { display: grid; gap: 8px; }
.share-row.two { grid-template-columns: 1fr 1fr; }
.share-row > .btn { min-width: 0; }
#round2-btn[hidden] { display: none; }

/* Publicidad (30/10/2026, assets/ads.js): con la barra de abajo del celu, en juego las casillas son un poco más bajas
   para que el tablero y la bandera entren en 390×750 sin que la barra tape nada. Con ADS_MODE 'off' no cambia nada. */
@media (max-width: 899px) {
  .ads-on #screen-play:not(.is-end) .board .cell { aspect-ratio: 1 / 0.7; }
}

/* Nombres largos (3/11/2026): el de la casilla en 2 renglones como mucho, con el ⓘ al lado; el del anime en las
   casillas llenas, en 1 renglón. */
.cell .t { display: flex; align-items: flex-end; justify-content: center; gap: 2px; max-width: 100%; }
.cell .t-txt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell .t .name-info { color: #F2F0EA; margin: 0 0 1px 2px; }
.cell .badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }