/* Secret Santa Room - festive direction A "warm cabin night".
   Palette tokens live here only; OKLCH values from the design board. */

@font-face{font-family:'Fraunces';src:url('/static/fonts/fraunces-var-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;font-synthesis:none}
@font-face{font-family:'Fraunces';src:url('/static/fonts/fraunces-600-italic-latin.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap;font-synthesis:none}

:root{
 --night:oklch(0.27 0.045 165);
 --pine:oklch(0.35 0.05 163);
 --pine-band:oklch(0.38 0.06 160);
 --candle:oklch(0.92 0.06 90);
 --cream:oklch(0.93 0.02 95);
 --tag:oklch(0.93 0.035 88);
 --kraft:oklch(0.88 0.05 78);
 --ink:oklch(0.32 0.05 155);
 --cranberry:oklch(0.55 0.17 27);
 --cranberry-deep:oklch(0.47 0.16 27);
 --gold:oklch(0.75 0.09 85);
 --gold-deep:oklch(0.45 0.08 70);
 --muted:oklch(0.46 0.04 140);
 --muted-night:oklch(0.72 0.04 120);
 --input-bg:oklch(0.985 0.008 95);
 --input-line:oklch(0.78 0.04 110);
 --dash:oklch(0.78 0.06 82);
 --hole-ring:oklch(0.8 0.07 82);
 --avatar-bg:oklch(0.86 0.05 84);
 --ready:oklch(0.45 0.1 155);
 --display:'Fraunces',Georgia,serif;
 --ring:var(--cranberry);
 --sel:oklch(0.88 0.06 88);
 --selink:var(--ink);
}

*{box-sizing:border-box}
html{color-scheme:light;background:var(--kraft)}
body{margin:0;color:var(--ink);font:16px/1.55 system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}
a{color:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--display);line-height:1.12;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
::selection{background:var(--sel);color:var(--selink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* header / footer */
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px max(28px,calc((100vw - 1200px)/2));background:var(--pine-band);color:var(--tag)}
.brand{text-decoration:none;font:600 19px var(--display);letter-spacing:-.01em}
.brand b{color:var(--candle);font-weight:700}
.brand-mark{color:oklch(0.68 0.15 27);font-size:24px;vertical-align:-2px;margin-right:8px}
.top-note{font-size:13px;color:oklch(0.78 0.05 120)}
footer{color:var(--muted);text-align:center;padding:30px;font-size:13px}

/* light cabin pages */
.home,.room{max-width:1200px;margin:auto;padding:76px 28px}
.room{max-width:840px}
.eyebrow,.step,.people-title{font-size:12px;letter-spacing:.18em;font-weight:700;color:var(--gold-deep)}
.intro{font-size:19px;max-width:65ch;line-height:1.6;color:var(--muted)}
.home h1{font-size:clamp(2.9rem,6vw,5.2rem);margin:24px 0}
.home h1 em,.room h1 em{color:var(--cranberry)}
.room h1{font-size:clamp(2.4rem,7vw,4rem);margin:22px 0}
h2{font-size:2rem;margin:15px 0}
h3{font-size:1.5rem;margin:12px 0}

/* gift-tag card */
.paper,.join-home{position:relative;background:var(--tag);border-radius:14px;padding:40px;box-shadow:0 14px 34px oklch(0.35 0.05 155/.18)}
.paper::before,.join-home::before{content:'';position:absolute;top:16px;right:18px;width:12px;height:12px;border-radius:50%;background:var(--kraft);box-shadow:inset 0 1px 2px oklch(0.3 0.03 155/.6),0 0 0 4px var(--hole-ring)}
.paper::after,.join-home::after{content:'';position:absolute;top:6px;right:30px;width:104px;height:28px;border:2px solid var(--gold);border-bottom:none;border-radius:60px 60px 0 0;opacity:.7;transform:rotate(7deg);transform-origin:left bottom;pointer-events:none}
.home-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;margin:56px 0;align-items:start}
.room .paper{margin-top:28px}
.join-home h2,.paper h2{margin-top:8px}
.paper>p,.join-home>p,.keepsake p,.host p{color:var(--muted)}
.how{border-top:1px dashed var(--dash);padding:40px 0;margin-top:20px}
.how p{font:600 24px var(--display);margin:12px 0 0}
.how span{color:var(--cranberry)}

/* forms */
form{margin-top:32px;display:grid;gap:20px}
label{display:grid;gap:8px;font-size:13px;font-weight:700}
input,textarea,select{width:100%;border:1px solid var(--input-line);background:var(--input-bg);border-radius:8px;padding:12px 14px;color:var(--ink);font:16px/1.4 system-ui,sans-serif}
textarea{resize:vertical}
button,.button-link{border:0;background:var(--cranberry);color:oklch(0.97 0.012 95);border-radius:11px;padding:15px 23px;font:700 15px system-ui,sans-serif;text-decoration:none;display:inline-block;text-align:center;box-shadow:0 8px 18px oklch(0.55 0.17 27/.3)}
button:hover,.button-link:hover{background:var(--cranberry-deep)}
button.secondary{background:var(--pine)}
button:disabled{background:oklch(0.75 0.02 120);color:oklch(0.35 0.02 140);cursor:not-allowed;box-shadow:none}
.text-button{background:transparent;color:var(--cranberry-deep);padding:6px 0;box-shadow:none}
.text-button:hover{background:transparent;text-decoration:underline}
.check{display:flex;align-items:center;gap:12px}
.check input{width:20px;height:20px}

/* people */
.people{border-top:2px solid var(--gold);margin-top:28px;padding-top:22px}
.people-title{display:flex;justify-content:space-between;align-items:baseline}
.people-title strong{font:700 20px var(--display);color:var(--cranberry);font-variant-numeric:tabular-nums}
ul{list-style:none;margin:18px 0 0;padding:0}
.people li,.stage-people li{display:flex;align-items:center;gap:12px;border-top:1px dashed var(--dash);padding:12px 0;font-weight:600}
.people li small{margin-left:auto;color:var(--muted);font-size:10px;letter-spacing:.14em}
.people li small.hot{color:var(--cranberry)}
.avatar{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--avatar-bg);color:oklch(0.4 0.08 60);font:700 17px var(--display);flex:none}
.personal{display:block;overflow-wrap:anywhere;font-size:13px;color:var(--cranberry-deep)}
.expiry{font-size:13px;margin-top:30px;color:var(--muted)}

/* wish list editor */
.wish-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wish-row label{min-width:0}
.wish-row input{min-width:0}
.wish-row:not(:first-child){border-top:1px dashed var(--dash);padding-top:16px}
.draw-message{padding:14px;background:var(--avatar-bg);border-left:3px solid var(--ready);border-radius:0 8px 8px 0}
.host form{margin:22px 0}

/* reveal: the showpiece */
.reveal{overflow:hidden}
.match-detail{margin-top:24px;position:relative}
.you-are{color:var(--muted);margin:16px 0 0}
.name-wrap{position:relative;display:inline-block;min-width:82%;max-width:100%}
.recipient-name{position:relative;display:inline-block;max-width:100%;overflow-wrap:anywhere;font:700 56px/1.05 var(--display);letter-spacing:-.01em;color:oklch(0.4 0.09 27);margin:4px 0 2px;padding:2px 6px}
.ribbon{position:absolute;inset:-6px -14px;background:var(--cranberry);display:grid;place-items:center;border-radius:12px;box-shadow:0 8px 20px oklch(0.55 0.17 27/.4);transform:translateX(130%);opacity:0;pointer-events:none}
.ribbon::after{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 7px);width:14px;background:oklch(0.45 0.15 27)}
.ribbon i{position:relative;z-index:1;color:oklch(0.97 0.012 95);font:700 14px system-ui;letter-spacing:.24em;font-style:normal}
.match-detail .sub{color:var(--muted);font-variant-numeric:tabular-nums}
.match-detail li{padding:12px 2px 12px 26px;border-top:1px dashed var(--dash);position:relative;font-weight:600}
.match-detail li::before{content:'';position:absolute;left:2px;top:19px;width:12px;height:12px;border:2px solid var(--gold);border-radius:4px;transform:rotate(45deg)}
.match-detail li small{display:block;font-weight:500;font-size:13.5px;color:var(--muted);margin-top:2px}
.delivery{margin-top:14px;background:oklch(0.89 0.045 82);border-radius:10px;padding:12px 14px;font-size:14.5px;color:var(--ink)}

/* big screen: cabin night */
.theme-night{--ring:var(--candle);--sel:var(--candle);--selink:var(--night);background:radial-gradient(1200px 800px at 18% 88%,oklch(0.36 0.07 80 / .32),transparent 60%),radial-gradient(900px 700px at 85% 10%,oklch(0.33 0.05 163 / .5),transparent 55%),var(--night);color:var(--cream);min-height:100vh}
.theme-night .top{background:transparent;border-bottom:1px solid oklch(0.93 0.02 95 / .14);color:var(--cream);padding:26px 56px}
.theme-night .top-note{color:var(--muted-night)}
.theme-night footer{color:var(--muted-night)}
.stage{padding:64px clamp(24px,3vw,56px) 0;max-width:1720px;margin:auto}
.stage-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,29vw,380px);gap:clamp(16px,3vw,72px);align-items:start}
.stage-grid>:first-child{min-width:0;container-type:inline-size}
.stage .eyebrow{color:var(--gold);letter-spacing:.22em}
.stage h1{font-size:clamp(64px,7vw,92px);line-height:1.04;max-width:800px;margin:22px 0 14px;color:var(--cream)}
.stage h1 em{color:var(--candle);font-weight:600}
.stage p{font-size:24px;color:var(--muted-night)}
.code-card{margin-top:44px}
.code-label{font:700 14px system-ui;letter-spacing:.22em;color:var(--gold);margin-bottom:10px}
.stage-code{font:700 clamp(32px,min(12vw,19vh,15cqi),190px)/0.95 var(--display);letter-spacing:.03em;color:var(--candle);font-variant-numeric:tabular-nums;white-space:nowrap}
.stage-url{margin-top:18px;font-size:21px;color:var(--muted-night);overflow-wrap:anywhere}
.stage-side{display:grid;gap:26px;align-content:start}
.tag{position:relative;background:var(--tag);color:var(--ink);border-radius:16px;padding:30px 34px;box-shadow:0 24px 60px oklch(0.1 0.03 165/.45)}
.tag::before{content:'';position:absolute;top:22px;right:22px;width:18px;height:18px;border-radius:50%;background:var(--night);box-shadow:inset 0 1px 3px oklch(0.2 0.03 155/.8),0 0 0 5px var(--hole-ring)}
.tag::after{content:'';position:absolute;top:14px;right:34px;width:120px;height:34px;border:2px solid var(--gold);border-bottom:none;border-radius:60px 60px 0 0;opacity:.7;transform:rotate(8deg);transform-origin:left bottom;pointer-events:none}
.qr{background:#fff;padding:18px;border-radius:8px;max-width:324px;margin:0 auto}
.qr img{width:100%;height:auto;display:block}
.tag .qr-hint{text-align:center;color:var(--ink);font-size:15px;margin:14px 0 0}
.people-tag{padding-top:56px}
.people-tag .people-title{justify-content:flex-start;gap:12px}
.people-tag .people-title strong{font-size:22px}
.stage-people{max-height:380px;overflow:auto;margin-top:8px}
.sealed::before{content:'✉';display:inline-block;color:var(--cranberry);margin-right:12px}
.stage-progress{font:600 32px var(--display);color:var(--candle);margin:20px 0}
.stage-drawing{font-size:clamp(56px,7vw,92px)}

/* falling snow, big screen only; stays under text and cards.
   The stage's left text column (eyebrow, headline, subline, room code, url)
   is cut out of the layer with an evenodd clip, so no flake renders over
   that text at any animation frame. */
.snow{display:none;position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;--pad:clamp(24px,3vw,56px);--hole-x1:calc((100vw - min(1720px,100vw))/2 + var(--pad) - 10px);--hole-x2:calc((100vw - min(1720px,100vw))/2 + min(1720px,100vw) - var(--pad) - clamp(16px,3vw,72px) - clamp(240px,29vw,380px) + 8px);--hole-y1:-1px;--hole-y2:calc(100% + 1px);clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--hole-x1) var(--hole-y1),var(--hole-x2) var(--hole-y1),var(--hole-x2) var(--hole-y2),var(--hole-x1) var(--hole-y2),var(--hole-x1) var(--hole-y1),0 0)}
.theme-night .top,.theme-night .stage,.theme-night footer{position:relative;z-index:1}
.theme-night .stage{isolation:isolate}
.snow i{position:absolute;top:-3vh;border-radius:50%;background:var(--cream)}
.snow i:nth-child(1){left:40%;width:4px;height:4px;opacity:.35;animation-duration:28s;animation-delay:0s}
.snow i:nth-child(2){left:77%;width:7px;height:7px;opacity:.49;animation-duration:30.7s;animation-delay:-2.7s}
.snow i:nth-child(3){left:14%;width:10px;height:10px;opacity:.63;animation-duration:33.4s;animation-delay:-5.4s}
.snow i:nth-child(4){left:51%;width:4px;height:4px;opacity:.77;animation-duration:36.1s;animation-delay:-8.1s}
.snow i:nth-child(5){left:88%;width:7px;height:7px;opacity:.35;animation-duration:38.8s;animation-delay:-10.8s}
.snow i:nth-child(6){left:25%;width:10px;height:10px;opacity:.49;animation-duration:41.5s;animation-delay:-13.5s}
.snow i:nth-child(7){left:62%;width:4px;height:4px;opacity:.63;animation-duration:30.2s;animation-delay:-2.2s}
.snow i:nth-child(8){left:99%;width:7px;height:7px;opacity:.77;animation-duration:32.9s;animation-delay:-4.9s}
.snow i:nth-child(9){left:36%;width:10px;height:10px;opacity:.35;animation-duration:35.6s;animation-delay:-7.6s}
.snow i:nth-child(10){left:73%;width:4px;height:4px;opacity:.49;animation-duration:38.3s;animation-delay:-10.3s}
.snow i:nth-child(11){left:10%;width:7px;height:7px;opacity:.63;animation-duration:41s;animation-delay:-13s}
.snow i:nth-child(12){left:47%;width:10px;height:10px;opacity:.77;animation-duration:29.7s;animation-delay:-1.7s}
.snow i:nth-child(13){left:84%;width:4px;height:4px;opacity:.35;animation-duration:32.4s;animation-delay:-4.4s}
.snow i:nth-child(14){left:21%;width:7px;height:7px;opacity:.49;animation-duration:35.1s;animation-delay:-7.1s}

@media (prefers-reduced-motion:no-preference){
 button,.button-link{transition:background-color .18s ease}
 .people li{animation:appear .24s ease-out both}
 @keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
 .snow{display:block}
 .snow i{animation:fall linear infinite}
 @keyframes fall{to{transform:translateY(112vh) translateX(6vw)}}
 .match-detail .ribbon{animation:ribbonAway .7s cubic-bezier(.5,0,.2,1) both}
 .match-detail .recipient-name{animation:nameIn .6s ease .1s both}
 @keyframes ribbonAway{from{transform:translateX(0);opacity:1}to{transform:translateX(130%) rotate(1deg);opacity:0}}
 @keyframes nameIn{from{opacity:.15;transform:rotate(-1.2deg)}to{opacity:1;transform:none}}
 .stage-drawing{animation:drawEnter 1.4s ease-out both}
 .sealed{animation:drawCard .65s ease-out both}
 .stage-people li:nth-child(2) .sealed{animation-delay:.8s}
 .stage-people li:nth-child(3) .sealed{animation-delay:1.6s}
 .stage-people li:nth-child(4) .sealed{animation-delay:2.4s}
 .stage-people li:nth-child(5) .sealed{animation-delay:3.2s}
 .stage-people li:nth-child(n+6) .sealed{animation-delay:4s}
 .stage-progress{animation:drawProgress .5s ease-out 5s both}
 @keyframes drawEnter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
 @keyframes drawCard{from{opacity:0;transform:translateX(-30px) rotate(-8deg)}to{opacity:1;transform:none}}
 @keyframes drawProgress{from{opacity:0}to{opacity:1}}
}

@media(max-height:800px) and (min-width:701px){
 .stage{padding-top:34px}
 .stage h1{font-size:clamp(50px,min(6vw,9vh),80px)}
 .stage p{font-size:20px}
 .code-card{margin-top:22px}
 .stage-url{font-size:16px}
}

@media(max-width:700px){
 .snow{--hole-x1:18px;--hole-x2:calc(100vw - 18px)}
 .stage-grid{grid-template-columns:1fr;gap:26px}
 .top{padding:16px 20px}
 .top-note{display:none}
 .home,.room{padding:48px 20px}
 .home-grid{grid-template-columns:1fr;gap:26px}
 .home-grid{margin:34px 0}
 .paper,.join-home{padding:26px}
 .stage{padding:38px 24px}
 .stage h1{font-size:3.2rem}
 .stage p{font-size:19px}
 .code-card{margin-top:28px}
 .stage-url{font-size:16px}
 .tag{padding:24px 22px}
  .how p{font-size:19px}
 .wish-row{grid-template-columns:1fr}
 .recipient-name{font-size:2.4rem}
 .theme-night .top{padding:16px 20px}
}