/* A quiet play surface inside an illustrated world. No motion reveals answers. */
.puzzle-stage {
  --puzzle-glow: #c6ff83;
  isolation: isolate;
  background: #170f20;
}
.puzzle-stage::before {
  z-index: -2; inset: 0; opacity: 1;
  background: linear-gradient(#140e24b3,#170f2455 25%,#170f2440 70%,#100d1fe0),url('./public/assets/campaign-lab-v1.webp') center / cover;
}
.puzzle-stage::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%,transparent 25%,#0f0a1c40 90%);
}
.puzzle-stage[data-mode="schulte"] { background: #111822; }
.puzzle-stage[data-mode="schulte"]::before {
  background: linear-gradient(#110e249e,transparent 25%,#110e2433 75%,#101224ba),url('./public/assets/schulte-clearing-v1.webp') center / cover;
}
.puzzle-toolbar { position: relative; padding-inline: 3px; text-shadow: 0 2px 4px #090610; }
.puzzle-toolbar .icon-button { background: #21182eee; border-color: #b29bc14a; box-shadow: inset 0 1px 0 #fff1; }
.puzzle-hud { position: relative; background: #231a30f5; border-color: #9e83b64d; box-shadow: inset 0 1px 0 #ffffff12,0 4px 14px #07041240; }
.puzzle-stage[data-mode="schulte"] .puzzle-hud { background: #1c282df5; border-color: #97b6a350; }
.puzzle-hud small,.puzzle-toolbar small { color: #e1d5e9; }
.puzzle-hud #puzzleTarget { background: #c7efa2; box-shadow: inset 0 1px 0 #fff8; }
.puzzle-hud #puzzleTarget[data-feedback="found"] { box-shadow: inset 0 0 0 2px #f6ffe8,0 0 12px #c7efa244; }
.puzzle-rule { position: relative; width: fit-content; max-width: 100%; padding: 3px 9px; border-radius: 8px; color: #eee6f5; background: #181222df; font-size: 11px; }
.puzzle-stage .puzzle-board-wrap { padding: 5px 5px 27px; }
.puzzle-board-wrap::before { display: none; }
.puzzle-board {
  border: 2px solid #c5a49d; border-radius: 19px;
  padding: 7px; gap: 3px;
  background: linear-gradient(125deg,#74564f,#3b303e 48%,#66504f);
  box-shadow: 0 6px 0 #211723,0 11px 0 #08061199,0 16px 30px #0007,inset 0 0 0 2px #302334;
}
.puzzle-board[data-feedback="unit"],.puzzle-board[data-feedback="check"] { border-color: #d5f1ab; }
.sudoku-cell {
  color: #ceffa0; border-color: #baa1d440; border-radius: 10px;
  background: linear-gradient(140deg,#3b2a4e,#292139);
  box-shadow: inset 0 1px 0 #ead3ff20,inset 0 -2px 0 #150d26;
  transition: border-color .1s,background-color .1s;
}
.sudoku-cell.given { background: linear-gradient(135deg,#51405f,#3d3049); color: #fff5ed; }
.sudoku-cell.peer { background: linear-gradient(135deg,#514058,#352b42); }
.sudoku-cell.same-value { color: #ffdf9b; border-color: #d5ab65; box-shadow: inset 0 -2px 0 #d5ab6550; }
.sudoku-cell.block-left { border-left: 3px solid #c7a6cc; }
.sudoku-cell.block-top { border-top: 3px solid #c7a6cc; }
.sudoku-cell.selected {
  border-color: #d5ffa0; color: #edffd9;
  background: linear-gradient(145deg,#4d5844,#34413c);
  box-shadow: inset 0 0 0 1px #d5ffa060,inset 0 -3px 0 #c6ef7030;
}
.puzzle-stage[data-notes="true"] .sudoku-cell.selected { border-color: #b5dbff; background: #2f4057; box-shadow: inset 0 0 0 1px #b5dbff60; }
.sudoku-cell.invalid,.sudoku-cell[data-feedback="error"] {
  color: #ffe0e6; border-color: #ff9eb4; background: #673545;
  box-shadow: inset 0 -3px 0 #ff9eb4;
}
.sudoku-cell.invalid .cell-value { text-decoration: underline; text-underline-offset: 4px; }
.puzzle-board:not([data-size="9"]) .sudoku-cell::before {
  top: 18%; bottom: 8%; height: auto; left: 19%; right: 19%;
  border-color: #e5c8fa3c; border-radius: 9px 9px 15px 15px;
  background: linear-gradient(110deg,#ffffff16,transparent 34%,#ffffff06 75%,transparent),linear-gradient(transparent 55%,#a765d320);
  box-shadow: inset 2px 0 0 #fff1,inset 0 -2px 3px #b6a1df25;
}
.puzzle-board:not([data-size="9"]) .sudoku-cell::after { top: 9%; height: 9%; background: linear-gradient(#b58b77,#77576a); border-color: #e1b9aa70; }
.puzzle-board:not([data-size="9"]) .sudoku-cell:has(.cell-value)::before { background: linear-gradient(110deg,#ffffff16,transparent 34%,#ffffff08 75%,transparent),linear-gradient(transparent 49%,#b796d635 50%); }
.puzzle-board:not([data-size="9"]) .sudoku-cell.given::before { background: linear-gradient(110deg,#ffffff13,transparent 34%),linear-gradient(transparent 49%,#e7c19126 50%); }
.puzzle-board:not([data-size="9"]) .sudoku-cell.selected:has(.cell-value)::before { background: linear-gradient(110deg,#ffffff16,transparent 34%),linear-gradient(transparent 49%,#ceff983b 50%); }
.puzzle-board:not([data-size="9"]) .sudoku-cell[data-feedback="ink"]::after { animation: puzzle-cork .18s ease-out; }
@keyframes puzzle-cork { from { transform: translateY(-2px) rotate(-7deg); } to { transform: none; } }
.puzzle-board[data-size="9"] { padding: 5px; gap: 1px; }
.puzzle-board[data-size="9"] .sudoku-cell::before { display: none; }
.cell-value { position: relative; z-index: 1; pointer-events: none; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #07071180; }
.cell-notes { position: relative; z-index: 1; pointer-events: none; }
.cell-notes i { color: #e1e5f6; }
.sudoku-cell[data-feedback="ink"],.sudoku-cell[data-feedback="hint"] { box-shadow: inset 0 0 0 2px #ddffaa90,inset 0 -3px 0 #c6ef7030; }
.sudoku-cell[data-feedback="note"] { box-shadow: inset 0 0 0 2px #b5dbff80; }
.sudoku-cell[data-feedback="erase"],.sudoku-cell[data-feedback="undo"] { box-shadow: inset 0 0 0 2px #e1cba580; }
.sudoku-keypad button { border-color: #b1a0c970; background: linear-gradient(#655271,#40344c); box-shadow: inset 0 1px 0 #fff3,0 3px 0 #17101f; transition: background-color .08s; }
.sudoku-keypad button:active { background: #546441; box-shadow: inset 0 2px 2px #0a0c1150; }
.puzzle-stage[data-notes="true"] .sudoku-keypad button { border-color: #a5c4ee80; background: linear-gradient(#3e516c,#2b3c53); }
.puzzle-tools button { background: #231c30f5; border-color: #ac94c65c; color: #eadbf5; }
.puzzle-tools button:active { background: #51435b; }
.puzzle-tools button[aria-pressed="true"] { color: #d6ecff; border-color: #b5dbff; background: #304860; }
.puzzle-tools button:disabled { opacity: .55; }
.puzzle-status { position: relative; padding: 2px 7px; border-radius: 8px; color: #eee1f5; background: #171222de; }
.puzzle-status:empty { background: transparent; }
.puzzle-stage[data-mode="schulte"] .puzzle-board {
  padding: 8px; gap: 7px; border: 2px solid #9bae84; border-radius: 22px;
  background: linear-gradient(130deg,#526352,#28383e 48%,#445650);
  box-shadow: 0 6px 0 #1a282a,0 11px 0 #0b1014b3,0 20px 35px #0007,inset 0 0 0 2px #192e32;
}
.schulte-cell {
  border-color: #a4bbab70; color: #f4ffe9; border-radius: 13px;
  background: linear-gradient(135deg,#415c57,#263d41);
  box-shadow: inset 0 1px 0 #d4ead633,inset 0 -3px 0 #0c222a,0 2px 0 #16272b;
  font-size: clamp(24px,8vw,42px);
  transition: border-color .1s,background-color .1s;
}
.schulte-cell::after { background: #cbea8870; box-shadow: none; width: 2px; height: 2px; }
.schulte-cell::before { background: #d6ffa125; box-shadow: -4px -3px 0 #c4e7ef20,4px -3px 0 #c4e7ef20; }
.puzzle-board[data-size="5"] .schulte-cell { font-size: clamp(21px,6vw,34px); border-radius: 10px; }
.schulte-cell.was-found { color: #c4d7cd; background: linear-gradient(135deg,#304744,#22383d); border-color: #708e7d; }
.schulte-cell[data-feedback="found"] { border-color: #e0ffae; color: #f5ffdf; background: #496450; box-shadow: inset 0 0 0 1px #d8ff9c80,inset 0 -3px 0 #bfe87740; }
.schulte-cell[data-feedback="found"]::before { background: #e7ff9b; box-shadow: -4px -3px 0 #dcf5ff80,4px -3px 0 #dcf5ff80,0 0 12px #d3ff78; }
.schulte-cell[data-feedback="error"] { border-color: #ffb2bc; color: #ffe0e6; background: #663b48; box-shadow: inset 0 -3px 0 #ff9eb4; }
.puzzle-workbench-caption { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; pointer-events: none; }
.puzzle-workbench-caption span { padding: 2px 9px; border-radius: 6px; background: #15121be8; color: #d7c6d8; font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.puzzle-workbench-caption span[data-feedback] { color: #e0ffbc; }
.puzzle-fill-track { position: absolute; bottom: 3px; width: min(120px,40%); height: 3px; border-radius: 2px; overflow: hidden; background: #91848a65; }
.puzzle-fill-track i { display: block; width: 100%; height: 100%; background: #c6ee94; transform: scaleX(0); transform-origin: left; transition: transform .15s; }
.puzzle-effects { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; contain: layout paint; }
.puzzle-burst { position: absolute; width: 0; height: 0; color: #dcffa7; pointer-events: none; }
.puzzle-burst--select,.puzzle-burst--note { color: #dbc6fb; }
.puzzle-burst--error { color: #ffb4c3; }
.puzzle-burst--erase,.puzzle-burst--undo { color: #e6d3bd; }
.puzzle-tap-ring { position: absolute; width: var(--burst-size); height: var(--burst-size); left: calc(var(--burst-size) / -2); top: calc(var(--burst-size) / -2); border: 1px solid currentColor; border-radius: 18%; animation: puzzle-tap .22s ease-out both; }
.puzzle-mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: puzzle-mote .27s ease-out both; }
@keyframes puzzle-tap { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.13); opacity: 0; } }
@keyframes puzzle-mote { from { transform: translate(0,0); opacity: .85; } to { transform: translate(var(--mote-x),var(--mote-y)); opacity: 0; } }
.puzzle-loading { z-index: 4; background: #241b31f5; }
.puzzle-lobby .puzzle-intro { border-color: #a985ad70; background: linear-gradient(90deg,#251a34fa 10%,#251a34ed 64%,#251a3466),url('./public/assets/campaign-lab-v1.webp') center 55% / cover; }
.puzzle-lobby[data-theme="lime"] .puzzle-intro { border-color: #98b49570; background: linear-gradient(90deg,#1e2834fa 10%,#1e2834ed 64%,#1e283477),url('./public/assets/schulte-clearing-v1.webp') center 60% / cover; }
.puzzle-lobby[data-theme="lime"] .puzzle-ready-number { background: linear-gradient(135deg,#566857,#2b4147); color: #e3ffc1; }
.puzzle-lobby .puzzle-intro > p { color: #e4dae9; }
.puzzle-result-modal { border-color: #bc9abb70; background: linear-gradient(#21182ced,#21182cfa),url('./public/assets/campaign-lab-v1.webp') center / cover; }
.puzzle-result-modal[data-mode="schulte"] { border-color: #9eba9670; background: linear-gradient(#17252fed,#17252ffa),url('./public/assets/schulte-clearing-v1.webp') center / cover; }
@media (min-width:701px) { .puzzle-rule,.puzzle-status { margin-inline: auto; } }
@media (max-height:620px) {
  .puzzle-stage { gap: 5px; }
  .puzzle-hud { flex-basis: 45px; padding-block: 3px; }
  .puzzle-hud #puzzleTarget { font-size: 19px; padding: 5px 8px; }
  .puzzle-stage[data-mode="sudoku"] #puzzleTarget { font-size: 16px; }
  .puzzle-stage .puzzle-board-wrap { padding-bottom: 23px; }
  .puzzle-status { font-size: 10px; }
  .puzzle-rule { font-size: 10px; }
  .puzzle-stage[data-mode="sudoku"][data-size="9"] { gap: 4px; }
  .puzzle-stage[data-size="9"] .puzzle-hud { flex-basis: 40px; }
  .puzzle-stage[data-size="9"] .puzzle-rule { padding-block: 0; min-height: 15px; }
  .puzzle-stage[data-size="9"] .sudoku-keypad button,.puzzle-stage[data-size="9"] .puzzle-tools button { min-height: 44px; }
  .puzzle-stage[data-size="9"] .puzzle-board-wrap { padding-bottom: 9px; }
  .puzzle-stage[data-size="9"] .puzzle-workbench-caption { display: none; }
}
@media (max-height:460px) and (min-width:500px) {
  .puzzle-stage[data-mode="sudoku"] .puzzle-hud { padding-block: 1px; }
  .puzzle-stage[data-mode="sudoku"] #puzzleTarget { font-size: 15px; padding-block: 3px; }
  .puzzle-stage[data-mode="sudoku"] .puzzle-board-wrap { padding-block: 3px 23px; }
  .puzzle-stage[data-mode="sudoku"] .puzzle-toolbar { grid-row: 1; }
}
@media (prefers-reduced-motion:reduce) {
  .puzzle-effects { display: none; }
  .puzzle-stage * { animation: none !important; transition: none !important; }
}
/* Local art review never changes the actual preference on public pages. */
html[data-animation-preview] .puzzle-tap-ring { animation: puzzle-tap .22s ease-out both !important; }
html[data-animation-preview] .puzzle-mote { animation: puzzle-mote .27s ease-out both !important; }
html[data-animation-preview] .puzzle-effects { display: block; }
html[data-animation-preview] .sudoku-cell[data-feedback="ink"]::after { animation: puzzle-cork .18s ease-out !important; }