/* ==================================================================
   AI 探险号 2.0 · UI 设计系统「星空实验室 Cosmos-Lab」
   融合方案A(多邻国活力) + 方案B(深空探险)
   双表面模型：暗色星空=旅行框架 / 浅色工作台=内容阅读面
   本文件 = 全站可复用 UI 模板。所有模块类名以功能命名，直接套用。
   ================================================================== */

/* ------------------ 设计令牌 Design Tokens ------------------ */
:root {
  --font: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 星空表面（暗） */
  --space-900:#0a0620; --space-800:#120a30; --space-700:#1b1145; --space-600:#2a1a5e;
  /* 工作台表面（浅） */
  --paper:#fffdf9; --paper-2:#f2f5fb; --line:#e6e9f2;
  --ink:#1e1b3a; --ink-2:#4b4869; --ink-dim:#8b90a6;

  /* 品牌主色（贯通明暗） */
  --violet:#8b5cf6; --violet-l:#a78bfa; --violet-d:#6d28d9; --violet-dd:#5b21b6;
  --cyan:#22d3ee; --sky:#38bdf8;

  /* 反馈色（儿童安全：对=绿、错=暖琥珀不用红、奖励=金） */
  --correct:#58cc02; --correct-d:#46a302;
  --gentle:#fbbf24;  --gentle-d:#d99a12;   /* 答错用暖色鼓励，绝不刺眼红 */
  --gold:#ffd66d; --gold-d:#eab308;

  /* 六站主题色（序/看/学/说/做/信） */
  --st0:#fbbf24; --st1:#38bdf8; --st2:#8b5cf6; --st3:#2dd4bf; --st4:#fb7185; --st5:#fb923c;

  /* 圆角 */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;

  /* 阴影 */
  --sh-soft: 0 12px 28px rgba(60,50,110,.16);
  --sh-glow: 0 0 26px rgba(139,92,246,.55);
  --sh-glow-cyan: 0 0 22px rgba(34,211,238,.6);

  /* 动效 */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur:.2s;

  /* 间距刻度 */
  --sp-1:6px; --sp-2:12px; --sp-3:18px; --sp-4:24px; --sp-5:34px;
}

* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); -webkit-font-smoothing:antialiased; color:var(--ink); }

/* ============ ① 星空背景框架（旅行/地图/庆祝用） ============ */
.cosmos { position:relative; background:radial-gradient(130% 120% at 50% -10%, var(--space-700) 0%, var(--space-900) 62%); color:#e8e4ff; overflow:hidden; }
.cosmos::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, #fff8 40%, transparent),
    radial-gradient(1.5px 1.5px at 70% 55%, #fff6 40%, transparent),
    radial-gradient(2px 2px at 40% 80%, #c4b5fd88 40%, transparent),
    radial-gradient(1px 1px at 88% 30%, #fff7 40%, transparent),
    radial-gradient(1.5px 1.5px at 55% 12%, #93c5fd88 40%, transparent),
    radial-gradient(1px 1px at 30% 60%, #fff5 40%, transparent);
  animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ============ ② 顶栏（等级 / XP / 返回） ============ */
.topbar { display:flex; align-items:center; gap:var(--sp-3); padding:12px 18px; }
.tb-back { width:40px; height:40px; border-radius:var(--r-md); border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:20px; display:grid; place-items:center;
  box-shadow:0 3px 0 rgba(0,0,0,.25); transition:transform .12s; }
.tb-back:active { transform:translateY(3px); box-shadow:none; }
.tb-level { display:flex; align-items:center; gap:8px; background:rgba(139,92,246,.22);
  border:1px solid rgba(167,139,250,.4); border-radius:var(--r-pill); padding:5px 14px 5px 6px; }
.tb-level .ring { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:15px;
  background:radial-gradient(circle at 35% 30%, var(--violet-l), var(--violet-d)); box-shadow:var(--sh-glow); }
.tb-level b { font-size:13px; color:#e9d5ff; }
.tb-xp { flex:1; height:12px; border-radius:var(--r-pill); background:rgba(255,255,255,.12); overflow:hidden; }
.tb-xp i { display:block; height:100%; width:62%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--violet),var(--cyan)); box-shadow:var(--sh-glow-cyan);
  background-size:200% 100%; animation:flow 2.4s linear infinite; }
@keyframes flow { to{background-position:-200% 0} }
.tb-gem { font-size:14px; font-weight:800; color:var(--gold); }

/* ============ ③ 探险地图 + 站点节点 ============ */
.map { position:relative; padding:30px 20px 50px; display:flex; flex-direction:column; align-items:center; gap:0; }
.map-path { position:relative; display:flex; flex-direction:column; align-items:center; }
.station { position:relative; display:flex; flex-direction:column; align-items:center; margin:14px 0; z-index:2; }
.st-orb { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; font-size:36px; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, var(--_h,#8b5cf6), color-mix(in srgb, var(--_h,#8b5cf6) 55%, #000));
  box-shadow:0 0 0 5px rgba(255,255,255,.1), 0 6px 0 rgba(0,0,0,.3), 0 0 26px var(--_h,#8b5cf6);
  transition:transform var(--dur) var(--ease-bounce); }
.st-orb:hover { transform:scale(1.08) translateY(-3px); }
.station.current .st-orb { animation:orbPulse 1.6s ease-in-out infinite; }
@keyframes orbPulse { 0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 0 rgba(0,0,0,.3),0 0 22px var(--_h)} 50%{box-shadow:0 0 0 9px rgba(255,255,255,.06),0 6px 0 rgba(0,0,0,.3),0 0 40px var(--_h)} }
.station.locked .st-orb { filter:grayscale(1) brightness(.5); cursor:not-allowed; box-shadow:0 0 0 5px rgba(255,255,255,.05),0 6px 0 rgba(0,0,0,.3); }
.st-name { margin-top:8px; font-size:13px; font-weight:700; color:#d9d2ff; }
.station.locked .st-name { color:#6b6690; }
.st-done { position:absolute; top:-4px; right:8px; width:24px; height:24px; border-radius:50%; background:var(--correct);
  display:grid; place-items:center; font-size:13px; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.map-connector { width:4px; height:26px; background:repeating-linear-gradient(#ffffff40 0 6px, transparent 6px 12px); }

/* ============ ④ 站点卡（A风·可放地图或列表） ============ */
.card { width:280px; background:var(--paper); border-radius:var(--r-xl); padding:22px 20px 18px; cursor:pointer;
  border:2px solid var(--line); box-shadow:0 6px 0 var(--line), var(--sh-soft);
  transition:transform var(--dur) var(--ease-bounce), box-shadow var(--dur); position:relative; }
.card:hover { transform:translateY(-6px); box-shadow:0 12px 0 var(--line), 0 22px 36px rgba(60,50,110,.22); }
.card:active { transform:translateY(2px); box-shadow:0 3px 0 var(--line), var(--sh-soft); }
.card-icon { width:70px; height:70px; border-radius:var(--r-lg); display:grid; place-items:center; font-size:38px;
  background:linear-gradient(145deg, var(--_h,#8b5cf6), color-mix(in srgb,var(--_h,#8b5cf6) 60%, #000));
  box-shadow:0 5px 0 color-mix(in srgb,var(--_h,#8b5cf6) 60%,#000), 0 8px 18px color-mix(in srgb,var(--_h,#8b5cf6) 45%, transparent);
  animation:bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} }
.card-tag { display:inline-block; margin:14px 0 6px; font-size:11px; font-weight:800; letter-spacing:1px;
  color:var(--_h,#8b5cf6); background:color-mix(in srgb,var(--_h,#8b5cf6) 14%, #fff); padding:4px 10px; border-radius:var(--r-pill); }
.card-title { font-size:20px; font-weight:900; letter-spacing:.3px; }
.card-hook { font-size:13px; color:var(--ink-dim); margin-top:6px; line-height:1.55; }
.seg-bar { display:flex; gap:5px; margin:16px 0 4px; }
.seg { height:8px; flex:1; border-radius:6px; background:var(--line); }
.seg.on { background:linear-gradient(90deg,var(--_h,#8b5cf6), color-mix(in srgb,var(--_h,#8b5cf6) 60%, #fff)); }
.card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.card-badge { font-size:12px; font-weight:700; color:var(--_h,#8b5cf6); }

/* ============ ⑤ 工作台内容面（浅色阅读区） ============ */
.workbench { background:linear-gradient(180deg, var(--paper), var(--paper-2)); min-height:100%; padding:24px 18px 60px; }
.wb-inner { max-width:720px; margin:0 auto; }

/* 小节容器 + 编号标题 + 继续按钮 */
.section { background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 20px; margin-bottom:20px;
  box-shadow:0 6px 18px rgba(60,50,110,.06); animation:slideUp .45s var(--ease) both; }
@keyframes slideUp { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
.section-heading { display:flex; align-items:center; gap:12px; font-size:19px; font-weight:900; margin-bottom:14px; }
.section-num { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:15px; color:#fff;
  background:linear-gradient(145deg,var(--violet),var(--violet-d)); box-shadow:0 3px 0 var(--violet-dd); flex:none; }
.next-wrap { text-align:center; margin-top:22px; }
.next-btn { font-family:var(--font); font-size:15px; font-weight:900; color:#fff; letter-spacing:.5px;
  background:var(--correct); border:none; border-radius:var(--r-md); padding:13px 40px; cursor:pointer;
  box-shadow:0 5px 0 var(--correct-d); transition:transform .1s, box-shadow .1s; }
.next-btn:active { transform:translateY(4px); box-shadow:0 1px 0 var(--correct-d); }

/* ============ ⑥ 段落 + 行内术语 + 术语弹窗 ============ */
.p { font-size:15.5px; line-height:1.85; color:var(--ink-2); margin:10px 0; }
.term { color:var(--violet-d); font-weight:800; border-bottom:2.5px dotted var(--gold-d); cursor:pointer; padding:0 1px; }
.term:hover { background:color-mix(in srgb,var(--gold) 40%, transparent); border-radius:4px; }
.term.hint { animation:termWink 1.6s ease-in-out infinite; }
@keyframes termWink { 0%,100%{background:transparent} 50%{background:color-mix(in srgb,var(--gold) 45%, transparent)} }
.term-pop { position:fixed; inset:0; display:none; place-items:center; z-index:80;
  background:rgba(10,6,32,.55); backdrop-filter:blur(3px); }
.term-pop.open { display:grid; }
.term-card { background:#fff; border-radius:var(--r-lg); padding:22px 24px; max-width:340px; margin:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.4); animation:popIn .3s var(--ease-bounce); border-top:6px solid var(--gold); }
@keyframes popIn { from{opacity:0; transform:scale(.8) translateY(10px)} to{opacity:1; transform:scale(1)} }
.term-card h4 { font-size:19px; color:var(--violet-d); margin:0 0 8px; }
.term-card p { font-size:14.5px; line-height:1.7; color:var(--ink-2); margin:0; }

/* ============ ⑦ 交互组件统一外壳（所有互动模块共用） ============ */
.ixbox { background:linear-gradient(160deg,#faf8ff,#eef1fb); border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:20px; margin:14px 0; position:relative; }
.ixbox-title { font-size:14px; font-weight:800; color:var(--violet-d); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.ixbox-hint { text-align:center; font-size:12.5px; color:var(--ink-dim); margin-top:10px; animation:fingerBob 1.4s ease-in-out infinite; }
@keyframes fingerBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* 交互变体1：可展开卡组 card-row */
.crow { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.crow-item { background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md); padding:16px 14px; cursor:pointer;
  transition:transform var(--dur) var(--ease-bounce), box-shadow var(--dur); }
.crow-item:hover { transform:translateY(-4px); box-shadow:var(--sh-soft); }
.crow-emoji { font-size:30px; } .crow-title { font-weight:800; margin:6px 0 4px; font-size:15px; }
.crow-desc { font-size:12.5px; color:var(--ink-dim); line-height:1.5; }
.crow-expand { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.crow-item.open .crow-expand { max-height:200px; }
.crow-expand p { font-size:12.5px; color:var(--ink-2); border-left:3px solid var(--violet-l); padding-left:8px; margin-top:10px; line-height:1.6; }

/* 交互变体2：步骤流 process-flow */
.flow { display:flex; flex-direction:column; gap:0; }
.flow-step { display:flex; gap:12px; cursor:pointer; padding:8px; border-radius:var(--r-md); transition:background var(--dur); }
.flow-step:hover { background:#fff; }
.flow-ico { width:44px; height:44px; border-radius:12px; background:linear-gradient(145deg,var(--violet-l),var(--violet-d)); color:#fff;
  display:grid; place-items:center; font-size:20px; flex:none; box-shadow:0 3px 0 var(--violet-dd); position:relative; }
.flow-ico b { position:absolute; top:-6px; left:-6px; width:20px; height:20px; border-radius:50%; background:var(--gold); color:#000; font-size:11px; display:grid; place-items:center; }
.flow-body b { display:block; font-size:14.5px; font-weight:800; }
.flow-body span { font-size:12.5px; color:var(--ink-dim); }
.flow-detail { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); font-size:12.5px; color:var(--ink-2); }
.flow-step.open .flow-detail { max-height:120px; margin-top:6px; }
.flow-conn { width:3px; height:14px; margin-left:29px; background:repeating-linear-gradient(var(--violet-l) 0 5px, transparent 5px 10px); }

/* 交互变体3：滑块探索器 slider-explorer（新增·2.0核心互动） */
.slider-ex { text-align:center; }
.slider-stage { font-size:56px; margin:6px 0 14px; transition:transform .1s; }
.slider-ex input[type=range] { width:80%; accent-color:var(--violet); height:6px; }
.slider-val { font-size:13px; color:var(--violet-d); font-weight:800; margin-top:8px; }

/* 交互变体4：黑箱 blackbox */
.blackbox { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.bb-core { width:90px; height:80px; border-radius:var(--r-md); background:linear-gradient(160deg,#241a44,#0f0a26); color:#fff;
  display:grid; place-items:center; font-size:30px; cursor:pointer; box-shadow:var(--sh-glow); transition:transform .2s; }
.bb-core:hover { transform:scale(1.05); }
.bb-io { background:#fff; border:1.5px dashed var(--violet-l); border-radius:var(--r-md); padding:10px 14px; font-size:13px; color:var(--ink-2); }
.bb-arrow { font-size:24px; color:var(--violet); }

/* ============ ⑧ 检测游戏框 gameframe ============ */
.gameframe { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-soft); margin:18px 0; border:2px solid var(--violet-l); }
.gf-head { background:linear-gradient(90deg,var(--violet-d),var(--violet)); color:#fff; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.gf-head .gf-ico { font-size:22px; } .gf-head b { font-size:15px; } .gf-head span { margin-left:auto; font-size:12px; opacity:.85; }
.gf-body { background:#faf8ff; padding:24px 18px; min-height:120px; display:grid; place-items:center; text-align:center; color:var(--ink-dim); font-size:13px; }

/* ============ ⑨ 反馈系统（对/错/徽章/XP） ============ */
.btn { font-family:var(--font); font-weight:900; border:none; cursor:pointer; border-radius:var(--r-md); }
.btn-primary { background:var(--correct); color:#fff; padding:12px 28px; font-size:15px; box-shadow:0 5px 0 var(--correct-d); }
.btn-primary:active { transform:translateY(4px); box-shadow:0 1px 0 var(--correct-d); }
.btn-ghost { background:#fff; color:var(--violet-d); border:2px solid var(--violet-l); padding:10px 24px; font-size:14px; }
.btn-glow { background:linear-gradient(90deg,var(--violet-l),var(--cyan)); color:var(--space-900); padding:12px 26px; font-size:14px; box-shadow:var(--sh-glow-cyan); }

.fb { border-radius:var(--r-md); padding:14px 18px; font-size:14.5px; font-weight:800; display:flex; align-items:center; gap:10px; margin:8px 0; }
.fb-correct { background:color-mix(in srgb,var(--correct) 16%, #fff); color:var(--correct-d); animation:popIn .3s var(--ease-bounce); }
.fb-gentle { background:color-mix(in srgb,var(--gentle) 20%, #fff); color:var(--gentle-d); animation:shakeSoft .4s ease; }
@keyframes shakeSoft { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* 徽章掉落弹窗 */
.badge-drop { background:linear-gradient(160deg,#fff,#fff8e6); border:2px solid var(--gold); border-radius:var(--r-lg);
  padding:22px; text-align:center; max-width:240px; box-shadow:0 0 40px rgba(255,214,109,.6); animation:badgeIn .5s var(--ease-bounce); }
@keyframes badgeIn { from{opacity:0; transform:scale(.6) rotate(-8deg)} to{opacity:1; transform:scale(1)} }
.badge-drop .bd-emoji { font-size:56px; animation:bob 2s ease-in-out infinite; }
.badge-drop .bd-t { font-weight:900; font-size:16px; margin-top:6px; }
.badge-drop .bd-s { font-size:12.5px; color:var(--ink-dim); margin-top:2px; }

/* ============ ⑩ 徽章收集册 ============ */
.badgebook { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:12px; }
.bb-slot { aspect-ratio:1; border-radius:var(--r-md); display:grid; place-items:center; font-size:30px; background:#fff; border:1.5px solid var(--line); }
.bb-slot.locked { filter:grayscale(1); opacity:.35; }
.bb-slot.got { box-shadow:0 0 16px rgba(255,214,109,.6); border-color:var(--gold); }

/* ============ 通用：撒花强反馈 ============ */
.spark { position:fixed; pointer-events:none; font-size:18px; z-index:99; animation:sparkUp .9s ease-out forwards; }
@keyframes sparkUp { 0%{opacity:1; transform:translate(0,0) scale(.6)} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.3)} }

/* ==== 单页 demo 库：交互防文字框选 ==== */
.noselect, .noselect * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.demo-stage { touch-action:manipulation; }