/* ===== 1) 全局：真正的“手机自适配”基础 ===== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;         /* ✅ 防横向滚动条 */
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;     /* ✅ 不然 padding/border 很容易撑爆宽度 */
}

/* 如果是 Nuxt：#__nuxt 也要一起限制 */
#__nuxt {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;           /* ✅ 比 hidden 更“干净” */
}

/* ===== 2) 容器：别锁死高度；别用 overflow:hidden 裁内容 ===== */
.game-container {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;         /* ✅ 最稳（有地址栏也不乱跳） */
  min-height: 100dvh;         /* ✅ 新浏览器 */
  min-height: 100vh;          /* ✅ 兜底 */

  overflow-x: clip;           /* ✅ 只裁横向溢出，不裁纵向 */
  overflow-y: auto;           /* ✅ 内容多就正常滚动，不会“被吃掉” */
}

/* ===== 3) 弹幕层：100% OK，避免 100vw ===== */
.danmaku-layer {
  width: 100%;
  max-width: 100%;
}

/* ===== 4) Top10 固定条：别同时用 left+right；用 inset 更不出错 ===== */
.rank-banner-under3d {
  position: fixed;            /* 你原本如果是 fixed/absolute 继续保留 */
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 24px));
  right: auto;
  max-width: 760px;
}

/* ===== 5) 手机上按钮允许换行，防止撑宽 ===== */
@media (max-width: 520px) {
  .top-left-controls,
  .top-right-controls {
    gap: 6px;
    flex-wrap: wrap;
  }

  .top-left-controls,
  .top-right-controls {
    max-width: 50%;
  }

  .top-left-controls button,
  .top-right-controls button {
    padding: 6px 8px;
    font-size: 12px;
    max-width: 100%;
    white-space: nowrap;      /* ✅ 不让按钮文字把宽度撑爆 */
  }
}