/* ============ 《热血骑手·物语》设计案样式 ============ */
:root{
  --ink:#0e1218;
  --paper:#f3efe6;
  --paper-2:#e7e0d1;
  --red:#e2402b;        /* 热血红 */
  --yellow:#ffcf2d;     /* 黄兄 */
  --blue:#2f7fd6;       /* 蓝兄 */
  --pink:#ff7ba8;       /* 女主 */
  --line:rgba(14,18,24,.16);
  --shadow:0 2px 0 rgba(14,18,24,.9);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* CRT 扫描线，向 FC 致敬但极克制 */
.scan{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.28;
  background:repeating-linear-gradient(to bottom,rgba(14,18,24,.05) 0 1px,transparent 1px 3px)}

h1,h2,h3,h4,.disp{font-family:"Noto Serif SC","Songti SC",serif;font-weight:900;letter-spacing:.02em}

/* ---------- masthead ---------- */
.masthead{
  padding:34px 26px 26px;border-bottom:3px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between;
  background:
    radial-gradient(120% 140% at 12% -20%,rgba(226,64,43,.22),transparent 60%),
    linear-gradient(var(--paper),var(--paper));
}
.mh-left h1{margin:.05em 0 .1em;font-size:clamp(38px,7.4vw,86px);line-height:.94}
.mh-left .dot{color:var(--red);margin:0 .06em}
.tag{display:inline-block;font-size:11px;letter-spacing:.22em;font-weight:700;
  border:1.5px solid var(--ink);padding:4px 10px;background:var(--yellow)}
.sub{margin:.5em 0 0;max-width:44ch;font-size:14px;color:#4a5260}
.mh-right{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px 18px}
.kv{border-top:1.5px solid var(--ink);padding-top:6px;font-size:12.5px}
.kv b{display:block;font-size:10.5px;letter-spacing:.18em;color:#79808f;font-weight:700}

/* ---------- toc ---------- */
.toc{position:sticky;top:0;z-index:50;display:flex;gap:6px;overflow-x:auto;
  padding:9px 18px;background:var(--ink);scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:0 0 auto;color:#cfd6e0;text-decoration:none;font-size:12px;
  padding:5px 11px;border:1px solid #333c49;white-space:nowrap}
.toc a:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- sections ---------- */
section{padding:52px 26px;border-bottom:1px solid var(--line);max-width:1220px;margin:0 auto}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.sec-no{font-family:"Noto Serif SC",serif;font-size:13px;font-weight:900;color:var(--red);letter-spacing:.1em}
.sec-head h2{margin:0;font-size:clamp(22px,3.4vw,34px)}
.sec-head p{margin:0 0 0 auto;font-size:12px;color:#79808f}
.lede{font-size:16.5px;max-width:70ch;margin:0 0 22px}
.lede em{font-style:normal;background:linear-gradient(transparent 62%,rgba(255,207,45,.85) 62%);padding:0 2px;font-weight:700}
h3{font-size:19px;margin:34px 0 12px;display:flex;align-items:center;gap:9px}
h3::before{content:"";width:11px;height:11px;background:var(--red);transform:rotate(45deg);flex:0 0 auto}
h4{font-size:15px;margin:20px 0 8px}
p{margin:0 0 12px}
ul,ol{margin:0 0 14px;padding-left:1.3em}
li{margin-bottom:5px}
code,.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.9em}
.note{font-size:12.5px;color:#6b7280}

/* ---------- generic grid/cards ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:#fff;border:1.5px solid var(--ink);padding:15px 16px;position:relative}
.card.flat{background:var(--paper-2);border-style:dashed}
.card h4{margin:0 0 6px;font-size:15.5px}
.card .k{font-size:11px;letter-spacing:.14em;color:var(--red);font-weight:800;text-transform:uppercase}
.card p:last-child{margin-bottom:0}
.chip{display:inline-block;font-size:11px;border:1px solid var(--line);padding:1px 7px;margin:2px 3px 2px 0;background:#fbf8f1}
.chip.red{background:var(--red);color:#fff;border-color:var(--red)}
.chip.yel{background:var(--yellow);border-color:#c9a100}
.chip.blu{background:var(--blue);color:#fff;border-color:#1b5fa5}
.chip.pnk{background:var(--pink);color:#fff;border-color:#d24d78}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin:12px 0 18px;background:#fff}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--ink);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.05em}
tbody tr:nth-child(even){background:#faf7f0}
td b{color:var(--red)}

/* ---------- 调研区 ---------- */
.quote{border-left:4px solid var(--red);padding:6px 0 6px 16px;margin:14px 0;font-size:14px;color:#3b4250}
.dna{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border:1.5px solid var(--ink)}
.dna>div{padding:13px 15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dna>div b{display:block;font-size:13.5px;margin-bottom:3px}
.dna>div span{font-size:12.5px;color:#5b6270}

/* ---------- 章节地图 ---------- */
.map{border:1.5px solid var(--ink);background:#fff;padding:14px;overflow-x:auto}
.map svg{display:block;min-width:900px;margin:0 auto}
.chapter{border:1.5px solid var(--ink);background:#fff;margin:0 0 18px;overflow:hidden}
.ch-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:11px 16px;background:var(--ink);color:#fff}
.ch-no{font-family:"Noto Serif SC",serif;font-weight:900;font-size:13px;background:var(--red);padding:2px 9px}
.ch-top h3{margin:0;color:#fff;font-size:17px}
.ch-top h3::before{display:none}
.ch-top .meta{margin-left:auto;font-size:11.5px;color:#aab3c2;letter-spacing:.06em}
.ch-body{padding:16px}
.ch-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.box{border:1px dashed var(--line);padding:11px 13px;background:#fbf8f1}
.box>.t{font-size:11px;letter-spacing:.16em;font-weight:800;color:#79808f;margin-bottom:6px}
.box.script{background:#0e1218;color:#dfe6ef;border:none;font-size:13px}
.box.script .t{color:#7c8698}
/* dialogue typewriter demo */
.dlg{background:#0b0e13;border:1.5px solid var(--ink);color:#fff;padding:0;margin:10px 0 4px}
.dlg-screen{padding:16px 16px 12px;min-height:150px;background:
  linear-gradient(rgba(11,14,19,.55),rgba(11,14,19,.85)),
  repeating-linear-gradient(45deg,#152030 0 8px,#111a26 8px 16px)}
.dlg-name{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:12px;padding:2px 9px;margin-bottom:7px}
.dlg-text{font-size:14.5px;min-height:3.2em;line-height:1.7}
.dlg-cursor{display:inline-block;width:7px;height:14px;background:#fff;vertical-align:-2px;animation:blink .8s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.dlg-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#151a22;border-top:1px solid #2a323f;font-size:11.5px;color:#8b95a5}
.dlg-bar button{background:var(--yellow);border:none;color:#0e1218;font-weight:800;font-size:11.5px;padding:4px 12px;cursor:pointer}
.dlg-bar button.ghost{background:transparent;color:#8b95a5;border:1px solid #3a4553}

/* ---------- 角色卡 + SVG 立绘 ---------- */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px}
.rc{background:#fff;border:1.5px solid var(--ink);display:flex;flex-direction:column;position:relative}
/* 漫画Q版立绘：柔和浅色底 + 内阴影，人物像贴纸一样浮在上面（去掉像素条纹底与 pixelated） */
.rc .art{padding:12px 8px 6px;display:flex;justify-content:center;align-items:flex-end;
  background:radial-gradient(circle at 50% 35%,#fffdf8,#f2ece0 78%,#e9e1d2);
  box-shadow:inset 0 2px 6px rgba(43,34,51,.09),inset 0 -1px 0 rgba(43,34,51,.06);
  border-bottom:1.5px solid var(--ink)}
.rc svg{display:block;height:158px;width:auto;
  filter:drop-shadow(0 3px 5px rgba(43,34,51,.18))}
.rc .who{padding:10px 12px 12px;flex:1}
.rc .nm{font-family:"Noto Serif SC",serif;font-weight:900;font-size:16px;margin:0}
.rc .role{font-size:11px;letter-spacing:.1em;color:var(--red);font-weight:800;margin:1px 0 7px}
.rc .ds{font-size:12.5px;color:#4a5260;margin:0 0 7px}
.rc .st{font-size:11.5px;color:#6b7280;border-top:1px dotted var(--line);padding-top:6px;margin:0}
.rc.hero{outline:3px solid var(--red);outline-offset:-3px}
.badge{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;letter-spacing:.08em}
.badge.y{background:var(--yellow);color:#0e1218}
.badge.b{background:var(--blue);color:#fff}
.badge.p{background:var(--pink);color:#fff}
.badge.g{background:#0e1218;color:#fff}

/* ---------- 动作表 / sprite sheet ---------- */
.sheet{border:1.5px solid var(--ink);background:#0e1218;padding:14px;overflow-x:auto}
.sheet .lbl{color:#8b95a5;font-size:11.5px;letter-spacing:.14em;margin-bottom:8px}
.sheet svg{display:block;min-width:760px}
.frames{display:flex;gap:10px;flex-wrap:wrap}
/* 动作帧卡片同样柔和化：暖白渐变底 + 轻内阴影，萌系小人像贴纸浮起 */
.frame{border:1px solid var(--line);padding:8px;text-align:center;min-width:104px;
  background:radial-gradient(circle at 50% 32%,#fffdf8,#f4efe5 82%);
  box-shadow:inset 0 1px 4px rgba(43,34,51,.07)}
.frame svg{height:88px;display:block;margin:0 auto 5px;
  filter:drop-shadow(0 2px 3px rgba(43,34,51,.16))}
.frame i{font-style:normal;font-size:10.5px;color:#79808f;display:block}
/* 未出美术的 key：占位圆脸淡一点，视觉上明确"这是占位" */
.rc .art .hb-placeholder{opacity:.75;filter:saturate(.55) drop-shadow(0 3px 5px rgba(43,34,51,.14))}
.frame b{font-size:11px}

/* ---------- 技能树 ---------- */
.tree{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.school{border:1.5px solid var(--ink);background:#fff;padding:13px 14px}
.school .hd{display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:7px;margin-bottom:9px}
.school .hd .sw{width:16px;height:16px;flex:0 0 auto}
.skillrow{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-bottom:1px dotted var(--line);font-size:12.5px}
.skillrow:last-child{border-bottom:none}
.lv{flex:0 0 auto;font-size:10px;font-weight:800;background:var(--ink);color:#fff;padding:1px 6px;height:16px}
.lv.max{background:var(--red)}
.lv.lock{background:#b9bec7}

/* ---------- footer ---------- */
footer{padding:34px 26px 60px;max-width:1220px;margin:0 auto;font-size:12.5px;color:#79808f}
.decide{background:#fff;border:2px solid var(--red);padding:18px 20px;margin:14px 0}
.decide ol{padding-left:1.4em}
.decide li{margin-bottom:9px}
.decide li b{color:var(--red)}
.ask{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ask a{text-decoration:none;font-weight:800;font-size:13px;padding:9px 16px;border:1.5px solid var(--ink);background:var(--yellow);color:var(--ink)}
.ask a.alt{background:#fff}
@media (max-width:640px){
  section{padding:38px 16px}
  .masthead{padding:24px 16px 20px}
  .mh-right{grid-template-columns:1fr 1fr}
}

/* ---------- 隐藏彩蛋卡片（§09B 扫码付款 ¥20）---------- */
.egg5{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.card.egg{border:1.5px dashed #c9a227;background:linear-gradient(180deg,#fffdf3,#fdf6dd);
  box-shadow:inset 0 0 0 3px rgba(201,162,39,.08)}
.card.egg .k{background:#c9a227;color:#fffdf3}
.card.egg h4{color:#8a6d1a}

/* ---------- 气血（HP）系统 · §07.6 ---------- */
.hpwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin:12px 0 4px}
.hpdemo{background:#fff;border:1.5px solid var(--ink);padding:14px}
.hpbar{height:22px;border:1.5px solid var(--ink);background:#efe9dd;position:relative;overflow:hidden}
.hpbar>i{position:absolute;inset:0;width:0;background:linear-gradient(180deg,#ff6b5c,#e03a2b);
  transition:width .35s cubic-bezier(.2,.8,.2,1)}
.hpbar>b{position:absolute;left:7px;top:2px;font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);font-weight:800}
.hpbar.seg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 32px,rgba(14,18,24,.5) 32px 34px)}
.hplabel{font-size:11px;color:#79808f;margin-top:6px}
.stage{margin-top:10px;border-left:3px solid var(--ink);padding-left:10px;font-size:12.5px}
.stage s1{display:block;font-weight:800;color:var(--red)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.btnrow button{font:inherit;font-weight:800;font-size:12px;padding:6px 11px;border:1.5px solid var(--ink);
  background:#fff;cursor:pointer}
.btnrow button:hover{background:var(--yellow)}
.btnrow button.eat{background:#ffe9f0}
.ko{display:none;margin-top:10px;background:#0e1218;color:#fff;padding:12px;font-size:13px;font-weight:800;
  letter-spacing:.02em}
.ko.on{display:block;animation:koshake .5s steps(2) 3}
.ko small{display:block;font-weight:400;color:#b9bec7;margin-top:5px;font-size:11.5px}
@keyframes koshake{0%{transform:translate(0)}25%{transform:translate(-3px,1px)}75%{transform:translate(3px,-1px)}}

/* ---------- 食物 / 回血表 · §07.7 ---------- */
.food{border-color:#e8a5c0}
.food .k{background:var(--pink,#ff7ba8);color:#fff}
.foodlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:10px}
.fi{background:#fff;border:1.5px solid var(--ink);padding:10px 12px;display:flex;gap:10px;align-items:flex-start}
.fi svg{flex:0 0 auto;width:34px;height:34px}
.fi b{font-size:13px}
.fi em{font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:var(--red);padding:1px 5px;margin-left:6px}
.fi p{font-size:11.5px;color:#5c6472;margin:3px 0 0;line-height:1.5}

/* ---------- 学费阶梯（分次付费学习）---------- */
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0 2px}
.step{background:#fff;border:1.5px solid var(--ink);padding:10px 11px;position:relative}
.step .price{font-size:15px;font-weight:900;color:var(--red)}
.step .who{font-size:10.5px;color:#79808f;margin-top:2px}
.step h5{margin:5px 0 3px;font-size:12.5px}
.step p{margin:0;font-size:11.5px;color:#5c6472;line-height:1.5}
.step::after{content:"→";position:absolute;right:-11px;top:38%;font-weight:900;color:var(--ink);z-index:2}
.step:last-child::after{content:""}
.step.locked{background:#f4f1ea;border-style:dashed}
.step.locked .price{color:#a4a9b3}

/* 低血量：变红闪烁（§7.6） */
.hpbar>i{background:linear-gradient(180deg,#ff6b5c,#e03a2b)}
.hpbar.low>i{animation:hpthrob .62s ease-in-out infinite}
@keyframes hpthrob{0%,100%{filter:none;opacity:1}50%{filter:saturate(1.9) brightness(1.18);opacity:.62}}
.fi .ic{display:inline-flex;width:34px;height:34px;flex:0 0 auto}
.fi .ic svg{width:34px;height:34px;display:block}

/* ---------- 名物武器图鉴（§05）---------- */
.armory{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-top:10px}
.arw{background:#fff;border:1.5px solid var(--ink);padding:12px 10px 11px;text-align:center;position:relative}
.arw svg{width:100%;height:96px;display:block}
.arw b{display:block;font-size:13px;margin-top:4px}
.arw i{font-style:normal;font-size:10.5px;color:#79808f;display:block;margin-top:2px}
.arw .tagp{position:absolute;left:8px;top:8px;font-size:9.5px;font-weight:900;color:#fff;background:var(--red);padding:1px 5px}