/* Independent GoodEnglish test host only. User standard: 24 / 16 / 32 / 12. */
@media(max-width:760px){
 html[data-ge-mobile-spacing]{--ge-edge:24px;--ge-title-gap:16px;--ge-section-gap:32px;--ge-item-gap:12px}
 html[data-ge-mobile-spacing] body:has(#browseScreen)>main,
 html[data-ge-mobile-spacing] body:has(#categoryScreen)>main{padding-left:max(24px,env(safe-area-inset-left,0px))!important;padding-right:max(24px,env(safe-area-inset-right,0px))!important;box-sizing:border-box}
 html[data-ge-mobile-spacing] body:has(#browseScreen)>header,
 html[data-ge-mobile-spacing] body:has(#categoryScreen)>header{padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px))!important;box-sizing:border-box}
 html[data-ge-mobile-spacing] #browseScreen .toolbar{gap:12px!important;padding-block:16px!important;margin-bottom:16px!important;flex-wrap:wrap}
 html[data-ge-mobile-spacing] #categories{gap:12px!important;margin-block:16px 32px!important}
 html[data-ge-mobile-spacing] #browseScreen h1{margin-bottom:16px!important}
 html[data-ge-mobile-spacing] #results{margin-inline:0!important;padding-inline:0!important;gap:12px!important;max-width:100%;box-sizing:border-box}
 html[data-ge-mobile-spacing] #results>.card{flex:0 0 100%!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box}
 html[data-ge-mobile-spacing] .expression-pair{margin-block:16px!important}
 html[data-ge-mobile-spacing] .record-actions,
 html[data-ge-mobile-spacing] .bathroom-detail-buttons{gap:12px!important}
 html[data-ge-mobile-spacing] .card .record-practice{margin-top:16px!important}
 html[data-ge-mobile-spacing] .card .details{margin-top:16px!important}
 html[data-ge-mobile-spacing] .lesson{padding-inline:24px!important;box-sizing:border-box;max-width:100%}
 html[data-ge-mobile-spacing] .lesson .bank,
 html[data-ge-mobile-spacing] .lesson .sentence,
 html[data-ge-mobile-spacing] .lesson .tools,
 html[data-ge-mobile-spacing] .lesson .result-actions{gap:12px!important}
 html[data-ge-mobile-spacing] .lesson #exercise h1{margin-bottom:16px!important}
 html[data-ge-mobile-spacing] .lesson #feedback{margin-top:16px!important}
 html[data-ge-mobile-spacing] .lesson .pilot-controls{padding-block:16px!important;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
 html[data-ge-mobile-spacing] #categoryScreen{padding-inline:0!important}
 html[data-ge-mobile-spacing] #categoryScreen .step-list,
 html[data-ge-mobile-spacing] #categoryScreen .category-grid{gap:12px!important}
 html[data-ge-mobile-spacing] #categoryScreen h1{margin-bottom:16px!important}
 html[data-ge-mobile-spacing] .explanation-body+.lesson-section{margin-top:32px!important}
 html[data-ge-mobile-spacing] .bottom-nav{gap:12px!important;padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:600px){
 /* Keep the approved keyboard visible on the setup screen as well as during play. */
 html[data-ge-mobile-spacing] body.custom-game-keyboard:not(.is-playing) .stage{height:150px!important;min-height:150px!important;max-height:150px!important;flex:0 0 150px!important}
 html[data-ge-mobile-spacing] body.custom-game-keyboard .key-actions{gap:12px}
 html[data-ge-mobile-spacing] body.custom-game-keyboard .game-keyboard{padding-bottom:calc(2px + env(safe-area-inset-bottom,0px))}
}