/* ============================================================
   Cronoficha — estilos
   Fondo blanco dominante · colores de ficha como identidad
   Elemento distintivo: el marco de color del jugador activo.
   ============================================================ */

:root {
  /* Paleta tomada del logo oficial (fondo blanco se conserva) */
  --blanco: #FFFFFF;
  --rojo: #EB3634;
  --azul: #2E6CBF;
  --naranja: #F98229;
  --amarillo: #FBC222;
  --morado: #855EB9;
  --negro: #1C1C1C;
  --verde: #5A9C46;
  --gris-superficie: #F4F4F5;
  --gris-borde: #E4E4E7;

  /* Tintes de apoyo derivados */
  --rojo-suave: #FDECEA;
  --azul-suave: #EAF0FA;
  --gris-texto: #6B6B72;

  /* Color del jugador activo — lo cambia el JS por vista de juego */
  --activo: var(--azul);

  /* Baloo 2: la letra redonda y juguetona del logo, para títulos.
     Archivo Expanded queda SOLO para cifras (tabular-nums garantizado). */
  --fuente-display: 'Baloo 2', 'Archivo Expanded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-display-x: 'Baloo 2', 'Archivo Expanded', system-ui, sans-serif;
  --fuente-numeros: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radio: 14px;
  --radio-lg: 22px;
  --sombra: 0 1px 2px rgba(28,28,28,.06), 0 8px 24px rgba(28,28,28,.06);
  --tap: 56px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--negro);
  background: var(--blanco);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
h1, h2, h3, output, kbd { margin: 0; }
button { font-family: inherit; }
a { color: var(--azul); }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

#app { height: 100dvh; display: flex; flex-direction: column; }

/* ---------- Vistas ---------- */
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view[hidden] { display: none; }

.scroller {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px clamp(16px, 4vw, 40px) 28px;
  width: 100%; max-width: 780px; margin: 0 auto;
}

/* ---------- Botones ---------- */
.btn {
  appearance: none; border: 2px solid transparent; cursor: pointer;
  font-weight: 700; font-size: 1rem; line-height: 1;
  border-radius: var(--radio); padding: 15px 22px; min-height: var(--tap);
  color: #fff; background: var(--negro); transition: transform .06s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }
.btn--rojo { background: var(--rojo); }
.btn--azul { background: var(--azul); }
.btn--verde { background: var(--verde); }
.btn--naranja { background: var(--naranja); }
.btn--rojo:hover, .btn--azul:hover, .btn--verde:hover, .btn--naranja:hover { filter: brightness(1.06); }
.btn--ghost {
  background: var(--blanco); color: var(--negro); border-color: var(--gris-borde);
}
.btn--ghost:hover { background: var(--gris-superficie); }
.btn--ghost.btn--danger { color: var(--rojo); border-color: var(--rojo); }
.btn--ghost.btn--danger:hover { background: var(--rojo-suave); }
.btn--xl { font-size: 1.3rem; padding: 20px 30px; width: 100%; max-width: 340px; }
.btn--wide { width: 100%; }
.btn--back { padding: 10px 14px; min-height: 44px; font-size: .95rem; }
.btn--add { width: 100%; border-style: dashed; color: var(--gris-texto); }

.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Topbar / actionbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px clamp(14px, 4vw, 28px);
  border-bottom: 1px solid var(--gris-borde);
  position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); z-index: 5;
}
.topbar__title { font-family: var(--fuente-display); font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; }
.topbar__spacer { flex: 1; }
.topbar__title + .topbar__spacer { margin-left: auto; }
.topbar { justify-content: flex-start; }
.topbar .topbar__title { flex: 1; text-align: center; }

.actionbar {
  padding: 14px clamp(14px, 4vw, 28px) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gris-borde); background: var(--blanco);
  display: flex; gap: 12px; width: 100%; max-width: 780px; margin: 0 auto;
}

.hint { color: var(--gris-texto); font-size: .98rem; margin: 0 0 16px; }

/* ============================================================
   VISTA 1 · INICIO
   ============================================================ */
.view--inicio { justify-content: center; align-items: center; text-align: center; padding: 24px; position: relative; overflow: hidden; }
.inicio__wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 460px; width: 100%; position: relative; z-index: 1; }

/* ---------- Galería de fondo: las fotos de la historia del juego ----------
   Filas de carrusel infinito que se llenan de arriba hacia abajo.
   Impares corren de derecha a izquierda; pares, al revés.
   Entre más fotos haya, más chicas se ven y más filas aparecen. */
.galeria {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 12px; padding-top: 12px; opacity: .45;
}
.gal-row { overflow: hidden; flex: none; }
.gal-track {
  display: flex; gap: 10px; width: max-content;
  animation: gal-scroll linear infinite;
}
.gal-track img {
  width: var(--gal-size, 100px); height: var(--gal-size, 100px);
  object-fit: cover; border-radius: 14px; flex: none;
}
.gal-track--rev { animation-direction: reverse; }
@keyframes gal-scroll { to { transform: translateX(-50%); } }
/* Velo blanco al centro para que el contenido de arriba se lea bien */
.galeria::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 58% at 50% 46%,
    rgba(255,255,255,.94), rgba(255,255,255,.6) 55%, rgba(255,255,255,.12) 82%);
}

/* Logotipo oficial (imagen, fondo blanco puro: se funde con la página).
   align-self centra aunque sea más ancho que el wrap de inicio. */
.logo-img {
  width: min(94vw, 880px); max-width: none; height: auto;
  align-self: center; margin: 0;
}
.inicio__tagline { color: var(--gris-texto); font-size: 1.08rem; line-height: 1.5; margin: 0; max-width: 30ch; }

.resume-card {
  width: 100%; border: 2px solid var(--azul); border-radius: var(--radio-lg);
  background: var(--azul-suave); padding: 16px; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
}
.resume-card__title { font-weight: 700; margin: 0; }
.resume-card__meta { margin: 2px 0 0; color: var(--azul); font-family: var(--fuente-display); font-weight: 700; }
.resume-card__actions { display: flex; gap: 10px; }
.resume-card__actions .btn { flex: 1; }

/* ============================================================
   VISTA 2 · JUGADORES
   ============================================================ */
.players { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.player {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  background: var(--gris-superficie); border: 1px solid var(--gris-borde);
  border-left: 8px solid var(--pcolor, var(--gris-borde));
  border-radius: var(--radio); padding: 12px;
}
.player__pic {
  width: 60px; height: 60px; border-radius: 14px; overflow: hidden; flex: none;
  border: 3px solid var(--pcolor, var(--gris-borde)); background: var(--blanco);
  cursor: pointer; padding: 0; display: grid; place-items: center; position: relative;
}
.player__pic svg, .player__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player__pic-cam { position: absolute; bottom: -2px; right: -2px; background: var(--negro); color: #fff; font-size: .62rem; padding: 2px 5px; border-radius: 8px; pointer-events: none; }
.player__mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.player__name {
  border: 1px solid var(--gris-borde); border-radius: 10px; padding: 11px 12px;
  font-size: 1rem; font-family: inherit; width: 100%; background: var(--blanco); color: var(--negro);
}
.player__name:focus-visible { outline: 2px solid var(--activo, var(--azul)); outline-offset: 1px; border-color: transparent; }
.player__pic-actions { display: flex; gap: 8px; }
.chiplink { background: none; border: none; color: var(--gris-texto); font-size: .82rem; padding: 2px 0; cursor: pointer; text-decoration: underline; }
.chiplink:hover { color: var(--negro); }
.player__ctrl { display: flex; flex-direction: column; gap: 4px; }
.player__arrow, .player__del {
  width: 40px; height: 34px; border: 1px solid var(--gris-borde); background: var(--blanco);
  border-radius: 9px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--negro);
  display: grid; place-items: center;
}
.player__arrow:hover:not([disabled]), .player__del:hover { background: var(--gris-superficie); }
.player__arrow[disabled] { opacity: .3; cursor: default; }
.player__del { color: var(--rojo); }

/* ============================================================
   VISTA 3 · AJUSTES
   ============================================================ */
.field { border: none; margin: 0 0 26px; padding: 0; }
.field__legend { font-family: var(--fuente-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 2px solid var(--gris-borde); background: var(--blanco); color: var(--negro);
  border-radius: 12px; padding: 12px 16px; font-weight: 700; cursor: pointer; min-width: 64px;
  font-variant-numeric: tabular-nums;
}
.chip[aria-checked="true"] { border-color: var(--azul); background: var(--azul); color: #fff; }
.chip:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }

.modes { display: grid; gap: 12px; }
.mode { cursor: pointer; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode__box {
  display: block; border: 2px solid var(--gris-borde); border-radius: var(--radio);
  padding: 16px; transition: border-color .12s, background .12s;
}
.mode input:checked + .mode__box { border-color: var(--verde); background: #f1f7f3; }
.mode input:focus-visible + .mode__box { outline: 3px solid var(--negro); outline-offset: 2px; }
.mode__name { display: block; font-family: var(--fuente-display); font-weight: 800; font-size: 1.15rem; }
.mode__desc { display: block; color: var(--gris-texto); margin-top: 4px; font-size: .96rem; }

.stepper { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--gris-borde); border-radius: 14px; padding: 6px; }
.stepper__btn { width: 52px; height: 52px; border: none; background: var(--gris-superficie); border-radius: 10px; font-size: 1.6rem; cursor: pointer; color: var(--negro); }
.stepper__btn:hover { background: var(--gris-borde); }
.stepper__value { font-family: var(--fuente-display); font-weight: 800; font-size: 1.8rem; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

/* ============================================================
   VISTA 4 · JUEGO  (el corazón)
   El marco de color = identidad del jugador activo.
   ============================================================ */
.view--juego { padding: 0; min-height: 0; }
.game {
  flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border: 14px solid var(--activo);
  transition: border-color .35s ease, background .35s ease;
  background: var(--blanco);
}
@supports (padding: max(0px)) {
  .game { border-width: clamp(10px, 2.4vw, 18px); }
}

.game__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px 4px;
}
.game__round { font-family: var(--fuente-display); font-weight: 700; color: var(--gris-texto); font-size: clamp(.95rem, 2.5vw, 1.15rem); }
.game__topbtns { display: flex; gap: 8px; }
.iconbtn {
  border: 1px solid var(--gris-borde); background: var(--blanco); color: var(--negro);
  border-radius: 10px; padding: 9px 13px; font-weight: 600; cursor: pointer; font-size: .9rem; min-height: 44px;
}
.iconbtn:hover { background: var(--gris-superficie); }
.iconbtn:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
#btnPausa[aria-pressed="true"] { background: var(--naranja); color: #fff; border-color: var(--naranja); }

/* Escenario clicable */
.game__stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.2vh, 14px); padding: clamp(6px, 1.5vh, 16px) 16px;
  border: none; background: none; cursor: pointer; width: 100%; text-align: center; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.game__stage:focus-visible { outline: 3px solid var(--activo); outline-offset: -6px; border-radius: 12px; }

.game__avatar {
  margin: 0; width: clamp(120px, 25vh, 300px); aspect-ratio: 1; border-radius: 26px; overflow: hidden;
  border: 8px solid var(--activo); background: var(--gris-superficie); flex: none; box-shadow: var(--sombra);
}
.game__avatar svg, .game__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.game__toca { margin: 0; color: var(--gris-texto); font-weight: 600; text-transform: lowercase; letter-spacing: .02em; font-size: clamp(1rem, 3vw, 1.25rem); }
.game__name {
  font-family: var(--fuente-display-x); font-weight: 900; letter-spacing: -.02em; line-height: .95;
  font-size: clamp(2rem, 8vw, 3.4rem); color: var(--activo); word-break: break-word;
}

.clock { line-height: .8; }
.clock__time {
  font-family: var(--fuente-display-x); font-weight: 900; color: var(--negro);
  font-size: clamp(4rem, min(22vw, 24vh), 12rem); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; display: block;
}

.drain { width: min(560px, 82%); height: 12px; flex: none; background: var(--gris-superficie); border-radius: 99px; overflow: hidden; }
.drain__fill { display: block; height: 100%; width: 100%; background: var(--activo); border-radius: 99px; transform-origin: left; transition: background .3s ease; }

.game__hint { margin: 0; color: var(--gris-texto); font-size: clamp(.85rem, 2.4vw, 1rem); }
.game__hint kbd {
  font-family: var(--fuente-cuerpo); background: var(--negro); color: #fff; padding: 2px 8px; border-radius: 6px; font-size: .85em; font-weight: 600;
}
.game__next { margin: 0; font-weight: 700; color: var(--negro); font-size: clamp(.9rem, 2.6vw, 1.1rem); }

.game__foot { display: flex; gap: 10px; padding: 8px 16px 14px; justify-content: center; }
.game__foot .btn { flex: 1; max-width: 260px; }

/* Estado: tiempo agotado */
.game.is-timeup { border-color: var(--rojo); background: var(--rojo-suave); }
.game.is-timeup { --activo: var(--rojo); }
.game.is-timeup .clock__time { color: var(--rojo); }
.game.is-timeup .game__toca::after { content: ""; }
.game.is-timeup .game__hint { color: var(--rojo); font-weight: 700; }

/* Estado: pausa */
.game.is-paused .clock__time { opacity: .35; }
.game.is-paused .game__avatar { filter: grayscale(.5); opacity: .8; }
.pausebanner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-4deg);
  background: var(--naranja); color: #fff; font-family: var(--fuente-display); font-weight: 800;
  padding: 8px 22px; border-radius: 12px; font-size: clamp(1.2rem, 5vw, 2rem); pointer-events: none; box-shadow: var(--sombra);
}

/* ============================================================
   VISTA 5 · CIERRE DE RONDA
   ============================================================ */
.step { animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.winner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.winner-cell {
  border: 2px solid var(--gris-borde); border-radius: var(--radio); background: var(--blanco);
  padding: 14px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.winner-cell[aria-checked="true"] { border-color: var(--pcolor, var(--verde)); background: #f1f7f3; }
.winner-cell:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
.winner-cell__pic { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; border: 3px solid var(--pcolor, var(--gris-borde)); }
.winner-cell__pic svg, .winner-cell__pic img { width: 100%; height: 100%; object-fit: cover; }
.winner-cell__name { font-weight: 700; }

/* Calculadora de fichas */
.calc-player { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.calc-player__pic { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; border: 3px solid var(--pcolor, var(--gris-borde)); flex: none; }
.calc-player__pic svg, .calc-player__pic img { width: 100%; height: 100%; object-fit: cover; }
.calc-player__name { font-family: var(--fuente-display); font-weight: 800; font-size: 1.35rem; }
.calc-player__idx { color: var(--gris-texto); font-size: .9rem; }

.calc-readout {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--gris-superficie); border-radius: var(--radio); padding: 14px 18px; margin-bottom: 12px;
}
.calc-readout__total { font-family: var(--fuente-display-x); font-weight: 900; font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.calc-readout__count { color: var(--gris-texto); font-weight: 600; }

.calc-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; margin-bottom: 12px; }
.calc-list:empty::after { content: "Aún no agregas fichas"; color: var(--gris-texto); font-size: .9rem; }
.calc-tile {
  font-variant-numeric: tabular-nums; font-weight: 700; background: var(--negro); color: #fff;
  border-radius: 8px; padding: 4px 9px; font-size: .9rem;
}
.calc-tile--joker { background: var(--naranja); }

.calc-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.calc-key {
  border: 2px solid var(--gris-borde); background: var(--blanco); color: var(--negro);
  border-radius: 12px; min-height: 52px; font-family: var(--fuente-display); font-weight: 800; font-size: 1.3rem;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.calc-key:hover { background: var(--gris-superficie); }
.calc-key:active { transform: translateY(1px); }
.calc-key--joker { grid-column: span 2; background: var(--naranja); color: #fff; border-color: var(--naranja); font-size: 1rem; }
.calc-key:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }

.calc-tools { display: flex; gap: 8px; margin-bottom: 16px; }
.calc-tools .btn { flex: 1; }
.calc-direct { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.calc-direct label { color: var(--gris-texto); font-size: .92rem; }
.calc-direct input {
  width: 110px; border: 2px solid var(--gris-borde); border-radius: 10px; padding: 10px 12px;
  font-family: var(--fuente-display); font-weight: 800; font-size: 1.2rem; text-align: center; font-variant-numeric: tabular-nums;
}
.calc-direct input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

/* Resumen de ronda */
.resumen__mode { color: var(--gris-texto); margin-bottom: 12px; }
.resumen-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.resumen-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--gris-superficie); border-radius: 12px;
  border-left: 6px solid var(--pcolor, var(--gris-borde));
}
.resumen-row__name { font-weight: 700; }
.resumen-row__fichas { color: var(--gris-texto); font-size: .88rem; font-variant-numeric: tabular-nums; }
.resumen-row__pts { font-family: var(--fuente-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.resumen-row.is-winner { background: #f1f7f3; }
.resumen-row.is-winner .resumen-row__name::after { content: " 👑"; }
.pts-pos { color: var(--verde); }
.pts-neg { color: var(--rojo); }
.badge-edit { display: inline-block; background: var(--naranja); color: #fff; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-left: 8px; vertical-align: middle; }

/* ============================================================
   VISTA 6 · MARCADOR
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gris-borde); border-radius: var(--radio); margin-bottom: 24px; }
.score { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.score th, .score td { padding: 12px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--gris-borde); }
.score thead th { font-family: var(--fuente-display); font-weight: 700; font-size: .85rem; color: var(--gris-texto); background: var(--gris-superficie); position: sticky; top: 0; }
.score .col-name { text-align: left; position: sticky; left: 0; background: var(--blanco); z-index: 2; border-right: 1px solid var(--gris-borde); box-shadow: 6px 0 8px -6px rgba(28,28,28,.18); }
.score thead .col-name { z-index: 3; background: var(--gris-superficie); }
.score th, .score td { padding-left: 14px; padding-right: 14px; }
.score td:not(.col-name), .score th:not(.col-name) { min-width: 52px; }
.score .col-total { font-family: var(--fuente-display); font-weight: 800; font-size: 1.1rem; background: #fafafa; }
.score thead .col-total { background: var(--gris-superficie); }
.score tbody tr:nth-child(even) td:not(.col-name) { background: #fbfbfc; }
.score .cell-player { display: inline-flex; align-items: center; gap: 10px; }
.score .cell-player__pic { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; border: 2px solid var(--pcolor, var(--gris-borde)); flex: none; }
.score .cell-player__pic svg, .score .cell-player__pic img { width: 100%; height: 100%; object-fit: cover; }
.score .cell-player__rank { font-family: var(--fuente-display); font-weight: 800; color: var(--gris-texto); width: 1.4em; }
.score tbody tr.is-leader td.col-name .cell-player__rank { color: var(--verde); }
.score .cell-round { cursor: pointer; }
.score .cell-round.editable:hover { background: var(--azul-suave); }
.score td.pts-pos { color: var(--verde); }
.score td.pts-neg { color: var(--rojo); }

.times { margin-bottom: 8px; }
.times__h { font-family: var(--fuente-display); font-weight: 800; font-size: 1.25rem; margin-bottom: 12px; }
.times__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.time-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--gris-superficie); border-radius: 12px; border-left: 6px solid var(--pcolor, var(--gris-borde));
}
.time-row__bar { flex: 1; height: 8px; background: var(--gris-borde); border-radius: 99px; overflow: hidden; }
.time-row__bar i { display: block; height: 100%; background: var(--pcolor, var(--azul)); border-radius: 99px; }
.time-row__label { font-weight: 600; }
.time-row__val { font-family: var(--fuente-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gris-texto); white-space: nowrap; }

/* ============================================================
   VISTA 7 · RESULTADO FINAL
   ============================================================ */
.view--final { text-align: center; }
.final__crown { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 26px; }
.final__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 700; color: var(--gris-texto); margin: 0; }
.final__avatar {
  margin: 4px 0; width: clamp(160px, 46vw, 240px); aspect-ratio: 1; border-radius: 30px; overflow: hidden;
  border: 10px solid var(--pcolor, var(--verde)); box-shadow: var(--sombra); position: relative;
}
.final__avatar svg, .final__avatar img { width: 100%; height: 100%; object-fit: cover; }
.final__avatar::after { content: "👑"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 2.4rem; }
.final__name { font-family: var(--fuente-display-x); font-weight: 900; font-size: clamp(2.2rem, 9vw, 3.4rem); letter-spacing: -.02em; color: var(--pcolor, var(--negro)); }
.final__line { color: var(--gris-texto); font-size: 1.05rem; margin: 0; }
.final__actions { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 8px auto 0; }

/* ============================================================
   MODALES
   ============================================================ */
.modal { position: fixed; inset: 0; background: rgba(28,28,28,.55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal[hidden] { display: none; }
.modal__box { background: var(--blanco); border-radius: var(--radio-lg); padding: 20px; width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 92dvh; overflow-y: auto; }
.modal__title { font-family: var(--fuente-display); font-weight: 800; font-size: 1.4rem; margin-bottom: 4px; }
.modal__sub { color: var(--gris-texto); margin: 0 0 16px; }

.camera { position: relative; background: var(--negro); border-radius: var(--radio); overflow: hidden; aspect-ratio: 1; margin-bottom: 16px; }
.camera__video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.camera__video.no-mirror { transform: none; }
.camera__msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; padding: 24px; background: var(--negro); }
.camera__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn--round { width: 66px; height: 66px; border-radius: 50%; padding: 0; border: 5px solid #fff; box-shadow: 0 0 0 2px var(--rojo); flex: none; }

.martians { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.martian-cell { border: 3px solid var(--gris-borde); border-radius: 16px; background: var(--gris-superficie); padding: 6px; cursor: pointer; aspect-ratio: 1; }
.martian-cell svg { width: 100%; height: 100%; display: block; }
.martian-cell[aria-checked="true"] { border-color: var(--negro); background: var(--blanco); }
.martian-cell:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }

/* ============================================================
   VISTA 8 · INSTRUCCIONES + CHAT DE REGLAMENTO
   ============================================================ */
.inicio__ayuda { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Buscador del reglamento */
.regsearch { margin-bottom: 16px; }
.regsearch input {
  width: 100%; border: 2px solid var(--gris-borde); border-radius: 12px;
  padding: 12px 16px; font-family: inherit; font-size: 1rem; background: var(--gris-superficie);
}
.regsearch input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; background: var(--blanco); }

/* Índice + cuerpo */
.reglayout { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start; }
.regindex { position: sticky; top: 0; }
.regindex__toggle { display: none; }
.regindex__list { display: flex; flex-direction: column; gap: 2px; }
.regindex__list button {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 7px 10px; border-radius: 8px; color: var(--gris-texto);
  font-size: .88rem; font-weight: 600; line-height: 1.3;
}
.regindex__list button:hover { background: var(--gris-superficie); color: var(--negro); }
.regindex__list button:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.regindex__list .num { color: var(--azul); font-family: var(--fuente-display); margin-right: 6px; }

.reglas { min-width: 0; }
.reglas .regsec { scroll-margin-top: 10px; padding-bottom: 6px; }
.reglas h2 {
  font-family: var(--fuente-display); font-weight: 800; font-size: 1.25rem; margin: 26px 0 10px;
}
.reglas .regsec:first-child h2 { margin-top: 0; }
.reglas h2 .num { color: var(--azul); margin-right: 8px; }
.reglas p, .reglas li { line-height: 1.65; color: var(--negro); font-size: 1.02rem; }
.reglas ul { margin: 8px 0; padding-left: 22px; }
.reglas li { margin-bottom: 6px; }
.reglas b { font-weight: 700; }
.reglas mark { background: rgba(251, 194, 34, .45); border-radius: 3px; padding: 0 1px; }
.regsec.is-flash { animation: regflash 1.6s ease; }
@keyframes regflash {
  0% { background: var(--azul-suave); box-shadow: 0 0 0 6px var(--azul-suave); border-radius: 8px; }
  100% { background: transparent; box-shadow: none; }
}
.reg-noresults { color: var(--gris-texto); padding: 18px 0; }

@media (max-width: 720px) {
  .reglayout { grid-template-columns: 1fr; gap: 10px; }
  .regindex { position: static; }
  .regindex__toggle {
    display: block; width: 100%; text-align: left; background: var(--gris-superficie);
    border: 1px solid var(--gris-borde); border-radius: 10px; padding: 11px 14px;
    font-weight: 700; font-size: .95rem; cursor: pointer; color: var(--negro);
  }
  .regindex__list { display: none; padding: 8px 4px; }
  .regindex.is-open .regindex__list { display: flex; }
}

/* Panel fijo abajo (como la barra de escribir de WhatsApp):
   el reglamento se desplaza en el scroller; esto queda siempre a la vista. */
.rchat-wrap {
  border-top: 1px solid var(--gris-borde); background: var(--blanco);
  box-shadow: 0 -8px 20px -12px rgba(28,28,28,.25);
}
.rchat {
  width: 100%; max-width: 780px; margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 40px) calc(12px + env(safe-area-inset-bottom));
}
.rchat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rchat__h { font-family: var(--fuente-display); font-weight: 800; font-size: 1rem; }
.rchat__sugs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
  max-height: 220px; opacity: 1; overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, margin-bottom .3s ease;
}
.rchat__sugs:empty { display: none; }
/* Se esconden al deslizar el reglamento; vuelven al enfocar el campo */
.rchat__sugs--oculto { max-height: 0; opacity: 0; margin-bottom: 0; }
.sugchip {
  border: 1px solid var(--gris-borde); background: var(--gris-superficie); color: var(--negro);
  border-radius: 99px; padding: 7px 12px; font-size: .85rem; cursor: pointer; font-weight: 600;
}
.sugchip:hover { background: var(--azul-suave); border-color: var(--azul); }
.sugchip:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.rchat__log { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; max-height: min(30dvh, 230px); overflow-y: auto; }
.rchat__log:empty { display: none; }
/* Botones dentro de burbujas del bot */
.rmsg__btns { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.optbtn, .seclink {
  text-align: left; border: 1px solid var(--gris-borde); background: var(--blanco);
  border-radius: 10px; padding: 9px 12px; font-size: .9rem; cursor: pointer; color: var(--negro); font-weight: 600;
}
.optbtn:hover { background: var(--azul-suave); border-color: var(--azul); }
.seclink { color: var(--azul); border-color: var(--azul-suave); background: var(--azul-suave); }
.seclink:hover { filter: brightness(.97); }
.optbtn:focus-visible, .seclink:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.rtag {
  display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 99px;
  padding: 2px 8px; margin-bottom: 6px; background: var(--naranja); color: #fff;
}
.rmsg { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; font-size: .96rem; }
.rmsg--user { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
.rmsg--bot { align-self: flex-start; background: var(--gris-superficie); border-bottom-left-radius: 4px; }
.rchat__form { display: flex; gap: 8px; }
.rchat__form input {
  flex: 1; border: 2px solid var(--gris-borde); border-radius: 12px; padding: 12px 14px;
  font-family: inherit; font-size: 1rem; min-width: 0;
}
.rchat__form input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

/* ============================================================
   VISTA 9 · VIDEO TUTORIAL
   ============================================================ */
.tut { max-width: 1080px; margin: 0 auto; }
.tut__stage {
  height: clamp(320px, 58dvh, 660px); border: 2px solid var(--gris-borde); border-radius: var(--radio-lg);
  background: var(--blanco); overflow: hidden; position: relative; margin-bottom: 14px;
  display: grid; place-items: center; text-align: center; padding: clamp(20px, 4vw, 48px);
}
.tut__scene { animation: tutIn .5s ease; width: 100%; }
@keyframes tutIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.tut__scene h3 { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.6rem); margin-bottom: 12px; }
.tut__scene p { color: var(--gris-texto); line-height: 1.55; margin: 0 auto; max-width: 54ch; font-size: clamp(1rem, 1.9vw, 1.3rem); }
.tut__visual { margin: clamp(14px, 3vh, 30px) auto; display: flex; justify-content: center; align-items: center; gap: clamp(12px, 2vw, 22px); flex-wrap: wrap; }
.tut__bar { height: 12px; background: var(--gris-superficie); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.tut__fill { display: block; height: 100%; width: 0; background: var(--rojo); border-radius: 99px; transition: width .25s linear; }
.tut__controls { display: flex; gap: 10px; justify-content: center; }
.tut__controls #tutPlay { min-width: 170px; }
.tut__count { text-align: center; margin-top: 10px; }

/* piezas visuales de las escenas */
.tut-chip { border: 2px solid var(--gris-borde); border-radius: 14px; padding: clamp(10px, 1.6vw, 16px) clamp(14px, 2.2vw, 24px); font-weight: 700; background: var(--gris-superficie); font-size: clamp(1rem, 1.8vw, 1.3rem); }
.tut-chip--on { border-color: var(--azul); background: var(--azul); color: #fff; }
.tut-clockdemo { font-family: var(--fuente-display-x); font-weight: 900; font-size: clamp(3.2rem, 9vw, 6.5rem); font-variant-numeric: tabular-nums; line-height: 1; }
.tut-frame { border: 10px solid var(--azul); border-radius: 20px; padding: clamp(14px, 2.4vw, 28px) clamp(20px, 3.4vw, 44px); display: inline-block; }
.tut-frame--rojo { border-color: var(--rojo); background: var(--rojo-suave); }
.tut-kbd { background: var(--negro); color: #fff; padding: 5px 16px; border-radius: 8px; font-weight: 700; display: inline-block; }
.tut-score { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
.tut-score td, .tut-score th { border: 1px solid var(--gris-borde); padding: clamp(8px, 1.4vw, 14px) clamp(14px, 2.4vw, 26px); font-size: clamp(1rem, 1.8vw, 1.35rem); }
.tut-score th { background: var(--gris-superficie); font-weight: 700; }
.tut-martian { width: clamp(90px, 13vw, 150px); height: clamp(90px, 13vw, 150px); border-radius: 22px; border: 6px solid var(--pcolor, var(--azul)); overflow: hidden; background: var(--gris-superficie); }
.tut-martian svg { width: 100%; height: 100%; }
.tut-pulse { animation: tutPulse 1s ease infinite; }
@keyframes tutPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .tut-pulse { animation: none; } }

/* ---------- Botón de silencio ---------- */
.mutebtn {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%; z-index: 40;
  border: 1px solid var(--gris-borde); background: var(--blanco);
  font-size: 1.15rem; cursor: pointer; box-shadow: var(--sombra);
  display: grid; place-items: center; line-height: 1;
}
.mutebtn:hover { background: var(--gris-superficie); }
.mutebtn:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
.mutebtn[aria-pressed="true"] { background: var(--gris-superficie); opacity: .85; }
/* En la vista de juego el control vive en la barra superior */
body.in-game .mutebtn { display: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--negro); color: #fff; padding: 13px 20px; border-radius: 12px; font-weight: 600;
  z-index: 80; max-width: 90vw; text-align: center; box-shadow: var(--sombra);
}
.toast[hidden] { display: none; }
.toast--error { background: var(--rojo); }
.toast--ok { background: var(--verde); }

/* ---------- Footer ---------- */
.sitefoot {
  text-align: center; color: var(--gris-texto); font-size: .78rem; line-height: 1.5;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gris-borde);
}
.sitefoot a { color: var(--gris-texto); font-weight: 600; }
.view--juego ~ .sitefoot { }

/* ============================================================
   Responsive — laptop primero para el juego
   ============================================================ */
@media (min-width: 720px) {
  .game__foot .btn { max-width: 220px; }
  .winner-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .calc-pad { grid-template-columns: repeat(7, 1fr); }
}

/* En pantallas anchas y bajas (laptop horizontal) el reloj manda */
@media (min-width: 900px) and (min-height: 500px) {
  .clock__time { font-size: clamp(5rem, min(15vw, 22vh), 13rem); }
}

/* Pantallas muy bajas (ventana chica): compactar el escenario para que
   nada se recorte */
@media (max-height: 560px) {
  .game__avatar { width: clamp(80px, 20vh, 180px); border-width: 5px; }
  .clock__time { font-size: min(16vw, 24vh); }
  .game__name { font-size: clamp(1.4rem, 5vw, 2.2rem); }
  .game__toca { display: none; }
  .game__hint { font-size: .78rem; }
}

/* Cifras siempre en Archivo Expanded: numerales tabulares sólidos.
   (Baloo 2 es para títulos; sus dígitos no garantizan ancho fijo.) */
.clock__time, .calc-readout__total, .stepper__value, .tut-clockdemo,
.score .col-total, .resumen-row__pts, .time-row__val {
  font-family: var(--fuente-numeros);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}