/*
 * Chess Battle — hoja de estilos unica.
 *
 * Organizacion: variables y tema, primitivas (botones, campos, dialogos),
 * estructura de la pagina, tablero, panel lateral y, al final, los ajustes
 * responsive. Los colores del tablero se mantienen iguales en tema claro y
 * oscuro (un tablero de ajedrez es reconocible por sus colores); lo que cambia
 * con el tema es el resto de la interfaz.
 */

/* ------------------------------------------------------------------ */
/* Variables y tema                                                     */
/* ------------------------------------------------------------------ */

:root {
  --square-light: #e9d7b9;
  --square-dark: #a9795a;
  --hint: rgba(20, 20, 20, 0.28);
  --hint-capture: rgba(190, 60, 40, 0.75);
  --selected: rgba(240, 190, 80, 0.55);
  --last-move: rgba(240, 200, 90, 0.38);
  --check: rgba(228, 60, 48, 0.95);

  --accent: #e8994a;
  --accent-strong: #d97f2a;
  --danger: #d9534f;
  --win: #58a55c;
  --loss: #d9534f;
  --draw: #8a8fa3;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --transition: 180ms ease;

  /* Tema claro por defecto. */
  --bg: #f3f1ec;
  --surface: #ffffff;
  --surface-2: #eceae4;
  --border: #d9d5cc;
  --text: #23242b;
  --text-muted: #6b6d7a;
  --overlay: rgba(20, 20, 26, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151d;
    --surface: #1d1f2b;
    --surface-2: #262939;
    --border: #333648;
    --text: #eceef5;
    --text-muted: #9a9eb2;
    --overlay: rgba(6, 7, 12, 0.7);
    --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  }
}

/* El selector de tema de los ajustes tiene prioridad sobre el del sistema. */
:root[data-theme='light'] {
  --bg: #f3f1ec;
  --surface: #ffffff;
  --surface-2: #eceae4;
  --border: #d9d5cc;
  --text: #23242b;
  --text-muted: #6b6d7a;
  --overlay: rgba(20, 20, 26, 0.55);
}

:root[data-theme='dark'] {
  --bg: #14151d;
  --surface: #1d1f2b;
  --surface-2: #262939;
  --border: #333648;
  --text: #eceef5;
  --text-muted: #9a9eb2;
  --overlay: rgba(6, 7, 12, 0.7);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/*
 * El atributo `hidden` lo aplica el navegador con `display: none`, pero esa
 * regla vive en la hoja de estilos del agente de usuario y cualquier `display`
 * declarado aqui la gana. Como la interfaz oculta y muestra elementos con
 * `hidden` desde JavaScript, hace falta reforzarlo.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

/*
  Desactiva el gesto de "tirar hacia abajo para recargar" y el deslizamiento
  lateral que navega hacia atras. En una aplicacion a pantalla completa, donde
  el dedo esta constantemente sobre el tablero, esos gestos solo se disparan por
  accidente.

  Tiene que ir en el elemento RAIZ: solo el valor de `html` se propaga al
  viewport, que es quien decide si el gesto recarga. Puesto en `body` no hace
  nada.

  `contain` corta el encadenamiento del scroll hacia el viewport (que es lo que
  dispara la recarga) sin quitar el desplazamiento normal dentro de la pagina.
*/
html { overscroll-behavior: contain; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* El bloqueo del gesto de recarga vive en `html` (ver arriba): ponerlo aqui
     no tiene efecto sobre el viewport y ademas lo bloquearia siempre. */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.2; }

.block-title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ */
/* Pantalla de arranque                                                 */
/* ------------------------------------------------------------------ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #10111a;
  transition: opacity 380ms ease;
}

.splash.hidden { opacity: 0; pointer-events: none; }

.splash-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.splash-overlay {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  color: #fff;
  /* Degradado bajo el texto para que se lea sobre cualquier zona de la imagen. */
  background: radial-gradient(ellipse at center, rgba(8, 9, 14, 0.82) 0%, rgba(8, 9, 14, 0) 72%);
}

.splash-title {
  font-size: clamp(2rem, 9vw, 3.2rem);
  letter-spacing: 0.02em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75);
}

.splash-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.splash-spinner {
  width: 28px;
  height: 28px;
  margin-top: 1.2rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* Estructura                                                           */
/* ------------------------------------------------------------------ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand img { border-radius: 6px; }

.app-bar-actions { display: flex; gap: 0.4rem; }

.layout {
  flex: 1;
  display: grid;
  gap: 1rem;
  padding: 1rem 0.9rem 1.4rem;
  align-content: start;
}

/* ------------------------------------------------------------------ */
/* Filas de jugador                                                     */
/* ------------------------------------------------------------------ */

.board-area {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  margin-inline: auto;
}

.player-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* El turno se marca con el borde: se ve sin leer nada. */
.player-row.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.player-identity { display: grid; min-width: 0; }

.player-name {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.player-elo::after { content: ' ELO'; }

.player-captures {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
}

.captures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.captured-piece {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  /* Las piezas capturadas se solapan un poco para ocupar menos ancho. */
  margin-right: -5px;
}

.advantage {
  flex: none;
  padding: 0.05rem 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border-radius: 999px;
}

.clock {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 650;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}

.clock.running { color: var(--text); background: var(--accent); color: #17181f; }
.clock.low { color: #fff; background: var(--danger); }

/* ------------------------------------------------------------------ */
/* Tablero                                                              */
/* ------------------------------------------------------------------ */

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  touch-action: none;   /* imprescindible: el arrastre no debe hacer scroll */
  user-select: none;
  -webkit-user-select: none;
}

.board.locked { cursor: default; }

.board-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.square {
  position: relative;
  transition: background-color 120ms ease;
}

.square.light { background: var(--square-light); }
.square.dark { background: var(--square-dark); }

.square.last-move { background-color: color-mix(in srgb, var(--last-move) 60%, transparent); }
.square.light.last-move { background: color-mix(in srgb, var(--square-light) 55%, var(--last-move)); }
.square.dark.last-move { background: color-mix(in srgb, var(--square-dark) 55%, var(--last-move)); }

/* La casilla seleccionada lleva tinte y anillo: el tinte solo no se distingue
   sobre las casillas oscuras, donde queda casi del mismo tono.
   El tinte va como `background-image` para superponerse al color de la casilla
   en lugar de sustituirlo, y necesita `!important` porque la regla del ultimo
   movimiento tiene mas especificidad y usa la propiedad abreviada. */
.square.selected {
  background-image: linear-gradient(var(--selected), var(--selected)) !important;
  box-shadow: inset 0 0 0 min(5px, 0.9vmin) var(--accent);
}

/* Punto en los destinos vacios y anillo en los que tienen pieza que capturar. */
.square.target::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--hint) 0 17%, transparent 18%);
  pointer-events: none;
}

.square.target-capture {
  box-shadow: inset 0 0 0 min(6px, 1.1vmin) var(--hint-capture);
}

/* Rey en jaque: resplandor rojo pulsante, la senal mas urgente del tablero. */
.square.in-check {
  background-image: radial-gradient(circle at center, var(--check) 0%, rgba(228, 60, 48, 0.45) 45%, transparent 72%);
  animation: check-pulse 1.1s ease-in-out infinite;
}

@keyframes check-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* Coordenadas: solo en el borde inferior e izquierdo, como en un tablero real.
   El color se toma del color de la casilla contraria en lugar de heredarlo del
   texto de la interfaz: asi contrasta igual de bien en tema claro y oscuro. */
.board.with-coordinates .square.light::before,
.board.with-coordinates .square.light::after { color: var(--square-dark); }
.board.with-coordinates .square.dark::before,
.board.with-coordinates .square.dark::after { color: var(--square-light); }

.board.with-coordinates .square::after {
  content: attr(data-file-label);
  position: absolute;
  right: 3%;
  bottom: 1%;
  font-size: min(2.4vmin, 12px);
  font-weight: 700;
  opacity: 0.55;
  pointer-events: none;
}

.board.with-coordinates .square::first-line { line-height: 1; }

.board.with-coordinates .square[data-rank-label]:not([data-rank-label=''])::before {
  /* Se combina con el punto de destino usando el mismo pseudoelemento sin
     pisarlo: cuando la casilla es un destino, el degradado toma el relevo. */
  content: attr(data-rank-label);
  position: absolute;
  left: 4%;
  top: 1%;
  font-size: min(2.4vmin, 12px);
  font-weight: 700;
  opacity: 0.55;
  background: none;
  pointer-events: none;
}

.board.with-coordinates .square.target[data-rank-label]:not([data-rank-label=''])::before {
  content: '';
  background: radial-gradient(circle at center, var(--hint) 0 17%, transparent 18%);
}

.board-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  will-change: transform;
  transition: transform 170ms cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-user-drag: none;
}

.piece.moving { z-index: 3; }

.piece.dragging {
  z-index: 5;
  transition: none;
  transform: none;
  scale: 1.12;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.piece.captured {
  transition: opacity 170ms ease, scale 170ms ease;
  opacity: 0;
  scale: 0.6;
}

/* Jaque mate: el rey se desploma y se queda tumbado, como cuando se rinde una
   partida sobre un tablero de verdad.

   Se usa la propiedad `rotate` en lugar de `transform` porque `transform` ya lo
   ocupa la colocacion de la pieza en su casilla; son propiedades independientes
   y no se pisan. Eso si, el navegador aplica `rotate` DESPUES de `transform`,
   con lo que el centro de giro sigue estando en la esquina del tablero (donde
   nace la caja de la pieza) y no en la casilla que ocupa. Por eso se corre el
   `transform-origin` tantas casillas como indiquen `--col` y `--row`: un 100%
   equivale al ancho de una pieza, que es justo el de una casilla.

   El giro es alrededor del centro de la casilla, no de la base de la pieza: asi
   el rey tumbado queda centrado donde estaba y no se sale al cuadro vecino. De
   lado ocupa mas a lo ancho que de pie, de modo que ademas encoge un poco para
   dejar aire con los bordes de la casilla. */
.piece.mated {
  z-index: 4;
  transform-origin: calc(50% + var(--col, 0) * 100%) calc(50% + var(--row, 0) * 100%);
  animation: king-falls 900ms cubic-bezier(0.3, 0.9, 0.4, 1) forwards;
}

@keyframes king-falls {
  0% { rotate: 0deg; scale: 1; filter: none; }
  55% { rotate: 84deg; scale: 0.88; }
  100% { rotate: 76deg; scale: 0.88; filter: grayscale(0.7) brightness(0.72); }
}

/* ------------------------------------------------------------------ */
/* Panel lateral                                                        */
/* ------------------------------------------------------------------ */

.side-panel {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.status-block {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.status { margin: 0; font-weight: 650; }
.status[data-tone='check'] { color: var(--danger); }
.status[data-tone='win'] { color: var(--win); }
.status[data-tone='loss'] { color: var(--loss); }
.status[data-tone='draw'] { color: var(--draw); }

.opening, .thinking {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.thinking { display: flex; align-items: center; gap: 0.45rem; }

.dots { display: inline-flex; gap: 3px; }

.dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.1s infinite ease-in-out;
}

.dots i:nth-child(2) { animation-delay: 0.16s; }
.dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

.moves-block {
  padding: 0.8rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.move-list {
  max-height: 220px;
  overflow-y: auto;
  font-variant-numeric: tabular-nums;
  scrollbar-width: thin;
}

.move-empty { margin: 0; font-size: 0.87rem; color: var(--text-muted); }

.move-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr 1fr;
  gap: 0.3rem;
  padding: 0.12rem 0;
  border-radius: 4px;
}

.move-row:nth-child(odd) { background: var(--surface-2); }
.move-number { color: var(--text-muted); font-size: 0.85rem; }
.move-san { font-weight: 550; }
.move-san.current { color: var(--accent-strong); font-weight: 700; }

.actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Primitivas: botones, campos                                          */
/* ------------------------------------------------------------------ */

.button {
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}

.button:hover:not(:disabled) { background: var(--surface-2); }
.button:disabled { opacity: 0.45; cursor: default; }

.button.primary {
  color: #1a1b22;
  background: var(--accent);
  border-color: var(--accent);
}

.button.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }

.button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.button.wide { width: 100%; }

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.icon-button:hover:not(:disabled) { background: var(--surface-2); }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.icon-button.danger { color: var(--danger); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; }
.field.row { grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; }
.field.switch { grid-template-columns: auto 1fr; align-items: center; gap: 0.6rem; cursor: pointer; }
.field-label { font-size: 0.9rem; color: var(--text-muted); }
.field-inline { display: flex; align-items: center; gap: 0.4rem; }

input[type='text'], input[type='number'], select {
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

input[type='number'] { width: 4.5rem; }
input[type='checkbox'] { width: 20px; height: 20px; accent-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Dialogos                                                             */
/* ------------------------------------------------------------------ */

dialog.dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(88dvh, 900px);
  padding: 1.3rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-y: auto;
}

dialog.dialog.compact { width: min(420px, calc(100vw - 2rem)); }

dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(3px);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dialog-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.dialog-header .dialog-title { margin-bottom: 0; }
.dialog-body { margin: 0 0 1rem; color: var(--text-muted); }
.dialog-note { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--text-muted); }

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.promotion-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.promotion-choice {
  padding: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.promotion-choice:hover { background: var(--accent); transform: translateY(-2px); }
.promotion-choice img { width: 100%; height: auto; display: block; }

.level-options { display: grid; gap: 0.5rem; }

.level-option {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.level-option small { color: var(--text-muted); }
.level-option.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* --- Fin de partida --- */

.gameover .dialog-title { font-size: 1.6rem; }
.gameover[data-outcome='win'] .dialog-title { color: var(--win); }
.gameover[data-outcome='loss'] .dialog-title { color: var(--loss); }
.gameover[data-outcome='draw'] .dialog-title { color: var(--draw); }

.gameover-reason { margin: 0 0 1.1rem; color: var(--text-muted); }

.rating-block {
  padding: 1rem;
  margin-bottom: 1.2rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  text-align: center;
}

.rating-change {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rating-before { color: var(--text-muted); }
.rating-arrow { color: var(--text-muted); font-size: 1.1rem; }

.rating-delta {
  font-size: 1rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  /* Aparece con un pequeño impulso: es el dato que el usuario viene a mirar. */
  animation: delta-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.rating-delta[data-direction='up'] { color: #0f2a12; background: var(--win); }
.rating-delta[data-direction='down'] { color: #fff; background: var(--loss); }
.rating-delta[data-direction='flat'] { color: var(--text); background: var(--border); }

@keyframes delta-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.7); }
  to { opacity: 1; transform: none; }
}

.rating-meta { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.rating-meta .dot { margin: 0 0.3rem; }

/* Son seis estadisticas, asi que la rejilla se fija a tres o dos columnas: en
   ambos casos las filas quedan completas y no aparecen huecos sueltos. Con
   `auto-fit` el numero de columnas dependia del ancho y casi siempre sobraba
   sitio en la ultima fila. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.stat {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem;
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.stat strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
/* La racha es texto, no un numero: cabe en una celda normal (asi no queda un
   hueco suelto en la rejilla) pero necesita menos cuerpo y poder partirse. */
.stat.text strong { font-size: 0.9rem; line-height: 1.2; align-self: center; }

/* --- Configuracion --- */

.settings-section {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}

.settings-section:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.section-hint { margin: -0.3rem 0 0.7rem; font-size: 0.85rem; color: var(--text-muted); }

/* --- Racha diaria --- */

.streak-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0.9rem;
  margin: 0 0 1rem;
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* La llama se apaga cuando no hay racha: el emoji encendido sobre un cero seria
   una felicitacion a destiempo. */
.streak-banner[data-state='none'] .streak-flame { filter: grayscale(1); opacity: 0.45; }
/* Verde: hoy ya esta hecho. Ambar: la racha sigue viva pero depende de que
   juegues antes de medianoche. */
.streak-banner[data-state='alive'] { border-left-color: var(--win); }
.streak-banner[data-state='risk'] { border-left-color: var(--accent); }

.streak-flame { font-size: 1.7rem; line-height: 1; }

.streak-main { display: grid; gap: 0.1rem; min-width: 0; }
.streak-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.streak-main strong { font-size: 1.1rem; }
.streak-main small { font-size: 0.8rem; color: var(--text-muted); }

.streak-best {
  display: grid;
  gap: 0.1rem;
  text-align: right;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.streak-best strong { font-size: 0.95rem; text-transform: none; color: var(--text); }

/* En movil la mejor racha baja a su propia linea en lugar de estrujar el texto
   principal contra el borde. */
@media (max-width: 560px) {
  .streak-banner { grid-template-columns: auto 1fr; }
  .streak-best { grid-column: 2; text-align: left; }
}

/* --- Historial de resultados (cuadricula 8x8) --- */

.results-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.3rem;
  margin: 0.2rem 0 1rem;
}

.result-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #10111a;
  user-select: none;
}

.result-cell.win   { background: #3fa45b; }
.result-cell.draw  { background: #d9a520; }
.result-cell.loss  { background: #cf4b45; color: #fff5f4; }

/* Las casillas sin jugar se ven como huecos, no como un cuarto resultado. */
.result-cell.empty {
  background: transparent;
  border: 1px dashed var(--border);
}

.results-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 0;
  margin: 0 0 0.6rem;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.results-legend li { display: flex; align-items: center; gap: 0.4rem; }
.results-legend .result-cell { width: 1.05rem; aspect-ratio: 1; font-size: 0.68rem; }
.results-legend strong { color: var(--text); }

.settings-credits {
  padding-top: 1rem;
  margin-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  text-align: center;
  color: var(--text-muted);
}

.profile-list { display: grid; gap: 0.4rem; margin-bottom: 0.8rem; }

.profile-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.profile-row.active { border-color: var(--accent); }

.profile-select {
  display: grid;
  gap: 0.05rem;
  padding: 0.45rem 0.6rem;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.profile-name { font-weight: 650; }
.profile-meta { font-size: 0.78rem; color: var(--text-muted); }

.profile-add {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.4rem;
}

/* Sin esto el input no puede encogerse por debajo de su tamano intrinseco y
   empuja al selector y al boton fuera del dialogo. */
.profile-add > * { min-width: 0; }

/* En pantallas estrechas los tres controles no caben en una fila: el nombre
   pasa a ocupar su propia linea y debajo quedan el nivel y el boton. */
@media (max-width: 560px) {
  .profile-add { grid-template-columns: 1fr auto; }
  .profile-add input { grid-column: 1 / -1; }
}

/* El historial no forma parte del alta de perfil: separarlo para que no se lea
   como un tercer boton de ese formulario. */
[data-open-history] { margin-top: 1rem; }

/* ------------------------------------------------------------------ */
/* Aviso efimero                                                        */
/* ------------------------------------------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  z-index: 50;
  padding: 0.6rem 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

/* El limite de alto del tablero descuenta lo que ocupan la barra superior, las
   dos filas de jugador y los margenes: si no, la fila inferior queda fuera de
   la pantalla y hay que hacer scroll para ver el propio reloj. */
@media (max-width: 899px) {
  .board-area { max-width: min(100%, calc(100dvh - 17rem)); }
  .move-list { max-height: 150px; }
}

/* Movil en horizontal: el tablero a la izquierda y el panel al lado, porque el
   alto es el recurso escaso. */
@media (max-width: 899px) and (orientation: landscape) {
  .layout {
    grid-template-columns: minmax(0, auto) minmax(240px, 1fr);
    align-items: start;
  }
  .board-area { max-width: calc(100dvh - 9rem); }
  .move-list { max-height: 120px; }
}

/* Escritorio y tabletas grandes. */
@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    max-width: 1120px;
    width: 100%;
    margin-inline: auto;
    padding: 1.4rem;
    gap: 1.4rem;
  }
  .board-area { max-width: min(100%, calc(100dvh - 15rem)); }
  .actions { grid-template-columns: 1fr 1fr; }
  .move-list { max-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}