/* ============================================
   移动端适配（≤768px）
   覆盖式补丁，不修改桌面端原样式
   ============================================ */

/* ===== 强制横屏：竖屏时显示提示遮罩 ===== */
.rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #2a1f0f 0%, #1a1208 100%);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  color: #f0e6d2;
  font-family: var(--font-kai, 楷体);
  text-align: center;
  padding: 40px 20px;
}

.rotate-hint .rotate-icon {
  width: 80px;
  height: 80px;
  border: 2px solid #c9a96e;
  border-radius: 12px;
  position: relative;
  animation: rotateHint 2.5s ease-in-out infinite;
}

.rotate-hint .rotate-icon::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 4px;
}

.rotate-hint .rotate-icon::after {
  content: '⟳';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #e8b85e;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

.rotate-hint .rotate-title {
  font-size: 22px;
  letter-spacing: 8px;
  color: #e8b85e;
  margin: 0;
  font-weight: bold;
}

.rotate-hint .rotate-desc {
  font-size: 14px;
  color: rgba(240, 230, 210, 0.7);
  letter-spacing: 4px;
  line-height: 1.8;
  margin: 0;
  max-width: 280px;
}

/* 仅在手机竖屏时触发 */
@media (max-width: 900px) and (orientation: portrait) {
  .rotate-hint { display: flex; }
  body { overflow: hidden; }
}

/* ============================================
   移动端通用样式（≤900px，覆盖横屏 + 竖屏）
   ============================================ */
@media (max-width: 900px) {

  /* ===== 通用：隐藏桌面光标，回退原生 ===== */
  body, * { cursor: auto !important; }
  .ink-cursor, .ink-cursor-dot, .ink-cursor-ring { display: none !important; }

  /* ===== Hero 首页 ===== */
  .hero-title {
    font-size: 32px;
    letter-spacing: 14px;
    padding-left: 14px;
    margin-top: 0;
  }
  .hero-subtitle {
    font-size: 12px;
    letter-spacing: 6px;
    padding: 0 36px;
  }
  .hero-subtitle::before,
  .hero-subtitle::after { width: 24px; }
  .hero-quote p { font-size: 13px; letter-spacing: 4px; }
  .hero-quote cite { font-size: 10px; letter-spacing: 3px; }
  .hero-btn {
    padding: 8px 28px;
    font-size: 13px;
    letter-spacing: 5px;
    gap: 10px;
  }
  #hero .atlas-entry-btn {
    padding: 6px 18px;
    font-size: 11px;
    letter-spacing: 4px;
  }
  .hero-content { gap: 12px; padding: 20px 16px; }
  .hero-seal {
    bottom: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  /* ===== 场景页 ===== */
  .scene-info {
    top: 14px;
    padding: 6px 14px;
    gap: 8px;
  }
  .scene-realm { font-size: 14px; letter-spacing: 1px; }
  .scene-name { font-size: 11px; letter-spacing: 4px; }

  .next-scene-btn {
    bottom: 16px;
    right: 16px;
    padding: 7px 16px;
    font-size: 12px;
    letter-spacing: 4px;
  }

  /* 标签缩小 */
  .tag-vertical .tag-text {
    font-size: 12px;
    padding: 7px 5px;
    letter-spacing: 2px;
  }
  .tag-dot { width: 7px; height: 7px; margin-top: 5px; }

  .particle { width: 3px; height: 3px; }
  .pearl-glow { width: 24px; height: 24px; }

  /* ===== 跳过按钮 ===== */
  .skip-btn {
    padding: 6px 14px !important;
    font-size: 12px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  /* ===== 尾声 ===== */
  .ending-quote .quote-line {
    font-size: 22px !important;
    letter-spacing: 8px !important;
  }
  .ending-quote cite {
    font-size: 10px !important;
    letter-spacing: 4px !important;
  }
  .ending-btn {
    padding: 8px 24px !important;
    font-size: 13px !important;
    letter-spacing: 5px !important;
  }
  #ending .atlas-entry-btn {
    padding: 6px 18px !important;
    font-size: 11px !important;
  }
  .ending-credits {
    font-size: 10px !important;
    bottom: 12px !important;
  }
  .ending-seal {
    bottom: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  /* ===== 图鉴页 ===== */

  /* 图鉴页隐藏右上角音效按钮，避免和关闭按钮重叠 */
  body.atlas-open .audio-toggle {
    display: none !important;
  }

  /* 关闭按钮放大 + 提高 z-index 避免被遮 */
  .atlas-close {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    z-index: 9999 !important;
    background: rgba(184, 69, 62, 0.92) !important;
    color: #f0e6d2 !important;
    border-color: #f0e6d2 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  .atlas-header { padding: 14px 60px 10px !important; }
  .atlas-title-wrap { padding: 4px 30px !important; }
  .atlas-title-wrap::before,
  .atlas-title-wrap::after { width: 24px !important; }
  .atlas-title { font-size: 20px !important; letter-spacing: 6px !important; }
  .atlas-subtitle { font-size: 11px !important; letter-spacing: 4px !important; }

  .atlas-container {
    flex-direction: column !important;
    padding: 0 12px 16px !important;
    gap: 10px !important;
    height: calc(100vh - 100px) !important;
  }
  .atlas-tabs {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    gap: 8px !important;
  }
  .atlas-tab {
    writing-mode: horizontal-tb !important;
    flex: 1 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    letter-spacing: 4px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  .atlas-tab-num {
    margin: 0 6px 0 0 !important;
    font-size: 13px !important;
  }

  .atlas-grid-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex: 1 !important;
  }
  .atlas-grid {
    gap: 12px !important;
    padding: 8px 4px !important;
  }
  .atlas-card {
    width: 180px !important;
    height: 250px !important;
    flex: 0 0 180px !important;
  }
  .atlas-card-stamp {
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    top: 8px !important;
    right: 8px !important;
  }
  .atlas-card-name {
    font-size: 16px !important;
    letter-spacing: 4px !important;
    padding: 6px 0 !important;
  }
  .atlas-card-imgwrap { padding: 10px !important; }

  /* ===== 音效开关 ===== */
  .audio-toggle {
    width: 36px !important;
    height: 36px !important;
    top: 12px !important;
    right: 12px !important;
  }
  .audio-toggle svg { width: 18px; height: 18px; }
}

/* ============================================
   横屏专用：让 hero 等信息排得开
   ============================================ */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-title {
    font-size: 38px;
    letter-spacing: 16px;
  }
  .hero-content { gap: 10px; padding: 14px 20px; }
  .hero-quote p { font-size: 12px; }

  .ending-quote .quote-line {
    font-size: 20px !important;
  }

  .atlas-card {
    width: 160px !important;
    height: 220px !important;
    flex: 0 0 160px !important;
  }
  .atlas-container {
    height: calc(100vh - 80px) !important;
  }
  .atlas-header { padding: 8px 60px 6px !important; }
}

/* ============================================
   极小屏（≤480px）继续微调
   ============================================ */
@media (max-width: 480px) and (orientation: landscape) {
  .hero-title { font-size: 30px; letter-spacing: 10px; }
  .hero-quote { display: none; }
}