/* Page layout.
     wide (> 1180 px)   Mint | Upgrades | Buildings, each panel scrolls on its own
     medium            Mint | Upgrades above Buildings
     phones (< 820 px)  everything stacked, the page scrolls */
.game {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 360px) minmax(340px, 440px);
  grid-template-areas: 'mint upgrades shop';
  gap: 16px; padding: 16px; max-width: 1440px; margin: 0 auto;
  height: calc(100dvh - 53px);
}
.mint-panel {
  grid-area: mint;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 20px 16px 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(41,36,43,.6), rgba(26,23,28,.6));
}
.mint-stage { display: grid; place-items: center; flex: 0 1 auto; }
/* treasury..rank sit centred in the space above the skyline */
.treasury { margin-top: auto; }
.mint-panel .skyline { margin: auto -16px 0; width: calc(100% + 32px); }
.upgrade-panel, .shop-panel {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2);
}
.upgrade-panel { grid-area: upgrades; }
.shop-panel { grid-area: shop; }
.upgrade-list, .shop-list {
  display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px;
  overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain;
}
/* cards keep their natural height; the list scrolls instead of squashing them */
.upgrade-list > *, .shop-list > * { flex: none; }

@media (max-width: 1180px) {
  .game {
    grid-template-columns: minmax(300px, 1fr) minmax(340px, 440px);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: 'mint upgrades' 'mint shop';
  }
  .upgrade-panel { max-height: 40vh; }
  .upgrade-list { flex: 0 1 auto; }
}

@media (max-width: 820px) {
  .game { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: 'mint' 'upgrades' 'shop'; height: auto; padding: 12px; gap: 12px; }
  .mint-panel { gap: 14px; padding: 16px 12px 0; }
  .mint-panel .skyline { margin: 4px -12px 0; width: calc(100% + 24px); }
  .mint { width: min(220px, 60vw); }
  .skyline svg { max-height: 80px; }
  .toasts { left: 12px; right: 12px; bottom: 12px; width: auto; gap: 6px; }
  .toast { padding: 7px 10px; }
  .toast-icon { width: 28px; height: 28px; }
  .toast-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .upgrade-panel { max-height: none; }
  .upgrade-list, .shop-list { overflow: visible; }
}
@media (max-width: 640px) {
  .stats-columns { grid-template-columns: 1fr; }
  .stats-table .each { display: none; }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .top-btn-label { display: none; }
  .topbar { padding: 8px 12px; }
  .wordmark { font-size: 16px; gap: 7px; white-space: nowrap; }
  .top-actions { gap: 6px; }
  .top-btn { padding: 6px 8px; }
  .back-link { display: none; }
  .ach-grid { grid-template-columns: 1fr; }
  .panel-head { flex-wrap: wrap; }
  .buy-mode { min-width: 0; padding: 5px 8px; }
  .rates p { min-width: 0; flex: 1; }
  .building { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 9px 10px; }
  .b-icon { width: 40px; height: 40px; }
  .b-icon svg { width: 24px; height: 24px; }
  .b-desc { display: none; }
}
@media (max-width: 350px) {
  .wordmark-crown { display: none; }
  .wordmark { font-size: 15px; }
  .top-btn { padding: 5px 6px; gap: 4px; }
}