/* HSK Mastery — hero funnel + full-page graph explorer + node-card styles.
   Owned by the landing/graph overhaul; loaded by index.php after styles.css. */

/* ── Hero text block (top of page) ────────────────────────────────────── */
.stat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 30px; }
.stat-chips .chip {
  display: inline-flex; align-items: center;
  font-family: var(--serif-body); font-size: 13.5px; font-weight: 600;
  color: var(--ink-faded); background: var(--paper-sunken);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 15px;
}

/* ── Graph section: full-bleed, dark, taller viewport than the old overlay ── */
.graph-section {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 68% 40%, #1B1712 0%, #14110D 60%, #100D0A 100%);
  color: #F4ECD8;
  padding: 52px 0 36px;
}
.graph-head { max-width: 640px; margin-bottom: 26px; }
.graph-section .eyebrow { color: #E06A5A; }
.graph-section h2 {
  font-family: var(--serif-display); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; letter-spacing: -0.01em;
  margin: 10px 0 10px; color: #F8F2E2;
}
.graph-head p { color: rgba(244,236,216,0.72); font-size: 16.5px; line-height: 1.6; margin: 0 0 20px; max-width: 46em; }
.graph-explore-btn {
  color: #F4ECD8; border-color: rgba(244,236,216,0.32);
  white-space: normal; max-width: 100%;
}
.graph-explore-btn:hover { border-color: #F4ECD8; }

.hg-stage { position: relative; height: 82vh; min-height: 560px; margin: 0 0 20px; }
.hg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }

.hg-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; font-size: 13px; color: rgba(244,236,216,0.7); padding: 0 max(20px, 5vw); margin: 0 0 8px; }
.hg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hg-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.hg-hint { text-align: center; font-size: 12.5px; color: rgba(244,236,216,0.42); padding: 0 20px; margin: 0; }

@media (max-width: 640px) {
  .hg-stage { height: 68vh; min-height: 420px; }
}

/* ── Node card — floating panel (desktop) / bottom sheet (mobile) ───────── */
.hg-card {
  --lv: #A8322A;
  position: fixed; z-index: 210; right: 24px; top: 50%; transform: translateY(-50%);
  width: min(330px, calc(100vw - 48px)); max-height: 78vh; overflow-y: auto;
  background: rgba(20,17,13,0.97); backdrop-filter: blur(14px);
  border: 1px solid rgba(244,236,216,0.16); border-radius: 16px;
  padding: 20px 20px 22px; color: #F4ECD8;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.hg-card-close {
  position: absolute; top: 10px; right: 10px; background: none; border: none;
  color: rgba(244,236,216,0.6); font-size: 16px; line-height: 1; cursor: pointer; padding: 8px;
}
.hg-card-close:hover { color: #F4ECD8; }
.hg-card-level {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}
.hg-card-level::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lv); display: inline-block; }
.hg-card-zh { font-family: var(--han); font-size: 27px; line-height: 1.3; margin: 10px 0 2px; color: #F8F2E2; }
.hg-card-py { font-family: var(--serif-display); font-style: italic; font-size: 14px; color: rgba(244,236,216,0.62); margin: 0 0 4px; }
.hg-card-en { font-size: 14.5px; color: rgba(244,236,216,0.78); margin: 0 0 12px; }
.hg-card-sub { font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(244,236,216,0.45); margin: 16px 0 7px; }
.hg-card-prereqs ul { list-style: none; margin: 0; padding: 0; }
.hg-card-prereqs li { font-size: 13.5px; color: rgba(244,236,216,0.82); padding: 5px 0 5px 14px; position: relative; line-height: 1.4; }
.hg-card-prereqs li::before { content: '—'; position: absolute; left: 0; color: rgba(244,236,216,0.35); }
.hg-card-more { font-size: 12px; color: rgba(244,236,216,0.42); margin: 4px 0 0; }
.hg-card-empty { font-size: 13px; color: rgba(244,236,216,0.45); font-style: italic; margin: 0; }
.hg-card-example { background: rgba(244,236,216,0.05); border-left: 2px solid var(--lv); border-radius: 0 10px 10px 0; padding: 11px 14px; }
.hg-ex-zh { font-family: var(--han); font-size: 16px; margin: 0 0 5px; color: #F4ECD8; line-height: 1.5; }
.hg-ex-py { font-family: var(--serif-display); font-style: italic; font-size: 12.5px; color: rgba(244,236,216,0.55); margin: 0 0 5px; }
.hg-ex-en { font-size: 12.5px; color: rgba(244,236,216,0.65); margin: 0; line-height: 1.5; }
.hg-card-cta { width: 100%; justify-content: center; margin-top: 16px; }
.hg-card-loading { font-size: 13px; color: rgba(244,236,216,0.5); padding: 22px 0; text-align: center; }

@media (max-width: 640px) {
  .hg-card {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: 100%; max-width: none;
    max-height: 40vh;
    border-radius: 18px 18px 0 0;
    padding: 16px 18px max(16px, env(safe-area-inset-bottom));
  }
}

/* ── Full-page explorer ("Explore all 722 topics") ──────────────────────── */
.hg-explorer {
  position: fixed; inset: 0; z-index: 200;
  background: #0F0C09; color: #F4ECD8;
  display: flex; flex-direction: column;
}
.hg-explorer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: max(12px, env(safe-area-inset-top)) 16px 10px 16px;
  border-bottom: 1px solid rgba(244,236,216,0.1);
}
.hg-explorer-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.hg-legend-chip {
  --lv: #888;
  font: inherit; font-size: 12px; padding: 6px 12px 6px 9px; border-radius: 999px;
  border: 1px solid rgba(244,236,216,0.22); background: rgba(244,236,216,0.05);
  color: rgba(244,236,216,0.75); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.hg-legend-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--lv); }
.hg-legend-chip.on { background: rgba(244,236,216,0.16); color: #F4ECD8; border-color: rgba(244,236,216,0.5); }
.hg-explorer-close {
  background: none; border: 1px solid rgba(244,236,216,0.22); border-radius: 8px;
  color: #F4ECD8; font-size: 16px; line-height: 1; cursor: pointer; padding: 8px 12px; flex: none;
}
.hg-explorer-close:hover { border-color: #F4ECD8; }
.hg-explorer-stage { flex: 1; position: relative; min-height: 0; }
.hg-explorer-stage .hg-canvas { cursor: grab; }
.hg-explorer-hint {
  text-align: center; font-size: 12px; color: rgba(244,236,216,0.4);
  padding: 6px 14px max(10px, env(safe-area-inset-bottom)); margin: 0;
}

@media (max-width: 480px) {
  .hg-explorer-bar { padding-left: 12px; padding-right: 12px; }
  .hg-legend-chip { font-size: 11px; padding: 5px 10px 5px 8px; }
}