/* ============================================================
   STYLES.CSS —— FluxWerks（fluxwerks.wiki）
   视觉语言：深夜体素工业世界（DESIGN-BRIEF.md）
   · 深空蓝底 + 岩灰面板 + 冷青 HUD 细边框 + 熔岩橙主强调
   · 热力渐变（coolant→lava→ember）= 本作 heat/fluid 机制母题
   · 方角体素质感：radius 0–2px + 4px 硬偏移黑阴影，不用模糊阴影
   · 字体与官方站同族：Orbitron(display) + Rajdhani(标签) + Inter(正文)
   ============================================================ */
:root{
  --bg:#07090e; --void:#07090e; --panel:#121115; --panel-2:#181e26; --deep:#395470;
  --steel:#5d5559; --haze:#898182; --paper:#d3c8b1; --ink:#e9e2d4; --muted:#898182;
  --lava:#ff8b30; --ember:#ff5a1f; --coolant:#4dceff; --rust:#7e5d54;
  --warn:#ffc14d;
  --accent:#ff8b30; --accent-2:#4dceff; --danger:#ff5a1f; --good:#7fd4a1;
  --border:rgba(77,206,255,.30); --border-2:rgba(77,206,255,.16);
  --hard:#000; --radius:2px; --radius-sm:2px; --maxw:1140px;
  --heat:linear-gradient(90deg,#4dceff,#8bd8e8,#ffc14d,#ff8b30,#ff5a1f);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Orbitron","Inter",system-ui,sans-serif;
  --label:"Rajdhani","Inter",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Roboto Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;color:var(--ink);font:16px/1.68 var(--font);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(57,84,112,.30), transparent 60%),
    radial-gradient(760px 420px at -10% 12%, rgba(77,206,255,.06), transparent 62%),
    var(--void);
  background-attachment:fixed}
img{max-width:100%;height:auto}
a{color:var(--coolant);text-decoration:none}
a:hover{text-decoration:underline;color:#8bd8e8}
a:focus-visible{outline:2px dashed var(--lava);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px 12px;z-index:50}

/* ---------- 方括号 chip（游戏内快捷键提示母题） ---------- */
.chip{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--coolant);border:1px solid var(--border);padding:3px 8px;background:rgba(77,206,255,.07);
  white-space:nowrap}
.chip::before{content:"[";color:var(--steel);margin-right:2px}
.chip::after{content:"]";color:var(--steel);margin-left:2px}
.chip.hot{color:var(--lava);border-color:rgba(255,139,48,.45);background:rgba(255,139,48,.08)}
.chip.hot::before,.chip.hot::after{color:var(--rust)}

/* ---------- 热力渐变 overline（分节母题） ---------- */
.heat-bar{height:3px;background:var(--heat);margin:0}

/* topbar / nav */
.topbar{position:sticky;top:0;z-index:30;background:rgba(7,9,14,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border)}
.topbar .bar{display:flex;align-items:center;gap:14px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);font-weight:700}
.brand img{width:40px;height:40px;border-radius:2px;border:1px solid var(--border)}
.nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav ul{display:flex;gap:14px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.nav a{color:var(--paper);font-family:var(--label);font-weight:600;font-size:16px;letter-spacing:.03em}
.nav a:hover{color:var(--lava);text-decoration:none}
.nav .active > a{color:var(--lava)}
.nav .kids{display:none;position:absolute;top:100%;min-width:220px;background:var(--panel-2);
  border:1px solid var(--border);padding:8px;border-radius:2px;flex-direction:column;
  box-shadow:4px 4px 0 var(--hard)}
.nav li{position:relative}
/* 下拉父项与面板之间禁止留「死区」：面板下移就必须加透明 hover 桥，否则菜单中途消失 */
.nav li.has-kids::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:12px;z-index:39}
.nav li.has-kids > a::after{content:" ▾";opacity:.75;color:var(--coolant)}
.nav li.has-kids:hover .kids,.nav li.has-kids:focus-within .kids{display:flex}
.nav .kids a{padding:6px 8px;border-left:2px solid transparent;font-size:15px}
.nav .kids a:hover{border-left-color:var(--lava);background:rgba(77,206,255,.07)}
.nav .cta{border:1px solid var(--lava);color:var(--lava);padding:6px 12px;border-radius:2px;
  font-family:var(--label);font-weight:700;letter-spacing:.06em}
.nav .cta:hover{background:var(--lava);color:#0b0a0d;text-decoration:none}
@media (max-width:820px){
  .topbar .bar{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .nav{margin-left:0;width:100%;overflow-x:auto}
  .nav ul{flex-wrap:nowrap;white-space:nowrap}
  .nav .kids{position:static;display:flex;border:0;padding:0;box-shadow:none;background:transparent}
}

/* ---------- hero：shot01 夜间体素工厂 + 左侧深空蓝渐变压暗 ---------- */
.hero{position:relative;border-bottom:1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(7,9,14,.95) 0%, rgba(7,9,14,.88) 44%, rgba(7,9,14,.38) 76%, rgba(7,9,14,.16) 100%),
    #1a2230 url("/assets/official/shot01.jpg") right center/cover no-repeat;
  min-height:clamp(340px,48vw,470px);display:flex;align-items:center}
.hero-in{padding:56px 18px;max-width:760px}
.hero .eyebrow{margin-bottom:14px}
.hero h1{font-family:var(--display);font-weight:900;margin:0 0 14px;color:#fff;
  font-size:clamp(40px,8.4vw,76px);line-height:.94;letter-spacing:.02em;
  text-shadow:4px 4px 0 rgba(0,0,0,.85), 0 0 34px rgba(77,206,255,.28)}
.hero h1 .l2{display:block;color:var(--lava);
  text-shadow:4px 4px 0 rgba(0,0,0,.85), 0 0 30px rgba(255,139,48,.42)}
.lead{color:#cfd8e2;font-size:18px;max-width:60ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn{display:inline-block;background:var(--lava);color:#0b0a0d;border:2px solid var(--hard);
  padding:11px 18px;border-radius:2px;font-family:var(--label);font-weight:700;font-size:16px;
  letter-spacing:.05em;box-shadow:4px 4px 0 var(--hard);text-transform:uppercase}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--hard);text-decoration:none;color:#000}
.btn.ghost{background:transparent;color:var(--coolant);border-color:var(--coolant);
  box-shadow:4px 4px 0 rgba(77,206,255,.30)}
.btn.ghost:hover{background:rgba(77,206,255,.12);color:#8bd8e8}
.fact-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fact-strip .chip{background:rgba(7,9,14,.72)}

/* ---------- sections ---------- */
.sec{margin:38px 0 8px}
.sec-title{font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;color:var(--coolant);border-top:3px solid transparent;border-image:var(--heat) 1;
  padding-top:10px;margin:0 0 14px}
.grid{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 30px}
.grid:last-child{margin-bottom:12px}
/* 末行不足自动拉伸填满，不留 4+3 孤卡 */
.grid > .card{flex:1 1 260px}

/* ---------- cards：Production Planner 面板 ---------- */
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);
  border-radius:2px;overflow:hidden;color:var(--ink);position:relative;
  box-shadow:4px 4px 0 var(--hard)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--heat);z-index:2}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%;filter:saturate(.94) contrast(1.04)}
.card-body{padding:13px 15px 17px}
.card h3{margin:8px 0 6px;font-family:var(--label);font-size:20px;font-weight:700;
  letter-spacing:.02em;color:#fff}
.card p{margin:0 0 10px;color:var(--haze);font-size:14px;line-height:1.55}
.card .go{color:var(--lava);font-family:var(--label);font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase}
.card .stamp{display:block;font-family:var(--mono);color:var(--steel);font-size:11px;margin-top:7px;
  letter-spacing:.04em}
.card:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--hard);
  border-color:rgba(77,206,255,.6);text-decoration:none}
.card:hover h3{color:var(--lava)}

/* ---------- article ---------- */
article{padding:26px 0 40px}
article h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,5vw,40px);line-height:1.12;
  color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.7)}
article h2{margin-top:36px;font-family:var(--label);font-weight:700;font-size:24px;letter-spacing:.02em;
  color:#fff;background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--coolant);
  padding:9px 13px;position:relative}
article h2::before{content:"NODE";position:absolute;top:-9px;right:10px;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;color:var(--steel);background:var(--void);padding:0 6px;
  border:1px solid var(--border-2)}
article h3{margin-top:26px;font-family:var(--label);font-size:20px;color:var(--paper);font-weight:700}
article img.zoom{border:2px solid var(--deep);border-radius:2px;cursor:zoom-in;display:block;margin:14px 0;
  box-shadow:4px 4px 0 var(--hard)}
article ul,article ol{padding-left:22px}
article li{margin:5px 0}
article li::marker{color:var(--lava)}

/* ---------- 表格：Production Planner 风（等宽数值 + 橙黄警示值） ---------- */
.tbl-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--border);background:var(--panel);
  box-shadow:4px 4px 0 var(--hard)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border:1px solid var(--border-2);padding:8px 11px;text-align:left}
th{background:var(--panel-2);font-family:var(--label);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:13px;color:var(--coolant);border-bottom:2px solid rgba(77,206,255,.45)}
tbody tr:nth-child(even){background:rgba(24,30,38,.55)}
td{color:var(--ink)}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:14px;color:#fff}
td.warn{color:var(--warn);font-family:var(--mono);font-weight:600}
td.rate{font-family:var(--mono);color:var(--coolant)}

/* ---------- callout：热力渐变左条 ---------- */
.callout{border-left:4px solid var(--coolant);background:var(--panel);padding:12px 15px;margin:16px 0;
  border-radius:0 2px 2px 0;border-top:1px solid var(--border-2);border-right:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2)}
.callout.warn{border-left-color:var(--ember);background:rgba(255,90,31,.07)}
.callout.note{border-left-color:var(--warn);background:rgba(255,193,77,.06)}
.callout strong{color:var(--warn)}
blockquote{border-left:3px solid var(--coolant);margin:16px 0;padding:5px 15px;color:var(--haze);
  font-family:var(--mono);font-size:14.5px;background:rgba(77,206,255,.05)}
code{background:var(--panel-2);padding:1px 5px;border-radius:2px;border:1px solid var(--border-2);
  font-family:var(--mono);font-size:.92em;color:var(--coolant)}
pre{background:var(--panel);border:1px solid var(--border);padding:12px;overflow:auto;
  box-shadow:4px 4px 0 var(--hard)}
pre code{border:0;background:transparent;padding:0}

/* 图注（抄 Production Planner 页脚免责小字母题） */
figcaption,.imgnote{font-family:var(--mono);font-size:12px;color:var(--steel);margin-top:-6px;
  margin-bottom:16px;letter-spacing:.02em}

/* 管道线分隔 */
.pipe{height:8px;margin:30px 0;border:0;
  background:
    radial-gradient(circle at 6px 4px, #5d5559 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 6px) 4px, #5d5559 2.5px, transparent 3px),
    repeating-linear-gradient(90deg, #395470 0 14px, rgba(57,84,112,.55) 14px 16px);
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-size:12px 8px,12px 8px,auto}

/* tab 母题（Graph / Table / Build Cost / Farming） */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 0;border-bottom:1px solid var(--border)}
.tabs a,.tabs span{font-family:var(--label);font-weight:600;font-size:14px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--haze);padding:7px 13px;border:1px solid var(--border-2);
  border-bottom:0;background:var(--panel);border-radius:2px 2px 0 0}
.tabs a[aria-current],.tabs .on{background:rgba(77,206,255,.16);color:var(--coolant);
  border-color:var(--border);position:relative;top:1px}

/* 面板块（Summary 面板感） */
.panel{background:var(--panel);border:1px solid var(--border);padding:14px 16px;margin:16px 0;
  box-shadow:4px 4px 0 var(--hard);position:relative}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--heat)}
.panel h3,.panel h2:first-child{margin-top:0;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.1em;font-size:14px;color:var(--coolant)}

/* ---------- ad slot（Adsterra Native Banner：桌面指针门控；移动端不加载） ---------- */
@media (hover: hover) and (pointer: fine){ .ad-slot{display:block} }
@media not all and (hover: hover) and (pointer: fine){ .ad-slot{display:none} }
.ad-slot{margin:26px auto;max-width:var(--maxw)}
.ad-label{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  font-family:var(--mono)}
.ad-inner{min-height:90px;border:1px dashed var(--border-2);border-radius:2px;background:var(--panel);
  overflow:hidden}

/* ---------- footer ---------- */
.foot{border-top:3px solid transparent;border-image:var(--heat) 1;background:var(--panel);
  padding:24px 0;margin-top:26px}
.foot .muted{color:var(--haze);font-size:13px}
.foot-links a{color:var(--paper);font-family:var(--label);letter-spacing:.03em}
.foot-links a:hover{color:var(--lava)}
.disclaimer{color:var(--steel);font-size:13px;font-family:var(--mono);line-height:1.6}

/* ---------- 浅色系统兜底：保持可读 ---------- */
@media (prefers-color-scheme:light){
  html{background:#eef1f4}
  body{background:#eef1f4;color:#14171c}
  .card,article h2,.tbl-wrap,.callout,blockquote,pre,.panel,.topbar,.foot,th{background:#fff}
  .card h3,article h1,article h3,th{color:#14171c}
  td,article,.lead,.card p{color:#14171c}
  .hero{background:linear-gradient(90deg,rgba(7,9,14,.95),rgba(7,9,14,.62)),
    url("/assets/official/shot01.jpg") right center/cover no-repeat}
}