/* Mobile-first. Sin framework. */
:root {
  --bg: #f4f1ea;
  --card: #ffffff;
  --ink: #222222;
  --muted: #6b6b6b;
  --accent: #1f7a4d;
  --accent-ink: #ffffff;
  --border: #ddd6c8;
  --radius: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.site-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.brand {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

h1 { font-size: 1.4rem; margin: 0 0 8px; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }

.muted { color: var(--muted); font-size: 0.9rem; }

.board {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}

.btn {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 8px 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-size: 1.1rem;
}

.status { min-height: 1.5em; margin: 4px 0 12px; font-weight: 600; }

textarea {
  width: 100%;
  margin: 4px 0 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

a { color: var(--accent); }

.diag {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 0.9rem;
}
.diag dt { color: var(--muted); }
.diag dd { margin: 0; word-break: break-word; }
.diag .ua { font-size: 0.8rem; }

/* El atributo hidden debe ganar siempre a display:block de .btn y similares. */
[hidden] { display: none !important; }

.alert {
  background: #fdecea;
  border: 1px solid #f5c2bc;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 16px;
}

.alert.info { background: #e6f3ec; border-color: #b9dcc8; }

.notice { background: #fff8e1; border-color: #f0dca0; }

.row { display: flex; gap: 8px; }
.row .btn { flex: 1; }

input[type="text"] {
  width: 100%;
  min-height: 44px;
  margin: 4px 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.colors { border: 0; padding: 0; margin: 0 0 12px; }
.colors legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 8px 0;
  min-height: 44px;
}
.choice input { width: 20px; height: 20px; }

.steps { margin: 0; padding-left: 1.2em; }
.steps li { margin-bottom: 4px; }

/* Partida */
.game-header .players { font-weight: 700; margin: 0 0 4px; }
.game-header .status-line { margin: 0; }

/* Tablero con el aspecto de la imagen PNG de python-chess (D10):
   marco #212121, coordenadas fuera en #e5e5e5, casillas #ffce9e / #d18b47. */
.board-frame {
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 6px 6px 24px 24px;
  background: #212121;
  border-radius: 6px;
}
.board-frame .cg-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.board-frame cg-board {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%23ffce9e'/%3E%3Cpath fill='%23d18b47' d='M1,0h1v1h-1zM3,0h1v1h-1zM5,0h1v1h-1zM7,0h1v1h-1zM0,1h1v1h-1zM2,1h1v1h-1zM4,1h1v1h-1zM6,1h1v1h-1zM1,2h1v1h-1zM3,2h1v1h-1zM5,2h1v1h-1zM7,2h1v1h-1zM0,3h1v1h-1zM2,3h1v1h-1zM4,3h1v1h-1zM6,3h1v1h-1zM1,4h1v1h-1zM3,4h1v1h-1zM5,4h1v1h-1zM7,4h1v1h-1zM0,5h1v1h-1zM2,5h1v1h-1zM4,5h1v1h-1zM6,5h1v1h-1zM1,6h1v1h-1zM3,6h1v1h-1zM5,6h1v1h-1zM7,6h1v1h-1zM0,7h1v1h-1zM2,7h1v1h-1zM4,7h1v1h-1zM6,7h1v1h-1z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
/* Última jugada: capa que sobre clara/oscura da ~#cdd16a / ~#aaa23b. */
.board-frame cg-board square.last-move {
  background-color: rgba(115, 207, 30, 0.38);
}
.board-frame .cg-wrap coords {
  opacity: 1;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.board-frame .cg-wrap coords coord {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5e5e5 !important;
  text-shadow: none !important;
}
.board-frame .cg-wrap coords.ranks,
.board-frame .cg-wrap coords.ranks.left {
  left: -20px;
  top: 0;
  width: 16px;
  height: 100%;
}
.board-frame .cg-wrap coords.ranks coord { transform: none; }
.board-frame .cg-wrap coords.files {
  left: 0;
  bottom: -21px;
  width: 100%;
  height: 18px;
  text-transform: lowercase;
}

/* Directo */
.live-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.online { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: #1f7a4d; }
.online .dot { width: 10px; height: 10px; border-radius: 50%; background: #2fb36b; }
.btn-small {
  display: inline-block;
  width: auto;
  min-height: 36px;
  margin: 0 0 0 auto;
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* Historial */
.history h2 { margin-bottom: 4px; }
.history-nav .btn { margin: 4px 0 8px; font-size: 1.1rem; }
.move-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 12px;
}
.move-list li { display: flex; align-items: center; gap: 4px; }
.move-list .num { color: var(--muted); min-width: 2.2em; text-align: right; }
.move-list button {
  min-width: 56px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.move-list button[aria-current="true"] { border-color: var(--accent); background: #e6f3ec; font-weight: 700; }

.recovery-code {
  font: 700 1.8rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.15em;
  text-align: center;
  margin: 8px 0;
  user-select: all;
}

.promotion p { margin: 0 0 4px; }
.piece[aria-pressed="true"] { border-color: var(--accent); background: #e6f3ec; }

.menu summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
}

/* Confirmación de jugada, justo encima del tablero */
.confirm-move { border: 2px solid var(--accent); background: #f1f9f4; }
.confirm-question { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; text-align: center; }

/* Partida terminada: cartel claro y tablero apagado */
.game-over { background: #212121; border-color: #212121; color: #f4f1ea; text-align: center; }
.game-over h2 { font-size: 1.3rem; margin-bottom: 4px; }
.game-over-result { margin: 0; font-size: 1.4rem; font-weight: 800; }
.game-over-detail { margin: 4px 0 12px; color: #cfcfcf; }
.game-over .btn-primary { text-decoration: none; text-align: center; line-height: 24px; }
.board-frame.finished { opacity: 0.75; filter: saturate(0.6); }
.status-line.finished { font-weight: 700; }