/* GRAIN ROT Wiki — 暗色余烬主题
 * 主色取自官方美术与 logo：
 *   近黑暖褐底 #12100c    余烬橙（logo ROT 字标）#d34c11
 *   骨白正文 #e6dfd2      暖调分界面 #1c1813 / #241e17
 * 文字对比度：正文 ≈14.7:1，链接 ember ≥5.6:1。
 */
:root{
  --bg:        #12100c;   /* 主背景：近黑暖褐 */
  --surface:   #1c1813;   /* 卡片/表头/页头底 */
  --surface-2: #241e17;   /* 表格斑马/hover */
  --surface-3: #2a241c;   /* callout/代码块 等 */
  --text:      #e6dfd2;   /* 正文：骨白 */
  --text-strong:#f4ede0;
  --muted:     #a39786;   /* 次要文字 */
  --border:    #332a1f;   /* 暖褐描边 */
  --border-soft:#241e17;

  --accent:        #d34c11;  /* logo 原色，装饰用 */
  --accent-link:   #ed6a25;  /* 链接文字：提亮后对比 ≥5.6:1 */
  --accent-hover:  #f5834a;  /* hover 进一步提亮 */
  --accent-soft:   #2a1a0e;  /* 强调背景：暗淡的余烬光晕 */
  --accent-line:   #4a2a14;  /* 强调描边 */

  --radius: 10px;
  --wrap: 1080px;       /* 容器更宽，宽屏利用更充分 */
  --measure: 820px;     /* 正文最佳阅读宽度；表格/卡片/图解可占满 --wrap */
}

*{box-sizing:border-box}
::selection{background:var(--accent-soft);color:var(--text-strong)}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-color:#3a3127 #12100c}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* skip link */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:20;background:var(--surface);color:var(--text-strong);padding:8px 14px;border:1px solid var(--accent);border-radius:6px}


/* Ad slots — in-content display ads (kept off the reading measure so they sit centered) */
.ad-slot{max-width:var(--measure);margin:22px auto;display:flex;justify-content:center;align-items:center;min-height:1px;text-align:center;overflow:hidden}
.ad-slot--leaderboard{min-height:90px}
.ad-slot--native{min-height:0}
.ad-slot ins,.ad-slot iframe,.ad-slot>div{max-width:100%;display:inline-block}
@media (max-width:760px){.ad-slot--leaderboard{overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* Single random display unit — shows a small "Ad" eyebrow, then centers whatever
   size Adsterra fills. Wide (728x90/468x60) and square (300x250) units hug the
   reading column; tall skyscrapers (160x600/160x300) get a contained vertical box
   so they read as an intentional billboard instead of stretching the layout. */
.ad-slot--display{flex-direction:column;gap:6px;margin:26px auto}
.ad-slot--display::before{content:"Ad";font-size:10px;line-height:1;letter-spacing:.08em;color:var(--muted);opacity:.55}
.ad-slot--display.wide iframe,.ad-slot--display.wide>div{width:auto;max-width:100%}
.ad-slot--display.square iframe,.ad-slot--display.square>div{width:auto;max-width:100%}
.ad-slot--display.tall{width:auto;max-width:100%}
.ad-slot--display.tall::after{content:"";display:block;min-height:30px}
@media (max-width:480px){.ad-slot--display.wide{overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* header */
.site-head{border-bottom:1px solid var(--border);background:var(--surface)}
.head-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px 20px}
.brand{
  font-weight:600;font-size:17px;color:var(--text-strong);
  text-decoration:none;letter-spacing:-.01em;white-space:nowrap;
}
.brand:hover{color:var(--accent-hover)}
.nav{display:flex;flex-wrap:wrap;gap:4px 14px;margin-left:auto}
.nav a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--accent-hover)}
.nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* breadcrumb */
.crumb{margin:20px 0 8px;font-size:13px;color:var(--muted)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumb li+li::before{content:"/";margin-right:6px;color:#5a4e3e}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent-hover)}

/* typography */
h1{font-size:31px;line-height:1.25;margin:.2em 0 .6em;letter-spacing:-.02em;font-weight:600;color:var(--text-strong)}
h2{font-size:22px;line-height:1.3;margin:2.2em 0 .6em;letter-spacing:-.015em;font-weight:600;color:var(--text-strong);padding-bottom:.35em;border-bottom:1px solid var(--border)}
h3{font-size:18px;line-height:1.35;margin:1.8em 0 .5em;font-weight:600;color:var(--text-strong)}
p{margin:0 0 1em}
/* 正文测量宽度：长段落限制在 --measure，避免宽屏下每行过长；
   表格/卡片/图解/工具块不限制，占满 --wrap 以利用宽屏空间 */
.callout,article>p,article>ul,article>ol,article>.lede{max-width:var(--measure)}
a{color:var(--accent-link)}
a:hover{color:var(--accent-hover)}
.lede{font-size:17.5px;color:#c8beac;margin-top:0}
.muted{color:var(--muted);font-size:14px}
.mb0{margin-bottom:0}
code{background:var(--surface-3);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f0c89a}

/* quick answer box — 模拟游戏里那盏孤灯的光晕 */
.answer{
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:16px 20px;
  margin:0 0 1.8em;
  color:var(--text-strong);
}
.answer p:last-child{margin-bottom:0}
.answer-label{
  margin:0 0 6px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
}

/* tables */
.table-wrap{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px}
caption{caption-side:top;text-align:left;font-size:13px;color:var(--muted);padding-bottom:8px}
th,td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--surface);font-weight:600;font-size:13.5px;color:var(--text-strong)}
tbody tr:nth-child(even){background:var(--surface-2)}
td:first-child{width:26%}

/* threat pips */
.pips{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.pip{width:7px;height:7px;border-radius:50%;background:#3a3127;display:inline-block}
.pip.on{background:var(--accent);box-shadow:0 0 4px rgba(211,76,17,.55)}

/* figures — screenshots and original diagrams */
.figure{
  margin:0 0 1.9em;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.figure img{display:block;width:100%;height:auto;background:#0d0b08}
.figure figcaption{
  padding:11px 15px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  border-top:1px solid var(--border);
}
.figure-caption{display:block;color:var(--text)}
.figure-credit{display:block;margin-top:3px;font-size:11.5px;color:#7d7263}
/* diagrams: our own art, give it air so it is not cramped */
.figure--diagram img{padding:14px;background:var(--surface-2)}
/* two-up row of images */
.figs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;margin:0 0 1.9em;
}
.figs .figure{margin:0}

/* callout */
.callout{border-radius:var(--radius);padding:16px 20px;margin:0 0 1.6em;border:1px solid;background:var(--surface);border-color:var(--border)}
.callout.warn{background:var(--accent-soft);border-color:var(--accent-line)}
.callout p:last-child{margin-bottom:0}

/* cards */
.cards{list-style:none;padding:0;margin:0 0 1.6em;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.cards a{
  display:block;height:100%;padding:14px 16px;
  border:1px solid var(--border);border-radius:var(--radius);
  text-decoration:none;background:var(--surface);color:var(--text);
}
.cards a:hover{border-color:var(--accent);background:var(--surface-2)}
.cards strong{display:block;color:var(--text-strong);font-size:15px;margin-bottom:3px;font-weight:600}
.cards span{display:block;color:var(--muted);font-size:13.5px;line-height:1.5}

/* lists */
ul,ol{padding-left:1.3em;margin:0 0 1.2em}
li{margin-bottom:.45em}
ol.tips{padding-left:1.4em}
ol.tips>li{margin-bottom:1.15em}
ol.tips p{margin:.25em 0 0;color:#c8beac}
.langs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.langs li{background:var(--surface-3);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:13.5px;margin:0;color:var(--text)}

/* footer */
.site-foot{margin-top:56px;border-top:1px solid var(--border);background:var(--surface);padding:26px 0 40px}
.foot-note{font-size:13px;color:var(--muted);margin:0 0 .6em;max-width:70ch}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.foot-links a{font-size:13.5px;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--accent-hover)}

/* interactive tools — Outpost planner & Grinder calculator (the only JS on the site) */
.tool{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:18px 20px;margin:0 0 1.8em}
.tool h3{margin-top:0;border:0;padding:0;font-size:17px}
.tool h4{margin:1.4em 0 .4em;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.tool-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 10px}
.tool-row label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer}
.tool-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.field input{background:var(--surface-3);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 9px;font-size:14px;min-width:84px;width:100%}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:end;margin:0 0 12px}
.result{margin-top:14px;padding:14px 16px;border-radius:var(--radius);background:var(--accent-soft);border:1px solid var(--accent-line);font-size:14.5px;line-height:1.6}
.result strong{color:var(--accent)}
.result .big{font-size:20px;color:var(--text-strong);font-weight:600}
.result.warn{background:var(--accent-soft)}
.btn{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:8px 15px;font-size:14px;cursor:pointer;margin-top:4px}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-hover)}
.unit-row{display:grid;grid-template-columns:1fr 88px 96px 34px;gap:8px;align-items:end;margin-bottom:8px}
.unit-row .field{min-width:0}
.unit-row .rm{align-self:end;justify-self:center;background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:4px}
.unit-row .rm:hover{color:var(--accent-hover)}
.tool .muted{color:var(--muted);font-size:13px}
@media (max-width:520px){.unit-row{grid-template-columns:1fr 70px 78px 30px}}

/* language switcher */
.langs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.4em}
.langs li{background:var(--surface-3);border:1px solid var(--border);border-radius:6px;padding:5px 11px;font-size:13.5px;margin:0}
.langs a{color:var(--muted);text-decoration:none}
.langs a:hover{color:var(--accent-hover)}
.langs li[aria-current="true"]{border-color:var(--accent)}
.langs li[aria-current="true"] a{color:var(--accent)}

/* language switcher in the header (compact text links, current lang highlighted) */
.lang-switch{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-left:14px}
.lang-switch::before{content:"";width:15px;height:15px;flex:0 0 auto;margin-right:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39786' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 3 2.6 15 0 18M12 3c-2.6 3-2.6 15 0 18'/%3E%3C/svg%3E") no-repeat center/ contain;opacity:.85}
.lang-switch a{font-size:13px;color:var(--muted);text-decoration:none;padding:2px 4px;border-bottom:2px solid transparent;white-space:nowrap}
.lang-switch a:hover{color:var(--accent-hover)}
.lang-switch a[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

@media (max-width:640px){
  h1{font-size:26px}
  h2{font-size:20px}
  .nav{gap:4px 12px;margin-left:0}
  .nav a{font-size:13px}
  td:first-child{width:34%}
}