:root{
  --bg:#0E1014; --bg2:#12151B; --panel:#171B22; --panel2:#1E232C;
  --fg:#E9ECF1; --muted:#96A1B1;
  --line:rgba(233,236,241,.11); --line2:rgba(233,236,241,.20);
  --accent:#E8A33D; --accent-fg:#171208; --accent2:#4FD1C5;
  --warn:#E4664B; --ok:#5FC08A;
  --r:3px; --notch:14px; --maxw:1180px;
  --fh:'Barlow Condensed','Oswald','Arial Narrow','Segoe UI',sans-serif;
  --fb:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip, NOT hidden: `hidden` on html/body silently makes the sticky header
   stop sticking (it turns the root into a scroll container). `clip` trims the same
   overflow without creating one. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--fb);
  overflow-x:clip;max-width:100%;
}
/* nothing on this site may push the document wider than the viewport; wide content
   (tables, the game grid) scrolls inside its own container instead. */
header.site,main,footer.site,section{max-width:100vw}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

.wrap{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 20px;min-width:0}

/* ---------- chiselled corner: the site's one structural signature ---------- */
.notch{
  clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),
                    calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
}

/* ---------- headings ---------- */
h1,h2,h3,h4{font-family:var(--fh);font-weight:600;line-height:1.1;letter-spacing:.4px;margin:0 0 .5em}
h1{font-size:clamp(30px,4.4vw,50px);text-transform:none}
h2{font-size:clamp(23px,2.8vw,33px);text-transform:uppercase;letter-spacing:1.1px}
h3{font-size:clamp(18px,2vw,22px)}
h2::before{
  content:"";display:inline-block;width:16px;height:3px;background:var(--accent);
  vertical-align:middle;margin-right:11px;transform:translateY(-3px);
}
.lead{color:var(--muted);font-size:17px;max-width:74ch;margin:0 0 18px}
p{margin:0 0 15px;max-width:78ch}
ul,ol{margin:0 0 16px;padding-left:20px;max-width:78ch}
li{margin:0 0 7px}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:40;background:rgba(14,16,20,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line);
}
header.site .bar{display:flex;align-items:center;gap:18px;height:66px;min-width:0}
.logo{display:flex;align-items:center;gap:11px;color:var(--fg);text-decoration:none;flex:0 0 auto}
.logo .mark{
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;
  font:600 16px/1 var(--fh);letter-spacing:.5px;
  background:linear-gradient(155deg,#3A3227 0%,#20242C 62%);
  color:var(--accent);border:1px solid var(--line2);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.logo b{font:600 19px/1.05 var(--fh);letter-spacing:.6px;display:block}
.logo small{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.7px;text-transform:uppercase}
nav.main{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap;min-width:0}
nav.main a{
  color:var(--muted);font:500 13.5px/1 var(--fb);padding:9px 11px;border-radius:var(--r);
  white-space:nowrap;
}
nav.main a:hover{color:var(--fg);background:var(--panel);text-decoration:none}
nav.main a.akt{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
.headcta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:10px;flex:0 0 auto}
.headcta .btn{margin:0}
.adnote.mini{margin:0;font-size:10px;letter-spacing:.1px;white-space:nowrap}
.adnote.mini b{font-size:9px;padding:1px 4px;margin-right:4px}
.navtoggle{display:none}

/* ---------- buttons: R34 - filled = affiliate, ghost = internal ---------- */
.btns{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin:18px 0}
.btn{
  display:inline-block;font:600 14px/1 var(--fb);padding:13px 20px;border-radius:var(--r);
  cursor:pointer;border:1px solid transparent;letter-spacing:.2px;
}
.btn-primary{
  background:var(--accent);color:var(--accent-fg);border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px -8px rgba(232,163,61,.8);
}
.btn-primary:hover{background:#F2B355;text-decoration:none}
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--line2)}
.btn-secondary:hover{border-color:var(--fg);text-decoration:none}
.adnote{
  display:block;font-size:12px;color:var(--muted);letter-spacing:.2px;
  margin:-6px 0 4px;
}
.adnote b{
  color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.9px;
  font-size:10.5px;border:1px solid rgba(232,163,61,.4);padding:2px 5px;margin-right:5px;
}

/* ---------- sections + strata ---------- */
section{padding:42px 0}
section[id]{scroll-margin-top:84px}   /* the sticky header must not eat an anchored heading */
section.tight{padding:0 0 30px}       /* an evidence frame belongs to the prose above it */
section.band.tight{padding-top:0}
section.band{
  background:var(--bg2);
  border-top:1px solid var(--line);
  box-shadow:inset 0 3px 0 -1px rgba(232,163,61,.13);
}
section.hero{
  padding:56px 0 44px;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(232,163,61,.13) 0%,transparent 58%),
    repeating-linear-gradient(178deg,rgba(233,236,241,.030) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#12151B 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero .kick{
  display:inline-block;font:600 11.5px/1 var(--fb);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(232,163,61,.35);padding:7px 11px;margin-bottom:16px;
}
.hero h1{max-width:20ch}
.hero .grid{display:grid;grid-template-columns:1.35fr .95fr;gap:34px;align-items:start}
/* grid and flex children default to min-width:auto, which lets a min-width table push
   the whole track past the viewport. Every track on this site may shrink; wide content
   scrolls inside .tablewrap instead. */
.hero .grid > *,.cards > *,.pc > *,.games > *,footer.site .cols > *{min-width:0}

/* ---------- panels / cards ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:22px;max-width:100%}
.panel.tight{padding:16px 18px}
.cards{display:grid;gap:16px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);padding:20px}
.card h3{margin-bottom:8px}
.card p{margin-bottom:0;color:var(--muted);font-size:14.5px}

/* offer tiers */
.tier{background:var(--panel);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column}
.tier .tname{font:600 12px/1 var(--fb);letter-spacing:1.5px;text-transform:uppercase;color:var(--accent2);margin-bottom:12px}
.tier .thead{font-family:var(--fh);font-size:27px;line-height:1.12;margin-bottom:10px}
.tier .tdetail{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.tier .tterms{font-size:13px;color:var(--muted);border-top:1px dashed var(--line2);padding-top:11px;margin-top:auto}
.tier.gap .thead{color:var(--warn)}

/* ---------- facts table ---------- */
.tablewrap{
  overflow-x:auto;border:1px solid var(--line);background:var(--panel);
  max-width:100%;width:100%;-webkit-overflow-scrolling:touch;
}
table{border-collapse:collapse;width:100%;min-width:0;font-size:14.5px}
.tablewrap.wide table{min-width:560px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:var(--panel2);font:600 11.5px/1.3 var(--fb);letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(233,236,241,.022)}
td.k{color:var(--muted);width:34%;white-space:nowrap}
td .na{color:var(--warn);font-style:italic}

/* ---------- attribution chip + gap callout (the truth furniture) ---------- */
.src{
  display:inline-block;font:500 11.5px/1.5 var(--fb);color:var(--muted);
  border-left:2px solid var(--accent2);padding:2px 0 2px 9px;margin:4px 0 0;
}
.src a{color:var(--accent2)}
.srcline{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.callout{
  border:1px solid var(--line2);border-left:3px solid var(--accent);
  background:var(--panel);padding:16px 18px;margin:18px 0;
}
.callout.gap{border-left-color:var(--warn)}
.callout.gap h3{color:var(--warn)}
.callout h3{font-size:17px;margin-bottom:7px}
.callout p:last-child{margin-bottom:0}

/* ---------- pros / cons ---------- */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{position:relative;padding-left:24px;margin-bottom:9px;font-size:14.5px}
.pc li::before{position:absolute;left:0;top:0;font-weight:700}
.pc .pros li::before{content:"+";color:var(--ok)}
.pc .cons li::before{content:"\2212";color:var(--warn)}
.pc h3{font-size:16px}

/* ---------- steps ---------- */
ol.steps{list-style:none;padding:0;counter-reset:s;max-width:none}
ol.steps li{
  counter-increment:s;position:relative;padding:0 0 0 52px;margin-bottom:18px;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font:600 20px/1 var(--fh);color:var(--accent);
  border:1px solid var(--line2);width:36px;height:36px;display:grid;place-items:center;
}
ol.steps b{display:block;font-family:var(--fh);font-size:18px;font-weight:600;letter-spacing:.3px}
ol.steps span{color:var(--muted);font-size:14.5px}

/* ---------- game grid ---------- */
.games{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.game{background:var(--panel);border:1px solid var(--line);overflow:hidden}
.game .shot{aspect-ratio:1 / 1;background:var(--panel2);overflow:hidden}
.game .shot img{width:100%;height:100%;object-fit:cover}
.game .meta{padding:10px 11px}
.game .gname{font:600 13.5px/1.25 var(--fb);display:block;margin-bottom:3px}
.game .gprov{font-size:11.5px;color:var(--muted);display:block}
.game .gnum{font-size:11.5px;color:var(--accent2);display:block;margin-top:5px;letter-spacing:.3px}

/* ---------- screenshots ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line)}
.shots figure > div{aspect-ratio:16 / 11;overflow:hidden;background:var(--panel2)}
.shots img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shots figcaption{padding:11px 13px;font-size:12.5px;color:var(--muted)}
.shots .void > div{display:grid;place-items:center;color:var(--muted);font-size:13px;text-align:center;padding:20px}

/* R56: a single frame placed in the section it evidences */
figure.shot-inline{
  margin:20px 0 0;background:var(--panel);border:1px solid var(--line);max-width:760px;
}
figure.shot-inline > div{aspect-ratio:16 / 11;overflow:hidden;background:var(--panel2)}
figure.shot-inline img{width:100%;height:100%;object-fit:cover;object-position:top left}
figure.shot-inline figcaption{padding:12px 15px;font-size:12.5px;color:var(--muted)}
/* `side` is a secondary frame, but a full-page capture still has to be legible - below
   about 700px a screenshot of a dark page reads as a grey rectangle. */
figure.shot-inline.side{max-width:700px}
/* a logo strip is a banner, not a page view - keep its own proportions */
figure.shot-inline.band{max-width:none}
figure.shot-inline.band > div{aspect-ratio:auto}
figure.shot-inline.band img{height:auto;object-fit:contain}

/* ---------- faq ---------- */
details.faq{border:1px solid var(--line);background:var(--panel);margin-bottom:10px}
details.faq > summary{
  cursor:pointer;padding:15px 18px;font:600 15.5px/1.4 var(--fb);list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{content:"+";color:var(--accent);font-size:19px;line-height:1}
details.faq[open] > summary::after{content:"\2212"}
details.faq .a{padding:0 18px 16px;color:var(--muted);font-size:14.5px}
details.faq .a p:last-child{margin-bottom:0}

/* ---------- author ---------- */
.byline{display:flex;align-items:center;gap:13px;margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.medal{
  width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;
  font:600 16px/1 var(--fh);letter-spacing:1px;color:var(--accent);
  background:linear-gradient(155deg,#3A3227 0%,#20242C 62%);border:1px solid var(--line2);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.medal.big{width:82px;height:82px;flex-basis:82px;font-size:27px}
.byline b{color:var(--fg);display:block;font-size:14.5px}
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0;list-style:none}
.pills li{
  font-size:12.5px;color:var(--muted);border:1px solid var(--line);padding:6px 11px;margin:0;
}

/* author page: a proper article column, not a byline stretched across the grid */
.authorhead{align-items:flex-start;gap:22px;margin:0 0 6px}
.authorhead h1{color:var(--fg);margin:0 0 6px;font-size:clamp(28px,3.6vw,42px)}
.authorhead > span:last-child{flex:1 1 auto;min-width:0}
.authorhead b{color:var(--fg)}
.authorpage{max-width:78ch}
.authorpage h2{font-size:clamp(19px,2.1vw,25px);margin-top:34px}
.authorpage ul{margin-bottom:22px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--bg2);padding:40px 0 26px;margin-top:10px}
footer.site .cols{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:26px}
footer.site h4{font:600 11.5px/1 var(--fb);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 13px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px;font-size:13.5px}
footer.site a{color:var(--fg)}
footer.site a:hover{color:var(--accent)}
.agebadge{
  display:inline-grid;place-items:center;min-width:46px;height:28px;padding:0 9px;
  border:1px solid var(--warn);color:var(--warn);font:600 12.5px/1 var(--fb);letter-spacing:.6px;
  margin-bottom:11px;
}
.legal{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:12.5px;color:var(--muted)}
.legal p{max-width:none}

/* ---------- breadcrumbs / meta line ---------- */
.crumbbar{border-bottom:1px solid var(--line);background:var(--bg2)}
.crumbbar .wrap{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  padding:11px 20px;font-size:12.5px;color:var(--muted);
}
.crumbbar a{color:var(--muted)}
.crumbbar a:hover{color:var(--fg)}
.crumbbar .updated{margin-left:auto;white-space:nowrap}
.crumbbar .updated::before{
  content:"";display:inline-block;width:6px;height:6px;background:var(--ok);
  border-radius:50%;margin-right:7px;vertical-align:middle;
}
.toc{margin:0 0 6px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.toc li{margin:0}
.toc a{font-size:12.5px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;display:block}
.toc a:hover{color:var(--fg);border-color:var(--line2);text-decoration:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .games{grid-template-columns:repeat(4,1fr)}
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr 1fr}
  .hero .grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  section{padding:32px 0}
  .cards.c3,.cards.c2{grid-template-columns:1fr}
  .pc{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .games{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
  header.site .bar{height:auto;flex-wrap:wrap;padding:11px 20px;gap:10px}
  nav.main{
    order:3;width:100%;max-width:100%;margin-left:0;overflow-x:auto;
    flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  nav.main::-webkit-scrollbar{display:none}
  header.site .btn{margin-left:auto;padding:11px 15px;font-size:13px}
  h2::before{width:12px;margin-right:8px}
  p,ul,ol,.lead{max-width:100%}
  .crumbbar .updated{margin-left:0}

  /* Two-column fact tables STACK on a phone. A key/value table squeezed into 375px
     gives a value column one character wide - the row has to become two rows. Real
     multi-column tables (.tablewrap.wide) keep their shape and scroll instead. */
  .tablewrap:not(.wide) table,
  .tablewrap:not(.wide) tbody,
  .tablewrap:not(.wide) tr,
  .tablewrap:not(.wide) td{display:block;width:auto}
  .tablewrap:not(.wide) tr{
    padding:11px 14px;border-bottom:1px solid var(--line);
  }
  .tablewrap:not(.wide) tr:last-child{border-bottom:0}
  .tablewrap:not(.wide) td{
    border:0;padding:0;white-space:normal;
  }
  .tablewrap:not(.wide) td.k{
    width:auto;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;
    margin-bottom:3px;
  }
  .tablewrap:not(.wide) tbody tr:nth-child(even){background:rgba(233,236,241,.022)}
}
@media (max-width:420px){
  .games{grid-template-columns:1fr 1fr;gap:10px}
  .logo small{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}