#touch-controls { display:none; }
#start-game { min-height:48px; padding:12px 24px; border:1px solid var(--accent); font-size:16px; }
.touch-mode { overscroll-behavior:none; }
.touch-mode #view { touch-action:none; }
.touch-mode #touch-controls { display:block; position:fixed; inset:0; z-index:5; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.touch-mode:has(#overlay:not(.is-hidden)) #touch-controls,
.touch-mode:has(#panel.is-open) #touch-controls,
.touch-mode:has(#help.is-open) #touch-controls { visibility:hidden; }
#move-pad { position:absolute; left:max(20px,env(safe-area-inset-left)); bottom:calc(40px + env(safe-area-inset-bottom)); width:136px; height:136px; border:1px solid rgba(240,180,90,.6); border-radius:50%; background:rgba(9,13,19,.45); pointer-events:auto; touch-action:none; }
#move-stick { position:absolute; width:52px; height:52px; top:41px; left:41px; border-radius:50%; background:rgba(240,180,90,.75); border:2px solid #f6d296; pointer-events:none; }
.pad-label { position:absolute; top:12px; width:100%; text-align:center; font-size:12px; color:var(--ink); }
#touch-actions { position:absolute; right:max(20px,env(safe-area-inset-right)); bottom:calc(40px + env(safe-area-inset-bottom)); display:grid; gap:8px; width:140px; pointer-events:auto; }
#touch-actions button { min-height:46px; border:1px solid var(--edge-bright); background:rgba(9,13,19,.8); border-radius:8px; touch-action:none; font-size:14px; }
#touch-actions .altitude { display:flex; gap:8px; }
.altitude button { flex:1; }
#touch-actions #touch-stop { background:rgba(240,180,90,.92); color:#080b10; font-weight:700; min-height:52px; }
#touch-actions button.pressed, #touch-actions button:active { background:#f0b45a; color:#080b10; }
#touch-tip { position:absolute; bottom:calc(7px + env(safe-area-inset-bottom)); width:100%; margin:0; text-align:center; font-size:12px; text-shadow:0 1px 4px #000; }
.touch-mode #masthead { top:calc(10px + env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); }
.touch-mode #masthead h1 { font-size:23px; }
.touch-mode #masthead p, .touch-mode #hint { display:none; }
.touch-mode #tools { top:calc(8px + env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); }
.touch-mode #tools button { min-height:44px; font-size:14px; letter-spacing:.04em; padding:8px; }
.touch-mode #instruments { top:calc(64px + env(safe-area-inset-top)); bottom:auto; left:max(12px,env(safe-area-inset-left)); width:170px; gap:6px; }
.touch-mode #kinematics { padding:8px 10px; }
.touch-mode #kinematics .big { margin:4px 0; }
.touch-mode #kinematics .big span:first-child { font-size:21px; }
.touch-mode .eyebrow { font-size:12px; letter-spacing:.06em; }
.touch-mode .rows { gap:3px; margin:8px 0; }
.touch-mode .row, .touch-mode .row dt { font-size:12px; letter-spacing:0; gap:3px; }
.touch-mode #gauge { padding:7px; }
.touch-mode #gauge .caption { font-size:12px; gap:4px; flex-wrap:wrap; }
.touch-mode #v-dopword { font-size:12px; }
.touch-mode #clocks { top:calc(64px + env(safe-area-inset-top)); bottom:auto; right:max(12px,env(safe-area-inset-right)); width:150px; min-width:0; padding:8px; }
.touch-mode #clocks dl { margin:6px 0 0; }
.touch-mode .clock { gap:4px; grid-template-columns:1fr; }
.touch-mode .clock dd { font-size:16px; }
.touch-mode #clocks footer { font-size:12px; }
.touch-mode #galilean { bottom:calc(205px + env(safe-area-inset-bottom)); font-size:12px; width:max-content; max-width:90vw; }
.touch-mode #panel, .touch-mode #help { max-height:calc(100dvh - 90px - env(safe-area-inset-top)); overscroll-behavior:contain; }
.touch-mode #panel { top:calc(60px + env(safe-area-inset-top)); width:min(360px,calc(100vw - 24px)); }
.touch-mode .drawer-head button { min-width:44px; min-height:44px; font-size:24px; }
.touch-mode .drawer-head h2 { font-size:18px; }
.touch-mode .check, .touch-mode .slider .top label, .touch-mode .slider output { font-size:14px; }
.touch-mode .check small, .touch-mode #credit { font-size:12px; }
.touch-mode .check input { width:22px; height:22px; }
.touch-mode .slider input { height:32px; }
.touch-mode #help p, .touch-mode #help li { font-size:16px; }
.touch-mode #overlay .card { width:min(400px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; }
.touch-mode #overlay p { font-size:16px; }
@media (max-height:520px) and (orientation:landscape) {
 .touch-mode #instruments { width:200px; }
 .touch-mode .rows, .touch-mode #rapidity, .touch-mode #gauge, .touch-mode #clocks footer, .touch-mode #clocks > .eyebrow { display:none; }
 .touch-mode #clocks { width:150px; }
 .touch-mode .clock { grid-template-columns:1fr auto; }
 .touch-mode .clock dd { font-size:14px; }
 #move-pad { width:112px; height:112px; bottom:calc(30px + env(safe-area-inset-bottom)); }
 #move-stick { left:29px; top:29px; }
 #touch-actions { bottom:calc(30px + env(safe-area-inset-bottom)); gap:5px; }
 #touch-actions button { min-height:40px; }
 #touch-actions #touch-stop { min-height:44px; }
}
@media (max-width:359px) { .touch-mode #instruments {width:156px;} .touch-mode #clocks {width:126px;} .touch-mode #masthead h1 {font-size:19px;} #move-pad {left:12px;} #touch-actions {right:12px;width:130px;} }
