/* Keep the main experience and legal links together in the first screen. */
body:not(.legal-body){min-height:100svh;display:flex;flex-direction:column}
body:not(.legal-body)>main{flex:1;display:flex;flex-direction:column}
body:not(.legal-body) .page-stack{flex:1}
body:not(.legal-body) .opening-grid{min-height:calc(100svh - 136px);padding:18px 0;gap:45px}
body:not(.legal-body) .play-ticker{padding:8px 0}
body:not(.legal-body) .legal-footer{padding:7px 24px;gap:10px}
body:not(.legal-body) .buddy-playground{padding:15px 22px}
body:not(.legal-body) .buddy-speech{margin-top:10px}
body:not(.legal-body) .buddy-button{width:clamp(100px,19svh,145px);height:clamp(100px,19svh,145px);margin-top:15px;margin-bottom:5px}
body:not(.legal-body) .buddy-name{margin-top:10px}
body:not(.legal-body) .buddy-name strong{font-size:30px}
body:not(.legal-body) .animal-picker{margin-top:10px}
body:not(.legal-body) .shuffle-button{margin-top:10px;min-height:40px;padding:6px 17px}
body:not(.legal-body) .playground-note{margin-top:6px}
body:not(.legal-body) .info-page{min-height:calc(100svh - 136px);padding:18px 0}
body:not(.legal-body) .map-page{min-height:calc(100svh - 136px);padding:16px 0}
body:not(.legal-body) .map-frame{height:clamp(220px,calc(100svh - 270px),500px)}
@media(min-width:761px) and (max-height:700px){
body:not(.legal-body) .opening h1{font-size:clamp(44px,5.4vw,68px)}
body:not(.legal-body) .opening-description{margin-top:18px;font-size:14px;line-height:1.7}
body:not(.legal-body) .opening-actions{margin-top:20px}
body:not(.legal-body) .opening .eyebrow{margin-bottom:16px}
body:not(.legal-body) .buddy-playground{padding:10px 20px}
body:not(.legal-body) .buddy-button{width:95px;height:95px}
body:not(.legal-body) .buddy-speech{margin-top:7px;height:44px;min-height:44px}
body:not(.legal-body) .buddy-name strong{font-size:25px}
body:not(.legal-body) .tap-hint{margin-top:10px;font-size:9px}
body:not(.legal-body) .faq-list details{padding:11px 0}
}
@media(max-width:760px){
body:not(.legal-body) .opening-grid{min-height:calc(100svh - 190px);padding:12px 0 15px;gap:14px;align-content:center}
body:not(.legal-body) .opening .eyebrow{margin-bottom:7px;font-size:7px}
body:not(.legal-body) .opening h1{font-size:clamp(30px,8.7vw,47px);line-height:1.02}
body:not(.legal-body) .opening-description{font-size:11px;line-height:1.55;margin-top:9px}
body:not(.legal-body) .opening-actions{margin-top:10px}
body:not(.legal-body) .opening-actions .button{min-height:36px;padding:6px 13px;font-size:11px}
body:not(.legal-body) .buddy-playground{padding:10px 15px;border-radius:17px}
body:not(.legal-body) .buddy-caption{font-size:7px}
body:not(.legal-body) .buddy-speech{margin-top:6px;min-height:35px;height:35px;font-size:11px;padding:6px 8px}
body:not(.legal-body) .buddy-button{width:85px;height:85px;margin-top:12px;margin-bottom:4px}
body:not(.legal-body) .tap-badge{font-size:11px;padding:4px 9px}
body:not(.legal-body) .tap-hint{font-size:8px;margin-top:10px}
body:not(.legal-body) .buddy-name{margin-top:7px}
body:not(.legal-body) .buddy-name strong{font-size:23px}
body:not(.legal-body) .animal-picker{margin-top:7px;font-size:11px;gap:10px}
body:not(.legal-body) .animal-picker select{padding:5px 9px;font-size:12px;min-height:34px}
body:not(.legal-body) .shuffle-button{min-height:34px;margin-top:7px;font-size:12px;padding:4px 15px}
body:not(.legal-body) .playground-note{display:none}
body:not(.legal-body) .play-ticker{padding:5px 0}
body:not(.legal-body) .legal-footer{padding:6px 12px;gap:3px}
body:not(.legal-body) .legal-footer nav{gap:2px 12px}
}

body:not(.legal-body) .ticker-track>div{line-height:20px}


@media(max-width:760px){body:not(.legal-body) .opening-grid{min-height:calc(100svh - 202px);gap:10px;padding-top:8px;padding-bottom:11px}body:not(.legal-body) .tap-badge{bottom:0}}


body:not(.legal-body) .legal-footer{position:relative;justify-content:center;flex-direction:row;gap:18px}body:not(.legal-body) .legal-footer nav{justify-content:center}@media(max-width:760px){body:not(.legal-body) .legal-footer{flex-direction:column;gap:3px}}

/* Keep the tap prompt inside the avatar's reserved area. */
body:not(.legal-body) .tap-badge{bottom:0}
body:not(.legal-body) .faq-list details.answer-highlight{margin:8px 0;padding:14px 18px;border:1px solid #e4d681;border-left:4px solid #229953;border-radius:10px;box-shadow:none;background:#fff2ac}
body:not(.legal-body) .faq-list .answer-highlight summary{padding:0;outline:none}
body:not(.legal-body) .faq-list .answer-highlight summary:focus-visible{outline:2px solid #229953;outline-offset:5px}
body:not(.legal-body) .faq-list .answer-highlight p{margin:10px 0 0;padding:0}
@media(max-width:760px){body:not(.legal-body) .faq-list details.answer-highlight{padding:12px 14px}}
/* Reserve space below the avatar for its tap label. */
body:not(.legal-body) .buddy-button{margin-bottom:34px}
body:not(.legal-body) .tap-badge{bottom:-30px}
@media(max-width:760px){body:not(.legal-body) .buddy-button{margin-bottom:24px}body:not(.legal-body) .tap-badge{bottom:-20px}body:not(.legal-body) .buddy-playground{padding-top:7px;padding-bottom:7px}body:not(.legal-body) .opening-grid{gap:7px}}

body:not(.legal-body) .buddy-button{margin-bottom:52px}body:not(.legal-body) .tap-badge{bottom:-48px}@media(max-width:760px){body:not(.legal-body) .buddy-button{margin-bottom:36px}body:not(.legal-body) .tap-badge{bottom:-32px}}