:root {
  --variant-ink: #17201d;
  --variant-muted: #5d6864;
  --variant-paper: #fffdf8;
  --variant-soft: #edf5f0;
  --variant-accent: #087f5b;
  --variant-accent-dark: #075d46;
  --variant-line: #95a09c;
}

body.variant-page {
  background:
    radial-gradient(circle at 8% 4%, rgba(8, 127, 91, 0.1), transparent 28rem),
    linear-gradient(180deg, #f7faf7 0, #fffdf8 38rem);
  color: var(--variant-ink);
}

.variant-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 68px) 0 80px;
}

.variant-hero {
  display: grid;
  grid-template-columns: minmax(270px, 0.72fr) minmax(440px, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.variant-hero__copy {
  position: sticky;
  top: 24px;
}

.variant-eyebrow {
  margin: 0 0 12px;
  color: var(--variant-accent-dark);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.variant-hero h1 {
  max-width: 780px;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3rem, 6.7vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.91;
}

.variant-hero__lead {
  max-width: 610px;
  margin: 22px 0 0;
  color: var(--variant-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.62;
}

.variant-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 0;
}

.variant-facts div {
  border-top: 1px solid rgba(23, 32, 29, 0.18);
  padding-top: 10px;
}

.variant-facts dt {
  color: var(--variant-muted);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.variant-facts dd {
  margin: 3px 0 0;
  font-weight: 850;
}

.variant-game {
  min-width: 0;
  border: 1px solid rgba(23, 32, 29, 0.12);
  border-radius: 20px;
  padding: clamp(14px, 2.5vw, 24px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(23, 32, 29, 0.11);
}

.variant-game__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.variant-game__label {
  display: block;
  color: var(--variant-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.variant-game__timer {
  display: block;
  margin-top: 2px;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.variant-board-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.variant-board {
  display: grid;
  grid-template-columns: repeat(var(--variant-size), minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--variant-ink);
  border-radius: 6px;
  background: var(--variant-line);
}

.variant-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--variant-line);
  border-bottom: 1px solid var(--variant-line);
  padding: 0;
  background: var(--variant-paper);
  color: var(--variant-accent-dark);
  font: inherit;
  font-size: clamp(1rem, 3.1vw, 1.85rem);
  font-weight: 760;
  cursor: pointer;
  isolation: isolate;
}

.variant-game--large .variant-cell {
  font-size: clamp(0.55rem, 1.35vw, 0.92rem);
  font-variant-numeric: tabular-nums;
}

.variant-cell.box-left { border-left: 2px solid var(--variant-ink); }
.variant-cell.box-right { border-right: 2px solid var(--variant-ink); }
.variant-cell.box-top { border-top: 2px solid var(--variant-ink); }
.variant-cell.box-bottom { border-bottom: 2px solid var(--variant-ink); }

.variant-cell.is-diagonal::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 127, 91, 0.1);
  content: "";
}

.variant-cell.is-given {
  color: var(--variant-ink);
  font-weight: 900;
}

.variant-cell.is-related { background: #edf3ef; }
.variant-cell.is-same { background: #dbece4; }
.variant-cell.is-selected {
  z-index: 2;
  background: #c6e4d6;
  box-shadow: inset 0 0 0 3px var(--variant-accent);
}
.variant-cell.is-wrong { color: #a92525; background: #fee8e5; }
.variant-cell:focus-visible { z-index: 4; outline: 3px solid #f59f00; outline-offset: -3px; }

.variant-cell__cage-edge {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.variant-cell__cage-top { inset: 2px 2px auto; border-top: 2px dotted var(--variant-accent-dark); }
.variant-cell__cage-right { inset: 2px 2px 2px auto; border-right: 2px dotted var(--variant-accent-dark); }
.variant-cell__cage-bottom { inset: auto 2px 2px; border-bottom: 2px dotted var(--variant-accent-dark); }
.variant-cell__cage-left { inset: 2px auto 2px 2px; border-left: 2px dotted var(--variant-accent-dark); }

.variant-cell__cage {
  position: absolute;
  top: 3px;
  left: 5px;
  z-index: 2;
  color: var(--variant-ink);
  font-size: clamp(0.5rem, 1.2vw, 0.67rem);
  font-weight: 900;
  line-height: 1;
}

.variant-cell__digit { position: relative; z-index: 2; }

.variant-game__status {
  min-height: 3em;
  margin: 14px 0 0;
  color: var(--variant-muted);
  font-size: 0.91rem;
  line-height: 1.48;
}

.variant-pad {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.variant-game--large .variant-pad { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.variant-pad button,
.variant-control {
  min-height: 42px;
  border: 1px solid rgba(23, 32, 29, 0.14);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--variant-ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.variant-pad button:hover,
.variant-pad button:focus-visible,
.variant-control:hover,
.variant-control:focus-visible { border-color: var(--variant-accent); background: var(--variant-soft); }

.variant-control--primary { background: var(--variant-ink); color: #fff; }
.variant-control--primary:hover,
.variant-control--primary:focus-visible { background: var(--variant-accent-dark); color: #fff; }
.variant-control:disabled { opacity: 0.58; cursor: default; }

.variant-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.variant-editorial {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(56px, 9vw, 104px);
}

.variant-editorial article {
  border-top: 1px solid rgba(23, 32, 29, 0.18);
  padding-top: 18px;
}

.variant-editorial h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.variant-editorial p,
.variant-editorial li { color: var(--variant-muted); line-height: 1.68; }
.variant-editorial a { color: var(--variant-accent-dark); font-weight: 800; }

.variant-related {
  margin-top: 54px;
  border-radius: 18px;
  padding: clamp(24px, 4vw, 42px);
  background: var(--variant-ink);
  color: #fff;
}
.variant-related h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.variant-related__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.variant-related a { border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 10px 15px; color: #fff; font-weight: 800; text-decoration: none; }
.variant-related a:hover,
.variant-related a:focus-visible { background: #fff; color: var(--variant-ink); }

.variant-game.is-complete .variant-board { box-shadow: 0 0 0 5px rgba(8, 127, 91, 0.18); }

@media (max-width: 900px) {
  .variant-hero { grid-template-columns: 1fr; }
  .variant-hero__copy { position: static; }
  .variant-hero h1 { max-width: 700px; }
  .variant-game { max-width: 720px; }
}

@media (max-width: 620px) {
  .variant-main { width: min(100% - 20px, 1180px); padding-top: 24px; }
  .variant-facts { grid-template-columns: 1fr; }
  .variant-game { padding: 10px; border-radius: 13px; }
  .variant-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-control--primary { grid-column: 1 / -1; }
  .variant-editorial { grid-template-columns: 1fr; }
  .variant-cell__cage { top: 2px; left: 3px; font-size: 0.47rem; }
}

@media print {
  .seo-header, .variant-hero__copy, .variant-game__topbar, .variant-pad, .variant-controls, .variant-editorial, .variant-related, .site-footer { display: none !important; }
  .variant-main, .variant-hero, .variant-game { display: block; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .variant-board-wrap { max-width: 7.2in; }
  .variant-cell { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}