#mobile-rotate { display: none; }
@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: calc(50dvh - 28.125vw); width: 100vw; height: 56.25vw; }
  .overlay { inset: 0; width: 100vw; height: 100dvh; overflow-y: auto; overflow-x: hidden; justify-content: flex-start; padding: 8px; gap: 8px; }
  .overlay > * { flex: none; }
  .overlay:not(.menu) > :only-child { margin: auto 0; }
  .menu { padding-top: 9px; }
  .menu-head { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .logo .l1 { font-size: 34px; letter-spacing: 6px; }
  .logo .l2 { font-size: 28px; letter-spacing: 4px; }
  .profile { width: 100%; min-width: 0; gap: 6px; padding: 5px 8px; border-radius: 12px; }
  .profile .av { width: 38px; height: 38px; }
  .pinfo { flex: 1; min-width: 0; width: auto; }
  .pname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rank { font-size: 10px; }
  .xpbar { height: 14px; margin-top: 2px; }
  .xpbar span { font-size: 10px; line-height: 14px; }
  .wallet, .streak { font-size: 13px; padding: 2px 6px; }
  .continue { width: 100%; min-height: 44px; font-size: 15px; }
  .modes { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .mode { min-height: 122px; padding: 9px; border-radius: 12px; }
  .mode.tour { grid-column: 1 / -1; min-height: 135px; }
  .mode b { font-size: 17px; }
  .mode small { font-size: 11px; }
  .menu-row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 0 8px; }
  .menu-row .btn { min-width: 0; min-height: 44px; padding: 5px; font-size: 11px; }
  .menu-row .btn.icon { padding: 5px; }
  .panel, .modal, .modal.wide { width: 100%; min-width: 0; max-width: none; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 10px; border-radius: 13px; }
  .panel-head { gap: 6px; }
  .panel-head h2 { font-size: 23px; }
  .panel-head .btn { min-width: 44px; min-height: 44px; padding: 4px; }
  .sub { font-size: 12px; }
  .modal h2 { font-size: 23px; }
  .modal .btn, .panel .btn { min-height: 44px; font-size: 13px; padding: 5px; }
  .venues, .tricks, .shop-list { max-width: 100%; grid-template-columns: 1fr !important; }
  #mobile-rotate { position: absolute; inset: 0; z-index: 95; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: linear-gradient(#080916ea,#060612f2), url('assets/mode-practice.webp') center/cover; }
  #stage:not(:has(.overlay:not(.hidden))) #mobile-rotate { display: flex; }
  #mobile-rotate span { font-size: 65px; line-height: 1; color: var(--cy); }
  #mobile-rotate strong { max-width: 310px; font-size: 25px; line-height: 1.1; }
  #mobile-rotate p { max-width: 280px; margin: 0; color: #d5def0; font-size: 14px; }
}