/* ============================================================
   移动端适配 + 站点信息（单独文件，不影响桌面样式）
   ============================================================ */

/* 隐藏输入框：用于在触屏设备上唤起系统键盘 */
.typing-input {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  pointer-events: none;
  z-index: -1;
}

/* 触屏提示 */
.touch-mode .hint::after { content: " · 点屏幕可再次唤起键盘"; color: #8d86b8; }

/* 站点信息 / 作者 */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 4px;
  font-size: 12px;
  color: #8d86b8;
}
.site-foot b { color: var(--gold, #ffd23f); font-weight: 700; }
.site-foot .foot-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cyan, #4ad9ff);
  cursor: pointer;
  text-decoration: underline dotted;
}
.site-foot .foot-link:hover { color: var(--gold, #ffd23f); }

.info-list {
  margin: 8px 0 14px;
  padding-left: 18px;
  text-align: left;
  line-height: 1.75;
  font-size: 13px;
  color: #cfc9ee;
}
.info-list li { margin: 4px 0; }

@media (max-width: 900px), (pointer: coarse) {
  html, body { overflow-x: hidden; }

  /* 窄屏统一按边框盒计算，避免 padding 撑出横向溢出 */
  .game, .page, .stage, .topbar, .bars, .input-area, .gear-dock, .overlay, .panel,
  .panel *, .word-display, .gear-bar, .gear-info, .site-foot {
    box-sizing: border-box;
  }
  .game, .page, .stage, .topbar, .bars, .input-area, .gear-dock { max-width: 100%; min-width: 0; }
  .tb-left > *, .tb-right > * { min-width: 0; }

  .page { padding: 14px 12px 20px; }
  .logo { font-size: 22px; }
  .hero-sub { font-size: 12px; }

  .game { padding: 6px 6px 10px; gap: 6px; min-height: 100dvh; }
  .page { min-height: 100dvh; }

  /* 顶栏换行，避免挤压 */
  .topbar {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 8px;
  }
  .tb-left, .tb-right { gap: 8px; flex-wrap: wrap; }
  .tb-right .mtr i { display: none; }
  .tb-right .mtr b { font-size: 13px; }

  /* 舞台：宽度撑满、高度自适应，给输入区留空间 */
  .stage { min-height: 0; padding: 8px; }
  .map-view { min-height: 38vh; }
  .rm-hint { display: none; }
  .battle-view { gap: 6px; }

  /* 战斗元素缩小一点，别溢出 */
  .enemy .sprite { transform: scale(.85); }
  .hero-sprite { transform: scale(.85); }
  .atk-label { font-size: 11px; }

  /* 输入区：字号加大，方便看清与触控 */
  .input-area { position: sticky; bottom: 0; z-index: 20; padding-top: 6px; }
  .word-display { font-size: 20px; padding: 10px 12px; }
  .word-display.sentence { font-size: 15px; }
  .hint { font-size: 12px; }

  /* 装备栏竖排，信息面板占满一行 */
  .gear-dock { flex-direction: column; gap: 6px; }
  .bars { grid-template-columns: 1fr; }
  .gear-bar { grid-template-columns: repeat(3, 1fr); }
  .gear-info { min-height: 56px; font-size: 12px; }
  .gs-name { font-size: 12px; }
  .gs-affix { font-size: 10px; }

  .skill-bar { gap: 6px; }
  .skill-chip { font-size: 11px; padding: 4px 6px; }

  .panel { width: calc(100% - 8px); padding: 16px 14px; }
  .panel h2 { font-size: 18px; }
  .panel .btn { font-size: 14px; padding: 10px 16px; }
}

@media (max-width: 520px) {
  .tb-right .mtr:nth-child(2) { display: none; }   /* 小屏优先露出 WPM 与连击 */
  .logo { font-size: 19px; }
  .word-display { font-size: 18px; }

  /* 顶栏竖排，避免右侧指标被挤出屏幕 */
  .topbar { flex-direction: column; align-items: stretch; }
  .tb-right { justify-content: flex-end; }

  /* 弹窗占满屏宽，长句自动换行 */
  .overlay { padding: 10px; }
  .panel {
    width: calc(100vw - 20px);
    max-width: none;
    box-sizing: border-box;
    padding: 16px 14px;
  }
  .panel p, .panel li, .panel .info-list li { word-break: break-word; overflow-wrap: anywhere; }
}