/* SudokuDog Tricks. One move to find, then the board fills
   itself in. Colours come from the site tokens in /site.css, so Classic,
   Quiet Ledger and Nocturne all work. */
.pz {
  /* Desktop: as big as the window allows, up to 644px, so the lesson card
     fits beside it without moving the controls. */
  --pz-board: min(644px, calc(100vw - 32px - 22px - 28px - 400px), calc(100vh - 140px));
  --pz-cell-rule: color-mix(in srgb, var(--dog-field-rule) 45%, transparent);
  --pz-box-rule: var(--dog-brand);
  --pz-area: color-mix(in srgb, var(--dog-gold-soft) 34%, transparent);
  --pz-focus: color-mix(in srgb, var(--dog-gold-soft) 55%, transparent);
  --pz-peer: color-mix(in srgb, var(--dog-focus) 8%, transparent);
  --pz-same: color-mix(in srgb, var(--dog-focus) 22%, transparent);
  --pz-selected: color-mix(in srgb, var(--dog-focus) 30%, transparent);
  --pz-good: #2f8a4f;
  --pz-bad: #c2413a;
  --pz-filled-ink: color-mix(in srgb, var(--dog-ink) 62%, var(--dog-focus));
  --pz-placed-ink: var(--dog-accent);
  display: grid;
  grid-template-columns: auto minmax(360px, 420px);
  justify-content: center;
  align-items: start;
  gap: 28px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}
html[data-sudoku-style="nocturne"] .pz { --pz-good: #5cc07f; --pz-bad: #ef6f66; --pz-box-rule: color-mix(in srgb, var(--dog-ink) 70%, transparent); }

/* Board ------------------------------------------------------------------ */
.pz-stage { position: relative; }
.pz-frame { display: grid; grid-template-columns: 22px var(--pz-board); grid-template-rows: 22px var(--pz-board); }
.pz-cols, .pz-rows { display: grid; color: var(--dog-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .7; }
.pz-cols { grid-column: 2; grid-template-columns: repeat(9, 1fr); align-items: center; justify-items: center; }
.pz-rows { grid-column: 1; grid-row: 2; grid-template-rows: repeat(9, 1fr); align-items: center; justify-items: center; }
.pz-board {
  grid-column: 2; grid-row: 2;
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  border: 2.5px solid var(--pz-box-rule); border-radius: 10px; overflow: hidden;
  background: var(--dog-field);
  box-shadow: 0 10px 30px -18px rgba(20, 48, 74, .45);
  touch-action: manipulation;
}
.pz-cell {
  position: relative; display: grid; place-items: center;
  margin: 0; padding: 0; border: 0;
  border-right: 1px solid var(--pz-cell-rule); border-bottom: 1px solid var(--pz-cell-rule);
  background: transparent; color: var(--dog-ink); cursor: pointer;
  transition: background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pz-cell:nth-child(9n) { border-right: 0; }
.pz-cell:nth-child(n+73) { border-bottom: 0; }
.pz-cell.edge-r { border-right: 2px solid var(--pz-box-rule); }
.pz-cell.edge-b { border-bottom: 2px solid var(--pz-box-rule); }
.pz-cell:focus-visible { outline: 3px solid var(--dog-focus); outline-offset: -3px; z-index: 2; }
.pz-cell.is-area { background: var(--pz-area); }
.pz-cell.is-peer { background: var(--pz-peer); }
.pz-cell.is-same { background: var(--pz-same); }
.pz-cell.is-focus { background: var(--pz-focus); }
.pz-cell.is-selected { background: var(--pz-selected); }
.pz-cell.is-blocked::after {
  content: ""; position: absolute; inset: 18%;
  background: linear-gradient(45deg, transparent 46%, color-mix(in srgb, var(--pz-bad) 55%, transparent) 46% 54%, transparent 54%),
              linear-gradient(-45deg, transparent 46%, color-mix(in srgb, var(--pz-bad) 55%, transparent) 46% 54%, transparent 54%);
  opacity: .55; pointer-events: none;
}
.pz-cell.is-target { box-shadow: inset 0 0 0 3px var(--dog-accent); animation: pz-pulse 1.1s ease-in-out infinite; z-index: 1; }
.pz-board.is-locked .pz-cell { cursor: default; }

/* A per-square layer for gold and green flashes, animated on opacity only. */
.pz-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--dog-gold-soft) 85%, transparent); }
.pz-flash[data-kind="green"] { background: color-mix(in srgb, var(--pz-good) 50%, transparent); }
.pz-flash[data-kind="red"] { background: color-mix(in srgb, var(--pz-bad) 45%, transparent); }
.pz-digit { position: relative; font-family: 'Source Serif 4', Georgia, serif; font-size: 6.3cqw; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.pz-cell.is-given .pz-digit { color: var(--dog-ink); font-weight: 600; }
.pz-cell.is-filled .pz-digit { color: var(--pz-filled-ink); }
.pz-cell.is-placed .pz-digit { color: var(--pz-placed-ink); font-weight: 700; }
.pz-cell.is-wrong .pz-digit { color: var(--pz-bad); }
/* A forcing chain's numbers on trial: supposed, not known, so italic and
   dashed until the trial comes out. */
.pz-cell.is-trial .pz-digit { color: var(--pz-placed-ink); font-style: italic; opacity: .8; }
.pz-cell.is-trial::before { content: ""; position: absolute; inset: 12%; border: 1.5px dashed color-mix(in srgb, var(--dog-accent) 60%, transparent); border-radius: 6px; pointer-events: none; }

.pz-notes { position: absolute; inset: 4%; display: none; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.pz-cell.has-notes .pz-notes { display: grid; }
.pz-note { display: grid; place-items: center; position: relative; z-index: 0; font-size: 2.35cqw; font-weight: 600; line-height: 1; color: var(--dog-muted); font-variant-numeric: tabular-nums; }
.pz-note.is-mark { color: var(--dog-ink); }
.pz-note.is-mark::before { content: ""; position: absolute; width: 2.9cqw; height: 2.9cqw; border-radius: 50%; background: color-mix(in srgb, var(--dog-accent) 38%, transparent); z-index: -1; }
.pz-note.is-strike { color: var(--pz-bad); }
.pz-note.is-strike::after { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: var(--pz-bad); transform: rotate(-35deg); }

@keyframes pz-pulse { 50% { box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--dog-accent) 60%, transparent); } }

.pz-float {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(44px, 9vw, 72px); font-weight: 700;
  color: var(--pz-good); text-shadow: 0 2px 0 var(--dog-field), 0 0 10px var(--dog-field);
  pointer-events: none; opacity: 0; z-index: 3;
}

/* Results cards (course, check-in, welcome back, progress): one card takes
   the board's place. */
.pz.is-summary .pz-frame { display: none; }
.pz.is-summary .pz-timer { display: none; }
.pz.is-summary .pz-foot { grid-template-columns: minmax(0, 1fr); }
.pz.is-summary .pz-pad { visibility: hidden; }
.pz-summary { display: flex; flex-direction: column; gap: 14px; width: calc(var(--pz-board) + 22px); min-height: calc(var(--pz-board) + 22px); box-sizing: border-box; padding: 22px 28px 18px; border: 1px solid var(--dog-rule); border-radius: 16px; background: var(--dog-surface); box-shadow: 0 14px 34px -24px rgba(20, 48, 74, .55); }
.pz-summary[hidden] { display: none; }
.pz-summary-top { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dog-rule); }
.pz-summary-badge { min-width: 60px; height: 74px; padding-top: 16px; border-radius: 16px 16px 20px 20px; font-size: 28px; }
.pz-summary-badge::before { top: 8px; width: 10px; height: 10px; margin-left: -5px; }
.pz-summary-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dog-accent); }
.pz-summary-title { margin: 2px 0 4px; font-family: 'Source Serif 4', Georgia, serif; font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--dog-brand); }
.pz-summary-sub { margin: 0; font-size: 14px; color: var(--dog-muted); }
.pz-summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pz-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--pz-lesson-tint); }
.pz-stat strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--dog-brand); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pz-stat span { font-size: 13px; font-weight: 700; color: var(--dog-ink); }
.pz-stat small { font-size: 12px; line-height: 1.35; color: var(--dog-muted); }
.pz-summary-tricks { display: flex; flex-direction: column; gap: 8px; }
.pz-summary-h { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dog-muted); }
.pz-trick-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pz-trick-list li { display: flex; align-items: center; gap: 12px; min-height: 40px; box-sizing: border-box; padding: 2px 6px 2px 14px; border: 1px solid var(--dog-rule); border-radius: 10px; background: var(--dog-field); }
.pz-trick-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pz-trick-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.pz-trick-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--dog-brand); }
.pz-trick-sub { font-size: 12px; line-height: 1.25; color: var(--dog-muted); }
.pz-trick-actions { display: flex; gap: 6px; }
.pz-change { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.pz-change.is-up { background: color-mix(in srgb, var(--dog-gold-soft) 45%, transparent); color: var(--dog-brand); }
.pz-change.is-down { background: color-mix(in srgb, var(--dog-muted) 14%, transparent); color: var(--dog-muted); }
/* Paws: three per trick, filled as they're earned. */
.pz-paws { display: inline-flex; gap: 2px; }
.pz-paw { display: inline-flex; width: 21px; height: 21px; color: color-mix(in srgb, var(--dog-muted) 24%, transparent); }
.pz-paw svg { width: 100%; height: 100%; fill: currentColor; }
.pz-paw.is-on { color: var(--dog-accent); }
.pz-paw-note { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--dog-accent); white-space: nowrap; }
.pz-paw-note svg { width: 14px; height: 14px; fill: currentColor; }
.pz-link { padding: 0; border: 0; background: none; color: var(--dog-brand); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pz-link:focus-visible { outline: 3px solid var(--dog-focus); outline-offset: 2px; }
.pz-trick-dots { display: flex; gap: 6px; }
.pz-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; vertical-align: -2px; }
.pz-dot.is-own { background: var(--pz-good); }
.pz-dot.is-help { border: 2.5px solid var(--dog-accent); background: transparent; }
.pz-practice { height: 30px; padding: 0 12px; border: 1.5px solid color-mix(in srgb, var(--dog-brand) 45%, transparent); border-radius: 999px; background: var(--dog-field); color: var(--dog-brand); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pz-practice:hover { border-color: var(--dog-accent); }
.pz-practice:focus-visible { outline: 3px solid var(--dog-focus); outline-offset: 2px; }
.pz-summary-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 2px 0 0; font-size: 12px; color: var(--dog-muted); }
.pz-summary-legend > span { white-space: nowrap; }
.pz-summary-legend .pz-dot { width: 11px; height: 11px; }
.pz-summary-legend .pz-dot.is-help { border-width: 2px; }
.pz-summary-legend .pz-paw { width: 14px; height: 14px; vertical-align: -2px; }
.pz-summary-legend > span:only-child { white-space: normal; }
.pz-summary-note { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--dog-rule); font-size: 13px; color: var(--dog-muted); }
.pz-summary-note a { font-weight: 700; color: var(--dog-brand); }

/* Panel ------------------------------------------------------------------ */
/* The panel is at least as tall as the board and the spare room sits above
   the pad, so the pad and the Hint button stay put while the bubble's text
   changes. The bubble always shows all of its text: nothing scrolls or clips. */
.pz-panel { display: flex; flex-direction: column; gap: 12px; min-height: calc(var(--pz-board) + 22px); padding: 19px 20px; border: 1px solid var(--dog-rule); border-radius: 14px; background: var(--dog-surface); }
.pz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pz-title { display: flex; align-items: center; gap: 12px; }
.pz-title h1 { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--dog-brand); }
.pz-proto { margin-left: 2px; }
.pz-icons { display: flex; gap: 8px; }
.pz-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--dog-rule); border-radius: 10px; background: transparent; color: var(--dog-muted); cursor: pointer; }
.pz-icon:hover { color: var(--dog-brand); border-color: var(--dog-accent); }
.pz-icon svg { width: 20px; height: 20px; }
.pz-icon .pz-off { display: none; }
.pz-icon[aria-pressed="true"] .pz-on { display: none; }
.pz-icon[aria-pressed="true"] .pz-off { display: block; }

/* Dog-tag level badge */
.pz-tag {
  position: relative; display: inline-grid; place-items: center; min-width: 38px; height: 46px; padding: 10px 7px 0;
  border-radius: 11px 11px 13px 13px; background: linear-gradient(160deg, #d9dee3, #9ea8b1); color: #1f2b37;
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 rgba(20, 48, 74, .25);
}
.pz-tag::before { content: ""; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--dog-surface); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35); }
.pz-tag.is-gold { background: linear-gradient(160deg, #f1d9a6, var(--dog-gold)); }

/* Coach */
/* min-height: room for the tallest lesson card, so the score, pad and Hint
   button sit in the same place whether a lesson, a goal or a hint is showing. */
.pz-coach { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 340px; }
.pz-dog { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--dog-surface); box-shadow: 0 0 0 1px var(--dog-rule); transform-origin: 50% 90%; }
.pz-bubble { position: relative; min-height: 240px; padding: 14px 16px; border: 1px solid var(--dog-rule); border-radius: 14px; background: var(--dog-field); box-shadow: 0 6px 18px -14px rgba(20, 48, 74, .5); }
.pz-coach { position: relative; }
.pz-coach::before { content: ""; position: absolute; left: 77px; top: 24px; width: 14px; height: 14px; background: var(--dog-field); border-left: 1px solid var(--dog-rule); border-bottom: 1px solid var(--dog-rule); transform: rotate(45deg); z-index: 1; }
.pz-bubble p { margin: 0; }
.pz-bubble-head { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--dog-ink); }
.pz-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--dog-field-rule); border-radius: 5px; transition: background .2s, border-color .2s; }
.pz-check svg { width: 14px; height: 14px; opacity: 0; transform: scale(.3); transition: opacity .2s, transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.pz-check.is-on { background: var(--pz-good); border-color: var(--pz-good); }
.pz-check.is-on svg { opacity: 1; transform: none; }
.pz-check.is-miss { border-color: var(--pz-bad); }
.pz-bubble-text { margin-top: 8px !important; font-size: 15px; line-height: 1.55; color: var(--dog-ink); }
.pz-bubble-extra { margin-top: 8px !important; font-size: 13px; line-height: 1.5; color: var(--dog-muted); }
.pz-bubble-extra:empty { display: none; }
.pz-bubble-extra strong { color: var(--pz-good); }
.pz-watch { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: var(--dog-brand); font: inherit; font-size: 13px; font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--dog-brand) 35%, transparent); text-underline-offset: 3px; cursor: pointer; }
.pz-watch svg { width: 14px; height: 14px; color: var(--dog-accent); }
/* Try again, after a rejected number: a clear way back to the start. */
.pz-retry-line { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pz-retry { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px 0 13px; border: 1.5px solid color-mix(in srgb, var(--dog-brand) 45%, transparent); border-radius: 999px; background: var(--dog-surface); color: var(--dog-brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pz-retry:hover { border-color: var(--dog-accent); background: color-mix(in srgb, var(--dog-gold-soft) 18%, var(--dog-surface)); }
.pz-retry:focus-visible { outline: 3px solid var(--dog-focus); outline-offset: 2px; }
.pz-retry svg { width: 16px; height: 16px; color: var(--dog-accent); }

/* Lesson card: the first puzzle of a trick opens with its demo in the bubble.
   The board stays live; Start, a tap on the board, a number or Hint closes it. */
.pz { --pz-lesson-tint: color-mix(in srgb, var(--dog-gold-soft) 18%, var(--dog-field)); }
.pz-lesson { display: flex; flex-direction: column; margin: -14px -16px; }
.pz-lesson-head { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 14px 14px 0 0; background: var(--pz-lesson-tint); border-bottom: 1px solid color-mix(in srgb, var(--dog-gold-soft) 40%, var(--dog-rule)); }
.pz-lesson-pill { padding: 3px 8px; border-radius: 999px; background: var(--dog-accent); color: var(--dog-field); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pz-lesson-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--dog-brand); text-decoration-color: color-mix(in srgb, var(--dog-brand) 35%, transparent); text-underline-offset: 3px; }
.pz-lesson-name:not([href]) { text-decoration: none; }
.pz-lesson-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 6px; }
.pz-lesson-foot { display: flex; justify-content: flex-end; padding-top: 2px; border-top: 1px solid var(--dog-rule); }
.pz-start { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--dog-brand); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pz-start svg { width: 15px; height: 15px; }
/* While a lesson is open the card takes the dog's whole area, so the demo can
   be drawn large enough to read; the dog moves into the card's header. */
.pz-coach.is-lesson { grid-template-columns: minmax(0, 1fr); }
.pz-coach.is-lesson .pz-dog, .pz-coach.is-lesson::before { display: none; }
.pz-lesson-dog { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px var(--dog-rule); }

/* Trick demos (trick-demos.js). Same squares, marks and colours as the hints. */
.td { display: flex; flex-direction: column; gap: 10px; }
.td-stage { position: relative; align-self: center; width: fit-content; }
.td-grid { display: grid; grid-template-columns: repeat(var(--td-cols), var(--td-cell)); grid-auto-rows: var(--td-row, var(--td-cell)); width: fit-content; border: 1.5px solid var(--pz-box-rule); border-radius: 8px; overflow: hidden; background: var(--dog-field); box-shadow: 0 8px 18px -12px rgba(20, 48, 74, .5); }
.td-grid.is-cross { padding: 1px; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.td-cell { position: relative; display: grid; place-items: center; box-sizing: border-box; width: var(--td-cell); height: var(--td-row, var(--td-cell)); background-color: var(--dog-field); transition: background-color .45s ease, box-shadow .3s ease; }
.td-cell.line-r { border-right: 1px solid var(--pz-cell-rule); }
.td-cell.edge-r { border-right: 1.5px solid var(--pz-box-rule); }
.td-cell.line-b { border-bottom: 1px solid var(--pz-cell-rule); }
.td-cell.edge-b { border-bottom: 1.5px solid var(--pz-box-rule); }
.td-cell.is-area { background-color: var(--pz-area); }
.td-cell.is-focus { background-color: var(--pz-focus); }
.td-cell.is-ring { box-shadow: inset 0 0 0 2px var(--dog-accent); }
.td-grid.is-cross .td-cell { box-shadow: 0 0 0 1px var(--dog-field-rule); }
.td-grid.is-cross .td-cell.is-ring { box-shadow: 0 0 0 1px var(--dog-field-rule), inset 0 0 0 2px var(--dog-accent); }
.td-cell.is-off { visibility: hidden; }
.td-cell.is-blocked { background-image: linear-gradient(45deg, transparent 44%, color-mix(in srgb, var(--pz-bad) 60%, transparent) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, color-mix(in srgb, var(--pz-bad) 60%, transparent) 44% 56%, transparent 56%); }
.td-digit { font-family: 'Source Serif 4', Georgia, serif; font-size: calc(var(--td-cell) * .62); font-weight: 600; line-height: 1; color: var(--dog-ink); }
.td-digit.is-placed { position: relative; z-index: 1; color: var(--dog-accent); font-weight: 700; opacity: 0; transform: scale(.4); transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.td-digit.is-placed.is-in { opacity: 1; transform: none; }
.td-digit.is-placed.is-trial { font-style: italic; font-weight: 600; }
.td-digit.is-placed.is-trial.is-in { opacity: .8; }
.td-notes { position: absolute; inset: 5% 6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1px; }
.td-note { position: relative; z-index: 0; display: grid; place-items: center; border-radius: 3px; font-size: calc(var(--td-cell) * .36); font-weight: 650; line-height: 1; color: color-mix(in srgb, var(--dog-ink) 72%, var(--dog-field)); transition: opacity .45s ease, transform .45s ease, color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.td-big-marks .td-note { font-size: calc(var(--td-cell) * .46); }
/* Circled marks: a soft gold block behind a dark-gold bold digit (no ring to
   crowd it). Ruled-out marks: red with one clean line through the middle. */
.td-note.is-mark { color: var(--dog-pill-ink); font-weight: 850; background-color: color-mix(in srgb, var(--dog-gold-soft) 55%, var(--dog-field)); }
.td-note.is-strike { color: var(--pz-bad); font-weight: 750; text-decoration: line-through; text-decoration-thickness: 2px; }
.td-note.is-gone { opacity: 0; transform: scale(.4); }
.td-over { position: absolute; left: 1.5px; top: 1.5px; overflow: visible; pointer-events: none; }
.td-grid.is-cross + .td-over { left: 1px; top: 1px; }
.td-path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .95; animation: td-in .4s ease both; }
.td-path.is-gold { stroke: var(--dog-accent); }
.td-path.is-red { stroke: var(--pz-bad); }
.td-path.is-line { stroke-dasharray: 5 5; }
.td-path.is-rect { stroke-width: 1.5; stroke-dasharray: 2 5; }
.td-path.is-faint { opacity: .3; animation: none; }
.td-head-gold { fill: var(--dog-accent); }
.td-head-red { fill: var(--pz-bad); }
@keyframes td-in { from { opacity: 0; } }
.td-chips { display: flex; justify-content: center; gap: 4px; }
.td-chip { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--dog-brand); background: var(--dog-field); box-shadow: inset 0 0 0 1px var(--dog-rule); transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.td-chip.is-used { color: color-mix(in srgb, var(--dog-muted) 70%, transparent); background: color-mix(in srgb, var(--dog-ink) 6%, transparent); box-shadow: none; text-decoration: line-through; }
.td-chip.is-answer { color: var(--dog-field); background: var(--dog-accent); box-shadow: 0 2px 6px -2px rgba(154, 116, 64, .7); }
.td-caption { display: flex; flex-direction: column; gap: 3px; }
.td-step { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dog-accent); }
.td-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--dog-ink); }
.td-controls { display: flex; align-items: center; gap: 4px; }
.td-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--dog-rule); border-radius: 50%; background: var(--dog-field); color: var(--dog-brand); cursor: pointer; }
.td-btn svg { width: 16px; height: 16px; }
.td-btn:hover { border-color: var(--dog-accent); }
.td-toggle { margin-left: 4px; border-color: transparent; background: var(--dog-brand); color: var(--dog-field); }
.td-toggle svg { width: 14px; height: 14px; }
.td-dots { display: flex; align-items: center; }
.td-dot { display: grid; place-items: center; width: 22px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.td-dot span { display: block; width: 7px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--dog-muted) 35%, transparent); transition: width .3s ease, background-color .3s ease; }
.td-dot.is-current span { width: 18px; background: var(--dog-accent); }
.td-btn:focus-visible, .td-dot:focus-visible, .pz-start:focus-visible, .pz-watch:focus-visible { outline: 3px solid var(--dog-focus); outline-offset: 2px; }

/* Score and level bar */
.pz-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.pz-xp { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--dog-brand); font-variant-numeric: tabular-nums; line-height: 1; }
.pz-xp small { margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--dog-muted); }
.pz-bar-row { display: flex; gap: 10px; align-items: center; }
.pz-bar-row .pz-bar { flex: 1; min-width: 40px; }
.pz-bar { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--dog-ink) 10%, transparent); overflow: hidden; }
.pz-bar span { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: linear-gradient(90deg, #4fae6c, var(--pz-good)); transition: width .8s cubic-bezier(.3, 1.2, .5, 1); }

.pz-meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--dog-muted); }
/* Back and Next: labelled, outlined buttons, so they read as controls. */
.pz-nav { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1.5px solid color-mix(in srgb, var(--dog-brand) 45%, transparent); border-radius: 999px; background: var(--dog-field); color: var(--dog-brand); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pz-nav svg { width: 15px; height: 15px; }
#pz-prev { padding-left: 8px; }
#pz-next { padding-right: 8px; }
.pz-nav:hover:not(:disabled) { border-color: var(--dog-accent); background: color-mix(in srgb, var(--dog-gold-soft) 18%, var(--dog-field)); }
.pz-nav:disabled { border-color: var(--dog-rule); color: color-mix(in srgb, var(--dog-muted) 45%, transparent); cursor: default; }
.pz-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-back { margin-left: auto; padding: 4px 0; white-space: nowrap; border: 0; background: none; color: var(--dog-brand); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pz-replay { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--dog-focus) 14%, transparent); color: var(--dog-brand); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pz-streak { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, #e8742b 15%, transparent); color: #b5531a; font-size: 12px; font-weight: 700; white-space: nowrap; }
html[data-sudoku-style="nocturne"] .pz-streak { color: #f0a06a; }

/* Number pad */
.pz-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.pz-pad button { min-height: 48px; border: 1px solid var(--dog-rule); border-radius: 9px; background: var(--dog-field); color: var(--dog-brand); font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; font-weight: 600; cursor: pointer; }
.pz-pad button:hover { border-color: var(--dog-accent); }
.pz-pad button:active { transform: translateY(1px); }
.pz-pad button:disabled { opacity: .35; cursor: default; }

.pz-foot { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.pz-timer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--dog-muted); font-variant-numeric: tabular-nums; }
.pz-timer svg { width: 15px; height: 15px; }
.pz-action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 18px; border: 1px solid var(--dog-rule); border-radius: 12px; background: var(--dog-field); color: var(--dog-ink); font-size: 16px; font-weight: 700; cursor: pointer; }
.pz-action:hover { border-color: var(--dog-accent); }
.pz-action small { font-weight: 600; color: var(--dog-muted); font-size: 12px; }
.pz-action svg { width: 20px; height: 20px; color: var(--dog-accent); }
.pz-action.is-primary { border-color: var(--pz-good); background: var(--pz-good); color: #fff; }
.pz-action.is-primary svg, .pz-action.is-primary small { color: inherit; }
.pz-action:disabled { opacity: .5; cursor: default; }
.pz-action[hidden] { display: none; }
/* One-trick play, once solved: Another (the same trick) and Next trick side
   by side, both filled so either reads as the way on. */
.pz-foot.is-choice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pz-foot.is-choice .pz-timer { display: none; }
.pz-action-alt { border-color: var(--dog-brand); background: var(--dog-brand); color: var(--dog-surface); }
.pz-action-alt:hover { border-color: var(--dog-brand); background: color-mix(in srgb, var(--dog-brand) 86%, var(--dog-accent)); }
.pz-action-alt svg, .pz-action-alt small { color: inherit; }
.pz-action-two { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; text-align: left; }
.pz-action .pz-action-two small { font-size: 12px; font-weight: 600; color: inherit; opacity: .88; }

/* Lesson page (lesson.html): the same board and panel as the game, with a
   four-part stepper, the demo at board size, and a recap card at the end. */
.ls [hidden] { display: none !important; }
/* The title and the four parts run across the top, so the panel keeps its
   room for the lesson itself; the board gives up a little height for it. */
.ls { --pz-board: min(644px, calc(100vw - 32px - 22px - 28px - 400px), calc(100vh - 214px)); row-gap: 18px; }
.ls-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
.ls-bar .ls-head { flex: none; gap: 14px; }
.ls-bar .ls-parts { flex: 1; }
.ls-show { display: flex; flex-direction: column; justify-content: center; width: calc(var(--pz-board) + 22px); min-height: calc(var(--pz-board) + 22px); box-sizing: border-box; padding: 24px 28px; border: 1px solid var(--dog-rule); border-radius: 16px; background: var(--dog-surface); box-shadow: 0 14px 34px -24px rgba(20, 48, 74, .55); }
.td-large { gap: 18px; }
.td-large .td-grid { border-width: 2px; border-radius: 12px; }
.td-large .td-step { font-size: 12px; }
.td-large .td-text { font-size: 18px; line-height: 1.45; }
.td-large .td-controls { justify-content: center; gap: 6px; }
.td-large .td-btn { width: 42px; height: 42px; }
.td-large .td-btn svg { width: 19px; height: 19px; }
.td-large .td-dot { width: 26px; height: 42px; }
.td-large .td-dot span { width: 9px; height: 9px; }
.ls-head .pz-title { gap: 10px; min-width: 0; }
.ls-head .pz-title h1 { font-size: 24px; line-height: 1.15; }
.ls-back { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--dog-rule); border-radius: 10px; color: var(--dog-brand); }
.ls-back:hover { border-color: var(--dog-accent); }
.ls-back svg { width: 18px; height: 18px; }
.ls-head-paws .pz-paw { width: 18px; height: 18px; }
.ls-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ls-part { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 40px; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--dog-rule); border-radius: 10px; background: var(--dog-field); color: var(--dog-muted); font: inherit; text-align: left; cursor: pointer; }
.ls-part:hover { border-color: var(--dog-accent); }
.ls-part:focus-visible { outline: 3px solid var(--dog-focus); outline-offset: 2px; }
.ls-part-num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--dog-muted) 18%, transparent); color: var(--dog-ink); font-size: 11px; font-weight: 800; }
.ls-part-num { flex: none; }
.ls-part-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.ls-part.is-done .ls-part-num { background: var(--pz-good); color: #fff; }
.ls-part.is-now { border-color: var(--dog-accent); background: color-mix(in srgb, var(--dog-gold-soft) 22%, var(--dog-field)); color: var(--dog-brand); }
.ls-part.is-now .ls-part-num { background: var(--dog-accent); color: var(--dog-field); }
.ls-rounds { display: flex; gap: 3px; margin-left: auto; }
.ls-round { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--dog-muted) 30%, transparent); }
.ls-round.is-done { background: var(--dog-accent); }
.ls-round.is-clean { background: var(--pz-good); }
.ls-round.is-now { box-shadow: 0 0 0 2px var(--dog-field), 0 0 0 3.5px var(--dog-accent); }
.ls-read { display: flex; flex-direction: column; gap: 6px; }
.ls-rule { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.28; color: var(--dog-brand); }
.ls-h { margin: 3px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dog-accent); }
.ls-why { margin: 0; font-size: 14px; line-height: 1.48; color: var(--dog-ink); }
.ls-tells { display: flex; flex-direction: column; gap: 3px; margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.42; color: var(--dog-ink); }
.ls-mixup { margin: 2px 0 0; padding: 8px 11px; border-radius: 10px; background: var(--pz-lesson-tint); font-size: 13px; line-height: 1.45; color: var(--dog-ink); }
.ls-mixup a, .ls-guide a { font-weight: 700; color: var(--dog-brand); text-underline-offset: 3px; }
.ls-guide { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--dog-muted); }
.ls-guide:empty { display: none; }
.ls-step-tag { margin-top: 3px !important; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dog-accent); }
.ls-step-tag:empty { display: none; }
.pz-bubble-extra[data-tone="bad"] { color: var(--pz-bad); }
.pz-bubble-extra[data-tone="good"] { color: var(--pz-good); font-weight: 650; }
.ls-panel .pz-pad { margin-top: auto; }
.ls-panel .pz-pad[hidden] + .ls-foot { margin-top: auto; }
.ls-foot { display: flex; gap: 10px; }
.ls-foot > .pz-action { flex: 1 1 0; min-width: 0; }
.ls-foot > .ls-help { flex: 0 0 38%; }
.pz-board.is-solved .pz-cell { cursor: default; }
.ls-done { gap: 18px; }
.ls-done-badge { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--pz-good); color: #fff; box-shadow: 0 6px 16px -8px rgba(47, 138, 79, .8); }
.ls-done-badge svg { width: 30px; height: 30px; }
.ls-recap { display: flex; flex-direction: column; gap: 7px; }
.ls-recap-rule { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--dog-brand); }
.ls-paws-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--dog-ink); }
.pz-practice { display: inline-flex; align-items: center; gap: 3px; }
.pz-practice.is-done svg { width: 13px; height: 13px; color: var(--pz-good); }

/* Phones: one column. The level badge, points bar and sound button share
   the top row (the nav already says Puzzles), the goal sits above the board,
   and the pad and Hint button sit under it. */
@media (max-width: 899px) {
  .pz { --pz-board: min(560px, calc(100vw - 24px - 22px)); grid-template-columns: auto minmax(0, 1fr) auto; justify-content: stretch; gap: 8px; padding: 10px 12px 28px; }
  .pz-panel, .pz-head, .pz-title { display: contents; }
  .pz-title h1, .pz-proto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #pz-level { grid-column: 1; grid-row: 1; align-self: center; }
  .pz-progress { grid-column: 2; grid-row: 1; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
  .pz-icons { grid-column: 3; grid-row: 1; align-self: center; }
  .pz-coach { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; min-height: 0; }
  .pz-stage { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .pz.is-summary .pz-stage { justify-self: stretch; }
  .pz-summary { width: 100%; min-height: 0; padding: 20px 16px 16px; gap: 16px; }
  .pz-summary-title { font-size: 26px; }
  .pz-summary-badge { min-width: 50px; height: 62px; font-size: 24px; }
  /* Stats stack as single lines on a phone: the number, then what it means. */
  .pz-summary-stats { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pz-stat { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 9px 12px; }
  .pz-stat strong { grid-row: span 2; font-size: 21px; white-space: nowrap; }
  .pz-stat small { grid-column: 2; }
  .pz.is-summary .pz-pad { display: none; }
  /* Lesson page on a phone: title and parts, then what to do, then the board. */
  .ls { grid-template-columns: minmax(0, 1fr); }
  .ls { row-gap: 10px; }
  .ls .ls-bar { grid-column: 1; grid-row: 1 / 3; flex-direction: column; align-items: stretch; gap: 10px; }
  .ls .pz-head { display: flex; }
  .ls .pz-title { display: flex; }
  .ls .pz-title h1 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: 21px; }
  .ls .ls-parts { gap: 4px; }
  .ls .ls-part { flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 7px; }
  .ls .ls-part-name { font-size: 11px; }
  .ls .ls-rounds { margin-left: 0; }
  .ls .ls-read, .ls .pz-coach { grid-column: 1; grid-row: 3; }
  .ls .pz-stage { grid-column: 1; grid-row: 4; justify-self: stretch; display: flex; flex-direction: column; align-items: center; }
  .ls .pz-pad { grid-column: 1; grid-row: 5; margin-top: 0; }
  .ls .pz-foot { grid-column: 1; grid-row: 6; margin-top: 0; }
  .ls-show { width: 100%; min-height: 0; padding: 18px 14px; }
  .ls .ls-done { width: 100%; }
  /* Trick rows on two lines: name and paws, then the record and buttons. */
  .pz-trick-list li:not(.is-compact) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name visual" "sub actions"; align-items: center; gap: 2px 10px; padding: 6px 6px 6px 12px; }
  .pz-trick-list li:not(.is-compact) .pz-trick-main { display: contents; }
  .pz-trick-line { grid-area: name; }
  .pz-trick-sub { grid-area: sub; }
  .pz-trick-list li:not(.is-compact) .pz-paws { grid-area: visual; justify-self: end; margin-right: 4px; }
  .pz-trick-actions { grid-area: actions; justify-self: end; }
  .pz-meta { grid-column: 1 / -1; grid-row: 4; margin-top: 0; justify-content: center; font-size: 12px; }
  .pz-pad { grid-column: 1 / -1; grid-row: 5; gap: 4px; }
  .pz-foot { grid-column: 1 / -1; grid-row: 6; }
  .pz-tag { min-width: 30px; height: 37px; padding-top: 8px; font-size: 14px; border-radius: 9px 9px 11px 11px; }
  .pz-tag::before { top: 4px; width: 6px; height: 6px; margin-left: -3px; }
  .pz-icon { width: 36px; height: 36px; }
  .pz-xp { font-size: 22px; }
  .pz-xp small { font-size: 11px; }
  .pz-coach::before { left: 49px; top: 16px; width: 12px; height: 12px; }
  .pz-dog { width: 44px; height: 44px; border-width: 2px; }
  .pz-bubble { min-height: 92px; padding: 10px 12px; border-radius: 12px; }
  .pz-lesson { margin: -10px -12px; }
  .pz-lesson-head { padding: 8px 12px; border-radius: 12px 12px 0 0; }
  .pz-lesson-body { padding: 10px 12px 4px; }
  .pz-lesson-name { font-size: 17px; }
  .pz-bubble-head { font-size: 15px; gap: 8px; }
  .pz-check { width: 20px; height: 20px; }
  .pz-bubble-text { margin-top: 5px !important; font-size: 14px; line-height: 1.5; }
  .pz-bubble-extra { margin-top: 5px !important; font-size: 12px; }
  .pz-note { font-size: 2.7cqw; }
  .pz-pad button { min-height: 44px; font-size: 21px; }
  .pz-nav { height: 30px; font-size: 12px; }
  .pz-action { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .pz *, .pz *::before, .pz *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}