/* A quieter welcome and readable, tactile controls for the seaside evening. */
.mode-3d:has(#welcome:not([hidden])) #main::before{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#f9f4eafc 0%,#f9f4eaf2 34%,#f9f4ea4d 58%,transparent 78%),url('./assets/candy-arrival.webp') center right/cover no-repeat,#fff4e7}
.mode-3d:has(#welcome:not([hidden])) .scene-vignette{opacity:0}
.mode-3d:has(#welcome:not([hidden])) .date-brand,.mode-3d:has(#welcome:not([hidden])) .date-brand small{color:#65384b;text-shadow:none}
.mode-3d:has(#welcome:not([hidden])) .top-actions .glass-button,.mode-3d:has(#welcome:not([hidden])) .top-actions .glass-icon{background:#fffaf0d9;color:#65384b;border-color:#e5a0b5}
.welcome{top:50%;left:8%;transform:translateY(-50%);max-width:510px;color:#65384b}
.welcome.entered{transform:translateY(calc(-50% - 14px))}
.welcome .pier-eyebrow{color:#b07079;font-size:11px;letter-spacing:3px}
.welcome h1{font-size:clamp(68px,7vw,106px);line-height:.97;color:#65384b;text-shadow:none;letter-spacing:-4px;margin:24px 0}
.welcome h1 em{color:#b34872}
.welcome>p:not(.pier-eyebrow):not(.loading-note){color:#785063;text-shadow:none;font-size:17px;line-height:1.6;max-width:320px;margin-bottom:28px}
.welcome .date-primary{background:#b34872;border-color:#b34872;color:#fffaf1;border-radius:4px;padding:16px 24px;font-size:14px;min-height:52px}
.sound-choice,.loading-note{color:#785063;font-size:12px}.sound-choice span{font-size:11px}.loading-note{letter-spacing:.2px}
.room-hud:not(.observatory-hud){background:#fffaf0ef;color:#65384b;border:1px solid #fdf8ec;box-shadow:0 14px 60px #65384b29;backdrop-filter:blur(16px)}
.room-hud:not(.observatory-hud) .pier-eyebrow{color:#ae6e79;font-size:10px;letter-spacing:2px}
.room-hud:not(.observatory-hud) p.room-copy,.cake-hud .room-copy{color:#785063!important;font-size:14px;line-height:1.55}
.room-hud:not(.observatory-hud) .glass-icon,.room-hud:not(.observatory-hud) .glass-button{background:#fffaf0;color:#65384b;border-color:#e5a0b5;min-height:44px;font-size:12px}
.room-hud:not(.observatory-hud) .date-primary{background:#b34872;color:#fffaf0;border-color:#b34872;min-height:44px;font-size:12px}
.room-hud:not(.observatory-hud) .hoop-scoreboard,.room-hud:not(.observatory-hud) .hoop-adjust,.room-hud:not(.observatory-hud) .prize-score{color:#65384b}
.room-hud:not(.observatory-hud) input{accent-color:#b34872}
.places-menu{background:#fffaf0f5;color:#65384b}.places-menu p{font-size:10px;color:#a96c78}.places-menu button{min-height:48px}
.duet-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(200px,.8fr);gap:28px;align-items:center;padding:0 32px 20px}
.duet-labels{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#785063;margin:0 0 8px}
.duet-preview{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:280px;background:#fffaf0;padding:6px;border-radius:8px;overflow:hidden}
.duet-preview>img,.duet-you img,.duet-you video{width:100%;height:100%;object-fit:contain;object-position:top;background:#e6ded3}.duet-you{position:relative;overflow:hidden;background:#eadbd6}.duet-you video{transform:scaleX(-1)}.duet-you #photo-placeholder{display:grid;place-items:center;text-align:center;height:100%;padding:12px;color:#886e6a;font:22px Georgia}.duet-countdown{position:absolute;inset:0;display:grid;place-items:center;background:#65384b44;color:white;font:80px Georgia}.duet-countdown[hidden],.duet-you [hidden]{display:none}
.duet-progress{text-align:center;color:#785063;font-size:13px}.duet-instructions h3{font:28px/1.15 Georgia;color:#65384b;margin:0 0 12px}.duet-instructions p{font-size:13px;line-height:1.6;color:#785063}.duet-instructions .primary,.duet-instructions .secondary{width:100%;min-height:48px;margin:6px 0}.duet-result .photo-strip{width:240px;max-height:47dvh;transform:none}.duet-result p{font-size:13px;color:#785063;text-align:center}.duet-result .scene-actions{padding:8px 12px}
@media(max-width:700px){
 .mode-3d:has(#welcome:not([hidden])) #main::before{background:linear-gradient(180deg,#f9f4eaff 0%,#f9f4eafc 40%,#f9f4eaaa 55%,#f9f4ea00 75%),url('./assets/candy-arrival.webp') center bottom/auto 70% no-repeat,#fff4e7}
 .pier-top{top:max(18px,env(safe-area-inset-top))}.date-brand small{font-size:7px}.welcome{top:max(112px,calc(env(safe-area-inset-top) + 95px));left:24px;right:24px;max-width:none;transform:none}.welcome.entered{transform:translateY(-14px)}.welcome h1{font-size:clamp(60px,17vw,78px);margin:17px 0;letter-spacing:-3px}.welcome>p:not(.pier-eyebrow):not(.loading-note){font-size:15px;line-height:1.5;max-width:260px;margin-bottom:18px}.sound-choice{margin-top:12px;max-width:none}.sound-choice span{margin-left:0}.loading-note{margin-top:9px}
 .room-hud{max-height:65dvh;overflow:auto}.room-hud:not(.observatory-hud) p.room-copy{font-size:13px}.room-hud:not(.observatory-hud) .glass-icon{width:44px;height:44px}.room-hud:not(.observatory-hud) .hud-actions button{min-height:44px;font-size:12px}.hoop-adjust label{font-size:12px}.hoop-scoreboard{font-size:12px}.hoop-scoreboard span:last-child{font-size:11px}
 .duet-layout{grid-template-columns:1fr;padding:0 18px 16px;gap:12px}.duet-preview{height:230px}.duet-instructions h3{font-size:23px}.duet-instructions p{margin:6px 0}.duet-instructions .primary,.duet-instructions .secondary{margin:4px 0}.duet-progress{margin:8px 0}.photo-room-3d .scene-header h2{font-size:28px}
}

.attraction-labels{position:absolute;inset:0;z-index:3;pointer-events:none}.attraction-labels[hidden]{display:none}.attraction-label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid #fff6e9b3;border-radius:4px;background:#fffaf0ed;color:#65384b;padding:9px 14px;font-size:12px;box-shadow:0 4px 20px #65384b1f;white-space:nowrap;cursor:pointer}.attraction-label::after{content:' ↗';color:#ab7c78}.attraction-label[hidden]{display:none}.attraction-label:hover{background:#fffaf0}.attraction-label:focus-visible{outline:3px solid #ba7c78;outline-offset:3px}.mode-3d .toast{background:#fffaf0ee;color:#65384b;border:1px solid #ddc9b2}.room-hud.hoop-hud{width:min(560px,calc(100% - 36px))}.room-hud.cake-hud{max-width:490px;bottom:22px}.cake-hud .hud-actions{gap:10px}.mode-3d .hud-caption{top:18%;font-size:clamp(20px,3vw,30px)}.room-hud:not(.observatory-hud) .audio-timeline{color:#785063}.room-hud:not(.observatory-hud) h2{color:#65384b}.observatory-hud .tour-progress span{flex:0 0 27px}.observatory-hud .tour-progress input{width:0;min-width:0}.mode-3d:has(#game-world[data-place=pier]) .scene-vignette{opacity:.2}
@media(max-width:700px){.attraction-label{font-size:11px;padding:8px 10px}.room-hud.hoop-hud{padding:15px 17px}.room-hud.hoop-hud h2{font-size:25px}.hoop-adjust{margin-top:8px}.hoop-scoreboard{margin-top:10px}.room-hud.cake-hud{bottom:18px;padding:16px 22px}.cake-hud h2{font-size:27px}.cake-hud .room-copy{margin-top:10px}.mode-3d .hud-caption{top:16%;max-width:80%}}

.mode-3d:has(#welcome:not([hidden])) #main::before{transition:opacity .9s ease}.mode-3d:has(#welcome.entered) #main::before{opacity:0}body::after{content:'';position:fixed;inset:0;pointer-events:none;background:#f4e9d7;opacity:0;z-index:55;transition:opacity .38s ease}.scene-fading::after{opacity:1}.scene-fading #walking-ui{opacity:0}@media(prefers-reduced-motion:reduce){body::after,.mode-3d:has(#welcome:not([hidden])) #main::before{transition:none}}

@media(max-height:600px){.welcome{top:max(82px,calc(env(safe-area-inset-top) + 72px));bottom:max(14px,env(safe-area-inset-bottom));max-height:calc(100dvh - 96px);overflow-y:auto;transform:none;padding:0 5px 12px 0}.welcome h1{font-size:44px;line-height:1.05;margin:12px 0;letter-spacing:-2px}.welcome h1 br{display:none}.welcome h1 em::before{content:' '}.welcome>p:not(.pier-eyebrow):not(.loading-note){font-size:14px;line-height:1.4;margin-bottom:12px}.welcome .date-primary{min-height:44px;padding:12px 20px}.welcome .sound-choice{margin-top:10px}.welcome .loading-note{font-size:10px;margin-top:8px}.welcome.entered{transform:translateY(-10px)}}

.attraction-label[data-edge=left]::after{content:' ←'}.attraction-label[data-edge=right]::after{content:' →'}

/* Strawberry, cream and lilac carry the candy-shop palette through every overlay. */
.mode-3d:has(#welcome:not([hidden])) #main::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.35;background:radial-gradient(circle at 12% 18%,#e5a0b5 0 3px,transparent 4px),radial-gradient(circle at 37% 76%,#c9acd9 0 4px,transparent 5px),radial-gradient(circle at 53% 17%,#e5a0b5 0 2px,transparent 3px);background-size:240px 220px,310px 280px,190px 250px;animation:candy-drift 18s ease-in-out infinite alternate}
@keyframes candy-drift{to{transform:translateY(-10px)}}
.room-hud,.room-hud.observatory-hud,.room-hud.cake-hud{background:#fff8f0f5;color:#65384b;border:1px solid #e5a0b5;box-shadow:0 14px 60px #65384b35}
.room-hud h2,.room-hud:not(.observatory-hud) h2,.observatory-hud #tour-caption,.room-hud .hud-song-line,.room-hud .memory-content,.room-hud .ending-name{color:#65384b!important}
.room-hud .pier-eyebrow,.room-hud:not(.observatory-hud) .pier-eyebrow,.tour-credit,.tour-progress{color:#9b4f70}
.room-hud p.room-copy,.room-hud:not(.observatory-hud) p.room-copy,.cake-hud .room-copy{color:#785063!important}
.room-hud .glass-button,.room-hud .glass-icon,.room-hud:not(.observatory-hud) .glass-button,.room-hud:not(.observatory-hud) .glass-icon,.star-shortcuts button,.aim-buttons button{background:#fff4e7;color:#65384b;border-color:#e5a0b5}
.room-hud .date-primary,.room-hud:not(.observatory-hud) .date-primary,.welcome .date-primary,.mode-3d dialog .primary{background:#b34872;border-color:#b34872;color:#fffaf5}
.room-hud .date-primary:hover,.welcome .date-primary:hover,.mode-3d dialog .primary:hover{background:#9d4168}
.room-hud input,.tour-progress input{accent-color:#b34872}
.star-shortcuts button.seen,.aim-buttons button[aria-pressed=true]{background:#f3cbd7;border-color:#b34872}
.throw-dots span{border-color:#b34872}.throw-dots .used{background:#b34872}
.mode-3d dialog,.mode-3d .photo-room-3d,.mode-3d dialog.room-dark{background:#fff8f0;color:#65384b;border-color:#e5a0b5}
.mode-3d dialog .scene-header p,.mode-3d dialog .fine-print,.duet-instructions p,.duet-result p,.duet-progress{color:#785063}
.mode-3d dialog .close,.mode-3d .room-dark .scene-top .close,.mode-3d dialog .secondary{color:#65384b;border-color:#e5a0b5}
.duet-preview,.duet-you,.duet-preview>img,.duet-you img,.duet-you video{background:#f8e3e7}.duet-countdown{background:#65384b66}
.mode-3d button:focus-visible,.mode-3d input:focus-visible{outline-color:#b34872}
@media(prefers-reduced-motion:reduce){.mode-3d:has(#welcome:not([hidden])) #main::after{animation:none}}

.npc-speech{position:fixed;z-index:7;max-width:220px;padding:12px 16px;background:#fff8f0f2;border:1px solid #e5a0b5;border-radius:18px 18px 18px 4px;box-shadow:0 7px 25px #65384b25;color:#65384b;font:500 14px/1.45 var(--display);text-align:center;transform:translate(-50%,-115%);pointer-events:none}.npc-speech::after{content:'';position:absolute;left:28px;bottom:-7px;width:12px;height:12px;transform:rotate(45deg);background:#fff8f0;border-right:1px solid #e5a0b5;border-bottom:1px solid #e5a0b5}.npc-speech[hidden]{display:none}

/* Keep the live HUD as legible as the arrival and activity cards. */
.mode-3d .top-actions .glass-button,.mode-3d .top-actions .glass-icon,.walking-bottom .glass-button,.walking-bottom .glass-icon{background:#fff8f0ed;color:#65384b;border-color:#e5a0b5}
.mode-3d .date-brand,.mode-3d .date-brand small{color:#65384b;text-shadow:0 1px 6px #fff8f0}
.walking-bottom #movement-hint,.location-label{color:#65384b;text-shadow:0 1px 5px #fff8f0}
.room-hud .hoop-scoreboard b{color:#9d4168}.room-hud .hoop-scoreboard span:last-child,.room-hud .hoop-adjust label{color:#785063}

.mode-3d:has(#game-world[data-telescope=open]) .date-brand,.mode-3d:has(#game-world[data-telescope=open]) .date-brand small,.mode-3d:has(#game-world[data-place=music]) .date-brand,.mode-3d:has(#game-world[data-place=music]) .date-brand small{color:#fff8f0;text-shadow:0 1px 5px #21172d}

@media(max-width:700px) and (max-height:600px){.mode-3d:has(#welcome:not([hidden])) #main::before{background:linear-gradient(90deg,#f9f4eafc 0%,#f9f4eae0 35%,#f9f4ea55 70%,#f9f4ea15),url('./assets/candy-arrival.webp') center bottom/cover no-repeat,#fff4e7}}

/* Reachable objects, quiet contextual prompts, and optional keepsakes. */
.play-action-wrap{position:absolute;left:50%;bottom:125px;transform:translateX(-50%);max-width:min(360px,calc(100vw - 36px));text-align:center;pointer-events:auto;padding:12px 16px;background:#fff8f0ef;border:1px solid #e5a0b5;border-radius:18px;box-shadow:0 8px 32px #65384b20}.play-action-wrap[hidden]{display:none}.play-action-wrap .date-primary{background:#b34872;color:#fff8f0;border-color:#b34872;min-height:46px;min-width:170px;font-size:13px;padding:12px 22px}.play-action-wrap p{font-size:12px;line-height:1.45;color:#785063;margin:8px 0 0}.interact.secondary-interaction{bottom:70px;font-size:11px;padding:9px 15px;min-height:40px}.moments-note{position:absolute;top:145px;left:35px;color:#65384b;background:#fff8f0d9;padding:8px 12px;border-radius:20px;border:1px solid #e5a0b5;font-size:11px}.moments-note[hidden]{display:none}
@media(max-width:700px){.play-action-wrap{left:auto;right:16px;bottom:165px;transform:none;width:230px;max-width:calc(100vw - 40px);padding:12px}.play-action-wrap p{font-size:11px}.interact.secondary-interaction{bottom:104px;left:auto;right:16px;transform:none;max-width:230px;white-space:normal}.moments-note{left:18px;top:130px;font-size:10px}.play-action-wrap .date-primary{width:100%;min-width:0}}
@media(max-height:480px){.play-action-wrap{bottom:78px;max-width:260px;right:18px;left:auto;transform:none}.play-action-wrap p{display:none}.interact.secondary-interaction{bottom:24px;left:50%}.moments-note{top:80px}}

.asset-credits{display:block;margin-top:14px;padding:8px 10px;color:#9d4168;font-size:11px;text-decoration:underline;text-underline-offset:3px}

.mode-3d:has(#play-action-wrap:not([hidden])) .toast{bottom:243px}
@media(max-width:700px){.mode-3d:has(#play-action-wrap:not([hidden])) .toast{bottom:310px}}
@media(max-height:480px){.mode-3d:has(#play-action-wrap:not([hidden])) .toast{bottom:175px}}
.places-menu{max-height:calc(100dvh - 165px);overflow-y:auto}

/* Walking controls stay out of the view until they are useful. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.location-label{display:none}
.play-action-wrap{left:50%;right:auto;bottom:105px;transform:translateX(-50%);width:auto;max-width:calc(100vw - 40px);padding:0;background:none;border:0;box-shadow:none}
.play-action-wrap .date-primary,.interact{min-height:44px;min-width:0;max-width:min(300px,calc(100vw - 40px));padding:10px 18px;border:1px solid #b34872;border-radius:999px;background:#b34872;color:#fffaf5;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 24px #65384b25}
.play-action-wrap .date-primary:hover,.interact:hover{background:#9d4168}
.interact.secondary-interaction{display:none}
.moments-note{top:115px;left:35px;width:36px;height:36px;display:grid;place-items:center;padding:0;font-size:0;border-radius:50%}
.moments-note::before{content:'♡';font-size:20px}
#walk-help-toggle[hidden],#walk-help[hidden]{display:none}
#walk-help-toggle{width:44px;height:44px;min-height:44px;font-size:17px;font-weight:700}
.walk-help{position:fixed;z-index:12;top:max(80px,calc(env(safe-area-inset-top) + 65px));right:35px;width:min(310px,calc(100vw - 40px));max-height:calc(100dvh - 95px);overflow:auto;padding:18px 20px;border:1px solid #e5a0b5;border-radius:16px;background:#fff8f0f7;box-shadow:0 12px 48px #65384b30;color:#65384b}
.walk-help-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.walk-help h2{margin:0;font:500 22px var(--display)}.walk-help .glass-icon{width:44px;height:44px;min-height:44px;flex:none;background:#fff4e7;color:#65384b;border-color:#e5a0b5}.walk-help p{font-size:13px;line-height:1.5;margin:10px 0 0;color:#65384b}
@media(max-width:700px){.play-action-wrap{left:auto;right:20px;bottom:104px;transform:none;width:auto;max-width:calc(100vw - 145px)}.play-action-wrap .date-primary{width:auto;max-width:100%}.interact{right:20px;bottom:104px;max-width:calc(100vw - 145px);white-space:nowrap}.moments-note{left:20px;top:90px}.walk-help{right:20px}.walking-bottom #movement-hint{max-width:125px;letter-spacing:0}}
@media(max-height:480px){.play-action-wrap{left:auto;right:20px;bottom:75px;transform:none;max-width:calc(100vw - 145px)}.interact{left:auto;right:20px;bottom:75px;transform:none}.moments-note{top:80px}.walk-help{top:65px;max-height:calc(100dvh - 80px)}}

#birthday-sky-info{width:min(460px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #e9c4b5;border-radius:18px;padding:24px;background:#fff8ef;color:#553b49;box-shadow:0 16px 65px #39273c66;font:14px/1.65 var(--body)}#birthday-sky-info::backdrop{background:#30253499}#birthday-sky-info p{margin:12px 0}#birthday-sky-info a{color:#994462;text-underline-offset:3px}.birthday-sky-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.birthday-sky-heading h2{font:500 27px/1.15 var(--display);margin:0}.birthday-sky-heading button{flex:none;width:44px;height:44px;border:1px solid #d9b3b9;border-radius:50%;background:#fff1e6;color:#71465b;font-size:24px}