/* ==========================================================================
   National Casino - nationalcasino.net - site.css  (forked from the Slovenia build)
   Prefix: nc-
   Art slots are CSS custom properties (--nc-art) so a missing file falls
   through to the gradient instead of a broken-image box. Paths inside this
   file resolve against THIS stylesheet, i.e. ../img/... - never page-relative.
   ========================================================================== */

/* The webfonts are NOT @imported here: an @import holds this stylesheet -
   and with it the deferred go.js and site.js and DOMContentLoaded - until
   Google answers. With no answer (offline, blocked) the page never became
   clickable: the bot's outbound gate saw no tab open (19 Oct 2026; measured:
   a hanging font server, DOMContentLoaded not reached in 30 s). build.py puts
   them in <head> as a non-blocking <link media="print" onload>. */

:root{
  /* Owner's rule 1 (5 Oct 2026): the ORIGINAL's palette in shades of our own.
     The operator measures ground #292526, header #292526, text #fffaf3,
     buttons #fec882 / #322e2f / #4e4842, and its button is a GRADIENT
     #fec882 -> #ff9f6c. Each main colour here is of the same family and at
     least 3.0 away in OKLab: the warm grey goes BLACK (the owner's own
     example), the off-white a shade warmer, the gold-to-salmon button a
     muted tan-to-copper gradient.
     Ground #030303 again (7 Oct): the task measures the original once more,
     and playbook 6.0 then lifts the 6.2 hue/chroma floors that had pushed
     the ground to the violet-tinted #03010a on 6 Oct (a run without a
     measured original). #030303 is one of the bot's own proposals: neutral
     like the original's grey, 6.21 from the nearest network ground (pl).
     check.py measures every pair from these literals. */
  --nc-bg:#030303;
  --nc-bg2:#100e0e;
  --nc-bar:#0b0a0a;
  --nc-bar2:#141112;
  --nc-card:#181516;
  --nc-card2:#1f1b1c;
  --nc-line:#2b2526;
  --nc-line2:#3b3335;

  /* ink */
  --nc-ink:#f3ece2;
  --nc-ink2:#d8cfc4;
  --nc-ink3:#ada398;
  --nc-on-accent:#1a1310;

  /* Buttons and accents: the logo's gold family (#fec882, hue 73), taken
     down to tan #e0b48b - one of the bot's proposed shades, 7.5 from the
     original - the solid colour of outlines and small marks. The FILLED
     button is a gradient like the original's (owner's rule 8, 7 Oct 2026):
     #fec882 -> #ff9f6c there, #e9bd8c -> #d6956b here - 4.76 and 7.53 away,
     hue 69 / 53 against 73 / 48. check.py measures both stops. */
  --nc-btn:#e0b48b;
  --nc-btn-h:#ecc6a1;
  --nc-btn-top:#e9bd8c;
  --nc-btn-bot:#d6956b;
  --nc-btn-top-h:#f1c99c;
  --nc-btn-bot-h:#e0a179;
  --nc-btn2:#1c1819;
  --nc-a1:#ecc9a4;
  --nc-a2:#d2a273;
  --nc-a3:#b98a5e;
  --nc-accent:#e0b48b;
  --nc-accent-soft:rgba(224,180,139,.12);
  --nc-grad:linear-gradient(180deg,var(--nc-btn-top) 0%,var(--nc-btn-bot) 100%);
  --nc-grad-h:linear-gradient(180deg,var(--nc-btn-top-h) 0%,var(--nc-btn-bot-h) 100%);
  /* the surfaces are gradients too (rule 8): header, rail, panels, cards -
     the page ground itself paints --nc-bg flat (8 Oct 2026, section 14) */
  --nc-bar-top:#151213;
  --nc-rail-top:#0f0d0d;
  --nc-rail-bot:#060505;
  --nc-panel-top:#151213;
  --nc-card-top:#1f1b1c;
  --nc-glow:0 0 0 1px rgba(233,189,140,.42),0 12px 30px rgba(214,149,107,.24);

  /* Ornament: diamonds, section marks, list bullets, RTP pills, the carousel
     marker - the same tan family, a step darker, so nothing on the page
     leaves the original's palette. */
  --nc-b1:#e8bf96;
  --nc-b2:#b98a5e;

  --nc-good:#6fcf97;
  --nc-live:#e2544e;

  /* metrics */
  --nc-top-h:72px;
  --nc-rail-w:235px;
  --nc-gut:26px;
  --nc-r:10px;
  --nc-r2:14px;
  --nc-measure:1040px;
  --nc-shadow:0 10px 30px rgba(0,0,0,.38);

  --nc-f-head:"Montserrat","Inter","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --nc-f-body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* No smooth scrolling for the whole page (8 Oct 2026): a capture tool's own
   jump to the top was animated, and the bot's screenshots came out 50-70px
   down the page. In-page links jump; the back-to-top button still glides. */
body{
  margin:0;
  background:var(--nc-bg);
  color:var(--nc-ink);
  font-family:var(--nc-f-body);
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a,.go-link{color:var(--nc-accent);text-decoration:none}
/* Outbound links are spans since 28 Sep 2026 (no href, base64 payload), so
   every rule below written for a bare `a` names .go-link too - and the boxes
   are measured before and after the change in scratchpad/hide_snap.py. */
.go-link{cursor:pointer}
button{font:inherit;color:inherit}

/* `[hidden]` is only `display:none` in the UA sheet, so ANY author `display`
   beats it. The wheel's claim link is a `.nc-btn` (inline-flex) and would stay
   visible without this. */
[hidden]{display:none !important}

.nc-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--nc-a2);color:var(--nc-on-accent);padding:10px 16px;border-radius:0 0 8px 0;font-weight:700}
.nc-skip:focus{left:0}

:focus-visible{outline:2px solid var(--nc-a1);outline-offset:2px}

/* ==========================================================================
   1. Header
   ========================================================================== */
/* Owner's rule 2 (5 Oct 2026): ONE menu row, centred in the header. Three
   columns, the outer two equal (1fr each), so the menu stands on the header's
   own centre line whatever the logo and the buttons measure. The width at
   which that stops fitting is measured per version (tools/measure_nav.py)
   and written into each page as its fold point; below it the menu folds into
   the drawer behind the burger. */
.nc-top{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--nc-top-h);
  background:linear-gradient(180deg,var(--nc-bar-top) 0%,var(--nc-bar) 100%);
  border-bottom:1px solid var(--nc-line);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:18px;
  /* equal side padding - an uneven pair shifts the centre column off the
     header's centre line (it sat 2px left with 14/18) */
  padding:0 16px;
}
.nc-top__l{display:flex;align-items:center;gap:12px;justify-self:start;min-width:0}
.nc-logo{display:flex;align-items:center;gap:9px;flex:none}
.nc-logo img{height:42px;width:auto}
.nc-burger{
  display:none;flex:none;width:38px;height:38px;border:1px solid var(--nc-line2);border-radius:9px;
  background:var(--nc-btn2);align-items:center;justify-content:center;cursor:pointer;
}
.nc-burger svg{width:19px;height:19px;fill:none;stroke:var(--nc-ink2);stroke-width:2;stroke-linecap:round}

.nc-search{
  flex:none;width:34px;height:34px;border:0;border-radius:50%;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.nc-search svg{width:19px;height:19px;fill:none;stroke:var(--nc-ink2);stroke-width:1.9;stroke-linecap:round}
.nc-search:hover svg{stroke:var(--nc-accent)}

.nc-nav{display:flex;align-items:center;justify-content:center;gap:2px;justify-self:center;min-width:0}
.nc-nav a,.nc-nav .go-link{
  font-family:var(--nc-f-head);font-weight:600;font-size:14px;letter-spacing:.1px;
  color:var(--nc-ink2);padding:9px 8px;border-radius:8px;white-space:nowrap;
}
.nc-nav a:hover,.nc-nav .go-link:hover{color:var(--nc-accent)}
/* The current page: underlined in the accent, same weight - a bolder label
   would be wider and walk the centred row sideways from page to page. */
.nc-nav a[aria-current="page"]{color:var(--nc-accent);box-shadow:inset 0 -2px 0 var(--nc-accent);border-radius:0}

.nc-acts{display:flex;align-items:center;gap:8px;justify-self:end;min-width:0}
/* The header row is a width budget (the centred menu needs both sides
   equal): slimmer buttons, and the switcher is a flag + caret - the version
   code lives in its aria-label and in the picker. */
.nc-acts .nc-btn{padding:10px 16px}
.nc-geo__c{display:none}

/* Country switcher. It sits beside the buttons at EVERY width - on a phone it
   collapses to the flag square alone, never into the drawer, because a
   switcher hidden behind a burger is a switcher nobody finds. */
.nc-geo{
  flex:none;height:38px;padding:0 9px;border:1px solid var(--nc-line2);border-radius:9px;
  background:var(--nc-btn2);cursor:pointer;color:var(--nc-ink2);
  display:flex;align-items:center;gap:7px;
}
.nc-geo:hover{border-color:var(--nc-a2);color:var(--nc-ink)}
.nc-geo__c{font-family:var(--nc-f-head);font-weight:700;font-size:12.5px;letter-spacing:.5px}
.nc-geo .nc-caret{width:12px;height:12px;stroke-width:2.2;flex:none;opacity:.8}
.nc-geo .nc-fl{width:22px;height:22px}

/* buttons ---------------------------------------------------------------- */
.nc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--nc-f-head);font-weight:700;font-size:14px;letter-spacing:.2px;
  padding:11px 22px;border-radius:9px;border:0;cursor:pointer;text-align:center;
  transition:filter .18s ease,transform .18s ease,background .18s ease,color .18s ease;
}
.nc-btn:hover{transform:translateY(-1px)}
.nc-btn--fill{background:var(--nc-grad);color:var(--nc-on-accent);box-shadow:0 4px 14px rgba(214,149,107,.22)}
.nc-btn--fill:hover{background:var(--nc-grad-h)}
.nc-btn--ghost{background:linear-gradient(180deg,#221d1e 0%,var(--nc-btn2) 100%);color:var(--nc-ink);border:1.5px solid var(--nc-btn)}
.nc-btn--ghost:hover{background:#2a2425;color:#fff}
.nc-btn--lg{padding:14px 34px;font-size:15.5px;border-radius:10px}
.nc-btn--sm{padding:9px 16px;font-size:13px;border-radius:8px}

/* ==========================================================================
   2. Shell + rail
   ========================================================================== */
.nc-shell{
  display:grid;
  grid-template-columns:var(--nc-rail-w) minmax(0,1fr);
  padding-top:var(--nc-top-h);
  align-items:start;
}
.nc-main{min-width:0;padding:0 0 60px}

.nc-rail{
  position:sticky;top:var(--nc-top-h);
  height:calc(100vh - var(--nc-top-h));
  overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg,var(--nc-rail-top) 0%,var(--nc-rail-bot) 100%);
  border-right:1px solid rgba(255,255,255,.05);
  padding:12px 12px 26px;
  scrollbar-width:thin;scrollbar-color:var(--nc-line) transparent;
}
.nc-rail::-webkit-scrollbar{width:6px}
.nc-rail::-webkit-scrollbar-thumb{background:var(--nc-line);border-radius:3px}

.nc-rail__hi{
  display:flex;align-items:center;gap:11px;
  background:var(--nc-grad);color:var(--nc-on-accent);
  font-family:var(--nc-f-head);font-weight:700;font-size:14.5px;
  padding:13px 14px;border-radius:var(--nc-r);margin-bottom:9px;
  border:0;width:100%;cursor:pointer;text-align:left;
}
.nc-rail__hi:hover{background:var(--nc-grad-h)}
.nc-rail__hi svg{width:24px;height:24px;flex:none}

.nc-rail__sep{height:1px;background:rgba(255,255,255,.07);margin:14px 4px}

/* The site's own pages, shown in the drawer only while the header nav is
   folded (the fold rule is written into each page by build.py). Owner's
   rule 7: a monochrome outline icon in the item's own colour, and the page
   you are on lit up - accent text, tinted row, a bar on its left edge. */
.nc-rail__pages,.nc-rail__sep--pages{display:none}
.nc-rail__pages a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
  color:var(--nc-ink);font-family:var(--nc-f-head);font-weight:700;font-size:14.5px;
}
.nc-rail__pages a:hover{background:rgba(255,255,255,.05)}
.nc-rail__pages a[aria-current="page"]{background:var(--nc-accent-soft);color:var(--nc-accent);
  box-shadow:inset 3px 0 0 var(--nc-accent)}
.nc-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.nc-rail__l{list-style:none;margin:0;padding:0}
.nc-rail__l a,.nc-rail__l .go-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:9px;
  color:var(--nc-ink2);font-family:var(--nc-f-head);font-weight:600;font-size:14px;
}
.nc-rail__l a:hover,.nc-rail__l .go-link:hover{background:rgba(255,255,255,.05);color:var(--nc-ink)}
.nc-rail__l svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nc-rail__hi svg{fill:none;stroke:currentColor}
.nc-rail__l .nc-t{flex:1 1 auto;min-width:0}
.nc-badge{
  flex:none;background:var(--nc-a2);color:var(--nc-on-accent);
  font-size:11.5px;font-weight:800;line-height:1;padding:4px 7px;border-radius:5px;
}
.nc-chev{width:14px !important;height:14px !important;opacity:.6;stroke-width:2.2}

/* application card */
.nc-appcard{
  display:flex;align-items:center;gap:11px;
  background:var(--nc-card);border:1px solid var(--nc-line);
  border-radius:var(--nc-r);padding:10px;margin-top:16px;
}
.nc-appcard__t{min-width:0}
.nc-appcard b{display:block;font-family:var(--nc-f-head);font-size:12.5px;color:var(--nc-ink);font-weight:700}
.nc-appcard span:not(:where(.go-link)){display:block;font-size:11px;color:var(--nc-ink3);line-height:1.35}
.nc-appcard__p{
  flex:none;width:52px;height:38px;border-radius:7px;
  background-image:var(--nc-art,none),linear-gradient(140deg,var(--nc-card2),var(--nc-bg2));
  background-size:cover;background-position:center;
}
/* in the drawer the picture gives way to a phone outline (rule 7) */
.nc-appcard .nc-ico{display:none;width:22px;height:22px;color:var(--nc-accent)}

/* ==========================================================================
   3. Section furniture
   ========================================================================== */
.nc-wrap{padding:0 var(--nc-gut)}
.nc-sec{margin:34px 0}

/* The article is split into panels with full-width modules between them, so a
   continued panel must not re-assert the big top margin of the first one. */
.nc-art + .nc-sec,.nc-sec + .nc-wrap > .nc-art{margin-top:26px}

.nc-sh{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 20px}
.nc-sh__t{
  font-family:var(--nc-f-head);font-weight:700;font-size:26px;letter-spacing:.2px;
  color:var(--nc-accent);margin:0;text-align:center;
}
.nc-sh__r{
  flex:1 1 0;min-width:20px;max-width:260px;height:10px;position:relative;
}
.nc-sh__r::before{
  content:"";position:absolute;top:50%;left:0;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,var(--nc-line2));
}
.nc-sh__r::after{
  content:"";position:absolute;top:50%;right:0;width:8px;height:8px;margin-top:-4px;
  transform:rotate(45deg);border:1.4px solid var(--nc-b2);border-radius:1.5px;
}
.nc-sh__r--l{transform:scaleX(-1)}

/* ==========================================================================
   4. Hero carousel
   ========================================================================== */
.nc-hero{
  position:relative;margin:14px 0 0;border-radius:var(--nc-r2);overflow:hidden;
  background:var(--nc-bg2);
}
.nc-hero__vp{
  position:relative;min-height:410px;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.nc-hero__vp::-webkit-scrollbar{width:0;height:0}
/* An ordinary scroller, not a fading stage: one slide per page, snapped, and
   usable with a swipe or a trackpad whether or not the script runs. The strip
   is exactly as tall as one slide - the old stage stacked all four in flow the
   moment anything overrode its positioning, which is what put a 900px hole in
   the middle of every home page. */
.nc-slide{
  position:relative;flex:0 0 100%;min-width:0;overflow:hidden;
  scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(120deg,var(--nc-card2),var(--nc-bg2)));
  background-size:cover;background-position:center;
}
/* the dots mark the slide in view; nothing is hidden any more */
.nc-slide.is-on{opacity:1}
.nc-slide__gl{
  position:absolute;inset:0;
  background:
    radial-gradient(72% 100% at 50% 50%,rgba(10,8,8,.72),rgba(10,8,8,.30) 60%,transparent 78%),
    linear-gradient(180deg,rgba(10,8,8,.30),transparent 30%,rgba(10,8,8,.42));
}
.nc-slide__in{position:relative;z-index:2;text-align:center;padding:44px 26px;max-width:620px}
.nc-slide__k{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--nc-f-head);font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--nc-on-accent);background:var(--nc-grad);
  padding:6px 13px;border-radius:999px;margin-bottom:16px;
}
.nc-slide__t{
  font-family:var(--nc-f-head);font-weight:800;font-size:clamp(24px,3.1vw,40px);
  line-height:1.16;margin:0 0 10px;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.55);
  /* A single 20-character compound - Danish "genindbetalingsbonus" - needs
     289px in a 262px panel at 320px and painted over the edge. anywhere breaks
     it only when it truly does not fit, and leaves no hyphen behind. */
  min-width:0;overflow-wrap:anywhere;
}
.nc-slide__v{
  font-family:var(--nc-f-head);font-weight:700;font-size:clamp(16px,1.7vw,22px);
  color:var(--nc-a1);margin:0 0 22px;text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.nc-hero__dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.nc-hero__dots button{
  width:11px;height:11px;padding:0;border:1.4px solid var(--nc-line2);border-radius:2px;
  transform:rotate(45deg);background:transparent;cursor:pointer;transition:all .2s ease;
}
.nc-hero__dots button[aria-selected="true"]{background:var(--nc-b1);border-color:var(--nc-b1)}

/* ==========================================================================
   5. Game grid
   ========================================================================== */
/* Owner's rule 3: a list is an even grid, never a last row of one. The
   column counts are therefore FIXED divisors of the item count, not auto-fill:
   twelve tiles go 6 / 4 / 2, six live tables 6 / 3 / 2, three races 3 / 1,
   four VIP tiers 4 / 2. (auto-fill at 170px gave 7 + 5 at one width and
   would give 11 + 1 on a wide screen.) */
.nc-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.nc-tile{min-width:0}
.nc-tile__a{
  position:relative;display:block;border-radius:var(--nc-r);overflow:hidden;
  aspect-ratio:3/4;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(160deg,var(--nc-card2),var(--nc-bg2)));
  background-size:cover;background-position:center;
  transition:transform .22s ease,box-shadow .22s ease;
}
.nc-tile__a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.5)}
.nc-tile__a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 32%,transparent 48%,rgba(0,0,0,.80) 100%);
}
/* The RTP pill floats over the art; the promo tag sits in the caption instead,
   because top-left it collided with the pill on any tile under ~200px and got
   silently ellipsised. In the caption it can never run out of room. */
.nc-tile__rtp{
  position:absolute;top:6px;right:6px;z-index:2;
  font-family:var(--nc-f-head);font-size:9px;font-weight:800;letter-spacing:.2px;
  padding:4px 6px;border-radius:5px;line-height:1;white-space:nowrap;
  background:rgba(8,7,7,.84);color:var(--nc-b1);
}
.nc-tile__tag{
  display:inline-block;margin-bottom:5px;
  font-family:var(--nc-f-head);font-size:8.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:3px 6px;border-radius:4px;line-height:1;
  background:var(--nc-grad);color:var(--nc-on-accent);
}
.nc-tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 9px}
.nc-tile__n{
  display:block;font-family:var(--nc-f-head);font-weight:800;font-size:12.5px;line-height:1.2;
  color:#fff;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.7);
  overflow-wrap:anywhere;
}
.nc-tile__p{display:block;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:#dcd2c6;margin-top:3px}
.nc-tile__f{display:flex;align-items:center;gap:5px;padding:6px 3px 0;font-size:11px;color:var(--nc-ink3)}
.nc-tile__f svg{width:12px;height:12px;fill:currentColor}

/* live strip: all six tables on one row at desktop width */
.nc-live{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr))}
.nc-lt{
  position:relative;min-width:0;border-radius:var(--nc-r);overflow:hidden;
  aspect-ratio:4/3;display:block;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(150deg,var(--nc-card2),var(--nc-bg2)));
  background-size:cover;background-position:center;
}
.nc-lt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82))}
.nc-lt:hover{box-shadow:0 12px 26px rgba(0,0,0,.5)}
.nc-lt__b{
  position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  background:var(--nc-live);color:#fff;font-family:var(--nc-f-head);font-size:10px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;padding:4px 8px;border-radius:5px;line-height:1;
}
.nc-lt__b i{width:5px;height:5px;border-radius:50%;background:#fff;display:block}
.nc-lt__c{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px}
.nc-lt__n{display:block;font-family:var(--nc-f-head);font-weight:800;font-size:15px;color:#fff;line-height:1.2}
.nc-lt__p{display:block;font-size:11px;color:#dcd2c6;margin-top:2px}

/* ==========================================================================
   6. Offer banners (the operator's Aktionen rows)
   ========================================================================== */
.nc-offer{
  position:relative;min-height:215px;border-radius:var(--nc-r2);overflow:hidden;
  display:flex;align-items:center;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(115deg,var(--nc-card2),var(--nc-bg2)));
  background-size:cover;background-position:center right;
  padding:26px;
}
/* Enough scrim for the copy card to read, not so much that it blacks out the
   art the way an .86 left stop did. The card carries its own translucent bg. */
.nc-offer::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,10,9,.80) 0%,rgba(12,10,9,.50) 48%,rgba(12,10,9,.08) 82%,transparent 100%);
}
/* The gift stands in its own column beside the headline, centred on it; the
   headline, the amount and the button share the second column's left edge
   (owner's rule 3). */
.nc-offer__in{
  position:relative;z-index:2;max-width:520px;width:100%;
  border:1px solid rgba(224,180,139,.55);border-radius:var(--nc-r);
  background:rgba(10,9,9,.46);
  padding:22px 24px;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;
}
.nc-offer__i{display:flex;align-items:center;height:calc(19px * 1.3);color:var(--nc-a1)}
.nc-offer__i svg{width:26px;height:26px;display:block}
.nc-offer__c{min-width:0}
.nc-offer__k{
  margin:0 0 12px;line-height:1.3;
  font-family:var(--nc-f-head);font-weight:700;font-size:19px;color:#fff;
  /* The headline is an anonymous flex item, so min-width:auto refuses to
     shrink it below its longest word, and the Danish compound
     "genindbetalingsbonus" walked straight out of the card at 320px.
     overflow-wrap:anywhere lowers the min-content contribution and breaks only
     when there is really no room. Automatic hyphenation is OFF: it breaks a
     word that merely does not fit the rest of the LINE, with the row half
     empty, which is what the owner saw (28 Sep 2026). */
  min-width:0;overflow-wrap:anywhere;hyphens:manual;-webkit-hyphens:manual;
}
.nc-offer__v{
  font-family:var(--nc-f-head);font-weight:800;font-size:clamp(20px,2.3vw,28px);
  line-height:1.24;color:#fff;margin:0 0 16px;
}
.nc-offer__v em{font-style:normal;color:var(--nc-a1)}

/* slim in-article promo */
.nc-promo{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  border-radius:var(--nc-r);overflow:hidden;padding:18px 20px;margin:26px 0;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(100deg,var(--nc-card2),var(--nc-bg2)));
  background-size:cover;background-position:center right;
}
.nc-promo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,10,.9),rgba(14,11,10,.55) 70%,rgba(14,11,10,.15))}
.nc-promo__t{position:relative;z-index:2;flex:1 1 260px;min-width:0}
.nc-promo__t b{display:block;font-family:var(--nc-f-head);font-size:15px;color:var(--nc-a1);font-weight:700}
.nc-promo__t span:not(:where(.go-link)){display:block;font-family:var(--nc-f-head);font-size:19px;font-weight:800;color:#fff;line-height:1.3;margin-top:3px}
.nc-promo .nc-btn{position:relative;z-index:2;flex:none}

/* ==========================================================================
   7. Tournaments / VIP
   ========================================================================== */
.nc-tours{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
/* The block is centred - its heading, its three cards - so each card's text
   and button are centred too (owner's rule 4). */
.nc-tour{
  position:relative;min-width:0;border-radius:var(--nc-r2);overflow:hidden;padding:22px;
  text-align:center;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(140deg,var(--nc-card2),var(--nc-bg2)));
  background-size:cover;background-position:center;
  border:1px solid var(--nc-line);
}
.nc-tour::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,10,.72),rgba(14,11,10,.90))}
.nc-tour > *{position:relative;z-index:2}
.nc-tour__k{
  display:inline-block;font-family:var(--nc-f-head);font-size:10.5px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--nc-on-accent);background:var(--nc-grad);
  padding:4px 10px;border-radius:5px;margin-bottom:12px;
}
.nc-tour__n{font-family:var(--nc-f-head);font-weight:800;font-size:21px;margin:0 0 8px;color:#fff}
.nc-tour__p{font-family:var(--nc-f-head);font-weight:800;font-size:26px;color:var(--nc-a1);margin:0 0 4px}
.nc-tour__s{font-size:13px;color:var(--nc-ink3);margin:0 0 18px}

.nc-vip{
  position:relative;border-radius:var(--nc-r2);overflow:hidden;padding:30px 26px;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(160deg,var(--nc-card2),var(--nc-bg2) 70%));
  background-size:cover;background-position:center;
  border:1px solid var(--nc-line);
}
.nc-vip::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,10,.62),rgba(14,11,10,.88))}
.nc-vip > *{position:relative;z-index:2}
.nc-vip__path{
  display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 0 24px;padding:0;list-style:none;
}
/* the tiers are centred, so is their button (owner's rule 4) */
.nc-vip__cta{display:flex;justify-content:center}
.nc-vip__step{text-align:center;min-width:0}
.nc-vip__hex{
  width:74px;height:82px;margin:0 auto 9px;position:relative;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(160deg,var(--nc-a3),#3a2a1c));
  background-size:cover;background-position:center;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex;align-items:flex-end;justify-content:center;
}
.nc-vip__hex::after{
  content:"";position:absolute;inset:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  box-shadow:inset 0 0 0 2px rgba(251,203,150,.45);
}
.nc-vip__lv{
  display:inline-block;font-family:var(--nc-f-head);font-size:10.5px;font-weight:800;
  letter-spacing:.4px;color:var(--nc-on-accent);background:var(--nc-grad);
  padding:3px 9px;border-radius:4px;
}
.nc-vip__pz{display:block;font-size:12.5px;color:var(--nc-ink2);margin-top:7px;line-height:1.35}

/* ==========================================================================
   8. Article
   ========================================================================== */
.nc-art{
  background:linear-gradient(180deg,var(--nc-panel-top) 0%,var(--nc-bg2) 340px);border:1px solid var(--nc-line);
  border-radius:var(--nc-r2);padding:34px 30px;margin-top:34px;
}
.nc-art__in > *{max-width:min(100%,var(--nc-measure));margin-inline:auto}
.nc-art h1{
  font-family:var(--nc-f-head);font-weight:800;font-size:clamp(27px,3.2vw,38px);
  line-height:1.2;margin:0 0 30px;color:#fff;
}
.nc-art h2{
  font-family:var(--nc-f-head);font-weight:700;font-size:clamp(21px,2.2vw,27px);
  line-height:1.28;margin:38px 0 14px;color:var(--nc-accent);
  padding-bottom:10px;border-bottom:1px solid var(--nc-line);
}
.nc-art h3{
  font-family:var(--nc-f-head);font-weight:700;font-size:18px;
  margin:26px 0 10px;color:var(--nc-ink);
}
/* German compounds: "Verantwortungsbewusstes" alone is wider than a 320px
   phone at h2 size. Hyphenate by the page's lang="de" dictionary; break
   anywhere only as a last resort. */
.nc-art h1,.nc-art h2,.nc-art h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;
  hyphenate-limit-chars:14 6 6}
.nc-art p{margin:0 0 15px;color:var(--nc-ink2)}
.nc-art strong{color:var(--nc-ink)}
.nc-art__body a:not(.nc-btn){color:var(--nc-accent);text-decoration:underline;text-underline-offset:2px}

.nc-art ul,.nc-art ol{margin:0 0 18px;padding-left:0;list-style:none;color:var(--nc-ink2)}
/* Markers sit on the CENTRE of the item's first line (owner's rule 3): half
   a line box down (line-height/2 = .81em at 1.62), minus half the marker. */
.nc-art ul li{position:relative;padding-left:26px;margin-bottom:9px}
.nc-art ul li::before{
  content:"";position:absolute;left:6px;top:calc(.81em - 4px);width:8px;height:8px;
  transform:rotate(45deg);background:var(--nc-b2);border-radius:1.5px;
}
.nc-art ol{counter-reset:nc-o}
.nc-art ol li{position:relative;padding-left:38px;margin-bottom:11px;counter-increment:nc-o}
.nc-art ol li::before{
  content:counter(nc-o);position:absolute;left:0;top:calc(.81em - 13px);
  width:26px;height:26px;border-radius:7px;background:var(--nc-grad);color:var(--nc-on-accent);
  font-family:var(--nc-f-head);font-weight:800;font-size:12.5px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

.nc-note{
  display:flex;gap:12px;align-items:center;
  background:var(--nc-accent-soft);border-left:3px solid var(--nc-a2);
  border-radius:0 var(--nc-r) var(--nc-r) 0;padding:14px 18px;margin:0 0 18px;
  color:var(--nc-ink2);font-size:14.5px;
}
.nc-note svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--nc-a2);stroke-width:1.8}

/* tables */
.nc-tw{overflow-x:auto;margin:0 0 22px;border:1px solid var(--nc-line);border-radius:var(--nc-r);
  scrollbar-width:thin;scrollbar-color:var(--nc-line2) transparent}
.nc-tw table{width:100%;border-collapse:collapse;min-width:520px;font-size:14px}
.nc-tw th,.nc-tw td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--nc-line);vertical-align:top}
/* The head is the owner's words as written - no text-transform: an
   uppercased "STUDIO" is not his "Studio" in the rendered text. */
.nc-tw thead th{
  background:var(--nc-card2);color:var(--nc-accent);
  font-family:var(--nc-f-head);font-weight:700;font-size:13px;letter-spacing:.2px;
  border-bottom:1px solid var(--nc-line2);white-space:nowrap;
}
/* each cell carries its column's head for the phone cards; one head is enough above */
.nc-td__l{display:none}
.nc-tw tbody tr:last-child td{border-bottom:0}
.nc-tw tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.nc-tw td:first-child{color:var(--nc-ink);font-weight:600}

/* toc */
.nc-toc{
  background:var(--nc-card);border:1px solid var(--nc-line);border-radius:var(--nc-r);
  padding:18px 22px;margin:0 auto 26px;
}
.nc-toc b{
  display:block;font-family:var(--nc-f-head);font-size:12px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--nc-accent);margin-bottom:10px;
}
.nc-toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:26px}
/* The number badge is absolutely positioned and 26px tall - taller than a
   one-line entry. Left to overhang its <li>, the last badge of column one was
   painted at the TOP of column two (the "tail of the 6"). The item has to
   contain its badge: an inline-block never fragments across columns, and the
   min-height gives it the badge's full 1+26px. */
.nc-toc li{padding-left:0;margin:0 0 7px;break-inside:avoid;counter-increment:none;
  display:inline-block;width:100%;min-height:27px;vertical-align:top}
.nc-toc li::before{display:none}
.nc-toc a{color:var(--nc-ink2);font-size:13.5px}
.nc-toc a:hover{color:var(--nc-accent)}

/* faq */
.nc-faq{display:grid;gap:10px;margin:0 auto 22px}
.nc-faq details{
  background:var(--nc-card);border:1px solid var(--nc-line);border-radius:var(--nc-r);
  overflow:hidden;
}
.nc-faq summary{
  list-style:none;cursor:pointer;padding:15px 46px 15px 18px;position:relative;
  font-family:var(--nc-f-head);font-weight:600;font-size:15px;color:var(--nc-ink);
}
.nc-faq summary::-webkit-details-marker{display:none}
.nc-faq summary::after{
  content:"";position:absolute;right:19px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--nc-a2);border-bottom:2px solid var(--nc-a2);
  transform:rotate(45deg);transition:transform .2s ease;
}
.nc-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.nc-faq summary:hover{color:var(--nc-accent)}
.nc-faq__a{padding:0 18px 16px;color:var(--nc-ink2);font-size:14.5px}
.nc-faq__a p{margin:0}

/* player reviews */
/* --nc-cols comes from build.py: the widest count up to 3 that leaves no
   single card on the last row (3 -> 3, 4 -> 2 x 2, 2 -> 2). */
.nc-revs{display:grid;gap:14px;grid-template-columns:repeat(var(--nc-cols,2),minmax(0,1fr));margin:0 auto 24px}
.nc-rev{
  background:var(--nc-card);border:1px solid var(--nc-line);border-radius:var(--nc-r);
  padding:18px 20px;min-width:0;
}
/* The card shows the owner's line whole: the quoted headline beside the
   initial (centred on it - rule 3), then the body, signed "— Name". */
.nc-rev__h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.nc-rev__h .nc-rev__t{margin:0;min-width:0}
.nc-rev__by{font-style:normal;font-weight:700;color:var(--nc-ink);white-space:nowrap}
.nc-rev__av{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--nc-grad);
  color:var(--nc-on-accent);font-family:var(--nc-f-head);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.nc-rev__n{font-family:var(--nc-f-head);font-weight:700;font-size:14px;color:var(--nc-ink);min-width:0;overflow-wrap:anywhere}
.nc-rev__q{margin:0;color:var(--nc-ink2);font-size:14px;font-style:italic}

/* score panel */
.nc-score{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  background:var(--nc-card);border:1px solid var(--nc-line);border-radius:var(--nc-r);
  padding:20px 24px;margin:0 auto 22px;
}
.nc-score__big{
  /* min-width, not width: "Gesamtbewertung" is longer than the English
     "Overall Rating" and a fixed 98px box let it bleed out, dark-on-dark,
     reading "esamtbewertun". The badge grows to its label instead. */
  flex:none;min-width:98px;height:98px;border-radius:18px;background:var(--nc-grad);
  color:var(--nc-on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 12px;
}
.nc-score__big b{font-family:var(--nc-f-head);font-weight:800;font-size:30px;line-height:1}
.nc-score__big span:not(:where(.go-link)){font-family:var(--nc-f-head);font-size:11px;font-weight:700;letter-spacing:.5px;margin-top:2px}
.nc-score__t{flex:1 1 240px;min-width:0}
.nc-score__t b{display:block;font-family:var(--nc-f-head);font-size:16px;color:var(--nc-ink);margin-bottom:4px}
.nc-score__t span:not(:where(.go-link)){display:block;color:var(--nc-ink3);font-size:13.5px}

.nc-byline{
  display:flex;align-items:center;gap:12px;margin:26px auto 0;
  padding-top:18px;border-top:1px solid var(--nc-line);color:var(--nc-ink3);font-size:13.5px;
}
.nc-byline__av{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--nc-card2);
  border:1px solid var(--nc-line2);color:var(--nc-accent);
  font-family:var(--nc-f-head);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.nc-byline__av .nc-ico{width:18px;height:18px}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.nc-foot{
  background:var(--nc-bar);border-top:1px solid rgba(0,0,0,.35);
  padding:34px var(--nc-gut) 30px;
}
.nc-foot__g{
  display:grid;gap:26px;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1280px;margin:0 auto 24px;
}
.nc-foot__c{min-width:0}
.nc-foot__h{
  font-family:var(--nc-f-head);font-size:12px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--nc-accent);margin:0 0 12px;
}
.nc-foot__l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.nc-foot__l a,.nc-foot__l .go-link{color:var(--nc-ink2);font-size:13.5px}
.nc-foot__l a:hover,.nc-foot__l .go-link:hover{color:var(--nc-accent)}
/* Same 1280px measure and centring as .nc-foot__g, or the chips sit flush to
   the screen edge while the columns above them are indented. */
/* ten payment chips: 10 / 5 / 2 across, never a lone chip on the last row */
.nc-pay{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px;max-width:1280px;margin:0 auto 22px}
.nc-pay span:not(:where(.go-link)){
  display:flex;align-items:center;justify-content:center;height:30px;padding:0 8px;min-width:0;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--nc-line);border-radius:6px;
  font-family:var(--nc-f-head);font-size:11px;font-weight:700;color:var(--nc-ink2);letter-spacing:.3px;
}
.nc-foot__b{
  max-width:1280px;margin:0 auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  color:var(--nc-ink3);font-size:12.5px;
}
.nc-age{
  flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--nc-ink3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--nc-f-head);font-weight:800;font-size:12px;color:var(--nc-ink2);
}
.nc-foot__d{flex:1 1 380px;min-width:0;margin:0;line-height:1.55}

/* ==========================================================================
   10. Modals / cookie / chat
   ========================================================================== */
.nc-modal{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(8,6,6,.72);backdrop-filter:blur(3px);
}
.nc-modal.is-on{display:flex}
.nc-modal__box{
  position:relative;width:100%;max-width:760px;max-height:88vh;overflow-y:auto;
  background:var(--nc-bar);border:1px solid var(--nc-line2);border-radius:var(--nc-r2);
  padding:30px;box-shadow:var(--nc-shadow);
}
.nc-modal__x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--nc-a2);background:transparent;color:var(--nc-a1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;line-height:1;
}
.nc-modal__x:hover{background:var(--nc-a2);color:var(--nc-on-accent)}
.nc-modal__t{
  font-family:var(--nc-f-head);font-weight:800;font-size:26px;color:var(--nc-accent);
  text-align:center;margin:0 0 22px;
}

/* language picker */
/* 33 versions in the picker: 3 across (11 rows), one column on a phone */
.nc-langs{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.nc-langs a{
  display:flex;align-items:center;gap:10px;min-width:0;
  background:var(--nc-card);border:1px solid var(--nc-line);border-radius:9px;
  padding:10px 12px;color:var(--nc-ink2);font-size:13.5px;font-family:var(--nc-f-head);font-weight:600;
}
.nc-langs a:hover{border-color:var(--nc-a2);color:var(--nc-ink)}
.nc-langs a[aria-current="true"]{border-color:var(--nc-a1);background:var(--nc-grad);color:var(--nc-on-accent)}
.nc-fl{
  flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;
  display:block;background:#3b3335;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.nc-langs .nc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* wheel */
.nc-wheel{display:flex;flex-direction:column;align-items:center;gap:22px}
/* The wedge colours come from build.py as an inline `background`, so the
   highlighted wedge is always the one the rigged spin lands on. */
.nc-wheel__d{
  position:relative;width:min(340px,74vw);aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 12px #d8bb8f,0 0 0 16px #a8895f,0 14px 40px rgba(0,0,0,.55);
  transition:transform 4.6s cubic-bezier(.16,.84,.28,1);
}
.nc-wheel__d::after{
  content:"";position:absolute;inset:26%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fffdf7,#e2d6c0);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.18);
}
/* Each label is a full-size layer rotated about the DISC centre. Anchoring on
   the text box instead made transform-origin depend on the label's own width,
   so long and short labels landed at different radii and overlapped. */
.nc-wheel__seg{
  position:absolute;inset:0;
  display:flex;justify-content:center;align-items:flex-start;
  padding-top:8%;transform-origin:50% 50%;pointer-events:none;
  font-family:var(--nc-f-head);font-weight:800;font-size:11.5px;color:#fff8ee;
  text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap;
}
.nc-wheel__pin{
  position:absolute;left:50%;top:-13px;transform:translateX(-50%);
  width:26px;height:34px;background:var(--nc-grad);
  clip-path:polygon(50% 100%,0 32%,50% 0,100% 32%);z-index:3;
}
.nc-wheel__f{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
.nc-wheel__f span:not(:where(.go-link)){font-family:var(--nc-f-head);font-size:13.5px;color:var(--nc-ink2);font-weight:600}
.nc-wheel__out{
  min-height:24px;font-family:var(--nc-f-head);font-weight:800;font-size:17px;color:var(--nc-a1);text-align:center;
}

/* cookie */
.nc-cookie{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:70;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;
  width:min(760px,100%);
  background:var(--nc-bar2);border:1px solid var(--nc-line2);border-bottom:0;
  border-radius:var(--nc-r) var(--nc-r) 0 0;
  padding:12px 20px;font-size:13.5px;color:var(--nc-ink2);box-shadow:0 -8px 24px rgba(0,0,0,.34);
}
.nc-cookie.is-off{display:none}

/* chat bubble */
.nc-chat{
  position:fixed;right:18px;bottom:18px;z-index:65;
  width:52px;height:52px;border-radius:50%;background:var(--nc-bar2);border:1px solid var(--nc-line2);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--nc-shadow);
}
.nc-chat svg{width:24px;height:24px;fill:none;stroke:var(--nc-a1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* app store buttons - the label is long in most languages, so it is allowed to
   wrap onto two lines instead of stretching the button across the banner */
.nc-stores{display:flex;flex-wrap:wrap;gap:12px;margin:0 auto 22px}
.nc-store{
  display:inline-flex;align-items:center;gap:12px;min-width:0;max-width:260px;
  background:rgba(20,17,15,.72);border:1px solid var(--nc-line2);border-radius:var(--nc-r);
  padding:11px 18px;color:var(--nc-ink);font-family:var(--nc-f-head);font-weight:700;
  font-size:13.5px;line-height:1.25;backdrop-filter:blur(3px);
}
.nc-store:hover{border-color:var(--nc-a2);background:rgba(46,40,36,.86)}
.nc-store svg{width:26px;height:26px;flex:none;fill:var(--nc-a1)}
.nc-store__t{min-width:0;text-align:left}

/* image-only banner that carries the store buttons */
/* 300px, not 260: at 260 the desktop box is 4.28:1 against a 3.2:1 plate and
   `cover` threw away 25% of the height, slicing the top off the phone. */
.nc-appbar{
  position:relative;display:flex;align-items:flex-end;
  min-height:300px;border-radius:var(--nc-r2);overflow:hidden;padding:24px;
  background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(115deg,var(--nc-card2),var(--nc-bg2)));
  background-size:cover;background-position:center;
}
.nc-appbar::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(12,10,9,.72) 100%);
}
.nc-appbar .nc-stores{position:relative;z-index:2;margin:0}

/* Flag marks live in css/flags.css - real SVG geometry, generated by
   tools/make_flags.py. The CSS-gradient versions that used to sit here
   were unrecognisable at 26px (Norway read as Denmark). */

/* ==========================================================================
   10b. Loading screen
   ==========================================================================
   The brand's thin outer hexagon spinning around the filled mark, over the
   page ground - the operator's own splash.

   The exit is a CSS animation, not a JS call. If site.js never runs (blocked,
   parse error, old browser) the cover still lifts on its own, so a script
   failure can never leave the site behind a curtain. JS only ADDS `is-done`
   to bring the exit forward once `load` has fired. `visibility:hidden` at the
   end of the keyframes is what stops it eating clicks; `opacity:0` alone
   would leave an invisible full-screen lid in place. */
.nc-boot{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:var(--nc-bg);
  animation:nc-boot-out .45s ease 1.05s forwards;
}
.nc-boot.is-done{animation:nc-boot-out .3s ease 0s forwards}
@keyframes nc-boot-out{to{opacity:0;visibility:hidden}}

.nc-boot__m{position:relative;width:132px;height:145px}
.nc-boot__ring,.nc-boot__core{position:absolute;inset:0;width:100%;height:100%;display:block}
.nc-boot__ring{
  fill:var(--nc-a1);opacity:.85;
  transform-origin:50% 50%;
  animation:nc-boot-spin 2.8s linear infinite;
}
.nc-boot__core{fill:var(--nc-a1);animation:nc-boot-beat 1.7s ease-in-out infinite}
@keyframes nc-boot-spin{to{transform:rotate(360deg)}}
@keyframes nc-boot-beat{50%{opacity:.72}}

/* ==========================================================================
   10c. Pieces this fork adds
   ========================================================================== */

/* Spec table: term/value pairs with no header row, because the source has no
   header row. A centred head over two columns of this shape fits neither. */
.nc-tw--spec table{min-width:0}
.nc-tw--spec th[scope="row"]{
  width:30%;min-width:150px;
  background:var(--nc-card2);color:var(--nc-accent);
  font-family:var(--nc-f-head);font-weight:700;font-size:13px;text-align:left;
  border-right:1px solid var(--nc-line);
}
.nc-tw--spec td{color:var(--nc-ink2)}

/* Player review: a bold headline quote over the body, the shape the source
   itself uses. Under the headline the review's score - stars and "N/5" -
   which the schema's reviewRating repeats (playbook 9.2: the score Google
   reads must be visible on the card; data/review_ratings.json). */
.nc-rev__r{display:flex;align-items:center;gap:8px;margin:0 0 8px;line-height:1}
.nc-rev__st{color:var(--nc-a1);letter-spacing:2px;font-size:15px;white-space:nowrap}
.nc-rev__rv{font-family:var(--nc-f-head);font-weight:700;font-size:13px;color:var(--nc-ink)}

/* Internal "Read more: <page>" buttons (owner, 19 Oct 2026): a row closing
   an article section, left under its text; centred under a lobby module. */
.nc-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 26px}
.nc-more--c{justify-content:center;margin:20px 0 0}
.nc-art__body .nc-more:last-child{margin-bottom:0}
.nc-more__a{max-width:100%;text-align:left}
.nc-more__a > span{min-width:0;overflow-wrap:anywhere}
.nc-more__i{width:17px;height:17px;flex:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nc-vip__cta{flex-wrap:wrap;gap:12px}
.nc-more--c .nc-more__a,.nc-vip__cta .nc-more__a{text-align:center}
.nc-appbar .nc-more__a{align-self:center}
.nc-rev__t{
  margin:0 0 8px;font-family:var(--nc-f-head);font-weight:700;font-size:14.5px;
  line-height:1.35;color:var(--nc-a1);
}
.nc-stars{color:var(--nc-a1);letter-spacing:2px;white-space:nowrap;font-size:15px}

/* Store buttons. The logo sits in its own box so the two marks optically
   match - the Apple glyph is tall and narrow, the robot short and wide. */
.nc-store__i{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
}
.nc-store__i svg{width:100%;height:100%;fill:var(--nc-a1);display:block}
.nc-store:hover .nc-store__i svg{fill:#fff}

.nc-wheel__w{position:relative;width:min(340px,74vw)}
.nc-foot__logo{margin-bottom:15px;height:48px;width:auto}

/* ==========================================================================
   10d. Country strip
   ==========================================================================
   The footer half of the cross-link cluster: the same page type on each of
   the ten National Casino country domains. */
.nc-geo-strip{max-width:1280px;margin:0 auto 20px}
/* 33 versions (7 Oct 2026): 7 / 6 / 3 across (33 = 4x7+5 = 5x6+3 = 11x3) -
   no width leaves one pill alone on the last row (4 or 8 across would). */
.nc-geo-strip__l{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.nc-geo-strip a{
  display:flex;align-items:center;gap:8px;min-width:0;
  background:rgba(255,255,255,.045);border:1px solid var(--nc-line);border-radius:999px;
  padding:6px 13px 6px 7px;color:var(--nc-ink2);font-size:12.5px;line-height:1.3;
}
.nc-geo-strip a:hover{border-color:var(--nc-a2);color:var(--nc-ink)}
.nc-geo-strip a[aria-current="true"]{border-color:var(--nc-a1);color:var(--nc-a1)}
.nc-geo-strip .nc-fl{width:20px;height:20px}

/* ==========================================================================
   11. Motion
   ========================================================================== */
/* The reveal rule MUST outrank the hide rule. `html.nc-js .nc-in` is (0,2,1);
   a bare `.nc-in.is-vis` is only (0,2,0), so the class the JS adds lost the
   cascade and every module stayed at opacity 0 in real browsers. Keep the same
   `html.nc-js` prefix on the reveal so it scores (0,3,1) and wins. */
/* Motion only - the text is NEVER transparent. An opacity reveal left every
   panel below the fold at opacity 0 until it was scrolled to, and a contrast
   check that does not scroll measured 1:1 on 70+ pages (bot, 5 Oct 2026). */
html.nc-js .nc-in{transform:translateY(16px)}
.nc-in{transition:transform .55s ease}
html.nc-js .nc-in.is-vis{transform:none}
.nc-in.is-vis{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.nc-js .nc-in{transform:none}
  .nc-in,.nc-btn,.nc-tile__a,.nc-slide,.nc-wheel__d{transition:none !important}
  /* Stop the spin and the beat, but NEVER nc-boot-out: that animation is how
     the splash lifts, so a blanket `animation:none` here would pin the cover
     over the page for every reduced-motion visitor. */
  .nc-boot__ring,.nc-boot__core{animation:none !important}
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
/* The drawer itself (rail off-canvas, burger shown, header menu folded) is
   NOT here: it switches on html.nc-fold (site.js, real fonts) or below the
   version's measured fold width, so build.py writes both into each page's
   <style data-nc-fold>. The scrim behind the open drawer sleeps until then. */
.nc-scrim{display:none}
/* site.js measures the header with the menu unfolded for one moment: no
   transition may start from that state (the drawer slid shut on every load) */
html.nc-measure .nc-rail,html.nc-measure .nc-scrim{transition:none!important}
@media (max-width:1100px){
  .nc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nc-live{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nc-pay{grid-template-columns:repeat(5,minmax(0,1fr))}
  .nc-geo-strip__l{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:1024px){
  :root{--nc-gut:18px}
  .nc-hero__vp{min-height:340px}
  .nc-foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nc-tours{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------------------------------
   Phone. The header row is a width budget: burger 38 + logo 30 + search 34 +
   login + register + flag 38, and at 390px it does not balance. Login goes
   first (it is the one action a visitor can reach from the operator page
   anyway), then the search, then the switcher's country code - but never the
   switcher itself, which stays beside the buttons as a flag square.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  :root{--nc-top-h:60px;--nc-gut:13px}
  body{font-size:14.5px}
  .nc-logo img{height:30px}
  .nc-top{column-gap:8px;padding:0 11px}
  .nc-top__l{gap:9px}
  .nc-acts{gap:7px}
  .nc-acts .nc-btn{padding:9px 13px;font-size:12.5px}
  .nc-art{padding:20px 14px}
  .nc-art h1{margin-bottom:22px}
  .nc-art h2{margin-top:30px}
  .nc-sec{margin:26px 0}
  /* Phone hero. Keeping the copy ON the plate here throws the picture away:
     a 2.6:1 plate inside a ~1.4:1 box is cropped to its middle 50%, and the
     detective the whole page is built around sits in the left fifth. Split it
     instead - the art at its own ratio, the copy on the panel under it - and
     nothing is cropped at all. `--nc-art` is a custom property set on the
     slide, so it inherits down to the layer that now carries the picture. */
  .nc-hero__vp{min-height:0}
  /* A flex box is a ROW by default: without this the plate and the copy
     sit side by side, the copy overflows what is left of the slide and
     spills over the next banner. */
  .nc-slide{background-image:none;flex-direction:column;align-items:stretch}
  .nc-slide__gl{
    position:relative;inset:auto;display:block;width:100%;aspect-ratio:2.6/1;
    background-image:var(--nc-art,none),var(--nc-fb,linear-gradient(120deg,var(--nc-card2),var(--nc-bg2)));
    background-size:cover;background-position:center;
  }
  .nc-slide__gl{flex:none}
  .nc-slide__in{flex:1 1 auto;width:100%;padding:18px 16px 30px;max-width:none;background:var(--nc-bg2)}
  .nc-slide__t,.nc-slide__v{text-shadow:none}
  .nc-hero__dots{position:static;padding:0 0 16px;background:var(--nc-bg2)}
  .nc-grid{gap:10px}
  .nc-live{gap:10px}
  .nc-revs{grid-template-columns:minmax(0,1fr)}
  .nc-geo-strip__l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nc-offer{padding:14px;min-height:0}
  .nc-offer__in{padding:16px;max-width:none}
  .nc-toc{padding:15px 16px}
  .nc-toc ol{columns:1}
  .nc-modal__box{padding:24px 16px}
  .nc-foot{padding:26px var(--nc-gut) 26px}
  .nc-foot__g{gap:20px}
  .nc-score{padding:16px;gap:14px}
  .nc-score__big{min-width:72px;height:72px;border-radius:14px;padding:0 9px}
  .nc-score__big span{font-size:9.5px;letter-spacing:.3px}
  .nc-score__big b{font-size:24px}
  .nc-appbar{min-height:210px;padding:16px}
  .nc-vip__path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nc-tour{padding:18px}
  .nc-boot__m{width:104px;height:114px}
  /* The cookie bar is fixed to the bottom and the chat bubble sits on top of
     it at this width; give the bubble the corner and the bar the full row. */
  .nc-cookie{padding:11px 14px;font-size:12.5px;gap:8px 12px}
  .nc-chat{width:46px;height:46px;right:12px;bottom:64px}
}

@media (max-width:520px){
  .nc-acts .nc-btn--ghost{display:none}
  .nc-search{display:none}
  .nc-geo__c{display:none}
  .nc-geo{padding:0 7px;gap:0}
  .nc-geo .nc-caret{display:none}
  .nc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nc-live{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nc-langs{grid-template-columns:minmax(0,1fr)}
  .nc-pay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nc-stores{gap:8px}
  .nc-store{max-width:none;flex:1 1 100%;padding:10px 14px}
  /* A three-value `padding` shorthand would reset the side gutter to 0 and
     the article would run to the screen edge. Set the block padding only. */
  .nc-art{padding-block:18px}
  .nc-vip{padding:22px 16px}
  .nc-vip__path{gap:10px}
  .nc-revs{grid-template-columns:minmax(0,1fr)}
  .nc-tours{grid-template-columns:minmax(0,1fr)}
  .nc-foot__g{grid-template-columns:minmax(0,1fr)}
  .nc-geo-strip a{padding:5px 8px 5px 5px;font-size:11px;gap:5px}
  .nc-geo-strip .nc-fl{width:16px;height:16px}
  .nc-tw--spec th[scope="row"]{min-width:118px;font-size:12.5px}
  .nc-tw table{font-size:13.5px}
  .nc-tw th,.nc-tw td{padding:10px 12px}
}

/* The wide plates fade into the ground instead of butting against it. Until
   this existed every fork's ground had to sit within 4.0 OKLab of the plates'
   warm edge (#1e120b) or the rectangle showed, which is what kept all ten
   grounds inside one near-neutral band. The shadow uses the TOKEN, so it
   follows whatever this fork's ground is. */
/* :where() so this can never beat an element's own positioning - as a plain
   selector it overrode the carousel stage and broke it. */
:where(.nc-promo,.nc-tour,.nc-appbar,.nc-offer){position:relative}
.nc-slide::after,.nc-promo::after,.nc-tour::after,.nc-appbar::after,
.nc-offer::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 44px 14px var(--nc-bg);
}

/* ==========================================================================
   13. What nationalcasino.net adds: ten page types, 33 versions
   ========================================================================== */
/* No second row under the header (owner's rule 2, 5 Oct 2026): the page
   menu that used to run here is the header's own centred row now. */
html{scroll-padding-top:calc(var(--nc-top-h) + 14px)}

/* The page head (H1, page navigation, score) is a panel of its own, outside
   <article>; the article's first panel follows it closely. */
.nc-wrap--lead + .nc-wrap > .nc-art{margin-top:16px}
.nc-art--lead .nc-art__in > :last-child{margin-bottom:0}
.nc-art--lead h1:last-child{margin-bottom:0}

/* Phone tables (playbook 7.3): a table that scrolls sideways hides its right
   columns off the screen, so under 760px every row becomes a card of
   label / value pairs - the labels are real text in each cell (.nc-td__l),
   the head row steps aside. Spec tables (two columns) stay tables. */
@media (max-width:760px){
  .nc-tw:not(.nc-tw--spec){border:0;overflow:visible;border-radius:0}
  .nc-tw:not(.nc-tw--spec) table,.nc-tw:not(.nc-tw--spec) tbody{display:block;width:100%;min-width:0}
  .nc-tw:not(.nc-tw--spec) thead{display:none}
  .nc-tw:not(.nc-tw--spec) tr{display:block;margin:0 0 12px;background:var(--nc-card);
    border:1px solid var(--nc-line);border-radius:var(--nc-r);overflow:hidden}
  .nc-tw:not(.nc-tw--spec) tbody tr:nth-child(even){background:var(--nc-card)}
  .nc-tw:not(.nc-tw--spec) td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
    column-gap:12px;align-items:start;padding:10px 14px;border-bottom:1px solid var(--nc-line);min-width:0}
  .nc-tw:not(.nc-tw--spec) tr td:last-child{border-bottom:0}
  .nc-tw:not(.nc-tw--spec) .nc-td__l{display:block;color:var(--nc-accent);font-family:var(--nc-f-head);
    font-weight:700;font-size:12.5px;line-height:1.4;min-width:0}
  .nc-tw:not(.nc-tw--spec) td.nc-stars{white-space:normal}
  .nc-td__v{min-width:0;overflow-wrap:break-word}
}

/* breadcrumbs */
.nc-crumbs{margin:18px 0 0;font-size:13px;color:var(--nc-ink3)}
.nc-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.nc-crumbs li{min-width:0}
.nc-crumbs li + li::before{content:"\203A";margin-right:6px;color:var(--nc-b2)}
.nc-crumbs a{color:var(--nc-ink2)}
.nc-crumbs a:hover{color:var(--nc-accent)}

.nc-art h4{
  font-family:var(--nc-f-head);font-weight:700;font-size:16px;margin:22px 0 8px;color:var(--nc-a1);
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;
}
.nc-art__body{overflow-wrap:break-word}

/* The page navigation is a disclosure: open on a desktop, folded on a phone
   (site.js folds it under 760px; without the script it simply stays open). */
.nc-toc summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
  font-family:var(--nc-f-head);font-size:12px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--nc-accent);
}
.nc-toc summary::-webkit-details-marker{display:none}
.nc-toc summary::after{
  content:"";flex:none;width:8px;height:8px;margin-right:4px;
  border-right:2px solid var(--nc-a2);border-bottom:2px solid var(--nc-a2);
  transform:rotate(45deg);transition:transform .2s ease;
}
.nc-toc[open] summary{margin-bottom:10px}
.nc-toc[open] summary::after{transform:rotate(-135deg)}

/* back to top: always in the bottom-right corner (owner's layout sheet) */
.nc-up{
  position:fixed;right:21px;bottom:82px;z-index:65;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--nc-grad);color:var(--nc-on-accent);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--nc-shadow);
}
.nc-up svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* footer: responsible-gaming line and the version's own help line */
.nc-foot__rg{flex:1 1 320px;min-width:0}
.nc-foot__rg b{display:block;font-family:var(--nc-f-head);font-size:12px;letter-spacing:.8px;color:var(--nc-ink2)}
.nc-foot__b a,.nc-help{color:var(--nc-accent)}
.nc-foot__h--2{margin-top:22px}
/* the bonus-code strip is a promo strip whose button carries the code referral */
.nc-promo--code .nc-promo__t span:not(:where(.go-link)){font-size:15px;font-weight:600;font-family:var(--nc-f-body);color:var(--nc-ink2)}
.nc-age{width:auto;min-width:34px;padding:0 6px;border-radius:17px}

/* scripts the Latin webfonts do not cover: the text font comes first, and
   the line boxes open up for the taller glyphs */
html:lang(hi){--nc-f-body:"Noto Sans Devanagari","Inter","Segoe UI",system-ui,sans-serif;
  --nc-f-head:"Noto Sans Devanagari","Montserrat","Segoe UI",system-ui,sans-serif}
html:lang(bn){--nc-f-body:"Noto Sans Bengali","Inter","Segoe UI",system-ui,sans-serif;
  --nc-f-head:"Noto Sans Bengali","Montserrat","Segoe UI",system-ui,sans-serif}
/* Montserrat has no Greek: a Greek heading would set its Greek letters in the
   fallback and its Latin brand names in Montserrat, two faces in one line. */
html:lang(el){--nc-f-head:"Inter","Segoe UI",system-ui,sans-serif}
html:lang(hi) body,html:lang(bn) body{line-height:1.8}
html:lang(hi) .nc-art h1,html:lang(bn) .nc-art h1{line-height:1.3}
html:lang(hi) .nc-art h2,html:lang(bn) .nc-art h2,
html:lang(hi) .nc-art h3,html:lang(bn) .nc-art h3{line-height:1.38}

@media (max-width:760px){
  .nc-up{right:15px;bottom:118px;width:42px;height:42px}
}

/* ==========================================================================
   14. The original's look (owner's rule 8, 7 Oct 2026)
   ==========================================================================
   "The site looks and feels like the product": gradient surfaces where the
   product has them (page, header, sidebar, cards, buttons), the sidebar's
   counters and its recent-wins feed, the phone's big buttons and bottom tab
   bar, and motion - blocks rising into view, cards and buttons lifting and
   glowing under the pointer, a soft pulse on the main button, the banners
   changing on their own. prefers-reduced-motion switches all of it off. */

/* --- surfaces ------------------------------------------------------------ */
/* The page ground is the ground token, FLAT (8 Oct 2026). A warm glow over a
   lighter top painted ~#15100f under the header: 3.7 from pl's ground and
   PlanBet ES's very colour to the bot, which reads the painted page. The
   product's own ground is flat too; the gradients stay on the surfaces. */
.nc-toc,.nc-faq details,.nc-rev,.nc-score,.nc-appcard,.nc-langs a,.nc-wins{
  background:linear-gradient(180deg,var(--nc-card-top) 0%,var(--nc-card) 100%);
}
.nc-modal__box{background:linear-gradient(180deg,var(--nc-bar-top) 0%,var(--nc-bar) 100%)}
.nc-foot{background:linear-gradient(180deg,var(--nc-bar-top) 0%,var(--nc-bar) 100%)}
.nc-cookie{background:linear-gradient(180deg,#1b1718 0%,var(--nc-bar2) 100%)}
.nc-hero{box-shadow:0 0 0 1px rgba(233,189,140,.10),0 18px 44px rgba(0,0,0,.45)}
.nc-badge{background:var(--nc-grad);border-radius:6px;padding:4px 7px}

/* --- lift and glow under the pointer ------------------------------------- */
.nc-btn:hover{transform:translateY(-2px);box-shadow:var(--nc-glow)}
.nc-offer,.nc-tour,.nc-rev,.nc-lt,.nc-store,.nc-appcard,.nc-faq details,.nc-vip__step,.nc-langs a,
.nc-geo-strip a,.nc-rail__hi,.nc-quick__b{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease;
}
.nc-offer:hover,.nc-tour:hover,.nc-rev:hover,.nc-lt:hover,.nc-appcard:hover,.nc-vip__step:hover{
  transform:translateY(-4px);box-shadow:var(--nc-glow);
}
.nc-faq details:hover,.nc-langs a:hover,.nc-geo-strip a:hover,.nc-store:hover{
  transform:translateY(-2px);box-shadow:0 0 0 1px rgba(233,189,140,.30),0 8px 20px rgba(0,0,0,.35);
}
.nc-tile__a:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(233,189,140,.45),0 14px 30px rgba(214,149,107,.22)}
.nc-rail__hi:hover,.nc-quick__b:hover{filter:brightness(1.06);box-shadow:var(--nc-glow)}

/* --- the sidebar's big buttons: a light sweeping across, icons alive ----- */
.nc-rail__hi,.nc-quick__b{position:relative;overflow:hidden}
.nc-rail__hi::after,.nc-quick__b::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-140%) skewX(-18deg);
  animation:nc-sheen 4.2s ease-in-out infinite;
}
.nc-rail__hi--2::after,.nc-quick__b--2::after{animation-delay:2.1s}
.nc-rail__hi > *,.nc-quick__b > *{position:relative;z-index:1}
.nc-rail__hi[data-nc-open] svg,.nc-quick__b[data-nc-open] svg{animation:nc-spin 10s linear infinite}
.nc-rail__hi--2 svg,.nc-quick__b--2 svg{transform-origin:50% 60%;animation:nc-wiggle 3.6s ease-in-out infinite}
.nc-badge{animation:nc-glow 2.6s ease-in-out infinite}
.nc-rail__l li:nth-child(4) .nc-badge{animation-delay:1.3s}

@keyframes nc-sheen{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes nc-spin{to{transform:rotate(360deg)}}
@keyframes nc-wiggle{0%,82%,100%{transform:rotate(0)}87%{transform:rotate(-10deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
@keyframes nc-glow{0%,100%{box-shadow:0 0 0 0 rgba(233,189,140,0)}50%{box-shadow:0 0 0 4px rgba(233,189,140,.20)}}

/* --- the main button breathes -------------------------------------------- */
.nc-acts .nc-btn--fill,.nc-slide .nc-btn--fill,.nc-quick__b:not(.nc-quick__b--2){animation:nc-pulse 2.8s ease-in-out infinite}
@keyframes nc-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(233,189,140,.50),0 4px 14px rgba(214,149,107,.22)}
  50%{box-shadow:0 0 0 9px rgba(233,189,140,0),0 6px 20px rgba(214,149,107,.36)}
}

/* --- banners: the picture drifts, the copy rises in as a banner arrives -- */
.nc-slide{animation:nc-pan 18s ease-in-out infinite alternate}
.nc-slide:nth-child(2){animation-delay:-4.5s}
.nc-slide:nth-child(3){animation-delay:-9s}
.nc-slide:nth-child(4){animation-delay:-13.5s}
@keyframes nc-pan{from{background-position:50% 50%}to{background-position:58% 42%}}
/* `backwards`, never `both`: a fill that outlives the run would pin the
   transform and kill any later one (playbook 7.2) */
.nc-slide.is-on .nc-slide__in{animation:nc-rise .7s cubic-bezier(.2,.8,.25,1) backwards}
@keyframes nc-rise{from{transform:translateY(18px)}to{transform:none}}
.nc-hero__dots button[aria-selected="true"]{animation:nc-glow 2.2s ease-in-out infinite;
  box-shadow:0 0 10px rgba(233,189,140,.5)}

/* --- the tiles' player counters breathe, as the product's green ones ---- */
.nc-tile__f svg{fill:var(--nc-good);animation:nc-breathe 2.4s ease-in-out infinite}
.nc-tile:nth-child(2n) .nc-tile__f svg{animation-delay:-.8s}
.nc-tile:nth-child(3n) .nc-tile__f svg{animation-delay:-1.6s}
@keyframes nc-breathe{50%{opacity:.45}}

/* --- live tables blink, the chat bubble calls, the section marks glint --- */
.nc-lt__b i{animation:nc-blink 1.3s steps(2,jump-none) infinite}
@keyframes nc-blink{50%{opacity:.25}}
.nc-chat{animation:nc-ring 3s ease-out infinite}
@keyframes nc-ring{0%{box-shadow:0 0 0 0 rgba(233,189,140,.42),var(--nc-shadow)}100%{box-shadow:0 0 0 15px rgba(233,189,140,0),var(--nc-shadow)}}
.nc-sh__r::after{animation:nc-twinkle 3.4s ease-in-out infinite}
.nc-sh__r--l::after{animation-delay:1.7s}
@keyframes nc-twinkle{50%{border-color:var(--nc-btn-top);box-shadow:0 0 9px rgba(233,189,140,.55)}}

/* --- recent wins ---------------------------------------------------------- */
.nc-wins{margin-top:16px;border:1px solid var(--nc-line);border-radius:var(--nc-r);padding:12px 12px 6px}
.nc-wins__h{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-family:var(--nc-f-head);font-weight:800;font-size:13px;color:var(--nc-accent);
}
.nc-wins__h i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--nc-good);
  box-shadow:0 0 0 0 rgba(111,207,151,.6);animation:nc-live 2s ease-out infinite}
@keyframes nc-live{0%{box-shadow:0 0 0 0 rgba(111,207,151,.55)}100%{box-shadow:0 0 0 8px rgba(111,207,151,0)}}
.nc-wins__l{list-style:none;margin:0;padding:0}
.nc-wins__l li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.05);min-width:0}
.nc-wins__l li:first-child{border-top:0}
/* the first five rows on the rail, three on the phone - the rest are not
   drawn at all (display:none), so no row is ever cut by an edge */
.nc-wins--rail .nc-wins__l li:nth-child(n+6),.nc-wins--main .nc-wins__l li:nth-child(n+4){display:none}
.nc-wins__i{
  flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#2a2425 0%,#1a1617 100%);border:1px solid var(--nc-line2);color:var(--nc-btn-top);
}
.nc-wins__i .nc-ico{width:18px;height:18px;animation:nc-coin 4.5s ease-in-out infinite}
.nc-wins__l li:nth-child(2) .nc-ico{animation-delay:-1.1s}
.nc-wins__l li:nth-child(3) .nc-ico{animation-delay:-2.2s}
.nc-wins__l li:nth-child(4) .nc-ico{animation-delay:-3.3s}
@keyframes nc-coin{0%,70%,100%{transform:rotateY(0)}85%{transform:rotateY(180deg)}}
.nc-wins__t{min-width:0;line-height:1.3}
.nc-wins__t b{display:block;font-family:var(--nc-f-head);font-size:12px;font-weight:700;color:var(--nc-ink);overflow-wrap:anywhere}
.nc-wins__t span{display:block;font-size:11.5px;color:var(--nc-ink3);overflow-wrap:anywhere}
.nc-wins__l li.is-new{animation:nc-win-in .65s cubic-bezier(.2,.8,.25,1) backwards}
@keyframes nc-win-in{from{transform:translateY(-12px);background:rgba(233,189,140,.16)}to{transform:none;background:transparent}}

/* phone-only pieces: hidden on wider screens */
.nc-quick,.nc-wins-sec,.nc-tabbar{display:none}

/* --- the phone: two big buttons, the wins feed, the bottom tab bar ------- */
@media (max-width:760px){
  .nc-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
  .nc-quick__b{
    display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;
    border:0;border-radius:var(--nc-r);padding:13px 10px;cursor:pointer;
    background:var(--nc-grad);color:var(--nc-on-accent);
    font-family:var(--nc-f-head);font-weight:800;font-size:14px;line-height:1.2;text-align:center;
  }
  .nc-quick__b--2{background:linear-gradient(180deg,#e2ae80 0%,#c98a62 100%)}
  .nc-quick__b svg{width:22px;height:22px;flex:none}
  .nc-quick__b span{min-width:0;overflow-wrap:anywhere}
  .nc-wins-sec{display:block;margin-top:16px}
  .nc-wins--main{margin-top:0}
  .nc-slide__gl{animation:nc-pan 18s ease-in-out infinite alternate}
  /* Five tabs that share the row equally (flex-basis 0) but never shrink
     below their longest WORD (min-width:auto of a flex item) - a label like
     "Registrieren" or "Regisztráció" moves its neighbours rather than break
     mid-word; a two-word label wraps at its space. */
  .nc-tabbar{
    display:flex;align-items:stretch;gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:68;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,var(--nc-bar-top) 0%,var(--nc-bar) 100%);
    border-top:1px solid var(--nc-line2);box-shadow:0 -8px 24px rgba(0,0,0,.45);
  }
  .nc-tab{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:4px 2px;border:0;background:transparent;cursor:pointer;border-radius:9px;
    color:var(--nc-ink3);font-family:var(--nc-f-head);font-weight:700;font-size:10px;line-height:1.15;text-align:center;
  }
  .nc-tab span:not(:where(.go-link)){overflow-wrap:normal;word-break:normal;hyphens:manual}
  .nc-tab .nc-ico{width:21px;height:21px}
  .nc-tab[aria-current="page"]{color:var(--nc-accent);background:var(--nc-accent-soft)}
  .nc-tab--menu{color:var(--nc-ink)}
  .nc-tab--menu .nc-ico{width:42px;height:42px;padding:10px;border-radius:50%;margin-top:-20px;
    background:var(--nc-grad);color:var(--nc-on-accent);box-shadow:0 6px 16px rgba(0,0,0,.5)}
  .nc-tab--cta{color:var(--nc-a1)}
  @media (max-width:360px){.nc-tab{font-size:9.5px;padding:4px 1px}}
  /* everything fixed to the bottom moves up over the bar */
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .nc-cookie{bottom:calc(64px + env(safe-area-inset-bottom))}
  .nc-chat{bottom:calc(132px + env(safe-area-inset-bottom))}
  .nc-up{bottom:calc(186px + env(safe-area-inset-bottom))}
}

/* --- reduced motion: none of the above moves ------------------------------ */
@media (prefers-reduced-motion:reduce){
  .nc-rail__hi::after,.nc-quick__b::after,.nc-rail__hi svg,.nc-quick__b svg,.nc-badge,
  .nc-rail__hi[data-nc-open] svg,.nc-quick__b[data-nc-open] svg,.nc-rail__hi--2 svg,.nc-quick__b--2 svg,
  .nc-rail__hi--2::after,.nc-quick__b--2::after,.nc-rail__l li:nth-child(4) .nc-badge,
  .nc-acts .nc-btn--fill,.nc-slide .nc-btn--fill,.nc-quick__b,.nc-quick__b:not(.nc-quick__b--2),
  .nc-slide,.nc-slide:nth-child(2),.nc-slide:nth-child(3),.nc-slide:nth-child(4),.nc-slide__gl,
  .nc-slide.is-on .nc-slide__in,.nc-hero__dots button,.nc-hero__dots button[aria-selected="true"],
  .nc-lt__b i,.nc-chat,.nc-sh__r::after,.nc-sh__r--l::after,.nc-wins__h i,.nc-wins__i .nc-ico,
  .nc-wins__l li:nth-child(2) .nc-ico,.nc-wins__l li:nth-child(3) .nc-ico,.nc-wins__l li:nth-child(4) .nc-ico,
  .nc-wins__l li.is-new,.nc-tile__f svg,.nc-tile:nth-child(2n) .nc-tile__f svg,
  .nc-tile:nth-child(3n) .nc-tile__f svg{animation:none !important}
  .nc-rail__hi::after,.nc-quick__b::after{display:none}
  .nc-offer,.nc-tour,.nc-rev,.nc-lt,.nc-store,.nc-appcard,.nc-faq details,.nc-vip__step,.nc-langs a,
  .nc-geo-strip a,.nc-rail__hi,.nc-quick__b,.nc-tile__a{transition:none !important}
  .nc-btn:hover,.nc-offer:hover,.nc-tour:hover,.nc-rev:hover,.nc-lt:hover,.nc-appcard:hover,.nc-vip__step:hover,
  .nc-faq details:hover,.nc-langs a:hover,.nc-geo-strip a:hover,.nc-store:hover,.nc-tile__a:hover{transform:none}
}

/* ==========================================================================
   15. The look review (8 Oct 2026)
   ==========================================================================
   One review of the built site against the product's screenshots
   (qa/look.md): the inner pages open on a picture banner with a button, the
   phone gets the product's edge-to-edge buttons, its bright welcome card,
   both header buttons and the floating bonus hexagon, the chat bubble is the
   bright one, the slider's tag hangs from its golden edge over joined dots,
   the menu and the section heads carry the product's ornaments, the sidebar
   rows are taller, and the wins feed is a stack of plates. The network's
   tokens are untouched: the product's mint and its light card are surfaces
   here, in shades of our own (--nc-good's family, a warm off-white). */

/* --- the page head: the H1 over a picture, a button under it ------------ */
.nc-art--lead .nc-lead{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:300px;max-width:none;margin:-34px -30px 26px;overflow:hidden;
  border-radius:calc(var(--nc-r2) - 1px) calc(var(--nc-r2) - 1px) 0 0;
  background-color:var(--nc-bg2);
  background-image:var(--nc-art,none),linear-gradient(120deg,var(--nc-card2),var(--nc-bg2));
  background-size:cover;background-position:center;
  border-bottom:1px solid rgba(233,189,140,.28);
}
.nc-art--lead .nc-art__in > .nc-lead:last-child{margin-bottom:-34px;border-radius:calc(var(--nc-r2) - 1px);border-bottom:0}
/* the picture never covers the words: the copy stands on a dark centre,
   the character keeps the sides */
.nc-lead__gl{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(62% 100% at 50% 50%,rgba(10,8,8,.80),rgba(10,8,8,.44) 62%,rgba(10,8,8,.10) 86%),
    linear-gradient(180deg,rgba(10,8,8,.20),transparent 34%,rgba(10,8,8,.50));
}
.nc-lead__c{position:relative;z-index:2;width:100%;max-width:820px;padding:44px 28px 40px;text-align:center}
.nc-art .nc-lead h1{margin:0 0 24px;text-shadow:0 3px 18px rgba(0,0,0,.6)}
.nc-lead__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}

/* --- the header: diamonds between the menu items (absolute, so the row is
   exactly as wide as before and the measured fold widths still hold) ---- */
.nc-nav a{position:relative}
.nc-nav a + a::before{
  content:"";position:absolute;left:-3.5px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  transform:rotate(45deg);border:1px solid var(--nc-b2);border-radius:1px;pointer-events:none;
}
/* log in's key shows where the product shows it - the phone (on a desktop
   it would widen the measured header row) */
.nc-acts .nc-btn--ghost .nc-ico{display:none;width:16px;height:16px;stroke-width:2}
.nc-fbonus{display:none}

/* --- section heads: three lines running into the diamond, a bigger title */
.nc-sh__t{font-size:clamp(23px,2.3vw,32px)}
.nc-sh__r{height:12px}
.nc-sh__r::before{
  height:9px;margin-top:-4.5px;right:15px;
  background:
    linear-gradient(to top right,transparent calc(50% - .7px),var(--nc-line2) 50%,transparent calc(50% + .7px)) 0 0/100% 5px no-repeat,
    linear-gradient(90deg,transparent,var(--nc-b2)) 0 4px/100% 1px no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - .7px),var(--nc-line2) 50%,transparent calc(50% + .7px)) 0 4px/100% 5px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%);
}
.nc-sh__r::after{width:10px;height:10px;margin-top:-5px}

/* --- the slider: a golden top edge, the tag hanging from it, joined dots */
.nc-hero.nc-slider{isolation:isolate;border-top:2px solid var(--nc-b1);
  box-shadow:0 0 0 1px rgba(233,189,140,.30),0 18px 44px rgba(0,0,0,.45)}
.nc-slide__k{
  position:absolute;top:0;left:50%;z-index:3;transform:translateX(-50%);
  margin:0;padding:7px 18px 15px;border-radius:0;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 64%,50% 100%,0 64%);
  background-color:var(--nc-a2);
}
.nc-slide__k svg{width:15px;height:15px;flex:none}
.nc-hero__dots{
  gap:22px;
  background-image:linear-gradient(90deg,transparent,var(--nc-b2) 14%,var(--nc-b2) 86%,transparent);
  background-size:104px 1px;background-repeat:no-repeat;background-position:center;background-origin:content-box;
}
.nc-hero__dots button{position:relative;background:var(--nc-bg2)}
.nc-hero__dots button[aria-selected="true"]{width:14px;height:14px;background:var(--nc-b1);
  outline:1.4px solid var(--nc-b1);outline-offset:3px}

/* --- the sidebar: the product's taller rows, bigger icons --------------- */
.nc-rail__l a,.nc-rail__l .go-link{padding:14px 12px;font-size:14.5px}
.nc-rail__l svg{width:26px;height:26px}
.nc-rail__hi{padding:16px 14px;font-size:15px}
.nc-rail__hi svg{width:30px;height:30px}

/* --- recent wins: one plate per row, the amount on the right ------------ */
.nc-wins{background:none;border:0;border-radius:0;padding:0}
.nc-wins__h{margin:0 0 9px}
.nc-wins__l li{
  padding:8px 10px;margin-top:6px;border:1px solid var(--nc-line);border-radius:9px;
  background-color:var(--nc-card);background-image:linear-gradient(90deg,var(--nc-card-top) 0%,var(--nc-card) 100%);
}
.nc-wins__l li:first-child{margin-top:0;border-top:1px solid var(--nc-line)}
.nc-wins__t{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:baseline}
.nc-wins__t > span{grid-column:1 / -1}
.nc-wins__t .nc-wins__a{color:var(--nc-a1);white-space:nowrap;text-align:right;overflow-wrap:normal}
/* a new row arrives with a glint on its edge - the plate keeps its ground */
@keyframes nc-win-in{from{transform:translateY(-12px);box-shadow:0 0 0 1px rgba(233,189,140,.55)}to{transform:none}}

/* --- the chat bubble is the bright one (product), back-to-top is dark --- */
.nc-chat{background-color:var(--nc-a2);background-image:var(--nc-grad);border:0}
.nc-chat svg{stroke:var(--nc-on-accent);stroke-width:2}
.nc-up{background:linear-gradient(180deg,#221d1e 0%,var(--nc-btn2) 100%);color:var(--nc-a1);border:1px solid var(--nc-line2)}

/* --- the phone ------------------------------------------------------------ */
@media (max-width:760px){
  /* the header: the hexagon of the logo, Log in with its key + Register;
     the menu lives in the tab bar, so the burger steps aside */
  html .nc-top .nc-burger{display:none !important}
  .nc-logo img{width:37px;height:40px;max-width:none;object-fit:cover;object-position:0 50%}
  .nc-acts .nc-btn{white-space:nowrap}
  .nc-acts .nc-btn--ghost{display:inline-flex;padding:9px 11px;gap:6px}
  .nc-acts .nc-btn--ghost .nc-ico{display:block}

  /* the two big buttons run edge to edge, the second in the product's mint */
  .nc-quick{padding:0;gap:0;margin-top:0}
  .nc-quick .nc-quick__b{border-radius:0;padding:15px 10px;font-size:14.5px;animation:none;background-color:var(--nc-a2)}
  .nc-quick .nc-quick__b--2{background-color:#86d8a8;background-image:linear-gradient(180deg,#a3e6c0 0%,var(--nc-good) 100%);color:#0f1d15}
  .nc-quick__b svg{width:26px;height:26px}

  /* the slide below its picture is the product's welcome card: a mint head
     with the title and the amount in dark ink, a light body with the button */
  .nc-slide__in{padding:0;background:#f4ede6}
  .nc-slide__h{padding:16px 14px 14px;background-color:#86d8a8;
    background-image:linear-gradient(180deg,#a3e6c0 0%,var(--nc-good) 100%)}
  .nc-slide__t{color:#0e1a13;margin:0 0 6px}
  .nc-slide__v{color:#16301f;margin:0}
  .nc-slide__cta{padding:16px 14px 18px}
  .nc-slide__cta .nc-btn{width:100%}
  .nc-slide::after{bottom:auto;aspect-ratio:2.6/1}
  .nc-hero__dots{position:static;padding:2px 0 16px;background-color:#f4ede6}
  .nc-hero__dots button{background:#f4ede6;border-color:var(--nc-a3)}
  .nc-hero__dots button[aria-selected="true"]{background:var(--nc-btn-bot);border-color:var(--nc-btn-bot);outline-color:var(--nc-btn-bot)}

  /* the page head: the picture at its own ratio, the words under it */
  .nc-art--lead .nc-lead{display:block;min-height:0;margin:-20px -14px 20px;background-image:none;background-color:transparent;border-bottom:0}
  .nc-art--lead .nc-art__in > .nc-lead:last-child{margin-bottom:0}
  .nc-lead__gl{
    position:relative;inset:auto;display:block;width:100%;aspect-ratio:2.6/1;
    background-image:var(--nc-art,none),linear-gradient(120deg,var(--nc-card2),var(--nc-bg2));
    background-size:cover;background-position:center;border-bottom:1px solid rgba(233,189,140,.28);
  }
  .nc-lead__c{max-width:none;padding:18px 14px 2px}
  .nc-art .nc-lead h1{margin:0 0 16px;text-shadow:none}

  /* the product's floating "100% BONUS" hexagon */
  .nc-fbonus{
    position:fixed;right:8px;bottom:calc(240px + env(safe-area-inset-bottom));z-index:64;
    width:72px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
    background-color:var(--nc-a2);background-image:var(--nc-grad);color:var(--nc-on-accent);
    font-family:var(--nc-f-head);line-height:1.08;text-align:center;
    animation:nc-fb-glow 3.2s ease-in-out infinite;
  }
  /* The button's own box stands still and its content bobs inside it: a box
     that moves forever is a target that never settles - a tap lands on a
     moving edge and a click that waits for a stable target never comes
     (the referral probe at 390px, 21 Oct 2026). */
  .nc-fbonus > *{animation:nc-bob 3.2s ease-in-out infinite}
  .nc-fbonus svg{width:18px;height:18px;flex:none}
  .nc-fbonus b{font-size:15px;font-weight:800;white-space:nowrap}
  .nc-fbonus__t{max-width:54px;font-size:8.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;overflow-wrap:anywhere}
  body.nc-rail-on .nc-fbonus{display:none}
}
@keyframes nc-bob{50%{transform:translateY(-3px)}}
@keyframes nc-fb-glow{50%{filter:brightness(1.12)}}
@media (max-width:520px){
  .nc-acts .nc-btn--ghost{display:inline-flex}
  .nc-art--lead .nc-lead{margin-top:-18px;margin-bottom:18px}
  .nc-lead__cta .nc-btn{width:100%}
}
/* Log in down to its key where the labels do not fit (site.js measures;
   without the script, below 375px) - the label stays the accessible name */
html.nc-tight .nc-acts .nc-btn--ghost .nc-btn__t{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
html.nc-tight .nc-acts .nc-btn--ghost{padding:9px 10px}
@media (max-width:374px){
  html:not(.nc-js) .nc-acts .nc-btn--ghost .nc-btn__t{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}
@media (prefers-reduced-motion:reduce){
  .nc-fbonus,.nc-fbonus > *{animation:none !important}
}

/* ==========================================================================
   16. The desktop sidebar scrolls with the page (8 Oct 2026)
   ==========================================================================
   As its own scroll box, 100vh tall, the sidebar cut the row at its foot in
   half at 1440x900 in every version - a wins row, and in the versions whose
   menu folds into it, a menu item (bot: "Wolf Gold", "Jack**", "Промоции 17"
   clipped). The product's sidebar runs past the screen's foot too, its wins
   feed below it. Here it is as tall as its content and nothing cuts it: it
   scrolls up with the page until its foot is in view, then stays (site.js
   sets --nc-rail-stick = min(header, window - sidebar)). Without the script
   it simply scrolls away with the page. At 1100px and below it is the
   drawer, its own scroll box behind the menu button, as before. */
@media (min-width:1101px){
  .nc-rail{position:relative;height:auto;min-height:calc(100vh - var(--nc-top-h));overflow:visible}
  html.nc-js .nc-rail{position:sticky;top:var(--nc-rail-stick,var(--nc-top-h))}
}