/* ═══ 桌面端 ═══ */
@media (min-width: 768px) {
  .hero-content { max-width: 480px; }
  .hero-title { font-size: 40px; }
  .hero-subtitle { font-size: 15px; }
  .hero-en { font-size: 12px; letter-spacing: 8px; }

  .section { max-width: 760px; padding: 100px 36px; }
  .section-title { font-size: 26px; }
  .section-subtitle { font-size: 15px; }

  /* 概念卡片 2x2 网格 */
  .concepts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* 轨道光效适配 */
  .orbit-ring { width: 600px; height: 600px; }
  .orbit-ring-2 { width: 420px; height: 420px; }

  /* 场景区 — 桌面端 2x2 网格 */
  .scenarios { max-width: 720px; }
  .scenarios-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0 0 20px;
  }
  .scenario-card {
    flex: none;
    max-width: none;
    height: 220px;
    padding: 24px 20px;
    scroll-snap-align: unset;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .scroll-arrow { display: none; }

  /* 可复制系统 — 桌面端 2列 */
  .system-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0 0 20px;
  }
  .system-card {
    flex: none;
    max-width: none;
    min-height: 140px;
  }

  /* 舞台卡片横排 */
  .stage-cards {
    flex-direction: row;
    gap: 20px;
  }
  .stage-card { flex: 1; }

  /* 未来一晚更宽 */
  .night-timeline { padding-left: 100px; }
  .night-time { left: -100px; width: 64px; font-size: 15px; }
  .night-timeline::before { left: 70px; }
  .night-item::before { left: -32px; }

  /* 时间轴更宽 */
  .timeline { max-width: 520px; }

  /* 还没发生的 */
  .not-yet-list { gap: 18px; margin-top: 40px; }
  .not-yet-item { font-size: 15px; padding: 18px 20px 18px 22px; border-radius: 16px; }
  .not-yet-text { font-size: 15px; line-height: 1.9; }
  .not-yet-prefix { font-size: 13px; }
  .not-yet-caption { font-size: 13px; margin-top: 36px; }

  /* 结尾区更宽 */
  .ending { max-width: 480px; }
  .ending-title { font-size: 22px; }
  .ending-body { font-size: 15px; }
}

/* ═══ 移动端触控优化 ═══ */
@media (max-width: 767px) {
  /* Note 2026-06-13: mobile-first performance layer. Small screens get fewer heavy effects and tighter spacing. */
  html {
    scroll-padding-top: 12px;
  }

  body::after {
    opacity: 0.035;
    filter: none;
  }

  .fx-canvas,
  .particle-canvas,
  .spotlight-overlay {
    display: none !important;
  }

  .stars .star:nth-child(n + 25) {
    display: none;
  }

  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  .btn-light {
    padding: 16px 40px;
    font-size: 16px;
  }

  .btn-outline {
    padding: 14px 36px;
    font-size: 14px;
  }

  .manifesto-chip, .concept-action, .fortune-button {
    padding: 12px 20px;
    font-size: 14px;
  }

  .city-note {
    padding: 12px 18px;
    font-size: 14px;
  }

  .stage-point {
    width: 80px;
    height: 80px;
  }

  .section {
    padding: 48px 16px;
  }

  .hero {
    min-height: 92svh;
    padding: 18px 16px 28px;
    justify-content: center;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-title {
    font-size: 25px;
    margin-bottom: 6px;
  }

  .hero-subtitle {
    max-width: 300px;
    margin-bottom: 0;
    font-size: 13.5px;
    line-height: 1.85;
  }

  .hero-en, .hero-origin {
    margin-bottom: 4px;
  }

  .btn-light {
    margin-top: 28px;
  }

  .section-title {
    font-size: 21px;
    line-height: 1.5;
  }

  .section-subtitle {
    font-size: 13.5px;
  }

  .section-subtitle,
  .stage-text,
  .concept-text,
  .scenario-text,
  .system-text,
  .tl-desc,
  .night-text {
    line-height: 1.85;
  }

  .stage-map {
    margin-top: 28px;
    gap: 14px;
  }

  .stage-map-board {
    min-height: 236px;
  }

  .stage-point[data-place="gate"] { left: 8%; top: 16%; }
  .stage-point[data-place="field"] { left: 37%; top: 52%; }
  .stage-point[data-place="street"] { left: 64%; top: 16%; }
  .stage-point[data-place="roof"] { left: 70%; top: 66%; }

  .stage-map-card {
    padding: 20px;
  }

  .stage-map-card h3 {
    font-size: 26px;
  }

  .concept-play-card,
  .system-card,
  .scenario-card {
    min-height: auto;
  }

  .concept-card,
  .concept-play-card,
  .system-card,
  .scenario-card,
  .stage-map-card,
  .city-fortune,
  .not-yet-item {
    box-shadow: none !important;
  }

  .orbit-ring,
  .orbit-ring-2,
  .edge-light,
  .lamp-glow {
    display: none !important;
  }

  .scenarios-track,
  .system-track {
    gap: 10px;
    padding-bottom: 8px;
  }

  .scenario-card,
  .system-card {
    padding: 16px;
  }

  .not-yet-item {
    padding: 16px 18px;
  }

  .memory-code-random {
    min-width: 48px;
    min-height: 48px;
  }

  .memory-code-input {
    height: 52px;
    font-size: 16px;
  }

  /* ── 性能优化 ── */
  .glass {
    background: rgba(12, 17, 28, 0.82);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass:hover {
    transform: none;
    box-shadow: none;
  }
  .reveal {
    transform: translateY(24px);
  }
  .reveal.visible {
    transform: translateY(0);
  }
  .star-preset {
    animation: none;
    opacity: 1;
  }
  .star-words-area {
    transform: translateY(16px);
  }
  .star-words-area.show {
    transform: translateY(0);
  }
  .star-preset:hover {
    transform: none;
  }
}

/* ═══ 超小屏幕 ═══ */
@media (max-width: 380px) {
  .hero-title {
    font-size: 24px;
  }

  .section-title {
    font-size: 20px;
  }

  .btn-light {
    padding: 14px 32px;
    font-size: 14px;
  }

  .concept-play {
    grid-template-columns: 1fr;
  }

  .hero-subtitle {
    max-width: 270px;
    font-size: 13px;
  }

  .stage-point {
    width: 68px;
    height: 68px;
  }

  .memory-card-layout {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .section { max-width: 840px; padding: 120px 36px; }
  .scenarios { max-width: 800px; }
  .scenarios-track { gap: 14px; }
  .scenario-card {
    flex: none;
    max-width: none;
    height: 220px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hero-title { font-size: 44px; }
  .hero-content { max-width: 520px; }
  .concepts { gap: 24px; }
  .orbit-ring { width: 700px; height: 700px; }
  .orbit-ring-2 { width: 500px; height: 500px; }
}