/* crowngreen-de - skin of the Crowngreen monobrand satellite (design pass, 27.10.2026)
   Brand source: crowngreen.com (geo-blocked, Wayback 20260402 raw copy; theme-color #05221e,
   brand class brand-crown-green) + the platform's own variables.css / fonts for that brand id,
   see _research\monobrand\crowngreen_de\design\DESIGN.md and SOURCES.md.
   World: "der grüne Salon" - an emerald velvet gaming salon lit by candles, a gold crown as the
   crest. Greens = the operator's --color-neutral scale (#000605 ... #004e44 ... #b5ded9);
   gold = --button-primary-bg-default (#f4e38b / #f4dd62 / #b27f2a) and --color-yellow-300/500
   (#ffd480 / #fec33e); ok/warn = --color-green-500 #43f58a / --color-red-400 #ff4040.
   The crown crest is the operator's own loader / favicon crown (loader.svg path, inlined as a
   data URI); the hero host is the operator's og:image crop (assets/brand/host.jpg).
   Type: Outfit (the brand build's --font-sans) for headings and running text, Jost 600 for
   buttons, labels and navigation (the brand's button font). Pills 30px = the brand's
   rounded-[30px] buttons; cards 12px = --border-radius-xl. */
:root{
  --bg:#000e0d; --bg2:#051413; --panel:#05221e; --panel2:#082521; --panel3:#00302a; --surface:#004139; --surface2:#004e44;
  --fg:#dcebe7; --fg-bright:#ffffff; --muted:#b5ded9; --muted2:#678d89;
  --line:rgba(45,89,84,.55); --line2:rgba(60,104,99,.9);
  --gold:#f4dd62; --gold-light:#f4e38b; --gold-deep:#b27f2a; --gold-text:#ffd480; --amber:#fec33e; --orange:#ff7a00; --play-border:#ffcf73;
  --accent:#f4dd62; --accent-fg:#000605; --accent2:#ffd480;
  --warn:#ff4040; --warn2:#c51b1b; --ok:#43f58a; --ok2:#24a15e;
  --r:12px; --r-sm:8px; --r-pill:30px; --notch:0px; --maxw:1200px;
  --fh:'Outfit','Segoe UI',system-ui,sans-serif;
  --fb:'Outfit','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --fl:'Jost','Segoe UI',system-ui,sans-serif;
  /* operator --button-primary-bg-default / -hover */
  --btn-gold:linear-gradient(180deg,#f4e38b -24.36%,#f4dd62 23.01%,#b27f2a 100%);
  --btn-gold-hover:linear-gradient(335deg,#f4e38b 23.63%,#f4dd62 64.48%,#b27f2a 116.85%);
  /* the loader crown's own gradient (loader.svg): B6852E C49839 D9B74B F4DD62 F4E38B F4DD62 B27F2A */
  --foil:linear-gradient(90deg,#B6852E 0%,#C49839 12%,#D9B74B 21%,#F4DD62 33%,#F4E38B 49%,#F4DD62 69%,#B27F2A 98%);
  --foil-v:linear-gradient(170deg,#F4E38B 0%,#F4DD62 35%,#D9B74B 60%,#B27F2A 100%);
  /* palace molding: two gold hairlines */
  --molding:linear-gradient(180deg,transparent 0 1px,rgba(244,221,98,.55) 1px 2px,transparent 2px 5px,rgba(178,127,42,.55) 5px 6px,transparent 6px);
  --molding-x:linear-gradient(90deg,transparent,rgba(244,221,98,.75) 18%,rgba(244,221,98,.75) 82%,transparent);
  /* the operator's crown (loader.svg): extrusion #855A12 + gold gradient face */
  --crown:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='5' y1='48' x2='94' y2='48' gradientUnits='userSpaceOnUse'><stop stop-color='%23B6852E'/><stop offset='.12' stop-color='%23C49839'/><stop offset='.21' stop-color='%23D9B74B'/><stop offset='.33' stop-color='%23F4DD62'/><stop offset='.49' stop-color='%23F4E38B'/><stop offset='.69' stop-color='%23F4DD62'/><stop offset='.98' stop-color='%23B27F2A'/></linearGradient></defs><path fill='%23855A12' d='M97.38 26.84C97.87 27.19 98.15 27.83 97.9 28.53L78.7 83.32C78.38 84.22 77.3 84.59 76.5 84.08L66.4 77.63C65.91 77.31 65.28 77.31 64.8 77.63L53.92 84.58C53.43 84.89 52.8 84.89 52.32 84.58L41.43 77.63C40.95 77.31 40.32 77.31 39.83 77.63L29.75 84.07C29.21 84.41 28.55 84.36 28.08 84.02C27.84 83.84 27.65 83.6 27.55 83.29L9.06 28.59C8.55 27.08 10.46 25.93 11.55 27.1L34.23 51.31C34.96 52.08 36.23 51.87 36.67 50.91L51.76 17.88C52.18 16.97 53.28 16.77 53.99 17.29C54.19 17.43 54.35 17.63 54.47 17.88L69.57 50.94C69.68 51.19 69.85 51.38 70.05 51.53C70.62 51.94 71.45 51.92 72 51.35L95.43 27.01C96.02 26.4 96.83 26.44 97.38 26.84Z'/><path fill='url(%23g)' d='M93.955 25.6591L74.7488 80.446C74.4317 81.3505 73.354 81.7227 72.5463 81.2067L62.4468 74.7546C61.959 74.4429 61.3345 74.4429 60.8466 74.7546L49.9657 81.706C49.4778 82.0177 48.8533 82.0177 48.3655 81.706L37.4845 74.7546C36.9966 74.4429 36.3722 74.4429 35.8843 74.7546L25.8034 81.1949C24.9898 81.7146 23.9044 81.3329 23.5953 80.4182L5.11251 25.7198C4.60094 24.2059 6.51253 23.0618 7.60504 24.2281L30.2852 48.4387C31.0079 49.2102 32.2822 49.0018 32.7215 48.0403L47.8138 15.0066C48.3429 13.8485 49.9882 13.8485 50.5173 15.0066L65.623 48.0696C66.0587 49.0233 67.3183 49.2381 68.0455 48.4827L91.4819 24.1368C92.5889 22.9869 94.4831 24.1528 93.955 25.6591Z'/></svg>");
  /* flat single-colour crown for small sizes (h2 marker, bullets) */
  --crown-flat:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='%23F4DD62' d='M93.955 25.6591L74.7488 80.446C74.4317 81.3505 73.354 81.7227 72.5463 81.2067L62.4468 74.7546C61.959 74.4429 61.3345 74.4429 60.8466 74.7546L49.9657 81.706C49.4778 82.0177 48.8533 82.0177 48.3655 81.706L37.4845 74.7546C36.9966 74.4429 36.3722 74.4429 35.8843 74.7546L25.8034 81.1949C24.9898 81.7146 23.9044 81.3329 23.5953 80.4182L5.11251 25.7198C4.60094 24.2059 6.51253 23.0618 7.60504 24.2281L30.2852 48.4387C31.0079 49.2102 32.2822 49.0018 32.7215 48.0403L47.8138 15.0066C48.3429 13.8485 49.9882 13.8485 50.5173 15.0066L65.623 48.0696C66.0587 49.0233 67.3183 49.2381 68.0455 48.4827L91.4819 24.1368C92.5889 22.9869 94.4831 24.1528 93.955 25.6591Z'/></svg>");
  --crown-dark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='%23000605' d='M93.955 25.6591L74.7488 80.446C74.4317 81.3505 73.354 81.7227 72.5463 81.2067L62.4468 74.7546C61.959 74.4429 61.3345 74.4429 60.8466 74.7546L49.9657 81.706C49.4778 82.0177 48.8533 82.0177 48.3655 81.706L37.4845 74.7546C36.9966 74.4429 36.3722 74.4429 35.8843 74.7546L25.8034 81.1949C24.9898 81.7146 23.9044 81.3329 23.5953 80.4182L5.11251 25.7198C4.60094 24.2059 6.51253 23.0618 7.60504 24.2281L30.2852 48.4387C31.0079 49.2102 32.2822 49.0018 32.7215 48.0403L47.8138 15.0066C48.3429 13.8485 49.9882 13.8485 50.5173 15.0066L65.623 48.0696C66.0587 49.0233 67.3183 49.2381 68.0455 48.4827L91.4819 24.1368C92.5889 22.9869 94.4831 24.1528 93.955 25.6591Z'/></svg>");
  /* velvet sheen + candle bokeh */
  --velvet:repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px);
  --bokeh:
    radial-gradient(circle at 14% 18%,rgba(255,212,128,.20) 0,rgba(255,212,128,.07) 18px,transparent 42px),
    radial-gradient(circle at 24% 72%,rgba(254,195,62,.16) 0,rgba(254,195,62,.05) 22px,transparent 48px),
    radial-gradient(circle at 56% 12%,rgba(255,212,128,.12) 0,rgba(255,212,128,.04) 14px,transparent 30px),
    radial-gradient(circle at 84% 78%,rgba(255,207,115,.14) 0,rgba(255,207,115,.05) 20px,transparent 46px),
    radial-gradient(circle at 93% 26%,rgba(254,195,62,.10) 0,transparent 26px),
    radial-gradient(circle at 38% 42%,rgba(255,212,128,.08) 0,transparent 18px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--fg);font:16.5px/1.7 var(--fb);
  overflow-x:clip;max-width:100%;
}
header.site,main,footer.site,section{max-width:100vw}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-text);text-decoration:none;transition:color .15s,background-color .15s}
a:hover{text-decoration:none;color:#fff2c4}
/* client rule: links in running text are coloured, never underlined */
main p a,main li a,main td a,.lead a,.callout a,details.faq .a a{
  color:var(--gold-text);font-weight:500;text-decoration:none;border-radius:4px;padding:0 2px;margin:0 -2px;
}
main p a:hover,main li a:hover,main td a:hover,.lead a:hover,.callout a:hover,details.faq .a a:hover{
  color:#fff2c4;background:rgba(244,221,98,.12);text-decoration:none;
}
hr{border:0;height:6px;background:var(--molding);margin:30px 0}

.wrap{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 22px;min-width:0}
.notch{clip-path:none}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--fh);font-weight:700;line-height:1.1;letter-spacing:-.2px;margin:0 0 .5em;color:var(--fg-bright)}
h1{font-size:clamp(38px,5vw,64px);font-weight:800;letter-spacing:-1px;line-height:1.02;position:relative;padding-bottom:18px;margin-bottom:22px}
h1::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:3px;border-radius:2px;background:var(--foil)}
h2{font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:.4em}
h3{font-size:clamp(18px,2vw,22px);font-weight:600}
h2::before{
  content:"";flex:0 0 auto;width:.8em;height:.8em;background:var(--crown) center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(244,221,98,.35));transform:translateY(-.04em);
}
.lead{color:#cfe3de;font-size:18.5px;line-height:1.6;max-width:70ch;margin:0 0 20px}
p{margin:0 0 16px;max-width:76ch}
ul,ol{margin:0 0 16px;padding-left:22px;max-width:76ch}
li{margin:0 0 7px}
li::marker{color:var(--gold)}

/* ---------- header: dark green bar, gold molding, official wordmark ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(5,34,30,.98),rgba(5,20,19,.96));
  backdrop-filter:blur(10px);
}
header.site::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-deep) 12%,var(--gold-light) 50%,var(--gold-deep) 88%,transparent);
}
header.site .bar{display:flex;align-items:center;gap:22px;height:78px;min-width:0}
.logo{display:flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none;flex:0 0 auto}
.logo:hover{color:var(--fg)}
.logo .mark{display:block;flex:0 0 auto;line-height:0}
.logo .mark img{height:46px;width:auto}
/* the official Crowngreen wordmark (operator SVG, see design\SOURCES.md): CROWN in silver with the
   gold crown as the W, GREEN in gold; 138x62 viewBox */
.logo .mark.brandlogo img{height:50px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
footer.site .logo .mark.brandlogo img{height:44px}
.logo > span:last-child{border-left:1px solid rgba(244,221,98,.35);padding-left:12px;margin-left:2px}
.logo b{font:600 13.5px/1.1 var(--fl);letter-spacing:2.2px;text-transform:uppercase;display:block;color:var(--gold-text)}
.logo small{display:block;font-size:11px;color:var(--muted);letter-spacing:.3px;margin-top:3px}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;min-width:0;justify-content:flex-end}
nav.main a{
  position:relative;color:#d8e9e4;font:500 15px/1 var(--fl);letter-spacing:.3px;padding:11px 11px;white-space:nowrap;
}
nav.main a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;border-radius:1px;background:var(--foil);transform:scaleX(0);transition:transform .18s;transform-origin:left}
nav.main a:hover{color:#fff}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a.akt{color:var(--gold-text)}
nav.main a.akt::after{transform:scaleX(1)}
.headcta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:8px;flex:0 1 auto;min-width:0}
.headcta .btn{margin:0;padding:12px 22px;font-size:14.5px}
.adnote.mini{margin:0;font-size:10px;letter-spacing:.1px;white-space:nowrap}
.adnote.mini b{font-size:9px;padding:1px 5px;margin-right:4px}
.navtoggle{display:none}

/* ---------- buttons: the operator's gold pill = affiliate, gold ghost = internal ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:20px 0}
.btn{
  display:inline-block;font:600 16px/1.2 var(--fl);letter-spacing:.6px;text-transform:uppercase;
  padding:15px 30px;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;text-align:center;
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s;
}
.btn-primary{
  background:var(--btn-gold);color:var(--accent-fg);border-color:rgba(255,255,255,.10);
  box-shadow:0 10px 16px 0 rgba(0,0,0,.15),0 0 0 3px rgba(244,221,98,.14),0 12px 30px -10px rgba(244,221,98,.75),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover{
  color:var(--accent-fg);background:var(--btn-gold-hover);border-color:rgba(255,255,255,.3);
  transform:translateY(-1px);
  box-shadow:0 12px 18px 0 rgba(0,0,0,.18),0 0 0 3px rgba(244,221,98,.22),0 16px 34px -10px rgba(244,221,98,.95),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-secondary{
  background:rgba(0,65,57,.35);color:var(--gold-text);border-color:rgba(244,221,98,.45);
  text-transform:none;letter-spacing:.2px;font-weight:500;
}
.btn-secondary:hover{background:rgba(244,221,98,.12);border-color:var(--gold);color:#fff}
.adnote{display:block;font-size:12.5px;color:var(--muted2);letter-spacing:.1px;margin:-6px 0 6px}
.adnote b{
  color:var(--gold-text);font-weight:600;text-transform:uppercase;letter-spacing:.8px;font-size:10.5px;font-family:var(--fl);
  background:rgba(244,221,98,.1);border-radius:999px;padding:2px 8px;margin-right:6px;
}

/* ---------- sections: salon bands with gold molding ---------- */
section{padding:52px 0}
section[id]{scroll-margin-top:96px}
section.tight{padding:0 0 32px}
section.band.tight{padding-top:0}
section.band{
  position:relative;
  background:
    radial-gradient(80% 70% at 50% 100%,rgba(0,65,57,.35),transparent 70%),
    linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
}
section.band:not(.tight)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--molding);
  -webkit-mask-image:var(--molding-x);mask-image:var(--molding-x);
}

/* ---------- hero: the emerald salon, candle bokeh, crown crest, the host on the VIP card ---------- */
section.hero{
  position:relative;padding:64px 0 60px;overflow:hidden;isolation:isolate;
  background:
    var(--bokeh),
    radial-gradient(60% 80% at 100% 0%,rgba(67,245,138,.16) 0%,transparent 60%),
    radial-gradient(45% 60% at 0% 100%,rgba(0,78,68,.55) 0%,transparent 60%),
    var(--velvet),
    linear-gradient(180deg,#06302a 0%,#041c19 55%,#000e0d 100%);
}
section.hero::before{
  /* the brand's crown as the salon crest, faint, top right */
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-4%;top:-16%;width:clamp(360px,42vw,620px);aspect-ratio:1;
  background:var(--crown) center/contain no-repeat;opacity:.14;transform:rotate(-9deg);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));
}
section.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--molding);-webkit-mask-image:var(--molding-x);mask-image:var(--molding-x)}
.hero .wrap{position:relative;z-index:1}
.hero .kick{
  display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1 var(--fl);letter-spacing:1.8px;
  text-transform:uppercase;color:var(--gold-text);background:rgba(0,14,13,.55);
  padding:9px 16px 9px 12px;border-radius:999px;margin-bottom:22px;
  border:1px solid rgba(244,221,98,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px -8px rgba(0,0,0,.9);
}
.hero .kick::before{content:"";width:15px;height:15px;background:var(--crown-flat) center/contain no-repeat}
.hero h1{max-width:16ch;text-shadow:0 2px 0 rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.6)}
.hero .lead{color:#d9eae5}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:start}
.hero .grid > *,.cards > *,.pc > *,.games > *,footer.site .cols > *{min-width:0}
.hero .grid > div:first-child{padding-top:28px}
/* the fact card = a VIP card: the official host portrait on top, gold double frame, crown crest */
.hero .panel{
  position:relative;overflow:hidden;padding:248px 24px 22px;border-radius:16px;
  background:linear-gradient(180deg,#0a2f29 0%,#05221e 50%,#041a17 100%);
  border:1px solid rgba(244,221,98,.5);outline:1px solid rgba(244,221,98,.22);outline-offset:-6px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,6,5,.9),0 0 60px -20px rgba(67,245,138,.25);
}
.hero .panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:236px;
  background:url(../brand/host.jpg) 50% 14%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 60%,transparent 100%);
}
.hero .panel::after{
  content:"";position:absolute;left:50%;top:184px;width:52px;height:52px;transform:translateX(-50%);
  background:var(--crown) center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.8));
}
.hero .panel h3{
  position:relative;text-align:center;font:600 12.5px/1 var(--fl);letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-text);
  margin:0 0 10px;padding:0 0 12px;
}
.hero .panel h3::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:1px;transform:translateX(-50%);background:var(--foil)}
.hero .panel .tablewrap{margin-top:0}

/* ---------- panels: emerald velvet with a gold molding ---------- */
.panel{
  background:linear-gradient(180deg,#07291f 0%,var(--panel) 60%,#041a17 100%);
  border-radius:var(--r);padding:24px;max-width:100%;
  border:1px solid rgba(244,221,98,.22);
  outline:1px solid rgba(244,221,98,.12);outline-offset:-6px;
}
.panel.tight{padding:16px 18px}
.panel > h3{color:var(--gold-text);font-size:20px;font-weight:600}
.panel .tablewrap{background:transparent;border:0;border-radius:0}
.cards{display:grid;gap:18px}
.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);border-radius:var(--r);padding:20px}
.card h3{margin-bottom:8px}
.card p{margin-bottom:0;color:var(--muted);font-size:15px}

/* ---------- offer tiers = the brand's "Path to the Crown" level plaques ---------- */
.tier{
  position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(90% 60% at 100% 0%,rgba(67,245,138,.10),transparent 60%),
    linear-gradient(170deg,#0a3129 0%,#05221e 55%,#041a17 100%);
  border:1px solid rgba(244,221,98,.4);
  box-shadow:inset 0 0 0 5px #05221e,inset 0 0 0 6px rgba(244,221,98,.22),0 24px 44px -26px rgba(0,0,0,.95);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.tier:hover{transform:translateY(-4px);border-color:rgba(244,221,98,.75);box-shadow:inset 0 0 0 5px #05221e,inset 0 0 0 6px rgba(244,221,98,.4),0 30px 50px -26px rgba(0,0,0,1)}
.tier::after{
  content:"";position:absolute;right:-18px;bottom:-22px;width:120px;height:120px;
  background:var(--crown) center/contain no-repeat;opacity:.09;transform:rotate(-12deg);pointer-events:none;
}
.tier .tname{
  align-self:flex-start;font:600 12px/1 var(--fl);letter-spacing:1.8px;text-transform:uppercase;
  color:var(--accent-fg);background:var(--btn-gold);
  padding:7px 14px;border-radius:999px;margin:0 0 18px;
  box-shadow:0 6px 14px -6px rgba(244,221,98,.8),inset 0 1px 0 rgba(255,255,255,.45);
}
.tier .thead{
  font:800 28px/1.08 var(--fh);letter-spacing:-.5px;margin-bottom:12px;padding-right:12px;
  background:var(--foil-v);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tier .tdetail{color:#d3e6e1;font-size:15px;margin-bottom:16px;position:relative}
.tier .tterms{font-size:13.5px;color:var(--muted2);padding:12px 0 0;margin-top:auto;position:relative}
.tier .tterms::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(244,221,98,.6),rgba(244,221,98,.05))}
.tier.gap .thead{background:none;-webkit-text-fill-color:var(--warn);color:var(--warn)}

/* ---------- tables ---------- */
.tablewrap{
  overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  max-width:100%;width:100%;-webkit-overflow-scrolling:touch;
}
table{border-collapse:collapse;width:100%;min-width:0;font-size:15px}
.tablewrap.wide table{min-width:560px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:linear-gradient(180deg,#004139,#00302a);
  font:600 12.5px/1.3 var(--fl);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gold-text);white-space:nowrap;border-bottom:1px solid rgba(244,221,98,.4);
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(0,65,57,.18)}
.tablewrap.wide tbody tr:hover{background:rgba(67,245,138,.07)}
td.k{color:var(--muted);width:38%;font-weight:500}
.panel td.k{white-space:normal}
.panel td{padding:10px 4px;border-bottom:1px solid rgba(60,104,99,.45)}
.panel td.k{padding-right:14px}
td .na{color:#ff7a70;font-style:italic}

/* ---------- attribution + callouts ---------- */
.src{display:inline-block;font:400 12px/1.5 var(--fb);color:var(--muted2);border-left:2px solid var(--gold-deep);padding:2px 0 2px 9px;margin:6px 0 0}
.srcline{margin:12px 0 0;font-size:13px;color:var(--muted2)}
.callout{
  position:relative;border-radius:var(--r);margin:20px 0;padding:22px 24px 22px 74px;
  background:linear-gradient(135deg,rgba(0,78,68,.55),rgba(5,34,30,.85));
  border:1px solid rgba(67,245,138,.22);border-left:3px solid var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 40px -30px rgba(0,0,0,.9);
}
.callout::before{
  content:"";position:absolute;left:20px;top:22px;width:38px;height:38px;border-radius:50%;
  background:var(--btn-gold);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 6px 14px -6px rgba(0,0,0,.9);
}
.callout::after{content:"";position:absolute;left:28px;top:30px;width:22px;height:22px;background:var(--crown-dark) center/contain no-repeat}
.callout.gap{background:linear-gradient(135deg,rgba(197,27,27,.22),rgba(5,20,19,.85));border-color:rgba(255,64,64,.35);border-left-color:var(--warn)}
.callout.gap::before{background:linear-gradient(180deg,#ff6d6d,#c51b1b)}
.callout.gap::after{content:"!";background:none;font:800 17px/22px var(--fh);color:#fff;text-align:center}
.callout.gap h3{color:#ff7a70}
.callout h3{font-size:19px;margin-bottom:7px}
.callout p:last-child{margin-bottom:0}

/* ---------- pros / cons ---------- */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pc .panel{outline:0;border-top:3px solid var(--ok)}
.pc .panel.cons{border-top-color:var(--warn)}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{position:relative;padding-left:30px;margin-bottom:10px;font-size:15px}
.pc li::before{position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--fb)}
.pc .pros li::before{content:"\2713";color:#00240f;background:var(--ok)}
.pc .cons li::before{content:"\2715";color:#fff;background:var(--warn)}
.pc h3{font-size:19px;color:var(--fg-bright)}

/* ---------- steps: the brand's green-and-gold chip ---------- */
ol.steps{list-style:none;padding:0;counter-reset:s;max-width:none;display:grid;gap:14px}
ol.steps li{
  counter-increment:s;position:relative;margin:0;padding:16px 18px 16px 82px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:76px;
}
ol.steps li::before{
  content:counter(s);position:absolute;left:16px;top:14px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font:700 19px/1 var(--fh);color:var(--gold-text);
  background:
    radial-gradient(circle,#0b3a32 0 58%,transparent 59%),
    radial-gradient(circle,transparent 0 60%,rgba(244,227,139,.9) 61% 64%,transparent 65%),
    repeating-conic-gradient(from 11deg,#d9b74b 0 22.5deg,#0b3a32 22.5deg 45deg);
  box-shadow:0 0 0 2px #041a17,0 0 0 3px rgba(178,127,42,.7),0 8px 16px -6px rgba(0,0,0,.9);
}
ol.steps b{display:block;font:600 18.5px/1.25 var(--fh);color:var(--fg-bright);margin-bottom:3px}
ol.steps span{color:var(--muted);font-size:15px}

/* ---------- game grid ---------- */
.games{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.game{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s,border-color .2s}
.game-link:hover .game,a.game:hover{transform:translateY(-3px);border-color:rgba(244,221,98,.5)}
.game .shot{aspect-ratio:3 / 4;background:var(--panel2);overflow:hidden}
.game .shot img{width:100%;height:100%;object-fit:cover}
.game .meta{padding:10px 12px 12px}
.game .gname{font:600 15px/1.2 var(--fh);display:block;margin-bottom:3px;color:var(--fg-bright)}
.game .gprov{font-size:12px;color:var(--muted2);display:block}
.game .gnum{font-size:12px;color:var(--gold-text);display:block;margin-top:5px}
.games + .adnote{margin:12px 0 0}
.adnote + .panel,.games ~ .panel,.tablewrap + .panel{margin-top:22px}

/* ---------- screenshots ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.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:12px 14px;font-size:13px;color:var(--muted2)}
.shots .void > div{display:grid;place-items:center;color:var(--muted2);font-size:13px;text-align:center;padding:20px}
figure.shot-inline{margin:22px 0 0;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;max-width:780px;box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
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 16px;font-size:13px;color:var(--muted2);border-top:1px solid var(--line)}
figure.shot-inline.side{max-width:700px}
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{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;transition:border-color .2s}
details.faq[open]{border-color:rgba(244,221,98,.45);box-shadow:inset 3px 0 0 var(--gold)}
details.faq > summary{
  cursor:pointer;padding:16px 20px;font:600 17px/1.35 var(--fh);letter-spacing:-.1px;list-style:none;color:var(--fg-bright);
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{
  content:"";flex:0 0 10px;width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s;
}
details.faq[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
details.faq > summary:hover{color:var(--gold-text)}
details.faq .a{padding:0 20px 18px;color:#cfe3de;font-size:15.5px}
details.faq .a p:last-child{margin-bottom:0}

/* ---------- byline / medal ---------- */
.byline{display:flex;align-items:center;gap:14px;margin:24px 0 0;font-size:14px;color:var(--muted);padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-radius:999px;width:fit-content;max-width:100%}
.medal{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:50%;font:700 15px/1 var(--fl);letter-spacing:.5px;color:var(--accent-fg);background:var(--btn-gold);box-shadow:0 0 0 2px rgba(244,221,98,.35)}
.medal.big{width:82px;height:82px;flex-basis:82px;font-size:27px}
.medal.has-portrait{overflow:hidden}
.medal.has-portrait img{width:100%;height:100%;object-fit:cover}
.byline b{color:var(--fg);display:block;font-size:15px}
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0;list-style:none}
.pills li{font-size:13px;color:var(--muted);border:1px solid var(--line);padding:6px 12px;margin:0;border-radius:999px}
.authorhead{align-items:flex-start;gap:22px;margin:0 0 6px;border-radius:var(--r);width:auto}
.authorhead h1{margin:0 0 6px;font-size:clamp(28px,3.6vw,42px)}
.authorhead > span:last-child{flex:1 1 auto;min-width:0}
.authorpage{max-width:76ch}
.authorpage h2{font-size:clamp(20px,2.2vw,26px);margin-top:34px}
.authorphoto{margin:0 0 20px;max-width:420px;border-radius:var(--r);overflow:hidden}

/* ---------- footer ---------- */
footer.site{position:relative;background:linear-gradient(180deg,#051413,#000605);padding:52px 0 28px;margin-top:0}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--molding);-webkit-mask-image:var(--molding-x);mask-image:var(--molding-x)}
footer.site .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
footer.site .cols > div:first-child .logo{margin-bottom:14px}
footer.site h4{font:600 12.5px/1 var(--fl);letter-spacing:2px;text-transform:uppercase;color:var(--gold-text);margin:0 0 14px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:9px;font-size:14px;color:#c9ddd8}
footer.site a{color:#e2efeb}
footer.site a:hover{color:var(--gold-text)}
footer.site .cols > div:last-child{background:rgba(255,64,64,.06);border:1px solid rgba(255,64,64,.3);border-radius:var(--r);padding:16px 16px 8px}
.agebadge{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid var(--warn);color:#ff7a70;font:700 15px/1 var(--fl);margin-bottom:12px}
.legal{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-size:13px;color:#8fb3ac}
.legal p{max-width:none}

/* ---------- breadcrumbs / meta line ---------- */
.crumbbar{background:var(--bg2)}
.crumbbar .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:12px 22px;font-size:13px;color:var(--muted2)}
.crumbbar a{color:var(--muted)}
.crumbbar a:hover{color:var(--gold-text)}
.crumbbar .updated{
  margin-left:auto;white-space:nowrap;font:500 12.5px/1.3 var(--fl);color:#d8e9e4;
  background:rgba(67,245,138,.07);border:1px solid rgba(67,245,138,.3);border-radius:999px;padding:5px 12px;
}
.crumbbar .updated::before{content:"";display:inline-block;width:7px;height:7px;background:var(--ok);border-radius:50%;margin-right:7px;vertical-align:middle;box-shadow:0 0 8px var(--ok)}
.toc{margin:0 0 8px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.toc li{margin:0}
.toc a{font:500 13px/1.2 var(--fl);color:#d8e9e4;border:1px solid var(--line2);padding:7px 13px;display:block;border-radius:999px}
.toc a:hover{color:#fff;background:rgba(0,78,68,.5);border-color:rgba(244,221,98,.4)}

/* ---------- responsive ---------- */
@media (max-width:1320px){
  header.site .bar{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px 16px}
  nav.main{order:3;width:100%;margin-left:0;justify-content:flex-start}
  .headcta{margin-left:auto}
}
@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}
  footer.site .cols > div:first-child{grid-column:1 / -1}
  .hero .grid{grid-template-columns:1fr;gap:32px}
  .hero .grid > div:first-child{padding-top:0}
  section.hero::before{width:400px;right:-12%;top:-6%;opacity:.08}
  .hero .panel{padding-top:258px}
  .hero .panel::before{height:246px;background-position:50% 10%}
  .hero .panel::after{top:194px}
}
@media (max-width:760px){
  body{font-size:16px}
  section{padding:38px 0}
  section.hero{padding:42px 0 40px}
  section.hero::before{width:300px;right:-90px;top:-40px;opacity:.08;transform:rotate(-9deg)}
  .wrap{padding:0 16px}
  .crumbbar .wrap{padding:10px 16px}
  .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}
  footer.site .cols > div:last-child{grid-column:1 / -1}
  header.site .bar{padding:9px 16px;gap:8px 10px}
  .logo .mark img{height:36px}
  .logo .mark.brandlogo img{height:40px}
  .logo > span:last-child{padding-left:8px}
  .logo b{font-size:12px;letter-spacing:1.6px}
  nav.main{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{font-size:14px;padding:9px 9px}
  nav.main a::after{left:9px;right:9px}
  .headcta{max-width:55%}
  .headcta .btn{padding:10px 14px;font-size:13px;letter-spacing:.3px}
  h1{font-size:clamp(34px,9.5vw,44px);padding-bottom:14px;margin-bottom:18px}
  .hero .panel{padding:228px 16px 20px;border-radius:14px}
  .hero .panel::before{height:218px;background-position:50% 12%}
  .hero .panel::after{top:170px;width:46px;height:46px}
  .lead{font-size:17px}
  .btns .btn{flex:1 1 auto}
  p,ul,ol,.lead{max-width:100%}
  .crumbbar .updated{margin-left:0}
  .byline{border-radius:var(--r)}
  .callout{padding:18px 16px 18px 64px}
  .callout::before{left:14px;top:18px;width:34px;height:34px}
  .callout::after{left:21px;top:25px;width:20px;height:20px}
  ol.steps li{padding:14px 14px 14px 72px}
  ol.steps li::before{left:12px;width:44px;height:44px}
  .tier{padding:24px 18px 20px}
  .tier .thead{font-size:25px}

  /* two-column fact tables stack: key line above value line */
  .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)}
  .panel .tablewrap:not(.wide) tr{padding:10px 0;border-bottom:1px solid rgba(60,104,99,.45)}
  .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:600 11.5px/1.3 var(--fl);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-text);margin-bottom:3px}

  /* wide tables with data-label (cfg table_labels): restack into label/value cards */
  .tablewrap.wide:has(td[data-label]){overflow-x:visible;background:transparent;border:0;border-radius:0}
  .tablewrap.wide:has(td[data-label]) table{min-width:0}
  .tablewrap.wide:has(td[data-label]) thead{display:none}
  .tablewrap.wide:has(td[data-label]) table,
  .tablewrap.wide:has(td[data-label]) tbody,
  .tablewrap.wide:has(td[data-label]) tr,
  .tablewrap.wide:has(td[data-label]) td{display:block;width:auto}
  .tablewrap.wide:has(td[data-label]) tr{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;margin-bottom:10px}
  .tablewrap.wide:has(td[data-label]) tbody tr:nth-child(even){background:var(--panel)}
  .tablewrap.wide:has(td[data-label]) td[data-label]{display:grid;grid-template-columns:minmax(96px,40%) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid rgba(60,104,99,.4)}
  .tablewrap.wide td[data-label]:last-child{border-bottom:0}
  .tablewrap.wide td[data-label]:first-child{font-weight:600;color:var(--fg-bright)}
  .tablewrap.wide td[data-label]::before{content:attr(data-label);font:600 11px/1.35 var(--fl);letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-text);padding-top:2px}
}
@media (max-width:420px){
  .games{grid-template-columns:1fr 1fr;gap:10px}
  .logo small{display:none}
  .logo b{font-size:11px}
  .logo .mark img{height:32px}
  .logo .mark.brandlogo img{height:36px}
  .headcta .btn{padding:10px 12px;font-size:12.5px}
  section.hero::before{width:250px;right:-80px;top:-40px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}