/* =========================================================
   RatoLibre — Gato (tres en raya): estilos propios del juego
   Depende de los tokens de ../../assets/css/base.css
   Las reglas para celular van al final, después de las reglas base.
   ========================================================= */

:root {
  --gt-x: #b5533c;          /* cruces: terracota */
  --gt-o: #2f6f4e;          /* círculos: verde */
  --gt-linea: #1f2a37;
  --gt-ultima: #fbeccf;
  --gt-ultima-borde: #c98a2e;
  --gt-celda-radio: 16px;
}

/* ---------- Opciones de la barra ---------- */

.gt-nivel {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.gt-nivel select {
  flex: 1 1 auto;
  min-width: 140px;
  min-height: 48px;
  padding: 0 40px 0 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%231f2a37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 7l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.gt-check {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.gt-check input {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--accent-2);
  cursor: pointer;
}

/* ---------- Zona de juego ---------- */

.gt-zona {
  max-width: 520px;
  margin: 0 auto;
}

/* Aviso, jugadores y tablero: la pregunta de «Nuevo juego» los tapa */
.gt-mesa {
  position: relative;
}

/* ---------- Aviso de arriba: alto fijo para que el tablero no salte ---------- */

.gt-aviso {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
}

.gt-aviso-titulo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  min-height: 1.3em;
}

/* Cuatro renglones siempre (tres en pantallas anchas), aunque el texto sea
   más corto: así el tablero no se mueve de un turno a otro */
.gt-aviso-texto {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.4em;
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.gt-aviso-texto.es-nota {
  font-weight: 700;
  color: var(--accent-dark);
}

.gt-aviso.es-tu-turno {
  border-color: var(--accent-2);
  background: var(--accent-2-soft);
}

.gt-aviso.es-tu-turno .gt-aviso-titulo {
  color: var(--accent-2);
}

.gt-aviso.es-turno-pc {
  background: #f1ece3;
}

.gt-aviso.es-ganaste {
  border-color: var(--accent-2);
  background: var(--accent-2-soft);
}

.gt-aviso.es-ganaste .gt-aviso-titulo {
  color: var(--accent-2);
}

.gt-aviso.es-perdiste {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.gt-aviso.es-perdiste .gt-aviso-titulo {
  color: var(--accent-dark);
}

/* ---------- Quién es quién ---------- */

.gt-jugadores {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

.gt-jugador {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gt-jugador.es-activo {
  border-color: var(--text);
  background: #fffaf0;
  box-shadow: 0 0 0 2px var(--text);
}

.gt-jugador-nombre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gt-mini,
.gt-pip {
  display: inline-block;
  flex: 0 0 auto;
}

.gt-mini {
  width: 26px;
  height: 26px;
}

.gt-mini svg,
.gt-pip svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gt-quedan {
  display: inline-flex;
  gap: 4px;
}

.gt-quedan[hidden] {
  display: none;
}

.gt-pip {
  width: 18px;
  height: 18px;
}

.gt-pip.es-puesta {
  opacity: 0.22;
}

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

.gt-marco {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.gt-rejilla,
.gt-raya {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.gt-rejilla path {
  fill: none;
  stroke: var(--gt-linea);
  stroke-width: 7;
  stroke-linecap: round;
}

.gt-tablero {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.gt-celda {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* El fondo de color va por dentro de las rayas del tablero */
.gt-celda::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 3px solid transparent;
  border-radius: var(--gt-celda-radio);
  transition: background-color 0.15s ease;
}

.gt-celda:focus {
  outline: none;
}

.gt-celda:focus-visible::before {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-2);
}

.es-mi-turno .gt-celda.se-puede,
.es-mi-turno .gt-celda.es-movible,
.es-mi-turno .gt-celda.tiene-x {
  cursor: pointer;
}

.gt-celda.es-movible::before {
  border-color: rgba(181, 83, 60, 0.35);
  border-style: dashed;
}

.gt-celda.es-elegida::before {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}

/* Casillas adonde se puede llevar la cruz elegida */
.gt-celda.es-destino::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(31, 42, 55, 0.28);
}

/* Última jugada de la computadora */
.gt-celda.es-ultima::before {
  border-color: var(--gt-ultima-borde);
  background: var(--gt-ultima);
}

.gt-celda.es-origen::before {
  border-color: var(--gt-ultima-borde);
  border-style: dashed;
}

.gt-celda.es-ganadora.gana-x::before {
  background: var(--accent-2-soft);
}

.gt-celda.es-ganadora.gana-o::before {
  background: var(--accent-soft);
}

/* ---------- Fichas ---------- */

.gt-ficha {
  position: absolute;
  inset: 15%;
  display: block;
  pointer-events: none;
}

.gt-ficha svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

.trazo {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
}

.gt-x .trazo {
  stroke: var(--gt-x);
}

.gt-o .trazo {
  stroke: var(--gt-o);
}

.gt-mini .trazo,
.gt-pip .trazo {
  stroke-width: 14;
}

.gt-fantasma {
  opacity: 0.28;
}

.gt-celda.es-elegida .gt-ficha {
  transform: scale(1.08);
}

/* Aparece una ficha: los trazos se dibujan */
.gt-ficha.es-nueva .trazo {
  stroke-dasharray: 1 2;
  animation: gt-trazo 0.18s ease-out both;
}

.gt-ficha.es-nueva.gt-x .trazo-2 {
  animation-delay: 0.14s;
}

.gt-ficha.es-nueva.gt-o .trazo {
  animation-duration: 0.32s;
}

/* Una ficha se desliza de una casilla a otra (modo de tres fichas) */
.gt-ficha.es-movida {
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1);
}

/* ---------- Raya ganadora ---------- */

.gt-raya {
  display: none;
  z-index: 3;
}

.gt-raya.es-visible {
  display: block;
}

.gt-raya line {
  stroke: var(--gt-linea);
  stroke-width: 12;
  stroke-linecap: round;
  opacity: 0.85;
}

.gt-raya.gana-x line {
  stroke: var(--accent-2);
}

.gt-raya.gana-o line {
  stroke: var(--accent-dark);
}

.gt-raya.es-nueva line {
  stroke-dasharray: 1 2;
  animation: gt-trazo 0.6s ease-out both;
}

/* ---------- Pregunta sobre el juego (la partida se pausa) ---------- */

.gt-confirmar {
  position: absolute;
  inset: -6px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(251, 247, 240, 0.9);
}

.gt-confirmar[hidden] {
  display: none;
}

.gt-confirmar:focus {
  outline: none;
}

.gt-confirmar .gt-panel {
  width: 100%;
  max-width: 360px;
  margin: 0;
  box-shadow: var(--shadow-lg);
}

/* ---------- Paneles ---------- */

.gt-panel {
  margin: 12px 0 0;
  padding: 16px 14px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  text-align: center;
  animation: gt-aparecer 0.3s ease-out;
}

.gt-panel[hidden] {
  display: none;
}

.gt-panel:focus {
  outline: none;
}

.gt-panel .titulo {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent-dark);
}

.gt-panel p {
  margin: 0 0 0.5rem;
}

.gt-panel p:empty {
  display: none;
}

.gt-panel .botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.gt-panel .botones .btn {
  flex: 1 1 200px;
  max-width: 340px;
  padding-left: 12px;
  padding-right: 12px;
}

.gt-fin.es-ganaste {
  border-color: var(--accent-2);
  background: var(--accent-2-soft);
}

.gt-fin.es-ganaste .titulo {
  color: var(--accent-2);
}

.gt-fin.es-empate {
  border-color: var(--border);
  background: var(--bg);
}

.gt-fin.es-empate .titulo {
  color: var(--text);
}

/* ---------- Debajo del tablero ---------- */

.gt-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 20px;
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.gt-info span {
  white-space: nowrap;
}

/* ---------- Marcador ---------- */

.gt-marcador {
  margin: 20px 0 28px;
}

.gt-marcador-modo {
  margin: 0 0 8px;
  color: var(--muted);
}

/* Si en una pantalla muy angosta no cabe, la tabla se desplaza en su marco */
.gt-tabla {
  max-width: 100%;
  overflow-x: auto;
}

.gt-marcador table {
  width: 100%;
  max-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.gt-marcador th,
.gt-marcador td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.gt-marcador thead th,
.gt-marcador thead td {
  background: var(--bg);
}

.gt-marcador tbody th {
  font-size: 0.9rem;
  text-align: left;
}

.gt-marcador td {
  font-size: 1.15rem;
  font-weight: 700;
}

.gt-marcador tbody tr:last-child th,
.gt-marcador tbody tr:last-child td {
  border-bottom: 0;
}

.gt-marcador .es-actual,
.gt-marcador thead .es-actual {
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

/* ---------- Textos ---------- */

.gt-ayuda ol li,
.gt-nombres li {
  margin-bottom: 0.5rem;
}

/* ---------- Animaciones ---------- */

@keyframes gt-trazo {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes gt-aparecer {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Ratón ---------- */

@media (hover: hover) {
  .gt-nivel select:hover {
    border-color: var(--accent);
  }

  .es-mi-turno .gt-celda.se-puede:hover::before,
  .es-mi-turno .gt-celda.es-movible:hover::before {
    background: rgba(47, 111, 78, 0.1);
  }
}

/* ---------- Celular (después de las reglas base que cambia) ---------- */

@media (max-width: 479px) {
  .gt-area {
    padding: 12px;
  }

  .gt-check {
    flex: 1 1 100%;
    padding: 0 4px;
  }

  .gt-marcador th,
  .gt-marcador td {
    padding: 8px 4px;
  }

  .gt-marcador thead th,
  .gt-marcador tbody th {
    font-size: 0.85rem;
  }

  .gt-marcador tbody th {
    padding-left: 10px;
  }
}

/* Pantallas muy angostas (320 px): la letra baja un poco para que el aviso
   siga en un renglón de título y cuatro de texto */
@media (max-width: 359px) {
  .gt-area {
    padding: 10px;
  }

  .gt-aviso {
    padding: 8px 10px;
  }

  .gt-aviso-titulo {
    font-size: 0.95rem;
  }

  .gt-aviso-texto {
    font-size: 0.8rem;
  }

  .gt-jugador {
    padding: 4px 6px;
    font-size: 0.8rem;
  }

  .gt-mini {
    width: 22px;
    height: 22px;
  }

  .gt-marcador th,
  .gt-marcador td {
    padding: 6px 2px;
  }

  .gt-marcador thead th,
  .gt-marcador tbody th {
    font-size: 0.8rem;
  }

  .gt-marcador tbody th {
    padding-left: 8px;
  }
}

@media (min-width: 600px) {
  .gt-aviso-titulo {
    font-size: 1.3rem;
  }

  .gt-aviso-texto {
    min-height: 4.05em;
    font-size: 1rem;
  }

  .gt-jugador {
    flex-direction: row;
    gap: 12px;
    font-size: 1rem;
  }

  .gt-panel .titulo {
    font-size: 1.5rem;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .gt-ficha.es-nueva .trazo,
  .gt-raya.es-nueva line,
  .gt-panel {
    animation: none;
  }

  .gt-ficha.es-movida {
    transition: none;
  }
}