/* Keep browser text selection / callouts away from active game controls. */
#hud, #sports-club, button { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
button.touch-pressed { transform:translateY(1px); filter:brightness(.88); }
.sports-action, .sports-direction { touch-action:none; }
.sports-directions { display:flex; gap:10px; flex:1; }
#sports-club .sports-direction { flex:1; min-width:64px; min-height:54px; font-size:24px; margin:0; }
#sports-club .sports-action { min-height:54px; }
.sports-action[data-queued="true"] { box-shadow:inset 0 0 0 3px #ddb971; }
.sports-mobile-hint { font-size:12px; line-height:1.4; margin:6px 0; color:#4c604d; }
.sports-field input[type=range] { touch-action:none; }
@media(max-width:550px){
  #sports-club .sports-panel { padding:12px; max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #sports-club .sports-controls { position:sticky; bottom:0; background:#f8f3e9; padding:8px 0; z-index:1; }
  #sports-club .sports-panel[data-sport="badminton"] .sports-action { width:auto; flex:1.3; min-width:100px; }
  #sports-club .sports-panel[data-sport="badminton"] .sports-controls { flex-wrap:nowrap; gap:12px; }
  #sports-club .sports-description { margin:8px 0; }
  #sports-club .sports-stats { margin-top:8px;padding:9px 0; }
  #sports-club .sports-help { margin-top:5px; }
  #actions { bottom:max(20px,env(safe-area-inset-bottom)); }
  #actions button { min-width:46px; }
  #joystick { bottom:max(20px,env(safe-area-inset-bottom)); }
}
@media (max-height:500px) and (orientation:landscape){
  #sports-club .sports-panel { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(180px,1fr);gap:8px 16px;padding:10px 14px; }
  #sports-club .sports-heading { grid-column:1/-1; }
  #sports-club .sports-stage { grid-column:1;grid-row:2/6;width:100%;max-width:calc(62dvh * 800 / 460); }
  #sports-club .sports-stats,#sports-club .sports-notice,#sports-club .sports-controls,#sports-club .sports-help { grid-column:2;margin:0; }
  #sports-club .sports-description { display:none; }
  #sports-club .sports-sliders { gap:8px; }
  #sports-club .sports-controls { flex-wrap:wrap;gap:8px; }
  #sports-club .sports-action { flex:1;min-width:90px; }
}