@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root{
  /* --- exactly the tokens block of _engine/sites/unionbet.json --- */
  --bg:#F2F1ED; --bg2:#E8E6DE; --panel:#FFFFFF; --panel2:#F8F7F3;
  --fg:#14181D; --muted:#5E6570;
  --line:rgba(20,24,29,.12); --line2:rgba(20,24,29,.26);
  --accent:#1B4D8F; --accent-fg:#FFFFFF; --accent2:#7F5F2A;
  --warn:#B3261E; --ok:#1E6E4B;
  --r:2px; --notch:14px; --maxw:1120px;
  --fh:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
  --fb:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --ar:3 / 2;

  /* --- derived roles. Kept HERE so no colour literal ever appears in a rule below. --- */
  --mast:#14181D;              /* dark masthead plate: the ink token as a field */
  --mast-fg:#FFFFFF;
  --mast-muted:rgba(255,255,255,.70);
  --mast-line:rgba(255,255,255,.16);
  --accent-soft:rgba(27,77,143,.08);
  --accent-line:rgba(27,77,143,.34);
  --bronze-soft:rgba(140,106,47,.12);
  --bronze-line:rgba(140,106,47,.55);
  --warn-soft:rgba(179,38,30,.09);
  --ok-soft:rgba(30,110,75,.09);
  --ink-04:rgba(20,24,29,.04);
  /* A light chassis has no glow to lean on: separation is 1px + a very soft shadow. */
  --sh-1:0 1px 0 rgba(20,24,29,.04);
  --sh-2:0 1px 1px rgba(20,24,29,.05), 0 8px 20px -14px rgba(20,24,29,.42);
  --sh-3:0 1px 1px rgba(20,24,29,.06), 0 18px 40px -26px rgba(20,24,29,.55);
  /* clip-path erases box-shadow, so chamfered boxes carry their depth as a filter */
  --dsh:drop-shadow(0 1px 1px rgba(20,24,29,.06)) drop-shadow(0 8px 14px rgba(20,24,29,.10));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 var(--fb);
  font-variant-numeric:tabular-nums;
  /* R27: `hidden` here silently creates a scroll container and kills every
     position:sticky descendant. `clip` stops the same horizontal overflow
     without becoming a scroll container, so sticky keeps working. */
  overflow-x:clip;
  /* A short page (404) ended above the fold and left a band of shell colour below the
     dark footer. Push the footer to the bottom of the viewport instead. */
  min-height:100vh;display:flex;flex-direction:column;
}
body > main{flex:1 0 auto}
body > footer.site{flex-shrink:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
::selection{background:var(--accent);color:var(--accent-fg)}

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

/* ---------- the chamfer: one structural signature, the base of a shield ----------
   Both BOTTOM corners are cut. Deliberately NOT the diagonal top-right / bottom-left
   pair another skin in this network uses - that reads as a torn ticket stub; a pair of
   cut feet reads as the base of a shield, which is the register this site is in. */
.notch{
  clip-path:polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch)));
  filter:var(--dsh);
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--fh);line-height:1.14;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.015em;line-height:1.08}
h2{
  font-size:clamp(23px,2.6vw,31px);font-weight:600;
  position:relative;border-top:1px solid var(--bronze-line);
  padding-top:16px;margin:0 0 .55em;
}
/* the seal: a short azure bar stamped onto the bronze registration rule */
h2::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:3px;background:var(--accent)}
h3{font-size:clamp(17px,1.8vw,20px);font-weight:600;position:relative;padding-left:15px}
/* the pennant: bronze, with the same chamfered foot as the panels */
h3::before{
  content:"";position:absolute;left:0;top:.2em;width:5px;height:.92em;background:var(--accent2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),50% 100%,0 calc(100% - 4px));
}
h4{
  font-size:12px;font-weight:600;font-variant:small-caps;letter-spacing:.10em;
  color:var(--muted);
}
.lead{color:var(--muted);font-size:17.5px;line-height:1.6;max-width:70ch;margin:0 0 18px}
p{margin:0 0 15px;max-width:74ch}
ul,ol{margin:0 0 16px;padding-left:20px;max-width:74ch}
li{margin:0 0 7px}
strong,b{font-weight:600}

/* ---------- header: the dark masthead over the light body ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:var(--mast);
  color:var(--mast-fg);
  border-bottom:3px solid var(--accent2);
  box-shadow:var(--sh-2);
}
header.site .bar{display:flex;align-items:center;gap:16px;min-height:66px;padding-top:9px;padding-bottom:9px}
.logo{display:flex;align-items:center;gap:11px;color:var(--mast-fg);text-decoration:none;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo .mark{
  width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  font:600 14px/1 var(--fh);letter-spacing:.08em;
  color:var(--accent-fg);background:var(--accent);
  border:1px solid var(--bronze-line);
  --notch:9px;overflow:hidden;
}
/* a real emblem carries its own colour: the azure plate steps aside, the bronze rim stays */
.logo .mark.has-emblem{background:var(--panel)}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo b{font:700 20px/1.1 var(--fh);letter-spacing:-.01em;display:block}
.logo small{
  display:block;font:500 10px/1.4 var(--fb);color:var(--mast-muted);
  letter-spacing:.09em;text-transform:uppercase;margin-top:2px;
}
nav.main{display:flex;gap:2px;margin-left:auto;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{
  color:var(--mast-muted);font:500 13px/1 var(--fb);padding:11px 9px;border-radius:var(--r);
  white-space:nowrap;flex:0 0 auto;
}
nav.main a:hover{color:var(--mast-fg);background:var(--mast-line);text-decoration:none}
nav.main a.akt{color:var(--mast-fg);box-shadow:inset 0 -2px 0 var(--accent2)}
/* The masthead has to fit a 7-item nav AND a labelled CTA at 1120px of content: the CTA
   block is kept deliberately compact so nav items are not pushed into the scroller. */
.headcta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto;margin-left:12px}
header.site .btn{flex:0 0 auto;padding:12px 15px;font-size:13.5px}
header.site .adnote.mini{
  font-size:10px;line-height:1.35;color:var(--mast-muted);
  max-width:34ch;text-align:right;
}
header.site .adnote.mini b{color:var(--mast-fg);border-color:var(--mast-line)}

/* ---------- buttons: R34 - the filled azure one is the money button ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}
.btn{
  display:inline-block;font:600 14.5px/1 var(--fb);padding:15px 24px;border-radius:var(--r);
  cursor:pointer;border:1px solid transparent;letter-spacing:.01em;max-width:100%;
}
.btn-primary{
  background:var(--accent);color:var(--accent-fg);border-color:var(--accent);
  box-shadow:0 1px 0 var(--bronze-line), var(--sh-2);
}
.btn-primary:hover{background:var(--fg);border-color:var(--fg);color:var(--accent-fg);text-decoration:none}
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--line2);box-shadow:none;font-weight:500}
.btn-secondary:hover{border-color:var(--fg);background:var(--ink-04);text-decoration:none}
.adnote{font-size:12px;color:var(--muted);letter-spacing:.01em;line-height:1.45;max-width:38ch}
.adnote b{
  color:var(--accent2);font-weight:600;font-variant:small-caps;font-size:11.5px;
  letter-spacing:.10em;border:1px solid var(--bronze-line);padding:1px 6px;margin-right:5px;
  border-radius:var(--r);
}

/* ---------- sections: hero -> alternating plain/band -> trust -> FAQ (R43) ----------
   No divider after every block. The band IS the separation; the bronze rule belongs
   to the heading, not to the gap. */
section{padding:52px 0}
section.band{background:var(--bg2);box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
section.tight{padding:0 0 46px}
section.tight.band{padding:34px 0 46px}

/* ---------- hero: the charter plate ---------- */
section.hero{
  padding:60px 0 54px;
  background:
    linear-gradient(180deg,var(--bg) 0%,var(--panel2) 100%),
    var(--bg);
  border-bottom:1px solid var(--line2);
}
.hero .grid{display:grid;grid-template-columns:1.22fr .78fr;gap:40px;align-items:start}
.hero .kick{
  display:inline-block;font:600 11.5px/1 var(--fb);font-variant:small-caps;
  letter-spacing:.16em;color:var(--accent2);padding:0 0 9px;margin:0 0 16px;
  border-bottom:1px solid var(--bronze-line);
}
.hero h1{max-width:17ch;margin-bottom:.35em}
.hero .lead{font-size:18.5px;color:var(--fg);opacity:.86;max-width:56ch}
.hero .panel{box-shadow:none;filter:var(--dsh)}
.hero .panel h3{margin-bottom:14px}
.hero .tablewrap{border:0;background:transparent;box-shadow:none}
.hero table{font-size:14px}
.hero .btns{margin:22px 0 10px}

/* ---------- panels / cards: white on limestone, 1px + a very soft shadow ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:26px;box-shadow:var(--sh-2)}
.panel.notch{box-shadow:none}
.panel h3{margin-bottom:12px}
.panel > :last-child{margin-bottom:0}
.cards{display:grid;gap:18px}
.cards.c1{grid-template-columns:minmax(0,620px)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}

/* offer tiers */
.tier{
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);
  padding:24px;display:flex;flex-direction:column;
}
.tier.notch{filter:var(--dsh)}
.tier .tname{
  font:600 11.5px/1 var(--fb);font-variant:small-caps;letter-spacing:.13em;
  color:var(--accent2);margin-bottom:14px;align-self:flex-start;
  border-bottom:1px solid var(--bronze-line);padding-bottom:9px;
}
.tier .thead{font-family:var(--fh);font-size:27px;font-weight:700;line-height:1.12;margin-bottom:10px}
.tier .tdetail{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.tier .tterms{
  font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);
  padding-top:12px;margin-top:auto;
}
.tier.gap{border-top-color:var(--warn);background:var(--panel)}
.tier.gap .tname{color:var(--warn);border-bottom-color:var(--warn)}
.tier.gap .thead{color:var(--warn)}

/* ---------- tables: a first-class citizen on this site ---------- */
.tablewrap{
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-2);
  max-width:100%;
}
/* only a real multi-column table keeps a minimum and scrolls; a two-column fact table
   must wrap and stay readable inside a narrow sidebar panel */
/* A wide table scrolls inside itself. Without an affordance that reads as "broken
   rendering", not "swipe me" - a column sliced to one glyph looks like a bug. These are
   `background-attachment:local` scroll shadows: the fade appears ONLY on the side that
   still has hidden content, and disappears when you reach the end. */
.tablewrap.wide{
  overflow-x:auto;
  scrollbar-width:thin;
  background:
    linear-gradient(to right,var(--panel),rgba(255,255,255,0)) left center/22px 100% no-repeat local,
    linear-gradient(to left, var(--panel),rgba(255,255,255,0)) right center/22px 100% no-repeat local,
    linear-gradient(to right,rgba(20,24,29,.17),rgba(20,24,29,0)) left center/13px 100% no-repeat scroll,
    linear-gradient(to left, rgba(20,24,29,.17),rgba(20,24,29,0)) right center/13px 100% no-repeat scroll,
    var(--panel);
}
.tablewrap.wide table{min-width:min(100%,700px)}
table{border-collapse:collapse;width:100%;font-size:14.5px;font-variant-numeric:tabular-nums}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:var(--panel2);color:var(--fg);
  font:600 12px/1.3 var(--fb);font-variant:small-caps;letter-spacing:.10em;
  border-bottom:2px solid var(--accent2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--panel2)}
td.k{color:var(--muted);width:34%;font-weight:500}
.na{color:var(--muted);font-style:italic}

/* ---------- attribution + callouts (truth furniture) ---------- */
.src{
  display:block;font:400 12px/1.55 var(--fb);color:var(--muted);
  border-left:2px solid var(--accent2);padding:2px 0 2px 11px;margin:10px 0 0;max-width:74ch;
}
.src a{color:var(--accent)}
.srcline{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.callout{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--accent-soft);padding:18px 22px;margin:20px 0;
}
.callout h3{font-size:16px;margin-bottom:8px}
.callout h3::before{background:var(--accent)}
.callout p:last-child{margin-bottom:0}
.callout.gap{border-left-color:var(--warn);background:var(--warn-soft)}
.callout.gap h3{color:var(--warn)}
.callout.gap h3::before{background:var(--warn)}
/* R27: --muted is tuned for the limestone shell and the white panel, but a callout
   sits on a TINTED ground, where the same grey drops to 4.10:1. Attribution inside a
   callout gets its own darker grey (5.50:1) instead of weakening the token everywhere. */
.callout .src,.callout .srcline{color:#4C525B}

/* ---------- pros / cons ---------- */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pc .panel{padding:24px}
.pc h3{font-size:16px}
.pc .pros{border-top:3px solid var(--ok)}
.pc .cons{border-top:3px solid var(--warn)}
.pc .pros h3{color:var(--ok)}
.pc .pros h3::before{background:var(--ok)}
.pc .cons h3{color:var(--warn)}
.pc .cons h3::before{background:var(--warn)}
.pc ul{list-style:none;padding:0;margin:0;max-width:none}
.pc li{position:relative;padding-left:24px;margin-bottom:10px;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)}

/* ---------- steps: numbered like clauses of a charter ---------- */
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 56px;margin-bottom:20px}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;
  width:38px;height:38px;display:grid;place-items:center;
  font:600 15px/1 var(--fh);color:var(--accent);
  background:var(--panel);border:1px solid var(--line2);border-bottom:2px solid var(--accent2);
}
ol.steps b{display:block;font-family:var(--fh);font-size:18px;font-weight:600;line-height:1.25;margin-bottom:2px}
ol.steps span{color:var(--muted);font-size:14.5px}

/* ---------- game grid ----------
   Covers are locked to 3/2, the ratio every cover in this pool is actually stored at
   (300x200 / 640x426 / 390x254). A 1/1 box crops straight through the game titles. */
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.game-link{display:block;min-width:0}
.game{background:var(--panel);border:1px solid var(--line);overflow:hidden;height:100%}
.game.notch{filter:var(--dsh)}
.game-link:hover .game{border-color:var(--accent-line)}
.game .shot{aspect-ratio:var(--ar);background:var(--panel2);overflow:hidden}
.game .shot img{width:100%;height:100%;object-fit:cover}
.game .meta{padding:11px 12px 13px}
.game .gname{font:600 13.5px/1.3 var(--fb);display:block;margin-bottom:3px;color:var(--fg)}
.game .gprov{font-size:11.5px;color:var(--muted);display:block}
.game .gnum{font-size:11.5px;color:var(--accent2);display:block;margin-top:6px}

/* ---------- screenshots ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line)}
.shots figure.notch{filter:var(--dsh)}
.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 15px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
/* an honest gap, not a broken image */
.shot.void{background:transparent;border:1px dashed var(--line2);filter:none}
.shot.void > div{
  display:grid;place-items:center;color:var(--muted);font-size:13px;font-style:italic;
  text-align:center;padding:20px;background:transparent;
}
/* R56: one frame placed inside the section whose claim it evidences */
.shot-inline{margin:22px 0;background:var(--panel);border:1px solid var(--line);max-width:min(100%,840px)}
.shot-inline.notch{filter:var(--dsh)}
.shot-inline > div{aspect-ratio:16 / 11;overflow:hidden;background:var(--panel2)}
.shot-inline img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shot-inline figcaption{padding:11px 15px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.shot-inline.band > div{aspect-ratio:1440 / 226}
.shot-inline.side{float:right;width:min(46%,470px);margin:6px 0 18px 26px}

/* ---------- faq ---------- */
details.faq{border:1px solid var(--line);background:var(--panel);margin-bottom:10px;box-shadow:var(--sh-1)}
details.faq > summary{
  cursor:pointer;padding:16px 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(--accent2);font-size:19px;line-height:1;font-weight:600}
details.faq[open] > summary{color:var(--accent);border-bottom:1px solid var(--line)}
details.faq[open] > summary::after{content:"\2212"}
details.faq .a{padding:15px 18px 17px;color:var(--muted);font-size:14.5px}
details.faq .a p:last-child{margin-bottom:0}

/* ---------- authors ---------- */
.byline{display:flex;align-items:center;gap:15px;margin:24px 0 0;font-size:13.5px;color:var(--muted)}
.byline b{color:var(--fg);display:block;font-size:14.5px;font-weight:600}
.byline b a{color:var(--fg)}
.medal{
  width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;
  font:700 16px/1 var(--fh);letter-spacing:.06em;color:var(--accent);
  background:var(--panel);border:1px solid var(--bronze-line);
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line);
  overflow:hidden;border-radius:50%;
}
.medal img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.medal.big{width:92px;height:92px;flex-basis:92px;font-size:29px}
.medal.has-portrait{background:var(--panel2)}
.authorphoto{margin:0 0 28px;max-width:420px;background:var(--panel);border:1px solid var(--line)}
/* On a wide screen the portrait capped at 420px left ~760px of empty shell beside it,
   reading as an unfinished second column. Pair it with the text instead. */
@media (min-width:900px){
  .wrap:has(> .authorphoto){display:grid;grid-template-columns:340px minmax(0,1fr);gap:36px;align-items:start}
  .wrap:has(> .authorphoto) > .authorphoto{margin-bottom:0;max-width:none}
}
.authorphoto.notch{filter:var(--dsh)}
.authorphoto img{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}
.authorphoto figcaption{padding:10px 13px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.authorpage > :first-child{margin-top:0}
.authorhead{align-items:flex-start;gap:22px;margin-top:0}
.authorhead > span{min-width:0}
/* .byline paints itself muted, and the author's own name inherited that - the bold
   near-black role line directly under it outshouted it. The name is the page's title. */
.authorhead h1{margin:0 0 6px;color:var(--fg)}
/* The chips sat flush against the next section's top rule (measured: identical y). */
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:15px 0 24px;list-style:none;max-width:none}
.pills li{
  font-size:12.5px;color:var(--muted);margin:0;padding:6px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
}

/* ---------- toc / crumbs / updated ---------- */
.toc{margin:0 0 6px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.toc li{margin:0}
.toc a{
  font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 13px;display:block;background:var(--panel);
}
.toc a:hover{color:var(--accent);border-color:var(--accent-line);text-decoration:none}
.crumbbar{border-bottom:1px solid var(--line);background:var(--panel2)}
/* The generator prints the crumb as loose inline pieces (a, "›", span) followed by
   .updated. A flex row here turned those pieces into separate flex items and
   space-between scattered them across the bar - so the bar stays a block and the
   stamp is floated out to the right instead. */
.crumbbar .wrap{padding-top:11px;padding-bottom:11px;font-size:12.5px;color:var(--muted);overflow:hidden}
.crumbbar a{color:var(--muted)}
.crumbbar a:hover{color:var(--accent)}
.updated{font-size:12.5px;color:var(--muted);float:right;margin-left:20px}

/* ---------- footer ---------- */
footer.site{
  border-top:3px solid var(--accent2);margin-top:0;padding:46px 0 28px;
  background:var(--mast);color:var(--mast-muted);
}
footer.site .cols{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:28px}
footer.site h4{color:var(--mast-fg);margin:0 0 13px;opacity:.72}
footer.site ul{list-style:none;padding:0;margin:0;max-width:none}
footer.site li{margin-bottom:9px;font-size:13.5px}
footer.site a{color:var(--mast-fg)}
footer.site a:hover{color:var(--mast-fg);text-decoration:underline}
footer.site .logo{margin-bottom:14px}
footer.site .srcline{font-size:12.5px;max-width:34ch;color:var(--mast-muted)}
footer.site .mark{border-color:var(--mast-line)}
.agebadge{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 9px;border-radius:50%;
  border:1px solid var(--mast-line);color:var(--mast-fg);font:600 13px/1 var(--fb);
  letter-spacing:.04em;margin-bottom:14px;
}
.legal{border-top:1px solid var(--mast-line);margin-top:34px;padding-top:20px;font-size:12.5px;color:var(--mast-muted)}
.legal p{max-width:none;margin-bottom:8px}
.legal p:last-child{margin-bottom:0}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  footer.site .cols{grid-template-columns:1fr 1fr 1fr}
  .hero .grid{grid-template-columns:1fr;gap:30px}
  .hero h1{max-width:none}
  .games{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  section{padding:36px 0}
  section.hero{padding:40px 0 36px}
  section.tight{padding:0 0 30px}
  .cards.c3,.cards.c2,.cards.c1{grid-template-columns:1fr}
  .pc{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .shot-inline.side{float:none;width:auto;margin:20px 0}
  .games{grid-template-columns:repeat(3,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
  /* Keep the gutter. A `padding:10px 0` shorthand here would override .wrap's own
     `0 20px` and run the whole masthead edge-to-edge on a phone - a defect a previous
     build in this network shipped: nav items and the ad note starting at x=0 while the
     rest of the page keeps its 20px gutter. */
  header.site .bar{min-height:0;flex-wrap:wrap;padding:10px 20px;gap:9px}
  /* On a phone the 7 sections do not fit on one line. Scrolling them hid the last two
     ("Innlogging", "App") behind a swipe with no affordance, and on those two pages the
     active-item underline sat off-screen - the reader lost the "you are here" signal
     entirely. Wrapping shows every section and keeps the active marker visible. */
  nav.main{order:3;width:100%;margin-left:0;flex-wrap:wrap;overflow-x:visible;row-gap:2px}
  .headcta{margin-left:auto}
  header.site .btn{padding:12px 15px;font-size:13.5px}
}
@media (max-width:420px){
  .games{grid-template-columns:1fr 1fr;gap:11px}
  .logo small{display:none}
  .btn{padding:13px 17px}
  .medal.big{width:70px;height:70px;flex-basis:70px;font-size:23px}
  .authorhead{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- narrow-viewport containment ----------
   Grid/flex children keep min-width:auto by default, so a facts table or a long CTA
   label sets the column's min-content width and the hero grid outgrows .wrap. Letting
   those children shrink below content width is what makes the inner overflow-x:auto
   containers actually do their job. */
.hero .grid > *,
.pc > *,
.cards > *,
.shots > *,
.byline > span,
.authorhead > span,
.headcta,
.panel,
main,
section > .wrap{min-width:0}
nav.main{min-width:0}
.games > *{min-width:0}
/* Long unbreakable tokens: the sources block prints full URLs as its own link text and
   a single one of those is wider than a 375px viewport, so it must break mid-string.
   в›” Scope matters - applying this to td/th breaks ordinary words into "Masterc/ard".
   Cells wrap on word boundaries and the wide table scrolls instead. */
main li a,main p a,.src,.srcline,.toc a,figcaption,.adnote{overflow-wrap:anywhere}
td,th{overflow-wrap:normal;word-break:normal}

/* ---------- label/value tables stack on a phone ----------
   A two-column fact table (td.k = label, next cell = value) is technically "fine" inside
   a scroller - but the value column starts off-screen, so the reader sees a column of
   labels and no answers. This was a judge blocker on the previous satellite. Wide data
   tables carry no td.k and keep scrolling, which is correct for them. */
@media (max-width:600px){
  table tr:has(> td.k){display:block;border-bottom:1px solid var(--line);padding:10px 0}
  table tr:has(> td.k):last-child{border-bottom:0}
  td.k{display:block;width:auto;border:0;padding:0 16px 3px;font-size:11.5px;
       font-variant:small-caps;letter-spacing:.08em;color:var(--accent2)}
  td.k + td{display:block;border:0;padding:0 16px}
  tr:has(> td.k) + tr td{border-top:0}
  tbody tr:nth-child(even):has(> td.k){background:var(--panel2)}
  /* a label/value table never needs the wide-table minimum */
  .tablewrap:has(td.k) table{min-width:0}
  .tablewrap:has(td.k){overflow-x:visible}
  /* fallback for engines without :has() - auto layout beats a collapsed value column */
  table{table-layout:auto}

  /* the header ad note used to run into the viewport edge. .headcta is a flex ITEM of
     .bar and .adnote.mini is inline, so max-width/text-align had nothing to act on
     until both were given a box. */
  .headcta{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
           width:100%;min-width:0;gap:6px;margin-left:0}
  header.site .adnote.mini{display:block;width:100%;text-align:right;max-width:none;padding:0}
  .updated{float:none;display:block;margin:4px 0 0}
}