/* One warm glass material for controls; the game stays visible behind it. */
:root{--glass-fill:rgba(255,247,240,.63);--glass-edge:rgba(255,255,255,.64);--glass-ink:#4d303c;--glass-shadow:0 8px 28px rgba(52,31,40,.12),inset 0 1px 0 rgba(255,255,255,.65);--glass-blur:blur(18px) saturate(1.18)}
.mode-3d .welcome,.mode-3d .room-hud,.mode-3d .intro-tour,.mode-3d .date-companion,.mode-3d .places-menu,.mode-3d .walk-help,.mode-3d .icecream-menu,.mode-3d #birthday-sky-info,.mode-3d dialog.photo-room-3d,.mode-3d dialog.room-dark,.mode-3d .npc-speech,.mode-3d .toast{background:var(--glass-fill);border:1px solid var(--glass-edge);border-radius:22px;color:var(--glass-ink);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.mode-3d .welcome{border-radius:26px;padding:25px 28px;box-shadow:0 12px 40px #5035401c,inset 0 1px 0 #ffffffb0}
.mode-3d .top-actions .glass-button,.mode-3d .top-actions .glass-icon,.mode-3d .settings summary,.mode-3d .walking-bottom .glass-button,.mode-3d .walking-bottom .glass-icon,.mode-3d .carry-tools .glass-button{background:rgba(255,247,240,.46);color:var(--glass-ink);border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 14px #362a3412,inset 0 1px 0 #ffffff75;-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.mode-3d .room-hud,.mode-3d .intro-tour,.mode-3d .date-companion{left:clamp(16px,2.5vw,32px);right:auto;transform:none;width:min(330px,calc(100vw - 32px));padding:12px 14px;bottom:max(18px,env(safe-area-inset-bottom));box-sizing:border-box}
.mode-3d .room-hud{max-height:38dvh;overflow:auto;scrollbar-width:thin}
.mode-3d .room-hud .room-heading-row{gap:10px;align-items:center}
.mode-3d .room-hud .pier-eyebrow{display:none}
.mode-3d .room-hud h2,.mode-3d .room-hud:not(.observatory-hud) h2{font-size:18px!important;letter-spacing:-.02em;line-height:1.15;color:var(--glass-ink)!important}
.mode-3d .room-hud p.room-copy,.mode-3d .room-hud:not(.observatory-hud) p.room-copy{font-size:12px!important;line-height:1.35!important;margin:6px 0!important;color:#59434c!important}
.mode-3d .room-hud .hud-actions{margin-top:8px;gap:6px}
.mode-3d .room-hud .glass-button,.mode-3d .room-hud .glass-icon,.mode-3d .room-hud:not(.observatory-hud) .glass-button,.mode-3d .room-hud:not(.observatory-hud) .glass-icon,.mode-3d .walk-help .glass-icon,.mode-3d .intro-tour button,.mode-3d .date-companion button,.mode-3d .star-shortcuts button,.mode-3d .aim-buttons button{background:rgba(255,255,255,.23);border:1px solid rgba(255,255,255,.65);color:var(--glass-ink);box-shadow:inset 0 1px 0 #ffffff55;-webkit-backdrop-filter:none;backdrop-filter:none}
.mode-3d .room-hud .date-primary,.mode-3d .room-hud:not(.observatory-hud) .date-primary,.mode-3d .intro-tour .intro-tour-next,.mode-3d .date-companion #companion-accept{background:linear-gradient(135deg,rgba(174,75,111,.86),rgba(148,65,96,.92));border-color:rgba(255,235,242,.6);color:#fffaf6;box-shadow:inset 0 1px 0 #fff6,0 2px 8px #743b5520}
.mode-3d .room-hud .hud-actions button{min-height:40px;font-size:12px;padding:8px 12px}
.mode-3d .room-hud #leave-room{min-height:36px;width:36px;height:36px;flex:none;position:static}
.mode-3d .cake-hud{text-align:left}
.mode-3d .cake-hud .room-heading-row,.mode-3d .cake-hud .hud-actions{justify-content:space-between}
.mode-3d .room-hud .tour-progress,.mode-3d .room-hud .audio-timeline{margin-top:8px}
.mode-3d .room-hud .hoop-scoreboard{margin-top:5px}.mode-3d .room-hud .hoop-scoreboard b{font-size:23px}.mode-3d .room-hud .hoop-adjust{margin:5px 0}.mode-3d .room-hud .hoop-adjust summary{font-size:11px}
body[data-dialogue-captions=compact] #tour-caption,body[data-dialogue-captions=compact] #concert-caption,body[data-dialogue-captions=compact] .room-hud .tour-credit{display:none}
.mode-3d .date-companion,.mode-3d .intro-tour{bottom:max(90px,calc(env(safe-area-inset-bottom) + 78px));width:min(350px,calc(100vw - 32px))}
.mode-3d .date-companion .companion-eyebrow{font-size:11px;letter-spacing:.01em;text-transform:none;font-weight:600;display:flex;align-items:center;gap:6px;color:#724352;margin:0 0 3px}
.date-companion .companion-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:#a86079;opacity:.3}.date-companion[data-speaking=true] .companion-eyebrow::before{opacity:1;box-shadow:0 0 0 3px #bc7b9220}
.mode-3d .date-companion .companion-text{font-size:13px;line-height:1.35;margin:0}
.mode-3d .date-companion .companion-actions{margin-top:8px;gap:6px}.mode-3d .date-companion button{font-size:12px;min-height:40px;padding:8px 12px}
.mode-3d .intro-tour .intro-tour-kicker{font-size:10px;letter-spacing:.03em;text-transform:none}.mode-3d .intro-tour h2{font-size:15px;margin:4px 0 7px}.mode-3d .intro-tour p{font-size:13px;line-height:1.4;margin:0 0 8px}.mode-3d .intro-tour .intro-tour-actions{justify-content:flex-start;gap:6px}.mode-3d .intro-tour button{font-size:12px;min-height:40px;padding:8px 13px}
.mode-3d .places-menu{padding:13px 17px;width:min(280px,calc(100vw - 32px));left:16px}.mode-3d .places-menu button{padding:11px 0;font-size:17px}.mode-3d .places-menu p{margin-bottom:5px}.mode-3d .places-menu .asset-credits{margin-top:6px;padding:6px 0}
.mode-3d .walk-help{padding:14px 16px}.mode-3d .walk-help h2{font-size:19px}.mode-3d .walk-help p{font-size:12px}
.mode-3d .icecream-menu{padding:20px}.mode-3d .icecream-menu h2{font-size:23px;margin:10px 0 18px}.mode-3d .icecream-menu .pier-eyebrow{color:#6d4254}
.mode-3d #birthday-sky-info{padding:20px}.mode-3d #birthday-sky-info::backdrop,.mode-3d dialog::backdrop{background:rgba(37,28,35,.2);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mode-3d dialog.photo-room-3d{padding:20px;max-height:calc(100dvh - 28px)}.mode-3d .photo-room-3d .scene-header h2{font-size:26px;margin:5px 0 12px}.mode-3d .photo-room-3d .scene-bottom{padding-top:8px}.mode-3d .photo-room-3d .fine-print{font-size:11px}
.mode-3d .npc-speech{padding:8px 12px;font:500 13px/1.35 var(--body);border-radius:14px;max-width:210px}.mode-3d .npc-speech::after{display:none}
.mode-3d .hud-caption{font-size:22px;width:auto;max-width:calc(100vw - 36px);color:#fff7ec;text-shadow:0 1px 10px #33202c;top:17%}.mode-3d .toast{font-size:12px;padding:9px 15px;max-width:min(320px,calc(100vw - 32px))}
/* Avoid another text chip when the existing travel control already says where. */
.mode-3d .travel-note{padding:8px 14px;font-size:11px;background:rgba(255,247,240,.48);border-color:var(--glass-edge);color:var(--glass-ink)}
@media(max-width:700px){
 .mode-3d .welcome{padding:20px 22px;border-radius:24px}
 .mode-3d .date-companion,.mode-3d .intro-tour{left:16px;bottom:max(190px,calc(env(safe-area-inset-bottom) + 178px));width:min(330px,calc(100vw - 32px))}
 .mode-3d .room-hud{left:12px;bottom:max(12px,env(safe-area-inset-bottom));width:min(330px,calc(100vw - 24px));max-height:35dvh;padding:11px 13px}
 .mode-3d .room-hud.hoop-hud{padding:10px 12px}.mode-3d .hoop-hud #leave-room{position:absolute;right:8px;top:6px;width:34px;height:34px;min-height:34px}
 .mode-3d .date-companion[data-expanded=true]{max-height:38dvh;overflow:auto}
 .mode-3d .photo-room-3d .duet-preview{height:160px}
}
@media(max-height:500px){.mode-3d .date-companion,.mode-3d .intro-tour{left:16px;bottom:75px;width:310px;max-height:calc(100dvh - 150px);overflow:auto}.mode-3d .room-hud{max-height:50dvh}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass-fill:rgba(255,247,240,.94)}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){:root{--glass-fill:rgba(255,247,240,.96);--glass-edge:#b6929e;--glass-blur:none}.mode-3d .top-actions .glass-button,.mode-3d .top-actions .glass-icon,.mode-3d .settings summary,.mode-3d .walking-bottom .glass-button,.mode-3d .walking-bottom .glass-icon,.mode-3d .carry-tools .glass-button{background:#fff5ef;-webkit-backdrop-filter:none;backdrop-filter:none}}
.mode-3d .settings-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:65;width:220px;padding:7px;background:var(--glass-fill);border:1px solid var(--glass-edge);border-radius:18px;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.mode-3d .settings-menu .glass-button,.mode-3d .settings[open] #quality{position:static;display:block;width:100%;min-height:40px;margin:0;text-align:left;border:0;border-radius:11px;background:transparent;box-shadow:none;padding:10px 12px;color:var(--glass-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.mode-3d .settings-menu button:hover{background:#fff5}.mode-3d .settings-menu .caption-setting{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.4;padding:9px 12px;color:var(--glass-ink)}
/* Override the earlier canvas HUD rule that disabled backdrop filtering. */
.mode-3d #main :is(.room-hud,.places-menu,.travel-note){-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

/* Keep the date title on the invitation; let the world lead during play. */
.mode-3d .date-brand{margin-right:auto}
.mode-3d:has(#welcome.entered) .date-brand{display:none}
.mode-3d .pier-top{justify-content:flex-end;pointer-events:none}
.mode-3d .pier-top>*{pointer-events:auto}
.mode-3d .top-actions{gap:8px}
.mode-3d .top-actions .hud-icon,.mode-3d .top-actions #walk-help-toggle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
.mode-3d .top-actions .hud-icon svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#sound .sound-waves,#sound[aria-pressed="true"] .sound-muted{display:none}
#sound[aria-pressed="true"] .sound-waves{display:block}
.mode-3d .top-actions :is(button,summary):focus-visible{outline:3px solid #b34872;outline-offset:3px}

/* A small map leaves the pier visible; instructions retire after entry. */
.mode-3d .walking-bottom #places-toggle{box-sizing:border-box;width:44px;height:44px;min-height:44px;flex-shrink:0;padding:0;border-radius:50%}
#places-toggle svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#places-toggle:focus-visible{outline:3px solid #b34872;outline-offset:3px}
#movement-hint{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
#movement-hint.hint-faded{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
@media(prefers-reduced-motion:reduce){#movement-hint,#movement-hint.hint-faded{transition:none}}

/* Messages flow together above a reserved control area instead of competing
   with the joystick, action buttons and bottom navigation. */
.mode-3d{--message-floor:176px;--message-left:clamp(16px,2.5vw,32px);--message-width:min(350px,calc(100vw - 32px))}
.mode-3d:has(#enjoy-cone:not([hidden])):has(#carry-souvenir:not([hidden])){--message-floor:228px}
.mode-3d #hud-messages{position:fixed;z-index:40;left:var(--message-left);bottom:calc(var(--message-floor) + env(safe-area-inset-bottom));width:var(--message-width);max-height:calc(100dvh - var(--message-floor) - env(safe-area-inset-bottom) - max(90px,calc(env(safe-area-inset-top) + 74px)));display:flex;flex-direction:column;gap:8px;overflow:auto;scrollbar-width:thin;pointer-events:none}
.mode-3d #hud-messages>:is(.date-companion,.intro-tour,.travel-note,.npc-speech,.toast){position:static!important;inset:auto!important;transform:none!important;box-sizing:border-box;flex:none;width:100%;max-width:none;max-height:none;margin:0;pointer-events:auto}
.mode-3d #hud-messages .toast:not(.show){display:none}
.mode-3d #hud-messages .npc-speech{text-align:left}
.mode-3d .carry-tools{flex-direction:column;align-items:flex-end;max-width:min(220px,calc(100vw - 160px))}
.mode-3d .carry-tools button{max-width:100%;white-space:normal}
.mode-3d .places-menu{bottom:calc(80px + env(safe-area-inset-bottom));max-height:calc(100dvh - 170px - env(safe-area-inset-bottom))}
.mode-3d .walk-help{top:max(82px,calc(env(safe-area-inset-top) + 72px));max-height:calc(100dvh - 166px - env(safe-area-inset-top) - env(safe-area-inset-bottom));box-sizing:border-box}
/* An open menu replaces the contextual HUD; no live controls underneath it. */
.mode-3d:has(#places-menu:not([hidden]),#walk-help:not([hidden]),.settings[open],#icecream-menu:not([hidden])) :is(#joystick,#play-action-wrap,#interact,.carry-tools,#movement-hint,.moments-note){visibility:hidden!important;pointer-events:none!important}
.mode-3d:has(#places-menu:not([hidden]),#walk-help:not([hidden]),.settings[open],#icecream-menu:not([hidden])) #hud-messages{display:none}
.mode-3d:has(#room-hud:not([hidden])){--message-floor:calc(38dvh + 36px)}
@media(max-width:700px),(pointer:coarse){
 .mode-3d{--message-floor:220px;--message-left:16px;--message-width:min(350px,calc(100vw - 32px))}
 .mode-3d:has(#enjoy-cone:not([hidden])):has(#carry-souvenir:not([hidden])){--message-floor:280px}
 .mode-3d:has(#room-hud:not([hidden])){--message-floor:calc(35dvh + 28px)}
}
/* On a short landscape screen, keep dialogue between left movement and
   right interaction controls, rather than squeezing it above both. */
@media(max-height:500px) and (min-width:501px){
 .mode-3d,.mode-3d:has(#enjoy-cone:not([hidden])):has(#carry-souvenir:not([hidden])){--message-floor:80px;--message-left:126px;--message-width:min(300px,calc(100vw - 406px))}
 .mode-3d .play-action-wrap,.mode-3d .interact{left:auto;right:20px;transform:none;max-width:min(220px,calc(50vw - 36px))}
 .mode-3d .carry-tools{right:20px;max-width:min(220px,calc(50vw - 36px))}
 .mode-3d:has(#room-hud:not([hidden])){--message-floor:calc(50dvh + 28px);--message-left:16px;--message-width:min(350px,calc(100vw - 32px))}
}
/* Leave the central telescope image clear on short, wide phone screens. */
@media(max-height:500px) and (min-width:700px){
 .mode-3d .room-hud.observatory-hud{width:250px;padding:10px 12px}
 .mode-3d .room-hud.observatory-hud .room-heading-row>div{min-width:0;flex:1}
 .mode-3d .room-hud.observatory-hud h2{font-size:16px!important}
}

/* Expanded settings must remain readable and easy to tap on phones. */
.mode-3d .settings-menu .glass-button,.mode-3d .settings[open] #quality{font-size:14px;line-height:1.35;min-height:44px}
.mode-3d .settings-menu .caption-setting{font-size:14px;min-height:44px}
.mode-3d .settings-menu .caption-setting input{width:18px;height:18px;flex:none}

/* Keep invitation text sharp over the animated WebGL sky. */
.mode-3d .welcome{filter:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(140deg,rgba(255,247,240,.95),rgba(246,232,218,.92))}
/* A quiet route to the public description beside the invitation. */
.mode-3d .welcome .about-link{color:#87435b;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mode-3d .welcome .about-link:focus-visible{outline:2px solid #87435b;outline-offset:3px}

/* A tiny backdrop paints before the 3D download, including on mobile data. */
#game-world{background:#e7c3aa url("./assets/social-preview.png") center/cover no-repeat!important}#game-world canvas{position:relative}

#game-world:not([data-first-frame="true"]) canvas{opacity:0}#game-world[data-first-frame="true"] canvas{opacity:1;transition:opacity .35s ease}@media(prefers-reduced-motion:reduce){#game-world canvas{transition:none!important}}