/* Shared page width ---------------------------------------------------------
   Keep every primary surface aligned while giving game boards more room on
   desktop. The gutter remains fluid so small screens keep their usable area. */
:root{
  --page-max-width:1440px;
  --page-gutter:clamp(20px,3vw,36px);
}

main,
footer,
.home-page,
.catalogue,
.stats-page,
.blog-page,
.article-page,
.game-shell,
.related-games{
  width:min(var(--page-max-width),calc(100% - var(--page-gutter)));
  margin-inline:auto;
}

/* Article copy keeps its readable measure; only the outer page aligns with
   the rest of PuzzleHub. */
.article-page{max-width:none}

/* Keep brand/navigation aligned with the same content edges without limiting
   the full-width sticky header background. */
.topbar{
  padding-inline:max(calc(var(--page-gutter) / 2),calc((100vw - var(--page-max-width)) / 2));
}

/* Dense pzpr boards can use the extra desktop space instead of remaining
   capped at the previous 640px size. */
@media(min-width:1280px){
  .game-shell .pzpr-board{
    width:min(820px,100%);
    height:min(820px,70vw);
  }
}

/* Interactive states that must remain visually stronger than light-theme base cells. */
html[data-theme="light"] .sudoku-cell.selected{
  z-index:6;
  background:linear-gradient(145deg,#155e75,#1d4ed8);
  color:#fff;
  outline:3px solid #bfdbfe;
  outline-offset:-3px;
  box-shadow:inset 0 0 0 1px #ffffff66,0 0 22px #2563eb44;
}
html[data-theme="light"] .sudoku-cell.selected.user-value{color:#fff}
html[data-theme="light"] .sudoku-cell.conflict{
  z-index:7;
  color:#fff1f2;
  background:linear-gradient(145deg,#9f1239,#7f1d1d);
  border-color:#e11d48;
  box-shadow:inset 0 0 0 2px #fb718599;
}
html[data-theme="light"] .sudoku-cell.selected.conflict{outline-color:#fecdd3}
html[data-theme="light"] .sudoku-cell.selected .sudoku-note{color:#e0f2fe}

html[data-theme="light"] .norinori-cell.filled{
  background:linear-gradient(135deg,#ede9fe,#c4b5fd);
  box-shadow:inset 0 0 0 2px #a78bfa;
}
html[data-theme="light"] .norinori-cell.filled:hover{background:linear-gradient(135deg,#f5f3ff,#ddd6fe)}

html[data-theme="light"] .lits-cell.filled{
  background:linear-gradient(135deg,#ede9fe,#c4b5fd);
  box-shadow:inset 0 0 0 1px #a78bfa;
}

html[data-theme="light"] .waypoint-cell.checkpoint{
  background:#e0e7ff;
  color:#111827;
  font-weight:950;
  box-shadow:inset 0 0 0 2px #a78bfa;
}
html[data-theme="light"] .waypoint-cell.path.checkpoint{
  background:#bfdbfe;
  color:#0f172a;
  box-shadow:inset 0 0 0 3px #3b82f6;
}