/* Phone composition: identity, live world, then thumb-reachable actions. */
@media (max-width:760px), (max-height:520px) and (max-width:1000px) {
  :root { --phone-top:env(safe-area-inset-top,0px); --phone-bottom:env(safe-area-inset-bottom,0px); }
  #masthead { left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); }
  #brand { min-height:44px; gap:9px; font-size:11px; }
  #brand>span:last-child { display:block; }
  #brand small { font-size:6px; letter-spacing:.18em; }
  .brand-symbol { font-size:21px; padding:3px 5px; }
  #masthead .top-actions button { min-height:44px; }
  #helpButton { display:block; }
  .menu-copy h1 br { display:none; }
  .menu-copy h1 { white-space:nowrap; }
  .menu-actions button { min-height:58px; padding:14px; gap:8px; font-size:10px; line-height:1.3; }
  .menu-actions button>span { flex:none; font-size:20px; }
  .preset-row button { min-height:44px; }
  .menu-footer,.scene-caption { display:none; }
  .hud-top { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); top:calc(12px + var(--phone-top)); gap:10px; }
  .run-title { min-width:0; flex:1; }
  .run-title strong { font-size:13px; max-width:128px; line-height:1.15; }
  .run-title span,.objective span,.score span { font-size:8px; letter-spacing:.08em; }
  .objective { flex:1; }
  .objective strong { font-size:23px; }
  .score { flex:1; }
  .score strong { font-size:23px; }
  .score small { font-size:8px; }
  body.touch.playing .hud-bottom { top:calc(86px + var(--phone-top)); bottom:auto; left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); align-items:flex-start; }
  body.touch.playing .map-wrap { width:96px; border-color:rgba(236,232,215,.25); background:rgba(10,16,13,.62); }
  body.touch.playing #minimap { width:94px; height:94px; }
  #location { font-size:6px; left:6px; bottom:5px; }
  .telemetry { width:106px; padding:9px 9px 10px; background:linear-gradient(90deg,rgba(12,20,15,.25),rgba(12,20,15,.73)); border-right:2px solid rgba(250,103,56,.6); }
  .speed { gap:7px; margin-bottom:9px; }
  .speed strong { font-size:42px; }
  .speed span { font-size:7px; }
  .speed small { font-size:14px; margin-top:5px; }
  .meter { margin-top:8px; }
  .meter>span { font-size:8px; margin-bottom:4px; }
  .meter>i { height:3px; }
  #touchControls { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:calc(12px + var(--phone-bottom)); }
  #touchControls button { min-width:64px; width:64px; height:68px; padding:10px 7px; border:1px solid rgba(236,232,215,.48); border-bottom:3px solid rgba(236,232,215,.4); background:rgba(17,26,21,.84); font-size:10px; box-shadow:0 4px 15px rgba(0,0,0,.14); }
  #touchControls .touch-steer button { font-size:22px; }
  .touch-steer,.touch-pedals { gap:8px; }
  #touchControls .touch-pedals [data-control=gas] { width:68px; min-width:68px; height:82px; background:rgba(250,103,56,.94); color:#161a14; border-color:#ff9b70; font-size:15px; letter-spacing:.05em; }
  #touchControls .touch-extras { position:absolute; left:50%; right:auto; bottom:96px; transform:translateX(-50%); gap:8px; }
  #touchControls .touch-extras button { width:56px; min-width:56px; height:48px; font-size:10px; padding:8px 4px; }
  body.touch.playing .hud-tools { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:calc(174px + var(--phone-bottom)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  body.touch.playing .hud-tools button { min-height:44px; padding:10px 4px; font-size:9px; border-top:1px solid rgba(236,232,215,.2); background:rgba(10,17,13,.74); }
  .hud-tools kbd { display:none; }
  #slowIndicator { top:calc(70px + var(--phone-top)); font-size:8px; }
  .modal { padding:calc(12px + var(--phone-top)) max(12px,env(safe-area-inset-right)) calc(12px + var(--phone-bottom)) max(12px,env(safe-area-inset-left)); }
  .dialog { max-height:calc(100dvh - 24px - var(--phone-top) - var(--phone-bottom)); padding:28px 22px 22px; }
  .dialog .close { width:44px; height:44px; padding:0; top:6px; right:6px; }
  .dialog .primary,.dialog .secondary,.dialog .quiet { min-height:48px; }
  .setting { min-height:44px; }
  .setting select { min-height:48px; font-size:16px; }
  .setting.toggle { position:relative; padding:6px 0; }
  .setting.toggle input { width:26px; height:26px; margin:9px; flex:none; }
  .setting small { line-height:1.4; }
  .key-grid { grid-template-columns:minmax(104px,.85fr) minmax(0,1.15fr); gap:13px 10px; }
  #toast { bottom:calc(232px + var(--phone-bottom)); width:max-content; max-width:calc(100vw - 24px); font-size:10px; padding:12px 16px; }
  #generatorScreen { padding:calc(8px + var(--phone-top)) max(8px,env(safe-area-inset-right)) calc(8px + var(--phone-bottom)) max(8px,env(safe-area-inset-left)); }
  .rc-editor button,.rc-generator button,.rc-editor summary,.rc-generator summary { min-height:44px; }
  .rc-editor .rc-editor-close,.rc-generator .rc-generator-close { min-width:44px; min-height:44px; }
  .rc-editor .rc-editor-stepper :is(button,input) { width:44px; height:44px; }
  .rc-editor input[type=range] { min-height:44px; }
  .rc-editor :is(input:not([type=range]),select,textarea),.rc-generator :is(input,textarea) { font-size:16px; min-height:44px; }
  .replay-header { left:16px; right:16px; }
  .replay-header button,.replay-controls button,.replay-controls select { min-height:44px; }
  .replay-controls { left:12px; right:12px; bottom:calc(12px + var(--phone-bottom)); }
  .replay-controls input { min-height:44px; }
}

@media (max-width:760px) and (orientation:portrait) {
  #masthead { top:calc(8px + var(--phone-top)); height:96px; display:block; }
  #brand { width:max-content; }
  #masthead .top-actions { position:absolute; top:48px; left:0; right:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0; background:rgba(11,18,14,.78); border:1px solid rgba(236,232,215,.21); }
  #masthead .top-actions .quiet { font-size:9px; letter-spacing:.08em; padding:8px 3px; border-right:1px solid rgba(236,232,215,.14); }
  #masthead .top-actions .quiet:nth-child(3) { border-right:0; }
  #masthead #muteButton { position:absolute; right:-1px; top:-49px; padding:8px 12px; min-width:84px; font-size:8px; border-color:rgba(236,232,215,.21); }
  #menu { background:linear-gradient(180deg,rgba(6,13,10,.94),rgba(6,13,10,.73) 24%,rgba(6,13,10,.05) 40%,transparent 58%,rgba(6,13,10,.74) 77%,rgba(6,13,10,.96)); }
  .menu-copy { inset:0; width:auto; }
  .menu-copy>.overline { position:absolute; top:calc(120px + var(--phone-top)); left:20px; font-size:8px; letter-spacing:.16em; }
  .menu-copy .orange-line { width:22px; }
  .menu-copy h1 { position:absolute; top:calc(144px + var(--phone-top)); left:18px; right:16px; margin:0; font-size:clamp(45px,13.3vw,72px); line-height:.9; letter-spacing:-.045em; }
  .menu-copy .tagline { position:absolute; top:calc(205px + var(--phone-top)); left:20px; margin:0; font-size:16px; line-height:1.18; letter-spacing:-.025em; }
  .menu-copy .intro { position:absolute; left:20px; right:20px; bottom:calc(164px + var(--phone-bottom)); margin:0; font-size:10px; line-height:1.5; color:#c1c7b8; }
  .menu-actions { position:absolute; left:16px; right:16px; bottom:calc(84px + var(--phone-bottom)); display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:none; }
  .menu-actions .secondary { background:rgba(16,24,19,.92); }
  .preset-row { position:absolute; left:16px; right:16px; bottom:calc(19px + var(--phone-bottom)); margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .preset-row button { font-size:9px; line-height:1.3; padding:8px 2px; text-align:left; border-top:1px solid rgba(236,232,215,.19); }
  #editorScreen { display:flex; align-items:flex-end; background:linear-gradient(0deg,rgba(5,13,8,.75),transparent 75%); }
  #editorMount { width:100%; height:auto; max-height:78dvh; }
  #replayScreen { border-width:16px; }
  .replay-header h2 { max-width:150px; font-size:19px; }
}

@media (max-width:390px) and (max-height:780px) and (orientation:portrait) {
  .menu-copy h1 { top:calc(140px + var(--phone-top)); font-size:46px; }
  .menu-copy .tagline { top:calc(192px + var(--phone-top)); font-size:14px; }
  .menu-copy .intro { bottom:calc(148px + var(--phone-bottom)); font-size:9px; }
  .menu-actions { bottom:calc(72px + var(--phone-bottom)); }
  .preset-row { bottom:calc(12px + var(--phone-bottom)); }
  .menu-actions button { font-size:9px; padding:12px; }
}

@media (max-height:520px) and (max-width:1000px) and (orientation:landscape) {
  #masthead { top:calc(5px + var(--phone-top)); left:max(18px,env(safe-area-inset-left)); right:max(18px,env(safe-area-inset-right)); }
  #brand { font-size:10px; }
  #brand small { display:none; }
  #masthead .top-actions { gap:0; padding:0 4px; }
  #masthead .top-actions .quiet { font-size:8px; padding:8px 12px; }
  #masthead #muteButton { margin-left:4px; padding:8px 10px; min-height:44px; }
  #menu { background:linear-gradient(90deg,rgba(6,13,10,.94),rgba(6,13,10,.79) 30%,rgba(6,13,10,.17) 55%,transparent 80%); }
  .menu-copy { left:max(24px,env(safe-area-inset-left)); top:calc(66px + var(--phone-top)); bottom:calc(8px + var(--phone-bottom)); width:320px; }
  .menu-copy>.overline { font-size:7px; letter-spacing:.15em; }
  .menu-copy h1 { font-size:48px; margin:16px 0 11px; line-height:.9; }
  .menu-copy .tagline { font-size:17px; line-height:1.1; margin:0; }
  .menu-copy .intro { font-size:9px; line-height:1.4; margin:10px 0; max-width:280px; }
  .menu-actions { position:absolute; left:0; right:0; bottom:49px; display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:none; }
  .menu-actions button { min-height:52px; padding:11px; font-size:9px; }
  .preset-row { position:absolute; left:0; right:0; bottom:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .preset-row button { font-size:8px; padding:7px 0; line-height:1.3; text-align:left; }
  .hud-top { top:calc(10px + var(--phone-top)); }
  .run-title strong { font-size:14px; max-width:180px; }
  body.touch.playing .hud-bottom { top:calc(75px + var(--phone-top)); }
  body.touch.playing .map-wrap { width:86px; }
  body.touch.playing #minimap { width:84px; height:84px; }
  .telemetry { width:102px; }
  .speed strong { font-size:38px; }
  #touchControls { bottom:calc(10px + var(--phone-bottom)); }
  #touchControls .touch-extras { position:static; transform:none; gap:8px; padding-bottom:2px; }
  #touchControls .touch-extras button { width:56px; min-width:56px; height:48px; }
  #touchControls .touch-pedals [data-control=gas] { height:76px; }
  body.touch.playing .hud-tools { left:26%; right:26%; bottom:calc(77px + var(--phone-bottom)); gap:6px; }
  body.touch.playing .hud-tools button { min-height:44px; font-size:8px; }
  #slowIndicator { top:calc(68px + var(--phone-top)); }
  .dialog { padding:24px; }
  .dialog h2 { font-size:35px; }
  #toast { bottom:calc(132px + var(--phone-bottom)); }
  .replay-controls { grid-template-columns:70px 1fr 80px 105px; padding:9px 12px; }
  .replay-controls select { grid-column:auto; }
  .replay-controls p { display:none; }
}

@media (max-height:370px) and (max-width:1000px) and (orientation:landscape) {
  .menu-copy { top:60px; }
  .menu-copy h1 { font-size:43px; margin:12px 0 9px; }
  .menu-copy .tagline { font-size:14px; }
  .menu-copy .intro { margin-top:7px; font-size:8px; }
  .menu-actions button { min-height:46px; }
}