/* BetPokies. The NextCasino design language (as built for PaddyGambler) on deep navy, with white pages in between:
   dark for the brand (header, hero, the "best for" band, footer), light where you read and compare.
   Every colour below is a token; .light and .paper swap the tokens, so each component works on both. */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%; src: url(/assets/fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%; src: url(/assets/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/assets/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* brand, the same everywhere */
  --night: #0D1027;
  --night-deep: #080B1D;
  --gold: #E84E89;
  --gold-hi: #FF7FB0;
  --gold-edge: #B02A62;
  --on-gold: #FFFFFF;
  --ember: #FF8A3D;
  --ivory: #FBEEF3;

  --c-gold: #E84E89;
  --c-ember: #FF8A3D;
  --c-mint: #4ADBA6;
  --c-ruby: #FF5A76;
  --c-blue: #66A6FF;
  --c-violet: #BE8BFF;
  --c-cyan: #7AD3F2;
  --c-sage: #C7C9DB;

  /* surface tokens: dark green baize */
  --bg: var(--night);
  --card: #121634;
  --card-2: #181D43;
  --card-3: #1E2553;
  --line: #262D5B;
  --line-2: #374077;
  --ink: #FBEEF3;
  --text: #E2E4EF;
  --soft: #C0C3DB;
  --faint: #8A90B5;
  --tint: rgb(255 255 255 / .045);
  --tint-2: rgb(255 255 255 / .07);
  --link: #FF7FB0;
  --link-hover: #FFFFFF;
  --num: #E84E89;
  --ok: #FF7FB0;
  --good: #4ADBA6;
  --good-bg: rgb(74 219 166 / .11);
  --bad: #FF8EA2;
  --bad-bg: rgb(255 90 118 / .12);
  --badge: #FFB07A;
  --badge-bg: rgb(255 138 61 / .16);
  --offer-bg: linear-gradient(180deg, rgb(232 78 137 / .14), rgb(232 78 137 / .06));
  --offer-line: rgb(232 78 137 / .5);
  --offer-v: #FF7FB0;
  --shade: none;
  --hair: rgb(255 255 255 / .12);
  --glow: rgb(232 78 137 / .06);
  --sb: rgb(255 255 255 / .22);
  --sb-hover: #E84E89;

  --font-d: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-t: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
  --wrap: 1200px;
  --hdr: 72px;
  --pop-shadow: 0 24px 60px -16px rgb(1 2 8 / .85);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ic-speed: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M13 3 5.5 13.5h5.5L10 21l7.5-10.5H12z'/></svg>");
  --ic-deposit: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 8v8M8 12h8'/></svg>");
  --ic-wager: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4'/></svg>");
  --ic-games: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><rect x='3.8' y='6.2' width='9.5' height='13.5' rx='1.8' transform='rotate(-9 8.5 13)'/><rect x='10.6' y='4.3' width='9.5' height='13.5' rx='1.8' transform='rotate(9 15.4 11)'/></svg>");
  --ic-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
  --ic-star: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M9 1.4l2.3 4.8 5.2.7-3.8 3.6.9 5.2L9 13.3l-4.6 2.4.9-5.2-3.8-3.6 5.2-.7z'/></svg>");
  /* the fact a casino list leads with */
  --ic-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M12 3.5c.6 4 2.5 6.4 6.5 7-4 .6-5.9 3-6.5 7-.6-4-2.5-6.4-6.5-7 4-.6 5.9-3 6.5-7z'/></svg>");
  --ic-rtp: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M4.5 19.5h15M7 16v-4m4 4V8.5m4 7.5v-6m4 6V6'/></svg>");
  --ic-live: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><rect x='3.5' y='6.5' width='12' height='11' rx='2.5'/><path d='m15.5 10.5 5-3v9l-5-3z'/></svg>");
  --ic-app: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><rect x='7' y='3.5' width='10' height='17' rx='2.5'/><path d='M11 17.5h2'/></svg>");
  --ic-coins: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='8.5'/><path d='M10 8h3.2a1.9 1.9 0 0 1 0 3.8H10zm0 3.8h3.7a2.1 2.1 0 0 1 0 4.2H10zM10 8v8m1.3-9.5V8m0 8v1.5'/></svg>");
  --ic-shield: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M12 3.5 5.5 6.2v5.1c0 4 2.8 7.4 6.5 8.7 3.7-1.3 6.5-4.7 6.5-8.7V6.2z'/></svg>");
  --ic-win: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M4 8.5 7.6 12 12 5.5l4.4 6.5L20 8.5 18.5 18h-13z'/></svg>");
  --ic-clock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>");
  --ic-cash: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7.5V7a2 2 0 0 1 2-2h10v2.5'/><rect x='4' y='7.5' width='16' height='11.5' rx='2.5'/><path d='M16.5 13.2h.01'/></svg>");
  --ic-slots: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 6h10l-5.6 12.5'/><path d='M9.6 12.2h5.2'/></svg>");
}

/* white pages: the same components, dark ink on white */
.light {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #F0F1F6;
  --card-3: #E4E5ED;
  --line: #DDDFE8;
  --line-2: #C3C5D4;
  --ink: #0D1027;
  --text: #202339;
  --soft: #464A68;
  --faint: #575C7B;
  --tint: #F1F2F7;
  --tint-2: #EAEBF2;
  --link: #0D1A69;
  --link-hover: #070C2F;
  --num: #BE0A4C;
  --num-ink: #900739;
  --num-dim: #8F968F;
  --ok: #8A0033;
  --good: #0B7A4B;
  --good-bg: #E2F4EA;
  --bad: #C2304C;
  --bad-bg: #FCEBEE;
  --badge: #A8470F;
  --badge-bg: #FFEADB;
  --offer-bg: linear-gradient(180deg, #FFE0EB, #FFC4DA);
  --offer-line: #E33A78;
  --offer-v: #0D1027;
  --shade: 0 1px 2px rgb(13 16 39 / .05), 0 10px 26px -16px rgb(13 16 39 / .2);
  --hair: rgb(13 16 39 / .1);
  --glow: rgb(232 78 137 / .2);
  --sb: rgb(13 16 39 / .2);
  --sb-hover: #C20A4D;
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}
.light.paper { --bg: #F3F5FC; --line: #DCE0F2; }
/* On cream, tiles and chips that sit right on the page are white like the cards beside them; inside a card (.rk, .dir-tile)
   they keep the tint they have on white. */
.light.paper .facts:not(.rk *) > .fact:not(.t-good):not(.t-lens),
.light.paper .pay-side :is(.coins span, .mtags li) { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* scrollbars, wherever something scrolls: a thin rounded thumb in the section's colours, no track.
   Firefox only knows the standard properties; setting them in Chrome would switch off the rounded ones below. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--sb) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--sb-hover); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
}
main, :where(main, .ftr) * { scroll-margin-top: calc(var(--hdr) + 20px); }
body {
  margin: 0;
  background: var(--grain), var(--night);
  color: var(--text);
  font: 400 1.03rem/1.55 var(--font-t);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-d); font-weight: 750; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-stretch: 84%; }
h3 { font-size: 1.15rem; font-stretch: 92%; }
p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; }
button { font: inherit; }
table { border-collapse: collapse; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--gold); color: var(--on-gold); }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--gold); color: var(--on-gold); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- chips: a casino chip with the icon printed on it, one colour per kind of page ---------- */

.chip-i {
  --c: var(--gold);
  --edge: color-mix(in srgb, var(--c) 55%, #040612);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: color-mix(in srgb, var(--c) 45%, #0B0E1F);
  background:
    radial-gradient(circle closest-side, #FFEAF2 0 55%, #EAC2D1 59% 61%, transparent 62.5%),
    radial-gradient(circle closest-side, var(--c) 0 71%, transparent 72%),
    repeating-conic-gradient(from -5deg, #fff 0 10deg, var(--c) 10deg 45deg);
  box-shadow: inset 0 0 0 2px var(--c), inset 0 -3px 0 rgb(0 0 0 / .14), 0 3px 0 var(--edge);
}
.chip-i::after { content: ''; position: absolute; inset: 23%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--c) 75%, transparent); }
.chip-i .i { position: relative; z-index: 1; width: 37%; height: 37%; stroke-width: 2.3; }
.chip-i.lg { width: 76px; height: 76px; box-shadow: inset 0 0 0 3px var(--c), inset 0 -4px 0 rgb(0 0 0 / .14), 0 4px 0 var(--edge); }
.chip-i.lg::after { border-width: 2px; }
.chip-i.sm { width: 32px; height: 32px; box-shadow: inset 0 0 0 1.5px var(--c), inset 0 -2px 0 rgb(0 0 0 / .14), 0 2px 0 var(--edge); }
.chip-i.sm::after { display: none; }
.chip-i.sm .i { stroke-width: 2.6; }
.chip-i.xs { width: 26px; height: 26px; box-shadow: inset 0 0 0 1.5px var(--c), inset 0 -2px 0 rgb(0 0 0 / .14), 0 1.5px 0 var(--edge); }
.chip-i.xs::after { display: none; }
.chip-i.xs .i { width: 44%; height: 44%; stroke-width: 2.8; }
.c-gold { --c: var(--c-gold); }
.c-ember { --c: var(--c-ember); }
.c-mint { --c: var(--c-mint); }
.c-ruby { --c: var(--c-ruby); }
.c-blue { --c: var(--c-blue); }
.c-violet { --c: var(--c-violet); }
.c-cyan { --c: var(--c-cyan); }
.c-sage { --c: var(--c-sage); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* one height for every pill in a row, whatever its mark (a logo is the tallest) or none, as on "+3 more" */
.chips .chip { min-height: 38px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
  font-size: .93rem;
  text-decoration: none;
}
a.chip:hover { border-color: var(--gold); background: var(--card-3); color: var(--ink); }
.chip:has(.pm) { padding-left: 4px; }
.chip:has(.logo) { padding-left: 6px; }
.chip:has(.chip-i) { padding-left: 5px; }
.chip:has(.gcard) { gap: 10px; padding-left: 9px; }
/* in a pill a game card is only as tall as the round chips beside it (3:4), so a row of pills keeps one height */
.chip .gcard.sm { width: 24px; height: 32px; }
.chip .gcard.xs { width: 19.5px; height: 26px; }
.chip:has(.tk) { padding-left: 6px; }
.more-chip { border-style: dashed; border-color: var(--line-2); background: transparent; color: var(--link); font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--tint-2); color: var(--soft); font-size: .84rem; white-space: nowrap; }
.tag.is-rt { gap: 4px; padding-left: 8px; background: rgb(232 78 137 / .16); color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tag.is-rt::before { content: ""; width: 13px; height: 13px; background: var(--gold); -webkit-mask: var(--ic-star) center / contain no-repeat; mask: var(--ic-star) center / contain no-repeat; }
.light .tag.is-rt::before { background: #E00052; }
.tag.is-badge { background: var(--badge-bg); color: var(--badge); font-weight: 700; }

/* Games: a playing card, ivory with a frame and two pips in the game's colour, the game drawn in the middle. */
.gcard {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 58px;
  border-radius: 7px;
  background: #FFF6F9;
  color: color-mix(in srgb, var(--c) 72%, #0B0E1F);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 3px 0 color-mix(in srgb, var(--c) 45%, #040612), 0 10px 16px -10px rgb(0 0 0 / .6);
  rotate: -4deg;
  transition: rotate .2s;
}
.gcard::before { content: ''; position: absolute; inset: 4px; border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 4px; }
.gcard::after { content: ''; position: absolute; inset: 7px; background: radial-gradient(circle 1.8px at 2px 2px, var(--c) 95%, transparent), radial-gradient(circle 1.8px at calc(100% - 2px) calc(100% - 2px), var(--c) 95%, transparent); }
.gcard .i { position: relative; width: 52%; height: 52%; stroke-width: 2.3; }
.gcard.sm { width: 30px; height: 40px; border-radius: 5px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 2px 0 color-mix(in srgb, var(--c) 45%, #040612); }
.gcard.sm::before { inset: 3px; border-width: 1.2px; border-radius: 3px; }
.gcard.sm::after { display: none; }
.gcard.sm .i { width: 60%; height: 60%; stroke-width: 2.5; }
.gcard.xs { width: 21px; height: 28px; border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 1.5px 0 color-mix(in srgb, var(--c) 45%, #040612); }
.gcard.xs::before { inset: 2.5px; border-width: 1px; border-radius: 2px; }
.gcard.xs::after { display: none; }
.gcard.xs .i { width: 66%; height: 66%; stroke-width: 2.6; }
.gcard.xs .gcard-live { top: -3px; right: -4px; width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 1.5px var(--card); rotate: none; }
.gcard.lg { width: 62px; height: 82px; border-radius: 10px; }
.gcard.lg::before { inset: 6px; border-width: 2px; border-radius: 6px; }
.gcard.lg::after { inset: 10px; }
.gcard-live { position: absolute; top: -6px; right: -12px; padding: 2px 5px; border-radius: 5px; background: #DE2F4D; color: #fff; font: 800 .56rem/1 var(--font-t); letter-spacing: .06em; rotate: 8deg; box-shadow: 0 2px 0 #9E1630; }
.gcard.sm .gcard-live { top: -6px; right: -12px; padding: 2px 3px; font-size: .5rem; }
a:hover .gcard { rotate: 0deg; }
.gfan { position: relative; display: inline-block; flex: none; width: 74px; height: 60px; }
.gfan .gcard { position: absolute; top: 3px; width: 38px; height: 50px; }
.gfan .gcard:nth-child(1) { left: 0; rotate: -14deg; }
.gfan .gcard:nth-child(2) { left: 18px; top: 0; rotate: -1deg; z-index: 1; }
.gfan .gcard:nth-child(3) { left: 36px; rotate: 12deg; z-index: 2; }

/* Bonuses: a ticket in the bonus type's colour, notched like the offer tickets on the list.
   The notches are a mask on .tk-b, so the bottom edge is a drop-shadow on the wrapper; a box-shadow would be masked away. */
.tk {
  --n: 6px;
  display: inline-grid;
  flex: none;
  width: 58px;
  height: 42px;
  rotate: -6deg;
  filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--c) 50%, #040612));
  transition: rotate .2s;
}
.tk-b {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c));
  color: color-mix(in srgb, var(--c) 55%, #1A1030);
  color: oklch(from var(--c) calc(l * .6) calc(c * 1.3) h);
  -webkit-mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
/* like a chip's face: ivory inside the dashed line, the icon printed on it in the ticket's own colour */
.tk-b::after { content: ''; position: absolute; inset: 4px; border: 1.5px dashed color-mix(in srgb, currentColor 45%, transparent); border-radius: 6px; background: #FFEAF2; }
.tk .i { position: relative; z-index: 1; width: 22px; height: 22px; stroke-width: 2.1; }
.tk.lg { --n: 9px; width: 100px; height: 72px; filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--c) 50%, #040612)); }
.tk.lg .tk-b { border-radius: 15px; }
.tk.lg .tk-b::after { inset: 7px; border-width: 2px; border-radius: 9px; }
.tk.lg .i { width: 36px; height: 36px; stroke-width: 2.1; }
.tk.sm { --n: 4px; width: 42px; height: 30px; filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--c) 50%, #040612)); }
.tk.sm .tk-b { border-radius: 6px; }
.tk.sm .tk-b::after { inset: 3px; border-width: 1px; border-radius: 4px; }
.tk.sm .i { width: 17px; height: 17px; stroke-width: 2.3; }
.tk.xs { --n: 3px; width: 32px; height: 23px; filter: drop-shadow(0 1.5px 0 color-mix(in srgb, var(--c) 50%, #040612)); }
.tk.xs .tk-b { border-radius: 5px; }
.tk.xs .tk-b::after { inset: 2.5px; border: 0; border-radius: 3px; }
.tk.xs .i { width: 14px; height: 14px; stroke-width: 2.5; }
a:hover .tk { rotate: 0deg; }

/* Payment methods and providers: round marks; a stack of three heads their tiles. */
.pm-stack { display: inline-flex; flex: none; }
.pm-stack .pm { width: 40px; height: 40px; font-size: .78rem; box-shadow: 0 0 0 3px var(--card); }
.pm-stack .pm + .pm { margin-left: -12px; }

/* Round logos for payment methods and providers; until we have the files, initials on the brand colour. */
.pm { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pc, #fff); color: #fff; font: 800 .68rem/1 var(--font-t); letter-spacing: -.02em; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font: 700 1rem/1.1 var(--font-t);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--gold-edge);
  transition: background-color .15s, transform .08s, box-shadow .08s;
}
.btn:hover { background: var(--gold-hi); color: var(--on-gold); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-edge); }
.btn .i { width: 18px; height: 18px; }
.btn.lg { min-height: 52px; padding: 0 26px; font-size: 1.06rem; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: .92rem; box-shadow: 0 2px 0 var(--gold-edge); }
.btn.sm .i { width: 16px; height: 16px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.ghost:hover { background: var(--card-2); box-shadow: inset 0 0 0 1.5px var(--soft); }
.btn.ghost:active { transform: none; }
.btn.block { width: 100%; }
.lnk { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.lnk:hover { color: var(--link-hover); }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.more .i { width: 16px; height: 16px; transition: translate .15s; }
.more:hover { color: var(--link-hover); }
.more:hover .i { translate: 3px 0; }

/* Toggle chips: on or off. */
.tgl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}
.tgl:hover { background: var(--card-2); }
.tgl .i { width: 18px; height: 18px; color: var(--faint); }
.tgl[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 0 var(--gold-edge); }
.tgl[aria-pressed="true"] .i { color: var(--on-gold); }

/* ---------- search ---------- */

.combo { position: relative; }
.combo > .i { position: absolute; top: 50%; left: 14px; translate: 0 -50%; color: var(--faint); pointer-events: none; }
.combo input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 42px;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.combo input::placeholder { color: var(--faint); }
.combo input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgb(232 78 137 / .22); }
input[type="search"]::-webkit-search-cancel-button { display: none; }
.combo-list {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 300px;
  max-height: 380px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--card-2);
  box-shadow: var(--pop-shadow);
}
.combo-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--ink); font-weight: 700; text-decoration: none; }
.combo-list small { overflow: hidden; color: var(--faint); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.combo-list li[aria-selected="true"] a, .combo-list a:hover { background: var(--card-3); }
.combo-list .o-empty { padding: 10px 12px; color: var(--soft); }
mark { background: none; color: var(--gold-hi); font-weight: 700; }

/* ---------- header ---------- */

.hdr { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); background: rgb(13 16 39 / .95); backdrop-filter: blur(12px); }
.hdr-in { display: flex; align-items: center; gap: 14px; min-height: var(--hdr); }
.brand { display: inline-flex; flex: none; align-items: center; text-decoration: none; }
.hdr .brand { margin-right: 18px; }
/* Lettering drawn as shapes (assets/brand/logo.svg), so it never waits for a font. */
.brand-logo { display: block; width: auto; height: 40px; }
.ftr .brand-logo { height: 32px; }
.nav { display: flex; gap: 2px; }
.dd { position: relative; }
/* A menu is a pill of two parts: the name goes to the hub, the caret opens the panel (hover opens it too, where there is a mouse). */
.nav-i { display: flex; align-items: center; border-radius: 999px; transition: background-color .15s; }
.nav-i:hover, .dd:has([aria-expanded="true"]) .nav-i { background: var(--card-2); }
.nav-b { padding: 8px 2px 8px 14px; border-radius: 999px 0 0 999px; color: var(--soft); font-weight: 700; line-height: 1.3; white-space: nowrap; text-decoration: none; }
.nav-b:hover, .dd:has([aria-expanded="true"]) .nav-b { color: var(--ink); }
.nav-b:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nav-b[aria-current] { color: var(--gold-hi); }
.nav-c { display: grid; place-items: center; width: 30px; height: 37px; padding: 0 8px 0 2px; border: 0; border-radius: 0 999px 999px 0; background: none; color: var(--faint); cursor: pointer; }
.nav-c:hover { color: var(--ink); }
.nav-c .i { width: 16px; height: 16px; transition: rotate .2s; }
.nav-c[aria-expanded="true"] .i { rotate: 180deg; }
.hdr-search { width: 230px; margin-left: auto; }
.icon-btn { display: none; place-items: center; width: 44px; height: 44px; flex: none; border: 1.5px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--card-2); }
.hdr-btn-menu .i-close { display: none; }
.hdr-btn-menu[aria-expanded="true"] .i-open { display: none; }
.hdr-btn-menu[aria-expanded="true"] .i-close { display: block; }

.pop { border: 1px solid var(--line-2); border-radius: 22px; background: var(--card-2); box-shadow: var(--pop-shadow); }
.dd-pop { position: absolute; z-index: 80; top: calc(100% + 10px); left: 0; padding: 8px; animation: pop .14s ease-out; }
.dd-pop::before { content: ''; position: absolute; inset: -14px 0 auto; height: 14px; }
.dd:nth-last-child(-n+2) .dd-pop { left: auto; right: 0; }
.dd-rich { width: 620px; }
.dd:nth-child(3) .dd-rich { width: 400px; }
.dd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.dd:nth-child(3) .dd-list, .dd-cols .dd-list { grid-template-columns: 1fr; }
.dd-games { width: 640px; }
.dd-casinos { width: 640px; }
.dd-sub { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.dd-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.dd-m { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; color: var(--ink); font-size: .9rem; font-weight: 700; line-height: 1.25; white-space: nowrap; text-decoration: none; }
.dd-m:hover, .dd-m[aria-current] { background: var(--card-3); color: var(--ink); }
.dd-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px; }
.dd-cols > div { padding-left: 6px; border-left: 1px solid var(--line); }
.dd-h { padding: 10px 12px 4px; color: var(--faint); font-size: .85rem; font-weight: 700; }
.dd-games .dd-a { align-items: center; }
.dd-a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.dd-a:hover, .dd-a[aria-current] { background: var(--card-3); color: var(--ink); }
.dd-a b { display: block; font-weight: 700; line-height: 1.3; }
.dd-a small { display: block; margin-top: 2px; color: var(--faint); font-size: .85rem; line-height: 1.35; }
.dd-pay { width: max-content; min-width: 540px; }
.dd-grid-pay { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.dd-p { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.dd-p:hover, .dd-p[aria-current] { background: var(--card-3); color: var(--ink); }
.dd-all { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--night); color: var(--gold-hi); font-weight: 700; text-decoration: none; }
.dd-all:hover { background: var(--night-deep); color: #fff; }
.dd-all .i { width: 18px; height: 18px; }
@keyframes pop { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

.mnav { border-top: 1px solid var(--line); background: var(--night); max-height: calc(100dvh - var(--hdr)); overflow: auto; padding-block: 14px 24px; }
.mnav-search { margin-bottom: 8px; }
.mnav-g { border-bottom: 1px solid var(--line); }
.mnav-g summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; color: var(--ink); font: 750 1.15rem var(--font-d); font-stretch: 90%; cursor: pointer; list-style: none; }
.mnav-g summary::-webkit-details-marker { display: none; }
.mnav-h { padding: 12px 0 4px; color: var(--faint); font-size: .85rem; font-weight: 700; }
.mnav-g summary .i { color: var(--faint); transition: rotate .2s; }
.mnav-g[open] summary .i { rotate: 180deg; }
.mnav-g ul { display: grid; gap: 2px; margin: 0; padding: 0 0 12px; list-style: none; }
.mnav-g a { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 12px; color: var(--soft); text-decoration: none; }
.mnav-g a:hover, .mnav-g a[aria-current] { background: var(--card-2); color: var(--ink); }
.mnav-g .mnav-all { color: var(--gold-hi); font-weight: 700; }

/* ---------- page furniture ---------- */

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; color: var(--faint); font-size: .9rem; list-style: none; }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--soft); }
.lead { max-width: 64ch; margin-top: 16px; color: var(--soft); font-size: 1.14rem; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--gold-hi); font-weight: 700; letter-spacing: .01em; }
.sec { padding: 72px 0; }
.band { background: radial-gradient(55% 80% at 0% 0%, rgb(232 78 137 / .09), transparent 60%), radial-gradient(45% 70% at 100% 100%, rgb(255 138 61 / .08), transparent 60%); }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.sec-sub { max-width: 70ch; margin: -8px 0 22px; color: var(--soft); }
.empty { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 20px; border: 1px dashed var(--line-2); border-radius: 18px; background: var(--card); color: var(--soft); }
.empty .i { color: var(--num); }
.list-foot { display: grid; justify-items: center; gap: 10px; margin-top: 28px; text-align: center; }
.list-prog { color: var(--soft); font-size: .95rem; }
.list-prog b { color: var(--ink); font-variant-numeric: tabular-nums; }
.list-bar { display: block; width: min(240px, 60%); height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.list-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .3s; }
.list-foot .btn { margin-top: 6px; }
.js .is-later { display: none; }
.count-tag { display: inline-flex; align-items: center; gap: 7px; align-self: center; padding: 6px 13px 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.count-tag .i { width: 16px; height: 16px; color: var(--gold-hi); }
.page-head { padding: 32px 0 44px; border-bottom: 1px solid var(--line); background: radial-gradient(60% 90% at 0% 0%, rgb(232 78 137 / .1), transparent 60%); }

/* The Irish tricolour as a round flag, like the country flags on NextCasino. */
.ie { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%2300247D'/%3E%3Cpath d='M0 0l20 14M20 0 0 14' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M10 0v14M0 7h20' stroke='%23fff' stroke-width='5.5'/%3E%3Cpath d='M10 0v14M0 7h20' stroke='%23CF142B' stroke-width='3'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='10' cy='29' r='3.6'/%3E%3Ccircle cx='28' cy='8' r='2'/%3E%3Ccircle cx='33' cy='17' r='2'/%3E%3Ccircle cx='28' cy='30' r='2'/%3E%3Ccircle cx='22' cy='21' r='2'/%3E%3C/g%3E%3C/svg%3E") center / cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .22); }

/* ---------- casino furniture: logo, offer ticket, facts ---------- */

/* Placeholder logo: the casino's name as a wordmark on its own colour. Real logos replace it with an <img class="logo">. */
.logo { display: block; width: var(--s); height: var(--s); flex: none; border-radius: calc(var(--s) * .24); object-fit: cover; outline: 1px solid var(--hair); outline-offset: -1px; }
.lt {
  --h: 150;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 0 4px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0, hsl(var(--h) 55% 34% / .9), transparent 70%),
    hsl(var(--h) 45% 14%);
  color: #fff;
  font: 800 calc(var(--s) * .19)/.92 var(--font-d);
  font-stretch: 75%;
  letter-spacing: -.01em;
  text-align: center;
}
.lt b { display: block; max-width: 100%; font-weight: 800; }
.lt b:first-child { color: hsl(var(--h) 85% 72%); }

.offer {
  --n: 8px;
  position: relative;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 12px 20px;
  border: 1px dashed var(--offer-line);
  border-radius: 14px;
  background: var(--offer-bg);
  -webkit-mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.offer-k { color: var(--faint); font-size: .78rem; font-weight: 700; }
.offer-v { color: var(--offer-v); font: 800 1.3rem/1.1 var(--font-d); font-stretch: 84%; overflow-wrap: anywhere; }
.offer-x { color: var(--soft); font-size: .9rem; }
.offer.lg { --n: 10px; padding: 16px 24px; text-align: center; }
.offer.lg .offer-v { font-size: 1.75rem; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.fact { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--tint); }
.fact dt { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: .8rem; font-weight: 700; }
.fact dt::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.fact dd { margin: 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.f-speed { --ic: var(--ic-speed); }
.f-deposit { --ic: var(--ic-deposit); }
.f-wager { --ic: var(--ic-wager); }
.f-games { --ic: var(--ic-games); }
.f-new { --ic: var(--ic-new); }
.f-rtp { --ic: var(--ic-rtp); }
.f-live { --ic: var(--ic-live); }
.f-app { --ic: var(--ic-app); }
.f-coins { --ic: var(--ic-coins); }
.f-slots { --ic: var(--ic-slots); }
.f-cash { --ic: var(--ic-cash); }
.f-win { --ic: var(--ic-win); }
.f-days { --ic: var(--ic-clock); }
.f-studio { --ic: var(--ic-games); }
.f-tables { --ic: var(--ic-games); }
.fact.t-good { background: var(--good-bg); }
.fact.t-good dt, .fact.t-good dd { color: var(--good); }
.fact.t-ok dd { color: var(--ok); }
/* the list's own fact, the same gold on every casino list */
.fact.t-lens { background: rgb(232 78 137 / .14); box-shadow: inset 0 0 0 1px rgb(232 78 137 / .35); }
.fact.t-lens dt { color: var(--num-ink); }
.light .fact.t-lens { background: #FFD9E7; box-shadow: inset 0 0 0 1px #F18AB0; }
.fine { color: var(--faint); font-size: .78rem; line-height: 1.45; }

/* ---------- home: hero and our pick ---------- */

.hero {
  padding: 52px 0 64px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 4% 0%, rgb(39 81 196 / .55), transparent 64%),
    radial-gradient(55% 75% at 100% 0%, rgb(168 85 247 / .38), transparent 62%),
    radial-gradient(40% 50% at 55% 110%, rgb(232 78 137 / .16), transparent 70%);
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 22px 0 0; padding: 0; color: var(--faint); font-size: .93rem; list-style: none; }
.byline li { display: inline-flex; align-items: center; gap: 7px; }
.byline .i { width: 17px; height: 17px; color: var(--gold); }
.byline a { color: var(--soft); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.quick .chip { padding: 4px 16px 4px 4px; font-weight: 700; }
.quick .chip:has(.tk) { padding-left: 7px; }
.quick .chip:has(.gcard) { padding-left: 10px; }

.pick { position: relative; display: grid; gap: 16px; padding: 24px; border: 1px solid rgb(232 78 137 / .5); border-radius: 30px; background: var(--card); box-shadow: 0 0 0 6px rgb(232 78 137 / .06), var(--pop-shadow); }
.pick-k { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 5px 14px 5px 10px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: .9rem; }
.pick-k .i { width: 18px; height: 18px; stroke-width: 2.2; }
.pick-id { display: flex; align-items: center; gap: 16px; }
.pick-n { font-size: 1.7rem; font-stretch: 84%; }
.pick-n a { color: var(--ink); text-decoration: none; }
.pick-n a:hover { color: var(--gold-hi); text-decoration: underline; }
.pick-act { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.pick .fine { margin-top: -4px; text-align: center; }

/* ---------- the ranked list ---------- */

/* The filters stay under the header while their list scrolls by. The background reaches the screen edges through a
   box-shadow clipped to the bar's height (no overflow); site.js adds .is-stuck, which lets a hairline show below it. */
.tgls {
  position: sticky;
  top: var(--hdr);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  padding-block: 12px;
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}
.tgls.is-stuck { box-shadow: 0 0 0 100vmax var(--bg), 0 1px 0 100vmax var(--line); clip-path: inset(0 -100vmax -1px); }
.rks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.js .rk.is-extra, .rk.is-off { display: none; }
.rk { border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shade); transition: border-color .15s; }
.rk:hover { border-color: var(--line-2); }
.rk.is-first { border-color: rgb(227 58 120 / .8); box-shadow: 0 0 0 5px var(--glow), var(--shade); }
.rk-in {
  --px: 20px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, 1.15fr) 172px;
  grid-template-areas: "n id offer facts act" "fine fine fine fine fine";
  align-items: center;
  gap: 16px 20px;
  padding: 18px var(--px) 0;
}
.rk-n { grid-area: n; justify-self: start; color: var(--num-dim); font: 800 2.1rem/1 var(--font-d); font-stretch: 75%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rk.is-top .rk-n { color: var(--num); }
.rk-id { grid-area: id; display: flex; align-items: center; gap: 14px; min-width: 0; }
.rk-name h3 { font-size: 1.3rem; font-stretch: 86%; }
.rk-name h3 a { color: var(--ink); text-decoration: none; }
.rk-name h3 a:hover { color: var(--link); text-decoration: underline; }
.rk .offer { grid-area: offer; }
.rk-facts { grid-area: facts; gap: 6px; }
.rk-facts .fact { padding: 7px 10px; border-radius: 12px; }
.rk-facts .fact dd { font-size: .95rem; }
.rk-act { grid-area: act; display: grid; gap: 8px; }
/* the card's footer: the rule runs edge to edge, the text starts where the rank number does */
.rk-fine { grid-area: fine; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-inline: calc(-1 * var(--px)); padding: 11px var(--px) 14px; border-top: 1px solid var(--line); font-size: .86rem; }
.rk-why { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; color: var(--text); list-style: none; }
.rk-why li { display: inline-flex; align-items: center; gap: 7px; }
.rk-why .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--good-bg); color: var(--good); stroke-width: 3.2; }
.rk-fine > p { color: var(--faint); font-size: .78rem; }
.bo .bo-code { grid-column: 1 / -1; }
/* a bonus code: dashed like a coupon; a tap copies it */
.bo-code { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1.5px dashed var(--offer-line); border-radius: 12px; background: var(--offer-bg); color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; }
.bo-code span { color: var(--faint); font-size: .8rem; font-weight: 700; }
.bo-code b { font-family: var(--font-d); letter-spacing: .04em; }
.bo-code .i { width: 16px; height: 16px; color: var(--num); }
.bo-code:hover { border-style: solid; }
.bo-code.is-copied { border-style: solid; border-color: var(--good); background: var(--good-bg); }
.bo-code.is-copied span { color: var(--good); }

/* ---------- best for (dark band) ---------- */

.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.award { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shade); }
.award:hover { border-color: var(--line-2); }
.award-k { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 750 1.08rem var(--font-d); font-stretch: 88%; }
.award-c { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; background: var(--tint); }
.award-c h3 { font-size: 1.1rem; }
.award-c h3 a { color: var(--ink); text-decoration: none; }
.award-c h3 a:hover { color: var(--link); text-decoration: underline; }
.award-c .tag { margin-top: 4px; }
.award-why { flex: 1; color: var(--soft); font-size: .95rem; }
.award-act { display: flex; align-items: center; gap: 16px; }

/* ---------- browse by what they offer ---------- */

.dir-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dir-tile {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(110% 70% at 0 0, color-mix(in srgb, var(--c) 13%, transparent), transparent 55%), var(--card);
  box-shadow: var(--shade);
}
.dir-tile-h { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.dir-t { display: block; font: 750 1.3rem/1.1 var(--font-d); font-stretch: 88%; }
.dir-n { color: var(--faint); font-size: .9rem; }
.dir-tile-h:hover .dir-t { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dir-tile p { color: var(--soft); font-size: .95rem; }

/* ---------- the guide: contents on the left, the article on the right ---------- */

.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: calc(var(--hdr) + 24px); }
.toc-h { margin-bottom: 10px; color: var(--faint); font-size: .9rem; font-weight: 700; }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.toc a { display: flex; gap: 10px; padding: 8px 12px; border-radius: 12px; color: var(--soft); font-size: .95rem; line-height: 1.35; text-decoration: none; counter-increment: t; transition: color .3s, background-color .3s; }
.toc a::before { content: counter(t); min-width: 1ch; color: var(--line-2); font: 800 1rem/1.3 var(--font-d); font-stretch: 80%; }
.toc a:hover { background: var(--card-2); color: var(--ink); }
.toc a[aria-current="true"] { background: var(--card-2); color: var(--ink); font-weight: 700; }
.toc a[aria-current="true"]::before { color: var(--num); }

.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-stretch: 82%; }
.prose-lead { margin-top: 16px; color: var(--soft); font-size: 1.16rem; }
.prose h3 { margin: 52px 0 12px; font-size: 1.55rem; font-stretch: 86%; }
.prose p + p { margin-top: 14px; }
.prose > p + :is(.tbl-wrap, .calc, .terms, .note, .faq) { margin-top: 20px; }
.prose > h3 + .faq { margin-top: 8px; }
.prose > :is(.tbl-wrap, .calc, .terms) + p { margin-top: 20px; }

.tbl-wrap::-webkit-scrollbar-track, .mdl::-webkit-scrollbar-track { margin: 12px; }
.combo-list::-webkit-scrollbar-track { margin-block: 6px; }
.tbl-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shade); }
.tbl { width: 100%; min-width: 600px; font-size: .94rem; }
.tbl th, .tbl td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { border-top: 0; background: var(--card-2); color: var(--faint); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.tbl tbody th { color: var(--ink); font-weight: 700; }
.tbl td { color: var(--soft); }
.w { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.w > span { position: relative; width: 56px; height: 6px; border-radius: 999px; background: var(--card-3); }
.w > span::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--gold); }
.tbl-pay tbody th a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.tbl-pay tbody th a:hover { color: var(--link); text-decoration: underline; }
.tbl-pay td:nth-child(3) { color: var(--ink); }
.tbl-pay td.is-no { color: var(--bad); }
.tbl-more { margin-top: 12px; }

.wc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; margin: 18px 0; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shade); }
.wc-in { display: grid; gap: 12px; align-content: start; }
.wc-f { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wc-l { padding: 0; color: var(--soft); font-size: .86rem; font-weight: 700; }
.wc-x { display: flex; align-items: center; height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); }
.wc-x:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.wc-x i { color: var(--faint); font-style: normal; font-weight: 700; }
.wc-x input { flex: 1; min-width: 0; height: 100%; padding: 0 6px; border: 0; background: none; color: var(--ink); font: 700 1.05rem var(--font-t); font-variant-numeric: tabular-nums; outline: none; }
.wc-out { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 16px; background: var(--tint); }
.wc-o { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; color: var(--soft); font-size: .95rem; }
.wc-o b { color: var(--ink); font: 800 1.15rem var(--font-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-o.is-res { align-items: center; padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.wc-o.is-res b { font-size: 1.5rem; }
.wc-o.is-good { background: var(--good-bg); }
.wc-o.is-good span, .wc-o.is-good b { color: var(--good); }
.wc-o.is-bad { background: var(--bad-bg); }
.wc-o.is-bad span, .wc-o.is-bad b { color: var(--bad); }
.wc-v { margin: 0; color: var(--ink); font-size: .95rem; font-weight: 600; }
.wc-note { max-width: 72ch; margin-top: 10px; color: var(--faint); font-size: .88rem; }

.terms { display: grid; margin: 0; border-top: 1px solid var(--line); }
.terms > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.terms dt { color: var(--ink); font-weight: 700; }
.terms dd { color: var(--soft); }

.note { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgb(255 138 61 / .45); border-radius: 16px; background: var(--badge-bg); color: var(--text); }
.note .i { color: var(--ember); margin-top: 1px; }
.note b { color: var(--ink); }

/* ---------- questions ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--ink); font: 750 1.15rem/1.3 var(--font-d); font-stretch: 90%; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq summary .i { flex: none; width: 32px; height: 32px; padding: 6px; border: 1.5px solid var(--line-2); border-radius: 50%; color: var(--soft); transition: rotate .2s, background-color .15s; }
.faq details[open] summary .i { rotate: 180deg; border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.faq details p { max-width: 70ch; padding: 0 0 20px; color: var(--soft); }

/* ---------- placeholders, 404 ---------- */

.dir-head { display: flex; align-items: center; gap: 22px; max-width: 900px; }
.dir-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.dir-head .lead { margin-top: 10px; }
.dir-head .pm { width: 72px; height: 72px; font-size: 1.3rem; }
.sub-h { margin-bottom: 14px; font-size: 1.3rem; }
/* --cols comes from the page: as many columns as fill every row (pages-list.mjs); below desktop the tiles flow */
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tile { display: grid; align-content: start; gap: 2px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shade); }
.tile:hover { border-color: var(--gold); color: var(--ink); }
.tile.has-mark { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 14px; }
.tile-n { display: block; font-weight: 700; }
.tile-s { display: block; color: var(--soft); font-size: .88rem; }
/* in a reading column next to the contents the tiles are a list of two columns, whatever their number */
.prose .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .tile { padding: 12px 14px; }
@media (max-width: 640px) { .prose .tiles { grid-template-columns: minmax(0, 1fr); } }
/* ---------- casino lists: one layout for every type ---------- */

.cat-hero { padding-top: 28px; }
.cat-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 .68rem/1 var(--font-d); letter-spacing: .02em; }
.avatar.lg { width: 64px; height: 64px; font-size: 1.25rem; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14); }
.avatar.xl { width: 72px; height: 72px; font-size: 1.45rem; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14), 0 0 0 3px rgb(255 255 255 / .12); }
img.avatar { object-fit: cover; background: var(--card-2); box-shadow: 0 0 0 1.5px var(--line-2); }
img.avatar.lg, img.avatar.xl { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px rgb(232 78 137 / .6); }
.author-n a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.score-how { margin-left: 8px; color: var(--link); font: 700 .86rem var(--font-t); text-decoration: underline; text-underline-offset: 3px; }
.cmp2 { max-width: 920px; margin: 0 auto; }
.cmp2-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; margin-bottom: 18px; }
.cmp2-sel { display: grid; gap: 6px; min-width: 0; }
.cmp2-sel span { color: var(--soft); font-size: .86rem; font-weight: 700; }
.cmp2-sel select { font-weight: 700; }
.cmp2-swap { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .25s; }
.cmp2-swap:hover { border-color: var(--gold); }
.cmp2-swap:active { transform: rotate(180deg); }
.cmp2-t { table-layout: fixed; min-width: 0; }
.cmp2-t th[scope="row"] { width: 32%; color: var(--soft); font-weight: 600; }
.cmp2-t thead th { vertical-align: bottom; }
.cmp2-hd { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.cmp2-hd b { display: block; overflow-wrap: anywhere; font: 750 1.05rem var(--font-d); }
.cmp2-hd small { color: var(--faint); font-size: .82rem; font-weight: 700; }
.cmp2-hd:hover b { text-decoration: underline; }
.cmp2-g th { padding-top: 16px; background: var(--tint); color: var(--ink); font: 750 .95rem var(--font-d); }
.cmp2-t td { overflow-wrap: anywhere; }
.cmp2-t td.is-win { background: var(--good-bg); color: var(--good); font-weight: 750; }
.cmp2-t tfoot td { white-space: normal; }
.cmp2-t tfoot .btn { margin: 4px 6px 0 0; }
.cmp2-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--soft); font-size: .92rem; }
.cmp2-note .i { flex: none; color: var(--good); }
.terms-more { margin-top: 14px; color: var(--soft); font-size: .95rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 580px; margin-top: 28px; }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--tint); }
.stats dd { color: var(--gold-hi); font: 800 2rem/1 var(--font-d); font-stretch: 78%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats dd.is-long { font-size: 1.45rem; line-height: 1.05; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.stats dt { color: var(--soft); font-size: .86rem; line-height: 1.3; }
.cat-hero .quick { margin-top: 22px; }
.cat-title { display: flex; align-items: center; gap: 20px; }
.cat-title > :first-child:not(h1) { flex: none; }
.cat-title > .pm { width: 72px; height: 72px; font-size: 1.3rem; box-shadow: 0 0 0 3px rgb(255 255 255 / .12); }
.cat-title .pm-stack .pm { width: 60px; height: 60px; font-size: 1.05rem; box-shadow: 0 0 0 3px var(--night); }
.cat-title .pm-stack .pm + .pm { margin-left: -16px; }
.pk > .pm { width: 46px; height: 46px; font-size: .82rem; }
.notice { margin: 0 0 22px; }
.groups { display: grid; gap: 30px; }
.group h3 { margin-bottom: 12px; font-size: 1.25rem; font-stretch: 88%; }
.tbl-methods { min-width: 760px; }
.tbl-methods td.is-good { color: var(--good); font-weight: 700; }
/* five studios: three across, then two wider ones, so no row has a hole */
.studios { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.studio { display: flex; flex-direction: column; grid-column: span 2; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shade); }
.studio:nth-child(3n+1):nth-last-child(2), .studio:nth-child(3n+2):last-child { grid-column: span 3; }
.studio-h { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.studio-h .pm { width: 52px; height: 52px; font-size: .95rem; }
.studio-n { display: block; font: 750 1.3rem/1.2 var(--font-d); font-stretch: 86%; }
.studio-m { display: block; color: var(--faint); font-size: .88rem; }
.studio-h:hover .studio-n { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.studio > p { color: var(--soft); font-size: .95rem; }
.studio > .studio-k { margin-bottom: -4px; color: var(--faint); font-size: .84rem; font-weight: 700; }
.studio .chip { min-height: 30px; padding: 2px 12px; font-size: .88rem; }
.studio > .more { margin-top: auto; padding-top: 4px; white-space: normal; }
.hero-in.is-solo { grid-template-columns: minmax(0, 1fr); }
.hero-in.is-solo .hero-copy { max-width: 820px; }

.picks { gap: 4px; align-self: center; }
.picks .pick-k { margin-bottom: 6px; font: 700 .9rem/1.2 var(--font-t); letter-spacing: 0; }
.pk-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.pk:first-child { border-top: 0; padding-top: 4px; }
.pk-k { color: var(--gold-hi); font-size: .8rem; font-weight: 700; }
.pk-n { display: block; width: fit-content; color: var(--ink); font: 750 1.22rem/1.2 var(--font-d); font-stretch: 88%; text-decoration: none; }
.pk-n:hover { color: var(--gold-hi); text-decoration: underline; }
.pk-v { color: var(--soft); font-size: .9rem; }
.picks .fine { margin-top: 2px; text-align: center; }

.rvs { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.rv-in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 32px; padding: 26px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shade); }
.rv:first-child .rv-in { border-color: rgb(227 58 120 / .8); box-shadow: 0 0 0 5px var(--glow), var(--shade); }
.rv-k { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--badge-bg); color: var(--badge); font-size: .9rem; font-weight: 700; }
.rv-k span { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 .85rem/1 var(--font-d); }
.rv-id { display: flex; align-items: center; gap: 16px; }
.rv-id h3 { font-size: 1.7rem; font-stretch: 84%; }
.rv-id h3 a { color: var(--ink); text-decoration: none; }
.rv-id h3 a:hover { color: var(--link); text-decoration: underline; }
.rv-sum { margin-top: 16px; color: var(--text); font-size: 1.05rem; }
.rv-main .pc { margin-top: 18px; }
.rv-side { display: grid; align-content: start; gap: 12px; }
.rv-act { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.rv-side .fine { text-align: center; }

.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc-col { padding: 14px 16px; border-radius: 16px; background: var(--tint); }
.pc-h { margin-bottom: 8px; color: var(--ink); font-size: .92rem; font-weight: 700; }
.pc ul, .checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pc li, .checks li { display: flex; align-items: flex-start; gap: 9px; }
.pc li { font-size: .94rem; }
.pc .i, .checks .i { width: 20px; height: 20px; margin-top: 1px; padding: 3.5px; border-radius: 50%; stroke-width: 3.2; }
.is-pro .i, .checks .i { background: var(--good-bg); color: var(--good); }
.is-con .i { background: var(--bad-bg); color: var(--bad); }

.cmp { margin-top: 56px; }
.cmp h3 { margin-bottom: 14px; font-size: 1.5rem; font-stretch: 86%; }
.tbl-cmp { min-width: 860px; }
.tbl-cmp th, .tbl-cmp td { vertical-align: middle; }
.tbl-cmp tbody th a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.tbl-cmp tbody th a:hover { color: var(--link); text-decoration: underline; }
.tbl-cmp td b { display: block; color: var(--ink); white-space: nowrap; }
.tbl-cmp td small { color: var(--faint); font-size: .85rem; }
.tbl-cmp td.is-good { color: var(--good); font-weight: 700; }
.tbl-cmp td.is-ok { color: var(--ok); font-weight: 700; }
.tbl-cmp td:last-child { text-align: right; }

.sec-line { border-top: 1px solid var(--line); }
.prose > :is(.crit, .pc, .steps, .checks, .ways) { margin-top: 18px; }
.prose > :is(.crit, .pc, .steps, .checks, .ways, .tbl-wrap, .note) + :is(p, .tbl-wrap, .note) { margin-top: 18px; }
.prose > h3 + :is(.crit, .pc, .steps, .checks, .ways, .tbl-wrap, .note) { margin-top: 14px; }
.crit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; list-style: none; }
.crit li { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shade); }
.crit h4 { font-size: 1.06rem; font-stretch: 92%; }
.crit p { margin-top: 4px; color: var(--soft); font-size: .94rem; }
.steps { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; display: grid; gap: 2px; min-height: 60px; padding: 14px 16px 14px 62px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; top: 14px; left: 15px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 1rem/1 var(--font-d); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .16); }
.steps b { color: var(--ink); }
.steps span { color: var(--soft); font-size: .94rem; }
.checks li { color: var(--text); }

.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.way { display: grid; align-content: start; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shade); }
.way-h { display: flex; align-items: center; gap: 12px; color: var(--ink); font: 750 1.08rem var(--font-d); font-stretch: 90%; }
.way-h .pm-stack .pm { width: 30px; height: 30px; font-size: .64rem; box-shadow: 0 0 0 2px var(--card); }
.way-h .pm-stack .pm + .pm { margin-left: -8px; }
.way dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .9rem; }
.way dt { color: var(--faint); }
.way dd { color: var(--ink); font-weight: 700; }
.way dd.is-no { color: var(--bad); }
.way p { color: var(--soft); font-size: .9rem; }
.ways-k { margin: 20px 0 10px; color: var(--soft); font-size: .93rem; font-weight: 700; }

.author { display: flex; align-items: flex-start; gap: 18px; margin-top: 48px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--card-2); }
.author-k { color: var(--faint); font-size: .85rem; font-weight: 700; }
.author-n { color: var(--ink); font: 750 1.3rem/1.2 var(--font-d); font-stretch: 88%; }
.author-n span { margin-left: 10px; color: var(--soft); font: 400 .95rem var(--font-t); }
.author p + p { margin-top: 8px; }
.author-m { color: var(--faint); font-size: .88rem; }

/* ---------- free demo games: NextCasino's game cards and demo dialog, in BetPokies' colours ---------- */

.gms { display: grid; gap: 12px; }
.gms + .gms { margin-top: 28px; }
.gms-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.gms-h h3 { font-size: 1.35rem; font-stretch: 86%; }
.gms-h h3 span { margin-left: 4px; color: var(--faint); font: 400 1rem var(--font-t); }
.gms-nav { display: flex; gap: 8px; }
.gms-note { margin: -8px 0 0; color: var(--soft); font-size: .92rem; }
.gms-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.gms-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--card-2); }
.gms-btn:disabled { opacity: .35; cursor: default; }
.gms-btn .i { width: 18px; height: 18px; stroke-width: 2.2; }
.gms-btn[data-dir="-1"] .i { transform: scaleX(-1); }
.gms-rail {
  --bleed: 20px;
  position: relative;
  display: flex;
  gap: 16px;
  margin: 0 calc(-1 * var(--bleed));
  padding: 4px var(--bleed) 8px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bleed);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--bleed) calc(100% - var(--bleed)), transparent);
  mask: linear-gradient(90deg, transparent, #000 var(--bleed) calc(100% - var(--bleed)), transparent);
}
.gms-rail::-webkit-scrollbar { display: none; }
.gms-rail > li { flex: 0 0 156px; min-width: 0; scroll-snap-align: start; }
.gm { display: grid; align-content: start; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gm-pic { position: relative; display: block; aspect-ratio: 1; margin-bottom: 7px; overflow: hidden; border-radius: 20px; background: var(--card-2); box-shadow: 0 0 0 1px var(--hair), var(--shade); transition: box-shadow .15s; }
.gm-pic img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gm-fb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; background: radial-gradient(120% 90% at 30% 0%, var(--card-3), var(--card-2)); color: var(--soft); text-align: center; }
.gm-fb .i { width: 30px; height: 30px; color: var(--gold); }
.gm-fb b { display: -webkit-box; overflow: hidden; font-size: .82rem; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.gm-play { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--on-gold); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .16), 0 6px 14px rgb(4 6 18 / .45); transition: transform .2s ease; }
.gm-play .i { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; stroke: none; }
.gm-live { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 3px 6px; border-radius: 6px; background: #DE2F4D; color: #fff; font: 800 .62rem/1 var(--font-t); letter-spacing: .06em; box-shadow: 0 2px 0 #9E1630; }
.gm-n { display: -webkit-box; overflow: hidden; font-size: .95rem; font-weight: 700; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gm-p { overflow: hidden; color: var(--faint); font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.gm:hover .gm-pic { box-shadow: 0 0 0 2px var(--gold), var(--shade); }
.gm:hover .gm-pic img { transform: scale(1.05); }
.gm:hover .gm-play { transform: scale(1.1); }
.gm:focus-visible { outline: 0; }
.gm:focus-visible .gm-pic { box-shadow: 0 0 0 3px var(--gold); }
.games-sec .sec-sub { margin-bottom: 18px; }
.games-sec .gms-btn { background: var(--card-2); }
.gm-soon { cursor: default; }
.gm-soon .gm-pic { display: grid; place-items: center; border: 1.5px dashed var(--line-2); background: var(--tint); box-shadow: none; }
.gm-soon-t { display: grid; justify-items: center; gap: 8px; padding: 12px; color: var(--faint); font-size: .84rem; font-weight: 700; line-height: 1.25; text-align: center; }
.gm-soon-t .i { width: 26px; height: 26px; color: var(--line-2); }
.gm-soon .gm-n { color: var(--soft); }
.gm-soon:hover .gm-pic { box-shadow: none; }

/* the dialog: dark, whatever the page under it */
.mdl { width: min(640px, calc(100% - 32px)); max-width: none; max-height: min(86vh, 780px); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line-2); border-radius: 26px; background: var(--card); color: var(--text); box-shadow: var(--pop-shadow); overscroll-behavior: contain; }
.mdl::backdrop { background: rgb(4 5 14 / .66); backdrop-filter: blur(3px); }
.mdl-in { display: grid; gap: 18px; padding: 22px 24px 24px; }
.mdl-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mdl-h h2 { font-size: 1.45rem; font-stretch: 86%; }
.mdl-sub { margin-top: 4px; color: var(--soft); font-size: .92rem; }
.mdl-x { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: var(--card-2); color: var(--ink); cursor: pointer; }
.mdl-x:hover { background: var(--card-3); }
.mdl-x .i { width: 18px; height: 18px; }
.mdl.gmd { width: min(1000px, calc(100% - 32px)); max-height: min(92vh, 880px); }
.gmd-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gmd-pic { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; background: var(--card-2); }
.gmd .mdl-sub a { color: var(--ink); }
.gmd .mdl-sub a:hover { color: var(--gold-hi); }
.gmd-b { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; align-items: start; }
.gmd-play { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: var(--night-deep); isolation: isolate; }
.gmd-play::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: var(--art) center / cover no-repeat; filter: blur(28px) brightness(.45) saturate(1.2); }
.gmd-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; color: var(--soft); text-align: center; }
.gmd-wait img { width: clamp(96px, 22%, 150px); aspect-ratio: 1; border-radius: 20px; object-fit: cover; box-shadow: var(--pop-shadow); }
.gmd-wait p { max-width: 40ch; }
.gmd-play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s; }
.gmd-play.is-on iframe { opacity: 1; }
.gmd-s { display: grid; gap: 10px; margin: 0; }
.gmd-s > div { padding: 12px 14px; border-radius: 14px; background: var(--card-2); }
.gmd-s dt { color: var(--faint); font-size: .84rem; font-weight: 700; }
.gmd-s dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 0; color: var(--ink); font: 800 1.2rem/1.2 var(--font-d); font-variant-numeric: tabular-nums; }
.vol { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.vol i { width: 5px; border-radius: 2px; background: var(--line-2); }
.vol i:nth-child(1) { height: 6px; }
.vol i:nth-child(2) { height: 8.5px; }
.vol i:nth-child(3) { height: 11px; }
.vol i:nth-child(4) { height: 13.5px; }
.vol i:nth-child(5) { height: 16px; }
.vol i.on { background: var(--gold); }
.gmd-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.gmd-fine { display: flex; align-items: flex-start; gap: 8px; max-width: 56ch; color: var(--faint); font-size: .86rem; }
.gmd-fine .i { width: 18px; height: 18px; color: var(--gold); }
.gmd-fine a { color: var(--soft); }
.gmd-act { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- casino reviews ---------- */

.rv-top { display: flex; align-items: center; gap: 20px; }
.rv-top .logo { border-radius: 24px; box-shadow: 0 0 0 3px rgb(255 255 255 / .1); }
.rv-top .kicker { margin-bottom: 8px; }
.rv-score { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.score-big { display: inline-flex; align-items: baseline; gap: 2px; padding: 8px 16px; border-radius: 18px; background: var(--gold); color: var(--on-gold); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14); }
.score-big b { font: 800 2.4rem/1 var(--font-d); font-stretch: 78%; }
.score-big small { font: 800 1rem var(--font-d); opacity: .7; }
.score-t { display: grid; }
.score-t b { color: var(--ink); font-weight: 700; }
.score-t span { color: var(--soft); font-size: .92rem; }
.rv-hero .tags { margin-top: 16px; }
.glance { gap: 14px; align-self: start; }
.glance .btn.block { width: 100%; }
.glance .fine { text-align: center; }

/* the review's sections, under the header while you read */
.subnav { position: sticky; top: var(--hdr); z-index: 30; border-bottom: 1px solid var(--line); background: var(--night); }
.subnav ul { position: relative; display: flex; gap: 4px; margin: 0; padding: 9px 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { position: relative; z-index: 1; }
.subnav a { display: block; padding: 7px 14px; border-radius: 999px; color: var(--soft); font-size: .93rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .3s, background-color .2s; }
.subnav a:hover { background: var(--card-2); color: var(--ink); }
.subnav a[aria-current="true"] { background: var(--gold); color: var(--on-gold); }
.subnav.has-pill a[aria-current="true"] { background: none; }
.subnav .subnav-pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 999px; background: var(--gold); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.22, .9, .3, 1), width .45s cubic-bezier(.22, .9, .3, 1), opacity .2s; }
.subnav .subnav-pill.is-on { opacity: 1; }
.subnav .subnav-pill.no-slide { transition: opacity .2s; }
.subnav ~ section { scroll-margin-top: calc(var(--hdr) + var(--sub, 56px) - 1px); }

.ov { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 44px; align-items: start; }
.ov h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ov-lead { margin-top: 14px; color: var(--text); font-size: 1.08rem; }
.gtk { display: grid; gap: 10px; margin: 22px 0; padding: 0; list-style: none; }
.gtk li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); }
.gtk .i { width: 22px; height: 22px; flex: none; padding: 3.5px; border-radius: 50%; background: var(--tint-2); color: var(--faint); stroke-width: 2.6; }
.gtk .t-good .i { background: var(--good-bg); color: var(--good); }
.gtk .t-warn .i { background: var(--bad-bg); color: var(--bad); }
.score-card { position: sticky; top: calc(var(--hdr) + 76px); padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shade); }
.score-card h3 { font-size: 1.2rem; }
.score-card-n { margin: 6px 0 16px; color: var(--soft); }
.score-card-n b { margin-right: 4px; color: var(--ink); font: 800 2.4rem/1 var(--font-d); font-stretch: 78%; }
.score-card .muted { color: var(--faint); font-size: .86rem; }
.bars { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: center; }
.bar-l { color: var(--text); font-size: .93rem; font-weight: 700; }
.bar-l small { color: var(--faint); font-weight: 400; }
.bars b { grid-row: 1; grid-column: 2; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar { position: relative; grid-row: 2; grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--card-3); }
.bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, var(--gold), #E50C5C); }

/* a bonus's Full terms (a link in the footer, or a button by Get bonus) and the plain text it opens in the card */
.bo-tc { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.lnk.bo-tc { margin-left: auto; font-size: .86rem; }
.bo-tc .i { width: 16px; height: 16px; }
.bo-tc .i:last-child { rotate: 90deg; transition: rotate .25s; }
.bo-tc[aria-expanded="true"] .i:last-child { rotate: -90deg; }
.no-js .bo-tc { display: none; }
.rk.bo, .bc { scroll-margin-top: calc(var(--hdr) + 72px); }
.bo-tx { display: grid; grid-template-rows: 0fr; flex-basis: 100%; transition: grid-template-rows .3s cubic-bezier(.22, .9, .3, 1); }
.bo-tx.is-open { grid-template-rows: 1fr; }
.bo-tx-in { min-height: 0; overflow: hidden; }
.bo-tx:not(.is-open) .bo-tx-in { visibility: hidden; transition: visibility 0s .3s; }
.bo-tx-c > :first-child { margin-top: 6px; }
.bo-tx-go { margin-top: 10px; font-size: .88rem; }
.bo-tx-in > :last-child { margin-bottom: 4px; }
.bo-tx-d { max-width: 100ch; color: var(--text); font-size: .93rem; line-height: 1.6; }
.bo-tx h4 { margin: 12px 0 4px; color: var(--ink); font-size: .95rem; }
.bo-tx-t { max-width: 100ch; color: var(--soft); font-size: .88rem; line-height: 1.6; }
.rk-fine > .bo-tx { margin-top: -6px; }
.bc-in > .bo-tx { margin-top: -12px; }

/* a casino's own bonuses on its review: compact cards, three to a row; one card opening leaves the others as they are */
.bcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 0; padding: 0; list-style: none; }
.bc { --px: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shade); }
.bc.is-main { border-color: rgb(227 58 120 / .8); box-shadow: 0 0 0 4px var(--glow), var(--shade); }
.bc-in { display: grid; gap: 12px; padding: 16px var(--px) 0; }
.bc-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bc-h .tk { margin-left: 2px; }
.bc-h h3 { font-size: 1.12rem; line-height: 1.2; }
.bc-k { margin-top: 2px; color: var(--faint); font-size: .82rem; font-weight: 700; }
.bc .offer { padding: 10px 18px; }
.bc .offer-v { font-size: 1.4rem; }
.bc-f { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.bc-f div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; min-width: 0; padding: 7px 10px; border-radius: 10px; background: var(--tint); }
.bc-f dt { color: var(--faint); font-size: .8rem; font-weight: 700; }
.bc-f dd { margin: 0; color: var(--ink); font-size: .92rem; font-weight: 700; white-space: nowrap; }
.bc-f .t-ok dd { color: var(--good); }
.bc-act { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-act .btn { flex: 1 1 auto; }
.bc-act .bo-code { flex-basis: 100%; }
.bc .rk-fine { grid-area: auto; padding-block: 10px 12px; }
.list-alt { margin: 26px 0 12px; }

.facts-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.sub-h span { margin-left: 4px; color: var(--faint); font-weight: 400; }

/* payments on a review: a ticked table of the main methods, then crypto and the rest as text */
.pay-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; margin-top: 28px; }
.tbl-ways { min-width: 0; }
.tbl-ways th, .tbl-ways td { vertical-align: middle; }
.tbl-ways td { width: 110px; text-align: center; }
.tbl-ways thead th:not(:first-child) { text-align: center; }
.tbl-ways tbody th a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.tbl-ways tbody th a:hover { color: var(--link); text-decoration: underline; }
@media (min-width: 761px) {
  .pay-grid .tbl-wrap { max-height: 452px; overflow-y: auto; background: linear-gradient(var(--card-2) 46px, var(--line) 46px 47px, var(--card) 47px); }
  .pay-grid .tbl-wrap::-webkit-scrollbar-track { margin-top: 47px; }
  .tbl-ways thead th { position: sticky; top: 0; z-index: 1; height: 46px; box-shadow: 0 1px 0 var(--line); }
}
.yn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.yn .i { width: 15px; height: 15px; stroke-width: 3; }
.yn.is-yes { background: var(--good-bg); color: var(--good); }
.yn.is-no { background: var(--tint-2); color: var(--faint); }
.yn.is-info { background: var(--tint-2); color: var(--soft); }
.yn.is-info .i { stroke-width: 2; }
/* Licence and safety: the licence card's regulators, a casino with no licence, and where it takes players under the cards. */
.lic-l .chip-i { flex: none; margin-top: 1px; }
.spec-none { display: flex; align-items: flex-start; gap: 10px; color: var(--soft); font-size: .94rem; line-height: 1.5; }
.spec-none > .i { flex: none; width: 20px; height: 20px; color: var(--bad); }
.spec-none b { color: var(--bad); }
.rv-where { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding: 14px 18px; border-radius: 16px; background: var(--tint); color: var(--soft); font-size: .94rem; line-height: 1.5; }
.rv-where > .yn { flex: none; }
.rv-where p { flex: 1 1 320px; margin: 0; }
.rv-where b { color: var(--ink); }
.pay-side { display: grid; gap: 22px; }
.pay-b .sub-h { margin-bottom: 10px; }
.coins, .mtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.coins span, .mtags li { padding: 3px 10px; border-radius: 8px; background: var(--tint-2); color: var(--ink); font-size: .86rem; font-weight: 700; line-height: 1.45; }
.coins span { padding-inline: 9px; font: 700 .82rem/1.45 var(--font-d); letter-spacing: .03em; }
.pay-t { color: var(--soft); font-size: .95rem; line-height: 1.6; }

/* support, devices, languages: three short checklists */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.spec { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shade); }
.spec h3 { margin-bottom: 14px; font-size: 1.15rem; }
.spec-l { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.spec-l li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 700; }
.spec-l li > span:last-child { display: grid; }
.spec-l small { color: var(--faint); font-size: .84rem; font-weight: 400; overflow-wrap: anywhere; }
.spec-l li.is-no { color: var(--faint); font-weight: 400; }
.spec-more { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.spec-more + .spec-more { margin-top: 8px; padding-top: 0; border-top: 0; }
.spec-more summary { color: var(--link); font-size: .92rem; font-weight: 700; cursor: pointer; }
.spec-more p { margin-top: 8px; color: var(--soft); font-size: .9rem; line-height: 1.55; }
.chip > .i { width: 16px; height: 16px; color: var(--faint); }
.gtypes { margin-bottom: 28px; }
.studios-l { margin-top: 30px; }
.more-l summary { margin: 12px 0; color: var(--link); font-weight: 700; cursor: pointer; }

#safety .sub-h { margin-top: 28px; }
.rg { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.rg li.is-off { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-2); }
.rg li.is-off .i { background: var(--tint-2); color: var(--faint); }
.rv-faq .prose { max-width: 820px; }

.alts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.alt { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shade); }
.alt-h, .rvc-h { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.alt-n, .rvc-name { display: block; font: 750 1.1rem/1.2 var(--font-d); font-stretch: 88%; }
.alt-h:hover .alt-n, .rvc-h:hover .rvc-name { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.alt-f { color: var(--soft); font-size: .9rem; }
.alt-act { display: flex; align-items: center; gap: 14px; margin-top: auto; }

.rvcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.rvc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shade); }
.rvc-n { min-width: 2ch; color: var(--line-2); font: 800 1.3rem/1 var(--font-d); font-stretch: 75%; }
.rvc:nth-child(-n+3) .rvc-n { color: var(--num); }
.rvc-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.rvc-f div { padding: 6px 8px; border-radius: 10px; background: var(--tint); }
.rvc-f dt { color: var(--faint); font-size: .72rem; font-weight: 700; }
.rvc-f dd { margin: 0; color: var(--ink); font-size: .88rem; font-weight: 700; }
.rvc-f dd.t-good { color: var(--good); }
.rvc-act { display: flex; gap: 8px; margin-top: auto; }
.rvc-act .btn { flex: 1; }

/* a casino with no offer on file: the same ticket, plain, with what it stands out for */
.offer.is-plain { border-color: var(--line-2); background: var(--tint); }
.offer.is-plain .offer-v { color: var(--ink); }
.tag.is-warn { background: var(--bad-bg); color: var(--bad); }
.f-licence { --ic: var(--ic-shield); }
.muted { color: var(--faint); }

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.topics h3 { font-size: 1.06rem; font-stretch: 92%; }
.contact-mail { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--soft); }
.contact-mail .i { color: var(--num); }
.form { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shade); }
.form-h { font-size: 1.45rem; font-stretch: 86%; }
.field { display: grid; gap: 6px; }
.field label { color: var(--ink); font-size: .93rem; font-weight: 700; }
.input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; }
.input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow); }
textarea.input { min-height: 140px; resize: vertical; }
select.input { padding-right: 42px; appearance: none; background: var(--card) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367806F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6.5 9.5 5.5 5.5 5.5-5.5'/></svg>") no-repeat right 14px center / 18px; }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--soft); font-size: .92rem; }
.check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--gold); }
.form .btn { justify-self: start; }

.nf { padding-block: 72px 120px; }
.nf h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.nf-act { margin-top: 28px; }

/* ---------- footer ---------- */

.ftr { padding: 56px 0 34px; border-top: 1px solid var(--line); background: var(--night-deep); }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr-brand p { max-width: 40ch; margin-top: 16px; color: var(--soft); }
.ftr-nav { display: grid; align-content: start; gap: 8px; }
.ftr-nav h2 { margin-bottom: 4px; color: var(--faint); font: 700 .95rem var(--font-t); }
.ftr-nav .ftr-h2 { margin-top: 18px; }
.ftr-nav a { width: fit-content; color: var(--ink); text-decoration: none; }
.ftr-nav a:hover { color: var(--gold-hi); text-decoration: underline; }
.ftr-nav .ftr-more { color: var(--gold-hi); font-weight: 700; }
.ftr-rg { display: flex; align-items: flex-start; gap: 16px; margin-top: 38px; padding: 18px; border-radius: 20px; background: var(--tint); color: var(--soft); }
.ftr-rg b { color: var(--ink); }
.age { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 2px solid var(--ember); border-radius: 50%; color: var(--ember); font: 800 .95rem var(--font-d); }
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: .92rem; }
.ftr-legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ftr-legal a { color: var(--soft); text-decoration: none; }
.ftr-legal a:hover { color: var(--gold-hi); text-decoration: underline; }
.ftr-ck { padding: 0; border: 0; background: none; color: var(--soft); font: inherit; cursor: pointer; }
.ftr-ck:hover { color: var(--gold-hi); text-decoration: underline; }
.ftr-note { margin-top: 14px; color: var(--faint); font-size: .88rem; }
.ftr-note b { color: var(--soft); }

/* ---------- drawings in the game guides: the table, the cards, the bets, and the screens of getting started ---------- */
.fig { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shade); }
.fig-in { position: relative; }
.fig .il { display: block; width: 100%; height: auto; }
.fig .il-wheel { max-width: 420px; margin-inline: auto; }
.fig figcaption { margin-top: 12px; color: var(--soft); font-size: .9rem; line-height: 1.5; text-align: center; }
.prose > :is(.fig, .moves, .flow) { margin-top: 20px; }
.prose > :is(.fig, .moves, .flow) + :is(p, .note, .checks, .tbl-wrap) { margin-top: 18px; }
.il text { font-family: var(--font-d); }
.il-card { fill: #FFF6F9; stroke: rgb(13 16 39 / .22); stroke-width: 1; }
.il-c text { fill: #131628; font-weight: 800; }
.il-c.is-red text { fill: #C42645; }
.il-big { text-anchor: middle; }
.il-back { fill: #151F5F; stroke: #E84E89; stroke-width: 1.2; }
.il-back-d { fill: none; stroke: rgb(232 78 137 / .6); stroke-width: 1.2; }
.il-chip-b { stroke: #fff; }
.il-chip.is-gold .il-chip-b { fill: #E21661; }
.il-chip.is-ember .il-chip-b { fill: #D9531A; }
.il-chip-i { fill: rgb(255 255 255 / .16); stroke: rgb(255 255 255 / .6); stroke-width: 1; }
.il-chip-t { fill: #fff; font-weight: 800; text-anchor: middle; }
.il-rim { fill: #5A3A16; stroke: #2E1C08; stroke-width: 2; }
.il-felt-line { fill: none; stroke: rgb(232 78 137 / .45); stroke-width: 1.5; }
.il-felt-t { fill: #E84E89; font-size: 17px; font-weight: 800; letter-spacing: .12em; text-anchor: middle; }
.il-felt-s { fill: rgb(255 210 226 / .78); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-anchor: middle; }
.il-spot { fill: none; stroke: rgb(255 210 226 / .85); stroke-width: 2; }
.il-spot.is-faint { stroke: rgb(255 210 226 / .28); }
.il-shoe { fill: #0B102D; stroke: rgb(232 78 137 / .45); }
.il-total { fill: #E84E89; }
.il-total-t { fill: #131628; font-size: 17px; font-weight: 800; text-anchor: middle; }
.il-lead { fill: none; stroke: rgb(255 210 226 / .75); stroke-width: 1.4; stroke-dasharray: 3 3; }
.il-lead-dot { fill: #FFD2E2; }
.il-note { fill: #FFD2E2; font-size: 14px; font-weight: 700; }
.il-val { fill: var(--ink); font-size: 30px; font-weight: 800; font-stretch: 82%; text-anchor: middle; }
.il-cap { fill: var(--soft); font-size: 14px; font-weight: 700; text-anchor: middle; }
.il-mini { fill: #141D5B; }
.il-badge { fill: #E84E89; stroke: #0B102D; stroke-width: 2; }
.il-badge-i { fill: none; stroke: #131628; stroke-width: 3; stroke-linecap: round; }
.il-arrow { fill: none; stroke: #E84E89; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.il-pole { stroke: #E9C6D3; stroke-width: 3; stroke-linecap: round; }
.il-flag { fill: #FFF6F9; stroke: rgb(0 0 0 / .2); }
.il-shield { fill: #E9EEF5; stroke: #9AA9BC; stroke-width: 1.5; }
.il-shield-x { stroke: #C42645; stroke-width: 3.5; stroke-linecap: round; }
.il-pk.is-r, .il-cell.is-r, .il-dia.is-r { fill: #C8102E; }
.il-pk.is-b, .il-cell.is-b, .il-dia.is-b { fill: #1C1C1C; }
.il-pk.is-g, .il-cell.is-g { fill: #0E1C77; }
.il-fret { stroke: #D8DEE6; stroke-width: 1; opacity: .85; }
.il-num { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; }
.il-spoke { stroke: #E73C7B; stroke-width: 6; stroke-linecap: round; }
.il-knob { fill: #F47AA7; }
.il-ball { fill: #FAFAF7; stroke: #C9CCD1; stroke-width: 1; }
.il-felt { fill: #121B57; }
.il-cell { stroke: rgb(255 230 239 / .9); stroke-width: 1.5; }
.il-cell.is-felt { fill: #121B57; }
.il-cell-t { fill: #fff; font-size: 17px; font-weight: 800; text-anchor: middle; }
.il-box-t { fill: #FFD2E2; font-size: 14px; font-weight: 800; text-anchor: middle; }
.il-dia { stroke: #fff; stroke-width: 1.2; }
.il-tag rect { fill: #0B102D; stroke: #E84E89; stroke-width: 1; }
.il-tag text { fill: #E84E89; font-size: 11px; font-weight: 800; text-anchor: middle; }
.il-zone { fill: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-anchor: middle; }

.il-note.is-c { text-anchor: middle; }
.il-glow { fill: rgb(232 78 137 / .25); stroke: #E84E89; stroke-width: 2; }
.il-brace { fill: none; stroke: rgb(255 210 226 / .6); stroke-width: 1.5; }
.il-small { fill: rgb(255 210 226 / .85); font-size: 12px; font-weight: 700; text-anchor: middle; }
.il-spot-t { fill: rgb(255 210 226 / .85); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; }
.il-chip.is-sage .il-chip-b { fill: #666D97; }
.il-chip.is-ink .il-chip-b { fill: #24313A; }
/* baccarat */
.il-hand { fill: rgb(255 255 255 / .06); stroke: rgb(255 210 226 / .5); stroke-width: 1.5; stroke-dasharray: 5 4; }
.il-hand-t { fill: #E84E89; font-size: 15px; font-weight: 800; letter-spacing: .12em; text-anchor: middle; }
.il-hand-t.is-s { font-size: 11px; }
.il-bbox { stroke-width: 2; }
.il-bspot { fill: none; stroke: rgb(255 210 226 / .4); stroke-width: 1.5; stroke-dasharray: 4 3; }
.il-bbox.is-p { fill: rgb(102 166 255 / .22); stroke: #8CBBFF; }
.il-bbox.is-t { fill: rgb(74 219 166 / .18); stroke: #6FE3B8; }
.il-bbox.is-b { fill: rgb(255 90 118 / .2); stroke: #FF8EA2; }
.il-bbox-t { fill: #FFD2E2; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-anchor: middle; }
.il-bbox-p { fill: rgb(255 210 226 / .75); font-size: 11px; font-weight: 700; text-anchor: middle; }
.il-ex { fill: var(--tint); stroke: var(--line); }
.il-ex-t, .il-ex-b { fill: var(--ink); font-size: 28px; font-weight: 800; font-stretch: 82%; }
.il-ex-b { font-size: 34px; fill: var(--num); }
.il-ex-s { fill: var(--soft); font-size: 13px; font-weight: 700; }
.il-ex-a { fill: none; stroke: var(--soft); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* poker */
.il-hrow { fill: var(--tint); stroke: var(--line); }
.il-hn { fill: var(--gold); }
.il-hn-t { fill: #131628; font-size: 12px; font-weight: 800; text-anchor: middle; }
.il-hname { fill: var(--ink); font-size: 15px; font-weight: 800; }
.il-hsub { fill: var(--soft); font-size: 11px; font-weight: 700; }
/* crash games */
.il-dark { fill: #0D1020; }
.il-grid { stroke: rgb(255 255 255 / .08); stroke-width: 1; }
.il-axis { fill: rgb(255 255 255 / .45); font-size: 11px; font-weight: 700; text-anchor: end; }
.il-axis-l { stroke: rgb(255 255 255 / .2); stroke-width: 1.5; }
.il-curve { fill: none; stroke: #E84E89; stroke-width: 4; stroke-linecap: round; }
.il-burst { fill: #FF5A76; stroke: #FFD0D8; stroke-width: 1.5; }
.il-crash-t { fill: #FF8EA2; font-size: 15px; font-weight: 800; text-anchor: end; }
.il-out { fill: #4ADBA6; stroke: #0D1020; stroke-width: 3; }
.il-out-l { stroke: #4ADBA6; stroke-width: 1.5; stroke-dasharray: 3 3; }
.il-out-b { fill: #101639; stroke: #4ADBA6; stroke-width: 1.2; }
.il-out-t { fill: #EAECFE; font-size: 12px; font-weight: 800; text-anchor: middle; }
.il-out-s { fill: #4ADBA6; font-size: 11px; font-weight: 700; text-anchor: middle; }
.il-mult { fill: rgb(255 255 255 / .9); font-size: 64px; font-weight: 800; font-stretch: 80%; text-anchor: middle; }
.il-ctl { fill: rgb(255 255 255 / .07); stroke: rgb(255 255 255 / .14); }
.il-ctl-k { fill: rgb(255 255 255 / .55); font-size: 10px; font-weight: 700; }
.il-ctl-v { fill: #fff; font-size: 13px; font-weight: 800; }
.il-ctl-btn { fill: #E84E89; }
.il-ctl-bt { fill: #131628; font-size: 14px; font-weight: 800; text-anchor: middle; }
/* slots */
.il-cab { fill: #131628; stroke: #E21661; stroke-width: 3; }
.il-cab-top { fill: #0B0D1A; }
.il-cab-t { fill: #E84E89; font-size: 18px; font-weight: 800; letter-spacing: .2em; text-anchor: middle; }
.il-reels { fill: #0B0D1A; }
.il-reel { fill: #FFF6F9; }
.il-reel.is-win { fill: #FFCFE1; stroke: #E84E89; stroke-width: 3; }
.il-s7 { fill: #C8102E; font-size: 46px; font-weight: 800; text-anchor: middle; }
.il-sbar { fill: #1C1C1C; }
.il-sbar-t { fill: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-anchor: middle; }
.il-stem { fill: none; stroke: #2E397E; stroke-width: 3; stroke-linecap: round; }
.il-leaf { fill: #3D4BA5; }
.il-cherry { fill: #D7263D; stroke: #8E1022; stroke-width: 1.5; }
.il-bell { fill: #F23B7E; stroke: #A81249; stroke-width: 1.5; }
.il-clover { fill: #2F3EA0; stroke: #1C276D; stroke-width: 1.2; }
.il-gem { fill: #57C3F2; stroke: #1D7FB0; stroke-width: 1.5; }
.il-gem-l { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 1.2; }
.il-wild { fill: #E84E89; stroke: #A81249; stroke-width: 2; }
.il-wild-t { fill: #131628; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-anchor: middle; }
.il-scat { fill: #8E55E0; stroke: #5B2AA8; stroke-width: 1.5; }
.il-scat-t { fill: #fff; font-size: 8px; font-weight: 800; text-anchor: middle; }
.il-payline { fill: none; stroke: #E84E89; stroke-width: 5; stroke-linecap: round; opacity: .9; }
.il-payline.is-thin { stroke-width: 3; opacity: .7; }
.il-win { fill: #E84E89; }
.il-win-t { fill: #131628; font-size: 13px; font-weight: 800; text-anchor: middle; }
.il-spin { fill: #E84E89; stroke: #A81249; stroke-width: 3; }
.il-spin-t { fill: #131628; font-size: 15px; font-weight: 800; text-anchor: middle; }
.il-mcell { fill: rgb(255 255 255 / .1); }
.il-fs { fill: #8E55E0; stroke: #C6A2FF; stroke-width: 2; }
.il-fs-n { fill: #fff; font-size: 24px; font-weight: 800; text-anchor: middle; }
.il-fs-t { fill: #F3E9FF; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-anchor: middle; }
.il-fs-a { fill: none; stroke: #E84E89; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-mx { fill: #E84E89; font-size: 54px; font-weight: 800; text-anchor: middle; }
.il-spark { fill: #FFD2E2; }
.il-buy { fill: #E2581E; stroke: #FFB48A; stroke-width: 2; }
.il-buy-t { fill: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-anchor: middle; }
.il-jp { fill: #0B0D1A; stroke: #E84E89; stroke-width: 2; }
.il-jp-k { fill: #E84E89; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-anchor: middle; }
.il-jp-v { fill: #fff; font-size: 17px; font-weight: 800; text-anchor: middle; }
.il-vname { fill: var(--ink); font-size: 17px; font-weight: 800; }
.il-vsub { fill: var(--soft); font-size: 13px; font-weight: 700; }
.il-vbase { stroke: var(--line-2); stroke-width: 1.5; }
.il-vbar { fill: var(--gold); }
.il-vax { fill: var(--faint); font-size: 11px; font-weight: 700; }
/* live tables */
.il-screen { fill: #0A0C15; }
.il-ltable { fill: #131D5A; stroke: #5A3A16; stroke-width: 10; }
.il-dealer { fill: #36394E; }
.il-bow { fill: #C8102E; }
.il-lw { fill: #5A3A16; stroke: #E21661; stroke-width: 3; }
.il-lw-i { fill: none; stroke: #C8102E; stroke-width: 10; stroke-dasharray: 6 6; }
.il-lw-c { fill: #E21661; }
.il-live { fill: #E5304F; }
.il-live-d { fill: #fff; }
.il-live-t { fill: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; }
.il-lname { fill: rgb(255 255 255 / .8); font-size: 13px; font-weight: 700; }
.il-timer { fill: rgb(0 0 0 / .45); stroke: rgb(255 255 255 / .2); stroke-width: 5; }
.il-timer-a { fill: none; stroke: #4ADBA6; stroke-width: 5; stroke-linecap: round; }
.il-timer-t { fill: #fff; font-size: 22px; font-weight: 800; text-anchor: middle; }
.il-timer-s { fill: #4ADBA6; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-anchor: middle; }
.il-chat { fill: rgb(0 0 0 / .5); }
.il-chat-n { fill: #E84E89; font-size: 11px; font-weight: 800; }
.il-chat-m { fill: rgb(255 255 255 / .85); font-size: 11px; font-weight: 600; }
.il-chat-m.is-you { fill: #8CBBFF; }
.il-panel { fill: #131628; }
.il-chip-sel { fill: none; stroke: #E84E89; stroke-width: 2.5; }
.il-lbet { fill: rgb(255 255 255 / .06); stroke: rgb(255 255 255 / .2); }
.il-lbet.is-on { fill: rgb(232 78 137 / .16); stroke: #E84E89; }
.il-lbet-t { fill: #fff; font-size: 14px; font-weight: 800; text-anchor: middle; }

/* blackjack's moves, as small table scenes */
.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.moves li { padding: 12px 12px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shade); }
.moves .il { display: block; width: 100%; height: auto; }
.moves h4 { margin-top: 10px; font-size: 1.06rem; }
.moves p { margin-top: 4px; color: var(--soft); font-size: .9rem; line-height: 1.5; }

/* basic strategy: your total down the side, the dealer's card across */
.tbl.bjc { min-width: 520px; }
.bjc th, .bjc td { padding: 9px 6px; text-align: center; }
.bjc thead th { color: var(--soft); }
.bjc tbody th { text-align: left; white-space: nowrap; }
.bjc td { font-weight: 800; }
.bjc .m-H, .bjc-key .m-H { background: #E2E4F4; color: #0E1C77; }
.bjc .m-S, .bjc-key .m-S { background: #FCE6EA; color: #B5243F; }
.bjc .m-D, .bjc-key .m-D { background: #FFC2D8; color: #8A0033; }
.bjc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; color: var(--soft); font-size: .88rem; }
.bjc-key span { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 7px; font-weight: 800; }

/* getting started: four wireframe screens of a casino site */
.flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.flow li { padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shade); }
.flow .il { display: block; width: 100%; height: auto; }
.flow-n { margin-top: 12px; color: var(--num-ink); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.flow h4 { margin-top: 2px; font-size: 1.08rem; }
.flow li > p:last-child { margin-top: 4px; color: var(--soft); font-size: .92rem; line-height: 1.5; }
.flow.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .flow.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.il-wire text { font-family: var(--font-t); }
.w-frame { fill: #fff; stroke: #CFD1DE; stroke-width: 1.5; }
.w-top { fill: #EFF0F5; }
.w-dot { fill: #CFD1DE; }
.w-url { fill: #fff; stroke: #DDDFE8; }
.w-bar { fill: #E2E3EB; }
.w-bar.is-dark { fill: #C5C7D6; }
.w-row { fill: #fff; stroke: #DDDFE8; }
.w-row.is-hi { fill: #F6F7FB; stroke: #0D1A69; stroke-width: 1.5; }
.w-logo { fill: #D9DBE5; }
.w-logo.is-hi { fill: #E84E89; }
.w-n { fill: #fff; font-size: 9px; font-weight: 800; text-anchor: middle; }
.w-logo.is-hi + .w-n { fill: #131628; }
.w-star { fill: #E2E3EB; }
.w-star.is-on { fill: #F23B7E; }
.w-btn { fill: #E84E89; }
.w-bt { fill: #FFFFFF; font-size: 8.5px; font-weight: 800; text-anchor: middle; }
.w-ghost { fill: #fff; stroke: #C5C7D6; }
.w-gt { fill: #606587; font-size: 8.5px; font-weight: 700; text-anchor: middle; }
.w-cur { fill: #131628; stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.w-h { fill: #131628; font-size: 11px; font-weight: 800; }
.w-l { fill: #606587; font-size: 8px; font-weight: 700; }
.w-t { fill: #202339; font-size: 8.5px; }
.w-pw { fill: #202339; }
.w-box { fill: #fff; stroke: #CFD1DE; }
.w-box.is-on { fill: #F6F7FB; stroke: #0D1A69; stroke-width: 1.5; }
.w-chev { fill: none; stroke: #606587; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w-chk { fill: #0D1A69; }
.w-tick { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.w-pm { fill: #E2E3EB; }
.w-box.is-on + .w-pm { fill: #CFE8DA; }
.w-pmt { fill: #464A68; font-size: 8px; font-weight: 800; text-anchor: middle; }
.w-pill { fill: #fff; stroke: #CFD1DE; }
.w-pill.is-on { fill: #0D1A69; stroke: #0D1A69; }
.w-pt { fill: #464A68; font-size: 8px; font-weight: 700; text-anchor: middle; }
.w-pt.is-on { fill: #fff; }
.w-tog { fill: #0D1A69; }
.w-knob { fill: #fff; }
.w-tab { fill: #606587; font-size: 8.5px; font-weight: 700; }
.w-tab.is-on { fill: #0D1A69; font-weight: 800; }
.w-uline { fill: #0D1A69; }
.w-felt { fill: #DCDEEE; }
.w-mcard { fill: #fff; stroke: #898EB0; }
.w-wheel { fill: #fff; stroke: #898EB0; }
.w-wheel-i { fill: none; stroke: #B1B4CA; stroke-dasharray: 2 2; }
.w-wheel-c { fill: #898EB0; }
.w-demo { fill: #E84E89; }
.w-dt { fill: #131628; font-size: 6.5px; font-weight: 800; text-anchor: middle; }
.w-bg { fill: #F2F3F7; stroke: #CFD1DE; stroke-width: 1.5; }
.w-phone { fill: #1D1F2C; }
.w-screen { fill: #fff; }
.w-notch { fill: #46495F; }
.w-mk { fill: #fff; font-weight: 800; text-anchor: middle; }
.w-mk-ring { fill: none; stroke: rgb(19 22 40 / .14); stroke-width: .6; }
.w-ok { fill: #0D1A69; }
.w-okt { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w-n.is-hi { fill: #131628; }
.w-bt.is-light { fill: #fff; }
.w-bt.is-s, .w-gt.is-s { font-size: 7px; }
.w-t.is-b, .w-l.is-b { fill: #131628; font-weight: 800; }
.w-t.is-c, .w-l.is-c { text-anchor: middle; }
.w-t.is-r { text-anchor: end; }
.w-t.is-g { fill: #0D1A69; }
.w-l.is-light { fill: #fff; }
.w-h.is-faint, .w-bar.is-faint { opacity: .4; }
.w-pick { fill: #E6E8F4; }
.w-panel { fill: #F6F6FA; stroke: #D9DBE5; }
.w-card { fill: #F6F6FA; stroke: #B5B8CA; }
.w-chip { fill: #E96A99; }
.w-go { fill: #0D1A69; }
.w-big { fill: #131628; font-size: 15px; font-weight: 800; text-anchor: middle; }
.w-big.is-l { text-anchor: start; }
.w-big.is-xl { font-size: 26px; }
.w-pop { fill: #fff; stroke: #C5C7D6; filter: drop-shadow(0 6px 10px rgb(13 16 39 / .18)); }
.w-sheet { fill: #F3F5F7; stroke: #D7DDE3; }
.w-fp { fill: none; stroke: #0D1A69; stroke-width: 2; stroke-linecap: round; }
.w-voucher { fill: #fff; stroke: #C5C7D6; }
.w-pin { fill: #131628; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; }
.w-pin.is-s { font-size: 9.5px; }
.w-head-bar { fill: #EFF0F5; }
.w-bal { fill: #E6E8F4; stroke: #0D1A69; stroke-width: 1.2; }
.w-toast { fill: #F0F1F8; stroke: #BFE0CC; }
.w-drop { fill: #F9F9FC; stroke: #B5B8CA; stroke-dasharray: 4 3; }
.w-doc { fill: #fff; stroke: #C5C7D6; }
.w-now { fill: #FFCFE1; stroke: #E21661; stroke-width: 2; }
.w-now-c { fill: #E21661; }
.w-later { fill: #fff; stroke: #C5C7D6; stroke-width: 2; }
.w-line { stroke: #D9DBE5; stroke-width: 2; }
.w-note { fill: #F3F5F7; stroke: #D7DDE3; }
.w-sym { fill: #C8102E; font-size: 11px; font-weight: 800; text-anchor: middle; }
.w-p { fill: #DCE8FF; stroke: #8CBBFF; }
.w-b { fill: #FFE1E6; stroke: #FF8EA2; }
.w-pbt { fill: #131628; font-size: 9px; font-weight: 800; text-anchor: middle; }
.w-curve { fill: none; stroke: #E21661; stroke-width: 2.5; stroke-linecap: round; }
.w-plane { fill: #C8102E; }
.w-head { fill: #898EB0; }
.w-live { fill: #E5304F; }
.w-felt.is-dark { fill: #272A3D; }
.w-felt.is-dark .w-head, .w-felt.is-dark ~ .w-head { fill: #666D97; }

/* ---------- the wheel of fortune: the floating button on every page, and the dialog with the wheel ---------- */
.wf-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 5px 18px 5px 5px; border: 0; border-radius: 999px; background: var(--night); color: var(--ink); font: 800 .98rem/1 var(--font-d); box-shadow: 0 0 0 2px var(--gold), 0 12px 28px -10px rgb(0 0 0 / .6); cursor: pointer; animation: wf-nudge 7s ease-in-out 5s infinite; }
.wf-fab:hover { background: var(--card-2); }
.wf-fab-w { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--slices); box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 2px var(--night); animation: wf-idle 14s linear infinite; }
.wf-fab-w::after { content: ''; position: absolute; inset: 36%; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--night); }
.wf-fab:hover .wf-fab-w { animation-duration: 2s; }
@keyframes wf-idle { to { rotate: 360deg; } }
@keyframes wf-nudge { 0%, 86%, 100% { translate: 0 0; } 89% { translate: 0 -7px; } 92% { translate: 0 0; } 95% { translate: 0 -3px; } }

.mdl.wf { width: min(460px, calc(100% - 32px)); overflow-x: hidden; background: radial-gradient(130% 75% at 50% 0%, #212A61 0%, var(--card) 62%); }
.wf-in { position: relative; justify-items: center; text-align: center; }
.wf-x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.wf-head { display: grid; gap: 6px; max-width: 34ch; }
.wf-k, .wf-won span { color: var(--gold); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wf-head h2 { font-size: 1.75rem; font-stretch: 84%; }
.wf-sub { color: var(--soft); font-size: .94rem; }
.wf-wheel { position: relative; width: min(330px, 76vw); aspect-ratio: 1; margin-top: 14px; transition: width .4s; }
.wf.is-won .wf-wheel { width: min(230px, 58vw); }
.wf-frame, .wf-spin, .wf-gloss { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-frame { filter: drop-shadow(0 14px 24px rgb(0 0 0 / .5)); }
.wf-spin { overflow: hidden; border-radius: 50%; }
.wf-disc { display: block; width: 100%; height: 100%; will-change: transform; }
.wf-gloss { pointer-events: none; }
.wf-bulb circle { fill: #FFD2E2; }
.wf-bulb .wf-glow { fill: rgb(255 100 157 / .4); }
.wf-bulb { animation: wf-blink 1.2s steps(1) infinite; }
.wf-bulb.is-alt { animation-delay: .6s; }
.wf.is-spinning .wf-bulb { animation-duration: .32s; }
.wf.is-spinning .wf-bulb.is-alt { animation-delay: .16s; }
@keyframes wf-blink { 50% { opacity: .3; } }
.wf-seg { transition: filter .35s; }
.wf.is-won .wf-seg:not(.is-win) { filter: saturate(.25) brightness(.55); }
.wf-seg.is-win { stroke: #FFD2E2; stroke-width: 2.4; }
.wf-label { transition: opacity .35s; }
.wf.is-won .wf-label:not(.is-win) { opacity: .45; }
.wf-sep { stroke: rgb(255 255 255 / .75); stroke-width: .9; }
.wf-peg circle:first-child { fill: url(#wf-gold); stroke: #6E062C; stroke-width: .5; }
.wf-peg .wf-shine { fill: #fff; opacity: .85; }
.wf-v { font: 800 17px/1 var(--font-d); font-stretch: 80%; text-anchor: middle; paint-order: stroke; stroke: rgb(0 0 0 / .32); stroke-width: 1.6px; stroke-linejoin: round; }
.wf-c { font: 800 5.3px/1 var(--font-t); letter-spacing: .07em; text-anchor: middle; opacity: .92; }
.wf-label.is-dark .wf-v { stroke: rgb(255 255 255 / .45); }
.wf-dot { fill: var(--gold); }
.wf-pin { position: absolute; top: -8%; left: 50%; z-index: 3; width: 13%; translate: -50% 0; transform-origin: 50% 28%; filter: drop-shadow(0 3px 2px rgb(0 0 0 / .5)); }
.wf-pin.is-tick { animation: wf-tick .16s ease-out; }
@keyframes wf-tick { 40% { rotate: -16deg; } }
.wf-hub { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 21%; aspect-ratio: 1; padding: 0; translate: -50% -50%; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #FFD0E1 0 6%, #FF7FB0 20%, #E84E89 46%, #C80F53 76%, #8C0939); color: var(--on-gold); font: 800 clamp(.74rem, 2.4vw, .95rem)/1 var(--font-d); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgb(255 255 255 / .5); box-shadow: inset 0 -3px 4px rgb(0 0 0 / .25), inset 0 2px 3px rgb(255 255 255 / .6), 0 6px 14px -4px rgb(0 0 0 / .7); cursor: pointer; transition: scale .15s; }
.wf-hub:not(:disabled):hover { scale: 1.05; }
.wf-hub:disabled { cursor: default; }
.wf-cta, .wf-res, .wf-done { width: 100%; }
.wf-res, .wf-done { display: grid; gap: 14px; }
.wf-won { display: grid; gap: 2px; }
.wf-won b { color: var(--ink); font: 800 1.9rem/1.1 var(--font-d); font-stretch: 82%; }
.wf-form { display: grid; gap: 10px; text-align: left; }
.wf-l { color: var(--soft); font-size: .9rem; font-weight: 700; }
.wf-row { display: flex; gap: 8px; }
.wf-row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card-2); color: var(--ink); font: inherit; font-size: 1rem; }
.wf-row input::placeholder { color: var(--faint); }
.wf-row input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.wf-ok { display: flex; align-items: flex-start; gap: 9px; color: var(--faint); font-size: .8rem; line-height: 1.4; cursor: pointer; }
.wf-ok input { appearance: none; display: grid; place-content: center; width: 17px; height: 17px; margin: 0; flex: none; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--card-2); cursor: pointer; transition: background-color .15s, border-color .15s; }
.wf-ok input::after { content: ''; width: 11px; height: 11px; background: var(--on-gold); -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; scale: 0; transition: scale .15s; }
.wf-ok input:checked { border-color: var(--gold); background: var(--gold); }
.wf-ok input:checked::after { scale: 1; }
.wf-ok input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wf-err { color: var(--bad); font-size: .86rem; font-weight: 700; }
.wf-fine { color: var(--faint); font-size: .76rem; }
.wf-fine a { color: var(--soft); }

/* ---------- responsible gambling ---------- */
.rg-h { display: flex; align-items: center; gap: 8px; margin: 24px 0 10px; color: var(--ink); font-size: 1.06rem; }
.rg-h .i { width: 20px; height: 20px; color: var(--soft); }
.banks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.banks li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.banks img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); }
.banks b { display: block; color: var(--ink); }
.banks span { color: var(--soft); font-size: .92rem; }
.help { display: grid; gap: 12px; margin: 16px 0; padding: 0; list-style: none; }
.help li { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 14px 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.help li.is-main { border-color: rgb(232 78 137 / .6); background: var(--badge-bg); }
.help-t { display: grid; gap: 6px; }
.help h4 { margin: 0; color: var(--ink); font-size: 1.02rem; }
.help p { margin: 0; color: var(--soft); font-size: .93rem; }
.help .help-a { display: grid; gap: 8px; }
.help-tel, .help-web { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.help-tel { background: var(--gold); color: var(--on-gold); font-weight: 800; }
.help-web { border: 1px solid var(--line-2); color: var(--ink); font-weight: 700; }
.help-tel .i, .help-web .i { width: 16px; height: 16px; }
.rg-call p { margin: 0; color: var(--soft); font-size: .94rem; }
.rg-more { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.rg-more li { display: flex; justify-content: space-between; gap: 12px; color: var(--soft); font-size: .9rem; }
.rg-more a { color: var(--ink); font-weight: 800; white-space: nowrap; }
.ftr-rg a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.w-stop { fill: #C8462A; }
.w-h.is-c { text-anchor: middle; }
.w-l.is-r { text-anchor: end; }
.w-l.is-xs { font-size: 6.4px; }
.w-t.is-light { fill: #fff; }
.w-track { fill: #E0E2EB; }
.w-fill { fill: #E21661; }
.w-fill.is-done { fill: #0D1A69; }
.w-slot { fill: #131628; }
.w-reel { fill: #FFF6F9; }
.w-reel.is-win { fill: #FFCFE1; stroke: #E84E89; stroke-width: 1.5; }
.w-ctl { fill: rgb(255 255 255 / .1); }
.w-spin { fill: #E84E89; }
.w-token { fill: #FFCFE1; stroke: #E21661; stroke-width: 1.2; }
.w-perf { stroke: #E21661; stroke-width: 1.2; stroke-dasharray: 3 3; }
.w-cal { fill: #fff; stroke: #C5C7D6; }
.w-qr { fill: #131628; }
.w-ico { fill: none; stroke: #464A68; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w-ico.is-hi { stroke: #131628; stroke-width: 1.8; }
.w-hl { fill: #E84E89; }

/* ---------- cookie consent ---------- */
.cc { position: fixed; left: 20px; bottom: 20px; z-index: 95; display: grid; gap: 12px; width: min(440px, calc(100% - 40px)); padding: 18px 20px 20px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--card); color: var(--text); box-shadow: var(--pop-shadow); }
.cc h2 { margin: 0; color: var(--ink); font: 800 1.08rem/1.2 var(--font-d); }
.cc p { margin: 0; color: var(--soft); font-size: .9rem; line-height: 1.5; }
.cc a, .cc-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cc-act { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-act .btn { flex: 1 1 auto; }
.cc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cc-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 16px; background: var(--card-2); }
.cc-list label { cursor: pointer; }
.cc-list h3 { margin: 0 0 3px; color: var(--ink); font-size: .98rem; }
.cc-list p { margin: 0; color: var(--soft); font-size: .88rem; line-height: 1.45; }
.cc-on { flex: none; color: var(--good); font-size: .84rem; font-weight: 800; white-space: nowrap; }
.cc-sw { appearance: none; position: relative; flex: none; width: 46px; height: 26px; margin: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background-color .2s; }
.cc-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.cc-sw:checked { background: var(--gold); }
.cc-sw:checked::after { transform: translateX(20px); }
.cc-sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-more { margin: 0; font-size: .88rem; }
.gmd-ask p { max-width: 42ch; }
.gmd-ask-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gmd-ask .gmd-ask-s { color: var(--faint); font-size: .8rem; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .hdr-search { width: 190px; }
  .nav-b { padding-left: 11px; }
  .rk-in { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "n id offer" "n facts act" "fine fine fine"; }
  .rk-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rk-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-in { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
  .rk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-in { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .studio, .studio:nth-child(3n+1):nth-last-child(2), .studio:nth-child(3n+2):last-child { grid-column: span 3; }
  .studio:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .flow, .flow.is-4 { grid-template-columns: minmax(0, 1fr); }
  .studios { grid-template-columns: minmax(0, 1fr); }
  .studio, .studio:nth-child(3n+1):nth-last-child(2), .studio:nth-child(3n+2):last-child, .studio:nth-child(odd):last-child { grid-column: auto; }
}
@media (max-width: 1060px) {
  :root { --hdr: 64px; }
  .nav, .hdr-search { display: none; }
  .icon-btn { display: grid; }
  .hdr-btn-menu { margin-left: auto; }
  .brand-logo { height: 36px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pick { max-width: 560px; }
  .awards, .dir-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .ov { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .score-card { position: static; }
  .alts, .facts-4, .bcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (min-width: 1061px) {
  .mnav { display: none !important; }
}
@media (max-width: 760px) {
  .hero { padding: 32px 0 44px; }
  .sec { padding: 52px 0; }
  .pick { padding: 18px; border-radius: 24px; }
  .pick-act { grid-template-columns: minmax(0, 1fr); }
  .tgls { flex-wrap: nowrap; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  .tgls::-webkit-scrollbar { display: none; }
  .rk-in { --px: 16px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n id" "offer offer" "facts facts" "act act" "fine fine"; gap: 14px; padding-top: 16px; }
  .rk-n { font-size: 1.6rem; }
  .rk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awards, .dir-tiles, .calc { grid-template-columns: minmax(0, 1fr); }
  .toc ol { grid-template-columns: minmax(0, 1fr); }
  .terms > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ftr-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ftr-brand { padding-bottom: 24px; }
  .ftr-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 22px 0; border-top: 1px solid var(--line); }
  .ftr-nav h2, .ftr-nav .ftr-more { grid-column: 1 / -1; }
  .ftr-nav .ftr-h2 { margin-top: 12px; }
  .dir-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cat-title { gap: 14px; }
  .cat-title .chip-i.lg { width: 56px; height: 56px; }
  .cat-title .gcard.lg { width: 48px; height: 64px; }
  .cat-title .tk.lg { --n: 6px; width: 70px; height: 50px; }
  .cat-title .tk.lg .i { width: 26px; height: 26px; }
  .stats { gap: 8px; }
  .stats > div { padding: 12px; border-radius: 14px; }
  .stats dd { font-size: 1.45rem; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
  .stats dd.is-long { font-size: 1.1rem; }
  .stats dt { font-size: .8rem; overflow-wrap: anywhere; hyphens: auto; }
  .crit, .pc, .ways { grid-template-columns: minmax(0, 1fr); }
  .rv-in { padding: 18px; border-radius: 22px; }
  .rv-id h3 { font-size: 1.45rem; }
  .rv-act { grid-template-columns: minmax(0, 1fr); }
  .author { flex-direction: column; }
  .alts, .pay-grid, .specs, .bcs { grid-template-columns: minmax(0, 1fr); }
  .tbl-ways th, .tbl-ways td { padding-inline: 10px; }
  .tbl-ways td { width: 76px; }
  .facts-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-top { gap: 14px; }
  .rv-top .logo { width: 68px !important; height: 68px !important; border-radius: 18px; }
  .score-big b { font-size: 2rem; }
  .gms-rail { gap: 12px; }
  .gms-rail > li { flex-basis: 136px; }
  .gmd-b { grid-template-columns: minmax(0, 1fr); }
  .gmd-s { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { padding: 12px; }
  .fig.is-wide .fig-in { overflow-x: auto; }
  .fig.is-wide .il { min-width: 560px; }
  .wf-fab { right: 14px; bottom: 14px; padding: 4px; }
  .wf-fab-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wf-fab-w { width: 46px; height: 46px; }
  .wf-row { flex-direction: column; }
  .wf-row input { flex: none; height: 52px; }
  .wc { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .cmp2-hd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cmp2-t th[scope="row"] { width: 30%; }
  .cmp2-t th, .cmp2-t td { padding-left: 8px; padding-right: 8px; font-size: .88rem; }
  .help li { grid-template-columns: 1fr; }
  .wf-row .btn { min-height: 52px; }
}
/* phones get dialogs as sheets from the bottom, full width */
@media (max-width: 680px) {
  .cc { left: 0; bottom: 0; width: 100%; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
  html.cc-open .wf-fab { display: none; }
  .mdl, .mdl.gmd, .mdl.wf { width: 100%; max-height: 94vh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 24px 24px 0 0; }
  .mdl-in { padding: 18px 16px 20px; }
  .gmd-play { aspect-ratio: 4 / 3; }
  .gmd-act { width: 100%; }
  .gmd-act .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* game shows, jackpots, Megaways */
.fig .il-mwheel, .fig .il-jpot, .fig .il-mways { max-width: 720px; margin-inline: auto; }
.il-mw-rim { fill: #2A0C17; stroke: #E21661; stroke-width: 4; }
.il-mw-t { font-size: 13px; font-weight: 800; text-anchor: middle; }
.il-mw-t.is-b { font-size: 12px; }
.il-mw-peg { fill: #F7B0CA; }
.il-mw-hub { fill: #E21661; }
.il-mw-hub2 { fill: #131628; }
.il-mw-hubt { fill: #E84E89; font-size: 18px; font-weight: 800; letter-spacing: .12em; text-anchor: middle; }
.il-mw-ptr { fill: #fff; stroke: #131628; stroke-width: 2; stroke-linejoin: round; }
.il-mw-lk { font-size: 16px; font-weight: 800; text-anchor: middle; }
.il-vname.is-s { font-size: 15px; }
.il-vsub.is-c { text-anchor: middle; }
.il-jp-flow { fill: none; stroke: #E21661; stroke-width: 2.5; stroke-dasharray: 5 5; }
.il-jp-arrow { fill: none; stroke: #E21661; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.il-jp.is-sub { stroke-width: 1.5; }
.il-jp-v.is-s { font-size: 16px; }
.il-jp-v.is-xl { font-size: 40px; }
.il-jp-sub { fill: #CDD1E5; font-size: 12px; font-weight: 700; text-anchor: middle; }
.il-mws { fill: #131628; font-weight: 800; text-anchor: middle; }
.il-mwc { fill: #E84E89; }
.il-mwc-t { fill: #131628; font-size: 15px; font-weight: 800; text-anchor: middle; }
.il-mwf { fill: var(--ink); font-size: 20px; font-weight: 800; text-anchor: middle; }

/* glossary: four numbers worth knowing, then every term A to Z */
.gl-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.gl-f { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px 20px 18px; overflow: hidden; border-radius: 20px; background: var(--night); color: #fff; text-decoration: none; box-shadow: var(--shade); transition: transform .15s, box-shadow .15s; }
.gl-f::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.gl-f:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(9 12 30 / .22); }
.gl-f-k { color: #B1B5D0; font-size: .9rem; font-weight: 700; }
.gl-f-v { display: flex; align-items: flex-end; min-height: 58px; margin: 8px 0 10px; color: var(--c); font: 800 2.7rem/1 var(--font-d); font-stretch: 80%; }
.gl-f-vol { width: 168px; height: 60px; }
.gl-f-vol text { fill: #B1B5D0; font-size: 11px; font-weight: 700; text-anchor: middle; }
.gl-f-vol rect { fill: var(--c); opacity: .45; }
.gl-f-vol rect.is-hi { opacity: 1; }
.gl-f-d { color: #DBDDE9; font-size: .93rem; line-height: 1.45; }
.gl-f-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--gold-hi); font-size: .9rem; font-weight: 700; }
.gl-f-go .i { width: 16px; height: 16px; transition: translate .15s; }
.gl-f:hover .gl-f-go .i { translate: 3px 0; }
.gl-tools { display: grid; gap: 14px; margin-bottom: 16px; }
.gl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.gl-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 360px; }
.gl-search .i { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.gl-search input { width: 100%; height: 46px; padding: 0 16px 0 42px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; }
.gl-search input:focus { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 1px; }
.gl-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-n { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: rgb(19 22 40 / .07); font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tgl[aria-pressed="true"] .gl-n { background: rgb(19 22 40 / .14); }
.no-js .gl-tools { display: none; }
.gl-az { position: sticky; top: calc(var(--hdr) + 8px); z-index: 4; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .94); box-shadow: var(--shade); backdrop-filter: blur(10px); }
.gl-az ol { display: flex; justify-content: space-between; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gl-az li { flex: 1 1 0; min-width: 0; max-width: 44px; }
.gl-az a { display: grid; place-items: center; width: 100%; height: 36px; border-radius: 10px; background: var(--card-2); color: var(--ink); font: 750 1rem/1 var(--font-d); text-decoration: none; transition: background-color .15s, color .15s; }
.gl-az a:hover { background: var(--card-3); }
.gl-az a[aria-current="true"] { background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 0 var(--gold-edge); }
.gl-az a.is-off { opacity: .3; pointer-events: none; }
.gl-count { margin: 0; color: var(--soft); font-size: .92rem; font-weight: 700; }
.gl-group { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hdr) + 76px); }
.gl-group:last-child { border-bottom: 0; }
.gl-group[hidden], .gl-card[hidden], .gl-empty[hidden] { display: none; }
.gl-letter { position: sticky; top: calc(var(--hdr) + 84px); align-self: start; display: grid; place-items: center; width: 64px; height: 64px; margin: 0; border-radius: 18px; background: var(--night); color: var(--gold-hi); font: 800 2.1rem/1 var(--font-d); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .25); }
.gl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.gl-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shade); scroll-margin-top: calc(var(--hdr) + 84px); transition: border-color .2s, box-shadow .2s; }
.gl-card:target { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(232 78 137 / .3); }
.gl-card dt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.gl-name { color: var(--ink); font: 750 1.16rem var(--font-d); font-stretch: 90%; }
.gl-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, #fff); color: var(--ink); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.gl-tag .i { width: 13px; height: 13px; color: color-mix(in srgb, var(--c) 50%, #131628); }
.gl-def { margin: 0; color: var(--soft); font-size: .95rem; line-height: 1.5; }
.gl-go { margin: auto 0 0; padding-top: 2px; }
.gl-go a { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-size: .9rem; font-weight: 700; text-decoration: none; }
.gl-go a:hover { text-decoration: underline; }
.gl-go .i { width: 15px; height: 15px; }
.gl-empty { margin-top: 18px; }
@media (max-width: 1080px) { .gl-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .gl-group { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .gl-letter { position: static; width: 46px; height: 46px; border-radius: 14px; font-size: 1.5rem; }
  .gl-cards { grid-template-columns: minmax(0, 1fr); }
  .gl-search { flex-basis: 100%; max-width: none; }
  .gl-topics, .gl-az ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gl-topics { margin-inline: -2px; padding: 2px 2px 4px; }
  .gl-topics .tgl { flex: none; }
  .gl-az li { flex: none; }
  .gl-az a { width: 36px; }
  .gl-f-v { min-height: 46px; font-size: 2.2rem; }
}
@media (max-width: 480px) { .gl-feat { grid-template-columns: minmax(0, 1fr); } }

/* ---------- a review's own take (the casinos reviewed by hand) ---------- */
.take { margin: 22px 0; padding: 20px 22px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shade); }
.take h3 { margin: 0 0 10px; font-size: 1.15rem; }
.take p { margin: 0 0 12px; color: var(--soft); }
.take-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.take-fit div { padding: 10px 12px; border-radius: 12px; background: var(--tint); }
.take-fit dt { display: flex; align-items: center; gap: 6px; font: 700 .82rem/1.2 var(--font-d); }
.take-fit dt .i { width: 16px; height: 16px; }
.take-fit .is-yes dt .i { color: var(--good); }
.take-fit .is-no dt .i { color: var(--bad); }
.take-fit dd { margin: 4px 0 0; font-size: .92rem; }
.take .byline { margin-top: 12px; }
@media (max-width: 640px) { .take-fit { grid-template-columns: 1fr; } }

.game-pick { padding: 14px; }
.game-cover { width: 100%; height: auto; border-radius: 14px; display: block; }

/* ---------- compact lists for the reading column of pages with a table of contents ---------- */
.people { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 12px; }
.people li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.people .avatar { flex: none; }
.people-n { font: 700 1.05rem/1.3 var(--font-d); color: var(--ink); text-decoration: none; }
.people-n:hover { text-decoration: underline; }
.people-r { display: block; margin: 2px 0 6px; color: var(--faint); font-size: .88rem; }
.people p { margin: 0; color: var(--soft); }
.mini { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.mini a:hover { border-color: var(--line-2); }
.mini-t { flex: 1; min-width: 0; }
.mini .tag { flex: none; }
.mini b { display: block; font: 700 .98rem/1.25 var(--font-d); }
.mini small { display: block; overflow: hidden; color: var(--faint); font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) { .mini { grid-template-columns: 1fr; } }

.take-by { margin: 12px 0 0 !important; font-size: .86rem; color: var(--faint) !important; }
.take-by a { color: var(--link); }

.ov .sub-h { margin-top: 20px; }

.ov p + .pc, .ov .ov-lead + .pc { margin-top: 22px; }

/* ---------- a pokie review: small cover in the head, the demo console under it ----------
   The console is a bar with the game and its numbers, the stage, and a strip with the casino to play it for real. On wide
   screens it is only as wide as lets the whole of it fit the window under the header, so the game is never cut off. */
.game-thumb { width: 112px; height: 112px; flex: none; border-radius: 22px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2), 0 14px 28px -14px rgb(0 0 0 / .7); }
.demo-sec { padding-top: 44px; }
.demo-box { margin-inline: auto; }
@media (min-width: 1000px) { .demo-box { max-width: max(760px, min(100%, calc((100svh - 250px) * 16 / 9))); } }
.demo-head { margin-bottom: 18px; }
.demo-head h2 { margin: 0 0 6px; }
.demo-head p { margin: 0; max-width: 62ch; color: var(--soft); }
.demo-frame { position: relative; overflow: hidden; border-radius: 24px; background: var(--night-deep); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 7px rgb(232 78 137 / .06), 0 40px 90px -40px rgb(0 0 0 / .9); }

.demo-top { display: flex; align-items: center; gap: 10px 16px; min-height: 64px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card); }
.demo-id { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; }
.demo-id img { width: 40px; height: 40px; flex: none; border-radius: 12px; object-fit: cover; }
.demo-id b { display: block; overflow: hidden; color: var(--ink); font: 750 1.05rem/1.15 var(--font-d); white-space: nowrap; text-overflow: ellipsis; }
.demo-id small { display: block; color: var(--faint); font-size: .82rem; font-weight: 700; }
.demo-chips { display: flex; gap: 6px; margin: 0; }
.demo-chips div { padding: 5px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.demo-chips dt { color: var(--faint); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.demo-chips dd { margin: 0; color: var(--ink); font: 800 .95rem/1.2 var(--font-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-ctl { display: flex; gap: 6px; }
.demo-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.demo-btn:hover { border-color: var(--gold); background: var(--card-3); color: var(--ink); }
.demo-btn .i { width: 18px; height: 18px; }

.demo-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--night-deep); isolation: isolate; container-type: inline-size; }
.demo-bg { position: absolute; inset: -80px; z-index: -2; width: calc(100% + 160px); max-width: none; height: calc(100% + 160px); object-fit: cover; filter: blur(48px) saturate(1.35) brightness(.5); }
.demo-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(42% 58% at 50% 44%, rgb(232 78 137 / .2), transparent 72%), radial-gradient(130% 80% at 50% 115%, rgb(8 11 29 / .92), transparent 62%); }
.demo-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.demo-art { width: clamp(96px, 16cqi, 184px); height: auto; aspect-ratio: 1; border-radius: 28px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 26px 60px -18px rgb(0 0 0 / .85), 0 0 90px -4px rgb(232 78 137 / .45); }
.demo-go { min-height: 56px; margin-top: 4px; padding: 0 30px; font-size: 1.1rem; }
.demo-go .i { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.demo-note { max-width: 46ch; margin: 0; color: #D7DAF0; font-size: .9rem; font-weight: 600; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.demo-ask { background: rgb(8 11 29 / .6); }
.demo-ask p:first-child { color: #fff; font-size: 1.02rem; }
.demo-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; transition: opacity .3s; }
.demo-spin { display: none; }
.demo-frame.is-loading iframe { opacity: 0; }
.demo-frame.is-loading .demo-spin { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid rgb(255 255 255 / .16); border-top-color: var(--gold); border-radius: 50%; animation: demo-spin .8s linear infinite; }
@keyframes demo-spin { to { rotate: 360deg; } }

.demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--line); background: var(--card); }
.demo-foot p { display: flex; align-items: flex-start; gap: 8px; max-width: 46ch; margin: 0; color: var(--faint); font-size: .86rem; }
.demo-foot p .i { width: 18px; height: 18px; flex: none; color: var(--gold); }
.demo-real { display: flex; align-items: center; gap: 12px; min-width: 0; }
.demo-real-t { min-width: 0; }
.demo-real-t b { display: block; color: var(--ink); font: 750 .98rem/1.2 var(--font-d); }
.demo-real-t small { display: block; color: var(--soft); font-size: .84rem; }

/* full screen where the browser has it; elsewhere (iPhone, small screens) the console takes the whole window */
.demo-frame:fullscreen { display: flex; flex-direction: column; border-radius: 0; box-shadow: none; }
.demo-frame.is-full { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; height: 100dvh; border-radius: 0; box-shadow: none; }
:is(.demo-frame:fullscreen, .demo-frame.is-full) .demo-stage { flex: 1; aspect-ratio: auto; }
:is(.demo-frame:fullscreen, .demo-frame.is-full) :is(.demo-foot, .demo-chips) { display: none; }
html.demo-lock { overflow: hidden; }
html.demo-on .wf-fab { display: none; }

@media (max-width: 999px) { .demo-frame.is-on .demo-chips { display: none; } }
@media (max-width: 760px) {
  .demo-top { min-height: 58px; padding: 8px 10px; }
  .demo-chips { display: none; }
  .demo-stage { aspect-ratio: 4 / 3; }
  .demo-art { width: clamp(84px, 26cqi, 128px); border-radius: 22px; }
  .demo-go { min-height: 52px; padding: 0 24px; font-size: 1.04rem; }
  .demo-foot { padding: 12px; }
  .demo-real { width: 100%; }
  .demo-real .btn { margin-left: auto; }
}
@media (max-width: 640px) { .game-thumb { width: 80px; height: 80px; border-radius: 18px; } }