/* Sudoku page (frame, header and dialogs come from css/shell.css).
   The grid is a playing piece, so like the Word Search letters it stays light in every theme; its few colours are set here. */
.board-wrap {
  grid-area: board;
  position: relative;
  min-height: 0;
  margin: 0 12px 12px;
  overflow: hidden;
  border-radius: 20px;
  border: 4px solid var(--board-edge);
  background: var(--paper);
}
html.high-contrast .board-wrap { border-color: #fff; }

.sd {
  --sd-thin: #8a7a63;        /* lines between squares */
  --sd-thick: #1f1408;       /* lines round the 3 x 3 boxes */
  --sd-given: #1f1408;       /* numbers that came with the puzzle: dark and heavy, on a tinted square */
  --sd-given-bg: rgba(110, 75, 30, 0.17);
  --sd-entry: #1d4ed8;       /* numbers you put in: blue and lighter */
  --sd-bad: #b91c1c;
  --sd-peer: rgba(59, 125, 216, 0.17);
  --sd-same: rgba(255, 179, 0, 0.5);
  --sd-sel: var(--select);
  --sd-ring: #1e3a8a;
  --sd-note: #3d3226;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
}
.sd.tall { flex-direction: column; gap: 10px; padding: 8px; }
html.high-contrast .sd {
  --sd-thin: #555;
  --sd-thick: #000;
  --sd-given: #000;
  --sd-given-bg: rgba(0, 0, 0, 0.16);
  --sd-entry: #0033cc;
  --sd-bad: #c00000;
  --sd-peer: rgba(0, 0, 0, 0.1);
  --sd-same: #ffd400;
  --sd-sel: #ffd400;
  --sd-ring: #000;
  --sd-note: #000;
}

.grid-box {
  flex: none;
  padding: 4px;
  background: var(--grid-bg);
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(60, 35, 10, 0.18);
}
html.high-contrast .grid-box { border-color: #fff; box-shadow: none; }
.grid {
  display: grid;
  grid-template-columns: repeat(9, var(--cell, 40px));
  grid-template-rows: repeat(9, var(--cell, 40px));
  box-sizing: content-box;
  width: calc(9 * var(--cell, 40px));
  height: calc(9 * var(--cell, 40px));
  border: 3px solid var(--sd-thick);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline: none;
}
.grid:focus-visible { outline: 4px solid var(--focus); outline-offset: 5px; }

.cell {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--sd-thin);
  border-bottom: 1px solid var(--sd-thin);
  font: 500 calc(var(--cell, 40px) * 0.64) / 1 Verdana, "Segoe UI", Arial, sans-serif;
  color: var(--sd-entry);
}
.cell.cr { border-right: max(3px, calc(var(--cell, 40px) * 0.07)) solid var(--sd-thick); }
.cell.cb { border-bottom: max(3px, calc(var(--cell, 40px) * 0.07)) solid var(--sd-thick); }
.cell.lc { border-right: 0; }
.cell.lr { border-bottom: 0; }
.cell.given { font-weight: 800; color: var(--sd-given); background-image: linear-gradient(var(--sd-given-bg), var(--sd-given-bg)); }

/* Helpers: the row, column and box of the chosen square, and squares holding the same number */
.cell.peer { background-color: var(--sd-peer); }
.cell.same { background-color: var(--sd-same); }
.cell.sel { background-color: var(--sd-sel); box-shadow: inset 0 0 0 4px var(--sd-ring); z-index: 1; }
.cell.hunit { background-color: rgba(21, 128, 61, 0.2); }
html.high-contrast .cell.hunit { background-color: rgba(0, 255, 102, 0.35); }
/* A wrong number (when Show mistakes is on): red, and striped, so it doesn't rely on colour alone */
.cell.bad {
  color: var(--sd-bad);
  background-image: repeating-linear-gradient(135deg, rgba(185, 28, 28, 0.26) 0 5px, transparent 5px 10px);
}
html.high-contrast .cell.bad { background-image: repeating-linear-gradient(135deg, rgba(192, 0, 0, 0.5) 0 5px, transparent 5px 10px); }
/* Hint: the square it filled in glows green */
.cell.hint { z-index: 2; box-shadow: inset 0 0 0 4px var(--hint-ring), 0 0 14px 3px rgba(21, 128, 61, 0.65); animation: sdglow 0.9s ease-in-out infinite alternate; }
html.high-contrast .cell.hint { box-shadow: inset 0 0 0 5px #000, 0 0 0 4px #00c050; }
@keyframes sdglow { from { transform: scale(0.97); } to { transform: scale(1.04); } }
.grid:focus-visible .cell.sel::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 3px dashed var(--focus);
  border-radius: 6px;
}

/* Pencil notes: up to nine small numbers, each in its own place */
.nt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 2px;
  font: 700 max(11px, calc(var(--cell, 40px) * 0.27)) / 1 Verdana, "Segoe UI", Arial, sans-serif;
  color: var(--sd-note);
}
.nt i { display: grid; place-items: center; font-style: normal; border-radius: 3px; }
.nt i.m { background: var(--sd-same); color: #000; }

/* The number pad */
.pad {
  flex: none;
  display: grid;
  grid-template-columns: repeat(var(--pad-cols, 5), minmax(0, 1fr));
  gap: var(--pad-gap, 8px);
  width: var(--pad-w, 360px);
}
.pad-btn {
  position: relative;
  min-height: var(--pad-h, 56px);
  padding: 0;
  font: 800 calc(var(--pad-h, 56px) * 0.62) / 1 Verdana, "Segoe UI", Arial, sans-serif;   /* as big as the button allows, whatever the text size */
  border-radius: 12px;
}
/* Erase: a small icon over its word in the narrow pad under the grid, side by side in the wide pad beside it */
.pad-btn.erase { grid-column: span var(--erase-span, 1); flex-direction: column; gap: 1px; font-size: min(1rem, calc(var(--pad-bw, 66px) * 0.21)); font-weight: 700; line-height: 1.1; }
.pad-btn.erase svg { width: 1.5em; height: 1.5em; flex: none; }
.pad.wide .pad-btn.erase { flex-direction: row; gap: 0.4em; font-size: max(18px, 1.1rem); }
.pad-btn.done { background: transparent; border-style: dashed; color: var(--found-ink); }
.pad-btn.done::after { content: "\2713"; position: absolute; top: 3px; right: 6px; font-size: 0.45em; font-weight: 700; }
/* Notes mode: the pad looks like a pencil, so it's clear that numbers will be small notes */
.pad.notes .pad-btn:not(.erase) { background: var(--bg-2); border-style: dashed; font-size: calc(var(--pad-h, 56px) * 0.46); font-weight: 600; }
.pad.notes .pad-btn.done { background: transparent; }

#btn-notes { flex-direction: column; gap: 0; }
#btn-notes .state { display: block; font-size: 0.7em; font-weight: 700; line-height: 1.1; }

/* How to play pictures and the win screen */
.hp-box { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 32px); border: 3px solid var(--sd-thick, #1f1408); background: var(--grid-bg); }
.hp-box span, .hp-pick span { display: grid; place-items: center; font: 800 20px / 1 Verdana, Arial, sans-serif; color: #1f1408; border: 1px solid #8a7a63; }
.hp-box .e { color: #1d4ed8; font-weight: 500; }
.hp-box .q { background: var(--select); box-shadow: inset 0 0 0 3px #1e3a8a; }
.hp-pick { display: flex; gap: 6px; align-items: center; }
.hp-pick span { width: 42px; height: 46px; border: 3px solid var(--wood-dark); border-radius: 10px; background: var(--card); color: var(--ink); }
.hp-pick span:first-child { background: var(--select); border-color: #1e3a8a; color: #1f1408; }
.win-art .win-block { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 52px); border: 4px solid #1f1408; background: var(--grid-bg); border-radius: 6px; }
.win-art .win-block span { display: grid; place-items: center; font: 800 30px / 1 Verdana, Arial, sans-serif; color: #1f1408; border: 1px solid #8a7a63; }
.win-art .win-block span:nth-child(odd) { background: rgba(255, 213, 79, 0.7); }

/* Messages are kept to two lines, and room for two is always kept, so the grid never shifts when one appears.
   (Large and Extra large text have bigger letters, so they keep room for three.) */
@media (max-width: 820px) {
  .message { display: flex; align-items: center; justify-content: center; min-height: 3.1em; font-size: 1rem; line-height: 1.5; }
  html[data-text="large"] .message, html[data-text="xl"] .message { min-height: 4.6em; }
}
/* Phones: the six buttons sit in two rows of three (shell.css), or in three rows of two when the text is larger, and the board gets a little less margin */
@media (max-width: 640px) {
  .board-wrap { margin: 0 6px 8px; border-width: 3px; border-radius: 14px; }
  #btn-notes .state { font-size: 0.75em; }
}
@media (max-width: 500px) { .sd.tall { padding: 4px; } }
@media (max-width: 640px) {
  html[data-text="large"] .toolbar, html[data-text="xl"] .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A tablet held upright, with Extra large text: three buttons a row so every word fits */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 900px) {
  html[data-text="xl"] .toolbar { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Not enough height for a comfortable grid (Large or Extra large text on a phone, or a phone on its side): the page scrolls.
   game.js sets the height of the board then. */
body.game.scrolls { height: auto; min-height: 100dvh; overflow-y: auto; }

/* ---------- Printing: one large-print page, just the grid ---------- */
#print-sheet { display: none; }
@page { margin: 0.5in; }
@media print {
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  body.game { display: block !important; }
  body.game > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block; color: #000; font-family: Verdana, "Segoe UI", Arial, sans-serif; text-align: center; }
  #print-sheet h1 { margin: 0 0 0.05in; font: 700 28pt Georgia, "Times New Roman", serif; }
  .ps-sub { margin: 0 0 0.2in; font-size: 14pt; }
  .ps-grid { margin: 0 auto; border-collapse: collapse; table-layout: fixed; width: 6.8in; border: 3.5pt solid #000; }
  .ps-grid td {
    width: calc(6.8in / 9); height: calc(6.8in / 9); padding: 0; text-align: center; vertical-align: middle;
    font-weight: 700; font-size: calc(6.8in / 9 * 0.62); line-height: 1; border: 1pt solid #666;
  }
  .ps-grid td.bl { border-left: 3.5pt solid #000; }
  .ps-grid td.bt { border-top: 3.5pt solid #000; }
  .ps-foot { margin: 0.2in 0 0; font-size: 10pt; color: #444; }
}