/* Keep all home controls reachable when the browser is shorter than the artwork. */
body.at-title{--title-dock-height:44px;height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;padding-bottom:calc(var(--title-dock-height) + env(safe-area-inset-bottom))}
.at-title .music-dock{bottom:0;left:0;right:0;max-width:none;height:calc(var(--title-dock-height) + env(safe-area-inset-bottom));padding:5px 18px calc(5px + env(safe-area-inset-bottom));justify-content:flex-end;border-radius:0}
.bgm-toggle{display:grid;place-items:center;padding:0;line-height:1;overflow:hidden}
.music-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;font-size:0;line-height:1;vertical-align:middle}
.music-icon svg{display:block;width:20px;height:20px;overflow:visible}
.music-icon.is-muted::after{display:none}
.music-icon .mute-line{display:none}
.music-icon.is-muted .mute-line{display:block}
@media(min-width:761px){
 .at-title .title-screen{height:auto;min-height:calc(100dvh - var(--title-dock-height));display:grid;grid-template-rows:48px minmax(min-content,1fr) auto auto;padding:0 clamp(22px,5vw,90px) 12px;overflow:hidden}
 .at-title .title-top{height:48px;max-width:1280px;width:100%}
 .at-title .title-layout{height:auto;min-height:0;max-width:1200px;width:100%;margin:0 auto;padding:8px 0;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(22px,3vw,45px);align-items:center}
 .at-title .title-copy{min-width:0;padding:0}
 .at-title .title-actions,.at-title .title-records{max-width:100%}
 .at-title .title-illustration{height:min(580px,calc(100dvh - 190px));min-height:440px;max-height:none;width:100%;align-self:center}
 .at-title .title-illustration:has(.home-poll) .title-character{width:min(100%,43vh);bottom:170px;left:3%}
 .at-title .title-illustration:has(.home-poll) .title-note{right:0;bottom:205px}
 .at-title .title-footer{height:auto;min-height:48px;padding:8px 0;gap:10px 18px;flex-wrap:wrap}
 .at-title .announcement-bar{flex:1 1 400px;min-width:0}
 .at-title .community-links{flex-wrap:wrap;gap:14px}
 .at-title .achievement-strip{margin:0 auto 6px;padding:10px 0;min-width:0}
}
@media(min-width:761px) and (max-height:900px){
 .at-title .title-screen{grid-template-rows:46px minmax(min-content,1fr) auto auto}
 .at-title .title-top{height:46px}
 .at-title .title-layout{padding:6px 0}
 .at-title .title-illustration{height:min(500px,calc(100dvh - 210px));min-height:410px}
 .at-title .title-copy h1{font-size:clamp(48px,5.1vw,72px);letter-spacing:4px}
 .at-title .title-copy h1>span{font-size:13px;letter-spacing:3px;margin-top:12px}
 .at-title .title-chapter{font-size:8px;margin-bottom:11px}
 .at-title .title-description{font-size:12px;line-height:1.8;margin-top:13px}
 .at-title .life-community-count{font-size:11px;margin-top:7px}
 .at-title .life-community-count b{font-size:16px}
 .at-title .title-actions{margin-top:14px;gap:7px}
 .at-title .menu-primary,.at-title .menu-free{font-size:16px;padding:12px 16px;margin-bottom:3px}
 .at-title .menu-primary small,.at-title .menu-free small{font-size:9px;margin-top:4px}
 .at-title .menu-continue{padding:8px 14px}
 .at-title .menu-utilities{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .at-title .menu-utilities .menu-save{display:block;padding:7px 3px;font-size:11px;line-height:1.6;white-space:normal}
 .at-title .menu-utilities .menu-save>span{display:block;margin:3px 0 0;font-size:8px}
 .at-title .title-unlocks{margin-top:7px;font-size:11px}
 .at-title .title-records{margin-top:10px;gap:10px}
 .at-title .title-records button{padding:10px 12px}
 .at-title .title-records strong{font-size:12px;margin-top:6px}
 .at-title .title-records small{font-size:9px;margin-top:3px}
 .at-title .title-records .share-best{padding:3px 6px;font-size:10px}
 .at-title .achievement-heading>span,.at-title .achievement-group>span{font-size:11px}
 .at-title .achievement-heading small,.at-title .achievement-group small{font-size:9px}
}
@media(min-width:761px) and (max-width:1099px){
 .at-title .title-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
 .at-title .title-copy h1{font-size:clamp(42px,5.7vw,60px)}
 .at-title .title-illustration{min-height:430px}
 .at-title .title-bubble{right:0;font-size:11px}
 .at-title .title-illustration:has(.home-poll) .title-bubble{right:0}
}
@media(max-width:760px){body.at-title{--title-dock-height:60px}.at-title .music-dock{gap:8px;padding-left:12px;padding-right:12px}.at-title .bgm-copy{min-width:0}.at-title .title-footer{height:auto}.at-title .title-screen{padding-bottom:16px}}
/* The halo belongs to the actor, never to the room or an unrelated coordinate. */
.at-title .title-actor{position:relative;isolation:isolate;aspect-ratio:1;width:min(78%,37vh,380px);min-width:0;animation:idleBob 4s ease-in-out infinite}
.at-title .title-actor .title-halo{position:absolute;inset:auto;left:50%;top:50%;width:116%;height:116%;max-width:none;transform:translate(-50%,-50%);background:none;box-shadow:none;border-radius:0;z-index:-1;pointer-events:none}
.at-title .title-actor #titleCharacter{position:relative;inset:auto;display:block;width:100%;max-width:none;height:auto;aspect-ratio:1;animation:none;transform:none}
.at-title .title-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;min-width:0;max-width:100%;width:100%;padding:8px 0 0;isolation:isolate}
.at-title .title-stage .title-actor{grid-row:2}
.at-title .title-stage #titleBubble{position:relative;inset:auto;grid-row:1;justify-self:end;width:fit-content;max-width:calc(100% - 16px);min-height:0;margin:0 8px;transform:none;white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.65;animation:homeBubbleFloat 4s ease-in-out infinite}
@media(min-width:761px){
 .at-title .title-screen{grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;min-width:0}
 .at-title .title-layout{min-width:0;max-width:1200px}
 .at-title .title-illustration{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;width:100%;max-width:100%;height:auto;min-height:0;max-height:none;align-self:center;padding:4px 0}
 .at-title .title-illustration .title-stage{order:1}
 #titleScreen .title-illustration .title-note{position:relative;inset:auto;order:2;display:block;max-width:100%;width:100%;margin:0;text-align:center;white-space:normal;overflow-wrap:anywhere;font-size:10px;line-height:1.8}
 .at-title .title-illustration .home-poll{position:relative;inset:auto;order:3;align-self:center;width:min(100%,300px);max-width:100%;min-width:0;margin:0;box-sizing:border-box}
 .at-title .title-illustration .floating-note{display:none}
 .at-title .title-stage #titleBubble{max-width:min(260px,calc(100% - 16px));padding:11px 15px;font-size:12px}
 .at-title .home-poll>header{flex-wrap:wrap;gap:5px 10px}
}
@media(max-width:760px){
 .at-title .title-illustration{right:8px;width:min(42vw,210px)}
 .at-title .title-stage{padding:0;gap:0}
 .at-title .title-stage .title-actor{grid-row:1;width:100%;animation:idleBob 4s ease-in-out infinite}
 .at-title .title-actor .title-halo{width:110%;height:110%}
 .at-title .title-stage #titleBubble{display:none}
 .at-title .title-copy .home-poll{max-width:100%;min-width:0;overflow-wrap:anywhere}
}
@keyframes homeBubbleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.at-title .title-actor,.at-title .title-stage #titleBubble{animation:none}}
/* Anchor the flourish to the final character instead of the full wordmark. */
.title-wordmark .title-final-character{position:relative;display:inline-block;font:inherit}
.title-wordmark #titleHeading .title-catchphrase{left:calc(50% + clamp(20px,2.5vw,36px));right:auto;top:-22px;translate:-50% 0;font-style:italic;line-height:1.3;letter-spacing:.04em}
@media(max-width:760px){.title-wordmark #titleHeading .title-catchphrase{top:-17px}}
@media(max-width:350px){.title-wordmark #titleHeading .title-catchphrase{left:calc(50% + 12px)}}
@media(max-width:760px){
 .at-title .title-illustration{top:169px}
 .at-title .title-actions{margin-top:max(86px,calc(min(42vw,210px) - 78px))}
 .at-title .title-stage #titleBubble[data-speaking]{display:block;position:absolute;grid-row:auto;inset:auto;left:50%;bottom:calc(100% - 8px);translate:-50% 0;width:max-content;max-width:100%;margin:0;padding:9px 11px;font-size:12px;line-height:1.6;box-sizing:border-box;border-radius:12px 12px 2px 12px;z-index:2}
}

/* Keep the quote button beside the survey card, outside its header. */
.home-community{display:grid;grid-template-columns:clamp(100px,10vw,140px) minmax(0,300px);align-items:center;justify-content:center;gap:12px;width:100%;min-width:0;pointer-events:auto}
.at-title .title-illustration>.home-community{order:3}
.stock-quotes-button{display:flex;flex-direction:column;align-items:center;justify-content:center;justify-self:center;gap:3px;min-width:0;width:100%;max-width:122px;padding:10px 8px;border:1px solid #d7c49b;border-radius:14px;background:linear-gradient(155deg,#fffdf5,#f7edcf);box-shadow:0 3px 0 #c9b88e,0 5px 12px #68532b12;cursor:pointer;pointer-events:auto;transition:transform .16s,box-shadow .16s}
.stock-quotes-button:hover{transform:translateY(-1px);box-shadow:0 4px 0 #c9b88e,0 6px 14px #68532b20}
.stock-quotes-button:active{transform:translateY(2px);box-shadow:0 1px 0 #c9b88e}
.stock-quotes-button:focus-visible{outline:2px solid #b7883b;outline-offset:3px}
.stock-quotes-art{display:block;width:54px;height:40px;overflow:visible;flex:none}
.stock-quotes-wordmark{display:block;font-size:16px;line-height:1.35;font-weight:800;letter-spacing:1px;white-space:nowrap;color:#92602d}
.at-title .home-community .home-poll{position:relative;inset:auto;width:100%;max-width:300px;margin:0;min-width:0}
@media(max-width:760px){.title-copy>.home-community{grid-template-columns:96px minmax(0,1fr);gap:8px;margin:18px 0 5px}.stock-quotes-art{width:48px;height:35px}.stock-quotes-wordmark{font-size:15px;letter-spacing:.5px}.at-title .home-community .home-poll{max-width:none;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.stock-quotes-button{transition:none}.stock-quotes-button:hover{transform:none}}

/* Reserve footer width for the links; let only the announcement ticker shrink. */
@media(min-width:761px){
 .at-title .title-footer{display:grid;grid-template-columns:minmax(0,1fr) max-content;min-width:0;width:100%;max-width:1280px;gap:clamp(10px,1.4vw,18px)}
 .at-title .title-footer>.announcement-bar{min-width:0;width:auto;max-width:100%;overflow:hidden}
 .at-title .title-footer>.community-links{justify-self:end;justify-content:flex-end;flex-wrap:nowrap;min-width:0;max-width:100%;gap:clamp(8px,1vw,14px)}
}
@media(max-width:760px){.at-title .title-footer>.community-links{flex-wrap:wrap;justify-content:center;min-width:0;max-width:100%;gap:6px 14px}}