:root{color-scheme:light;--ink:#203a32;--spruce:#102f28;--green:#214b3e;--cream:#f7f3e9;--parchment:#fff0cc;--red:#85263b;--gold:#e9b85f;--line:#ddd4c4}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.55 system-ui,sans-serif}
.christmas-opening{position:fixed;inset:0;z-index:6;display:grid;place-items:center;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,#2c5542,#102f28 65%);color:#fff4d9;animation:opening-exit 1.75s ease both}
.opening-mark{position:relative;display:grid;justify-items:center;gap:.7rem;animation:opening-pop .6s cubic-bezier(.2,.85,.36,1.25) both}
.opening-mark img{border-radius:26px;border:1px solid #e9b85f80;box-shadow:0 0 36px #ffd68138}
.opening-name{font:bold clamp(1.8rem,7vw,2.6rem) Georgia,serif}
.opening-star{position:absolute;color:#f7d78f;font-size:1.5rem;animation:opening-spark .72s .1s ease-out both}
.opening-star-left{top:.2rem;left:-.8rem}.opening-star-right{top:3rem;right:-.6rem}
.opening-snow{position:absolute;inset:0;background:radial-gradient(circle,#fff8 1px,transparent 2px) 0 0/61px 73px,radial-gradient(circle,#ffebbb8c 1px,transparent 2px) 24px 13px/91px 103px;animation:snow 3s linear both}
@keyframes opening-exit{0%,77.14%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes opening-pop{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:none}}
@keyframes opening-spark{0%{opacity:0;transform:scale(.35)}55%{opacity:1;transform:scale(1.2)}100%{opacity:.85;transform:scale(1)}}
a{color:inherit}
button,input,select,textarea{font:inherit}
button,select{cursor:pointer}
button{border:1px solid transparent;border-radius:8px;padding:.5rem .8rem;background:var(--green);color:white;font-weight:650}
button:hover{filter:brightness(1.14)}
button:disabled{opacity:.65;cursor:wait}
button.secondary{background:#fffaf0;color:var(--green);border-color:var(--line)}
:focus-visible{outline:3px solid #bb7727;outline-offset:3px}
input,select,textarea{width:100%;padding:.52rem .65rem;border:1px solid #a69d8e;border-radius:7px;background:white;color:var(--ink)}
label{display:grid;gap:.2rem;font-weight:600}
form.fields{display:grid;gap:.8rem;margin-top:.8rem}
form.fields button{justify-self:start}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem max(1.2rem,calc((100vw - 1100px)/2));background:var(--spruce);color:#fff5de;border-bottom:1px solid #e9b85545}
.top nav{display:flex;gap:.3rem;padding:.22rem;border:1px solid #e9b85545;border-radius:12px}
.top a{text-decoration:none}
.top nav a{padding:.35rem .72rem;border-radius:8px;font-weight:650}
.top nav a:hover,.top nav a[aria-current]{background:#2a4c3d;color:#ffdb8d}
.brand{display:inline-flex;align-items:center;gap:.55rem;font:bold clamp(1.25rem,3vw,1.75rem) Georgia,serif;white-space:nowrap}
.brand img{width:40px;height:40px;border:1px solid #e9b85f66;border-radius:10px}
#account{font-size:.8rem}.badge{border:1px solid #d7c197;border-radius:20px;padding:.3rem .65rem;display:inline-block}
.hero{position:relative;overflow:hidden;min-height:550px;color:#fff9e9;background:#16342e url(scene.svg) center bottom/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(#112b27a0,transparent 80%)}
.hero.arrived::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 83% 66%,#ffda73a0,transparent 32%);animation:arrival 2s ease-out}
@keyframes arrival{from{opacity:0}to{opacity:1}}
.intro{position:relative;z-index:1;text-align:center;padding:2.2rem 1rem 9.1rem}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.18em;color:var(--red);margin:0 0 .35rem}
h1,h2,h3{font-family:Georgia,serif;line-height:1.06;margin:.2rem 0 .65rem}
h1{font-size:clamp(3.2rem,8vw,6rem);letter-spacing:-.045em}h1 em{color:#ffda88;font-weight:400}
h2{font-size:clamp(1.9rem,5vw,2.8rem)}
.clock{display:flex;justify-content:center;gap:.5rem;margin:1rem auto 0}
.clock div{min-width:clamp(59px,15vw,82px);padding:.38rem .5rem;border:1px solid #e9b85f80;border-radius:9px;background:linear-gradient(155deg,#2b5749f5,#102f28f5);box-shadow:inset 0 0 0 2px #102f28aa}
.clock b{display:block;font:700 1.8rem Georgia,serif;font-variant-numeric:tabular-nums}.clock small{font-size:.63rem;letter-spacing:.1em}
.express-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1rem auto 0}
.express-actions button{min-height:44px;background:#15362e;border-color:#d5ab65;color:#fff5dd;font-size:.86rem}
.express-actions button:first-child{background:#f2d496;color:#292519}
.express-actions #today-surprise{background:var(--red);border-color:#edc58a}
.route{position:absolute;z-index:2;left:8%;right:8%;bottom:2.25rem;--train-width:clamp(145px,24vw,280px);--progress:0}
.track{height:10px;border-block:2px solid #344a3f;background:repeating-linear-gradient(90deg,#344a3f 0 3px,transparent 3px 13px)}
.north-pole-marker{position:absolute;left:calc(100% - .5rem);bottom:-.2rem;width:2rem;height:auto}
.train{position:absolute;bottom:calc(100% - 10px);width:var(--train-width);left:calc((100% - var(--train-width)) * var(--progress));transition:left 1s linear;overflow:visible}
.steam{fill:#e8eee8;opacity:.32;animation:steam 3s linear infinite}.steam.second{animation-delay:-1s}.steam.third{animation-delay:-2s}
@keyframes steam{from{opacity:.56;transform:translate(0,5px)}to{opacity:0;transform:translate(-34px,-20px)}}
.headlamp{opacity:.7}
.whistling .steam{animation-duration:.65s;fill:#fff5da}.whistling .headlamp{opacity:1}
.snow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#fff9 1px,transparent 2px) 0 0/61px 73px,radial-gradient(circle,#fff9 1px,transparent 2px) 18px 35px/97px 121px;animation:snow 16s linear infinite}
@keyframes snow{to{background-position:61px 146px,-79px 156px}}
.content{max-width:1140px;margin:auto;padding:2rem 1.15rem 3rem;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1rem;align-items:start}
.content>section{background:#fffcf4;border:1px solid var(--line);border-top:3px solid #c9a165;border-radius:18px;padding:clamp(1rem,3vw,1.8rem);box-shadow:0 6px 25px #5332190a}
.content p{margin-top:.35rem}
.doors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}
.door{aspect-ratio:1;min-width:0;padding:0;position:relative;display:grid;place-content:center;border:1px solid #a06c48;border-radius:9px;background:var(--red);color:#fff8e8;font:700 clamp(.98rem,3vw,1.35rem) Georgia,serif;transition:transform .2s}
.door::before{content:"";position:absolute;inset:4px;border:1px solid currentColor;border-radius:5px;opacity:.27;pointer-events:none}
.door:nth-child(even){background:var(--green)}.door.locked{background:#efe7d8;color:#645647;border-color:#d5c8b3}.door.opened{background:#f2d998;color:#4d3722}.door:not(.locked):hover{transform:rotate(-5deg) scale(1.05)}
.door small{font:600 .58rem system-ui;line-height:1}
.door-charm{font:normal clamp(1.05rem,3.8vw,1.75rem)/1.15 system-ui,sans-serif}
.door.opened small{margin-top:.15rem}
details{margin:.75rem 0;padding:.55rem .75rem;border:1px solid var(--line);border-radius:8px}summary{cursor:pointer;font-weight:700}
.controls,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:.6rem 0}.controls select{flex:1 1 12rem}
.wish-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin:.2rem 0 .8rem}
.wish-views button{min-height:44px;padding:.45rem .3rem;font-size:.88rem}
.wish-views button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.member-picker{margin-bottom:.8rem}.member-picker[hidden]{display:none}
.wish-list{display:grid;gap:.6rem}
.wish{display:grid;grid-template-columns:clamp(58px,14vw,84px) minmax(0,1fr);gap:.75rem;padding:.7rem;border:1px solid var(--line);border-radius:12px;background:#fffef9;overflow-wrap:anywhere}
.wish h3{line-height:1.15;margin:.3rem 0 .4rem}
.wish p{margin:.2rem 0}.wish a{color:var(--red)}.wish small,.muted{color:#5a625a}.invite{overflow-wrap:anywhere}
.wish-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}.wish-meta small{font-weight:750}
.wish-owner-actions{display:flex;gap:.2rem;margin-left:auto}
.wish-icon-button{display:grid;place-items:center;width:36px;height:36px;padding:0}
.wish-icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wish-icon-button:last-child{color:var(--red)}
@media(pointer:coarse){.wish-icon-button{width:44px;height:44px}}
.wish-status{border-radius:1rem;padding:.1rem .45rem;background:#e9efe8;color:#264937;font-size:.72rem;font-weight:750}
.wish-status.reserved{background:#faeccd;color:#684717}.wish-status.purchased{background:#f5e5eb;color:#722a43}
.wish-store{display:inline-block;margin:.15rem 0;font-size:.88rem}
.wish .actions{margin:.45rem 0 0}.wish .actions button{min-height:44px}
.crew-settings{margin-top:.65rem}
.santa-entry{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.85rem 0;padding:.8rem;border:1px solid #d6bb86;border-radius:12px;background:#fff5de}
.santa-entry strong{font:700 1.15rem Georgia,serif;color:var(--red)}
.santa-entry p{margin:0;font-size:.8rem}
.santa-entry button{flex-shrink:0}
.santa-panel{display:grid;gap:.75rem}
.santa-panel p{margin:0}
.santa-budget{padding:.7rem;border-radius:8px;background:#fff0cc;font-weight:700}
.santa-roster{margin:0;padding-left:1.4rem}
.santa-assignment{padding:1rem;border:1px solid var(--line);border-radius:12px;background:#fffaf0}
.santa-exclusion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin:.65rem 0}
.group-exit{margin-top:1rem;padding-top:1rem;border-top:1px solid currentColor}
.group-exit button.secondary{color:#85263b}
.crew-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .75rem;margin:.65rem 0 .25rem;padding:.45rem .6rem;border:1px solid #dbc394;border-radius:10px;background:linear-gradient(135deg,#fff1cf,#fffcf4)}
.crew-identity{flex:1 1 8rem;min-width:0}
.crew-header .eyebrow{margin:0 0 .12rem;font-size:.62rem}
.crew-header h3{font-size:clamp(1.17rem,3.5vw,1.45rem);margin:0;overflow-wrap:anywhere}
.crew-header-actions{display:flex;flex-wrap:wrap;gap:.35rem}
.crew-header-actions button{padding:.25rem .55rem;font-size:.78rem}
.crew-header-actions button,.crew-switch-list button{min-height:44px}
.crew-switch-list{display:grid;gap:.45rem;list-style:none;margin:.75rem 0 0;padding:0}
.crew-switch-list button{display:flex;justify-content:space-between;gap:.5rem;width:100%;text-align:left;overflow-wrap:anywhere}
.crew-switch-list button[aria-current]{background:#eaf1e7;border-color:#9db39f}
.crew-current-mark{font-weight:850;color:var(--green)}
.welcome-card{margin:.75rem 0;padding:1rem;border:1px solid #d6ae70;border-radius:12px;background:linear-gradient(135deg,#fff6df,#fffcf4)}
.welcome-card h3{font-size:1.55rem}.welcome-card .actions{margin-bottom:0}
.welcome-card>.secondary{margin-top:.75rem}
.welcome-card button,.invite button{min-height:44px}
.invite input:not([hidden]){margin:.35rem 0}
.invite-feedback{font-weight:650;color:var(--green)}
.invite-feedback:empty{display:none}
.invite{padding:.75rem;border:1px solid var(--line);border-radius:8px;background:var(--cream)}
.invite p{margin:0 0 .4rem}
.invite code{display:block;margin:.6rem 0;user-select:all}
footer{text-align:center;padding:1.3rem;background:var(--spruce);color:#fff5de;font-size:.72rem;letter-spacing:.12em}footer span{color:var(--gold);margin:0 .35rem}
dialog{border:1px solid var(--line);border-radius:15px;background:#fffcf4;color:var(--ink);width:min(90vw,420px);padding:1.5rem}
dialog::backdrop{background:#122b26bb}.close{float:right;background:transparent;color:var(--ink);font-size:1.2rem;padding:0 .4rem}
.charm-dialog{text-align:center;background:linear-gradient(135deg,#fff0cc,#fffcf4);border:2px solid #b38749}
.charm-dialog .close{width:44px;height:44px;margin:-.65rem -.65rem 0 0}
.charm-dialog .eyebrow{padding-left:1.8rem}
.charm-display{display:grid;place-items:center;width:104px;aspect-ratio:1;margin:.8rem auto 1rem;border-radius:50%;border:2px dashed #aa773c;background:radial-gradient(circle,#fff8e5,#edcd85)}
#door-charm{font-size:3rem;line-height:1}
.fresh-charm{animation:charm-reveal .55s cubic-bezier(.18,.75,.34,1.2) both}
@keyframes charm-reveal{0%{opacity:0;transform:rotate(-20deg) scale(.35)}70%{opacity:1;transform:rotate(7deg) scale(1.18)}100%{opacity:1;transform:none}}
.opening-quote{max-height:90dvh;text-align:center;background:#fff5dd;border:1px solid #c9a165;box-shadow:0 10px 40px #071e18aa}
.opening-quote::backdrop{background:radial-gradient(ellipse at 50% 43%,#2c5542,#102f28 65%)}
.opening-quote img{border-radius:12px;margin-bottom:.5rem}
.opening-quote blockquote{margin:.45rem 0 .75rem;font:italic 1.2rem/1.4 Georgia,serif}
.opening-quote .movie-answer{margin:0 0 .65rem;color:var(--red);font-weight:750}
.opening-quote-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}
.opening-quote-actions button{min-height:44px}
#boarding-ticket{background:linear-gradient(120deg,#fff8e5,#f3e4c5);border:2px solid #b38749}
#ticket-progress{width:100%;height:.8rem;accent-color:var(--green)}
.ticket-stops{list-style:none;margin:.8rem 0 1.2rem;padding:0;border-block:1px dashed #a98c5a}
.ticket-stops li{display:grid;grid-template-columns:4rem minmax(0,1fr) 44px;gap:.55rem;align-items:center;padding:.34rem .5rem;color:#554b3c}
.ticket-stops li[aria-current="step"]{background:#fff8e3;color:#244236;font-weight:750}
.ticket-stops li.reached{color:#234536}.ticket-stops li.reached .stop-date::after{content:" ✓"}
.stop-date{font-size:.72rem;font-weight:800;letter-spacing:.06em}
.ticket-stamp{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px dashed #8a273b;border-radius:50%;background:#fff2d4;color:#8a273b;font-size:1.25rem;line-height:1;transform:rotate(-8deg)}
.ticket-stamp:disabled{border-color:#827665;background:transparent;color:#827665;opacity:.65;cursor:default}
.stamp-message{min-height:3rem;padding:.6rem .7rem;border-left:3px solid #a4773a;background:#fff8e3}
.wish-photo-picker img{width:96px;height:96px;object-fit:cover;border-radius:6px}
.wish-photo-picker img:not([hidden]){display:block;margin:.5rem 0}
.wish-photo{width:100%;aspect-ratio:1;border-radius:8px;background:radial-gradient(circle,#fff7e7,var(--parchment));display:grid;place-items:center}
.wish-photo button{width:100%;height:100%;padding:0;border:0;background:transparent}
.wish-photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.wish-placeholder{position:relative;display:block;width:46%;height:37%;margin-top:8%;border-radius:2px 2px 4px 4px;background:linear-gradient(90deg,#8a273b 42%,#efc77a 42% 58%,#8a273b 58%)}
.wish-placeholder::before{content:"";position:absolute;left:-8%;right:-8%;top:-16%;height:28%;border-radius:3px;background:linear-gradient(90deg,#a33f53 43%,#efc77a 43% 57%,#a33f53 57%)}
.wish-placeholder::after{content:"";position:absolute;left:33%;width:34%;height:29%;top:-44%;border:2px solid #8a273b;border-radius:45% 45% 12% 12%}
#wish-photo-dialog{width:min(92vw,720px)}
#wish-photo-large{display:block;width:100%;max-height:70vh;object-fit:contain}
#wish-editor{width:min(94vw,500px);max-height:90dvh}
#crew-dialog{max-height:90dvh}
.form-error{color:var(--red);font-weight:650}
.form-error:empty{margin:0}
.add-wish-button{width:100%;min-height:44px;margin:.45rem 0 .75rem}
#wish-editor input,#wish-editor textarea{font-size:16px}
#notice{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:4;background:#102f28;color:white;padding:.6rem 1rem;border-radius:8px;box-shadow:0 3px 18px #0004;max-width:90vw}
#notice:empty{display:none}
#effects{position:fixed;inset:0;pointer-events:none;z-index:5}
.particle{position:absolute;left:var(--x);top:var(--y);color:var(--color);font-size:1.5rem;text-shadow:0 1px 3px #4329;animation:burst .9s ease-out both}
.particle.ribbon{animation:wrap .8s ease-in-out both;font-size:2.5rem}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(160deg);opacity:0}}
@keyframes wrap{from{transform:translate(-50%,-50%) scale(.2) rotate(-110deg)}65%{transform:translate(-50%,-50%) scale(1.3) rotate(10deg)}to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.mobile-nav{display:none}
@media(max-width:760px){
  html{scroll-padding-bottom:calc(5rem + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(4.35rem + env(safe-area-inset-bottom))}
  .content{grid-template-columns:1fr}.hero{background:#102327 url(scene-mobile.svg) center bottom/100% auto no-repeat}.top{flex-wrap:wrap}.top nav{display:none}.intro{padding-top:1.7rem}
  .mobile-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;z-index:3;inset:auto 0 0;padding:.35rem .45rem calc(.35rem + env(safe-area-inset-bottom));background:#102f28;color:#fff5de;border-top:1px solid #e9b85677}
  .mobile-nav a{display:grid;justify-items:center;align-content:center;min-height:52px;gap:.12rem;border-radius:8px;text-decoration:none;font-size:.76rem;font-weight:650}
  .mobile-nav a[aria-current]{background:#2a4c3d;color:#ffdb8d}
  .mobile-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #notice{bottom:calc(4.65rem + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.christmas-opening{display:none}*,*::before,*::after{animation:none!important;transition:none!important}}