
:root{--hud-blur:18px;--ease:cubic-bezier(.2,.78,.2,1);--soft-border:rgba(36,24,36,.18)}
/* HUD refinement */
.brand-card{width:186px;padding:10px 12px 12px;background:rgba(32,22,35,.90);backdrop-filter:blur(var(--hud-blur));border-radius:18px;box-shadow:0 6px 0 rgba(20,12,23,.88),0 14px 28px rgba(27,16,28,.18)}
.brand-card b{font-size:18px;letter-spacing:-.8px}.brand-card span{font-size:8.5px;letter-spacing:1.05px}
.nav{width:186px;gap:7px}.nav button{display:flex;align-items:center;gap:9px;min-height:43px;padding:9px 11px;background:rgba(255,225,235,.94);backdrop-filter:blur(12px);transition:transform .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease)}
.nav button:hover,.nav button.active{background:#ff9fc3;transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.nav-icon{width:18px;text-align:center;font-size:15px}.nav-label{font-size:11px}
.top-right{backdrop-filter:blur(var(--hud-blur));background:rgba(35,26,40,.90);box-shadow:0 6px 0 rgba(20,12,22,.48),0 12px 26px rgba(20,12,22,.14)}
.top-right .day{letter-spacing:.7px}.top-right button:hover{background:#ff9fc3}
.start{backdrop-filter:blur(var(--hud-blur));box-shadow:0 6px 0 rgba(20,12,22,.85)}.start button:hover{transform:translateY(-1px)}
.zoom{backdrop-filter:blur(var(--hud-blur));}.zoom button:hover{background:#ff9fc3;transform:translateY(-1px)}
/* Player: shell is visually complete but explicitly not pretending to play audio yet. */
.player{width:min(470px,calc(100vw - 430px));border-radius:19px;background:rgba(34,25,39,.96);backdrop-filter:blur(var(--hud-blur));box-shadow:0 7px 0 #140e18,0 18px 34px rgba(17,10,20,.24)}
.player-main{padding:9px 11px 8px;background:linear-gradient(96deg,#ff8bbb 0%,#ff5c9e 58%,#ff7dad 100%)}
.cover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 3px 0 rgba(36,24,36,.45)}
.track b{font-size:12.5px}.track span{font-size:9.5px}.play{transition:transform .14s var(--ease),background .14s var(--ease)}.play:hover{background:white;transform:scale(1.06)}
.player-progress{height:4px;background:#3d2d42;overflow:hidden}.player-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffd7e7,#fff1df);transition:width .35s var(--ease)}
.player-sub{padding:7px 11px 8px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff8ab7;margin-right:4px;box-shadow:0 0 0 3px rgba(255,138,183,.12)}
/* Location hierarchy */
.sprite-label{padding:5px 8px 5px;border:2px solid rgba(36,24,36,.9);border-radius:10px;background:rgba(255,245,232,.95);box-shadow:0 3px 0 rgba(36,24,36,.88),0 6px 11px rgba(40,24,36,.12);font-size:10.5px;letter-spacing:-.15px;backdrop-filter:blur(6px)}
.landmark-sprite:hover .sprite-label,.landmark-sprite:focus-visible .sprite-label,.landmark-sprite.selected .sprite-label{background:#ffb6d1}
.landmark-sprite.selected{z-index:32;transform:translate(-50%,-61%) scale(1.055)}.landmark-sprite.selected img{filter:drop-shadow(0 13px 7px rgba(30,18,29,.36)) saturate(1.08)}
.landmark-sprite.selected::before{content:"";position:absolute;inset:7%;border-radius:34%;box-shadow:0 0 0 4px rgba(255,255,255,.72),0 0 0 8px rgba(255,101,167,.55),0 0 30px rgba(255,101,167,.32);pointer-events:none}
.landmark-sprite.locked .sprite-label{background:rgba(231,222,228,.94);color:#746875}.road-label-ui{border-width:1.5px;background:rgba(255,201,221,.90);box-shadow:0 2px 0 rgba(36,24,36,.85);font-size:8.5px;backdrop-filter:blur(4px)}
/* Panels / drawers */
.panel{width:min(390px,calc(100vw - 32px));padding:19px;border-radius:24px;background:rgba(255,249,241,.965);box-shadow:0 10px 0 rgba(28,18,31,.64),0 24px 55px rgba(28,18,31,.22);transition:transform .28s var(--ease),opacity .2s ease;scrollbar-width:thin;scrollbar-color:#e69bb8 transparent}
.panel.right.story{width:min(440px,calc(100vw - 32px));padding:14px 16px 20px}.panel h2{font-size:26px}.close,.modal-close{transition:transform .14s var(--ease),background .14s}.close:hover,.modal-close:hover{background:#ff9fc3;transform:rotate(4deg) scale(1.04)}
.row{transition:transform .14s var(--ease),background .14s var(--ease),border-color .14s}.row:hover{transform:translateY(-1px);background:#ffe5ee;border-color:var(--ink)}
.story-hero-art{min-height:185px;border-radius:17px;background:linear-gradient(135deg,#ffd7e6 0%,#fff0de 65%,#ffd3e3 100%);padding-left:160px}.story-hero-art>img{width:145px;height:155px;left:10px;bottom:8px}.story-copy .kind{letter-spacing:.5px}.story-copy h2{font-size:27px;line-height:.96}.story p{font-size:13px;line-height:1.55}.actionbar{margin:14px 0}.action{transition:transform .13s var(--ease),background .13s}.action:hover{transform:translateY(-1px);background:#ff8ab7}.action.alt:hover{background:white}.related button:hover{background:#ffe1eb}
.story-section-title{font-family:Arial Black,Arial,sans-serif;font-size:13px;margin:15px 0 7px}.story-meta{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 0}.meta-pill{display:inline-block;padding:4px 7px;border:1.5px solid rgba(36,24,36,.55);border-radius:999px;background:rgba(255,255,255,.56);font-size:8.5px;font-weight:900;color:#6f5d69}
/* Interior feels like a new room, not a debug modal. */
#interior{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .23s ease,visibility 0s linear .23s;background:rgba(18,11,20,.68)}
#interior.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .23s ease}.ibox{transform:translateY(18px) scale(.975);opacity:.88;transition:transform .28s var(--ease),opacity .2s ease;border-radius:24px;padding:14px}.open .ibox{transform:translateY(0) scale(1);opacity:1}.iwrap{border-radius:18px}.ihot{width:32px;height:32px;opacity:.58;background:rgba(255,93,155,.62);box-shadow:0 0 0 4px rgba(255,255,255,.82),0 0 0 8px rgba(255,93,155,.24),0 0 22px rgba(255,93,155,.38)}.ihot:hover,.ihot:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1.16)}.ihot.inspected{background:#fff1df;border-color:#ff5d9b}.icopy{padding:12px 4px 1px}.icopy h3{font-size:19px}#prop-copy{padding-top:3px;font-size:12.5px;max-width:630px}
/* First-use hint */
.map-hint{position:absolute;z-index:58;left:50%;top:18px;transform:translate(-50%,0);padding:8px 12px;border:2px solid var(--ink);border-radius:999px;background:rgba(255,247,238,.91);box-shadow:0 4px 0 rgba(36,24,36,.85);font-size:9px;font-weight:900;pointer-events:none;opacity:1;transition:opacity .35s ease,transform .35s ease;backdrop-filter:blur(12px)}.map-hint.hide{opacity:0;transform:translate(-50%,-8px)}
/* Mobile = map + compact toolbar + bottom sheets. */
@media(max-width:820px){
 .nav{left:8px;right:8px;top:8px;width:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;background:rgba(35,27,41,.92);backdrop-filter:blur(18px);overflow:visible}.nav button{min-width:0;min-height:46px;justify-content:center;padding:7px 5px;display:flex;flex-direction:column;gap:2px}.nav-icon{font-size:15px;line-height:1}.nav-label{display:block;font-size:7px;line-height:1;letter-spacing:.15px}.top-right{top:64px;right:8px}.top-right .day{font-size:8px}.top-right button{font-size:8px}
 .player{left:8px;right:8px;bottom:8px;transform:none;width:auto;min-width:0;border-radius:17px}.player-main{padding:7px 9px}.cover{width:37px;height:37px;font-size:14px}.track b{font-size:11px}.track span{font-size:8px}.play{width:32px;height:32px}.player-sub{padding:5px 9px 6px;font-size:8px}.zoom{right:8px;bottom:91px}.zoom button{width:37px;height:35px}.start{display:none}
 .panel.left{left:8px;right:8px;top:72px;bottom:78px;width:auto;border-radius:22px;transform:translateY(110%)}.panel.right.story{left:8px;right:8px;top:40vh;bottom:78px;width:auto;border-radius:23px 23px 16px 16px;transform:translateY(115%);padding:12px 14px 18px}.panel.open{transform:translateY(0)}
 .story-hero-art{min-height:126px;padding-left:105px;margin-bottom:8px}.story-hero-art>img{width:96px;height:110px;left:5px}.story-copy h2{font-size:21px}.story p{font-size:12px;line-height:1.45}.action{font-size:10px;padding:7px 8px}
 .sprite-label{font-size:8.5px;padding:3px 5px;border-width:1.5px;box-shadow:0 2px 0 rgba(36,24,36,.85)}.road-label-ui{font-size:7px;padding:2px 4px}
 .map-hint{top:118px;font-size:8px;padding:6px 9px}.ibox{width:100%;max-height:94vh;border-radius:20px;padding:10px}.iwrap img{max-height:60vh}.ihot{opacity:.82;width:30px;height:30px}.icopy{display:block}.icopy .action{margin-top:8px}
}
@media(max-width:480px){.top-right .day{display:none}.top-right{top:64px}.panel.right.story{top:38vh}.map-hint{top:112px}.player-sub #phase-label{display:none}}
@media(prefers-reduced-motion:reduce){.map-hint{transition:none}.ibox{transition:none}}
