/* =================================================================
   Телефоны (вертикальная ориентация): компактная шапка, тулбар в строку,
   вкладки по ширине экрана, ничего не выходит за край (требование 1.10.1).
   Горизонтальный телефон — заглушка «поверните устройство».
   ================================================================= */
@media (max-width: 640px) {
  html, body { width: 100%; }
  #app { width: 100%; overflow: hidden; }
  #top {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 10px;
    padding: 6px 10px 8px; flex-wrap: nowrap;
  }
  .logo { min-width: 0; gap: 6px; }
  #logo-ico { width: 44px; height: 44px; margin: -4px; }
  .logo-t { font-size: 18px; white-space: nowrap; }
  .logo-s { display: none; }
  .res.credits { justify-self: end; align-items: flex-end; min-width: 0; }
  .res-main { font-size: 20px; gap: 6px; }
  .ico-sm { width: 22px; height: 22px; }
  .res-sub { padding-left: 0; font-size: 11px; white-space: nowrap; }
  .res.dm { display: none; }
  /* тулбар — отдельной строкой во всю ширину; сохранение автоматическое, полный экран даёт платформа */
  .top-btns { grid-column: 1 / -1; margin: 0; justify-content: space-between; gap: 4px; min-width: 0; }
  .icon-btn { width: 36px; height: 36px; flex: 0 0 36px; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 #0a0720; }
  .icon-btn img { width: 22px; height: 22px; }
  #btn-save, #btn-full { display: none; }

  #space { height: 42vh; height: 42dvh; }
  #planet-label { left: 10px; bottom: 8px; }
  #planet-name { font-size: 20px; }
  #planet-type { font-size: 11px; }
  #sector-mod { left: auto; right: 8px; bottom: 8px; transform: none; max-width: 52%; font-size: 11px; padding: 4px 8px; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  #toasts { top: 8px; right: 8px; width: calc(100% - 16px); gap: 6px; }
  #toasts .toast { padding: 7px 10px; font-size: 12.5px; }
  #toasts .toast img { width: 32px; height: 32px; }
  #toasts .toast:nth-last-child(n+3) { display: none; }
  #ad-pop { right: 8px; bottom: 44px; width: calc(100% - 16px); }
  #comms { left: 8px; right: 8px; bottom: 44px; width: auto; }

  /* вкладки — одной строкой, делят ширину поровну */
  #tabs { gap: 4px; padding: 6px; overflow: hidden; }
  #tabs button { flex: 1 1 0; min-width: 0; height: 50px; padding: 4px 0; border-radius: 12px; }
  #tabs button i { font-size: 18px; }
  #tabs button span { font-size: 9px; max-width: 100%; overflow: hidden; text-overflow: clip; }
  .badge { min-width: 18px; height: 18px; font-size: 10px; line-height: 12px; top: -6px; right: -4px; border-width: 2px; }
  .tab-body { padding: 10px; overflow-x: hidden; }

  /* карточки построек и прочие строки не шире панели */
  .bld { gap: 8px; padding: 7px 9px 10px; min-width: 0; }
  .bld .ico { width: 40px; height: 40px; }
  .bld .name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bld .cost { font-size: 12.5px; }
  .bld .sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bld .count { font-size: 22px; }
  .buy-amt { flex-wrap: wrap; gap: 6px; }
  .upg, .quest, .mega, .lab-card { min-width: 0; }
  .alch-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .acat span { font-size: 10.5px; }
  #modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; padding: 16px 14px 18px; }
  #modal.wide, #modal.hangar { width: calc(100vw - 20px); }
  .set-row { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 380px) {
  .logo-t { display: none; }
  .icon-btn { width: 33px; height: 33px; flex-basis: 33px; }
}

/* горизонтальный телефон: игра рассчитана на вертикальный экран */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: radial-gradient(circle at 50% 40%, #2a2470, #0a0e33); color: #fff; font-weight: 900; font-size: 18px; text-align: center; padding: 20px;
  }
  #rotate i { font-style: normal; font-size: 52px; animation: rotHint 1.8s ease-in-out infinite; }
  @keyframes rotHint { 50% { transform: rotate(-90deg); } }
}