@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500&display=swap');
:root{color-scheme:dark;--gold:#ecd2a0;--serif:'Noto Serif SC',Georgia,serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#101b2b;color:#f0eadf;font:16px/1.7 system-ui,sans-serif}button,input,textarea{font:inherit}button{color:var(--gold);cursor:pointer;border:1px solid #ecd2a044;border-radius:24px;padding:9px 16px;background:#ecd2a00b;min-height:44px}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:4px}header{max-width:1450px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 5%;border-bottom:1px solid #ffffff16}a{color:var(--gold);text-decoration:none}.brand{font:29px Georgia,serif}.other-night{font-size:14px}main{max-width:1450px;padding:30px 5% 0;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--gold)}h1{font:400 clamp(29px,3.5vw,48px)/1.5 var(--serif);margin:0}.intro>p{font-size:14px;color:#aab8c6}.waterfront{border-radius:15px;overflow:hidden;background:#17273a;border:1px solid #ecd2a022}.scene-stage{position:relative;aspect-ratio:1672/941;overflow:hidden;isolation:isolate;touch-action:none;overscroll-behavior:contain}.base-scene,.cafe-light{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--approach,1));transform-origin:58% 64%;transition:transform .25s ease-out}.cafe-light{clip-path:polygon(0 0,26% 0,35% 58%,30% 76%,0 88%);opacity:0;filter:brightness(.4);transition:opacity 1s}.dim-cafe .cafe-light{opacity:1}.entry-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#06122411,#061224ba);opacity:0;transition:opacity 1s;pointer-events:none}.awaiting .entry-shade{opacity:1}.spot{position:absolute;z-index:4;width:44px;height:44px;padding:0;transform:translate(-50%,-50%);border:0;background:none;touch-action:none}.spot>span{display:grid;place-items:center;width:27px;height:27px;margin:auto;border:1px solid #ffe0a8bb;border-radius:50%;font-size:0;background:#18304622;box-shadow:0 0 0 5px #edce951a}.spot.guided>span{animation:pulse 2s ease-in-out infinite}.start-hit{left:50%;top:45%;width:64px;height:64px;border:1px solid #ffe8b8;background:#ecd2a0;color:#1a2b40;border-radius:50%;font-size:27px;padding-left:4px;box-shadow:0 0 40px #fbd39855;animation:pulse 2s ease-in-out infinite}.cup-hit{left:15%;top:78%}.window-hit{left:10%;top:44%}.walk-hit{left:51%;top:78%}.walk-hit>span{font-size:30px;border:0;box-shadow:none;animation:walkCue 1.8s infinite}.cafe-hit{left:23%;top:25%}.wish-hit{left:72%;top:35%}.sky-hit{position:absolute;left:31%;top:4%;width:67%;height:47%;border:0;background:none;z-index:3;touch-action:none;cursor:crosshair}.sky-hit>span{font-size:35px;opacity:.8;animation:pulse 2s infinite}.sky-hit.used>span{opacity:0;animation:none}#fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}#cupFocus{position:absolute;inset:0;z-index:8;background:#06132645;backdrop-filter:blur(3px)}#heldCup{position:absolute;left:50%;top:50%;width:24%;height:76%;transform:translate(-50%,-50%) rotateY(var(--cup-turn,0deg));padding:0;border:0;border-radius:0;background:none;touch-action:none;transition:transform .55s,opacity .55s;filter:drop-shadow(0 12px 20px #0008)}#heldCup img{width:100%;height:100%;object-fit:contain}#heldCup.sipping{transform:translate(-50%,-36%) scale(1.12) rotate(-13deg)}#heldCup.setting-down{transform:translate(-190%,10%) scale(.2);opacity:0}#glassFocus{position:absolute;left:6%;top:8%;width:76%;height:82%;z-index:8;overflow:hidden;border:2px solid #d2b88766;box-shadow:0 12px 35px #0007}#glassFocus>img{width:100%;height:100%;object-fit:cover;object-position:80% 50%;filter:blur(1px)}#fogCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.below-scene{padding:0 20px 16px}#sceneLine{font:16px/1.9 var(--serif);color:#e7d6b6;text-align:center;min-height:66px;margin:0;padding:20px 5px 8px}.step-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.controls{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}.controls button{font-size:13px;padding:5px 11px;min-height:38px}#countdown{text-align:center;font:36px/1.5 var(--serif);color:var(--gold);margin:8px 0}#countdown:empty{display:none}#wishForm,#glassTools{max-width:600px;margin:12px auto 20px}label{display:block;font-size:14px;color:#d8dfdf;margin:10px 0}textarea,input{display:block;width:100%;background:#101e30;border:1px solid #d8bd8766;border-radius:8px;padding:12px;color:#eee;font-size:16px;line-height:1.7;resize:vertical}.suggestions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}#wishForm>button,#glassTools>button{margin:5px 5px 0 0}#wishForm>button[type=submit]{background:var(--gold);color:#17273a}.fine{font-size:13px;color:#9facba}#afterglow{text-align:center;padding:30px 10px}#savedWish{font:24px/1.8 var(--serif);white-space:pre-wrap;overflow-wrap:anywhere}#afterglow details{max-width:550px;text-align:left;margin:25px auto}summary{cursor:pointer;color:var(--gold)}footer{display:flex;justify-content:space-between;gap:20px;color:#9aa8b6;font-size:12px;border-top:1px solid #fff2;padding:22px 0}.intro,.scene-stage,.scene-stage *,#sceneLine,.step-actions,.controls{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.scene-stage img{-webkit-user-drag:none;pointer-events:none}input,textarea{-webkit-user-select:text;user-select:text;touch-action:auto}.step-actions button,.controls button{touch-action:manipulation}@keyframes pulse{50%{box-shadow:0 0 0 11px #edce950c,0 0 28px #edce9566;opacity:.6}}@keyframes walkCue{50%{transform:translateY(-9px)}}@media(max-width:750px){header{padding:20px}.brand{font-size:25px}.other-night{font-size:13px}main{padding:24px 14px 0}.intro{display:block}.intro>p br{display:none}.eyebrow{font-size:11px}.below-scene{padding:0 14px 14px}#sceneLine{font-size:15px;min-height:82px}#heldCup{width:30%;height:85%}#glassFocus{left:4%;top:5%;width:90%;height:90%}.controls{justify-content:center;gap:5px}.controls button{font-size:12px;padding:5px 8px}footer{display:block}footer>span{display:block;margin-bottom:8px}#savedWish{font-size:21px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The opaque fog sits above the note: only wiped paths reveal the words. */
#glassFocus .gift-glass-words{position:absolute;inset:8% 10%;z-index:1;display:flex;align-items:center;justify-content:center;margin:0;min-height:0;line-height:1.5;color:#fff4d8;text-shadow:0 2px 7px #081222,0 0 18px #071322;pointer-events:none;white-space:pre-wrap;overflow-wrap:anywhere}
#fogCanvas{z-index:2}