html {
  min-width: 320px;
  background: #0a0b0b;
}

body {
  overflow-x: hidden;
}

.shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(20px, 2vw, 38px) clamp(18px, 2.4vw, 46px);
}

.layout {
  grid-template-columns:
    clamp(210px, 16vw, 300px)
    minmax(420px, 1fr)
    clamp(230px, 18vw, 340px);
  min-height: calc(100vh - 116px);
}

.left,
.center,
.right {
  min-width: 0;
  padding: clamp(20px, 1.8vw, 32px) clamp(16px, 1.7vw, 30px);
}

.story {
  max-width: min(78ch, 100%);
}

.scene {
  width: 100%;
  height: clamp(440px, 56vh, 680px);
}

.orders,
.storage,
.colony,
.crew-deck,
.upgrade-grid,
.sectors {
  min-width: 0;
}

@media (min-width: 901px) {
  .shell > header {
    height: 50px;
    align-items: center;
  }

  .brand {
    font-size: clamp(15px, 1vw, 18px);
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .shell > header > div,
  .shell > header > div button,
  .game-nav button {
    font-size: clamp(11px, .68vw, 13px);
  }

  .game-nav button {
    padding: 9px 12px;
  }

  .label {
    font-size: clamp(11px, .72vw, 13px);
  }

  .signal {
    font-size: clamp(13px, .82vw, 15px);
  }

  .center h1 {
    font-size: clamp(24px, 1.65vw, 31px);
  }

  .story {
    font-size: clamp(14px, .88vw, 16px);
  }

  .entry,
  .log .entry {
    font-size: clamp(11px, .72vw, 13px);
  }

  .log .entry b {
    font-size: clamp(11px, .68vw, 12px);
  }

  .log-priority {
    font-size: 10px;
  }

  .task-chip {
    flex-basis: 220px;
  }

  .task-chip b {
    font-size: 13px;
  }

  .task-chip small {
    font-size: 11px;
  }

  .order {
    min-height: 82px;
    padding: 16px;
  }

  .order b {
    font-size: clamp(13px, .82vw, 15px);
  }

  .order small,
  .order i {
    font-size: clamp(11px, .68vw, 12px);
  }

  .store span,
  .colony-item b {
    font-size: clamp(12px, .76vw, 14px);
  }

  .store small,
  .colony-item small {
    font-size: clamp(10px, .64vw, 11px);
  }

  .store b {
    font-size: clamp(15px, .95vw, 18px);
  }

  .progression-bar {
    min-height: 74px;
    grid-template-columns: 170px minmax(220px, 1fr) 210px;
    padding: 12px 18px;
  }

  .progression-bar span {
    font-size: 11px;
  }

  .progression-bar b {
    font-size: 13px;
  }

  .rank-block b {
    font-size: 18px;
  }

  .xp-block > div b,
  .rank-reward b {
    font-size: 12px;
  }

  .ship h2,
  .sectors-panel h2,
  .event-panel h2 {
    font-size: 15px;
  }

  .ship-grid span,
  .sector small,
  .event-choices small,
  .sector i {
    font-size: 11px;
  }

  .ship-grid b,
  .sector b,
  .event-choices b {
    font-size: 13px;
  }

  .sectors-panel p,
  .event-panel p {
    font-size: 14px;
  }

  .upgrade-title span,
  .upgrade-card-head,
  .upgrade-effect span {
    font-size: 11px;
  }

  .upgrade-title b {
    font-size: clamp(19px, 1.2vw, 23px);
  }

  .upgrade-title > small {
    font-size: 11px;
  }

  .upgrade-card {
    min-height: 286px;
    padding: 20px;
  }

  .upgrade-card h3 {
    font-size: clamp(14px, .85vw, 16px);
  }

  .upgrade-card p,
  .upgrade-effect b {
    font-size: 13px;
  }

  .upgrade-effect small,
  .upgrade-card button span {
    font-size: 12px;
  }

  .upgrade-card button small {
    font-size: 10px;
  }
}

@media (min-width: 1450px) {
  .orders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order {
    min-height: 78px;
  }

  .ship-grid,
  .sectors {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .shell {
    padding-inline: 20px;
  }

  .layout {
    grid-template-columns: 190px minmax(360px, 1fr) 210px;
  }

  .left,
  .center,
  .right {
    padding-inline: 16px;
  }
}

@media (max-width: 900px) {
  .shell {
    padding: 14px 13px;
  }

  .layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .left,
  .center,
  .right {
    width: 100%;
    padding: 20px 0;
    border-right: 0;
    border-left: 0;
  }

  .center {
    order: 1;
  }

  .right {
    order: 2;
    border-top: 1px solid var(--line);
  }

  .left {
    order: 3;
    border-top: 1px solid var(--line);
  }

  .right .storage,
  .right .colony {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
  }

  .scene {
    height: min(58vh, 440px);
    min-height: 320px;
  }

  .story {
    max-width: 68ch;
  }
}

@media (max-width: 520px) {
  .scene {
    height: 340px;
    min-height: 0;
  }

  .right .storage,
  .right .colony {
    gap-inline: 12px;
  }
}

@media (max-width: 340px) {
  .right .storage,
  .right .colony {
    grid-template-columns: 1fr;
  }
}