/* ———— Tema oscuro para Juego de Gato (versión hvsh/hvsc con POST) ———— */
:root{
  --bg:#0b0f1a;          /* fondo general */
  --panel:#0f172a;       /* tarjeta/panel */
  --text:#e5e7eb;        /* texto principal */
  --muted:#94a3b8;       /* texto secundario */
  --accent:#60a5fa;      /* acentos/focus */
  --x:#ff6b6b;           /* color para X */
  --o:#64b5f6;           /* color para O */
  --line:6px;            /* grosor de líneas del tablero */
  --line-color:rgba(203,213,225,.35); /* color de líneas */
}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,sans-serif;
  margin:0;
}

.container{
  max-width:480px;
  margin:24px auto;
  background:var(--panel);
  border:1px solid rgba(148,163,184,.15);
  border-radius:16px;
  padding:18px 20px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}

h1{ text-align:center; margin:8px 0 12px; letter-spacing:.3px; }

.modo-juego label{ color:var(--text); }
.modo-juego select{
  background:#111827; color:var(--text);
  border:1px solid #334155; border-radius:10px;
  padding:8px 10px; outline:none;
}
.mensaje{ text-align:center; color:var(--muted); margin:8px 0 12px; font-size:18px; }

/* Tablero 3x3 sin fondo claro; líneas formadas por bordes de las celdas */
#tablero{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:8px auto 14px; width:100%;
}

/* Botones-celda oscuros con “glass” suave */
.casilla{
  appearance:none; -webkit-appearance:none;
  box-sizing:border-box; width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.06), rgba(255,255,255,.01) 60%);
  background-color:#0f172a;
  border:none; border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.35);
}
.casilla:hover{ outline:2px solid color-mix(in srgb, var(--accent) 25%, transparent); }

/* ¡Importante! Evitar el gris del navegador cuando están disabled */
.casilla:disabled{
  background-color:#0f172a; color:inherit; opacity:1; filter:none;
}

/* Bordes que dibujan las 2 verticales y 2 horizontales del tablero */
.casilla:not(:nth-child(3n)) { border-right: var(--line) solid var(--line-color); }
.casilla:nth-child(-n+6)     { border-bottom: var(--line) solid var(--line-color); }

/* X y O grandes con brillo */
.casilla span{ font-size:clamp(34px,9vw,64px); font-weight:900; line-height:1; }
.casilla .x{ color:var(--x); text-shadow:0 0 12px color-mix(in srgb, var(--x) 45%, transparent); }
.casilla .o{ color:var(--o); text-shadow:0 0 12px color-mix(in srgb, var(--o) 45%, transparent); }

/* Botón Reiniciar */
.reiniciar{
  display:block; margin:12px auto 0; padding:10px 16px;
  background:#16a34a; color:#fff; border:0; border-radius:10px; font-weight:700;
  cursor:pointer; box-shadow:0 6px 20px rgba(22,163,74,.35);
}
.reiniciar:hover{ filter:brightness(1.06); }