/* ============================================================================
   亏成首富从游戏开始 · 学习图谱 —— 视觉层
   定调：Playful / 玩趣海报风（取自参考海报）
   目的：给中文读者用的高密度名词与剧情图谱，但保留海报的亲和与温度
   主色 60% 奶油 #FFF7EC ｜ 辅助 30% 白卡片与浅杏 ｜ 强调 10% 珊瑚橙 #FF6B4A
   记忆点：粗深棕描边 + 圆角胶囊 + 右下硬阴影 + 奶油底细点纹理
   字体：中文用苹方/雅黑重字重收紧字距，统计数字用 Georgia 衬线等宽数字
   说明：本文件在参考站 style.css 之后加载，负责把深色主题整体翻为浅色海报主题
   ============================================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 表面 */
  --bg:#FFF7EC;            /* 奶油底 */
  --bg2:#FFF1E2;           /* 浅杏 */
  --card:#FFFFFF;          /* 白卡片 */
  --card2:#FFF3E6;         /* 浅杏卡片 */
  /* 描边与文字 */
  --line:#3D2B1F;          /* 海报深棕粗描边 */
  --line-soft:#E7D4BC;     /* 柔和分隔线 */
  --txt:#3D2B1F;           /* 深棕正文 */
  --txt2:#5E4B3C;          /* 暖灰棕次要（白底约 7.5:1） */
  --txt3:#745E4C;          /* 辅助信息（白底约 5.6:1，满足小字对比） */
  /* 强调（文字用深版保证对比度，色块用海报亮版） */
  --accent:#D6401F;        /* 深珊瑚橙：标题/链接文字 */
  --accent2:#0B7A65;       /* 深青：次级文字 */
  --red:#D6401F;
  --teal:#0B7A65;
  --coral:#FF6B4A;         /* 海报原色：按钮、大色块、图表 */
  --teal-bright:#0F9C82;
  --yellow:#FFD166;
  --peach:#FFE5D6;
  --glow:rgba(255,107,74,.22);
  --ink:#3D2B1F;
  /* 形状与阴影 */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --hard-1:2px 2px 0 var(--ink);
  --hard-2:4px 4px 0 var(--ink);
  --hard-3:7px 7px 0 var(--ink);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:170ms; --dur-base:330ms;
  --font-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-num:Georgia,"Times New Roman",serif;
}

/* ---------- 2. 基础覆盖：把参考站的深色硬编码全部翻过来 ---------- */
*{box-sizing:border-box}
body{
  color:var(--txt);
  font-family:var(--font-body);
  background-color:var(--bg);
  /* 氛围：暖黄/珊瑚/浅青径向晕 + 海报式细点纹理 */
  background-image:
    radial-gradient(circle at 10% 5%, rgba(255,209,102,.30), transparent 24%),
    radial-gradient(circle at 95% 1%, rgba(255,107,74,.17), transparent 23%),
    radial-gradient(circle at 1% 62%, rgba(126,217,195,.22), transparent 20%),
    radial-gradient(rgba(255,107,74,.10) 1px, transparent 1.3px);
  background-size:auto,auto,auto,20px 20px;
  background-attachment:fixed;
}
#topbar{background:rgba(255,255,255,.72);border-bottom:2px solid var(--line);backdrop-filter:blur(6px)}
.site-note{background:var(--bg2);color:var(--txt2);border-bottom:1px solid var(--line-soft)}
#mainNav{background:rgba(255,241,226,.94);border-bottom:2px solid var(--line)}
footer p{background:var(--card);color:var(--txt2);border:1.5px solid var(--line-soft);border-radius:999px}
.gs-item{border-bottom:1px solid var(--line-soft)}
.gs-cat{color:var(--txt2);background:var(--bg2);border-bottom:1px solid var(--line-soft)}
.gs-more,.gs-empty,.gs-hint{color:var(--txt2)}
.ent{border-bottom:1px dotted var(--line-soft)}
.ent:hover{color:var(--accent)}
.part-card .pno{color:rgba(61,43,31,.07)}
.modal{background:rgba(61,43,31,.55)}
.modal-body,.gs-results,#entPop{border:2px solid var(--line);box-shadow:var(--hard-2);background:var(--card)}
#loading{background:rgba(255,247,236,.84)}
.spinner{border:4px solid rgba(61,43,31,.14);border-top-color:var(--coral)}
.loading-txt{color:var(--txt)}
.tag{background:var(--card2);border:1.5px solid var(--line-soft);color:var(--txt2)}
.tag.gold{color:var(--accent);border-color:var(--accent)}
.tag.purple{color:var(--accent2);border-color:var(--accent2)}
.tag.teal{color:var(--accent2);border-color:var(--accent2)}
.tag.red{color:var(--accent);border-color:var(--accent)}
.hint{color:var(--txt3)}

/* ---------- 3. 顶部品牌与搜索 ---------- */
.brand-icon{
  width:42px;height:42px;flex:0 0 auto;font-size:22px!important;line-height:1;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--coral);border:2px solid var(--line);border-radius:14px;
  box-shadow:var(--hard-1);filter:none;
}
.brand-icon::before{display:none}
.brand h1{color:var(--ink);font-family:var(--font-display);font-weight:900;letter-spacing:-.035em}
.brand-sub{color:var(--accent);font-weight:800}
.top-stat{display:flex;gap:10px;font-size:12px;color:var(--txt2)}
.ts-item{background:var(--yellow);color:var(--ink);border:1.5px solid var(--line);
  border-radius:999px;padding:6px 12px;font-weight:700;white-space:nowrap;box-shadow:var(--hard-1)}
.global-search input{background:var(--card);color:var(--txt);border:2px solid var(--line);
  border-radius:999px;padding:10px 16px;font-weight:600}
.global-search input::placeholder{color:var(--txt3)}
.global-search input:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--glow)}
.gs-results{border-radius:var(--r-md)}
.gs-item:hover{background:var(--card2)}
.gs-name{color:var(--txt)}
.gs-meta{color:var(--txt3)}

/* ---------- 4. 导航胶囊 ---------- */
#mainNav button{color:var(--txt2);border:2px solid transparent;border-radius:999px;
  font-weight:700;transition:transform var(--dur-fast) var(--ease)}
#mainNav button:hover{color:var(--ink);background:var(--card);border-color:var(--line-soft);transform:translateY(-2px)}
#mainNav button.active{color:#fff;background:var(--coral);border-color:var(--line);box-shadow:var(--hard-1)}

/* ---------- 5. 标题、区块与统计卡 ---------- */
h2.view-title{font-family:var(--font-display);font-weight:900;letter-spacing:-.035em;color:var(--ink)}
h2.view-title::before{content:"";display:inline-block;width:15px;height:15px;border-radius:50%;
  background:var(--coral);border:2px solid var(--line);margin-right:12px;vertical-align:middle}
p.view-desc{color:var(--txt2)!important;font-weight:600}
.sec{margin:28px 0}
.sec-h{font-size:18px;color:var(--accent);font-weight:800;margin:0 0 14px;letter-spacing:.2px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-count{font-size:12px;color:var(--txt3);font-weight:600}
.sec-sub{font-size:13px;color:var(--accent2);font-weight:700;margin:14px 0 8px}
.sum-block{background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--hard-2);padding:20px;color:var(--txt2);font-size:14px;line-height:1.9}
.stat{background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);box-shadow:var(--hard-2)}
.stat .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:38px;
  font-weight:700;color:var(--accent);white-space:nowrap}
.stat .lbl{color:var(--txt2);font-weight:700}
.stat:hover,.part-card:hover{border-color:var(--coral);box-shadow:var(--hard-3)}
.part-card{background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);box-shadow:var(--hard-2)}
.part-card h3{color:var(--ink);font-weight:800}
.part-card .meta{color:var(--txt3)}
.part-card .sum{color:var(--txt2)}
.chart{width:100%;background:var(--card);border:2px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--hard-2)}
.chart-mid{height:300px}.chart-big{height:660px}.chart-tree{height:900px}
.more-btn{margin-top:12px;background:var(--yellow);color:var(--ink);border:2px solid var(--line);
  border-radius:999px;padding:9px 18px;font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--hard-1)}
.more-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--hard-2)}

/* ---------- 6. 工具栏、胶囊与分页 ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--hard-1);padding:12px 16px}
.toolbar label{font-size:13px;color:var(--txt2);font-weight:700}
.toolbar input[type=text],.toolbar select{background:var(--card2);color:var(--txt);
  border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;
  outline:none;min-width:200px;font-weight:600}
.toolbar input[type=text]:focus,.toolbar select:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--glow)}
.toolbar .hint{margin:0}
.pill{background:var(--card2);border:2px solid var(--line);color:var(--txt2);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer}
.pill.on{color:#fff;background:var(--coral);border-color:var(--line);box-shadow:var(--hard-1)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0;color:var(--txt2);font-size:13px}
.pager button{background:var(--card);border:2px solid var(--line);color:var(--accent);
  border-radius:999px;padding:8px 16px;cursor:pointer;font-size:13px;font-weight:700}
.pager button:disabled{opacity:.4;cursor:default}

/* ---------- 7. 名词卡片 ---------- */
.ent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
@media(max-width:820px){.ent-grid{grid-template-columns:1fr}}
.ent-card{background:var(--card);border:1.5px solid var(--line-soft);border-radius:var(--r-md);
  padding:16px;display:flex;flex-direction:column;gap:10px;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast)}
.ent-card:hover{border-color:var(--line);box-shadow:var(--hard-2);transform:translate(-2px,-2px)}
.ec-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ec-name{font-size:16px;font-weight:900;cursor:pointer}
.ec-name:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px}
.ec-cat{font-size:11px;border:1.5px solid;border-radius:999px;padding:2px 9px;font-weight:700}
.ec-meta{font-size:11px;color:var(--txt3)}
.ec-auto{font-size:10px;color:var(--accent2);border:1.5px solid var(--accent2);
  border-radius:999px;padding:1px 8px;font-weight:700}
.ec-more{margin-left:auto;background:var(--yellow);border:1.5px solid var(--line);color:var(--ink);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.ec-more:hover{background:var(--coral);color:#fff}
.ec-desc{font-size:13px;color:var(--txt2);line-height:1.8}
.ent-sec{margin-bottom:8px}
.ent-sec-r{display:inline-block;font-size:11px;color:var(--accent);border:1.5px solid var(--accent);
  border-radius:999px;padding:1px 8px;margin-right:8px;font-weight:700}
.ec-toggle{align-self:flex-start;background:transparent;border:none;color:var(--accent);
  font-size:12px;font-weight:700;cursor:pointer;padding:2px 0}
.ec-toggle:hover{text-decoration:underline}

/* ---------- 8. 原文引用块：四边细框，无左侧竖条 ---------- */
.cite-block{background:var(--card2);border:1.5px solid var(--line-soft);
  border-radius:12px;padding:11px 14px;margin:2px 0}
.cite-sm{padding:9px 11px}
.cite-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cite-ch{font-size:12px;color:var(--accent2);font-weight:800}
.cite-bg{font-size:10px;color:var(--accent);border:1.5px solid var(--accent);
  border-radius:999px;padding:1px 8px;font-weight:700}
.cite-btn{background:var(--card);border:1.5px solid var(--line);color:var(--txt2);
  border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.cite-btn:hover{background:var(--coral);border-color:var(--line);color:#fff}
.cite-text{font-size:12.5px;line-height:1.85;color:var(--txt2);white-space:pre-wrap;word-break:break-word}
.cite-sm .cite-text{font-size:12px;max-height:150px;overflow:auto}
.quote-card{margin-bottom:12px}
.quote-why{margin-top:2px;font-size:12px;color:var(--txt3);padding-left:12px}
mark{background:var(--yellow);color:var(--ink);border-radius:4px;padding:0 3px;font-weight:700}

/* ---------- 9. 名词浮窗、模态与章节节选 ---------- */
#entPop{position:fixed;z-index:180;width:420px;max-width:92vw;padding:16px;
  max-height:78vh;overflow:auto;border-radius:var(--r-md)}
.ep-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ep-head b{font-size:16px}
.ep-cat{font-size:11px;color:var(--txt2);border:1.5px solid var(--line-soft);border-radius:999px;padding:1px 9px}
.ep-ch{margin-left:auto;font-size:11px;color:var(--txt3)}
.ep-desc{font-size:12.5px;color:var(--txt2);line-height:1.8;margin-bottom:10px}
.ep-cite .cite-text{max-height:130px;overflow:auto}
.ep-foot{font-size:11px;color:var(--txt3);margin-top:8px;
  border-top:1px solid var(--line-soft);padding-top:8px}
.modal-wide{max-width:960px;max-height:86vh}
.md-head{margin-bottom:16px}
.md-head h2{font-size:26px;margin-bottom:10px;color:var(--ink);font-weight:900}
.md-tags{display:flex;gap:6px;flex-wrap:wrap}
.md-sec{background:var(--card2);border:1.5px solid var(--line-soft);
  border-radius:12px;padding:14px 16px}
.md-sec h5{color:var(--accent)}
.md-sec p{color:var(--txt2);font-size:13px;line-height:1.85}
.ch-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ch-chip{background:var(--yellow);border:1.5px solid var(--line);color:var(--ink);
  border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;cursor:pointer}
.ch-chip:hover{background:var(--coral);color:#fff}
.raw-head{position:sticky;top:0;background:var(--card);padding-bottom:12px;
  border-bottom:2px solid var(--line);z-index:2}
.raw-head h2{font-size:20px;color:var(--ink);font-weight:900}
.raw-kw{font-size:12px;color:var(--txt3);margin-top:4px}
.raw-body{margin-top:14px}
.raw-body p{font-size:14px;line-height:2;color:var(--txt);margin-bottom:10px;text-indent:2em}
.raw-body p.raw-ellipsis{text-indent:0;text-align:center;color:var(--coral);
  font-family:var(--font-num);font-size:28px;letter-spacing:.28em;margin:18px 0;font-weight:700}
.modal-close{color:var(--txt2)}
.modal-close:hover{color:var(--accent)}

/* ---------- 10. 剧情段落、规则、时间线：无竖线 ---------- */
.path-part{background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);box-shadow:var(--hard-2)}
.path-part h3{color:var(--ink);font-weight:900}
.path-part .stage{color:var(--accent2);font-weight:700}
.path-part .sum{color:var(--txt2)}
.path-box{background:var(--card2);border:1.5px solid var(--line-soft);border-radius:12px}
.path-box h4{color:var(--accent2)}
.path-box li{color:var(--txt2)}
.arc-card,.rule-card{background:var(--card);border:1.5px solid var(--line-soft);
  border-radius:12px;padding:14px 16px;margin-bottom:12px}
.arc-card:hover,.rule-card:hover{border-color:var(--line)}
.arc-h{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.arc-h b{color:var(--accent);font-size:15px;font-weight:800}
.arc-h span{font-size:12px;color:var(--txt3)}
.arc-card p,.rule-desc{font-size:13px;color:var(--txt2);line-height:1.8}
.rule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px;align-items:start}
@media(max-width:820px){.rule-grid{grid-template-columns:1fr}}
.rule-h{display:flex;gap:10px;align-items:baseline;margin-bottom:8px}
.rule-h b{color:var(--accent);font-size:15px;font-weight:800}
.rule-desc{margin-bottom:8px}
/* 时间线：左侧竖线整体移除，改用黄色胶囊章号标记节点 */
.tl-list{margin-left:0;padding-left:0}
.tl-item{display:flex;gap:14px;padding:11px 2px;border-bottom:1px dashed var(--line-soft);position:relative}
.tl-item::before{display:none}
.tl-ch{font-size:12px;color:var(--ink);background:var(--yellow);border:1.5px solid var(--line);
  border-radius:999px;padding:4px 11px;white-space:nowrap;min-width:70px;
  text-align:center;font-weight:800;height:fit-content}
.tl-anchor .tl-ch{background:var(--coral);color:#fff}
.tl-body{font-size:13px;color:var(--txt2);line-height:1.8;flex:1}
.tl-body b{color:var(--ink);margin-right:8px}
.tl-body span{margin-right:10px}
.tl-anchor .tl-body b{color:var(--accent)}

/* ---------- 11. 入场编排、焦点、降级与响应式 ---------- */
/* 入场只做上浮位移，不降低透明度：保证动画未播放/被暂停时文字依然清晰可读 */
@keyframes kcsf-rise{from{transform:translateY(16px)}to{transform:none}}
#topbar,.site-note,#mainNav,h2.view-title,p.view-desc,.stat-row>.stat{
  animation:kcsf-rise 480ms var(--ease) both}
.site-note{animation-delay:60ms}
#mainNav{animation-delay:120ms}
h2.view-title{animation-delay:180ms}
p.view-desc{animation-delay:240ms}
.stat-row>.stat:nth-child(1){animation-delay:260ms}
.stat-row>.stat:nth-child(2){animation-delay:320ms}
.stat-row>.stat:nth-child(3){animation-delay:380ms}
.stat-row>.stat:nth-child(4){animation-delay:440ms}
.stat-row>.stat:nth-child(5){animation-delay:500ms}
.stat-row>.stat:nth-child(6){animation-delay:560ms}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(max-width:768px){
  #topbar{padding:14px 16px}
  .brand h1{font-size:20px}
  .top-stat{display:none}
  .global-search{width:100%;min-width:0}
  main{padding:16px}
  #mainNav{padding:8px 12px;gap:2px}
  #mainNav button{padding:7px 11px;font-size:12.5px}
  .stat .num{font-size:28px}
  .toolbar input[type=text],.toolbar select{min-width:0;width:100%}
  h2.view-title{font-size:24px}
}

/* ---------- 12. 散金币拖尾画布：只做视觉，不拦截任何交互 ---------- */
/* 层级 170：高于主内容与搜索下拉(150)，低于名词浮窗(180)/模态(200)/加载层(9999)，
   保证金币永远不盖住需要阅读的浮层。 */
#coinCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:170}

/* ---------- 13. 手机端 / 窄屏专项适配 ---------- */
@media(max-width:768px){
  /* clip 不创建滚动容器，导航的 position:sticky 仍然有效 */
  html{overflow-x:clip}
  body{background-attachment:scroll}
  #topbar{padding:12px 14px;gap:10px}
  .brand-icon{width:36px;height:36px;font-size:19px!important}
  .brand h1{font-size:18px;line-height:1.35}
  .global-search{width:100%;min-width:0}
  .global-search input{width:100%;font-size:16px}   /* 16px 防 iOS 聚焦时自动放大 */
  .gs-results{left:0;right:auto;width:100%;max-height:60vh}
  #mainNav{display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 10px;gap:6px}
  #mainNav::-webkit-scrollbar{display:none}
  #mainNav button{flex:0 0 auto;min-height:38px;padding:8px 14px;font-size:13px}
  main{padding:14px 12px 28px}
  h2.view-title{font-size:22px}
  p.view-desc{font-size:13px;line-height:1.75}
  .stat-row{gap:10px}
  .stat{padding:12px 10px}
  .stat .num{font-size:26px}
  .chart-mid{height:250px}
  .chart-big{height:430px}
  .chart-tree{height:560px}
  .toolbar{padding:10px 12px;gap:8px}
  .toolbar input[type=text],.toolbar select{width:100%;min-width:0;font-size:16px}
  .sec-h{font-size:16px}
  .cite-text{font-size:13px}
  .cite-sm .cite-text{max-height:none}
  .tl-item{flex-direction:column;gap:6px}
  .tl-ch{min-width:0;align-self:flex-start}
  .tl-body{width:100%}
  .modal-body{width:calc(100vw - 24px);max-width:none;padding:18px 14px;max-height:88vh}
  .modal-close{top:6px;right:8px;font-size:28px;min-width:36px;min-height:36px}
  .md-head h2{font-size:21px}
  .md-sec{padding:12px}
  .raw-body p{font-size:15px;text-indent:1.6em}
  #entPop{width:calc(100vw - 24px);max-width:none;max-height:70vh}
  .ep-cite .cite-text{max-height:none}
  footer{padding:14px 12px}
  footer p{white-space:normal;font-size:11px;padding:9px 14px}
  .ch-chip,.pill,.pager button,.more-btn,.ec-more{min-height:34px}
  .ch-chip{display:inline-flex;align-items:center}
  /* 长英文串/数字串不撑破卡片 */
  .cite-text,.ec-desc,.rule-desc,.path-part .sum,.tl-body,.md-sec p,.arc-card p{overflow-wrap:anywhere}
}
@media(max-width:400px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat .num{font-size:23px}
  .brand-sub{display:none}
  .chart-big{height:380px}
  .chart-tree{height:500px}
}
@media(hover:none){
  /* 触屏没有悬停，名词释义以点击详情为准；金币层略收敛 */
  .ent{text-decoration:none}
  #coinCanvas{opacity:.92}
}