/* Controls remain in their existing screens; small artwork does not imply a
   small hit target. Keep this after component styles so state feedback agrees. */
#shell #collection-panel .collection-tabs button,
#shell #collection-panel #collection-edit-name,
#shell #collection-panel :is(#store-category,#store-discover,#store-jump,#store-quests),
#shell #career-panel :is(.career-tabs button,select),
#shell #expansion-panel :is(#map-theme,#ai-difficulty){min-height:44px!important;min-width:44px;box-sizing:border-box}
#shell #collection-panel .atelier-owned{min-height:44px!important;min-width:44px;box-sizing:border-box;cursor:pointer}
/* The entire checkbox label is a target; retain a familiar small checkbox. */
#shell :is(.setting-check,.check-row,.atelier-owned):has(input:focus-visible){outline:3px solid var(--ui-focus,#ffe5ad);outline-offset:-3px;border-radius:8px}
/* An inset ring remains visible inside scroll rails and clipped card frames. */
#shell :is(button,summary,a,input,select,textarea):focus-visible{outline:3px solid var(--ui-focus,#ffe5ad)!important;outline-offset:-4px!important;box-shadow:inset 0 0 0 6px #102637!important}
#shell :is([role=tab],[aria-pressed]):is([aria-selected=true],[aria-pressed=true]):not(.card-favorite):not(.selected-favorite){text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px}
#shell button:active:not(:disabled){transition-duration:0s!important}
#shell :is(.overlay,.small-overlay,#main-topbar) button:disabled,
#shell #lobby #auto-join:disabled{background:#273e4d!important;color:#c9d6df!important;border-color:#91a9b9!important;border-style:dashed!important;box-shadow:none!important;opacity:1;filter:none;cursor:default}
@media(orientation:landscape) and (max-height:650px){
 #shell #challenge-choices section{grid-template-columns:minmax(0,1fr)}
 #shell #challenge-choices :is(select,button){width:100%;min-width:44px}
}
#shell:is([data-text-size=large],[data-text-size=extra]) #challenge-choices section{grid-template-columns:minmax(0,1fr)}
#shell:is([data-text-size=large],[data-text-size=extra]) #challenge-choices :is(select,button){width:100%;min-width:44px}
@media(forced-colors:active){
 #shell :is(button,summary,a,input,select,textarea):focus-visible{outline-color:Highlight!important}
 #shell :is(.overlay,.small-overlay,#main-topbar) button:disabled{color:GrayText!important;border-color:GrayText!important}
}
/* At short landscape heights, preserve the tap area by using the spare gap
   between rail controls rather than shrinking the controls themselves. */
@media(orientation:landscape) and (max-height:390px){
 #shell #lobby .player-dock{gap:4px!important}
 #shell #lobby .player-dock>button{min-height:44px!important}
}
@media(orientation:landscape) and (max-height:360px){
 #shell #lobby .player-dock{gap:2px!important}
 #shell #lobby .lobby-card{grid-template-rows:minmax(0,1fr) 44px;gap:8px}
 #shell #lobby .loadout-bar button{min-height:44px}
}
/* Light selected surfaces need a dark ring; a pale ring alone blends in. */
#shell :is(.primary,[role=tab][aria-selected=true],.segmented [aria-pressed=true],.control-choices [aria-pressed=true],.layout-choice [aria-pressed=true]):focus-visible{outline-color:#123145!important}
@media(forced-colors:active){
 #shell :is(.primary,[role=tab][aria-selected=true],.segmented [aria-pressed=true],.control-choices [aria-pressed=true],.layout-choice [aria-pressed=true]):focus-visible{outline-color:Highlight!important}
}