:root {
  --night: #16131c;
  --night-2: #241e2b;
  --paper: #f6eedd;
  --paper-2: #efe3c9;
  --ink: #2d241b;
  --ink-soft: #6b5a48;
  --red: #9e3b30;
  --red-dark: #6f2620;
  --brass: #c9a24a;
  --brass-dark: #8f6f24;
  --snow: #f4f1ea;
  --radius: 12px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Segoe Print", "Bradley Hand", "Marker Felt", "Chalkboard SE", cursive;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--sans); line-height: 1.5;
  color: var(--snow);
  background: var(--night) radial-gradient(ellipse at 50% 0%, #3a3048 0%, var(--night-2) 45%, var(--night) 85%) fixed;
}
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.view { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 20px 16px 48px; }

.eyebrow { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.muted { color: #b8afbf; }
.small { font-size: .9rem; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* Buttons */
.btn {
  appearance: none; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-weight: 600;
  padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 2px 0 var(--red-dark);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.small { padding: 6px 14px; font-size: .9rem; }
.btn.icon { font-family: var(--emoji); }
.link { background: none; border: 0; padding: 0; color: var(--brass); text-decoration: underline; cursor: pointer; }

/* ---------- Home ---------- */
.title { text-align: center; margin: 8px 0 18px; }
.farm { width: min(360px, 80%); height: auto; display: block; margin: 0 auto 6px; }
.title h1 { font-family: var(--serif); font-size: clamp(2.6rem, 9vw, 4.2rem); line-height: 1; margin: 6px 0 8px; letter-spacing: .01em; text-shadow: 0 3px 18px rgba(0,0,0,.6); }
.tagline { margin: 0 auto; max-width: 30em; color: #ddd5e2; }
.status { text-align: center; min-height: 1.5em; margin: 14px 0; color: #efe8f2; }
.status .big { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--brass); }

.tags-row { display: flex; justify-content: center; margin: 4px 0 20px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tag {
  display: inline-grid; place-items: center;
  width: 30px; height: 40px;
  border-radius: 6px 6px 14px 14px;
  border: 2px dashed rgba(201, 162, 74, .35);
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  position: relative;
}
.tag::before { content: ""; position: absolute; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.35); }
.tag.got { border: 0; background: linear-gradient(160deg, #e6c56e, var(--brass) 45%, var(--brass-dark)); box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4); padding-top: 8px; }
.tag.inline { width: 24px; height: 32px; font-size: .9rem; margin-left: 8px; vertical-align: middle; }
.tag.big { width: 54px; height: 72px; font-size: 1.8rem; padding-top: 14px; }
.tag.big::before { top: 9px; width: 10px; height: 10px; }

.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.day-tile {
  display: grid; justify-items: center; gap: 0;
  padding: 14px 6px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: inherit; cursor: pointer;
}
.tile-num { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.tile-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #c9c0cf; }
.tile-sub { font-size: .85rem; margin-top: 2px; }
.day-tile.open { background: var(--paper); color: var(--ink); border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 0 24px rgba(201,162,74,.45); animation: breathe 2.6s ease-in-out infinite; }
.day-tile.open .tile-label { color: var(--ink-soft); }
.day-tile.solved { background: rgba(201,162,74,.14); border-color: rgba(201,162,74,.5); }
.day-tile.solved .tile-sub { color: var(--brass); font-weight: 600; }
.day-tile.date, .day-tile.waiting { opacity: .6; }
.day-tile.epi .tile-num { font-family: var(--emoji); }
@keyframes breathe { 50% { box-shadow: 0 0 0 2px var(--brass), 0 0 36px rgba(201,162,74,.75); } }

.panel { margin-top: 28px; padding: 18px 20px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.panel h2 { font-family: var(--serif); margin: 0 0 6px; }
.panel ul { margin: 0; padding-left: 1.2em; }
.foot { text-align: center; margin-top: 24px; }
.foot .link { padding: 10px 6px; }

/* ---------- Day ---------- */
.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5; padding: 8px 0; background: linear-gradient(var(--night) 70%, transparent); }
.bar-title { flex: 1; min-width: 0; display: grid; text-align: center; }
.bar-title > span:last-child { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools { display: flex; gap: 6px; }
.tool {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  font-family: var(--emoji); font-size: 1.25rem; cursor: pointer; color: inherit;
}
.tool[aria-pressed="true"] { background: var(--brass); box-shadow: 0 0 0 3px rgba(201,162,74,.4); }
.tool .count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font: 700 .7rem/18px var(--sans); }
.tool .count:empty { display: none; }

.paper { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.paper summary { cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; padding: 8px 0; margin: -8px 0; }
.chapter p, .previously p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; }
.previously { background: var(--paper-2); }

.scene { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5); background: #000; }
.scene svg { display: block; width: 100%; height: auto; }
[data-hot] { cursor: pointer; }
[data-hot]:hover { filter: brightness(1.12); }
.hs { fill: #fff8e0; fill-opacity: 0; stroke: #fff8e0; stroke-opacity: 0; stroke-width: 3; transition: fill-opacity .15s, stroke-opacity .15s; }
[data-hot]:hover > .hs { fill-opacity: .12; stroke-opacity: .5; }
.scene.dark [data-hot]:hover > .hs { fill-opacity: 0; stroke-opacity: 0; }

.taken { display: none; }
.caption {
  min-height: 3.2em; margin: 10px 2px 14px;
  font-family: var(--serif); font-size: 1.05rem; color: #f1eadf;
}
.caption.flash { animation: flash .5s ease-out; }
@keyframes flash { from { opacity: .2; transform: translateY(4px); } }

.answer label { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.answer-row { display: flex; gap: 8px; }
.answer-row input {
  flex: 1; min-width: 0; padding: 10px 14px;
  border-radius: 999px; border: 2px solid #d8c9ad;
  background: #fff; color: var(--ink);
  text-transform: uppercase; letter-spacing: .06em;
}
.answer-row input:focus { outline: none; border-color: var(--brass-dark); }
.answer-msg { min-height: 1.4em; margin: 8px 0 0; color: var(--red); font-weight: 600; }
.solved-bar p { margin: 0; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Sheets (dialogs) ---------- */
.sheet {
  width: min(760px, calc(100% - 20px)); max-height: calc(100dvh - 20px);
  padding: 0; border: 0; border-radius: 16px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  color-scheme: light;
}
.sheet[open] { display: flex; flex-direction: column; animation: fadein .2s ease-out; }
@keyframes fadein { from { opacity: 0; } }
.sheet::backdrop { background: rgba(8, 6, 12, .75); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 18px; background: var(--red); color: #fff; border-bottom: 4px solid var(--brass); }
.sheet-head h2 { flex: 1; margin: 0; font-family: var(--serif); font-size: 1.3rem; }
.sheet-head .tool { width: 40px; height: 40px; }
.close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.05rem; cursor: pointer; }
.sheet-body { padding: 16px 18px 20px; overflow-y: auto; }
.sheet .caption { color: var(--ink); margin: 0; padding: 10px 18px 14px; min-height: 0; }
.sheet .caption:empty { display: none; }
.sheet h3 { font-family: var(--serif); margin: 18px 0 6px; }
.sheet .muted { color: var(--ink-soft); }
.reveal .sheet-body p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; }

.zoomable { position: relative; }
.closeup-art { border-radius: 10px; overflow: hidden; }
.closeup-art svg { display: block; width: 100%; height: auto; }
.closeup-paper + .radio, .closeup-art + .closeup-paper { margin-top: 12px; }

/* Magnifier */
.mag-on .zoomable { touch-action: none; cursor: zoom-in; }
.lens {
  position: absolute; z-index: 10; pointer-events: none;
  width: 150px; height: 150px; border-radius: 50%;
  overflow: hidden; background: #fff;
  border: 5px solid #d8c08a; box-shadow: 0 0 0 2px #6b4a2a, 0 10px 26px rgba(0,0,0,.5);
}
.lens-art { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lens-art svg { display: block; width: 100%; height: auto; }

/* Papers inside closeups */
.letter, .card-index, .receipt, .logbook, .sympathy, .note-plain { color: var(--ink); }
.hand, .letter.hand p { font-family: var(--hand); }
.letter { background: #fffaf0 repeating-linear-gradient(transparent 0 31px, #d9e3ee 31px 32px); padding: 20px 24px; border-radius: 4px; box-shadow: inset 0 0 0 1px #e5dac4; font-size: 1.05rem; line-height: 32px; }
.letter p { margin: 0 0 32px; }
.letter .ps { font-size: .95rem; }
.card-index { background: #fffdf6; border-top: 30px solid #fffdf6; box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 #e9b6b0; padding: 6px 20px 16px; border-radius: 3px; max-width: 460px; margin: 0 auto; background-image: repeating-linear-gradient(transparent 0 27px, #cfe0ee 27px 28px); line-height: 28px; }
.card-index .card-title { margin: 0 0 4px; font-weight: 700; color: var(--red); }
.card-index ul { margin: 0 0 6px; padding-left: 1.2em; }
.card-index p { margin: 0; }
.card-index.hand { font-size: 1.1rem; }
.receipt { font-family: "Courier New", monospace; background: #fff; max-width: 320px; margin: 0 auto; padding: 16px 18px; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: .92rem; }
.receipt .center { text-align: center; }
.logbook { background: #fbf7ec; padding: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px #e1d4b8; font-size: .9rem; }
.logbook .log-head, .logbook p { display: grid; grid-template-columns: 4.2em 4.4em 5.6em 1fr; gap: 8px; margin: 0; padding: 7px 0; border-bottom: 1px solid #d9e3ee; }
.logbook .log-head { font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; color: var(--ink-soft); }
.logbook p > span:first-child, .logbook p > span:nth-child(2), .logbook p > span:nth-child(3) { font-family: "Courier New", monospace; font-size: .82rem; }
.logbook .other { background: rgba(158, 59, 48, .06); }
.hand2 { font-family: "Ink Free", "Brush Script MT", "Snell Roundhand", cursive; font-size: 1.05rem; color: #3b4a7a; }
.sympathy { text-align: center; background: #fffdf8; padding: 24px 18px; border: 1px solid #e1d4b8; border-radius: 4px; max-width: 420px; margin: 0 auto; font-family: var(--serif); }
.sympathy .big { font-size: 1.5rem; font-weight: 700; margin: 4px 0; }
.sympathy .caps { text-transform: uppercase; letter-spacing: .14em; }
.sympathy .verse { font-style: italic; color: var(--ink-soft); }
.note-plain p { margin: 0 0 10px; }

/* Radio */
.radio-face { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 10px; background: #3b3b3b; box-shadow: inset 0 0 0 3px #222; }
.dial { position: relative; flex: 1; height: 54px; border-radius: 6px; background: radial-gradient(circle at 50% 50%, #ffcf7a, #e08a2a); box-shadow: inset 0 0 12px rgba(0,0,0,.35); }
.dial::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 2px solid #7a4a18; }
.needle { position: absolute; left: 47%; top: 6px; bottom: 6px; width: 3px; background: #c0392b; }
.knobs { display: flex; gap: 10px; }
.knobs span { width: 34px; height: 34px; border-radius: 50%; background: #5a5a5a; box-shadow: inset 0 0 0 2px #222; }
.transcript { margin: 14px 0 0; padding-left: 0; list-style: none; font-family: var(--serif); font-size: 1.08rem; }
.transcript li { padding: 4px 0; animation: flash .4s ease-out; }
.transcript .sfx { color: var(--ink-soft); font-style: italic; }

/* Box, notes, hints, reveal */
.box-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.box-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 2px solid #e1d4b8; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.box-icon { font-family: var(--emoji); font-size: 1.6rem; }
#notes-text { width: 100%; padding: 10px; border-radius: 10px; border: 2px solid #d8c9ad; background: #fff; color: var(--ink); resize: vertical; font-family: var(--hand); line-height: 1.6; }
.clues { padding-left: 1.2em; margin: 0; }
.clues li { margin: 4px 0; }
.hint { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e1d4b8; margin: 8px 0; }
.answer-hint { border-color: var(--red); }
.gifts { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.gift { cursor: pointer; color: var(--ink); font: inherit; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e1d4b8; font-weight: 600; }
.tag-reveal { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; font-weight: 600; }
.tag-reveal .tag { animation: drop .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes drop { from { transform: translateY(-30px) rotate(-20deg); opacity: 0; } }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 50;
  transform: translate(-50%, 20px); opacity: 0;
  background: #2d241b; color: #fff; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: calc(100% - 32px); text-align: center;
  transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Flashlight rooms: everything outside the beam stays black */
.veil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(4,3,2,0) 0, rgba(4,3,2,0) calc(var(--br, 60px) * .55), rgba(4,3,2,.6) calc(var(--br, 60px) * .85), rgba(4,3,2,.985) var(--br, 60px)); }
.scene.dark { cursor: none; touch-action: none; }
.scene.dark [data-hot] { cursor: none; }
.scene.dark [data-hot]:hover { filter: none; }

/* Lemon-juice writing: invisible until the lamp is lit */
.ink { opacity: 0; transition: opacity 1.4s ease .3s; color: #8a541c; fill: #8a541c; font-family: var(--hand); }
.lamp-on .ink { opacity: 1; }
.lamp-on .zoomable { box-shadow: inset 0 0 70px rgba(255,160,50,.35); }
.lamp-on .closeup-paper > div { background-image: radial-gradient(ellipse at 50% 60%, rgba(255,190,90,.35), transparent 70%); }

/* Ornaments and other things you hang up in order */
.order h3 { margin: 14px 0 6px; }
.order-slots { list-style: none; counter-reset: slot; margin: 0; padding: 0; display: grid; gap: 6px; }
.order-slots li { counter-increment: slot; display: flex; align-items: center; gap: 8px; min-height: 52px; }
.order-slots li::before { content: counter(slot); width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2f6b3e; color: #fff; font: 700 14px var(--sans); }
.order-empty { flex: 1; border: 2px dashed #b9a37c; border-radius: 8px; padding: 12px; color: var(--ink-soft); font-size: 14px; }
.order-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.order-piece { display: flex; align-items: center; gap: 8px; text-align: left; flex: 1; padding: 4px 8px; border-radius: 8px; border: 1px solid #b9a37c; background: var(--paper); color: var(--ink); font: 14px var(--sans); cursor: pointer; }
.order-piece:disabled { opacity: .35; cursor: default; }
.order-piece.on { background: #e7f0e3; }
.order-art { width: 40px; height: 48px; flex: none; }
.order-art svg { width: 100%; height: 100%; }
.order-slots.many { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.order-slots.many li { min-height: 46px; }
.order-slots.many .order-empty { padding: 8px; }
.order-read { font: 700 18px "Courier New", monospace; letter-spacing: .1em; margin: 10px 0 0; }

/* Ornament closeups and photos */
.ornament { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.ornament .front svg { width: 100%; height: auto; }
.ornament .back { background: var(--paper); border-radius: 8px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ornament .back p { margin: 0 0 8px; }
.ornament .back .year { font: 700 22px var(--serif); color: var(--red); }
.ornament .back .scratched { text-decoration: line-through; color: var(--ink-soft); }
.photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; border-bottom-width: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.3); margin-bottom: 10px; filter: sepia(.25); }
.photo.drawn { overflow: hidden; background: #ddd; padding: 0; }
.photo.drawn svg { display: block; width: 100%; height: 100%; }
.photo.placeholder { display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(45deg, #e9dcc0 0 10px, #e2d3b4 10px 20px); color: var(--ink-soft); font: italic 13px var(--serif); padding: 8px; }

/* Jar labels, quilt notes */
.pattern-book { background: var(--paper); border-radius: 8px; padding: 14px; }
.pattern-book .blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.pattern-book figure { margin: 0; text-align: center; font: 13px var(--serif); }
.pattern-book figure svg { width: 100%; height: auto; background: #fff; border: 1px solid #ccb98f; }
.pattern-book .lastpage { margin-top: 16px; min-height: 90px; border-top: 1px dashed #b9a37c; padding-top: 10px; }
.pattern-book .ink { font-size: 20px; }
/* Spot the difference */
.spot-label { margin: 10px 0 6px; font: 600 14px var(--sans); color: var(--ink-soft); }
.spot-label:first-child { margin-top: 0; }
[data-spot] { cursor: pointer; }
[data-spot] .ring { display: none; }
[data-spot].spotted .ring { display: inline; }
.spot-count { font: 700 15px var(--sans); margin: 10px 0 0; }
.spot-pair { display: grid; gap: 4px 14px; }
@media (min-width: 700px) { .spot-pair { grid-template-columns: 1fr 1fr; } }

/* Put-it-back slots */
.unplaced { display: none; }

/* Blinking light across the field */
.blink-field { position: relative; height: 220px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(#0e1424 0 55%, #2a3550 55% 58%, #cfd8e6 58%); }
.blink-house { position: absolute; left: 62%; top: 44%; width: 46px; height: 26px; background: #0a0d16; }
.blink-house::before { content: ""; position: absolute; left: -6px; top: -18px; border: 29px solid transparent; border-bottom: 18px solid #0a0d16; border-top: 0; }
.blink-light { position: absolute; left: calc(62% + 16px); top: calc(44% + 7px); width: 12px; height: 12px; border-radius: 2px; background: #3a3220; }
.blink-light.on { background: #ffe9a8; box-shadow: 0 0 18px 8px rgba(255,220,130,.7); }
.morse { columns: 3 110px; font: 15px "Courier New", monospace; margin: 0; padding: 0; list-style: none; }
.morse li { padding: 2px 0; }
.morse b { display: inline-block; width: 1.4em; }
.chalk { font-family: var(--hand); }

/* Telegraph key */
.telegraph { display: grid; gap: 12px; justify-items: center; }
.tg-screen { width: 100%; background: #1c1f1a; color: #9fe39f; border-radius: 8px; padding: 10px 14px; font: 700 22px "Courier New", monospace; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.tg-screen p { margin: 0; min-height: 1.3em; letter-spacing: .12em; }
.tg-sig { color: #e8d48a; font-size: 26px; }
.tg-key { position: relative; width: 220px; height: 110px; border: 0; border-radius: 12px; background: #5a3e24; box-shadow: 0 6px 0 #3b2414; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.tg-key::before { content: ""; position: absolute; left: 24px; right: 24px; top: 38px; height: 14px; border-radius: 7px; background: linear-gradient(#e0c070, #9a7a2a); transform-origin: 85% 50%; transition: transform .05s; }
.tg-knob { position: absolute; left: 22px; top: 22px; width: 52px; height: 40px; border-radius: 50%; background: #1c1c1c; box-shadow: 0 4px 0 #000; transition: transform .05s; }
.tg-key.down .tg-knob { transform: translateY(6px); box-shadow: 0 0 0 #000; }
.tg-key.down::before { transform: rotate(-3deg); }

/* Christmas morning */
.finale-title { margin: 0 0 10px; font: 700 26px var(--serif); }
.finale-card { white-space: pre-wrap; background: #fff; border: 1px solid #e1d4b8; border-radius: 8px; padding: 12px 14px; font: 16px var(--sans); }
.light-spot { margin: 14px 0; display: grid; gap: 8px; }
.bonus { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #b9a37c; }
.bonus h3 { margin: 0 0 6px; }
.bonus .light-spot:empty { display: none; }

/* The Christmas Book */
.xbook { display: grid; gap: 18px; }
.xbook .page { background: #fbf7ee; border: 1px solid #e1d4b8; border-radius: 6px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.xbook .page h3 { margin: 0 0 8px; font: 700 20px var(--serif); color: var(--red); }
.xbook .page.blank { min-height: 180px; display: grid; place-items: center; text-align: center; }

@media (max-width: 560px) {
  .ornament { grid-template-columns: 1fr; }
  .ornament .front { max-width: 180px; margin: 0 auto; }
}

@media (max-width: 560px) {
  .bar { flex-wrap: wrap; }
  .bar-title { order: 3; flex-basis: 100%; }
  .bar .tools { margin-left: auto; }
  .tags { gap: 4px; }
  .tag { width: 26px; height: 36px; }
  .days { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tile-num { font-size: 1.5rem; }
  .tool { width: 40px; height: 40px; font-size: 1.1rem; }
  .bar .btn.small { padding: 6px 10px; }
  .lens { width: 130px; height: 130px; }
  .logbook .log-head, .logbook p { grid-template-columns: 3.6em 1fr; }
  .logbook p > span:nth-child(2), .logbook p > span:nth-child(3), .logbook .log-head span:nth-child(2), .logbook .log-head span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}