:root {
  --bg: #f6f3ee;
  --paper: #ffffff;
  --soft: #faf8f4;
  --ink: #22302a;
  --muted: #4c5a52;
  --faint: #5f6a64; /* WCAG AA: 5:1 on the page background */
  --line: #e6e1d8;
  --accent: #4f7a5f;
  --accent-ink: #ffffff;
  --sage: #e3ece4;
  --peach: #fbe3d6;
  --peach-ink: #8f4527;
  --lilac: #e5e3f3;
  --found: #cfe5d5;
  --r-lg: 24px;
  --r-md: 16px;
  --font-body: "Lexend", "Lexend Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Young Serif", "Young Serif Fallback", Georgia, serif;
}
/* Fallback fonts sized to match Lexend and Young Serif, so the page does not jump when the web fonts
   finish loading (layout shift, "CLS"). Numbers measured from the font files against Arial and Times New Roman. */
@font-face { font-family: "Lexend Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); font-weight: 100 549; size-adjust: 110.82%; ascent-override: 90.23%; descent-override: 22.56%; line-gap-override: 0%; }
@font-face { font-family: "Lexend Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); font-weight: 550 900; size-adjust: 106.37%; ascent-override: 94.01%; descent-override: 23.5%; line-gap-override: 0%; }
@font-face { font-family: "Young Serif Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 126.32%; ascent-override: 82.8%; descent-override: 28.97%; line-gap-override: 0%; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { scrollbar-gutter: stable; } /* the page does not shift sideways when a scrollbar appears */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* header: stays at the top while scrolling (on phones it slides away going down and comes back going up) */
html { scroll-padding-top: calc(var(--head-h, 76px) + 12px); }
.site-head { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: box-shadow .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.site-head.stuck { box-shadow: 0 1px 0 var(--line), 0 8px 22px rgba(34, 48, 42, .08); }
.site-head.away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-head { transition: none; } }
/* header */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 25px; text-decoration: none; }
.logo-mark { width: 34px; height: 34px; border-radius: 12px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 17px var(--font-body); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; font-weight: 500; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); padding: 8px 14px; border-radius: 999px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--sage); color: var(--ink); }
.nav a.cta { background: var(--ink); color: #fff; margin-left: 6px; }

/* type */
h1, h2, h3 { line-height: 1.15; }
h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 48px); margin: 6px 0 12px; }
h2 { font-family: var(--font-head); font-weight: 400; font-size: 28px; margin: 44px 0 14px; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.lede { font-size: 19px; color: var(--muted); max-width: 720px; margin: 0 0 16px; }
.crumbs { font-size: 14px; color: var(--faint); margin-top: 18px; }
.crumbs a { color: var(--faint); display: inline-block; padding: 6px 0; }
.eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { background: var(--sage); border-radius: 999px; padding: 6px 13px; font-size: 15px; font-weight: 500; }

.is-hidden { display: none !important; }
.btn.mobile-dl { display: none; }
.skip:focus { left: 16px !important; top: 8px; background: #fff; padding: 8px 12px; z-index: 9; }

/* page frame with sidebar */
.frame { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
.sidebar { margin-top: 20px; align-self: start; background: var(--paper); border-radius: 22px; padding: 18px; position: sticky; top: calc(var(--head-h, 76px) + 12px); max-height: calc(100vh - var(--head-h, 76px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sidebar .eyebrow { display: block; margin: 16px 0 4px; padding: 16px 12px 0; border-top: 1px solid var(--line); color: var(--accent); }
.sidebar .eyebrow:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sidebar a { display: block; text-decoration: none; padding: 7px 12px; border-radius: 12px; color: var(--muted); font-size: 16px; }
.sidebar a:hover { color: var(--ink); background: var(--soft); }
.sidebar a[aria-current="page"] { background: var(--peach); color: var(--ink); font-weight: 600; }
.sidebar .lp { margin-top: 14px; background: var(--sage); color: var(--ink); font-weight: 600; }

/* buttons & controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--paper); color: var(--ink);
  font: 600 15px var(--font-body); padding: 12px 18px; border-radius: 999px; cursor: pointer; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: none; font-size: 17px; padding: 15px 20px; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.dark { background: var(--ink); color: #fff; box-shadow: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #f1eee8; border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: transparent; font: 500 15px var(--font-body); padding: 9px 6px; min-height: 40px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.links { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.links button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.links a { color: var(--muted); }

/* puzzle area */
.puzzle-area { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
.panel { background: var(--paper); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { font-size: 15px; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 15px; color: var(--muted); margin: 0; }
.meta dt { color: var(--faint); }
.meta dd { margin: 0; color: var(--ink); font-weight: 500; }
.preview-thumb { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.related a { display: block; text-decoration: none; background: var(--soft); padding: 10px 12px; border-radius: 12px; font-size: 15px; }
.related a + a { margin-top: 8px; }
.related a.lp { background: var(--sage); }

.sheet { background: var(--paper); border-radius: 26px; padding: 26px; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sheet-title { font-family: var(--font-head); font-size: 24px; margin: 0; }
.namedate { font-size: 13px; color: var(--faint); }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; align-items: start; }
.board { container-type: inline-size; position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; background: var(--soft); border-radius: 16px; padding: 8px; }
.board svg.marks { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; }
.grid { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); width: 100%; height: 100%; }
.grid span { display: flex; align-items: center; justify-content: center; font-weight: 600; text-transform: uppercase; user-select: none; cursor: pointer; line-height: 1; min-width: 0; min-height: 0; overflow: hidden;
  font-size: calc(100cqw / var(--n) * 0.6); border-radius: 8px; }
.grid.large span { font-size: calc(100cqw / var(--n) * 0.66); font-weight: 700; }
.grid span.pick { background: var(--peach); }
.wordbank h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.wordbank ul { list-style: none; padding: 0; margin: 0; }
.wordbank li { font-weight: 500; font-size: 18px; padding: 3px 0; }
.wordbank li.done { text-decoration: line-through; color: var(--faint); }
.wordbank.large li { font-size: 21px; font-weight: 600; }
.sheet-foot { margin-top: 14px; font-size: 12px; color: var(--faint); text-align: right; }
.play-note { font-size: 15px; color: var(--faint); margin: 10px 4px 0; }
.answers { margin-top: 20px; }
.answers[hidden] { display: none; }

/* ad slots: reserved space so the page doesn't jump when ads load */
.ad-slot { display: none; }
.ads-on .ad-slot { display: block; min-height: 280px; margin: 28px 0; }

/* steps, faq, cards */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--paper); border-radius: 22px; padding: 20px; }
.step .num { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 10px; background: var(--sage); }
.step:nth-child(2) .num { background: var(--peach); }
.step:nth-child(3) .num { background: var(--lilac); }
.step p { margin: 0; color: var(--muted); font-size: 16px; }
.faq details { background: var(--paper); border-radius: 18px; padding: 16px 18px; }
.faq details + details { margin-top: 10px; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq p { margin: 8px 0 0; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.card { display: block; background: var(--paper); border-radius: 20px; padding: 16px 18px; text-decoration: none; }
.card:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.card p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.prose { max-width: 740px; }
.cards.audience { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cards.audience .card { padding: 20px; }
.prose p, .prose li { color: var(--muted); }
.hero { padding: 26px 0 6px; max-width: 820px; }
.hero h1 { font-size: clamp(36px, 6vw, 58px); }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }

/* maker */
.maker { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.maker .panel label { font-weight: 600; font-size: 14px; }
.maker input[type=text], .maker textarea { width: 100%; font: 16px var(--font-body); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.maker textarea { min-height: 220px; resize: vertical; }
.note { font-size: 14px; color: var(--faint); margin: 0; }
.warn { font-size: 14px; color: #9a3412; margin: 0; }
.warn:empty { display: none; }

/* footer */
.site-foot { margin-top: 70px; padding: 28px 0 44px; color: var(--faint); font-size: 14px; border-top: 1px solid var(--line); }
.site-foot nav { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-bottom: 8px; }
.site-foot nav a { display: inline-block; padding: 10px 0; }
.site-foot a { color: var(--muted); }

@media (max-width: 1000px) {
  .frame { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .puzzle-area { grid-template-columns: 1fr; }
  .btn.mobile-dl { display: flex; width: 100%; margin-bottom: 14px; }
}
@media (max-width: 680px) {
  .sheet { padding: 10px; border-radius: 20px; }
  .board { padding: 4px; }
  .board svg.marks { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .sheet-head { padding: 6px 6px 0; }
  .wordbank { padding: 0 6px 6px; }
  .sheet-body { grid-template-columns: 1fr; }
  .wordbank ul { columns: 2; }
  .steps { grid-template-columns: 1fr; }
  .maker { grid-template-columns: 1fr; }
  .nav a { padding: 7px 10px; font-size: 14px; }
  .nav a.cta { margin-left: 2px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 6px; scrollbar-width: none; }
  .nav a { white-space: nowrap; }
  .hide-sm { display: none; }
  .nav a.cta { display: none; }
  .site-head .wrap { min-height: 64px; }
}

@media print {
  @page { size: letter; margin: 0.5in; }
  body { background: #fff; }
  .site-head, .site-foot, .sidebar, .no-print, .crumbs, .chips, h1, .lede, .content, .ad-slot, .play-note, .side { display: none !important; }
  .frame, .puzzle-area, .maker { display: block !important; }
  .mobile-dl, .btn { display: none !important; }
  .maker .sheet, .maker .board { width: 100%; }
  .sheet { padding: 0; border-radius: 0; }
  .sheet-body { grid-template-columns: 1fr; }
  .board { max-width: 6.4in; margin: 0 auto; background: none; }
  .grid span { font-size: calc(6.2in / var(--n) * 0.5); }
  .grid.large span { font-size: calc(6.2in / var(--n) * 0.72); }
  .grid span.pick, .grid span.found { background: none; }
  .wordbank ul { columns: 3; }
  .wordbank.large ul { columns: 2; }
  .wordbank li.done { text-decoration: none; color: inherit; }
  .answers { break-before: page; margin-top: 0; }
  svg.marks line { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- crossword ---------- */
.xboard { container-type: inline-size; width: 100%; max-width: 640px; margin: 0 auto; }
.xgrid { display: grid; grid-template-columns: repeat(var(--w), 1fr); width: 100%; }
.xgrid > span { aspect-ratio: 1; position: relative; }
.x-cell { background: #fff; }
.xgrid { position: relative; }
/* grid lines = cell borders (even thickness at every zoom); see edgeCls() in src/crossword-pages.js */
/* Fallback lines (no JavaScript). app.js replaces them with a pixel-exact overlay (.snapped + svg.xsnap). */
.x-cell { --lw: 1.5px; border: 0 solid #1d2722; border-right-width: var(--lw); border-bottom-width: var(--lw); }
.x-cell.bl { border-left-width: var(--lw); } .x-cell.bt { border-top-width: var(--lw); }
.lpx .x-cell { --lw: 2px; border-color: #111; }
.xgrid.snapped .x-cell { border-width: 0; }
.xsnap { position: absolute; pointer-events: none; overflow: visible; z-index: 2; }
.x-cell b { position: absolute; top: 1px; left: 3px; font-size: max(9px, calc(100cqw / var(--w) * 0.26)); font-weight: 600; line-height: 1; color: var(--muted); pointer-events: none; z-index: 1; }
.x-cell input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; text-align: center; padding-top: calc(100cqw / var(--w) * 0.12);
  font: 600 calc(100cqw / var(--w) * 0.56) var(--font-body); color: var(--ink); text-transform: uppercase; caret-color: transparent; border-radius: 0; }
.x-cell input:focus { outline: none; }
.x-cell.hl { background: #eef4ef; }
.x-cell.focus { background: var(--peach); }
.x-cell.right input { color: #2f7a4d; }
.x-cell.wrong { background: #fde2dc; }
.x-cell i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; font-size: calc(100cqw / var(--w) * 0.5); padding-top: calc(100cqw / var(--w) * 0.14); color: #a5462a; }
.clues { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.clues h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.clues ul { list-style: none; margin: 0; padding: 0; }
.clues li { display: grid; grid-template-columns: 2em 1fr; padding: 4px 0; font-size: 16px; line-height: 1.45; }
.clues .n { font-weight: 700; }
.clues .len { white-space: nowrap; }
.clues .len { color: var(--faint); font-size: 14px; }
.xbank { margin-top: 16px; background: var(--soft); border-radius: 14px; padding: 12px 16px; }
.xbank h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.xbank p { margin: 4px 0 0; font-weight: 500; line-height: 1.8; }
.xbank[hidden] { display: none; }
@media (max-width: 680px) { .clues { grid-template-columns: 1fr; } }
@media print {
  .x-cell.hl, .x-cell.focus, .x-cell.wrong { background: #fff; }
  .x-cell input { color: transparent; }
  .clues li { font-size: 10.5pt; padding: 1px 0; }
  .xboard { max-width: 5.2in; }
  .clues { margin-top: 10px; gap: 14px; }
  .clues li { line-height: 1.3; }
  .xbank, .x-cell b { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 680px) { .btn, .seg button { min-height: 46px; } .seg button { font-size: 16px; } }
@media (max-width: 680px) { .links button, .links a { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---------- bingo ---------- */
.bingo-sheet { padding: 22px; }
.bc { container-type: inline-size; width: 100%; max-width: 560px; margin: 0 auto; }
.bc-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--font-head); font-size: calc(100cqw * 0.05); margin-bottom: 8px; }
.bc-title span { font: 400 14px var(--font-body); color: var(--faint); }
.bc-head { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--accent); color: #fff; border: 2px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; }
.bc-head span { text-align: center; font: 700 calc(100cqw / 5 * 0.5) var(--font-body); line-height: 1.4; }
.bc-grid { display: grid; grid-template-columns: repeat(var(--s), 1fr); background: #fff; border: 2px solid var(--ink); }
.bc-grid .bc-cell { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bc-grid .bc-cell.lc { border-right: 0; }
.bc-grid .bc-cell.lr { border-bottom: 0; }
.bc-head + .bc-grid { border-radius: 0 0 12px 12px; overflow: hidden; }
.bc-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3%; background: #fff; overflow: hidden; cursor: pointer; user-select: none; }
.bc-cell b { font-weight: 600; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: manual; font-size: calc(100cqw / var(--s) * var(--k, 0.2)); }
.bc-free { background: #e4efe6; cursor: default; }
.bc-free b { color: #2f5a3f; }
.bc-cell.marked { background: var(--peach); position: relative; }
.bc-cell.marked::after { content: ""; position: absolute; inset: 14%; border: 4px solid rgba(165, 70, 42, .55); border-radius: 50%; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.field select { font: 16px var(--font-body); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.panel h3 + .field { margin-top: -4px; }
.wordlist { columns: 3 180px; list-style: none; padding: 0; margin: 0 0 8px; font-size: 16px; }
.wordlist li { padding: 3px 0; break-inside: avoid; }
.blank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 8px 0 24px; }
.blank-grid .panel p { margin: 0; font-size: 15px; }
.blank-prev .bc { max-width: 100%; }
.bc { position: relative; }
.bc-snap { position: absolute; pointer-events: none; overflow: visible; color: var(--ink); z-index: 2; }
.bc.snapped .bc-grid, .bc.snapped .bc-head, .bc.snapped .bc-cell { border-color: transparent; }
.blank-prev .bc-cell { cursor: default; }
.patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.pattern { margin: 0; background: var(--paper); border-radius: 18px; padding: 16px; text-align: center; }
.pattern svg { width: 110px; height: 110px; }
.pattern figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.pattern figcaption span { font-size: 14px; color: var(--muted); }
.caller { position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.caller-top { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.caller-now { font-family: var(--font-head); font-size: clamp(44px, 11vw, 140px); text-align: center; background: var(--paper); border-radius: 26px; padding: 30px 16px; line-height: 1.1; }
.caller-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.caller-btns .btn { min-width: 180px; font-size: 20px; }
.caller-count { text-align: center; color: var(--muted); margin: 0; }
.caller-board { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.caller-board span { background: var(--paper); border-radius: 10px; padding: 8px 12px; font-size: 16px; color: var(--faint); }
.caller-board span.on { background: var(--accent); color: #fff; font-weight: 600; }
#bingo-print { display: none; }
@media print {
  body.bingo-printing > *:not(#bingo-print) { display: none !important; }
  body.bingo-printing #bingo-print { display: block; }
  #bingo-print .bp-page { height: 9.9in; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; break-after: page; }
  #bingo-print .bp-2 .bc { width: 4.1in; max-width: none; }
  #bingo-print .bp-1 .bc { width: 7in; max-width: none; }
  #bingo-print .bc-head, #bingo-print .bc-free { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #bingo-print .bp-call { justify-content: flex-start; }
  #bingo-print .bp-call ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-top: 1px dashed #999; border-left: 1px dashed #999; }
  #bingo-print .bp-call li { border-right: 1px dashed #999; border-bottom: 1px dashed #999; padding: 8px; text-align: center; font-weight: 600; }
  .bingo-sheet .bc { max-width: 6.5in; }
  .bc-cell.marked { background: #fff; }
  .bc-cell.marked::after { display: none; }
}

/* ---------- search + puzzle of the day ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav { margin-left: auto; }
.search-link { order: 3; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 999px; background: var(--paper); }
.search-link:hover, .search-link[aria-current="page"] { background: var(--sage); }
.searchbox { display: flex; gap: 8px; max-width: 640px; margin: 18px 0 6px; }
.searchbox input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 12px 18px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); }
.searchbox input:focus { outline: none; border-color: var(--accent); }
.searchbox.big input { font-size: 19px; padding: 14px 20px; }
.sr { max-width: 760px; }
.sr:empty { display: none; }
.sr-count, .sr-none { color: var(--muted); margin: 10px 0 8px; }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sr-list a { display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: 16px; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.sr-list a:hover { background: var(--sage); }
.sr-list img, .sr-noimg { width: 52px; height: 67px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); flex-shrink: 0; background: var(--soft); }
.sr-list strong { display: block; font-size: 18px; font-weight: 600; }
.sr-make { background: var(--soft); border: 1px dashed var(--line); border-radius: 16px; padding: 14px 16px; margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sr-make p { width: 100%; margin: 0 0 4px; }
.potd { margin: 18px 0 8px; }
.potd-link { display: flex; gap: 20px; align-items: center; background: var(--paper); border-radius: 22px; padding: 16px 20px; text-decoration: none; color: var(--ink); max-width: 640px; }
.potd-link img { width: 120px; height: auto; aspect-ratio: 150 / 194; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 8px; flex-shrink: 0; }
.potd-link strong { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 400; margin: 2px 0 4px; }
.potd-meta { display: block; color: var(--muted); margin-bottom: 12px; }
.potd-link:hover strong { text-decoration: underline; }
@media (max-width: 680px) {
  .search-link { order: 2; margin-left: auto; padding: 10px 12px; }
  .site-head .nav { order: 3; margin-left: 0; }
  .searchbox .btn { padding-left: 16px; padding-right: 16px; }
  .potd-link { gap: 14px; padding: 12px 14px; }
  .potd-link img { width: 88px; }
  .potd-link strong { font-size: 21px; }
}
@media print { .search-link, .searchbox, .sr, .potd, .hsearch { display: none !important; } }
.hsearch { position: fixed; z-index: 60; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 40px rgba(34, 48, 42, .16); padding: 8px; animation: hs-open .2s cubic-bezier(.2, .8, .2, 1); }
.hsearch.hs-closing { animation: hs-close .13s ease-in forwards; }
@keyframes hs-open { from { clip-path: inset(0 0 calc(100% - 68px) 0 round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes hs-close { from { clip-path: inset(0 0 0 0 round 16px); opacity: 1; } to { clip-path: inset(0 0 calc(100% - 68px) 0 round 16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hsearch, .hsearch.hs-closing { animation: none; } }
.hsearch[hidden] { display: none; }
.site-head .search-link.is-open, .site-head .search-link.is-open:hover { background: var(--accent); color: #fff; }
.hsearch-box { display: flex; align-items: center; gap: 4px; min-height: 52px; background: var(--sage); border-radius: 12px; padding: 0 4px 0 16px; color: var(--ink); }
.hsearch-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 18px; padding: 12px 0; color: var(--ink); outline: none; }
.hsearch-box input::-webkit-search-cancel-button { display: none; }
.hsearch-x { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.hsearch-x:hover, .hsearch-x:focus-visible { background: var(--paper); }
.hsearch .sr { max-width: none; padding: 0 2px 2px; }
.hsearch .sr-count, .hsearch .sr-none { font-size: 15px; margin: 12px 8px 6px; color: var(--muted); }
.hsearch .sr-list { gap: 0; }
.hsearch .sr-list li + li { border-top: 1px solid var(--line); }
.hsearch .sr-list a { display: block; min-height: 60px; padding: 10px; border-radius: 10px; background: transparent; }
.hsearch .sr-list a:hover, .hsearch .sr-list a:focus { background: var(--soft); outline: none; }
.hsearch .sr-list a:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.hsearch .sr-list img, .hsearch .sr-noimg { display: none; }
.hsearch .sr-list .eyebrow { display: block; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.hsearch .sr-list strong { font-size: 17.5px; line-height: 1.35; }
.hsearch .sr-pop { flex-direction: column; gap: 0; margin: 0; }
.hsearch .sr-pop a { background: none; border-radius: 10px; padding: 12px 10px; font-size: 17.5px; }
.hsearch .sr-pop a + a { border-top: 1px solid var(--line); border-radius: 0; }
.hsearch .sr-pop a:hover, .hsearch .sr-pop a:focus { background: var(--soft); outline: none; }
.hsearch .sr-pop a:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.hsearch .sr-more { margin: 10px 10px 6px; font-size: 17px; }
.hsearch .sr-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.sr-noimg { display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--sage) !important; border-color: transparent !important; }
.sr-noimg svg { width: 60%; height: 60%; }
.sr-pop { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sr-pop a { background: var(--paper); border-radius: 999px; padding: 8px 14px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15px; }
.sr-pop a:hover { background: var(--sage); }
.sr-more { margin: 10px 0 0; }
@media (max-width: 680px) { .bingo-sheet { padding: 10px 8px; } }
.bc-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* home: hero text + puzzle of the day side by side, rows of cards fill the full width */
.home-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.home-top .hero { max-width: none; }
.home-top .potd { margin: 0; }
.home-top .potd-link { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; max-width: none; }
.home-top .potd-link img { width: 100%; max-width: 220px; align-self: center; }
.cards.audience { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
  .home-top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .home-top .potd-link { flex-direction: row; align-items: center; }
  .home-top .potd-link img { width: 88px; align-self: auto; }
}
@media (max-width: 760px) { .cards.audience { grid-template-columns: 1fr; } }
/* touch screens of any size (iPad, tablets): every control at least 44px tall */
@media (pointer: coarse) {
  .btn, .seg button { min-height: 46px; }
  .links button, .links a, main button { min-height: 44px; display: inline-flex; align-items: center; }
}
/* medium screens: keep the search button next to the logo instead of on its own row */
@media (min-width: 681px) and (max-width: 1000px) {
  .search-link .hide-sm { display: none; }
  .search-link { order: 2; margin-left: auto; }
  .site-head .nav { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; justify-content: space-between; }
  .site-head .nav a { padding: 8px 10px; white-space: nowrap; }
  .site-head .nav .cta .hide-sm { display: none; }
}
/* makers: form above the puzzle on tablets, so the preview grid gets the full width */
@media (max-width: 1000px) { .maker { grid-template-columns: minmax(0, 1fr); } }
/* large print crosswords: bigger clue text on screen */
.lpx .clues li { font-size: 19px; line-height: 1.45; }
.lpx .clues .len { font-size: 16px; }
@media print { .lpx .clues li { font-size: 14pt; } }
/* Print uses the plain borders: the pixel-snapped overlays are drawn for the screen layout only. */
@media print {
  .xsnap, .bc-snap { display: none !important; }
  .xgrid { width: 100% !important; margin: 0 !important; }
  .xgrid.snapped .x-cell { border-right-width: var(--lw); border-bottom-width: var(--lw); }
  .xgrid.snapped .x-cell.bl { border-left-width: var(--lw); }
  .xgrid.snapped .x-cell.bt { border-top-width: var(--lw); }
  .bc.snapped .bc-grid, .bc.snapped .bc-head, .bc.snapped .bc-cell { border-color: #1d2722; }
  .bc.snapped { left: 0 !important; top: 0 !important; }
}

/* ---------- sudoku ---------- */
.sboard { container-type: inline-size; width: 100%; max-width: 600px; margin: 0 auto; }
.sgrid { display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; position: relative; background: #fff; color: #1d2722; }
.sgrid .sc { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; font: 600 calc(100cqw / 9 * 0.56) var(--font-body); line-height: 1;
  border: 0 solid #1d2722; border-right-width: 1px; border-bottom-width: 1px; }
/* fallback lines (no JavaScript / printing): thick every third line */
.sgrid .sc:nth-child(9n+1) { border-left-width: 3px; }
.sgrid .sc:nth-child(3n) { border-right-width: 3px; }
.sgrid .sc:nth-child(-n+9) { border-top-width: 3px; }
.sgrid .sc:nth-child(n+19):nth-child(-n+27), .sgrid .sc:nth-child(n+46):nth-child(-n+54), .sgrid .sc:nth-child(n+73):nth-child(-n+81) { border-bottom-width: 3px; }
.sgrid.snapped .sc { border-color: transparent; }
.sgrid .ssnap { position: absolute; pointer-events: none; overflow: visible; color: #1d2722; z-index: 2; }
.sgrid .sc.giv { color: #1d2722; font-weight: 700; }
.sgrid .sc input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; text-align: center;
  font: 500 calc(100cqw / 9 * 0.56) var(--font-body); color: #2f5a8a; caret-color: transparent; border-radius: 0; }
.sgrid .sc input:focus { outline: none; }
.sgrid .sc.hl { background: #eef4ef; }
.sgrid .sc.focus { background: var(--peach); }
.sgrid .sc.right input { color: #2f7a4d; }
.sgrid .sc.wrong { background: #fde2dc; }
.snote { text-align: center; color: var(--muted); margin: 14px 0 0; font-size: 16px; }
.sudoku-tool .seg { grid-auto-columns: auto; }
.sep { border: 0; border-top: 1px solid #e6e1d8; margin: 4px 0; width: 100%; }
.fld { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.fld select { font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid #cfc8bb; background: #fff; }
.ltable { width: 100%; max-width: 740px; border-collapse: collapse; font-size: 15px; margin-bottom: 8px; }
.ltable th, .ltable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e6e1d8; vertical-align: top; }
.ltable th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ltable td:first-child { font-weight: 600; white-space: nowrap; }
.steps-list { max-width: 740px; color: var(--muted); padding-left: 22px; }
.steps-list li { margin-bottom: 6px; }
.pdf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 8px; }
.pdf-card { display: flex; flex-direction: column; gap: 6px; background: var(--paper); border-radius: 20px; padding: 12px; text-decoration: none; color: var(--ink); }
.pdf-card img { width: 100%; height: auto; border-radius: 8px; border: 1px solid #e6e1d8; background: #fff; }
.pdf-card .pc-t { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pdf-card .pc-t svg { flex-shrink: 0; }
.pdf-card .pc-n { font-size: 14px; color: var(--muted); }
.pdf-card:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (max-width: 680px) { .ltable { font-size: 14px; } .ltable th, .ltable td { padding: 8px 6px; } .ltable td:first-child { white-space: normal; } }
#sudoku-print { display: none; }
@media print {
  .sgrid .ssnap { display: none !important; }
  .sgrid { width: 100% !important; margin: 0 !important; }
  .sgrid.snapped .sc { border-color: #1d2722; }
  .sgrid .sc.hl, .sgrid .sc.focus, .sgrid .sc.wrong { background: #fff; }
  .sboard { max-width: 6.8in; }
  .snote { display: none; }
  body.sudoku-printing > *:not(#sudoku-print) { display: none !important; }
  body.sudoku-printing #sudoku-print { display: block; }
  #sudoku-print .sp-page { height: 10in; display: flex; flex-direction: column; break-after: page; font-family: var(--font-body); color: #111; }
  #sudoku-print .sp-page:last-child { break-after: auto; }
  #sudoku-print .sp-top { display: flex; justify-content: space-between; border-bottom: 3px solid #111; padding-bottom: 6px; margin-bottom: 14pt; font-size: 12pt; }
  #sudoku-print .sp-top b { font-size: 18pt; }
  #sudoku-print .sp-items { display: grid; justify-content: center; align-content: start; gap: 16pt 24pt; flex: 1; }
  #sudoku-print .sp-2 .sp-items { grid-template-columns: auto; }
  #sudoku-print .sp-4 .sp-items, #sudoku-print .sp-ans .sp-items { grid-template-columns: auto auto; }
  #sudoku-print .sp-lab { font-size: 11pt; font-weight: 700; margin-bottom: 4pt; }
  #sudoku-print .sp-foot { font-size: 9pt; color: #555; text-align: right; }
  #sudoku-print .pgrid { display: grid; grid-template-columns: repeat(9, var(--c)); grid-template-rows: repeat(9, var(--c)); border: 3pt solid #111; }
  #sudoku-print .sp-1 .pgrid { --c: 58pt; }
  #sudoku-print .sp-2 .pgrid { --c: 31pt; }
  #sudoku-print .sp-4 .pgrid { --c: 27pt; }
  #sudoku-print .sp-ans .pgrid { --c: 20pt; border-width: 2pt; }
  #sudoku-print .pgrid span { display: flex; align-items: center; justify-content: center; border-right: 1pt solid #111; border-bottom: 1pt solid #111; font-size: calc(var(--c) * 0.6); }
  #sudoku-print .pgrid span:nth-child(9n) { border-right: 0; }
  #sudoku-print .pgrid span:nth-child(n+73) { border-bottom: 0; }
  #sudoku-print .pgrid span.br { border-right-width: 3pt; }
  #sudoku-print .pgrid span.bb { border-bottom-width: 3pt; }
  #sudoku-print .pgrid.ans span.br { border-right-width: 2pt; }
  #sudoku-print .pgrid.ans span.bb { border-bottom-width: 2pt; }
  #sudoku-print .pgrid .g { font-weight: 700; }
  #sudoku-print .pgrid .a { color: #a5462a; }
}
/* narrow desktops: keep logo, menu and search on one row */
@media (min-width: 1001px) and (max-width: 1240px) {
  .search-link .hide-sm { display: none; }
  .site-head .nav a { padding: 8px 10px; }
}

/* "choose a kind of puzzle" cards with a sheet preview */
.kind-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 8px; }
.kind-card { display: flex; flex-direction: column; background: var(--paper); border-radius: 20px; padding: 14px; text-decoration: none; color: var(--ink); }
.kind-card img { width: 100%; height: 190px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.kind-card .kc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px 4px; }
.kind-card strong { font-size: 19px; }
.kind-card .kc-meta { color: var(--accent); font-weight: 600; font-size: 15px; }
.kind-card .kc-text { color: var(--muted); font-size: 16px; line-height: 1.5; }
.kind-card:hover strong { text-decoration: underline; }
@media (max-width: 680px) { .kind-card img { height: 160px; } }

/* score keeper (score sheets) */
.score-tool { margin: 6px 0 22px; }
.score-sheet { max-width: 900px; }
.stable-wrap { overflow-x: auto; }
/* room for the score table before score.js draws it, so the buttons below do not jump (layout shift) */
.score-tool[data-game="canasta"] .stable-wrap { min-height: 478px; }
.score-tool[data-game="rummy"] .stable-wrap { min-height: 397px; }
.score-tool[data-game="gin"] .stable-wrap { min-height: 578px; }
.stable { width: 100%; border-collapse: collapse; font-size: 17px; }
.stable th, .stable td { border: 1px solid #cfc8bb; text-align: center; padding: 0; }
.stable thead th { background: var(--soft); font-size: 15px; font-weight: 600; padding: 6px 4px; }
.stable td.n, .stable th.n { width: 110px; min-width: 110px; color: var(--muted); font-size: 15px; background: var(--soft); white-space: nowrap; padding: 0 8px; }
.stable input { width: 100%; min-width: 64px; height: 48px; border: 0; background: transparent; font: inherit; font-size: 26px; font-weight: 500; text-align: center; color: var(--ink); }
.stable input:focus { outline: 3px solid var(--accent); outline-offset: -3px; background: #fff; }
.stable input.nm { font-weight: 600; font-size: 16px; height: 40px; border-bottom: 1px dashed #b9b2a5; }
.stable td.hc { font-size: 20px; color: var(--muted); }
.stable.canasta td.hc, .stable.canasta th.hc, .stable.canasta td.t, .stable.gin tbody td.t { width: 88px; }
.stable td.t { font-weight: 600; font-size: 24px; background: #f7f5f0; min-width: 64px; }
.stable tfoot td { border-top: 3px solid var(--ink); font-weight: 700; height: 50px; font-size: 22px; }
.stable tfoot tr + tr td { border-top: 1px solid #cfc8bb; font-weight: 500; font-size: 16px; }
.stable tfoot tr.fin td { border-top: 2px solid var(--ink); font-weight: 700; font-size: 22px; }
.stable td.lead { background: var(--sage); }
.stable td.won { background: var(--accent); color: #fff; }
.stable tr.meld td { font-size: 15px; color: var(--muted); font-weight: 500; }
.stable.canasta tbody td.sep, .stable.canasta thead tr:first-child th:nth-child(2) { border-right: 3px solid var(--ink); }
.stable.gin tbody td:nth-child(3) { border-right: 3px solid var(--ink); }
.score-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin-top: 12px; }
.score-actions .fld { margin: 0; }
.score-actions input { font: inherit; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; width: 120px; }
.linkbtn { background: none; border: 0; padding: 10px 4px; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 44px; }
@media print {
  .score-tool .sheet { box-shadow: none; border: 0; }
  .stable input { height: 30px; }
}
@media print { main:has(.score-tool) > h2, main:has(.score-tool) > .pdf-cards { display: none !important; } }
.frame > main { min-width: 0; } /* wide tables scroll inside their box instead of widening the page */
.stable-wrap { max-width: 100%; }
@media (max-width: 680px) {
  .stable { font-size: 16px; }
  .stable input { min-width: 40px; font-size: 20px; }
  .stable td.hc { font-size: 15px; min-width: 34px; }
  .stable td.n, .stable th.n { width: 44px; min-width: 44px; font-size: 13px; white-space: normal; padding: 0 2px; }
  .stable td.t { font-size: 17px; }
  .stable tfoot td { font-size: 19px; }
  .stable thead th { font-size: 13px; padding: 5px 2px; }
  .stable input.nm { font-size: 14px; }
  .stable td.t { min-width: 40px; }
}
@media (max-width: 480px) { .stable.canasta input { font-size: 18px; } }
/* "checks at a glance" cards on /how-we-make-puzzles/ */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 8px; }
.hw-check { display: block; background: var(--paper); border-radius: 16px; padding: 16px 18px 16px 52px; position: relative; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.hw-check::before { content: ""; position: absolute; left: 16px; top: 17px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; }
.hw-check b { display: block; font-size: 17px; margin-bottom: 3px; }
.hw-check span { display: block; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.hw-check:hover b { text-decoration: underline; }
.hw-check:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
/* in-page jumps from the "checks at a glance" cards: smooth scroll, then a short highlight on the section title */
@media (prefers-reduced-motion: no-preference) {
  html:has(.checks) { scroll-behavior: smooth; }
}
html:has(.checks) { scroll-padding-top: calc(var(--head-h, 76px) + 32px); }
@media (prefers-reduced-motion: no-preference) {
  main.prose h2[id]:target { animation: pk-target 2.4s ease-out 0.3s both; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { main.prose h2[id]:target { background: var(--sage); box-shadow: 0 0 0 10px var(--sage); border-radius: 10px; } }
@keyframes pk-target {
  0%, 35% { background: var(--sage); box-shadow: 0 0 0 10px var(--sage); }
  100% { background: transparent; box-shadow: 0 0 0 10px transparent; }
}
/* daily puzzles: /today/ and /sudoku-of-the-day/ */
.today-date { font-size: 18px; font-weight: 600; color: var(--accent); margin: -6px 0 10px; }
.pack { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; background: var(--paper); border-radius: 22px; padding: 22px 26px; margin: 18px 0 22px; box-shadow: inset 0 0 0 1px var(--line); }
.pack h2 { margin: 0 0 8px; font-size: 22px; }
.pack-list { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.7; }
.pack-go { max-width: 330px; }
.pack-go .btn { width: 100%; justify-content: center; font-size: 17px; padding: 15px 20px; }
.pack-go .note { margin: 10px 0 0; }
.streak { margin: 12px 0 0; font-weight: 600; color: var(--accent); }
.today-cards { grid-template-columns: repeat(3, 1fr); }
.today-cards .card img { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 12px; box-shadow: 0 0 0 1px var(--line); }
.today-cards .card p a { font-weight: 600; }
.daynav { display: flex; gap: 8px; flex-wrap: wrap; }
.daynav .btn { flex: 1; justify-content: center; white-space: nowrap; }
.daynav .btn[disabled] { opacity: .45; cursor: default; }
.potd-more { display: inline-block; margin-top: 10px; font-weight: 600; }
@media (max-width: 760px) { .pack { grid-template-columns: 1fr; } .pack-go { max-width: none; } .today-cards { grid-template-columns: 1fr; } .today-cards .card img { max-width: 220px; } }
#sudoku-print .dp-sub { display: none; }
@media print {
  #sudoku-print .dp-sub { display: block; font-size: 11pt; color: #444; margin: -6pt 0 12pt; }
  #sudoku-print .dp-g { position: relative; width: 6.2in; height: 6.2in; margin: 0 auto; border: 2px solid #1d2722; border-radius: 10px; }
  #sudoku-print .dp-g svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  #sudoku-print .dp-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); }
  #sudoku-print .dp-cells span { display: flex; align-items: center; justify-content: center; line-height: 1; overflow: hidden; font-weight: 700; font-size: calc(6.2in / var(--n) * 0.72); }
  #sudoku-print .dp-key { width: 3.4in; height: 3.4in; }
  #sudoku-print .dp-key .dp-cells span { font-size: calc(3.4in / var(--n) * 0.62); }
  #sudoku-print .dp-bank { margin-top: 18pt; }
  #sudoku-print .dp-bh { font-size: 10pt; letter-spacing: .12em; text-transform: uppercase; color: #555; margin-bottom: 6pt; }
  #sudoku-print .dp-bank ul { list-style: none; margin: 0; padding: 0; columns: 2; font-size: 17pt; line-height: 1.55; }
  #sudoku-print .dp-bank li::before { content: "\2610  "; color: #777; }
  #sudoku-print .dp-rule { font-size: 12pt; text-align: center; margin: 14pt 0 10pt; }
  #sudoku-print .dp-ansgrid { display: grid; grid-template-columns: auto auto; gap: 24pt; justify-content: center; align-content: start; flex: 1; }
  #sudoku-print .dp-sud { display: flex; flex-direction: column; gap: 14pt; }
  #sudoku-print .dp-ans .pgrid { --c: 20pt; border-width: 2pt; }
  #sudoku-print .dp-ans .pgrid span.br { border-right-width: 2pt; }
  #sudoku-print .dp-ans .pgrid span.bb { border-bottom-width: 2pt; }
  #sudoku-print .dp-g svg line { stroke: #f3c3ab; }
  #sudoku-print .dp-g, #sudoku-print .dp-g svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.daynav .btn[hidden], .linkbtn[hidden], .streak[hidden] { display: none !important; }
.today-more { margin: 14px 0 0; font-size: 16px; color: var(--muted); }
.img-cards .card img { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 12px; box-shadow: 0 0 0 1px var(--line); }
/* mazes */
.maze-board { touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; max-width: 640px; margin: 0 auto; }
.maze-board svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.panel .check { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 12px 0 4px; cursor: pointer; }
.panel .check input { width: 20px; height: 20px; }
#maze-print { display: none; }
@media print {
  body.maze-printing > *:not(#maze-print) { display: none !important; }
  body.maze-printing #maze-print { display: block; }
  #maze-print .mp-page { height: 10in; display: flex; flex-direction: column; break-after: page; font-family: var(--font-body); color: #111; }
  #maze-print .mp-page:last-child { break-after: auto; }
  #maze-print .mp-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid #111; padding-bottom: 6px; font-size: 12pt; }
  #maze-print .mp-top b { font-size: 18pt; }
  #maze-print .mp-sub { font-size: 10pt; color: #444; margin: 6pt 0 12pt; }
  #maze-print .mp-maze { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  #maze-print .mp-maze svg { width: 100%; height: 100%; }
  #maze-print .mp-foot { font-size: 9pt; color: #555; text-align: right; }
  .maze-tool .maze-trail { display: none; }
}
/* maze: "You made it!" window */
/* "You did it!" window after a won game (window.pkWin in app.js) */
.pkw { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(29, 39, 34, 0); transition: background .28s ease; }
.pkw.on { background: rgba(29, 39, 34, .45); }
.pkw-card { position: relative; width: min(430px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; background: var(--paper); border-radius: 24px; padding: 26px 24px 20px; text-align: center; color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); opacity: 0; transform: scale(.88) translateY(14px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.15); }
.pkw.on .pkw-card { opacity: 1; transform: none; }
.pkw-card:focus { outline: none; }
.pkw.off .pkw-card { transition-duration: .2s; transform: scale(.96) translateY(8px); }
.pkw-card > :not(.pkw-conf) { position: relative; z-index: 1; }
.pkw-conf { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pkw-c { position: absolute; display: block; opacity: 0; transform: rotate(var(--r)); }
.pkw-c0 { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--c); }
.pkw-c1 { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pkw-c2 { width: 12px; height: 4px; border-radius: 2px; background: var(--c); }
.pkw-c3 { width: 13px; height: 13px; background: var(--c); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pkw.on .pkw-c { animation: pkw-fly .9s cubic-bezier(.15, .7, .3, 1) calc(.12s + var(--d)) forwards; }
@keyframes pkw-fly { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotate(var(--r)); } }
.pkw .pkw-card > .pkw-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: var(--accent); color: #fff; font: inherit; font-size: 28px; line-height: 44px; cursor: pointer; box-shadow: 0 3px 10px rgba(79, 122, 95, .35); transition: background .15s ease, transform .15s ease; z-index: 2; }
.pkw .pkw-card > .pkw-x:hover { background: #3f6650; transform: scale(1.06); }
.pkw .pkw-card > .pkw-x:focus-visible { outline: 3px solid #e8b04a; outline-offset: 3px; border-radius: 50%; }
.pkw-medal { display: block; margin: 0 auto; width: 86px; height: 98px; }
.pkw.on .pkw-medal { animation: pkw-medal .7s cubic-bezier(.2, .9, .3, 1.3) .05s both; }
@keyframes pkw-medal { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.08) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.pkw-card h2 { font-size: 30px; margin: 6px 0 10px; }
.pkw-card.soft h2 { margin-top: 34px; padding: 0 44px; }
.pkw-card .pkw-note { margin: -2px 0 16px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.pkw-stats { display: flex; justify-content: center; gap: 10px; margin: 0 0 16px; }
.pkw-stat { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; padding: 8px 14px; min-width: 96px; }
.pkw-stat b { display: block; font-size: 22px; line-height: 1.3; }
.pkw-stat span { font-size: 13px; color: var(--muted); }
.pkw-next { display: flex; gap: 14px; align-items: center; text-align: left; background: var(--sage); border-radius: 16px; padding: 12px; margin-bottom: 12px; color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.pkw-next:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79, 122, 95, .2); }
.pkw-next img { width: 64px; height: 83px; flex: none; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); background: #fff; object-fit: cover; }
.pkw-next small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.pkw-next b { display: block; font-size: 18px; line-height: 1.3; margin: 2px 0 8px; }
.pkw-next .btn { min-height: 40px; padding: 8px 16px; }
.pkw-row { display: flex; gap: 10px; }
.pkw-row .btn { flex: 1; justify-content: center; min-height: 50px; }
@media (max-height: 640px) { .pkw-card { padding: 18px 18px 16px; } .pkw-medal { width: 64px; height: 73px; } .pkw-card h2 { font-size: 26px; margin: 2px 0 8px; } .pkw-stats { margin-bottom: 12px; } .pkw-row .btn { min-height: 46px; } }
.pkw.calm, .pkw.calm .pkw-card { transition: none; }
.pkw.calm .pkw-c, .pkw.calm .pkw-medal { animation: none !important; opacity: 1; }
@media print { .pkw { display: none !important; } }
.board .grid { -webkit-user-select: none; user-select: none; }