@font-face{font-family:Varela Round;src:url(../fonts/varela-round-latin.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--bg:#ffd1dc;--text:#222;--accent:#9d84b6;--accent-hover:#9079a7;--baby-blue:#b3e5fc;--cream:#fff9c4;--mint:#b9f6ca;--white:#fff;--pink:#ff8fb1;--paper:#fffdf3;--error:#c62860;--r-sm:20px;--r-md:40px;--r-lg:60px;--space:.5rem;--ease:cubic-bezier(.22, 1, .36, 1);--shadow-card:0 2px 12px #0000000f;--shadow-lift:0 6px 16px #9d84b659;--font:"Varela Round", ui-rounded, system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent;margin:0;font-size:1rem;line-height:1.6;overflow-x:hidden}[data-screen]{min-height:100dvh;padding:calc(var(--space) * 3);padding-top:max(calc(var(--space) * 3), env(safe-area-inset-top));padding-bottom:max(calc(var(--space) * 3), env(safe-area-inset-bottom));justify-content:center;align-items:center;gap:calc(var(--space) * 3);text-align:center;flex-direction:column;display:none}[data-screen].is-active{display:flex}[data-screen=game]{padding:0}#game-canvas{touch-action:none;width:100%;height:100dvh;display:block}h1{margin:0;font-size:clamp(2rem,8vw,2.5rem);font-weight:700;line-height:1.2}.btn-primary{font:inherit;color:var(--white);background:var(--accent);border-radius:var(--r-sm);cursor:pointer;min-height:48px;transition:background-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);border:none;padding:12px 28px;font-size:1.125rem;font-weight:600}.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-lift)}.btn-primary:active{transform:translateY(1px)}.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card{background:var(--cream);border-radius:var(--r-sm);box-shadow:var(--shadow-card);padding:calc(var(--space) * 3);border:1px solid #22222214;width:100%;max-width:420px}[data-screen=game]{position:relative;overflow:hidden}.hud{top:max(16px, env(safe-area-inset-top));background:var(--cream);border-radius:var(--r-sm);box-shadow:var(--shadow-card);pointer-events:none;-webkit-user-select:none;user-select:none;border:1px solid #22222214;padding:6px 20px;font-size:1.375rem;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.hud--error{text-align:center;width:max-content;max-width:90vw;font-size:1rem}.rotate-overlay{z-index:300;background:var(--bg);justify-content:center;align-items:center;gap:calc(var(--space) * 2);text-align:center;flex-direction:column;font-size:1.5rem;display:none;position:fixed;inset:0}@media (orientation:landscape) and (pointer:coarse){.rotate-overlay{display:flex}body:has(input:focus) .rotate-overlay{display:none}}[data-screen].is-active{animation:screen-in .2s var(--ease)}@keyframes screen-in{0%{opacity:0}}.is-active .enter{animation:enter-up .42s var(--ease) both}.is-active .enter:nth-child(2){animation-delay:80ms}.is-active .enter:nth-child(3){animation-delay:.16s}.is-active .enter:nth-child(4){animation-delay:.24s}.is-active .enter:nth-child(5){animation-delay:.32s}.is-active .enter:nth-child(6){animation-delay:.4s}@keyframes enter-up{0%{opacity:0;transform:translateY(16px)}}.stack{gap:calc(var(--space) * 1.5);text-align:left;flex-direction:column;display:flex}.lead{max-width:34ch;margin:0;font-size:1.0625rem}.mascot{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;display:block}.friends{align-items:flex-end;gap:calc(var(--space) * 1);display:flex}.float{animation:3.2s ease-in-out infinite float}.float--late{animation-delay:-1.6s}@keyframes float{50%{transform:translateY(-8px)}}.bounce{animation:bounce 1.2s var(--ease) infinite}@keyframes bounce{50%{transform:translateY(-14px)scale(1.04)}}.field-label{letter-spacing:.02em;font-size:.875rem;font-weight:500}.field-input{font:inherit;color:var(--text);background:var(--white);border-radius:var(--r-sm);border:1px solid #22222226;min-height:48px;padding:12px 16px;font-size:1.125rem}.field-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.field-error{min-height:1.6em;color:var(--error);margin:0;font-size:.875rem}.shake{animation:shake .36s var(--ease)}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}[data-screen=celebration]{position:relative;overflow:hidden}.confetti{pointer-events:none;z-index:0;position:absolute;inset:0}.confetti-piece{opacity:0;border-radius:4px;width:12px;height:16px;animation-name:confetti-fall;animation-timing-function:ease-out;animation-iteration-count:infinite;position:absolute;top:-16px}@keyframes confetti-fall{0%{opacity:1;transform:translate(0,0)rotate(0)}to{opacity:.6;transform:translate3d(var(--drift), 105dvh, 0) rotate(var(--spin))}}[data-screen=celebration]>:not(.confetti){z-index:1;position:relative}[data-screen=reward]{padding-top:max(calc(var(--space) * 5), env(safe-area-inset-top));justify-content:flex-start;position:relative;overflow-x:hidden}.sky{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.sky-item{opacity:0;animation:linear infinite sky-rise;position:absolute;top:100%}.sky-item svg{filter:drop-shadow(0 2px 3px #9d84b640);display:block}@keyframes sky-rise{0%{opacity:0;transform:translate(0,0)rotate(-8deg)}15%{opacity:.85}50%{transform:translate3d(var(--sway), -55dvh, 0) rotate(8deg)}85%{opacity:.85}to{opacity:0;transform:translateY(-110dvh)rotate(-8deg)}}.reward-stage{z-index:1;align-items:center;gap:calc(var(--space) * 4);flex-direction:column;width:100%;max-width:420px;display:flex;position:relative}.reward-title{animation:enter-up .42s var(--ease) both}.reward-closed,.reward-open{flex-direction:column;align-items:center;width:100%;display:none}.reward-stage[data-state=closed] .reward-closed,.reward-stage[data-state=opening] .reward-closed{gap:calc(var(--space) * 3);padding-top:calc(min(300px,80vw)/2.38095);display:flex}.reward-stage[data-state=open] .reward-open{gap:calc(var(--space) * 5);display:flex}.envelope{--env-w:min(300px, 80vw);width:var(--env-w);aspect-ratio:3/2;cursor:pointer;perspective:900px;animation:enter-up .42s var(--ease) both, envelope-wiggle 3.6s ease-in-out 1s infinite;background:0 0;border:none;padding:0;position:relative}.envelope>span{display:block;position:absolute}.env-back{border-radius:var(--r-sm);background:#b9a2d6;inset:0;box-shadow:0 12px 28px #9d84b666}.env-paper{z-index:1;background:var(--paper);height:84%;transition:transform .52s var(--ease) .42s;border-radius:10px;padding:14% 10% 0;top:8%;left:8%;right:8%}.env-paper-line{background:#9d84b64d;border-radius:3px;height:6px;margin-bottom:10px;display:block}.env-paper-line:nth-child(2){width:80%}.env-paper-line:nth-child(3){width:55%}.env-pocket{z-index:2;border-radius:var(--r-sm);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);background:#cdbbe8;inset:0}.env-flap{z-index:3;border-radius:var(--r-sm) var(--r-sm) 0 0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;height:62%;transition:transform .45s var(--ease), z-index 0s linear .2s;background:#a98fca;top:0;left:0;right:0}.env-seal{z-index:4;background:var(--pink);border:4px solid var(--white);width:60px;height:60px;transition:transform .25s var(--ease), opacity .25s var(--ease);border-radius:50%;place-items:center;margin:-30px 0 0 -30px;top:62%;left:50%;box-shadow:0 4px 10px #f26b6b59;display:grid!important}.env-seal-pig{display:block}.env-buddy{z-index:5;position:absolute;top:-40px;right:-18px}.env-hint{color:var(--accent-hover);margin:0;font-size:1.125rem;font-weight:500;animation:1.6s ease-in-out infinite hint-pulse}.reward-stage[data-state=opening] .envelope{animation:none}.reward-stage[data-state=opening] .env-flap{z-index:0;transform:rotateX(180deg)}.reward-stage[data-state=opening] .env-seal{opacity:0;transform:scale(.6)}.reward-stage[data-state=opening] .env-paper{transform:translateY(-46%)}.reward-stage[data-state=opening] .env-hint{opacity:0;animation:none}@keyframes envelope-wiggle{0%,80%,to{transform:rotate(0)}84%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}92%{transform:rotate(-2deg)}96%{transform:rotate(1deg)}}@keyframes hint-pulse{50%{opacity:.55;transform:scale(.97)}}.letter-paper{--line:1.75rem;width:100%;padding:calc(var(--line) * 1.5) 22px var(--line) 44px;text-align:left;font-size:1.0625rem;line-height:var(--line);background-color:var(--paper);background-image:linear-gradient(90deg, transparent 30px, #ff8fb173 30px 32px, transparent 32px), repeating-linear-gradient(transparent 0 calc(var(--line) - 1px), #7cc8f059 calc(var(--line) - 1px) var(--line));background-position:0 0, 0 calc(var(--line) * 1.5);border-radius:var(--r-sm);animation:letter-in .6s var(--ease) both;margin:0;position:relative;transform:rotate(-1deg);box-shadow:0 2px #9d84b61f,0 14px 30px #9d84b647}.washi{opacity:.85;background:repeating-linear-gradient(-45deg, var(--mint) 0 8px, var(--white) 8px 14px);border-radius:3px;width:92px;height:26px;position:absolute;top:-12px;box-shadow:0 1px 3px #00000014}.washi--left{left:-10px;transform:rotate(-12deg)}.washi--right{background:repeating-linear-gradient(45deg, var(--baby-blue) 0 8px, var(--white) 8px 14px);right:-10px;transform:rotate(10deg)}.letter-line{margin:0 0 var(--line);animation:enter-up .52s var(--ease) both}.letter-greeting{color:var(--accent-hover);font-size:1.2rem;font-weight:700}.letter-signature{text-align:right;color:var(--accent-hover);margin:0;font-size:1.15rem;font-weight:700}.letter-heart{color:var(--pink);vertical-align:-4px;animation:1.4s ease-in-out infinite heart-beat;display:inline-block}.letter-heart svg{display:block}.letter-sticker{filter:drop-shadow(0 3px 4px #9d84b659);position:absolute;bottom:-18px;left:-14px;transform:rotate(-14deg)}@keyframes letter-in{0%{opacity:0;transform:translateY(40px)rotate(-4deg)scale(.94)}}@keyframes heart-beat{0%,60%,to{transform:scale(1)}30%{transform:scale(1.22)}}.gallery{align-items:center;gap:calc(var(--space) * 2);width:100%;animation:enter-up .52s var(--ease) both;flex-direction:column;display:flex}.gallery[hidden]{display:none}.gallery-title{margin:0;font-size:1.5rem}.polaroid-pile{width:min(290px,76vw);margin:calc(var(--space) * 1) 0 calc(var(--space) * 2);touch-action:pan-y;-webkit-user-select:none;user-select:none;position:relative}.polaroid{background:var(--white);border-radius:6px;margin:0;padding:12px 12px 0;box-shadow:0 10px 24px #9d84b659}.polaroid[hidden]{display:none}.polaroid--back2,.polaroid--back1{position:absolute;inset:0}.polaroid--back2{transform:rotate(6deg)translate(10px,4px)}.polaroid--back1{transform:rotate(-5deg)translate(-8px,2px)}.polaroid--top{transition:transform .34s var(--ease), opacity .34s var(--ease);position:relative;transform:rotate(-1.5deg)}.polaroid--top.is-flying{opacity:0;transform:translate(-120%)rotate(-18deg)}.polaroid--top.no-transition{transition:none}.polaroid--top.is-settling{animation:polaroid-settle .38s var(--ease)}@keyframes polaroid-settle{0%{transform:rotate(-5deg)translate(-8px,2px)scale(.97)}}.polaroid-photo{aspect-ratio:4/5;object-fit:cover;background:var(--cream);-webkit-user-drag:none;border-radius:2px;width:100%;display:block}.polaroid-caption{height:52px;color:var(--accent-hover);letter-spacing:.04em;place-items:center;font-size:1.05rem;font-weight:500;display:grid}.gallery-controls{justify-content:center;align-items:center;gap:calc(var(--space) * 2);display:flex}.gallery-counter{min-width:4ch;font-weight:500}.replay-btn{margin-bottom:calc(var(--space) * 3);animation:enter-up .52s var(--ease) both}.icon-btn{width:48px;height:48px;color:var(--white);background:var(--accent);cursor:pointer;transition:background-color .2s var(--ease), transform .2s var(--ease);border:none;border-radius:50%;place-items:center;display:grid}.icon-btn:hover{background:var(--accent-hover)}.icon-btn:active{transform:translateY(1px)}.icon-btn[hidden]{display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:1ms!important;animation-iteration-count:1!important}.sky-item{top:var(--y);opacity:.6;animation:none!important}.envelope>span{transition:none!important}}