/* ============================================
   PWA & Mobile Responsive
   ============================================ */

/* --- Safe Area padding for PWA standalone mode --- */
.site-header {
  padding-top: env(safe-area-inset-top);
  padding-left: max(48px, env(safe-area-inset-left));
  padding-right: max(48px, env(safe-area-inset-right));
}

.page-content, .reading-page, .chars-page, .char-detail-page, .lib-page, .settings-page {
  padding-bottom: env(safe-area-inset-bottom);
}

.site-footer {
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

/* --- Tablet (768px ~ 1199px) --- */
@media (max-width: 1199px) and (min-width: 768px) {
  .site-identity .page-title-zh { font-size: 3rem; }
  .deck-container { width: 440px; height: 400px; }
  .suits-grid { width: 420px; height: 360px; gap: 16px; }
  .suit-card-wrapper { width: 100px; }
  .chars-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
  .dash-left { flex-direction: column; align-items: center; text-align: center; }
  .dash-badges { justify-content: center; }
  .settings-container { max-width: 560px; padding: 32px 24px 60px; }
  .reading-container { padding: 32px 24px 80px; }
  .lib-container { padding: 32px 24px 60px; }
  .spread-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Draw stage — side by side but smaller */
  .draw-fan-card { width: 82px; }
  .draw-selected-card { width: 72px; }
  .shuffle-mahjong-card { width: 68px; height: 96px; }
  .tarot-card-3d { width: 130px; height: 195px; }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {

  /* Header */
  .site-header {
    height: 52px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .header-logo { font-size: 1rem; }
  .suit-nav { gap: 16px; }
  .suit-nav a { width: 30px; height: 30px; font-size: 1rem; }

  /* Brand headers on inner pages */
  .page-brand-header { padding: 36px 16px 8px; }
  .page-title-zh { font-size: 2rem; }
  .page-subtitle-en { font-size: 0.72rem; letter-spacing: 0.1em; }

  /* Homepage */
  .site-identity .page-title-zh { font-size: 2.6rem; }
  .deck-container { width: 320px; height: 320px; }
  .deck-card { width: 100px; }
  .suits-grid { width: 300px; height: 280px; gap: 12px; }
  .suit-card-wrapper { width: 80px; }
  .suit-card-symbol { font-size: 1.6rem; }
  .deck-hint { font-size: 0.7rem; margin-top: 20px; }

  /* Homepage hero — compact vertical rhythm so everything
     (incl. the deck hint) fits common phone heights like 375×667 */
  .home-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 48px 20px 20px;
  }
  .site-identity { margin-bottom: 16px; }
  .site-identity .brand-label { margin-bottom: 12px; }
  .home-desc { margin-top: 20px; margin-bottom: 0; }

  /* Characters */
  .chars-container { padding: 32px 16px 80px; }
  .chars-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
  .chars-header { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Create modal */
  .create-modal { max-width: 100%; padding: 0 12px; }
  .step-row { grid-template-columns: 1fr; }
  .char-type-options { grid-template-columns: 1fr; }
  .personality-grid { grid-template-columns: 1fr; }
  .personality-grid .step-row { grid-template-columns: 1fr; }
  .step-actions { flex-wrap: wrap; }
  .step-btn { padding: 10px 20px; font-size: 0.78rem; }

  /* Character detail — Mobile: avatar-first vertical layout */
  .dashboard { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px 80px; }
  .char-detail-container { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px; }
  .dash-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .dash-avatar {
    width: min(180px, 50vw);
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 0;
  }
  .dash-name { font-size: 2rem; }
  .dash-tagline { font-size: 1rem; text-align: center; }
  .dash-badges { justify-content: center; }

  /* Relationship network — compact on mobile */
  .dash-left #relationshipsPanel {
    width: 100%;
    align-self: stretch;
    text-align: left;
    padding: 16px;
  }
  .dash-left #relationshipsPanel .dash-panel-header {
    margin-bottom: 12px;
  }
  .dash-left #relationshipsPanel .rel-list {
    gap: 8px;
  }
  .dash-left #relationshipsPanel .rel-card {
    padding: 8px 12px;
    gap: 10px;
  }
  .dash-left #relationshipsPanel .rel-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }
  .dash-left #relationshipsPanel .rel-name {
    font-size: 0.76rem;
  }
  .dash-left #relationshipsPanel .rel-type {
    font-size: 0.62rem;
  }
  /* 2026-09-13 关系网络入口卡（旧 rel-list 按钮组已随列表 UI 移除） */
  .dash-left #relationshipsPanel .rg-entry {
    padding: 12px 14px;
    margin: 10px 8px;
  }
  .dash-left #relationshipsPanel .rg-entry-av {
    width: 30px;
    height: 30px;
    font-size: 0.68rem;
  }

  /* ── 关系图页（rg-*）手机端 ── */
  .rg-page { height: 100dvh; }
  .rg-topbar {
    padding: 8px 16px;
    gap: 10px;
  }
  .rg-title { font-size: 0.82rem; }
  .rg-center-name { font-size: 0.82rem; }
  .rg-count { display: none; }
  .rg-manage-btn { padding: 8px 14px; font-size: 0.72rem; }
  .rg-hint { display: none; }
  /* 管理面板 → 底部抽屉 */
  .rg-sheet-overlay { align-items: flex-end; }
  .rg-sheet {
    width: 100%;
    max-width: none;
    max-height: 86dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
  }
  .rg-row-edit, .rg-row-del { width: 40px; height: 40px; }
  .rg-ext-card { width: 88vw; }

  /* Stats footer — mobile 2-col */
  .stats-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #charStatsFooter { padding: 0 16px 40px !important; }

  /* Reading wizard */
  .spread-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .spread-option { padding: 18px 16px; }
  .dealt-cards-area { gap: 20px; }
  .tarot-card-3d { width: 120px; height: 180px; }
  .interpretation-result { max-width: 100%; }
  .reading-wizard { min-height: 360px; }

  /* Draw stage */
  .draw-fullscreen { flex-direction: column; }
  .draw-panel { width: 100%; padding: 20px 16px; gap: 16px; }
  .draw-stage { width: 100%; height: 340px; }
  .draw-fan-card { width: 78px; }
  .draw-selected-card { width: 68px; }
  .shuffle-mahjong-card { width: 64px; height: 90px; }

  /* FAB */
  .fab { bottom: 24px; right: 24px; width: 48px; height: 48px; font-size: 1.4rem; }

  /* Settings */
  .settings-container { max-width: 100%; padding: 24px 16px 60px; }
  .settings-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .settings-input, .settings-select { width: 100%; }

  /* Library */
  .lib-container { padding: 24px 16px 60px; }
  .lib-grid-3 { grid-template-columns: 1fr 1fr; }
  .rd-modal { padding: 20px; max-height: 90vh; }

  /* Modals */
  .confirm-dialog { width: 90vw; padding: 24px 20px; }
  .rel-modal { width: 90vw; max-height: 85vh; overflow-y: auto; }
  .export-modal { max-height: 85vh; overflow-y: auto; }

  /* Wrap fixes */
  .reading-actions { flex-wrap: wrap; justify-content: center; }
  .wizard-nav { flex-wrap: wrap; justify-content: center; }
  .create-topbar-actions { flex-wrap: wrap; }

  /* Reading: ensure content fits */
  .reading-container { padding: 20px 16px 60px; }
  .spread-select-title { font-size: 1.2rem; }
  .interpretation-result { font-size: 0.85rem; line-height: 1.7; }

  /* Grid collapses */
  .memory-grid { grid-template-columns: 1fr; }
  .rel-modal-row { grid-template-columns: 1fr; }

  /* Tarot cards */
  .tarot-card-3d { max-width: 100%; }

  /* Character detail container */
  .char-detail-container { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px; }
  .char-detail-container > div[style] { padding: 20px 16px 0 !important; }
  .char-detail-page > div[style] { padding: 8px 16px 0 !important; }

  /* Deck hover */
  .deck-card:nth-child(1) { transform: rotate(-4deg) translateX(-4px) translateY(2px); }
  .deck-card:nth-child(4) { transform: rotate(4deg) translateX(4px) translateY(1px); }

  /* ── Hover-only elements → always visible on mobile ── */
  .rel-delete {
    opacity: 0.55 !important;
    transform: scale(1) !important;
  }
  .rel-delete {
    min-width: 32px;
    min-height: 32px;
  }

  /* ── iOS input zoom fix: keep all form fields ≥16px ── */
  .step-input, .step-input.large, .step-input.xlarge,
  .question-input, .settings-input, .settings-select,
  .rel-modal-input {
    font-size: 16px !important;
  }

  /* ── Header: keep 52px but let safe-area top inset breathe ── */
  .site-header {
    height: auto;
    min-height: 52px;
    padding-top: max(0px, env(safe-area-inset-top));
  }

  /* ── Contrast: mobile readability overrides ── */
  :root {
    --text-muted: #8a8478;
    --gold-dim: #7a7059;
  }
  [data-theme="blue-hour"] {
    --text-muted: #8a867e;
    --gold-dim: #8a867e;
  }
  [data-theme="silver"] {
    --text-muted: #5f5f66;
    --gold-dim: #6e6c66;
  }

  /* ── Contrast: stop stacking extra opacity on small text ── */
  .brand-label, .page-subtitle-en { opacity: 0.75; }
  .page-desc { opacity: 0.8; }
  .page-desc-en { opacity: 0.7; }
  .chars-count, .chars-empty-sub, .timeline-date,
  .memory-field-label, .preview-label, .stats-footer-label { opacity: 0.8; }
  .follow-up-sub, .shuffle-hint.minimal { opacity: 0.75; }
  body .dm-date, body .dm-subtitle, body .dm-section-sub, body .dm-starred-more { opacity: 0.75; }
  body .dm-starred-card-name { opacity: 0.85; }
  .shuffle-skip-btn { opacity: 0.6; }
  .detail-panel-content.empty, .rel-empty { opacity: 0.7; }
  .memory-empty-banner, .timeline-empty { opacity: 0.75; }
  .dash-panel-body.empty { opacity: 0.7; }
  body .lib-empty { opacity: 0.75; }
  body .lib-placeholder-sub { opacity: 0.7; }
  body .rd-interp.empty { opacity: 0.7; }

  /* ── 8-point grid: normalize off-grid spacing values ── */
  .chars-grid { gap: 16px; }
  .char-card-body { padding: 20px 20px 16px; }
  .detail-panel { padding: 24px; }
  .interp-block { padding: 20px 24px; }
  .target-option { padding: 20px 24px; }
  .question-input { padding: 16px 20px; resize: none; }
  .step-input { padding: 16px; }
  .char-type-option { padding: 16px; }
  .spread-option { padding: 16px; }
  .step-btn { padding: 12px 20px; }
  body .lib-card { padding: 16px; }
  body .dm-modal { padding: 28px 20px 24px; }

  /* ── Keyboard-friendly modal heights (dvh) ── */
  .create-modal, .rel-modal, .export-modal { max-height: min(85vh, 85dvh); }
  body .rd-modal { max-height: min(85vh, 85dvh); }

  /* ── Safe area for floating / bottom controls ── */
  .fab { bottom: max(24px, env(safe-area-inset-bottom) + 16px); }
  .shuffle-overlay { padding: 20px 16px max(32px, env(safe-area-inset-bottom) + 16px); }

  /* ── Small-label readability (≥11px at 16px root) ── */
  .follow-up-sub,
  .stats-footer-label, .card-orientation,
  .memory-field-label, .rel-modal-label, .confirm-label,
  .rel-status, .char-card-dates,
  .graph-node-name { font-size: 0.7rem; }
  body .dm-subtitle, body .dm-section-sub, body .dm-orientation-tag,
  body .dm-starred-card-name { font-size: 0.7rem; }
  body .lib-mini-card { font-size: 0.7rem; }
  body .lib-placeholder-sub { font-size: 0.7rem; }

  /* ── Characters（角色档案）: mobile legibility ── */
  .char-card-date { font-size: 0.72rem; }
  .char-card-world { color: var(--gold); }
  .char-card-tagline { line-height: 1.6; }

  /* ── V4 角色卡 meta 行：手機上世界標籤與日期分行，杜絕「建立于」擠壓斷字 ── */
  .char-card-meta { flex-wrap: wrap; row-gap: 6px; }
  .char-card-world { flex: 1 1 100%; }
  .char-card-dates { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; font-size: 0.68rem; }
}

/* ── Intermediate viewport (tablet portrait) ────── */
@media (max-width: 960px) and (min-width: 769px) {
  .deck-container { width: 380px; height: 380px; }
  .suits-grid { width: 360px; height: 340px; }
  .char-detail-container { grid-template-columns: 240px 1fr; gap: 28px; }
  .dashboard { grid-template-columns: 220px 1fr 220px; gap: 20px; }
}

/* --- Small phone (< 400px) --- */
@media (max-width: 400px) {
  .site-identity .page-title-zh { font-size: 2rem; }

  /* Header: fit 4 nav icons + logo on narrow phones */
  .suit-nav { gap: 8px; }
  .header-logo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .deck-container { width: 260px; height: 260px; }
  .deck-card { width: 84px; }
  .suits-grid { width: 260px; height: 260px; gap: 8px; }
  .suit-card-wrapper { width: 70px; }
  .suit-card-symbol { font-size: 1.4rem; }
  .home-hero { padding: 32px 16px 12px; }
  .home-desc { margin-top: 12px; }
  .deck-hint { margin-top: 12px; }
  .chars-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .spread-grid { grid-template-columns: 1fr; }
  .tarot-card-3d { width: 100px; height: 150px; }
  .dealt-cards-area { gap: 14px; }
  .reading-container { padding: 20px 12px 60px; }
  .chars-container { padding: 24px 12px 60px; }
  .settings-container { padding: 16px 12px 40px; }
  .lib-container { padding: 16px 12px 40px; }

  /* Draw stage */
  .draw-stage { height: 260px; }
  .draw-fan-card { width: 60px; }
  .draw-selected-card { width: 54px; }
  .draw-panel { padding: 16px 8px; gap: 8px; }
  .shuffle-mahjong-card { width: 52px; height: 74px; }
  .stats-footer-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #charStatsFooter { padding: 0 12px 32px !important; }
}

/* ============================================
   Touch Feedback — mobile has no :hover
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* Tap feedback for interactive cards */
  .char-card:active {
    transform: scale(0.97);
    transition: transform 0.15s ease;
  }
  .suit-card-wrapper:active {
    transform: scale(0.95);
    transition: transform 0.15s ease;
  }
  .spread-option:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.03);
    transition: all 0.15s ease;
  }
  .target-option:active,
  .target-char-card:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.03);
    transition: all 0.15s ease;
  }
  .draw-fan-card:active {
    transform: scale(1.03) !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.55), 0 0 24px rgba(var(--accent-rgb),0.22) !important;
    z-index: 200 !important;
    transition: all 0.12s ease;
  }
  .tarot-card-3d:active {
    transform: scale(0.96);
    transition: transform 0.15s ease;
  }
  .card-blue:active {
    transform: translateY(-1px);
    border-color: rgba(242,238,231,0.14);
    transition: all 0.15s ease;
  }

  /* Buttons */
  .wizard-nav-btn:active,
  .settings-btn:active,
  .reading-action-btn:active,
  .detail-action-btn:active,
  .step-btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  .wizard-nav-btn.primary:active,
  .settings-btn.primary:active {
    opacity: 0.8;
  }

  /* Increase tap target size for small interactive elements */
  .rel-edit,
  .rel-delete {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Always show hover-reliant buttons on touch devices */
  .char-card-star,
  .rel-delete,
  .rel-edit {
    opacity: 0.55 !important;
  }
  .char-card-star.active {
    opacity: 1 !important;
  }
  /* 09-13 銀白：白星在黑鈕上 0.55 太淡看不清，抬到 0.85（選中態仍 1） */
  html[data-theme="silver"] .char-card-star {
    opacity: 0.85 !important;
  }
  html[data-theme="silver"] .char-card-star.active {
    opacity: 1 !important;
  }
  .nav-icon {
    min-width: 44px;
    min-height: 44px;
  }
  .suit-nav a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Tap targets ≥44px (hit areas, visuals mostly unchanged) ── */
  .header-logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
  }
  .question-chip, .world-tag, .rel-type-tag, .rel-dir-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .lib-star {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .create-close, .graph-close, .sound-toggle,
  body .rd-close {
    width: 44px;
    height: 44px;
  }
  .shuffle-skip-btn, .settings-btn, .wizard-nav-btn, .step-btn,
  .reading-action-btn, .detail-action-btn, .confirm-dialog-btn,
  .rel-modal-btn, .rel-add-btn, .follow-up-btn, .dm-dismiss {
    min-height: 44px;
  }
  /* Expand hit area without changing the 28px visuals */
  .char-card-star::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }
}

/* ============================================
   Sticky Hover Neutralization — touch devices
   (iOS keeps :hover state after a tap; restore
   base styles so highlights don't get stuck)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  body .card:hover { transform: none; box-shadow: var(--shadow-card); }
  body .suit-nav a:hover:not(.active) { color: var(--text-muted); }
  body .suit-nav a:hover:not(.active)::after { transform: translateX(-50%) scaleX(0); }
  body .suit-card-wrapper:hover { transform: none; box-shadow: var(--shadow-card); border-color: rgba(255,255,255,0.05); }
  body .deck-stack:hover .deck-card { border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); }
  body .deck-stack:hover .deck-card::after { color: rgba(255,255,255,0.06); }

  body .char-card:hover { transform: none; box-shadow: var(--shadow-card); border-color: rgba(255,255,255,0.04); }
  body .char-card:hover .avatar-initial { color: rgba(255,255,255,0.12); }
  body .fab:hover { transform: none; background: var(--accent); box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); }
  body .create-close:hover { color: var(--text-muted); border-color: rgba(255,255,255,0.08); }
  body .char-type-option:hover { border-color: rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); }
  body .world-tag:hover { border-color: rgba(255,255,255,0.07); color: var(--text-muted); }
  body .step-btn:hover { border-color: rgba(255,255,255,0.1); color: var(--text-secondary); }
  body .step-btn.primary:hover { background: var(--accent); border-color: var(--accent); }
  body .step-btn.ghost:hover { color: var(--text-muted); border-color: transparent; }
  body .detail-panel:hover { border-color: rgba(255,255,255,0.035); }
  body .char-back:hover { color: var(--text-muted); }
  body .create-cancel:hover { border-color: rgba(255,255,255,0.08); color: var(--text-muted); }
  body .confirm-dialog-btn:hover { border-color: rgba(255,255,255,0.1); }
  body .confirm-dialog-btn.primary:hover { background: var(--accent); border-color: var(--accent); }
  body .confirm-dialog-btn.danger:hover { color: var(--text-muted); border-color: transparent; }
  body .sound-toggle:hover { border-color: rgba(255,255,255,0.06); color: var(--text-muted); }
  body .char-card-star:hover:not(.active) { color: var(--text-muted); }
  /* 09-13 銀白：星鈕 sticky-hover 也不回灰（黑底圓片上灰☆看不清） */
  html[data-theme="silver"] .char-card-star:hover:not(.active) { color: rgba(255,255,255,0.92); }
  body .detail-delete-btn:hover { border-color: rgba(var(--accent-rgb),0.2); color: var(--text-muted); background: transparent; }
  body .dash-panel:hover { border-color: rgba(255,255,255,0.035); }
  body .rel-card:hover { border-color: rgba(255,255,255,0.025); background: var(--bg-surface); }
  body .rel-delete:hover { color: var(--text-muted); }
  body .rel-edit:hover { color: var(--text-muted); opacity: 0.55 !important; }
  body .rel-add-btn:hover { border-color: rgba(255,255,255,0.06); color: var(--text-muted); }
  body .rel-modal-btn:hover { border-color: rgba(255,255,255,0.08); }
  body .rel-modal-btn.primary:hover { background: var(--accent); }
  body .rel-char-option:hover:not(.selected) { background: transparent; }
  body .rel-type-tag:hover:not(.active) { border-color: rgba(255,255,255,0.08); color: var(--text-secondary); }
  body .rel-dir-btn:hover:not(.active) { border-color: rgba(255,255,255,0.08); }
  body .rel-graph-btn:hover { border-color: rgba(255,255,255,0.08); color: var(--text-secondary); }
  body .graph-close:hover { border-color: rgba(255,255,255,0.06); color: var(--text-muted); }
  body .graph-node:hover .graph-node-avatar { border-color: rgba(255,255,255,0.12); box-shadow: none; transform: none; }
  body .graph-node.center-node:hover .graph-node-avatar { border-color: var(--accent); box-shadow: 0 0 32px rgba(var(--accent-rgb),0.35), 0 0 72px rgba(var(--accent-rgb),0.08); transform: none; }
  body .detail-action-btn:hover { border-color: rgba(255,255,255,0.07); color: var(--text-muted); background: transparent; }
  body .detail-action-btn.primary-action:hover { background: transparent; }
  body .detail-action-btn.danger-action:hover { color: var(--text-muted); border-color: transparent; }

  body .spread-option:hover:not(.selected):not(.disabled) { transform: none; box-shadow: none; border-color: rgba(255,255,255,0.04); }
  body .reading-begin-btn:hover { background: transparent; color: var(--accent-light); box-shadow: none; }
  body .shuffle-continue-btn:hover { border-color: rgba(255,255,255,0.12); color: var(--text-secondary); box-shadow: none; }
  body .shuffle-skip-btn:hover { opacity: 0.6; color: var(--text-muted); }
  body .draw-review-btn.enabled:hover { box-shadow: none; }
  body .target-option:hover:not(.selected) { border-color: rgba(255,255,255,0.05); transform: none; box-shadow: none; }
  body .target-char-card:hover:not(.selected) { border-color: rgba(255,255,255,0.04); transform: none; }
  body .target-create-link:hover { border-color: rgba(255,255,255,0.06); color: var(--text-muted); }
  body .mode-option:hover:not(.selected) { border-color: transparent; transform: none; box-shadow: none; }
  body .question-chip:hover { border-color: rgba(255,255,255,0.06); color: var(--text-muted); background: transparent; }
  body .confirm-begin-btn:hover { background: transparent; color: var(--accent-light); box-shadow: none; }
  body .wizard-nav-btn:hover { border-color: rgba(255,255,255,0.08); color: var(--text-muted); }
  body .wizard-nav-btn.primary:hover { background: var(--accent); }
  body .follow-up-btn:hover { border-color: rgba(255,255,255,0.06); color: var(--text-secondary); background: var(--bg-surface); }
  body .reading-action-btn:hover { border-color: rgba(255,255,255,0.08); color: var(--text-muted); }
  body .dm-dismiss:hover { border-color: rgba(255,255,255,0.1); color: var(--text-muted); }
  body .lib-card:hover { border-color: rgba(255,255,255,0.04); }
  body .lib-star:hover:not(.active) { color: var(--text-muted); }
  body .rd-close:hover { border-color: rgba(255,255,255,0.08); color: var(--text-muted); }
  body .char-reading-filter-bar button:hover { border-color: rgba(255,255,255,0.06); color: var(--text-muted); }
  body .settings-btn:hover { border-color: rgba(255,255,255,0.1); color: var(--text-muted); }
  body .settings-btn.primary:hover { background: var(--accent); }
  body .settings-link:hover { color: var(--text-muted); }

  /* Silver theme hover resets (theme rules have higher specificity) */
  [data-theme="silver"] .suit-nav a:hover:not(.active) { color: #99999E; }
  [data-theme="silver"] .deck-stack:hover .deck-card { box-shadow: var(--shadow-card); }
  [data-theme="silver"] .deck-stack:hover .deck-card::after { color: rgba(var(--accent-rgb),0.08); }
  /* 09-12 P3：觸屏 sticky-hover 不許把銀白的框「閃回白色」——一律壓回靜止檔 */
  [data-theme="silver"] .wizard-nav-btn:hover { border-color: rgba(0,0,0,0.28); color: #66666A; }
  [data-theme="silver"] .reading-begin-btn:hover { background: transparent; color: #66666A; }
  [data-theme="silver"] .settings-btn:hover { border-color: rgba(0,0,0,0.28); color: #5A5A5E; }
  [data-theme="silver"] .lib-card:hover { border-color: rgba(0,0,0,0.25); }
  [data-theme="silver"] .char-card:hover { border-color: rgba(0,0,0,0.25); box-shadow: var(--shadow-card); }
  [data-theme="silver"] .suit-card-wrapper:hover { border-color: rgba(0,0,0,0.28); box-shadow: var(--shadow-card); }
  [data-theme="silver"] .spread-option:hover:not(.selected):not(.disabled) { border-color: rgba(0,0,0,0.28); }
  [data-theme="silver"] .target-option:hover:not(.selected) { border-color: rgba(0,0,0,0.28); }
  [data-theme="silver"] .target-char-card:hover:not(.selected) { border-color: rgba(0,0,0,0.28); }
  [data-theme="silver"] .mode-option:hover:not(.selected) { border-color: rgba(0,0,0,0.28); }
  [data-theme="silver"] .question-chip:hover { border-color: rgba(0,0,0,0.20); background: transparent; }
  [data-theme="silver"] .follow-up-btn:hover { border-color: rgba(0,0,0,0.20); background: #FAFAFB; }
  [data-theme="silver"] .target-create-link:hover { border-color: rgba(0,0,0,0.28); color: #5A5A5E; }
  [data-theme="silver"] .dm-dismiss:hover { border-color: rgba(0,0,0,0.10); color: #5A5A5E; }
  /* 09-13 P4：詳情面板與關係彈窗鈕同步壓回（防 sticky-hover 閃回白框） */
  [data-theme="silver"] .dash-panel:hover { border-color: rgba(0,0,0,0.18); }
  [data-theme="silver"] .detail-panel:hover { border-color: rgba(0,0,0,0.18); }
  [data-theme="silver"] .rel-card:hover { border-color: rgba(0,0,0,0.18); }
  [data-theme="silver"] .rel-modal-btn:hover { border-color: rgba(0,0,0,0.28); }
}

/* ============================================
   Mobile Spread Selection — Redesign (mobile only)
   3-per-row grid (name + EN) → Bottom Sheet → confirm = next step
   Desktop flow untouched.
   ============================================ */
@media (max-width: 768px) {
  /* --- Step header --- */
  .spread-mobile-header { margin-bottom: 18px; }
  .spread-mobile-header .reading-step-title {
    font-size: 1.65rem;
    letter-spacing: 0.08em;
  }
  .spread-mobile-sub {
    font-style: normal;
    font-size: 0.65rem;
    letter-spacing: 0.24em;
    margin-top: 6px;
    opacity: 0.8;
  }

  /* --- Grid: 3 per row, name + EN only --- */
  .spread-grid-mobile {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: none;
    margin-bottom: 22px;
  }
  .spread-option-mobile {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 16px 6px;
    margin: 0;
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-card);
    font-family: var(--font-sans);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  }
  .spread-option-mobile:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.5);
  }
  .spread-option-mobile .spread-option-name {
    font-size: clamp(14px, 4.1vw, 16px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .spread-option-mobile .spread-option-en {
    font-size: clamp(9px, 2.6vw, 10.5px);
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-dim);
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .spread-option-mobile:active {
    transform: scale(0.96) !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .spread-mobile-nav { max-width: 100%; }

  /* --- Bottom Sheet --- */
  .spread-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .spread-sheet-backdrop.open { opacity: 1; visibility: visible; }

  .spread-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 501;
    max-width: 560px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 10px 24px max(28px, calc(env(safe-area-inset-bottom) + 20px));
    text-align: center;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.32s ease;
  }
  .spread-sheet.open { transform: translateY(0); visibility: visible; }

  .spread-sheet-handle {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    margin: 6px auto 16px;
  }
  .spread-sheet-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .spread-sheet-name {
    font-family: var(--font-sans);
    font-size: 1.45rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin: 4px 0 6px;
  }
  .spread-sheet-en {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin: 0 0 18px;
  }
  .spread-sheet-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 320px;
    margin: 0 auto 24px;
  }
  .spread-sheet-suit {
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--text-muted);
    opacity: 0.85;
    max-width: 320px;
    margin: 0 auto 24px;
  }
  .spread-sheet-confirm {
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    border-radius: 100px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white-warm);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .spread-sheet-confirm:active { transform: scale(0.97); }

  /* Body scroll lock while the sheet is open */
  body.sheet-open { overflow: hidden; }

  /* --- Silver (light) theme overrides（09-12 P3 邊框階梯）--- */
  [data-theme="silver"] .spread-option-mobile {
    border-color: rgba(0, 0, 0, 0.28);
  }
  /* 09-12 P1：選中態實色粗邊壓過上面的淺色 override（特異性 0,3,0 > 0,2,0） */
  [data-theme="silver"] .spread-option-mobile.selected {
    border-color: var(--sel-border);
  }
  [data-theme="silver"] .spread-option-mobile:active {
    background: rgba(0, 0, 0, 0.04);
    /* 基礎 :active 自帶 !important 灰框，這裡同 !important+更高特異性壓成黑：點下即見加強 */
    border-color: #1A1A1A !important;
  }
  [data-theme="silver"] .spread-sheet-backdrop {
    background: rgba(0, 0, 0, 0.28); /* 白紗在白頁上=沒有分層，改輕黑紗 */
  }
  [data-theme="silver"] .spread-sheet {
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.18);
  }
  [data-theme="silver"] .spread-sheet-handle { background: rgba(0, 0, 0, 0.14); }
  [data-theme="silver"] .spread-sheet-close {
    border-color: rgba(0, 0, 0, 0.1);
    color: #5A5A5E;
  }
}

/* ============================================================
   Mobile Typography & Readability Pass
   （仅 ≤768px；PC 端保持原样，字体/配色不变）
   ============================================================ */
@media (max-width: 768px) {

  /* ── 字体：手机端全部改用思源黑体（Noto Sans SC），PC 仍用文楷（见 common.css）── */
  :root {
    --font-display: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
    --font-body:    'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
    --font-sans:    'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Helvetica Neue', Arial, sans-serif;
  }

  /* ── 深浅：默认主题提亮弱化文字（不改色相，只提亮）── */
  :root {
    --text-muted: #9a948a;
    --gold-dim:   #8a8068;
  }
  /* 主题色保持不变：silver 白底需深色弱化文字，blue-hour 保持冷灰 */
  [data-theme="blue-hour"] {
    --text-muted: #8a867e;
    --gold-dim:   #8a867e;
  }
  [data-theme="silver"] {
    --text-muted: #5f5f66;
    --gold-dim:   #6e6c66;
  }

  /* ── 标题 ── */
  .site-identity .page-title-zh { font-size: 2.25rem; }

  /* ── 正文 / 描述 ── */
  .interp-block-content { font-size: 0.95rem; }
  .detail-panel-content { font-size: 0.95rem; }
  .dash-panel-body { font-size: 1rem; }
  .memory-field-value { font-size: 0.9rem; }
  .char-card-tagline { font-size: 0.85rem; }
  .dash-tagline { font-size: 1rem; }
  .user-relation-desc { font-size: 0.9rem; }

  /* ── 小标签（overline）下限 11px ── */
  .brand-label, .preview-label, .memory-field-label,
  .stats-footer-label, .interp-block-title, .confirm-label,
  .spread-option-badge, .card-orientation, .follow-up-sub,
  .rel-status {
    font-size: 0.6875rem;
  }

  /* ── 次级 meta 下限 12px ── */
  .chars-count, .char-card-date, .char-card-world, .char-counter,
  .timeline-date, .rel-type,
  .stats-footer-value, .dash-stat-label, .dash-stat-value,
  .spread-option-suit, .spread-option-cards, .shuffle-skip-btn,
  .card-position-label, .target-option-desc, .target-char-world,
  .mode-option-desc, .question-chip {
    font-size: 0.75rem;
  }

  /* ── 次级说明 13px ── */
  .timeline-title, .timeline-desc, .spread-option-desc,
  .reading-step-sub, .question-hint {
    font-size: 0.8125rem;
  }

  /* ── 名字 / 选项名 ── */
  .rel-name { font-size: 0.85rem; }
  .target-option-name, .confirm-value, .follow-up-title { font-size: 0.95rem; }
}

/* ============================================================
   PC 端：思源黑体模式（2026-08-26）——字重加深一档，手机端不受影响
   （正文 300→400：思源黑体 300 在 PC 大屏上偏细、看着费劲）
   ============================================================ */
@media (min-width: 769px) {
  body { font-weight: 400; }
  p { font-weight: 400; }
  .page-subtitle-en, .page-desc, .page-desc-en { font-weight: 400; }
}