/* Survival Log Wiki — palette sampled from the game's own UI
   accent #eaa404 (logo bar) · gold #f5c518 (HUD cash) · green #3f9e4d (Confirm Purchase)
   red #c0392b (siege alert) · warm charcoals #14100e → #3a322a (panels) */
:root{
  --bg:#14100e; --bg-2:#100d0b;
  --surface:#1e1a17; --surface-2:#262019; --surface-3:#2f2820;
  --border:#3a322a; --border-2:#4a4036;
  --accent:#eaa404; --accent-2:#f5c518; --accent-dim:#8a6403;
  --green:#4caf5e; --green-dark:#2f7a3c; --red:#d2493a; --blue:#5aa9d6;
  --text:#ece5da; --text-2:#c3b9ab; --muted:#9a8f80;
  --radius:10px; --maxw:1180px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Barlow Condensed","Arial Narrow",Impact,var(--font);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:17px;line-height:1.72;overflow-x:hidden;
  background-image:radial-gradient(1100px 480px at 50% -160px,rgba(234,164,4,.075),transparent 70%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);color:#1a1512;padding:10px 16px;border-radius:6px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(16,13,11,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.head-in{display:flex;align-items:center;gap:22px;min-height:62px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:200px;height:37px}
.nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.nav a{font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-2);padding:7px 11px;border-radius:6px;
  border:1px solid transparent}
.nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav a[aria-current]{color:var(--accent-2);border-color:var(--border-2);background:var(--surface-2)}
.navtoggle{display:none;margin-left:auto;background:var(--surface-2);color:var(--text);
  border:1px solid var(--border-2);border-radius:6px;padding:8px 13px;font:600 15px/1 var(--font);cursor:pointer}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:14px;color:var(--muted);padding:16px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.crumbs li::after{content:"›";margin-left:7px;color:var(--border-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--text-2)}

/* ---------- typography ---------- */
main{padding-bottom:56px}
h1{font-family:var(--display);font-size:clamp(2.15rem,5.2vw,3.15rem);line-height:1.1;
  font-weight:800;letter-spacing:-.4px;margin:.5em 0 .28em;color:#fff}
h2{font-family:var(--display);font-size:clamp(1.55rem,3.4vw,2.05rem);line-height:1.2;
  font-weight:700;margin:2.1em 0 .5em;color:#fff;
  padding-bottom:.28em;border-bottom:1px solid var(--border)}
h3{font-size:1.2rem;font-weight:700;margin:1.7em 0 .4em;color:var(--accent-2)}
h4{font-size:1.03rem;font-weight:700;margin:1.4em 0 .35em;color:var(--text)}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.35em}
li{margin:.4em 0}
strong{color:#fff;font-weight:650}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);
  border:1px solid var(--border);border-radius:4px;padding:.1em .38em}
hr{border:0;border-top:1px solid var(--border);margin:2.4em 0}
.lede{font-size:1.14rem;color:var(--text-2)}
.byline{font-size:13.5px;color:var(--muted);margin:0 0 1.6em;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.byline .dot{color:var(--border-2)}

/* ---------- quick answer ---------- */
.qa{background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-2);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 1.8em}
.qa h2,.qa h3{font-family:var(--display);font-size:1.02rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--accent);margin:0 0 .5em;border:0;padding:0}
.qa p:last-child{margin-bottom:0}

/* ---------- callouts ---------- */
.note,.warn,.tip{border-radius:var(--radius);padding:15px 19px;margin:1.5em 0;
  border:1px solid var(--border-2);background:var(--surface);font-size:16px}
.note{border-left:4px solid var(--blue)}
.warn{border-left:4px solid var(--red)}
.tip{border-left:4px solid var(--green)}
.note p:last-child,.warn p:last-child,.tip p:last-child{margin-bottom:0}
.note b,.warn b,.tip b{display:block;margin-bottom:.25em}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:1.5em 0;border:1px solid var(--border);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px;background:var(--surface)}
caption{caption-side:top;text-align:left;padding:12px 16px;font-size:14px;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--border)}
th,td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
thead th{background:var(--surface-3);color:var(--accent-2);font-family:var(--display);
  font-size:15px;letter-spacing:.9px;text-transform:uppercase;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(255,255,255,.016)}
td.num{font-family:var(--mono);font-size:14.5px;white-space:nowrap;color:var(--accent-2)}
.yes{color:var(--green);font-weight:600}
.no{color:var(--red);font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;border:1px solid var(--border-2);border-radius:14px;overflow:hidden;
  margin:20px 0 8px;background:var(--surface)}
.hero img{width:100%;aspect-ratio:2.3/1;object-fit:cover;object-position:center 42%;opacity:.46}
.hero-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,4vw,48px);
  background:linear-gradient(90deg,rgba(16,13,11,.96) 0%,rgba(16,13,11,.82) 48%,rgba(16,13,11,.62) 100%)}
.hero h1{margin:0 0 .3em}
.hero p{max-width:62ch;color:var(--text-2);margin:0}
.eyebrow{font-family:var(--display);font-size:14px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin:0 0 .3em}

/* ---------- cards ---------- */
.grid{display:grid;gap:15px;margin:1.6em 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.card{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:17px 19px;color:var(--text);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent-dim);text-decoration:none;transform:translateY(-2px)}
.card h3{margin:0 0 .3em;font-size:1.06rem;color:var(--accent-2)}
.card p{margin:0;font-size:14.8px;color:var(--text-2);line-height:1.6}
.card .kw{display:block;margin-top:.6em;font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* ---------- figures ---------- */
figure{margin:1.8em 0;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--surface)}
figure img{width:100%}
figcaption{padding:11px 16px;font-size:14px;color:var(--muted);border-top:1px solid var(--border);
  background:var(--surface-2)}
.media-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:1.6em 0}
.media-strip figure{margin:0}
.trailer{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--radius);padding:16px;margin:1.6em 0}
.trailer img{width:min(300px,100%);border-radius:6px}
.trailer div{flex:1 1 260px}

/* ---------- fact list / key facts ---------- */
.keyfacts{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius);
  padding:20px 24px;margin:2.2em 0 0}
.keyfacts h2{font-family:var(--display);font-size:1.16rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--accent);margin:0 0 .55em;border:0;padding:0}
.keyfacts ul{margin:0;padding-left:1.2em;font-size:15.6px;color:var(--text-2)}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);margin:9px 0;overflow:hidden}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:650;color:#fff;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.35rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq .a{padding:14px 18px;color:var(--text-2);font-size:16px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- pills / badges ---------- */
.pills{display:flex;flex-wrap:wrap;gap:7px;margin:1.1em 0}
.pill{font-family:var(--display);font-size:13.5px;letter-spacing:.9px;text-transform:uppercase;
  background:var(--surface-2);border:1px solid var(--border-2);color:var(--text-2);
  padding:4px 11px;border-radius:100px}
.pill.on{background:rgba(234,164,4,.13);border-color:var(--accent-dim);color:var(--accent-2)}

/* ---------- steps ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:1.5em 0}
.steps>li{counter-increment:s;position:relative;padding:0 0 0 46px;margin:0 0 1.05em}
.steps>li::before{content:counter(s);position:absolute;left:0;top:1px;width:31px;height:31px;
  border-radius:50%;background:var(--surface-3);border:1px solid var(--accent-dim);color:var(--accent-2);
  font-family:var(--display);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.steps>li b{display:block;color:#fff}

/* ---------- prev/next + related ---------- */
.related{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 22px;margin:2.4em 0 0}
.related h2{margin:0 0 .5em;border:0;padding:0;font-size:1.16rem}
.related ul{margin:0;padding-left:1.2em;font-size:16px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--border);background:var(--bg-2);margin-top:auto;padding:42px 0 30px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:28px}
.foot-grid h2{font-family:var(--display);font-size:15px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--accent);margin:0 0 .7em;border:0;padding:0}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:15px}
.foot-grid li{margin:.34em 0}
.foot-grid a{color:var(--text-2)}
.foot-grid a:hover{color:var(--accent-2)}
.foot-bot{margin-top:32px;padding-top:22px;border-top:1px solid var(--border);
  font-size:13.8px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.foot-bot p{margin:0;max-width:74ch}
.ext::after{content:"↗";font-size:.78em;margin-left:3px;color:var(--muted);vertical-align:super}

@media (max-width:860px){
  body{font-size:16.5px}
  .navtoggle{display:block}
  .nav{display:none;order:3;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--border);padding:8px 0 12px;margin:0}
  .nav.open{display:flex}
  .nav a{padding:11px 8px;border-radius:0;font-size:17px}
  .head-in{flex-wrap:wrap;gap:12px}
  .brand img{width:172px;height:32px}
  .hero img{aspect-ratio:4/3}
  .hero-in{background:linear-gradient(180deg,rgba(16,13,11,.72),rgba(16,13,11,.96))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}

/* ad slot */
.adslot{margin:36px 0 8px;min-height:90px;display:block}
.adslot>div{margin:0 auto}