/* Fullscreen and Home Screen web apps share the same safe-area layout. */
html{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#audio-toast{white-space:normal;width:max-content;max-width:min(90vw,520px);text-align:center;line-height:1.7;border-radius:20px}
dialog{max-height:calc(100dvh - 36px - var(--safe-top) - var(--safe-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
.play-fullscreen footer{display:none}
.play-fullscreen body{min-height:100dvh}
.play-fullscreen .topbar{padding: max(16px,var(--safe-top)) max(24px,var(--safe-right)) 12px max(24px,var(--safe-left))}
.play-fullscreen #playground{height:100dvh;min-height:0}
.play-fullscreen #playground .intro{padding-top:max(90px,calc(var(--safe-top) + 75px))}
.play-fullscreen .animal-panel{top:max(165px,calc(var(--safe-top) + 145px));bottom:calc(100px + var(--safe-bottom))}
.play-fullscreen .animal-picture{--portrait-size:min(480px,70vw,calc(100dvh - 365px - var(--safe-top) - var(--safe-bottom)))}
.play-fullscreen .bottom-area{bottom:max(18px,var(--safe-bottom))}
.play-fullscreen .class-header{height:calc(70px + var(--safe-top));padding:var(--safe-top) max(24px,var(--safe-right)) 0 max(24px,var(--safe-left))}
.play-fullscreen #classroom{padding-bottom:max(15px,var(--safe-bottom))}
.play-fullscreen .section-intro{margin-top:18px}
.play-fullscreen .club-note{display:none}
.play-fullscreen .class-nav{gap:0}
@media(display-mode:standalone){footer{display:none}body{min-height:100dvh}#playground{height:100dvh;min-height:0}.topbar{padding-top:max(18px,var(--safe-top))}.class-header{padding-top:var(--safe-top);height:calc(73px + var(--safe-top))}.bottom-area{bottom:max(22px,var(--safe-bottom))}}
@media(min-width:701px) and (max-height:850px){.play-fullscreen #classroom{padding-top:0}.play-fullscreen .section-intro{margin-top:15px}.play-fullscreen .choices{margin-top:18px}.play-fullscreen .quiz-feedback{padding-top:12px}.play-fullscreen .quiz-actions{min-height:48px}.play-fullscreen .lesson-controls{min-height:78px}}
@media(max-height:600px){.play-fullscreen #playground .intro{padding-top:max(66px,var(--safe-top))}.play-fullscreen .animal-panel{top:122px;bottom:80px}.play-fullscreen .animal-picture{--portrait-size:min(280px,60vw,calc(100dvh - 285px))}}