@media (max-width: 760px) {
  #topbar { flex-wrap: wrap; gap: 4px; padding: 6px; }
  .stat { padding: 4px 8px; font-size: 13px; }
  #topbar button { padding: 4px 8px; min-height: 36px; font-size: 13px; }
  #panel { top: auto; bottom: 150px; right: 6px; left: 6px; width: auto; }
  #buildBar { flex-wrap: wrap; }
  #tabs { flex-direction: row; width: 100%; }
  #tabs button { flex: 1; text-align: center; min-height: 36px; }
  #startWave { min-height: 52px; min-width: 120px; }
  .card { width: 96px; }
  #toast, #confirmBar { bottom: 200px; }
  .title-art { font-size: 26px; }
}
@media (max-height: 480px) {
  #hint { top: 44px; font-size: 13px; padding: 4px 10px; }
  .card { width: 90px; padding: 3px; }
  .card canvas { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  #toast { bottom: auto; top: 150px; }
  #confirmBar, #targetBar { bottom: 210px; }
  #dm { top: 150px; }
  #bossBar { top: 150px; }
  #hint { top: 150px; font-size: 14px; }
  #defenseBar { gap: 4px; } #defenseBar button { padding: 4px 8px; min-height: 38px; font-size: 13px; }
  #modalBox.wide { width: 100%; }
  .node { flex-basis: 100%; }
}