/* PIXELPORT — mobile refinements (loaded after style.css) */
@media (max-width: 1000px) {
  .hud-top { height: 58px !important; min-height: 0 !important; flex-wrap: nowrap !important; padding: 6px 8px 0 !important; align-items: flex-start !important; }
  .hud-left { min-width: 0 !important; gap: 7px !important; }
  .hud-clock { padding-left: 7px !important; }
  .hud-clock b { font-size: 15px !important; }
  .hud-clock small { font-size: 6px !important; }
  .airport-id .code { width: 38px !important; height: 32px !important; font-size: 15px !important; }
  .id-text b { display: none !important; }
  .id-text small { display: block !important; font-size: 6px !important; max-width: 110px; overflow: hidden; }
  .hud-mid { order: 0 !important; flex: 1 1 auto !important; width: auto !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 3px !important; }
  .hud-stat { min-height: 36px !important; padding: 3px 5px !important; flex: 0 1 auto !important; gap: 4px !important; }
  .hud-stat.wide { min-width: 0 !important; }
  .hud-stat .ico { width: 14px !important; height: 14px !important; }
  .hud-stat small { font-size: 6px !important; letter-spacing: 0 !important; }
  .hud-stat b { font-size: 12px !important; }
  .hud-stat em { display: none !important; }
  .hud-stat.lvl, .hud-stat.streak { display: none !important; }
  .rep-stars { display: none !important; }
  .weather-chip { display: none !important; }
  .hud-right { margin-left: 0 !important; gap: 3px !important; }
  .speed-controls { padding: 1px !important; }
  .speed-controls button { width: 26px !important; height: 29px !important; font-size: 10px !important; }
  .icon-btn { width: 30px !important; height: 31px !important; }
  .ops-strip { display: none !important; }
  .dock { bottom: 37px !important; left: 8px !important; gap: 3px !important; }
  .dock-btn { min-width: 0 !important; width: 54px !important; height: 46px !important; flex-direction: column !important; gap: 1px !important; padding: 3px !important; justify-content: center !important; }
  .dock-btn b { font-size: 8px !important; }
  .dock-btn small, .dock-btn kbd { display: none !important; }
  .dock-ico { width: 20px !important; height: 20px !important; }
  .ability-bar { right: 8px !important; bottom: 37px !important; }
  .ability { width: 152px !important; min-height: 42px !important; }
  .ability.alt { display: none !important; }
  .ability small { display: none !important; }
  .ability-note { display: none !important; }
  .panel { left: 8px !important; right: 8px !important; top: auto !important; bottom: 84px !important; width: auto !important; height: min(66vh, 520px) !important; transform: translateY(calc(100% + 20px)) !important; }
  .panel.open { transform: translateY(0) !important; }
  body.panel-open .ability-bar { right: 8px !important; }
  body.panel-open .toasts { display: none !important; }
  .toasts { top: auto !important; bottom: 90px !important; right: 8px !important; width: min(300px, calc(100vw - 16px)) !important; }
  .toasts .toast:nth-last-child(n+3) { display: none !important; }
  .tutorial { bottom: 94px !important; left: 8px !important; width: min(320px, calc(100vw - 16px)) !important; }
  .modal { max-height: 94vh !important; }
  .report-columns { grid-template-columns: 1fr !important; }
  .help-sections { grid-template-columns: 1fr !important; }
  .profile-ach { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 680px) {
  .hud-stat:not(.wide) { display: none !important; }
  .hud-stat .ico { display: none !important; }
  .hud-stat b { font-size: 12px !important; }
  .hud-stat.wide { flex: 1 1 auto !important; }
  .hud-mid { gap: 2px !important; }
  .hud-right { gap: 2px !important; }
  .speed-controls button { width: 25px !important; }
  .icon-btn { width: 28px !important; }
  .toasts { width: calc(100vw - 16px) !important; bottom: 90px !important; }
  .toasts .toast:nth-last-child(n+2) { display: none !important; }
  .modal-foot { flex-direction: column-reverse !important; }
  .modal-foot .pbtn { width: 100% !important; }
  .report-top { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .report-grade { width: 82px !important; height: 82px !important; }
  .report-grade b { font-size: 42px !important; }
  .report-grid { grid-template-columns: repeat(2,1fr) !important; }
  .intro-grid { grid-template-columns: 1fr !important; }
  .intro-scene { aspect-ratio: 2/1 !important; }
  .profile-ach { grid-template-columns: repeat(3, 1fr) !important; }
  .save-slot { width: 56px !important; }
  .save-actions { flex-direction: column !important; }
  .dock { gap: 2px !important; }
  .dock-btn { width: 43px !important; height: 44px !important; }
  .dock-btn b { font-size: 7px !important; }
  .ability { width: 104px !important; padding: 3px 4px !important; min-height: 38px !important; }
  .ability .ability-ico { width: 17px !important; height: 17px !important; }
  .ability b { font-size: 7.5px !important; }
  .ability .ability-cd { font-size: 6px !important; }
}
@media (orientation: portrait) and (max-width: 900px) {
  .rotate-hint {
    display: block !important; top: 42% !important; bottom: auto !important; left: 50% !important;
    width: min(290px, calc(100vw - 32px)) !important; transform: translate(-50%, -50%) !important;
    background: rgba(10,20,30,.96) !important; border: 2px solid var(--gold) !important;
    padding: 14px 16px !important; color: var(--gold2) !important; font-size: 12px !important;
    text-align: center !important; box-shadow: 5px 5px 0 rgba(0,0,0,.5) !important; z-index: 75 !important;
  }
  .toasts { display: none !important; }
  .ability-note { display: none !important; }
}

@media (max-height: 500px) and (max-width: 1000px) {
  .title-inner { padding: 14px 18px !important; grid-template-rows: auto 1fr !important; gap: 8px !important; }
  .logo-tag { display: none !important; }
  .title-logo h1 { font-size: 52px !important; }
  .logo-cn { margin-top: 6px !important; font-size: 13px !important; letter-spacing: .24em !important; }
  .logo-rule { display: none !important; }
  .title-menu { width: min(320px, 100%) !important; margin-bottom: 6px !important; }
  .title-menu .pbtn { min-height: 34px !important; padding: 6px 10px !important; }
  .pbtn-main { font-size: 13px !important; }
  .title-side { display: none !important; }
  .title-footer { display: none !important; }
}

/* Restore the second ability on phones and keep the bottom sheet below the HUD */
@media (max-width: 1000px) {
  .ability-group { gap: 4px !important; }
  .ability { width: 132px !important; }
  .ability.alt { display: flex !important; width: 104px !important; }
  .panel { top: 66px !important; bottom: 84px !important; height: auto !important; max-height: none !important; }
}
@media (max-width: 680px) {
  .ability { width: 104px !important; }
  .ability.alt { width: 82px !important; }
  .ability b { font-size: 7.5px !important; }
  .ability .ability-ico { width: 16px !important; height: 16px !important; }
}

/* Mobile airport selection: keep the primary action always reachable */
.mobile-start { display: none !important; }
@media (max-width: 1000px) {
  .mobile-start {
    display: flex !important; position: fixed !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
    z-index: 30 !important; width: auto !important; height: 44px !important; min-height: 44px !important;
    justify-content: space-between !important; padding: 0 14px !important; box-shadow: 4px 4px 0 rgba(0,0,0,.5) !important;
    font-size: 13px !important;
  }
  .select-body { padding-bottom: 68px !important; }
}

/* Compact mobile modals so action buttons remain visible */
@media (max-width: 1000px) {
  .modal-head { padding: 10px 14px 8px !important; }
  .modal-head h2 { font-size: 17px !important; }
  .modal-kicker { font-size: 6px !important; }
  .modal-body { padding: 10px 14px !important; }
  .modal-foot { padding: 8px 14px !important; }
  .pause-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
  .pause-actions .pbtn { min-height: 36px !important; padding: 5px 8px !important; font-size: 10px !important; }
  .pause-actions .pbtn:last-child { grid-column: 1 / -1 !important; }
  .pause-summary { margin-bottom: 8px !important; }
  .pause-summary > div { padding: 6px 7px !important; }
  .event-story { font-size: 10.5px !important; line-height: 1.65 !important; padding: 7px 9px !important; }
  .timer-wrap { margin: 7px 0 6px !important; }
  .event-options { gap: 4px !important; }
  .event-opt { padding: 5px 8px !important; }
  .eo-top b { font-size: 10.5px !important; }
  .eo-top span { font-size: 7px !important; }
  .eo-meta { font-size: 7px !important; margin-top: 1px !important; }
  .event-warn { font-size: 7px !important; }
}
@media (max-width: 680px) {
  .modal-head { padding: 8px 10px 7px !important; }
  .modal-head h2 { font-size: 15px !important; }
  .modal-body { padding: 8px 10px !important; }
  .event-opt { padding: 4px 6px !important; }
  .event-story { font-size: 9.5px !important; line-height: 1.5 !important; }
  .pause-actions { gap: 4px !important; }
  .pause-actions .pbtn { font-size: 9px !important; min-height: 33px !important; }
}

/* Two-column settings on wide landscape phones so every control stays reachable */
@media (min-width: 640px) and (max-width: 1000px) {
  .settings-form { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .set-row { min-height: 46px !important; gap: 6px !important; padding: 5px 8px !important; }
  .set-row > span { min-width: 0 !important; }
  .set-row b { font-size: 9.5px !important; }
  .set-row input[type=range] { width: 82px !important; }
  .range-val { width: 20px !important; font-size: 9px !important; }
  .set-danger { margin-top: 8px !important; padding: 7px !important; }
  .set-version { margin-top: 7px !important; }
}

/* Tower control badge and panel */
.dock-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff4e0; border: 2px solid #0b1520; font-size: 8px; line-height: 1;
  box-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.tower-dock .dock-ico { filter: drop-shadow(0 0 3px rgba(79,209,197,.28)); }
.tower-scope { display: block; width: 100%; image-rendering: pixelated; border: 1px solid #2c4859; background: #07141b; box-shadow: inset 0 0 0 2px #0b1d27; }
.tower-status-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #283f52; border: 1px solid #283f52; margin: 8px 0; }
.tower-status-row > div { background: #0f1d29; padding: 5px 6px; }
.tower-status-row small { display: block; color: #7f94a5; font-size: 7px; }
.tower-status-row b { font-size: 10px; font-weight: normal; }
.tower-runways { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 9px; }
.tower-rwy { display: flex; align-items: center; gap: 6px; background: #0f1d29; border: 1px solid #2a4052; padding: 5px 6px; }
.tower-rwy b { color: var(--gold2); font-size: 11px; font-weight: normal; min-width: 26px; }
.tower-rwy span { flex: 1; font-size: 8px; color: #8fa3b1; }
.tower-rwy em { font-style: normal; font-size: 8px; }
.tower-strip { background: #101e2a; border: 1px solid #2a4052; padding: 7px; margin-bottom: 5px; }
.tower-strip-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.tower-strip-head b { color: var(--gold2); font-size: 11px; font-weight: normal; }
.tower-strip-head span { color: #8fa3b1; font-size: 8px; }
.tower-strip-sub { color: #9cafba; font-size: 8px; margin: 2px 0 5px; line-height: 1.5; }
.tower-clear-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tower-clear-row .pbtn { font-size: 8px; min-height: 22px; padding: 2px 6px; }
.tower-reason { color: #c8937a; font-size: 7.5px; }
.tower-empty { border: 1px dashed #2b4053; color: #7f94a5; text-align: center; padding: 11px 8px; font-size: 9px; margin-bottom: 6px; }
.tower-toggle-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: #0f1d29; border: 1px solid #2a4052; padding: 6px 8px; margin: 6px 0; }
.tower-toggle-row b { display: block; color: var(--cream); font-size: 9.5px; font-weight: normal; }
.tower-toggle-row small { display: block; color: #7f94a5; font-size: 7px; }
.tower-toggle-row .pbtn { flex: 0 0 auto; }
.tower-live-dot { display: inline-block; width: 5px; height: 5px; background: var(--green); margin-right: 4px; box-shadow: 0 0 0 1px rgba(123,216,143,.2); animation: blink 1.6s steps(2,end) infinite; }
.tower-alert { color: var(--gold2); font-size: 8px; line-height: 1.6; border-left: 2px solid var(--gold); padding-left: 6px; margin: 6px 0; }
@media (max-width: 1000px) {
  .dock-badge { top: -4px; right: -3px; }
  .tower-strip { padding: 6px; }
  .tower-clear-row .pbtn { min-height: 24px; padding: 2px 7px; }
}

@media (max-width: 1000px) {
  .tower-scope { max-height: 118px; object-fit: contain; }
  .tower-status-row > div { padding: 4px 5px; }
  .tower-strip { padding: 6px; }
  .tower-strip-sub { font-size: 7.5px; }
}

/* On phones, prioritize tower clearances over the summary/radar chrome */
@media (max-width: 1000px) {
  .tower-status-row { display: none !important; }
  .tower-toggle-row { margin: 4px 0 5px !important; padding: 5px 7px !important; }
  .tower-strip { margin-bottom: 4px !important; }
  .tower-clear-row .pbtn { min-height: 26px !important; padding: 2px 8px !important; }
}

/* Very short landscape phones: keep the first tower clearance buttons visible */
@media (max-height: 400px) and (max-width: 1000px) {
  .panel-head { padding: 6px 10px 5px !important; }
  .panel-head h2 { font-size: 15px !important; }
  .panel-head .ph-kicker { font-size: 6px !important; }
  .tower-toggle-row { padding: 3px 6px !important; margin: 2px 0 3px !important; }
  .tower-toggle-row small { display: none !important; }
  .tower-toggle-row b { font-size: 9px !important; }
  .tower-toggle-row .pbtn { min-height: 22px !important; padding: 2px 6px !important; font-size: 8px !important; }
  .tower-strip { padding: 4px 6px !important; margin-bottom: 3px !important; }
  .tower-strip-head b { font-size: 10px !important; }
  .tower-strip-sub { font-size: 7px !important; margin: 1px 0 3px !important; }
  .tower-clear-row .pbtn { min-height: 23px !important; padding: 1px 7px !important; font-size: 8px !important; }
  .tower-reason { font-size: 7px !important; }
  .panel-scroll .sec-label { margin: 5px 0 3px !important; }
  .tower-empty { padding: 7px 5px !important; font-size: 8px !important; }
}


/* Quick ATC selection card on phones */
@media (max-width: 1000px) {
  .atc-quick { left: 8px !important; right: 8px !important; bottom: 96px !important; width: auto !important; transform: none !important; }
  .atc-card { padding: 7px 8px 6px !important; max-height: 146px !important; }
  .atc-card::before { width: 2px !important; }
  .atc-flightno { font-size: 18px !important; }
  .atc-title-row { gap: 6px !important; padding-right: 25px !important; }
  .atc-title-row span { font-size: 8px !important; }
  .atc-status { font-size: 9px !important; padding: 1px 4px !important; margin-left: auto !important; }
  .atc-meta { font-size: 7.5px !important; gap: 2px 8px !important; margin: 3px 0 5px !important; }
  .atc-rwy { min-height: 34px !important; padding: 3px 8px !important; font-size: 9px !important; }
  .atc-reasons { font-size: 7.5px !important; margin-top: 4px !important; }
  .atc-foot { gap: 4px !important; padding-top: 4px !important; margin-top: 5px !important; }
  .atc-foot .pbtn { min-height: 27px !important; padding: 2px 7px !important; font-size: 8px !important; }
  .atc-tip { display: none !important; }
  .atc-next { min-height: 27px !important; }
  body.atc-open .toasts, body.atc-open .tutorial { display: none !important; }
}
@media (max-height: 400px) and (max-width: 1000px) {
  .atc-quick { bottom: 89px !important; }
  .atc-card { max-height: 140px !important; padding: 5px 7px 4px !important; }
  .atc-kicker { font-size: 6px !important; }
  .atc-flightno { font-size: 15px !important; }
  .atc-title-row { margin-top: 1px !important; }
  .atc-title-row span { font-size: 7px !important; }
  .atc-status { font-size: 8px !important; }
  .atc-meta { font-size: 6.8px !important; margin: 2px 0 4px !important; }
  .atc-rwy { min-height: 31px !important; padding: 2px 7px !important; font-size: 8px !important; }
  .atc-reasons { font-size: 7px !important; }
  .atc-foot { margin-top: 3px !important; padding-top: 3px !important; }
  .atc-foot .pbtn { min-height: 25px !important; }
  .atc-note { font-size: 7.5px !important; }
}


/* Keep the holding selector above the mobile HUD */
@media (max-width: 1000px) {
  .hold-badge { top: 64px !important; right: 8px !important; min-height: 26px; font-size: 8.5px !important; padding: 3px 7px !important; z-index: 20; }
}


/* Radar overlay is fullscreen on phones; keep all controls above the safe area. */
@media (max-width: 1000px) {
  #radar-overlay { z-index: 90 !important; }
  .radar-dialog { padding: 0 !important; }
}

/* Docked radar wing is a desktop layout only; phones keep the fullscreen radar */
@media (max-width: 1000px) {
  .radar-wing { display: none !important; }
  body.radar-docked .ability-bar { right: 8px !important; }
  body.radar-docked .toasts { right: 8px !important; }
  body.radar-docked .atc-command { display: flex !important; }
}

@media (max-width: 1000px) {
  .radar-side .rw-flight-stats, .radar-side .rw-timeline { display: none !important; }
}

@media (max-width: 1000px) {
  .radar-filter-bar { padding: 3px 7px; gap: 5px; font-size: 7.5px; }
  .radar-filter-bar > em { display: none; }
  .radar-filter-btn { font-size: 7.5px; padding: 2px 5px; }
}

@media (max-width: 1000px) {
  .radar-side .atc-priority { display: none !important; }
}

.tower-rwy.locked { border-style: dashed; opacity: .82; }
.tower-rwy.locked em { color: #d2a45f; }
.tower-rwy .pbtn { min-height: 22px !important; padding: 1px 6px !important; font-size: 8px !important; flex: 0 0 auto; }

/* Compact bottom dock: the map gets the space, buttons stay readable */
@media (max-width: 1000px) {
  .ticker { display: none !important; }
  .dock { bottom: 4px !important; left: 4px !important; transform: none !important; gap: 4px !important; padding: 3px 5px; background: rgba(8,15,23,.9); border: 1px solid #253a4b; }
  .dock-btn { width: 46px !important; height: 40px !important; padding: 2px !important; }
  .dock-btn b { font-size: 7.5px !important; }
  .dock-ico { width: 18px !important; height: 18px !important; }
  .ability-bar { bottom: 4px !important; right: 4px !important; flex-direction: row !important; align-items: flex-end !important; }
  .ability-group { flex-direction: row !important; }
  .ability, .ability.alt { width: 44px !important; min-height: 44px !important; padding: 3px !important; justify-content: center; }
  .ability b, .ability small, .ability .ability-cd { display: none !important; }
  .ability .ability-ico { width: 20px !important; height: 20px !important; }
  .ability.disabled, .ability[disabled] { opacity: .45; }
  .panel { bottom: 52px !important; }
}