/* Narrow desktop: keep the three-column play area, trim the least critical HUD stat. */
@media (max-width: 1080px) {
  .game-main { grid-template-columns: minmax(190px,240px) minmax(310px,1fr) minmax(190px,240px); }
  .game-side { padding: .7rem; }
  .shop-card { padding: .7rem; }
  .hud-stat { min-width: 88px; }
  .hud-stat:nth-child(4) { display: none; }
  .drawer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-tab { font-size: .72rem; }
}

/* Tablet and phone: single stage plus the thumb-reachable bottom navigation.
   The shell reserves the nav height with padding, so the grid rows and the
   overlay drawer stay correct without hard-coded offsets. */
@media (max-width: 820px) {
  .game-wrap { width: 100%; margin-top: clamp(.75rem, 2vw, 1.25rem); }
  .game-shell {
    /* padding reserves the bottom nav, so the rows above it stay clear of it */
    height: calc(100svh - 90px);
    padding-bottom: 64px;
    border-radius: 0;
    border-inline: 0;
  }
  .game-topbar { min-height: 72px; padding: .55rem .7rem; }
  .game-brand { min-width: 0; }
  .hud { justify-content: center; gap: 1rem; min-width: 0; }
  .hud-stat { min-width: 0; }
  .hud-stat:nth-child(4) { display: none; }
  .game-actions { min-width: 0; }
  .game-main { grid-template-columns: minmax(0, 1fr); }
  .game-side { display: none; }
  .game-tabs { display: none; }
  .planet-stage { padding: .5rem 1rem 1rem; }
  .planet-button { width: min(clamp(220px, 70vw, 400px), 46vh); }
  .game-drawer { padding: 1rem .85rem 2.5rem; }
  .drawer-head { margin-bottom: 1rem; }
  .drawer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .asteroid-event { top: 43%; }

  .mobile-game-nav {
    position: absolute;
    z-index: 38;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(5,8,23,.96);
    backdrop-filter: blur(16px);
  }
  .mobile-game-nav button {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .15rem;
    min-width: 0;
    min-height: 64px;
    padding: .3rem .1rem;
    border: 0;
    color: #98a2c4;
    background: transparent;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
  }
  .mobile-game-nav button span:first-child { font-size: 1.05rem; }
  .mobile-game-nav button[aria-selected="true"] { color: var(--cyan); background: rgba(77,232,255,.07); }
  .mobile-game-nav button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  }
}

/* Roomy tablets still fit the brand wordmark and a third stat. */
@media (max-width: 820px) and (min-width: 620px) {
  .game-brand { min-width: 130px; }
  .hud-stat { min-width: 92px; }
  .hud-stat:nth-child(3) { display: block; }
  .game-drawer { padding: 1.5rem 1.25rem 3rem; }
}

@media (max-width: 619px) {
  .game-brand strong, .game-brand small { display: none; }
  .hud-stat:nth-child(3) { display: none; }
}

@media (max-width: 520px) {
  .game-topbar { gap: .45rem; padding-inline: .6rem; }
  .brand-mark { width: 29px; height: 29px; }
  .brand-mark::after { width: 37px; }
  .hud { gap: .8rem; }
  /* tighten tracking rather than the size: two stats still fit at 360px */
  .hud-stat__label { letter-spacing: .05em; }
  .hud-stat__value { font-size: .9rem; }
  .game-actions { gap: .35rem; }
  .game-actions .icon-button { width: 42px; height: 42px; }
  .planet-stage { padding-inline: .5rem; }
  .planet-stage::before { width: 96%; }
  .drawer-grid { grid-template-columns: 1fr; }
  .solar-system { min-height: 360px; }
  .orbit { transform: translate(-50%,-50%) rotate(var(--angle)) scale(.82); }
  .modal-backdrop { padding: .6rem; }
  .modal { max-height: calc(100svh - 1.2rem); padding: 1.25rem; border-radius: 16px; }
  .modal h2 { margin-right: 2.6rem; font-size: 1.3rem; }
  .modal-actions .button { flex: 1 1 100%; }
  .setting-row { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .setting-row input[type="range"] { width: 100%; }
  .toast-region { right: .6rem; bottom: 5rem; width: calc(100% - 1.2rem); }
}

@media (max-width: 400px) {
  .hud { gap: .6rem; }
  .mobile-game-nav button { gap: .05rem; padding-inline: .05rem; }
  .solar-system { min-height: 320px; }
  .orbit { transform: translate(-50%,-50%) rotate(var(--angle)) scale(.72); }
}

/* Short landscape phones: the planet already tracks viewport height, so only
   the surrounding copy needs tightening. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 940px) {
  .planet-info { margin-bottom: .35rem; }
  .planet-prompt { margin-top: .4rem; }
  .combo-pill { margin-top: .25rem; }
  .level-bar { margin-top: .35rem; }
}