:root {
  --bg: #0b1220;
  --panel: #121c31;
  --text: #eef4ff;
  --muted: #b8c3da;
  --light-square: #f0d9b5;
  --dark-square: #b58863;
  --last-move: rgba(255, 224, 93, 0.35);
  --selected: rgba(102, 186, 255, 0.55);
  --legal-dot: rgba(29, 29, 29, 0.28);
  --capture-ring: rgba(191, 61, 61, 0.8);
  --safe: rgba(64, 182, 97, 0.65);
  --risky: rgba(230, 196, 56, 0.72);
  --danger: rgba(217, 72, 72, 0.78);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(30, 74, 153, 0.25), transparent 28%),
    radial-gradient(circle at bottom right, rgba(30, 74, 153, 0.20), transparent 20%),
    var(--bg);
  color: var(--text);
}
.page { max-width: 1280px; margin: 0 auto; padding: 14px 14px 22px; }
@media (min-width: 480px) {
  .page { padding: 18px 20px 26px; }
}

button {
  border: none; border-radius: 12px; padding: 12px 16px; cursor: pointer;
  transition: transform .08s ease, opacity .15s ease, background .15s ease;
}
button:hover { opacity: 0.96; }
button:active { transform: translateY(1px); }
button.primary {
  background: #213659; color: var(--text); border: 1px solid rgba(255,255,255,0.10);
}
button.ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
button.warn { background: #824646; color: white; }

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  transition: opacity 0.15s ease;
}
.link-button:hover {
  opacity: 0.96;
}
/* Ссылки-кнопки: у .link-button нет фона/рамки, у button.ghost они есть — выравниваем вид */
a.link-button.ghost,
a.ghost.link-button {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
}
a.link-button.ghost:hover,
a.ghost.link-button:hover {
  opacity: 0.96;
}
a.link-button.ghost:active,
a.ghost.link-button:active {
  transform: translateY(1px);
}
a.link-button.primary,
a.primary.link-button {
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  background: #213659;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
}
a.link-button.primary:hover,
a.primary.link-button:hover {
  opacity: 0.96;
}
a.link-button.primary:active,
a.primary.link-button:active {
  transform: translateY(1px);
}
.card-block {
  padding: 18px 20px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}
.card-block h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

.hidden { display: none; }