/* 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; }
}