/* Touch layouts use natural page height instead of a fixed desktop workspace. */
@media(max-width:1100px){
 html,body{height:auto;overflow:auto}
 main{height:auto;display:block;padding:0 20px 24px}
 header{padding:0 20px}
 .selection{margin-bottom:12px}
 .selection-tools{margin-bottom:20px;align-items:center}
 .selection-tools .profile-context{white-space:normal;font-size:11px;line-height:1.6;max-width:none}
 .selection-tools #resetProfile{font-size:11px;min-height:44px;flex-shrink:0}
 .practice-workspace,.practice-workspace.many-zones{display:block;min-height:0}
 .drive-panel{display:grid;grid-template-rows:560px auto;gap:12px}
 .stage .canvas-wrap{inset:80px 20px 160px;overflow:visible}
 .gear-hud{top:auto;bottom:65px;left:20px;width:150px;transform:none}
 .next-hud{top:auto;bottom:80px;right:20px;width:150px;text-align:right}
 .next-data{justify-content:flex-end}
 .stage .overline{font-size:11px}
 .gear-hud h2{font-size:13px}
 .next-hud h2{font-size:20px}
 .session-readout{bottom:18px;font-size:11px}
 .scene-toolbar button{min-height:44px;min-width:44px;font-size:11px}
 .controls{min-height:110px;padding:12px 16px}
 .controls-row{flex-wrap:wrap;gap:12px}
 .play,.icon-button{min-height:44px}
 .play span{font-size:12px}
 .speed select{min-height:44px;font-size:13px}
 input[type=range]{height:24px;margin:10px 0 0;background:transparent}
 input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line)}
 input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
 .corners{margin-top:28px;gap:14px}
 .corners-heading h2{font-size:18px}
 .corners-heading span{font-size:12px}
 #cornerList,.many-zones #cornerList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;overflow:visible;gap:10px;flex:none;padding:0}
 .corner-card,.corner-card:first-child,.corner-card:last-child{min-height:90px;padding:12px!important;grid-template-columns:minmax(0,1fr) 58px}
 .corner-card h3{font-size:13px}
 .corner-card .number,.corner-card label{font-size:10px}
 .corner-card button{min-height:48px;grid-template-columns:1fr}
 .corner-map{display:none}
 .corner-card select{min-height:44px;font-size:14px;width:58px;max-width:58px}
 .many-zones .corner-card{min-height:90px;grid-template-columns:minmax(0,1fr) 58px;gap:8px}
 .many-zones .corner-card h3{font-size:13px}
 .many-zones .corner-card label,.many-zones .corner-card .number{font-size:10px}
 .many-zones .corner-card select{min-height:44px;font-size:14px;width:58px;max-width:58px}
 .bottom-bar{margin-top:24px;align-items:flex-start;flex-wrap:wrap;gap:16px}
 footer{flex-wrap:wrap;font-size:10px;gap:14px;min-width:0}
 footer span{display:none}
 .help summary{font-size:12px;min-height:32px}
 .choice-label{font-size:10px}
 .picker-close{width:44px;height:44px;min-height:44px}
 .picker-footer{flex-wrap:wrap;font-size:11px}
 .stage .track-marker{width:32px;height:32px;min-height:32px}
 .track-marker:after{content:'';position:absolute;inset:-6px;border-radius:50%}
 .pov-controls button{min-height:44px;font-size:12px}
}
@media(max-width:700px){
 header{padding:0 16px}
 main{padding:0 16px 24px}
 .selection{padding:0;gap:10px}
 .visual-choice{height:132px}
 .visual-choice.circuit-choice{height:104px}
 .choice-title,.team-choice .choice-title,.driver-choice .choice-title{font-size:14px;left:14px;bottom:14px;max-width:90%;line-height:1.4}
 .choice-title small{font-size:10px}
 .choice-label{left:14px;top:12px}
 .choice-car{top:40px;right:4px;width:95%}
 .choice-logo{left:14px;right:auto;top:32px;height:14px}
 .choice-driver{width:95px;top:0;right:4px}
 html:not([data-theme=dark]) .driver-choice:after{background:linear-gradient(0deg,#fff 0%,#fffffff2 28%,transparent 70%)}
 html[data-theme=dark] .driver-choice:after{background:linear-gradient(0deg,#19191f 0%,#19191ff2 28%,transparent 70%)}
 .selection-tools{gap:10px;align-items:flex-start}
 .selection-tools .profile-context{font-size:10px;flex:1}
 .selection-tools #resetProfile{font-size:10px;max-width:100px}
 .drive-panel{grid-template-rows:540px auto}
 .stage-heading{left:0;right:0;top:8px}
 .stage h1{font-size:26px;max-width:100%;line-height:1.2}
 .stage h1.long-title{font-size:21px}
 .stage .canvas-wrap{inset:75px 0 190px}
 .gear-hud{left:0;bottom:64px;width:46%}
 #gear{font-size:72px}
 .next-hud{right:0;bottom:82px;width:46%}
 .stage .overline{font-size:10px}
 .next-hud h2{font-size:17px;overflow-wrap:anywhere}
 .session-readout{left:0;bottom:20px}
 .scene-toolbar{right:0;bottom:12px}
 .controls{padding:12px 0;background:transparent}
 .controls-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 8px}
 .play-group{grid-column:1;grid-row:1;gap:6px}
 .play{min-width:0;flex:1;padding:10px 8px}
 .icon-button{min-width:36px;padding:6px}
 .speed{grid-column:2;grid-row:1}
 .lap-position{grid-column:1/-1;grid-row:2;text-align:center}
 .lap-position strong{font-size:14px}
 .lap-position>span{font-size:11px}
 #cornerList,.many-zones #cornerList{grid-template-columns:repeat(2,minmax(0,1fr))}
 .corner-card,.corner-card:first-child,.corner-card:last-child{padding:10px!important;gap:6px;grid-template-columns:minmax(0,1fr) 48px}
 .corner-card h3{font-size:12px}
 .corner-card select{width:48px;max-width:48px}
 .many-zones .corner-card{grid-template-columns:minmax(0,1fr) 48px;gap:6px}
 .many-zones .corner-card select{width:48px;max-width:48px}
 .corner-pov{max-width:calc(100% - 24px)}
 .pov-image{min-height:0}
 .picker-grid,.picker-grid[data-kind=team]{padding:12px;gap:8px}
 .picker-card h3,.driver-tile .tile-caption h3{font-size:18px;line-height:1.2;overflow-wrap:anywhere}
 .picker-card p{font-size:11px;line-height:1.5}
 .picker-header{padding:16px}
 .picker-header h2{font-size:21px}
 .picker-footer{padding:12px 16px}
 .theme{min-height:44px;font-size:10px}
}
@media(max-width:360px){
 main,header{padding-left:12px;padding-right:12px}
 .brand-logo{width:124px}
 .play span{font-size:11px}
 #cornerList,.many-zones #cornerList{grid-template-columns:1fr}
 .corner-card h3{font-size:14px}
}