@media (max-width: 600px) and (orientation: portrait) {
  #viewport { width: 100vw; height: 100dvh; overflow: hidden; }
  #stage { transform: none !important; width: 100vw; height: 100dvh; overflow: hidden; }
  #game { top: 94px; width: 100vw; height: 56.25vw; }
  #hud { left: 4px; right: 4px; top: 2px; height: 90px; padding: 3px 5px; display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(85px, 1fr); grid-template-rows: 38px 43px; gap: 2px 4px; border-radius: 9px; }
  .res { min-width: 0; gap: 2px; }
  .res .ico { width: 21px; height: 21px; }
  .res b { font-size: 17px; }
  .res small { font-size: 9px; }
  .wavebox { grid-column: 3; }
  .wave-title { font-size: 12px; }
  .wave-title small { display: none; }
  .bar { height: 7px; }
  .hud-btns { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-around; }
  .hbtn { min-width: 44px; height: 40px; padding: 0 5px; font-size: 19px; }
  .hbtn.crown { font-size: 11px; }
  .hbtn.crown .c-ico { font-size: 18px; }
  #bossbar { left: 6px; right: 6px; top: 98px; padding: 1px 7px; }
  .bb-name { font-size: 12px; }
  #skills { top: 99px; left: 5px; gap: 4px; }
  .skill { width: 44px; height: 44px; }
  #panel { top: calc(94px + 40.625vw); bottom: 0; padding: 3px 5px calc(4px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow: hidden; }
  .tabs { flex: none; height: auto; min-height: 43px; flex-wrap: wrap; gap: 3px; }
  .tab { min-height: 40px; padding: 3px 7px; font-size: 14px; }
  .tabs .stats { display: none; }
  .buymode { margin-left: auto; }
  .buymode button { min-height: 38px; padding: 2px 6px; }
  .cards { flex: 1; min-height: 0; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 5px; overflow: auto; margin-top: 3px; }
  .card { flex: none; min-width: 0; min-height: 153px; padding: 5px; }
  .card .nm { font-size: 12px; }
  .card .lv, .card .val { font-size: 11px; }
  .card .pic { width: 34px; height: 34px; }
  .card .buy { min-height: 44px; font-size: 12px; white-space: normal; }
  .card .buy small { font-size: 10px; }
  #tut { left: 7px !important; right: 7px !important; top: calc(94px + 12vw) !important; max-width: none; padding: 6px; font-size: 12px; }
  .tut-arrow { display: none; }
  .toast { top: 96px; max-width: 94vw; font-size: 12px; white-space: normal; padding: 5px 10px; }
  .overlay { overflow-y: auto; justify-content: flex-start; padding: 8px; }
  .overlay > * { margin: auto; }
  .title-card { width: 100%; padding: 16px 12px; border-radius: 16px; }
  .logo .l1 { font-size: 25px; letter-spacing: 4px; }
  .logo .l2 { font-size: clamp(32px, 10vw, 46px); }
  .logo .l3 { font-size: 14px; }
  .tagline { font-size: 14px; margin: 8px auto; }
  .hint { font-size: 12px; }
  .btn.big { min-height: 48px; font-size: 19px; padding: 5px 12px; }
  .modal, .modal.wide { min-width: 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); padding: 12px; }
  .modal h2 { font-size: 24px; }
  .modal .sub, .modal .goal { font-size: 13px; }
  .modal .btn { min-height: 44px; padding: 4px 8px; font-size: 14px; }
  .row, .actions { flex-wrap: wrap; gap: 5px; }
  .tree { grid-template-columns: 1fr; }
}