/* The title owns one viewport; shared actions return to normal on the map. */
body:has(#title-screen:not([hidden])) { height:100dvh; overflow:hidden; overscroll-behavior:none; }
body:has(#title-screen:not([hidden])) .app { padding:0; }
body:has(#title-screen:not([hidden])) .app>footer { display:none; }
body[data-world] #title-screen:not([hidden]) { position:fixed; inset:6px; margin:0; width:auto; max-width:none; height:auto; min-height:0; border-radius:28px; }
#title-screen:not([hidden]) .hero { height:100%; min-height:0; padding:0; }
body:has(#title-screen:not([hidden])) .topbar { position:fixed; z-index:10; top:calc(16px + env(safe-area-inset-top)); left:calc(24px + env(safe-area-inset-left)); right:calc(24px + env(safe-area-inset-right)); height:72px; min-height:0; padding:0; margin:0; border:0; gap:12px; }
body:has(#title-screen:not([hidden])) .studio-brand { width:105px; height:70px; object-fit:contain; border-radius:16px; }
body:has(#title-screen:not([hidden])) .top-actions { flex-wrap:nowrap; padding:6px; background:#efffe9da; backdrop-filter:blur(10px); border:1px solid #fff3bc; }
body:has(#title-screen:not([hidden])) .test-badge { display:none; }
#title-screen:not([hidden]) .hero-copy { position:absolute; left:4%; top:calc(110px + env(safe-area-inset-top)); width:50%; max-width:600px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; }
#title-screen:not([hidden]) .hero-copy>.eyebrow { font-size:9px; margin:0; padding:6px 12px; }
#title-screen:not([hidden]) .game-wordmark { width:100%; max-width:500px; height:min(29dvh,260px); margin:0; display:flex; align-items:center; justify-content:center; }
#title-screen:not([hidden]) .game-wordmark img { width:100%; height:100%; object-fit:contain; }
#title-screen:not([hidden]) .title-credit { margin:0; color:#23535d; font-size:12px; padding:4px 11px; background:#fff9e5dc; border-radius:20px; text-shadow:0 1px white; }
#title-screen:not([hidden]) .title-tagline { margin:0; font-size:clamp(12px,1.8vw,18px); }
#title-screen:not([hidden]) .primary.large { margin:0; min-height:0; height:76px; width:min(280px,85%); padding:12px 24px; font-size:24px; }
#title-screen:not([hidden]) .hero-meta { margin:0; flex-wrap:wrap; gap:6px!important; }
#title-screen:not([hidden]) .pwa-install { margin:0; padding:7px 12px; font-size:11px; }
#title-screen:not([hidden]) .hero-art { width:min(51vw,68dvh); right:0; bottom:0; }
.developer-credit { display:flex; flex-direction:column; gap:5px; text-align:center; margin:20px 0; padding:14px; border-radius:16px; background:#e5f3e4; }
.developer-credit span { font-size:13px; }
@media (orientation:portrait) {
 body[data-world] #title-screen:not([hidden]) { background-image:url('/assets/hf-title-mobile.webp'); }
 body:has(#title-screen:not([hidden])) .topbar { left:18px; right:18px; top:calc(12px + env(safe-area-inset-top)); align-items:flex-start; height:95px; }
 body:has(#title-screen:not([hidden])) .studio-brand { width:90px; height:60px; }
 body:has(#title-screen:not([hidden])) .top-actions { max-width:calc(100% - 100px); flex-wrap:wrap; justify-content:flex-end; gap:5px; border-radius:18px; }
 body:has(#title-screen:not([hidden])) .top-actions .icon-btn, body:has(#title-screen:not([hidden])) .top-actions #account { width:36px; height:36px; padding:0; }
 body:has(#title-screen:not([hidden])) .top-actions #account { font-size:0; background-position:center; background-size:88%; }
 body:has(#title-screen:not([hidden])) .top-actions #account>span { display:none; }
 body:has(#title-screen:not([hidden])) .heart-panel { order:2; min-height:27px; padding:3px 6px; }
 body:has(#title-screen:not([hidden])) .heart-panel small { font-size:9px; }
 body:has(#title-screen:not([hidden])) .heart-icons i { width:13px; height:13px; }
 #title-screen:not([hidden]) .hero-copy { top:calc(112px + env(safe-area-inset-top)); left:5%; width:90%; max-width:none; gap:6px; }
 #title-screen:not([hidden]) .game-wordmark { max-width:480px; height:24dvh; }
 #title-screen:not([hidden]) .primary.large { height:70px; width:min(300px,85%); font-size:23px; }
 #title-screen:not([hidden]) .hero-art { width:min(83vw,42dvh); right:50%; transform:translateX(50%); bottom:calc(9px + env(safe-area-inset-bottom)); }
 #title-screen:not([hidden]) .float-tag { top:20%; right:1%; }
 #title-screen:not([hidden]) .hero-meta { font-size:10px!important; }
}
@media (orientation:portrait) and (max-height:700px) {
 #title-screen:not([hidden]) .hero-copy { gap:4px; top:calc(104px + env(safe-area-inset-top)); }
 #title-screen:not([hidden]) .game-wordmark { height:20dvh; }
 #title-screen:not([hidden]) .hero-copy>.eyebrow { font-size:7px; padding:4px 8px; }
 #title-screen:not([hidden]) .title-credit { font-size:10px; padding:3px 8px; }
 #title-screen:not([hidden]) .primary.large { height:58px; font-size:20px; }
 #title-screen:not([hidden]) .hero-meta>span { padding:3px 6px; font-size:9px; }
 #title-screen:not([hidden]) .hero-art { width:35dvh; }
}
@media (orientation:landscape) and (max-height:600px) {
 body:has(#title-screen:not([hidden])) .topbar { top:calc(8px + env(safe-area-inset-top)); height:48px; left:18px; right:18px; }
 body:has(#title-screen:not([hidden])) .studio-brand { width:72px; height:48px; }
 body:has(#title-screen:not([hidden])) .top-actions { gap:5px; padding:4px; }
 body:has(#title-screen:not([hidden])) .top-actions .icon-btn, body:has(#title-screen:not([hidden])) .top-actions #account { width:32px; height:32px; }
 #title-screen:not([hidden]) .hero-copy { top:calc(64px + env(safe-area-inset-top)); left:4%; width:51%; gap:3px; }
 #title-screen:not([hidden]) .game-wordmark { height:29dvh; max-width:360px; }
 #title-screen:not([hidden]) .hero-copy>.eyebrow { display:none; }
 #title-screen:not([hidden]) .title-credit { font-size:10px; padding:3px 8px; }
 #title-screen:not([hidden]) .title-tagline { display:none; }
 #title-screen:not([hidden]) .primary.large { width:210px; height:54px; font-size:19px; }
 #title-screen:not([hidden]) .hero-meta { font-size:9px!important; }
 #title-screen:not([hidden]) .hero-meta>span { padding:3px 6px; }
 #title-screen:not([hidden]) .pwa-install { padding:4px 9px; font-size:10px; }
 #title-screen:not([hidden]) .hero-art { width:70dvh; right:5%; }
}

#title-screen:not([hidden]) .hero-art canvas { display:none; }
#title-screen:not([hidden]) .title-mascot { display:block; width:100%; height:100%; object-fit:contain; animation:title-mascot-float 4s ease-in-out infinite; }
#title-screen:not([hidden]) .hero-art { height:min(68dvh,520px); }
@keyframes title-mascot-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@media (orientation:portrait) {
 #title-screen:not([hidden]) .hero { display:flex; flex-direction:column; align-items:center; padding:calc(112px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom)); gap:4px; }
 #title-screen:not([hidden]) .hero-copy { position:relative; inset:auto; width:100%; flex:0 0 auto; }
 #title-screen:not([hidden]) .hero-art { position:relative; inset:auto; transform:none; margin:0; width:90%; flex:1 1 0; min-height:0; height:auto; max-height:35dvh; }
 #title-screen:not([hidden]) .hero-art .float-tag { top:20%; right:2%; }
}
@media (orientation:portrait) and (max-height:700px) {
 #title-screen:not([hidden]) .hero { padding-top:calc(104px + env(safe-area-inset-top)); }
}
@media (orientation:landscape) and (max-height:600px) {
 #title-screen:not([hidden]) .hero-art { height:72dvh; width:35vw; bottom:4px; right:5%; }
}
@media (prefers-reduced-motion:reduce) { #title-screen:not([hidden]) .title-mascot { animation:none; } }
.reduce-motion #title-screen:not([hidden]) .title-mascot { animation:none; }

/* One current mascot across title, map, launch and victory. */
.journey-mascot .outfit-mascot { object-fit:contain; animation:bouncy32-hover 2.8s ease-in-out infinite; }
.result-icon.blender-jubilation { background:url('/assets/bouncy-pilot-v32.webp') center/contain no-repeat; animation:bouncy32-win .85s ease-in-out infinite!important; }
@keyframes bouncy32-hover { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-4px) rotate(2deg); } }
@keyframes bouncy32-win { 0%,100% { transform:translateY(0) scale(1); } 45% { transform:translateY(-10px) scale(.98,1.03); } 75% { transform:translateY(0) scale(1.04,.97); } }
@media(prefers-reduced-motion:reduce) { .journey-mascot .outfit-mascot,.result-icon.blender-jubilation { animation:none!important; } }
.reduce-motion .journey-mascot .outfit-mascot,.reduce-motion .result-icon.blender-jubilation { animation:none!important; }

#title-screen .title-bouncy { position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:none; box-shadow:none; touch-action:manipulation; cursor:pointer; }
#title-screen .title-bouncy:hover,#title-screen .title-bouncy:active { transform:none; filter:none; }
#title-screen:not([hidden]) .title-mascot { transform-origin:50% 75%; animation:bouncy33-idle 5.5s ease-in-out infinite; filter:drop-shadow(0 7px 7px #0f5b5140); }
#title-screen .bouncy-reaction { position:absolute; top:8%; right:13%; font-size:clamp(16px,3vw,26px); font-weight:900; color:#17566c; background:#fff7cce8; border:2px solid #ffe887; border-radius:22px; padding:5px 14px; box-shadow:0 4px 0 #22697633; pointer-events:none; }
#title-screen .bouncy-tap-hint { position:absolute; bottom:0; left:50%; translate:-50% 0; white-space:nowrap; font-size:11px; color:#164b55; background:#fff9d9d9; padding:4px 10px; border-radius:20px; pointer-events:none; }
@keyframes bouncy33-idle { 0%,100% { transform:translateY(0) rotate(-2deg) scale(1); } 25% { transform:translateY(-7px) rotate(2deg) scale(.99,1.02); } 45% { transform:translateY(0) rotate(-1deg) scale(1.025,.98); } 65% { transform:translateY(-4px) rotate(3deg) scale(1); } 80% { transform:translateY(0) rotate(0deg) scale(1); } }
@media(prefers-reduced-motion:reduce) { #title-screen:not([hidden]) .title-mascot { animation:none; } }
.reduce-motion #title-screen:not([hidden]) .title-mascot { animation:none; }

#title-screen .title-bouncy { pointer-events:auto; }

/* Explicit grid prevents legacy column headers from pushing actions below the logo. */
body:has(#title-screen:not([hidden])) .topbar { display:grid; grid-template-columns:auto 1fr; align-items:start; height:auto; min-height:0; top:calc(10px + env(safe-area-inset-top)); }
body:has(#title-screen:not([hidden])) .topbar .brand { grid-column:1; grid-row:1; align-self:start; margin:0; }
body:has(#title-screen:not([hidden])) .topbar .top-actions { grid-column:2; grid-row:1; justify-self:end; align-self:start; display:grid; grid-template-columns:repeat(5,36px); grid-template-rows:36px auto; max-width:none; gap:5px; padding:0; margin:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }
body:has(#title-screen:not([hidden])) .top-actions #sound { grid-column:1; grid-row:1; }
body:has(#title-screen:not([hidden])) .top-actions #handbook { grid-column:2; grid-row:1; }
body:has(#title-screen:not([hidden])) .top-actions #settings { grid-column:3; grid-row:1; }
body:has(#title-screen:not([hidden])) .top-actions #account { grid-column:4; grid-row:1; }
body:has(#title-screen:not([hidden])) .top-actions #hearts-info { grid-column:1 / 6; grid-row:2; justify-self:end; margin:0; }
body:has(#title-screen:not([hidden])) .top-actions .icon-btn,body:has(#title-screen:not([hidden])) .top-actions #account { width:36px; height:36px; padding:0; }
body:has(#title-screen:not([hidden])) .top-actions #account { font-size:0; background-position:center; background-size:88%; }
body:has(#title-screen:not([hidden])) .top-actions #account>span { display:none; }
@media(max-width:350px),(orientation:landscape) and (max-height:400px) {
 body:has(#title-screen:not([hidden])) .topbar .top-actions { grid-template-columns:repeat(5,32px); grid-template-rows:32px auto; gap:4px; }
 body:has(#title-screen:not([hidden])) .top-actions .icon-btn,body:has(#title-screen:not([hidden])) .top-actions #account { width:32px; height:32px; }
}