: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: 30px; height: 34px; display: block; flex-shrink: 0; }
.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: 228px minmax(0, 1fr); gap: 26px; }
@media (max-width: 1200px) { .frame { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; } } /* narrow desktops: the puzzle keeps its room */
.sidebar { scrollbar-gutter: stable; margin-top: 20px; align-self: start; background: var(--paper); border-radius: 22px; padding: 18px; position: sticky; top: calc(var(--head-h, 76px) + 20px); /* = its resting place under the header, so the menu never shifts between pages */ max-height: calc(100vh - var(--head-h, 76px) - 32px); 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; }
/* group names of a section (Holidays, Seasons… on the word search and crossword menus) look like the ones inside folders */
.sidebar .eyebrow:not(:first-child) { margin: 18px 0 6px; padding: 5px 10px; border-top: 0; border-radius: 8px; background: var(--sage); color: #2f5b40; font-weight: 700; }
.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); }
/* the open page and its folders stand out without a heavier font: bold text is wider and would wrap the line differently,
   so the menu would shift from page to page (owner's note, 24.10); a faint text shadow thickens the letters in place */
.sidebar a[aria-current="page"] { background: var(--peach); color: var(--ink); text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }
.sidebar a.here { background: var(--peach); color: var(--ink); text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }
/* group names inside a folder (Holidays, Seasons…): green and readable like the section names (owner's note, 25.10) */
.sidebar .sub-h { display: block; margin: 16px 0 6px 4px; padding: 5px 10px; border-radius: 8px; background: var(--sage); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #2f5b40; }
.sidebar .sub > .sub-h:first-child { margin-top: 8px; }
.sidebar .sub { margin: 2px 0 8px 14px; padding-left: 6px; border-left: 2px solid var(--line); }
.sidebar .sub a { font-size: 15px; padding: 5px 10px; }
.sidebar a.open { color: var(--ink); text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }
.sidebar .sn-row { display: flex; align-items: flex-start; gap: 2px; }
.sidebar .sn-row > a { flex: 1 1 auto; min-width: 0; }
.sidebar .sn-tog { flex: none; position: relative; width: 30px; height: 30px; margin-top: 3px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.sidebar .sn-tog:hover, .sidebar .sn-tog:focus-visible { background: var(--soft); color: var(--ink); }
.sidebar .sn-tog::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.sidebar .sn-tog[aria-expanded="false"]::before { transform: translate(-70%, -50%) rotate(-45deg); }
/* folders open and close smoothly: the row height goes from 0 to its content; closed lists are not reachable with Tab */
.sidebar .sub-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--fold, .32s) cubic-bezier(.4, 0, .2, 1); }
.sidebar .sub-wrap.is-open { grid-template-rows: 1fr; }
.sidebar .sub-clip { min-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity calc(var(--fold, .32s) * .7) ease, visibility 0s linear var(--fold, .32s); }
.sidebar .sub-wrap.is-open > .sub-clip { visibility: visible; opacity: 1; transition: opacity var(--fold, .32s) ease .04s, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .sidebar .sub-wrap, .sidebar .sub-clip, .sidebar .sn-tog::before { transition: none; } }
.sidebar.in-section a[aria-current="page"] { background: none; color: var(--muted); text-shadow: none; }
.sidebar.in-section a[aria-current="page"]:hover { background: var(--soft); color: var(--ink); }
.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); }
/* sudoku panels have three links: one per line reads better than three wrapped ones side by side */
.sudoku-tool .links, .mini-sudoku-tool .links, .logic-tool .links { flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 680px) { .sudoku-tool .links, .mini-sudoku-tool .links, .logic-tool .links { gap: 0; } }

/* 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); }

/* word searches on narrow desktops and tablets held sideways (1001–1199px, an iPad is 1024): with the left menu, the
   grid, its word list and the side panel side by side left the grid 180–380px wide (letters under 10px at 1001px).
   Here the side panel goes under the puzzle, as on tablets, and the grid is never taller than the screen. */
@media (min-width: 1001px) and (max-width: 1199px) {
  .puzzle-area[data-puzzle] { grid-template-columns: minmax(0, 1fr); }
  .puzzle-area[data-puzzle] .btn.mobile-dl { display: flex; width: 100%; margin-bottom: 14px; }
  .puzzle-area[data-puzzle]:not(.giant) .board { max-width: min(620px, max(360px, calc(100vh - 190px))); }
}
@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; }
  /* one sheet of paper, with room to spare on Letter and A4 (owner's note 25.10: "Print this page" gave a second,
     almost empty sheet with only the footer line on it) */
  .board { max-width: 6in; margin: 0 auto; background: none; }
  .grid span { font-size: calc(6in / var(--n) * 0.5); }
  .grid.large span { font-size: calc(6in / var(--n) * 0.72); }
  .sheet-head { margin-bottom: 10px; }
  .wordbank li { padding: 1px 0; }
  .sheet-foot { margin-top: 6px; }
  .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; }
.xprint { display: none; }
.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; }
  .xboard ~ .sheet-foot, .clues ~ .sheet-foot { margin-top: 4px; }
  .xbank { margin-top: 10px; padding: 8px 14px; } .xbank p { line-height: 1.5; }
  .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(4, 1fr); }
@media (max-width: 1100px) { .cards.audience { grid-template-columns: repeat(2, 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; line-height: 1.25; padding: 0 0 2px; } .lpx .sheet-foot { margin-top: 6px; } .lpx .xbank { margin-top: 10px; padding: 8px 14px; } .lpx .xbank p { line-height: 1.6; } }
/* Print uses the plain borders: the pixel-snapped overlays are drawn for the screen layout only. */
@media print {
  .xsnap, .bc-snap { display: none !important; }
  /* every square draws its own outline centered on its edge, so shared edges and the outer edge are the same
     width and every line meets its neighbor exactly (cell borders sit inside one square only and drift apart);
     the grid is never taller than 4.4in, so the clues and the word bank fit on the same sheet */
  .xgrid { width: min(100%, calc(4.4in * var(--w) / var(--h))) !important; margin: 0 auto !important; }
  .xgrid .x-cell, .xgrid.snapped .x-cell { border-width: 0 !important; background: transparent; }
  .xgrid:has(svg.xprint) .x-cell { outline: 0; }
  .xprint { display: block !important; position: absolute; pointer-events: none; z-index: 2;
    left: calc(100% / var(--w) * -0.045); top: calc(100% / var(--h) * -0.045); width: calc(100% * (1 + 0.09 / var(--w))); height: calc(100% * (1 + 0.09 / var(--h))); }
  .lpx .xprint { left: calc(100% / var(--w) * -0.055); top: calc(100% / var(--h) * -0.055); width: calc(100% * (1 + 0.11 / var(--w))); height: calc(100% * (1 + 0.11 / var(--h))); }
  .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; }
/* mini sudoku (4x4, 6x6): box lines drawn with borders */
.mboard { container-type: inline-size; width: 100%; max-width: 480px; margin: 0 auto; }
.mgrid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: 100%; background: #fff; color: #1d2722; border: 4px solid #1d2722; }
.mgrid .mc { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; font: 700 calc(100cqw / var(--n) * 0.5) var(--font-body); line-height: 1; border: 0 solid #1d2722; border-right-width: 1px; border-bottom-width: 1px; }
.mgrid.m4 .mc:nth-child(2n) { border-right-width: 4px; }
.mgrid.m4 .mc:nth-child(n+5):nth-child(-n+8) { border-bottom-width: 4px; }
.mgrid.m6 .mc:nth-child(3n) { border-right-width: 4px; }
.mgrid.m6 .mc:nth-child(n+7):nth-child(-n+12), .mgrid.m6 .mc:nth-child(n+19):nth-child(-n+24) { border-bottom-width: 4px; }
.mgrid.m4 .mc:nth-child(4n), .mgrid.m6 .mc:nth-child(6n) { border-right-width: 0; }
.mgrid.m4 .mc:nth-child(n+13), .mgrid.m6 .mc:nth-child(n+31) { border-bottom-width: 0; }
.mgrid .mc input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; text-align: center; font: 500 calc(100cqw / var(--n) * 0.5) var(--font-body); color: #2f5a8a; caret-color: transparent; border-radius: 0; }
.mgrid .mc input:focus { outline: none; }
.mgrid .mc.hl { background: #eef4ef; }
.mgrid .mc.focus { background: var(--peach); }
.mgrid .mc.right input { color: #2f7a4d; }
.mgrid .mc.wrong { background: #fde2dc; }
@media print { .mgrid .mc.hl, .mgrid .mc.focus, .mgrid .mc.wrong { background: #fff; } .mboard { max-width: 6in; } }
/* trivia quiz */
.quiz-body { padding: 6px 4px 4px; }
.quiz-q { font-family: var(--font-head); font-size: clamp(24px, 3.2vw, 32px); line-height: 1.25; margin: 6px 0 20px; min-height: 2.5em; }
.quiz-opts { display: grid; gap: 12px; }
.quiz-opt { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 12px 18px; border: 2px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); font: 500 21px/1.3 var(--font-body); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.quiz-opt b { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); color: var(--accent); font-size: 19px; }
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); }
.quiz-opt:active:not(:disabled) { transform: scale(.99); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.right { border-color: #2f7a4d; background: #e3f1e7; }
.quiz-opt.right b { background: #2f7a4d; color: #fff; }
.quiz-opt.wrong { border-color: #c0573a; background: #fde2dc; }
.quiz-opt.wrong b { background: #c0573a; color: #fff; }
.quiz-say { font-size: 19px; margin: 16px 0 12px; color: var(--muted); min-height: 1.6em; }
.quiz-next { width: 100%; justify-content: center; min-height: 54px; font-size: 18px; }
.quiz-score { font-size: 18px; margin: 0 0 12px; } .quiz-score b { font-size: 28px; color: var(--accent); }
.qlist { padding-left: 1.6em; max-width: 760px; }
.qlist li { margin-bottom: 18px; font-size: 18px; }
.qlq { margin: 0 0 4px; font-weight: 600; }
.qlo { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--muted); }
.qla summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 16px; min-height: 32px; display: inline-flex; align-items: center; }
.qla p { margin: 2px 0 0; font-weight: 700; }
@media (max-width: 680px) { .quiz-opt { font-size: 19px; min-height: 60px; } }
@media print { .trivia-tool { display: none; } }
/* logic grid puzzles */
.logic-intro { font-size: 17px; margin: 4px 0 8px; }
.logic-clues { font-size: 17px; line-height: 1.5; padding-left: 1.4em; margin: 0 0 16px; }
.logic-tool > div, .logic-sheet { min-width: 0; }
.logic-grid { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table.lg { border-collapse: collapse; margin: 0 auto; background: #fff; --c: 40px; }
table.lg th, table.lg td { border: 1px solid #9aa39d; padding: 0; }
table.lg .lg-corner { border: 0; background: transparent; }
table.lg .lg-cat { font-size: 14px; font-weight: 700; background: var(--sage); padding: 4px 6px; text-align: center; color: var(--ink); }
table.lg .lg-side span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; }
table.lg .lg-col { height: 92px; vertical-align: bottom; font-size: 14px; font-weight: 500; }
table.lg .lg-col span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; padding: 6px 0; }
table.lg .lg-row { font-size: 15px; font-weight: 500; text-align: left; padding: 0 10px; white-space: nowrap; }
table.lg td { width: var(--c); height: var(--c); }
table.lg td button { width: 100%; height: 100%; min-width: var(--c); min-height: var(--c); border: 0; background: transparent; font: 700 20px/1 var(--font-body); color: var(--ink); cursor: pointer; padding: 0; }
table.lg td.mx button { color: #a5462a; }
table.lg td.mo button { color: #2f7a4d; font-size: 24px; }
table.lg td.wrong { background: #fde2dc; }
table.lg td button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 4px; }
table.lg .lg-end { border-right: 3px solid #1d2722; }
table.lg tr.lg-endrow th, table.lg tr.lg-endrow td { border-bottom: 3px solid #1d2722; }
.logic-swipe { display: none; text-align: center; font-size: 14px; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 680px) { .logic-swipe { display: block; } }
.logic-answer { margin-top: 16px; }
table.la { border-collapse: collapse; margin: 0 auto; font-size: 16px; }
table.la th, table.la td { border: 1px solid var(--line); padding: 6px 12px; text-align: left; }
table.la th { background: var(--sage); }
.chk { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 12px 0; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
@media (max-width: 680px) { table.lg { --c: 40px; } table.lg .lg-col { height: 80px; font-size: 13px; } table.lg .lg-row { font-size: 14px; padding: 0 6px; } .logic-clues, .logic-intro { font-size: 16px; } }
@media print { .logic-tool .snote, .logic-tool .logic-answer { display: none; } }
.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; }
.table-wrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 560px) { .mtable th:nth-child(4), .mtable td:nth-child(4) { display: none; } .mtable th, .mtable td { padding: 9px 8px; } }
.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 .pc-view { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; border-radius: 10px; }
.pdf-card .pc-view:hover img { box-shadow: 0 0 0 2px var(--accent); }
.pdf-card .pc-view:hover .pc-t { text-decoration: underline; }
.pc-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.pc-acts .btn { flex: 1 1 0; padding: 10px 8px; font-size: 15px; min-height: 44px; }
.pc-acts .btn svg { flex-shrink: 0; }
@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: 100; 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; }
/* memory game: cards turn over in 3D; matched pairs stay up with a green edge */
.mem-sheet { min-width: 0; }
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 4px; }
.mem-grid.c6 { grid-template-columns: repeat(6, 1fr); }
.mcard { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; border-radius: 14px; font: inherit; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.mem-grid.words .mcard { aspect-ratio: 4 / 3; }
.mc-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.mcard.up .mc-in { transform: rotateY(180deg); }
.mc-back, .mc-face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.mc-back { background: var(--accent) repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 8px, transparent 8px 16px); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 2px 6px rgba(34,48,42,.15); }
.mc-back::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); }
.mc-face { transform: rotateY(180deg); background: #fff; border: 2px solid var(--line); box-shadow: 0 2px 6px rgba(34,48,42,.12); padding: 10%; }
.mc-face svg { width: 100%; height: 100%; }
.mc-w { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; font-weight: 600; font-size: clamp(16px, 4.4vw, 22px); line-height: 1.15; overflow: hidden; }
.mem-grid.words .mc-face { padding: 6px; }
.mcard:hover:not(.up) .mc-back { filter: brightness(1.08); }
.mcard:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mcard.done { cursor: default; }
.mcard.done .mc-face { border-color: #2f7a4d; background: #eef7f0; box-shadow: 0 0 0 2px #2f7a4d; animation: mem-pop .4s ease .3s; }
.mcard.miss .mc-face { border-color: #c0573a; background: #fff4f0; }
@keyframes mem-pop { 50% { transform: rotateY(180deg) scale(1.07); } }
.mem-moves { font-size: 18px; margin: 0; } .mem-moves b { font-size: 28px; color: var(--accent); }
.mem-lv { margin-top: -4px; }
.pair-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; }
.pair-list li { background: var(--paper); border-radius: 12px; padding: 10px 14px; font-size: 18px; font-weight: 500; }
.pair-list li span { color: var(--accent); font-weight: 700; padding: 0 2px; }
@media (max-width: 560px) { .mem-grid { gap: 8px; } .mem-grid.c6 { grid-template-columns: repeat(4, 1fr); } .mem-grid.words, .mem-grid.words.c6 { grid-template-columns: repeat(3, 1fr); } .mcard, .mc-back, .mc-face { border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .mc-in { transition: none; } .mcard.done .mc-face { animation: none; } }
@media print { .memory-tool { display: none; } }
/* coloring pages: gallery cards and the online coloring window */
.cp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.cp-jump a { background: var(--paper); border-radius: 999px; padding: 8px 16px; text-decoration: none; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; }
.cp-jump a:hover { background: var(--sage); }
@media (max-width: 560px) { .cp-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .cp-jump::-webkit-scrollbar { display: none; } .cp-jump a { flex: none; } }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 10px; }
.cp-card { margin: 0; background: var(--paper); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cp-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
.cp-grid.geo .cp-card img { aspect-ratio: 750 / 950; }
.cp-grid.geo.land .cp-card img { aspect-ratio: 1427 / 1102; }
.cp-grid.geo.land { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cp-card figcaption { font-weight: 600; font-size: 16px; }
.cp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.cp-acts .btn { padding: 8px 6px; font-size: 15px; justify-content: center; min-height: 44px; }
@media (max-width: 560px) { .cp-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cp-card { padding: 8px; border-radius: 14px; } .cp-acts { grid-template-columns: 1fr; } .cp-card figcaption { font-size: 14px; } }
html.pkc-open { overflow: hidden; }
.pkc { position: fixed; inset: 0; z-index: 95; display: none; place-items: center; padding: 12px; background: rgba(29, 39, 34, .55); }
.pkc.on { display: grid; animation: pkc-fade .25s ease; }
.pkc-card { width: min(1180px, 100%); height: min(860px, calc(100dvh - 24px)); background: var(--paper); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.3); animation: pkc-up .35s cubic-bezier(.2, .9, .3, 1.1); }
.pkc-card:focus { outline: none; }
.pkc.calm, .pkc.calm .pkc-card { animation: none; }
@keyframes pkc-fade { from { background: rgba(29, 39, 34, 0); } }
@keyframes pkc-up { from { opacity: 0; transform: scale(.94) translateY(12px); } }
.pkc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 8px 20px; border-bottom: 1px solid var(--line); }
.pkc-head h2 { font-size: 22px; margin: 0; }
.pkc-x { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.pkc-x:hover { background: #3f6650; }
.pkc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; }
.pkc-art { min-height: 0; padding: 14px; display: flex; align-items: center; justify-content: center; background: #f1eee8; overflow: auto; touch-action: manipulation; }
.pkc-art svg { width: 100%; height: 100%; max-height: 100%; background: #fff; border-radius: 6px; }
.pkc-art .r { cursor: pointer; transition: fill .15s; }
.pkc-art .pkc-pop { animation: pkc-pop .3s ease; transform-box: fill-box; transform-origin: center; }
@keyframes pkc-pop { 40% { opacity: .55; } }
.pkc-load { color: var(--muted); font-size: 18px; }
.pkc-side { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; border-left: 1px solid var(--line); }
.pkc-pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pkc-sw { aspect-ratio: 1; min-height: 40px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); background: var(--c); cursor: pointer; padding: 0; transition: transform .12s; }
.pkc-sw[aria-checked="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); transform: scale(1.06); }
.pkc-sw[data-c="#ffffff"] { background: #fff repeating-linear-gradient(45deg, transparent 0 5px, #e6e1d8 5px 7px); }
.pkc-hint { margin: 0; color: var(--muted); font-size: 16px; }
.pkc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pkc-btns .btn { justify-content: center; min-height: 46px; }
.pkc-pdf { font-size: 15px; color: var(--accent); font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .pkc { padding: 0; }
  .pkc-card { height: 100dvh; width: 100%; border-radius: 0; }
  .pkc-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .pkc-art { padding: 6px; }
  .pkc-side { border-left: 0; border-top: 1px solid var(--line); padding: 10px 12px 12px; gap: 8px; overflow: visible; }
  .pkc-pal { grid-template-columns: repeat(9, 1fr); gap: 6px; }
  .pkc-sw { min-height: 32px; }
  .pkc-hint { font-size: 14px; min-height: 2.5em; line-height: 1.25; } /* fixed height: the drawing must not jump when the hint changes */
  .pkc-btns { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pkc-btns .btn { font-size: 14px; padding: 6px 4px; min-height: 44px; }
  .pkc-pdf { display: none; }
  .pkc-head h2 { font-size: 18px; }
}
@media print {
  html.pkc-open body > :not(.pkc) { display: none !important; }
  html.pkc-open .pkc { position: static; display: block; background: none; padding: 0; }
  html.pkc-open .pkc-card { box-shadow: none; height: auto; width: 100%; border-radius: 0; animation: none; }
  html.pkc-open .pkc-head, html.pkc-open .pkc-side { display: none; }
  html.pkc-open .pkc-body { display: block; }
  html.pkc-open .pkc-art { background: none; padding: 0; display: block; }
  html.pkc-open .pkc-art svg { width: 100%; height: auto; max-height: 9.6in; }
  .cp-acts { display: none; }
}
/* big view of one coloring page */
.cp-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; }
.cp-zoom img { transition: transform .2s ease; }
.cp-zoom:hover img { transform: scale(1.03); }
.pkv { position: fixed; inset: 0; z-index: 94; display: none; place-items: center; padding: 12px; background: rgba(29, 39, 34, .6); }
.pkv.on { display: grid; animation: pkc-fade .25s ease; }
.pkv-card { width: min(860px, 100%); height: min(940px, calc(100dvh - 24px)); background: var(--paper); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.3); animation: pkc-up .35s cubic-bezier(.2, .9, .3, 1.1); }
.pkv-card:focus { outline: none; }
.pkv.calm, .pkv.calm .pkv-card { animation: none; }
.pkv .pkc-head h2 { flex: 1; }
.pkv-n { color: var(--muted); font-size: 15px; white-space: nowrap; }
.pkv-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 12px 64px; background: #f1eee8; }
.pkv-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 4px 18px rgba(34,48,42,.12); }
.pkv-stage img.in { animation: pkv-in .3s ease; }
@keyframes pkv-in { from { opacity: .3; transform: scale(.97); } }
.pkv-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); font-size: 34px; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.18); z-index: 1; }
.pkv-arr:hover { background: var(--sage); }
.pkv-arr.prev { left: 8px; } .pkv-arr.next { right: 8px; }
.pkv-acts { display: flex; gap: 10px; justify-content: center; padding: 12px; border-top: 1px solid var(--line); }
.pkv-acts .btn { min-height: 48px; min-width: 160px; justify-content: center; }
@media (max-width: 760px) {
  .pkv { padding: 0; }
  .pkv-card { height: 100dvh; width: 100%; border-radius: 0; }
  .pkv-stage { padding: 8px 8px 64px; }
  .pkv-arr { top: auto; bottom: 10px; transform: none; width: 46px; height: 46px; }
  .pkv-acts .btn { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .pkv-stage img.in { animation: none; } .cp-zoom img { transition: none; } }
@media print { .pkv { display: none !important; } }
/* color by number: numbered swatches, highlighted spaces, a gentle "no" */
.pkc-pal.num .pkc-sw { display: grid; place-items: center; font: 700 16px var(--font-body); }
.pkc-art .r.hl { fill: url(#pkhl); }
.pkc-art text { transition: opacity .2s; }
.pkc-art .pkc-no { animation: pkc-no .35s ease; transform-box: fill-box; transform-origin: center; }
@keyframes pkc-no { 25% { transform: translateX(-3%); } 75% { transform: translateX(3%); } }
.cp-card figcaption small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
/* 100-word puzzles: theme buttons above the puzzle; wrap onto two rows on small screens */
.theme-seg { display: flex; flex-wrap: wrap; gap: 4px; border-radius: 18px; margin: 4px 0 18px; }
.theme-seg button { flex: 1 1 auto; }
/* giant 30 × 30 grid (100-word puzzles): full width, cells never smaller than ~20px so letters stay readable;
   on narrow screens the grid scrolls sideways inside the sheet and the word list goes underneath */
.giant .sheet-body { grid-template-columns: 1fr; overflow-x: auto; }
.giant .board { width: 622px; max-width: none; }
.giant .wordbank ul { columns: 4; }
.giant-note { display: none; font-size: 15px; color: var(--muted); margin: 0 0 8px; }
@media (max-width: 760px) { .giant-note { display: block; } }
@media (max-width: 560px) { .giant .wordbank ul { columns: 2; } }
@media print { .giant .sheet-body { overflow: visible; } .giant .board { width: 100%; max-width: 6.4in; } .giant .grid span { font-size: calc(6.4in / 30 * 0.6); } .giant .wordbank ul { columns: 6; font-size: 9pt; line-height: 1.3; } .giant .wordbank li { padding: 0; } .giant-note { display: none; } }
.giant > div, .giant .sheet { min-width: 0; }
/* ---------- word scramble ---------- */
.scr-say { margin: 0 0 14px; color: var(--muted); font-size: 16px; min-height: 2.6em; }
.scr-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 14px; } .scr-tools .btn { padding: 10px 16px; }
.scr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 6px; }
.scr-list li { display: grid; grid-template-columns: 30px 1fr; grid-template-areas: "n m" "n i" "n a"; align-items: center; column-gap: 6px; padding: 8px 10px; border-radius: 14px; }
.scr-n { grid-area: n; font-weight: 600; color: var(--faint); align-self: start; padding-top: 2px; }
.scr-mix { grid-area: m; font: 700 21px/1.3 var(--font-body); letter-spacing: .2em; color: var(--ink); overflow-wrap: anywhere; }
.scr-in { grid-area: i; width: 100%; min-height: 46px; margin-top: 4px; font: 600 19px var(--font-body); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.scr-in:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--sage); }
.scr-ans { grid-area: a; font-size: 15px; color: var(--peach-ink); font-weight: 600; letter-spacing: .08em; margin-top: 3px; }
.scr-list li.ok { background: var(--found); }
.scr-list li.ok .scr-in { border-color: var(--accent); background: #f3faf5; }
.scr-list li { position: relative; }
.scr-list li.ok::after { content: "\2713"; position: absolute; right: 12px; top: 6px; color: var(--accent); font-weight: 700; font-size: 20px; }
.scr-list li.no .scr-in { border-color: #d9a07f; }
.scr-bank { margin-top: 20px; border: 2px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.scr-bank b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 6px; }
.scr-bank div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px; font-size: 16px; }
.scr-bank .used { text-decoration: line-through; color: var(--faint); }
.scr-key ol { columns: 2; column-gap: 28px; margin: 12px 0 0; padding-left: 26px; }
.scr-key li { break-inside: avoid; padding: 3px 0; } .scr-key li span { letter-spacing: .08em; color: var(--muted); }
.scr-key { background: var(--paper); border-radius: 18px; padding: 16px 18px; } .scr-key summary { cursor: pointer; font-weight: 600; }
.scr-card img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 8px; }
.scr-dl { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; font-size: 15px; }
.scr-feature { display: flex; gap: 14px; align-items: center; margin: 0 0 18px; color: var(--ink); text-decoration: none; }
.scr-feature img { width: 72px; height: auto; border-radius: 6px; border: 1px solid var(--line); flex-shrink: 0; }
.scr-feature b { display: block; font-size: 18px; } .scr-feature span span { display: block; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .scr-list { grid-template-columns: 1fr; } .scr-bank div { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .scr-bank div { grid-template-columns: 1fr 1fr; } .scr-key ol { columns: 1; } }
@media print {
  .scr-say { display: none; }
  .scr-list { grid-template-columns: 1fr 1fr !important; column-gap: 0.4in; row-gap: 0; }
  .scr-list li { padding: 2pt 0; break-inside: avoid; }
  .scr-mix { font-size: 14pt; }
  .scr-in, .scr-in:focus { border: 0; border-bottom: 1.2px solid #333; border-radius: 0; min-height: 0; height: 20pt; margin-top: 2pt; padding: 0 4pt; background: none; box-shadow: none; outline: none; font-size: 12pt; }
  .scr-bank { break-inside: avoid; margin-top: 12pt; padding: 8pt 12pt; }
  /* answers shown: print each answer on its own line, like a filled-in answer key, so the sheet stays one page */
  .answers-on .scr-ans:not([hidden]) { grid-area: i; align-self: end; margin: 0; padding: 0 4pt 3pt; font-size: 12pt; height: auto !important; opacity: 1 !important; position: relative; z-index: 1; }
  .answers-on .scr-in { color: transparent; }
  .scr-list li.ok { background: none; } .scr-list li.ok::after { content: none; }
  .scr-bank div { grid-template-columns: repeat(5, 1fr) !important; font-size: 11pt; } .scr-bank .used { text-decoration: none; color: inherit; }
}

/* ---------- cryptograms ---------- */
.crypto-seg { margin-bottom: 14px; }
.cr-puzzle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 6px 0 4px; }
.cw { display: inline-flex; gap: 4px; align-items: flex-end; }
.cl { display: inline-flex; flex-direction: column; align-items: center; width: 34px; }
.ci { width: 34px; height: 40px; padding: 0; text-align: center; font: 700 21px var(--font-body); text-transform: uppercase; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 8px; caret-color: var(--accent); }
.ci:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--sage); }
.cl b { font: 600 16px/1.4 var(--font-body); color: var(--muted); letter-spacing: .02em; }
.cl.same .ci { background: #f3faf5; }
.cl.given .ci { background: var(--paper); border-color: transparent; color: var(--accent); }
.cl.dup .ci { border-color: #d9a07f; background: #fff4ec; }
.cp { font: 700 22px var(--font-body); padding-bottom: 26px; }
.cr-src { margin: 14px 0 0; font-style: italic; color: var(--muted); font-size: 17px; }
.cr-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.crypto-tool.solved .ci { border-color: var(--accent); background: #f3faf5; }
.ci { transition: color .16s ease, border-color .2s ease, background-color .2s ease; }
.ci.fade { color: transparent; }
.ci.pop { animation: ciPop .34s ease both; animation-delay: var(--d, 0ms); }
@keyframes ciPop { from { color: transparent; transform: translateY(4px); } }
.crypto-tool.answered .cl:not(.given) .ci { color: var(--peach-ink); border-color: #e6cdb9; }
@media (prefers-reduced-motion: reduce) { .ci, .ci.pop { transition: none; animation: none; } }
.scr-key li span { font-style: italic; }
@media (max-width: 420px) { .cl, .ci { width: 28px; } .ci { height: 36px; font-size: 18px; } .cw { gap: 3px; } .cr-puzzle { gap: 12px 14px; } .cl b { font-size: 14px; } }
@media print {
  .ci { border: 0; border-bottom: 1.3px solid #222; border-radius: 0; background: none !important; }
  .crypto-seg, .cr-tools { display: none; }
}

/* ---------- weekly activity pack ---------- */
.pack-now { background: var(--paper); border-radius: 22px; padding: 18px 22px; margin: 6px 0 24px; }
.pack-now h2 { margin-top: 4px; }
.pack-row { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
.pack-row .pdf-cards { margin: 0; grid-template-columns: 1fr; }
.pack-plan { width: 100%; border-collapse: collapse; font-size: 17px; }
.pack-group { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pack-group span { color: var(--muted); font-size: 15px; }
.pack-plan th { text-align: left; padding: 11px 12px 11px 0; width: 7.5em; border-bottom: 1px solid var(--line); font-weight: 700; }
.pack-plan td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.pack-dates { margin: -4px 0 10px; font-weight: 600; color: var(--ink); }
.pack-dates:empty { display: none; }
.pack-talk { color: var(--muted); font-size: .95em; }
.pack-note { color: var(--muted); font-size: 15px; margin-top: 12px; }
@media (max-width: 680px) { .pack-row { grid-template-columns: 1fr; } .pack-row .pdf-cards { max-width: 260px; } .pack-plan { font-size: 16px; } }
/* narrow desktop: the header (logo, menu, search) must stay on one line */
@media (min-width: 1001px) and (max-width: 1120px) { .site-head .wrap { gap: 8px; } .nav { gap: 2px; } .nav a { padding: 8px 8px; font-size: 14.5px; } .nav a.cta { margin-left: 2px; } }
/* bingo: "play it with clues" list, the answer after the arrow for the caller */
.clue-calls li { margin: 5px 0; }
.clue-calls .cc-a { color: var(--accent); font-weight: 600; white-space: nowrap; }