:root { color-scheme:light; --paper:#F0EEDC; --cream:#FFF8DC; --red:#A80000; --green:#1F6B3A; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:repeating-linear-gradient(90deg,#B30000 0 28px,#FFF8DC 28px 56px); color:var(--red); font:700 16px/1.65 "Courier Prime","Courier New",Courier,monospace; }
.top,main,.foot { width:calc(100% - 36px); max-width:504px; margin:32px auto; }
.top,.panel,.mapwrap,.foot { position:relative; padding:28px 20px; background:var(--paper); box-shadow:0 5px 12px #39291733; border-radius:3px; text-align:center; }
.top::before,.panel::before,.mapwrap::before,.foot::before { content:""; position:absolute; z-index:2; left:17px; top:-15px; width:14px; height:47px; border:3px solid #B30000; border-radius:12px; transform:rotate(-9deg); box-shadow:2px 1px 1px #39291733; }
.top::after,.panel::after,.mapwrap::after,.foot::after { content:""; position:absolute; z-index:2; top:-8px; left:22px; width:6px; height:33px; border:2px solid #B30000; border-top:0; border-radius:0 0 7px 7px; transform:rotate(-9deg); }
.masthead-art { display:block; width:136px; height:36px; margin:0 auto 12px; }
.org { margin:0; font-size:11px; text-transform:uppercase; }
h1 { margin:12px auto; font-size:clamp(28px,8vw,38px); line-height:1.2; text-wrap:balance; }
h2,.big { font-size:28px; line-height:1.3; margin:0 0 12px; }
.count { margin:16px 0 0; font-size:13px; }
.panel { margin:0 0 32px; scroll-margin-top:20px; }
.panel > :first-child { margin-top:0; }.panel > :last-child { margin-bottom:0; }
.sub,.loading { margin:0 0 16px; font-size:14px; }
.note { margin:0 0 18px; padding:12px; border:1px solid var(--green); color:var(--green); font-size:14px; }
.note.warn { color:var(--red); border-color:var(--red); }
.clue-n { margin:0 0 16px; font-size:22px; }
.clue { position:relative; margin:0 0 16px; background:var(--paper); border-radius:5px; overflow:hidden; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.clue canvas { display:block; width:100%; height:auto; }
.clue .pic { width:100%; aspect-ratio:4/5; background:center/contain no-repeat; }
.clue::after { content:""; position:absolute; inset:0; }
.how { margin:20px 0; padding:0; list-style:none; counter-reset:steps; font-size:14px; text-align:left; }
.how li { position:relative; padding-left:38px; min-height:30px; counter-increment:steps; }
.how li+li { margin-top:12px; }
.how li::before { content:"#0" counter(steps); position:absolute; left:0; top:0; color:var(--green); }
button.go { display:block; width:100%; min-height:50px; margin-top:22px; padding:14px; border:0; border-radius:5px; background:var(--red); color:var(--cream); font:inherit; cursor:pointer; }
button.go:hover { background:#8E0F1B; }button.go:active { transform:translateY(2px); }button.go:disabled { opacity:.65; cursor:wait; }button.go:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:20px 0 0; }
.stat { padding:12px 8px; border:1px solid #B38A32; }
.stat span { display:block; margin-bottom:6px; font-size:10px; text-transform:uppercase; }
.stat b { display:block; font-size:clamp(13px,3.5vw,20px); overflow-wrap:anywhere; }
.finish-art { display:block; width:100px; height:100px; margin:0 auto 14px; }
.eyebrow { margin:0 0 6px; font-size:10px; text-transform:uppercase; }
.mapwrap { padding-inline:12px; }
.mapwrap h2 { margin:0; }.map-intro { margin:4px 0 0; font-size:13px; }
#map svg { display:block; width:100%; height:auto; overflow:hidden; }
.seg { fill:none; stroke-linecap:round; }.seg.ahead { stroke:#A80000; stroke-width:2; stroke-dasharray:3 8; }.seg.done { stroke:#fff; stroke-width:12; }.seg.stripe { stroke:#B30000; stroke-width:12; stroke-dasharray:7 13; stroke-linecap:butt; }
.node .ornament { fill:var(--paper); stroke:#B9AA91; stroke-width:2; }.node .cap { fill:none; stroke:#B9AA91; }
.node.done .ornament { fill:var(--green); stroke:var(--green); }.node.next .ornament { fill:var(--red); stroke:var(--red); animation:beacon 2.4s ease-in-out infinite; }.node.done .cap,.node.next .cap { fill:#B38A32; stroke:#B38A32; }
.num { fill:#75654B; font:700 16px "Courier Prime","Courier New",Courier,monospace; }.node.done .num,.node.next .num { fill:var(--cream); }
.lbl { fill:var(--red); font:700 15px "Courier Prime","Courier New",Courier,monospace; }.stop-status { fill:var(--red); font:700 11px "Courier Prime","Courier New",Courier,monospace; }
.map-caption { fill:var(--red); font:700 16px "Courier Prime","Courier New",Courier,monospace; }.map-small { fill:var(--red); font:700 11px "Courier Prime","Courier New",Courier,monospace; }
.map-key { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:12px; font-size:12px; }.map-key span { display:flex; align-items:center; gap:6px; }.map-key i { width:10px; height:10px; border-radius:50%; border:1px solid #B9AA91; }.key-found { background:var(--green); }.key-next { background:var(--red); }
.foot { font-size:12px; padding:34px 20px 22px; }.foot p { margin:0; }
.celebration { position:absolute; inset:0; overflow:hidden; pointer-events:none; }.celebration i { position:absolute; top:-20px; width:8px; height:12px; background:#A80000; animation:confetti 2.3s ease-out both; }.celebration i:nth-child(3n) { background:#1F6B3A; }.celebration i:nth-child(3n+1) { background:#B38A32; }.celebration i:nth-child(4n) { background:#FFF8DC; }
#santa .ride { animation:ride .9s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
#santa .legs { transform-box:fill-box; transform-origin:50% 0; }
#santa .legs-a { animation:gallop .42s ease-in-out infinite alternate; }
#santa .legs-b { animation:gallop .42s ease-in-out infinite alternate-reverse; }
.smoke circle { animation:smoke 3.2s ease-in-out infinite; }
.smoke circle:nth-child(2) { animation-delay:.5s; }.smoke circle:nth-child(3) { animation-delay:1s; }
.windows rect { animation:glow 2.6s ease-in-out infinite alternate; }
@keyframes ride { from { transform:translateY(1.5px) rotate(1deg); } to { transform:translateY(-2.5px) rotate(-1.5deg); } }
@keyframes gallop { from { transform:rotate(16deg); } to { transform:rotate(-16deg); } }
@keyframes smoke { 0%,100% { opacity:.35; } 50% { opacity:.9; } }
@keyframes glow { from { fill:#FFD86B; } to { fill:#FFC233; } }
@media (prefers-reduced-motion: reduce) { #santa .ride,#santa .legs,.smoke circle,.windows rect { animation:none; } }
@keyframes beacon { 50% { fill:#8E0F1B; stroke-width:6; } }@keyframes confetti { to { transform:translate3d(var(--drift),480px,0) rotate(240deg); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .celebration { display:none; }.node.next .ornament { animation:none; }button.go:active { transform:none; } }