/*! iGaming Pro — compiled stylesheet. Edit the _partials, then run scripts-build.sh */

/* ===== _tokens.css ===== */
/* ==========================================================================
   iGaming Pro — Design tokens
   Every value here is overridable from Appearance → Customize → iGaming Design.
   ========================================================================== */
:root{
  /* Brand surfaces */
  --c-navy-900:#0A1E3D;   /* header, footer, secondary button */
  --c-navy-800:#12325C;   /* hero, dark sections, disclaimer */
  --c-ink:#0A1A2F;        /* body text */
  --c-bg:#FFFFFF;         /* page background */
  --c-panel:#EEF3F8;      /* casino tile surface */
  --c-panel-dark:#DCE5EF; /* offer strip — a step darker than the tile */
  --c-panel-alt:#FFFFFF;
  --c-border:#C9D6E4;     /* tile dividers */
  --c-border-soft:#E2E9F1;

  /* Accents */
  --c-brand:#12795A;      /* links, brand accents */
  --c-brand-dark:#0E6349;
  --c-cta:#12795A;        /* primary CTA */
  --c-cta-hover:#0E6349;  /* darker on hover: white sits on it, so lighter would lose contrast */
  --c-cta-shadow:#083C2E;
  /* Emerald reaches only 3.09:1 on navy, so links inside dark sections take a
     lifted variant instead of the CTA colour. */
  --c-brand-on-dark:#4ECFA0;
  --c-gold:#E7B400;       /* rating stars */
  --c-muted:#51637A;
  /* Contrast-safe variants for use on --c-panel-dark, where --c-muted (3.4:1)
     and --c-brand (2.2:1) both fall below the 4.5:1 threshold. */
  --c-muted-dark:#41536A;
  --c-brand-deep:#0B5340;
  /* Positive/confirmation marks stay green regardless of the brand accent:
     rust-orange sits only ~83 away from --c-danger, so pros and cons would
     read as the same colour family at bullet size. */
  --c-positive:#177A4E;
  --c-danger:#E0454B;
  --c-on-dark:#FFFFFF;
  /* White on the emerald CTA: 5.37:1, and 7.24:1 on the darker hover. The
     accent is deep rather than bright, so the polarity is the reverse of the
     old vivid palette. */
  --c-on-cta:#FFFFFF;

  /* Typography */
  --font-body:"Nunito Sans",Helvetica,Roboto,Arial,sans-serif;
  --font-heading:var(--font-body);
  --fs-xs:0.75rem; --fs-sm:0.8125rem; --fs-base:0.875rem; --fs-md:0.9375rem;
  --fs-lg:1rem; --fs-xl:1.125rem; --fs-2xl:1.25rem; --fs-3xl:1.4375rem; --fs-4xl:2rem;
  --lh-body:1.5; --lh-heading:1.2;
  --fw-normal:400; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* Shape */
  --r-sm:0.1875rem; --r-md:0.25rem; --r-lg:0.375rem; --r-pill:62.4375rem;
  --shadow-cta:0 0.25rem 0.25rem 0 var(--c-cta-shadow);
  --shadow-card:0 0.125rem 0.625rem rgba(8,7,36,.08);
  --shadow-pop:0 0.5rem 1.875rem rgba(8,7,36,.18);

  /* Layout */
  --container:75rem;
  --container-wide:80rem;
  --gutter:0.9375rem;
  --header-h:4.1875rem;
  --tile-brand-w:17.5rem;

  /* The check the pros lists are masked with. It was being read from a token
     nothing declared, so every mask resolved to nothing and each mark rendered
     as the solid disc the colour was meant to fill. */
  --icon-check:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.22s;
}

/* Foundation-compatible breakpoints, exposed for JS */
:root{
  --bp-medium:640px; --bp-large:1024px; --bp-xlarge:1200px; --bp-xxlarge:1440px;
}

/* --------------------------------------------------------------------------
   Interface scale

   Every length in the compiled stylesheet is a rem (scripts/px-to-rem.py does
   the conversion at build time), so this one value sets the size of the whole
   interface the way the browser's own zoom control does.

   The curve holds the design at its drawn size up to 1440px, the width it was
   laid out for, then grows with the viewport to 1.25x at 2560px.

   It was 1.5x, which fixed the postage-stamp problem and created the opposite
   one: a 22.5px body and 400px cards, an interface that had been zoomed
   rather than scaled. 1.25x is the size a 27" display actually wants, and the
   rest of the answer is the content cap below: past a point a wide screen
   wants more per row, not more of each thing.

   Written as an intercept plus a vw slope so the growth is continuous; the
   endpoints are 16px @ 1440 and 20px @ 2560.
   -------------------------------------------------------------------------- */
:root{
  --root-fs:clamp(16px, 10.857px + 0.3571vw, 20px);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== _grid.css ===== */
/* ==========================================================================
   Grid — a light Foundation-6 compatible implementation
   grid-container / grid-x / cell / small-N medium-N large-N / auto / shrink
   ========================================================================== */
.grid-container{max-width:calc(var(--container) + (var(--gutter) * 2));margin:0 auto;padding:0 var(--gutter);width:100%}
.grid-container.larger{max-width:var(--container-wide)}
.grid-container.full{max-width:none;padding:0}
.grid-container.fluid{max-width:none}

.grid-x{display:flex;flex-flow:row wrap}
.grid-y{display:flex;flex-flow:column nowrap}
.grid-x.grid-margin-x{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
.grid-margin-x > .cell{margin-left:var(--gutter);margin-right:var(--gutter);width:calc(100% - var(--gutter) * 2)}
.grid-padding-x > .cell{padding-left:var(--gutter);padding-right:var(--gutter)}
.grid-margin-y > .cell{margin-top:var(--gutter);margin-bottom:var(--gutter)}

.cell{flex:0 0 auto;min-width:0;min-height:0;width:100%}
.cell.auto{flex:1 1 0;width:auto}
.cell.shrink{flex:0 0 auto;width:auto}

/* Alignment */
.align-middle{align-items:center}
.align-top{align-items:flex-start}
.align-bottom{align-items:flex-end}
.align-stretch{align-items:stretch}
.align-center{justify-content:center}
.align-left{justify-content:flex-start}
.align-right{justify-content:flex-end}
.align-justify{justify-content:space-between}
.align-spaced{justify-content:space-around}
.align-self-middle{align-self:center}

.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}

.small-1{flex:0 0 auto;width:8.333333%}
.grid-margin-x > .cell.small-1{width:calc(8.333333% - var(--gutter) * 2)}
.small-2{flex:0 0 auto;width:16.666667%}
.grid-margin-x > .cell.small-2{width:calc(16.666667% - var(--gutter) * 2)}
.small-3{flex:0 0 auto;width:25.000000%}
.grid-margin-x > .cell.small-3{width:calc(25.000000% - var(--gutter) * 2)}
.small-4{flex:0 0 auto;width:33.333333%}
.grid-margin-x > .cell.small-4{width:calc(33.333333% - var(--gutter) * 2)}
.small-5{flex:0 0 auto;width:41.666667%}
.grid-margin-x > .cell.small-5{width:calc(41.666667% - var(--gutter) * 2)}
.small-6{flex:0 0 auto;width:50.000000%}
.grid-margin-x > .cell.small-6{width:calc(50.000000% - var(--gutter) * 2)}
.small-7{flex:0 0 auto;width:58.333333%}
.grid-margin-x > .cell.small-7{width:calc(58.333333% - var(--gutter) * 2)}
.small-8{flex:0 0 auto;width:66.666667%}
.grid-margin-x > .cell.small-8{width:calc(66.666667% - var(--gutter) * 2)}
.small-9{flex:0 0 auto;width:75.000000%}
.grid-margin-x > .cell.small-9{width:calc(75.000000% - var(--gutter) * 2)}
.small-10{flex:0 0 auto;width:83.333333%}
.grid-margin-x > .cell.small-10{width:calc(83.333333% - var(--gutter) * 2)}
.small-11{flex:0 0 auto;width:91.666667%}
.grid-margin-x > .cell.small-11{width:calc(91.666667% - var(--gutter) * 2)}
.small-12{flex:0 0 auto;width:100.000000%}
.grid-margin-x > .cell.small-12{width:calc(100.000000% - var(--gutter) * 2)}
.small-auto{flex:1 1 0;width:auto}
.grid-margin-x > .cell.small-auto{flex:1 1 0;width:auto}
.small-shrink{flex:0 0 auto;width:auto}
.grid-margin-x > .cell.small-shrink{flex:0 0 auto;width:auto}
.small-order-1{order:1}.small-order-2{order:2}.small-order-3{order:3}.small-order-4{order:4}

@media screen and (min-width:640px){
.medium-1{flex:0 0 auto;width:8.333333%}
.grid-margin-x > .cell.medium-1{width:calc(8.333333% - var(--gutter) * 2)}
.medium-2{flex:0 0 auto;width:16.666667%}
.grid-margin-x > .cell.medium-2{width:calc(16.666667% - var(--gutter) * 2)}
.medium-3{flex:0 0 auto;width:25.000000%}
.grid-margin-x > .cell.medium-3{width:calc(25.000000% - var(--gutter) * 2)}
.medium-4{flex:0 0 auto;width:33.333333%}
.grid-margin-x > .cell.medium-4{width:calc(33.333333% - var(--gutter) * 2)}
.medium-5{flex:0 0 auto;width:41.666667%}
.grid-margin-x > .cell.medium-5{width:calc(41.666667% - var(--gutter) * 2)}
.medium-6{flex:0 0 auto;width:50.000000%}
.grid-margin-x > .cell.medium-6{width:calc(50.000000% - var(--gutter) * 2)}
.medium-7{flex:0 0 auto;width:58.333333%}
.grid-margin-x > .cell.medium-7{width:calc(58.333333% - var(--gutter) * 2)}
.medium-8{flex:0 0 auto;width:66.666667%}
.grid-margin-x > .cell.medium-8{width:calc(66.666667% - var(--gutter) * 2)}
.medium-9{flex:0 0 auto;width:75.000000%}
.grid-margin-x > .cell.medium-9{width:calc(75.000000% - var(--gutter) * 2)}
.medium-10{flex:0 0 auto;width:83.333333%}
.grid-margin-x > .cell.medium-10{width:calc(83.333333% - var(--gutter) * 2)}
.medium-11{flex:0 0 auto;width:91.666667%}
.grid-margin-x > .cell.medium-11{width:calc(91.666667% - var(--gutter) * 2)}
.medium-12{flex:0 0 auto;width:100.000000%}
.grid-margin-x > .cell.medium-12{width:calc(100.000000% - var(--gutter) * 2)}
.medium-auto{flex:1 1 0;width:auto}
.grid-margin-x > .cell.medium-auto{flex:1 1 0;width:auto}
.medium-shrink{flex:0 0 auto;width:auto}
.grid-margin-x > .cell.medium-shrink{flex:0 0 auto;width:auto}
.medium-order-1{order:1}.medium-order-2{order:2}.medium-order-3{order:3}.medium-order-4{order:4}
}

@media screen and (min-width:1024px){
.large-1{flex:0 0 auto;width:8.333333%}
.grid-margin-x > .cell.large-1{width:calc(8.333333% - var(--gutter) * 2)}
.large-2{flex:0 0 auto;width:16.666667%}
.grid-margin-x > .cell.large-2{width:calc(16.666667% - var(--gutter) * 2)}
.large-3{flex:0 0 auto;width:25.000000%}
.grid-margin-x > .cell.large-3{width:calc(25.000000% - var(--gutter) * 2)}
.large-4{flex:0 0 auto;width:33.333333%}
.grid-margin-x > .cell.large-4{width:calc(33.333333% - var(--gutter) * 2)}
.large-5{flex:0 0 auto;width:41.666667%}
.grid-margin-x > .cell.large-5{width:calc(41.666667% - var(--gutter) * 2)}
.large-6{flex:0 0 auto;width:50.000000%}
.grid-margin-x > .cell.large-6{width:calc(50.000000% - var(--gutter) * 2)}
.large-7{flex:0 0 auto;width:58.333333%}
.grid-margin-x > .cell.large-7{width:calc(58.333333% - var(--gutter) * 2)}
.large-8{flex:0 0 auto;width:66.666667%}
.grid-margin-x > .cell.large-8{width:calc(66.666667% - var(--gutter) * 2)}
.large-9{flex:0 0 auto;width:75.000000%}
.grid-margin-x > .cell.large-9{width:calc(75.000000% - var(--gutter) * 2)}
.large-10{flex:0 0 auto;width:83.333333%}
.grid-margin-x > .cell.large-10{width:calc(83.333333% - var(--gutter) * 2)}
.large-11{flex:0 0 auto;width:91.666667%}
.grid-margin-x > .cell.large-11{width:calc(91.666667% - var(--gutter) * 2)}
.large-12{flex:0 0 auto;width:100.000000%}
.grid-margin-x > .cell.large-12{width:calc(100.000000% - var(--gutter) * 2)}
.large-auto{flex:1 1 0;width:auto}
.grid-margin-x > .cell.large-auto{flex:1 1 0;width:auto}
.large-shrink{flex:0 0 auto;width:auto}
.grid-margin-x > .cell.large-shrink{flex:0 0 auto;width:auto}
.large-order-1{order:1}.large-order-2{order:2}.large-order-3{order:3}.large-order-4{order:4}
}

@media screen and (min-width:1200px){
.xlarge-1{flex:0 0 auto;width:8.333333%}
.grid-margin-x > .cell.xlarge-1{width:calc(8.333333% - var(--gutter) * 2)}
.xlarge-2{flex:0 0 auto;width:16.666667%}
.grid-margin-x > .cell.xlarge-2{width:calc(16.666667% - var(--gutter) * 2)}
.xlarge-3{flex:0 0 auto;width:25.000000%}
.grid-margin-x > .cell.xlarge-3{width:calc(25.000000% - var(--gutter) * 2)}
.xlarge-4{flex:0 0 auto;width:33.333333%}
.grid-margin-x > .cell.xlarge-4{width:calc(33.333333% - var(--gutter) * 2)}
.xlarge-5{flex:0 0 auto;width:41.666667%}
.grid-margin-x > .cell.xlarge-5{width:calc(41.666667% - var(--gutter) * 2)}
.xlarge-6{flex:0 0 auto;width:50.000000%}
.grid-margin-x > .cell.xlarge-6{width:calc(50.000000% - var(--gutter) * 2)}
.xlarge-7{flex:0 0 auto;width:58.333333%}
.grid-margin-x > .cell.xlarge-7{width:calc(58.333333% - var(--gutter) * 2)}
.xlarge-8{flex:0 0 auto;width:66.666667%}
.grid-margin-x > .cell.xlarge-8{width:calc(66.666667% - var(--gutter) * 2)}
.xlarge-9{flex:0 0 auto;width:75.000000%}
.grid-margin-x > .cell.xlarge-9{width:calc(75.000000% - var(--gutter) * 2)}
.xlarge-10{flex:0 0 auto;width:83.333333%}
.grid-margin-x > .cell.xlarge-10{width:calc(83.333333% - var(--gutter) * 2)}
.xlarge-11{flex:0 0 auto;width:91.666667%}
.grid-margin-x > .cell.xlarge-11{width:calc(91.666667% - var(--gutter) * 2)}
.xlarge-12{flex:0 0 auto;width:100.000000%}
.grid-margin-x > .cell.xlarge-12{width:calc(100.000000% - var(--gutter) * 2)}
.xlarge-auto{flex:1 1 0;width:auto}
.grid-margin-x > .cell.xlarge-auto{flex:1 1 0;width:auto}
.xlarge-shrink{flex:0 0 auto;width:auto}
.grid-margin-x > .cell.xlarge-shrink{flex:0 0 auto;width:auto}
.xlarge-order-1{order:1}.xlarge-order-2{order:2}.xlarge-order-3{order:3}.xlarge-order-4{order:4}
}

@media screen and (min-width:1440px){
.xxlarge-1{flex:0 0 auto;width:8.333333%}
.grid-margin-x > .cell.xxlarge-1{width:calc(8.333333% - var(--gutter) * 2)}
.xxlarge-2{flex:0 0 auto;width:16.666667%}
.grid-margin-x > .cell.xxlarge-2{width:calc(16.666667% - var(--gutter) * 2)}
.xxlarge-3{flex:0 0 auto;width:25.000000%}
.grid-margin-x > .cell.xxlarge-3{width:calc(25.000000% - var(--gutter) * 2)}
.xxlarge-4{flex:0 0 auto;width:33.333333%}
.grid-margin-x > .cell.xxlarge-4{width:calc(33.333333% - var(--gutter) * 2)}
.xxlarge-5{flex:0 0 auto;width:41.666667%}
.grid-margin-x > .cell.xxlarge-5{width:calc(41.666667% - var(--gutter) * 2)}
.xxlarge-6{flex:0 0 auto;width:50.000000%}
.grid-margin-x > .cell.xxlarge-6{width:calc(50.000000% - var(--gutter) * 2)}
.xxlarge-7{flex:0 0 auto;width:58.333333%}
.grid-margin-x > .cell.xxlarge-7{width:calc(58.333333% - var(--gutter) * 2)}
.xxlarge-8{flex:0 0 auto;width:66.666667%}
.grid-margin-x > .cell.xxlarge-8{width:calc(66.666667% - var(--gutter) * 2)}
.xxlarge-9{flex:0 0 auto;width:75.000000%}
.grid-margin-x > .cell.xxlarge-9{width:calc(75.000000% - var(--gutter) * 2)}
.xxlarge-10{flex:0 0 auto;width:83.333333%}
.grid-margin-x > .cell.xxlarge-10{width:calc(83.333333% - var(--gutter) * 2)}
.xxlarge-11{flex:0 0 auto;width:91.666667%}
.grid-margin-x > .cell.xxlarge-11{width:calc(91.666667% - var(--gutter) * 2)}
.xxlarge-12{flex:0 0 auto;width:100.000000%}
.grid-margin-x > .cell.xxlarge-12{width:calc(100.000000% - var(--gutter) * 2)}
.xxlarge-auto{flex:1 1 0;width:auto}
.grid-margin-x > .cell.xxlarge-auto{flex:1 1 0;width:auto}
.xxlarge-shrink{flex:0 0 auto;width:auto}
.grid-margin-x > .cell.xxlarge-shrink{flex:0 0 auto;width:auto}
.xxlarge-order-1{order:1}.xxlarge-order-2{order:2}.xxlarge-order-3{order:3}.xxlarge-order-4{order:4}
}
/* Visibility helpers */
.show-for-medium,.show-for-large,.show-for-xlarge{display:none!important}
@media screen and (min-width:640px){
  .hide-for-medium{display:none!important}
  .show-for-medium{display:block!important}
  .show-for-medium.grid-x,.show-for-medium.flex{display:flex!important}
}
@media screen and (max-width:639px){ .show-for-medium-only{display:none!important} }
@media screen and (min-width:1024px){
  .hide-for-large{display:none!important}
  .show-for-large{display:block!important}
  .show-for-large.grid-x,.show-for-large.flex{display:flex!important}
}
@media screen and (min-width:1200px){
  .hide-for-xlarge{display:none!important}
  .show-for-xlarge{display:block!important}
  .show-for-xlarge.grid-x,.show-for-xlarge.flex{display:flex!important}
}
.show-for-sr{position:absolute!important;width:0.0625rem;height:0.0625rem;padding:0;margin:-0.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Spacing utilities */
.margin-0{margin:0}.margin-bottom-0{margin-bottom:0}
.margin-bottom-1{margin-bottom:var(--gutter)}
.margin-bottom-2{margin-bottom:calc(var(--gutter) * 2)}
.margin-top-1{margin-top:var(--gutter)}
.margin-top-2{margin-top:calc(var(--gutter) * 2)}
.margin-right-1{margin-right:var(--gutter)}
.padding-bottom-0{padding-bottom:0}
.padding-bottom-1{padding-bottom:var(--gutter)}

/* ===== _base.css ===== */
/* ==========================================================================
   Base — reset, typography, forms
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.25rem);
  background:var(--c-bg);
  height:100%;
  /* The interface scale. See --root-fs in _tokens.css. */
  font-size:var(--root-fs);
}
/* iOS Safari's rubber-band bounce only exists on WINDOW scroll. So we stop
   the window from scrolling at all — body sits at viewport height and
   `.dz-viewport` inside it becomes the real scroll container. The bounce
   never happens because the page cannot scroll past the wrapper, and the
   wrapper's `overscroll-behavior:none` (with a JS fallback below on iOS<16)
   also stops any inner elastic on newer versions. sticky/fixed continue to
   work because `.dz-viewport` is a proper containing scroll context. */
body{
  margin:0;background:var(--c-bg);color:var(--c-ink);
  font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  height:100%;overflow:hidden;overscroll-behavior:none;
  position:fixed;inset:0;
}
.dz-viewport{
  height:100%;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
  position:relative;
  background:var(--c-bg);
}
main{background:var(--c-bg);display:block}
img,picture,video,svg{max-width:100%;height:auto;display:block}
/* Components set explicit display values (.button is inline-flex), which
   outrank the UA [hidden] rule. Restore it so JS can hide elements. */
[hidden]{display:none!important}
a{color:var(--vt-link);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--vt-link);text-decoration:underline}
button{font:inherit;color:inherit;cursor:pointer}
ul,ol{margin:0 0 var(--gutter);padding-left:1.15rem}
p{margin:0 0 var(--gutter)}
hr{border:0;border-top:0.0625rem solid var(--c-border-soft);margin:calc(var(--gutter) * 2) 0}
:focus-visible{outline:0.1875rem solid var(--c-brand);outline-offset:0.125rem;border-radius:var(--r-sm)}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:var(--fw-black);
  line-height:var(--lh-heading);margin:0 0 var(--gutter);color:inherit;
}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-4xl)}
h3{font-size:var(--fs-3xl);font-weight:var(--fw-bold)}
h4{font-size:var(--fs-2xl);font-weight:var(--fw-bold)}
h5{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
h6{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
@media screen and (max-width:639px){
  h1{font-size:1.5625rem} h2{font-size:1.4375rem} h3{font-size:1.25rem}
}
strong,b{font-weight:var(--fw-bold)}
small,.text-small{font-size:var(--fs-sm)}
.text-thin{font-weight:var(--fw-normal)}
.text-muted{color:var(--c-muted)}
.color-white{color:var(--c-on-dark)}

/* Sections */
.section{padding:3.125rem 0}
/* One universal gap between a hero and the first section that follows it, so
   every page in the site opens with the same rhythm — archives, singles, hub
   pages, provider pages. Mobile gets a smaller value than desktop; the ratio
   is what stays consistent, not an absolute pixel count. */
.hero + .section{padding-top:2.25rem}
@media screen and (max-width:1023px){
  .section{padding:1.75rem 0}
  .hero + .section{padding-top:1.25rem}
}
.section--bg-panel{background:var(--c-panel)}
.section--bg-dark{background:var(--c-navy-800);color:var(--c-on-dark)}
.section--bg-dark a:not(.button){color:var(--vt-link)}
.section--overflow-hidden{overflow:hidden}
.section--title{font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:var(--lh-heading);margin:0 0 var(--gutter)}
.section--intro{max-width:50rem;margin:0 auto var(--gutter);font-size:var(--fs-md)}
.section--more{padding-top:calc(var(--gutter) * 2);text-align:center}

/* Forms */
input[type=text],input[type=search],input[type=email],input[type=number],input[type=password],input[type=tel],input[type=url],select,textarea{
  width:100%;padding:0.6875rem 0.875rem;font:inherit;font-size:var(--fs-base);
  color:var(--c-ink);background:var(--c-panel-alt);
  border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
/* iOS Safari zooms into any input whose computed font-size is under 16px on
   focus. --fs-base is 14px, so on mobile we bump every focusable form control
   to the 16px floor and let the visual size stay smaller via padding. */
@media screen and (max-width:1023px){
  input[type=text],input[type=search],input[type=email],input[type=number],input[type=password],input[type=tel],input[type=url],select,textarea{
    font-size:1rem;
  }
}
input:focus,select:focus,textarea:focus{border-color:var(--vt-accent);box-shadow:0 0 0 0.1875rem rgba(45,159,128,.15);outline:none}
label{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);margin-bottom:0.375rem}

/* Buttons */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.75rem 1.5rem;border:0.0625rem solid transparent;border-radius:var(--r-md);
  background:var(--c-cta);color:var(--c-on-cta);
  font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1;
  text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-cta);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.button:hover{background:var(--c-cta-hover);color:var(--c-on-cta);text-decoration:none;transform:translateY(-0.0625rem);box-shadow:0 0.375rem 0.625rem 0 var(--c-cta-shadow)}
.button:active{transform:translateY(0.0625rem);box-shadow:0 0.125rem 0.125rem 0 var(--c-cta-shadow)}
.button.large{font-size:var(--fs-xl);padding:1.25rem}
.button.small{font-size:var(--fs-xs);padding:0.625rem 2.1875rem}
.button.expanded{display:flex;width:100%}
.button.secondary{background:var(--c-navy-900);color:var(--c-on-dark);box-shadow:none}
.button.secondary:hover{background:var(--c-navy-800)}
.button.hollow{background:transparent;border-color:currentColor;color:var(--vt-link);box-shadow:none}
.button.hollow:hover{background:var(--c-cta);border-color:var(--vt-accent-edge);color:var(--c-on-cta)}
/* On navy the brand colour reaches only 2.4:1, so the secondary button takes
   white instead. Scoped one class deeper than the base rule so it wins. */
.hero .button.hollow,
.footer .button.hollow,
.section--bg-dark .button.hollow{color:var(--c-on-dark);border-color:rgba(255,255,255,.45)}
.hero .button.hollow:hover,
.footer .button.hollow:hover,
.section--bg-dark .button.hollow:hover{background:var(--c-cta);border-color:var(--vt-accent-edge);
  color:var(--c-on-cta)}
.button[disabled],.button.is-disabled{opacity:.5;pointer-events:none}

/* Screen-reader / skip link */
.skip-link{position:absolute;left:-624.9375rem;top:0;z-index:999;padding:0.75rem 1.25rem;background:var(--c-cta);color:var(--c-on-cta);font-weight:var(--fw-bold)}
.skip-link:focus{left:0}

/* ===== _header.css ===== */
/* ==========================================================================
   Header + navigation
   ========================================================================== */
.header{background:var(--c-navy-900);color:var(--c-on-dark);position:relative;z-index:60}
.header.is-sticky{position:sticky;top:0}
.header--inner{min-height:var(--header-h)}
.header--logo{display:inline-flex;align-items:center;gap:0.5rem;color:var(--c-on-dark);font-size:var(--fs-2xl);font-weight:var(--fw-black);line-height:1;text-decoration:none}
.header--logo:hover{color:var(--c-cta);text-decoration:none}
.header--logo img{max-height:2.125rem;width:auto}

.header--nav{display:flex;flex-flow:row wrap;align-items:center;justify-content:center;list-style:none;margin:0;padding:0}
.header--nav li{position:relative}
.header--nav > li > a{
  display:flex;align-items:center;gap:0.4375rem;
  padding:1.3125rem 1rem;color:var(--c-on-dark);font-size:var(--fs-md);text-decoration:none;
  transition:color var(--dur) var(--ease)
}
.header--nav > li > a:hover,.header--nav > li.is-open > a{color:var(--c-cta);text-decoration:none}
.header--nav > li.menu-item-has-children > a::after{
  content:"";width:0.5rem;height:0.5rem;border-right:0.125rem solid currentColor;border-bottom:0.125rem solid currentColor;
  transform:rotate(45deg) translateY(-0.125rem);transition:transform var(--dur) var(--ease)
}
.header--nav > li.is-open.menu-item-has-children > a::after{transform:rotate(-135deg) translateY(0)}
.header--nav-icon{width:1.125rem;height:1.125rem;flex:0 0 1.125rem;color:var(--c-cta)}

/* Dropdowns */
.header--nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:14.375rem;margin:0;padding:0.5rem 0;list-style:none;
  background:var(--c-navy-800);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--shadow-pop);
  opacity:0;visibility:hidden;transform:translateY(0.375rem);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.header--nav li:hover > .sub-menu,.header--nav li.is-open > .sub-menu,.header--nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.header--nav .sub-menu a{display:block;padding:0.625rem 1.125rem;color:var(--c-on-dark);font-size:var(--fs-base);text-decoration:none}
.header--nav .sub-menu a:hover{background:rgba(255,255,255,.07);color:var(--c-cta);text-decoration:none}

/* Search */
.header--search{position:relative;display:flex;align-items:center}
.header--search input[type=search]{
  width:7.8125rem;padding:0.5625rem 2.125rem 0.5625rem 0.875rem;font-size:var(--fs-sm);
  background:rgba(255,255,255,.08);border-color:transparent;color:var(--c-on-dark);border-radius:var(--r-md);
  transition:width var(--dur) var(--ease),background var(--dur) var(--ease)
}
.header--search input[type=search]::placeholder{color:rgba(254,254,254,.6)}
.header--search input[type=search]:focus{width:13.75rem;background:rgba(255,255,255,.15);box-shadow:none}
.header--search button{position:absolute;right:0.375rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;background:none;border:0;color:var(--c-on-dark);padding:0}
.header--search svg{width:0.9375rem;height:0.9375rem}

/* Mobile toggle + off-canvas */
.header--menu-toggle{display:grid;place-items:center;width:2.375rem;height:2.375rem;background:none;border:0;color:var(--c-on-dark);padding:0}
.header--menu-toggle svg{width:1.375rem;height:1.375rem}
.mobile-menu{
  position:fixed;inset:0;z-index:80;background:var(--c-navy-900);color:var(--c-on-dark);
  overflow-y:auto;padding:0 0 1.875rem;
  transform:translateY(-100%);transition:transform .3s var(--ease);
}
.mobile-menu.is-open{transform:translateY(0)}
.mobile-menu--head{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);padding:0 var(--gutter)}
.mobile-menu--close{display:grid;place-items:center;width:2.375rem;height:2.375rem;background:none;border:0;color:var(--c-on-dark);padding:0}
.mobile-menu--close svg{width:1.25rem;height:1.25rem}
.mobile-menu ul{list-style:none;margin:0;padding:0}
/* Top level stays single-column, no lines and no gaps between rows — rows
   run continuous under one solid navy field. */
.mobile-menu > ul{display:block;padding:0.375rem 0 1.5rem}
.mobile-menu > ul > li{min-width:0}
.mobile-menu a{display:block;padding:0.875rem var(--gutter);color:var(--c-on-dark);font-size:var(--fs-lg);font-weight:var(--fw-semi);text-decoration:none;line-height:1.3}
.mobile-menu a:hover{color:var(--c-cta);text-decoration:none}

/* Section headings (items that carry a sub-menu) act as toggles: JS injects a
   .mobile-menu--section-toggle chevron button in the row and hides the child
   list until the row opens. Collapsed by default so Casinos + Games don't dump
   twenty children in the viewer's face. */
.mobile-menu--section{display:flex;align-items:stretch;justify-content:space-between;gap:0}
.mobile-menu--section > a{flex:1 1 auto}
.mobile-menu--section-toggle{
  flex:0 0 auto;display:grid;place-items:center;width:3.25rem;
  background:transparent;border:0;
  color:var(--c-on-dark);cursor:pointer;padding:0;
}
.mobile-menu--section-toggle svg{width:0.875rem;height:0.875rem;transition:transform var(--dur) var(--ease)}
.mobile-menu--section-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.mobile-menu > ul > li > .sub-menu{display:none;padding:0.25rem 0 0.75rem 0.75rem}
.mobile-menu > ul > li.is-open > .sub-menu{display:grid;grid-template-columns:1fr 1fr;column-gap:0}
.mobile-menu .sub-menu a{padding:0.625rem var(--gutter);font-size:var(--fs-sm);opacity:.85;font-weight:400}
.menu-overlay{position:fixed;inset:0;z-index:70;background:rgba(8,7,36,.5);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.menu-overlay.is-visible{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
/* Freeze the internal scroll container while the mobile menu is open — body
   is already fixed, so overflow:hidden on body alone would be a no-op. */
body.menu-open .dz-viewport{overflow:hidden}


/* ===== Language switcher + geo banner (Velatonmies) ===== */
.lang-switch {
	display: inline-flex;
	gap: 0.125rem;
	padding: 0.125rem;
	border: 0.0625rem solid rgba(254, 254, 254, .18);
	border-radius: var(--radius-button, 0.375rem);
	margin-right: 0.625rem;
}
.lang-switch--item {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	/* Written for a navy header bar. The switcher now sits in the sidebar,
	   which is white in the light theme, so near-white ink reached 1.06:1. */
	color: var(--vt-text-dim);
	border-radius: calc(var(--radius-button, 0.375rem) - 0.125rem);
	text-decoration: none;
}
.lang-switch--item:hover { color: var(--vt-text); }
.lang-switch--item.is-active {
	background: var(--vt-accent);
	color: var(--vt-accent-ink);
}
.vt-geo-banner {
	background: var(--c-panel, #EEF3F8);
	color: var(--c-ink, #0A1A2F);
	border-bottom: 0.0625rem solid rgba(10, 30, 61, .12);
	font-size: 0.875rem;
}
.vt-geo-banner--inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem 1.25rem;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}
.vt-geo-banner--text { margin: 0; flex: 1 1 20rem; }
.vt-geo-banner--actions { display: flex; align-items: center; gap: 0.75rem; }
.vt-geo-banner--actions .button { margin: 0; }
.vt-geo-banner--dismiss {
	background: none;
	border: 0;
	padding: 0.375rem 0;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

/* ===== _hero.css ===== */
/* ==========================================================================
   Hero + toplist controls
   ========================================================================== */
/* One hero height everywhere. Templates set their own padding, so heights used
   to follow whatever copy each page happened to carry — a one-line archive
   header came out half the size of the roster. A shared minimum plus vertical
   centring makes them match, and gives the habitat plate room to read. */
.hero{background:var(--c-navy-800);color:var(--c-on-dark);padding:1.25rem 0 2.8125rem;
  display:flex;flex-direction:column;justify-content:center;min-height:var(--hero-min,0)}
@media screen and (min-width:640px){ .hero{--hero-min:18.75rem} }
@media screen and (min-width:1024px){ .hero{--hero-min:26.875rem} }
@media screen and (min-width:1400px){ .hero{--hero-min:30rem} }
.hero a:not(.button){color:var(--vt-on-plate-link)}
.hero--last-updated{display:flex;align-items:center;gap:0.5rem;font-size:var(--fs-sm);color:rgba(254,254,254,.65);margin-bottom:0.875rem}
.hero--last-updated svg{width:0.875rem;height:0.875rem}
.hero h1{color:var(--c-on-dark);margin-bottom:0.9375rem}
/* The intro now carries two or three sentences, so it gets a reading measure
   and a little more air rather than running the width of a 480px-tall hero. */
.hero--intro{font-size:var(--fs-lg);line-height:1.65;max-width:62ch;
  color:rgba(254,254,254,.88)}
@media screen and (min-width:1024px){ .hero--intro{font-size:var(--fs-xl);max-width:58ch} }
.hero--readmore{display:inline-block;margin-top:0.375rem;font-weight:var(--fw-bold);border-bottom:0.0625rem solid currentColor}
.hero--readmore:hover{text-decoration:none}
.hero--collapsible[hidden]{display:none}

/* Featured casino panel */
.hero--featured{background:var(--c-navy-900);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:1.25rem}
.hero--featured-logo{display:grid;place-items:center;border-radius:var(--r-md);padding:1.125rem;min-height:8.125rem}
.hero--featured-logo img{max-width:11.25rem;max-height:5.25rem;width:auto;height:auto;object-fit:contain}
.hero--featured-label{font-size:var(--fs-sm);color:rgba(254,254,254,.7);margin-bottom:0.25rem}
.hero--featured-bonus{font-size:var(--fs-3xl);font-weight:var(--fw-black);line-height:var(--lh-heading);margin-bottom:0.875rem}
.hero--featured-meta{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap}

/* Sort + filter bar */
.toplist-controls{margin-bottom:1.25rem;gap:0.625rem 0}
.toplist-sort{display:flex;flex-flow:row wrap;gap:0;border-bottom:0.0625rem solid rgba(255,255,255,.15)}
.toplist-sort--button{
  position:relative;padding:1.0625rem 0.5rem;margin-bottom:-0.0625rem;background:none;border:0;
  color:var(--c-on-dark);font-size:var(--fs-base);font-weight:var(--fw-normal);
  transition:color var(--dur) var(--ease)
}
.toplist-sort--button::after{content:"";position:absolute;left:0.5rem;right:0.5rem;bottom:0;height:0.125rem;background:var(--c-cta);transform:scaleX(0);transform-origin:center;transition:transform var(--dur) var(--ease)}
.toplist-sort--button:hover{color:var(--c-cta)}
.toplist-sort--button[aria-pressed=true]{color:var(--c-cta);font-weight:var(--fw-bold)}
.toplist-sort--button[aria-pressed=true]::after{transform:scaleX(1)}

/* One horizontally scrollable row rather than wrapping onto several lines. */
.toplist-filters{
  display:flex;flex-flow:row nowrap;gap:1.125rem;align-items:center;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
  padding-bottom:0.375rem;margin-bottom:-0.375rem;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 0.75rem,#000 calc(100% - 1.375rem),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 0.75rem,#000 calc(100% - 1.375rem),transparent 100%);
  padding-left:0.75rem;margin-left:-0.75rem;
}
.toplist-filters::-webkit-scrollbar{height:0.3125rem}
.toplist-filters::-webkit-scrollbar-track{background:transparent}
.toplist-filters::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:var(--r-pill)}
.toplist-filters::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}
.toplist-filters--item{display:inline-flex;align-items:center;gap:0.5625rem;font-size:var(--fs-base);cursor:pointer;user-select:none;flex:0 0 auto;white-space:nowrap}
.toplist-filters--item input{position:absolute;opacity:0;width:0;height:0}
.toplist-filters--box{
  display:grid;place-items:center;width:1.375rem;height:1.375rem;flex:0 0 1.375rem;
  border:0.0625rem solid rgba(255,255,255,.45);border-radius:var(--r-sm);background:transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)
}
.toplist-filters--box svg{width:0.8125rem;height:0.8125rem;opacity:0;transform:scale(.6);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);color:var(--c-navy-900)}
.toplist-filters--item input:checked + .toplist-filters--box{background:var(--c-cta);border-color:var(--c-cta)}
.toplist-filters--item input:checked + .toplist-filters--box svg{opacity:1;transform:scale(1)}
.toplist-filters--item input:focus-visible + .toplist-filters--box{outline:0.1875rem solid var(--c-cta);outline-offset:0.125rem}

/* Mobile dropdown variants */
.toplist-controls--mobile .button-dropdown{position:relative;padding-right:2.75rem;justify-content:flex-start;width:100%}
.toplist-controls--mobile .button-dropdown::after{content:"";position:absolute;right:1rem;width:0.5rem;height:0.5rem;border-right:0.125rem solid currentColor;border-bottom:0.125rem solid currentColor;transform:rotate(45deg) translateY(-0.125rem)}
.toplist-controls--mobile [data-panel]{display:none;padding:0.875rem;margin-top:0.375rem;background:var(--c-navy-900);border-radius:var(--r-md)}
.toplist-controls--mobile [data-panel].is-open{display:block}
.toplist-controls--mobile .toplist-sort{flex-direction:column;border:0}
.toplist-controls--mobile .toplist-sort--button{text-align:left;padding:0.625rem 0.25rem}
.toplist-controls--mobile .toplist-filters{flex-flow:column nowrap;align-items:flex-start;gap:0.75rem;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-left:0;margin-left:0}

/* Empty state */
.toplist--empty{display:none;padding:2.5rem 1.25rem;text-align:center;background:rgba(255,255,255,.06);border-radius:var(--r-lg)}
.toplist--empty.is-visible{display:block}

/* ===== _hero-front.css ===== */
/* ==========================================================================
   Front-page hero — copy rail, social, mascot, promo slider
   ========================================================================== */
.hero--front{padding:2.125rem 0 2.75rem;position:relative;overflow:hidden}
.hero--front > .grid-container{position:relative;z-index:1}
.hero--front-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media screen and (min-width:1024px){
  /* Fractional rather than a fixed 420px column, so the promo grows with the
     viewport instead of leaving a widening gap beside the copy. */
  .hero--front-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:2.125rem}
}
@media screen and (min-width:1280px){ .hero--front-grid{gap:2.5rem} }
.hero--front-copy h1{margin-bottom:0.875rem;max-width:22ch}
.hero--front-copy .hero--intro{max-width:52ch}

/* Social rail */
.hero--social{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;margin-top:1.375rem}
.hero--social-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.09em;color:rgba(255,255,255,.6)}
.hero--social-links{display:flex;flex-wrap:wrap;gap:0.5rem}
.hero--social-link{display:grid;place-items:center;width:2.375rem;height:2.375rem;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--c-on-dark);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.hero--social-link:hover{transform:translateY(-0.125rem);color:#fff;text-decoration:none}
.hero--social-link.is-kick:hover{background:#53FC18;color:#0A1A2F}
.hero--social-link.is-twitch:hover{background:#9146FF}
.hero--social-link.is-discord:hover{background:#5865F2}
.hero--social-link.is-youtube:hover{background:#FF0000}
.hero--social-link.is-twitter:hover{background:#0A1A2F}
.hero--social-link.is-instagram:hover{background:#E1306C}
.hero--social-link.is-tiktok:hover{background:#000}
.hero--social-link.is-facebook:hover{background:#1877F2}

/* Promo slider — no card chrome. The mascot is embedded in the slide, and
   every slide occupies the same grid cell so the block is exactly as tall as
   its tallest slide and never jumps between them. */
.hero--front-promo{position:relative;padding:1.625rem 1.875rem}
/* A soft gradient pool lifts the slide text off the hero without drawing a
   card. It fades to nothing at the outer edges so there is no visible box. */
.hero--front-promo::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:var(--r-lg);
  background:
    radial-gradient(115% 105% at 68% 42%, rgba(23,60,107,.95) 0%, rgba(12,36,68,.78) 46%, rgba(10,30,61,0) 100%),
    linear-gradient(200deg, rgba(78,207,160,.12) 0%, rgba(78,207,160,0) 55%);
  pointer-events:none;
}
.hero--front-promo > *{position:relative;z-index:1}
@media screen and (max-width:1023px){ .hero--front-promo{padding:1.5rem 1.25rem} }

.hero-slider{position:relative}
.hero-slider--track{display:grid}
.hero-slider--slide{
  grid-area:1/1;                      /* every slide shares one cell */
  display:grid;grid-template-columns:1fr;gap:0.875rem;align-content:center;justify-items:center;
  text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--ease);
}
@media screen and (min-width:520px){
  .hero-slider--slide{grid-template-columns:minmax(7.5rem,0.62fr) 1fr;gap:1.5rem;text-align:left;justify-items:start;align-items:center}
}
.hero-slider--slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
@media (prefers-reduced-motion:reduce){ .hero-slider--slide{transition:none} }

.hero-slider--figure{display:flex;align-items:center;justify-content:center;width:100%}
.hero-slider--figure img{
  max-height:12.5rem;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 0.875rem 1.875rem rgba(0,0,0,.45));
}
@media screen and (max-width:1023px){ .hero-slider--figure img{max-height:10.625rem} }
@media screen and (max-width:519px){ .hero-slider--figure img{max-height:7.5rem} }

.hero-slider--body{display:flex;flex-direction:column;gap:0.5625rem;align-items:inherit;min-width:0;width:100%}
.hero-slider--eyebrow{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.09em;color:var(--accent)
}
.hero-slider--headline{
  margin:0;font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:1.12;
  color:var(--c-on-dark);text-wrap:balance
}
.hero-slider--subline{margin:0;font-size:var(--fs-lg);line-height:1.5;color:rgba(255,255,255,.82);max-width:38ch}
.hero-slider--cta{align-self:inherit;margin-top:0.25rem}
@media screen and (max-width:519px){ .hero-slider--cta{align-self:center} }

/* Controls sit under the slides, not inside a bar. */
.hero-slider--controls{display:flex;align-items:center;justify-content:center;gap:0.875rem;margin-top:1.375rem}
.hero-slider--nav{
  display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 2rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:var(--c-on-dark);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)
}
.hero-slider--nav:hover{background:var(--c-cta);color:var(--c-on-cta)}
.hero-slider--dots{display:flex;gap:0.375rem;flex:0 1 auto}
.hero-slider--dot{
  width:0.5rem;height:0.5rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);
  transition:background var(--dur) var(--ease),width var(--dur) var(--ease)
}
.hero-slider--dot.is-active{background:var(--c-cta);width:1.5rem;border-radius:var(--r-pill)}

/* When JS relocates .hero--front-promo out of the hero on mobile, it lives in
   its own section between the hero and the toplist. Solid brand-blue block
   with the same rounded corners as a casino card — no gradient, no glow —
   and a compact gap above the toplist heading so the two sections read as
   close neighbours rather than separated pages. */
/* Same 20px hero-to-first-item gap the rest of the site uses on mobile — the
   frontpage stack (hero → slider card → toplist) now shares a single rhythm
   instead of the slider sitting closer to the hero than any other page. */
.hero-slider-section{padding:1.25rem var(--gutter) 0.75rem;margin:0}
.hero-slider-section > .grid-container{padding:0}
.hero-slider-section .hero--front-promo{padding:1.375rem 1.25rem;background:var(--c-navy-800);border-radius:var(--r-lg)}
/* Kill the inherited radial-gradient glow — the solid card is the whole look. */
.hero-slider-section .hero--front-promo::before{background:none;inset:0}
/* And match the 20px gap between the slider block and the toplist below it
   so the frontpage keeps one universal rhythm end-to-end. */
.hero-slider-section + .toplist-section{padding-top:1.25rem}
.hero-slider-section + .toplist-section .toplist-section--head{margin-bottom:0.75rem}

/* Toplist section beneath the hero */
.toplist-section--head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0.875rem;margin-bottom:1.25rem}
.toplist-section--sub{margin:0;font-size:var(--fs-base);color:var(--c-muted)}
/* The controls were authored for the dark hero; restate them for the light
   section the toplist now lives in. */
.toplist-section .toplist-sort{border-bottom-color:var(--c-border)}
.toplist-section .toplist-sort--button{color:var(--c-muted)}
.toplist-section .toplist-sort--button:hover{color:var(--vt-link)}
.toplist-section .toplist-sort--button[aria-pressed=true]{color:var(--vt-link)}
.toplist-section .toplist-sort--button::after{background:var(--c-cta)}
.toplist-section .toplist-filters--item{color:var(--c-ink)}
.toplist-section .toplist-filters--box{border-color:var(--c-muted)}
.toplist-section .toplist-filters--box svg{color:#fff}
.toplist-section .toplist-filters{scrollbar-color:var(--c-border) transparent}
.toplist-section .toplist-filters::-webkit-scrollbar-thumb{background:var(--c-border)}
.toplist-section .toplist--empty{background:var(--c-panel)}
.toplist-section .toplist-controls--mobile [data-panel]{background:var(--c-panel)}
/* Mobile-only "All casinos" — full-width, sits under the Show-more button so
   the fallback for a reader who has scanned the shortlist is one obvious tap. */
.toplist-section--all-wrap{margin-top:0.75rem;padding:0 var(--gutter)}
.toplist-section--all-mobile{width:100%;justify-content:center}
/* Show-more button matches the fallback CTA width on mobile — one column of
   full-width taps rather than a centred pill next to a hero-wide list. */
@media screen and (max-width:1023px){
  .toplist-section .section--more{padding:0 var(--gutter)}
  .toplist-section .section--more [data-toplist-more]{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------------------
 * Front hero intro: clamped on mobile
 *
 * Two lines instead of four lifts the slider clear of the fold without taking
 * the method claim off the page. Always in the DOM — mobile-first indexing
 * reads this markup, so hiding must never mean removing.
 * ------------------------------------------------------------------------ */
.hero--intro-more{display:none}

@media screen and (max-width:47.99em){
  .hero--intro.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .hero--intro-more{display:inline-block;margin:0.125rem 0 0.625rem;padding:0;border:0;
    background:none;color:var(--vt-on-plate-link);font:inherit;font-size:var(--fs-sm);
    font-weight:var(--fw-bold);text-decoration:underline;cursor:pointer}
  .hero--intro-more[aria-expanded="true"]{margin-top:0.375rem}
}

/* ===== _casino-tile.css ===== */
/* ==========================================================================
   Casino tile — horizontal toplist row
   ========================================================================== */
.toplist{position:relative}
.casino-tile--wrap{margin-bottom:1.25rem;transition:opacity var(--dur) var(--ease)}
.casino-tile--wrap[hidden]{display:none}
.casino-tile--wrap.is-filtered-out{display:none}

.casino-tile{background:var(--c-panel);border-radius:var(--r-lg);color:var(--c-ink);overflow:hidden;position:relative}
.casino-tile.is-highlighted{outline:0.125rem solid var(--c-cta);outline-offset:0}

/* Offer strip — the welcome offer runs as a band across the top of the card */
.casino-tile--offer{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.375rem 0.75rem;
  padding:0.625rem 1rem;
  background:var(--c-panel-dark);color:var(--c-ink);
  border-radius:0;
}
@media screen and (min-width:1024px){
  /* Only the card's top-right corner belongs to the strip; the logo panel
     owns the top-left. */
  .casino-tile--offer{border-radius:0 var(--r-lg) 0 0}
}
.casino-tile--rank{
  display:grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 0.4375rem;
  background:var(--c-navy-900);color:var(--c-on-dark);
  font-size:var(--fs-sm);font-weight:var(--fw-black);
  border-radius:var(--r-sm);flex:0 0 auto;
}
.casino-tile--offer-label{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-muted-dark);flex:0 0 auto;
}
.casino-tile--offer-value{font-size:var(--fs-xl);font-weight:var(--fw-black);line-height:1.2}
.casino-tile--offer-sub{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--vt-link)}
@media screen and (max-width:639px){
  .casino-tile--offer{padding:0.5625rem 0.75rem;gap:0.25rem 0.5625rem}
  .casino-tile--offer-value{font-size:var(--fs-lg)}
  .casino-tile--offer-sub{font-size:var(--fs-sm)}
}

/* --- Brand column ------------------------------------------------------- */
.casino-tile--brand{
  position:relative;display:flex;width:100%;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--c-navy-800);
}
.casino-tile--brand > a{flex:1 1 auto}
@media screen and (min-width:1024px){
  .casino-tile--brand{width:var(--tile-brand-w);flex:0 0 var(--tile-brand-w);border-radius:var(--r-lg) 0 0 var(--r-lg)}
}
.casino-tile--badges{position:absolute;top:0.75rem;left:0.75rem;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:0.375rem}
.casino-tile--badge{
  display:inline-flex;align-items:center;gap:0.375rem;
  padding:0.25rem 0.5625rem;border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.3;
  /* Badges render at 10.5px bold, which is normal text, so they answer to
     4.5:1 and not 3:1. The plate colour on the accent reached 3.50. */
  background:var(--c-cta);color:var(--vt-accent-ink);white-space:nowrap;
}
.casino-tile--badge span{background:var(--vt-plate);color:var(--vt-on-plate);padding:0.125rem 0.3125rem;border-radius:0.125rem;font-size:0.6875rem}
.casino-tile--badge.is-fast{background:var(--c-gold);color:var(--vt-plate)}
.casino-tile--badge.is-exclusive{background:var(--vt-danger-solid);color:#fff}
.casino-tile--badge svg{width:0.75rem;height:0.75rem}

.casino-tile--logo{
  display:grid;place-items:center;height:100%;min-height:11.25rem;padding:1.875rem;
  border-radius:inherit;text-decoration:none;
  transition:transform var(--dur) var(--ease)
}
.casino-tile--logo:hover{text-decoration:none;transform:scale(1.03)}
/* Logos arrive at wildly different pixel sizes AND aspect ratios. To keep
   every brand at the same optical footprint, we sit the image in a fixed
   letterbox — width × height locked, object-fit:contain — so small uploads
   scale UP to the box, huge uploads scale DOWN, and the centre stays fixed
   regardless of what was uploaded. */
.casino-tile--logo img{
  display:block;
  width:var(--logo-max-w,12.5rem);height:var(--logo-max-h,5.5rem);
  max-width:100%;
  object-fit:contain;object-position:center;
  margin:0 auto;
}
.casino-tile--logo-text{color:#fff;font-size:var(--fs-3xl);font-weight:var(--fw-black);text-align:center;letter-spacing:.02em}

/* --- Content column ----------------------------------------------------- */
.casino-tile--main{display:flex;flex-direction:column;min-width:0}
.casino-tile--content{padding:1.25rem}
@media screen and (min-width:1024px){ .casino-tile--content{padding:1.875rem} }

.casino-tile--general{padding-bottom:0.9375rem;border-bottom:0.0625rem solid var(--c-border)}
.casino-tile--name{font-size:var(--fs-3xl);font-weight:var(--fw-black);line-height:1.2;margin:0 0 0.375rem}
/* The card sits inside .hero, whose link colour rule (0,2,1) outranks a plain
   `.casino-tile--name a` (0,1,1). Match that weight so the name stays ink. */
.casino-tile .casino-tile--name a{color:var(--c-ink)}
.casino-tile .casino-tile--name a:hover{color:var(--vt-link);text-decoration:none}
.casino-tile--rating{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem}
.casino-tile--pros{list-style:none;margin:0;padding:0;font-size:var(--fs-base)}
.casino-tile--pros li{position:relative;padding-left:1.5rem;margin-bottom:0.5625rem}
.casino-tile--pros li::before{
  content:"";position:absolute;left:0;top:0.25rem;width:0.9375rem;height:0.9375rem;
  background:var(--c-positive);border-radius:50%;
  -webkit-mask:var(--icon-check) center/0.5625rem no-repeat;mask:var(--icon-check) center/0.5625rem no-repeat;
}
.casino-tile--pros li:last-child{margin-bottom:0}



/* Tag pills — secondary information, so they sit quietly under the highlights
   rather than competing with the casino name and the offer. */
.casino-tile--tags{display:flex;flex-flow:row wrap;gap:0.375rem;margin-top:0.875rem}
.casino-tile--tag{
  display:inline-block;padding:0.25rem 0.625rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);line-height:1.5;
  background:transparent;border:0.0625rem solid var(--c-border);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)
}
.casino-tile--tag,.casino-tile--tag a{color:var(--c-muted-dark);text-decoration:none}
.casino-tile--tag:hover{background:var(--c-panel-dark);border-color:var(--c-muted)}
.casino-tile--tag a:hover{color:var(--c-ink);text-decoration:none}

/* Give the highlights room to breathe above the tags. */
.casino-tile--pros{margin-bottom:0}

/* On dark sections the same chip needs a light-on-dark treatment. */
.section--bg-dark .casino-tile--tag,.hero .casino-tile--tag{border-color:rgba(255,255,255,.28)}
.section--bg-dark .casino-tile--tag,.section--bg-dark .casino-tile--tag a,
.hero .casino-tile--tag,.hero .casino-tile--tag a{color:rgba(255,255,255,.8)}
.section--bg-dark .casino-tile--tag:hover,.hero .casino-tile--tag:hover{background:rgba(255,255,255,.1)}

/* CTA column */
.casino-tile--cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem}
.casino-tile--review-link{font-size:var(--fs-base);font-weight:var(--fw-bold);border-bottom:0.0625rem solid currentColor}
.casino-tile--review-link:hover{text-decoration:none}
.casino-tile--terms{font-size:0.6875rem;color:var(--c-muted);text-align:center;line-height:1.4}

/* --- Feature strip ------------------------------------------------------ */
.casino-tile--features{padding-top:0.9375rem;gap:0.875rem 0;align-items:center}
.casino-tile--feature{display:flex;align-items:center;gap:0.5625rem}
.casino-tile--feature-icon{display:grid;place-items:center;width:1.625rem;height:1.625rem;flex:0 0 1.625rem;color:var(--c-navy-800)}
.casino-tile--feature-icon svg{width:1.1875rem;height:1.1875rem}
.casino-tile--feature-info{display:flex;flex-direction:column;line-height:1.25}
.casino-tile--feature-info span{font-size:var(--fs-xs);color:var(--c-muted)}
.casino-tile--feature-info strong{font-size:var(--fs-base)}
.casino-tile--payments{display:flex;align-items:center;gap:0.3125rem;flex-wrap:wrap}
.casino-tile--payments img{height:1.25rem;width:auto;border-radius:0.125rem}

/* Rating */
.rating{display:inline-flex;align-items:center;gap:0.125rem}
.rating svg{width:0.9375rem;height:0.9375rem;color:var(--c-gold)}
.rating svg.is-inactive{color:var(--c-border)}
.rating--value{font-size:var(--fs-sm);line-height:1.2}
.rating--value strong{font-size:var(--fs-base)}

/* --- Show-more panel ---------------------------------------------------- */
.casino-tile--showmore-toggle{
  display:flex;align-items:center;justify-content:center;gap:0.4375rem;width:100%;
  padding:0.5625rem;background:var(--c-panel-dark);border:0;
  /* Matches the offer strip, so the card is bookended by the same surface.
     --c-brand falls short on that surface, so use the deep variant. */
  color:var(--vt-link);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.casino-tile--showmore-toggle:hover{background:var(--c-border);color:var(--c-ink)}
.casino-tile--showmore-toggle svg{width:0.6875rem;height:0.6875rem;transition:transform var(--dur) var(--ease)}
.casino-tile--showmore-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.casino-tile--param{display:flex;justify-content:space-between;gap:0.625rem;font-size:var(--fs-sm);padding:0.1875rem 0}
.casino-tile--param span:last-child{font-weight:var(--fw-bold);text-align:right}

/* --- Compact grid tile (archives, sidebars) ----------------------------- */
.casino-card{display:flex;flex-direction:column;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;height:100%}
.casino-card--logo{display:grid;place-items:center;min-height:8.125rem;padding:1.25rem}
.casino-card--logo img{display:block;width:10.625rem;height:4rem;max-width:100%;object-fit:contain;object-position:center;margin:0 auto}
.casino-card--body{display:flex;flex-direction:column;gap:0.5625rem;padding:1rem;flex:1 1 auto}
.casino-card--name{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0}
.casino-card--bonus{font-size:var(--fs-base);color:var(--c-muted)}
.casino-card--body .button{margin-top:auto}

/* Tooltip */
.tooltip-toggle{display:inline-grid;place-items:center;width:0.9375rem;height:0.9375rem;border-radius:50%;background:var(--c-muted);color:#fff;font-size:0.625rem;font-weight:var(--fw-bold);cursor:help;flex:0 0 0.9375rem}
.tooltip-bubble{
  position:absolute;z-index:90;max-width:16.875rem;padding:0.6875rem 0.875rem;
  background:var(--c-navy-900);color:var(--c-on-dark);
  font-size:var(--fs-sm);line-height:1.45;border-radius:var(--r-md);box-shadow:var(--shadow-pop);
  opacity:0;visibility:hidden;transform:translateY(0.25rem);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.tooltip-bubble.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

/* ==========================================================================
   Casino archive — card grid beside the filter sidebar
   ========================================================================== */
.casinos-grid{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@media screen and (min-width:640px){ .casinos-grid{grid-template-columns:repeat(2,1fr)} }
@media screen and (min-width:1200px){ .casinos-grid{grid-template-columns:repeat(3,1fr)} }
.casinos-grid--item[hidden]{display:none}

.casino-card{display:flex;flex-direction:column;height:100%;background:var(--c-panel);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.casino-card:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card)}

.casino-card--brand{position:relative;display:grid;place-items:center;min-height:8.25rem;padding:1.25rem}
.casino-card--badges{position:absolute;top:0.625rem;left:0.625rem;display:flex;flex-direction:column;gap:0.3125rem;align-items:flex-start;z-index:2}
.casino-card--logo{display:grid;place-items:center;width:100%;text-decoration:none}
.casino-card--logo img{display:block;width:10.625rem;height:4rem;max-width:100%;object-fit:contain;object-position:center;margin:0 auto}

.casino-card--body{display:flex;flex-direction:column;gap:0.625rem;padding:1rem;flex:1 1 auto}
.casino-card--head{display:flex;align-items:flex-start;justify-content:space-between;gap:0.625rem}
.casino-card--name{font-size:var(--fs-xl);font-weight:var(--fw-black);margin:0;line-height:1.2}
.casino-card .casino-card--name a{color:var(--c-ink)}
.casino-card .casino-card--name a:hover{color:var(--vt-link);text-decoration:none}
.casino-card--rating{flex:0 0 auto}
.casino-card--rating .rating svg{width:0.8125rem;height:0.8125rem}
.casino-card--rating .rating--value{font-size:var(--fs-xs)}

.casino-card--offer{display:flex;flex-direction:column;gap:0.125rem;padding:0.6875rem 0.8125rem;
  background:var(--c-panel-dark);border-radius:var(--r-md)}
.casino-card--offer-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-muted-dark)}
.casino-card--offer-value{font-size:var(--fs-lg);font-weight:var(--fw-black);line-height:1.25}
.casino-card--offer-sub{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--vt-link)}

.casino-card--facts{display:flex;flex-wrap:wrap;gap:0.375rem 1rem;margin:0}
.casino-card--facts div{display:flex;flex-direction:column}
.casino-card--facts dt{font-size:var(--fs-xs);color:var(--c-muted)}
.casino-card--facts dd{margin:0;font-size:var(--fs-base);font-weight:var(--fw-bold)}

.casino-card--actions{display:flex;flex-direction:column;gap:0.4375rem;margin-top:auto;padding-top:0.375rem}
.casino-card--actions .button{width:100%}
.casino-card .casino-tile--terms{text-align:center;margin-top:0.125rem}

/* ==========================================================================
   Payment method logos
   ========================================================================== */
.payment-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem}
.payment-logo{display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);overflow:hidden;background:#fff;
  border:0.0625rem solid var(--c-border-soft);line-height:0;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.payment-logo img{display:block;width:auto;height:auto;object-fit:contain}
a.payment-logo:hover{transform:translateY(-0.125rem);box-shadow:var(--shadow-card)}

/* Sizes. The source art is 120x80, so heights stay on that 3:2 ratio. */
.payment-logo img{width:2.8125rem;height:1.875rem}
.payment-logo.is-sm img{width:2.4375rem;height:1.625rem}
.payment-logo.is-lg img{width:4.3125rem;height:2.875rem}

/* Methods with no bundled art fall back to a readable chip. */
.payment-logo.is-text{padding:0.3125rem 0.625rem;background:var(--c-panel-dark);border-color:transparent}
.payment-logo--text{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--c-muted-dark);line-height:1.4}
.payment-row--more{display:inline-flex;align-items:center;padding:0 0.5rem;height:1.875rem;
  border-radius:var(--r-sm);background:var(--c-panel-dark);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--c-muted-dark)}

/* On dark sections the white logo plates need no border. */
.section--bg-dark .payment-logo,.hero .payment-logo{border-color:transparent}
.section--bg-dark .payment-logo.is-text,.hero .payment-logo.is-text{background:rgba(255,255,255,.14)}
.section--bg-dark .payment-logo--text,.hero .payment-logo--text{color:#fff}
.section--bg-dark .payment-row--more,.hero .payment-row--more{background:rgba(255,255,255,.14);color:#fff}

/* In the tile feature strip the payment cell takes the leftover width, so the
   logos hug the right edge instead of leaving a gap after them. */
.casino-tile--features .payment-row{justify-content:flex-end}
@media screen and (max-width:1023px){
  /* Once the strip wraps there is no leftover space to push against. */
  .casino-tile--features .payment-row{justify-content:flex-start}
}

/* Detail panel and review page rows breathe a little more. */
.casino-payments{margin:calc(var(--gutter) * 2.5) 0 0}
.casino-payments h2{font-size:var(--fs-3xl);margin-bottom:var(--gutter)}
.casino-payments .payment-row{gap:0.5rem}

/* Card row sits above the buttons. */
.casino-card .payment-row{margin-top:0.125rem}

/* Payment archive hero */
/* Only the description sits beside the logo — the heading, date, byline and
   count run flush left like every other hero. */
.payment-hero{display:block}
.payment-hero h1{margin-bottom:0.5rem}

/* Licence links ----------------------------------------------------------- */
.licence-link{color:inherit;border-bottom:0.0625rem dotted currentColor;text-decoration:none}
.licence-link:hover{color:var(--vt-link);border-bottom-color:var(--vt-accent);text-decoration:none}
.hero .licence-link:hover{color:var(--vt-on-plate-link);border-bottom-color:var(--c-brand-on-dark)}
.section--bg-dark .licence-link:hover{color:var(--vt-link);border-bottom-color:var(--c-brand-on-dark)}
.casino-tile--feature-info .licence-link{font-weight:var(--fw-bold)}

/* ---------------------------------------------------------------------------
 * Grid card: centred contents
 *
 * In the toplist a card is a wide row and left alignment gives the eye a spine
 * to run down. In the grid each card is a narrow column with short values, and
 * left alignment leaves ragged whitespace on the right of every line. Centring
 * gives each block its own axis, which reads better at this width.
 *
 * Scoped to .casinos-grid so the toplist rows are untouched.
 * ------------------------------------------------------------------------ */
.casinos-grid .casino-card--body{align-items:center;text-align:center}
.casinos-grid .casino-card--head{flex-direction:column;align-items:center;gap:0.25rem;width:100%}
.casinos-grid .casino-card--name{text-align:center}
.casinos-grid .casino-card--rating{display:flex;align-items:center;gap:0.375rem}

.casinos-grid .casino-card--offer{width:100%;align-items:center;text-align:center}

/* Facts stay in one row but each column centres on its own label. */
.casinos-grid .casino-card--facts{width:100%;justify-content:center;gap:0.375rem 1.375rem}
.casinos-grid .casino-card--facts div{align-items:center;text-align:center}

.casinos-grid .casino-card--tags,
.casinos-grid .payment-row{width:100%;justify-content:center}
.casinos-grid .casino-card--actions{width:100%}
/* Bonus code on a grid card: full width, centred with the rest. */
.casinos-grid .casino-card--code{width:100%}
.casino-card--code{margin-top:0.125rem}

/* ===== _content.css ===== */
/* ==========================================================================
   Long-form content + sticky table of contents
   ========================================================================== */
.content{padding:3.125rem 0}
.content--main{font-size:var(--fs-lg);line-height:1.65}
.content--main h2{margin-top:calc(var(--gutter) * 2.5)}
.content--main h3{margin-top:calc(var(--gutter) * 2)}
.content--main > *:first-child{margin-top:0}
.content--main ul,.content--main ol{margin-bottom:var(--gutter);padding-left:1.3rem}
.content--main li{margin-bottom:0.4375rem}
.content--main img{border-radius:var(--r-lg);margin:var(--gutter) 0}
.content--main blockquote{
  margin:calc(var(--gutter) * 1.5) 0;padding:1rem 1.25rem;
  background:var(--c-panel);border-left:0.25rem solid var(--vt-accent);border-radius:0 var(--r-md) var(--r-md) 0;
}
.content--main blockquote p:last-child{margin-bottom:0}
.content--main table{width:100%;border-collapse:collapse;margin-bottom:var(--gutter);font-size:var(--fs-base)}
.content--main th,.content--main td{padding:0.6875rem 0.875rem;text-align:left;border-bottom:0.0625rem solid var(--c-border-soft)}
.content--main thead th{background:var(--c-navy-800);color:var(--c-on-dark);font-weight:var(--fw-bold)}
.content--main tbody tr:nth-child(even){background:var(--c-panel)}
.content--table-wrap{overflow-x:auto;margin-bottom:var(--gutter)}

/* TOC sidebar */
.toc{position:sticky;top:calc(var(--header-h) + 1.25rem);background:var(--c-panel);border-radius:var(--r-lg);padding:1.25rem;max-height:calc(100vh - var(--header-h) - 2.5rem);overflow-y:auto}
.toc--title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0 0 0.75rem}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:0.125rem}
.toc li.is-sub a{padding-left:1.375rem;font-size:var(--fs-sm)}
.toc a{
  display:block;padding:0.4375rem 0.625rem;border-radius:var(--r-sm);
  color:var(--c-ink);font-size:var(--fs-base);line-height:1.35;text-decoration:none;
  border-left:0.1875rem solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)
}
.toc a:hover{background:rgba(45,159,128,.09);color:var(--vt-link);text-decoration:none}
.toc a.is-active{background:rgba(45,159,128,.13);color:var(--vt-link);border-left-color:var(--vt-accent);font-weight:var(--fw-bold)}

/* FAQ accordion */
.faq{margin:calc(var(--gutter) * 2) 0}
.faq--item{background:var(--c-panel);border-radius:var(--r-md);margin-bottom:0.5625rem;overflow:hidden}
.faq--question{
  display:flex;align-items:center;justify-content:space-between;gap:0.875rem;width:100%;
  padding:1rem 1.125rem;background:none;border:0;text-align:left;
  font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-ink);
}
.faq--question svg{width:0.8125rem;height:0.8125rem;flex:0 0 0.8125rem;transition:transform var(--dur) var(--ease)}
.faq--question[aria-expanded=true] svg{transform:rotate(180deg)}
.faq--answer{display:none;padding:0 1.125rem 1.125rem;font-size:var(--fs-lg);line-height:1.6}
.faq--answer.is-open{display:block}

/* Author box */
.author-box{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem;background:var(--c-panel);border-radius:var(--r-lg);margin-top:calc(var(--gutter) * 2)}
.author-box img{width:4rem;height:4rem;flex:0 0 4rem;border-radius:50%;object-fit:cover}
.author-box--name{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0 0 0.1875rem}
.author-box--role{font-size:var(--fs-sm);color:var(--c-muted);margin:0 0 0.5rem}
.author-box p:last-child{margin-bottom:0;font-size:var(--fs-base)}

/* Breadcrumbs */
.breadcrumbs{font-size:var(--fs-sm);color:var(--c-muted);margin-bottom:0.875rem}
.breadcrumbs a{color:inherit}
.breadcrumbs span[aria-current]{color:inherit;font-weight:var(--fw-bold)}
.breadcrumbs .sep{margin:0 0.4375rem;opacity:.5}

/* ===== _content-blocks.css ===== */
/* ==========================================================================
   Editorial content blocks
   ========================================================================== */

/* Jump navigation */
.content--nav{background:var(--c-panel);border-radius:var(--r-lg);padding:1.25rem;margin:0 0 calc(var(--gutter) * 1.7)}
.content--nav-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:0.75rem}
.content--nav-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0.125rem 1.375rem}
@media screen and (min-width:640px){ .content--nav-list[data-cols="2"]{grid-template-columns:1fr 1fr} }
.content--nav-item{margin:0}
.content--nav-link{display:flex;gap:0.5625rem;padding:0.4375rem 0;font-size:var(--fs-base);color:var(--c-ink);text-decoration:none;border-bottom:0.0625rem solid transparent}
.content--nav-link:hover{color:var(--vt-link);text-decoration:none}
.content--nav-link::before{content:counter(nav-counter) ".";counter-increment:nav-counter;color:currentColor;font-weight:var(--fw-bold);flex:0 0 auto}
.content--nav-list{counter-reset:nav-counter}

/* Q&A block */
.content--question{background:var(--c-panel);border-left:0.25rem solid var(--vt-accent);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:1.125rem 1.25rem;margin:calc(var(--gutter) * 1.4) 0}
.content--question-head{display:flex;align-items:center;gap:0.625rem;margin-bottom:0.5rem}
.content--question-icon{display:grid;place-items:center;width:1.875rem;height:1.875rem;flex:0 0 1.875rem;border-radius:50%;background:var(--c-cta);color:var(--c-on-cta)}
.content--question-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:1.3}
.content--question-text{font-size:var(--fs-lg);line-height:1.6}
.content--question-text p:last-child{margin-bottom:0}

/* Highlight / callout */
.content--highlight{display:flex;gap:0.875rem;padding:1.125rem 1.25rem;border-radius:var(--r-lg);margin:calc(var(--gutter) * 1.4) 0;background:rgba(45,159,128,.08);border:0.0625rem solid rgba(45,159,128,.25)}
.content--highlight.is-warning{background:rgba(224,69,75,.07);border-color:rgba(224,69,75,.25)}
.content--highlight.is-tip{background:rgba(231,180,0,.1);border-color:rgba(231,180,0,.3)}
/* Verdict: the review's own summary, not a warning — solid brand navy with the
   icon centred in a disc. White on #12325C measures 12.83:1. */
.content--highlight.is-verdict{align-items:center;background:var(--c-navy-800);
  border-color:var(--c-navy-800);color:var(--c-on-dark)}
.content--highlight.is-verdict .content--highlight-icon{display:grid;place-items:center;
  width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.14);color:#fff}
.content--highlight.is-verdict .content--highlight-icon svg{display:block;color:#fff}
.content--highlight.is-verdict .content--highlight-title{color:var(--vt-link)}
.content--highlight.is-verdict p{color:#fff}
.content--highlight.is-verdict p:last-child{margin-bottom:0}
.content--highlight-icon{flex:0 0 auto;color:currentColor}
.content--highlight.is-warning .content--highlight-icon{color:var(--c-danger)}
.content--highlight.is-tip .content--highlight-icon{color:var(--c-gold)}
.content--highlight-title{display:block;font-size:var(--fs-lg);margin-bottom:0.3125rem}
.content--highlight-body{font-size:var(--fs-lg);line-height:1.6}
.content--highlight-body p:last-child{margin-bottom:0}

/* How-to steps */
.content--how-to{margin:calc(var(--gutter) * 1.7) 0}
.content--how-to-title{font-size:var(--fs-3xl);margin-bottom:var(--gutter)}
.content--how-to-list{display:flex;flex-direction:column;gap:0.75rem}
.content--how-to-tile{display:flex;gap:1rem;background:var(--c-panel);border-radius:var(--r-lg);padding:1.125rem 1.25rem}
.content--how-to-number{display:grid;place-items:center;width:2.375rem;height:2.375rem;flex:0 0 2.375rem;border-radius:50%;background:var(--c-navy-800);color:#fff;font-size:var(--fs-xl);font-weight:var(--fw-black)}
.content--how-to-tile-content strong{display:block;font-size:var(--fs-xl);margin-bottom:0.3125rem}
.content--how-to-tile-content p{font-size:var(--fs-lg);line-height:1.6;margin-bottom:0}

/* Wagering calculator */
.content--calculator{background:var(--c-navy-800);color:var(--c-on-dark);border-radius:var(--r-lg);padding:1.5rem;margin:calc(var(--gutter) * 1.7) 0}
.content--calculator-title{color:var(--c-on-dark);font-size:var(--fs-3xl);margin:0 0 0.375rem}
.content--calculator-helper{font-size:var(--fs-base);color:rgba(254,254,254,.7);margin:0 0 var(--gutter)}
.content--calculator-grid{display:grid;grid-template-columns:1fr;gap:0.875rem;margin-bottom:var(--gutter)}
@media screen and (min-width:640px){ .content--calculator-grid{grid-template-columns:repeat(3,1fr)} }
.content--calculator-block label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:rgba(254,254,254,.85);margin-bottom:0.375rem}
.content--calculator-input{position:relative;display:flex;align-items:center}
.content--calculator-input input{padding-right:2.375rem;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.content--calculator-input span{position:absolute;right:0.875rem;font-size:var(--fs-base);color:rgba(254,254,254,.6);pointer-events:none}
.content--calculator select{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.content--calculator select option{color:var(--c-ink)}
.content--calculator-result{background:rgba(0,0,0,.25);border-radius:var(--r-md);padding:1rem;margin-bottom:var(--gutter)}
.content--calculator-result-row{display:flex;justify-content:space-between;gap:0.875rem;align-items:baseline;padding:0.4375rem 0;font-size:var(--fs-lg)}
.content--calculator-result-row + .content--calculator-result-row{border-top:0.0625rem solid rgba(255,255,255,.12)}
.content--calculator-result-row strong{font-size:var(--fs-2xl);font-weight:var(--fw-black)}
/* The calculator paints its own plate, so its ink is the on-plate pair. */
.content--calculator-result-row.is-total strong{color:var(--vt-on-plate-link)}

/* Author box */
.content--author-tile{display:flex;gap:1rem;align-items:flex-start;background:var(--c-panel);border-radius:var(--r-lg);padding:1.25rem;margin:calc(var(--gutter) * 1.7) 0}
.content--author-tile-avatar{display:grid;place-items:center;width:3.625rem;height:3.625rem;flex:0 0 3.625rem;border-radius:50%;overflow:hidden;background:var(--c-navy-800);color:#fff;font-size:var(--fs-3xl);font-weight:var(--fw-black)}
.content--author-tile-avatar img{width:100%;height:100%;object-fit:cover}
.content--author-tile-name{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.content--author-tile-role{font-size:var(--fs-sm);color:var(--c-muted);margin-bottom:0.4375rem}
.content--author-tile-body p{font-size:var(--fs-base);line-height:1.6;margin:0}

/* Comparison table */
.content--compare{margin:calc(var(--gutter) * 1.7) 0}
.content--compare-title{font-size:var(--fs-3xl);margin-bottom:var(--gutter)}
.content--compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-base);background:var(--c-panel-alt);border-radius:var(--r-lg);overflow:hidden}
.content--compare-table th{background:var(--c-navy-800);color:var(--c-on-dark);padding:0.8125rem 0.875rem;text-align:left;font-weight:var(--fw-bold);white-space:nowrap}
.content--compare-table td{padding:0.8125rem 0.875rem;border-bottom:0.0625rem solid var(--c-border-soft);vertical-align:middle}
.content--compare-table tbody tr:last-child td{border-bottom:0}
.content--compare-table tbody tr:nth-child(even){background:var(--c-panel)}
.content--compare-table .button{white-space:nowrap}
@media screen and (max-width:767px){
  .content--compare-table,.content--compare-table tbody,.content--compare-table tr,.content--compare-table td{display:block;width:100%}
  .content--compare-table thead{display:none}
  .content--compare-table tr{margin-bottom:0.75rem;border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel)}
  .content--compare-table td{display:flex;justify-content:space-between;gap:0.875rem;text-align:right}
  .content--compare-table td::before{content:attr(data-label);font-weight:var(--fw-bold);text-align:left}
  .content--compare-table td:last-child::before{display:none}
  .content--compare-table td .button{width:100%}
}

/* Internal link blocks -------------------------------------------------- */
.term-links{margin:0 0 var(--gutter)}
.term-links + .term-links{margin-top:calc(var(--gutter) * 1.5)}
.term-links--title{font-size:var(--fs-2xl);margin:0 0 0.75rem}
.term-links--list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem}
@media screen and (min-width:640px){ .term-links--list{grid-template-columns:repeat(3,1fr)} }
@media screen and (min-width:1024px){ .term-links--list{grid-template-columns:repeat(4,1fr)} }
.term-links--list a{
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  padding:0.6875rem 0.875rem;border-radius:var(--r-md);
  background:var(--c-panel);color:var(--c-ink);font-size:var(--fs-base);font-weight:var(--fw-bold);
  text-decoration:none;border-left:0.1875rem solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)
}
.term-links--list a:hover{background:var(--c-panel-dark);border-left-color:var(--c-cta);transform:translateX(0.125rem);text-decoration:none;color:var(--c-ink)}
.term-links--list em{font-style:normal;font-size:var(--fs-xs);color:var(--c-muted);font-weight:var(--fw-normal)}
.term-links.is-compact .term-links--title{font-size:var(--fs-lg)}
.term-links.is-compact .term-links--list a{padding:0.5rem 0.75rem;font-size:var(--fs-sm)}
.term-links.is-inline{margin:calc(var(--gutter) * 2) 0}

/* On dark sections */
.section--bg-dark .term-links--title{color:var(--c-on-dark)}
.section--bg-dark .term-links--list a{background:rgba(255,255,255,.08);color:var(--c-on-dark)}
.section--bg-dark .term-links--list a:hover{background:rgba(255,255,255,.15);color:var(--c-on-dark)}
.section--bg-dark .term-links--list em{color:rgba(255,255,255,.6)}

/* Term archive hero count */
.hero--term-count{margin-top:0.75rem;font-size:var(--fs-sm);color:rgba(255,255,255,.7)}

/* Menu items generated from terms */
.header--nav .menu-item-term > a{font-size:var(--fs-base)}

/* ===== _slots.css ===== */
/* ==========================================================================
   Games hub — filter sidebar, sort bar, slot tiles
   ========================================================================== */
.hero--slots,.hero--game{padding:1.375rem 0 2.5rem}

/* Filter sidebar */
.slots--filters{background:var(--c-panel);border-radius:var(--r-lg);padding:1.125rem;position:sticky;top:calc(var(--header-h) + 1rem)}
.slots--filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.slots--filters-head strong{font-size:var(--fs-lg)}
.slots--filters-reset{display:inline-flex;align-items:center;gap:0.3125rem;background:none;border:0;padding:0;color:var(--vt-link);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.slots--filters-reset:hover{color:var(--vt-link)}
.slots--filters-selected{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.875rem}
.slots--chip{display:inline-flex;align-items:center;gap:0.375rem;padding:0.3125rem 0.625rem;border:0;border-radius:var(--r-pill);background:var(--c-cta);color:var(--c-on-cta);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.slots--chip::after{content:"×";font-size:0.875rem;line-height:1}
.slots--chip:hover{background:var(--vt-accent);color:var(--vt-accent-ink)}

.slots--filter-group{border-top:0.0625rem solid var(--c-border);padding-top:0.75rem;margin-top:0.75rem}
.slots--filter-group:first-of-type{border-top:0;margin-top:0;padding-top:0}
.slots--filter-heading{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.25rem 0;background:none;border:0;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--c-ink)}
.slots--filter-heading svg{transition:transform var(--dur) var(--ease)}
.slots--filter-heading[aria-expanded=false] svg{transform:rotate(-90deg)}
.slots--filter-items{display:flex;flex-direction:column;gap:0.125rem;margin-top:0.5rem;max-height:14.375rem;overflow-y:auto}
.slots--filter-item{display:flex;align-items:center;gap:0.5625rem;padding:0.3125rem 0;font-size:var(--fs-base);cursor:pointer;user-select:none}
.slots--filter-item input{position:absolute;opacity:0;width:0;height:0}
.slots--filter-item .toplist-filters--box{width:1.1875rem;height:1.1875rem;flex:0 0 1.1875rem;border-color:var(--c-muted)}
.slots--filter-item .toplist-filters--box svg{color:#fff}
.slots--filter-item input:checked + .toplist-filters--box{background:var(--vt-accent);border-color:var(--vt-accent);color:var(--vt-accent-ink)}
.slots--filter-name{flex:1 1 auto;min-width:0}
.slots--filter-count{font-size:var(--fs-xs);color:var(--c-muted)}

/* Toolbar */
.slots--toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:var(--gutter)}
.slots--count{font-size:var(--fs-base);color:var(--c-muted)}
.slots--count strong{font-size:var(--fs-xl);color:var(--c-ink)}
.slots--sort{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem}
.slots--sort-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem}
.slots--sort-label{font-size:var(--fs-sm);color:var(--c-muted);margin-right:0.125rem}
.slots--sort-button{display:inline-flex;align-items:center;gap:0.3125rem;padding:0.5rem 0.8125rem;border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-md);background:var(--c-panel-alt);font-size:var(--fs-base);color:var(--c-ink)}
.slots--sort-button:hover{border-color:var(--vt-line-strong);color:var(--vt-link)}
.slots--sort-button[aria-pressed=true]{background:var(--c-navy-800);border-color:var(--c-navy-800);color:#fff}
.slots--sort-arrow{display:inline-flex;transition:transform var(--dur) var(--ease)}
.slots--sort-button.is-asc .slots--sort-arrow{transform:rotate(180deg)}
.slots--sort-button:not([aria-pressed=true]) .slots--sort-arrow{opacity:.35}

/* Grid */
.slots--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
@media screen and (min-width:640px){ .slots--grid{grid-template-columns:repeat(3,1fr)} }
@media screen and (min-width:1024px){ .slots--grid{grid-template-columns:repeat(4,1fr)} }
.slots--empty{padding:2.75rem 1.25rem;text-align:center;background:var(--c-panel);border-radius:var(--r-lg)}

/* Slot tile */
.slot-tile{display:flex;flex-direction:column;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.slot-tile:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card)}
.slot-tile--image{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--c-navy-900)}
.slot-tile--image img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.slot-tile:hover .slot-tile--image img{transform:scale(1.06)}
.slot-tile--placeholder{display:grid;place-items:center;width:100%;height:100%;color:rgba(255,255,255,.25)}
.slot-tile--rtp{position:absolute;top:0.5rem;right:0.5rem;padding:0.1875rem 0.5rem;border-radius:var(--r-sm);background:var(--c-cta);color:var(--c-on-cta);font-size:0.6875rem;font-weight:var(--fw-bold)}
.slot-tile--play{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4375rem;
  background:rgba(8,7,36,.72);color:#fff;font-size:var(--fs-base);font-weight:var(--fw-bold);
  opacity:0;transition:opacity var(--dur) var(--ease)
}
.slot-tile:hover .slot-tile--play,.slot-tile--image:focus-visible .slot-tile--play{opacity:1}
.slot-tile--body{display:flex;flex-direction:column;gap:0.25rem;padding:0.75rem}
.slot-tile--title{font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1.3;margin:0}
.slot-tile--title a{color:var(--c-ink)}
.slot-tile--title a:hover{color:var(--vt-link);text-decoration:none}
.slot-tile--provider{font-size:var(--fs-xs);color:var(--c-muted)}
.slot-tile--stats{display:flex;gap:0.75rem;margin:0.375rem 0 0;font-size:0.6875rem}
.slot-tile--stats div{display:flex;flex-direction:column}
.slot-tile--stats dt{color:var(--c-muted)}
.slot-tile--stats dd{margin:0;font-weight:var(--fw-bold)}
/* Volatility is read as a word, so these are ink, not marks: the bright
   mark colours only clear 4.5:1 on the dark ground. */
.slot-tile--stats dd.is-vol-high{color:var(--vt-danger-ink)}
.slot-tile--stats dd.is-vol-medium{color:var(--vt-warn-ink)}
.slot-tile--stats dd.is-vol-low{color:var(--vt-link)}
.section--bg-dark .slot-tile{background:rgba(255,255,255,.07)}
.section--bg-dark .slot-tile--title a{color:#fff}

/* Single game */
.game-hero--art{border-radius:var(--r-lg);overflow:hidden;background:var(--c-navy-900);
  aspect-ratio:3/4;max-width:15.625rem}
.game-hero--art img{width:100%;height:100%;object-fit:cover}
.game-hero--provider{font-size:var(--fs-lg);color:rgba(254,254,254,.85)}
.game-demo--frame{background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden}
.game-demo--placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;text-align:center;padding:3.75rem 1.5rem;min-height:21.25rem;color:var(--c-muted)}
.game-demo--placeholder h2{margin:0;color:var(--c-ink)}
.game-demo--placeholder p{max-width:28.75rem;margin:0 0 0.5rem}

/* ---------- Provider archive ----------
   Two independent shape problems here. Wordmarks run 1:1 to 10:1 (median
   2.25:1), so every logo slot is fixed-height and free-width with the image
   contained, never cropped. And 114 of 118 are drawn in white for dark
   headers, so each chip takes the surface its ink actually needs — measured
   at import, not guessed. */
.provider-chip,.provider-head--logo,.provider-dir--logo,.game-hero--studio-logo{
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-md)}
.provider-chip img,.provider-head--logo img,.provider-dir--logo img,
.game-hero--studio-logo img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
.is-on-dark{background:var(--c-navy-900)}
/* The white pill that used to frame dark-ink logos read as a foreign object
   on both the dark game/provider hero and the light directory chip. Every
   logo now renders without chrome — provider art we re-author dark-ink to
   white so contrast holds, but the pill is gone site-wide. */
.is-on-light{background:transparent;border:0}

.provider-head{display:flex;align-items:center;gap:1.375rem;flex-wrap:wrap}
.provider-head--logo{flex:0 0 auto;height:4.75rem;max-width:17.5rem;padding:0.75rem 1.125rem}
.provider-head--text{flex:1 1 20rem;min-width:0}
.provider-head--text h1{margin:0}
.provider-head--text .hero--intro{margin-top:0.625rem}

/* Payment-hero-shape variant for provider archives. Heading and byline hold
   the outer left edge; only the intro shares a row with the logo. */
.provider-hero{display:block}
.provider-hero h1{margin-bottom:0.5rem}
.provider-hero--logo{flex:0 0 auto;height:4.75rem;max-width:16.25rem;padding:0}
.provider-hero--logo .provider-head--logo{height:4.75rem;padding:0.75rem 1.125rem}

.provider-stats{display:flex;flex-wrap:wrap;gap:0.625rem;margin:1.375rem 0 0;padding:0}
.provider-stats--item{flex:1 1 9.375rem;padding:0.75rem 1rem;background:var(--c-bg);
  border:0.0625rem solid var(--c-border);border-radius:var(--r-md)}
.provider-stats dt{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--c-muted)}
.provider-stats dd{margin:0.25rem 0 0;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-ink)}
.provider-stats dd a{color:var(--vt-link)}

/* Studio directory on the games hub. Logo above name so a 10:1 wordmark and a
   1:1 badge take the same footprint. */
.provider-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));gap:0.75rem}
.provider-dir--item{display:flex;flex-direction:column;align-items:center;gap:0.5625rem;
  padding:0.875rem 0.75rem;background:var(--c-bg);border:0.0625rem solid var(--c-border);
  border-radius:var(--r-md);text-decoration:none;color:var(--c-ink);text-align:center}
.provider-dir--item:hover{border-color:var(--vt-line-strong);box-shadow:var(--shadow-card)}
.provider-dir--logo{width:100%;height:2.75rem;padding:0.375rem 0.625rem}
.provider-dir--name{font-size:var(--fs-sm);font-weight:var(--fw-semi);line-height:1.25}
.provider-dir--count{font-size:var(--fs-xs);color:var(--c-muted)}

/* Studio lockup sits above the title. The hero is already navy, so a
   light-ink logo needs no chip at all; only the handful drawn in dark ink
   keep one. */
.game-hero--studio{display:inline-flex;margin:0 0 0.875rem;max-width:100%}
.game-hero--studio-logo{height:3.5rem;max-width:16.25rem;padding:0}
.game-hero--studio-logo.is-on-dark,
.game-hero--studio-logo.is-on-light{background:transparent;padding:0}
.game-hero--provider{margin:0.5rem 0 0}

@media screen and (max-width:639px){
  .provider-head--logo{height:3.5rem;max-width:12.5rem;padding:0.625rem 0.875rem}
}

/* ---------- Editorial slot review ---------- */
.slot-review--head h2{margin:0}
.slot-review--byline{margin:0.375rem 0 0;font-size:var(--fs-sm);color:var(--c-muted)}
.slot-review--byline time{margin-left:0.5rem}
.slot-review--byline time::before{content:"·";margin-right:0.5rem;color:var(--c-border)}

.slot-review--verdict{display:flex;align-items:center;gap:1.125rem;margin:1.125rem 0 1.625rem;padding:1rem 1.25rem;
  background:var(--c-panel);border-left:0.25rem solid var(--vt-accent);border-radius:0}
.slot-review--score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  min-width:4.875rem;padding:0.5rem 0.75rem;background:var(--vt-accent);color:var(--vt-accent-ink);border-radius:var(--r-md)}
.slot-review--score-value{font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:1}
.slot-review--score-max{font-size:var(--fs-xs);opacity:.9;margin-top:0.125rem}
.slot-review--verdict-line{margin:0;font-size:var(--fs-xl);line-height:1.5;color:var(--c-ink)}

.slot-review--shot{margin:1.25rem 0 1.625rem}
.slot-review--shot img{display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:0.0625rem solid var(--c-border)}
.slot-review--shot figcaption{margin-top:0.5rem;font-size:var(--fs-sm);color:var(--c-muted)}

.slot-review--maths{margin:1.375rem 0 0;padding:0.875rem 1rem;background:var(--c-panel);border-radius:var(--r-md)}
.slot-review--maths-title{margin:0 0 0.625rem;font-size:var(--fs-sm);text-transform:uppercase;
  letter-spacing:.05em;color:var(--c-muted)}
.slot-review--maths > div{display:flex;justify-content:space-between;gap:0.75rem;padding:0.375rem 0;
  border-top:0.0625rem solid var(--c-border-soft)}
.slot-review--maths > div:first-of-type{border-top:0}
.slot-review--maths dt{font-size:var(--fs-sm);color:var(--c-muted)}
.slot-review--maths dd{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semi);
  color:var(--c-ink);text-align:right}

.slot-review--features{margin:1.625rem 0}
.slot-review--features h3{margin:0 0 0.625rem}
.slot-review--features ul{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0;padding:0;list-style:none}
.slot-review--features li{padding:0.3125rem 0.75rem;border:0.0625rem solid var(--c-border);border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--c-muted-dark)}

.slot-review--proscons{margin-top:1.625rem}

/* Games archive pagination. The catalogue is in the hundreds, so the grid is
   paged and the count in the toolbar reports the whole set, not the page. */
.slots--page-of{margin-left:0.5rem;font-size:var(--fs-xs);color:var(--c-muted);font-weight:var(--fw-normal)}
.slots--pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:0.375rem;margin-top:1.625rem}
.slots--pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.375rem;height:2.375rem;padding:0 0.75rem;border:0.0625rem solid var(--c-border);border-radius:var(--r-md);
  background:var(--c-bg);color:var(--c-ink);text-decoration:none;font-size:var(--fs-sm);
  font-weight:var(--fw-semi);transition:border-color .15s ease,background .15s ease}
.slots--pagination .page-numbers:hover{border-color:var(--vt-line-strong);color:var(--vt-link);text-decoration:none}
.slots--pagination .page-numbers.current{background:var(--vt-accent);border-color:var(--vt-line-strong);
  color:var(--vt-accent-ink)}
.slots--pagination .page-numbers.dots{border-color:transparent;background:transparent;color:var(--c-muted)}

/* Sort and clear are links now that both act on the whole catalogue. */
.slots--sort-button,.slots--filters-reset,.slots--chip{text-decoration:none;cursor:pointer}
.slots--sort-button:hover,.slots--filters-reset:hover,.slots--chip:hover{text-decoration:none}
.slots--filters-apply{width:100%;margin-top:0.875rem}
.slots--pagination .page-numbers:focus-visible,.slots--sort-button:focus-visible{outline:0.125rem solid var(--c-brand);outline-offset:0.125rem}

/* ---------------------------------------------------------------------------
 * Filter panel: collapsed on mobile
 *
 * The full panel runs to a screen and a half of checkboxes, which on a phone
 * means scrolling past every filter to reach the first result. It starts closed
 * behind a toggle below the breakpoint and is always open above it.
 * ------------------------------------------------------------------------ */
.slots--filters-toggle{display:none}

@media screen and (max-width:63.99em){
  .slots--filters-toggle{display:flex;align-items:center;justify-content:space-between;
    width:100%;gap:0.75rem;padding:0.8125rem 1rem;border:0.0625rem solid var(--c-border-soft);
    border-radius:var(--r-md);background:var(--c-panel-alt);color:var(--c-ink);
    font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer}
  .slots--filters-toggle > span{display:inline-flex;align-items:center;gap:0.5rem}
  .slots--filters-toggle svg{flex:0 0 auto}
  .slots--filters-toggle .slots--filters-toggle-state svg{transition:rotate .18s var(--ease)}
  .slots--filters-toggle[aria-expanded="true"] .slots--filters-toggle-state svg{rotate:180deg}
  .slots--filters-toggle:hover{border-color:var(--vt-line-strong);color:var(--vt-link)}

  /* Applied filters stay visible on the closed button, so a narrowed list is
     never mistaken for an empty one. */
  .slots--filters-count{display:inline-grid;place-items:center;min-width:1.375rem;height:1.375rem;
    padding:0 0.4375rem;border-radius:var(--r-pill);background:var(--c-cta);color:var(--c-on-cta);
    font-size:var(--fs-xs);font-weight:var(--fw-bold)}
  .slots--filters-count[hidden]{display:none}

  .slots--filters-body{display:none;margin-top:0.75rem}
  .slots--filters-body.is-open{display:block}
  .slots--filters{padding:0;border:0;background:none}
}

/* ---------------------------------------------------------------------------
 * Toolbar on mobile
 *
 * The "Sort by" label was sitting in the same flex line as the pills and taking
 * just enough width to push the third pill onto a second row. It moves up to
 * share the count's row instead, which leaves the pills a full line to
 * themselves — and they scroll sideways rather than wrapping if a listing ever
 * offers more of them.
 * ------------------------------------------------------------------------ */
@media screen and (max-width:47.99em){
  .slots--toolbar{display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:0.625rem 0.75rem}
  .slots--sort{display:contents}
  .slots--count{grid-column:1;grid-row:1}
  .slots--sort-label{grid-column:2;grid-row:1;justify-self:end;margin:0}
  .slots--sort-buttons{grid-column:1 / -1;grid-row:2;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;padding-bottom:0.125rem}
  .slots--sort-buttons::-webkit-scrollbar{display:none}
  .slots--sort-button{flex:0 0 auto}
}

/* ===== _bonuses-guides.css ===== */
/* ==========================================================================
   Bonus listing + guides hub
   ========================================================================== */
.hero--bonuses,.hero--guides,.hero--guide{padding:1.375rem 0 2.25rem}
.section--tight{padding:1.625rem 0}

/* Bonus type filter */
/* Always sits directly above a results grid, so it needs to breathe below
   as well as above — without this it reads as a header on the first row. */
.bonus-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.25rem;margin-bottom:1.5rem}
.bonus-filters--button{
  display:inline-flex;align-items:center;gap:0.4375rem;padding:0.5625rem 0.9375rem;
  border:0.0625rem solid rgba(255,255,255,.25);border-radius:var(--r-pill);
  background:transparent;color:var(--c-on-dark);font-size:var(--fs-base);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)
}
.bonus-filters--button span{padding:0.0625rem 0.4375rem;border-radius:var(--r-pill);background:rgba(255,255,255,.15);font-size:0.6875rem;font-weight:var(--fw-bold)}
.bonus-filters--button:hover{border-color:var(--c-cta);color:var(--c-cta)}
.bonus-filters--button[aria-pressed=true]{background:var(--c-cta);border-color:var(--c-cta);color:var(--c-on-cta)}
.bonus-filters--button[aria-pressed=true] span{background:rgba(0,0,0,.2)}

/* Bonus cards */
.bonus-list{display:flex;flex-direction:column;gap:var(--gutter)}
.bonus-list--item[hidden]{display:none}
.bonus-card{display:grid;grid-template-columns:1fr;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden}
@media screen and (min-width:768px){ .bonus-card{grid-template-columns:13.75rem 1fr 15.625rem} }
.bonus-card--brand{position:relative;display:grid;place-items:center;padding:1.625rem;min-height:9.375rem}
.bonus-card--type{position:absolute;top:0.625rem;left:0.625rem;padding:0.25rem 0.5625rem;border-radius:var(--r-sm);background:rgba(0,0,0,.35);color:#fff;font-size:0.6875rem;font-weight:var(--fw-bold)}
.bonus-card--logo{display:grid;place-items:center;width:100%}
.bonus-card--logo img{max-width:10.625rem;max-height:4.5rem;width:auto;height:auto;object-fit:contain}
.bonus-card--body{padding:1.25rem;display:flex;flex-direction:column;gap:0.5625rem;justify-content:center}
.bonus-card--headline{font-size:var(--fs-3xl);font-weight:var(--fw-black);line-height:1.2}
.bonus-card--excerpt{font-size:var(--fs-base);color:var(--c-muted);margin:0}
.bonus-card--terms{display:flex;flex-wrap:wrap;gap:1.125rem;margin:0.25rem 0 0}
.bonus-card--terms div{display:flex;flex-direction:column}
.bonus-card--terms dt{font-size:var(--fs-xs);color:var(--c-muted)}
.bonus-card--terms dd{margin:0;font-size:var(--fs-base);font-weight:var(--fw-bold)}
.bonus-card--action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5625rem;padding:1.25rem;border-top:0.0625rem solid var(--c-border)}
@media screen and (min-width:768px){ .bonus-card--action{border-top:0;border-left:0.0625rem solid var(--c-border)} }
.bonus-card--code{width:100%;text-align:center}
.bonus-card--code-label{display:block;font-size:var(--fs-xs);color:var(--c-muted);margin-bottom:0.1875rem}
.bonus-card--code-value{
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;
  padding:0.5625rem 0.75rem;border:0.0625rem dashed var(--c-muted);border-radius:var(--r-md);
  background:var(--c-panel-alt);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--c-ink)
}
.bonus-card--code-value:hover{border-color:var(--vt-accent);color:var(--vt-link)}
.bonus-card--code-value em{font-style:normal;font-size:var(--fs-xs);color:var(--vt-link);font-family:var(--font-body)}
.bonus-card--code.is-copied .bonus-card--code-value{border-color:var(--c-cta);border-style:solid}


.guide-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr));gap:0.75rem}
.guide-cats--item{display:flex;flex-direction:column;gap:0.3125rem;padding:1.125rem;background:var(--c-panel);border-radius:var(--r-lg);text-decoration:none;color:var(--c-ink);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.guide-cats--item:hover{transform:translateY(-0.125rem);box-shadow:var(--shadow-card);text-decoration:none;color:var(--c-ink)}
.guide-cats--icon{color:currentColor}
.guide-cats--name{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.guide-cats--count{font-size:var(--fs-sm);color:var(--c-muted)}
.guide-hero--art{border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--gutter)}

/* ===== _community.css ===== */
/* ==========================================================================
   Velatonmies — streamers, big wins, leaderboard, profiles
   ========================================================================== */
.hero--roster,.hero--streamer,.hero--wins,.hero--win,.hero--leaderboard,.hero--profile{padding:1.375rem 0 2.375rem}

/* Rank badge --------------------------------------------------------------- */
.dz-rank{display:inline-flex;align-items:center;gap:0.375rem;padding:0.1875rem 0.625rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--rank-color) 18%,transparent);
  border:0.0625rem solid color-mix(in srgb,var(--rank-color) 45%,transparent);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.4;white-space:nowrap}
.dz-rank--dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--rank-color);flex:0 0 0.4375rem}
.dz-rank--name{color:inherit}
.dz-rank--points{opacity:.7}
.dz-rank.is-sm{padding:0.125rem 0.5rem;font-size:0.6875rem}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .dz-rank{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
}

/* Progress bar ------------------------------------------------------------- */
.dz-progress{display:block;height:0.4375rem;border-radius:var(--r-pill);background:rgba(255,255,255,.18);overflow:hidden;min-width:8.75rem}
.dz-progress--fill{display:block;height:100%;background:var(--c-cta);border-radius:inherit}
.section .dz-progress{background:var(--c-border-soft)}

/* Live indicator ----------------------------------------------------------- */
.dz-live-dot{width:0.5rem;height:0.5rem;border-radius:50%;background:#E5484D;flex:0 0 0.5rem;
  box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:dz-pulse 1.8s infinite}
@keyframes dz-pulse{70%{box-shadow:0 0 0 0.5rem rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){ .dz-live-dot{animation:none} }

.dz-live-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;margin-top:1.25rem;padding:0.75rem 0.875rem;
  background:rgba(255,255,255,.07);border-radius:var(--r-lg)}
.dz-live-bar--flag{display:inline-flex;align-items:center;gap:0.4375rem;font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em}
.dz-live-bar--item{display:inline-flex;align-items:center;gap:0.5rem;padding:0.3125rem 0.75rem 0.3125rem 0.3125rem;border-radius:var(--r-pill);
  background:rgba(0,0,0,.25);border:0.0625rem solid var(--accent);color:var(--c-on-dark);font-size:var(--fs-base);font-weight:var(--fw-bold)}
.dz-live-bar--item img{width:1.625rem;height:1.625rem;border-radius:50%;object-fit:cover;object-position:50% 8%}
.dz-live-bar--item:hover{background:var(--accent);color:#fff;text-decoration:none}

/* Schedule ----------------------------------------------------------------- */
.dz-schedule{display:grid;grid-template-columns:repeat(2,1fr);gap:0.625rem}
@media screen and (min-width:640px){ .dz-schedule{grid-template-columns:repeat(4,1fr)} }
@media screen and (min-width:1024px){ .dz-schedule{grid-template-columns:repeat(7,1fr)} }
.dz-schedule--day{background:var(--c-panel);border-radius:var(--r-lg);padding:0.75rem;min-height:6rem}
.dz-schedule--day.is-empty{opacity:.55}
.dz-schedule--label{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);margin-bottom:0.5rem}
.dz-schedule--closed{font-size:var(--fs-sm);color:var(--c-muted)}
.dz-schedule--slot{display:flex;flex-direction:column;gap:0.0625rem;padding:0.4375rem 0.5625rem;margin-bottom:0.375rem;border-radius:var(--r-md);
  background:var(--c-panel-alt);border-left:0.1875rem solid var(--accent);text-decoration:none;color:var(--c-ink)}
.dz-schedule--slot:hover{text-decoration:none;background:var(--c-border)}
.dz-schedule--slot strong{font-size:var(--fs-base)}
.dz-schedule--slot span{font-size:var(--fs-xs);color:var(--c-muted)}
.dz-schedule--slot.is-static{cursor:default}

/* Streamer cards ----------------------------------------------------------- */
.dz-roster{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
@media screen and (min-width:640px){ .dz-roster{grid-template-columns:repeat(3,1fr)} }
@media screen and (min-width:1024px){ .dz-roster{grid-template-columns:repeat(4,1fr)} }
.dz-streamer-card{display:flex;flex-direction:column;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;
  border-bottom:0.1875rem solid var(--accent);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.dz-streamer-card:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card)}
/* The avatars are full-body character cut-outs, so the art panel contains them
   rather than cropping — `cover` on a square took the head and feet off. The
   figure is bottom-aligned so it stands on the panel, over a wash of its own
   accent colour. */
.dz-streamer-card--art{position:relative;display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:4/5;overflow:hidden;padding:0.625rem 0.625rem 0;
  background:
    radial-gradient(ellipse 78% 56% at 50% 100%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 72%),
    linear-gradient(to bottom, var(--c-navy-800), var(--c-navy-900))}
.dz-streamer-card--art img{width:auto;height:100%;max-width:100%;object-fit:contain;
  object-position:bottom center;transition:transform .35s var(--ease);
  filter:drop-shadow(0 0.625rem 1.125rem rgba(0,0,0,.42))}
.dz-streamer-card:hover .dz-streamer-card--art img{transform:translateY(-0.25rem) scale(1.03)}
.dz-streamer-card--placeholder{display:grid;place-items:center;width:100%;height:100%;color:rgba(255,255,255,.22)}
.dz-streamer-card--live{position:absolute;top:0.5625rem;left:0.5625rem;display:inline-flex;align-items:center;gap:0.375rem;
  padding:0.25rem 0.625rem;border-radius:var(--r-pill);background:rgba(8,7,36,.85);color:#fff;font-size:0.6875rem;font-weight:var(--fw-bold)}
.dz-streamer-card--persona{position:absolute;bottom:0.5625rem;left:0.5625rem;padding:0.1875rem 0.5625rem;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font-size:0.6875rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em}
.dz-streamer-card--body{display:flex;flex-direction:column;gap:0.375rem;padding:0.875rem;flex:1 1 auto}
.dz-streamer-card--name{font-size:var(--fs-xl);font-weight:var(--fw-black);margin:0;line-height:1.2}
.dz-streamer-card--name a{color:var(--c-ink)}
.dz-streamer-card--name a:hover{color:var(--accent);text-decoration:none}
.dz-streamer-card--tagline{font-size:var(--fs-sm);color:var(--c-muted);margin:0}
.dz-streamer-card--days{display:flex;align-items:center;gap:0.375rem;font-size:var(--fs-xs);color:var(--c-muted)}
.dz-streamer-card--links{display:flex;gap:0.4375rem;margin-top:auto;padding-top:0.5rem}
.dz-streamer-card--links a{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--c-panel-alt);color:var(--c-ink)}
.dz-streamer-card--links a:hover{background:var(--accent);color:#fff}
.section--bg-panel .dz-streamer-card{background:var(--c-panel-alt)}

/* Streamer hero ------------------------------------------------------------ */
.dz-streamer-hero--avatar{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;
  background:var(--c-navy-900);border:0.1875rem solid var(--accent)}
/* Full-body cut-out again — contain, standing on the panel. */
.dz-streamer-hero--avatar img{width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 0.75rem 1.375rem rgba(0,0,0,.45))}
.dz-streamer-hero--persona{display:inline-block;padding:0.25rem 0.75rem;border-radius:var(--r-pill);background:var(--accent);
  color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.07em;margin-bottom:0.625rem}
.dz-streamer-hero--tagline{font-size:var(--fs-xl);color:rgba(254,254,254,.85)}
.dz-streamer-hero--facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));gap:0.75rem;margin:1.125rem 0}
.dz-streamer-hero--fact{background:rgba(255,255,255,.08);border-radius:var(--r-md);padding:0.6875rem 0.8125rem}
.dz-streamer-hero--fact span{display:block;font-size:var(--fs-xs);opacity:.7;margin-bottom:0.125rem}
.dz-streamer-hero--fact strong{font-size:var(--fs-lg)}
.dz-streamer-hero--links{display:flex;flex-wrap:wrap;gap:0.625rem}
.dz-player{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000}
.dz-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Big wins ----------------------------------------------------------------- */
.dz-wins-actions{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:1.125rem}
.dz-wins-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:var(--gutter)}
.dz-wins-filter select{min-width:11.875rem}
.dz-wins-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--gutter)}
@media screen and (min-width:640px){ .dz-wins-grid{grid-template-columns:repeat(2,1fr)} }
@media screen and (min-width:1024px){ .dz-wins-grid{grid-template-columns:repeat(3,1fr)} }
.dz-wins-item[hidden]{display:none}

.dz-win-card{display:flex;flex-direction:column;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;height:100%;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.dz-win-card:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card)}
.dz-win-card.is-featured{outline:0.125rem solid var(--c-gold);outline-offset:-0.125rem}
.dz-win-card--media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--c-navy-900)}
.dz-win-card--media img{width:100%;height:100%;object-fit:cover}
.dz-win-card--placeholder{display:grid;place-items:center;width:100%;height:100%;color:rgba(255,255,255,.2)}
.dz-win-card--mult{position:absolute;bottom:0.5625rem;left:0.5625rem;padding:0.3125rem 0.6875rem;border-radius:var(--r-md);
  /* Its own plate over the screenshot, so on-plate ink, not the theme's. */
  background:var(--vt-plate);color:var(--vt-on-plate-link);font-size:var(--fs-xl);font-weight:var(--fw-black);line-height:1}
.dz-win-card--flag{position:absolute;top:0.5625rem;right:0.5625rem;padding:0.1875rem 0.5625rem;border-radius:var(--r-sm);
  background:var(--c-gold);color:var(--c-navy-900);font-size:0.6875rem;font-weight:var(--fw-bold)}
.dz-win-card--body{display:flex;flex-direction:column;gap:0.5625rem;padding:0.875rem;flex:1 1 auto}
.dz-win-card--title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0;line-height:1.25}
.dz-win-card--title a{color:var(--c-ink)}
.dz-win-card--title a:hover{color:var(--vt-link);text-decoration:none}
.dz-win-card--amounts{display:flex;gap:1.125rem}
.dz-win-card--amounts span{display:block;font-size:var(--fs-xs);color:var(--c-muted)}
.dz-win-card--amounts strong{font-size:var(--fs-base)}
.dz-win-card--amounts .is-payout strong{color:var(--vt-link)}
.dz-win-card--casino{display:flex;align-items:center;gap:0.375rem;font-size:var(--fs-sm);color:var(--c-muted)}
.dz-win-card--foot{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;margin-top:auto;padding-top:0.625rem;border-top:0.0625rem solid var(--c-border)}
.dz-win-card--author{display:flex;align-items:center;gap:0.4375rem;min-width:0;font-size:var(--fs-sm)}
.dz-win-card--author img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;flex:0 0 1.5rem}
.dz-win-card--author > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dz-vote{display:inline-flex;align-items:center;gap:0.3125rem;padding:0.3125rem 0.6875rem;border:0.0625rem solid var(--c-border);
  border-radius:var(--r-pill);background:var(--c-panel-alt);color:var(--c-ink);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.dz-vote:hover:not([disabled]){background:var(--c-cta);border-color:var(--vt-accent-edge);color:var(--c-on-cta)}
.dz-vote[disabled]{opacity:.5;cursor:not-allowed}
.dz-vote.is-voted{background:var(--c-cta);border-color:var(--vt-accent-edge);color:var(--c-on-cta)}
.dz-vote.is-large{padding:0.5625rem 1rem;font-size:var(--fs-base)}

.dz-win-hero{display:grid;grid-template-columns:1fr;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden}
@media screen and (min-width:768px){ .dz-win-hero{grid-template-columns:1.2fr 1fr} }
.dz-win-hero--media{position:relative;min-height:13.75rem;background:var(--c-navy-900)}
.dz-win-hero--media img{width:100%;height:100%;object-fit:cover}
.dz-win-hero--body{display:flex;flex-direction:column;gap:0.5625rem;justify-content:center;padding:1.625rem}
.dz-win-hero--flag{align-self:flex-start;padding:0.25rem 0.6875rem;border-radius:var(--r-pill);background:var(--c-gold);
  color:var(--c-navy-900);font-size:0.6875rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em}
.dz-win-hero--mult{font-size:2.75rem;font-weight:var(--fw-black);line-height:1;color:var(--vt-on-plate-link)}
.dz-win-hero--body h2{margin:0}
.dz-win-hero--line{margin:0;font-size:var(--fs-lg)}



/* Sign-in gate ------------------------------------------------------------- */
.dz-gate{max-width:40rem;margin:0 auto;text-align:center}
.dz-gate--lead{font-size:var(--fs-xl);color:rgba(254,254,254,.85)}
.dz-login{display:flex;flex-direction:column;gap:0.625rem;margin:1.375rem 0}
.dz-login--button{display:flex;align-items:center;justify-content:center;gap:0.625rem;padding:0.875rem 1.25rem;border-radius:var(--r-md);
  background:var(--provider);color:#0B0B12;font-size:var(--fs-lg);font-weight:var(--fw-bold);text-decoration:none;
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease)}
.dz-login--button.is-discord,.dz-login--button.is-twitch{color:#fff}
.dz-login--button:hover{transform:translateY(-0.0625rem);filter:brightness(1.08);text-decoration:none}
.dz-login--empty{padding:1.25rem;background:rgba(255,255,255,.08);border-radius:var(--r-lg);text-align:left;font-size:var(--fs-base)}
.dz-gate--ranks{display:grid;grid-template-columns:1fr;gap:0.5rem;margin-top:1.5rem;text-align:left}
@media screen and (min-width:640px){ .dz-gate--ranks{grid-template-columns:1fr 1fr} }
.dz-gate--rank{display:flex;align-items:center;gap:0.6875rem;padding:0.6875rem 0.875rem;background:rgba(255,255,255,.06);
  border-radius:var(--r-md);border-left:0.1875rem solid var(--rank-color)}
.dz-gate--rank span{color:var(--rank-color);flex:0 0 auto}
.dz-gate--rank strong{flex:0 0 auto}
.dz-gate--rank em{font-style:normal;font-size:var(--fs-sm);opacity:.75}
.dz-gate--legal{margin-top:1.25rem;font-size:var(--fs-sm);opacity:.65}

/* Profile ------------------------------------------------------------------ */
.dz-profile-head{display:flex;flex-wrap:wrap;align-items:center;gap:1.125rem}
.dz-profile-head--avatar{width:6rem;height:6rem;border-radius:50%;object-fit:cover;border:0.1875rem solid var(--rank-color)}
.dz-profile-head--who{flex:1 1 16.25rem}
.dz-profile-head--who h1{margin:0 0 0.5rem}
.dz-profile-head--meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;margin-bottom:0.625rem}
.dz-profile-head--spot{font-size:var(--fs-sm);color:var(--c-cta)}
.dz-profile-head--progress{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem}
.dz-profile-head--next{font-size:var(--fs-sm);opacity:.75}
.dz-profile-head--stats{display:flex;gap:1.25rem}
.dz-profile-head--stats div{display:flex;flex-direction:column;align-items:center}
.dz-profile-head--stats strong{font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:1}
.dz-profile-head--stats span{font-size:var(--fs-xs);opacity:.7}

.dz-panel{background:var(--c-panel);border-radius:var(--r-lg);padding:1.375rem;margin-bottom:var(--gutter)}
.dz-panel--title{display:flex;align-items:center;gap:0.5625rem;font-size:var(--fs-3xl);margin:0 0 0.375rem}
.dz-panel--title svg{color:currentColor}
.dz-panel--note{font-size:var(--fs-base);color:var(--c-muted);margin-bottom:var(--gutter)}

.dz-form--grid{display:grid;grid-template-columns:1fr;gap:0.875rem;margin-bottom:0.875rem}
@media screen and (min-width:640px){ .dz-form--grid{grid-template-columns:1fr 1fr} }
.dz-form label{display:block;margin-bottom:0.875rem}
.dz-form label > span{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:0.3125rem}
.dz-form label > em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--c-muted);margin-top:0.25rem}
.dz-form--grid label{margin-bottom:0}
.dz-form input[type=file]{padding:0.5625rem;background:var(--c-panel-alt);border:0.0625rem dashed var(--c-muted);border-radius:var(--r-md);width:100%}

.dz-flash{padding:0.75rem 1rem;border-radius:var(--r-md);margin-top:1rem;font-size:var(--fs-base);font-weight:var(--fw-bold)}
.dz-flash.is-ok{background:rgba(45,159,128,.18);border:0.0625rem solid var(--vt-accent);color:var(--c-on-dark)}
.dz-flash.is-error{background:rgba(224,69,75,.18);border:0.0625rem solid var(--c-danger);color:var(--c-on-dark)}
.section .dz-flash.is-ok{color:var(--vt-link)}
.section .dz-flash.is-error{color:var(--c-danger)}

.dz-linked{list-style:none;margin:0;padding:0}
.dz-linked--item{display:flex;align-items:center;gap:0.6875rem;padding:0.6875rem 0;border-bottom:0.0625rem solid var(--c-border)}
.dz-linked--item:last-child{border-bottom:0}
.dz-linked--icon{display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 2rem;border-radius:50%;background:var(--provider);color:#0B0B12}
.dz-linked--label{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.dz-linked--label em{font-style:normal;font-size:var(--fs-sm);color:var(--c-muted);overflow:hidden;text-overflow:ellipsis}
.dz-linked--tick{color:var(--c-positive)}
.dz-linked--connect{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.dz-linked--off{font-size:var(--fs-xs);color:var(--c-muted)}

.dz-submissions{list-style:none;margin:0;padding:0}
.dz-submissions--item{display:flex;align-items:center;gap:0.75rem;padding:0.6875rem 0;border-bottom:0.0625rem solid var(--c-border)}
.dz-submissions--item:last-child{border-bottom:0}
.dz-submissions--mult{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--vt-link);flex:0 0 auto;min-width:3.5rem}
.dz-submissions--name{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.dz-submissions--name em{font-style:normal;font-size:var(--fs-xs);color:var(--c-muted)}
.dz-submissions--status{padding:0.1875rem 0.5625rem;border-radius:var(--r-pill);font-size:0.6875rem;font-weight:var(--fw-bold);white-space:nowrap}
.dz-submissions--status.is-publish{background:rgba(45,159,128,.18);color:var(--vt-link)}
.dz-submissions--status.is-pending,.dz-submissions--status.is-draft{background:rgba(231,180,0,.22);color:#7A5E00}

.dz-pointlog{list-style:none;margin:0;padding:0;font-size:var(--fs-base)}
.dz-pointlog li{display:flex;justify-content:space-between;gap:0.75rem;padding:0.5rem 0;border-bottom:0.0625rem solid var(--c-border)}
.dz-pointlog li:last-child{border-bottom:0}
.dz-pointlog strong{color:var(--vt-link)}

/* Review form ------------------------------------------------------------- */
.review-form{margin:calc(var(--gutter) * 2.5) 0 0;padding:1.375rem;background:var(--c-panel);border-radius:var(--r-lg)}
.review-form--head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.625rem;margin-bottom:0.375rem}
.review-form--title{display:flex;align-items:center;gap:0.5625rem;font-size:var(--fs-3xl);margin:0}
.review-form--title svg{color:var(--c-gold)}
.review-form--reward{padding:0.25rem 0.6875rem;border-radius:var(--r-pill);background:var(--c-cta);
  color:var(--c-on-cta);font-size:var(--fs-xs);font-weight:var(--fw-bold);white-space:nowrap}
.review-form--gate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.875rem;
  padding:1rem 1.125rem;background:var(--c-panel-alt);border-radius:var(--r-md);margin-top:0.75rem}
.review-form--gate p{margin:0;font-size:var(--fs-lg);max-width:52ch}
.review-form--done{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem 1.125rem;margin-top:0.75rem;
  background:rgba(23,122,78,.12);border-radius:var(--r-md);color:var(--c-positive)}
.review-form--done > div{display:flex;flex-direction:column;gap:0.1875rem}
.review-form--done span{color:var(--c-muted);font-size:var(--fs-base)}
.review-form--form{margin-top:0.875rem}
.review-form--stars{border:0;padding:0;margin:0 0 1rem}
.review-form--stars legend{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:0.375rem;padding:0}

/* Radios render 5→1 so a plain sibling selector can fill the stars to the
   left of the hovered/selected one without any JavaScript. */
.star-input{display:inline-flex;flex-direction:row-reverse;gap:0.25rem}
.star-input input{position:absolute;opacity:0;width:0;height:0}
.star-input label{display:grid;place-items:center;cursor:pointer;color:var(--c-border);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label{color:var(--c-gold)}
.star-input label:hover{transform:scale(1.12)}
.star-input input:focus-visible + label{outline:0.1875rem solid var(--c-brand);outline-offset:0.125rem;border-radius:var(--r-sm)}

/* Game hero aggregate */
.game-hero--rating{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;margin-top:0.625rem}
.game-hero--rating a{font-size:var(--fs-base);color:var(--c-cta)}

/* Site mascot -------------------------------------------------------------- */
.dz-mascot{margin:0;display:flex;justify-content:center;pointer-events:none}
.dz-mascot--img{width:auto;height:auto;max-width:100%;object-fit:contain}
.dz-mascot.is-plain .dz-mascot--img{max-height:11.25rem}
.dz-mascot.is-float .dz-mascot--img{max-height:13.75rem;filter:drop-shadow(0 1rem 2rem rgba(0,0,0,.45))}
.dz-mascot.is-badge .dz-mascot--img{max-height:7.5rem;filter:drop-shadow(0 0.625rem 1.25rem rgba(0,0,0,.4))}

/* Front-page join CTA: mascot leans in from the side on wide screens. */
.dz-join--inner{position:relative}
.dz-join--mascot{margin-bottom:0.875rem}
@media screen and (min-width:1024px){
  .dz-join--mascot{
    position:absolute;right:-0.5rem;bottom:-1.625rem;z-index:2;margin:0;
    width:13.125rem;justify-content:flex-end;
  }
  .dz-join--mascot .dz-mascot--img{max-height:16.25rem}
  .dz-join--store{position:relative;z-index:1}
}
@media screen and (min-width:1400px){ .dz-join--mascot{right:-2.5rem;width:15.625rem} }

/* Sign-in gate and modal */
.dz-gate--mascot{margin-bottom:0.375rem}
.dz-modal--mascot{margin:0 0 0.625rem}
.dz-modal--mascot .dz-mascot--img{max-height:6rem}
.dz-404--mascot{margin-bottom:0.625rem}

@media (prefers-reduced-motion:no-preference){
  .dz-gate--mascot .dz-mascot--img,
  .dz-modal--mascot .dz-mascot--img{transition:transform var(--dur) var(--ease)}
}

/* ---------- Signed-out profile: the pitch ---------- */
.dz-gate-section{text-align:center}
.dz-gate-section .dz-gate{max-width:40rem;margin:0 auto}
.dz-gate-section h2{margin:0 0 0.625rem}
.dz-gate-section .dz-gate--lead{margin:0 auto 1.375rem;max-width:56ch;color:var(--c-muted);font-size:var(--fs-lg)}
.dz-gate-section .dz-gate--legal{margin-top:1.125rem;font-size:var(--fs-xs);color:var(--c-muted)}

.dz-explain--head{max-width:64ch;margin-bottom:1.5rem}
.dz-explain--head h2{margin:0 0 0.625rem}
.dz-explain--head p{margin:0;font-size:var(--fs-lg);line-height:1.65;color:var(--c-muted)}
.section--bg-dark .dz-explain--head p{color:rgba(255,255,255,.82)}
.dz-explain--foot{margin:1.375rem 0 0;display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;
  color:var(--c-muted)}
.section--bg-dark .dz-explain--foot{color:rgba(255,255,255,.72)}

/* The rank ladder, read left to right. */
.dz-ranks-rail{list-style:none;margin:0;padding:0;display:grid;gap:0.75rem;
  grid-template-columns:repeat(auto-fit,minmax(11.875rem,1fr))}
.dz-ranks-rail--step{position:relative;padding:1rem 1rem 1rem 1.125rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:0.0625rem solid rgba(255,255,255,.12);
  border-left:0.1875rem solid var(--rank-color,var(--vt-accent))}
.dz-ranks-rail--icon{display:block;color:var(--rank-color,var(--c-brand));margin-bottom:0.5rem}
.dz-ranks-rail--name{display:block;font-size:var(--fs-xl);color:var(--c-on-dark);line-height:1.2}
/* The threshold is small text, and four of the five rank colours fall under
   4.5:1 on this card — Apex reaches only 3.0. The colour stays on the icon and
   the border, where it is decorative; the number takes a legible neutral. */
.dz-ranks-rail--min{display:block;margin-top:0.125rem;font-size:var(--fs-xs);letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.dz-ranks-rail--blurb{display:block;margin-top:0.5rem;font-style:normal;font-size:var(--fs-sm);
  line-height:1.5;color:rgba(255,255,255,.7)}

.dz-explain--grid{display:grid;gap:0.75rem;grid-template-columns:repeat(auto-fit,minmax(13.125rem,1fr))}
.dz-explain--card{padding:1rem 1.125rem;border-radius:var(--r-lg);
  background:var(--c-panel);border:0.0625rem solid var(--c-border)}
.section--bg-dark .dz-explain--card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.dz-explain--card h3{margin:0.5rem 0 0;font-size:var(--fs-xl);line-height:1.25}
.section--bg-dark .dz-explain--card h3{color:var(--c-on-dark)}
.dz-explain--tag{display:inline-block;padding:0.1875rem 0.5625rem;border-radius:var(--r-pill);
  background:var(--c-cta);color:var(--c-on-cta);font-size:0.6875rem;font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.05em}
.dz-explain--prize{margin:0.5rem 0 0;font-size:var(--fs-lg);color:var(--c-ink)}
.section--bg-dark .dz-explain--prize{color:var(--c-on-dark)}
.dz-explain--prize strong{font-size:var(--fs-3xl);font-weight:var(--fw-black);color:var(--vt-link)}
.section--bg-dark .dz-explain--prize strong{color:var(--vt-link)}
.dz-explain--meta{margin:0.375rem 0 0;font-size:var(--fs-sm);color:var(--c-muted)}
.section--bg-dark .dz-explain--meta{color:rgba(255,255,255,.6)}

/* Closing call to the stream, with the keeper standing in it. */
.dz-watch{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:end}
@media screen and (min-width:900px){ .dz-watch{grid-template-columns:minmax(0,1fr) auto;gap:2rem} }
.dz-watch--copy{max-width:62ch}
.dz-watch--copy h2{margin:0 0 0.625rem}
.dz-watch--copy p{margin:0 0 1rem;font-size:var(--fs-lg);line-height:1.65;color:var(--c-muted)}
.dz-watch--live{display:inline-flex;align-items:center;gap:0.5rem;margin:0 0 1rem;
  font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-danger)}
.dz-watch--live.is-next{color:var(--c-muted)}
.dz-watch--actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.dz-watch--keeper{margin:0 0 -3.125rem;line-height:0;justify-self:end;pointer-events:none}
.dz-watch--keeper .dz-keeper--img{height:clamp(13.75rem,24vw,20.625rem);width:auto;max-width:none;
  max-height:none;display:block;filter:drop-shadow(0 1rem 1.75rem rgba(10,30,61,.28))}
.dz-explain--watch{overflow:hidden}
@media screen and (max-width:899px){
  .dz-watch--keeper{justify-self:center;margin-bottom:-2.5rem}
  .dz-watch--keeper .dz-keeper--img{height:13.75rem}
}

/* Fact rows on the reward and giveaway pages (the big win page has its own). */
.dz-win-single--meta{margin:0 0 1.125rem}
.dz-win-single--meta div{display:flex;justify-content:space-between;gap:0.875rem;padding:0.4375rem 0;border-bottom:0.0625rem solid rgba(255,255,255,.12);font-size:var(--fs-base)}
.dz-win-single--meta dt{opacity:.7}
.dz-win-single--meta dd{margin:0;font-weight:var(--fw-bold)}

/* ===== _game-page.css ===== */
/* ---------------------------------------------------------------------------
 * Single game page: author strip, player reviews, community wins
 * ------------------------------------------------------------------------ */

/* Author strip — sits tight under the hero, so it is a band not a section. */
.section--strip{padding-top:1.125rem;padding-bottom:1.125rem}
.game-strip{background:var(--c-panel-alt);border-bottom:0.0625rem solid var(--c-border-soft)}
.game-strip--inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.75rem}
.game-strip--author{min-width:0}
.game-strip--who{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:inherit}
.game-strip--who:hover .game-strip--name strong{color:var(--vt-link)}
.game-strip--avatar{flex:0 0 2.875rem;width:2.875rem;height:2.875rem;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--c-cta);color:var(--c-on-cta);font-weight:var(--fw-bold)}
.game-strip--avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.game-strip--text{display:flex;flex-direction:column;gap:0.0625rem;min-width:0}
.game-strip--name{font-size:var(--fs-base)}
.game-strip--role{font-size:var(--fs-sm);color:var(--c-ink-soft)}
.game-strip--meta{display:flex;flex-wrap:wrap;gap:0.25rem 0.875rem;margin:0.5rem 0 0;font-size:var(--fs-xs);color:var(--c-ink-soft)}
.game-strip--checked{display:inline-flex;align-items:center;gap:0.3125rem}

.game-strip--scores{display:flex;flex-wrap:wrap;gap:0.625rem}
.game-strip--score{min-width:9.375rem;padding:0.625rem 1rem;border:0.0625rem solid var(--c-border-soft);
  border-radius:var(--r-md);background:var(--c-panel);text-align:center}
.game-strip--score-label{display:block;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;color:var(--c-ink-soft)}
.game-strip--score-value{display:flex;align-items:baseline;justify-content:center;gap:0.1875rem;margin:0.125rem 0}
.game-strip--score-value strong{font-size:1.625rem;line-height:1;color:var(--vt-link)}
.game-strip--score-max{font-size:var(--fs-xs);color:var(--c-ink-soft)}
.game-strip--score-count{display:block;margin-top:0.25rem;font-size:var(--fs-xs)}
.game-strip--score-empty{display:block;margin:0.375rem 0 0;font-size:var(--fs-sm);color:var(--c-ink-soft)}

/* Player reviews — centred band. */
.game-community--inner{display:grid;gap:1.25rem;grid-template-columns:1fr;align-items:start;
  margin:0 0 1.625rem}
.game-community--summary{padding:1.25rem;border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);
  background:var(--c-panel);text-align:center}
.game-community--average{display:flex;align-items:baseline;justify-content:center;gap:0.25rem}
.game-community--average strong{font-size:2.75rem;line-height:1;color:var(--vt-link)}
.game-community--average span{font-size:var(--fs-sm);color:var(--c-ink-soft)}
.game-community--count{margin:0.375rem 0 0.875rem;font-size:var(--fs-sm);color:var(--c-ink-soft)}
.game-community--bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.375rem}
.game-community--bars li{display:grid;grid-template-columns:2.125rem 1fr 1.75rem;align-items:center;gap:0.5rem}
.game-community--bar-label{display:inline-flex;align-items:center;gap:0.125rem;font-size:var(--fs-xs);color:var(--c-ink-soft)}
.game-community--bar{height:0.4375rem;border-radius:var(--r-pill);background:var(--c-border-soft);overflow:hidden}
.game-community--bar span{display:block;height:100%;background:var(--vt-accent);border-radius:var(--r-pill);color:var(--vt-accent-ink)}
.game-community--bar-n{font-size:var(--fs-xs);color:var(--c-ink-soft);text-align:right}
.game-community--form .review-form{margin:0}
/* ---------------------------------------------------------------------------
 * Player reviews: a slider (the shared .carousel), paged with arrows.
 *
 * Cards in a row take the tallest one's height so the row has a straight
 * baseline, and bodies clamp so one long review does not stretch the rest.
 * ------------------------------------------------------------------------ */
.game-community--reviews{margin:0 0 1.75rem}
.game-community--reviews .carousel--slide{display:flex}
.game-community--reviews .review-card{display:flex;flex-direction:column;width:100%;min-width:0}
.game-community--reviews .review-card--body{flex:1 1 auto;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5}
.game-community--reviews .review-card--title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* Avatar, name, rank and rating sit as one block beside the text. */
.review-card--head{display:flex;align-items:flex-start;gap:0.6875rem}
.review-card--avatar{flex:0 0 2.75rem;width:2.75rem;height:2.75rem;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--c-cta);color:var(--c-on-cta);font-weight:var(--fw-bold)}
.review-card--avatar img{width:100%;height:100%;object-fit:cover}
.review-card--who{min-width:0;display:flex;flex-direction:column;gap:0.125rem}
.review-card--name{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem;font-weight:var(--fw-bold)}
.review-card--rating{display:flex;align-items:center;gap:0.375rem}
.review-card--rating-value{font-size:var(--fs-xs);color:var(--c-ink-soft);font-weight:var(--fw-bold)}
.review-card--meta{font-size:var(--fs-xs);color:var(--c-ink-soft)}

.game-community--inner.is-solo .game-community--form{width:100%}

@media screen and (min-width:64em){
  .game-community--inner{grid-template-columns:18.75rem 1fr}
  .game-community--inner.is-solo{grid-template-columns:1fr}
}

/* Community wins slider. */
.game-wins--cta{margin:1.375rem 0 0}
/* The nav centres on the whole card, which drops it onto the multiplier
   badge sitting at the foot of the artwork. Lift it into the image instead. */
.game-wins .carousel--nav{top:30%}

/* Wins submitted with a clip get a play marker; the artwork is the member's
   own screenshot, so the marker sits over it rather than replacing it. */
.dz-win-card--play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:2.875rem;height:2.875rem;border-radius:50%;
  background:rgba(11,32,54,.72);color:#fff;pointer-events:none}
.dz-win-card--media:hover .dz-win-card--play{background:var(--c-cta)}
.dz-win-single--clip{margin-top:0.75rem}
.dz-win-single--clip iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-lg)}
.dz-win-single--cliplink{margin-top:0.75rem}
.dz-win-single--cliplink .button{display:inline-flex;align-items:center;gap:0.4375rem}

/* Signed-out review form: visible but inert, so the ask is legible before
   anyone commits to signing in. */
.review-form--form.is-locked .star-input label,
.review-form--form.is-locked input,
.review-form--form.is-locked textarea{cursor:not-allowed}
.review-form--form.is-locked textarea{resize:none}
.review-form--locked{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}
.review-form--locked .button[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.review-form--locked-note{margin:0;font-size:var(--fs-sm);color:var(--c-ink-soft)}
.dz-linkbutton{border:0;padding:0;background:none;color:var(--vt-link);font:inherit;
  font-weight:var(--fw-bold);text-decoration:underline;cursor:pointer}
.dz-linkbutton:hover{color:var(--vt-link)}

/* ---------------------------------------------------------------------------
 * The review form as a brand-blue card, full content width.
 *
 * Every foreground on this card was measured against #12325C: white text
 * 12.83:1, help text 10.08:1, the mint action 6.57:1. The house green is only
 * 2.39:1 on this blue, so it is never used here — that pairing is exactly the
 * unreadable-button problem it would reintroduce.
 * ------------------------------------------------------------------------ */
.game-community--form .review-form{margin:0;padding:1.625rem 1.75rem;border:0;
  border-radius:var(--r-lg);background:var(--c-navy-800);color:var(--c-on-dark);
  box-shadow:var(--shadow-card)}
.game-community--form .review-form--title{color:var(--c-on-dark)}
.game-community--form .review-form--title svg{color:#F5B93B}
.game-community--form .review-form--reward{background:var(--c-brand-on-dark);color:var(--c-navy-900)}
.game-community--form .dz-form--full > span,
.game-community--form .review-form--stars legend{color:var(--c-on-dark);font-weight:var(--fw-bold)}
.game-community--form .dz-form--full em{color:var(--c-panel-dark);font-style:normal}
.game-community--form input[type=text],
.game-community--form textarea{background:#fff;color:var(--c-ink);border:0.0625rem solid transparent}
.game-community--form input[type=text]:focus,
.game-community--form textarea:focus{border-color:var(--c-brand-on-dark);outline:0.125rem solid var(--c-brand-on-dark);outline-offset:0.0625rem}
.game-community--form .star-input label{color:rgba(255,255,255,.4)}

/* Signed in: the mint action. Signed out: a muted slate that still reads. */
.game-community--form .review-form--form:not(.is-locked) button[type=submit]{
  background:var(--c-brand-on-dark);color:var(--c-navy-900);border-color:var(--c-brand-on-dark)}
.game-community--form .review-form--form:not(.is-locked) button[type=submit]:hover{
  background:#fff;color:var(--c-navy-900);border-color:#fff}
.game-community--form .review-form--locked .button[disabled]{opacity:1;
  background:#8FA3BC;color:var(--c-navy-900);border-color:#8FA3BC}
.game-community--form .review-form--locked-note{color:var(--c-panel-dark)}
.game-community--form .dz-linkbutton{color:var(--vt-link)}
.game-community--form .dz-linkbutton:hover{color:#fff}
/* A flat tint reads as "disabled" without the washed-out look opacity gives
   a white field sitting on a dark card. */
.game-community--form .review-form--form.is-locked input[type=text],
.game-community--form .review-form--form.is-locked textarea{background:#E7EDF4;opacity:1}
.game-community--form .review-form--done{color:var(--c-on-dark)}

/* ===== _casino-review.css ===== */
/* ---------------------------------------------------------------------------
 * Structured casino review
 * ------------------------------------------------------------------------ */

/* Logo now sits above the CTA, so the editorial column starts flush left. */
.review-hero--action{display:flex;flex-direction:column;gap:0.75rem}
.review-hero--action .review-hero--logo{display:grid;place-items:center;min-height:7.5rem;
  border-radius:var(--r-lg);padding:1.125rem;overflow:hidden}
.review-hero--action .review-hero--logo img{display:block;width:11.25rem;height:4.75rem;max-width:80%;object-fit:contain;object-position:center;margin:0 auto}

.review-block{margin:0 0 2.5rem;scroll-margin-top:5rem}
.review-block > h2{margin:0 0 0.75rem}
.review-block--text > p:last-child{margin-bottom:0}

/* --- fact lists ---------------------------------------------------------
 * Deliberately a <dl> and not a <table>: these are label/value pairs, which is
 * what a description list is for and what an answer engine lifts most cleanly.
 * The chrome is borrowed wholesale from .compare so it reads as the same family
 * as every other data block on the site.
 * --------------------------------------------------------------------- */
.review-facts{margin:1.25rem 0}
.review-facts h3{margin:0 0 0.625rem;font-size:var(--fs-lg)}
.review-facts dl{margin:0;border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);
  background:var(--c-panel-alt);overflow:hidden}
.review-facts dl > div{display:grid;grid-template-columns:1fr;gap:0.125rem;padding:0.6875rem 0.875rem;
  border-bottom:0.0625rem solid var(--c-border-soft)}
.review-facts dl > div:last-child{border-bottom:0}
.review-facts dl > div:hover{background:var(--c-panel)}
.review-facts dt{margin:0;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;color:var(--c-ink-soft)}
.review-facts dd{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.review-facts dd ul{margin:0.25rem 0 0;padding-left:1.125rem;font-weight:var(--fw-normal)}
@media screen and (min-width:40em){
  .review-facts dl > div{grid-template-columns:minmax(0,15em) 1fr;gap:1rem;align-items:baseline}
}

/* Studio grid reuses .provider-dir; only the spacing below it is local. */
.review-studios{margin:1.375rem 0}
.review-studios h3{margin:0 0 0.625rem;font-size:var(--fs-lg)}
.review-studios .provider-dir{margin-bottom:1.375rem}

/* --- gallery ------------------------------------------------------------- */
.review-gallery{position:relative;margin:1.25rem 0}
.review-gallery--track{display:flex;gap:0.75rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none}
.review-gallery--track::-webkit-scrollbar{display:none}
.review-gallery.is-single .review-gallery--track{overflow:visible}
.review-gallery--item{flex:0 0 100%;scroll-snap-align:start;display:block;padding:0;border:0;
  background:none;cursor:zoom-in;border-radius:var(--r-lg);overflow:hidden;line-height:0}
.review-gallery--item img{width:100%;height:auto;display:block}
.review-gallery--nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:grid;place-items:center;width:2.5rem;height:2.5rem;border:0;border-radius:50%;
  background:rgba(10,30,61,.78);color:#fff;cursor:pointer}
.review-gallery--nav:hover{background:var(--vt-accent);color:var(--vt-accent-ink)}
.review-gallery--nav.prev{left:0.625rem} .review-gallery--nav.next{right:0.625rem}
.review-gallery--nav[disabled]{opacity:.3;pointer-events:none}
.review-gallery figcaption{margin-top:0.5rem;font-size:var(--fs-sm);color:var(--c-ink-soft)}
.review-gallery--count{position:absolute;right:0.75rem;bottom:0.75rem;margin:0;padding:0.1875rem 0.625rem;
  border-radius:var(--r-pill);background:rgba(10,30,61,.78);color:#fff;font-size:var(--fs-xs)}

/* --- lightbox ------------------------------------------------------------ */
.dz-lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:rgba(6,18,36,.94);padding:2.5rem 1.25rem}
.dz-lightbox[hidden]{display:none}
.dz-lightbox--img{max-width:min(75rem,92vw);max-height:82vh;width:auto;height:auto;
  border-radius:var(--r-lg);display:block}
.dz-lightbox--cap{margin:0.875rem auto 0;max-width:70ch;text-align:center;color:rgba(255,255,255,.85);
  font-size:var(--fs-sm)}
.dz-lightbox--btn{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:3rem;height:3rem;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.dz-lightbox--btn:hover{background:var(--vt-accent);color:var(--vt-accent-ink)}
.dz-lightbox--btn.prev{left:1.125rem} .dz-lightbox--btn.next{right:1.125rem}
.dz-lightbox--close{position:absolute;top:1.125rem;right:1.125rem;transform:none}
.dz-lightbox--n{position:absolute;top:1.625rem;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:var(--fs-sm)}

/* ---------------------------------------------------------------------------
 * Sticky review CTA
 *
 * position:sticky rather than fixed. A sticky box keeps its place in the flow,
 * so it rides the bottom of the viewport while the review scrolls past and then
 * settles at the end of its container by itself — which is precisely where it
 * should stop, just above "Other casinos worth a look". No scroll maths.
 *
 * Measured on #0A1E3D: name and offer 16.59:1, terms line 11.23:1, rating
 * 8.50:1, and the button is white on brand green at 5.37:1.
 * ------------------------------------------------------------------------ */
/* Sticky is constrained by its containing block's padding box, so the section's
   own bottom padding was parking the bar 50px short of the next band. */
.content--flush-bottom{padding-bottom:0}

.casino-sticky{position:sticky;bottom:0;z-index:60;margin:1.625rem 0 0;
  background:var(--c-navy-900);
  color:var(--c-on-dark);box-shadow:0 -0.5rem 1.625rem rgba(6,18,36,.32);
  opacity:0;visibility:hidden;translate:0 100%;
  transition:opacity .22s var(--ease),translate .22s var(--ease),visibility .22s}
.casino-sticky.is-visible{opacity:1;visibility:visible;translate:0 0}
/* Without JS it simply shows — never leave the CTA unreachable. */
.no-js .casino-sticky{opacity:1;visibility:visible;translate:0 0}
@media (prefers-reduced-motion:reduce){ .casino-sticky{transition:opacity .01s} }
/* Full-bleed bar, container-width contents — same measure as everything else. */
.casino-sticky--inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  max-width:calc(var(--container) + (var(--gutter) * 2));margin:0 auto;
  padding:0.75rem var(--gutter);width:100%}

.casino-sticky--brand{display:flex;align-items:center;gap:0.6875rem;text-decoration:none;
  color:inherit;min-width:0}
.casino-sticky--logo{flex:0 0 auto;display:grid;place-items:center;width:3.5rem;height:2.5rem;
  border-radius:var(--r-md);overflow:hidden;color:#fff;font-weight:var(--fw-bold)}
.casino-sticky--logo img{display:block;width:2.75rem;height:1.75rem;max-width:100%;object-fit:contain;object-position:center;margin:0 auto}
.casino-sticky--name{display:flex;flex-direction:column;gap:0.0625rem;min-width:0}
.casino-sticky--name strong{color:#fff;line-height:1.2}
.casino-sticky--rating{display:flex;align-items:center;gap:0.375rem}
.casino-sticky--rating em{font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--vt-link)}

.casino-sticky--offer{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0.0625rem}
.casino-sticky--offer strong{color:#fff;font-size:var(--fs-base);line-height:1.2}
/* The bar is a fixed plate, so its second line takes the dim on-plate ink.
   It had a border token, which is a 14% white line and not readable as text. */
.casino-sticky--offer span{font-size:var(--fs-xs);color:var(--vt-on-plate-dim)}

.casino-sticky--action{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:0.1875rem}
.casino-sticky--action .button{margin:0;white-space:nowrap;padding:0.6875rem 1.625rem}
.casino-sticky--action small{font-size:0.625rem;line-height:1.3;color:rgba(255,255,255,.6);
  max-width:22ch;text-align:center}

/* Below the fold on a phone the offer line is the first thing to drop. */
/* On a phone there is no room for a three-column row, so the bar centres as a
   single group and the secondary detail drops rather than wrapping awkwardly. */
@media screen and (max-width:47.99em){
  .casino-sticky--inner{gap:0.625rem;padding:0.625rem var(--gutter);
    justify-content:center;flex-wrap:nowrap}
  .casino-sticky--offer span,
  .casino-sticky--action small{display:none}
  .casino-sticky--rating{display:none}
  .casino-sticky--logo{width:2.75rem;height:2.125rem}
  .casino-sticky--brand{flex:0 0 auto}
  .casino-sticky--offer{flex:0 1 auto;text-align:center;align-items:center}
  .casino-sticky--action{flex:0 0 auto}
  .casino-sticky--offer strong{font-size:var(--fs-sm);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
}

/* Very narrow: the name goes, the logo, offer and button stay centred. */
@media screen and (max-width:29.99em){
  .casino-sticky--name{display:none}
  .casino-sticky--inner{gap:0.75rem}
}

/* ---------------------------------------------------------------------------
 * The test record
 *
 * Brand navy so it reads as evidence rather than as another content block.
 * Measured on #12325C: labels and values 12.83:1, lead 10.08:1, links 6.57:1.
 * ------------------------------------------------------------------------ */
.tested{margin:0 0 1.625rem;padding:1.5rem 1.625rem;border-radius:var(--r-lg);
  background:var(--c-navy-800);color:var(--c-on-dark)}
.tested--title{margin:0 0 0.75rem;color:#fff;font-size:var(--fs-xl)}
.tested--lead{margin:0 0 1rem;padding-bottom:1rem;font-size:var(--fs-sm);line-height:1.6;
  color:var(--c-panel-dark);border-bottom:0.0625rem solid rgba(255,255,255,.16)}
.tested--lead strong{color:#fff}
.tested--lead a,.tested--rows a{color:var(--vt-link)}
.tested--lead a:hover,.tested--rows a:hover{color:#fff}

.tested--rows{margin:0;display:flex;flex-direction:column}
.tested--rows > div{display:grid;grid-template-columns:1fr;gap:0.125rem;padding:0.625rem 0;
  border-bottom:0.0625rem solid rgba(255,255,255,.1)}
.tested--rows > div:last-child{border-bottom:0;padding-bottom:0}
.tested--rows dt{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#fff}
.tested--rows dd{margin:0;font-size:var(--fs-sm);color:var(--c-panel-dark)}
@media screen and (min-width:40em){
  .tested--rows > div{grid-template-columns:minmax(0,16em) 1fr;gap:1.125rem;align-items:baseline}
}

/* ===== _seo-hub.css ===== */
/* ---------------------------------------------------------------------------
 * Long-form written sections
 *
 * Every written section on the site is one component: the section head
 * (.vt-sec--head) on top, then the data block and the prose (.hub-copy) at
 * the full content width. These are the prose details that component needs.
 * ------------------------------------------------------------------------ */

.seo-section--block{margin:0 0 1.75rem}

/* Lists inside long-form copy: the browser default indent reads as a quote.
   The generated link rows are lists too and keep their own reset. */
.hub-copy ul,
.hub-copy ol{margin:0 0 1rem;padding-left:1.375rem;line-height:1.68}
.hub-copy li{margin:0 0 0.4375rem}
.hub-copy li:last-child{margin-bottom:0}

/* Glossaries: term and definition on one line where there is room, so the list
   scans like a reference rather than a stack of paragraphs. */
.hub-copy dl{margin:0 0 1rem;display:grid;gap:0}
.hub-copy dt{font-weight:var(--fw-bold);padding:0.6875rem 0 0}
.hub-copy dd{margin:0 0 0.6875rem;padding:0 0 0.6875rem;line-height:1.6;
  color:var(--c-ink-soft);border-bottom:0.0625rem solid var(--c-border-soft)}
.hub-copy dd:last-child{border-bottom:0}
@media screen and (min-width:48em){
  .hub-copy dl{grid-template-columns:minmax(0,14.375rem) minmax(0,1fr);column-gap:1.625rem}
  .hub-copy dt{padding:0.6875rem 0}
  .hub-copy dd{margin:0;padding:0.6875rem 0}
  .hub-copy dt{border-top:0.0625rem solid var(--c-border-soft)}
  .hub-copy dd{border-bottom:0;border-top:0.0625rem solid var(--c-border-soft)}
}

/* --- new-casino windows -------------------------------------------------- */
.new-windows{display:grid;gap:1rem;grid-template-columns:1fr}
@media screen and (min-width:64em){ .new-windows{grid-template-columns:repeat(3,minmax(0,1fr))} }
.new-window{padding:1.125rem 1.25rem;border-radius:var(--r-lg);background:rgba(255,255,255,.07);
  border:0.0625rem solid rgba(255,255,255,.12)}
.new-window--title{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;
  margin:0 0 0.375rem;font-size:var(--fs-base);color:#fff}
.new-window--count{flex:0 0 auto;padding:0.125rem 0.5625rem;border-radius:var(--r-pill);
  background:var(--c-brand-on-dark);color:var(--c-navy-900);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.new-window--blurb{margin:0 0 0.75rem;font-size:var(--fs-sm);color:rgba(255,255,255,.72);line-height:1.5}
.new-window--list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5625rem}
.new-window--list li{display:grid;gap:0.125rem;padding-bottom:0.5625rem;border-bottom:0.0625rem solid rgba(255,255,255,.1)}
.new-window--list li:last-child{border-bottom:0;padding-bottom:0}
.new-window--meta,.new-window--list time{font-size:var(--fs-xs);color:rgba(255,255,255,.66)}

/* --- comparison tables --------------------------------------------------- */
.compare-wrap{overflow-x:auto;border-radius:var(--r-lg);border:0.0625rem solid var(--c-border-soft);background:var(--c-panel-alt)}
.section--bg-dark .compare-wrap{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.compare{width:100%;min-width:45rem;border-collapse:collapse;font-size:var(--fs-sm)}
.compare th,.compare td{padding:0.6875rem 0.875rem;text-align:left;vertical-align:middle;
  border-bottom:0.0625rem solid var(--c-border-soft)}
.compare thead th{background:var(--c-panel);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;color:var(--c-ink-soft);white-space:nowrap}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare tbody tr:hover{background:var(--c-panel)}
.section--bg-dark .compare th,.section--bg-dark .compare td{border-color:var(--vt-line);color:var(--vt-text)}
.section--bg-dark .compare thead th{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}
.section--bg-dark .compare tbody tr:hover{background:rgba(255,255,255,.06)}

.compare--casino{display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;
  color:inherit;font-weight:var(--fw-bold)}
.compare--casino:hover{color:var(--vt-link)}
.section--bg-dark .compare--casino:hover{color:var(--vt-link)}
.compare--logo{flex:0 0 auto;display:grid;place-items:center;width:2.75rem;height:2rem;
  border-radius:0.25rem;background:var(--brand,var(--c-navy-800));overflow:hidden}
.compare--logo img{display:block;width:2.375rem;height:1.625rem;max-width:100%;object-fit:contain;object-position:center;margin:0 auto}
.compare--rank{display:inline-grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;
  background:var(--c-panel);color:var(--c-ink-soft);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.section--bg-dark .compare--rank{background:rgba(255,255,255,.12);color:#fff}
.compare--stack{display:flex;flex-wrap:wrap;gap:0.375rem 0.75rem}

/* Same trap as `.is-on-dark` above, inverted: the plate token as ink on the
   raised token as surface, both dark, 1.10:1. Every "Not recorded" cell in
   the comparison tables was blank. */
.compare--pill{display:inline-block;padding:0.1875rem 0.625rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);white-space:nowrap;
  background:var(--vt-hover);color:var(--vt-text)}
/* Structures that favour the player read green; sticky reads as a caution. */
.compare--pill.is-no_wagering{background:#12795A;color:#fff}
.compare--pill.is-non_sticky{background:#CDEFE1;color:#0B5340}
.compare--pill.is-sticky{background:#FBE3C7;color:#7A4A10}
.section--bg-dark .compare--pill.is-non_sticky{background:#4ECFA0;color:var(--c-navy-900)}

/* --- slot rail ----------------------------------------------------------- */
.seo-slot-rail{display:flex;gap:0.875rem;overflow-x:auto;padding-bottom:0.75rem;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.seo-slot-rail .slot-tile{flex:0 0 13.125rem;scroll-snap-align:start}

/* --- FAQ ----------------------------------------------------------------- */
.faq-list{display:flex;flex-direction:column;gap:0.625rem}
.faq-item{border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);background:var(--c-panel-alt);overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;
  padding:0.9375rem 1.125rem;cursor:pointer;font-weight:var(--fw-bold);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--vt-link)}
.faq-item summary svg{flex:0 0 auto;transition:rotate .18s ease}
.faq-item[open] summary svg{rotate:180deg}
.faq-item--answer{padding:0 1.125rem 1rem}
.faq-item--answer p{margin:0;line-height:1.68;color:var(--c-ink-soft)}

/* --- link hub ------------------------------------------------------------ */
.hub-grid{display:grid;gap:1.125rem;grid-template-columns:1fr}
@media screen and (min-width:40em){ .hub-grid{grid-template-columns:repeat(2,1fr)} }
@media screen and (min-width:64em){ .hub-grid{grid-template-columns:repeat(3,1fr)} }
.hub-group{padding:1.25rem;border-radius:var(--r-lg);background:var(--vt-surface);
  border:0.0625rem solid rgba(255,255,255,.12)}
.hub-group h3{margin:0 0 0.375rem;font-size:var(--fs-base);color:var(--vt-text)}
.hub-group--blurb{margin:0 0 0.75rem;font-size:var(--fs-sm);color:var(--vt-text-dim);line-height:1.5}
.hub-group--links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.4375rem}
/* Scoped past _base.css's `.section--bg-dark a:not(.button)`, which is 0-2-1
   and was turning every pill mint. White at rest, brand green on hover. */
.hub-group--links a{display:inline-block;padding:0.3125rem 0.6875rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);font-size:var(--fs-sm);text-decoration:none}
.section--bg-dark .hub-group--links a,
.hub-group--links a{color:var(--vt-text)}
.section--bg-dark .hub-group--links a:hover,
.hub-group--links a:hover{background:var(--vt-hover);color:var(--vt-text)}

/* --- on this page -------------------------------------------------------- */
.seo-toc{padding:1.375rem 1.5rem;border-radius:var(--r-lg);background:var(--c-panel-alt);
  border:0.0625rem solid var(--c-border-soft)}
.seo-toc h2,.seo-toc--title{margin:0 0 0.75rem;font-size:var(--fs-base);font-weight:var(--fw-bold)}
.seo-toc--list{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem 1.125rem;
  grid-template-columns:1fr}
@media screen and (min-width:40em){ .seo-toc--list{grid-template-columns:repeat(2,1fr)} }
@media screen and (min-width:64em){ .seo-toc--list{grid-template-columns:repeat(3,1fr)} }
.seo-toc--list a{display:block;padding:0.4375rem 0.75rem;border-radius:var(--r-md);
  background:var(--c-panel);color:var(--c-ink);font-size:var(--fs-sm);text-decoration:none}
.seo-toc--list a:hover{background:var(--c-cta);color:var(--c-on-cta)}
.seo-toc--num{display:inline-block;min-width:1.25rem;color:var(--vt-link);font-weight:var(--fw-bold)}
.seo-toc--list a:hover .seo-toc--num{color:#fff}

/* ---------------------------------------------------------------------------
 * Casino comparison rails
 *
 * Fixed card width so the row has a steady rhythm, and equal heights so the
 * two buttons line up across the rail — the actions are the point of the card
 * and they should not wander vertically as the copy above them varies.
 * ------------------------------------------------------------------------ */
.casino-rail{display:flex;gap:0.875rem;overflow-x:auto;overflow-y:hidden;
  padding:0.125rem 0.125rem 0.875rem;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--c-border) transparent;
  -webkit-overflow-scrolling:touch}
.casino-rail::-webkit-scrollbar{height:0.5rem}
.casino-rail::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--r-pill)}
.section--bg-dark .casino-rail{scrollbar-color:rgba(255,255,255,.35) transparent}
.section--bg-dark .casino-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
.casino-rail:focus-visible{outline:0.125rem solid var(--c-brand);outline-offset:0.1875rem}

.rail-card{flex:0 0 16.375rem;scroll-snap-align:start;display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel-alt);
  border:0.0625rem solid var(--c-border-soft);box-shadow:var(--shadow-card)}

.rail-card--logo{position:relative;display:grid;place-items:center;height:6rem;
  background:var(--brand,var(--c-navy-800));text-decoration:none}
.rail-card--logo img{display:block;width:9.375rem;height:3.5rem;max-width:80%;object-fit:contain;object-position:center;margin:0 auto}
.rail-card--wordmark{color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-lg);
  padding:0 0.75rem;text-align:center}
.rail-card--flag{position:absolute;top:0.5rem;left:0.5rem;padding:0.1875rem 0.5625rem;border-radius:var(--r-pill);
  background:rgba(10,30,61,.78);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold)}

.rail-card--body{display:flex;flex-direction:column;gap:0.5rem;padding:0.875rem;flex:1 1 auto}
.rail-card--name{margin:0;font-size:var(--fs-base)}
.rail-card--name a{color:var(--c-ink);text-decoration:none}
.rail-card--name a:hover{color:var(--vt-link)}
.rail-card--rating{display:flex;align-items:center;gap:0.4375rem}
.rail-card--rating span{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--c-ink-soft)}
.rail-card--offer{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--vt-link)}

.rail-card--stats{margin:0;display:flex;flex-direction:column;gap:0.3125rem}
.rail-card--stats > div{display:flex;align-items:baseline;justify-content:space-between;gap:0.625rem;
  padding-bottom:0.3125rem;border-bottom:0.0625rem dashed var(--c-border-soft)}
.rail-card--stats > div:last-child{border-bottom:0;padding-bottom:0}
.rail-card--stats dt{margin:0;font-size:var(--fs-xs);color:var(--c-ink-soft)}
.rail-card--stats dd{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-bold);text-align:right}

/* Pinned to the foot so the buttons align across every card in the rail. */
.rail-card--actions{margin-top:auto;display:flex;flex-direction:column;gap:0.4375rem;padding-top:0.25rem}
.rail-card--actions .button{margin:0;padding:0.5625rem 0.75rem;font-size:var(--fs-sm)}
.rail-card--terms{margin:0;font-size:0.625rem;line-height:1.4;color:var(--c-ink-soft)}

/* ---------------------------------------------------------------------------
 * Dark SEO sections drop the habitat scene.
 *
 * The scenic plate reads well behind a short headline, but these sections run
 * to several hundred words over a comparison rail, and photographic detail
 * moving under a wall of body copy fights it. Flat brand navy instead — the
 * heroes and the other front page bands keep their scenes.
 * ------------------------------------------------------------------------ */
/* Keyed to the opt-out class rather than to specific sections, so it matches
   whatever habitat.php skipped — the two stay in step by definition. */
.section--bg-dark.is-flat{background:var(--c-navy-900)}
.section--bg-dark.is-flat::before,
.section--bg-dark.is-flat::after{content:none}

/* The rail card is a light surface inside sections of any tone, so its buttons
   are pinned to card colours rather than inheriting the section's. Measured on
   white: solid 5.37:1, hollow label 5.37:1, hollow border visible at rest. */
.rail-card--actions .button{background:var(--c-cta);color:var(--c-on-cta);border:0.0625rem solid var(--c-cta)}
.rail-card--actions .button:hover{background:var(--c-cta-hover);border-color:var(--c-cta-hover);color:var(--c-on-cta)}
.rail-card--actions .button.hollow{background:transparent;color:var(--vt-link);border-color:var(--c-border)}
.rail-card--actions .button.hollow:hover{background:var(--c-cta);border-color:var(--vt-accent-edge);color:var(--c-on-cta)}

/* ---------------------------------------------------------------------------
 * Taxonomy hub: every term as a card
 * ------------------------------------------------------------------------ */
.hub-terms{display:grid;gap:0.875rem;grid-template-columns:1fr}
@media screen and (min-width:40em){ .hub-terms{grid-template-columns:repeat(2,1fr)} }
@media screen and (min-width:64em){ .hub-terms{grid-template-columns:repeat(3,1fr)} }
.hub-term{display:flex;flex-direction:column;gap:0.375rem;padding:1.125rem 1.25rem;
  border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);background:var(--c-panel-alt);
  text-decoration:none;color:var(--c-ink);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.hub-term:hover{border-color:var(--vt-line-strong);transform:translateY(-0.125rem);color:var(--c-ink)}
.hub-term--head{display:flex;align-items:baseline;justify-content:space-between;gap:0.625rem}
.hub-term--head strong{font-size:var(--fs-lg)}
.hub-term:hover .hub-term--head strong{color:var(--vt-link)}
.hub-term--head em{flex:0 0 auto;font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  padding:0.125rem 0.5625rem;border-radius:var(--r-pill);background:var(--c-panel);color:var(--c-ink-soft)}
.hub-term--desc{font-size:var(--fs-sm);line-height:1.55;color:var(--c-ink-soft)}
.hub-term--meta{font-size:var(--fs-xs);color:var(--vt-link);font-weight:var(--fw-bold)}
.hub-grid .hub-group h3 a{color:var(--vt-text);text-decoration:none}
.hub-grid .hub-group h3 a:hover{color:var(--vt-link)}

/* ---------------------------------------------------------------------------
 * Provider hub cards
 *
 * Provider logos ship as white/light SVGs — the same asset every casino uses
 * against its own brand colour — so the card needs a dark chip behind the
 * logo. The logo sits inside a navy panel, the studio name and game count sit
 * on a white card underneath. Same pattern as the casino tile brand strip.
 * ------------------------------------------------------------------------ */
.hub-terms--providers{grid-template-columns:1fr}
@media screen and (min-width:40em){ .hub-terms--providers{grid-template-columns:repeat(2,1fr)} }
@media screen and (min-width:64em){ .hub-terms--providers{grid-template-columns:repeat(3,1fr)} }
@media screen and (min-width:96em){ .hub-terms--providers{grid-template-columns:repeat(4,1fr)} }

.hub-provider{display:flex;flex-direction:column;background:var(--c-panel-alt);
  border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:var(--c-ink);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.hub-provider:hover{transform:translateY(-0.125rem);border-color:var(--vt-line-strong);
  box-shadow:0 0.75rem 1.625rem rgba(10,30,61,.12);color:var(--c-ink)}

.hub-provider--logo{display:grid;place-items:center;min-height:7.5rem;padding:1.375rem 1.5rem;
  background:var(--c-navy-800)}
.hub-provider--logo img{max-width:78%;max-height:4.75rem;width:auto;height:auto;
  object-fit:contain;filter:none}
.hub-provider--wordmark{color:#fff;font-size:var(--fs-xl);font-weight:var(--fw-black);
  letter-spacing:.02em;text-align:center;line-height:1.2}

.hub-provider--name{display:block;padding:0.875rem 1.125rem 0.25rem;
  font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-ink)}
.hub-provider--count{display:block;padding:0 1.125rem 1rem;
  font-size:var(--fs-sm);color:var(--vt-link);font-weight:var(--fw-bold)}

/* ===== _authors.css ===== */
/* ==========================================================================
   Editorial authors — bylines, cards, profiles
   ========================================================================== */

.byline{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;flex-wrap:wrap;
  margin:0 0 1rem;padding:0.625rem 0;border-top:0.0625rem solid rgba(255,255,255,.14);
  border-bottom:0.0625rem solid rgba(255,255,255,.14)}
.byline--who{display:flex;align-items:center;gap:0.625rem;text-decoration:none;color:inherit}
.byline--who:hover{text-decoration:none}
.byline--who:hover .byline--name strong{text-decoration:underline}
.byline--avatar{flex:0 0 2.375rem;width:2.375rem;height:2.375rem;border-radius:50%;overflow:hidden;
  background:var(--c-navy-900);display:grid;place-items:center;color:var(--c-on-dark)}
.byline--avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.byline--initial{font-weight:var(--fw-black)}
.byline--text{display:flex;flex-direction:column;line-height:1.3}
.byline--name{font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.byline--name strong{color:var(--c-on-dark)}
.byline--role{font-size:var(--fs-xs);color:rgba(255,255,255,.62)}
.byline--meta{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;
  font-size:var(--fs-xs);color:rgba(255,255,255,.62)}
.byline--checked-by{display:inline-flex;align-items:center;gap:0.375rem}
.byline--checked-by a{color:var(--vt-link)}

/* On a light surface the byline flips to ink. */
.content .byline,.section:not(.section--bg-dark) .byline{
  border-color:var(--c-border-soft)}
.content .byline .byline--name,.section:not(.section--bg-dark) .byline .byline--name{color:var(--c-muted)}
.content .byline .byline--name strong,
.section:not(.section--bg-dark) .byline .byline--name strong{color:var(--c-ink)}
.content .byline .byline--role,.content .byline--meta,
.section:not(.section--bg-dark) .byline .byline--role,
.section:not(.section--bg-dark) .byline--meta{color:var(--c-muted)}
.content .byline--checked-by a,
.section:not(.section--bg-dark) .byline--checked-by a{color:var(--vt-link)}

.author-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr))}
.author-card{display:flex;flex-direction:column;background:var(--c-panel);
  border:0.0625rem solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.author-card--art{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/3;
  background:linear-gradient(to bottom,var(--c-navy-800),var(--c-navy-900));overflow:hidden}
.author-card--art img{width:auto;height:100%;object-fit:contain;object-position:bottom center}
.author-card--initial{display:grid;place-items:center;width:100%;height:100%;
  font-size:var(--fs-4xl);font-weight:var(--fw-black);color:rgba(255,255,255,.3)}
.author-card--body{padding:0.875rem 1rem 1rem}
.author-card--name{margin:0;font-size:var(--fs-xl)}
.author-card--name a{color:var(--c-ink);text-decoration:none}
.author-card--role{margin:0.125rem 0 0;font-size:var(--fs-sm);color:var(--vt-link)}
.author-card--cred{margin:0.5rem 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--c-muted)}
.author-card--topics{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.625rem 0 0;padding:0;list-style:none}
.author-card--topics li{padding:0.1875rem 0.5625rem;border:0.0625rem solid var(--c-border);border-radius:var(--r-pill);
  font-size:var(--fs-xs);color:var(--c-muted-dark)}
.author-card--count{margin:0.625rem 0 0;font-size:var(--fs-xs);color:var(--c-muted)}

.author-head{display:flex;align-items:center;gap:1.375rem;flex-wrap:wrap}
.author-head--art{flex:0 0 auto;width:8.125rem;height:8.125rem;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-navy-900);display:grid;place-items:center}
.author-head--art img{width:100%;height:100%;object-fit:cover;object-position:top center}
.author-head--initial{font-size:var(--fs-4xl);font-weight:var(--fw-black);color:rgba(255,255,255,.3)}
.author-head--body{flex:1 1 20rem;min-width:0}
.author-head--body h1{margin:0}
.author-head--role{margin:0.25rem 0 0;font-size:var(--fs-xl);color:var(--vt-link)}
.author-head--cred{margin:0.5rem 0 0;max-width:62ch;color:rgba(255,255,255,.82)}
.author-head--facts{display:flex;flex-wrap:wrap;gap:0.625rem;margin:1rem 0 0;padding:0}
.author-head--facts > div{padding:0.5rem 0.875rem;background:rgba(255,255,255,.07);border-radius:var(--r-md)}
.author-head--facts dt{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.6)}
.author-head--facts dd{margin:0.125rem 0 0;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-on-dark)}
.author-head--links{display:flex;flex-wrap:wrap;gap:0.875rem;margin:0.875rem 0 0;font-size:var(--fs-sm)}

.author-topics{padding:1rem 1.125rem;background:var(--c-panel);border-radius:var(--r-lg)}
.author-topics h2{margin:0 0 0.625rem;font-size:var(--fs-lg)}
.author-topics ul{margin:0;padding-left:1.125rem}
.author-topics li{margin-bottom:0.3125rem;color:var(--c-muted)}

/* Credited work as cards rather than a table: a casino shows its logo panel,
   a game its poster, a guide its image — the same shapes used elsewhere on the
   site, so the author page reads as a portfolio and not a database dump. */
.work-grid{display:grid;gap:0.875rem;grid-template-columns:repeat(auto-fill,minmax(13.75rem,1fr))}
.work-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-bg);color:var(--c-ink);text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.work-card:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card);
  color:var(--c-ink);text-decoration:none}
.work-card--art{position:relative;display:block;overflow:hidden;background:var(--c-navy-900)}
.work-card--art img{width:100%;height:100%;object-fit:cover;display:block}
.work-card.is-game .work-card--art{aspect-ratio:3/4}
.work-card.is-casino .work-card--art,
.work-card.is-guide .work-card--art,
.work-card.is-post .work-card--art{aspect-ratio:16/10}
.work-card--logo{display:grid;place-items:center;width:100%;height:100%;padding:1.125rem;
  background:var(--brand,var(--c-navy-800))}
.work-card--logo img{width:auto;max-width:78%;height:auto;max-height:64%;object-fit:contain}
.work-card--wordmark{font-size:var(--fs-xl);font-weight:var(--fw-black);color:#fff;text-align:center}
.work-card--placeholder{display:grid;place-items:center;width:100%;height:100%;
  color:rgba(255,255,255,.25)}
.work-card--kind{position:absolute;top:0.5rem;left:0.5rem;padding:0.1875rem 0.5625rem;border-radius:var(--r-pill);
  background:rgba(10,30,61,.82);color:#fff;font-size:0.6875rem;font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em}
.work-card--body{display:flex;flex-direction:column;gap:0.25rem;padding:0.6875rem 0.8125rem 0.8125rem}
.work-card--title{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.3;color:var(--c-ink)}
.work-card--meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--c-muted)}
.work-card--meta em{font-style:normal}
.work-card--date{font-size:var(--fs-xs);color:var(--c-muted)}

@media screen and (max-width:639px){
  .byline{align-items:flex-start;flex-direction:column;gap:0.5rem}
  .author-head--art{width:6rem;height:6rem}
}

/* Each credit group carries its own count and pager. */
.work-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.375rem 1rem;margin-bottom:1rem}
.work-head .section--title{margin:0}
.work-head--meta{margin:0;font-size:var(--fs-sm);color:var(--c-ink-soft)}
.section--bg-dark .work-head--meta{color:rgba(254,254,254,.72)}

/* ---------------------------------------------------------------------------
 * Byline as a standalone card
 *
 * The default byline is built for the dark hero — translucent white rules that
 * vanish on a light background. This variant sits above the article body, so it
 * gets a real surface. Measured on #EEF3F8: name 15.65:1, role and meta
 * 4.89:1, links 4.81:1.
 * ------------------------------------------------------------------------ */
.byline--card{margin:0 0 1.375rem;padding:0.875rem 1.125rem;border:0.0625rem solid var(--c-border-soft);
  border-radius:var(--r-lg);background:var(--c-panel)}
.byline--card .byline--avatar{flex:0 0 2.875rem;width:2.875rem;height:2.875rem}
.byline--card .byline--name{font-size:var(--fs-base);color:var(--c-ink)}
.byline--card .byline--name strong{color:var(--c-ink)}
.byline--card .byline--role{color:var(--c-ink-soft)}
.byline--card .byline--meta{color:var(--c-ink-soft)}
.byline--card .byline--checked-by{color:var(--c-ink-soft)}
.byline--card .byline--checked-by svg{color:currentColor}
.byline--card .byline--date{color:var(--c-ink-soft)}
.byline--card a{color:var(--vt-link)}
.byline--card a:hover{color:var(--vt-link)}

@media screen and (max-width:39.99em){
  .byline--card{flex-direction:column;align-items:flex-start;gap:0.625rem}
}

/* Archive byline needs air above it — the intro was landing on its top rule. */
/* No rules above or below on an archive: the hero already separates the intro
   from the byline with space, and two hairlines made it look like a table row. */
.byline--archive{margin-top:1.25rem;padding:0;border-top:0;border-bottom:0}
.hero--updated{display:flex;align-items:center;gap:0.4375rem;margin:0 0 0.875rem;
  font-size:var(--fs-sm);color:rgba(255,255,255,.72)}
.hero--updated time{color:inherit}

/* ===== _store-events.css ===== */
/* ==========================================================================
   Store, giveaways, casino boards, front-page community sections
   ========================================================================== */
.hero--store,.hero--giveaways,.hero--boards{padding:1.375rem 0 2.375rem}

/* Header auth control ------------------------------------------------------ */
.header--account{display:inline-flex;align-items:center;gap:0.5625rem;padding:0.3125rem 0.75rem 0.3125rem 0.3125rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);color:var(--c-on-dark);text-decoration:none;transition:background var(--dur) var(--ease)}
.header--account:hover{background:rgba(255,255,255,.18);color:var(--c-on-dark);text-decoration:none}
.header--account img{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover;flex:0 0 1.75rem}
.header--account-name{font-size:var(--fs-base);font-weight:var(--fw-bold);max-width:7.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header--account-rank{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--rank-color);flex:0 0 0.5rem}
.header--login{white-space:nowrap}
@media screen and (max-width:639px){ .header--account-name{display:none} }

/* Login modal -------------------------------------------------------------- */
.dz-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.25rem}
.dz-modal[hidden]{display:none}
.dz-modal--backdrop{position:absolute;inset:0;background:rgba(5,12,24,.72);backdrop-filter:blur(0.1875rem)}
.dz-modal--panel{position:relative;width:100%;max-width:27.5rem;padding:2rem 1.75rem;border-radius:var(--r-lg);
  background:var(--c-navy-800);color:var(--c-on-dark);box-shadow:var(--shadow-pop);text-align:center;
  max-height:90vh;overflow-y:auto}
.dz-modal--close{position:absolute;top:0.75rem;right:0.75rem;display:grid;place-items:center;width:2.125rem;height:2.125rem;
  border:0;border-radius:50%;background:rgba(255,255,255,.1);color:var(--c-on-dark)}
.dz-modal--close:hover{background:rgba(255,255,255,.2)}
.dz-modal--title{color:var(--c-on-dark);margin:0 0 0.5rem;font-size:var(--fs-3xl);font-weight:var(--fw-bold);line-height:1.25}
.dz-modal--lead{font-size:var(--fs-base);color:rgba(255,255,255,.78);margin-bottom:1.25rem}
.dz-modal--legal{margin:1rem 0 0;font-size:var(--fs-xs);color:rgba(255,255,255,.55)}
.dz-modal .dz-login{margin:0}

/* Store -------------------------------------------------------------------- */
.dz-balance{display:flex;flex-wrap:wrap;align-items:center;gap:0.875rem;margin-top:1.25rem;padding:0.875rem 1.125rem;
  background:rgba(255,255,255,.08);border-radius:var(--r-lg)}
.dz-balance img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover}
.dz-balance--who{display:flex;flex-direction:column;gap:0.25rem;align-items:flex-start;flex:1 1 auto}
.dz-balance--points{display:flex;align-items:baseline;gap:0.375rem}
.dz-balance--points strong{font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:1;color:var(--c-cta)}
.dz-balance--points span{font-size:var(--fs-sm);opacity:.75}

.bonus-filters--light .bonus-filters--button{border-color:var(--c-border);color:var(--c-ink)}
.bonus-filters--light .bonus-filters--button span{background:var(--c-border)}
.bonus-filters--light .bonus-filters--button:hover{border-color:var(--vt-line-strong);color:var(--vt-link)}
.bonus-filters--light .bonus-filters--button[aria-pressed=true]{background:var(--c-navy-800);border-color:var(--c-navy-800);color:var(--c-on-dark)}
.bonus-filters--light .bonus-filters--button[aria-pressed=true] span{background:rgba(255,255,255,.2)}

.dz-store-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
@media screen and (min-width:640px){ .dz-store-grid{grid-template-columns:repeat(3,1fr)} }
@media screen and (min-width:1024px){ .dz-store-grid{grid-template-columns:repeat(4,1fr)} }
.dz-store-item[hidden]{display:none}

.dz-reward{display:flex;flex-direction:column;height:100%;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.dz-reward:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card)}
.dz-reward.is-inactive{opacity:.55}
.dz-reward--media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--c-navy-900)}
.dz-reward--media img{width:100%;height:100%;object-fit:cover}
.dz-reward--placeholder{display:grid;place-items:center;width:100%;height:100%;color:rgba(255,255,255,.22)}
.dz-reward--flag{position:absolute;top:0.5rem;right:0.5rem;padding:0.1875rem 0.5625rem;border-radius:var(--r-sm);font-size:0.6875rem;font-weight:var(--fw-bold)}
.dz-reward--flag.is-out{background:var(--c-navy-900);color:#fff}
.dz-reward--flag.is-low{background:var(--c-gold);color:var(--c-navy-900)}
.dz-reward--body{display:flex;flex-direction:column;gap:0.4375rem;padding:0.875rem;flex:1 1 auto}
.dz-reward--name{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0;line-height:1.25}
.dz-reward--name a{color:var(--c-ink)}
.dz-reward--name a:hover{color:var(--vt-link);text-decoration:none}
.dz-reward--excerpt{font-size:var(--fs-sm);color:var(--c-muted);margin:0}
.dz-reward--cost{display:flex;align-items:baseline;gap:0.3125rem}
.dz-reward--points{font-size:var(--fs-3xl);font-weight:var(--fw-black);line-height:1;color:var(--vt-link)}
.dz-reward--unit{font-size:var(--fs-xs);color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em}
.dz-reward--gate{font-size:var(--fs-xs);color:var(--c-muted)}
.dz-reward--action{margin-top:auto;padding-top:0.5rem}
.dz-reward.is-compact .dz-reward--media{aspect-ratio:16/10}
.dz-reward.is-compact .dz-reward--body{padding:0.625rem}
.dz-reward.is-compact .dz-reward--name{font-size:var(--fs-base)}
.dz-reward.is-compact .dz-reward--points{font-size:var(--fs-xl)}
.dz-reward-single--media{border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.07);min-height:13.75rem}
.dz-reward-single--media img{width:100%;height:auto;display:block}
.dz-reward-single--cost{display:flex;align-items:baseline;gap:0.5rem;margin:0.625rem 0 0.875rem}
.dz-reward-single--cost strong{font-size:2.75rem;font-weight:var(--fw-black);line-height:1;color:var(--c-cta)}
.dz-reward-single--cost span{font-size:var(--fs-lg);opacity:.75}
.dz-redeem-form{margin-top:0.375rem}

/* Giveaways ---------------------------------------------------------------- */
.dz-giveaway-grid{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@media screen and (min-width:640px){ .dz-giveaway-grid{grid-template-columns:repeat(2,1fr)} }
@media screen and (min-width:1024px){ .dz-giveaway-grid{grid-template-columns:repeat(3,1fr)} }
.dz-giveaway{display:flex;flex-direction:column;height:100%;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.dz-giveaway:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card)}
.dz-giveaway.is-featured{outline:0.125rem solid var(--c-gold);outline-offset:-0.125rem}
.dz-giveaway.is-closed,.dz-giveaway.is-drawn{opacity:.82}
.dz-giveaway--media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-navy-900)}
.dz-giveaway--media img{width:100%;height:100%;object-fit:cover}
.dz-giveaway--status{position:absolute;top:0.5625rem;left:0.5625rem;padding:0.25rem 0.625rem;border-radius:var(--r-pill);
  background:var(--c-cta);color:var(--c-on-cta);font-size:0.6875rem;font-weight:var(--fw-bold)}
.dz-giveaway.is-closed .dz-giveaway--status{background:var(--vt-muted-solid);color:#fff}
.dz-giveaway.is-drawn .dz-giveaway--status{background:var(--vt-live-solid);color:#fff}
.dz-giveaway--status.is-inline{position:static;display:inline-block;margin-bottom:0.625rem}
.dz-giveaway--body{display:flex;flex-direction:column;gap:0.5rem;padding:1rem;flex:1 1 auto}
.dz-giveaway--name{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:0;line-height:1.25}
.dz-giveaway--name a{color:var(--c-ink)}
.dz-giveaway--name a:hover{color:var(--vt-link);text-decoration:none}
.dz-giveaway--prize{display:flex;align-items:center;gap:0.4375rem;flex-wrap:wrap;font-size:var(--fs-base)}
.dz-giveaway--prize svg{color:var(--c-gold)}
.dz-giveaway--prize span{color:var(--c-muted)}
.dz-giveaway--meta{display:flex;flex-wrap:wrap;gap:0.375rem}
.dz-giveaway--meta span{padding:0.1875rem 0.5625rem;border-radius:var(--r-sm);background:var(--c-panel-dark);font-size:0.6875rem;font-weight:var(--fw-bold);color:var(--c-muted-dark)}
.dz-giveaway--winner{padding:0.5rem 0.75rem;border-radius:var(--r-md);background:rgba(23,122,78,.14);color:var(--vt-live-ink);font-size:var(--fs-base)}
.dz-giveaway--winner.is-large{font-size:var(--fs-xl);padding:0.875rem 1.125rem;background:rgba(255,255,255,.1);color:var(--c-on-dark)}
.dz-giveaway--action{margin-top:auto;padding-top:0.5rem}
.dz-giveaway-single--prize{display:flex;align-items:baseline;gap:0.625rem;flex-wrap:wrap;margin:0.5rem 0 1rem}
.dz-giveaway-single--prize strong{font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:1.1;color:var(--c-cta)}
.dz-giveaway-single--prize span{font-size:var(--fs-lg);opacity:.75}

/* Casino leaderboard embeds ------------------------------------------------ */
.dz-board-panel{margin-bottom:calc(var(--gutter) * 2)}
.dz-board-panel[hidden]{display:none}
.dz-board-panel--head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:0.75rem}
.dz-board-panel--head h2{margin:0 0 0.3125rem}
.dz-board-panel--meta{display:flex;flex-wrap:wrap;gap:0.875rem;font-size:var(--fs-sm);color:var(--c-muted)}
.dz-board-panel--meta span{display:inline-flex;align-items:center;gap:0.3125rem}
.dz-board-panel--ended{color:var(--c-danger);font-weight:var(--fw-bold)}
.dz-board-panel--intro{font-size:var(--fs-lg);margin-bottom:0.875rem;max-width:47.5rem}
.dz-board-embed{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel);min-height:12.5rem}
.dz-board-embed iframe{display:block;width:100%;height:var(--embed-h,900px);border:0}
.dz-board-embed--missing{padding:2.25rem 1.25rem;text-align:center;background:var(--c-panel);border:0.0625rem dashed var(--c-border);
  border-radius:var(--r-lg);color:var(--c-muted);font-size:var(--fs-base)}

/* Front page: on tonight ---------------------------------------------------- */
.dz-today--head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.875rem;margin-bottom:1.125rem}
.dz-today--date{margin:0;font-size:var(--fs-base);color:var(--c-muted)}
.dz-today--list{display:grid;grid-template-columns:1fr;gap:0.5625rem}
@media screen and (min-width:640px){ .dz-today--list{grid-template-columns:1fr 1fr} }
@media screen and (min-width:1024px){ .dz-today--list{grid-template-columns:repeat(3,1fr)} }
.dz-today--slot{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 0.875rem;border-radius:var(--r-lg);
  background:var(--c-panel);border-left:0.1875rem solid var(--accent);color:var(--c-ink);text-decoration:none;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.dz-today--slot:hover{background:var(--c-panel-dark);transform:translateX(0.125rem);text-decoration:none;color:var(--c-ink)}
.dz-today--slot.is-live{background:var(--c-panel-dark);border-left-width:0.25rem}
/* Dark-section treatment. Sections get reordered often, so every component is
   authored light and adapts here rather than being rewritten each time. */
.section--bg-dark .dz-today--date{color:rgba(255,255,255,.75)}
.section--bg-dark .dz-today--slot{background:rgba(255,255,255,.07);color:var(--c-on-dark)}
.section--bg-dark .dz-today--slot:hover{background:rgba(255,255,255,.14);color:var(--c-on-dark)}
.section--bg-dark .dz-today--slot.is-live{background:rgba(255,255,255,.13)}
.section--bg-dark .dz-today--who em{color:rgba(255,255,255,.65)}
.section--bg-dark .dz-today .dz-live-bar{background:rgba(255,255,255,.07)}
.dz-today--time{display:flex;flex-direction:column;font-size:var(--fs-xl);font-weight:var(--fw-black);line-height:1;flex:0 0 auto;min-width:3.25rem}
.dz-today--time em{font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-bold);opacity:.6;margin-bottom:0.125rem}
.dz-today--avatar{display:grid;place-items:center;width:2.375rem;height:2.375rem;flex:0 0 2.375rem;border-radius:50%;overflow:hidden;background:var(--c-navy-900);color:rgba(255,255,255,.5)}
.dz-today--avatar img{width:100%;height:100%;object-fit:cover}
.dz-today--who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.dz-today--who strong{font-size:var(--fs-lg);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-today--who em{font-style:normal;font-size:var(--fs-xs);color:var(--c-muted)}
.dz-today--flag{display:inline-flex;align-items:center;gap:0.3125rem;font-size:0.6875rem;font-weight:var(--fw-bold);flex:0 0 auto}

/* Front page: big wins ------------------------------------------------------ */
.dz-front-wins--sub{margin:0;font-size:var(--fs-base);color:var(--c-muted)}
.dz-front-wins--heading{font-size:var(--fs-lg);margin:0 0 0.625rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.06em}
.section--bg-dark .dz-front-wins--sub{color:rgba(255,255,255,.75)}
.section--bg-dark .dz-front-wins--heading{color:rgba(255,255,255,.7)}
.dz-top-win{display:flex;flex-direction:column;height:100%;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:var(--c-ink);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.dz-top-win:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card);text-decoration:none;color:var(--c-ink)}
.section--bg-dark .dz-top-win{background:rgba(255,255,255,.08);color:var(--c-on-dark)}
.section--bg-dark .dz-top-win:hover{background:rgba(255,255,255,.14);color:var(--c-on-dark)}
.dz-top-win--label{padding:0.5rem 0.875rem;background:var(--c-gold);color:var(--c-navy-900);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em}
.dz-top-win--media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-navy-900)}
.dz-top-win--media img{width:100%;height:100%;object-fit:cover}
.dz-top-win--mult{position:absolute;bottom:0.625rem;left:0.625rem;padding:0.375rem 0.8125rem;border-radius:var(--r-md);
  background:var(--vt-plate);color:var(--vt-on-plate-link);font-size:var(--fs-3xl);font-weight:var(--fw-black);line-height:1}
.dz-top-win--body{display:flex;flex-direction:column;gap:0.25rem;padding:1rem}
.dz-top-win--game{font-size:var(--fs-2xl);font-weight:var(--fw-black);line-height:1.2}
.dz-top-win--line{font-size:var(--fs-base);color:var(--c-muted)}
.dz-top-win--casino{font-size:var(--fs-sm);color:var(--vt-link);font-weight:var(--fw-bold)}
.section--bg-dark .dz-top-win--line{color:rgba(255,255,255,.75)}
.section--bg-dark .dz-top-win--casino{color:var(--vt-link)}
.dz-latest-wins{display:flex;flex-direction:column;gap:0.5rem}
.dz-latest-win{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.75rem;border-radius:var(--r-md);
  background:var(--c-panel);color:var(--c-ink);text-decoration:none;transition:background var(--dur) var(--ease)}
.dz-latest-win:hover{background:var(--c-panel-dark);text-decoration:none;color:var(--c-ink)}
.section--bg-dark .dz-latest-win{background:rgba(255,255,255,.07);color:var(--c-on-dark)}
.section--bg-dark .dz-latest-win:hover{background:rgba(255,255,255,.14);color:var(--c-on-dark)}
.dz-latest-win--thumb{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;border-radius:var(--r-sm);
  overflow:hidden;background:var(--c-navy-900);color:rgba(255,255,255,.4)}
.dz-latest-win--thumb img{width:100%;height:100%;object-fit:cover}
.dz-latest-win--body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.dz-latest-win--body strong{font-size:var(--fs-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-latest-win--body em{font-style:normal;font-size:var(--fs-xs);color:var(--c-muted)}
.dz-latest-win--mult{font-size:var(--fs-xl);font-weight:var(--fw-black);color:var(--vt-link);flex:0 0 auto}
.section--bg-dark .dz-latest-win--body em{color:rgba(255,255,255,.65)}
.section--bg-dark .dz-latest-win--mult{color:var(--vt-link)}

/* Front page: join CTA ------------------------------------------------------ */
.dz-join{background:var(--c-bg);color:var(--c-ink)}
.section--bg-dark.dz-join{background:var(--c-navy-800);color:var(--c-on-dark)}
/* Single column now: the copy is centred and the roster lines up beneath it,
   so the old two-column split (copy | promo) no longer applies. */
.dz-join--inner{display:block}
.dz-join--eyebrow{display:inline-block;margin-bottom:0.625rem;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.08em;color:var(--vt-link)}
.dz-join--pitch h2{margin:0 0 0.625rem}
.dz-join--lead{font-size:var(--fs-xl);color:var(--c-muted);margin-bottom:1.125rem}
.section--bg-dark .dz-join--eyebrow{color:var(--vt-link)}
.section--bg-dark .dz-join--pitch h2{color:var(--c-on-dark)}
.section--bg-dark .dz-join--lead{color:rgba(255,255,255,.82)}
.dz-join--earn{list-style:none;margin:0 0 1.375rem;padding:0;display:flex;flex-direction:column;gap:0.5625rem}
.dz-join--earn li{display:flex;align-items:baseline;gap:0.75rem;font-size:var(--fs-lg)}
.dz-join--earn strong{font-size:var(--fs-3xl);font-weight:var(--fw-black);color:var(--vt-link);line-height:1;min-width:4rem}
.dz-join--earn span{color:var(--c-muted)}
.section--bg-dark .dz-join--earn strong{color:var(--vt-link)}
.section--bg-dark .dz-join--earn span{color:rgba(255,255,255,.8)}
.dz-join--actions{display:flex;flex-wrap:wrap;gap:0.75rem}
/* Join section: copy, then the roster lined up beneath it ----------------
   Everyone stands on one ground line at one height, so the row reads as a
   line-up rather than a pile — an earlier version scaled figures into depth
   bands and kept burying faces behind bodies. The two birds are lifted out of
   the row and flown either side of the copy, which is the only place a uniform
   standing row would look wrong. */
.dz-join{overflow:hidden;position:relative}
.dz-join .grid-container{position:relative;z-index:2}

.dz-join--pitch{text-align:center;max-width:35rem;margin:0 auto;padding:0.25rem 0.75rem 0}
.dz-join--pitch h2{margin:0 0 0.75rem;font-size:var(--fs-4xl)}
.dz-join--lead{margin-left:auto;margin-right:auto;max-width:46ch}
.dz-join--earn{align-items:center}
.dz-join--earn li{justify-content:center;text-align:left}
.dz-join--earn strong{text-align:right}
.dz-join--actions{justify-content:center}
.dz-join--eyebrow{margin-bottom:0.75rem}

/* The standing band. A fixed box per figure keeps the spacing even whatever
   the character's own proportions are — the cast runs from 0.5:1 to 1.28:1,
   and sizing on height alone made the wide ones crowd their neighbours. */
.dz-crowd{display:flex;justify-content:center;align-items:flex-end;
  margin-top:1.875rem;margin-bottom:calc(var(--crowd-crop, 2.125rem) * -1);
  pointer-events:none}
.dz-crowd--member{flex:0 0 auto;line-height:0;margin-left:var(--overlap,-3.625rem);
  filter:drop-shadow(0 0.875rem 1.375rem rgba(4,12,26,.42));
  animation:crowd-bob var(--bob,4s) ease-in-out infinite alternate;
  animation-delay:var(--bob-delay,0s)}
.dz-crowd--member:first-child{margin-left:0}
.dz-crowd--member img{height:var(--figure,18.75rem);width:var(--figure-w,12.5rem);
  object-fit:contain;object-position:bottom center;display:block}
/* Each keeper stands on a wash of their own accent. */
.dz-crowd--member::after{content:"";position:absolute;left:50%;bottom:var(--crowd-crop,2.125rem);
  translate:-50% 0;width:118%;height:22%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,
    color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%)}
.dz-crowd--member{position:relative}
@media (prefers-reduced-motion: no-preference){
  @keyframes crowd-bob{ from{translate:0 0} to{translate:0 -0.3125rem} }
}
@media (prefers-reduced-motion: reduce){
  .dz-crowd--member{animation:none}
}

/* Birds, flying either side of the copy. */
.dz-flyer{position:absolute;z-index:3;line-height:0;pointer-events:none;
  filter:drop-shadow(0 1rem 1.5rem rgba(4,12,26,.4));
  animation:flyer-drift var(--fly,9s) ease-in-out infinite alternate}
.dz-flyer img{height:clamp(5.625rem,11vw,11.875rem);width:auto;max-width:none;display:block}
.dz-flyer.is-left {left:clamp(0.5rem,7vw,9.375rem); top:clamp(2.5rem,9vw,7.5rem);--fly:9s;rotate:-6deg}
.dz-flyer.is-right{right:clamp(0.5rem,6vw,7.5rem);top:clamp(5.625rem,14vw,13.125rem);--fly:11s;rotate:5deg}
@keyframes flyer-drift{
  from{translate:0 0}
  to  {translate:0 -1.125rem}
}
@media (prefers-reduced-motion: reduce){ .dz-flyer{animation:none} }

@media screen and (min-width:1024px){
  .dz-join{--figure:20.625rem;--figure-w:13.75rem;--overlap:-4rem;--crowd-crop:2.5rem}
}
@media screen and (max-width:1023px){
  .dz-join{--figure:13.125rem;--figure-w:8.75rem;--overlap:-2.75rem;--crowd-crop:1.625rem}
  .dz-crowd--member:nth-child(n+9){display:none}
}
@media screen and (max-width:639px){
  .dz-join{--figure:8.25rem;--figure-w:5.5rem;--overlap:-1.75rem;--crowd-crop:1rem}
  .dz-crowd--member:nth-child(n+7){display:none}
  .dz-flyer{display:none}
}

/* Schedule: three days beside the player -------------------------------- */
.dz-today--head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.25rem}
.dz-today--head .section--title{margin-bottom:0.25rem}
.dz-today--date{margin:0;color:var(--c-muted)}
.section--bg-dark .dz-today--date{color:rgba(255,255,255,.75)}

.dz-today--split{display:grid;grid-template-columns:minmax(0,1fr);gap:1.375rem;align-items:start}
@media screen and (min-width:1024px){
  .dz-today--split{grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);gap:1.75rem}
}

/* One block per day, so "today" is never guessed at from a flat list. */
.dz-today--days{display:flex;flex-direction:column;gap:0.875rem}
.dz-day{border:0.0625rem solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-bg)}
.dz-day.is-today{border-color:var(--vt-accent)}
.dz-day--head{display:flex;align-items:baseline;gap:0.625rem;padding:0.5625rem 0.875rem;
  background:var(--c-panel);border-bottom:0.0625rem solid var(--c-border-soft)}
.dz-day.is-today .dz-day--head{background:var(--vt-accent);border-bottom-color:var(--vt-accent);color:var(--vt-accent-ink)}
.dz-day--head strong{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-ink)}
.dz-day.is-today .dz-day--head strong{color:var(--c-on-cta)}
.dz-day--head time{font-size:var(--fs-xs);color:var(--c-muted)}
.dz-day.is-today .dz-day--head time{color:rgba(255,255,255,.8)}

.dz-day--slots{list-style:none;margin:0;padding:0}
.dz-day--slots li + li{border-top:0.0625rem solid var(--c-border-soft)}
.dz-day--rest{margin:0;padding:0.875rem;color:var(--c-muted);font-size:var(--fs-sm)}

.dz-slot{display:grid;grid-template-columns:3.625rem 2.125rem minmax(0,1fr) auto;align-items:center;
  gap:0.75rem;padding:0.625rem 0.875rem;text-decoration:none;color:var(--c-ink);
  border-left:0.1875rem solid var(--accent,var(--vt-accent));transition:background .15s ease}
.dz-slot:hover{background:var(--c-panel);color:var(--c-ink);text-decoration:none}
.dz-slot--time{font-size:var(--fs-lg);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.dz-slot--avatar{width:2.125rem;height:2.125rem;border-radius:50%;overflow:hidden;background:var(--c-navy-900);
  display:flex;align-items:center;justify-content:center;color:var(--c-on-dark)}
/* Character cut-outs are full-body; at 34px only the head reads, so the crop
   is pulled up to frame the face rather than the chest. */
.dz-slot--avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.dz-slot--who{display:flex;flex-direction:column;min-width:0}
.dz-slot--who strong{font-size:var(--fs-md,0.9375rem);line-height:1.25}
.dz-slot--who em{font-style:normal;font-size:var(--fs-xs);color:var(--c-muted)}
.dz-slot--flag{display:inline-flex;align-items:center;gap:0.375rem;padding:0.1875rem 0.5625rem;border-radius:var(--r-pill);
  background:var(--c-danger);color:#fff;font-size:0.6875rem;font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em}
.dz-slot.is-live{background:rgba(224,69,75,.06)}

/* Player. The frame keeps 16:9 whether it holds the button or the iframe. */
.dz-player{position:sticky;top:5.5rem}
.dz-player--frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-navy-900);border:0.0625rem solid var(--c-border)}
.dz-player--iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.dz-player--load{position:absolute;inset:0;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;
  background:var(--c-navy-900);border:0;cursor:pointer;color:var(--c-on-dark);padding:1.25rem}
.dz-player--load:hover{background:var(--c-navy-800)}
.dz-player--load:focus-visible{outline:0.125rem solid var(--c-brand-on-dark);outline-offset:-0.25rem}
.dz-player--play{display:flex;align-items:center;justify-content:center;width:3.625rem;height:3.625rem;
  border-radius:50%;background:var(--vt-accent);color:var(--vt-accent-ink)}
.dz-player--cta{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.dz-player--note{font-size:var(--fs-xs);color:rgba(255,255,255,.55)}

.dz-player--meta{display:flex;align-items:center;gap:0.625rem;margin-top:0.625rem;flex-wrap:wrap}
.dz-player--flag{display:inline-flex;align-items:center;gap:0.375rem;padding:0.1875rem 0.625rem;border-radius:var(--r-pill);
  background:var(--c-danger);color:#fff;font-size:0.6875rem;font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em}
.dz-player--flag.is-off{background:var(--c-panel-dark);color:var(--c-muted-dark)}
.dz-player--channel{font-size:var(--fs-sm);font-weight:var(--fw-semi)}

/* Dark-section variants. */
.section--bg-dark .dz-day{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.section--bg-dark .dz-day--head{background:rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.12)}
.section--bg-dark .dz-day--head strong{color:var(--c-on-dark)}
.section--bg-dark .dz-day--head time{color:rgba(255,255,255,.6)}
.section--bg-dark .dz-day--slots li + li{border-top-color:rgba(255,255,255,.1)}
.section--bg-dark .dz-slot{color:var(--c-on-dark)}
.section--bg-dark .dz-slot:hover{background:rgba(255,255,255,.08);color:var(--c-on-dark)}
.section--bg-dark .dz-slot--who em{color:rgba(255,255,255,.6)}
.section--bg-dark .dz-player--flag.is-off{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}

/* Week grid on the schedule page: seven day cards, each narrow, so the slot
   stacks instead of laying out in four columns. */
.dz-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.625rem,1fr));gap:0.75rem;align-items:stretch}
/* Seven across so the week reads as one row, not a wrapped block. */
@media screen and (min-width:1200px){ .dz-week{grid-template-columns:repeat(7,minmax(0,1fr))} }
.dz-week .dz-day{display:flex;flex-direction:column}
.dz-week .dz-day--slots{flex:1}
.dz-slot.is-compact{grid-template-columns:1.75rem minmax(0,1fr);grid-template-areas:"avatar who" "time time";
  gap:0.5rem 0.5625rem;padding:0.625rem 0.75rem}
.dz-slot.is-compact .dz-slot--avatar{grid-area:avatar;width:1.75rem;height:1.75rem}
.dz-slot.is-compact .dz-slot--who{grid-area:who}
.dz-slot.is-compact .dz-slot--time{grid-area:time;font-size:var(--fs-sm);color:var(--c-muted)}
.section--bg-dark .dz-slot.is-compact .dz-slot--time{color:rgba(255,255,255,.65)}
.dz-slot.is-compact .dz-slot--flag{grid-area:time;justify-self:end}

@media screen and (max-width:639px){
  .dz-slot{grid-template-columns:3.125rem 1.75rem minmax(0,1fr) auto;gap:0.5625rem;padding:0.5625rem 0.6875rem}
  .dz-slot--avatar{width:1.75rem;height:1.75rem}
  .dz-player{position:static}
}

/* Giveaway entry ---------------------------------------------------------- */
.giveaway-entry{background:var(--c-panel);border-radius:var(--r-lg);padding:1.5rem}
.giveaway-entry--head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.625rem}
.giveaway-entry--head h2{margin:0;font-size:var(--fs-4xl)}
.giveaway-entry--count{font-size:var(--fs-base);color:var(--c-muted);font-weight:var(--fw-bold)}
.giveaway-entry--explain{margin:0.5rem 0 0;font-size:var(--fs-lg);color:var(--c-muted);max-width:70ch}
.giveaway-entry--grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.25rem}
@media screen and (min-width:900px){ .giveaway-entry--grid{grid-template-columns:20.625rem 1fr;gap:2rem} }
.giveaway-entry--step{display:flex;align-items:center;gap:0.5625rem;margin:0 0 0.75rem;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.giveaway-entry--step span{display:grid;place-items:center;width:1.625rem;height:1.625rem;flex:0 0 1.625rem;border-radius:50%;
  background:var(--c-navy-800);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-black)}
.giveaway-entry--form-col{display:flex;flex-direction:column}
.giveaway-entry--form{background:var(--c-panel-alt);border-radius:var(--r-lg);padding:1.25rem}
.giveaway-entry--as{display:flex;align-items:center;gap:0.625rem;padding:0.6875rem 0.875rem;margin-bottom:0.875rem;
  background:var(--c-panel);border-radius:var(--r-md);font-size:var(--fs-base)}
.giveaway-entry--as img{width:2rem;height:2rem;border-radius:50%;object-fit:cover}
.dz-form--consent{display:flex;align-items:flex-start;gap:0.625rem;margin-bottom:1rem;font-size:var(--fs-base)}
.dz-form--consent input{margin-top:0.1875rem;flex:0 0 auto}
.dz-form--consent span{color:var(--c-muted)}
.giveaway-entry--gate,.giveaway-entry--done,.giveaway-entry--closed{
  display:flex;align-items:flex-start;gap:0.75rem;padding:1.25rem;border-radius:var(--r-lg);background:var(--c-panel-alt)}
.giveaway-entry--gate{flex-direction:column;align-items:flex-start;gap:0.875rem}
.giveaway-entry--gate p{margin:0;font-size:var(--fs-lg);max-width:52ch}
.giveaway-entry--done{background:rgba(23,122,78,.12);color:var(--c-positive)}
.giveaway-entry--closed{background:var(--c-panel-dark);color:var(--c-muted-dark)}
.giveaway-entry--done > div,.giveaway-entry--closed > div{display:flex;flex-direction:column;gap:0.1875rem}
.giveaway-entry--done span,.giveaway-entry--closed span{color:var(--c-muted);font-size:var(--fs-base)}
.giveaway-entry--casino .casino-card{height:auto}

/* ===== _sections.css ===== */
/* ==========================================================================
   Carousel, game grid, footer
   ========================================================================== */
.carousel{position:relative}
.carousel--viewport{overflow:hidden}
.carousel--track{display:flex;gap:var(--gutter);transition:transform .4s var(--ease);will-change:transform}
.carousel--slide{flex:0 0 auto;width:calc((100% - var(--gutter) * 2) / 3)}
@media screen and (max-width:1023px){ .carousel--slide{width:calc((100% - var(--gutter)) / 2)} }
@media screen and (max-width:639px){ .carousel--slide{width:85%} }
.carousel--nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:var(--c-panel-alt);color:var(--c-navy-900);box-shadow:var(--shadow-card)}
.carousel--nav:hover{background:var(--c-cta);color:var(--c-on-cta)}
.carousel--nav svg{width:0.9375rem;height:0.9375rem}
.carousel--nav.prev{left:-0.875rem} .carousel--nav.next{right:-0.875rem}
.carousel--nav[disabled]{opacity:.35;pointer-events:none}
.carousel--bullets{display:flex;justify-content:center;align-items:center;gap:0.4375rem;margin-top:1.125rem}
.carousel--bullet{width:0.5625rem;height:0.5625rem;padding:0;border:0;border-radius:50%;background:var(--c-border);transition:background var(--dur) var(--ease),width var(--dur) var(--ease)}
.carousel--bullet.is-active{background:var(--c-cta);width:1.375rem;border-radius:var(--r-pill)}
.section--bg-dark .carousel--bullet{background:rgba(255,255,255,.3)}
.section--bg-dark .carousel--bullet.is-active{background:var(--c-cta)}

/* On phones the side-hugging arrows overlap card artwork and are awkward to
   thumb. Regrid the carousel so viewport is one row and the three controls —
   prev arrow, bullets, next arrow — share the row beneath it. Swipe on the
   track continues to work; we're only moving the chrome. */
@media screen and (max-width:1023px){
  .carousel{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"viewport viewport viewport" "prev bullets next";row-gap:0.875rem}
  .carousel .carousel--viewport{grid-area:viewport;min-width:0}
  .carousel--nav{position:static;transform:none;width:2.125rem;height:2.125rem;flex:0 0 2.125rem;box-shadow:none;background:var(--c-panel-alt)}
  .carousel--nav.prev{left:auto;grid-area:prev}
  .carousel--nav.next{right:auto;grid-area:next}
  .carousel--bullets{grid-area:bullets;margin:0}
  /* Dark sections use a lighter chip so the nav is visible on navy. */
  .section--bg-dark .carousel--nav{background:rgba(255,255,255,.14);color:var(--c-on-dark)}
}

/* Game tile */
/* Slot covers are 3:4 posters. They used to be squashed into a square with the
   title laid over the artwork, which fought whatever was painted underneath —
   the poster now keeps its own ratio and the text sits on a solid band below,
   where it always has the same background to read against. */
.game-tile{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-bg);text-decoration:none;color:var(--c-ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.game-tile:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card);text-decoration:none;color:var(--c-ink)}
.game-tile--art{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--c-navy-900)}
.game-tile--art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s var(--ease)}
.game-tile:hover .game-tile--art img{transform:scale(1.05)}
.game-tile--placeholder{display:grid;place-items:center;width:100%;height:100%;color:rgba(255,255,255,.25)}
.game-tile--body{display:block;padding:0.625rem 0.75rem 0.75rem;background:var(--c-bg)}
.game-tile--name{display:block;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.3;
  color:var(--c-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-tile--provider{display:block;margin-top:0.125rem;font-size:var(--fs-xs);color:var(--c-muted)}
.game-tile--rtp{position:absolute;top:0.5625rem;right:0.5625rem;padding:0.1875rem 0.5rem;border-radius:var(--r-sm);
  background:var(--c-cta);color:var(--c-on-cta);font-size:0.6875rem;font-weight:var(--fw-bold)}

/* Footer */
.footer{background:var(--c-navy-900);color:var(--c-on-dark)}
.footer a:not(.button){color:rgba(254,254,254,.8)}
.footer a:not(.button):hover{color:var(--vt-link);text-decoration:none}
.footer--content{padding:2.8125rem 0 2.1875rem}
.footer--col-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-on-dark);margin:0 0 0.875rem}
.footer--menu{list-style:none;margin:0;padding:0}
.footer--menu li{margin-bottom:0.5rem}
.footer--menu a{font-size:var(--fs-base)}
/* Live lists (top casinos, latest guides, new games) — trim titles that would
   otherwise wrap onto three lines and eat vertical space. */
.footer--live-list a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer--live-more{margin-top:0.75rem;padding-top:0.5rem;border-top:0.0625rem solid rgba(255,255,255,.08)}
.footer--live-more a{font-weight:var(--fw-bold);color:var(--vt-link) !important}
.footer--cta{margin-top:0.875rem}
.footer--cta-button{width:100%;justify-content:center}
/* Compliance strip — up to three responsible-gambling / regulator logos with
   backlinks, in the band above the 18+ disclaimer. Fixed-size letterbox per
   slot so a 3:1 wordmark and a 1:1 badge render at the same optical footprint,
   and grayscale by default so the rail does not compete visually with brand. */
.footer--compliance-wrap{background:rgba(255,255,255,.04);border-top:0.0625rem solid rgba(255,255,255,.06);padding:0.875rem 0}
.footer--compliance{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;
  align-items:center;justify-items:center;max-width:40rem;margin:0 auto}
.footer--compliance-logo{display:grid;place-items:center;width:100%;max-width:11.25rem;height:3.25rem;
  padding:0.375rem 0.625rem;background:rgba(255,255,255,.06);border-radius:var(--r-md);
  text-decoration:none;transition:background var(--dur) var(--ease)}
.footer--compliance-logo:hover{background:rgba(255,255,255,.12)}
.footer--compliance-logo img{display:block;width:7.5rem;height:2.25rem;max-width:100%;
  object-fit:contain;object-position:center;filter:grayscale(1) brightness(1.6) opacity(.85);
  transition:filter var(--dur) var(--ease)}
.footer--compliance-logo:hover img{filter:grayscale(0) brightness(1) opacity(1)}
@media screen and (max-width:639px){
  .footer--compliance{gap:0.5rem}
  .footer--compliance-logo{height:2.75rem;padding:0.25rem 0.375rem}
  .footer--compliance-logo img{width:6rem;height:1.875rem}
}

/* ---------------------------------------------------------------- Now-live
 * Floats above the fold-back safe area on both breakpoints. The pulsing red
 * dot uses a plain @keyframes so it works without JS; the whole widget is
 * hidden until JS decides whether the viewer has dismissed it.
 * ---------------------------------------------------------------------- */
@keyframes dz-live-pulse {
  0%   { transform:scale(1);   opacity:1 }
  50%  { transform:scale(1.4); opacity:.5 }
  100% { transform:scale(1);   opacity:1 }
}
.now-live{position:fixed;right:0.875rem;bottom:calc(0.875rem + env(safe-area-inset-bottom,0));z-index:70;pointer-events:none}
.now-live[hidden]{display:none}
.now-live.is-visible > *{pointer-events:auto}
.now-live--dismiss{
  position:absolute;top:-0.5rem;right:-0.5rem;z-index:2;
  display:grid;place-items:center;width:1.5rem;height:1.5rem;
  background:var(--c-navy-900);color:var(--c-on-dark);
  border:0.0625rem solid rgba(255,255,255,.2);border-radius:50%;
  cursor:pointer;padding:0;pointer-events:auto;
}
.now-live--dismiss:hover{background:var(--c-navy-800)}
.now-live--dot{
  display:inline-block;width:0.5625rem;height:0.5625rem;flex:0 0 0.5625rem;
  background:#ff3939;border-radius:50%;
  box-shadow:0 0 0 0.1875rem rgba(255,57,57,.25);
  animation:dz-live-pulse 1.6s ease-in-out infinite;
}
/* Mobile pill — blinking red dot next to the word LIVE. */
.now-live--pill{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.625rem 0.875rem;border-radius:var(--r-pill);
  background:var(--c-navy-900);color:var(--c-on-dark);
  font-size:var(--fs-sm);font-weight:var(--fw-black);letter-spacing:.08em;
  text-decoration:none;box-shadow:var(--shadow-pop);
  border:0.0625rem solid rgba(255,57,57,.5);
}
.now-live--pill:hover{color:var(--c-on-dark);text-decoration:none;background:var(--c-navy-800)}
/* Desktop — muted embed with a compact overlay strip. */
.now-live--desktop{display:none;text-decoration:none}
@media screen and (min-width:1024px){
  .now-live--desktop{display:block}
  .now-live{right:1.375rem;bottom:1.375rem}
}
.now-live--embed{
  position:relative;width:17.5rem;aspect-ratio:16/9;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-navy-900);
  box-shadow:0 0.75rem 1.875rem rgba(0,0,0,.4);
  border:0.0625rem solid rgba(255,57,57,.35);
}
.now-live--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.now-live--overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:0.5rem;
  padding:0.375rem 0.625rem;background:linear-gradient(0deg, rgba(10,30,61,.9), rgba(10,30,61,0));
  color:var(--c-on-dark);font-size:var(--fs-xs);
}
.now-live--overlay-text{display:flex;flex-direction:column;line-height:1.2}
.now-live--overlay-text strong{font-size:var(--fs-sm)}
.now-live--viewers{opacity:.8}
.footer--about{font-size:var(--fs-base);color:rgba(254,254,254,.75)}
.footer--logos{display:flex;flex-wrap:wrap;align-items:center;gap:0.875rem;margin-top:1.125rem}
.footer--logos img{height:1.875rem;width:auto;opacity:.8;filter:grayscale(1);transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease)}
.footer--logos img:hover{opacity:1;filter:grayscale(0)}
.footer--social{display:flex;gap:0.625rem;margin-top:1rem}
.footer--social a{display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:50%;background:rgba(255,255,255,.1)}
.footer--social a:hover{background:var(--c-cta);color:var(--c-on-cta)}
.footer--social svg{width:1rem;height:1rem}
.footer--disclaimer{background:var(--c-navy-800);padding:1.375rem 0;font-size:var(--fs-sm);color:rgba(254,254,254,.7)}
.footer--disclaimer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:0.875rem;justify-content:space-between}
.footer--age{display:inline-grid;place-items:center;width:1.375rem;height:1.375rem;flex:0 0 1.375rem;border:0.0625rem solid currentColor;border-radius:50%;font-size:0.625rem;font-weight:var(--fw-bold);vertical-align:middle;line-height:1;padding-top:0.0625rem;margin-right:0.125rem}

/* Pagination */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:0.375rem;margin-top:calc(var(--gutter) * 2)}
.pagination .page-numbers{display:grid;place-items:center;min-width:2.375rem;height:2.375rem;padding:0 0.75rem;border-radius:var(--r-md);background:var(--c-panel);color:var(--c-ink);font-size:var(--fs-base);font-weight:var(--fw-bold);text-decoration:none}
.pagination .page-numbers:hover{background:var(--c-cta);color:var(--c-on-cta);text-decoration:none}
.pagination .page-numbers.current{background:var(--c-navy-900);color:#fff}

/* Notice / disclosure bar */
.affiliate-notice{background:var(--c-panel);border-radius:var(--r-md);padding:0.75rem 1rem;font-size:var(--fs-sm);color:var(--c-muted);margin-bottom:1.25rem}
.section--bg-dark .affiliate-notice,.hero .affiliate-notice{background:rgba(255,255,255,.07);color:rgba(254,254,254,.75)}

/* ---------- Habitat backdrops ----------
   Every blue surface carries a painted plate under a scrim. Plate and scrim
   share one pseudo-element (gradients stacked over the image) because
   .hero--front already owns ::after.

   Two scrim shapes, because text position decides what has to be protected:
   heroes read left-to-right so they get a directional wash; centred sections
   get a radial that holds strength across the copy before falling away. A
   radial under left-aligned text fails — the copy runs out to the frame where
   the radial is weakest. */
.hero,
.section--bg-dark{position:relative;isolation:isolate;
  --habitat-image:url("../img/scene-casinos-sm.webp");
  --habitat-pos:center bottom;
  --habitat-core:.86;
  --habitat-edge:.02;
  --habitat-top:.24;
  --habitat-bottom:.38}

/* Plate and scrim live on separate pseudo-elements so the plate can be moved
   by the compositor. Sharing one background list meant any drift repainted a
   full-width image every frame. */
.hero::before,
.section--bg-dark::before{content:"";position:absolute;inset:-2%;z-index:0;pointer-events:none;
  background:var(--habitat-image) var(--habitat-pos) / cover no-repeat;
  transform:translateZ(0)}

.hero::after,
.section--bg-dark::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(10,30,61,var(--habitat-core)) 0%,
      rgba(10,30,61,calc(var(--habitat-core) * .92)) 42%,
      rgba(10,30,61,calc((var(--habitat-core) + var(--habitat-edge)) / 2)) 72%,
      rgba(10,30,61,var(--habitat-edge)) 100%),
    linear-gradient(to bottom,
      rgba(10,30,61,var(--habitat-top)) 0%,
      rgba(10,30,61,.06) 45%,
      rgba(10,30,61,var(--habitat-bottom)) 100%)}

/* The plate is inset past the edges, so drift never exposes a corner. */
.hero,
.section--bg-dark{overflow:hidden}

/* Centred copy: hold near full strength out to 34% of the ellipse, then drop
   to nothing. Falling off sooner puts the ends of a centred headline in the
   weak zone, and the directional wash above cannot protect it at all — that
   one is dark on the left, where centred text is not. */
.is-scrim-centre::after{
  background:
    radial-gradient(ellipse 62% 78% at 50% 50%,
      rgba(10,30,61,var(--habitat-core)) 0%,
      rgba(10,30,61,calc(var(--habitat-core) * .92)) 34%,
      rgba(10,30,61,var(--habitat-edge)) 100%),
    linear-gradient(to bottom,
      rgba(10,30,61,var(--habitat-top)) 0%,
      rgba(10,30,61,.10) 42%,
      rgba(10,30,61,var(--habitat-bottom)) 100%) !important}
.is-scrim-centre{--habitat-core:.92;--habitat-edge:0;--habitat-top:.26;--habitat-bottom:.40}

.hero > .grid-container,
.section--bg-dark > .grid-container{position:relative;z-index:2}

/* Tall sections: a 21:9 plate under `cover` is scaled two and a half times and
   goes soft, so it sits as a band along the bottom instead. */
.is-band::before{background-size:100% auto}

@media print{ .hero::before,.section--bg-dark::before{display:none} }

/* ---------- Habitat ambience ----------
   Slow drift and a light breathe on the plate. Both run on `transform` and
   `opacity` only, so they stay on the compositor and never repaint the image —
   animating `background-position` instead would repaint a full-width picture
   every frame.

   Off unless `is-ambient` is present, which only the IntersectionObserver in
   app.js adds — so it degrades to a still plate without JS, and a surface
   scrolled past is not burning frames. */
@media (prefers-reduced-motion: no-preference){
  .hero.is-ambient::before,
  .section--bg-dark.is-ambient::before{
    will-change:transform,opacity;
    animation:habitat-drift var(--habitat-drift,64s) ease-in-out infinite alternate,
              habitat-breathe var(--habitat-breathe,11s) ease-in-out infinite alternate}

  /* Odd-numbered surfaces drift the other way, so two stacked sections do not
     visibly move in lockstep. */
  .section--bg-dark.is-ambient:nth-of-type(even)::before{
    animation-direction:alternate-reverse, alternate}
}

@keyframes habitat-drift{
  from{transform:scale(1.015) translate3d(-0.7%,0.35%,0)}
  to  {transform:scale(1.045) translate3d(0.7%,-0.35%,0)}
}
/* Reads as the light shifting rather than the picture fading. */
@keyframes habitat-breathe{
  from{opacity:.90}
  to  {opacity:1}
}

/* ---------- Habitat foliage ----------
   A third layer between the plate and the scrim: leaves cut from the scene's
   own flora.

   On a directional scrim the left 42% is held at full strength, so leaves over
   there are just mud under a wash — the layer is masked to fade in exactly
   where the scrim starts releasing, and only the right-hand growth shows. That
   also means the sway should pivot at the right edge, where those leaves are
   rooted, rather than at the centre of an image whose left half is hidden. */
.habitat-leaves{position:absolute;inset:-10% -6%;z-index:1;pointer-events:none;
  background:var(--leaf-image,none) center bottom / cover no-repeat;
  transform-origin:100% 100%;
  --leaf-mask-start:36%;
  --leaf-mask-end:56%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent var(--leaf-mask-start),
    #000 var(--leaf-mask-end),#000 100%);
  mask-image:linear-gradient(to right,transparent 0,transparent var(--leaf-mask-start),
    #000 var(--leaf-mask-end),#000 100%)}

/* Centred copy is protected by a radial, so both sides of the frame stay in
   play and the sway pivots at the centre. */
.is-scrim-centre .habitat-leaves{transform-origin:50% 100%;
  -webkit-mask-image:none;mask-image:none}

@media (prefers-reduced-motion: no-preference){
  /* Three independent axes rather than one compound transform. Individual
     `rotate` / `translate` / `scale` can each carry their own animation without
     overwriting each other, and the durations are deliberately not multiples,
     so they never resync into an obvious loop. */
  .is-ambient > .habitat-leaves{will-change:rotate,translate,scale;
    animation:
      leaf-rotate  var(--leaf-sway,15s)                      ease-in-out infinite alternate,
      leaf-drift   calc(var(--leaf-sway,15s) * 1.37)         ease-in-out infinite alternate,
      leaf-breathe calc(var(--leaf-sway,15s) * 0.61)         ease-in-out infinite alternate}
}
@keyframes leaf-rotate{ from{rotate:-1deg}          to{rotate:1deg} }
@keyframes leaf-drift{  from{translate:-0.9% 0.35%} to{translate:0.9% -0.35%} }
@keyframes leaf-breathe{from{scale:1.012}           to{scale:1.045} }

/* Phones get the leaves without the motion: the layer is decorative and the
   scene is already cropped hard at that width. */
@media screen and (max-width:639px){
  .is-ambient > .habitat-leaves{animation:none}
}

/* ===== _dash.css ===== */
/* ---------------------------------------------------------------------------
 * The signed-in dashboard at /profile/
 *
 * The editor deliberately renders wp-admin's own field markup, so this file
 * also has to dress admin classes — .widefat, .button-link, .description —
 * for the front end. Scoped under .dz-editor so nothing leaks onto the rest
 * of the site.
 * ------------------------------------------------------------------------ */

/* --- section nav ---------------------------------------------------------- */
.dz-dashnav{background:var(--c-navy-900);border-bottom:0.0625rem solid rgba(255,255,255,.12)}
.dz-dashnav .grid-container{display:flex;align-items:center;gap:1.125rem;flex-wrap:wrap;
  padding-top:0.625rem;padding-bottom:0.625rem}
.dz-dashnav--role{flex:0 0 auto;padding:0.1875rem 0.625rem;border-radius:var(--r-pill);
  background:var(--c-brand-on-dark);color:var(--c-navy-900);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em}
.dz-dashnav--list{display:flex;flex-wrap:wrap;gap:0.25rem;list-style:none;margin:0;padding:0}
/* Past _base.css's `.section--bg-dark a:not(.button)` and its own 0-2-1. */
.dz-dashnav--link{display:inline-flex;align-items:center;gap:0.4375rem;padding:0.4375rem 0.8125rem;
  border-radius:var(--r-pill);color:rgba(255,255,255,.78);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);text-decoration:none;white-space:nowrap}
.dz-dashnav--link:hover{background:rgba(255,255,255,.1);color:#fff}
.dz-dashnav--link.is-current{background:#fff;color:var(--c-navy-900)}
.dz-dashnav--link svg{flex:0 0 auto}
.dz-dashnav--badge{display:inline-grid;place-items:center;min-width:1.1875rem;height:1.1875rem;padding:0 0.3125rem;
  border-radius:var(--r-pill);background:var(--c-cta);color:var(--c-on-cta);
  font-size:0.6875rem;font-style:normal;font-weight:var(--fw-bold)}
.dz-dashnav--link.is-current .dz-dashnav--badge{background:var(--c-cta);color:var(--c-on-cta)}

/* --- shared chrome -------------------------------------------------------- */
.dz-dash-empty{display:grid;justify-items:center;gap:0.625rem;padding:3.5rem 1.25rem;
  border:0.0625rem dashed var(--c-border);border-radius:var(--r-lg);color:var(--c-ink-soft);text-align:center}
.dz-dash-empty p{margin:0}
.dz-dash-subhead{margin:2.125rem 0 0.75rem;font-size:var(--fs-xl)}

.dz-dash-search{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin:0 0 1.375rem}
.dz-dash-search label{flex:1 1 15rem;margin:0}
.dz-dash-search input[type=search]{width:100%;margin:0}
.dz-dash-search .button{margin:0}
.dz-dash-search--clear{font-size:var(--fs-sm)}

.dz-dash-block{margin:0 0 2.125rem}
.dz-dash-block--head{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;
  flex-wrap:wrap;margin:0 0 0.75rem}
.dz-dash-block--head h3{margin:0;font-size:var(--fs-2xl)}
.dz-dash-block--head .button{margin:0}
.dz-dash-block--empty{margin:0;padding:1.375rem;border:0.0625rem dashed var(--c-border);
  border-radius:var(--r-lg);color:var(--c-ink-soft)}

.dz-dash-table--wrap{overflow-x:auto;border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);
  background:var(--c-panel-alt)}
.dz-dash-table{width:100%;min-width:35rem;border-collapse:collapse;font-size:var(--fs-sm);margin:0}
.dz-dash-table th,.dz-dash-table td{padding:0.6875rem 0.875rem;text-align:left;vertical-align:middle;
  border-bottom:0.0625rem solid var(--c-border-soft)}
.dz-dash-table thead th{background:var(--c-panel);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;color:var(--c-ink-soft);white-space:nowrap}
.dz-dash-table tbody tr:last-child th,.dz-dash-table tbody tr:last-child td{border-bottom:0}
.dz-dash-table tbody tr:hover{background:var(--c-panel)}
.dz-dash-table--actions{white-space:nowrap;text-align:right}
.dz-dash-table--actions a{margin-left:0.75rem;font-size:var(--fs-sm)}

.dz-dash-status{display:inline-block;padding:0.125rem 0.5625rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-bold)}
/* Measured: publish 5.51:1 on #CDEFE1, draft 8.94:1 on #E7E9EE,
   pending 6.31:1 on #FBE3C7 — all clear AA for small bold text. */
.dz-dash-status.is-publish{background:#CDEFE1;color:#0B5340}
.dz-dash-status.is-pending{background:#FBE3C7;color:#7A4A10}
.dz-dash-status.is-draft,
.dz-dash-status.is-private,
.dz-dash-status.is-future{background:#E7E9EE;color:#3C4658}

/* --- submission queue ----------------------------------------------------- */
.dz-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.875rem}
.dz-queue--item{display:flex;gap:1rem;padding:1rem;border:0.0625rem solid var(--c-border-soft);
  border-radius:var(--r-lg);background:var(--c-panel-alt)}
.dz-queue.is-quiet .dz-queue--item{background:transparent}
.dz-queue--shot{flex:0 0 8.25rem;display:block;border-radius:var(--r-md);overflow:hidden;
  background:var(--c-panel)}
.dz-queue--shot img{display:block;width:100%;height:6rem;object-fit:cover}
.dz-queue--body{flex:1 1 auto;min-width:0}
.dz-queue--head{display:flex;align-items:baseline;gap:0.625rem;flex-wrap:wrap;margin:0 0 0.25rem}
.dz-queue--kind{flex:0 0 auto;padding:0.125rem 0.5625rem;border-radius:var(--r-pill);background:var(--c-navy-900);
  color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.dz-queue--subject{font-size:var(--fs-lg)}
.dz-queue--detail{color:var(--vt-link);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.dz-queue--meta{margin:0 0 0.5rem;font-size:var(--fs-sm);color:var(--c-ink-soft)}
.dz-queue--text{margin:0 0 0.75rem;padding:0 0 0 0.75rem;border-left:0.1875rem solid var(--c-border);
  font-size:var(--fs-sm);line-height:1.6;color:var(--c-ink-soft)}
.dz-queue--actions{display:flex;align-items:flex-start;gap:0.5rem;flex-wrap:wrap}
.dz-queue--actions form{margin:0}
.dz-queue--actions .button{margin:0}
.dz-queue--reject{position:relative}
.dz-queue--reject summary{list-style:none;cursor:pointer}
.dz-queue--reject summary::-webkit-details-marker{display:none}
.dz-queue--reject form{margin-top:0.5rem;display:grid;gap:0.5rem;max-width:21.25rem}
.dz-queue--reject textarea{margin:0}
.button.is-quiet{background:transparent;border-color:var(--c-border);color:var(--c-ink-soft)}
.button.is-quiet:hover{border-color:var(--c-ink-soft);color:var(--c-ink)}

/* --- schedule ------------------------------------------------------------- */
.dz-schedule--grid input[type=text]{width:4.75rem;margin:0;text-align:center;padding:0.4375rem 0.375rem}
.dz-schedule--live{text-align:center}
.dz-schedule--live input{margin:0}
.dz-schedule--you{margin-left:0.4375rem;font-style:normal;font-size:var(--fs-xs);
  color:var(--vt-link);font-weight:var(--fw-bold)}
.dz-schedule--note{margin:0.875rem 0 1.125rem;font-size:var(--fs-sm);color:var(--c-ink-soft)}

/* --- the editor ----------------------------------------------------------- */
.dz-editor--bar{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;
  flex-wrap:wrap;padding:0 0 1rem;margin:0 0 1.25rem;border-bottom:0.0625rem solid var(--c-border-soft)}
.dz-editor--back{display:inline-flex;align-items:center;gap:0.3125rem;font-size:var(--fs-sm);
  font-weight:var(--fw-bold);text-decoration:none}
.dz-editor--what{color:var(--c-ink-soft);font-size:var(--fs-sm)}
.dz-editor--bar-actions{display:flex;gap:0.5rem}
.dz-editor--bar-actions .button{margin:0}

.dz-editor--basics{display:grid;gap:0.875rem;grid-template-columns:1fr;margin:0 0 1.5rem}
@media screen and (min-width:48em){
  .dz-editor--basics{grid-template-columns:2fr 1fr 1fr}
}
.dz-editor label{display:block;margin:0}
.dz-editor label > span{display:block;margin:0 0 0.3125rem;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.dz-editor--title input{font-size:var(--fs-xl);font-weight:var(--fw-bold)}

.dz-editor--panel{padding:1.125rem 1.25rem;margin:0 0 1.25rem;border:0.0625rem solid var(--c-border-soft);
  border-radius:var(--r-lg);background:var(--c-panel-alt)}
.dz-editor--panel h3{margin:0 0 0.75rem;font-size:var(--fs-lg)}
.dz-editor--taxes{display:grid;gap:1.125rem;grid-template-columns:1fr}
@media screen and (min-width:48em){
  .dz-editor--taxes{grid-template-columns:repeat(auto-fit,minmax(14.375rem,1fr))}
}
.dz-editor--tax > strong{display:block;margin:0 0 0.375rem;font-size:var(--fs-sm)}
.dz-editor--clear{border:0;background:none;padding:0;color:var(--c-cta);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;text-decoration:underline}

.dz-editor--foot{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;
  padding-top:1.25rem;border-top:0.0625rem solid var(--c-border-soft)}
.dz-editor--foot .button{margin:0}
.dz-editor--cancel{font-size:var(--fs-sm);color:var(--c-ink-soft)}

/* --- admin field markup, dressed for the front end ------------------------ */
.dz-editor .igp-tabs{border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);
  background:var(--c-panel-alt);overflow:hidden}
.dz-editor .igp-tabs--nav{display:flex;flex-wrap:wrap;gap:0.125rem;padding:0.625rem 0.75rem 0;
  background:var(--c-panel);border-bottom:0.0625rem solid var(--c-border-soft)}
.dz-editor .igp-tabs--tab{padding:0.5625rem 0.9375rem;margin-bottom:-0.0625rem;border:0.0625rem solid transparent;border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0;background:transparent;color:var(--c-ink-soft);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1.4;cursor:pointer}
.dz-editor .igp-tabs--tab:hover{background:var(--c-panel-alt);color:var(--c-ink)}
.dz-editor .igp-tabs--tab.is-active{background:var(--c-panel-alt);border-color:var(--c-border-soft);
  color:var(--c-ink)}
.dz-editor .igp-tabs--body{padding:1.25rem 1.125rem}
.dz-editor .igp-tabs--panel{display:none}
.dz-editor .igp-tabs--panel.is-active{display:block}

.dz-editor .igp-meta-grid{display:grid;gap:0 1.375rem;grid-template-columns:1fr}
@media screen and (min-width:48em){
  .dz-editor .igp-meta-grid{grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr))}
  /* A panel built around a body editor is a title, the body, and its gallery.
     Columns strand the title at a quarter of the width of the editor under it,
     so those panels run single-column and everything lines up. */
  .dz-editor .igp-meta-grid:has(> .igp-meta-editor){grid-template-columns:1fr}
}
.dz-editor .igp-meta-field{margin:0 0 1rem;min-width:0}
.dz-editor .igp-meta-field > label{display:block;margin:0 0 0.3125rem;font-size:var(--fs-sm)}
.dz-editor .igp-meta-field .description{display:block;margin-top:0.25rem;font-size:var(--fs-xs);
  font-style:normal;color:var(--c-ink-soft)}
/* Anything that needs room gets the whole row rather than one narrow column. */
.dz-editor .igp-meta-textarea,
.dz-editor .igp-meta-editor,
.dz-editor .igp-meta-image,
.dz-editor .igp-meta-gallery,
.dz-editor .igp-meta-terms,
.dz-editor .igp-meta-taxonomies{grid-column:1/-1}
.dz-editor .igp-meta-checkbox{display:flex;align-items:center;gap:0.5625rem}
.dz-editor .igp-meta-checkbox > label{margin:0;order:2}
.dz-editor .igp-meta-checkbox input{margin:0}

/* wp-admin's own utility classes, redefined rather than imported. */
.dz-editor .widefat{width:100%}
.dz-editor input[type=text],
.dz-editor input[type=url],
.dz-editor input[type=number],
.dz-editor input[type=search],
.dz-editor input[type=date],
.dz-editor select,
.dz-editor textarea{margin:0}
.dz-editor input[type=color]{width:3.5rem;height:2.375rem;padding:0.1875rem;border:0.0625rem solid var(--c-border);
  border-radius:var(--r-md);background:var(--c-panel-alt);cursor:pointer}
.dz-editor .button-link{border:0;background:none;padding:0;color:var(--c-cta);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;text-decoration:underline}

.dz-editor .igp-image-field{display:flex;align-items:flex-start;gap:0.75rem;flex-wrap:wrap}
.dz-editor .igp-image-field .button{margin:0;align-self:center}
.dz-editor .igp-image-field--preview img{border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-md)}
.dz-editor .igp-image-field--preview:empty{display:block;width:7.5rem;height:5rem;
  border:0.0625rem dashed var(--c-border);border-radius:var(--r-md)}
.dz-editor--panel .igp-image-field{align-items:center}

.dz-editor .igp-gallery-field--items{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.5625rem}
.dz-editor .igp-gallery-field--item{position:relative;display:block}
.dz-editor .igp-gallery-field--x{position:absolute;top:-0.375rem;right:-0.375rem;width:1.25rem;height:1.25rem;padding:0;
  border:0;border-radius:50%;background:#B32D2E;color:#fff;line-height:1;cursor:pointer}

/* Scoped past `.dz-editor label` and `.dz-editor label > span`, both 0-1-1,
   which were turning each checkbox row into a block and dropping the term name
   onto its own line. */
.dz-editor .igp-terms-field,
.igp-terms-field{display:block}
.dz-editor .igp-terms-field--search,
.igp-terms-field--search{width:100%;margin:0 0 0.375rem}
.dz-editor .igp-terms-field--list,
.igp-terms-field--list{display:grid;gap:0.125rem 0.875rem;grid-template-columns:repeat(auto-fill,minmax(11.25rem,1fr));
  max-height:15rem;overflow:auto;padding:0.5625rem;border:0.0625rem solid var(--c-border-soft);
  border-radius:var(--r-md);background:var(--c-panel)}
.dz-editor label.igp-terms-field--item,
.igp-terms-field--item{display:flex;align-items:center;gap:0.4375rem;margin:0;font-size:var(--fs-sm);
  line-height:1.5;cursor:pointer}
.dz-editor .igp-terms-field--item input,
.igp-terms-field--item input{flex:0 0 auto;margin:0}
.dz-editor label.igp-terms-field--item > span,
.igp-terms-field--item span{display:block;min-width:0;margin:0;font-weight:var(--fw-normal);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Body copy is written as HTML and shortcodes, so the box is monospace and
   does not try to look like prose. */
.dz-editor .igp-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.8125rem;line-height:1.6;tab-size:2}

/* --- mobile --------------------------------------------------------------- */
@media screen and (max-width:47.9375em){
  .dz-queue--item{flex-direction:column}
  .dz-queue--shot{flex:0 0 auto}
  .dz-queue--shot img{height:9.375rem}
  .dz-editor--bar{position:sticky;top:0;z-index:5;padding:0.75rem 0;margin-bottom:1rem;
    background:var(--c-page);border-bottom:0.0625rem solid var(--c-border-soft)}
}

/* ===== _wp.css ===== */
/* ==========================================================================
   WordPress core / editor compatibility
   ========================================================================== */
.alignleft{float:left;margin:0.3125rem 1.25rem 1.25rem 0}
.alignright{float:right;margin:0.3125rem 0 1.25rem 1.25rem}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:68.75rem;margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw)}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:var(--fs-sm);color:var(--c-muted);text-align:center;margin-top:0.375rem}
.screen-reader-text{position:absolute!important;width:0.0625rem;height:0.0625rem;padding:0;margin:-0.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sticky,.gallery-caption,.bypostauthor{}
.wp-block-image img{border-radius:var(--r-lg)}
.wp-block-button__link{background:var(--c-cta);color:var(--c-on-cta);border-radius:var(--r-md);font-weight:var(--fw-bold);box-shadow:var(--shadow-cta)}
.admin-bar .header.is-sticky{top:2rem}
@media screen and (max-width:782px){ .admin-bar .header.is-sticky{top:2.875rem} }

/* Post cards (blog / guides archive) */
.post-card{display:flex;flex-direction:column;height:100%;background:var(--c-panel);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.post-card:hover{transform:translateY(-0.1875rem);box-shadow:var(--shadow-card)}
.post-card--thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-navy-800)}
.post-card--thumb img{width:100%;height:100%;object-fit:cover}
.post-card--body{display:flex;flex-direction:column;gap:0.5rem;padding:1.125rem;flex:1 1 auto}
.post-card--meta{font-size:var(--fs-xs);color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}
.post-card--title{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:0;line-height:1.3}
.post-card--title a{color:var(--c-ink)}
.post-card--title a:hover{color:var(--vt-link);text-decoration:none}
.post-card--excerpt{font-size:var(--fs-base);color:var(--c-muted);margin:0}
.post-card--more{margin-top:auto;font-weight:var(--fw-bold);font-size:var(--fs-base)}

/* Single casino review header */
.review-hero{background:var(--c-navy-800);color:var(--c-on-dark);padding:2.1875rem 0}
.review-hero h1{color:var(--c-on-dark)}
.review-hero--logo{display:grid;place-items:center;border-radius:var(--r-lg);padding:1.5rem;min-height:10rem}
.review-hero--logo img{display:block;width:13.75rem;height:6.5rem;max-width:100%;object-fit:contain;object-position:center;margin:0 auto}
.review-hero--score{display:inline-flex;align-items:baseline;gap:0.3125rem;padding:0.5625rem 1rem;background:rgba(255,255,255,.1);border-radius:var(--r-md)}
.review-hero--score strong{font-size:var(--fs-4xl);font-weight:var(--fw-black);line-height:1}
.review-hero--facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:0.875rem;margin-top:1.25rem}
.review-hero--fact{background:rgba(255,255,255,.08);border-radius:var(--r-md);padding:0.75rem 0.875rem}
.review-hero--fact span{display:block;font-size:var(--fs-xs);opacity:.7;margin-bottom:0.1875rem}
.review-hero--fact strong{font-size:var(--fs-lg)}

/* Pros / cons */
.proscons{display:grid;grid-template-columns:1fr;gap:var(--gutter);margin:calc(var(--gutter) * 2) 0}
@media screen and (min-width:640px){ .proscons{grid-template-columns:1fr 1fr} }
.proscons--col{background:var(--c-panel);border-radius:var(--r-lg);padding:1.25rem}
.proscons--col h3{font-size:var(--fs-xl);margin:0 0 0.75rem}
.proscons--col ul{list-style:none;margin:0;padding:0;font-size:var(--fs-base)}
.proscons--col li{position:relative;padding-left:1.625rem;margin-bottom:0.5625rem}
.proscons--col li::before{content:"";position:absolute;left:0;top:0.1875rem;width:1rem;height:1rem;border-radius:50%}
.proscons--pros li::before{background:var(--c-positive);-webkit-mask:var(--icon-check) center/0.5625rem no-repeat;mask:var(--icon-check) center/0.5625rem no-repeat}
.proscons--cons li::before{background:var(--c-danger);-webkit-mask:var(--icon-cross) center/0.5rem no-repeat;mask:var(--icon-cross) center/0.5rem no-repeat}

/* Rating bar breakdown */
.rating-bars{display:flex;flex-direction:column;gap:0.625rem;margin:var(--gutter) 0}
.rating-bar{display:grid;grid-template-columns:8.125rem 1fr 2.375rem;gap:0.75rem;align-items:center;font-size:var(--fs-base)}
.rating-bar--track{height:0.5rem;background:var(--c-border-soft);border-radius:var(--r-pill);overflow:hidden}
.rating-bar--fill{height:100%;background:var(--c-cta);border-radius:inherit}
.rating-bar strong{text-align:right}
@media screen and (max-width:639px){ .rating-bar{grid-template-columns:6.25rem 1fr 2.125rem;font-size:var(--fs-sm)} }

/* Player reviews ---------------------------------------------------------- */
.reviews{margin:calc(var(--gutter) * 2.5) 0}
.reviews--summary{display:grid;grid-template-columns:1fr;gap:var(--gutter);margin-bottom:calc(var(--gutter) * 1.5);padding:1.25rem;background:var(--c-panel);border-radius:var(--r-lg)}
@media screen and (min-width:768px){ .reviews--summary{grid-template-columns:auto 1fr 1fr;align-items:start;gap:1.75rem} }
.reviews--score{text-align:center;min-width:7.5rem}
.reviews--score-value{font-size:2.75rem;font-weight:var(--fw-black);line-height:1}
.reviews--score .rating{justify-content:center;margin:0.375rem 0 0.25rem}
.reviews--score-count{font-size:var(--fs-sm);color:var(--c-muted)}
.reviews--distribution{display:flex;flex-direction:column;gap:0.4375rem}
.reviews--subscores h3{font-size:var(--fs-lg);margin:0 0 0.625rem}
.reviews--list{display:flex;flex-direction:column;gap:var(--gutter)}
.review-card{background:var(--c-panel-alt);border:0.0625rem solid var(--c-border-soft);border-radius:var(--r-lg);padding:1.125rem}
.review-card--head{display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:0.625rem}
.review-card--avatar{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:0 0 2.5rem;border-radius:50%;background:var(--c-navy-800);color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-lg)}
.review-card--who{flex:1 1 auto;min-width:0}
.review-card--name{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-weight:var(--fw-bold);font-size:var(--fs-lg)}
.review-card--verified{display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;border-radius:var(--r-pill);background:var(--c-cta);color:var(--c-on-cta);font-size:0.6875rem;font-weight:var(--fw-bold)}
.review-card--meta{font-size:var(--fs-sm);color:var(--c-muted);margin-top:0.125rem}
.review-card--rating{flex:0 0 auto}
.review-card--title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0 0 0.375rem}
.review-card--body{font-size:var(--fs-base);line-height:1.6;margin:0;color:var(--c-ink)}
@media screen and (max-width:639px){
  .review-card--head{flex-wrap:wrap}
  .review-card--rating{flex-basis:100%;margin-top:0.25rem}
}

/* ===== _hero-art.css ===== */
/* Generated by scripts/hero-art-layout.py from media/hero-art/v2/metrics.json. */

.hero,.review-hero,.vt-hero{--hero-art:none;--hero-plate:none;--hero-figure:none;--hero-focus:68% 24%}

/* Product and article heroes keep one dimmed picture behind their own layout. */
.hero::before,.review-hero::before,.vt-hero--art{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--hero-art),var(--vt-plate-grad);
  background-repeat:no-repeat;background-position:var(--hero-focus),center;background-size:cover,cover;
}

body.post-type-archive-igp_casino .hero,
body.tax-igp_casino_filter .hero,
body.tax-igp_licence .hero,
body.single-igp_casino .review-hero{
  --hero-art:url(../img/hero/casinos.webp);--hero-focus:65% 25%;
  --hero-plate:url(../img/hero/casinos-plate.webp);--hero-figure:url(../img/hero/casinos-figure.webp);
  --fig-aspect:0.5774;--fig-fx:0.5536;
  --scrim-a-d:0.72;--hero-shield-d:0.00;--scrim-a-t:0.72;--hero-shield-t:0.00;--scrim-a-m:0.72;--hero-shield-m:0.10;
}
body.post-type-archive-igp_bonus .hero,
body.tax-igp_bonus_type .hero{
  --hero-art:url(../img/hero/bonuses.webp);--hero-focus:61% 25%;
  --hero-plate:url(../img/hero/bonuses-plate.webp);--hero-figure:url(../img/hero/bonuses-figure.webp);
  --fig-aspect:0.5428;--fig-fx:0.4296;
  --scrim-a-d:0.70;--hero-shield-d:0.00;--scrim-a-t:0.68;--hero-shield-t:0.00;--scrim-a-m:0.68;--hero-shield-m:0.00;
}
body.post-type-archive-igp_game .hero,
body.single-igp_game .hero,
body.tax-igp_provider .hero{
  --hero-art:url(../img/hero/games.webp);--hero-focus:68% 21%;
  --hero-plate:url(../img/hero/games-plate.webp);--hero-figure:url(../img/hero/games-figure.webp);
  --fig-aspect:0.4689;--fig-fx:0.2715;
  --scrim-a-d:0.72;--hero-shield-d:0.00;--scrim-a-t:0.72;--hero-shield-t:0.00;--scrim-a-m:0.72;--hero-shield-m:0.00;
}
body.post-type-archive-dz_bigwin .hero,
body.single-dz_bigwin .hero{
  --hero-art:url(../img/hero/bigwins.webp);--hero-focus:76% 34%;
  --hero-plate:url(../img/hero/bigwins-plate.webp);--hero-figure:url(../img/hero/bigwins-figure.webp);
  --fig-aspect:0.8221;--fig-fx:0.6092;
  --scrim-a-d:0.70;--hero-shield-d:0.00;--scrim-a-t:0.74;--hero-shield-t:0.25;--scrim-a-m:0.72;--hero-shield-m:0.55;
}
body.post-type-archive-dz_loss .hero,
body.single-dz_loss .hero{
  --hero-art:url(../img/hero/loss.webp);--hero-focus:70% 26%;
  --hero-plate:url(../img/hero/loss-plate.webp);--hero-figure:url(../img/hero/loss-figure.webp);
  --fig-aspect:0.6343;--fig-fx:0.5572;
  --scrim-a-d:0.72;--hero-shield-d:0.00;--scrim-a-t:0.72;--hero-shield-t:0.00;--scrim-a-m:0.70;--hero-shield-m:0.25;
}
body.post-type-archive-igp_guide .hero,
body.single-igp_guide .hero,
body.post-type-archive-igp_news .hero,
body.single-igp_news .hero{
  --hero-art:url(../img/hero/guides.webp);--hero-focus:66% 26%;
  --hero-plate:url(../img/hero/guides-plate.webp);--hero-figure:url(../img/hero/guides-figure.webp);
  --fig-aspect:0.6834;--fig-fx:0.4323;
  --scrim-a-d:0.74;--hero-shield-d:0.00;--scrim-a-t:0.72;--hero-shield-t:0.00;--scrim-a-m:0.72;--hero-shield-m:0.00;
}
body.post-type-archive-dz_reward .hero,
body.single-dz_reward .hero{
  --hero-art:url(../img/hero/store.webp);--hero-focus:71% 22%;
  --hero-plate:url(../img/hero/store-plate.webp);--hero-figure:url(../img/hero/store-figure.webp);
  --fig-aspect:0.6894;--fig-fx:0.339;
  --scrim-a-d:0.74;--hero-shield-d:0.00;--scrim-a-t:0.74;--hero-shield-t:0.00;--scrim-a-m:0.74;--hero-shield-m:0.00;
}
body.post-type-archive-dz_giveaway .hero,
body.single-dz_giveaway .hero{
  --hero-art:url(../img/hero/giveaways.webp);--hero-focus:69% 19%;
  --hero-plate:url(../img/hero/giveaways-plate.webp);--hero-figure:url(../img/hero/giveaways-figure.webp);
  --fig-aspect:0.6449;--fig-fx:0.4239;
  --scrim-a-d:0.74;--hero-shield-d:0.00;--scrim-a-t:0.74;--hero-shield-t:0.00;--scrim-a-m:0.76;--hero-shield-m:0.05;
}
body.post-type-archive-dz_casino_board .hero{
  --hero-art:url(../img/hero/boards.webp);--hero-focus:61% 25%;
  --hero-plate:url(../img/hero/boards-plate.webp);--hero-figure:url(../img/hero/boards-figure.webp);
  --fig-aspect:0.6345;--fig-fx:0.4632;
  --scrim-a-d:0.68;--hero-shield-d:0.00;--scrim-a-t:0.68;--hero-shield-t:0.00;--scrim-a-m:0.68;--hero-shield-m:0.65;
}
body.page-template-page-leaderboard .hero{
  --hero-art:url(../img/hero/points.webp);--hero-focus:76% 19%;
  --hero-plate:url(../img/hero/points-plate.webp);--hero-figure:url(../img/hero/points-figure.webp);
  --fig-aspect:0.6876;--fig-fx:0.4806;
  --scrim-a-d:0.74;--hero-shield-d:0.00;--scrim-a-t:0.74;--hero-shield-t:0.00;--scrim-a-m:0.74;--hero-shield-m:0.00;
}
body.page-template-page-profile .hero{
  --hero-art:url(../img/hero/profile.webp);--hero-focus:66% 20%;
  --hero-plate:url(../img/hero/profile-plate.webp);--hero-figure:url(../img/hero/profile-figure.webp);
  --fig-aspect:0.5647;--fig-fx:0.4582;
  --scrim-a-d:0.62;--hero-shield-d:0.00;--scrim-a-t:0.62;--hero-shield-t:0.00;--scrim-a-m:0.68;--hero-shield-m:0.00;
}
body.post-type-archive-igp_author .hero,
body.single-igp_author .hero{
  --hero-art:url(../img/hero/authors.webp);--hero-focus:65% 28%;
  --hero-plate:url(../img/hero/authors-plate.webp);--hero-figure:url(../img/hero/authors-figure.webp);
  --fig-aspect:0.6345;--fig-fx:0.3836;
  --scrim-a-d:0.74;--hero-shield-d:0.00;--scrim-a-t:0.76;--hero-shield-t:0.00;--scrim-a-m:0.76;--hero-shield-m:0.20;
}
body.page-template-page-about .hero{
  --hero-plate:url(../img/hero/about-plate.webp);--hero-figure:url(../img/hero/about-figure.webp);
  --fig-aspect:0.6411;--fig-fx:0.4426;
  --scrim-a-d:0.76;--hero-shield-d:0.00;--scrim-a-t:0.76;--hero-shield-t:0.00;--scrim-a-m:0.76;--hero-shield-m:0.45;
}
body.tax-igp_payment .hero{
  --hero-art:url(../img/hero/default.webp);--hero-focus:64% 19%;
  --hero-plate:url(../img/hero/default-plate.webp);--hero-figure:url(../img/hero/default-figure.webp);
  --fig-aspect:0.5927;--fig-fx:0.5244;
  --scrim-a-d:0.72;--hero-shield-d:0.00;--scrim-a-t:0.72;--hero-shield-t:0.00;--scrim-a-m:0.74;--hero-shield-m:0.15;
}

.vt-hero:has(.vt-hero--bg img){--hero-art:none}

/* ===== _app-shell.css ===== */
/* ==========================================================================
   Velatonmies — application shell
   Sidebar + top bar + one scrolling content column, on a deep violet canvas.
   Loaded after the legacy partials so it owns the tokens they read.
   ========================================================================== */

/* --------------------------------------------------------------- palette -- */
:root{
  /* Canvas and surfaces. Neutral near-black with the faintest cool cast —
     the colour comes from the accent and the artwork, not from the ground.
     Four elevation steps: page, panel, raised card, hover. */
  /* Neutral greys that step far enough apart to be seen as steps. The scale
     before this one was too tight: a card stood 1.07:1 off the page and a
     banded section 1.04:1, so neither a card nor the start of a new section
     registered and the page read as one flat sheet. Dropping the page toward
     black bought the step at the cost of the room: a dark theme is not meant
     to be darker, it is meant to be legible. The whole ladder moves up
     instead. The page is lighter than it has ever been and each surface is
     lighter again above it: a card stands 1.32:1 off the page, a raised card
     1.53:1, the band 1.13:1. The cast stays within a few points of neutral,
     so it reads as dark rather than tinted; the colour belongs to the accent
     and the artwork. */
  --vt-canvas:#16171A;
  --vt-surface:#2D2E31;
  --vt-raised:#37383B;
  --vt-hover:#3F4043;
  /* The alternating band: one step off the canvas, no more. It is there to
     group a section, not to draw one. */
  --vt-band:#212225;
  /* Lines carry the edges the old steps could not: at 8% a card edge was
     1.3:1 against the page, which is an edge nobody sees. */
  --vt-line:rgba(255,255,255,.12);
  --vt-line-strong:rgba(255,255,255,.22);

  /* Ink */
  --vt-text:#F2F3F7;
  --vt-text-dim:#AAADB9;
  /* Faint ink still has to clear 4.5:1 on the deepest surface it lands on
     (--vt-hover). The old #71747F reached 3.31 there, which is why sidebar
     labels, terms lines and payment counters all failed the sweep. */
  --vt-text-faint:#A7ADBA;

  /* Accent: the wordmark's own gold, start colour to end colour. Gold changes
     one structural thing about the accent — an accent fill can no longer carry
     white text. White on #FFB822 is 1.73:1. So --vt-accent-ink is a warm
     near-black that belongs to the gold rather than a neutral one, and every
     filled control reads it rather than hardcoding #fff.
     --accent-hi is the lifted variant, the one that has to work as *text*: on
     the near-black canvas that is a brighter gold, and the light theme swaps it
     for a dark gold, because no bright gold is legible on a light ground.
     --accent-edge is the boundary a gold fill needs on a light page, where the
     fill itself only reaches 1.4:1 against the surface behind it. */
  --vt-accent:#FFB822;
  --vt-accent-hi:#FFC94D;
  /* The gold as text: the brand gold itself on dark, the ink on white (the
     gold cannot carry text there). The hero plates are dark in both themes,
     so text in the accent role on them is the gold in both. */
  --vt-link:#FFB822;
  --vt-on-plate-link:#FFB822;
  --vt-accent-lo:#F8961A;
  --vt-accent-ink:#150C00;
  --vt-accent-edge:transparent;
  --vt-accent-wash:rgba(255,184,34,.14);
  --vt-accent-line:rgba(255,184,34,.42);

  /* Status. Green means online or money returned; red is the live badge and
     the counters that borrow its urgency. */
  --vt-live:#2ED573;
  --vt-hot:#EF3E5C;
  --vt-warn:#F0B429;
  /* The -ink pair of each mark: the same signal at text contrast. On the dark
     canvas the mark is already legible as text; on the light one it is not
     (#F0B429 reaches 1.62 on white), so the light theme redefines these and
     nothing else has to know. --rank-mix darkens the brand rank colours, which
     arrive as inline custom properties from inc/brand.php. */
  --vt-live-ink:var(--vt-live);
  --vt-warn-ink:var(--vt-warn);
  --vt-danger-ink:var(--vt-danger);
  --vt-rank-mix:100%;
  --vt-danger:#EF4E3A;
  /* --vt-hot and --vt-danger are marks: a live dot, a minus, an icon, where
     the 3:1 non-text bar applies. A filled badge carrying white text needs
     4.5:1, which neither reaches (3.81 and 3.61), so solid variants exist for
     exactly that job. */
  --vt-hot-solid:#C42743;
  --vt-danger-solid:#C0341F;
  /* Same job for the other two marks: a filled status badge in green or grey
     carries white text, and neither --vt-live nor --vt-text-dim is dark enough
     to hold it (1.93 and 2.31). These two are, in both themes, so they need no
     per-theme twin. */
  --vt-live-solid:#0E7A41;
  --vt-muted-solid:#565A66;

  /* One radius scale, derived from a single base the way a component library
     does it, rather than five numbers chosen per component. 8px is the card;
     controls sit two under it and badges four, so a button inside a card
     never matches the card's corner and never fights it either. */
  --vt-r-base:0.5rem;
  --vt-r-xs:calc(var(--vt-r-base) - 0.25rem);
  --vt-r-sm:calc(var(--vt-r-base) - 0.125rem);
  --vt-r-md:var(--vt-r-base);
  --vt-r-lg:calc(var(--vt-r-base) + 0.125rem);
  --vt-r-xl:calc(var(--vt-r-base) + 0.25rem);
  /* Spacing scale. Four-pixel base, and the only values the interface is
     allowed to use, so "the gap between two sections" has one answer rather
     than the three it had grown (22, 32 and 40, some as margin and some as
     padding, which is what made the rhythm read as accidental). */
  --vt-s-1:0.25rem;  --vt-s-2:0.5rem;   --vt-s-3:0.75rem;  --vt-s-4:1rem;
  --vt-s-5:1.25rem; --vt-s-6:1.5rem;  --vt-s-8:2rem;  --vt-s-10:2.5rem;
  --vt-s-12:3rem;

  /* A card grid's auto-fill minimum, deliberately in px: it must not grow
     with the interface scale, or a wider screen keeps its column count and
     inflates every card instead of fitting another one. */
  --card-min:256px;

  /* The longest label in here is "Lossback Lounge" and none of them grow, so
     266px was width the navigation never used. A tighter rail reads as a
     considered edge rather than a default panel, and it hands the difference
     to the content. */
  --vt-side-w:14rem;
  /* The bar is sized by the wordmark, not the other way round: at 64px the
     logo could only take 34px and the ".com" fell to nine-pixel letterforms.
     76px lets it sit at 44px and still keeps 16px of air above and below.
     Everything that reads as "below the bar" takes this token, so the sidebar,
     the sticky offsets and the mobile sheet all follow it. */
  --vt-top-h:4.75rem;
  --vt-pad:1.5rem;

  --vt-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.45),0 0.5rem 1.5rem -0.75rem rgba(0,0,0,.75);
  --vt-shadow-pop:0 1.5rem 3.75rem -1.25rem rgba(0,0,0,.88);
  --vt-ring:0 0 0 0.125rem var(--vt-canvas),0 0 0 0.25rem var(--vt-accent-hi);
}

/* The legacy components read the older token names. Re-point them at the
   palette above rather than rewriting two thousand declarations: every
   surface, border and text colour then follows the shell. */
:root{
  /* Ink and plates that must never follow the theme.
     `--c-navy-*` are named for what they are — a dark brand plate — and
     `--c-on-dark` is the ink that sits on one. A component that paints a
     headline over artwork asks for these, so flipping them with the theme
     put dark text on a dark photograph everywhere the light theme was on.
     They stay dark/light in both themes; only the page around them changes. */
  /* The plate ramp is neutral graphite, not the violet-black it used to be.
     A plate is a scrim: it sits under photography and behind white ink, and a
     tinted one fought both the artwork and the light theme around it. Grey
     reads as deliberate in either theme; the brand colour lives on the
     controls, where it means "this is the action". */
  --vt-plate:#17181B;
  /* The scrim painted over hero artwork, as channels so an alpha can ride on
     it. This, not the plate, is what made a hero read near-black. */
  --vt-scrim:15,16,19;
  /* Every scrim alpha is multiplied by this. The alphas were solved against
     the near-black scrim, so a lighter scrim needs more of it to hold the
     same ink contrast over the same picture. */
  --scrim-boost:1;
  /* How much of the plate the editor's pick rail keeps. The rail sits where
     the picture's tint has already faded out, so this is the floor that holds
     the inactive rows legible over a bright frame. */
  --vt-rail-a:82%;
  --vt-plate-grad:linear-gradient(150deg,#212226 0%,#141518 62%,#101114 100%);
  --vt-plate-2:#232529;
  --vt-on-plate:#FFFFFF;
  --vt-on-plate-dim:rgba(255,255,255,.72);
  /* Links and marks on a plate. Near-white rather than lilac, so they never
     reintroduce the tint; plate links carry an underline to stay findable. */
  --vt-on-plate-accent:#DFE2E9;

  --c-bg:var(--vt-canvas);
  --c-navy-900:var(--vt-plate);
  --c-navy-800:var(--vt-plate-2);
  --c-ink:var(--vt-text);
  --c-panel:var(--vt-surface);
  --c-panel-dark:var(--vt-raised);
  --c-panel-alt:var(--vt-surface);
  --c-border:var(--vt-line-strong);
  --c-border-soft:var(--vt-line);
  --c-brand:var(--vt-accent-hi);
  --c-brand-dark:var(--vt-accent);
  --c-brand-deep:var(--vt-accent-hi);
  --c-brand-on-dark:var(--vt-on-plate-accent);
  --c-cta:var(--vt-accent);
  --c-cta-hover:var(--vt-accent-lo);
  --c-cta-shadow:transparent;
  --c-on-cta:var(--vt-accent-ink);
  --c-on-dark:var(--vt-on-plate);
  --c-muted:var(--vt-text-dim);
  --c-muted-dark:var(--vt-text-dim);
  --c-gold:var(--vt-warn);
  --c-positive:var(--vt-live);
  --c-danger:var(--vt-danger);
  --shadow-card:var(--vt-shadow);
  --shadow-pop:var(--vt-shadow-pop);
  --shadow-cta:none;
  /* The inherited gutter was 15px, and it feeds 138 declarations: paragraph
     margins, list margins, grid gaps, container padding. One pixel off the
     scale, repeated everywhere, is most of what made the spacing read as
     accidental. */
  --gutter:var(--vt-s-4);
  --r-sm:var(--vt-r-xs); --r-md:var(--vt-r-sm); --r-lg:var(--vt-r-md);
}

/* Light theme: the same structure at the other end of the range. Violet is
   kept in the tint rather than dropped, so the two themes are one brand. */
:root[data-theme="light"]{
  /* Stepped down from the near-white it used to be. A gold accent on a white
     page glares and loses its edge; a page that sits a few points darker gives
     the fill something to sit on and the cards somewhere to lift from. The
     ladder still runs band < canvas < surface < raised, so a band groups and a
     card rises, the same as in the dark theme. */
  --vt-canvas:#E8EAEF;
  --vt-surface:#F7F8FB;
  --vt-raised:#FFFFFF;
  --vt-hover:#E1E3EA;
  /* The light band goes down rather than up: the card is already the lighter
     surface, so a lighter band would swallow the cards standing on it. */
  --vt-band:#DFE2E9;
  /* The surfaces sit closer together now, so the lines do more of the work. */
  --vt-line:rgba(16,17,22,.12);
  --vt-line-strong:rgba(16,17,22,.20);
  --vt-text:#14151B;
  --vt-text-dim:#565A66;
  /* Darkened with the surfaces: #656974 fell to 4.23:1 on the new band. */
  --vt-text-faint:#5A5E6B;
  /* The plate ramp lifts off pure black on a light page. A plate is a dark
     panel sitting in a light room: at #17181B it stood 14.8:1 off the canvas,
     which read as a hole cut in the page rather than a panel on it. Graphite
     keeps it clearly a plate (11.2:1) and keeps every ink that lands on one
     well clear: white 13.4:1, dimmed white 7.8:1, plate links 6.9:1, gold
     7.8:1. The dark theme keeps the near-black, where the room is dark too. */
  --vt-plate:#2B2F36;
  --vt-plate-2:#3A3F48;
  /* Graphite scrim and fallback ground on a light page, so a hero reads as a
     dark panel in a lit room rather than a hole cut in the page. */
  --vt-scrim:43,47,54;
  /* Graphite covers less than near-black at the same alpha: 1.18 restores the
     contrast the alphas were solved for, so the copy over a hero reads as it
     does in the dark theme while the picture's own blacks stay graphite. */
  --scrim-boost:1.18;
  /* Graphite gives white ink less to work with than near-black, so the light
     rail keeps a few points more of the plate. */
  --vt-rail-a:86%;
  --vt-plate-grad:linear-gradient(150deg,#454A55 0%,#343942 62%,#2B2F36 100%);
  /* The fill is the same gold in both themes — a brand colour that changes
     with the theme is not a brand colour. Only the text variant flips. */
  --vt-accent:#FFB822;
  --vt-accent-hi:#7E5200;
  --vt-link:#14151B;
  --vt-accent-lo:#F8961A;
  --vt-accent-edge:#8F5D05;
  --vt-accent-wash:rgba(255,184,34,.22);
  --vt-accent-line:rgba(143,93,5,.45);
  --vt-live:#12924E;
  --vt-hot:#D3204A;
  --vt-live-ink:#0C6E3A;
  /* Darkened with the surfaces: #8A6413 fell to 4.19:1 on the hover step,
     which is where the rating chip sits. */
  --vt-warn-ink:#795610;
  --vt-danger-ink:#B3311F;
  --vt-rank-mix:50%;
  --vt-shadow:0 0.0625rem 0.125rem rgba(16,17,22,.06),0 0.5rem 1.5rem -0.875rem rgba(16,17,22,.26);
  --vt-shadow-pop:0 1.5rem 3.75rem -1.5rem rgba(16,17,22,.34);
  --vt-ring:0 0 0 0.125rem #fff,0 0 0 0.25rem var(--vt-accent);
}

/* ----------------------------------------------------------------- reset -- */
html,body{background:var(--vt-canvas);color:var(--vt-text)}
body.vt-app{min-height:100vh}

/* The old shell pinned `body` to the viewport and made an inner wrapper the
   scroll container, to kill iOS rubber-banding. The app frame has no such
   wrapper — a sticky sidebar needs the document itself to scroll — so the
   window goes back to being the scroller. `overscroll-behavior` on the root
   handles the bounce instead, which is what it is for. */
html,body{
  height:auto;min-height:100%;
  position:static;inset:auto;
  overflow:visible;
}
/* `clip` rather than `hidden`: hidden would make the element a scroll
   container of its own and the sticky sidebar would stop sticking. */
html{overflow-x:clip;overscroll-behavior-y:none}
.dz-viewport{display:contents}

.vt-skip{
  position:fixed;left:0.75rem;top:-3.75rem;z-index:120;
  padding:0.625rem 1rem;border-radius:var(--vt-r-sm);
  background:var(--vt-accent);color:var(--vt-accent-ink);font-weight:700;
  transition:top .16s var(--ease,ease);
}
.vt-skip:focus{top:0.75rem}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--vt-ring);border-radius:var(--vt-r-xs);
}

/* ----------------------------------------------------------------- shell -- */
/* The bar spans the window, so the shell begins beneath it and the sidebar
   is as tall as what is left rather than as tall as the page. */
.vt-shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--vt-top-h))}

.vt-main{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;min-height:calc(100vh - var(--vt-top-h));
}

/* Full width. A sidebar layout already gives the eye a left edge to return
   to, so capping the column only leaves dead space on a wide display. Long
   prose is measured further down instead, where the constraint belongs. */
/* The content column has a ceiling, but a high one. The first attempt put it
   at 92rem, which was solving a problem already solved elsewhere: cards were
   inflating because the grid minimums scaled with the interface, and once
   those went back to px the column could have the width. At 92rem a 2560
   display got 194px of empty gutter on each side, which is a worse answer
   than the stretch it was preventing.

   120rem does not bite at 2560 at all. It exists for the ultrawide case,
   where 3,100px of unbroken row is nobody's reading experience, and there it
   leaves the column centred with a proportionate margin. */
.vt-content{
  flex:1 0 auto;width:100%;min-width:0;
  max-width:var(--vt-content-max,120rem);margin-inline:auto;
  padding:var(--vt-pad) var(--vt-pad) 3.5rem;
}
/* The footer belongs to the content column. The bar does not: it spans the
   window, with the brand at one edge and the account at the other, which is
   the point of moving it above the shell. */
.vt-foot--grid{max-width:var(--vt-content-max,120rem);margin-inline:auto;width:100%}

/* The rail never scrolls, but the drawer may. They are the same element at
   different sizes: above the breakpoint it is a permanent column that has to
   fit, and below it an overlay whose content can be taller than the phone.
   The no-scroll arrangement is therefore scoped to the column. */
@media (min-width:901px){
  .vt-side--scroll{overflow:hidden}
}

/* --------------------------------------------------------------- sidebar -- */
.vt-side{
  position:sticky;top:var(--vt-top-h);flex:0 0 var(--vt-side-w);width:var(--vt-side-w);
  height:calc(100vh - var(--vt-top-h));display:flex;flex-direction:column;
  background:var(--vt-surface);
  border-right:0.0625rem solid var(--vt-line);
  z-index:60;
}

/* The brand sits at the left end of the bar, in a slot the width of the
   sidebar beneath it, so the wordmark and the navigation share one edge. */
.vt-top--brand{
  display:flex;align-items:center;gap:0.625rem;flex:0 0 auto;
  width:calc(var(--vt-side-w) - var(--vt-pad));min-width:0;margin-right:var(--vt-s-4);
}

.vt-brand{display:flex;align-items:center;gap:0.625rem;color:var(--vt-text);text-decoration:none;min-width:0}
.vt-brand--mark{
  display:grid;place-items:center;width:1.875rem;height:1.875rem;flex:0 0 auto;
  border-radius:0.5625rem;background:linear-gradient(150deg,var(--vt-accent-hi),var(--vt-accent-lo));
  color:var(--vt-accent-ink);font-weight:800;font-size:0.9375rem;letter-spacing:-.02em;
}
.vt-brand--word{font-weight:800;font-size:1.0625rem;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The wordmark is a wide lockup, roughly 3.4:1, so it is capped by height and
   left to take whatever width that gives it: 34px tall lands at about 115px
   wide inside a 200px slot, which reads at a glance without crowding the menu
   button next to it. `width:auto` with the intrinsic attributes still on the
   element means it reserves its box before it loads. */
.vt-brand--logo{max-height:2.75rem;max-width:100%;width:auto;height:auto;display:block}
.vt-brand img{max-height:2.75rem;width:auto}
@media (max-width:900px){
  .vt-brand--logo,.vt-brand img{max-height:2.125rem}
}

.vt-side--collapse{margin-left:auto}

/* The sidebar does not scroll. Everything in it is either navigation, which
   must be reachable without hunting, or the giveaway rail, which is the one
   thing here that can be any height: it takes whatever the fixed blocks leave
   and its card absorbs the difference. On a short window the rail shrinks to
   its floor and disappears below that rather than pushing the nav out of
   reach. */
.vt-side--scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  /* The same top gap the content column takes, so the first nav row and the
     first block on the page start on one line under the bar. It was 6px
     against the content's 24, which read as the navigation being pushed up
     against the header. */
  padding:var(--vt-pad) 0.75rem 1rem;
  scrollbar-width:thin;scrollbar-color:var(--vt-line-strong) transparent;
}
.vt-side--scroll::-webkit-scrollbar{width:0.5rem}
.vt-side--scroll::-webkit-scrollbar-thumb{background:var(--vt-line-strong);border-radius:6.1875rem;border:0.125rem solid var(--vt-surface)}

.vt-side--label{
  display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;
  margin:0.875rem 0.375rem 0.375rem;font-size:0.6875rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--vt-text-faint);
}
.vt-side--more{font-size:0.6875rem;font-weight:700;color:var(--vt-link);text-transform:none;letter-spacing:0}
.vt-side--more:hover{color:var(--vt-link)}

.vt-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}
.vt-nav--item,.vt-nav--plain a{
  display:flex;align-items:center;gap:0.625rem;
  padding:0.5rem 0.625rem;border-radius:var(--vt-r-md);
  color:var(--vt-text-dim);font-size:0.84375rem;font-weight:600;text-decoration:none;
  border:0.0625rem solid transparent;
  transition:background .14s ease,color .14s ease;
}
.vt-nav--item:hover,.vt-nav--plain a:hover{background:var(--vt-hover);color:var(--vt-text)}
.vt-nav--item.is-current{
  background:var(--vt-accent-wash);border-color:var(--vt-accent-line);color:var(--vt-text);
}
.vt-nav--item.is-current .vt-nav--icon{color:currentColor}
.vt-nav--icon{display:grid;place-items:center;width:1.25rem;flex:0 0 auto;color:currentColor}
.vt-nav--icon svg{display:block}
.vt-nav--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-nav--plain{list-style:none;margin:0;padding:0}

.vt-side--block{margin-top:0.25rem}

.vt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.0625rem}
.vt-list--row{
  display:flex;align-items:center;gap:0.625rem;
  padding:0.4375rem 0.625rem;border-radius:var(--vt-r-md);
  color:var(--vt-text);text-decoration:none;
  transition:background .14s ease;
}
.vt-list--row:hover{background:var(--vt-hover)}
.vt-list--art{
  position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:2.125rem;height:2.125rem;border-radius:0.5625rem;overflow:hidden;
  background:color-mix(in srgb,var(--tint,#3a2b52) 70%,#000 30%);
  color:#fff;font-weight:800;font-size:0.8125rem;
}
.vt-list--art-round{border-radius:62.4375rem}
.vt-list--art img{width:100%;height:100%;object-fit:contain;padding:0.25rem}
.vt-list--art-round img{object-fit:cover;padding:0}
.vt-list--body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:0.0625rem}
.vt-list--name{font-size:0.84375rem;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-list--meta{font-size:0.71875rem;color:var(--vt-text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-list--score{
  flex:0 0 auto;font-size:0.75rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--vt-warn-ink);
}
.vt-list--off{flex:0 0 auto;font-size:0.6875rem;color:var(--vt-text-faint)}
.vt-live-dot{
  flex:0 0 auto;width:0.5rem;height:0.5rem;border-radius:6.1875rem;background:var(--vt-live);
  box-shadow:0 0 0 0.1875rem color-mix(in srgb,var(--vt-live) 22%,transparent);
}

.vt-side--foot{
  flex:0 0 auto;padding:0.75rem;border-top:0.0625rem solid var(--vt-line);
  display:flex;flex-direction:column;gap:0.625rem;
}

.vt-theme{display:flex;gap:0.25rem;padding:0.1875rem;border-radius:var(--vt-r-md);background:var(--vt-canvas)}
.vt-theme--btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:0.375rem;
  padding:0.4375rem 0.5rem;border:0;border-radius:var(--vt-r-sm);background:transparent;
  color:var(--vt-text-dim);font:inherit;font-size:0.78125rem;font-weight:700;cursor:pointer;
}
.vt-theme--btn:hover{color:var(--vt-text)}
.vt-theme--btn.is-active{background:var(--vt-raised);color:var(--vt-text)}
.vt-theme--btn svg{opacity:.85}

.lang-switch--side{width:100%;justify-content:stretch;border-color:var(--vt-line);background:var(--vt-canvas);margin:0}
.lang-switch--side .lang-switch--item{flex:1;text-align:center}

.vt-side--scrim{display:none}

/* ---------------------------------------------------------------- topbar -- */
.vt-top{
  position:sticky;top:0;z-index:70;
  display:flex;align-items:center;gap:0.75rem;
  height:var(--vt-top-h);padding:0 var(--vt-pad);
  background:color-mix(in srgb,var(--vt-canvas) 88%,transparent);
  /* The one persistent glass surface on the page. It earns the blur because
     content genuinely scrolls under it and the bar has to stay readable over
     whatever passes beneath. Everything else that carried a backdrop-filter
     (kickers, poster stats, ghost buttons, hero picks, the pot) sat on a
     scrim of 78% or more, where the blur was doing no visible work, and 36
     glass surfaces at once is not an accent. */
  backdrop-filter:saturate(1.4) blur(0.75rem);
  border-bottom:0.0625rem solid var(--vt-line);
}
/* The drawer opener exists only where the drawer does. See header.php.
   Scoped to the bar because the shared `.vt-icon-btn` rule below sets
   `display:grid` at equal specificity and, coming later, was winning: the
   button was on screen at every width, which is the collapse control this
   interface is not supposed to have. */
.vt-top > .vt-top--menu{display:none}

.vt-top--end{display:flex;align-items:center;gap:0.5rem;margin-left:auto}

.vt-icon-btn{
  /* 44px is the tap-target floor, and the top bar has room for it. */
  display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:0 0 auto;
  border:0.0625rem solid transparent;border-radius:var(--vt-r-md);
  background:transparent;color:var(--vt-text-dim);cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.vt-icon-btn:hover{background:var(--vt-hover);color:var(--vt-text)}

.vt-top--cta{
  display:inline-flex;align-items:center;gap:0.4375rem;height:2.375rem;padding:0 0.9375rem;
  border-radius:62.4375rem;background:var(--vt-accent-wash);
  border:0.0625rem solid var(--vt-accent-line);color:var(--vt-link);
  font-size:0.8125rem;font-weight:700;text-decoration:none;
}
.vt-top--cta:hover{background:var(--vt-accent);border-color:var(--vt-accent);color:var(--vt-accent-ink)}

.vt-account{
  display:flex;align-items:center;gap:0.5625rem;padding:0.25rem 0.625rem 0.25rem 0.25rem;
  border-radius:62.4375rem;color:var(--vt-text);text-decoration:none;
}
.vt-account:hover{background:var(--vt-hover)}
.vt-account img{width:1.875rem;height:1.875rem;border-radius:62.4375rem;object-fit:cover;flex:0 0 auto}
.vt-account--body{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.vt-account--name{font-size:0.8125rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:8.125rem}
.vt-account--rank{font-size:0.6875rem;color:var(--rank,var(--vt-text-faint))}

/* ---------------------------------------------------------------- footer -- */
.vt-foot{margin:2.5rem var(--vt-pad) 0;padding-top:1.75rem;border-top:0.0625rem solid var(--vt-line)}
.vt-foot--grid{
  display:grid;gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(10.625rem,1fr));
  padding-bottom:1.75rem;
}
.vt-foot--col-brand{grid-column:span 2;max-width:21.25rem}
.vt-foot--about{margin:0.75rem 0 0.875rem;color:var(--vt-text-dim);font-size:0.8125rem;line-height:1.6}
.vt-foot--social{display:flex;gap:0.25rem}
.vt-foot--title{margin:0 0 0.75rem;font-size:0.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--vt-text-faint)}
.vt-foot--menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.vt-foot--menu a{color:var(--vt-text-dim);font-size:0.84375rem;text-decoration:none}
.vt-foot--menu a:hover{color:var(--vt-text)}
.vt-foot--all{color:var(--vt-link)!important;font-weight:700}

.vt-foot--legal{border-top:0.0625rem solid var(--vt-line);padding:1.125rem 0 2rem}
.vt-foot--disclaimer{
  display:flex;align-items:flex-start;gap:0.625rem;flex-wrap:wrap;
  margin:0 0 0.875rem;color:var(--vt-text-faint);font-size:0.78125rem;line-height:1.6;
}
.vt-age{
  flex:0 0 auto;display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:62.4375rem;
  border:0.09375rem solid var(--vt-danger);color:var(--vt-danger);font-size:0.6875rem;font-weight:800;
}
/* The affiliate notice, the helpline and the publisher are their own
   paragraphs now rather than spans inside the disclaimer, so each sets its own
   rhythm instead of inheriting the flex row the age badge needs. */
.vt-foot--affiliate,
.vt-foot--helpline,
.vt-foot--entity{margin:0 0 0.625rem;color:var(--vt-text-faint);font-size:0.78125rem;line-height:1.6}
.vt-foot--entity{margin-bottom:0.875rem}
.vt-foot--helpline a{color:var(--vt-link)}
.vt-foot--bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.vt-foot--bottom p{margin:0;color:var(--vt-text-faint);font-size:0.78125rem}
.vt-foot--legal-menu{list-style:none;display:flex;gap:1.125rem;margin:0;padding:0;flex-wrap:wrap}
.vt-foot--legal-menu a{color:var(--vt-text-faint);font-size:0.78125rem;text-decoration:none}
.vt-foot--legal-menu a:hover{color:var(--vt-text)}

/* ------------------------------------------------------------ responsive -- */
@media (min-width:1700px){
  :root{--vt-pad:2rem}
}

@media (max-width:1180px){
  :root{--vt-side-w:12.75rem}
}

@media (max-width:900px){
  :root{--vt-pad:1rem}
  /* A phone bar stays compact. The logo is already 29% of a 390px screen at
     34px, so it has nothing to gain here, and the twelve pixels are worth more
     to the full-screen menu, which fits a common phone exactly. */
  :root{--vt-top-h:4rem}
  /* A full screen of menu rather than a panel sliding in over the page. On a
     phone the navigation is the whole task for as long as it is open, and a
     284px drawer spent half the screen dimming what the reader had already
     decided to leave. It sits under the bar so the button that opened it is
     still there to close it. */
  .vt-side{
    position:fixed;inset:var(--vt-top-h) 0 0;width:auto;flex-basis:auto;
    height:auto;max-height:none;border-right:0;
    background:var(--vt-canvas);
    transform:none;opacity:0;visibility:hidden;
    transition:opacity .18s var(--ease,ease),visibility .18s;
  }
  body.vt-side-open .vt-side{opacity:1;visibility:visible}
  /* The menu covers the page, so there is nothing left for a scrim to dim. */
  .vt-side--scrim{display:none!important}
  .vt-top > .vt-top--menu{display:grid}
  .vt-account--body{display:none}
  .vt-top--cta span{display:none}
  .vt-top--cta{padding:0;width:2.75rem;height:2.75rem;justify-content:center}
  .vt-foot--col-brand{grid-column:span 2}
}

/* ------------------------------------------------ tap targets on touch -- */
/* R-03 puts the floor at 44px, and it is a floor for fingers, not for mice:
   a 34px chip is comfortable with a cursor and a miss with a thumb. So the
   controls grow at the drawer breakpoint rather than everywhere, which keeps
   the desktop density the interface was designed around. Links inside a
   sentence are exempt (WCAG 2.5.8); these are all discrete controls. */
/* --------------------------------------------------- mobile menu layout -- */
/* Two columns, everything on one screen. The labels span both so the groups
   still read as groups, and the rows are cards rather than list items because
   at this size they are targets first. */
@media (max-width:900px){
  .vt-side--scroll{padding:var(--vt-s-4) var(--vt-pad) var(--vt-s-4)}
  .vt-side--scroll .vt-nav{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--vt-s-2);
  }
  .vt-side--label{margin:var(--vt-s-4) 0 var(--vt-s-2)}
  .vt-side--scroll .vt-nav:first-child{margin-top:0}
  /* Sized so the whole menu lands on one screen of a common phone: the ten
     destinations in two columns, the More list and the switches, inside 844px
     minus the bar. Below that it scrolls rather than hiding anything. */
  .vt-nav--item,.vt-nav--plain a{
    flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--vt-s-1);
    min-height:4rem;padding:var(--vt-s-3);
    border:0.0625rem solid var(--vt-line);background:var(--vt-surface);
    font-size:0.84375rem;
  }
  .vt-nav--item.is-current{border-color:var(--vt-accent)}
  .vt-nav--icon{color:currentColor}
  .vt-side--block{margin-top:0}
  .vt-side--foot{
    padding:var(--vt-s-3) var(--vt-pad) var(--vt-s-4);
    border-top:0.0625rem solid var(--vt-line);
  }
}

@media (max-width:900px){
  .vt-btn,
  .vt-chip,
  .vt-top--cta,
  .vt-theme--btn,
  .lang-switch--item,
  .toplist-sort--button,
  .payment-logo,
  .payment-row--more,
  .casino-tile--tag,
  .vt-tag--link,
  .vt-sec--link{min-height:2.75rem}

  .vt-btn,.vt-chip,.vt-theme--btn,.lang-switch--item,.toplist-sort--button,
  .payment-logo,.payment-row--more,.casino-tile--tag{
    display:inline-flex;align-items:center;justify-content:center;
  }

  .vt-nav--item,.vt-side--nav a{min-height:2.75rem}
  .vt-side--more{padding:0.375rem 0.625rem;min-height:2.75rem;display:inline-flex;align-items:center}
  .vt-icon-btn{width:2.75rem;height:2.75rem}

  /* The inherited button set and the tile's own controls. */
  .button,.button.large,.button.small,.button.secondary,.button.hollow,
  .casino-tile--review-link,
  .casino-tile--showmore-toggle,
  .toplist-controls--mobile button,
  .filters--clear,
  .vt-skip,
  .pagination a,.pagination span,
  .dz-tab,.dz-filter--btn,
  .vt-code,.compare--casino{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center}
  .vt-brand{min-height:2.75rem}
}

@media (max-width:640px){
  /* The two shortcut icons and the bonus pill are all reachable from the
     sidebar, so on a phone the bar keeps only what is not: the drawer opener
     and the account. */
  .vt-top--cta,.vt-top--end > .vt-icon-btn{display:none}
  .vt-top{gap:0.5rem;padding:0 0.75rem}
  .vt-top--end{gap:0.25rem}
  /* The sidebar is a drawer here, so its width is no longer an edge to share:
     the brand slot gives way down to the logo before a longer account label
     (the Finnish "Kirjaudu sisään") can push the bar past the screen. */
  .vt-top--brand{flex:0 1 calc(var(--vt-side-w) - var(--vt-pad));width:auto;min-width:min-content}
}

@media (max-width:560px){
  .vt-foot--grid{grid-template-columns:repeat(2,1fr);gap:1.375rem}
  .vt-foot--col-brand{grid-column:1/-1}
  /* The column keeps its 16px padding here rather than stepping down to 14.
     The legacy .grid-container, and the margin grid inside it, each bleed out
     by one 16px gutter and rely on that padding to absorb it; at 14 every such
     section ran 2px off the screen and the page panned sideways. */
}

/* --------------------------------------------------------- sample data -- */
/* Loud on purpose. A demo that looks like evidence is the failure this is
   here to prevent, so the banner is the first thing on the page and does not
   scroll away with the content it is describing. */
.vt-demo-banner{
  position:sticky;top:0;z-index:80;
  padding:0.625rem var(--vt-pad);
  background:var(--vt-warn);color:#171025;
  font-size:0.8125rem;line-height:1.4;text-align:center;
}
.vt-demo-banner strong{font-weight:800}

/* ===== _app-legacy.css ===== */
/* ==========================================================================
   Velatonmies — the inherited components, retuned for the app frame
   The toplist, sections and archives keep their markup and their behaviour;
   what changes is density. Inside a sidebar layout a tile that stands 230px
   tall shows two operators per screen, which is the opposite of a toplist.
   ========================================================================== */

/* -------------------------------------------------------------- sections -- */
/* The old layout alternated full-bleed navy and white bands. In one scrolling
   column those read as unrelated pages stacked together, so every section
   becomes a plain block on the canvas and the container stops centring. */
/* `!important` is no longer needed to keep the old per-type bands gone: this
   file loads after the one that set them, so plain specificity wins. Dropping
   it matters because the alternating band in _ui.css paints these same
   elements, and !important here beat it. */
.section{padding:0 0 2.5rem;background:transparent}
.section--bg-dark,.section--bg-panel,.section--bg-alt{background:transparent;color:var(--vt-text)}
/* `.is-flat` painted the plate directly and beats the line above on
   specificity, so it needs saying at the same weight. */
.section--bg-dark.is-flat{background:transparent}
/* The grid puts a negative margin on every `.grid-margin-x` row, which the
   container's own gutter padding is there to cancel. Stripping that padding
   to gain full width left the negative margins hanging, so rows overflowed
   their card by one gutter and the last column was clipped — visible on the
   big win, review and archive heroes. The container keeps its padding and is
   pulled back out by the same amount, so it stays flush with the app's own
   blocks while the invariant holds. */
/* The container has to be two gutters WIDER than its parent, not just shifted
   by one. Foundation's `width:100%` meant the negative left margin moved the
   box 16px left without widening it, so its right edge landed 16px short and
   its own right padding took another 16: every legacy section's content ended
   32px inside the `.vt-sec` sections above and below it. Left edges matched,
   which is why it read as "the cards have different padding on one side". */
.grid-container{
  max-width:none;
  width:calc(100% + var(--gutter) * 2);
  padding-left:var(--gutter);padding-right:var(--gutter);
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
}
.section--flush-bottom{padding-bottom:0}

.section--title{
  font-size:1.3125rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  color:var(--vt-text);margin:0 0 0.375rem;
}
.section--sub,.toplist-section--sub{color:var(--vt-text-dim);font-size:0.8125rem;margin:0}

.toplist-section--head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:0 0 1rem;
}

/* The habitat backdrops were painted for full-bleed navy bands. Inside the
   frame they would tile behind ordinary blocks, so they are switched off
   everywhere except the hero elements that still want art. */
.section--bg-dark::before,.section::before{display:none!important}

/* ------------------------------------------- ink for a band that is gone -- */
/* Removing the navy band above took the plate away but not the ink written
   for it. Roughly forty rules under `.section--bg-dark` still paint white
   text, white-veil surfaces and white hairlines, which in dark mode happen to
   look right and in light mode put white on a near-white canvas: the whole
   "new casinos" block rendered invisible at 1.05:1.

   So the band's descendants are re-grounded on the theme tokens here, after
   every partial that painted them. Nothing is being restyled; each rule is
   the same decision (body ink, quiet ink, a raised surface, a hairline)
   expressed in a token that follows the theme instead of a literal white. */
.section--bg-dark{color:var(--vt-text)}
.section--bg-dark a:not(.button):not(.vt-btn){color:var(--vt-link)}
/* Except where the block paints a plate of its own: that surface is dark in
   both themes, so it keeps the on-plate accent rather than the theme's. */
.section--bg-dark .is-on-dark a:not(.button):not(.vt-btn),
.section--bg-dark .content--calculator a:not(.button):not(.vt-btn){color:var(--vt-on-plate-link)}

.section--bg-dark .seo-section--standfirst,
.section--bg-dark .work-head--meta,
.section--bg-dark .guide-card--excerpt,
.section--bg-dark .dz-explain--head p,
.section--bg-dark .dz-explain--foot,
.section--bg-dark .affiliate-notice,
.hero .affiliate-notice{color:var(--vt-text-dim)}

.section--bg-dark .new-window--meta,
.section--bg-dark .new-window--list time,
.section--bg-dark .dz-explain--meta,
.section--bg-dark .term-links--list em,
.section--bg-dark .compare thead th{color:var(--vt-text-faint)}

.section--bg-dark .new-window--title,
.section--bg-dark .dz-explain--card h3,
.section--bg-dark .dz-explain--prize,
.section--bg-dark .term-links--title,
.section--bg-dark .slot-tile--title a,
.section--bg-dark .compare th,
.section--bg-dark .compare td,
.section--bg-dark .compare--rank{color:var(--vt-text)}

.section--bg-dark .new-window--blurb,
.section--bg-dark .payment-logo--text{color:var(--vt-text-dim)}

.section--bg-dark .dz-explain--prize strong,
.section--bg-dark .guide-card--more{color:var(--vt-link)}

/* Surfaces: a white veil over navy is a raised card; over the canvas it is
   nothing at all. */
.section--bg-dark .new-window,
.section--bg-dark .dz-explain--card,
.section--bg-dark .guide-card,
.section--bg-dark .slot-tile,
.section--bg-dark .compare-wrap,
.section--bg-dark .affiliate-notice,
.hero .affiliate-notice{background:var(--vt-surface);border-color:var(--vt-line)}
.section--bg-dark .guide-card:hover,
.section--bg-dark .compare tbody tr:hover,
.section--bg-dark .term-links--list a:hover{background:var(--vt-hover)}
.section--bg-dark .term-links--list a,
.section--bg-dark .compare thead th,
.section--bg-dark .compare--rank,
.section--bg-dark .payment-logo.is-text,
.section--bg-dark .payment-row--more,
.hero .payment-row--more{background:var(--vt-hover);color:var(--vt-text)}
.section--bg-dark .guide-card,
.section--bg-dark .term-links--list a,
.section--bg-dark .compare th,
.section--bg-dark .compare td,
.section--bg-dark .new-window--list li,
.section--bg-dark .casino-tile--tag,
.hero .casino-tile--tag{border-color:var(--vt-line)}
.section--bg-dark .casino-tile--tag:hover,
.hero .casino-tile--tag:hover{background:var(--vt-hover)}
.section--bg-dark .button.hollow{color:var(--vt-text);border-color:var(--vt-line-strong)}
.section--bg-dark .carousel--bullet{background:var(--vt-line-strong)}

/* The swaying foliage cut-outs were painted to sit inside a full-bleed navy
   band. With the bands gone they float over ordinary blocks — the layer is
   inset past the frame by design, so on a plain surface it overlaps whatever
   is beside it. The hero keeps its artwork through its own background image
   instead. */
.habitat-leaves{display:none!important}

/* ------------------------------------------------------------ buttons ---- */
.button{
  border-radius:62.4375rem;font-weight:700;box-shadow:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.button:hover{box-shadow:none;transform:none}
.button.hollow{
  background:transparent;border:0.0625rem solid var(--vt-line-strong);color:var(--vt-text-dim);
}
.button.hollow:hover{border-color:var(--vt-accent-line);color:var(--vt-text);background:transparent}
.button.secondary{background:var(--vt-raised);color:var(--vt-text);border:0.0625rem solid var(--vt-line)}
.button.secondary:hover{background:var(--vt-hover)}

/* ------------------------------------------------------------- toplist --- */
.toplist-controls{
  display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;
  margin:0 0 0.875rem;padding:0;
}
.toplist-sort{display:flex;gap:0.375rem;flex-wrap:wrap}
.toplist-sort--button{
  height:2rem;padding:0 0.75rem;border:0.0625rem solid transparent;border-radius:62.4375rem;
  background:transparent;color:var(--vt-text-dim);
  font:inherit;font-size:0.78125rem;font-weight:700;cursor:pointer;
}
.toplist-sort--button:hover{background:var(--vt-hover);color:var(--vt-text)}
.toplist-sort--button[aria-pressed="true"]{background:var(--vt-accent);color:var(--vt-accent-ink)}
.toplist-filters{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.toplist-filters--item{
  display:inline-flex;align-items:center;gap:0.4375rem;cursor:pointer;
  font-size:0.78125rem;color:var(--vt-text-dim);
}
.toplist-filters--item:hover{color:var(--vt-text)}
.toplist-filters--box{
  width:1rem;height:1rem;border-radius:0.3125rem;border:0.0625rem solid var(--vt-line-strong);
  display:grid;place-items:center;color:transparent;flex:0 0 auto;
}
.toplist-filters--item input:checked + .toplist-filters--box{
  background:var(--vt-accent);border-color:var(--vt-accent-edge);color:var(--vt-accent-ink);
}

/* The tile: one compact row. Brand panel to a fixed narrow column, the offer
   strip inline with the name, features on a single line. */
:root{--tile-brand-w:9.375rem}

.casino-tile--wrap{margin-bottom:0.625rem}
.casino-tile{
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  border-radius:var(--vt-r-lg);color:var(--vt-text);
  transition:border-color .16s ease,background .16s ease;
}
.casino-tile:hover{border-color:var(--vt-line-strong);background:var(--vt-raised)}
.casino-tile.is-highlighted{outline:0.0625rem solid var(--vt-accent);outline-offset:-0.0625rem}

.casino-tile--brand{position:relative;padding:0}
@media screen and (min-width:1024px){
  .casino-tile--brand{width:var(--tile-brand-w);flex:0 0 var(--tile-brand-w)}
}
.casino-tile--logo{min-height:0;height:100%;padding:1rem 0.875rem}
.casino-tile--logo:hover{transform:none}
.casino-tile--logo img{max-height:2.75rem;width:auto}
.casino-tile--logo-text{font-size:0.9375rem;line-height:1.2}
.casino-tile--badges{top:0.5rem;left:0.5rem;gap:0.25rem}
.casino-tile--badge{padding:0.125rem 0.4375rem;font-size:0.65625rem;border-radius:62.4375rem;line-height:1.5}
.casino-tile--badge span{font-size:0.625rem;padding:0.0625rem 0.25rem}

.casino-tile--offer{
  padding:0.5625rem 1rem;background:transparent;border-bottom:0.0625rem solid var(--vt-line);
  gap:0.25rem 0.625rem;align-items:baseline;
}
.casino-tile--offer-label{font-size:0.65625rem;letter-spacing:.05em;color:var(--vt-text-faint)}
.casino-tile--offer-value{font-size:0.9375rem;font-weight:800;letter-spacing:-.015em}
.casino-tile--offer-sub{font-size:0.78125rem;color:var(--vt-link)}
.casino-tile--rank{
  min-width:1.25rem;height:1.25rem;font-size:0.6875rem;border-radius:62.4375rem;
  background:var(--vt-hover);color:var(--vt-text-dim);
}

.casino-tile--content{padding:0.875rem 1rem!important}
.casino-tile--general{padding-bottom:0.75rem;border-bottom:0.0625rem solid var(--vt-line)}
.casino-tile--name{font-size:1.0625rem;font-weight:800;margin:0 0 0.25rem;letter-spacing:-.015em}
.casino-tile--rating{margin-bottom:0.5rem;gap:0.375rem;font-size:0.78125rem}
.casino-tile--pros{font-size:0.78125rem;color:var(--vt-text-dim)}
.casino-tile--pros li{padding-left:1.25rem;margin-bottom:0.3125rem}
.casino-tile--pros li::before{width:0.875rem;height:0.875rem}
.casino-tile--tags{margin-top:0.5rem;gap:0.3125rem}
.casino-tile--tag{font-size:0.6875rem}
.casino-tile--tag a{color:var(--vt-text-faint)}
.casino-tile--cta{gap:0.375rem}
.casino-tile--cta .button{margin:0}
.casino-tile--review-link{font-size:0.78125rem;color:var(--vt-link)}
.casino-tile--terms{font-size:0.65625rem;color:var(--vt-text-faint);margin-top:0.25rem}
.casino-tile--features{padding-top:0.625rem;font-size:0.75rem;gap:0.625rem 1.125rem}
.casino-tile--feature-label{font-size:0.65625rem;color:var(--vt-text-faint)}
.casino-tile--feature-value{font-size:0.78125rem;font-weight:700;color:var(--vt-text)}
.casino-tile--more{
  border-top:0.0625rem solid var(--vt-line);color:var(--vt-link);
  font-size:0.75rem;font-weight:700;padding:0.5rem;
}

/* ---------------------------------------------------------- long copy ---- */
.content--main,.hub-copy,.review-block--text{color:var(--vt-text-dim)}
.content--main h2,.content--main h3,.hub-copy h2,.hub-copy h3{color:var(--vt-text)}
/* The calculator sits on a fixed dark plate inside the copy, so it keeps the
   on-plate ink the theme does not flip. */
.content--main .content--calculator-title{color:var(--c-on-dark)}
.content--main a,.hub-copy a{color:var(--vt-link)}

.toc,.hub-toc{
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  border-radius:var(--vt-r-lg);padding:0.875rem;
}
.toc--title{font-size:0.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--vt-text-faint)}

/* Cards the archives already use, brought onto the app surface. */
.casino-card,.game-tile,.slot-tile,.guide-card,.bonus-card,.reward-card,.bigwin-card,.author-card,.board-card{
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);
}
.casino-card:hover,.game-tile:hover,.slot-tile:hover,.guide-card:hover,
.bonus-card:hover,.reward-card:hover,.bigwin-card:hover{border-color:var(--vt-line-strong)}

/* Panels, tables and forms */
.panel,.facts-table,.compare-table,.review-summary,.dz-panel{
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);
}
table{color:var(--vt-text-dim)}
th{color:var(--vt-text)}
td,th{border-color:var(--vt-line)!important}

input[type="text"],input[type="email"],input[type="url"],input[type="number"],
input[type="search"],select,textarea{
  background:var(--vt-canvas);border:0.0625rem solid var(--vt-line);color:var(--vt-text);
  border-radius:var(--vt-r-sm);
}
input:focus,select:focus,textarea:focus{border-color:var(--vt-accent-line);outline:none}

/* The hero variants keep their artwork, but on the app canvas they are cards
   rather than full-bleed bands. */
.hero{border-radius:var(--vt-r-xl);overflow:hidden;margin-bottom:1.375rem}

@media (max-width:1024px){
  .casino-tile--brand{width:auto;flex:1 1 auto}
  .casino-tile--logo{min-height:5.5rem}
}

/* ------------------------------------------------- toplist tile density -- */
/* Target: a row a reader can scan four of per screen. The tile's own layout
   is a Foundation grid built for a much taller card, so the overrides below
   pull the three regions — brand, body, features — onto one baseline. */
.casino-tile > .grid-x{align-items:stretch}
.casino-tile--brand{min-height:0}
.casino-tile--logo{padding:0.875rem 0.75rem;min-height:0}
.casino-tile--logo img{max-height:2.375rem;max-width:88%}

.casino-tile--main{justify-content:center}
.casino-tile--content{padding:0.75rem 1rem 0.75rem!important;display:flex;flex-direction:column;gap:0.625rem}
.casino-tile--general{padding-bottom:0;border-bottom:0}
.casino-tile--general > .grid-x{align-items:center;row-gap:0.625rem}

.casino-tile--name{font-size:1rem;margin:0 0 0.1875rem}
.casino-tile--rating{margin-bottom:0.375rem}
.casino-tile--pros{display:flex;flex-wrap:wrap;gap:0.125rem 1rem}
.casino-tile--pros li{margin-bottom:0;font-size:0.75rem;line-height:1.7}
.casino-tile--tags{margin-top:0.375rem}

/* The feature strip: one line of label/value pairs, payments trailing right. */
.casino-tile--features{
  padding-top:0.625rem;margin-top:0;border-top:0.0625rem solid var(--vt-line);
  align-items:center;row-gap:0.5rem;
}
.casino-tile--feature{display:flex;align-items:center;gap:0.5rem;padding-right:1.375rem}
.casino-tile--feature-icon{color:var(--vt-text-faint);display:grid;place-items:center}
.casino-tile--feature-icon svg{width:0.9375rem;height:0.9375rem}
.casino-tile--feature-info{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.casino-tile--feature-info span{font-size:0.65625rem;color:var(--vt-text-faint)}
.casino-tile--feature-info strong{font-size:0.78125rem;font-weight:700;color:var(--vt-text)}

/* A four-jurisdiction licence list is a paragraph inside a row. Clamp it and
   let the review page carry the full list. */
.casino-tile--feature-info strong a{color:var(--vt-text-dim)}
.casino-tile--features .cell.shrink:last-of-type .casino-tile--feature-info strong{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;max-width:34ch;
}

.igp-payments,.payment-row{display:flex;align-items:center;gap:0.3125rem;flex-wrap:wrap;justify-content:flex-end}
.igp-payments img,.payment-row img{height:1.25rem;width:auto;border-radius:0.1875rem}
.igp-payments--more,.payment-row--more{
  font-size:0.6875rem;font-weight:700;color:var(--vt-text-faint);
  padding:0.125rem 0.375rem;border-radius:62.4375rem;background:var(--vt-hover);
}

.casino-tile--cta{display:flex;flex-direction:column;align-items:stretch;min-width:10.75rem}
.casino-tile--cta .button.large{height:2.5rem;padding:0 1.125rem;font-size:0.875rem;display:inline-flex;align-items:center;justify-content:center}

.casino-tile--showmore-toggle{
  width:100%;padding:0.4375rem;border:0;border-top:0.0625rem solid var(--vt-line);
  background:transparent;color:var(--vt-text-faint);
  font:inherit;font-size:0.71875rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:0.3125rem;
}
.casino-tile--showmore-toggle:hover{color:var(--vt-link)}
.casino-tile--param{display:flex;justify-content:space-between;gap:0.625rem;padding:0.25rem 0;border-bottom:0.0625rem solid var(--vt-line)}

/* "Show N more casinos" under the list */
.toplist--more{margin-top:0.875rem;text-align:center}
.toplist--more .button{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);color:var(--vt-text)}
.toplist--more .button:hover{background:var(--vt-hover);border-color:var(--vt-line-strong)}

@media screen and (min-width:1024px){
  :root{--tile-brand-w:8.75rem}
  .casino-tile--content{padding:0.75rem 1rem!important}
}

/* The two things that were making the row tall: a call-to-action column that
   stacked button, link and small print at full size, and a payment strip that
   wrapped to a second line. Both are now single-line. */
.casino-tile--general > .grid-x > .cell.large-auto{min-width:0}
.casino-tile--cta{min-width:9.875rem;gap:0.1875rem;justify-content:center}
.casino-tile--cta .button.large{height:2.25rem;font-size:0.84375rem;margin:0}
.casino-tile--review-link{font-size:0.75rem;line-height:1.4;text-align:center}
.casino-tile--terms{
  font-size:0.625rem;line-height:1.35;margin-top:0.125rem;text-align:center;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.casino-tile--pros li{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

.casino-tile--features{padding-top:0.5625rem;flex-wrap:nowrap;overflow:hidden}
.casino-tile--features > .cell.shrink{flex:0 0 auto}
.casino-tile--features > .cell.auto{min-width:0;overflow:hidden}
.igp-payments,.payment-row{flex-wrap:nowrap;overflow:hidden}
.casino-tile--feature{padding-right:1.125rem}

.casino-tile--showmore-toggle{padding:0.3125rem}

/* Below the large breakpoint the row becomes a stack, so the payment strip
   is dropped rather than squeezed. */
@media screen and (max-width:1240px){
  .casino-tile--features > .cell.auto{display:none}
}

/* Final pass on row height. Three pros is a paragraph inside a comparison
   row — two is the reason to click through, and the third is on the review. */
.casino-tile--pros li:nth-child(n+3){display:none}
.casino-tile--pros li{line-height:1.55;margin-bottom:0.1875rem}
.casino-tile--offer{padding:0.4375rem 1rem}
.casino-tile--offer-value{font-size:0.90625rem}
.casino-tile--features{padding-top:0.5rem}
.casino-tile--feature-info{line-height:1.25}
.casino-tile--content{gap:0.5rem}
.casino-tile--tags{margin-top:0.3125rem}
.casino-tile--rating{margin-bottom:0.3125rem}

/* The brand column is a flat colour field the height of the row. Give it a
   little depth so it reads as a panel rather than dead space. */
.casino-tile--brand{
  background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.14),transparent 60%);
  background-blend-mode:overlay;
}

/* ------------------------------------------------------- review header -- */
.review-hero{padding:0 0 1.625rem}
.review-hero h1{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:800;letter-spacing:-.025em;margin:0 0 0.375rem}
.review-hero--score{font-size:1.625rem;font-weight:800;letter-spacing:-.02em;color:var(--vt-text)}
.review-hero--score strong{color:var(--vt-on-plate-link)}

/* The fact strip was a fixed grid, which turned a four-jurisdiction licence
   list into a tall narrow column beside three near-empty boxes. */
.review-hero--facts{
  display:grid!important;gap:0.5rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));
  align-items:stretch;
}
.review-hero--fact{
  display:flex;flex-direction:column;gap:0.1875rem;
  padding:0.625rem 0.75rem;background:var(--vt-surface);
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);
}
.review-hero--fact span{font-size:0.65625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--vt-text-faint)}
.review-hero--fact strong{font-size:0.84375rem;font-weight:700;color:var(--vt-text);line-height:1.35}
.review-hero--fact strong a{color:var(--vt-text-dim)}
.review-hero--fact:has(strong a){grid-column:span 2}

.review-hero--action{gap:0.625rem}
.review-hero--action .review-hero--logo{
  min-height:6rem;border-radius:var(--vt-r-lg);
}
.review-hero--action .button.large{height:2.75rem}

.review-block{margin-bottom:2rem}
.review-block h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:0 0 0.75rem;color:var(--vt-text)}
.proscons{
  display:grid;gap:0.75rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:0 0 1.5rem;
}
.proscons--col{
  padding:0.875rem 1rem;background:var(--vt-surface);
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);
}
.proscons--col h3{font-size:0.8125rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin:0 0 0.625rem}
.proscons--pros h3{color:var(--vt-live-ink)}
.proscons--cons h3{color:var(--vt-danger-ink)}
.proscons--col ul{margin:0;padding:0;list-style:none;font-size:0.8125rem;color:var(--vt-text-dim)}
.proscons--col li{padding:0.25rem 0 0.25rem 1.25rem;position:relative;line-height:1.5}

/* ------------------------------------------------------- reading measure -- */
/* SEO sections, hub copy and page text run the width of their content column,
   like the reviews: a paragraph cap left most of a wide column empty beside a
   narrow block of text. Standfirsts below keep a measure; they are display
   copy. */

/* Standfirsts and section intros are display copy, so they run shorter. */
.section--sub,.vt-sec--sub,.toplist-section--sub,.hero--intro,.hero p{max-width:70ch}

/* Wide displays: the toplist row has room for a fourth fact and the archive
   grids gain a column on their own, so nothing needs a special case beyond
   stopping the tile stretching its brand panel out of proportion. */
@media screen and (min-width:1700px){
  :root{--tile-brand-w:10.625rem}
}

/* ============================================================== the heroes */
/* Twenty-two page types render `.hero` with their own modifier, and each one
   used to set its own padding — so an archive header, a review header and a
   member profile header agreed on nothing but the class name. They are one
   card now: same plate, same padding, same corner, same ink, same height
   floor, whatever artwork sits behind them. */
.hero,
.review-hero{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  min-height:var(--hero-min,13.75rem);
  padding:1.75rem;margin:0 0 1.375rem;
  border-radius:var(--vt-r-xl);overflow:hidden;
  background:var(--vt-plate);color:var(--vt-on-plate);
}
@media screen and (min-width:640px){ .hero,.review-hero{--hero-min:15.625rem} }
@media screen and (min-width:1024px){ .hero,.review-hero{--hero-min:18.125rem} }
@media screen and (min-width:1400px){ .hero,.review-hero{--hero-min:19.375rem} }

.hero h1,.review-hero h1{
  margin:0 0 0.625rem;color:var(--vt-on-plate);
  font-size:clamp(1.5rem,2.8vw,2.125rem);font-weight:800;letter-spacing:-.025em;line-height:1.14;
}
.hero--intro,.hero p,.review-hero > .grid-container > p{
  color:var(--vt-on-plate-dim);font-size:0.9375rem;line-height:1.6;max-width:64ch;margin:0;
}
@media screen and (min-width:1024px){ .hero--intro{font-size:0.96875rem;max-width:62ch} }
.hero a:not(.button):not(.vt-btn),
.review-hero a:not(.button):not(.vt-btn){color:var(--vt-on-plate-link)}
.hero--last-updated,.hero--updated,.hero--term-count{
  color:rgba(255,255,255,.6);font-size:0.78125rem;margin-bottom:0.625rem;
}

/* Breadcrumbs sit on the plate, so they cannot use page ink either. */
.hero .breadcrumbs,.review-hero .breadcrumbs,.vt-hero .breadcrumbs{
  margin-bottom:0.75rem;font-size:0.78125rem;color:rgba(255,255,255,.55);
}
.hero .breadcrumbs a,.review-hero .breadcrumbs a,.vt-hero .breadcrumbs a{color:rgba(255,255,255,.8)}
.hero .breadcrumbs a:hover,.review-hero .breadcrumbs a:hover,.vt-hero .breadcrumbs a:hover{color:#fff}

/* The scrim. Every hero photograph is composed with the subject on the right
   and the left third left calm, so the scrim is weighted the same way: heavy
   where the headline lands, lighter where the picture is worth seeing. It
   never clears entirely, because a template is free to put text anywhere and
   white ink over a lit sky is not a risk worth taking. Neutral, not violet:
   this sits over artwork in both themes. */
.hero::after,.review-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(var(--vt-scrim),.86) 0%,
      rgba(var(--vt-scrim),.84) 40%,
      rgba(var(--vt-scrim),.76) 75%,
      rgba(var(--vt-scrim),.58) 100%),
    linear-gradient(0deg,rgba(var(--vt-scrim),.42) 0%,rgba(var(--vt-scrim),0) 55%);
}
/* How far the scrim can open on the right is decided by how far the copy
   actually runs, and that is a function of width, not taste: measured across
   the archives, the text reaches 95% of a 362px card, 75% of an 848px one and
   60% of an 1168px one. So the ramp has three tiers, each opened as far as it
   goes while the dimmest ink on the plate still clears 5:1 against the worst
   pixel of all fourteen photographs. Wide screens get most of the picture
   back; a phone keeps its cover, because there the text is over all of it. */
@media screen and (min-width:901px){
  .hero::after,.review-hero::after{
    background:
      linear-gradient(90deg,
        rgba(var(--vt-scrim),.94) 0%,
        rgba(var(--vt-scrim),.91) 45%,
        rgba(var(--vt-scrim),.80) 72%,
        rgba(var(--vt-scrim),.28) 100%),
      linear-gradient(0deg,rgba(var(--vt-scrim),.5) 0%,rgba(var(--vt-scrim),0) 55%);
  }
}
@media screen and (min-width:1280px){
  .hero::after,.review-hero::after{
    background:
      linear-gradient(90deg,
        rgba(var(--vt-scrim),.94) 0%,
        rgba(var(--vt-scrim),.91) 40%,
        rgba(var(--vt-scrim),.78) 58%,
        rgba(var(--vt-scrim),.28) 80%,
        rgba(var(--vt-scrim),.10) 100%),
      linear-gradient(0deg,rgba(var(--vt-scrim),.5) 0%,rgba(var(--vt-scrim),0) 55%);
  }
}

/* The habitat plate paints into ::before; keep it under everything. */
.hero::before{z-index:-2}

/* Panels that sit inside a hero are on the plate, not on the page. */
.hero--featured,.review-hero--action .review-hero--logo{
  background:rgba(255,255,255,.06);border:0.0625rem solid rgba(255,255,255,.12);
  border-radius:var(--vt-r-lg);
}
.review-hero--fact{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);
}
.review-hero--fact span{color:rgba(255,255,255,.6)}
.review-hero--fact strong{color:#fff}
.review-hero--fact strong a{color:rgba(255,255,255,.85)}
.review-hero--score{color:#fff}
.review-hero--score strong{color:var(--vt-on-plate-link)}

/* Toplist controls live under the hero on the page, not inside it. */
.hero .toplist-sort--button{color:rgba(255,255,255,.72)}
.hero .toplist-sort--button[aria-pressed="true"]{background:var(--vt-accent);color:var(--vt-accent-ink)}

@media screen and (max-width:640px){
  .hero,.review-hero{padding:1.25rem;--hero-min:11.25rem}
  .hero h1,.review-hero h1{font-size:1.4375rem}
}

/* ------------------------------------------------- toplist tile, revised -- */
/* Two things the offer rows were getting wrong: the review link was a text
   link beside a solid button, which read as an afterthought rather than the
   second choice it is; and the brand colour was floating a small plate inside
   an empty column. The colour now fills the left side of the row edge to edge,
   square against the row's own height, with the logo centred in it. */
.casino-tile--brand{
  position:relative;
  display:grid;place-items:center;padding:1.25rem;
  /* The operator's colour, flat. The sheen and the diagonal sweep that used
     to sit on top were making a solid panel look considered; the colour is
     the identity and it does not need help. */
  background:color-mix(in srgb,var(--tint,#3a2b52) 88%,#000 12%);
  border-radius:var(--vt-r-lg) 0 0 var(--vt-r-lg);
  align-self:stretch;
}
@media screen and (min-width:1024px){
  /* Square against a typical row: the column is as wide as the row is tall. */
  .casino-tile--brand{width:11.5rem;flex:0 0 11.5rem}
}

.casino-tile--logo{
  width:100%;height:100%;min-height:0;padding:0;
  display:grid;place-items:center;background:none;border:0;border-radius:0;
  transition:transform .16s var(--ease,ease);
}
.casino-tile:hover .casino-tile--logo{transform:scale(1.03)}
.casino-tile--logo img{max-width:82%;max-height:4.875rem;width:auto;height:auto;object-fit:contain}
.casino-tile--logo-text{font-size:0.9375rem;line-height:1.25;text-align:center;color:#fff}

/* Badges float over the panel again, so they cost the logo no room. */
.casino-tile--badges{
  position:absolute;top:0.625rem;left:0.625rem;right:0.625rem;z-index:2;
  display:flex;flex-direction:row;flex-wrap:wrap;gap:0.25rem;
}

/* The call to action: two buttons of equal width, primary above secondary. */
.casino-tile--cta{
  display:flex;flex-direction:column;align-items:stretch;gap:0.5rem;
  min-width:11.875rem;justify-content:center;
}
.casino-tile--cta .button.large{width:100%;height:2.625rem;margin:0;font-size:0.875rem}
.casino-tile--review-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:2.25rem;padding:0 0.875rem;margin:0;
  border:0.0625rem solid var(--vt-line-strong);border-radius:62.4375rem;
  background:transparent;color:var(--vt-text-dim);
  font-size:0.8125rem;font-weight:700;text-decoration:none;
  transition:border-color .14s ease,color .14s ease,background .14s ease;
}
.casino-tile--review-link:hover{
  border-color:var(--vt-accent-line);color:var(--vt-text);
  background:var(--vt-accent-wash);text-decoration:none;
}
.casino-tile--terms{margin:0.125rem 0 0;text-align:center}

/* The sort row: `_hero-front.css` scopes its own colours under
   `.toplist-section`, which outranks an unscoped rule — so the active pill
   was painting brand-on-brand and the label vanished. */
.toplist-section .toplist-sort--button{color:var(--vt-text-dim)}
.toplist-section .toplist-sort--button:hover{color:var(--vt-text)}
.toplist-section .toplist-sort--button[aria-pressed="true"],
.toplist-sort--button[aria-pressed="true"]{
  background:var(--vt-accent);color:var(--vt-accent-ink);font-weight:700;
}
.toplist-sort--button::after,
.toplist-section .toplist-sort--button::after{display:none}

@media screen and (max-width:1023px){
  .casino-tile--brand{
    width:auto;flex:1 1 auto;padding:1.375rem;
    border-radius:var(--vt-r-lg) var(--vt-r-lg) 0 0;
  }
  .casino-tile--logo img{max-height:3.5rem}
  .casino-tile--cta{min-width:0}
}

/* A media well is a place for a picture, not a dark plate. Using the brand
   plate there put three heavy black rectangles on a light page wherever a
   guide had no artwork yet. This tints from the page instead, so it recedes
   in both themes and any image still covers it completely. */
.guide-card--media,.dz-win-card--media,.dz-win-hero--media,
.post-card--media,.work-card--media,.reward-card--media,
.slot-tile--media,.game-tile--media{
  background:color-mix(in srgb,var(--vt-text) 7%,var(--vt-surface));
}

/* ===== _app-cards.css ===== */
/* ==========================================================================
   Velatonmies — sections, rails and cards
   ========================================================================== */

/* -------------------------------------------------------------- sections -- */
.vt-sec{margin:0 0 2.5rem}
.vt-sec--head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin:0 0 1rem;
}
.vt-sec--headings{min-width:0}
.vt-sec--eyebrow{
  margin:0 0 0.25rem;font-size:0.71875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vt-link);
}
.vt-sec--title{
  margin:0;font-size:1.3125rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.2;color:var(--vt-text);
}
.vt-sec--sub{margin:0.3125rem 0 0;font-size:0.8125rem;color:var(--vt-text-dim);line-height:1.5}
.vt-sec--link{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:0.25rem;
  font-size:0.8125rem;font-weight:700;color:var(--vt-link);text-decoration:none;
  padding:0.375rem 0.125rem;
}
.vt-sec--link:hover{color:var(--vt-link)}
.vt-sec--link svg{transition:transform .16s ease}
.vt-sec--link:hover svg{transform:translateX(0.125rem)}

/* ------------------------------------------------------------------ rail -- */
/* A real overflow scroller with snap points, not a JS carousel: it keeps the
   native flick on a trackpad and the full list reachable by keyboard. */
.vt-rail{
  display:grid;grid-auto-flow:column;gap:0.875rem;
  grid-auto-columns:minmax(var(--card-w,232px),1fr);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:0;
  padding-bottom:0.5rem;margin-bottom:-0.5rem;
  scrollbar-width:thin;scrollbar-color:var(--vt-line-strong) transparent;
}
.vt-rail>*{scroll-snap-align:start}
.vt-rail::-webkit-scrollbar{height:0.5rem}
.vt-rail::-webkit-scrollbar-thumb{background:var(--vt-line-strong);border-radius:6.1875rem}
.vt-rail::-webkit-scrollbar-track{background:transparent}

.vt-grid{display:grid;gap:0.875rem;grid-template-columns:repeat(auto-fill,minmax(var(--card-w,232px),1fr))}
.vt-grid--wide{--card-w:300px}

/* ------------------------------------------------------------------ card -- */
.vt-card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  border-radius:var(--vt-r-lg);overflow:hidden;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.vt-card:hover{border-color:var(--vt-line-strong);background:var(--vt-raised)}
.vt-card--body{display:flex;flex-direction:column;gap:0.5rem;padding:0.8125rem 0.875rem 0.875rem;flex:1 1 auto}
.vt-card--title{margin:0;font-size:0.96875rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.vt-card--title-sm{font-size:0.875rem;font-weight:700}
.vt-card--title a{color:var(--vt-text);text-decoration:none}
.vt-card--title a:hover{color:var(--vt-link)}
.vt-card--meta{
  display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap;margin:0;
  font-size:0.78125rem;color:var(--vt-text-faint);
}
.vt-card--meta a{color:var(--vt-text-dim);text-decoration:none}
.vt-card--meta a:hover{color:var(--vt-link)}
.vt-card--sep{opacity:.5}
.vt-card--excerpt{margin:0;font-size:0.8125rem;line-height:1.55;color:var(--vt-text-dim)}
.vt-card--foot{display:flex;align-items:center;gap:0.5rem;margin-top:auto;padding-top:0.25rem}
.vt-card--terms{margin:0;font-size:0.6875rem;line-height:1.45;color:var(--vt-text-faint)}

/* Media surfaces */
.vt-card--media{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--vt-raised);
}
.vt-card--media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease,ease)}
.vt-card:hover .vt-card--media img{transform:scale(1.04)}

.vt-kicker{
  position:absolute;left:0.625rem;top:0.625rem;z-index:2;
  padding:0.25rem 0.5625rem;border-radius:62.4375rem;
  background:rgba(var(--vt-scrim),.86);
  color:#fff;font-size:0.6875rem;font-weight:700;letter-spacing:.01em;
}

/* ---------------------------------------------------------- casino card -- */
.vt-card--casino{--card-w:300px}
.vt-card--brand{
  position:relative;display:grid;place-items:center;
  aspect-ratio:16/7;padding:1.125rem 1.25rem;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
    color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
}
.vt-card--brand img{max-width:76%;max-height:4rem;width:auto;height:auto;object-fit:contain}
.vt-card--wordmark{color:#fff;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;text-align:center}
.vt-card--rank{
  position:absolute;left:0.625rem;top:0.625rem;
  padding:0.1875rem 0.5rem;border-radius:62.4375rem;background:rgba(var(--vt-scrim),.72);
  color:#fff;font-size:0.6875rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.vt-card--top{display:flex;align-items:center;justify-content:space-between;gap:0.625rem}
.vt-card--offer{margin:0;display:flex;flex-direction:column;gap:0.125rem}
.vt-card--offer-value{font-size:1rem;font-weight:800;letter-spacing:-.015em;color:var(--vt-text)}
.vt-card--offer-sub{font-size:0.78125rem;color:var(--vt-link);font-weight:600}

.vt-score{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:0.25rem;
  padding:0.1875rem 0.5rem;border-radius:62.4375rem;background:var(--vt-hover);
  color:var(--vt-warn-ink);font-size:0.78125rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.vt-score svg{fill:currentColor}

.vt-facts{margin:0.125rem 0 0;display:flex;flex-direction:column;gap:0}
.vt-facts--row{
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  padding:0.375rem 0;border-top:0.0625rem solid var(--vt-line);
}
.vt-facts--row:first-child{border-top:0}
.vt-facts dt{font-size:0.75rem;color:var(--vt-text-faint)}
.vt-facts dd{margin:0;font-size:0.78125rem;font-weight:700;color:var(--vt-text);font-variant-numeric:tabular-nums;text-align:right}

/* ------------------------------------------------------------ game card -- */
.vt-card--game{--card-w:172px;border:0;background:transparent}
.vt-card--game:hover{background:transparent}
.vt-card--game .vt-card--body{padding:0.625rem 0.125rem 0;gap:0.1875rem}
.vt-poster{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--vt-r-lg);background:var(--vt-raised);
  border:0.0625rem solid var(--vt-line);
}
.vt-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease,ease)}
.vt-card--game:hover .vt-poster img{transform:scale(1.05)}
.vt-card--game:hover .vt-poster{border-color:var(--vt-accent-line)}
.vt-poster--fallback{
  display:flex;flex-direction:column;justify-content:flex-end;gap:0.25rem;
  width:100%;height:100%;padding:0.875rem;text-align:left;
  background:
    radial-gradient(120% 80% at 80% 0%,hsl(var(--hue,280) 62% 42%) 0%,transparent 62%),
    linear-gradient(155deg,hsl(var(--hue,280) 48% 26%),hsl(calc(var(--hue,280) + 34) 52% 13%));
}
.vt-poster--fallback::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 0.0625rem,transparent 0.0625rem 0.5625rem);
  mix-blend-mode:overlay;
}
.vt-poster--fallback-name{
  position:relative;font-size:0.9375rem;font-weight:800;line-height:1.18;
  letter-spacing:-.015em;color:#fff;text-wrap:balance;
}
.vt-poster--fallback-studio{
  position:relative;font-size:0.65625rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.vt-poster--stat{
  position:absolute;right:0.5rem;top:0.5rem;display:flex;flex-direction:column;align-items:center;
  padding:0.3125rem 0.5rem;border-radius:var(--vt-r-sm);
  background:rgba(var(--vt-scrim),.86);
  color:#fff;font-size:0.75rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;
}
.vt-poster--stat small{font-size:0.5625rem;font-weight:700;opacity:.72;letter-spacing:.04em}
.vt-poster--play{
  position:absolute;inset:0;margin:auto;width:2.75rem;height:2.75rem;
  display:grid;place-items:center;border-radius:62.4375rem;
  background:var(--vt-accent);color:var(--vt-accent-ink);
  opacity:0;transform:scale(.8);transition:opacity .18s ease,transform .18s ease;
}
.vt-card--game:hover .vt-poster--play{opacity:1;transform:none}

/* ------------------------------------------------------------- win card -- */
.vt-card--win{--card-w:280px}
.vt-mult{
  position:absolute;right:0.625rem;bottom:0.625rem;z-index:2;
  padding:0.3125rem 0.625rem;border-radius:62.4375rem;
  background:var(--vt-accent);color:var(--vt-accent-ink);
  font-size:0.875rem;font-weight:800;font-variant-numeric:tabular-nums;
  /* The glow was left over from a magenta accent two palettes ago. */
  box-shadow:0 0.25rem 0.875rem -0.25rem rgba(248,150,26,.55);
}
.vt-win--figures{
  display:flex;align-items:baseline;gap:0.5rem;margin:0;
  font-size:0.8125rem;font-variant-numeric:tabular-nums;
}
.vt-win--stake{color:var(--vt-text-faint)}
.vt-win--payout{color:var(--vt-live-ink);font-size:0.9375rem;font-weight:800}

.vt-card--win.is-compact{flex-direction:row;--card-w:auto}
.vt-card--win.is-compact .vt-card--media{flex:0 0 7.25rem;aspect-ratio:4/3}
.vt-card--win.is-compact .vt-mult{right:0.375rem;bottom:0.375rem;font-size:0.75rem;padding:0.1875rem 0.4375rem}
.vt-card--win.is-compact .vt-card--body{padding:0.625rem 0.75rem}

/* ------------------------------------------------------------ post card -- */
.vt-card--post{--card-w:300px}
.vt-card--post.is-wide{--card-w:auto}
.vt-card--post.is-wide .vt-card--media{aspect-ratio:16/8}

/* ----------------------------------------------------------- bonus card -- */
.vt-card--bonus{--card-w:260px}
.vt-card--strip{
  position:relative;display:grid;place-items:center;height:4.75rem;padding:0.875rem;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 85%,#fff 15%),
    color-mix(in srgb,var(--tint,#3a2b52) 70%,#000 30%));
}
.vt-card--strip img{max-height:2.25rem;max-width:70%;width:auto;object-fit:contain}
.vt-code{
  display:inline-flex;align-items:stretch;border:0.0625rem dashed var(--vt-line-strong);
  border-radius:var(--vt-r-sm);background:transparent;padding:0;cursor:pointer;
  font:inherit;overflow:hidden;
}
.vt-code--value{padding:0.375rem 0.625rem;font-size:0.78125rem;font-weight:800;letter-spacing:.06em;color:var(--vt-text)}
.vt-code--action{
  padding:0.375rem 0.625rem;background:var(--vt-hover);color:var(--vt-link);
  font-size:0.71875rem;font-weight:700;display:grid;place-items:center;
}
.vt-code:hover .vt-code--action{background:var(--vt-accent);color:var(--vt-accent-ink)}

/* ----------------------------------------------------------------- tags -- */
.vt-tags{display:flex;flex-wrap:wrap;gap:0.3125rem}
.vt-tag{
  padding:0.1875rem 0.5rem;border-radius:62.4375rem;font-size:0.6875rem;font-weight:700;
  background:var(--vt-hover);color:var(--vt-text-dim);
}
.vt-tag--new{background:rgba(43,212,107,.14);color:var(--vt-live-ink)}
.vt-tag--fast{background:var(--vt-accent);color:var(--vt-accent-ink)}
.vt-tag--excl{background:rgba(240,180,41,.14);color:var(--vt-warn-ink)}

/* -------------------------------------------------------------- buttons -- */
.vt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.4375rem;
  height:2.375rem;padding:0 1rem;border:0.0625rem solid transparent;border-radius:62.4375rem;
  font:inherit;font-size:0.84375rem;font-weight:700;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.vt-btn--sm{height:2rem;padding:0 0.8125rem;font-size:0.78125rem}
.vt-btn--lg{height:2.75rem;padding:0 1.375rem;font-size:0.9375rem}
/* Only the card footer wants the primary button to share the row; anywhere
   else `flex:1 1 auto` makes it swell to whatever box it lands in. */
.vt-btn--primary{background:var(--vt-accent);color:var(--vt-accent-ink)}
.vt-card--foot > .vt-btn--primary{flex:1 1 auto}
.vt-btn--primary:hover{background:var(--vt-accent-lo)}
.vt-btn--ghost{background:transparent;border-color:var(--vt-line-strong);color:var(--vt-text-dim)}
.vt-btn--ghost:hover{border-color:var(--vt-accent-line);color:var(--vt-text)}

/* ------------------------------------------------------------ chips row -- */
.vt-chips{
  display:flex;gap:0.5rem;overflow-x:auto;overscroll-behavior-x:contain;
  padding:0.125rem 0 0.625rem;margin:0 0 1.375rem;scrollbar-width:none;
}
.vt-chips::-webkit-scrollbar{display:none}
.vt-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:0.375rem;
  height:2.125rem;padding:0 0.875rem;border-radius:62.4375rem;
  border:0.0625rem solid var(--vt-line);background:var(--vt-surface);
  color:var(--vt-text-dim);font-size:0.8125rem;font-weight:700;text-decoration:none;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.vt-chip:hover{background:var(--vt-hover);color:var(--vt-text);border-color:var(--vt-line-strong)}
.vt-chip.is-active{background:var(--vt-accent);border-color:var(--vt-accent);color:var(--vt-accent-ink)}
.vt-chip--count{font-size:0.6875rem;font-weight:700;opacity:.65;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ hero -- */
.vt-hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:21.25rem;margin:0 0 1.375rem;padding:1.75rem;
  border-radius:var(--vt-r-xl);overflow:hidden;
  background:var(--vt-raised);isolation:isolate;
}
.vt-hero--bg{position:absolute;inset:0;z-index:-2}
.vt-hero--bg img{width:100%;height:100%;object-fit:cover;display:block}
/* One backdrop per slide, stacked and cross-faded with its own tint. The
   picture is anchored right at every size, since the copy starts on the left. */
.vt-hero--bg-frame{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease,ease)}
.vt-hero--bg-frame.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){ .vt-hero--bg-frame{transition:none} }
.vt-hero--bg-img{position:absolute;inset:0;object-position:100% 50%}
/* A slow drift on the backdrop that is showing, so the pick reads as a scene
   rather than a still. Each frame moves its own way (in, out, in and up)
   around the part of the picture the tint leaves open, never far enough to
   pull an edge into the card. The drift outlasts the slide, so it is still
   moving when the next one fades in, and the outgoing frame keeps it through
   its fade (is-leaving) instead of snapping back in full view. */
.vt-hero--bg-img{
  --hero-drift-from:scale(1.01);--hero-drift-to:scale(1.07) translate3d(-1.2%,-.6%,0);
  transform-origin:72% 45%;
}
.vt-hero--bg-frame:nth-child(3n+2) .vt-hero--bg-img{
  --hero-drift-from:scale(1.07) translate3d(-1%,0,0);--hero-drift-to:scale(1.01);
  transform-origin:64% 55%;
}
.vt-hero--bg-frame:nth-child(3n) .vt-hero--bg-img{
  --hero-drift-to:scale(1.06) translate3d(.8%,-.8%,0);
  transform-origin:80% 60%;
}
.vt-hero--bg-frame.is-active .vt-hero--bg-img,
.vt-hero--bg-frame.is-leaving .vt-hero--bg-img{
  animation:vt-hero-drift calc(var(--hero-interval,6500ms) * 1.6) cubic-bezier(.25,.25,.45,1) both;
}
@keyframes vt-hero-drift{from{transform:var(--hero-drift-from)}to{transform:var(--hero-drift-to)}}
@media (prefers-reduced-motion:reduce){
  .vt-hero--bg-frame.is-active .vt-hero--bg-img,
  .vt-hero--bg-frame.is-leaving .vt-hero--bg-img{animation:none}
}
/* The tint is solved per picture on the server (vt_hero_art_tint): the
   lightest left-to-right gradient that keeps the dimmest copy at 4.6:1 in
   each layout. The fallbacks are for a picture the server could not read. */
.vt-hero--bg-frame::after{
  content:"";position:absolute;inset:0;
  background:var(--vt-tint-m,linear-gradient(90deg,rgba(var(--vt-scrim),calc(.9 * var(--scrim-boost))) 0%,rgba(var(--vt-scrim),calc(.8 * var(--scrim-boost))) 100%));
}
@media (min-width:641px){
  .vt-hero--bg-frame::after{background:var(--vt-tint-t,linear-gradient(90deg,rgba(var(--vt-scrim),calc(.9 * var(--scrim-boost))) 0%,rgba(var(--vt-scrim),calc(.8 * var(--scrim-boost))) 100%))}
}
@media (min-width:1081px){
  .vt-hero--bg-frame::after{background:var(--vt-tint-d,linear-gradient(90deg,rgba(var(--vt-scrim),calc(.9 * var(--scrim-boost))) 0%,rgba(var(--vt-scrim),calc(.86 * var(--scrim-boost))) 62%,rgba(var(--vt-scrim),calc(.08 * var(--scrim-boost))) 68%))}
}
.vt-hero--inner{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.75rem;width:100%;flex-wrap:wrap;
}
.vt-hero--copy{flex:1 1 21.25rem;min-width:0;max-width:38.75rem}
.vt-hero--title{
  margin:0 0 0.625rem;font-size:clamp(1.625rem,3.2vw,2.375rem);font-weight:800;
  letter-spacing:-.028em;line-height:1.12;color:#fff;
}
.vt-hero--lede{margin:0 0 1.125rem;font-size:0.9375rem;line-height:1.55;color:rgba(255,255,255,.78);max-width:52ch}
/* The logo leads the slide at its own height, so the stage centres the whole
   block, logo to small print. The link is sized and crops its image (--w, --h,
   --iw, --x, --y from vt_logo_css()); --k scales it for phones. */
.vt-hero--brand{display:flex;align-items:center;margin:0 0 1.125rem}
.vt-hero--logo{
  --k:1;position:relative;display:block;flex:0 0 auto;overflow:hidden;line-height:0;border-radius:0.25rem;
  width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));
}
.vt-hero--logo img{
  position:absolute;left:calc(var(--x) * var(--k) * -1);top:calc(var(--y) * var(--k) * -1);
  width:calc(var(--iw) * var(--k));max-width:none;height:auto;
}
/* A logo whose size could not be read is shown as it comes, only capped. */
.vt-hero--logo:not([style]){width:auto;height:auto;overflow:visible}
.vt-hero--logo:not([style]) img{position:static;width:auto;max-width:14.375rem;max-height:4.5rem}
.vt-hero--logo.is-text{line-height:1.1;font-size:1.625rem;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none;overflow:visible}
.vt-hero--logo:focus-visible{outline:0.125rem solid var(--vt-accent);outline-offset:0.25rem}
/* On a phone the logo gets a row of one height and a ceiling to match (--kp
   from vt_logo_css), so a tall mark cannot make its slide taller than the
   others. */
@media (max-width:640px){
  .vt-hero--brand{justify-content:center;height:3.5rem;margin-bottom:0.875rem}
  .vt-hero--logo{--k:var(--kp,.8)}
  .vt-hero--logo:not([style]) img{max-height:3.5rem}
}
.vt-hero--actions{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap}
.vt-hero--actions .vt-btn--primary{flex:0 0 auto}
/* A transparent outline button over artwork is unreadable wherever the art
   is bright, so the ghost variant carries its own scrim inside the hero. */
.vt-hero--actions .vt-btn--ghost,
.vt-feature .vt-btn--ghost{
  background:rgba(var(--vt-scrim),.74);
  border-color:rgba(255,255,255,.42);color:#fff;
}
.vt-hero--actions .vt-btn--ghost:hover,
.vt-feature .vt-btn--ghost:hover{background:rgba(var(--vt-scrim),.8);border-color:rgba(255,255,255,.6)}
.vt-hero--terms{margin:0.75rem 0 0;font-size:0.71875rem;color:rgba(255,255,255,.72)}

/* ------------------------------------------------------ feature + split -- */
/* The big win wall's front-page shape: the week's largest win as a plate with
   its own artwork on the left, the rest as a compact list beside it. These
   rules were lost when the hero's pick strip was rewritten into the category
   rail, which left the section rendering as a raw image over unstyled text. */
.vt-split{
  display:grid;gap:var(--vt-s-5);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:stretch;
}
.vt-split--side{display:flex;flex-direction:column;gap:var(--vt-s-3);min-width:0}

.vt-feature{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:20rem;padding:var(--vt-s-6);
  border-radius:var(--vt-r-md);overflow:hidden;isolation:isolate;
  /* Fixed plate, not a theme surface: white ink sits on it in both themes. */
  background:var(--vt-plate);color:var(--vt-on-plate);
}
.vt-feature--bg{position:absolute;inset:0;z-index:-2}
.vt-feature--bg img{width:100%;height:100%;object-fit:cover;display:block}
.vt-feature--tint{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(var(--vt-scrim),.94) 0%,rgba(var(--vt-scrim),.62) 52%,rgba(var(--vt-scrim),.34) 100%);
}
.vt-feature--title{margin:0 0 var(--vt-s-1);font-size:1.375rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.vt-feature--title a{color:var(--vt-on-plate);text-decoration:none}
.vt-feature--title a:hover{color:var(--vt-on-plate-link)}
.vt-feature--meta{margin:0 0 var(--vt-s-4);font-size:0.8125rem;color:var(--vt-on-plate-dim)}
.vt-feature--meta a{color:var(--vt-on-plate-dim)}
.vt-feature--meta a:hover{color:var(--vt-on-plate)}

/* Three figures side by side, because the amount is the story and the stake
   is what makes it one. */
.vt-stats{display:flex;flex-wrap:wrap;gap:var(--vt-s-6);margin:0 0 var(--vt-s-5)}
.vt-stats--item{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.vt-stats--label{
  font-size:0.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vt-on-plate-dim);
}
.vt-stats--value{
  font-size:1.25rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;
  color:var(--vt-on-plate);
}
.vt-stats--value.is-accent{color:var(--vt-on-plate-link)}
.vt-stats--value.is-live{color:var(--vt-live)}

/* --------------------------------------------------- the category rail -- */
/* Three jobs at once, which is why it is a rail of buttons and not a row of
   dots: it says which categories this site is organised around, it names the
   operator leading each one without the reader touching anything, and it is
   the control that moves the hero. Dots would do only the third. */
/* The slider drops the hero's own padding and hands it to the copy column,
   which lets the category rail reach the top, bottom and right edges of the
   card instead of floating as a block in the middle of it. The card's radius
   crops it, so the strip reads as part of the hero rather than a panel
   dropped on top of one. */
.vt-hero--slider{align-items:stretch;padding:0}
.vt-hero--slider .vt-hero--inner{align-items:stretch;flex-wrap:nowrap;gap:0}

.vt-hero--stage{flex:1 1 auto;min-width:0;display:grid;align-items:center;padding:1.75rem}
/* Every slide sits in the same cell, the hidden ones kept in the layout but
   invisible, so the stage is as tall as the tallest slide and nothing under
   it moves as the rotation runs. The base sheet hides [hidden] with
   !important, so keeping them in the layout takes one too. */
.vt-hero--slide{grid-area:1 / 1;width:100%;min-width:0;max-width:38.75rem}
.vt-hero--slide[hidden]{display:block!important;visibility:hidden}
.vt-hero--slide.is-entering{animation:vt-hero-in .42s var(--ease,cubic-bezier(.4,0,.2,1)) both}
@keyframes vt-hero-in{from{opacity:0;transform:translateY(0.375rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .vt-hero--slide.is-entering{animation:none}
}

.vt-hero--cats{
  flex:0 0 17.375rem;align-self:stretch;min-width:0;
  display:flex;flex-direction:column;
  /* Opaque enough to be a surface rather than a wash: the panels carry text
     over whatever the photograph happens to be doing behind them, and a
     strip you can see foliage through is not a strip. */
  /* The rail is a plate, so it follows the plate ramp: near-black in the
     dark theme, graphite in the light one. */
  background:color-mix(in srgb,var(--vt-plate) var(--vt-rail-a),transparent);
  box-shadow:inset 0.0625rem 0 0 rgba(255,255,255,.09);
}
/* Three equal panels filling the card's height, so the strip is the right
   edge of the hero rather than a stack of cards parked in the middle of it. */
.vt-hero--cat{
  position:relative;flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:0.1875rem;
  padding:1rem 1.25rem;
  border:0;border-radius:0;background:transparent;
  font:inherit;text-align:left;cursor:pointer;
  transition:background .2s ease;
}
.vt-hero--cat + .vt-hero--cat{box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.09)}
.vt-hero--cat:not([aria-selected="true"]):hover{background:rgba(255,255,255,.06)}
/* Which panel is playing is said in the accent, the one colour on the page
   that means "this is live". A grey panel among grey panels said it too
   quietly. Gold cannot carry white ink (1.7:1), so the row flips to the
   accent's own near-black, which reads 11:1 on it. */
.vt-hero--cat[aria-selected="true"]{background:var(--vt-accent);color:var(--vt-accent-ink)}
/* A filled row needs no hairline to separate it from its neighbours. */
.vt-hero--cat[aria-selected="true"],
.vt-hero--cat[aria-selected="true"] + .vt-hero--cat{box-shadow:none}

.vt-hero--cat-name{
  display:flex;align-items:center;gap:0.5625rem;
  font-size:0.8125rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.68);
}
.vt-hero--cat-name svg{flex:0 0 auto}
.vt-hero--cat:hover .vt-hero--cat-name{color:rgba(255,255,255,.88)}
.vt-hero--cat[aria-selected="true"] .vt-hero--cat-name{color:var(--vt-accent-ink)}

/* The operator answers the category, so it reads as the smaller half. */
.vt-hero--cat-sub{
  display:block;padding-left:1.5625rem;min-width:0;
  font-size:0.75rem;line-height:1.35;color:rgba(255,255,255,.64);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vt-hero--cat[aria-selected="true"] .vt-hero--cat-sub{color:color-mix(in srgb,var(--vt-accent-ink) 78%,transparent)}
.vt-hero--cat-offer::before{content:" · "}

/* The countdown is the only honest way to say "this moves on its own in a
   moment", and it empties when the rotation stops, so a paused hero looks
   paused rather than stuck. */
.vt-hero--cat-bar{
  position:absolute;left:0;right:0;bottom:0;height:0.125rem;background:transparent;
}
.vt-hero--cat-bar > span{
  display:block;height:100%;width:0;background:var(--vt-accent);opacity:.6;color:var(--vt-accent-ink)}
.vt-hero--cat[aria-selected="true"].is-running .vt-hero--cat-bar > span{
  animation:vt-hero-bar var(--hero-interval,6500ms) linear both;
}
.vt-hero--cat[aria-selected="true"] .vt-hero--cat-bar > span{background:var(--vt-accent-ink);opacity:.7}
@keyframes vt-hero-bar{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .vt-hero--cat[aria-selected="true"].is-running .vt-hero--cat-bar > span{animation:none;width:100%}
}

@media (max-width:1080px){
  .vt-split{grid-template-columns:1fr}
  /* Below this the rail stops being a column beside the hero and becomes a
     row under it: three cards side by side still fit, and the copy gets the
     full width back. */
  .vt-hero--slider .vt-hero--inner{flex-wrap:wrap;align-items:stretch;flex-direction:column}
  .vt-hero--cats{
    flex:0 0 auto;flex-direction:row;align-self:stretch;
    box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.09);
  }
  .vt-hero--cat{flex:1 1 0;min-width:0;padding:0.875rem 1rem}
  /* Turned ninety degrees, so does the divider. */
  .vt-hero--cat + .vt-hero--cat{box-shadow:inset 0.0625rem 0 0 rgba(255,255,255,.09)}
  .vt-hero--slide{max-width:none}
}
/* ------------------------------------------------------- hero on a phone -- */
/* The hero has to be visible inside one screen, which is not the same thing
   as being one screen tall: forcing it to the full viewport stretched a
   350px composition over 720px and filled the difference with scrim. So it
   takes its own height and is capped, so it always fits without scrolling
   and never pads itself out to get there. `dvh` rather than `vh` because on a
   phone browser `vh` counts chrome that is not actually on screen. */
@media (max-width:900px){
  .vt-hero--slider{
    min-height:0;
    max-height:calc(100dvh - var(--vt-top-h) - 3.5rem);
    display:flex;align-items:stretch;
  }
  .vt-hero--slider .vt-hero--inner{
    flex-direction:column;justify-content:flex-start;gap:0;flex-wrap:nowrap;
  }
  .vt-hero--stage{flex:0 1 auto;align-items:flex-start;padding:1.375rem 1.25rem}
  .vt-hero--cats{flex:0 0 auto;flex-direction:row;align-self:stretch}
  .vt-hero--cat{flex:1 1 0;padding:0.8125rem 0.875rem}
  .vt-hero--cat-name{font-size:0.75rem}
  .vt-hero--cat-sub{padding-left:0;font-size:0.71875rem}
}

@media (max-width:640px){
  .vt-hero{padding:1.25rem}
  .vt-hero--slider{padding:0}
  .vt-hero--title{font-size:1.5rem}
  .vt-hero--lede{font-size:0.875rem}
  /* Three columns across a 390px screen cannot hold the operator and the
     offer on one line, so the second line keeps the operator only. The icon
     goes with it: at this size it is the category word that identifies the
     column, not a 16px glyph. */
  .vt-hero--cat{padding:0.75rem 0.5rem;text-align:center;align-items:center}
  .vt-hero--cat-name{font-size:0.65625rem;letter-spacing:.03em;justify-content:center}
  .vt-hero--cat-name svg{display:none}
  .vt-hero--cat-sub{font-size:0.6875rem;max-width:100%}
  /* The operator alone. Three columns on a 390px screen cannot hold the
     offer as well, and half an offer behind an ellipsis is worse than none. */
  .vt-hero--cat-offer{display:none}
  /* Two full-width buttons rather than one and a half. */
  .vt-hero--actions{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
  .vt-hero--actions .vt-btn{width:100%;padding:0 0.625rem}
  /* The offer sits in the middle of the height that leaves, and centred
     across: logo, offer, buttons and small print on one axis. */
  .vt-hero--stage{flex:1 0 auto;align-items:center;padding:1.5rem 1.25rem;text-align:center}
  .vt-hero--lede{margin-inline:auto}
  .vt-card--casino{--card-w:264px}
  .vt-card--game{--card-w:138px}
  .vt-sec--title{font-size:1.1875rem}
  .vt-sec--head{align-items:flex-start;flex-direction:column;gap:0.375rem}
  .vt-split{gap:0.625rem}
  .vt-feature{min-height:15rem;padding:1.125rem}
  .vt-stats{gap:1rem}
  .vt-stats--value{font-size:1.125rem}
}

/* ------------------------------------------------------- hero + join row -- */
.vt-hero-row{display:grid;gap:0.875rem;grid-template-columns:minmax(0,1fr) 20.5rem;margin:0 0 1.375rem}
.vt-hero-row > .vt-hero{margin:0}

/* The page's own heading, in the column beside the pick. It follows the theme
   like every other card: the slider is the loud thing in this row, and the
   card beside it is the quiet one that says what the page is. The byline is
   pinned to the card's foot, so both columns end on the same line. */
.vt-pagehead{
  display:flex;flex-direction:column;gap:0.75rem;min-width:0;
  padding:1.375rem;background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  color:var(--vt-text);
}
.vt-pagehead--title{
  margin:0;font-size:1.625rem;font-weight:800;letter-spacing:-.025em;line-height:1.15;
  color:var(--vt-text);text-wrap:balance;
}
.vt-pagehead--intro{margin:0;font-size:0.875rem;line-height:1.6;color:var(--vt-text-dim)}
/* The byline row was drawn for a dark banner. Here it takes the theme's own
   ink, and it stacks: the date, the team and the channels do not fit across
   280px side by side. */
.vt-pagehead .hero--meta{
  flex-direction:column;align-items:flex-start;gap:0.75rem;
  margin:auto 0 0;padding-top:0.875rem;border-top:0.0625rem solid var(--vt-line);
}
.vt-pagehead .hero--meta .hero--updated,
.vt-pagehead .hero--author-name,
.vt-pagehead .hero--author-role{color:var(--vt-text-dim)}
.vt-pagehead .hero--author,
.vt-pagehead .hero--author-name strong{color:var(--vt-text)}
.vt-pagehead .hero--updated + .hero--author::before{display:none}
.vt-pagehead .hero--author-avatar{background:var(--vt-hover);box-shadow:0 0 0 0.125rem var(--vt-line);color:var(--vt-text)}
.vt-pagehead .hero--social-link{background:var(--vt-hover);color:var(--vt-text);box-shadow:inset 0 0 0 0.0625rem var(--vt-line)}

@media (max-width:1180px){
  .vt-hero-row{grid-template-columns:1fr}
  /* Under the slider the card has the full width, so the byline goes back to
     one row and the standfirst keeps to a reading measure. */
  .vt-pagehead .hero--meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.75rem 1.5rem}
  .vt-pagehead--intro{max-width:70ch}
}
@media (max-width:640px){
  /* One screen between them: the pick and the page's heading share the
     height from the bar to the bottom edge, with the page's own gutter above,
     between and below. The heading keeps its own height and the pick takes
     the rest, so the pick is one height on every slide and the fold falls
     under the heading card rather than through it. svh is the screen with
     the browser's bars showing, which is how a page opens; dvh would resize
     the row every time they slide away. This has to come after the row's
     own rule above, which would otherwise keep it a grid. */
  .vt-hero-row{
    display:flex;flex-direction:column;gap:var(--vt-pad);
    min-height:calc(100vh - var(--vt-top-h) - 2 * var(--vt-pad));
    min-height:calc(100svh - var(--vt-top-h) - 2 * var(--vt-pad));
  }
  .vt-hero-row > .vt-hero--slider{flex:1 0 auto;max-height:none}
  .vt-hero-row > .vt-pagehead{flex:0 0 auto}
  .vt-pagehead{padding:1.25rem}
  .vt-pagehead--title{font-size:1.4375rem}
}
/* A short phone cannot hold both at full spacing, so the spacing gives first
   and then the standfirst, cut to three lines on screen. It stays whole in
   the page for screen readers and search. The offer and its small print are
   never cut. */
@media (max-width:640px) and (max-height:760px){
  .vt-hero--stage{padding:1.125rem 1.25rem}
  .vt-hero--brand{height:3rem;margin-bottom:0.75rem}
  .vt-hero--logo{--k:calc(var(--kp,.8) * .86)}
  .vt-hero--logo:not([style]) img{max-height:3rem}
  .vt-hero--lede{margin-bottom:0.875rem}
  .vt-pagehead{gap:0.625rem;padding:1.125rem}
  .vt-pagehead .hero--meta{gap:0.625rem;padding-top:0.75rem}
  .vt-pagehead--intro{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
/* Shorter still, a small phone or one with the browser's bars out: the
   category tabs keep their name and drop the operator, which the slide
   itself shows, and the standfirst keeps two lines. */
@media (max-width:640px) and (max-height:700px){
  .vt-hero--cat-sub{display:none}
  .vt-pagehead--title{font-size:1.3125rem}
  .vt-pagehead--intro{-webkit-line-clamp:2}
}

/* ------------------------------------------- front page: toplist + rail -- */
/* The list and a narrow column of its own, mirroring the hero row above: the
   rail sits on the left here, the list takes the width on the right. The list
   is first in the markup, so where the columns stack it is still the first
   thing a reader meets; the grid puts the rail back on the left once both
   fit. */
.vt-front-split{display:grid;gap:1rem}
.vt-front-split--main{min-width:0}
.vt-front-split--rail{display:flex;flex-direction:column;gap:1rem;min-width:0}
/* Stacked under the list the rail has the whole width, which is far more than
   any of these cards wants, so there they sit side by side instead. */
@media (max-width:1399px){
  .vt-front-split--rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));align-items:start}
}
/* On a phone the column is one card wide, and there the order is the order a
   reader wants them in: this week's pick and the giveaways that are open come
   before the list, the list itself next, and what the community has been
   doing after it. The rail steps out of the way with display:contents so its
   three cards can be ordered against the list. */
@media (max-width:767px){
  .vt-front-split--rail{display:contents}
  .vt-railcard--new{order:1}
  .vt-railcard--giveaways{order:2}
  .vt-front-split--main{order:3}
  .vt-railcard--activity{order:4}
}
/* Not before 1400px. The toplist tile is a wide thing, and at 1200 the column
   left over was 584px: the sort tabs wrapped and the row fell apart. Below
   this the rail goes under the list, where it has the full width. */
@media (min-width:1400px){
  .vt-front-split{grid-template-columns:20.5rem minmax(0,1fr);align-items:start}
  .vt-front-split--rail{grid-column:1;grid-row:1}
  .vt-front-split--main{grid-column:2;grid-row:1}
}

/* The cards share one shell: the same surface, edge and radius the rest of
   the page uses, so the rail reads as three cards rather than three designs. */
.vt-railcard{
  display:flex;flex-direction:column;gap:0.625rem;min-width:0;
  padding:1.125rem;background:var(--vt-surface);
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);color:var(--vt-text);
}
.vt-railcard--kicker{
  display:flex;align-items:center;gap:0.375rem;margin:0;
  font-size:0.71875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vt-link);
}
.vt-railcard--title{margin:0;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.vt-railcard--legal{margin:0;font-size:0.6875rem;line-height:1.4;color:var(--vt-text-faint)}
.vt-railcard--more{
  display:inline-flex;align-items:center;gap:0.25rem;margin-top:0.125rem;
  font-size:0.8125rem;font-weight:700;color:var(--vt-link);text-decoration:none;
}
.vt-railcard--more:hover{text-decoration:underline;text-underline-offset:0.125rem}

/* Added this week: a filled badge across the top so the card announces
   itself, then the operator's mark on its own colour, the offer, and the two
   numbers that decide it. Everything is centred: one column, one message. */
.vt-railcard--new{padding:0;gap:0;overflow:hidden}
.vt-railnew--badge{
  margin:0;padding:0.5625rem 0.875rem;
  background:var(--vt-accent);color:var(--vt-accent-ink);
  font-size:0.71875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;
}
.vt-railnew--body{display:flex;flex-direction:column;gap:0.75rem;padding:1rem;text-align:center}
/* The operator's own colour at full strength, the same plate the toplist tile
   and the casino card use. A tint of it went pale in the light theme and the
   marks, which are drawn for a dark ground, went with it. */
.vt-railnew--brand{
  display:grid;place-items:center;height:6.5rem;border-radius:var(--vt-r-sm);overflow:hidden;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
    color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
}
.vt-railnew--brand img{max-width:70%;max-height:3.5rem;width:auto;height:auto;object-fit:contain}
.vt-railnew--wordmark{font-size:1.125rem;font-weight:800;color:#fff}
.vt-railnew--name{margin:0;font-size:1.1875rem;font-weight:800;letter-spacing:-.02em}
.vt-railnew--name a{color:inherit;text-decoration:none}
.vt-railnew--name a:hover{color:var(--vt-link)}
.vt-railnew--rating{display:flex;align-items:center;justify-content:center;gap:0.375rem;margin-top:-0.375rem;font-size:0.8125rem}
.vt-railnew--offer{
  display:flex;flex-direction:column;gap:0.1875rem;margin:0;
  padding:0.75rem;border-radius:var(--vt-r-sm);background:var(--vt-raised);
  border:0.0625rem solid var(--vt-line);
}
.vt-railnew--offer-label{font-size:0.65625rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--vt-text-faint)}
.vt-railnew--offer strong{font-size:1.0625rem;font-weight:800;line-height:1.25}
.vt-railnew--offer-sub{font-size:0.78125rem;color:var(--vt-text-dim)}
.vt-railnew--facts{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem;margin:0;text-align:left}
/* Stacked, the card is the same card the toplist row becomes, and there the
   pair sits on the centre of each column. */
@media screen and (max-width:1023px){
  .vt-railnew--facts{text-align:center}
}
.vt-railnew--facts dt{font-size:0.65625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--vt-text-faint)}
.vt-railnew--facts dd{margin:0.125rem 0 0;font-size:0.84375rem;font-weight:700}
.vt-railnew--actions{display:grid;gap:0.5rem;margin-top:0.125rem}
.vt-railnew--actions .vt-btn{width:100%}
.vt-railcard--new .vt-railcard--legal{text-align:center}

/* Latest activity: who did what, newest first. */
.vt-activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.75rem}
.vt-activity--row{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:0.625rem;align-items:start}
.vt-activity--who{
  display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 auto;
  border-radius:50%;overflow:hidden;background:var(--vt-hover);
  color:var(--vt-text-dim);font-size:0.8125rem;font-weight:800;
}
.vt-activity--who img{width:100%;height:100%;object-fit:cover;display:block}
.vt-activity--text{display:flex;flex-direction:column;gap:0.0625rem;min-width:0}
.vt-activity--line{font-size:0.78125rem;line-height:1.35;color:var(--vt-text-dim)}
.vt-activity--name{color:var(--vt-text);font-weight:700;text-decoration:none}
.vt-activity--name:hover{text-decoration:underline;text-underline-offset:0.125rem}
.vt-activity--what{
  font-size:0.84375rem;font-weight:700;color:var(--vt-text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vt-activity--what:hover{color:var(--vt-link)}
.vt-activity--when{font-size:0.71875rem;color:var(--vt-text-faint);white-space:nowrap}

/* Giveaways, one at a time. The track is a scroll-snap strip, so with the
   script off it is still a strip the reader can push sideways. */
.vt-giveslider{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:0.75rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin:0 -0.125rem;padding:0 0.125rem;
}
.vt-giveslider::-webkit-scrollbar{display:none}
.vt-giveslide{scroll-snap-align:center;display:flex;flex-direction:column;gap:0.5rem;min-width:0}
.vt-giveslide--media{display:block;aspect-ratio:16/9;border-radius:var(--vt-r-sm);overflow:hidden;background:var(--vt-raised)}
.vt-giveslide--media img{width:100%;height:100%;object-fit:cover;display:block}
.vt-giveslide--placeholder{display:grid;place-items:center;height:100%;color:var(--vt-text-faint)}
.vt-giveslide--name{margin:0;font-size:0.9375rem;font-weight:800;line-height:1.25}
.vt-giveslide--name a{color:inherit;text-decoration:none}
.vt-giveslide--name a:hover{color:var(--vt-link)}
.vt-giveslide--prize{display:flex;align-items:center;gap:0.375rem;margin:0;font-size:0.8125rem}
.vt-giveslide--meta{display:flex;flex-wrap:wrap;gap:0.125rem 0.625rem;margin:0;font-size:0.75rem;color:var(--vt-text-dim)}
.vt-giveslide--cta{width:100%;margin-top:0.125rem}
.vt-railslider--nav{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-top:0.125rem}
.vt-railslider--arrow{
  display:grid;place-items:center;width:1.875rem;height:1.875rem;flex:0 0 auto;
  border:0.0625rem solid var(--vt-line);border-radius:62.4375rem;
  background:var(--vt-raised);color:var(--vt-text);cursor:pointer;
}
.vt-railslider--arrow:hover{background:var(--vt-hover)}
.vt-railslider--dots{display:flex;align-items:center;gap:0.375rem;list-style:none;margin:0;padding:0}
.vt-railslider--dots button{
  display:block;width:0.5rem;height:0.5rem;padding:0;border:0;border-radius:50%;
  background:var(--vt-line-strong);cursor:pointer;
}
.vt-railslider--dots button[aria-current="true"]{background:var(--vt-accent)}

/* ===== _app-loss.css ===== */
/* ==========================================================================
   Lossback Lounge
   The counterweight to the win wall, so it is deliberately not styled like a
   trophy case: losses read in a cool grey-violet, and the only warm colour is
   the money paid back.
   ========================================================================== */

:root{
  --vt-loss:#F0736A;      /* the amount lost */
  --vt-loss-wash:rgba(240,115,106,.13);
}

/* ------------------------------------------------------------- the pot --- */
/* It leads the page under the hero now rather than riding on the picture, so
   it takes the page's own surface and ink in both themes. */
.vt-pot{
  flex:0 1 auto;min-width:15.625rem;
  padding:1.25rem 1.375rem;border-radius:var(--vt-r-lg);
  background:var(--vt-surface);
  border:0.0625rem solid var(--vt-line);
}
.vt-pot--label{
  margin:0 0 0.25rem;font-size:0.71875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vt-text-faint);
}
.vt-pot--figure{
  margin:0 0 1rem;font-size:1.875rem;font-weight:800;letter-spacing:-.03em;
  color:var(--vt-link);font-variant-numeric:tabular-nums;
}
.vt-pot--facts{display:flex;gap:1.375rem;flex-wrap:wrap;margin:0}
.vt-pot--facts > div{display:flex;flex-direction:column;gap:0.125rem}
.vt-pot--facts dt{
  font-size:0.65625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--vt-text-faint);
}
.vt-pot--facts dd{margin:0;font-size:0.875rem;font-weight:700;color:var(--vt-text);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ the card --- */
.vt-card--loss{--card-w:280px}
.vt-loss-amount{
  position:absolute;right:0.625rem;bottom:0.625rem;z-index:2;
  padding:0.3125rem 0.625rem;border-radius:62.4375rem;
  background:rgba(var(--vt-scrim),.88);
  color:var(--vt-loss);font-size:0.875rem;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.vt-kicker--win{background:var(--vt-accent);color:var(--vt-accent-ink)}
.vt-card--loss.is-winner{border-color:var(--vt-accent-line)}

.vt-byline{display:flex;align-items:center;gap:0.4375rem;margin:0.125rem 0 0;font-size:0.75rem;color:var(--vt-text-faint)}
.vt-byline img{width:1.25rem;height:1.25rem;border-radius:62.4375rem;object-fit:cover;flex:0 0 auto}
.vt-byline--rank{
  /* The rank colour arrives inline from inc/brand.php and was picked against
     the dark canvas: Jet Set reaches 1.45:1 on white. --vt-rank-mix is 100%
     in the dark theme and 50% in the light one, so the same identity colour
     darkens to text contrast where it has to. */
  padding:0.0625rem 0.4375rem;border-radius:62.4375rem;font-size:0.65625rem;font-weight:700;
  color:color-mix(in srgb,var(--rank,var(--vt-text-dim)) var(--vt-rank-mix),#000);
  background:color-mix(in srgb,var(--rank,#666) 16%,transparent);
}

/* ------------------------------------------------------------- the form -- */
.vt-lossform{
  padding:1.25rem;border-radius:var(--vt-r-lg);
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
}
.vt-lossform--locked{text-align:center}
.vt-lossform--title{margin:0 0 0.375rem;font-size:1.125rem;font-weight:800;letter-spacing:-.02em;color:var(--vt-text)}
.vt-lossform--lead{margin:0 0 1rem;font-size:0.8125rem;line-height:1.55;color:var(--vt-text-dim)}
.vt-lossform--grid{display:grid;gap:0.75rem;grid-template-columns:repeat(auto-fit,minmax(11.875rem,1fr));margin-bottom:0.75rem}
.vt-lossform--foot{display:flex;flex-direction:column;gap:0.625rem;margin-top:1rem}
.vt-lossform--foot .vt-btn{align-self:flex-start}
.vt-lossform--terms{margin:0;font-size:0.71875rem;line-height:1.5;color:var(--vt-text-faint)}

.vt-field{display:flex;flex-direction:column;gap:0.3125rem;min-width:0}
.vt-field--wide{grid-column:1/-1}
.vt-field--label{font-size:0.75rem;font-weight:700;color:var(--vt-text-dim)}
.vt-field--help{font-size:0.6875rem;line-height:1.45;color:var(--vt-text-faint)}
.vt-field input,.vt-field select,.vt-field textarea{
  width:100%;padding:0.5625rem 0.6875rem;font:inherit;font-size:0.84375rem;
  background:var(--vt-canvas);color:var(--vt-text);
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-sm);
}
.vt-field textarea{resize:vertical;line-height:1.55}
.vt-field input:focus,.vt-field select:focus,.vt-field textarea:focus{
  outline:none;border-color:var(--vt-accent-line);box-shadow:0 0 0 0.1875rem var(--vt-accent-wash);
}
.vt-field input[type="file"]{padding:0.4375rem 0.5625rem;font-size:0.78125rem}
.vt-field input[type="file"]::file-selector-button{
  margin-right:0.625rem;padding:0.3125rem 0.6875rem;border:0;border-radius:62.4375rem;
  background:var(--vt-hover);color:var(--vt-text);font:inherit;font-size:0.75rem;font-weight:700;cursor:pointer;
}
.vt-field input[type="file"]::file-selector-button:hover{background:var(--vt-accent);color:var(--vt-accent-ink)}

/* --------------------------------------------------------- single story -- */
.vt-loss-single{max-width:none}
.vt-loss-single--head{margin:0 0 1.25rem}
.vt-loss-single--title{margin:0.375rem 0 0.5rem;font-size:clamp(1.5rem,3vw,2.125rem);font-weight:800;letter-spacing:-.025em;color:var(--vt-text)}
.vt-loss-single--meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.8125rem;color:var(--vt-text-faint)}
.vt-loss-single--shot{
  margin:0 0 1.25rem;border-radius:var(--vt-r-lg);overflow:hidden;
  border:0.0625rem solid var(--vt-line);background:var(--vt-raised);
}
.vt-loss-single--shot img{width:100%;height:auto;display:block}
.vt-loss-single--story{font-size:0.9375rem;line-height:1.7;color:var(--vt-text-dim)}
.vt-loss-single--story > p{max-width:72ch;margin:0 0 1em}

.vt-panel{
  padding:1rem;border-radius:var(--vt-r-lg);
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  display:flex;flex-direction:column;gap:0.875rem;
}
.vt-panel .vt-facts{margin:0}
.vt-facts dd.is-loss,.vt-stats--value.is-loss{color:var(--vt-loss)}
.vt-payback{
  display:flex;flex-direction:column;gap:0.125rem;margin:0;padding:0.75rem 0.875rem;
  border-radius:var(--vt-r-md);background:var(--vt-accent-wash);
  border:0.0625rem solid var(--vt-accent-line);
}
.vt-payback strong{font-size:1.1875rem;font-weight:800;color:var(--vt-link);font-variant-numeric:tabular-nums}
.vt-payback span{font-size:0.75rem;color:var(--vt-text-dim)}

/* ------------------------------------------------------- the draw table -- */
.vt-table--scroll{overflow-x:auto;border-radius:var(--vt-r-lg);border:0.0625rem solid var(--vt-line)}
.vt-table{width:100%;border-collapse:collapse;background:var(--vt-surface);font-size:0.84375rem}
.vt-table th,.vt-table td{padding:0.6875rem 0.875rem;text-align:left;border-bottom:0.0625rem solid var(--vt-line)}
.vt-table thead th{
  font-size:0.6875rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--vt-text-faint);background:var(--vt-raised);
}
.vt-table tbody tr:last-child th,.vt-table tbody tr:last-child td{border-bottom:0}
.vt-table tbody th{font-weight:700;color:var(--vt-text)}
.vt-table td{color:var(--vt-text-dim);font-variant-numeric:tabular-nums}
.vt-muted{color:var(--vt-text-faint)}
.vt-winners{display:flex;flex-wrap:wrap;gap:0.375rem 0.875rem}
.vt-winner{display:inline-flex;align-items:center;gap:0.375rem;color:var(--vt-text)}
.vt-winner img{width:1.375rem;height:1.375rem;border-radius:62.4375rem;object-fit:cover}

@media (max-width:640px){
  .vt-pot{min-width:0;width:100%}
  .vt-pot--figure{font-size:1.625rem}
  .vt-lossform--grid{grid-template-columns:1fr}
}

/* Inside a dashboard panel the form already has a surface and a heading. */
.dz-panel .vt-lossform{background:transparent;border:0;padding:0}
.dz-panel .vt-lossform--title{display:none}

/* ===== _ui.css ===== */
/* ==========================================================================
   Velatonmies — the component layer

   Everything above this file is history: an inherited theme, then an app
   shell bolted onto it, then five rounds of feature work. Each of those left
   its own idea of what a button is, and the result reads the way generated
   interfaces read — pill buttons beside pill tabs beside pill badges, a
   gradient wherever a surface needed to look considered, and font-weight 800
   on anything that mattered.

   This file is the single answer to those questions, applied to every
   namespace at once so the same decision holds on every page:

     Radius   one scale, derived from --vt-r-base. Nothing is a pill unless
              it is actually round: an avatar, a dot, a progress track.
     Fill     flat. Gradients survive only where they are doing work, which
              means scrims over photographs and mask images, never decoration.
     Weight   500 on controls, 600 on their labels. Emphasis comes from
              colour and surface, not from making everything bold.
     Edges    one hairline, --vt-line. Elevation is a surface change first
              and a shadow only when something genuinely floats.
     Focus    one ring, everywhere.

   It loads last on purpose. The rules below are not more important than the
   ones they override; they are the same decisions made once instead of
   fifteen times.
   ========================================================================== */

/* --------------------------------------------------------------- rhythm -- */
/* Vertical spacing had three answers and used two properties to give them:
   `.vt-sec` closed with a 40px margin, `.section` with 40px of padding, the
   hero row with 22px, and section heads with 16px in one place and 15 in
   another. Measured down the front page that produced gaps of 22, 0, 40, 32,
   32, 32, 40, 0. Nobody chose that sequence; it is what happens when six
   files each answer the same question.

   One value per relationship, expressed as margin so adjacent gaps never
   stack, and it is the same value on every page. */
.vt-sec,
.section,
.vt-hero-row,
.toplist-section{margin:0 0 var(--vt-s-10);padding-bottom:0}
.vt-sec:last-child,
.section:last-child{margin-bottom:0}

/* A section's head sits closer to its own content than the section sits to
   the next one, which is the whole job of a rhythm: proximity says what
   belongs together. */
.vt-sec--head,
.toplist-section--head{margin:0 0 var(--vt-s-5)}
.section--title{margin:0 0 var(--vt-s-2)}
.seo-section--block{margin:0 0 var(--vt-s-6)}

/* Grids and rails breathe at the same interval as everything else. 14px was
   tight enough that four cards read as one block of noise. */
.vt-grid,.vt-rail{gap:var(--vt-s-5)}
.vt-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-w,232px),1fr))}

/* The values a sweep found sitting one or two pixels off the scale. Each is
   invisible on its own, which is why they survived; together they are why
   nothing on the page lined up with anything else. */
.vt-card--body{padding:var(--vt-s-4);gap:var(--vt-s-2)}
.vt-card--game .vt-card--body{padding:var(--vt-s-3) 0 0;gap:var(--vt-s-1)}
.vt-card--win.is-compact .vt-card--body{padding:var(--vt-s-3)}
.rail-card--body{padding:var(--vt-s-4)}
.vt-card--meta,.compare--stack{gap:var(--vt-s-2)}
.rating,.vt-card--facts li{gap:var(--vt-s-1)}
.compare th,.compare td{padding:var(--vt-s-3) var(--vt-s-4)}
.faq-item--answer,.faq-item summary{padding-left:var(--vt-s-5)}
.casino-tile--tag{padding-left:var(--vt-s-3);padding-right:var(--vt-s-3)}
.hub-copy h3,.seo-section--body h3,.content--main h3{margin-bottom:var(--vt-s-3)}
.seo-section--body p,.hub-copy p,.content--main p,.term-copy p,.page-copy p{margin:0 0 var(--vt-s-4)}
.faq-item summary{gap:var(--vt-s-4)}
.vt-card--facts li,.casino-card--facts li{gap:var(--vt-s-1)}
.compare--pill{padding-left:var(--vt-s-2);padding-right:var(--vt-s-2)}
.vt-card--strip{padding:var(--vt-s-4)}

/* A card whose media never arrived should read as a card without a picture,
   not as a hole. The loss wall has no screenshots on a fresh install, and an
   empty 156px box above the text is what that looked like. */
.vt-card--media:not(:has(img)){background:var(--vt-hover)}

/* Card grids count columns from the space they have, not from a number
   somebody wrote at a breakpoint. `repeat(4, 1fr)` above 1024px meant a 2560
   display got four 425px cards instead of six 280px ones: the same grid,
   inflated. The minimums stay in px on purpose, so they do not grow with the
   interface scale and take the extra column back. */
@media (min-width:1200px){
  .dz-store-grid,
  .casinos-grid,
  .dz-wins-grid,
  .work-grid,
  .guides-grid,
  .dz-roster,
  .vt-grid{
    /* Six across at most. Past the width six cards fill, the columns grow
       instead of a seventh appearing: a column's minimum is the larger of the
       card minimum and a sixth of the row, less a gap's worth, so a seventh
       can never fit. */
    grid-template-columns:repeat(auto-fill,minmax(max(var(--card-min),calc(100% / 6 - 1.5rem)),1fr));
  }
}

/* A rail is a horizontal scroller, so `1fr` on its auto-columns means "fill
   the width if there are not enough cards to overflow it". With four cards on
   an ultrawide that stretched each one to 561px. The cards may grow a third
   past their intended width to take up slack, and then they stop and the rail
   simply ends. */
.vt-rail{
  grid-auto-columns:minmax(var(--card-w,232px),calc(var(--card-w,232px) * 1.35));
  justify-content:start;
}

/* Card artwork has a ceiling. An aspect ratio alone means a wider card gets a
   taller picture without limit: a 4/3 store panel reached 319px on a 2560
   display, and on the demo items it was 319px of nothing. The card grows; the
   picture stops. */
.vt-card--media,.dz-reward--media,.vt-poster,.rail-card--logo,.dz-win-card--media{
  max-height:15rem;
}

/* A link sitting on a plate no longer has a colour of its own: the plate ramp
   went neutral, so --vt-on-plate-accent is near-white and a bare colour change
   would not mark it as a link at all. The underline does that job instead, and
   only in prose: a card inside a hero has its own shape to say it is clickable,
   and underlining its title just makes the card look broken. */
.hero--intro a,.hero p a,
.review-hero > .grid-container > p a,
.vt-hero--lede a{text-decoration:underline;text-underline-offset:0.125rem}

.vt-card--facts li,.casino-card--facts li,.vt-facts li{gap:var(--vt-s-1)}
.vt-sec--link{padding:var(--vt-s-2) 0}
.hub-copy h4,.seo-section--body h4,.vt-card--foot h3{margin-bottom:var(--vt-s-2)}
.toplist-sort--button,.vt-theme--btn,.lang-switch--item,.dz-tab,
.bonus-filters--button,.slots--sort-button,.igp-tabs--tab{gap:var(--vt-s-2)}

/* ----------------------------------------------------------------- type -- */
/* A section title was 21px against a 38px hero headline and 15px body, which
   left the middle of the scale empty and made every section read as a caption
   over a list. 24 at 700 is the same step a component library uses between
   page title and section title, and 800 goes back to being for numbers. */
.vt-sec--title,
.section--title{
  font-size:1.5rem;font-weight:700;letter-spacing:-.018em;line-height:1.25;
}
.vt-sec--sub,
.toplist-section--sub{font-size:0.875rem;line-height:1.5}
.vt-card--title{font-size:0.9375rem;font-weight:600;line-height:1.35}

/* ----------------------------------------------------------------- bands -- */
/* Alternating section tones, so a reader scrolling forty screens of a hub
   page can see where one section ends and the next begins without reading
   the heading. One step off the canvas and no more: the job is to group, not
   to draw attention, and a band that announces itself is worse than none.

   The band bleeds to the edges of the content column rather than sitting
   inside it as a card, because a card would say "this is a thing" when the
   only claim being made is "this is a different thing from the one above".

   Counted across every direct child of the content column, so the alternation
   is the reading order rather than a class somebody has to remember to add.
   The hero is always first and therefore always odd, so it never bands, which
   is right: it has its own artwork and a tone behind it would fight that. */
main.vt-content > :nth-child(even):not(.vt-hero-row){
  background:var(--vt-band);
  margin-left:calc(var(--vt-pad) * -1);
  margin-right:calc(var(--vt-pad) * -1);
  padding:var(--vt-s-8) var(--vt-pad);
  margin-bottom:var(--vt-s-8);
}
/* A banded section already has vertical padding, so its own bottom margin
   would double the gap to the next one. */
main.vt-content > :nth-child(even):not(.vt-hero-row) + *{margin-top:0}

/* Cards standing on a band need their edge back: on the canvas the surface
   step is enough, on the band it is one shade too close. */
main.vt-content > :nth-child(even):not(.vt-hero-row) :is(.vt-card,.new-window,.hub-group,.compare-wrap,.dz-win-card,.guide-card,.slot-tile){
  border:0.0625rem solid var(--vt-line);
}

@media (max-width:640px){
  main.vt-content > :nth-child(even):not(.vt-hero-row){
    margin-left:calc(var(--vt-s-3) * -1);
    margin-right:calc(var(--vt-s-3) * -1);
    padding-left:var(--vt-s-3);padding-right:var(--vt-s-3);
  }
}

/* ------------------------------------------------------------- controls -- */
/* Every button in the theme, whichever namespace it came from. Height and
   padding come from one place so a legacy `.button` beside a `.vt-btn` is
   not half a pixel different. */
.vt-btn,
.button,
.button.large,
.button.small,
.button.hollow,
.button.secondary,
.casino-tile--review-link,
.toplist-section--all,
.toplist-section--all-mobile,
.vt-top--cta{
  border-radius:var(--vt-r-sm);
  /* 700 across the board. At 500 a label on a filled or outlined control read
     as body copy that happened to have a box round it. */
  font-weight:700;
  letter-spacing:0;
  box-shadow:none;
  text-transform:none;
}

.vt-btn{height:2.25rem;padding:0 1rem;font-size:0.875rem}
.vt-btn--lg{height:2.5rem;padding:0 1.125rem;font-size:0.875rem}
.vt-btn--sm{height:2rem;padding:0 0.75rem;font-size:0.8125rem}

/* The four variants a component library ships, and no more: solid for the
   one action a screen is for, muted for the ones beside it, outline where
   the control sits on artwork, ghost where it sits in a row of its own kind. */
.vt-btn--primary,
.button:not(.hollow):not(.secondary){
  background:var(--vt-accent);color:var(--vt-accent-ink);
  border-color:var(--vt-accent-edge);
  /* Dark ink on saturated gold measures 11:1 and still reads soft at 700: the
     fill is bright enough that thin strokes bloom into it. One step heavier. */
  font-weight:800;
}
.vt-btn--primary:hover,
.button:not(.hollow):not(.secondary):hover{background:var(--vt-accent-lo)}

.vt-btn--ghost,
.button.hollow,
.button.secondary,
.casino-tile--review-link,
.toplist-section--all,
.toplist-section--all-mobile{
  background:transparent;color:var(--vt-text);
  border:0.0625rem solid var(--vt-line-strong);
}
.vt-btn--ghost:hover,
.button.hollow:hover,
.button.secondary:hover,
.casino-tile--review-link:hover,
.toplist-section--all:hover,
.toplist-section--all-mobile:hover{
  background:var(--vt-hover);border-color:var(--vt-line-strong);color:var(--vt-text);
}

/* ------------------------------------------------- segmented controls --- */
/* Sort rows, theme and language switches, dashboard tabs and filter rows are
   all the same component: a muted track holding options, one of which is
   current. They looked like four different things because each was written
   where it was needed. The current option is a raised surface, which is the
   one convention every reader already knows from a real tab strip. */
.toplist-sort,
.vt-theme,
.lang-switch--side,
.dz-tabs,
.bonus-filters,
.slots--sort,
.igp-tabs--nav{
  display:inline-flex;align-items:center;gap:0.125rem;
  padding:0.1875rem;border-radius:var(--vt-r-md);
  background:var(--vt-hover);border:0.0625rem solid var(--vt-line);
}
.lang-switch--side{display:flex}

.toplist-sort--button,
.vt-theme--btn,
.lang-switch--item,
.dz-tab,
.bonus-filters--button,
.slots--sort-button,
.igp-tabs--tab{
  flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;
  height:1.875rem;padding:0 0.75rem;
  border:0;border-radius:var(--vt-r-xs);
  background:transparent;color:var(--vt-text-dim);
  font:inherit;font-size:0.8125rem;font-weight:500;letter-spacing:0;
  text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.toplist-sort--button:hover,
.vt-theme--btn:hover,
.lang-switch--item:hover,
.dz-tab:hover,
.bonus-filters--button:hover,
.slots--sort-button:hover,
.igp-tabs--tab:hover{background:transparent;color:var(--vt-text);border-color:transparent}

.toplist-sort--button[aria-pressed="true"],
.toplist-section .toplist-sort--button[aria-pressed="true"],
.vt-theme--btn[aria-pressed="true"],
.vt-theme--btn.is-active,
.lang-switch--item.is-active,
.dz-tab.is-active,
.dz-tab[aria-selected="true"],
.bonus-filters--button.is-active,
.bonus-filters--button[aria-pressed="true"],
.slots--sort-button[aria-pressed="true"],
.slots--sort-button.is-active,
.igp-tabs--tab.is-active,
.igp-tabs--tab[aria-selected="true"]{
  background:var(--vt-surface);color:var(--vt-text);
  border-color:transparent;
  box-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.28);
}
/* The count inside a filter button is a badge on a control, so it stays
   quiet whichever state the control is in. */
.bonus-filters--button span,
.slots--chip{
  border-radius:var(--vt-r-xs);
  background:var(--vt-hover);color:var(--vt-text-dim);
  font-weight:500;
}
/* Once the control is filled — pressed, or on the light bar, whose fill can
   be a plate the theme does not flip — the count has no quiet ground of its
   own left. It takes the control's ink and stays quiet by size and weight. */
.bonus-filters--button[aria-pressed="true"] span,
.bonus-filters--light .bonus-filters--button span{background:var(--vt-line-strong);color:inherit}

/* ------------------------------------------------------------ chip rows -- */
/* A filter chip is a control, not a tag: it takes the control radius and the
   control weight, and it says it is on by filling rather than by inverting
   into the accent, which was the loudest thing on several pages. */
.vt-chip,
.casino-tile--tag,
.vt-tag--link,
.dz-explain--tag,
.author-card--topics li{
  border-radius:var(--vt-r-xs);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
.vt-chip{
  height:2rem;padding:0 0.75rem;font-size:0.8125rem;
  border:0.0625rem solid var(--vt-line);background:var(--vt-surface);color:var(--vt-text-dim);
}
.vt-chip:hover{background:var(--vt-hover);color:var(--vt-text);border-color:var(--vt-line-strong)}
.vt-chip.is-active{
  background:var(--vt-hover);border-color:var(--vt-line-strong);color:var(--vt-text);
}
.vt-chip--count{font-weight:500;opacity:.7}

/* --------------------------------------------------------------- badges -- */
/* Small, bordered, quiet. A badge is a label on something else, so it never
   competes with the thing it labels. */
.vt-kicker,
.vt-tag,
.vt-score,
.vt-list--score,
.vt-score,.vt-list--score{font-weight:600}

/* ---------------------------------------------------------------- input -- */
input[type="text"],input[type="search"],input[type="email"],input[type="url"],
input[type="number"],input[type="password"],select,textarea{
  border-radius:var(--vt-r-sm);
  font-weight:400;
}

/* ------------------------------------------------------------- surfaces -- */
/* Cards take the base radius, not one each. */
.vt-card,.vt-feature,.vt-pagehead,.vt-pot,.new-window,.hub-group,
.dz-win-card,.dz-reward--card,.guide-card,.slot-tile,.compare-wrap,
.author-card,.work-card,.casino-tile{
  border-radius:var(--vt-r-md);
}

/* --------------------------------------------------------- accent edge -- */
/* A gold fill has almost no boundary against a light page: #FFB822 reaches
   1.4:1 against the canvas and 1.7:1 against a white card, well under the 3:1
   a control's edge is supposed to hold. Darkening the page helps it sit but
   cannot close that gap, so in the light theme a filled control carries its own
   darker gold edge. In the dark theme the fill is already 10:1 against the
   canvas and the token is transparent, so the same 1px border costs nothing and
   the two themes stay on the same metrics. */
.vt-btn--primary,
.vt-chip.is-active,
.bonus-filters--button[aria-pressed="true"],
.toplist-sort--button[aria-pressed="true"],
.slots--sort-button[aria-pressed="true"],
.dz-tab[aria-selected="true"],
.button:not(.hollow):not(.secondary){border:0.0625rem solid var(--vt-accent-edge)}

/* Dark ink on a saturated gold measures well and still reads soft: the fill is
   bright enough that thin strokes bloom into it. The label goes up a weight on
   anything gold-filled, which is where the label has to win. */
.vt-btn--primary,
.vt-top--cta,
.button:not(.hollow):not(.secondary),
.bonus-filters--button[aria-pressed="true"],
.toplist-sort--button[aria-pressed="true"]{font-weight:800;letter-spacing:.005em}

/* ------------------------------------------------------------ flat fill -- */
/* Decoration, removed. Each of these was a gradient standing in for a
   decision: a wash to make a flat surface look considered, a sheen on a
   placeholder, a two-colour sweep on a progress bar. The scrims over
   photographs are not here, because those are doing real work. */
.vt-brand--mark{background:var(--vt-accent)}
.dz-progress--fill,
.game-community--bar span{background:var(--vt-accent)}
.vt-card--art,
.vt-poster--art,
.vt-list--art,
.vt-hero--pick-art{
  background:color-mix(in srgb,var(--tint,var(--vt-accent)) 26%,var(--vt-raised));
  background-image:none;
}
.dz-explain,
.hero--featured{background-image:none}
/* The card art strip carried a sheen over the operator's colour. The colour
   is the identity; the sheen was there to make it look finished. */
.vt-card--strip{
  background:color-mix(in srgb,var(--tint,var(--vt-accent)) 88%,#000 12%);
  background-image:none;
}

/* ------------------------------------------------- the rest of the pills -- */
/* Everything a sweep still found round. Kept round: an avatar, a play
   control, a progress track, a status dot. Everything else is a label or a
   link and takes the badge radius. */
.casino-tile--rank,
.compare--rank,
.payment-row--more,
.rail-card--flag,
.vt-loss-amount,
.hub-group--links a,
.dz-submissions--status,
.review-form--reward,
.dz-dashnav--role,
.dz-live-bar--item,
.casino-review--flag,
.dz-streamer-hero--persona,
.review-card--verified,
.slots--filters-reset,
.filters--clear{border-radius:var(--vt-r-xs)}

/* Round survives where the shape is the meaning: an avatar, a play control,
   a progress track, a status dot, and an icon standing in for a picture. */
.vt-poster--play,.dz-rank--dot,.rating-bar--track,.dz-progress,
.vt-account img,.vt-byline img,.vt-winner img,.review-card--avatar,
.content--highlight-icon,.vt-list--art-round{border-radius:62.4375rem}

/* A rank number reads better in a square than in a circle, and it lines up
   with the row it belongs to. */
.casino-tile--rank,.compare--rank{
  display:inline-grid;place-items:center;min-width:1.625rem;height:1.625rem;
  font-weight:600;font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- focus --- */
/* One ring, one offset, on everything. */
.vt-btn:focus-visible,
.button:focus-visible,
.vt-chip:focus-visible,
.toplist-sort--button:focus-visible,
.vt-theme--btn:focus-visible,
.lang-switch--item:focus-visible,
.dz-tab:focus-visible,
.bonus-filters--button:focus-visible,
.casino-tile--review-link:focus-visible{
  outline:none;box-shadow:var(--vt-ring);
}

/* ------------------------------------------------------- giveaway rail -- */
/* The block that takes up the slack. The nav and the "More" list are fixed
   height; this one is told to fill what is left, and the card's artwork
   absorbs the variation so a 900px window and a 1400px one both end with the
   theme switch on the bottom edge and nothing scrolling. */
/* Only the permanent column stretches this block. In the drawer it is an
   ordinary card in a scrolling list, and stretching it there is what put the
   "More" menu on top of it. */
@media (min-width:901px){
  .vt-side--block-flex{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    /* The rail carries a minimum height, and a flex item is free to be sized
       under its content: when the column ran short the card kept its 9rem and
       painted straight over the "More" list below it. Clipping here means the
       worst case is a cropped card rather than two blocks on top of each
       other, and the height rule below takes the card away before that. */
    overflow:hidden;
  }
  .vt-side--block-flex .vt-give-rail{flex:1 1 auto;min-height:9rem}
}
.vt-give{display:flex;min-height:0}
.vt-give--link{flex:1 1 auto;min-height:0}
.vt-give--media{flex:1 1 auto;min-height:0}
.vt-give--body{flex:0 0 auto}
/* A card needs enough room to be worth looking at. Below this the rail steps
   aside rather than collapsing to a sliver, and the navigation keeps the
   space it was always going to need. Ten destinations, three labels, the
   "More" list and the switches come to roughly 680px on their own, so the
   card only earns its place on a viewport tall enough to hold both. */
@media (min-width:901px) and (max-height:900px){
  .vt-side--block-flex{display:none}
}
/* The full-screen menu does not carry the giveaway rail. It is a navigation
   menu at that size, and eleven destinations plus a promo card plus two
   switches do not fit one phone screen, which was the point of making it
   full-screen. Giveaways are a destination in the grid, one tap away. */
@media (max-width:900px){
  .vt-side--block-flex{display:none}
}


/* One card at a time in a 266px column, the rest a swipe away. An overflow
   container with scroll-snap, so it works with JavaScript off and with a
   keyboard: the rail itself is focusable and arrow keys scroll it. */
.vt-give-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:var(--vt-s-2);margin:0;padding:0 0 var(--vt-s-2);list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.vt-give-rail:focus-visible{outline:none;box-shadow:var(--vt-ring);border-radius:var(--vt-r-sm)}
.vt-give{scroll-snap-align:start;min-width:0}
.vt-give--link{
  display:flex;flex-direction:column;gap:var(--vt-s-2);
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-sm);
  background:var(--vt-raised);overflow:hidden;text-decoration:none;
  transition:border-color .16s ease,background .16s ease;
}
.vt-give--link:hover{border-color:var(--vt-line-strong);background:var(--vt-hover)}

.vt-give--media{
  position:relative;display:block;aspect-ratio:16/10;
  background:var(--vt-hover);overflow:hidden;
}
.vt-give--media img{width:100%;height:100%;object-fit:cover;display:block}
/* A giveaway with no artwork keeps the badge and drops the empty frame: 150px
   of nothing is a lot to spend in a 266px column. */
.vt-give--media:not(:has(img)){aspect-ratio:auto;padding:var(--vt-s-2);background:transparent}
.vt-give--media:not(:has(img)) .vt-give--state{position:static;display:inline-block}
/* The state is the reason to look: open takes the live colour, closed goes
   quiet rather than disappearing, because a finished draw still says the
   giveaways are real. */
.vt-give--state{
  position:absolute;top:var(--vt-s-2);left:var(--vt-s-2);
  padding:0.125rem 0.4375rem;border-radius:var(--vt-r-xs);
  background:rgba(12,6,22,.86);color:var(--vt-on-plate-dim);
  font-size:0.625rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.vt-give--state.is-open{background:#0E7A41;color:#fff}

.vt-give--body{display:flex;flex-direction:column;gap:0.125rem;padding:0 var(--vt-s-3) var(--vt-s-3)}
.vt-give--name{
  font-size:0.8125rem;font-weight:600;line-height:1.3;color:var(--vt-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vt-give--prize{font-size:0.78125rem;font-weight:700;color:var(--vt-link);font-variant-numeric:tabular-nums}
.vt-give--how{font-size:0.71875rem;color:var(--vt-text-faint)}

/* --------------------------------------------------------- filter modal -- */
/* The casino list's filters, moved out of a sidebar and into a dialog. The
   list gets the full width back; the filters are one button away and the ones
   that are on stay visible as chips under the toolbar. The casino archive
   and the games hub both use it; the games hub submits the dialog as a form,
   because its filters run in the query. */
.casinos-archive--modal .slots--toolbar,
.slots-archive--modal .slots--toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--vt-s-3);margin-bottom:var(--vt-s-4);
}
.vt-listbar--start{display:flex;align-items:center;gap:var(--vt-s-4);min-width:0}
.vt-filter-open{gap:var(--vt-s-2)}
.vt-filter-open--count{
  display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 0.375rem;
  border-radius:62.4375rem;background:var(--vt-accent);color:var(--vt-accent-ink);
  font-size:0.71875rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.vt-filter-open--count[hidden]{display:none}

/* Active filters, outside the modal. The row takes itself away when there is
   nothing in it, so an unfiltered list has no empty strip above it. */
.vt-filter-active{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vt-s-2);margin:0 0 var(--vt-s-5)}
.vt-filter-active:has([data-slot-selected][hidden]){display:none}
.vt-filter-active .slots--filters-selected{margin:0}
.vt-filter-active .slots--chip{min-height:1.875rem;padding:0 0.625rem;color:var(--vt-text);font-weight:600}
.vt-filter-active .slots--chip::after{content:"\00d7";margin-left:0.375rem;font-size:0.875rem;font-weight:700;opacity:.6}
.vt-filter-active .slots--chip:hover::after{opacity:1}
.vt-filter-active--clear{
  background:none;border:0;padding:0.25rem 0.375rem;cursor:pointer;
  font:inherit;font-size:0.8125rem;font-weight:700;color:var(--vt-link);
}
.vt-filter-active--clear:hover{text-decoration:underline;text-underline-offset:0.125rem}

/* Full width now, so the grid fits as many columns as the width allows
   instead of the three the sidebar left room for. The minimum is the site's
   own card minimum, in px on purpose: a wider screen should fit another card,
   not inflate the ones it already has. That is four across at 1400px. */
.casinos-archive--modal .casinos-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-min)),1fr));
}
/* Six across at most, as on every other card grid: past that width the cards
   grow rather than a seventh and an eighth column appearing. */
@media (min-width:1200px){
  .casinos-archive--modal .casinos-grid{
    grid-template-columns:repeat(auto-fill,minmax(max(var(--card-min),calc(100% / 6 - 1.5rem)),1fr));
  }
}

/* ------------------------------------------------------- games, covers -- */
/* The games hub lost its sidebar to the same filter dialog as /casinos/, so
   the grid has the full width. A cover is a thumbnail to recognise a game by,
   not a poster: the columns are sized from a cover width, so a wider screen
   fits more of them rather than four covers half a metre tall. */
.slots-archive--modal .slots--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){
  .slots-archive--modal .slots--grid{grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr))}
}
@media (min-width:1024px){
  .slots-archive--modal .slots--grid{grid-template-columns:repeat(auto-fill,minmax(10.75rem,1fr))}
}
.slots-archive--modal .slots--pagination{margin-top:var(--vt-s-6)}

/* The page behind stays put while the dialog is open. The gutter is kept so
   the list does not jump sideways when its scrollbar goes. */
html:has(.vt-filter-modal[open]){overflow:hidden;scrollbar-gutter:stable}

.vt-filter-modal{
  padding:0;border:0;margin:auto;background:transparent;color:var(--vt-text);
  width:min(58rem,calc(100vw - 2rem));max-width:none;max-height:none;overflow:visible;
}
.vt-filter-modal::backdrop{background:rgba(8,8,10,.62)}
/* The dialog is only a positioning box; the panel inside it is the surface.
   That split is what makes "click outside to close" reliable: a click whose
   target is the dialog element itself can only have landed on the backdrop. */
.vt-filter-modal--panel{
  display:flex;flex-direction:column;
  max-height:min(46rem,calc(100dvh - 3rem));
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line-strong);
  border-radius:var(--vt-r-lg);box-shadow:var(--vt-shadow-pop);overflow:hidden;
}
.vt-filter-modal--head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--vt-s-3);
  padding:var(--vt-s-4) var(--vt-s-5);border-bottom:0.0625rem solid var(--vt-line);
}
.vt-filter-modal--title{margin:0;font-size:1.125rem;font-weight:800;letter-spacing:-.01em;color:var(--vt-text)}
/* The groups sit side by side, so on a desktop every option is in view at
   once and nothing hides behind a second scroll area inside the first. */
.vt-filter-modal--body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--vt-s-5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:var(--vt-s-6) var(--vt-s-8);align-items:start;
}
.vt-filter-modal .slots--filter-group{border:0;margin:0;padding:0}
.vt-filter-modal .slots--filter-items{max-height:none;overflow:visible}
.vt-filter-modal .slots--filter-item{padding:0.375rem 0}
.vt-filter-modal .slots--filter-item input:focus-visible + .toplist-filters--box{box-shadow:var(--vt-ring)}
.vt-filter-modal--foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--vt-s-3);
  padding:var(--vt-s-4) var(--vt-s-5);border-top:0.0625rem solid var(--vt-line);
}
.vt-filter-modal--foot .vt-btn--primary{min-width:12rem}

/* A checked box is a gold fill, so its tick takes the gold's own ink. It was
   white, which on the dark theme's lifted gold vanished entirely. */
.slots--filter-item input:checked + .toplist-filters--box{
  background:var(--vt-accent);border-color:var(--vt-accent);
}
.slots--filter-item input:checked + .toplist-filters--box svg{color:var(--vt-accent-ink)}

@media (prefers-reduced-motion:no-preference){
  .vt-filter-modal[open] .vt-filter-modal--panel{animation:vt-modal-in .18s var(--ease,ease) both}
  .vt-filter-modal[open]::backdrop{animation:vt-modal-fade .18s ease both}
}
@keyframes vt-modal-in{from{opacity:0;transform:translateY(0.5rem) scale(.985)}to{opacity:1;transform:none}}
@keyframes vt-modal-fade{from{opacity:0}to{opacity:1}}

/* A phone gets a full-screen sheet: a centred box with a margin round it is
   wasted space at 390px, and the footer buttons split the width. */
@media (max-width:640px){
  .vt-filter-modal{width:100vw;height:100dvh;margin:0}
  .vt-filter-modal--panel{max-height:none;height:100dvh;border:0;border-radius:0}
  .vt-filter-modal--body{grid-template-columns:1fr}
  .vt-filter-modal--foot .vt-btn{flex:1 1 0;min-width:0}
  .casinos-archive--modal .slots--toolbar{display:flex;flex-wrap:wrap}
  .casinos-archive--modal .slots--sort{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vt-s-2);width:100%}
}

/* ------------------------------------------------------------ hero meta -- */
/* The row between a hero's headline and its standfirst: the date the page
   last changed and the person who stands behind it, with the club's channels
   on the front page. It carries its own space above and below, which is the
   gap that was missing between "Last updated" and the intro. */
.hero--meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--vt-s-3) var(--vt-s-6);
  margin:var(--vt-s-3) 0 var(--vt-s-4);
}
.hero--meta .hero--updated{
  display:inline-flex;align-items:center;gap:0.375rem;margin:0;max-width:none;
  font-size:0.8125rem;line-height:1.3;color:var(--vt-on-plate-dim);
}
.hero--meta .hero--updated svg{flex:0 0 auto;opacity:.85}
.hero--author{
  position:relative;display:inline-flex;align-items:center;gap:0.625rem;min-width:0;
  color:var(--vt-on-plate);text-decoration:none;
}
.hero .hero--author,.review-hero .hero--author,.vt-hero .hero--author{text-decoration:none}
.hero--author:hover .hero--author-name strong{text-decoration:underline;text-underline-offset:0.125rem}
/* A hairline between the date and the person, only when both are present. */
.hero--updated + .hero--author::before{
  content:"";position:absolute;left:calc(var(--vt-s-6) / -2);top:50%;
  width:0.0625rem;height:1.5rem;transform:translateY(-50%);background:rgba(255,255,255,.22);
}
.hero--author-avatar{
  display:grid;place-items:center;flex:0 0 auto;width:2.125rem;height:2.125rem;
  border-radius:50%;overflow:hidden;background:rgba(255,255,255,.14);
  box-shadow:0 0 0 0.125rem rgba(255,255,255,.22);
  color:#fff;font-size:0.875rem;font-weight:800;
}
.hero--author-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero--author-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hero--author-name{font-size:0.8125rem;color:var(--vt-on-plate-dim)}
.hero--author-name strong{font-weight:700;color:var(--vt-on-plate)}
.hero--author-role{font-size:0.71875rem;color:rgba(255,255,255,.64)}
.hero--social{display:flex;flex-wrap:wrap;gap:0.375rem;list-style:none;margin:0;padding:0}
.hero--social-link{
  display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:var(--vt-r-sm);
  background:rgba(255,255,255,.1);color:#fff;
  box-shadow:inset 0 0 0 0.0625rem rgba(255,255,255,.16);
  transition:background .14s ease;
}
.hero--social-link:hover{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:640px){
  .hero--meta{gap:var(--vt-s-2) var(--vt-s-4)}
  /* Wrapped onto its own line the hairline would hang off the left edge. */
  .hero--updated + .hero--author::before{display:none}
}

/* ---------------------------------------------------------- hero banner -- */
/* Every page that introduces a section gets the same banner: one height per
   breakpoint, the copy on the left, two pictures behind it.

   The plate is the scene with the man taken out. It covers the box like any
   background and can be cropped freely, because it is only scenery. The
   figure is the man alone, sized from the banner's height so he is shown
   whole at any width: at the right edge on a desktop, looking left across
   the scene toward the copy; 72% across on a phone, beside a narrower column.

   Over the text side sits a scrim whose strength is solved per picture
   (--scrim-a-*, _hero-art.css): as light as that picture allows while the
   dimmest ink still clears 4.5:1, so the scene bleeds through as far as the
   copy can afford. The shield covers the copy only where he reaches into it. */
body.archive .hero,
body.page-template-page-leaderboard .hero,
body.page-template-page-profile .hero,body.page-template-page-about .hero,body.single-dz_bigwin .hero,body.single-igp_guide .hero,body.single-igp_news .hero{
  --hero-h:22.5rem;
  --hero-text:48%;
  --fig-hf:.94;
  --scrim-a:var(--scrim-a-d,.86);
  --hero-shield:var(--hero-shield-d,0);
  --fig-pos:calc(96% - .04 * var(--fig-hf) * var(--fig-aspect,.85) * var(--hero-h)) 100%;
  min-height:var(--hero-h);
  justify-content:center;
}
body.archive .hero > .grid-container > *,
body.page-template-page-leaderboard .hero > .grid-container > *,
body.page-template-page-profile .hero > .grid-container > *,body.page-template-page-about .hero > .grid-container > *,body.single-dz_bigwin .hero > .grid-container > *,body.single-igp_guide .hero > .grid-container > *,body.single-igp_news .hero > .grid-container > *,
body.archive .hero > :not(.grid-container){
  max-width:var(--hero-text);
}
body.archive .hero::before,
body.page-template-page-leaderboard .hero::before,
body.page-template-page-profile .hero::before,body.page-template-page-about .hero::before,body.single-dz_bigwin .hero::before,body.single-igp_guide .hero::before,body.single-igp_news .hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;transform:none;
  background-image:
    linear-gradient(90deg,rgba(var(--vt-scrim),calc(var(--hero-shield) * var(--scrim-boost))) 0,rgba(var(--vt-scrim),calc(var(--hero-shield) * var(--scrim-boost))) var(--hero-text),rgba(var(--vt-scrim),0) calc(var(--hero-text) + 8%)),
    var(--hero-figure,none),
    linear-gradient(90deg,
      rgba(var(--vt-scrim),calc(var(--scrim-a) * var(--scrim-boost))) 0%,
      rgba(var(--vt-scrim),calc((var(--scrim-a) - .06) * var(--scrim-boost))) var(--hero-text),
      rgba(var(--vt-scrim),calc(.24 * var(--scrim-boost))) calc(var(--hero-text) + 16%),
      rgba(var(--vt-scrim),calc(.12 * var(--scrim-boost))) 100%),
    linear-gradient(0deg,rgba(var(--vt-scrim),calc(.40 * var(--scrim-boost))) 0%,rgba(var(--vt-scrim),0) 45%),
    var(--hero-plate,var(--hero-art,none)),
    var(--vt-plate-grad);
  background-repeat:no-repeat;
  background-size:100% 100%,auto calc(var(--fig-hf) * 100%),100% 100%,100% 100%,cover,cover;
  background-position:0 0,var(--fig-pos),0 0,0 0,50% 45%,center;
}
body.archive .hero::after,
body.page-template-page-leaderboard .hero::after,
body.page-template-page-profile .hero::after,body.page-template-page-about .hero::after,body.single-dz_bigwin .hero::after,body.single-igp_guide .hero::after,body.single-igp_news .hero::after{content:none}
@media (min-width:901px) and (max-width:1199px){
  body.archive .hero,
  body.page-template-page-leaderboard .hero,
  body.page-template-page-profile .hero,body.page-template-page-about .hero,body.single-dz_bigwin .hero,body.single-igp_guide .hero,body.single-igp_news .hero{
    --hero-h:25rem;--hero-text:56%;--fig-hf:.86;
    --scrim-a:var(--scrim-a-t,.86);--hero-shield:var(--hero-shield-t,0);
  }
}
@media (max-width:900px){
  body.archive .hero,
  body.page-template-page-leaderboard .hero,
  body.page-template-page-profile .hero,body.page-template-page-about .hero,body.single-dz_bigwin .hero,body.single-igp_guide .hero,body.single-igp_news .hero{
    --hero-h:35rem;--hero-text:60%;--fig-hf:.72;
    --scrim-a:var(--scrim-a-m,.88);--hero-shield:var(--hero-shield-m,0);
    --fig-pos:calc(72% + (.72 - var(--fig-fx,.4)) * var(--fig-hf) * var(--fig-aspect,.85) * var(--hero-h)) 100%;
    padding:var(--vt-s-5);
  }
  body.archive .hero .hero--intro,
  body.page-template-page-leaderboard .hero .hero--intro,
  body.page-template-page-profile .hero .hero--intro,body.page-template-page-about .hero .hero--intro,body.single-dz_bigwin .hero .hero--intro,body.single-igp_guide .hero .hero--intro,body.single-igp_news .hero .hero--intro{font-size:0.875rem;line-height:1.55}
}

/* ------------------------------------------------------ retired habitat -- */
/* The zoo-era habitat plates painted a navy scrim over every .section--bg-dark
   band, on a pseudo-element stacked above the band's own content (z-index 1).
   The plate image was switched off long ago; its scrim was not. That is what
   turned the ranks and store bands on the profile navy, cards included. */
.section--bg-dark::after{content:none;display:none}

/* -------------------------------------------------------------- profile -- */
/* The dashboard's section tabs sit on the page under the hero, so they follow
   the theme like the sidebar does, and say "current" the way the sidebar
   does: a gold wash with a gold hairline, not a white pill on a navy bar. The
   a-qualified selectors are there to outrank _base.css's
   `.section--bg-dark a:not(.button)`, which would otherwise own the colour. */
.dz-dashnav{background:transparent;border-bottom:0.0625rem solid var(--vt-line)}
.dz-dashnav .dz-dashnav--role{background:var(--vt-hover);color:var(--vt-text-dim)}
.dz-dashnav a.dz-dashnav--link{border-radius:var(--vt-r-sm);color:var(--vt-text-dim)}
.dz-dashnav a.dz-dashnav--link:hover{background:var(--vt-hover);color:var(--vt-text)}
.dz-dashnav a.dz-dashnav--link.is-current{
  background:var(--vt-accent-wash);color:var(--vt-text);
  box-shadow:inset 0 0 0 0.0625rem var(--vt-accent-line);
}

/* The rank ladder was drawn for a navy band, in white, and only read because
   that band's scrim sat behind it. As ordinary cards it follows the theme; the
   rank colour stays where it is decoration, on the edge and the icon. */
.dz-explain .dz-ranks-rail--step{
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  border-left:0.1875rem solid var(--rank-color,var(--vt-accent));
}
.dz-explain .dz-ranks-rail--name{color:var(--vt-text)}
.dz-explain .dz-ranks-rail--min{color:var(--vt-text-faint)}
.dz-explain .dz-ranks-rail--blurb{color:var(--vt-text-dim)}

/* The rank name in the header takes the rank's own colour, darkened toward
   the ink by the theme's --vt-rank-mix: untouched on the dark theme, half way
   on the light one, where raw bronze reached 2.4:1. */
.vt-account--rank{color:color-mix(in srgb,var(--rank,var(--vt-text-faint)) var(--vt-rank-mix),var(--vt-text))}

/* Submission status, from the theme's own marks at text strength. "Pending"
   was #7A5E00 on a yellow wash, drawn for a white panel and close to
   invisible on a dark one. */
.dz-submissions--status.is-publish{background:color-mix(in srgb,var(--vt-live) 16%,transparent);color:var(--vt-live-ink)}
.dz-submissions--status.is-pending,
.dz-submissions--status.is-draft{background:color-mix(in srgb,var(--vt-warn) 18%,transparent);color:var(--vt-warn-ink)}
/* The team byline wears the brand mark: gold, like the one action on a page,
   because it is the brand speaking rather than a person. */
.hero--author.is-team .hero--author-avatar{background:var(--vt-accent);color:var(--vt-accent-ink);box-shadow:none}

/* ------------------------------------------------ under-hero lead blocks -- */
/* A term page adds a count under its intro; it rides in the intro's own rhythm
   rather than opening a new block, so the banner keeps its one height. */
.hero .hero--intro + .hero--term-count{margin:var(--vt-s-2) 0 0;font-size:0.78125rem;line-height:1.3}
/* A payment method's logo rides on that line as a chip, not beside the intro. */
.hero--term-count:has(.hero--term-logo){display:flex;align-items:center;gap:0.5rem}
.hero--term-logo{display:inline-flex;align-items:center;flex:0 0 auto;height:1.375rem;padding:0.125rem 0.375rem;background:#fff;border-radius:0.375rem;line-height:0}
.hero--term-logo img{height:1.125rem;width:auto;max-width:3.75rem;object-fit:contain}
/* A term heading built from a long official name steps down a size rather
   than pushing its banner taller; igp_the_heading_class() marks it. */
.hero h1.is-long{font-size:clamp(1.3125rem,2.2vw,1.6875rem);letter-spacing:-.015em}
@media screen and (max-width:640px){ .hero h1.is-long{font-size:1.1875rem} }
/* On the narrowest phones the copy column is about 175px, where a heading at
   23px sets a word or two per line; one step down keeps a long term heading
   inside the banner's height without shrinking the short ones much. */
@media screen and (max-width:380px){
  .hero h1{font-size:1.3125rem}
  .hero h1.is-long{font-size:1.0625rem}
}
/* In a banner the trail keeps to one line. The current crumb gives way with an
   ellipsis, and its full name is the heading directly under it. */
.hero .breadcrumbs{display:flex;align-items:baseline;white-space:nowrap;overflow:hidden}
.hero .breadcrumbs > *{flex:0 0 auto}
.hero .breadcrumbs > [aria-current]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* The same rule for everything else that used to ride in a banner: calls to
   action, a signed-in balance, a flash notice, the points on offer, a studio's
   figures. The banner holds the page's name and standfirst, nothing else. */
.vt-hero-after{margin:0 0 var(--vt-s-8)}
.vt-hero-after > :first-child{margin-top:0}
.vt-hero-after .dz-flash{margin-top:var(--vt-s-3);color:var(--vt-text)}
.vt-hero-after .dz-balance{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);color:var(--vt-text)}
.vt-hero-after .dz-balance--points strong{color:var(--vt-link)}
.vt-hero-after .dz-balance--points span{color:var(--vt-text-dim);opacity:1}
.vt-hero-after .dz-gate--earn{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:var(--vt-s-3) var(--vt-s-6);margin:0;align-items:start;
}
.vt-hero-after .dz-gate--earn li{justify-content:flex-start;text-align:left}
.vt-hero-after .dz-gate--earn strong{color:var(--vt-link)}
.vt-hero-after .dz-gate--earn span{color:var(--vt-text-dim)}
.provider-lead{display:flex;flex-wrap:wrap;align-items:stretch;gap:0.625rem}
.provider-lead .provider-hero--logo{display:flex;align-items:center;height:auto}
.provider-lead .provider-stats{flex:1 1 30rem;margin:0}
.provider-lead .provider-stats--item{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md)}
.provider-lead .provider-stats dt{color:var(--vt-text-faint)}
.provider-lead .provider-stats dd{color:var(--vt-text)}
.provider-lead .provider-stats dd a{color:var(--vt-link)}
/* Five channels have to fit one row of a phone banner's narrower column. */
@media (max-width:640px){
  .hero--social{gap:0.3125rem}
  .hero--social-link{width:2rem;height:2rem}
}

/* ------------------------------------------------- slot list sort, phone -- */
/* The phone toolbar is a grid with the sort in an auto column, and that column
   cannot shrink below the unwrapped button row: the Finnish labels are wider
   than the English and pushed the page 11px past a 360px screen. The sort
   takes its own row instead and its buttons scroll sideways when they must. */
@media screen and (max-width:47.99em){
  .slots--toolbar > .slots--sort{grid-column:1/-1;min-width:0}
  .slots--sort-buttons{min-width:0}
}

/* ------------------------------------------------------- about & videos -- */
/* Andy Pyro's page: the banner beside the clip that started it, a band with
   the story, the follow links and the Twitch player, the wall of YouTube
   videos, then Shorts, Instagram and the TikTok finder. Players are facades
   until pressed (assets/js/app.js). */
.about-hero-row > .hero{margin:0}
.about-hero-row.is-solo{grid-template-columns:minmax(0,1fr)}
.about-hero-row .hero--meta{gap:0.375rem 1rem}
.about-hero-row .hero--updated + .hero--author::before{display:none}
.about-clip-card--player .vt-player{border-radius:0}
.about-clip-card--caption{display:grid;gap:0.1875rem;flex:1 1 auto;align-content:center;padding:0.875rem 1.25rem 1.125rem}
.about-clip-card--caption .vt-pot--label{margin:0 0 0.125rem}
.about-clip-card--title{font-size:0.9375rem;font-weight:800;line-height:1.35;color:var(--vt-text)}
.about-clip-card--author{font-size:0.8125rem;color:var(--vt-text-faint)}
.vt-about--band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--vt-s-8);align-items:center}
.vt-about--band-grid.is-solo{grid-template-columns:minmax(0,1fr)}
.vt-about--follow{margin:var(--vt-s-5) 0 0;font-size:0.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--vt-text-faint)}
.vt-about--follow + .vt-about--channels{margin-top:0.5rem}
.vt-about--twitch{margin:0}
.vt-about--twitch figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.25rem 0.75rem;margin-top:0.625rem;font-size:0.8125rem;color:var(--vt-text-faint)}
.vt-about--twitch figcaption strong{color:var(--vt-text);font-weight:700}
.vt-about--twitch figcaption a{font-weight:700;color:var(--vt-link)}
/* Twitch shows no picture before play: no request leaves for Twitch until
   the reader asks, so the facade is drawn in its colours instead. */
.vt-player.is-twitch{
  display:grid;place-items:center;align-content:center;gap:0.75rem;
  background:radial-gradient(120% 90% at 50% 0%,#3b2270 0%,#1a1326 72%);box-shadow:inset 0 0 0 0.0625rem rgba(255,255,255,.08);
}
.vt-player.is-twitch .vt-player--btn{position:static;transform:none;width:4rem;height:4rem;background:#9146FF;box-shadow:0 0.75rem 1.875rem -0.625rem rgba(145,70,255,.75)}
.vt-player.is-twitch .vt-player--btn svg{margin:0}
.vt-player.is-twitch .vt-player--label{font-weight:600;color:rgba(255,255,255,.72)}
.vt-player.is-twitch .vt-player--label strong{display:block;font-size:1rem;font-weight:800;color:#fff}
.vt-about--wall-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 1rem;margin-bottom:var(--vt-s-5)}
.vt-about--wall-head .section--title{margin:0}
.vt-about--wall-head .vt-btn{gap:0.5rem}
.vt-about--wall-empty{margin:0;padding:1rem 1.125rem;border:0.0625rem dashed var(--vt-line-strong);border-radius:var(--vt-r-lg);color:var(--vt-text-dim)}
.vt-about--wall-empty a{font-weight:700;color:var(--vt-link)}
.vt-about--bio-text{color:var(--vt-text-dim);font-size:1rem;line-height:1.65;max-width:62ch}
.vt-about--bio-text p{margin:0 0 var(--vt-s-4)}
.vt-about--bio-text em{font-style:normal;font-weight:700;color:var(--vt-text)}
.vt-about--channels{list-style:none;margin:var(--vt-s-5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.vt-about--channel{
  display:inline-flex;align-items:center;gap:0.5rem;min-height:2.75rem;padding:0 0.875rem;
  border-radius:var(--vt-r-sm);background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  color:var(--vt-text);font-size:0.875rem;font-weight:700;text-decoration:none;
}
.vt-about--channel:hover{border-color:var(--vt-accent-line)}
.vt-about--note{margin:var(--vt-s-5) 0 0;font-size:0.78125rem;color:var(--vt-text-faint)}

.vt-player{
  position:relative;display:block;width:100%;margin:0;padding:0;border:0;overflow:hidden;
  aspect-ratio:16/9;border-radius:var(--vt-r-md);background:rgb(var(--vt-scrim));color:#fff;cursor:pointer;
}
.vt-player.is-tall,.vt-player.is-clip{aspect-ratio:9/16}
.vt-player.is-post{aspect-ratio:4/5}
.vt-player.is-post,.vt-player.is-clip{
  display:grid;place-items:center;align-content:center;gap:0.625rem;
  background:linear-gradient(160deg,#23242a 0%,#141518 100%);box-shadow:inset 0 0 0 0.0625rem rgba(255,255,255,.08);
}
.vt-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vt-player:hover img{transform:scale(1.03)}
.vt-player--btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:3.875rem;height:3.875rem;border-radius:50%;
  background:rgba(var(--vt-scrim),.74);box-shadow:inset 0 0 0 0.125rem rgba(255,255,255,.86);
}
.vt-player--btn svg{margin-left:0.1875rem;fill:#fff}
.vt-player.is-clip .vt-player--btn{position:static;transform:none;width:3rem;height:3rem}
.vt-player--label{padding:0 0.75rem;font-size:0.8125rem;font-weight:700;line-height:1.35;text-align:center;color:rgba(255,255,255,.88)}
.vt-player:focus-visible{outline:0.125rem solid var(--vt-accent);outline-offset:0.1875rem}
.vt-player.is-live{cursor:auto;background:#000}
.vt-player.is-live.is-post{aspect-ratio:auto;height:min(42rem,135vw)}
.vt-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vt-about--grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--vt-s-6) var(--vt-s-5)}
.vt-about--video-title{margin:0.625rem 0 0;font-size:0.875rem;font-weight:700;line-height:1.35;color:var(--vt-text)}
.vt-about--shorts{
  list-style:none;margin:0;padding:0 0 0.5rem;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(10rem,12rem);gap:var(--vt-s-4);overflow-x:auto;scroll-snap-type:x mandatory;
}
.vt-about--shorts > li{scroll-snap-align:start}
.vt-about--posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--vt-s-5)}

.vt-finder--form{display:flex;flex-wrap:wrap;gap:0.5rem;max-width:38rem;margin-top:var(--vt-s-4)}
.vt-finder--form input{
  flex:1 1 14rem;min-width:0;min-height:2.75rem;padding:0 0.875rem;border-radius:var(--vt-r-sm);
  border:0.0625rem solid var(--vt-line);background:var(--vt-surface);color:var(--vt-text);font:inherit;font-size:0.9375rem;
}
.vt-finder--form input::placeholder{color:var(--vt-text-faint)}
.vt-finder--form input:focus-visible{outline:0.125rem solid var(--vt-accent);outline-offset:0.0625rem}
.vt-finder--form .vt-btn{min-height:2.75rem;gap:0.5rem}
.vt-finder--chips{list-style:none;margin:var(--vt-s-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem}
.vt-finder--chip{
  min-height:2.75rem;padding:0 0.875rem;border-radius:62.4375rem;border:0.0625rem solid var(--vt-line);
  background:var(--vt-surface);color:var(--vt-text-dim);font:inherit;font-size:0.8125rem;font-weight:700;cursor:pointer;
}
.vt-finder--chip:hover{color:var(--vt-text)}
.vt-finder--chip[aria-pressed="true"]{background:var(--vt-accent-wash);border-color:var(--vt-accent-line);color:var(--vt-text)}
.vt-finder--count{margin:var(--vt-s-6) 0 var(--vt-s-3);font-size:0.8125rem;color:var(--vt-text-faint)}
.vt-finder--results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--vt-s-4)}

@media (max-width:900px){
  .vt-about--band-grid{grid-template-columns:1fr;gap:var(--vt-s-6)}
}

/* ------------------------------------------------ casino logos, one size -- */
/* vt_casino_logo(): the fill-free mark on the operator's colour, sized to one
   area and cropped of its empty margin, so a long wordmark and a stacked mark
   read as the same size. The span carries the size (--w, --h, --iw, --x, --y
   from vt_logo_css); --k scales it. */
.vt-logo-fit{
  --k:1;position:relative;display:block;flex:0 0 auto;overflow:hidden;line-height:0;
  width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));
}
.vt-logo-fit > img,
.casino-tile--logo .vt-logo-fit > img,
.casino-card--logo .vt-logo-fit > img{
  position:absolute;left:calc(var(--x) * var(--k) * -1);top:calc(var(--y) * var(--k) * -1);
  width:calc(var(--iw) * var(--k));height:auto;max-width:none;max-height:none;margin:0;object-fit:initial;
}
.vt-logo-fit:not([style]){width:auto;height:auto;overflow:visible}
.vt-logo-fit:not([style]) > img{position:static;width:auto;max-width:9.375rem;max-height:3.5rem}

/* ------------------------------------------------ toplist tile, in place -- */
/* "Show more" swaps the row's summary for its details inside the card: the
   logo column and both actions stay where they are, and one row is open at a
   time (initTileToggles). */
.casino-tile--content{flex-direction:row;align-items:stretch;gap:1.125rem}
.casino-tile--panes{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.casino-tile--summary{display:flex;flex-direction:column;gap:0.5rem;min-width:0}
.casino-tile--summary[hidden],.casino-tile--details[hidden]{display:none}
.casino-tile--content > .casino-tile--cta{flex:0 0 11.875rem;align-self:center}
.casino-tile--details{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem 1.375rem;
  font-size:0.78125rem;color:var(--vt-text-dim);
}
.casino-tile--details-group strong{display:block;margin:0 0 0.375rem;font-size:0.75rem;color:var(--vt-text)}
.casino-tile--details .payment-row{flex-wrap:wrap;justify-content:flex-start;overflow:visible}
.casino-tile--details .casino-tile--param{padding:0.1875rem 0}
.casino-tile--details .casino-tile--param span:last-child{color:var(--vt-text);font-weight:700;text-align:right}
.casino-tile--showmore-toggle svg{transition:transform .2s ease}
.casino-tile.is-open .casino-tile--showmore-toggle svg{transform:rotate(180deg)}
.payment-row--more{cursor:default}

/* The two reasons to pick this one are marks, not badges: the check in the
   accent the page uses for everything it wants read, rather than a filled
   green disc competing with the offer beside it. */
.casino-tile--pros li::before{
  background:var(--vt-accent);border-radius:0;
  -webkit-mask-size:0.6875rem;mask-size:0.6875rem;
}

/* The licence is a review-page fact. In the strip it was taking the room the
   payment logos needed, and in the details panel a two-authority licence wraps
   to four lines and drags the row taller than the square beside it. The review
   page says who licences an operator, with room to say what that means. */
.casino-tile--features > .cell:has(.licence-link),
.casino-tile--details .casino-tile--param:has(.licence-link){display:none}

/* ----------------------------------------------- toplist row, desktop -- */
@media screen and (min-width:1024px){
  /* The brand panel is square. Its width used to come from whatever the logo
     inside it measured, which is why one row's colour block was 203px wide and
     the next 92px against the same 253px height. The row now has one height
     (the panes below settle it), so the panel takes that height as its width
     and the plate is square on every row. */
  /* The floor every row is held to, so the rows share a height and their
     squares a size; tall enough for the fullest row the demo carries. */
  .casino-tile{--tile-sq:18.5rem}
  .casino-tile--main{min-height:var(--tile-sq)}
  /* initTileSquares() sets --tile-brand-w from the row's measured height, so
     the panel is square at every width; the rem value is the no-script size. */
  .casino-tile--brand{
    width:var(--tile-brand-w,var(--tile-sq));flex:0 0 var(--tile-brand-w,var(--tile-sq));
    align-self:stretch;aspect-ratio:auto;
  }

  /* Both states, one card. The name and the rating stay put; below them the
     summary and the details sit in the same grid cell instead of replacing
     each other, so the row is as tall as the taller of the two whichever one
     is showing, and opening a row moves nothing below it. The one that is off
     keeps its own display, so it still measures the height it would take. */
  .casino-tile--panes{display:flex;flex-direction:column;gap:0.5rem}
  .casino-tile--head{flex:0 0 auto}
  .casino-tile--swap{display:grid;align-items:start;flex:1 1 auto;min-height:0}
  .casino-tile--details{align-items:start}
  .casino-tile--summary,
  .casino-tile--details{grid-area:1 / 1}
  .casino-tile--summary[hidden]{display:flex!important;visibility:hidden}
  .casino-tile--details[hidden]{display:grid!important;visibility:hidden}
  /* The open state hides the summary's parts one by one (so a phone keeps the
     name and the rating), which would leave the standing summary measuring a
     third of itself and the row shrinking as it opens. Here they stay laid
     out and go invisible instead, with the details sitting over them. */
  .casino-tile--summary [hidden]{display:flex!important;visibility:hidden}

  /* Both reasons on one line, the way the narrower breakpoints already clamp
     them: a row whose two pros wrapped onto a second line was 25px taller than
     the rest, which is one row out of square in a column of nine. Long ones
     end in an ellipsis; the sentence they came from is on the review page. */
  .casino-tile--pros{flex-wrap:nowrap}
  .casino-tile--pros li{
    min-width:0;flex:0 1 auto;
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* The two facts drop their icons here as they do on a phone: a deposit icon
     and a clock say nothing the labels beside them do not, and the 66px they
     were holding is the room the payment logos needed. */
  .casino-tile--features .casino-tile--feature-icon{display:none}
  .casino-tile--features .casino-tile--feature{padding-right:1rem}

  /* The logos sit against the right edge of their own cell and stay in it: a
     method with a word for a logo rather than a mark is twice as wide as the
     rest, and without this it spilled across the withdrawal column. */
  .casino-tile--features .payment-row{
    justify-content:flex-end;flex-wrap:nowrap;overflow:hidden;min-width:0;
  }

  /* The toggle belongs to the column it opens. */
  .casino-tile--showmore-toggle{margin-top:auto}
}

/* Stacked, below the large breakpoint: the row is rebuilt as a card.
   A layout drawn for 1100px does not become a card by stacking, so on a phone
   the tile is the same card the rail's "Added this week" is: an accent band
   naming what is special about it, the mark on its own inset plate, then the
   name, the offer, the two numbers that decide it, how you pay, and the two
   buttons. Both states have to sit inside a phone screen, so everything that
   is a second answer (the highlights, the licence, the tag pills) waits
   behind "Show more" instead of taking room here.

   The blocks live in different wrappers, so the wrappers step aside with
   display:contents and each becomes a row of one column that can be ordered
   against the rest. The padding moves to that column. */
@media screen and (max-width:1023px){
  .casino-tile > .grid-x{display:flex;flex-direction:column}
  .casino-tile--brand{order:1;display:block;padding:0;background:transparent}
  .casino-tile--main{order:2;display:flex;flex-direction:column;gap:0.75rem;padding:1rem}
  .casino-tile--content,
  .casino-tile--panes,
  .casino-tile--head,
  .casino-tile--swap,
  .casino-tile--summary,
  .casino-tile--general{display:contents}
  .casino-tile--content > .casino-tile--cta{flex:0 0 auto;align-self:stretch;min-width:0}

  /* The band: the accent across the top, the pills on it as dark ink so the
     band reads as one label rather than as chips on a colour. */
  /* Width stated outright: the panel rule this replaces centres its children,
     which left the band shrink-wrapped around its own pills. */
  .casino-tile--badges{
    position:static;display:flex;flex-direction:row;flex-wrap:wrap;
    justify-content:center;align-items:center;gap:0.375rem 0.625rem;
    width:100%;box-sizing:border-box;
    padding:0.5625rem 0.75rem;background:var(--vt-accent);color:var(--vt-accent-ink);
  }
  .casino-tile--badge,
  .casino-tile--badge.is-fast,
  .casino-tile--badge.is-exclusive{
    padding:0;background:transparent;color:var(--vt-accent-ink);
    font-size:0.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  }
  .casino-tile--badge span{background:transparent;color:inherit;padding:0;font-size:inherit}
  .casino-tile--badge + .casino-tile--badge::before{content:"";width:0.1875rem;height:0.1875rem;border-radius:50%;background:currentColor;opacity:.5}

  /* The mark sits on a plate inside the card, not edge to edge, on the
     operator's own colour the way every other brand plate does. */
  /* width:auto cancels the row's full-bleed plate, so the margins inset it. */
  .casino-tile--logo{
    display:grid;place-items:center;width:auto;box-sizing:border-box;
    justify-self:stretch;align-self:stretch;min-height:0;height:6.5rem;
    margin:1rem 1rem 0;padding:1rem 1.125rem;border-radius:var(--vt-r-sm);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
      color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
  }
  .casino-tile--logo img{width:auto;max-width:70%;height:3.5rem}

  .casino-tile--name{order:2;margin:0;text-align:center;font-size:1.1875rem}
  .casino-tile--rating{order:3;justify-content:center;margin:0}

  /* The offer reads as the thing on offer, not as a header band. Open the
     details and it steps aside: the limits below repeat it in full. */
  .casino-tile--offer{
    order:4;flex-direction:column;align-items:center;justify-content:center;
    gap:0.1875rem;padding:0.75rem;text-align:center;
    background:var(--vt-raised);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-sm);
  }
  .casino-tile--offer-value{font-size:1.0625rem}
  .casino-tile.is-open .casino-tile--offer{display:none}

  /* The list position is already the order the cards are read in, so on a
     phone the number only sits in front of the offer it labels. */
  .casino-tile--rank{display:none}

  /* Second answers: they live behind "Show more" so the card fits a screen. */
  .casino-tile--pros,
  .casino-tile--tags{display:none}

  /* The two numbers centred on their own axis, label over value, and the
     payment methods centred under them. */
  .casino-tile .casino-tile--features{
    order:6;display:grid;grid-template-columns:1fr 1fr;gap:0.625rem 0.75rem;
    margin:0;padding:0;border-top:0;overflow:visible;text-align:center;
  }
  .casino-tile--features > .cell{margin:0;padding:0;width:auto;max-width:none;flex:none}
  .casino-tile--features > .cell.casino-tile--payrow{grid-column:1 / -1;display:block}
  .casino-tile--feature{flex-direction:column;align-items:center;gap:0.0625rem;padding:0;text-align:center}
  .casino-tile--feature-icon{display:none}
  .casino-tile--feature-info{align-items:center;text-align:center}
  .casino-tile--feature-info span{font-size:0.65625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .casino-tile--features .payment-row{justify-content:center;flex-wrap:wrap;gap:0.375rem}

  /* The details, tight enough that an open card still fits the screen. The
     licence stays off the phone card in this state too, the way it does in
     the strip above: it is on the review page, where there is room to say
     what it means. */
  .casino-tile--details{order:7;grid-template-columns:1fr;gap:0.5rem;font-size:0.75rem}
  .casino-tile--details-group strong{margin-bottom:0.25rem}
  .casino-tile--details .casino-tile--param{padding:0.0625rem 0}
  .casino-tile--details .payment-row{justify-content:center}

  .casino-tile--cta{order:8;align-self:stretch;gap:0.5rem}
  .casino-tile--cta .button{width:100%}
  /* The toggle sits inside the column's padding now: it reaches back out to
     the card's own edges, where it was. */
  .casino-tile--showmore-toggle{order:9;width:auto;margin:0.25rem -1rem -1rem}

}

/* ---------------------------------------------- payment logos, unboxed -- */
/* Every bundled method is drawn on its own 120x80 plate, filled and rounded
   in the file itself, so the chip around it was a second frame. On a phone,
   where the row claims a 44px tap target, that frame stretched to a different
   shape under every logo while the art inside kept its own. The chip keeps
   the tap area and stops drawing; the art is the chip. */
.payment-logo{background:transparent;border:0;border-radius:0;overflow:visible}
/* In a squeezed row the chips used to shrink instead of wrapping, and an
   image capped at 100% of a chip shrunk to nothing is nothing. */
.payment-row > .payment-logo{flex:0 0 auto}
.payment-logo img{border-radius:0.125rem}
a.payment-logo:hover{box-shadow:none}
/* White art on a near-white card still needs an edge. The dark theme's
   surfaces give it one for free. */
:root[data-theme="light"] .payment-logo img{box-shadow:0 0 0 0.0625rem var(--vt-line)}

/* ----------------------------------------------------- grid card, one -- */
/* The grid card is the card the rail's "Added this week" is and the toplist
   row becomes on a phone, at every width: the pills on an accent band across
   the top, the mark on an inset plate in the operator's colour, then the name,
   the offer, the two numbers that decide it, how you pay and the two buttons.
   On desktop the pills used to float over the logo panel, which is the one
   place on the card that already has something to say. */
.casino-card .casino-card--brand{display:block;place-items:stretch;min-height:0;padding:0;background:transparent}
.casino-card--badges{
  position:static;display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:0.375rem 0.625rem;
  width:100%;box-sizing:border-box;
  padding:0.5625rem 0.75rem;background:var(--vt-accent);color:var(--vt-accent-ink);
}
.casino-card--badges .casino-tile--badge,
.casino-card--badges .casino-tile--badge.is-fast,
.casino-card--badges .casino-tile--badge.is-exclusive{
  display:inline-flex;align-items:center;gap:0.375rem;padding:0;border-radius:0;
  background:transparent;color:var(--vt-accent-ink);
  font-size:0.6875rem;font-weight:800;letter-spacing:.06em;line-height:1.5;text-transform:uppercase;
}
.casino-card--badges .casino-tile--badge span{background:transparent;color:inherit;padding:0;font-size:inherit}
.casino-card--badges .casino-tile--badge + .casino-tile--badge::before{content:"";width:0.1875rem;height:0.1875rem;border-radius:50%;background:currentColor;opacity:.5}

.casino-card--logo{
  width:auto;box-sizing:border-box;justify-self:stretch;align-self:stretch;
  min-height:0;height:6.5rem;margin:1rem 1rem 0;padding:1rem 1.125rem;border-radius:var(--vt-r-sm);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
    color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
}
/* The same two numbers on the same two axes as the toplist row, so a reader
   moving between the toplist and the grid reads one card, not two. */
.casinos-grid .casino-card--facts,
.casino-card--facts{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem 0.75rem;width:100%;text-align:center}
.casinos-grid .casino-card--facts div,
.casino-card--facts div{align-items:center;text-align:center}
.casino-card--facts dt{font-size:0.65625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--vt-text-faint)}
.casino-card--facts dd{margin:0.125rem 0 0;font-size:0.84375rem;font-weight:700;color:var(--vt-text)}
.casino-card .payment-row{flex-wrap:wrap;justify-content:center}

/* ------------------------------------------------------- bonus card band -- */
/* The offer's type rides on an accent band above the logo strip, the way the
   casino card carries its pills, instead of a chip laid over the mark. */
.vt-card--band{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.375rem 0.625rem;
  padding:0.5625rem 0.75rem;background:var(--vt-accent);color:var(--vt-accent-ink);
  font-size:0.6875rem;font-weight:800;letter-spacing:.06em;line-height:1.5;text-transform:uppercase;text-align:center;
}
.vt-card--band span + span::before{content:"";display:inline-block;width:0.1875rem;height:0.1875rem;margin:0 0.625rem 0.125rem 0;border-radius:50%;background:currentColor;opacity:.5;vertical-align:middle}

/* ------------------------------------------------ nav, current page, solid -- */
/* The page you are on is marked the way a button is: solid accent, dark ink,
   the same edge the buttons carry in the light theme. It used to be a pale
   wash with a hairline, which read as a hover state rather than a place. The
   phone menu is the same sidebar as a drawer, so this covers both. */
.vt-nav--item.is-current,
.vt-nav--item.is-current:hover{
  background:var(--vt-accent);border-color:var(--vt-accent-edge,var(--vt-accent));
  color:var(--vt-accent-ink);font-weight:700;
}
.vt-nav--item.is-current .vt-nav--icon{color:var(--vt-accent-ink)}
/* No underline in the sidebar: every link there is already a row or a card,
   and the hover background says it is live. */
.vt-side a:hover,.vt-side a:focus{text-decoration:none}

/* ------------------------------------------------ banner on a phone, stacked -- */
/* Below 640px the character no longer shares a narrow card with the copy. The
   picture takes a band across the top with him centred on his face and cut
   about the waist, the band fades to solid dark, and the copy runs the full
   width underneath, where it reads whatever the picture holds. The intro is
   collapsed to three lines behind a toggle rather than hidden, so it stays in
   the page for readers and for search (initHeroIntroClamp). */
@media (max-width:640px){
  body.archive .hero,
  body.page-template-page-leaderboard .hero,
  body.page-template-page-profile .hero,
  body.page-template-page-about .hero,body.single-dz_bigwin .hero,body.single-igp_guide .hero,body.single-igp_news .hero{
    --art-h:17rem;--fig-s:1.9;
    min-height:calc(var(--art-h) + 18.375rem);justify-content:flex-start;
    padding:calc(var(--art-h) - 1.25rem) var(--vt-s-5) var(--vt-s-6);
    background:rgb(var(--vt-scrim));
  }
  body.archive .hero > .grid-container > *,
  body.page-template-page-leaderboard .hero > .grid-container > *,
  body.page-template-page-profile .hero > .grid-container > *,
  body.page-template-page-about .hero > .grid-container > *,body.single-dz_bigwin .hero > .grid-container > *,body.single-igp_guide .hero > .grid-container > *,body.single-igp_news .hero > .grid-container > *,
  body.archive .hero > :not(.grid-container){max-width:none}
  body.archive .hero::before,
  body.page-template-page-leaderboard .hero::before,
  body.page-template-page-profile .hero::before,
  body.page-template-page-about .hero::before,body.single-dz_bigwin .hero::before,body.single-igp_guide .hero::before,body.single-igp_news .hero::before{
    bottom:auto;height:var(--art-h);
    background-image:
      linear-gradient(180deg,rgba(var(--vt-scrim),0) 55%,rgba(var(--vt-scrim),calc(.5 * var(--scrim-boost))) 80%,rgba(var(--vt-scrim),calc(.86 * var(--scrim-boost))) 93%,rgba(var(--vt-scrim),1) 100%),
      var(--hero-figure,none),
      var(--hero-plate,var(--hero-art,none)),
      linear-gradient(150deg,#212226 0%,#141518 62%,#101114 100%);
    background-size:100% 100%,auto calc(var(--fig-s) * var(--art-h)),cover,cover;
    background-position:
      0 0,
      calc(50% + (.5 - var(--fig-fx,.5)) * var(--fig-s) * var(--art-h) * var(--fig-aspect,.6)) .75rem,
      50% 45%,
      center;
  }
  body.archive .hero .hero--intro.is-clamped,
  body.page-template-page-leaderboard .hero .hero--intro.is-clamped,
  body.page-template-page-profile .hero .hero--intro.is-clamped,
  body.page-template-page-about .hero .hero--intro.is-clamped,body.single-dz_bigwin .hero .hero--intro.is-clamped,body.single-igp_guide .hero .hero--intro.is-clamped,body.single-igp_news .hero .hero--intro.is-clamped{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
}
.hero--intro-toggle{
  display:inline-flex;align-items:center;min-height:2.75rem;margin:0.125rem 0 0;padding:0;
  border:0;background:none;font:inherit;font-size:0.84375rem;font-weight:700;cursor:pointer;
  /* The banner is dark in both themes, so the gold itself, not the light
     theme's darkened accent. */
  color:var(--vt-on-plate-link);
}
.hero--intro-toggle[hidden]{display:none}
.hero--intro-toggle:focus-visible{outline:0.125rem solid var(--vt-accent);outline-offset:0.125rem;border-radius:0.25rem}

/* ---- Member profiles (/u/) and the bylines that lead to them ----
   A name in a byline reads as a name, in the colour of the line around it:
   a dozen accent-coloured names down a wall of cards would outshout the
   cards. The underline on hover and focus is what says it goes somewhere. */
.dz-member-link{color:inherit;font-weight:inherit;text-decoration:none}
.dz-member-link:hover,
.dz-member-link:focus-visible{color:inherit;text-decoration:underline;text-decoration-thickness:0.0625rem;text-underline-offset:.2em}

/* The head carries who the member is, so the page needs no sidebar: the bio
   under the name, then the favourite game and the linked accounts as one
   row of chips on the dark plate. */
.dz-profile-head{align-items:flex-start}
.dz-profile-head--bio{max-width:62ch;margin:0.125rem 0 0.875rem;font-size:var(--fs-base);line-height:1.55;color:rgba(255,255,255,.84);white-space:pre-line}
.dz-profile-head--links{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0;padding:0;list-style:none}
.dz-hchip{
  display:inline-flex;align-items:center;gap:0.625rem;min-height:3rem;padding:0.3125rem 0.875rem 0.3125rem 0.375rem;
  border-radius:0.75rem;background:rgba(255,255,255,.07);border:0.0625rem solid rgba(255,255,255,.12);
  color:#fff;text-decoration:none;transition:background .15s ease,border-color .15s ease;
}
a.dz-hchip:hover,
a.dz-hchip:focus-visible{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);color:#fff;text-decoration:none}
.dz-hchip--art{flex:0 0 auto;width:1.875rem;height:2.5rem;border-radius:0.375rem;object-fit:cover}
.dz-hchip--icon{display:grid;place-items:center;flex:0 0 auto;width:2.125rem;height:2.125rem;border-radius:0.5rem;background:rgba(255,255,255,.1);color:#fff}
/* Each platform in its own colour, so Kick, Twitch and Discord are told
   apart before the label is read. */
.dz-hchip--icon.is-kick{background:#53FC18;color:#0B0C0E}
.dz-hchip--icon.is-twitch{background:#9146FF;color:#FFFFFF}
.dz-hchip--icon.is-discord{background:#5865F2;color:#FFFFFF}
.dz-hchip--text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.dz-hchip--text small{font-size:0.6875rem;color:rgba(255,255,255,.72)}
.dz-hchip--text strong{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);font-weight:700}

/* The feed: everything the member has published, as the site's own cards in
   one grid, so three posts make a row rather than three near-empty boxes. */
.dz-feed--owner{
  display:flex;flex-direction:column;gap:0.375rem;margin:0 0 1.375rem;padding:0.875rem 1rem;
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);background:var(--vt-surface);
  font-size:var(--fs-sm);color:var(--vt-text-dim);
}
.dz-feed--owner p{margin:0}
.dz-feed--owner strong{color:var(--vt-text)}
.dz-feed--head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem 1.25rem;margin:0 0 1rem}
.dz-feed--title{margin:0;font-size:var(--fs-3xl)}
.dz-feed--filters{display:flex;flex-wrap:wrap;gap:0.5rem}
/* The shared chip dims its count to .65, under 4.5:1 at this size. */
.dz-feed--filters .vt-chip--count{opacity:1}
.dz-feed--grid{--card-w:250px}
.dz-feed--item{display:flex;min-width:0}
.dz-feed--item > .vt-card{flex:1 1 auto}
.dz-feed--foot{display:flex;justify-content:center;margin-top:1.25rem}
.dz-feed--empty{margin:0;padding:1.375rem;border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);background:var(--vt-surface);color:var(--vt-text-dim)}

/* A casino's mark on its own colour, in the corner of a card's picture. */
.vt-casino-chip{
  position:absolute;left:0.625rem;bottom:0.625rem;z-index:2;display:inline-flex;align-items:center;
  height:1.875rem;padding:0 0.625rem;border-radius:62.4375rem;background:var(--tint,#2A2B31);
  box-shadow:0 0 0 0.0625rem rgba(255,255,255,.16),0 0.25rem 0.75rem -0.25rem rgba(0,0,0,.5);
}
.vt-card:hover .vt-card--media .vt-casino-chip img{transform:none}
.vt-casino-chip .casino-tile--logo-text{font-size:0.6875rem;font-weight:800;line-height:1;color:#fff;white-space:nowrap}

/* No screenshot: the game's poster over a blurred wash of itself, so a
   portrait cover fills a landscape frame without being cut to a strip. */
.vt-media-art{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#101114}
.vt-card--media .vt-media-art--bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(1.125rem) brightness(.55) saturate(1.15)}
.vt-card:hover .vt-card--media .vt-media-art--bg{transform:none}
.vt-card--media .vt-media-art--fg{position:relative;width:auto;height:82%;max-width:62%;object-fit:contain;border-radius:0.5rem;box-shadow:0 0.75rem 1.75rem -0.75rem rgba(0,0,0,.8)}

/* Review: the thing reviewed is the picture, the score sits on it. */
.vt-card--plate{
  display:grid;place-items:center;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
    color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
}
.vt-card--plate .casino-tile--logo-text{color:#fff;font-size:1.125rem;font-weight:800}
.vt-rate{
  position:absolute;right:0.625rem;bottom:0.625rem;z-index:2;display:inline-flex;align-items:center;gap:0.3125rem;
  padding:0.3125rem 0.625rem;border-radius:62.4375rem;background:rgba(var(--vt-scrim),.88);
  color:#fff;font-size:0.875rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.vt-rate svg{fill:var(--vt-accent);color:currentColor}

@media (max-width:640px){
  /* Four counts no longer fit beside the name: they take their own row. */
  .dz-profile-head--stats{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem}
  .dz-profile-head--stats strong{font-size:var(--fs-2xl)}
  .dz-profile-head--stats span{text-align:center}
  .dz-profile-head--bio{font-size:var(--fs-sm)}
  /* One swipeable row of chips rather than two ragged lines. */
  .dz-feed--head{flex-direction:column;align-items:stretch}
  .dz-feed--filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -1rem;padding:0 1rem 0.125rem;scrollbar-width:none}
  .dz-feed--filters::-webkit-scrollbar{display:none}
}

/* Settings: the favourite-game picker. Suggestions drop over the form in
   the page's own surface, each with the game's cover, studio and type. */
.dz-gamepick{position:relative;margin-bottom:0.875rem}
.dz-form .dz-gamepick > label{margin:0}
.dz-gamepick--field{position:relative}
.dz-gamepick.has-thumb [data-game-pick-input]{padding-left:2.75rem}
.dz-gamepick--thumb{position:absolute;left:0.5625rem;top:50%;z-index:1;width:1.5rem;height:2rem;margin-top:-1rem;border-radius:0.25rem;object-fit:cover;pointer-events:none}
.dz-gamepick--list{
  position:absolute;left:0;right:0;top:calc(100% + 0.375rem);z-index:40;
  max-height:min(21.25rem,60vh);overflow:auto;margin:0;padding:0.375rem;list-style:none;
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line-strong);border-radius:var(--vt-r-lg);
  box-shadow:0 1.125rem 2.5rem -1.125rem rgba(0,0,0,.6);
}
.dz-gamepick--list li{display:flex;align-items:center;gap:0.625rem;padding:0.375rem 0.5rem;border-radius:0.5rem;cursor:pointer;color:var(--vt-text)}
.dz-gamepick--list li.is-active{background:var(--vt-hover)}
.dz-gamepick--list li.is-empty{padding:0.625rem;cursor:default;color:var(--vt-text-dim)}
.dz-gamepick--art{
  display:grid;place-items:center;flex:0 0 1.875rem;width:1.875rem;height:2.5rem;border-radius:0.3125rem;object-fit:cover;
  background:linear-gradient(155deg,hsl(var(--hue,280) 48% 30%),hsl(calc(var(--hue,280) + 34) 52% 16%));
  color:#fff;font-size:0.875rem;font-weight:800;
}
.dz-gamepick--text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dz-gamepick--text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-base)}
.dz-gamepick--text small{font-size:var(--fs-xs);color:var(--vt-text-dim)}
.dz-gamepick > em{display:block;margin-top:0.3125rem;font-style:normal;font-size:var(--fs-xs);color:var(--c-muted)}

/* Settings: email and phone as one private group, with what they are for
   said right under them. */
.dz-form--private{min-width:0;margin:0 0 1rem;padding:0.75rem 1rem 0.125rem;border:0.0625rem solid var(--vt-line-strong);border-radius:var(--vt-r-lg)}
.dz-form--private legend{margin-left:-0.375rem;padding:0 0.375rem;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.dz-form--private-note{display:flex;align-items:flex-start;gap:0.5rem;margin:-0.25rem 0 0.75rem;font-size:var(--fs-xs);line-height:1.5;color:var(--vt-text-dim)}
.dz-form--private-note svg{flex:0 0 auto;margin-top:0.0625rem;color:var(--vt-text)}

/* Settings: the linked-accounts choice, as a checkbox row rather than the
   form's stacked label-over-field. */
.dz-form--public{min-width:0;margin:0 0 0.875rem;padding:0;border:0}
.dz-form--public legend{margin-bottom:0.5rem;padding:0;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.dz-form .dz-form--public .dz-form--consent{display:flex;margin-bottom:0.625rem}
.dz-form .dz-form--public .dz-form--consent > span{display:inline;margin:0;font-size:var(--fs-base);font-weight:400;color:var(--vt-text)}
.dz-form--public input[type=checkbox]{flex:0 0 auto;width:1.125rem;height:1.125rem;margin:0.125rem 0 0;accent-color:var(--vt-accent)}
/* The page declares both colour schemes, so Chrome draws native boxes dark;
   on the light theme an empty box then reads as a filled one. */
:root[data-theme="light"] .dz-form--public input[type=checkbox]{color-scheme:light}
.dz-form--public .dz-user--public{display:inline-block;margin-top:0.125rem;font-size:var(--fs-sm)}

/* ---- Points leaderboard ------------------------------------------------
   One colour, the accent, over neutrals. The five rank colours stay on the
   badges used elsewhere: side by side on one page they read as five
   unrelated things rather than one climb. */

/* A rank as a quiet line, where a column of badges would shout. */
.vt-rankline{display:inline-flex;align-items:center;gap:0.3125rem;font-size:var(--fs-sm);color:var(--vt-text-dim)}
.vt-rankline svg{flex:0 0 auto;color:currentColor}

/* Your standing: the one card on the page that is about the reader. */
.vt-standing{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.125rem;padding:1rem 1.25rem;border:0.0625rem solid var(--vt-accent-line);border-radius:var(--vt-r-xl);background:var(--vt-surface)}
.vt-standing--pos{min-width:2.4em;font-size:var(--fs-3xl);font-weight:900;font-variant-numeric:tabular-nums;color:var(--vt-link)}
.vt-standing > img{width:3rem;height:3rem;border-radius:50%;object-fit:cover}
.vt-standing--who{display:flex;flex-direction:column;gap:0.1875rem;min-width:0}
.vt-standing--who strong{color:var(--vt-text)}
.vt-standing--progress{display:flex;flex-direction:column;gap:0.375rem;flex:1 1 13.75rem;font-size:var(--fs-sm);color:var(--vt-text-dim)}
.vt-meter{display:block;height:0.5rem;overflow:hidden;border-radius:62.4375rem;background:var(--vt-hover)}
.vt-meter > span{display:block;height:100%;border-radius:inherit;background:var(--vt-accent)}
.vt-standing--points{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.vt-standing--points strong{font-size:var(--fs-3xl);font-weight:900;font-variant-numeric:tabular-nums;color:var(--vt-text)}
.vt-standing--points span{font-size:var(--fs-xs);color:var(--vt-text-dim)}

/* The route, written first as the phone's trail: a column of stops joined
   by a dotted line, solid where the member has already been. */
.dz-route--map{padding:1.25rem 1.125rem;border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-xl);background:var(--vt-surface)}
.dz-route--svg,.dz-route--panel,.dz-route--hint,.dz-route--art,.dz-route--plane{display:none}
/* The picture behind the route: the whole coastline on the map, and on the
   phone's trail a strip of it across the top of the card. */
.dz-route--map::before{content:"";display:block;aspect-ratio:21/8;margin:-1.25rem -1.125rem 1.125rem;border-radius:var(--vt-r-xl) var(--vt-r-xl) 0 0;background:url(../img/route-map-sm.webp) 30% 45%/cover no-repeat}
.dz-route--art{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Cropped to the band the districts sit in (12% to 78% of its height, which
   is what the stops are placed against), and leaning slightly toward the
   district being shown. */
.dz-route--art::before{
  content:"";position:absolute;inset:0;
  background:url(../img/route-map.webp) 50% 35.3%/100% auto no-repeat;
  transform:scale(1.05);transform-origin:var(--fx) var(--fy);
}
/* The spotlight: the shown district stays lit, the rest of the coast dims. */
.dz-route--art::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 24% 46% at var(--fx) var(--fy),rgba(8,9,12,0) 0%,rgba(8,9,12,.16) 55%,rgba(8,9,12,.6) 100%),
    linear-gradient(180deg,rgba(8,9,12,.3),rgba(8,9,12,0) 28%,rgba(8,9,12,0) 72%,rgba(8,9,12,.42));
}
@property --fx{syntax:'<percentage>';inherits:true;initial-value:11%}
@property --fy{syntax:'<percentage>';inherits:true;initial-value:72.86%}
.dz-route--foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.375rem 1.25rem;margin-top:0.75rem;font-size:var(--fs-sm)}
.dz-route--foot p{margin:0}
.dz-route--hint{color:var(--vt-text-faint)}
.dz-route--links{display:flex;flex-wrap:wrap;gap:0.375rem 1.125rem;margin-left:auto}
.dz-route--links a{font-weight:700;color:var(--vt-link)}
.dz-route--head{margin:0 0 0.875rem}
.dz-route--head h2{margin:0;font-size:var(--fs-3xl)}
.dz-route--head p{max-width:64ch;margin:0.375rem 0 0;color:var(--vt-text-dim)}
.dz-route--stops{margin:0;padding:0;list-style:none}
.dz-route--stop{position:relative;padding:0 0 1.375rem 4rem}
.dz-route--stop:last-child{padding-bottom:0}
.dz-route--stop:not(:last-child)::before{content:"";position:absolute;left:1.5rem;top:3.375rem;bottom:0.25rem;border-left:0.125rem dotted var(--vt-accent)}
.dz-route--stop.is-reached:not(.is-current)::before{border-left:0.125rem solid var(--vt-accent)}
.dz-route--pin{position:relative;display:flex;align-items:center;gap:0.875rem;margin:0 0 0 -4rem;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.dz-route--node{display:grid;place-items:center;flex:0 0 3.125rem;width:3.125rem;height:3.125rem;border:0.125rem solid var(--vt-line-strong);border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--vt-hover),var(--vt-raised) 72%);box-shadow:inset 0 0 0 0.1875rem var(--vt-surface);color:currentColor;transition:transform .15s ease,border-color .15s ease}
.dz-route--stop.is-reached .dz-route--node{
  border-color:var(--vt-accent);color:var(--vt-accent-ink);
  background:linear-gradient(150deg,color-mix(in srgb,var(--vt-accent) 70%,#fff 30%),var(--vt-accent) 62%);
  box-shadow:inset 0 0 0 0.1875rem color-mix(in srgb,#fff 24%,transparent),0 0.625rem 1.5rem -0.625rem var(--vt-accent);
}
.dz-route--stop.is-current .dz-route--node{animation:dz-route-pulse 2.4s ease-out infinite}
@keyframes dz-route-pulse{
  0%{box-shadow:inset 0 0 0 0.1875rem color-mix(in srgb,#fff 24%,transparent),0 0 0 0 color-mix(in srgb,var(--vt-accent) 50%,transparent)}
  70%,100%{box-shadow:inset 0 0 0 0.1875rem color-mix(in srgb,#fff 24%,transparent),0 0 0 0.875rem color-mix(in srgb,var(--vt-accent) 0%,transparent)}
}
.dz-route--stop:last-child .dz-route--node{outline:0.125rem dashed var(--vt-accent-line);outline-offset:0.3125rem}
.dz-route--pin:hover .dz-route--node,
.dz-route--pin:focus-visible .dz-route--node{border-color:var(--vt-accent);transform:scale(1.07)}
.dz-route--label{display:flex;flex-direction:column;line-height:1.2}
.dz-route--label strong{font-size:var(--fs-lg);font-weight:800;color:var(--vt-text)}
.dz-route--label > span{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--vt-text-dim)}
.dz-route--you{display:inline-block;padding:0.125rem 0.5rem;border-radius:62.4375rem;background:var(--vt-accent);color:var(--vt-accent-ink);font-size:0.6875rem;font-weight:800}
.dz-route--detail{margin-top:0.5rem;font-size:var(--fs-sm);line-height:1.55;color:var(--vt-text-dim)}
.dz-route--detail p{margin:0}
.dz-route--facts{display:flex;flex-wrap:wrap;gap:0.25rem 1rem;margin:0.5rem 0 0;padding:0;list-style:none}
.dz-route--facts li{display:inline-flex;align-items:center;gap:0.375rem}
.dz-route--facts svg{flex:0 0 auto;color:currentColor}
.dz-route--facts a{font-weight:700;color:var(--vt-link)}
.dz-route--facts .is-you{font-weight:700;color:var(--vt-text)}

/* The drawing: a soft road under the route, warmer where the member has
   already been, and the route itself dotted ahead and solid behind. */
.dz-route--road{fill:none;stroke:color-mix(in srgb,var(--vt-accent) 11%,transparent);stroke-width:20;stroke-linecap:round}
.dz-route--road.is-done{stroke:color-mix(in srgb,var(--vt-accent) 24%,transparent)}
.dz-route--leg{fill:none;stroke:var(--vt-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 11}
.dz-route--leg.is-done{stroke:var(--vt-accent);stroke-dasharray:none}
.dz-route--leg.is-part{stroke:var(--vt-accent);stroke-dasharray:100 100}

@media (prefers-reduced-motion:reduce){
  .dz-route--node{transition:none}
  .dz-route.is-interactive .dz-route--canvas{transition:none}
  .dz-route--stop.is-current .dz-route--node{animation:none;box-shadow:inset 0 0 0 0.1875rem color-mix(in srgb,#fff 24%,transparent),0 0 0 0.375rem color-mix(in srgb,var(--vt-accent) 30%,transparent)}
}

/* From 900px, with the script running, the trail becomes the map: stops set
   on the drawn route, labels above or below them, and the details of the
   stop being pointed at in the panel under it. */
@media (min-width:900px){
  .dz-route.is-interactive .dz-route--map{padding:0;overflow:hidden;background:radial-gradient(75% 95% at 50% 105%,color-mix(in srgb,var(--vt-accent) 9%,transparent),transparent 70%),var(--vt-surface)}
  .dz-route.is-interactive .dz-route--canvas{
    position:relative;aspect-ratio:1000/280;margin:0;color-scheme:dark;
    /* The map is a dark picture in either theme, so what sits on it is dark too. */
    --vt-raised:#1E1F24;--vt-hover:#2A2B31;--vt-surface:#131417;--vt-line-strong:rgba(255,255,255,.26);
    --vt-text:#F2F3F7;--vt-text-dim:#C4C7D0;--vt-accent-hi:#FFC94D;
    transition:--fx 1.1s cubic-bezier(.4,0,.2,1),--fy 1.1s cubic-bezier(.4,0,.2,1);
  }
  .dz-route.is-interactive .dz-route--art{display:block}
  .dz-route.is-interactive .dz-route--svg{z-index:2}
  .dz-route.is-interactive .dz-route--stops{z-index:3}
  .dz-route.is-interactive .dz-route--road{stroke:rgba(8,9,12,.5);stroke-width:12}
  .dz-route.is-interactive .dz-route--road.is-done{stroke:rgba(255,184,34,.3)}
  .dz-route.is-interactive .dz-route--leg{stroke:#FFC94D}
  .dz-route.is-interactive .dz-route--leg.is-done,
  .dz-route.is-interactive .dz-route--leg.is-part{stroke:#FFB822;filter:drop-shadow(0 0 0.25rem rgba(255,184,34,.75))}
  .dz-route.is-interactive .dz-route--plane{
    display:block;position:absolute;left:0;top:0;z-index:4;width:1.875rem;height:1.875rem;margin:-0.9375rem 0 0 -0.9375rem;
    opacity:0;pointer-events:none;transition:opacity .4s ease;
  }
  .dz-route.is-interactive .dz-route--plane.is-on{opacity:1}
  .dz-route.is-interactive .dz-route--plane.is-landed{opacity:0;transition-delay:.5s}
  .dz-route--plane svg{display:block;width:100%;height:100%;fill:#FFFFFF;transform:rotate(var(--heading,90deg));filter:drop-shadow(0 0.125rem 0.1875rem rgba(0,0,0,.75)) drop-shadow(0 0 0.375rem rgba(255,184,34,.6))}
  .dz-route.is-interactive .dz-route--map::before{display:none}
  .dz-route.is-interactive .dz-route--svg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .dz-route.is-interactive .dz-route--stops{position:absolute;inset:0}
  .dz-route.is-interactive .dz-route--stop{position:absolute;left:var(--x);top:var(--y);width:0;height:0;padding:0}
  .dz-route.is-interactive .dz-route--stop::before{display:none}
  .dz-route.is-interactive .dz-route--stop .dz-route--detail{display:none}
  .dz-route.is-interactive .dz-route--pin{position:absolute;left:-1.75rem;top:-1.75rem;display:block;width:3.5rem;height:3.5rem;margin:0}
  .dz-route.is-interactive .dz-route--pin .dz-route--node{width:3.5rem;height:3.5rem}
  /* The stop the panel is showing; on the trail every stop shows its own. */
  .dz-route.is-interactive .is-shown .dz-route--node{border-color:var(--vt-accent);transform:scale(1.07)}
  .dz-route.is-interactive .dz-route--label{position:absolute;left:50%;top:calc(100% + 0.375rem);align-items:center;padding:0.125rem 0.5rem;border-radius:0.5rem;background:color-mix(in srgb,var(--vt-surface) 86%,transparent);white-space:nowrap;text-align:center;transform:translateX(-50%)}
  .dz-route.is-interactive .is-label-top .dz-route--label{top:auto;bottom:calc(100% + 0.375rem)}
  .dz-route.is-interactive .dz-route--you{position:absolute;left:50%;bottom:calc(100% + 0.5rem);transform:translateX(-50%)}
  .dz-route.is-interactive .is-label-top .dz-route--you{top:calc(100% + 0.5rem);bottom:auto}
  .dz-route.is-interactive .dz-route--panel{display:flex;align-items:flex-start;gap:1rem;min-height:7.375rem;padding:1rem 1.75rem 1.25rem;border-top:0.0625rem solid var(--vt-line)}
  .dz-route.is-interactive .dz-route--hint{display:block}
  .dz-route--panel .dz-route--node{flex:0 0 2.875rem;width:2.875rem;height:2.875rem;border-color:var(--vt-accent);transform:none}
  .dz-route--panel-body{min-width:0}
  .dz-route--panel-title{display:flex;align-items:baseline;gap:0.625rem;margin:0;font-size:var(--fs-xl)}
  .dz-route--panel-title span{font-size:var(--fs-sm);font-weight:600;color:var(--vt-text-dim)}
  .dz-route--panel .dz-route--detail{margin-top:0.25rem}
}

/* How to earn: the points first, big and in the accent, then what for. */
.dz-earn--title{margin:0;font-size:var(--fs-3xl)}
.dz-earn--intro{max-width:64ch;margin:0.375rem 0 1rem;color:var(--vt-text-dim)}
.dz-earn--list{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.25rem,1fr));gap:0.75rem;margin:0;padding:0;list-style:none}
.dz-earn--item{display:flex;align-items:flex-start;gap:0.875rem;padding:1rem 1.125rem;border-radius:var(--vt-r-lg);background:var(--vt-surface)}
.dz-earn--pts{flex:0 0 3.2em;font-size:var(--fs-2xl);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--vt-link)}
.dz-earn--text{display:flex;flex-direction:column;gap:0.1875rem;min-width:0}
.dz-earn--text strong{color:var(--vt-text)}
.dz-earn--text > span{font-size:var(--fs-sm);line-height:1.5;color:var(--vt-text-dim)}
.dz-earn--text small{font-size:var(--fs-xs);color:var(--vt-text-faint)}
.dz-earn--text a{margin-top:0.25rem;font-size:var(--fs-sm);font-weight:700;color:var(--vt-link)}

/* Standings. */
.dz-standings--head{margin:0 0 1rem}
.dz-standings--head h2{margin:0;font-size:var(--fs-3xl)}
.dz-standings--head p{margin:0.375rem 0 0;color:var(--vt-text-dim)}

/* The top three: first place in the accent, the other two plain. Three
   across on a phone too, where they shrink rather than stack into a column
   that pushes the table a screen down. */
.vt-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:0.75rem;margin:0 0 1.125rem;padding:0;list-style:none}
.vt-podium--slot{display:flex;flex-direction:column;align-items:center;gap:0.375rem;min-width:0;padding:1.375rem 0.75rem;border-radius:var(--vt-r-xl);background:var(--vt-surface);text-align:center}
.vt-podium--slot.is-first{order:2;padding-top:1.875rem;padding-bottom:1.625rem;box-shadow:inset 0 0 0 0.0625rem var(--vt-accent-line)}
.vt-podium--slot.is-second{order:1}
.vt-podium--slot.is-third{order:3}
.vt-podium--pos{font-size:var(--fs-xl);font-weight:900;font-variant-numeric:tabular-nums;color:var(--vt-text-dim)}
.vt-podium--slot.is-first .vt-podium--pos{color:var(--vt-link)}
.vt-podium--slot img{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover}
.vt-podium--slot.is-first img{width:5.25rem;height:5.25rem;box-shadow:0 0 0 0.1875rem var(--vt-accent)}
.vt-podium--name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xl);font-weight:800;color:var(--vt-text)}
.vt-podium--points{font-size:var(--fs-2xl);font-weight:900;font-variant-numeric:tabular-nums;color:var(--vt-text)}
.vt-podium--points small{margin-left:0.25rem;font-size:var(--fs-xs);font-weight:600;color:var(--vt-text-dim)}

/* The rest: rank, wins and reviews folded under the name, so the table is
   three columns wide and needs no second layout for a phone. */
.vt-standings{width:100%;border-collapse:collapse}
.vt-standings th{padding:0 0.875rem 0.625rem;border-bottom:0.0625rem solid var(--vt-line);font-size:var(--fs-sm);font-weight:600;text-align:left;color:var(--vt-text-dim)}
.vt-standings td{padding:0.75rem 0.875rem;border-bottom:0.0625rem solid var(--vt-line);vertical-align:middle}
.vt-standings .is-num{text-align:right}
.vt-standings--pos{width:3em;font-weight:800;font-variant-numeric:tabular-nums;color:var(--vt-text-dim)}
.vt-standings--who{display:flex;align-items:center;gap:0.75rem;min-width:0}
.vt-standings--who img{flex:0 0 auto;width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover}
.vt-standings--id{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.vt-standings--name{font-weight:700;color:var(--vt-text)}
.vt-standings--sub{display:flex;flex-wrap:wrap;align-items:center;gap:0.125rem 0.75rem;font-size:var(--fs-sm);color:var(--vt-text-dim)}
.vt-standings--pts{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums;color:var(--vt-text)}
.vt-standings tr.is-me td{background:color-mix(in srgb,var(--vt-accent) 10%,transparent)}

@media (max-width:639px){
  .vt-standing{padding:0.875rem}
  .vt-standing--points{align-items:flex-start}
  .vt-podium{gap:0.5rem}
  .vt-podium--slot{gap:0.25rem;padding:0.875rem 0.375rem}
  .vt-podium--slot.is-first{padding-top:1.125rem;padding-bottom:1rem}
  .vt-podium--slot img{width:2.875rem;height:2.875rem}
  .vt-podium--slot.is-first img{width:3.375rem;height:3.375rem}
  .vt-podium--name{font-size:var(--fs-sm)}
  .vt-podium--points{font-size:var(--fs-lg)}
  .vt-podium .vt-rankline{font-size:0.6875rem}
  .vt-standings th,
  .vt-standings td{padding-left:0.5rem;padding-right:0.5rem}
  .vt-standings--pos{width:2em}
  .vt-standings--who{gap:0.625rem}
  .vt-standings--who img{width:2rem;height:2rem}
  .vt-standings--sub{gap:0 0.5rem;font-size:var(--fs-xs)}
}

/* ---- Posting limits ----------------------------------------------------
   Above each submission form: what is left of the member's limits and,
   when nothing is, why the form is shut and when it opens again. */
.dz-allowance{margin:0 0 0.875rem}
.dz-allowance p{margin:0}
.dz-allowance--use{font-size:var(--fs-sm);font-weight:700;color:var(--vt-text)}
.dz-allowance--use span{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--vt-text-dim)}
.dz-allowance--stop{margin-top:0.5rem;padding:0.625rem 0.75rem;border:0.0625rem solid var(--vt-accent-line);border-radius:var(--vt-r-md);background:color-mix(in srgb,var(--vt-accent) 12%,transparent);font-size:var(--fs-sm);color:var(--vt-text)}
.dz-form button[type=submit][disabled],
.vt-lossform button[type=submit][disabled],
.review-form--form button[type=submit][disabled]{opacity:.5;cursor:not-allowed}
/* A vote past the cap: counted, but earning nothing, said under the button. */
.dz-win-card--foot:has(.dz-vote-note){flex-wrap:wrap}
.dz-vote-note{flex:1 1 100%;order:3;margin-top:0.375rem;font-size:var(--fs-xs);line-height:1.4;color:var(--vt-text-dim)}

/* ---- Big win page ------------------------------------------------------
   The banner carries the win at a glance, at the height every section
   banner has: the game's cover beside the multiplier, the game and the
   money. The screenshot, the member's words and the facts sit under it. */
.dz-winhero{display:flex;align-items:center;gap:1.375rem;margin-top:0.375rem}
.dz-winhero--cover{position:relative;display:block;flex:0 0 auto;width:7.5rem;aspect-ratio:3/4;overflow:hidden;border-radius:0.75rem;box-shadow:0 0.875rem 2.125rem -0.875rem rgba(0,0,0,.8),0 0 0 0.0625rem rgba(255,255,255,.16)}
.dz-winhero--cover img{display:block;width:100%;height:100%;object-fit:cover}
.dz-winhero--cover .vt-poster--fallback{position:absolute;inset:0;padding:0.625rem}
.dz-winhero--cover .vt-poster--fallback-name{font-size:0.8125rem}
.dz-winhero--info{min-width:0}
.hero .dz-winhero--title{display:flex;flex-direction:column;gap:0.25rem;margin:0 0 0.875rem;font-size:inherit;line-height:1}
.dz-winhero--mult{font-size:clamp(2.5rem,4.2vw,3.5rem);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--vt-link)}
.dz-winhero--game{font-size:clamp(1.375rem,2.1vw,1.875rem);font-weight:800;line-height:1.15;color:#fff}
.dz-winhero--amounts{display:flex;flex-wrap:wrap;gap:0.375rem 1.75rem;margin:0}
.dz-winhero--amounts div{display:flex;flex-direction:column;gap:0.125rem}
.dz-winhero--amounts dt{font-size:var(--fs-sm);color:rgba(255,255,255,.74)}
.dz-winhero--amounts dd{margin:0;font-size:var(--fs-2xl);font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
@media (max-width:640px){
  .dz-winhero{gap:0.875rem}
  .dz-winhero--cover{width:5.25rem;border-radius:0.625rem}
  .dz-winhero--mult{font-size:2.25rem}
  .dz-winhero--game{font-size:1.25rem}
  .dz-winhero--amounts{gap:0.25rem 1.125rem}
  .dz-winhero--amounts dd{font-size:var(--fs-xl)}
}

/* Under the banner: the screenshot and the member's own words take the
   width, the facts and the vote a column beside them. */
.dz-winpage--grid{display:grid;grid-template-columns:minmax(0,1fr) 21.25rem;gap:1.75rem;align-items:start}
.dz-winpage--shot{margin:0;overflow:hidden;border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-xl);background:var(--vt-surface)}
.dz-winpage--shot img{display:block;width:100%;height:auto}
.dz-winpage--shot .dz-win-card--placeholder{min-height:15rem;color:var(--vt-text-faint)}
.dz-winpage--story{margin-top:1.125rem;font-size:var(--fs-lg);line-height:1.65;color:var(--vt-text)}
.dz-winpage--story > :last-child{margin-bottom:0}
.dz-winpage--card{padding:1.125rem 1.25rem;border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-xl);background:var(--vt-surface)}
.dz-winpage--facts{margin:0}
.dz-winpage--facts div{display:flex;align-items:baseline;justify-content:space-between;gap:0.875rem;padding:0.625rem 0;border-bottom:0.0625rem solid var(--vt-line)}
.dz-winpage--facts div:first-child{padding-top:0}
.dz-winpage--facts dt{color:var(--vt-text-dim)}
.dz-winpage--facts dd{margin:0;font-weight:700;text-align:right;color:var(--vt-text)}
.dz-winpage--facts a{color:var(--vt-link)}
.dz-winpage--by{display:flex;align-items:center;gap:0.75rem;margin-top:1rem}
.dz-winpage--by > img{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;object-fit:cover}
.dz-winpage--who{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:0.25rem;min-width:0}
.dz-winpage--who strong{color:var(--vt-text)}
.dz-winpage--by .dz-vote{flex:0 0 auto}
.dz-winpage--by:has(.dz-vote-note){flex-wrap:wrap}
@media (max-width:1023px){
  .dz-winpage--grid{grid-template-columns:1fr}
}

/* The vote: a card of its own in the accent, since it is the one thing a
   reader can do on a win's page, with a black button that reads as the
   control rather than as decoration. */
.dz-winpage--side{display:flex;flex-direction:column;gap:1rem}
.dz-winvote{display:flex;align-items:center;gap:1rem;padding:1.125rem 1.25rem;border-radius:var(--vt-r-xl);background:var(--vt-accent);color:var(--vt-accent-ink)}
.dz-winvote--text{flex:1 1 auto;min-width:0}
.dz-winvote--title{margin:0;font-size:var(--fs-xl);font-weight:900;line-height:1.2}
.dz-winvote--status{margin:0.25rem 0 0;font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.dz-winvote--signin{padding:0;border:0;background:none;font:inherit;font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.dz-winvote--signin:focus-visible{outline:0.125rem solid var(--vt-accent-ink);outline-offset:0.125rem;border-radius:0.1875rem}
.dz-winvote .dz-winvote--btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem;flex:0 0 auto;
  min-width:4.75rem;min-height:4rem;padding:0.5rem 0.875rem;border:0;border-radius:0.875rem;
  background:#0F1013;color:#FFFFFF;font-size:var(--fs-xl);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:0 0.5rem 1.125rem -0.625rem rgba(0,0,0,.7);transition:transform .12s ease,background .12s ease;
}
.dz-winvote .dz-winvote--btn svg{color:currentColor}
.dz-winvote .dz-winvote--btn:hover:not([disabled]){transform:translateY(-0.125rem);border-color:transparent;background:#000;color:#FFFFFF}
.dz-winvote .dz-winvote--btn:focus-visible{outline:0.1875rem solid #0F1013;outline-offset:0.1875rem}
.dz-winvote .dz-winvote--btn[disabled]{opacity:1;cursor:default}
.dz-winvote:not(.is-voted) .dz-winvote--btn[disabled]{opacity:.62}
.dz-winvote .dz-winvote--btn.is-voted{background:#0F1013;color:var(--vt-link)}
.dz-winvote .dz-vote-note{color:inherit}
@media (prefers-reduced-motion:reduce){
  .dz-winvote .dz-winvote--btn{transition:none}
}

/* Where it was won: the casino's mark on its own colour, its welcome offer,
   and the way in. */
.dz-wincasino{display:flex;flex-direction:column;gap:0.75rem}
.dz-wincasino--title{margin:0;font-size:var(--fs-sm);font-weight:700;color:var(--vt-text-dim)}
.dz-wincasino--brand{display:grid;place-items:center;min-height:6rem;padding:0.875rem;border-radius:var(--vt-r-lg);background:linear-gradient(160deg,color-mix(in srgb,var(--tint,#2A2B31) 88%,#fff 12%),color-mix(in srgb,var(--tint,#2A2B31) 72%,#000 28%))}
.dz-wincasino--brand .casino-tile--logo-text{font-size:1.125rem;font-weight:800;color:#fff}
.dz-wincasino--offer{display:flex;flex-direction:column;gap:0.125rem;margin:0}
.dz-wincasino--offer small{font-size:var(--fs-xs);color:var(--vt-text-dim)}
.dz-wincasino--offer strong{font-size:var(--fs-xl);font-weight:900;line-height:1.2;color:var(--vt-text)}
.dz-wincasino--offer span{font-size:var(--fs-sm);color:var(--vt-text-dim)}
.dz-wincasino--actions{display:flex;flex-wrap:wrap;gap:0.5rem}
.dz-wincasino--actions .vt-btn{flex:1 1 8rem;justify-content:center}
.dz-wincasino--terms{margin:0;font-size:0.6875rem;line-height:1.45;color:var(--vt-text-faint)}

/* A win with a clip: a button on the screenshot itself, then the player,
   or a button naming the site the clip opens on. */
.dz-winpage--shot{position:relative}
.dz-winpage--play{
  position:absolute;left:0.875rem;bottom:0.875rem;z-index:2;display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.625rem 1rem;border-radius:62.4375rem;background:var(--vt-accent);color:var(--vt-accent-ink);
  font-weight:800;text-decoration:none;box-shadow:0 0.625rem 1.5rem -0.625rem rgba(0,0,0,.75);
  transition:transform .12s ease;
}
.dz-winpage--play:hover,
.dz-winpage--play:focus-visible{transform:translateY(-0.125rem);color:var(--vt-accent-ink);text-decoration:none}
.dz-winpage--play:focus-visible{outline:0.1875rem solid #0F1013;outline-offset:0.1875rem}
.dz-winpage--clip{margin-top:1rem;scroll-margin-top:6rem}
.dz-winpage--player iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--vt-r-xl)}
.dz-winpage--source{margin:0.5rem 0 0;font-size:var(--fs-sm)}
.dz-winpage--source a{font-weight:700;color:var(--vt-link)}
.dz-winpage--watch{display:inline-flex;align-items:center;gap:0.5rem}
.vt-card--clip{position:absolute;right:0.625rem;top:0.625rem;z-index:2;display:inline-flex;align-items:center;gap:0.3125rem;padding:0.25rem 0.5625rem;border-radius:62.4375rem;background:rgba(var(--vt-scrim),.86);color:#fff;font-size:0.6875rem;font-weight:700}
@media (prefers-reduced-motion:reduce){
  .dz-winpage--play{transition:none}
}

/* A banner's one call to action, where a page has one to make (the store,
   signed out): under the standfirst, never instead of it. */
.hero .hero--cta{margin:var(--vt-s-5) 0 0}
.hero .hero--cta .vt-btn{text-decoration:none}

/* ---- The member's own profile: actions as cards -------------------------
   One card per thing a member can do. A card opens its form or list right
   under its own row, one at a time, so the page reads as a menu rather than
   a scroll of six forms. */
.dz-actions--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem;margin-bottom:var(--gutter)}
.dz-action{position:relative;display:flex;align-items:flex-start;gap:0.875rem;min-width:0;padding:1rem;border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-xl);background:var(--vt-surface);color:var(--vt-text);text-decoration:none;transition:border-color .15s ease,background .15s ease}
.dz-action:hover,
.dz-action:focus-visible{border-color:var(--vt-accent-line);background:var(--vt-raised);color:var(--vt-text);text-decoration:none}
.dz-action.is-open{border-color:var(--vt-accent);box-shadow:inset 0 0 0 0.0625rem var(--vt-accent)}
.dz-action--icon{display:grid;place-items:center;flex:0 0 2.625rem;height:2.625rem;border-radius:0.75rem;background:color-mix(in srgb,var(--vt-accent) 14%,transparent);color:currentColor}
.dz-action.is-open .dz-action--icon{background:var(--vt-accent);color:var(--vt-accent-ink)}
.dz-action--body{display:flex;flex:1 1 auto;flex-direction:column;gap:0.1875rem;min-width:0}
.dz-action--title{font-size:var(--fs-lg);font-weight:800;line-height:1.25}
.dz-action--text{font-size:var(--fs-sm);line-height:1.45;color:var(--vt-text-dim)}
.dz-action--meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.625rem;margin-top:0.25rem;font-size:var(--fs-xs);color:var(--vt-text-dim)}
.dz-action--meta b{font-size:var(--fs-sm);font-weight:900;color:var(--vt-link)}
.dz-action.is-blocked .dz-action--meta span{font-weight:700;color:var(--vt-text)}
.dz-action--chev{flex:0 0 auto;align-self:center;color:var(--vt-text-dim);transition:transform .2s ease}
.dz-action.is-open .dz-action--chev{transform:rotate(180deg);color:currentColor}
.dz-actions--grid > .dz-action-panel{grid-column:1 / -1;margin:0;border:0.0625rem solid var(--vt-accent-line)}
/* The card above names the panel, so its own heading stays for screen
   readers only. */
.dz-actions.is-enhanced .dz-action-panel > .dz-panel--title{position:absolute;width:0.0625rem;height:0.0625rem;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){
  .dz-actions--grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .dz-action--chev{transition:none}
}

/* ---- Front page, signed out: the club, and the way in -------------------
   The route map says what membership is for; the accent box beside it is
   the one thing to do about it. */
.vt-club--grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:stretch}
.vt-club--map{min-width:0}
.vt-club--cta{display:flex;flex-direction:column;gap:0.875rem;padding:1.5rem;border-radius:var(--vt-r-xl);background:var(--vt-accent);color:var(--vt-accent-ink)}
.vt-club--kicker{margin:0;font-size:var(--fs-sm);font-weight:800}
.vt-club--title{margin:0;font-size:var(--fs-3xl);font-weight:900;line-height:1.15;color:inherit}
.vt-club--list{display:flex;flex-direction:column;gap:0.5625rem;margin:0;padding:0;list-style:none;font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.vt-club--list li{display:flex;align-items:baseline;gap:0.625rem}
.vt-club--list b{flex:0 0 2.8em;font-size:var(--fs-lg);font-weight:900;font-variant-numeric:tabular-nums}
.vt-club--btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;margin-top:auto;padding:0 1.25rem;border-radius:0.75rem;background:#0F1013;color:#FFFFFF;font-size:var(--fs-base);font-weight:800;text-decoration:none;transition:transform .12s ease}
.vt-club--btn:hover,
.vt-club--btn:focus-visible{transform:translateY(-0.125rem);background:#000;color:#FFFFFF;text-decoration:none}
.vt-club--btn:focus-visible{outline:0.1875rem solid #0F1013;outline-offset:0.1875rem}
.vt-club--small{margin:0;font-size:var(--fs-xs);font-weight:600}
/* Signed in, the box is the member's own standing instead: rank and points
   for the plane parked on the route beside it, what is left to the next
   stop, and the two places the points lead. Ink on gold throughout, so the
   rank's own colour stays out of it. */
.vt-club--title{overflow-wrap:anywhere}
.vt-club--rank{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;margin:0}
.vt-club--rank > span{display:inline-flex;align-items:center;gap:0.375rem;font-size:var(--fs-base);font-weight:800}
.vt-club--rank > b{font-size:var(--fs-3xl);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.vt-club--rank small{margin-left:0.1875rem;font-size:var(--fs-sm);font-weight:800}
.vt-club--bar{height:0.5rem;border-radius:62.4375rem;background:rgba(15,16,19,.18);overflow:hidden}
.vt-club--bar span{display:block;height:100%;border-radius:inherit;background:#0F1013}
.vt-club--next{margin:0;font-size:var(--fs-sm);font-weight:600}
.vt-club--actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:auto}
.vt-club--actions .vt-club--btn{flex:1 1 auto;margin-top:0}
.vt-club--btn.is-ghost{background:transparent;box-shadow:inset 0 0 0 0.125rem #0F1013;color:#0F1013}
.vt-club--btn.is-ghost:hover,
.vt-club--btn.is-ghost:focus-visible{background:rgba(15,16,19,.1);color:#0F1013}
@media (min-width:1200px){
  .vt-club--grid{grid-template-columns:minmax(0,1fr) 21.25rem}
}
@media (prefers-reduced-motion:reduce){
  .vt-club--btn{transition:none}
}

/* The route in a narrower column: smaller stops, labels and plane. */
@media (min-width:900px){
  .dz-route.is-compact.is-interactive .dz-route--pin{left:-1.3125rem;top:-1.3125rem;width:2.625rem;height:2.625rem}
  .dz-route.is-compact.is-interactive .dz-route--pin .dz-route--node{width:2.625rem;height:2.625rem}
  .dz-route.is-compact .dz-route--node svg{width:1.125rem;height:1.125rem}
  .dz-route.is-compact .dz-route--label strong{font-size:var(--fs-sm)}
  .dz-route.is-compact .dz-route--label > span{font-size:0.6875rem}
  .dz-route.is-compact.is-interactive .dz-route--plane{width:1.5rem;height:1.5rem;margin:-0.75rem 0 0 -0.75rem}
  .dz-route.is-compact.is-interactive .dz-route--panel{min-height:0;padding:0.75rem 1.125rem 0.875rem}
}

/* --------------------------------------------- front page rhythm, phone -- */
/* The page alternates a painted band with a plain one, and the two carried
   different rhythms: 40px under a plain section, 32 under a painted one, on
   top of whatever margin the last paragraph inside it still had. Stacked on a
   phone that reads as gaps of 56 to 88px between one block and the next, which
   is close enough to look like a mistake rather than a pattern. One margin for
   every band, and nothing trailing inside a band but its own padding. */
@media screen and (max-width:767px){
  .home .vt-content > *{margin-bottom:2rem}
  .home .vt-content > *:last-child{margin-bottom:0}
  .home .hub-copy > :last-child,
  .home .vt-sec--head > :last-child{margin-bottom:0}
  /* A block under a heading starts where every other block under a heading
     starts: the calculator brought its own 27px. */
  .home .seo-section--block > :first-child,
  .home .hub-copy > :first-child{margin-top:0}

  /* One gap between cards in a stack, too. The toplist rows sat 10px apart,
     the promo column 16 and the card grids 20, which on a phone reads as
     three different ideas of what a list is. */
  .home .casino-tile--wrap{margin-bottom:1rem}
  .home .casino-tile--wrap:last-child{margin-bottom:0}
  .home .vt-grid,
  .home .vt-rail{gap:1rem}
  .home .toplist-section--all-wrap{margin-top:1rem}

  /* Stacked, the pick and the giveaways are not part of the toplist, and a
     band drawn behind all three said they were. The section stops painting
     and the list paints itself instead, full width: the two promos read as a
     run of cards on the page's own ground, and the list starts where the
     colour starts. The 16px they add on top of the 16px column gap makes the
     two boundaries the same 64px every other section boundary is. */
  .home main.vt-content > .toplist-section:nth-child(even){background:transparent}
  .home .toplist-section .vt-front-split--main{
    margin-inline:calc(-1 * var(--gutter));
    padding:2rem var(--gutter);
    background:var(--vt-band);
  }
  .home .vt-railcard--giveaways{margin-bottom:1rem}
  .home .vt-railcard--activity{margin-top:1rem}
}

/* -------------------------------------------------------- review page -- */
/* Two cards in a row, the way the front page sets its pick beside its
   heading: the header on its artwork, and the six numbers on a plain card of
   their own, stretched to the same height. Below 1024px they stack. */
.review-hero-row{display:grid;gap:0.875rem;align-items:stretch;margin:0 0 1.375rem}
@media (min-width:1024px){
  .review-hero-row{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}
.review-hero-row > .review-hero{margin:0}
.review-hero--identity{display:grid;gap:0.875rem;align-content:start;justify-items:start}

/* The mark on its own, straight on the header. The page is about this
   operator already; a tinted plate round the logo only boxed it in. */
.review-hero .review-hero--logo{
  display:inline-flex;align-items:center;justify-content:flex-start;
  width:auto;max-width:min(100%,19rem);min-height:0;aspect-ratio:auto;
  margin:0.875rem 0 0.25rem;padding:0;background:none;border:0;border-radius:0;text-decoration:none;
  transition:opacity .16s ease;
}
.review-hero .review-hero--logo:hover{opacity:.85}
.review-hero .review-hero--logo:focus-visible{outline:0.125rem solid var(--vt-accent);outline-offset:0.25rem;border-radius:0.25rem}
.review-hero--head{display:grid;gap:0.625rem;min-width:0}
.review-hero--head h1{margin:0}
/* The score, the stars and the player count read as one line of one size:
   the number was a boxed 22px figure beside 15px stars and 13px text. */
.review-hero--rating{display:flex;align-items:center;flex-wrap:wrap;gap:0.375rem 0.75rem;font-size:0.9375rem;line-height:1.2}
.review-hero .review-hero--score{
  display:inline-flex;align-items:baseline;gap:0.0625rem;padding:0;background:none;border-radius:0;
  font-size:0.9375rem;font-weight:700;line-height:1.2;color:rgba(255,255,255,.72);letter-spacing:0;
}
.review-hero .review-hero--score strong{font-size:0.9375rem;font-weight:800;line-height:1.2;color:#fff}
.review-hero--rating .rating svg{width:0.9375rem;height:0.9375rem}
.review-hero--players{font-size:0.9375rem;font-weight:700;line-height:1.2}
.review-hero .review-hero--action{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5rem 1rem;margin-top:0.375rem}
.review-hero .review-hero--action .vt-btn{min-width:15rem;justify-content:center}
@media (max-width:640px){
  .review-hero .review-hero--action .vt-btn{width:100%;min-width:0}
}
.review-hero--terms{margin:0;font-size:0.71875rem;color:rgba(255,255,255,.62);max-width:36ch}

/* The facts card: the theme's own surface and ink, so it reads the same in
   both themes and over no picture at all. Six cells, two across, divided by
   hairlines rather than boxed again inside the card, filling its height. */
.review-facts-card{
  display:flex;flex-direction:column;min-width:0;margin:0;overflow:hidden;
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);
  border-radius:var(--vt-r-xl);color:var(--vt-text);
}
.review-facts-card .review-hero--facts{
  display:grid!important;flex:1 1 auto;margin:0;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;
}
.review-facts-card .review-hero--fact{
  display:flex;flex-direction:column;justify-content:center;gap:0.3125rem;min-width:0;
  margin:0;padding:1.125rem 1.5rem;background:none;border:0;border-radius:0;
}
.review-facts-card .review-hero--fact:nth-child(n+3){border-top:0.0625rem solid var(--vt-line)}
.review-facts-card .review-hero--fact:nth-child(even){border-left:0.0625rem solid var(--vt-line)}
.review-facts-card .review-hero--fact dt{
  margin:0;font-size:0.65625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vt-text-faint);
}
.review-facts-card .review-hero--fact dd{margin:0;font-size:1.125rem;font-weight:800;line-height:1.3;color:var(--vt-text)}
.review-facts-card .review-hero--fact dd a{color:var(--vt-text)}
.review-facts-card .review-hero--fact dd a:hover{color:var(--vt-on-plate-link)}
/* The byline closes the card, in the card's own ink rather than the pale
   ink it wears on the artwork. */
/* Where the RTP and max win came from, and when. It sits between the facts
   and the byline foot, so it takes the foot's side padding and none of its
   rule: a source note is part of the facts above it, not a second block. */
.review-facts-card--source{margin:0;padding:0.6875rem 1.25rem 0;font-size:0.75rem;color:var(--vt-text-dim)}
.review-facts-card--foot{padding:0.8125rem 1.25rem;border-top:0.0625rem solid var(--vt-line)}
.review-facts-card--foot .hero--meta{margin:0;flex-wrap:wrap;gap:0.5rem 1rem;color:var(--vt-text-dim)}
.review-facts-card--foot .hero--updated + .hero--author::before{left:-0.5rem}
/* A point smaller than on the artwork: at 1600px the date and the credit
   needed 495px of a 489px footer and broke onto two lines by six pixels. */
.review-facts-card--foot .hero--updated,
.review-facts-card--foot .hero--meta .hero--author-name{font-size:0.75rem}
.review-facts-card--foot .hero--updated,
.review-facts-card--foot .hero--author-name,
.review-facts-card--foot .hero--author-role{color:var(--vt-text-dim)}
.review-facts-card--foot .hero--author,
.review-facts-card--foot .hero--author-name strong{color:var(--vt-text)}
.review-facts-card--foot .hero--updated + .hero--author::before{background:var(--vt-line)}
.review-facts-card--foot .hero--author-avatar{box-shadow:0 0 0 0.125rem var(--vt-line)}
.review-facts-card--foot a{color:var(--vt-link)}
@media (max-width:640px){
  .review-facts-card .review-hero--fact{padding:0.875rem 1rem}
  .review-facts-card .review-hero--fact dd{font-size:0.96875rem}
  .review-facts-card--foot{padding:0.75rem 1rem}
}

/* The body reads as one long article: its text runs the full width of the
   column, as the tables and cards between the paragraphs do (a 72ch measure
   left a third of the column empty beside every paragraph), the same space
   between every section, and a rule where one section hands over to the next. */
.review-body > .review-block,
.review-body > .reviews,
.review-body > .tested{
  margin:0 0 2rem;padding:0 0 2rem;border-bottom:0.0625rem solid var(--vt-line);scroll-margin-top:5.25rem;
}
.review-body > :last-child{border-bottom:0;padding-bottom:0}
.review-body .review-block > h2,
.review-body .reviews > h2,
.review-body .tested--title{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0 0 0.875rem;color:var(--vt-text)}
.review-body .review-block--text{font-size:1rem;line-height:1.72}
.review-body .review-block--text a{color:var(--vt-link);text-decoration:underline;text-underline-offset:0.125rem}

/* Player reviews, early and on the page's own surfaces. */
.reviews--lede{margin:-0.25rem 0 1rem;color:var(--vt-text-dim)}
.reviews--lede a{color:var(--vt-link);font-weight:700}
.review-body .reviews{margin-top:0}
.review-body .reviews--summary{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg)}
.review-body .reviews--score-count{color:var(--vt-text-faint)}
.review-body .reviews--list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:0.75rem}
.review-body .review-card{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);padding:1rem}
.review-body .review-card--body{color:var(--vt-text-dim)}
.review-body .review-card--name a{color:var(--vt-text)}
.review-body .review-card--name a:hover{color:var(--vt-link)}

.review-proscons .proscons{margin:0}

/* ---------------------------------------------------------- sticky CTA -- */
/* Once the header's button has scrolled away this bar is the page's call to
   action, so it wears the accent in both themes, and it spans the content
   column, edge to edge: it belongs to the review, not to the viewport the
   sidebar also sits in. The button inverts, dark on the accent, because an
   accent button on an accent bar would disappear. */
.review-page .casino-sticky{
  margin:1.75rem 0 0;background:var(--vt-accent);color:var(--vt-accent-ink);
  border-radius:var(--vt-r-lg) var(--vt-r-lg) 0 0;box-shadow:0 -0.625rem 1.875rem rgba(0,0,0,.28);
}
.review-page .casino-sticky--inner{max-width:none;padding:0.75rem 1.25rem}
.review-page .casino-sticky--name strong,
.review-page .casino-sticky--offer strong,
.review-page .casino-sticky--rating em{color:var(--vt-accent-ink)}
.review-page .casino-sticky--offer span,
.review-page .casino-sticky--action small{color:color-mix(in srgb,var(--vt-accent-ink) 76%,transparent)}
.review-page .casino-sticky .rating svg{color:var(--vt-accent-ink)}
.review-page .casino-sticky .rating svg.is-inactive{color:color-mix(in srgb,var(--vt-accent-ink) 30%,transparent)}
.review-page .casino-sticky--logo{border:0.0625rem solid color-mix(in srgb,var(--vt-accent-ink) 18%,transparent)}
.review-page .casino-sticky--action .button{
  background:var(--vt-accent-ink);color:var(--vt-accent);border:0;box-shadow:none;
}
.review-page .casino-sticky--action .button:hover{background:color-mix(in srgb,var(--vt-accent-ink) 86%,#fff 14%);color:var(--vt-accent)}

/* ------------------------------------------------------ review aside -- */
/* On desktop the contents list and the offer share one sticky column, so
   the offer travels down the review in the space beside it instead of a bar
   over the article. Together they fit a laptop screen; if they ever do not,
   the column scrolls inside itself rather than running off the bottom.
   Phones and tablets have no column and keep the bottom bar. */
.review-aside{
  position:sticky;top:calc(var(--vt-top-h) + 1rem);
  display:flex;flex-direction:column;gap:0.75rem;
  max-height:calc(100vh - var(--vt-top-h) - 2rem);overflow:hidden;
}
/* The offer card always shows whole; when the two do not fit the screen it
   is the contents list that gives up height and scrolls inside itself. */
.review-aside .toc{
  position:static;top:auto;flex:0 1 auto;min-height:0;max-height:none;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
@media (min-width:1024px){
  .review-page .casino-sticky{display:none}
}

.review-cta-card{
  display:flex;flex-direction:column;gap:0.625rem;flex:0 0 auto;padding:0.875rem;
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);color:var(--vt-text);
}
.review-cta-card--logo{
  display:grid;place-items:center;height:4.25rem;padding:0.625rem;border-radius:var(--vt-r-sm);text-decoration:none;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
    color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
}
.review-cta-card--head{display:flex;flex-direction:column;align-items:center;gap:0.25rem;text-align:center}
.review-cta-card--name{font-size:1rem;font-weight:800;line-height:1.25;color:var(--vt-text)}
.review-cta-card--rating{display:inline-flex;align-items:center;gap:0.375rem}
.review-cta-card--rating .rating svg{width:0.8125rem;height:0.8125rem}
.review-cta-card--rating em{font-style:normal;font-size:0.8125rem;font-weight:700;color:var(--vt-text)}
.review-cta-card--offer{
  display:flex;flex-direction:column;align-items:center;gap:0.125rem;padding:0.625rem;text-align:center;
  background:var(--vt-raised);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-sm);
}
.review-cta-card--label{font-size:0.65625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vt-text-faint)}
.review-cta-card--offer strong{font-size:1rem;font-weight:800;line-height:1.25;color:var(--vt-text)}
.review-cta-card--sub{font-size:0.78125rem;font-weight:700;color:var(--vt-link)}
.review-cta-card--terms-line{margin-top:0.125rem;font-size:0.71875rem;color:var(--vt-text-dim)}
.review-cta-card--button{width:100%;justify-content:center}
.review-cta-card--small{font-size:0.65625rem;line-height:1.4;color:var(--vt-text-faint);text-align:center}

/* ------------------------------------------------------ byline, one row -- */
/* Every hero's byline is one row the height of the date beside it: a small
   avatar, then "Reviewed by the Velatonmies team" on a single line. The
   avatar was a 32px disc with a second line under the name, which made the
   row twice the height of the date it sits next to. Last in the file, so
   it holds on the front page card and the review facts card too. */
.hero--meta .hero--author{align-items:center;gap:0.4375rem}
.hero--meta .hero--author-avatar{
  width:1.375rem;height:1.375rem;flex:0 0 1.375rem;font-size:0.6875rem;line-height:1;box-shadow:none;
}
.hero--meta .hero--author-avatar img{width:1.375rem;height:1.375rem}
.hero--meta .hero--author-text{flex-direction:row;align-items:center;min-width:0}
.hero--meta .hero--author{max-width:100%}
.hero--meta .hero--author-name{white-space:nowrap;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.hero--meta .hero--author-role{display:none}
.hero--meta .hero--updated + .hero--author::before{height:0.875rem}
/* The front page heading card is 280px of text wide, and its credit is the
   longest one ("Tested and ranked by…"): a point smaller keeps it whole on
   its one line instead of ending in an ellipsis. */
.vt-pagehead .hero--meta .hero--author-name{font-size:0.75rem}

/* ------------------------------------------- review data blocks, themed -- */
/* The data blocks on a review were drawn for a fixed dark plate: "How we
   tested" was a navy card whose heading then took the page's own ink (black
   on grey in the light theme) and lost its side padding to the section rule,
   and the wagering calculator and "The short version" kept the same plate in
   both themes. They now stand on the theme's surfaces like the facts tables
   in the sections below them, and the two tables share one rule set so they
   cannot drift apart again. */
.review-facts dl,
.review-body .tested--rows{
  margin:0;overflow:hidden;
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);
}
.review-facts dl > div,
.review-body .tested--rows > div{
  display:grid;grid-template-columns:1fr;gap:0.125rem;padding:0.6875rem 1rem;
  border-bottom:0.0625rem solid var(--vt-line);
}
.review-facts dl > div:last-child,
.review-body .tested--rows > div:last-child{border-bottom:0;padding-bottom:0.6875rem}
.review-facts dl > div:hover,
.review-body .tested--rows > div:hover{background:var(--vt-hover)}
@media (min-width:640px){
  .review-facts dl > div,
  .review-body .tested--rows > div{grid-template-columns:minmax(0,15em) 1fr;gap:1rem;align-items:baseline}
}
.review-facts dt,
.review-body .tested--rows dt{
  margin:0;font-size:0.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--vt-text-faint);
}
.review-facts dd,
.review-body .tested--rows dd{margin:0;font-size:0.875rem;font-weight:700;line-height:1.45;color:var(--vt-text)}
.review-facts dd a,
.review-body .tested--rows dd a{color:var(--vt-link)}
.review-facts h3{color:var(--vt-text)}

/* How we tested: a section like the others, the lead in body copy, then the table. */
.review-body .tested{background:none;border-radius:0;color:var(--vt-text-dim)}
.review-body .tested--lead{
  margin:0 0 1rem;padding:0;border:0;
  font-size:1rem;line-height:1.72;color:var(--vt-text-dim);
}
.review-body .tested--lead strong{color:var(--vt-text)}
.review-body .tested--lead a{color:var(--vt-link);text-decoration:underline;text-underline-offset:0.125rem}
.review-body .tested--lead a:hover{color:var(--vt-text)}

/* The wagering calculator, on the theme's card with its fields on the canvas. */
.content--calculator{
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);color:var(--vt-text);
}
.content--calculator .content--calculator-title,
.content--main .content--calculator .content--calculator-title{color:var(--vt-text)}
.content--calculator .content--calculator-helper{color:var(--vt-text-dim)}
.content--calculator .content--calculator-block label{color:var(--vt-text-dim)}
.content--calculator .content--calculator-input input,
.content--calculator select{
  background:var(--vt-canvas);border:0.0625rem solid var(--vt-line-strong);color:var(--vt-text);
}
.content--calculator select option{background:var(--vt-surface);color:var(--vt-text)}
.content--calculator .content--calculator-input span{color:var(--vt-text-faint)}
.content--calculator .content--calculator-result{background:var(--vt-raised);border:0.0625rem solid var(--vt-line)}
.content--calculator .content--calculator-result-row{color:var(--vt-text)}
.content--calculator .content--calculator-result-row + .content--calculator-result-row{border-top-color:var(--vt-line)}
.content--calculator .content--calculator-result-row strong{color:var(--vt-text)}
.content--calculator .content--calculator-result-row.is-total strong{color:var(--vt-on-plate-link)}
.section--bg-dark .content--calculator a:not(.button):not(.vt-btn),
.content--calculator a:not(.button):not(.vt-btn){color:var(--vt-on-plate-link)}

/* The short version: the same card, marked by the accent disc, not a plate. */
.content--highlight.is-verdict{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);color:var(--vt-text)}
.content--highlight.is-verdict .content--highlight-icon{background:var(--vt-accent);color:var(--vt-accent-ink)}
.content--highlight.is-verdict .content--highlight-icon svg{color:var(--vt-accent-ink)}
.content--highlight.is-verdict .content--highlight-title{color:var(--vt-link)}
.content--highlight.is-verdict p{color:var(--vt-text)}

/* ------------------------------------------- review payment logos, big -- */
/* The row under a review's payments table inherited the toplist's default:
   pushed to the right edge and drawn at chip size. In a review the logos are
   content, read left to right under the table they belong to, so they start
   at the left and show at a size where the marks can be told apart. */
.review-block .payment-row{
  justify-content:flex-start;flex-wrap:wrap;overflow:visible;gap:0.625rem;margin:1rem 0 0;
}
.review-block .payment-logo img{width:4.125rem;height:2.75rem}
.review-block .payment-logo.is-text{min-height:2.75rem;padding:0 1rem;font-size:0.875rem}
.review-block .payment-row--more{height:2.75rem;padding:0 0.875rem;font-size:0.875rem}

/* ------------------------------------------------- slot cover, no strip -- */
/* Inside a review the cover image picked up the article's own image margin,
   16px above and below, which pushed the picture down its 3:4 frame and left
   the frame's dark ground showing as a strip across the top. */
.slot-tile .slot-tile--image img{margin:0}

/* ------------------------------------------------------ studio cards -- */
/* Studio logos are drawn white, so a studio card is a dark plate in both
   themes: raised grey on the dark page, the dark plate on the light one.
   The logo sits centred with the studio name and its game count under it;
   a studio without a logo shows its name as the mark. */
.provider-dir{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:0.75rem}
.provider-dir--item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;
  min-height:7.25rem;padding:1rem 0.75rem;text-align:center;text-decoration:none;
  background:var(--vt-raised);border:0.0625rem solid rgba(255,255,255,.1);border-radius:var(--vt-r-md);
  color:#fff;box-shadow:none;transition:border-color .16s ease,transform .16s ease;
}
:root[data-theme="light"] .provider-dir--item{background:var(--vt-plate);border-color:rgba(255,255,255,.08)}
.provider-dir--item:hover{border-color:var(--vt-accent);box-shadow:none;transform:translateY(-0.125rem);text-decoration:none}
.provider-dir--item:focus-visible{outline:0.125rem solid var(--vt-accent);outline-offset:0.125rem}
.provider-dir .provider-dir--logo{display:grid;place-items:center;width:100%;height:2.75rem;padding:0;background:none;box-shadow:none}
.provider-dir .provider-dir--logo img{max-width:80%;max-height:2.5rem;width:auto;height:auto;object-fit:contain}
.provider-dir .provider-dir--name{font-size:0.875rem;font-weight:700;line-height:1.25;color:#fff}
.provider-dir .provider-dir--count{font-size:0.75rem;color:rgba(255,255,255,.66)}
.provider-dir--item:not(:has(.provider-dir--logo)) .provider-dir--name{font-size:1rem;font-weight:800;letter-spacing:-.01em}

/* ------------------------------------------------------- sort controls -- */
/* Every "Sort by" bar on the site: the casino grids, games, studios, big wins
   and the toplist. The label used to sit inside the pill track, two pixels off
   the first option, and the current option was a raised grey surface that read
   as one more button. The track now holds only the options, the label stands
   outside it with room to breathe, and the current option takes the accent,
   which is what the site already uses to say "this one" everywhere else. */
.slots--sort{gap:0.75rem;padding:0;background:none;border:0;border-radius:0}
.slots--sort-label{margin:0;font-size:0.8125rem;font-weight:600;color:var(--vt-text-dim);white-space:nowrap}

.slots--sort-buttons,
.toplist-sort{
  display:inline-flex;align-items:center;gap:0.25rem;
  padding:0.25rem;border-radius:var(--vt-r-md);
  background:var(--vt-hover);border:0.0625rem solid var(--vt-line);
}
.slots--sort-button,
.toplist-sort--button{
  height:2rem;padding:0 0.875rem;gap:0.375rem;
  border:0.0625rem solid transparent;border-radius:var(--vt-r-xs);
  background:transparent;color:var(--vt-text-dim);box-shadow:none;
}
.slots--sort-button:hover,
.toplist-sort--button:hover,
.toplist-section .toplist-sort--button:hover{background:var(--vt-line);color:var(--vt-text);border-color:transparent}

.slots--sort-button[aria-pressed="true"],
.slots--sort-button.is-active,
.toplist-sort--button[aria-pressed="true"],
.toplist-section .toplist-sort--button[aria-pressed="true"],
.hero .toplist-sort--button[aria-pressed="true"]{
  background:var(--vt-accent);color:var(--vt-accent-ink);
  border-color:var(--vt-accent-edge);box-shadow:none;
  font-weight:800;letter-spacing:.005em;
}
.slots--sort-button[aria-pressed="true"]:hover,
.toplist-sort--button[aria-pressed="true"]:hover{background:var(--vt-surface);color:var(--vt-text)}
.slots--sort-button .slots--sort-arrow{opacity:.45}
.slots--sort-button[aria-pressed="true"] .slots--sort-arrow{opacity:1}
.slots--sort-button:focus-visible,
.toplist-sort--button:focus-visible{outline:none;box-shadow:var(--vt-ring)}

/* Phones: the label shares the count's row and the options scroll in their
   own full-width track (see _slots.css), so the track just has to fill it. */
@media screen and (max-width:47.99em){
  .slots--sort-buttons{display:flex;width:100%}
}

/* --------------------------------------------------------- single game -- */
/* The slot page takes the review page's top: the header on its artwork, and
   the numbers on a plain card beside it (.review-facts-card, shared). The
   seven glass boxes it replaces sat over the lit half of the picture, and the
   bet range broke onto a second line inside its box. */
.game-hero-row > .hero{margin:0}
.game-hero--head{display:grid;gap:0.625rem;min-width:0;justify-items:start}
.hero--game .game-hero--head h1{margin:0}
.hero--game .game-hero--provider{margin:0;font-size:0.9375rem;line-height:1.3;color:var(--vt-on-plate-dim)}
.hero--game .game-hero--rating{margin:0;gap:0.375rem 0.75rem;font-size:0.9375rem;line-height:1.2}
.hero--game .game-hero--rating .rating svg{width:0.9375rem;height:0.9375rem}
.hero--game .game-hero--rating a{font-size:0.9375rem;font-weight:700}
.hero--game .game-hero--tags{margin:0.125rem 0 0}

/* An odd number of facts leaves the last one alone on its row; it takes the
   whole row rather than sitting beside an empty cell. */
.review-facts-card .review-hero--fact:last-child:nth-child(odd){grid-column:1/-1}

/* The phone tile rule hides .casino-tile--tags in the toplist; the slot's
   theme tags in its own header are not tile clutter and stay. */
.hero--game .game-hero--tags{display:flex}
/* Side by side needs more room than on a review: the cover takes a column of
   the header, so under 1280px the title ran to four lines and the bet range
   wrapped inside its cell. Until then the facts card sits under the header. */
@media (min-width:1024px) and (max-width:1279px){
  .game-hero-row{grid-template-columns:minmax(0,1fr)}
}

/* ----------------------------------------------------- header channels -- */
/* The club's channels in the bar, wherever the sidebar is fixed. They start
   on the content column's edge, the line the slider and every hero start on.
   The brand slot already ends on the sidebar's edge, so the list only has to
   travel the page gutter, less the brand's margin and the bar's 12px gap. */
.vt-top--social{display:none}
@media (min-width:901px){
  .vt-top--social{
    display:flex;align-items:center;gap:0.375rem;
    margin:0 0 0 calc(var(--vt-pad) - var(--vt-s-4) - 0.75rem);padding:0;list-style:none;
  }
}
.vt-top--social li{margin:0}
.vt-top--social-link,
.vt-foot--social-link{
  display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border-radius:var(--vt-r-md);background:var(--vt-hover);color:var(--vt-text-dim);
  box-shadow:inset 0 0 0 0.0625rem var(--vt-line);text-decoration:none;
  transition:background .14s ease,color .14s ease;
}
.vt-top--social-link:hover,
.vt-foot--social-link:hover{background:var(--vt-line);color:var(--vt-text);text-decoration:none}
.vt-top--social-link:focus-visible,
.vt-foot--social-link:focus-visible{outline:none;box-shadow:var(--vt-ring)}
.vt-top--social-link svg,
.vt-foot--social-link svg{width:1rem;height:1rem}


/* ---------------------------------------------------- header shortcuts -- */
/* Giveaways, store and bonuses are .vt-btn--primary.vt-btn--sm, the same
   button as Sign in, so height, type, fill and focus come from there. A
   hairline with room either side separates them from the account, which
   would otherwise read as a fourth gold shortcut. */
.vt-top--quick .vt-icon{flex:0 0 auto}
.vt-top--divider{flex:0 0 auto;width:0.0625rem;height:1.375rem;margin:0 0.5rem;background:var(--vt-line-strong)}
/* Under 1024px the labels would crowd the bar beside the channels, the
   Finnish sign-in button most of all; the buttons keep their icon and size. */
@media (max-width:1023px){
  .vt-top--quick-label{display:none}
  .vt-top--end > .vt-top--quick{width:2rem;padding:0;justify-content:center}
}
@media (max-width:640px){
  .vt-top--end > .vt-top--quick,
  .vt-top--divider{display:none}
}

/* ------------------------------------------------------ buttons as links -- */
/* The legacy base sheet turns every link orange and underlined on hover.
   Most buttons here are links, and the gold one only darkens its fill on
   hover, so its label went orange on orange with a line through the middle.
   A button keeps its own ink on hover and focus, and no button-shaped link is
   ever underlined; plain text links keep the base behaviour. */
a.vt-btn:hover,a.vt-btn:focus-visible,
a.vt-icon-btn:hover,a.vt-chip:hover,
a.button:hover,a.vt-skip:hover,a.vt-skip:focus{text-decoration:none}
/* Doubled class so it also outranks context rules such as the store hero's
   `.hero a:not(.button)`, which gave "Sign in to start earning" pale ink on
   gold even at rest. */
a.vt-btn.vt-btn--primary,
a.vt-btn.vt-btn--primary:hover,a.vt-btn.vt-btn--primary:focus-visible,
a.vt-skip:hover,a.vt-skip:focus{color:var(--vt-accent-ink)}

/* ------------------------------------------------- front page slot rail -- */
/* "Free slot demos" uses the games archive's .slot-tile. The rail sizes it to
   the archive's column width, and the tiles stretch to one height. */
.vt-rail--slots{--card-w:200px}
.vt-rail--slots > .slot-tile{min-width:0;height:100%}
@media (max-width:640px){
  .vt-rail--slots{--card-w:160px}
}

/* ------------------------------------------- toplist row, desktop, v2 -- */
/* The facts strip (minimum deposit, withdrawal, payments) is a row of its own
   under the content and both buttons, full width and in both states, instead
   of a line squeezed under the pros beside the buttons. The pros stack, one
   reason per line. Inside the row there is one spacing scale: 16px to the
   edges, 10px between the parts. Any height the square asks for beyond the
   content goes to the content, so the strip and the toggle always sit flush
   at the bottom rather than floating over a gap. */
@media screen and (min-width:1024px){
  .casino-tile--main > .casino-tile--content{flex:1 1 auto;padding:1rem!important;gap:1.25rem;align-items:center}
  .casino-tile--panes{align-self:stretch;justify-content:center;gap:0.625rem}
  .casino-tile--head .casino-tile--name{margin:0 0 0.25rem}
  .casino-tile--head .casino-tile--rating{margin:0}
  .casino-tile--summary{gap:0.625rem}
  .casino-tile--general{display:flex;flex-direction:column;gap:0.625rem}
  .casino-tile--pros{flex-direction:column;flex-wrap:nowrap;gap:0.25rem}
  .casino-tile--pros li{max-width:100%;margin:0;line-height:1.5}
  .casino-tile--tags{margin:0}

  .casino-tile--main > .casino-tile--features{
    display:flex;flex-wrap:nowrap;align-items:center;gap:0 1.75rem;
    margin:0;padding:0.625rem 1rem;border-top:0.0625rem solid var(--vt-line);overflow:hidden;
  }
  .casino-tile--main > .casino-tile--features > .cell{margin:0;width:auto;max-width:none}
  .casino-tile--main > .casino-tile--features > .cell.shrink{flex:0 0 auto}
  /* The strip has the room now that it spans the row, so the logos show from
     1024px up (the legacy sheet dropped them below 1240px). */
  .casino-tile--main > .casino-tile--features > .casino-tile--payrow{display:block;flex:1 1 auto;min-width:0}
  .casino-tile--main > .casino-tile--features .casino-tile--feature{padding-right:0}
  .casino-tile--main > .casino-tile--showmore-toggle{margin-top:0}

  /* Two groups left in the details (limits, basics), side by side. */
  .casino-tile--details{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The name on the review's side card is a link now, out to the casino like
   the logo and the button beside it; it keeps the card's ink. */
.review-cta-card--name a{color:inherit;text-decoration:none}
.review-cta-card--name a:hover{color:var(--vt-link);text-decoration:none}

/* ------------------------------------------------------ phone menu list -- */
/* The full-screen menu listed its sections as a two-column grid of tiles,
   icon over label, which halved the room each label had and made the list
   read in a zigzag. One column of rows instead: icon beside label, a 48px
   row that is easy to hit, and the labels a size up. */
@media (max-width:900px){
  .vt-side--scroll .vt-nav{display:flex;flex-direction:column;gap:0.375rem}
  .vt-nav--item,
  .vt-nav--plain a{
    flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:0.75rem;
    min-height:3rem;padding:0 0.875rem;
  }
  .vt-nav--icon{width:1.25rem}
  .vt-nav--text{font-size:0.9375rem;font-weight:600}
}

/* -------------------------------------------------------- announcement -- */
/* inc/announce.php: an open giveaway or one casino's offer, for signed-out
   visitors. A desktop gets a centred modal over a dimmed page, the picture or
   the operator's logo plate on the left and the offer on the right. A phone
   gets a sheet on the bottom edge that leaves the page usable: thumbnail and
   title on one line, the text clamped, both buttons across the width. */
html:has(.vt-announce:modal){overflow:hidden;scrollbar-gutter:stable}
.vt-announce{
  padding:0;border:0;margin:auto;background:transparent;color:var(--vt-text);
  width:min(46rem,calc(100vw - 2rem));max-width:none;max-height:none;overflow:visible;
}
.vt-announce::backdrop{background:rgba(8,8,10,.62)}
.vt-announce--panel{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line-strong);
  border-radius:var(--vt-r-xl);box-shadow:var(--vt-shadow-pop);overflow:hidden;
}
.vt-announce--panel.has-media{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
.vt-announce--media{position:relative;min-height:19rem;background:var(--vt-plate)}
.vt-announce--media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt-announce--media.is-brand{
  display:grid;place-items:center;padding:1.75rem;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
    color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
}
.vt-announce--media.is-brand img{position:static;width:auto;height:auto;max-width:80%;max-height:5.5rem;object-fit:contain}
.vt-announce--wordmark{color:#fff;font-size:1.375rem;font-weight:800;text-align:center}
.vt-announce--body{display:flex;flex-direction:column;align-items:flex-start;gap:0.625rem;padding:2rem 2rem 1.625rem}
.vt-announce--kicker{
  margin:0;padding:0.25rem 0.625rem;border-radius:62.4375rem;line-height:1.4;
  background:var(--vt-accent);color:var(--vt-accent-ink);
  font-size:0.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.vt-announce--name{display:flex;align-items:center;gap:0.5rem;margin:0.125rem 0 0;font-size:0.875rem;font-weight:700;color:var(--vt-text-dim)}
.vt-announce--name .rating svg{width:0.8125rem;height:0.8125rem}
.vt-announce--title{margin:0;padding-right:1.75rem;font-size:1.625rem;font-weight:800;letter-spacing:-.02em;line-height:1.18;color:var(--vt-text)}
.vt-announce--text{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--vt-text-dim)}
.vt-announce--facts{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.125rem 0 0;padding:0;list-style:none}
.vt-announce--facts li{
  margin:0;padding:0.25rem 0.625rem;border-radius:var(--vt-r-sm);
  background:var(--vt-hover);border:0.0625rem solid var(--vt-line);
  font-size:0.78125rem;font-weight:600;color:var(--vt-text);
}
.vt-announce--actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem;align-self:stretch}
.vt-announce--actions .vt-btn{min-width:10rem;justify-content:center}
.vt-announce--terms{margin:0;font-size:0.6875rem;line-height:1.4;color:var(--vt-text-faint)}
.vt-announce--close{position:absolute;top:0.625rem;right:0.625rem;z-index:1;width:2.25rem;height:2.25rem;background:var(--vt-hover);color:var(--vt-text)}
.vt-announce--close:hover{background:var(--vt-line);color:var(--vt-text)}
@media (prefers-reduced-motion:no-preference){
  .vt-announce:modal .vt-announce--panel{animation:vt-modal-in .2s var(--ease,ease) both}
  .vt-announce:modal::backdrop{animation:vt-modal-fade .2s ease both}
}

@media (max-width:640px){
  .vt-announce{position:fixed;inset:auto 0 0 0;z-index:90;width:100%;margin:0}
  .vt-announce--panel,
  .vt-announce--panel.has-media{
    grid-template-columns:3.5rem minmax(0,1fr);gap:0.25rem 0.75rem;align-items:center;
    padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-width:0.0625rem 0 0;border-radius:var(--vt-r-lg) var(--vt-r-lg) 0 0;
    box-shadow:0 -0.75rem 2rem -0.75rem rgba(0,0,0,.55);
  }
  .vt-announce--panel:not(.has-media){grid-template-columns:minmax(0,1fr)}
  .vt-announce--media{grid-row:1 / span 2;width:3.5rem;height:3.5rem;min-height:0;border-radius:var(--vt-r-sm);overflow:hidden}
  .vt-announce--media.is-brand{padding:0.375rem}
  .vt-announce--media.is-brand img{max-width:100%;max-height:100%}
  .vt-announce--wordmark{font-size:0.6875rem}
  .vt-announce--body{display:contents}
  .vt-announce--kicker{justify-self:start;align-self:end;font-size:0.625rem;padding:0.1875rem 0.5rem}
  .vt-announce--name,
  .vt-announce--facts{display:none}
  .vt-announce--title{align-self:start;padding-right:2.25rem;font-size:1.0625rem;line-height:1.25}
  .vt-announce--text,
  .vt-announce--actions,
  .vt-announce--terms{grid-column:1 / -1}
  .vt-announce--text{
    margin-top:0.375rem;font-size:0.875rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .vt-announce--actions{margin-top:0.5rem}
  .vt-announce--actions .vt-btn{flex:1 1 0;min-width:0}
  .vt-announce--terms{margin-top:0.375rem}
  .vt-announce--close{top:0.5rem;right:0.5rem}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .vt-announce[open] .vt-announce--panel{animation:vt-sheet-in .24s var(--ease,ease) both}
}
@keyframes vt-sheet-in{from{transform:translateY(100%)}to{transform:none}}

/* ------------------------------------------------ front page store rail -- */
/* "Rewards in the store": the store's own card, in a rail at the width the
   store grid gives it, every card one height. */
.vt-rail--store{--card-w:240px}
.vt-rail--store > .dz-reward{height:100%}
@media (max-width:640px){
  .vt-rail--store{--card-w:200px}
}

/* ------------------------------------------------ section head actions -- */
/* "See all" and, on a rail, a back and a forward arrow beside it. The arrows
   show only when the rail overflows, and each dims at its own end
   (initRailArrows). On a phone the head stacks, so the actions take the
   full width: the link at the start, the arrows at the end. */
.vt-sec--actions{display:flex;align-items:center;gap:0.75rem;flex:0 0 auto}
.vt-sec--arrows{display:flex;gap:0.375rem}
.vt-sec--arrow{
  display:grid;place-items:center;width:2.125rem;height:2.125rem;padding:0;
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);
  background:var(--vt-surface);color:var(--vt-text);cursor:pointer;
  transition:background .14s ease,border-color .14s ease,opacity .14s ease;
}
.vt-sec--arrow:hover:not(:disabled){background:var(--vt-hover);border-color:var(--vt-line-strong)}
.vt-sec--arrow:focus-visible{outline:none;box-shadow:var(--vt-ring)}
.vt-sec--arrow:disabled{opacity:.38;cursor:default}
@media (max-width:640px){
  .vt-sec--head > .vt-sec--actions{align-self:stretch;justify-content:space-between}
}

/* The front page's store cards are slim (no description, no rank line), so
   the button is what is left under the points: a size down and tight enough
   that "Sign in to redeem" stays on one line in English. */
.vt-rail--store .dz-reward--body{gap:0.375rem}
.vt-rail--store .dz-reward--action .button{
  min-height:2.375rem;padding:0.375rem 0.625rem;margin:0;
  font-size:0.8125rem;line-height:1.2;white-space:normal;
}

/* ------------------------------------------- toplist square, no script -- */
/* initTileSquares() writes each row's height into --tile-brand-w on its own
   brand panel. Where that never happens (the script fails, or a row arrives
   after it ran), the width fell back to a legacy :root value of 10.625rem,
   which on a large screen made a 213px panel beside a 380px row. Cleared at
   the row, the panel falls back to --tile-sq instead: near enough square. */
@media screen and (min-width:1024px){
  .casino-tile{--tile-brand-w:initial}
}

/* ======================================================= single game v2 == */
/* The slot's cover fills the header card (single-igp_game.php sets it as the
   hero's --hero-art); the old cover column and the studio logo above the
   title are gone, so the heading block runs the card's width. */
.hero--game .game-hero--head{max-width:44rem}

/* --------------------------------------------------------- intro band -- */
/* Under the header: the studio and both scores on the left, the demo (or the
   market's top casino) on the right, on the theme's own surfaces. */
.game-intro--grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .game-intro--grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .game-intro--grid.is-solo{grid-template-columns:minmax(0,1fr)}
}
.game-intro--card{
  display:flex;flex-direction:column;gap:1.125rem;min-width:0;padding:1.5rem 1.75rem;
  background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-xl);color:var(--vt-text);
}
.game-intro--label{font-size:0.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vt-text-faint)}
.game-intro--studio{display:flex;align-items:center;gap:1.125rem;color:inherit;text-decoration:none}
.game-intro--studio:hover{text-decoration:none}
/* Studio logos are drawn in white, so the plate is dark in both themes. */
.game-intro--studio-logo{
  display:grid;place-items:center;flex:0 0 auto;width:11rem;height:4.75rem;padding:0.75rem 1.125rem;
  border-radius:var(--vt-r-md);background:var(--vt-plate);color:#fff;
}
.game-intro--studio-logo img{max-width:100%;max-height:2.9rem;width:auto;height:auto;object-fit:contain}
.game-intro--studio-logo.is-text{font-size:0.9375rem;font-weight:800;text-align:center;line-height:1.2}
.game-intro--studio-text{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.game-intro--studio-text strong{font-size:1.1875rem;font-weight:800;color:var(--vt-text)}
.game-intro--studio:hover .game-intro--studio-text strong{color:var(--vt-link)}
.game-intro--studio-count{font-size:0.8125rem;color:var(--vt-text-dim)}
.game-intro--ratings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:1.125rem;border-top:0.0625rem solid var(--vt-line)}
.game-intro--rating{display:flex;flex-direction:column;align-items:flex-start;gap:0.3125rem;min-width:0}
.game-intro--rating + .game-intro--rating{padding-left:1.5rem;border-left:0.0625rem solid var(--vt-line)}
.game-intro--value{display:flex;align-items:baseline;gap:0.3125rem}
.game-intro--value strong{font-size:2.125rem;font-weight:800;line-height:1;color:var(--vt-text)}
.game-intro--value span{font-size:0.875rem;color:var(--vt-text-dim)}
.game-intro--rating .rating svg{width:1rem;height:1rem}
.game-intro--rating a{font-size:0.8125rem;font-weight:700;color:var(--vt-link)}
.game-intro--empty{font-size:0.875rem;color:var(--vt-text-dim)}
.game-intro--author{margin:0;font-size:0.8125rem;color:var(--vt-text-dim)}
.game-intro--terms{margin:0;font-size:0.71875rem;line-height:1.4;color:var(--vt-text-faint)}
@media (max-width:640px){
  .game-intro--card{padding:1.125rem}
  .game-intro--studio-logo{width:8.5rem;height:4rem}
  .game-intro--rating + .game-intro--rating{padding-left:1rem}
}

/* ----------------------------------------------------- player reviews -- */
/* Cards take the slide's height now that game reviews carry their category
   ratings. */
.game-community--reviews .review-card{height:auto}
.review-card--criteria{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.25rem 1rem;
  margin:0.625rem 0 0;padding:0.625rem 0 0;list-style:none;border-top:0.0625rem solid var(--vt-line);
}
.review-card--criteria li{display:flex;justify-content:space-between;gap:0.5rem;margin:0;font-size:0.75rem;color:var(--vt-text-dim)}
.review-card--criteria strong{font-weight:800;color:var(--vt-text)}

/* The summary beside the form: the overall score, then each category's
   average, instead of a one-to-five star spread. */
.game-community--summary{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);color:var(--vt-text)}
.game-community--average strong{color:var(--vt-text)}
.game-community--average span,
.game-community--count{color:var(--vt-text-dim)}
.game-community--summary .rating{justify-content:center}
.game-community--criteria{
  display:flex;flex-direction:column;gap:0.75rem;margin:0;padding:1rem 0 0;list-style:none;
  border-top:0.0625rem solid var(--vt-line);text-align:left;
}
.game-community--criteria li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.375rem 0.625rem;margin:0}
.game-community--criteria-label{font-size:0.8125rem;font-weight:600;color:var(--vt-text)}
.game-community--criteria-value{font-size:0.8125rem;font-weight:800;color:var(--vt-text)}
.game-community--criteria .game-community--bar{grid-column:1 / -1}
.game-community--bar{background:var(--vt-line)}
.game-community--bar span{background:var(--vt-accent)}
.game-community--bar-label,
.game-community--bar-n{color:var(--vt-text-dim)}

/* The review form on the theme's surfaces, not a fixed brand-blue card. */
.game-community--form .review-form{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);color:var(--vt-text);box-shadow:none}
.game-community--form .review-form--title{color:var(--vt-text)}
.game-community--form .review-form--title svg{color:currentColor}
.game-community--form .review-form--reward{background:var(--vt-accent-wash);color:var(--vt-link);border:0.0625rem solid var(--vt-accent-line)}
.game-community--form .dz-form--full > span,
.game-community--form .review-form--stars legend,
.game-community--form .review-form--criteria legend{color:var(--vt-text);font-weight:700}
.game-community--form .dz-form--full em{color:var(--vt-text-faint)}
.game-community--form input[type=text],
.game-community--form textarea{background:var(--vt-canvas);color:var(--vt-text);border:0.0625rem solid var(--vt-line)}
.game-community--form input[type=text]:focus,
.game-community--form textarea:focus{border-color:var(--vt-accent);outline:0.125rem solid var(--vt-accent);outline-offset:0.0625rem}
.game-community--form .star-input label{color:var(--vt-line-strong)}
.game-community--form .star-input label:hover,
.game-community--form .star-input label:hover ~ label,
.game-community--form .star-input input:checked ~ label{color:var(--vt-link)}
.game-community--form .review-form--locked-note{color:var(--vt-text-dim)}
.review-form--criteria{border:0;margin:0 0 1rem;padding:0}
.review-form--criteria legend{margin:0 0 0.5rem;padding:0;font-size:0.8125rem}
.review-form--criteria-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem}
.review-form--criterion{
  display:flex;align-items:center;justify-content:space-between;gap:0.625rem;min-width:0;padding:0.5rem 0.75rem;
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);background:var(--vt-canvas);
}
.review-form--criterion-label{font-size:0.8125rem;font-weight:700;color:var(--vt-text)}
@media (max-width:640px){.review-form--criteria-grid{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------ editorial slot review -- */
/* One colour system with the rest of the page: the verdict and the maths on
   the theme's surfaces, the score on the accent, the text at full width. */
.slot-review .content--main > :is(p,ul,ol,dl,blockquote,h2,h3,h4){max-width:none}
.slot-review--byline{color:var(--vt-text-dim)}
.slot-review--verdict{background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);padding:1.125rem 1.375rem}
.slot-review--score{background:var(--vt-accent);color:var(--vt-accent-ink);border-radius:var(--vt-r-md)}
.slot-review--verdict-line{color:var(--vt-text)}
.slot-review--shot img{border-color:var(--vt-line)}
.slot-review--features li{background:var(--vt-surface);border-color:var(--vt-line);color:var(--vt-text-dim)}
.slot-review--maths{margin:0;padding:1rem 1.125rem;background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg)}
.slot-review--maths-title{margin:0 0 0.5rem;color:var(--vt-text-faint)}
.slot-review--maths dl{margin:0}
.slot-review--maths dl > div{display:flex;justify-content:space-between;gap:0.75rem;padding:0.4375rem 0;border-top:0.0625rem solid var(--vt-line)}
.slot-review--maths dl > div:first-child{border-top:0}
.slot-review--maths dt{font-size:0.8125rem;color:var(--vt-text-dim)}
.slot-review--maths dd{margin:0;font-size:0.8125rem;font-weight:700;color:var(--vt-text);text-align:right}
/* The contents and the maths travel down the review together. */
@media (min-width:1024px){
  .slot-review--aside{
    position:sticky;top:calc(var(--vt-top-h) + 1.25rem);
    display:flex;flex-direction:column;gap:1rem;
    max-height:calc(100vh - var(--vt-top-h) - 2.5rem);
  }
  .slot-review--aside .toc{position:static;min-height:0;overflow:auto;margin:0}
  .slot-review--aside .slot-review--maths{flex:0 0 auto}
}

/* ------------------------------------------------ review cards and form -- */
/* A game review card's headline sat flush under its category ratings. */
.review-card--criteria + .review-card--title{margin-top:0.75rem}
/* Signed out, the submit is a quiet, clearly unavailable control on the
   theme's surfaces, and the sign-in link beside it reads as a link. */
.review-form--locked .button[disabled],
.game-community--form .review-form--locked .button[disabled]{
  opacity:1;background:var(--vt-hover);border:0.0625rem solid var(--vt-line);color:var(--vt-text-dim);box-shadow:none;
}
.review-form .dz-linkbutton{color:var(--vt-link)}
.review-form .dz-linkbutton:hover{color:var(--vt-text)}

/* ------------------------------------------------- slot cover in hero -- */
/* The cover twice: blurred to fill the card behind the title, and whole on
   the right as a poster, so the artwork is readable and nothing is cropped. */
.hero--game.has-cover::before{filter:blur(1.125rem) saturate(1.15);transform:scale(1.15)}
.hero--game.has-cover > .grid-container{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;align-items:center;
}
.hero--game.has-cover > .grid-container > *{grid-column:1}
.hero--game.has-cover > .grid-container > .game-hero--poster{grid-column:2;grid-row:1 / span 2;align-self:center}
.game-hero--poster{
  display:block;width:clamp(7.5rem,12vw,12.5rem);aspect-ratio:3 / 4;overflow:hidden;
  border-radius:var(--vt-r-md);box-shadow:0 1.125rem 2.5rem -1.125rem rgba(0,0,0,.85),0 0 0 0.0625rem rgba(255,255,255,.14);
}
.game-hero--poster img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){
  .hero--game.has-cover > .grid-container{column-gap:0.875rem}
  .game-hero--poster{width:5.5rem}
}

/* -------------------------------------------------------- game player -- */
/* The play card is a player: 16:9, filled with the cover, one play button.
   A slot cover carries its title in the bottom quarter, so the frame shows the
   artwork above it. Everything on it is one link, to the demo or to the
   market's top casino. */
.game-intro--scores{justify-content:space-between}
.game-intro--play{display:flex;flex-direction:column;gap:0.625rem;min-width:0}
.game-player{
  position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:16 / 9;overflow:hidden;
  border-radius:var(--vt-r-xl);background:var(--vt-plate);color:#fff;text-decoration:none;
  box-shadow:0 0 0 0.0625rem var(--vt-line);
}
.game-player:hover{color:#fff;text-decoration:none}
.game-player:focus-visible{outline:none;box-shadow:var(--vt-ring)}
.game-player--cover{
  position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
}
.game-player--shade{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,11,16,.62) 0%,rgba(10,11,16,.12) 32%,rgba(10,11,16,.18) 62%,rgba(10,11,16,.88) 100%);
}
.game-player--top{position:absolute;top:1rem;left:1.25rem;right:1.25rem;display:flex;flex-direction:column;gap:0.125rem}
.game-player--kicker{font-size:0.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.game-player--title{font-size:1.3125rem;font-weight:800;line-height:1.2;color:#fff;text-shadow:0 0.0625rem 0.75rem rgba(0,0,0,.5)}
.game-player--button{
  position:absolute;left:50%;top:50%;display:grid;place-items:center;width:5.25rem;height:5.25rem;border-radius:50%;
  background:var(--vt-accent);color:var(--vt-accent-ink);transform:translate(-50%,-50%);
  box-shadow:0 0.75rem 1.875rem -0.5rem rgba(0,0,0,.75),0 0 0 0.5rem rgba(255,255,255,.16);
  transition:transform .16s ease,box-shadow .16s ease;
}
.game-player--button svg{width:2.125rem;height:2.125rem;margin-left:0.25rem}
.game-player:hover .game-player--button,
.game-player:focus-visible .game-player--button{
  transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0.75rem 1.875rem -0.5rem rgba(0,0,0,.75),0 0 0 0.75rem rgba(255,255,255,.22);
}
.game-player--bottom{
  position:absolute;left:1rem;right:1rem;bottom:0.875rem;
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
.game-player--casino{display:flex;align-items:center;gap:0.625rem;min-width:0}
.game-player--logo{
  display:grid;place-items:center;flex:0 0 auto;width:4.75rem;height:2.75rem;padding:0.3125rem 0.5rem;border-radius:var(--vt-r-sm);
  font-size:0.6875rem;font-weight:800;text-align:center;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tint,#3a2b52) 88%,#fff 12%),
    color-mix(in srgb,var(--tint,#3a2b52) 72%,#000 28%));
  box-shadow:0 0 0 0.0625rem rgba(255,255,255,.14);
}
.game-player--logo img{max-width:100%;max-height:1.8rem;width:auto;height:auto;object-fit:contain}
.game-player--offer{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.game-player--offer em{font-style:normal;font-size:0.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.game-player--offer strong{font-size:0.9375rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-player--note{font-size:0.8125rem;font-weight:600;color:rgba(255,255,255,.85)}
.game-player--cta{
  flex:0 0 auto;padding:0.5rem 0.875rem;border-radius:62.4375rem;font-size:0.8125rem;font-weight:800;color:#fff;
  background:rgba(10,11,16,.72);box-shadow:inset 0 0 0 0.0625rem rgba(255,255,255,.2);
}
.game-player:hover .game-player--cta{background:var(--vt-accent);color:var(--vt-accent-ink);box-shadow:none}
.game-intro--real{align-self:flex-start;font-size:0.8125rem;font-weight:700;color:var(--vt-link)}
@media (max-width:640px){
  .game-player--button{width:4rem;height:4rem}
  .game-player--button svg{width:1.625rem;height:1.625rem}
  .game-player--title{font-size:1.0625rem}
  .game-player--cta{display:none}
  .game-player--offer strong{font-size:0.8125rem}
}

/* ---------------------------------- player reviews and wins, sliders -- */
/* On a desktop the reviews show three cards and the edge of a fourth, so the
   row reads as a slider at any screen width. On a phone both sliders show one
   whole card at the content width with the arrows under it: the shared 85%
   card left a gap beside it and looked cut off. */
@media (min-width:1024px){
  .game-community--reviews .carousel--slide{width:calc((100% - var(--gutter) * 3) / 3.3)}
}
@media (max-width:639px){
  .game-community--reviews .carousel--slide,
  .game-wins .carousel--slide{width:100%}
}

/* The criterion rows' stars sat high: the form's label rule gives every label
   a bottom margin, the star labels included. */
.review-form--criterion .star-input{align-items:center}
.review-form--criterion .star-input label{margin:0}
.review-form--stars .star-input label{margin-bottom:0}

/* On a wide screen the player column stops growing: at 2000px a half-width
   16:9 frame was over 500px tall and left the scores card beside it mostly
   empty. The scores card takes the rest of the row instead. */
@media (min-width:1700px){
  .game-intro--grid{grid-template-columns:minmax(0,1fr) 44rem}
  .game-intro--grid.is-solo{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------ studio description -- */
/* In the scores card the studio's description fills the space beside the
   player on a desktop. A phone stacks the card over the player, so there is
   no gap to fill and it stays off. On the studio page it sits under the logo
   and figures as its own card. */
.game-intro--studio-wrap{display:flex;flex-direction:column;gap:0.875rem;min-width:0}
.game-intro--studio-about{display:none}
@media (min-width:1024px){
  .game-intro--studio-about{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden;
    margin:0;font-size:0.9375rem;line-height:1.6;color:var(--vt-text-dim);
  }
}
.provider-lead .provider-about{
  flex:1 1 100%;padding:1.125rem 1.375rem;background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);
}
.provider-about--title{margin:0 0 0.375rem;font-size:1.0625rem;font-weight:800;line-height:1.3;color:var(--vt-text)}
.provider-about p{margin:0;font-size:0.9375rem;line-height:1.65;color:var(--vt-text-dim)}
/* Studio logos are white, so in the light theme the logo beside the figures
   sits on the dark plate the studio directory cards use. */
:root[data-theme="light"] .provider-lead .provider-head--logo{background:var(--vt-plate);border-radius:var(--vt-r-md)}
.provider-about p.provider-about--link{margin-top:0.625rem}
.provider-about--link a{font-weight:700;color:var(--vt-link)}

/* ------------------------------------------------------ author profiles -- */
/* A portrait now, not a cut-out character: the header shows it at a size a
   face can be recognised at, 3:4 beside the name, and the team page crops
   each photo to the same frame instead of fitting it to the card's height. */
.hero--profile .author-head{gap:1.75rem;align-items:flex-end}
.hero--profile .author-head--art{width:11.75rem;height:auto;aspect-ratio:3 / 4;border-radius:var(--vt-r-lg);box-shadow:0 1.125rem 2.5rem -1.125rem rgba(0,0,0,.7),0 0 0 0.0625rem rgba(255,255,255,.12)}
.hero--profile .author-head--art img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
@media (max-width:640px){
  .hero--profile .author-head{gap:1rem;align-items:center}
  .hero--profile .author-head--art{width:7rem}
}
.author-card--art{aspect-ratio:4 / 5;align-items:stretch}
.author-card--art img{width:100%;height:100%;object-fit:cover;object-position:center 22%}

/* ------------------------------------------------------------ giveaway -- */
/* The top of a giveaway follows the slot page: the draw on its artwork with
   the prize picture beside the title, and the facts with the way in on a
   plain card next to it. */
.giveaway-hero-row > .hero{margin:0}
.giveaway-hero > .grid-container{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.giveaway-hero.has-prize > .grid-container{grid-template-columns:minmax(0,1fr) auto;column-gap:1.75rem;align-items:center}
.giveaway-hero > .grid-container > *{grid-column:1}
.giveaway-hero.has-prize > .grid-container > .giveaway-hero--art{grid-column:2;grid-row:1 / span 2;align-self:center}
.giveaway-hero--head{display:grid;gap:0.625rem;justify-items:start;min-width:0}
.giveaway-hero--head h1{margin:0}
.giveaway-hero--prize{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.75rem;margin:0}
.giveaway-hero--prize strong{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:900;line-height:1.05;color:var(--vt-link)}
.giveaway-hero--prize span{font-size:0.9375rem;font-weight:600;color:var(--vt-on-plate-dim)}
.giveaway-hero--lead{margin:0;max-width:52ch;font-size:0.9375rem;line-height:1.55;color:var(--vt-on-plate-dim)}
.giveaway-hero--art{
  display:block;width:clamp(8.5rem,14vw,14rem);aspect-ratio:1;overflow:hidden;border-radius:var(--vt-r-lg);
  background:rgba(255,255,255,.08);box-shadow:0 1.125rem 2.5rem -1.125rem rgba(0,0,0,.75),0 0 0 0.0625rem rgba(255,255,255,.12);
}
.giveaway-hero--art img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){
  .giveaway-hero.has-prize > .grid-container{column-gap:0.875rem}
  .giveaway-hero--art{width:6rem}
}
.giveaway-facts-card--foot{display:grid;gap:0.625rem;padding:1rem 1.25rem 1.125rem;border-top:0.0625rem solid var(--vt-line)}
.giveaway-facts-card--cta{width:100%;justify-content:center}
.giveaway-facts-card--result{margin:0;font-size:0.9375rem;color:var(--vt-text)}
.giveaway-facts-card--terms{margin:0;font-size:0.75rem;line-height:1.45;color:var(--vt-text-faint)}

/* The body: the description and the casinos on the left, the entry card on
   the right, where it stays in view on a desktop. A phone reads them in
   order, step one, then step two. */
.giveaway-body--grid{display:grid;gap:1.125rem;align-items:start}
@media (min-width:1024px){
  .giveaway-body--grid{grid-template-columns:minmax(0,1fr) minmax(22rem,26rem);gap:1.5rem}
  .giveaway-body--grid.is-solo{grid-template-columns:minmax(0,34rem);justify-content:center}
  .giveaway-body--entry{position:sticky;top:calc(var(--vt-top-h,4rem) + 1rem)}
}
.giveaway-body--main{display:grid;gap:1.125rem;min-width:0}
.giveaway-about,.giveaway-casinos,.giveaway-entry-card{
  padding:1.375rem 1.5rem;background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-xl);color:var(--vt-text);
}
@media (max-width:640px){
  .giveaway-about,.giveaway-casinos,.giveaway-entry-card{padding:1.125rem 1rem}
}
.giveaway-about--title{margin:0 0 0.625rem;font-size:1.25rem;line-height:1.25}
.giveaway-about--lead{margin:0 0 0.625rem;font-size:1rem;font-weight:600;line-height:1.55;color:var(--vt-text)}
.giveaway-about--body{color:var(--vt-text-dim)}
.giveaway-about--body > :last-child{margin-bottom:0}
.giveaway-step{display:flex;align-items:center;gap:0.625rem;margin:0;font-size:1.25rem;line-height:1.25}
.giveaway-step--n{
  display:grid;place-items:center;flex:0 0 1.75rem;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--vt-accent);color:var(--vt-accent-ink);font-size:0.875rem;font-weight:800;
}
.giveaway-casinos--note{margin:0.5rem 0 0.875rem;font-size:0.90625rem;line-height:1.55;color:var(--vt-text-dim)}

/* One row per casino: logo, name and offer, the deposit that qualifies, the
   sign-up button. Two lines on a phone, the deposit beside the button. */
.giveaway-casinos--list{display:grid;gap:0.625rem;margin:0;padding:0;list-style:none}
.giveaway-casino{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto auto;align-items:center;gap:0.875rem;
  padding:0.625rem 0.75rem 0.625rem 0.625rem;background:var(--vt-canvas);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-lg);
}
.giveaway-casino--logo{
  display:grid;place-items:center;height:3.25rem;padding:0.375rem 0.625rem;border-radius:var(--vt-r-md);text-decoration:none;
  font-size:0.75rem;font-weight:800;line-height:1.15;text-align:center;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tint,#2b2d33) 88%,#fff 12%),color-mix(in srgb,var(--tint,#2b2d33) 72%,#000 28%));
}
.giveaway-casino--logo .casino-tile--logo-text{font-size:0.75rem;font-weight:800;color:#fff}
.giveaway-casino--text{display:grid;gap:0.125rem;min-width:0}
a.giveaway-casino--name{font-size:0.9375rem;font-weight:800;line-height:1.3;color:var(--vt-text);text-decoration:none}
a.giveaway-casino--name:hover{color:var(--vt-link)}
.giveaway-casino--offer{font-size:0.875rem;font-weight:700;line-height:1.35;color:var(--vt-link)}
.giveaway-casino--deposit{display:grid;justify-items:end;gap:0.0625rem;text-align:right;white-space:nowrap}
.giveaway-casino--deposit span{font-size:0.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--vt-text-faint)}
.giveaway-casino--deposit strong{font-size:0.9375rem;color:var(--vt-text)}
.giveaway-casino--cta{white-space:nowrap}
@media (max-width:640px){
  .giveaway-casino{grid-template-columns:5.5rem minmax(0,1fr);grid-template-areas:"logo text" "deposit cta";gap:0.625rem 0.75rem;padding:0.625rem}
  .giveaway-casino--logo{grid-area:logo;height:2.9rem}
  .giveaway-casino--text{grid-area:text}
  .giveaway-casino--deposit{grid-area:deposit;justify-items:start;text-align:left}
  .giveaway-casino--cta{grid-area:cta;justify-self:end}
}

/* The entry card. */
.giveaway-entry-card--head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.375rem 0.75rem;margin:0 0 0.875rem}
.giveaway-entry-card--count{font-size:0.8125rem;font-weight:700;color:var(--vt-text-faint)}
.giveaway-entry-card .dz-flash{margin:0 0 0.875rem}
.giveaway-entry-card .giveaway-entry--gate,
.giveaway-entry-card .giveaway-entry--done,
.giveaway-entry-card .giveaway-entry--closed{padding:1rem;border-radius:var(--vt-r-lg);background:var(--vt-canvas);color:var(--vt-text)}
.giveaway-entry-card .giveaway-entry--gate p{font-size:0.9375rem;line-height:1.55}
.giveaway-entry-card .giveaway-entry--done{background:color-mix(in srgb,var(--vt-live,#12924E) 12%,transparent);color:var(--vt-text)}
.giveaway-entry-card .giveaway-entry--done > svg{color:var(--vt-live,#12924E)}
.giveaway-entry-card .giveaway-entry--done span,
.giveaway-entry-card .giveaway-entry--closed span{color:var(--vt-text-dim)}
.giveaway-entry--accounts{display:grid;gap:0.25rem;margin:0.625rem 0 0;padding:0;list-style:none;font-size:0.8125rem}
.giveaway-entry--accounts li{display:flex;justify-content:space-between;gap:0.75rem}
.giveaway-entry--accounts strong{font-weight:700;color:var(--vt-text)}
.giveaway-entry-card .giveaway-entry--as{background:var(--vt-canvas);color:var(--vt-text)}
.giveaway-form{display:grid;gap:0.875rem;margin:0;padding:0;background:none}
.giveaway-form label{margin:0}
.giveaway-form--contact{display:grid;gap:0.75rem}
.giveaway-form--contact label > span,
.giveaway-form--account-name{display:flex;align-items:center;gap:0.5rem;margin:0 0 0.3125rem;font-size:0.84375rem;font-weight:700;color:var(--vt-text)}
.giveaway-form input[type=text],
.giveaway-form input[type=email],
.giveaway-form input[type=tel]{width:100%}
.giveaway-form--accounts{display:grid;gap:0.75rem;min-width:0;margin:0;padding:0.875rem 0 0;border:0;border-top:0.0625rem solid var(--vt-line)}
.giveaway-form--accounts legend{float:left;width:100%;margin:0 0 0.125rem;padding:0;font-size:0.9375rem;font-weight:800;color:var(--vt-text)}
.giveaway-form--hint{clear:both;margin:0;font-size:0.8125rem;line-height:1.5;color:var(--vt-text-dim)}
.giveaway-form--account{min-width:0}
.giveaway-form--mark{
  display:grid;place-items:center;flex:0 0 auto;width:2.4rem;height:1.5rem;padding:0.125rem 0.3125rem;border-radius:0.3125rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tint,#2b2d33) 88%,#fff 12%),color-mix(in srgb,var(--tint,#2b2d33) 72%,#000 28%));
}
.giveaway-form--mark .casino-tile--logo-text{display:none}
.giveaway-form--tick{display:flex;align-items:center;gap:0.625rem;font-size:0.875rem;color:var(--vt-text)}
.giveaway-form--tick input{flex:0 0 auto;margin:0}
.giveaway-form--copy{justify-self:start;padding:0;border:0;background:none;font-size:0.8125rem;font-weight:700;color:var(--vt-link);cursor:pointer;text-align:left}
.giveaway-form--copy:hover{text-decoration:underline}
.giveaway-form .dz-form--consent{margin:0}
.giveaway-form .dz-form--consent span{color:var(--vt-text-dim)}
.giveaway-form--submit{width:100%;justify-content:center;gap:0.5rem}
.giveaway-form--terms{margin:0;font-size:0.75rem;line-height:1.45;color:var(--vt-text-faint)}
/* The form's older label rules make every span in a label a bold block: the
   logo sat above the casino name and the consent box above its sentence. */
.giveaway-form label > span.giveaway-form--account-name{display:flex;align-items:center;gap:0.5rem;margin:0 0 0.3125rem;font-size:0.84375rem;font-weight:700}
.giveaway-form label.dz-form--consent,
.giveaway-form label.giveaway-form--tick{display:flex;align-items:flex-start;gap:0.625rem;margin:0}
.giveaway-form label.dz-form--consent > span,
.giveaway-form label.giveaway-form--tick > span{display:block;margin:0;font-size:0.84375rem;font-weight:400;line-height:1.5;color:var(--vt-text-dim)}
.giveaway-form label.giveaway-form--tick > span{color:var(--vt-text)}
.giveaway-form input[type=checkbox]{flex:0 0 auto;width:1.125rem;height:1.125rem;margin:0.125rem 0 0;accent-color:var(--vt-accent)}
.giveaway-form input[type=text],
.giveaway-form input[type=email],
.giveaway-form input[type=tel]{
  display:block;width:100%;height:2.75rem;margin:0;padding:0 0.75rem;font:inherit;font-size:0.9375rem;color:var(--vt-text);
  background:var(--vt-canvas);border:0.0625rem solid var(--vt-line-strong);border-radius:var(--vt-r-md);box-shadow:none;
}
.giveaway-form input[type=text]:focus-visible,
.giveaway-form input[type=email]:focus-visible,
.giveaway-form input[type=tel]:focus-visible{outline:none;border-color:var(--vt-accent-edge);box-shadow:var(--vt-ring)}

/* ----------------------------------------------------- lossback lounge -- */
/* The week's pot on the card beside the banner, the way the facts card sits
   on the review, slot and giveaway pages: the figure on top, the facts in the
   shared grid, the two ways on at the foot. */
.loss-hero-row > .hero{margin:0}
.loss-pot-card--head{padding:1.25rem 1.5rem 1rem;border-bottom:0.0625rem solid var(--vt-line)}
.loss-pot-card .vt-pot--figure{margin:0;font-size:clamp(1.875rem,2.6vw,2.5rem);line-height:1.1}
.loss-pot-card--foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;padding:1rem 1.25rem 1.125rem;border-top:0.0625rem solid var(--vt-line)}
.loss-pot-card--foot .vt-btn{width:100%;justify-content:center}
@media (max-width:640px){
  .loss-pot-card--head{padding:1rem}
  .loss-pot-card--foot{padding:0.875rem 1rem}
}
/* In the narrower banner the date and the moderator wrap onto two lines, and
   the hairline between them was left hanging at the start of the second. */
.loss-hero-row .hero--meta{gap:0.375rem 1rem}
.loss-hero-row .hero--updated + .hero--author::before{display:none}

/* ------------------------------------------------------ big win wall -- */
/* The latest wins beside the banner, the way the pot sits beside the
   Lossback Lounge's: a count, four rows that each open the win, and the way
   in at the foot. */
.wins-hero-row > .hero{margin:0}
.wins-hero-row .hero--meta{gap:0.375rem 1rem}
.wins-hero-row .hero--updated + .hero--author::before{display:none}
.wins-card--head{padding:1.125rem 1.375rem 0.75rem}
.wins-card--head .vt-pot--label{margin:0}
.wins-card--summary{display:flex;flex-wrap:wrap;gap:0.125rem 1rem;margin:0.25rem 0 0;font-size:0.875rem;color:var(--vt-text-dim)}
.wins-card--summary strong{font-size:1.0625rem;font-weight:800;color:var(--vt-text);font-variant-numeric:tabular-nums}
.wins-card--summary span + span strong{color:var(--vt-link)}
.wins-card--list{flex:1 1 auto;margin:0;padding:0 0.625rem;list-style:none;border-top:0.0625rem solid var(--vt-line)}
.wins-card--list li + li{border-top:0.0625rem solid var(--vt-line)}
a.wins-card--row{
  display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:0.75rem;
  padding:0.625rem 0.75rem;border-radius:var(--vt-r-md);color:var(--vt-text);text-decoration:none;
}
a.wins-card--row:hover{background:var(--vt-hover);color:var(--vt-text);text-decoration:none}
.wins-card--avatar{width:2rem;height:2rem;border-radius:50%;object-fit:cover;background:var(--vt-hover)}
.wins-card--who{display:grid;min-width:0;line-height:1.3}
.wins-card--who strong{overflow:hidden;font-size:0.875rem;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.wins-card--who span{overflow:hidden;font-size:0.78125rem;color:var(--vt-text-dim);white-space:nowrap;text-overflow:ellipsis}
.wins-card--mult{font-size:0.9375rem;font-weight:800;color:var(--vt-link);font-variant-numeric:tabular-nums;white-space:nowrap}
.wins-card--empty{flex:1 1 auto;margin:0;padding:1rem 1.375rem;border-top:0.0625rem solid var(--vt-line);color:var(--vt-text-dim)}
.wins-card--foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;padding:0.875rem 1.25rem 1.125rem;border-top:0.0625rem solid var(--vt-line)}
.wins-card--foot .vt-btn{width:100%;justify-content:center;gap:0.5rem}
#wins-wall{scroll-margin-top:calc(var(--vt-top-h,4rem) + 0.75rem)}
@media (max-width:640px){
  .wins-card--head{padding:1rem 1rem 0.625rem}
  .wins-card--list{padding:0 0.25rem}
  .wins-card--foot{padding:0.875rem 1rem}
}

/* ---------------------------------------------------------------- footer -- */
/* The footer carries the bar's own logo and channel buttons. */
.vt-foot--col-brand .vt-brand--logo,
.vt-foot--col-brand .vt-brand img{max-height:3rem}
@media (min-width:901px){
  .vt-foot--col-brand .vt-brand--logo,
  .vt-foot--col-brand .vt-brand img{max-height:5.25rem}
}
.vt-foot--social{display:flex;flex-wrap:wrap;gap:0.375rem;margin:1rem 0 0;padding:0;list-style:none}
.vt-foot--social li{margin:0}

/* --------------------------------------------------------------- contact -- */
/* The contact page: the hero with its introduction beside a card with the
   address, then each topic as a card of its own. Four short answers are not
   an article, so there is no table of contents. */
.contact-hero-row > .hero{margin:0}
.contact-hero-row .hero--meta{gap:0.375rem 1rem}
.contact-hero-row .hero--intro p{margin:0}
.contact-card--head{padding:1.25rem 1.5rem 1rem;border-bottom:0.0625rem solid var(--vt-line)}
.contact-card--head .vt-pot--label{margin:0 0 0.25rem}
a.contact-card--mail{display:inline-block;font-size:clamp(1.25rem,2vw,1.625rem);font-weight:800;line-height:1.2;color:var(--vt-link);text-decoration:none;overflow-wrap:anywhere}
a.contact-card--mail:hover{text-decoration:underline}
.contact-card--foot{display:grid;padding:1rem 1.25rem 1.125rem;border-top:0.0625rem solid var(--vt-line)}
.contact-card--foot .vt-btn{width:100%;justify-content:center}
.contact-body--grid{display:grid;gap:0.875rem}
@media (min-width:900px){
  .contact-body--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.contact-topic{padding:1.375rem 1.5rem;background:var(--vt-surface);border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-xl)}
.contact-topic > h2{margin:0 0 0.625rem;font-size:1.1875rem;line-height:1.3}
.contact-topic > :last-child{margin-bottom:0}
@media (max-width:640px){
  .contact-topic{padding:1.125rem 1rem}
}


/* ------------------------------------------------------- contents lists -- */
/* "On this page" marks where you are the way the sidebar marks the page you
   are on: a solid accent row with dark ink, no stripe and no tint, and the
   sidebar's hover. The tokens flip with the theme, so light and dark match. */
.toc a,.hub-toc a{
  padding:0.4375rem 0.625rem;border:0.0625rem solid transparent;border-radius:var(--vt-r-md);
  color:var(--vt-text-dim);font-weight:600;
  transition:background .14s ease,color .14s ease;
}
.toc li.is-sub a{padding-left:1.375rem;font-weight:500}
.toc a:hover,.hub-toc a:hover{background:var(--vt-hover);color:var(--vt-text);text-decoration:none}
.toc a.is-active,.toc a.is-active:hover,
.hub-toc a.is-active,.hub-toc a.is-active:hover{
  background:var(--vt-accent);border-color:var(--vt-accent-edge,var(--vt-accent));
  color:var(--vt-accent-ink);font-weight:700;
}
.toc a:focus-visible,.hub-toc a:focus-visible{outline:none;box-shadow:var(--vt-ring)}
.seo-toc--list a:hover{background:var(--vt-hover);color:var(--vt-text)}
.seo-toc--num,.seo-toc--list a:hover .seo-toc--num{color:var(--vt-link)}

/* ---------------------------------------------------- about, hero height -- */
/* The clip card takes the banner's height instead of setting it: at 16:9 the
   player made this hero far taller than the other section pages. The card is
   size-contained, so the row is as tall as the banner, and the player fills
   what the caption leaves, cropped like a cover. Stacked, it keeps 16:9. */
@media (min-width:1024px){
  .about-hero-row{grid-template-columns:minmax(0,1fr) min(30rem,38%)}
  .about-hero-row.is-solo{grid-template-columns:minmax(0,1fr)}
  .about-clip-card{contain:size}
  .about-clip-card--player{flex:1 1 0;min-height:0}
  .about-clip-card--player .vt-player{height:100%;aspect-ratio:auto}
  .about-clip-card--caption{flex:0 0 auto;padding:0.75rem 1.125rem 0.875rem}
}

/* ------------------------------------------ toplist row, content centred -- */
/* The closed row kept the details laid out, invisibly, under the summary, so
   the name, the reasons and the tags sat at the top of a cell sized for the
   details: 17px above them and 45px below. Now only the pane that shows takes
   room and the group is centred between the offer and the strip. The floor
   is raised to the open row's height, so opening a row still moves nothing
   below it. */
@media screen and (min-width:1024px){
  .casino-tile{--tile-sq:19.25rem}
  .casino-tile--details[hidden]{display:none!important}
  .casino-tile--swap{flex:0 0 auto}
}

/* ------------------------------------------------- gold is a fill, not ink -- */
/* The gold is the brand's fill: buttons, the page you are on, stars, ticks and
   badges. As text it read brown and muddy on white, so text in the accent role
   uses --vt-link: the ink on white, a softened gold on dark. A link in running
   text still has to read as a link on white, where it is the same ink as the
   words around it, so it carries an underline in the gold. */
:is(.content--main,.hub-copy,.seo-section--body,.entry-content,.page-copy,.term-copy,.review-block--text,.reviews--lede,.tested--lead,.contact-topic,.vt-about--story) :is(p,li,dd,td,blockquote) > a:not(.button):not(.vt-btn){
  color:var(--vt-link);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--vt-accent);
  text-decoration-thickness:0.125rem;text-underline-offset:0.1875rem;
}
:is(.content--main,.hub-copy,.seo-section--body,.entry-content,.page-copy,.term-copy,.review-block--text,.reviews--lede,.tested--lead,.contact-topic,.vt-about--story) :is(p,li,dd,td,blockquote) > a:not(.button):not(.vt-btn):hover{
  text-decoration-color:currentColor;
}

/* ------------------------------------------------------- plates take gold -- */
/* Heroes and the other dark plates stay dark in both themes, so the accent
   role on them is the gold in both: breadcrumbs, a big win's multiplier, links.
   Without this the light theme's black link ink landed on the dark plate. */
:is(.hero,.review-hero,.vt-hero,.is-on-dark,.content--calculator,.vt-feature,.dz-win-hero){--vt-link:var(--vt-on-plate-link)}
.hero .breadcrumbs a,.review-hero .breadcrumbs a,.vt-hero .breadcrumbs a{color:var(--vt-on-plate-link)}

/* ------------------------------------------------------ route panel strip -- */
/* The strip under the route map sat on a radial glow in the accent, which read
   as a light leak rather than a surface. It is flat now, and in the light
   theme it takes the dark gold so it still belongs with the dark map above. */
.dz-route.is-interactive .dz-route--map{background:var(--vt-surface)}
:root[data-theme="light"] .dz-route.is-interactive .dz-route--panel{
  --vt-text:#FFFFFF;--vt-text-dim:rgba(255,255,255,.82);--vt-text-faint:rgba(255,255,255,.74);--vt-link:#FFFFFF;
  background:var(--vt-accent-hi);border-top-color:transparent;color:#FFFFFF;
}

/* ----------------------------------------------------- page SEO sections -- */
/* The written section and FAQ under the hub pages (inc/page-seo.php): the
   same prose treatment as the bonus hub, with the generated link lists as
   rows of chips and the questions as the details list the front page uses. */
.vt-pseo--body > h3:first-child{margin-top:0}
.vt-pseo-block{margin:var(--vt-s-5) 0 var(--vt-s-6)}
.hub-copy .vt-pseo-block--title{margin:0 0 var(--vt-s-3);font-size:0.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--vt-text-faint)}
.vt-pseo-links{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0;padding:0;list-style:none}
.hub-copy .vt-pseo-links > li{margin:0;padding:0}
.hub-copy .vt-pseo-links > li::before{content:none}
.hub-copy .vt-pseo-links > li > :is(a,span).vt-pseo-chip{
  display:inline-flex;align-items:baseline;gap:0.5rem;padding:0.4375rem 0.75rem;
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);background:var(--vt-surface);
  color:var(--vt-text);font-size:0.84375rem;font-weight:600;line-height:1.3;text-decoration:none;
  transition:background .14s ease,border-color .14s ease;
}
.hub-copy .vt-pseo-links > li > a.vt-pseo-chip:not(.vt-btn):hover{background:var(--vt-hover);border-color:var(--vt-line-strong);color:var(--vt-text);text-decoration:none}
.hub-copy .vt-pseo-links > li > a.vt-pseo-chip:not(.vt-btn):focus-visible{outline:none;box-shadow:var(--vt-ring)}
.vt-pseo-count{font-size:0.75rem;font-weight:600;color:var(--vt-text-faint)}
.vt-pseo-faq .faq-list{display:grid;gap:0.625rem}
.hub-copy .vt-pseo-links{margin:0;padding:0}

/* ------------------------------------------------------- editorial cards -- */
/* Guides and news are the site's post card everywhere they are listed: kicker,
   title, excerpt, date, then a real button pinned to the bottom so a row of
   cards lines its buttons up. A post without an image is a text card, not an
   empty picture box with a question mark in it. */
/* auto-fit, not auto-fill: three related guides fill the row instead of
   leaving an empty fourth column beside them. */
.vt-grid--posts{--card-w:300px;grid-template-columns:repeat(auto-fit,minmax(min(var(--card-w),100%),1fr))}
.vt-card--post{display:flex;flex-direction:column}
.vt-card--post .vt-card--body{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--vt-s-2)}
.vt-card--post.is-text .vt-card--body{padding:var(--vt-s-5)}
.vt-kicker.vt-kicker--inline{position:static;align-self:flex-start;margin:0 0 var(--vt-s-1)}
.vt-card--post .vt-card--title{margin:0;font-size:1rem;line-height:1.35}
.vt-card--post .vt-card--title a{color:var(--vt-text);text-decoration:none}
.vt-card--post .vt-card--title a:hover{text-decoration:underline;text-underline-offset:0.1875rem}
.vt-card--post .vt-card--meta{margin:0 0 var(--vt-s-2)}
.vt-card--post .vt-card--cta{margin-top:auto;align-self:stretch;justify-content:center;gap:0.375rem}

/* ------------------------------------------------------------------- 404 -- */
/* A dead URL still gets the brand, a search and a way on. The block is its own
   centred column: the content grid carries negative gutters, which pinned the
   old centred box to the left edge instead of the middle. */
.vt-404--inner{
  display:flex;flex-direction:column;align-items:center;gap:var(--vt-s-4);
  max-width:44rem;margin:0 auto;padding:var(--vt-s-8) 0 var(--vt-s-4);text-align:center;
}
.vt-404--inner h1{margin:0}
.vt-404--lead{max-width:52ch;margin:0;color:var(--vt-text-dim)}
.vt-404--mascot{margin:0 auto}
.vt-404--search{width:min(26rem,100%)}
.vt-404--search form{display:flex;align-items:center;gap:var(--vt-s-2)}
.vt-404--search input[type="search"],.vt-404--search input[type="text"]{flex:1 1 auto;min-width:0}
.vt-404--actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vt-s-3)}
.vt-grid--casinos{--card-w:280px}


/* ------------------------------------------------ the fact-checker line -- */
/* "Fact-checked by …" sits in the same row as the date and the credit. It had
   no rules of its own, so it printed as a paragraph: body size, its own line,
   the shield hanging off the left like a bullet. These match .hero--updated,
   in both places the row appears (the artwork hero and the facts card foot). */
.hero--meta .hero--checked-by{
  display:inline-flex;align-items:center;gap:0.375rem;margin:0;max-width:none;
  font-size:0.8125rem;line-height:1.3;color:var(--vt-on-plate-dim);
}
.hero--meta .hero--checked-by svg{flex:0 0 auto;opacity:.85}
.hero--meta .hero--checked-by a{color:inherit;font-weight:700;text-decoration:none}
.hero--meta .hero--checked-by a:hover{text-decoration:underline;text-underline-offset:0.125rem}
.review-facts-card--foot .hero--meta .hero--checked-by{font-size:0.75rem;color:var(--vt-text-dim)}
.review-facts-card--foot .hero--meta .hero--checked-by a{color:var(--vt-text)}

/* ------------------------------------------------ the paid-link band ----- */
/* The commission disclosure, once, between the content and the footer. It ran
   beside every Play button before, which made four lines of small print out of
   a one-line legal note and repeated it down the whole of a listing page. */
.vt-aff-band{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--vt-s-2) var(--vt-s-4);
  margin:var(--vt-s-8) var(--vt-pad) 0;padding:var(--vt-s-4) var(--vt-s-5);
  border:0.0625rem solid var(--vt-line);border-radius:var(--vt-r-md);
  background:var(--vt-surface);color:var(--vt-text-dim);
  font-size:0.8125rem;line-height:1.65;
}
.vt-aff-band--label{
  flex:0 0 auto;font-size:0.65625rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--vt-text-faint);
}
.vt-aff-band--text{flex:1 1 22rem;margin:0;max-width:none}
.vt-aff-band--text a{color:var(--vt-link);white-space:nowrap;text-decoration:underline;text-underline-offset:0.125rem}