/* Cozy Sudoku and Picture Sudoku (sudoku.html, sudokuapp.js), on top of style.css: the page is the slide
   puzzle's one-screen layout (.slide-app: head, status, stage, actions; More panel; level pills), so it
   never scrolls and goes board-left, controls-right when the screen is wide. Colours are the brand roles
   (brand.css), so it follows light and dark like the other pages. As the approved mockups
   (previews/games/sudoku). */
:root {
  --sd-cell: var(--card); --sd-thin: var(--line); --sd-box: color-mix(in srgb, var(--ink) 70%, transparent);
  --sd-given: var(--ink); --sd-entry: var(--primary); --sd-pencil: var(--muted);
  --sd-peer: color-mix(in srgb, var(--line) 70%, var(--card));
  --sd-same: color-mix(in srgb, var(--primary) 16%, var(--card)); --sd-same-ring: transparent;
  --sd-sel: color-mix(in srgb, var(--accent) 48%, var(--card)); --sd-sel-ink: var(--ink);
  --sd-wrong: var(--secondary); --sd-key-line: var(--line);
}
:root[data-theme="dark"] {
  --sd-cell: var(--pw-evergreen-deep); --sd-thin: color-mix(in srgb, var(--pw-cream) 14%, transparent);
  --sd-box: color-mix(in srgb, var(--pw-cream) 55%, transparent);
  --sd-given: var(--pw-cream); --sd-entry: var(--pw-honey); --sd-pencil: color-mix(in srgb, var(--pw-cream) 70%, transparent);
  --sd-peer: color-mix(in srgb, var(--pw-evergreen) 70%, var(--pw-evergreen-deep));
  --sd-same: var(--pw-evergreen-deep); --sd-same-ring: color-mix(in srgb, var(--pw-honey) 70%, transparent);
  --sd-sel: var(--pw-honey); --sd-sel-ink: var(--pw-ink);
  --sd-wrong: #E2707C; --sd-key-line: color-mix(in srgb, var(--pw-cream) 18%, transparent);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --sd-cell: var(--pw-evergreen-deep); --sd-thin: color-mix(in srgb, var(--pw-cream) 14%, transparent);
  --sd-box: color-mix(in srgb, var(--pw-cream) 55%, transparent);
  --sd-given: var(--pw-cream); --sd-entry: var(--pw-honey); --sd-pencil: color-mix(in srgb, var(--pw-cream) 70%, transparent);
  --sd-peer: color-mix(in srgb, var(--pw-evergreen) 70%, var(--pw-evergreen-deep));
  --sd-same: var(--pw-evergreen-deep); --sd-same-ring: color-mix(in srgb, var(--pw-honey) 70%, transparent);
  --sd-sel: var(--pw-honey); --sd-sel-ink: var(--pw-ink);
  --sd-wrong: #E2707C; --sd-key-line: color-mix(in srgb, var(--pw-cream) 18%, transparent);
} }

.sd-app [hidden] { display: none !important; }
.sd-app .levels .btn { padding: 10px 14px; }
.sd-status .count span:first-child { color: var(--primary); }

/* the board: as big as the stage allows (the stage is a size container) */
.sd-board {
  --n: 9; --side: min(100cqw, 100cqh, 760px);
  width: var(--side); height: var(--side); display: grid; position: relative;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  background: var(--sd-cell); border: 3px solid var(--sd-box); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08); touch-action: manipulation; outline: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.sd-board[data-busy="1"] { opacity: .45; }
.sd-cell {
  position: relative; display: grid; place-items: center; background: var(--sd-cell); cursor: pointer; min-width: 0; min-height: 0;
  border-right: 1px solid var(--sd-thin); border-bottom: 1px solid var(--sd-thin); container-type: size;
  font: 600 calc(var(--side) / var(--n) * .58)/1 Fraunces, Georgia, serif; color: var(--sd-entry);
}
.sd-cell.box-r { border-right: 2.5px solid var(--sd-box); }
.sd-cell.box-b { border-bottom: 2.5px solid var(--sd-box); }
.sd-cell.last-c { border-right: 0; }
.sd-cell.last-r { border-bottom: 0; }
.sd-cell.given { color: var(--sd-given); font-weight: 500; cursor: default; }
.sd-cell.peer { background: var(--sd-peer); }
.sd-cell.same { background: var(--sd-same); box-shadow: inset 0 0 0 3px var(--sd-same-ring); }
.sd-cell.sel { background: var(--sd-sel); color: var(--sd-sel-ink); }
.sd-cell.sel .sd-pencil { color: var(--sd-sel-ink); }
.sd-cell.wrong, .sd-cell.clash { color: var(--sd-wrong); }
.sd-cell.wrong::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 10%; height: 3px; border-radius: 2px; background: var(--sd-wrong); }
.sd-cell.hinted::before { content: ""; position: absolute; inset: 3px; border-radius: 6px; border: 2px dashed var(--accent); pointer-events: none; }
.sd-pencil { position: absolute; inset: 6%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  font: 500 26cqh/1 Inter, system-ui, sans-serif; color: var(--sd-pencil); }
.sd-pencil span { display: grid; place-items: center; }
/* keys in use: a clear ring on the chosen square while the board has focus */
body.keys .sd-board:focus .sd-cell.sel { box-shadow: inset 0 0 0 4px var(--focus); z-index: 1; }
body.tv .sd-board:focus .sd-cell.sel { box-shadow: inset 0 0 0 5px var(--pw-cream), inset 0 0 0 8px var(--focus); }
.sd-cell.wiggle { animation: sd-wiggle .45s ease-in-out; }
@keyframes sd-wiggle { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px) rotate(-3deg); }
  40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.sd-board.solved { border-color: var(--pw-honey);
  box-shadow: 0 0 0 4px var(--pw-honey), 0 0 28px 6px color-mix(in srgb, var(--pw-honey) 55%, transparent); animation: glow 1.6s ease-in-out 2; }
.sd-board.solved .sd-cell { cursor: default; }

/* Picture Sudoku: Pip and Wick (frame 0 of their idle sheets) and painted room things */
.sd-pic { display: block; height: 80%; aspect-ratio: 1; background: center / contain no-repeat; pointer-events: none; }
.sd-pic-pip, .sd-pic-wick { height: 92%; aspect-ratio: 247 / 317; background-size: 800% 900%; background-position: 0 0; }
.sd-pic-pip { background-image: url("/play/assets/mascot/256/pip-idle-cutout.sheet.png"); }
.sd-pic-wick { background-image: url("/play/assets/mascot/256/wick-idle-cutout.sheet.png"); }
.sd-pic-candle { background-image: url("/play/assets/sudoku/256/candle.png"); }
.sd-pic-mug { background-image: url("/play/assets/sudoku/256/mug.png"); }
.sd-pic-acorn { background-image: url("/play/assets/sudoku/256/acorn.png"); }
.sd-pic-pinecone { background-image: url("/play/assets/sudoku/256/pinecone.png"); }

/* the controls under the board: tools, then the numbers */
.sd-actions { flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
.sd-tools { display: flex; justify-content: space-between; gap: 4px; }
.sd-tool { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: 0; border-radius: 14px; color: var(--ink); font: 500 12px/1 Inter, system-ui, sans-serif;
  cursor: pointer; padding: 4px 0; touch-action: manipulation; }
.sd-tool svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-tool[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); }
.sd-tool:disabled { opacity: .4; cursor: default; }
.sd-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.sd-pad.sd-pad6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sd-pad.sd-pad4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sd-key { min-height: 62px; min-width: 0; border-radius: 12px; border: 1px solid var(--sd-key-line); background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; cursor: pointer;
  font: 500 26px/1 Fraunces, Georgia, serif; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
  touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sd-key small { font: 500 10px/1 Inter, system-ui, sans-serif; color: var(--muted); }
.sd-key.done { opacity: .35; }
.sd-key.held { background: var(--sd-sel); color: var(--sd-sel-ink); }
.sd-pad.pencil .sd-key { font: 500 17px/1 Inter, system-ui, sans-serif; color: var(--muted); }
.sd-pad.sd-picture .sd-key { min-height: 76px; padding: 4px; }
.sd-key .sd-pic { height: 56px; max-width: 100%; }
body.keys .sd-app .sd-tool:focus, body.keys .sd-app .sd-key:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* a short note over the top of the stage (hints, Check) */
.sd-note { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 6; margin: 0; padding: 8px 14px; border-radius: 18px;
  max-width: calc(100% - 16px); width: max-content; text-align: center; background: var(--surface); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3); font-size: 14px; pointer-events: none; }

/* the number picker beside the chosen square (keys and remotes) */
.sd-picker { position: absolute; z-index: 10; display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; padding: 12px;
  border-radius: 18px; background: var(--surface); box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.sd-picker.sd-picker4 { grid-template-columns: repeat(2, 64px); }
.sd-pick { height: 64px; border-radius: 12px; border: 0; background: var(--bg); color: var(--ink); display: grid; place-items: center;
  font: 500 32px/1 Fraunces, Georgia, serif; cursor: pointer; padding: 4px; }
.sd-pick.out { opacity: .35; }
.sd-pick.on { box-shadow: inset 0 0 0 3px var(--primary); }
.sd-pick .sd-pic { height: 50px; }
.sd-pick:focus { outline: none; background: var(--focus); color: var(--on-focus); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus); }
.sd-pick:focus.out { opacity: .75; }
.sd-picker-help { grid-column: 1 / -1; margin: 2px 0 0; max-width: 216px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--muted); }

/* solved: the done panel takes the controls' place, the whole grid stays in view */
.sd-done { position: static; margin: 0; padding: 14px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); max-width: none; }
.sd-done h2 { margin: 0; font-size: 26px; }
.sd-done p { margin: 4px 0 0; }
.sd-done-actions { margin: 12px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sd-done-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }

/* wide screens and sideways phones: numbers as a 3x3 keypad in the side column */
@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .sd-pad.sd-pad9, .sd-pad.sd-pad6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-pad.sd-pad4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (min-aspect-ratio: 5/4) and (max-height: 500px) {
  .sd-pad { grid-auto-rows: 40px; }
  .sd-key { min-height: 0; height: 40px; font-size: 20px; }
  .sd-key small { display: none; }
  .sd-tool { min-height: 44px; font-size: 11px; }
  .sd-tool svg { width: 20px; height: 20px; }
  .sd-pad.sd-picture { grid-auto-rows: 44px; }
  .sd-pad.sd-picture .sd-key { min-height: 0; height: 44px; }
  .sd-key .sd-pic { height: 36px; }
  .sd-app .slide-status .count { font-size: 18px; }
  .sd-done { padding: 8px 12px; }
  .sd-done h2 { font-size: 21px; }
  .sd-done p { font-size: 14px; line-height: 1.3; margin-top: 0; }
  .sd-done-actions { margin-top: 8px; gap: 6px; flex-wrap: nowrap; }
  .sd-done-actions .btn { min-height: 36px; padding: 6px 11px; font-size: 13px; white-space: nowrap; }
}
/* TV (body.tv, from the app's tvplay.js): board left, controls in a side column. Sized in vh/vw, not px, so a
   TV's web view looks the same at 1920x1080 and at 960x540 CSS px (Fire TV): the board fills the height. 
   No text under 2.25vh (12 px at 960x540, 24 px at 1080p), the shared TV rule. */
body.tv .sd-app { grid-template: "stage head" auto "stage status" auto "stage actions" auto "stage ." minmax(0, 1fr)
                  / minmax(0, 1fr) 29vw; column-gap: 2.6vw; row-gap: .9vh; }
body.tv .sd-app .slide-head .brand { font-size: 2.25vh; padding: .4vh 0; }
body.tv .sd-app .slide-head h1 { font-size: 3.7vh; }
body.tv .sd-app .more summary { font-size: 2.25vh; min-height: 4.2vh; min-width: 0; padding: .9vh 1.6vh; }
body.tv .sd-app .levels { gap: .8vh; }
body.tv .sd-app .levels .btn { font-size: 2.25vh; padding: 1.1vh 1.5vh; min-height: 4.8vh; min-width: 0; }
body.tv .sd-app .count, body.tv .sd-app .clock { font-size: 2.6vh; }
body.tv .sd-board { --side: min(100cqw, 100cqh); }
body.tv .sd-tools { gap: .9vh; }
body.tv .sd-tool { min-height: 7vh; font-size: 2.25vh; gap: .6vh; border-radius: 1.3vh; background: var(--card); }
body.tv .sd-tool svg { width: 2.8vh; height: 2.8vh; }
body.tv .sd-pad { gap: .6vh; }
body.tv .sd-key { min-height: 6.7vh; font-size: 3vh; border-radius: 1.1vh; }
body.tv .sd-key small { font-size: 2.25vh; }
body.tv .sd-pad.sd-picture .sd-key { min-height: 8vh; }
body.tv .sd-key .sd-pic { height: 6vh; }
body.tv .sd-app .sd-tool:focus, body.tv .sd-app .sd-key:focus { background: var(--focus); color: var(--on-focus); outline: 4px solid var(--focus); outline-offset: 3px; }
body.tv .sd-app .sd-key:focus small { color: var(--on-focus); }
body.tv .sd-picker { grid-template-columns: repeat(3, 7.8vh); gap: .9vh; padding: 1.1vh; border-radius: 1.7vh; }
body.tv .sd-picker.sd-picker4 { grid-template-columns: repeat(2, 7.8vh); }
body.tv .sd-pick { height: 7.8vh; font-size: 3.9vh; border-radius: 1.1vh; }
body.tv .sd-pick .sd-pic { height: 6vh; }
body.tv .sd-picker-help { font-size: 2.25vh; max-width: 25vh; }
body.tv .sd-app .more-panel, body.tv .sd-app .more-panel .btn { font-size: 2.25vh; }
body.tv .sd-note { font-size: 2.25vh; padding: .8vh 1.4vh; }
body.tv .sd-done { padding: 1.4vh 1.8vh; }
body.tv .sd-done h2 { font-size: 2.6vh; }
body.tv .sd-done p { font-size: 2.25vh; }
body.tv .sd-done-actions { gap: .8vh; margin-top: 1.2vh; }
body.tv .sd-done-actions .btn { font-size: 2.25vh; min-height: 4.4vh; padding: .9vh 1.6vh; }
/* the puzzles hub (index.html): a Sudoku section, two rows like Spot the difference's, each with a little
   board for a picture */
.hub .card-sudoku, .hub .card-maze { display: flex; align-items: center; gap: 12px; padding: 10px; }
.hub .card .mz-thumb { flex: none; width: 64px; height: 64px; border-radius: 10px; }   /* the Corn Maze row, beside Sudoku's */
.hub .card .sd-thumb { flex: none; width: 64px; height: 64px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); border-radius: 10px;
  overflow: hidden; background: var(--sd-cell); border: 2px solid var(--sd-box); gap: 1px; box-sizing: border-box;
  font: 600 17px/1 Fraunces, Georgia, serif; color: var(--sd-given); }
.hub .card .sd-thumb > span { font: inherit; display: grid; place-items: center; background-color: var(--sd-cell); box-shadow: 0 0 0 1px var(--sd-thin); }
.hub .card .sd-thumb > span:nth-child(5) { background-color: var(--sd-sel); color: var(--sd-sel-ink); }
.hub .card .sd-thumb-pics { grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
.hub .card .sd-thumb .sd-pic { display: block; height: 80%; justify-self: center; align-self: center; background-color: transparent; box-shadow: none; }
.hub .card .sd-thumb .sd-pic-pip, .hub .card .sd-thumb .sd-pic-wick { height: 92%; }
@media (prefers-reduced-motion: reduce) {
  .sd-cell.wiggle, .sd-board.solved { animation: none; }
}