:root { --bg: #12131c; --fg: #e9eaf4; --muted: #8b8fa8; --line: #2a2d42; --card: #1b1d2c; --accent: #f5b13d; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif; line-height: 1.65; }
main { max-width: 700px; margin: 0 auto; padding: 24px 18px 70px; }
a { color: var(--accent); }
h1 { font-size: 32px; margin: 8px 0 4px; }
h2 { font-size: 21px; margin: 34px 0 6px; }
h3 { font-size: 16px; margin: 20px 0 2px; }
p, li { color: #c9cbe0; }
.lead { color: var(--muted); font-size: 18px; margin-top: 0; }
.back { display: inline-block; margin-bottom: 8px; color: var(--muted); text-decoration: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin: 16px 0; }
.ladder { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 2; }
.ladder b { color: var(--accent); }
footer.site { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
footer.site a { color: var(--muted); }
html[data-theme="halloween"] { --bg: #0d0914; --fg: #f4ecff; --muted: #a897c6; --line: #38274f; --card: #1a1228; --accent: #ff7a1a; }
html[data-theme="halloween"] body { background: radial-gradient(ellipse 80% 30% at 50% -5%, rgba(140, 70, 220, .25), transparent 70%), var(--bg); background-attachment: fixed; }
html[data-theme="thanksgiving"] { --bg: #150c06; --fg: #fff1de; --muted: #c7a98c; --line: #4a2f1d; --card: #26160b; --accent: #f0a23a; }
html[data-theme="thanksgiving"] body { background: radial-gradient(ellipse 80% 30% at 50% -5%, rgba(214, 110, 40, .28), transparent 70%), var(--bg); background-attachment: fixed; }
html[data-theme="christmas"] { --bg: #07160f; --fg: #f7f4ea; --muted: #9fc2af; --line: #24463a; --card: #102419; --accent: #ff6b6b; }
html[data-theme="christmas"] body { background: radial-gradient(ellipse 80% 30% at 50% -5%, rgba(220, 50, 60, .24), transparent 70%), var(--bg); background-attachment: fixed; }

/* Route tiles on the archive pages (colored like the game board) */
.route { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 20px 0 8px; }
.route .r, .blanks .r { display: flex; gap: 6px; }
.route .t, .blanks .t { width: 46px; height: 46px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--fg); }
.route .t.m { background: var(--accent); border-color: var(--accent); color: #1b1405; }
.route .t.g { background: #4fcf8b; border-color: #4fcf8b; color: #062614; }
.note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 0; }
.plist { list-style: none; padding: 0; margin: 8px 0; }
.plist li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.plist a { text-decoration: none; }
.plist .n { color: var(--muted); font-weight: 400; margin-right: 6px; }
.plist .d { display: block; color: var(--muted); font-size: 14px; }
.nav2 { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.btn { display: inline-block; background: var(--accent); color: #1b1405; font-weight: 800; border-radius: 999px; padding: 10px 20px; text-decoration: none; }
.print-only { display: none; }

/* Worksheet */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 16px; }
.q { break-inside: avoid; }
.qh { font-weight: 800; letter-spacing: .04em; margin-bottom: 6px; }
.qh span { font-weight: 400; color: var(--muted); letter-spacing: 0; }
.blanks { display: flex; flex-direction: column; gap: 5px; }
.blanks .t { width: 40px; height: 40px; font-size: 20px; }
.blanks .t.fill { background: var(--line); }
.key li { margin: 6px 0; }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
@media print {
  html, body, html[data-theme] body { background: #fff !important; color: #000 !important; }
  p, li, h1, h2, .lead { color: #000 !important; }
  .noprint, footer.site { display: none !important; }
  .print-only { display: block; }
  main { max-width: none; padding: 0; }
  .blanks .t { background: #fff; border: 2px solid #000; color: #000; width: 11mm; height: 11mm; }
  .blanks .t.fill { background: #e6e6e6; }
  .qh, .qh span { color: #000 !important; }
  .pagebreak { break-after: page; }
}