:root { --ink:#fff9f2; --muted:#d1bed3; --plum:#2b153d; --plum-dark:#170c27; --pink:#fa8fab; --gold:#ffc975; --line:rgba(255,255,255,.15); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--plum-dark); font-family:"Plus Jakarta Sans",sans-serif; overflow-x:hidden; }
.sky { position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 78% 16%,rgba(235,95,159,.27),transparent 27rem),radial-gradient(circle at 11% 55%,rgba(99,66,174,.35),transparent 30rem),linear-gradient(145deg,#291342 0%,#180c2b 65%,#11091e 100%); }
.sky:after { content:""; position:absolute; inset:0; opacity:.34; background-image:radial-gradient(#fff 1px,transparent 1.5px); background-size:90px 90px; background-position:11px 26px; }
main { max-width:1180px; margin:auto; padding:0 38px; } nav { height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }.brand { color:var(--ink); font-size:19px; letter-spacing:0; text-decoration:none; text-transform:none; font-family:"Playfair Display",serif; }.brand em { color:var(--pink); }
.hero { min-height:670px; padding:118px 0 80px; }.eyebrow { margin:0 0 17px; color:var(--gold); font:500 11px "DM Mono",monospace; letter-spacing:.15em; text-transform:uppercase; }.hero h1,.section-heading h2,.finale h2 { font:600 clamp(45px,7vw,86px)/.98 "Playfair Display",serif; margin:0; letter-spacing:-.055em; }.hero em,.section-heading em,.finale em { color:var(--pink); font-weight:500; }.intro { max-width:435px; margin:30px 0; color:var(--muted); font-size:16px; line-height:1.7; }.countdown { display:flex; align-items:center; gap:23px; margin:42px 0 36px; }.countdown div { display:grid; gap:4px; }.countdown strong { font:600 34px "Playfair Display",serif; }.countdown span { color:var(--muted); font:10px "DM Mono",monospace; text-transform:uppercase; }.countdown i { width:3px; height:3px; border-radius:50%; background:var(--pink); }.scroll-link { color:var(--ink); text-decoration:none; text-transform:uppercase; font:500 11px "DM Mono",monospace; letter-spacing:.08em; }.scroll-link span { color:var(--pink); font-size:17px; margin-left:8px; }
.today-wrap { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:80px; padding:105px 0; border-top:1px solid var(--line); }.section-heading h2 { font-size:clamp(39px,5vw,61px); }.section-heading > p:not(.eyebrow), .finale > p:not(.eyebrow) { max-width:390px; color:var(--muted); line-height:1.7; margin-top:20px; font-size:15px; }.daily-card { min-height:460px; border:1px solid rgba(255,201,117,.35); padding:24px 29px 28px; position:relative; overflow:visible; background:linear-gradient(160deg,rgba(250,143,171,.15),rgba(90,48,129,.17)); box-shadow:18px 18px 0 rgba(255,255,255,.035); }.card-topline { display:flex; justify-content:space-between; color:var(--gold); font:10px "DM Mono",monospace; letter-spacing:.11em; }.game-instruction { margin:14px 0 11px; text-align:center; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }.game-stage { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.13); background:#271a4a; touch-action:none; }.game-stage canvas { display:block; width:100%; height:auto; aspect-ratio:3/2; image-rendering:pixelated; }.game-hud { position:absolute; inset:12px 13px auto; display:flex; align-items:center; justify-content:space-between; color:var(--gold); font:10px "DM Mono",monospace; letter-spacing:.09em; pointer-events:none; }.game-hud button { pointer-events:auto; color:var(--gold); font-size:21px; line-height:1; }.game-controls { position:absolute; right:13px; bottom:12px; display:grid; grid-template:30px 30px / 30px 30px 30px; gap:2px; opacity:.85; }.game-controls button { display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:4px; background:rgba(27,12,48,.65); color:var(--ink); font:17px "DM Mono",monospace; }.game-controls button[data-move="up"] { grid-column:2; }.game-controls button[data-move="left"] { grid-column:1; grid-row:2; }.game-controls button[data-move="down"] { grid-column:2; grid-row:2; }.game-controls button[data-move="right"] { grid-column:3; grid-row:2; }.letter-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:25px; background:rgba(20,8,36,.82); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:50; }
.letter-overlay.open { opacity:1; pointer-events:auto; }
.letter-paper { position:relative; overflow:visible; width:min(100%,390px); padding:46px 27px 25px; background:#fff4e8; color:#44203e; text-align:center; border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,.45), 9px 11px 0 rgba(255,201,117,.28); transform:translateY(14px) rotate(1deg); transition:transform .35s cubic-bezier(.175,.885,.32,1.275); }
.letter-overlay.open .letter-paper { transform:translateY(0) rotate(-1deg); }
.letter-character-wrapper { position:absolute; top:-62px; left:50%; transform:translateX(-50%); width:120px; height:120px; pointer-events:none; z-index:10; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.3)); animation:characterFloat 3s ease-in-out infinite; }
@keyframes characterFloat { 0%, 100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-6px); } }
#letter-character-canvas { width:100%; height:100%; display:block; }
.letter-paper .eyebrow { color:#b55078; }
.letter-copy { margin:10px 0 16px; white-space:pre-line; font:500 19px/1.55 "Playfair Display",serif; color:#3d1a38; }
.letter-paper button { margin-top:14px; color:#a7496d; background:rgba(250,143,171,.15); border:1px solid rgba(250,143,171,.4); padding:9px 20px; border-radius:999px; cursor:pointer; font:500 12px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; transition:.2s; }
.letter-paper button:hover { background:rgba(250,143,171,.3); transform:translateY(-2px); }
.letter-paper button span { color:#d77794; font-size:15px; margin-left:4px; }
.tap-heart { position:fixed; pointer-events:none; z-index:9999; font-size:26px; color:var(--pink); text-shadow:0 0 12px rgba(250,143,171,.8),0 0 24px rgba(250,143,171,.4); user-select:none; animation:tapHeartFade .9s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes tapHeartFade { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(var(--rot,0deg)) translateY(0); } 20% { opacity:1; transform:translate(-50%,-50%) scale(1.25) rotate(var(--rot,0deg)) translateY(-12px); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.95) rotate(var(--rot,0deg)) translateY(-55px); } }
.collection { padding:110px 0; border-top:1px solid var(--line); }.collection .section-heading { display:grid; grid-template-columns:1.1fr .9fr; column-gap:40px; }.collection .eyebrow { grid-column:1/-1; }.collection .section-heading > p:not(.eyebrow) { margin:7px 0 0; align-self:end; }.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-top:55px; }.day { aspect-ratio:1; min-height:72px; padding:12px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--muted); transition:.25s; }.day b { font:500 10px "DM Mono",monospace; }.day span { font-size:18px; align-self:flex-end; }.day.available { border-color:rgba(250,143,171,.6); color:var(--ink); cursor:pointer; background:rgba(250,143,171,.10); }.day.available:hover { transform:translateY(-4px); background:rgba(250,143,171,.2); }.day.today { outline:2px solid var(--gold); outline-offset:3px; }.day.final-day { background:var(--pink); color:#3a1430; border-color:var(--pink); }.day.final-day span { color:#3a1430; }
.finale { text-align:center; padding:135px 20px 145px; border-top:1px solid var(--line); }.finale .eyebrow { margin-top:34px; }.finale h2 { font-size:clamp(45px,6vw,75px); }.finale > p:not(.eyebrow) { margin:25px auto 32px; }.cake { position:relative; width:128px; height:115px; margin:auto; }.cake-bottom,.cake-top,.icing,.candle,.flame { position:absolute; left:50%; transform:translateX(-50%); }.cake-bottom { bottom:0; width:128px; height:52px; border-radius:7px 7px 15px 15px; background:#e8729a; }.cake-top { bottom:48px; width:108px; height:24px; border-radius:60px 60px 5px 5px; background:#ffc4d2; }.icing { bottom:41px; width:108px; height:12px; border-radius:0 0 50% 50%; background:#ffe7e9; }.candle { bottom:72px; height:29px; width:10px; border-radius:4px; background:repeating-linear-gradient(45deg,#ffe379 0 3px,#fa8fab 3px 6px); }.flame { bottom:102px; width:12px; height:18px; border-radius:100% 0 100% 100%; transform:translateX(-50%) rotate(-45deg); background:var(--gold); box-shadow:0 0 20px var(--gold); }.locked { color:var(--muted); cursor:not-allowed; }.locked span { color:var(--pink); font-size:18px; margin-left:7px; } footer { padding:28px; text-align:center; border-top:1px solid var(--line); color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; } footer span { color:var(--pink); font-size:16px; vertical-align:middle; }
@media (max-width:700px) { main { padding:0 22px; } nav { height:76px; } nav #date-label { display:none; }.hero { min-height:610px; padding:90px 0 68px; }.today-wrap { grid-template-columns:1fr; gap:44px; padding:80px 0; }.daily-card { min-height:420px; padding:19px 15px 15px; }.game-hud { inset:9px 10px auto; }.game-controls { right:9px; bottom:9px; }.collection { padding:80px 0; }.collection .section-heading { display:block; }.calendar { grid-template-columns:repeat(5,1fr); gap:9px; margin-top:40px; }.day { min-height:58px; padding:8px; }.day span { font-size:14px; }.finale { padding:100px 5px; } }