/* Shared semantics, without redundant instructions in the game surface. */
#focus-court .court-help{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0}
#focus-court .court-bottom[hidden]{display:none}
#focus-court .basket-learning{margin:0}
#focus-court .basket-learning summary{color:#d5e5bd;padding:0 0 12px;min-height:40px}

@media(max-width:640px){
  /* Two equal dimensions keep every bubble circular. Short tap cues live above the board. */
  #myths .myth-board{align-items:start}
  #myths .myth-bubble{aspect-ratio:1/1;height:auto;min-height:0;align-self:start}
  #myths .myth-front,#myths .myth-back{padding:12px 10px;gap:0;border-radius:50%;overflow:hidden}
  #myths .myth-front>small,#myths .myth-back>small{display:none}
  body #myths .myth-front>span,body #myths .myth-back>strong{font-size:16px!important;line-height:1.35}

  /* Keep the court, aiming slider and shoot/reset buttons in one phone-sized group. */
  body #focus-court .focus-game{padding:12px 10px;gap:12px}
  #focus-court .court-top{padding:10px 12px;min-height:40px}
  #focus-court .court-top .small-label{max-width:none;font-size:14px!important;line-height:1.4}
  #focus-court .court-top .example-badge{font-size:13px!important;white-space:nowrap;line-height:1.4}
  body #focus-court .court-stage{aspect-ratio:auto;min-height:0;height:clamp(220px,36svh,280px)}
  body #focus-court .distraction-card{min-height:62px;max-width:calc(100% - 12px);padding:8px;font-size:15px!important;line-height:1.35;gap:0}
  #focus-court .distraction-card small{display:none}
  #focus-court .court-bottom{padding:8px 12px;min-height:38px;line-height:1.4;font-size:15px}
  #focus-court .basket-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:0}
  #focus-court .range-control{grid-column:1/-1;order:1}
  #focus-court .range-control label{line-height:1.4;font-size:16px!important}
  #focus-court .range-control input{height:36px;margin:3px 0 0;display:block;touch-action:pan-y}
  #focus-court #basket-shoot{grid-column:1;order:2;min-height:46px;padding:11px 14px;line-height:1.4;white-space:nowrap}
  #focus-court #basket-reset{grid-column:2;order:3;align-self:stretch;min-width:66px;min-height:46px;margin:0;padding:10px;border:1px solid #74875c;border-radius:3px;text-align:center;justify-content:center;line-height:1.4}
  #focus-court .reframe-feedback{grid-column:1/-1;order:4;padding:13px 14px}
  #focus-court .reframe-feedback:not(.has-reframe){display:none}
  #focus-court .reframe-feedback>.small-label{font-size:13px!important}
  body #focus-court .reframe-original{font-size:14px!important;margin-top:8px;line-height:1.4}
  body #focus-court #reframe-text{font-size:16px!important;line-height:1.55;margin-top:8px}
  #focus-court .reframe-review{grid-column:1/-1;order:5}
  #focus-court .basket-learning{grid-column:1/-1;order:6;padding-top:12px}
  #focus-court .basket-learning summary{padding:0;min-height:38px}

  /* Stable height prevents Safari's changing safe-area inset enlarging the bar on scroll. */
  body .mobile-booking{height:52px;min-height:52px;max-height:52px;box-sizing:border-box;padding:4px 12px;gap:0;line-height:1.25;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body .mobile-booking>span{display:none}
  body .mobile-booking a{width:100%;height:44px;min-height:44px;justify-content:center;line-height:1.25;white-space:nowrap;font-size:16px!important}
}
@media(max-width:360px){body #myths .myth-front>span,body #myths .myth-back>strong{font-size:15px!important;line-height:1.3}#myths .myth-front,#myths .myth-back{padding:10px 8px}}