/* ══════════════════════════════════════════════
   善灵仙境 · 多端适配
   手机端：竖向单栏 + 底部导航
   PC端（≥900px）：双栏横向布局 + 顶部横向导航
   ══════════════════════════════════════════════ */

/* ── PC端基础重置 ── */
@media (min-width: 900px) {

  /* body：正常块级，不用flex */
  body {
    display: block !important;
    padding-bottom: 0 !important;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1040 50%, #0f0c29 100%) !important;
  }

  /* 粒子背景铺满 */
  body > .particles,
  body > .bg-particles {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 0;
  }

  /* ── PC顶部横向导航栏（替代底部） ── */
  .bottom-nav {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 40px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: rgba(10, 8, 32, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    z-index: 100 !important;
  }

  .bottom-nav .nav-item {
    padding: 0 24px !important;
    min-height: 60px !important;
    flex: none !important;
    flex-direction: row !important;
    gap: 8px !important;
    font-size: .88rem !important;
    border-radius: 0 !important;
    border-bottom: 3px solid transparent !important;
    transition: color .2s, border-color .2s !important;
  }

  .bottom-nav .nav-item:hover {
    color: #c4b5fd !important;
  }

  .bottom-nav .nav-item.active {
    border-bottom-color: #a855f7 !important;
  }

  .bottom-nav .nav-item .n-icon {
    font-size: 1.1rem !important;
  }

  .bottom-nav .nav-item .n-label {
    font-size: .82rem !important;
    color: inherit !important;
  }

  /* ── 页面整体内容区：有顶部导航后要留出空间 ── */
  body > .main,
  body > div.main {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 80px 40px 40px !important;
    position: relative;
    z-index: 1;
  }

  /* ── index.html 主页双栏布局 ── */
  /* 隐藏手机端的顶部greeting栏（PC端用topbar-pc替代） */
  .topbar {
    display: none !important;
  }

  /* 主内容区改为左右双栏 */
  .pc-layout {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }

  /* 左栏：善灵展示 */
  .pc-left {
    position: sticky !important;
    top: 80px !important;
  }

  /* 善灵图片在PC上放大 */
  .spirit-img-wrap {
    width: 280px !important;
    height: 280px !important;
  }

  /* 状态栏在PC上横向更宽 */
  .stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── 说话区域移到主内容流 ── */
  body > .talk-section {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px 24px !important;
    position: relative;
    z-index: 1;
  }

  /* ── toast居中 ── */
  .toast {
    left: 50% !important;
    transform: translateX(-50%) translateY(-80px) !important;
  }

  .toast.show {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* ── 弹窗全屏 ── */
  .modal-overlay,
  .modal {
    z-index: 200 !important;
  }

  .care-anim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 150 !important;
  }

  /* ── 其他页面（非主页）：居中单栏但更宽 ── */
  /* care / visit / ranking / kindness 等页面 */
  body:not(.has-pc-layout) > .main {
    max-width: 900px !important;
  }

  /* ── ranking.html 排行榜双栏 ── */
  .ranking-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── select.html 选灵页：多列网格 ── */
  .spirit-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ── care.html 互动按钮区：更宽网格 ── */
  .care-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── visit.html 串门网格 ── */
  .visit-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── 超大屏（1440px+）稍微再宽一些 ── */
@media (min-width: 1440px) {
  body > .main,
  body > div.main {
    max-width: 1300px !important;
    padding: 80px 60px 40px !important;
  }

  .pc-layout {
    grid-template-columns: 400px 1fr !important;
  }

  .spirit-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ── PC端内容可见性控制 ── */
@media (min-width: 900px) {
  .mobile-only { display: none !important; }
  .pc-only { display: block !important; }

  /* 右栏里的talk-section显示 */
  .pc-right .talk-section {
    display: block !important;
  }

  /* 页面主内容额外内边距调整 */
  body > .main > .pc-layout {
    margin-top: 0;
  }

  /* pc-right里的内容每条间距统一 */
  .pc-right > * {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  .pc-right > *:last-child {
    margin-bottom: 0 !important;
  }

  /* 左栏内容间距 */
  .pc-left > * {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  .pc-left > *:last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 899px) {
  .mobile-only { display: block; }
  .pc-only { display: none; }
  
  /* 手机端右栏内容正常展示 */
  .pc-right .talk-section { display: none !important; }
  .pc-left, .pc-right, .pc-layout { display: block !important; }
}