/* Phone layout only. Desktop/car layouts and audio behavior stay unchanged. */
@media (max-width: 700px) and (orientation: portrait),
       (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  html { height: auto; scroll-padding-block: 20px; }
  body {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    overflow-x: clip;
  }
  .scene-picker {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 5px;
    gap: 4px;
    transform: none;
    border-radius: 16px;
  }
  .scene-picker button {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: .75rem;
    letter-spacing: .035em;
    white-space: nowrap;
    border-radius: 11px;
  }
  .mode-badge {
    position: absolute;
    top: calc(max(16px, env(safe-area-inset-top)) + 70px);
    left: max(20px, env(safe-area-inset-left));
    right: auto;
    max-width: calc(100% - 128px);
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: .75rem;
    letter-spacing: .06em;
    transform: none;
  }
  .speed-hud {
    position: relative;
    z-index: 5;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'gauge rpm' 'sound sound';
    gap: 18px 16px;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 76px 0 16px;
    padding: 0;
    overflow: visible;
    transform: none;
  }
  .speed-hud-secondary { display: contents; }
  .drive-center-stack { grid-area: gauge; justify-content: center; min-width: 0; }
  .speed-gauge { width: min(100%, 160px); height: auto; aspect-ratio: 1; }
  .speed-gauge-value { font-size: 2.6rem; }
  .speed-gauge-unit { font-size: .75rem; margin-top: 2px; }
  .speed-gauge-gear { font-size: .75rem; margin-top: 0; padding: 3px 8px; }
  .speed-hud .speed-hud-side { background: rgba(13, 19, 27, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .speed-hud .rpm-panel {
    grid-area: rpm;
    min-width: 0 !important;
    width: 100%;
    padding: 16px 12px;
    gap: 12px;
    align-self: center;
  }
  .rpm-panel-heading { gap: 6px; }
  .hud-side-title { font-size: .75rem; letter-spacing: .08em; color: var(--text-dim); }
  .hud-side-value { font-size: 1.25rem; }
  .rpm-trace { height: 56px; }
  .rpm-scale { font-size: .625rem; letter-spacing: .035em; color: var(--text-dim); }
  .speed-hud .speed-hud-side.soundboard {
    position: relative;
    grid-area: sound;
    width: 100%;
    min-width: 0;
    max-width: none;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    z-index: 4;
  }
  .voice-row { gap: 12px; }
  .soundboard .custom-select { position: static; }
  .soundboard .custom-select-trigger {
    min-height: 56px;
    padding: 12px;
    font-size: 1rem;
    line-height: 1.4;
  }
  #soundDropdownLabel { white-space: normal; overflow: visible; text-overflow: clip; }
  .favorite-btn { width: 52px; min-height: 56px; }
  #soundDropdownPanel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    left: 0;
    right: 0;
    max-height: min(55dvh, 420px);
  }
  .custom-select-option { min-height: 52px; padding: 14px 12px; font-size: 1rem; gap: 8px; }
  .custom-select-option-label { white-space: normal; line-height: 1.4; overflow-wrap: anywhere; }
  .custom-select-group-label { font-size: .75rem; line-height: 1.5; letter-spacing: .04em; padding: 14px 12px 8px; }
  #panelToggle, body.panel-hidden #panelToggle {
    position: relative;
    inset: auto;
    align-self: flex-end;
    flex-direction: row;
    width: auto;
    height: auto;
    min-height: 44px;
    margin: 0 0 12px;
    padding: 10px 14px;
    font-size: .875rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 12px;
    transform: none;
  }
  #panelToggle .panel-toggle-text { display: inline; white-space: normal; line-height: 1.4; }
  #panelToggle .panel-toggle-label { display: none; }
  #controlsSidebar {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    overflow: visible;
  }
  .control-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    max-height: none;
    overflow: visible;
    background: rgba(13, 19, 27, .96);
    border-radius: 18px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .control-strip > * { grid-column: 1 / -1; min-width: 0; }
  #startBtn, #revBtn {
    grid-column: auto;
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    letter-spacing: .06em;
  }
  #settingsToggle { margin: 0; width: 100%; min-height: 48px; font-size: .875rem; border-radius: 12px; }
  .controls { margin-top: 8px; gap: 24px; }
  .controls label { gap: 10px; font-size: 1rem; line-height: 1.5; }
  .controls input[type='range'] { height: 44px; }
  .controls input[type='checkbox'] { width: 22px; height: 22px; }
  .settings-group, .advanced-settings, .controls label.settings-switch { padding: 16px; border-radius: 14px; }
  .settings-group-title, .settings-heading-row, .settings-value, .advanced-settings summary { font-size: .9375rem; line-height: 1.5; }
  .settings-help, .settings-switch small { font-size: .875rem; line-height: 1.6; margin-top: 10px; }
  .settings-switch strong { font-size: .9375rem; line-height: 1.5; }
  .segmented-setting { margin-top: 12px; gap: 4px; }
  .segmented-setting button { min-height: 48px; font-size: .875rem; }
  .range-end-labels, .sensor-quality-row, .gps-quality { font-size: .75rem; }
  .advanced-settings summary { min-height: 44px; }
  .studio-link { margin: 0; min-height: 52px; padding: 14px; font-size: .875rem; line-height: 1.5; }
  .legal-footer { margin-top: 20px; font-size: .75rem; line-height: 1.6; }
  #controlsSidebar > .affiliate-banner { margin-top: 20px; padding: 16px; font-size: .875rem; line-height: 1.5; }
  .affiliate-banner-sub { font-size: .8125rem; line-height: 1.5; }

  /* A compact utility button; the open panel becomes a wide, readable sheet. */
  html.js-narrow .eco-hud {
    position: absolute;
    top: calc(max(16px, env(safe-area-inset-top)) + 70px);
    right: max(20px, env(safe-area-inset-right));
    z-index: 30;
    flex-direction: column;
    align-items: flex-end;
  }
  html.js-narrow .eco-hud-toggle { width: 76px; min-height: 44px; padding: 10px 14px; align-self: flex-end; border-radius: 12px; }
  html.js-narrow .eco-hud-toggle-label { font-size: .75rem; }
  html.js-narrow .eco-hud:not(.collapsed) { position: fixed; top: max(16px, env(safe-area-inset-top)); }
  html.js-narrow .eco-hud .eco-hud-panel,
  html.js-narrow .eco-hud[data-display-mode='analysis'] .eco-hud-panel {
    width: calc(100vw - 40px);
    max-height: calc(var(--app-height, 100dvh) - 92px);
    margin: 12px 0 0;
    padding: 20px;
    gap: 20px;
    border-radius: 18px;
    background: #0d1218;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
  }
  html.js-narrow .eco-hud.collapsed .eco-hud-panel { display: none; }
  .eco-mode-btn, .eco-control-btn { min-height: 48px; font-size: .875rem; }
  .eco-hud-subtitle, .eco-section-subtitle, .eco-estimate-disclosure, .eco-feedback { font-size: .8125rem; line-height: 1.5; }
}

/* A rotated phone keeps the roomy controls without changing desktop/car screens. */
@media (min-width: 700px) and (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .speed-hud {
    grid-template-columns: 150px minmax(150px, .8fr) minmax(260px, 1.2fr);
    grid-template-areas: 'gauge rpm sound';
    align-items: center;
  }
  html.js-narrow .eco-hud .eco-hud-panel,
  html.js-narrow .eco-hud[data-display-mode='analysis'] .eco-hud-panel { width: 420px; }
}