/* Layout follows the available window; changing screens never reloads audio. */
.app{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));min-height:100dvh}
.app input,.app select{max-width:100%}
html:has(.app){-webkit-text-size-adjust:100%;text-size-adjust:100%}
.app{width:100%;min-width:0}
.app .screen,.app .tile-main{min-width:0}
.app .tile-title{white-space:normal;overflow-wrap:break-word;line-height:1.3}
.app .tile-description{display:block;overflow-wrap:break-word}
.app .visual{max-width:100%;width:min(100%,350px);height:auto;aspect-ratio:1}
/* Keep the abstraction and transport visible together, including square screens. */
.app:has(#player.active){padding-bottom:24px}
.app #player.active .visual{width:min(100%,350px,max(110px,calc(100dvh - 340px)));margin:12px auto}
.app #playerTitle{font-size:28px;margin:14px 0 6px;overflow-wrap:break-word}
.app #player.active .controls{margin:18px 0 12px}
html[data-native-platform=android]{--native-safe-bottom:0px;--native-safe-top:0px}
html[data-native-platform=android] .app{padding-top:24px}
html[data-native-platform=android] .nav{bottom:9px;padding:7px}
html[data-native-platform=android] .mini-player{bottom:90px}
@media(min-width:600px){
 html:not([data-mobile-layout="phone"]) .app{max-width:1000px;padding-left:28px;padding-right:28px}
 html:not([data-mobile-layout="phone"]) .app #home.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 20px}
 html:not([data-mobile-layout="phone"]) .app #home>h1,html:not([data-mobile-layout="phone"]) .app #home>p,html:not([data-mobile-layout="phone"]) .app #home>.heading,html:not([data-mobile-layout="phone"]) .app #home>.list{grid-column:1/-1;margin:0}
 html:not([data-mobile-layout="phone"]) .app #home>.hero{grid-column:1;grid-row:3/5;margin:0}
 html:not([data-mobile-layout="phone"]) .app #home>.hero+.heading{grid-column:2;grid-row:3;align-self:end}
 html:not([data-mobile-layout="phone"]) .app #home>.categories{grid-column:2;grid-row:4}
 html:not([data-mobile-layout="phone"]) .app #homeList,html:not([data-mobile-layout="phone"]) .app #catalogList,html:not([data-mobile-layout="phone"]) .app #favoritesList{grid-template-columns:repeat(2,minmax(0,1fr))}
 html:not([data-mobile-layout="phone"]) .app .tile-title{white-space:normal;overflow-wrap:anywhere}
 html:not([data-mobile-layout="phone"]) .app #player.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px;align-items:center}
 html:not([data-mobile-layout="phone"]) .app #playerCat{grid-column:1/-1}
 html:not([data-mobile-layout="phone"]) .app #player>.visual{grid-column:1;grid-row:2/7;width:min(100%,350px);height:auto;aspect-ratio:1;margin:0 auto}
 html:not([data-mobile-layout="phone"]) .app #playerTitle{grid-column:2;grid-row:2;margin:0}
 html:not([data-mobile-layout="phone"]) .app #playerSub{grid-column:2;grid-row:3;margin:0}
 html:not([data-mobile-layout="phone"]) .app #player>.controls{grid-column:2;grid-row:4}
 html:not([data-mobile-layout="phone"]) .app #player>.timers{grid-column:2;grid-row:5}
 html:not([data-mobile-layout="phone"]) .app #player>.progress-wrap{grid-column:2;grid-row:6}
 html:not([data-mobile-layout="phone"]) .app #player>.guide-cue{grid-column:1/-1}
 html:not([data-mobile-layout="phone"]) .app #profile.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
 html:not([data-mobile-layout="phone"]) .app #profile>h1,html:not([data-mobile-layout="phone"]) .app #profile>h2,html:not([data-mobile-layout="phone"]) .app #profile>p,html:not([data-mobile-layout="phone"]) .app #profile>.premium{grid-column:1/-1}
 html:not([data-mobile-layout="phone"]) body:has(.app) .nav{width:min(calc(100% - 40px),760px)}
 html:not([data-mobile-layout="phone"]) body:has(.app) .nav button{width:25%;max-width:185px}
 html:not([data-mobile-layout="phone"]) body:has(.app) .mini-player{width:min(calc(100% - 40px),760px)}
}
@media(max-width:359px){
 .app{padding-left:12px;padding-right:12px}
 .app .hero{padding:18px}
 .app .tile{padding:12px;gap:10px}
 .app .tile-icon{width:44px;height:44px}
 .app .tile-title{font-size:15px}
 .app .sonya-slide-actions{gap:5px}
 .app .sonya-slide-actions>.primary{padding-left:12px;padding-right:12px;font-size:12px}
 .app h1{font-size:29px;letter-spacing:-.7px}
 .app .tile-icon{width:40px;height:44px}
 .app .heart{flex:none;width:36px;padding:6px 2px}
 .app #playerTitle{font-size:25px}
 body:has(.app) .nav button{font-size:10px;min-width:0}
}

/* Profile columns contain complete sections, never isolated headings. */
.sonya-profile-main,.sonya-profile-settings{min-width:0}
.app .ach-screen,.app .sonya-referral-screen{width:100%;max-width:none;margin:0}
.app #profile.ach-host-open,.app #profile.referral-open{display:block!important}
.app .list>.empty{grid-column:1/-1}
.app .ref-columns{display:grid;gap:20px}
@media(min-width:600px){
 html:not([data-mobile-layout="phone"]) .app #profile.active{align-items:start}
 html:not([data-mobile-layout="phone"]) .app #profile>.sonya-level-back,html:not([data-mobile-layout="phone"]) .app #profile>.heading{grid-column:1/-1}
 html:not([data-mobile-layout="phone"]) .app #profile>.sonya-profile-main,html:not([data-mobile-layout="phone"]) .app #profile>.sonya-profile-settings{display:flex;flex-direction:column;gap:20px}
 html:not([data-mobile-layout="phone"]) .sonya-profile-main>:first-child{margin-top:0}
 html:not([data-mobile-layout="phone"]) .sonya-profile-main>.premium,html:not([data-mobile-layout="phone"]) .sonya-profile-main>.sonya-referral-card,html:not([data-mobile-layout="phone"]) .sonya-profile-settings>.profile-card,html:not([data-mobile-layout="phone"]) .sonya-profile-settings>.heading{margin:0}
 html:not([data-mobile-layout="phone"]) .app .ref-columns{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
/* Physical segments are used only when the platform exposes them. */
html[data-segmented=horizontal]:has(.app){--sonya-left-pane:calc(env(viewport-segment-width 0 0,50vw) - 48px);--sonya-right-pane:calc(env(viewport-segment-width 1 0,50vw) - 48px);--sonya-hinge:calc(env(viewport-segment-left 1 0,50vw) - env(viewport-segment-right 0 0,50vw));--sonya-pane-gap:calc(var(--sonya-hinge) + 48px)}
html[data-segmented=horizontal] .app{max-width:none!important;width:100%;padding-left:24px!important;padding-right:24px!important}
html[data-segmented=horizontal] .app header,html[data-segmented=horizontal] .app .screen>h1,html[data-segmented=horizontal] .app .screen>p,html[data-segmented=horizontal] .app .ach-screen>h1,html[data-segmented=horizontal] .app .ach-screen>p,html[data-segmented=horizontal] .app .sonya-referral-screen>h1,html[data-segmented=horizontal] .app .sonya-referral-screen>p{max-width:var(--sonya-left-pane)}
html[data-segmented=horizontal] .app #home.active,html[data-segmented=horizontal] .app #profile.active,html[data-segmented=horizontal] .app #player.active,html[data-segmented=horizontal] .app #homeList,html[data-segmented=horizontal] .app #catalogList,html[data-segmented=horizontal] .app #favoritesList,html[data-segmented=horizontal] .app .ref-columns{grid-template-columns:var(--sonya-left-pane) var(--sonya-right-pane);column-gap:var(--sonya-pane-gap)}
html[data-segmented=horizontal] .app .list>.empty{grid-column:1}
html[data-segmented=horizontal] .app .ach-grid{grid-template-columns:repeat(3,minmax(0,1fr)) var(--sonya-hinge) repeat(3,minmax(0,1fr));column-gap:24px}
html[data-segmented=horizontal] .app .ach-tile:nth-child(6n+1){grid-column:1}html[data-segmented=horizontal] .app .ach-tile:nth-child(6n+2){grid-column:2}html[data-segmented=horizontal] .app .ach-tile:nth-child(6n+3){grid-column:3}html[data-segmented=horizontal] .app .ach-tile:nth-child(6n+4){grid-column:5}html[data-segmented=horizontal] .app .ach-tile:nth-child(6n+5){grid-column:6}html[data-segmented=horizontal] .app .ach-tile:nth-child(6n){grid-column:7}
html[data-segmented=horizontal] body:has(.app) .nav,html[data-segmented=horizontal] body:has(.app) .mini-player{width:calc(env(viewport-segment-width 0 0,50vw) - 24px);left:calc(env(viewport-segment-left 0 0,0px) + env(viewport-segment-width 0 0,50vw)/2)}
html[data-segmented=horizontal] .ach-dialog{width:env(viewport-segment-width 0 0,50vw)!important;right:auto}
@media(vertical-viewport-segments:2){
 body:has(.app) .app{height:env(viewport-segment-height 0 0);min-height:0;overflow:auto;padding-bottom:190px}
 body:has(.app) .nav{bottom:calc(100dvh - env(viewport-segment-bottom 0 0) + 9px)}
 body:has(.app) .mini-player{bottom:calc(100dvh - env(viewport-segment-bottom 0 0) + 90px)}
}

html:has(.app){scrollbar-width:none}html:has(.app)::-webkit-scrollbar{display:none}