/* Navigation fits narrow phones while retaining account and profile access. */
[data-route-heading]:focus{outline:none}
.classic-back-art>.deck-back>span{font-size:20px;font-weight:700;line-height:1.3}
.roster-portrait>.profile-avatar{display:inline-flex!important;align-items:center;justify-content:center}
.ludo-shell .topbar .icon-button,.ludo-top-actions .profile-button{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;flex-shrink:0}
.ludo-shell .topbar .profile-button{padding:0!important}
.ludo-page-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
 .ludo-shell .topbar{display:grid;grid-template-columns:48px minmax(0,1fr) auto;padding-inline:12px!important;gap:8px!important}
 .ludo-top-actions{gap:4px}.ludo-top-actions>[data-route=help]{display:none}
 .ludo-top-actions .account-entry{min-height:48px;max-width:100px;font-size:11px;padding:8px!important;white-space:nowrap}
 .ludo-mobile-menu{top:78px}
 .community-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-inline:0;padding-inline:0;overflow:visible}
 .community-tabs button{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:64px;padding:9px 3px;font-size:11px;white-space:normal;text-align:center}
 .community-tabs button svg{width:18px;height:18px;flex-shrink:0}
 .practice-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
 .practice-steps .btn{min-width:0!important;width:100%;font-size:12px;padding:12px!important}
}
@media(max-width:350px){.practice-steps{grid-template-columns:1fr}.matchmaking-config .form-row{grid-template-columns:minmax(0,1fr)}}

/* The complete row is clickable; the input has a 48px target and a 28px track. */
.switch-row>span{min-width:0;flex:1}.switch-row small{overflow-wrap:break-word}
.switch-row input[role=switch]{appearance:none!important;position:relative;display:block;width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;flex:0 0 48px;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer;--switch-track:#50688f;--switch-thumb:#fff8e8}
.switch-row input[role=switch]::before{content:'';position:absolute;left:0;top:10px;width:48px;height:28px;border-radius:14px;background:var(--switch-track);border:1px solid #8195b7;box-sizing:border-box}
.switch-row input[role=switch]::after{content:'';position:absolute;left:4px;top:14px;width:20px;height:20px;border-radius:50%;background:var(--switch-thumb);transform:translateX(0);transition:transform .15s ease-out}
.switch-row input[role=switch]:checked{--switch-track:var(--gold);--switch-thumb:var(--gold-ink)}
.switch-row input[role=switch]:checked::after{background:var(--switch-thumb);transform:translateX(20px)}

/* Clear, readable decision windows, with the scene kept behind the backdrop. */
body .modal-scrim{background:#071126c9!important;padding:16px}
body .modal{background:var(--surface)!important;backdrop-filter:none!important;max-width:min(580px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
body .modal-header{position:sticky;top:-1px;z-index:2;background:var(--surface)!important;align-items:center;gap:12px}
body .modal-header h2{min-width:0;overflow-wrap:break-word}
body .modal-header .icon-button{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;flex-shrink:0}
body .modal .roster-row{display:flex!important;align-items:center;gap:12px;min-width:0}
.roster-portrait{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center}
.roster-portrait>.profile-avatar,.roster-portrait>.robot-emblem{width:40px!important;height:40px!important}
.roster-copy{min-width:0;flex:1}.roster-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.roster-copy small{display:block;margin-top:4px;font-size:12px}
.roster-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;max-width:120px}
.roster-actions:empty{display:none}.roster-actions .pill{white-space:nowrap;font-size:11px}
.family-grid button{min-height:64px;min-width:48px}.queen-targets button{min-height:64px;min-width:0}
.queen-targets button>.profile-avatar,.queen-targets button>.robot-emblem{width:40px;height:40px;flex:0 0 40px}
.queen-targets button>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(pointer:coarse),(max-width:1000px){
 .store-item .text-link{min-height:48px;font-size:12px}
 .store-item-copy>div{flex-wrap:wrap;gap:6px}.store-item .ownership-label{font-size:11px}
 .avatar-gallery-tabs button,body:not([data-route=game]) button[data-lesson],.club-footer button,.account-tabs button{min-height:48px!important}
 .account-links .text-link,.help-faq>.text-link,.profile-photo-actions .text-link,.roster-actions button{min-height:48px}
}
body[data-route=game] .game-route .game-topline .icon-button{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;padding:12px!important;flex-shrink:0}
@media(max-width:600px){
 body[data-route=game] .game-topline{padding:0!important;gap:2px!important;margin-inline:-8px!important;min-height:48px!important}
 body[data-route=game] .game-topline>.row{gap:0!important;flex:0 0 auto}
 body[data-route=game] .game-title{gap:4px;min-width:0;flex:1}
 body[data-route=game] .game-title>div{min-width:0}
 body[data-route=game] .game-title h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:370px){body[data-route=game] .game-title h1{font-size:13px}}
@media(prefers-reduced-motion:reduce){.switch-row input[role=switch]::after{transition:none}}
body[data-motion=off] .switch-row input[role=switch]::after{transition:none}