/* ============================================================
 * responsive.css — 响应式断点：1200 / 992 / 768 / 480
 * 移动端：唱片置顶、信息居中、按钮纵向、关闭复杂视差（由 JS 控制）。
 * ============================================================ */

/* ---- ≤ 1200px：收左右留白，唱片略缩 ---- */
@media (max-width: 1200px) {
  .hero-grid { grid-template-columns: 46% 54%; }
}

/* ---- ≤ 992px：首屏改为纵向（唱片在上，信息在下并居中） ---- */
@media (max-width: 992px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; padding-top: 90px; }
  .hero-info { max-width: 640px; margin: 0 auto; order: 2; }
  .hero-visual { order: 1; }
  .quote-line { left: 50%; transform: translateX(-50%) translateY(14px); right: auto; width: 100%; }
  .quote-line.active { transform: translateX(-50%) translateY(0); }
  .quote-wrap { display: flex; flex-direction: column; align-items: center; }
  .hero-actions, .socials { justify-content: center; }
  .about-grid { grid-template-columns: 1fr; }
  .player { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .player-extra { justify-content: space-between; }
}

/* ---- ≤ 768px：导航折叠 / 唱片缩小 / 触摸优化 ---- */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 10px var(--pad-x) 18px;
    background: rgba(7,10,18,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border-soft);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid) var(--ease-out);
  }
  .nav.open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 12px 0; }
  /* 手机端唱片尺寸 */
  .stage { width: clamp(200px, 68vw, 320px); height: clamp(200px, 68vw, 320px); }
  /* 唱片边框和光晕适当缩小 */
  .vinyl { border-width: 2.5px; }
  .vinyl-glow { width: 140%; height: 140%; }
  /* 标签区略大确保头像清晰 */
  .vinyl-label { width: 40%; }
  .player-controls { flex-wrap: wrap; }
  .pc-btn { width: 46px; height: 46px; flex: none; }
  .visual { display: none; } /* 移动端紧凑：隐藏声波 */
  .settings-panel { width: min(260px, calc(100vw - 36px)); }
  /* 社交按钮增大触控区域 */
  .social { width: 50px; height: 50px; }
  /* 首屏文案字号适配 */
  .quote-line { font-size: clamp(1rem, 3.5vw, 1.4rem); }
  .hero-sub { font-size: clamp(0.9rem, 2.5vw, 1.15rem); }
  .hero-desc { font-size: clamp(0.85rem, 2.2vw, 1rem); }
  /* 作品卡片单列 */
  .works-grid { grid-template-columns: 1fr; }
  /* 关于我信息项竖排 */
  .info-item { flex-direction: column; gap: 6px; }
}

/* ---- ≤ 480px：极小屏微调 ---- */
@media (max-width: 480px) {
  :root { --pad-x: 16px; }
  .name-title { font-size: clamp(2.2rem, 14vw, 3.6rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; height: 44px; }
  .info-item { flex-direction: column; gap: 4px; }
  .scroll-hint { display: none; }
  .stage { width: clamp(180px, 70vw, 280px); height: clamp(180px, 70vw, 280px); }
  .vinyl-label { width: 42%; }
  /* 播放器极简布局 */
  .player { padding: 16px 14px; gap: 14px; }
  .player-info { gap: 12px; }
  .player-cover { width: 46px; height: 46px; }
  .pc-btn { width: 42px; height: 42px; flex: none; }
  .volume { display: none; } /* 极小屏隐藏音量滑块 */
  .socials-center .social { width: 46px; height: 46px; }
}

/* 超宽屏：限制内容宽度，避免拉伸 */
@media (min-width: 1700px) {
  .hero, .section, .nav-inner, .footer { max-width: 1440px; }
}

/* 安全区域适配（刘海屏 / 底部指示器） */
@supports (padding: env(safe-area-inset-top)) {
  .nav { padding-top: calc(14px + env(safe-area-inset-top)); }
  .hero { min-height: calc(100svh - env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .settings-btn { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .settings-panel { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* 横屏手机（高度较窄） */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 80px var(--pad-x) 40px; }
  .hero-grid { gap: 20px; }
  .stage { width: clamp(160px, 30vw, 260px); height: clamp(160px, 30vw, 260px); }
  .scroll-hint { display: none; }
}