/* estilos.css — Todo el aspecto de la app.
   Los colores están en variables (--nombre) para cambiarlos fácil. */

:root {
  --fondo: #1b2030;
  --panel: #262d42;
  --panel-2: #323a55;
  --texto: #f2f4fa;
  --texto-suave: #a9b1cb;
  --acento: #3fbf72;
  --acento-texto: #0d2616;
  --peligro: #ef5350;
  --radio: 14px;
}

/* Esquemas de color del tablero (se eligen en Ajustes) */
body[data-esquema="1"] { --claro: #f0d9b5; --oscuro: #b58863; }
body[data-esquema="2"] { --claro: #eeeed2; --oscuro: #769656; }
body[data-esquema="3"] { --claro: #dfe6ec; --oscuro: #6b8aa5; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Evita zoom accidental, scroll del navegador y selección de texto */
  touch-action: manipulation;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}

[hidden] { display: none !important; }

/* ---------- Pantallas ---------- */
.pantalla {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  gap: 14px;
}
.pantalla.activa { display: flex; }

.titulo {
  font-size: 3rem;
  text-align: center;
  margin: 8vh 0 4vh;
  letter-spacing: 0.04em;
}
.subtitulo { margin: 8px 0 4px; font-size: 1.6rem; }
.etiqueta { margin: 10px 0 0; color: var(--texto-suave); font-size: 0.95rem; }

.menu-botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 4vh;
}
#pantalla-inicio .menu-botones { margin-top: 0; }

/* ---------- Botones ---------- */
.boton {
  min-height: 48px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radio);
  background: var(--panel-2);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.boton:active { filter: brightness(1.2); transform: translateY(1px); }
.boton.grande { min-height: 58px; font-size: 1.1rem; }
.boton.chico { min-height: 44px; padding: 8px 14px; font-size: 0.95rem; }
.boton.primario { background: var(--acento); color: var(--acento-texto); }
.boton.peligro { background: var(--peligro); color: #fff; }
.boton:disabled { opacity: 0.45; cursor: default; }
.boton small { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.8; }

/* ---------- Chips (opciones para elegir) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 48px;
  min-width: 64px;
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  cursor: pointer;
}
.chip.sel { border-color: var(--acento); background: var(--panel-2); }
.muestra { width: 22px; height: 22px; border-radius: 6px; display: inline-block; }
.muestra.e1 { background: linear-gradient(135deg, #f0d9b5 50%, #b58863 50%); }
.muestra.e2 { background: linear-gradient(135deg, #eeeed2 50%, #769656 50%); }
.muestra.e3 { background: linear-gradient(135deg, #dfe6ec 50%, #6b8aa5 50%); }

.campo { display: flex; flex-direction: column; gap: 6px; color: var(--texto-suave); font-size: 0.95rem; }
.campo input {
  min-height: 48px;
  border-radius: var(--radio);
  border: 2px solid var(--panel-2);
  background: var(--panel);
  color: var(--texto);
  font-size: 1.2rem;
  padding: 0 14px;
  user-select: text;
}
.fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 14px;
  border-radius: var(--radio);
  background: var(--panel);
}
.fila input { width: 26px; height: 26px; accent-color: var(--acento); }

/* ---------- Pantalla de partida ---------- */
#pantalla-partida { padding: 8px 0 8px; gap: 6px; align-items: center; }

.barra {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
}
.estado { flex: 1; text-align: center; font-weight: 600; font-size: 0.95rem; }

/* Medida del tablero: cuadrado, lo más grande que entre en la pantalla */
#pantalla-partida { --lado: max(260px, min(100vw, calc(100dvh - 290px), 560px)); }

.jugador {
  width: var(--lado);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--radio);
  background: var(--panel);
  border: 2px solid transparent;
}
.jugador.turno { border-color: var(--acento); }
.datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nombre { font-weight: 700; }
.cap-linea { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.capturadas { display: inline-flex; flex-wrap: wrap; align-items: center; }
.capturadas .pieza { width: 20px; height: 20px; margin-right: -4px; }
.capturadas .pieza-emergencia { font-size: 18px; line-height: 20px; width: 20px; }
.ventaja { color: var(--texto-suave); font-size: 0.85rem; font-weight: 600; }

.reloj {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--texto-suave);
}
.reloj.activo { background: var(--acento); color: var(--acento-texto); }
.reloj.bajo { background: var(--peligro); color: #fff; }

#tablero-caja { position: relative; width: var(--lado); height: var(--lado); }
#tablero {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 6px;
  overflow: hidden;
}

.casilla { position: relative; display: flex; align-items: center; justify-content: center; }
.casilla.clara { background: var(--claro); }
.casilla.oscura { background: var(--oscuro); }
.casilla.ultima::before,
.casilla.sel::before,
.casilla.pista::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 221, 0, 0.42);
}
.casilla.sel::before { background: rgba(60, 200, 120, 0.55); }
.casilla.pista::before { background: rgba(70, 140, 255, 0.5); }
.casilla.pista-destino { box-shadow: inset 0 0 0 4px rgba(70, 140, 255, 0.9); }
.casilla.jaque { background-image: radial-gradient(circle, rgba(239, 83, 80, 0.95) 0%, rgba(239, 83, 80, 0) 75%); }

/* Imagen de la pieza: se ajusta sin deformarse */
.pieza { width: 88%; height: 88%; object-fit: contain; pointer-events: none; position: relative; z-index: 1; }
/* Para pixel art: se agranda sin suavizar. Se activa en Ajustes. */
body.pixel .pieza { image-rendering: pixelated; }

.pieza-emergencia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--lado) / 9);
  line-height: 1;
}
.pieza-emergencia.blanca { color: #fff; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 4px #000; }
.pieza-emergencia.negra { color: #111; text-shadow: 0 0 2px #fff; }

.punto {
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(20, 30, 20, 0.35);
  z-index: 2;
  pointer-events: none;
}
.punto.captura {
  width: 92%;
  height: 92%;
  background: none;
  border: 5px solid rgba(20, 30, 20, 0.35);
}

.coord { position: absolute; font-size: calc(var(--lado) / 36); font-weight: 700; opacity: 0.7; z-index: 0; pointer-events: none; }
.coord.num { top: 2px; left: 3px; }
.coord.let { bottom: 1px; right: 3px; }
.casilla.clara .coord { color: var(--oscuro); }
.casilla.oscura .coord { color: var(--claro); }

/* Capa de pausa: tapa el tablero para que nadie piense con el reloj detenido */
#pausa-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 6px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
  font-size: 1.2rem;
}
#pausa-overlay .boton { min-width: 200px; }

.acciones { width: var(--lado); display: flex; gap: 8px; }
.acciones .boton { flex: 1; padding: 8px 6px; font-size: 0.95rem; }

/* ---------- Panel de jugadas (desde abajo) ---------- */
#panel-historial {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  height: 42dvh;
  z-index: 20;
  background: var(--panel);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.historial-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
#lista-jugadas {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  overflow-y: auto;
  flex: 1;
  font-variant-numeric: tabular-nums;
  user-select: text;
}
#lista-jugadas li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--panel-2); }
#lista-jugadas .n { width: 2.4em; color: var(--texto-suave); }
#lista-jugadas .j { width: 5em; font-weight: 600; }
.vacio { color: var(--texto-suave); padding: 8px 0; }

/* ---------- Ventana de diálogo ---------- */
#modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 10, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-caja {
  width: min(100%, 420px);
  background: var(--panel);
  border-radius: 20px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.modal-caja h3 { margin: 0; font-size: 1.4rem; text-align: center; }
.modal-caja p { margin: 0; text-align: center; color: var(--texto-suave); line-height: 1.4; }
#modal-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
#modal-botones.cuadricula { display: grid; grid-template-columns: repeat(4, 1fr); }
#modal-botones.cuadricula .boton:last-child { grid-column: 1 / -1; }
.boton.pieza-btn { height: 72px; padding: 4px; display: flex; align-items: center; justify-content: center; }
.boton.pieza-btn .pieza { width: 90%; height: 90%; }
.boton.pieza-btn .pieza-emergencia { font-size: 44px; }

/* ---------- Configuración: lista de niveles ---------- */
#pantalla-config { overflow-y: auto; }
#pantalla-config .menu-botones { margin-top: 12px; }
.niveles { display: flex; flex-direction: column; gap: 8px; }
.nivel-op {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 10px 14px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  min-height: 56px;
}
.nivel-op.sel { border-color: var(--acento); background: var(--panel-2); }
.nivel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nivel-cab strong { font-size: 1.05rem; }
.puntos { color: var(--acento); letter-spacing: 2px; font-size: 0.8rem; }
.nivel-desc { color: var(--texto-suave); font-size: 0.85rem; }

/* ---------- Tablero con las negras abajo: se intercambian los paneles ---------- */
#pantalla-partida .barra { order: 0; }
#pantalla-partida #panel-b { order: 2; }
#pantalla-partida #tablero-caja { order: 3; }
#pantalla-partida #panel-w { order: 4; }
#pantalla-partida .acciones { order: 5; }
#pantalla-partida.negras-abajo #panel-w { order: 2; }
#pantalla-partida.negras-abajo #panel-b { order: 4; }

/* Hasta 5 botones de acción en una fila (teléfonos angostos) */
.acciones .boton { min-width: 0; padding: 8px 4px; font-size: 0.85rem; }

@media (max-width: 340px) {
  .acciones { gap: 4px; }
  .acciones .boton { font-size: 0.72rem; padding: 8px 2px; }
}

/* Dos jugadores en el mismo teléfono: las piezas negras se giran 180° para que
   quien juega con negras (sentado al otro lado) las vea derechas. */
body.modo-2j #tablero .p-negra,
body.modo-2j .boton.pieza-btn .p-negra { transform: rotate(180deg); }