@media (max-width: 860px) {
  .site-shell { padding: 12px; }
  .topbar { align-items: flex-start; flex-direction: column; margin-bottom: 24px; }
  .nav { justify-content: flex-start; width: 100%; }
  .nav a { padding: 8px 9px; font-size: 0.88rem; }
  .hero { min-height: auto; padding-bottom: 40px; }
  .hero-grid, .grid.two, .grid.four { grid-template-columns: 1fr; }
  .relic { aspect-ratio: 1.15; }
  .controls { flex-direction: column; }
}

@media (max-width: 520px) {
  h1 { font-size: 3.15rem; }
  .panel { padding: 16px; }
  .button, button { width: 100%; }
  .settings-row { align-items: flex-start; flex-direction: column; }
  .result-amount { font-size: 2.4rem; }
}