/* Last in the cascade: touch readability without changing saved control positions. */
@media (pointer:coarse),(max-width:760px){
  #auth{min-height:100dvh;padding: max(14px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));overflow-y:auto;}
  #auth .auth-layout{width:100%;max-width:560px;margin:auto;gap:16px;}
  #auth .auth-card{padding:clamp(18px,5vw,28px);border-radius:22px;background:linear-gradient(145deg,#0b302beb,#071d22f5);box-shadow:0 16px 50px #0005;}
  #auth input{min-height:50px;font-size:16px!important;border-radius:12px;}
  #auth button,#auth a{touch-action:manipulation;}
  #auth button[type=submit]{min-height:54px;border-radius:13px;font:700 16px system-ui;}
  #auth .auth-tabs button{min-height:44px;}
  #auth .auth-options{gap:12px;flex-wrap:wrap;}
  #auth .auth-card-intro{font:14px/1.5 system-ui;color:#c2d8ce;}
}
html body main #touch-controls .touch-stick{background:radial-gradient(circle,#24493a65,#102e2990)!important;border:2px solid #b2dcc185!important;box-shadow:inset 0 0 20px #09292060,0 3px 14px #001c2745;}
html body main #touch-controls .touch-knob{background:linear-gradient(145deg,#d8eabcc9,#74ab91b3)!important;border:2px solid #e8f5dcb3!important;box-shadow:0 3px 10px #051d2766;will-change:transform;}
html body main #touch-controls .touch-cross{opacity:.36;}
html body main #touch-controls .touch-actions button{background:#102e298a!important;border:1px solid #c5dfbba0!important;border-radius:14px!important;box-shadow:inset 0 1px #ffffff19,0 3px 10px #09202040;color:#f2f8e5!important;font:700 10px/1.1 system-ui!important;letter-spacing:.3px;min-height:48px;transition:background .1s,box-shadow .1s;}
html body main #touch-controls .touch-actions button.pressed{background:#658c61c9!important;box-shadow:inset 0 2px 8px #0c271855;}
html body main #touch-controls .touch-actions button[data-mode=run]{border-color:#e8ce80!important;color:#ffe3a1!important;}
html body main #touch-controls .touch-actions button[data-mode=walk]{border-color:#9fcfe0!important;color:#bceaff!important;}
@media (prefers-reduced-motion:reduce){#touch-controls *{transition:none!important;}}
@media (pointer:coarse),(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
  body.emerald-game main.game-shell[data-window-custom=true]{padding-bottom:16px!important;}
  body.emerald-game main.game-shell[data-window-custom=true] #touch-controls{z-index:1000;pointer-events:none;}
  body.emerald-game main.game-shell[data-window-custom=true] #touch-controls :is(.touch-stick,.touch-actions){pointer-events:auto;}
}

/* Hide tracks in the app, retaining touch and keyboard scrolling. */
html:is([data-mobile-client=true],[data-native-client=true]) #auth .auth-layout{grid-template-columns:minmax(0,1fr)}
html:is([data-mobile-client=true],[data-native-client=true]),html:is([data-mobile-client=true],[data-native-client=true]) *{scrollbar-width:none!important}
html:is([data-mobile-client=true],[data-native-client=true])::-webkit-scrollbar,html:is([data-mobile-client=true],[data-native-client=true]) *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
@media(pointer:coarse),(max-width:760px){html,body,body *{scrollbar-width:none!important}html::-webkit-scrollbar,body::-webkit-scrollbar,body *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}}

/* Put account access before the community invitation on the mobile website. */
@media(pointer:coarse),(max-width:760px){
  #auth:not(.app-auth) .auth-layout{grid-template-columns:minmax(0,1fr)}
  #auth:not(.app-auth) .auth-layout>.auth-card{grid-column:1;grid-row:1;margin-top:0}
  #auth:not(.app-auth) .auth-layout>.auth-story{grid-column:1;grid-row:2}
}