/* Renderer sets the matching 480:600 portrait or 960:480 landscape ratio inline. */
canvas#view{width:100%;height:auto;min-height:0;aspect-ratio:2 / 1;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none}
button,input,select,summary{min-height:44px}
input[type=checkbox]{min-height:24px;min-width:24px;margin:0 4px 0 0}
label{min-height:44px;flex-wrap:wrap}
input[type=range]{min-height:44px}
summary{display:list-item;padding:10px 4px;cursor:pointer}
button#left,button#right{min-width:130px;touch-action:none}
output{overflow-wrap:anywhere;line-height:1.4}
progress#power{max-width:100%;height:20px;vertical-align:middle}
@media(max-width:650px){
 body{width:100%;max-width:none;padding:8px;margin:0;font-size:14px;overflow-x:hidden}
 h1{font-size:21px;line-height:1.2}
 body>label{width:calc(50% - 12px);vertical-align:top;justify-content:space-between;font-size:12px}
 body>label select{max-width:100%;width:100%}
 .hardware label{min-width:0;gap:8px;justify-content:space-between}
 .hardware select{min-width:0;width:100%;max-width:100%}
 input[type=number]{width:78px;font-size:16px}
 select{font-size:16px;max-width:100%}
 button{font-size:14px;max-width:100%;white-space:normal}
 #shop{display:flex;flex-wrap:wrap;gap:4px}#shop button{flex:1 1 140px;margin:0}
 small{font-size:12px;line-height:1.5}
 /* Keep live distance/speed wrapping from moving the canvas or touch targets. */
 #readout{height:4.2em;overflow-y:auto;overflow-anchor:none}
 #view{border-radius:4px;margin-top:10px}
 #left,#right{width:calc(50% - 10px)}
}
@media(orientation:landscape) and (max-height:550px){
 body{max-width:1120px;padding:6px 10px;margin:0 auto}
 h1{font-size:20px}body>p:first-of-type{margin:4px 0}
 #view{max-width:min(960px,calc(200dvh - 140px));margin-left:auto;margin-right:auto}
 body>label{font-size:12px;margin:2px 4px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Held-grip feedback must not move the canvas or pointer target through scroll anchoring. */
#gripStatus{height:2.8em;overflow-y:auto;overflow-anchor:none}
#dropGrip[hidden]{display:inline-block;visibility:hidden;pointer-events:none}
#launchNear[hidden]+#dropGrip[hidden]{display:none}

/* Retry/coaching rows can change below the canvas; browser anchoring must not move the play view. Explicit bank/recovery scrolling remains. */
body{overflow-anchor:none}

/* Preparation stays beside the canvas when top controls scroll away. */
#preparation{padding:8px;background:#263d32;border-radius:6px;margin:6px 0}
#preparation .toolbar{flex-wrap:nowrap}
#timeNear{touch-action:none;flex:1;max-width:240px}
.near-meter{position:relative;flex:1;max-width:180px;min-width:70px;text-align:center;font-size:10px}
#powerNear{width:100%;height:20px;display:block}
.near-meter:before{content:"";position:absolute;left:48%;top:0;height:20px;width:5%;border:2px solid #dae9b1;border-radius:4px;pointer-events:none}
#preparationStatus{height:4.2em;overflow-y:auto;overflow-anchor:none;font-size:12px}