/* 响应式：平板 / 手机横屏 / 9:16 竖屏 */

/* 平板及以下：HUD 收紧 */
@media (max-width: 900px) {
  .bar { width: clamp(90px, 20vw, 140px); }
  #hud-slots { display: none; } /* 小屏不显示角落插槽图，避免遮挡 */
  .stat-chip { padding: 4px 7px; }
}

/* 手机横屏（矮屏）：压缩垂直空间 */
@media (max-height: 500px) and (orientation: landscape) {
  .panel { padding: 12px 20px; }
  .game-title { font-size: 26px; }
  .logo-hex { display: none; }
  .menu-buttons { gap: 6px; }
  .select-card { min-height: 130px; }
  .shop-body { flex-wrap: nowrap; }
  .shop-right { flex: 0 0 220px; }
  #shop-slots-svg { width: 150px; height: 150px; }
  #hud-top-left { transform: scale(0.85); transform-origin: top left; }
  .tutorial-grid { gap: 5px; }
}

/* 9:16 手机竖屏：重排布局，商店/升级全屏化 */
@media (orientation: portrait) and (max-width: 620px) {
  #hud-top-center { top: calc(52px + var(--safe-top)); }
  #hud-top-right { gap: 4px; }
  #btn-pause { width: 34px; height: 34px; }

  .screen { align-items: stretch; padding-top: calc(20px + var(--safe-top)); }
  .panel { width: 100%; max-width: 100%; }
  .center-panel { align-self: center; }

  .card-row { flex-direction: column; align-items: stretch; }
  .select-card { width: 100%; min-height: 0; }

  .shop-panel { max-height: none; }
  .shop-body { flex-direction: column; }
  .shop-right { flex: 1 1 auto; }
  #shop-stats { columns: 1; }
  .shop-items { grid-template-columns: repeat(2, 1fr); }

  #end-stats { grid-template-columns: repeat(2, 1fr); }
}

/* 触屏设备显示虚拟摇杆与过载按钮（JS 也会判断） */
@media (pointer: coarse) {
  #joystick-zone, #btn-overclock { display: block; }
}

/* 桌面端隐藏触屏控件 */
@media (pointer: fine) {
  #joystick-zone, #btn-overclock { display: none !important; }
}