/* ==========================================================================
   FindCasino — static design system
   Phase 1 mock-up. Everything is token-driven so the PHP build can reuse it.
   Sections: 1 tokens · 2 reset · 3 layout · 4 header · 5 buttons · 6 cards
             7 home · 8 casino page · 9 archives · 10 forms/auth · 11 dashboard
             12 footer · 13 search · 14 responsive · 15 rtl
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --font-head:'Poppins',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;

  --bg:#ffffff;
  --bg-alt:#fafafb;
  --surface:#f2f2f3;
  --band:#ececec;
  --card:#ffffff;
  --blue-soft:#e8f2fe;

  --ink:#1f2126;
  --ink-soft:#41464e;
  --muted:#787f89;
  --line:#e5e7ea;

  --blue:#2f80f5;
  --blue-ink:#1c66d4;
  --green:#6fbe2f;
  --red:#e0574f;
  --gold:#f0a500;

  --shadow:0 1px 2px rgba(16,20,28,.05);
  --shadow-lg:0 8px 28px rgba(16,20,28,.10);

  --r-card:12px;
  --r-tile:18px;
  --r-pill:999px;
  --container:1200px;
  --gap:24px;
}

html[data-theme="dark"]{
  --bg:#0f1216;
  --bg-alt:#13171c;
  --surface:#191d23;
  --band:#171b21;
  --card:#14181d;
  --blue-soft:#152232;

  --ink:#e9ecf1;
  --ink-soft:#c2c8d1;
  --muted:#8c95a1;
  --line:#262b33;

  --blue:#4f95ff;
  --blue-ink:#7db0ff;

  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 8px 28px rgba(0,0,0,.5);
}

/* 2. RESET ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.25;margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 3. LAYOUT ---------------------------------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:44px 0}
.section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.section-head h2{font-size:22px;font-weight:600}
.section-head .see-all{margin-left:auto;font-size:14px;font-weight:500;white-space:nowrap}
.eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.muted{color:var(--muted)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}

/* 4. HEADER ---------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:32px;width:auto}
.brand .logo-dark{display:none}
html[data-theme="dark"] .brand .logo-light{display:none}
html[data-theme="dark"] .brand .logo-dark{display:block}

.main-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:8px;
  color:var(--ink-soft);font-size:15px;font-weight:500;text-decoration:none;
  background:none;border:0;
}
.nav-link:hover{color:var(--blue);text-decoration:none}
.nav-link[aria-current="page"]{color:var(--blue)}
.nav-link .caret{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:190px;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.16s ease;
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:none}
.nav-dropdown a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink-soft);font-size:14.5px}
.nav-dropdown a:hover{background:var(--surface);color:var(--blue);text-decoration:none}

.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:9px;
  background:none;color:var(--ink-soft);
}
.icon-btn:hover{background:var(--surface);color:var(--blue)}
.icon-btn svg{width:19px;height:19px}

/* language switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink-soft);font-size:14px;font-weight:500}
.lang-btn:hover{border-color:var(--blue);color:var(--blue)}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;width:420px;padding:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);display:none;
  grid-template-columns:repeat(3,1fr);gap:2px;max-height:340px;overflow:auto;
}
.lang.open .lang-menu{display:grid}
.lang-menu a{padding:8px 10px;border-radius:7px;font-size:14px;color:var(--ink-soft)}
.lang-menu a:hover{background:var(--surface);text-decoration:none}
.lang-menu a.active{background:var(--blue-soft);color:var(--blue-ink);font-weight:600}

/* theme toggle */
.theme-toggle{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);flex:none}
.switch{
  position:relative;width:44px;height:24px;border-radius:var(--r-pill);
  background:var(--line);border:0;padding:0;transition:.18s;flex:none;
}
.switch::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s;
}
html[data-theme="dark"] .switch{background:var(--blue)}
html[data-theme="dark"] .switch::after{transform:translateX(20px)}

.nav-toggle{display:none}

/* 5. BUTTONS --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border:0;border-radius:var(--r-pill);
  font:600 14.5px/1 var(--font-body);text-decoration:none;text-align:center;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-ink);color:#fff}
.btn-ghost{background:none;color:var(--ink-soft);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:8px 16px;font-size:13.5px}
.btn-danger{background:none;border:1px solid var(--line);color:var(--red)}
.btn-danger:hover{border-color:var(--red)}
.link-more{display:block;text-align:center;font-size:14.5px;color:var(--ink-soft);padding-top:4px}
.link-read{font-size:13.5px;color:var(--blue);white-space:nowrap}

/* 6. BRAND VISUAL PLACEHOLDERS -------------------------------------------- */
/* In the PHP build these become the uploaded square logo + wide cover image. */
.logo-tile,.banner{
  background:var(--tile,#12161c);color:#fff;
  display:grid;place-items:center;text-align:center;
  font-family:var(--font-head);font-weight:700;letter-spacing:.01em;
}
.logo-tile{width:56px;height:56px;border-radius:10px;font-size:10.5px;line-height:1.15;padding:4px;flex:none}
.logo-tile.lg{width:72px;height:72px;border-radius:14px;font-size:12px}
.banner{aspect-ratio:16/10;font-size:clamp(18px,2.1vw,27px);text-transform:uppercase}
.banner.wide{aspect-ratio:16/9}

/* 6b. CARDS ---------------------------------------------------------------- */
/* compact row — homepage list blocks + hero rail */
/* gaps are 30% off the old 14px; the actions column is content-sized, so
   shrinking its type is what actually widens the bonus column beside it */
.mini{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:start}
.mini-body{min-width:0}
.mini-body h3{font-size:15px;font-weight:500;margin-bottom:3px}
.mini-body h3 a{color:var(--ink)}
.mini-body p{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.mini-actions{display:flex;flex-direction:column;align-items:stretch;gap:5px;text-align:center;flex:none}
.mini-actions .btn-sm{padding:7px 12px;font-size:12.5px}
.mini-actions .link-read{font-size:12px}

/* big banner card */
.brand-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s;
}
.brand-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.brand-card .body{display:flex;flex-direction:column;gap:9px;padding:16px;flex:1}
/* logo beside the name and bonus — the cover above says what the brand looks
   like, the mark says who it is, and the two read faster together than the
   name alone did */
.brand-card .head{display:flex;gap:11px;align-items:flex-start}
/* the anchor is the flex item, not the tile inside it, so it is the one that
   has to refuse to shrink — otherwise a long bonus squashes the logo oval */
.brand-card .head > a{flex:none;line-height:0}
.brand-card .head .logo-tile{width:46px;height:46px;border-radius:9px;font-size:9px;padding:3px}
.brand-card .head .meta{min-width:0;display:flex;flex-direction:column;gap:4px}
.brand-card .name{font-size:13.5px;color:var(--muted);margin:0}
.brand-card .name a{color:var(--muted)}
.brand-card .bonus{font-size:15px;font-weight:600;line-height:1.4;margin:0;color:var(--ink)}
.brand-card .btn{margin-top:auto}

/* favourite heart */
.fav{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(12,14,18,.45);color:#fff;backdrop-filter:blur(4px);
}
.fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
.fav[aria-pressed="true"]{color:#ff5f6d}
.fav[aria-pressed="true"] svg{fill:currentColor;stroke:currentColor}

/* score pill */
.score{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font:600 12.5px/1 var(--font-body);
}
.score b{font-weight:700}
.stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.stars .off{color:var(--line)}

/* 7. HOME ------------------------------------------------------------------ */
.hero{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:var(--gap);padding-top:32px}
.hero-feature{
  position:relative;border-radius:var(--r-card);overflow:hidden;min-height:322px;
  background:var(--tile,#241a55);display:flex;align-items:center;
}
.hero-feature .overlay{
  position:relative;z-index:2;display:grid;grid-template-columns:150px 1fr;
  gap:26px;align-items:center;padding:36px 40px;width:100%;
}
.hero-feature .disc{
  width:150px;height:150px;border-radius:50%;background:rgba(0,0,0,.55);
  display:grid;place-items:center;color:#fff;font-family:var(--font-head);
  font-weight:700;font-size:19px;text-align:center;padding:12px;line-height:1.15;
}
/* .disc is now either the brand's logo or the initials fallback. A logo is a
   rectangle inside a circle, so contain it rather than crop it — object-fit
   further down sets cover for every other img.logo-tile. */
img.hero-feature-logo,.hero-feature img.disc{
  object-fit:contain;padding:22px;background:rgba(0,0,0,.55);
}
.hero-feature h2{color:#fff;font-size:26px;font-weight:600;margin-bottom:6px}
.hero-feature .offer{color:#fff;font-size:31px;font-weight:700;line-height:1.2;margin:0 0 20px;font-family:var(--font-head)}
.hero-feature::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 55%,rgba(0,0,0,.12) 100%);
}
/* five rows beside a 322px feature: stacked from the top with a small gap, so
   a market with only one or two live offers gets them where the eye starts
   rather than pinned to the top and bottom edges with a hole between */
.hero-rail{display:flex;flex-direction:column;gap:9px;justify-content:flex-start}
.hero-rail .mini{padding:2px 0}
.hero-rail .mini + .mini{padding-top:9px;border-top:1px solid var(--line)}
.hero-rail .mini-body h3{font-size:14px;margin-bottom:1px}
.hero-rail .mini-body p{line-height:1.35}

/* licence cards */
.licence-card{
  display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:20px;align-items:center;
  background:var(--surface);border-radius:var(--r-card);padding:26px 28px;color:inherit;
}
.licence-card:hover{text-decoration:none}
.licence-card:hover h3{color:var(--blue)}
.licence-card h3{font-size:23px;font-weight:400;margin:6px 0 10px}
.licence-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.licence-card .thumb{
  width:118px;height:118px;border-radius:50%;background:var(--tile,#3a2b22);
  display:grid;place-items:center;color:#fff;font-family:var(--font-head);
  font-weight:700;font-size:12px;text-align:center;padding:10px;line-height:1.2;
}

/* list block of compact rows */
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 21px}

/* wordmark divider */
.wordmark{display:flex;align-items:center;gap:34px;padding:74px 0 10px}
.wordmark::before,.wordmark::after{content:'';height:1px;background:var(--ink);flex:1;max-width:220px;opacity:.75}
.wordmark span{
  flex:none;margin:0 auto;font-family:var(--font-head);font-weight:700;
  font-size:clamp(22px,3vw,32px);letter-spacing:.42em;text-indent:.42em;color:var(--ink);
}

/* 8. CASINO PAGE ----------------------------------------------------------- */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);padding:18px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb li+li::before{content:'/';margin-right:8px;opacity:.55}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}

.casino-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,545px);gap:40px;align-items:start;padding:26px 0 34px}
.casino-title{display:flex;gap:18px;align-items:flex-start}
.casino-title h1{font-size:34px;font-weight:600;color:var(--blue);margin-bottom:4px}
.casino-title h1 a{color:inherit}
.casino-title .year{color:var(--muted);font-size:15px}
.casino-title .meta{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}

.alt-promo{border:1px solid var(--line);border-radius:var(--r-card);padding:14px;background:var(--card)}
.alt-promo .row{display:grid;grid-template-columns:minmax(0,268px) minmax(0,1fr);gap:18px;align-items:center}
.alt-promo .name{font-size:14px;color:var(--muted);margin:0 0 5px}
.alt-promo .bonus{font-size:16px;font-weight:600;margin:0 0 14px}
.alt-promo .caption{display:block;text-align:center;font-size:13.5px;color:var(--muted);padding-top:11px}

.casino-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:stretch}
.cover{border-radius:var(--r-tile);overflow:hidden}
.cover .banner{aspect-ratio:16/9;height:100%;font-size:30px}
.tiles{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.05fr 1fr;gap:18px;height:100%}
.tile{background:var(--blue-soft);border-radius:var(--r-tile);padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.tile.full{grid-column:1/-1}
.tile .label{font-size:14.5px;color:var(--ink-soft);margin:0 0 4px}
.tile .value{font-family:var(--font-head);font-size:26px;font-weight:700;margin:0;color:var(--ink)}
.tile.full .value{color:var(--blue);font-size:29px}
.tile .tc{font-size:13.5px;color:var(--ink-soft);margin:4px 0 0}

.casino-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:56px;padding:52px 0 0;align-items:start}
.prose{font-size:15.5px;line-height:1.72;color:var(--ink-soft)}
.prose p{margin:0 0 20px}
.prose h2{font-size:21px;color:var(--ink);margin:32px 0 12px}
.prose h3{font-size:18px;color:var(--ink);margin:26px 0 10px}
.prose a{text-decoration:underline}
/* the static pages are the only place that uses lists inside prose, and the
   global reset strips list styling, so put it back here rather than globally */
.prose ul,.prose ol{margin:0 0 20px;padding-inline-start:26px}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li{margin-bottom:9px;padding-inline-start:4px}
.prose li:last-child{margin-bottom:0}
.prose li::marker{color:var(--muted)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:var(--surface);padding:2px 6px;border-radius:5px;
}

.spec{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin:36px 0 8px}
.spec-item .label{font-size:15px;color:var(--muted);margin:0 0 7px}
.spec-item .value{font-size:15px;font-weight:600;line-height:1.55;margin:0;color:var(--ink)}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:40px 0 0}
.panel{background:var(--blue-soft);border-radius:var(--r-tile);padding:24px 26px}
.panel h3{font-size:16px;font-weight:500;color:var(--ink-soft);margin-bottom:14px}
.panel li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14.5px;line-height:1.5;margin-bottom:14px;color:var(--ink-soft)}
.panel li:last-child{margin-bottom:0}
.panel .ic{font-size:15px;line-height:1.4}
.panel.pros .ic{color:var(--green)}
.panel.cons .ic{color:var(--red)}

.side h2{font-size:26px;font-weight:500;margin:0 0 12px}
.side h2.center{text-align:center;line-height:1.3;margin-bottom:18px}
.side p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 16px}
.side-block{margin-bottom:38px}
.facts p{margin:0 0 10px;font-size:14.5px;color:var(--ink-soft)}
.facts strong{color:var(--ink)}
.badges{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.badges img{border-radius:8px}
.badge-slot{
  border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center;
  font-size:12.5px;color:var(--muted);background:var(--bg-alt);
}

/* user reviews on the casino page */
.review-item{border-top:1px solid var(--line);padding:20px 0}
.review-item:first-of-type{border-top:0}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font:600 14px var(--font-head);color:var(--ink-soft);flex:none}
.review-head .who{font-weight:600;font-size:14.5px}
.review-head .when{font-size:13px;color:var(--muted)}
.review-item p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0}

/* 9. ARCHIVES -------------------------------------------------------------- */
.page-band{background:var(--band);padding:52px 0}
.page-band h1{font-size:clamp(26px,3.4vw,36px);font-weight:500}
.page-band p{margin:12px 0 0;color:var(--ink-soft);max-width:760px;font-size:15px}
.filters{display:flex;flex-wrap:wrap;gap:9px;padding:26px 0 4px}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);
  font-size:14px;font-weight:500;
}
.pill:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.pill.active{background:var(--blue);border-color:var(--blue);color:#fff}
.country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px}
.country-grid a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;color:var(--ink-soft);font-size:14.5px}
.country-grid a:hover{background:var(--surface);color:var(--blue);text-decoration:none}
.country-grid .flag{font-size:18px;line-height:1}
.geo-note{
  display:flex;gap:12px;align-items:flex-start;background:var(--blue-soft);
  border-radius:var(--r-tile);padding:18px 20px;font-size:14.5px;color:var(--ink-soft);margin:26px 0 0;
}

/* 10. FORMS / AUTH --------------------------------------------------------- */
.auth-wrap{display:grid;place-items:center;padding:56px 0 72px}
.auth-card{
  width:100%;max-width:450px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-tile);padding:36px 34px;box-shadow:var(--shadow);
}
.auth-card h1{font-size:25px;margin-bottom:6px}
.auth-card .sub{color:var(--muted);font-size:14.5px;margin:0 0 26px}
.field{margin-bottom:17px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:7px;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);font:400 15px var(--font-body);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,128,245,.15)}
.field textarea{min-height:130px;resize:vertical}
.hint{font-size:12.5px;color:var(--muted);margin:6px 0 0}
/* block + absolutely-placed box, so inline links inside the label stay in the sentence */
.check{display:block;position:relative;padding-left:27px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:18px}
.check input{position:absolute;left:0;top:3px;margin:0;accent-color:var(--blue)}
.auth-alt{text-align:center;font-size:14px;color:var(--muted);margin:20px 0 0}
.divider-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:13px}
.divider-or::before,.divider-or::after{content:'';height:1px;background:var(--line);flex:1}


/* 10b. ALERTS & CODE INPUT ------------------------------------------------- */
.alert{
  border-radius:10px;padding:12px 15px;font-size:14px;line-height:1.5;margin:0 0 18px;
  border:1px solid transparent;
}
.alert ul{margin:0;padding-left:18px;list-style:disc}
.alert li{margin:3px 0}
.alert-ok{background:var(--blue-soft);color:var(--blue-ink);border-color:transparent}
.alert-err{background:rgba(224,87,79,.10);color:#b23c35;border-color:rgba(224,87,79,.30)}
html[data-theme="dark"] .alert-err{color:#ff9d95}

.code-input{
  font-family:var(--font-head);font-size:26px;font-weight:600;
  letter-spacing:.42em;text-indent:.42em;text-align:center;
}

/* 11. DASHBOARD ------------------------------------------------------------ */
.dash{display:grid;grid-template-columns:242px minmax(0,1fr);gap:44px;padding:36px 0 72px;align-items:start}
.dash-side{position:sticky;top:98px}
.dash-user{display:flex;gap:12px;align-items:center;padding:0 0 20px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.dash-user .avatar{width:46px;height:46px;font-size:16px}
.dash-user .name{font-weight:600;font-size:15px}
.dash-user .tier{font-size:12.5px;color:var(--muted)}
.dash-nav{display:flex;flex-direction:column;gap:2px}
.dash-nav button,
.dash-nav a{
  display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:0;
  border-radius:9px;background:none;color:var(--ink-soft);font-size:14.5px;font-weight:500;
  text-align:left;text-decoration:none;
}
.dash-nav button:hover,
.dash-nav a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.dash-nav button.active,
.dash-nav a.active{background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.dash-nav .count{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:400}
.dash-nav .sep{height:1px;background:var(--line);margin:10px 0}

.panel-view{display:none}
.panel-view.active{display:block}
.panel-view > h1{font-size:26px;margin-bottom:6px}
.panel-view > .lead{color:var(--muted);font-size:14.5px;margin:0 0 28px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.stat{background:var(--surface);border-radius:var(--r-card);padding:18px 20px}
.stat .n{font-family:var(--font-head);font-size:27px;font-weight:700;line-height:1.1}
.stat .l{font-size:13px;color:var(--muted);margin-top:4px}

.dash-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px;margin-bottom:20px}
.dash-card h2{font-size:17px;margin-bottom:16px}

.row-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.row-item:first-of-type{border-top:0}
.row-item .t{font-size:15px;font-weight:500;margin:0}
.row-item .s{font-size:13.5px;color:var(--muted);margin:2px 0 0}
.row-actions{display:flex;gap:8px;align-items:center;flex:none}

.empty{text-align:center;padding:52px 20px;color:var(--muted)}
.empty h3{font-size:17px;color:var(--ink);margin-bottom:8px}

.toggle-follow{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.toggle-follow[aria-pressed="true"]{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink)}

.avatar-edit{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.avatar-edit .avatar{width:74px;height:74px;font-size:24px}


/* 11b. REVIEWS, VOTES, SAVE ------------------------------------------------ */
/* the heart now lives inside a form, so the form carries the positioning */
.fav-form{position:absolute;top:10px;right:10px;z-index:2;margin:0}
.fav{position:static;border:0;padding:0}

.vote-form{display:flex;gap:8px;margin-top:12px}
.vote{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:none;color:var(--ink-soft);font-size:13px;line-height:1.4;
}
.vote:hover{border-color:var(--blue)}
.vote.on{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink);font-weight:600}
.vote .n{font-variant-numeric:tabular-nums}

/* star picker: rendered 5..1 so the CSS sibling selector can light up
   the hovered star and everything after it in source order */
.stars-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.stars-input input{position:absolute;opacity:0;width:0;height:0}
.stars-input label{
  font-size:28px;line-height:1;color:var(--line);cursor:pointer;transition:color .12s;
}
.stars-input label:hover,
.stars-input label:hover ~ label,
.stars-input input:checked ~ label{color:var(--gold)}
.stars-input input:focus-visible + label{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}

.review-item .avatar{object-fit:cover}
.dash-user .avatar{object-fit:cover}

/* 12. FOOTER --------------------------------------------------------------- */
.site-footer{padding:0 0 46px}
.footer-cols{display:grid;grid-template-columns:1fr 1fr 2fr;gap:44px;padding:40px 0 0}
.footer-cols h3{font-size:15px;font-weight:600;margin-bottom:18px}
.footer-cols li{margin-bottom:11px}
.footer-cols li a{font-size:14.5px}
.footer-about{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin:0}
.footer-about strong{color:var(--ink)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:44px;flex-wrap:wrap}
.footer-bottom img{height:28px}
.bga{font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.01em}
.bga span{font-weight:400}


/* 12b. NEWSLETTER ---------------------------------------------------------- */
.newsletter{
  background:var(--surface);border-radius:var(--r-tile);padding:26px 28px;margin:34px 0 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:10px 32px;align-items:center;
}
.newsletter h3{font-size:19px;margin:0 0 4px}
.newsletter p{margin:0;font-size:14.5px;color:var(--muted)}
.newsletter form{display:flex;gap:10px;grid-column:2;grid-row:1 / span 2}
.newsletter input{
  flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--bg);color:var(--ink);font:400 15px var(--font-body);
}
.newsletter input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,128,245,.15)}
.newsletter .alert{grid-column:1 / -1;margin:6px 0 0}
@media (max-width:860px){
  .newsletter{grid-template-columns:1fr}
  .newsletter form{grid-column:1;grid-row:auto;flex-wrap:wrap}
}

/* 13. SEARCH OVERLAY ------------------------------------------------------- */
.search-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(10,12,16,.5);
  backdrop-filter:blur(3px);display:none;padding:14vh 24px 24px;
}
.search-overlay.open{display:block}
.search-box{
  max-width:640px;margin:0 auto;background:var(--card);border-radius:var(--r-tile);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.search-box input{
  width:100%;padding:22px 24px;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--ink);font:400 18px var(--font-body);
}
.search-box input:focus{outline:none}
.search-hits{padding:8px;max-height:52vh;overflow:auto}
.search-hits a{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:10px;border-radius:9px;color:var(--ink)}
.search-hits a:hover{background:var(--surface);text-decoration:none}
.search-hits .logo-tile{width:44px;height:44px;font-size:9px}
.search-hits .b{font-size:12.5px;color:var(--muted)}


/* 13b. TOP ACCOUNT BAR ----------------------------------------------------- */
.topbar{background:#000;color:#fff;font-size:13.5px}
.topbar-inner{display:flex;align-items:center;gap:16px;min-height:40px}
.topbar a{color:#fff;opacity:.82;text-decoration:none}
.topbar a:hover{opacity:1;color:#fff;text-decoration:none}
.topbar .note{opacity:.55;font-size:12.5px}
.topbar .acct{margin-left:auto;display:flex;align-items:center;gap:15px}
.topbar .vr{width:1px;height:15px;background:rgba(255,255,255,.22);flex:none}
.topbar .who{display:flex;align-items:center;gap:8px;opacity:.95}
.topbar .who .avatar{width:24px;height:24px;font-size:10px;background:rgba(255,255,255,.15);color:#fff}
.topbar .cta{
  background:var(--blue);color:#fff;opacity:1;padding:6px 15px;
  border-radius:var(--r-pill);font-weight:600;font-size:13px;
}
.topbar .cta:hover{background:var(--blue-ink)}

/* 13c. STICKY CASINO HEAD -------------------------------------------------- */
.casino-sticky{
  position:sticky;top:73px;z-index:40;background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
.casino-sticky.is-compact{border-bottom-color:var(--line);box-shadow:var(--shadow)}
.casino-head{padding:22px 24px 28px;transition:padding .2s ease}

/* Vertical padding drops 2.5x (24 -> 10) so the pinned bar eats less of the
   screen. Horizontal stays at 24px on purpose: the expanded state uses 24 too,
   and changing it would slide the logo and title sideways as you scroll. */
.casino-sticky.is-compact .casino-head{
  padding:10px 24px;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px;align-items:center;
}
.casino-sticky.is-compact .logo-tile.lg{width:56px;height:56px;border-radius:11px;font-size:9.5px}
.casino-sticky.is-compact .casino-title{gap:13px;align-items:center}
.casino-sticky.is-compact .casino-title h1{font-size:21px}
.casino-sticky.is-compact .casino-title .year,
.casino-sticky.is-compact .casino-title .meta .score,
.casino-sticky.is-compact .casino-title .meta .toggle-follow,
.casino-sticky.is-compact .alt-promo .name,
.casino-sticky.is-compact .alt-promo .caption{display:none}
.casino-sticky.is-compact .alt-promo{padding:0;border:0;background:none}
.casino-sticky.is-compact .alt-promo .row{grid-template-columns:140px minmax(0,1fr) auto;gap:14px}
.casino-sticky.is-compact .alt-promo .banner{aspect-ratio:16/9;font-size:9px;border-radius:7px}
.casino-sticky.is-compact .alt-promo .bonus{font-size:13.5px;margin:0}
.casino-sticky.is-compact .alt-promo .btn{width:auto;padding:9px 18px;font-size:13.5px}

/* 13d. TAGS & AKA ---------------------------------------------------------- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.tag-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);
  font-weight:500;line-height:1;
}
.tag-chip:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.tag-chip .n{font-size:12px;color:var(--muted);background:var(--surface);border-radius:var(--r-pill);padding:2px 8px}
.tag-chip.lvl-1{font-size:13.5px}
.tag-chip.lvl-2{font-size:14.5px}
.tag-chip.lvl-3{font-size:16px}
.tag-chip.lvl-4{font-size:17.5px;font-weight:600}
.tag-chip.lvl-5{font-size:19.5px;font-weight:600;border-color:var(--blue);color:var(--blue)}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag-row .tag-chip{padding:6px 13px;font-size:13.5px}
.aka-intro{font-size:16px;line-height:1.68;color:var(--ink-soft);margin:0 0 28px;max-width:780px}
.aka-intro b{color:var(--ink)}
.aka-solo{max-width:330px;margin-bottom:12px}
.side .tag-row{margin-top:2px}


/* Real uploaded images reuse the placeholder classes, so they must fill the
   forced aspect-ratio box instead of being stretched to it. */
img.banner, img.logo-tile, .hero-feature > img { object-fit: cover; }
img.logo-tile { background: none; }

/* 14. RESPONSIVE ----------------------------------------------------------- */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .hero-rail{flex-direction:row;flex-wrap:wrap;gap:20px 30px}
  .hero-rail .mini{flex:1 1 300px}
  .casino-head{grid-template-columns:1fr;gap:26px}
  .casino-body{grid-template-columns:1fr;gap:40px}
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .country-grid{grid-template-columns:repeat(3,1fr)}
  .dash{grid-template-columns:1fr;gap:26px}
  .dash-side{position:static}
  .dash-nav{flex-direction:row;flex-wrap:wrap}
  .dash-nav button,
  .dash-nav a{width:auto}
  .dash-nav .sep{display:none}
}
@media (max-width:860px){
  .header-inner{height:64px;gap:14px}
  .nav-toggle{display:grid}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;padding:12px;background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);display:none;
  }
  .main-nav.open{display:flex}
  .nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 12px}
  .lang-menu{width:min(90vw,380px);grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2,.proscons,.spec,.tiles,.casino-hero,.footer-cols,.stat-grid{grid-template-columns:1fr}
  .tiles{grid-template-rows:none;height:auto}
  .cover .banner{height:auto}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .alt-promo .row{grid-template-columns:1fr}
  .hero-feature .overlay{grid-template-columns:1fr;text-align:center;justify-items:center;padding:28px 22px}
  .hero-feature .disc{width:110px;height:110px;font-size:15px}
  .section{padding:32px 0}
  .casino-sticky{position:static;box-shadow:none;border-bottom-color:transparent}
  .casino-head{padding:18px 18px 22px}
  .topbar .note{display:none}
}
@media (max-width:560px){
  .grid-4,.mini-grid,.country-grid{grid-template-columns:1fr}
  .container{padding:0 18px}
  .wordmark span{letter-spacing:.24em;text-indent:.24em}
  .casino-title h1{font-size:26px}
}

/* 15. RTL (Arabic) --------------------------------------------------------- */
[dir="rtl"] .main-nav{margin-left:0;margin-right:auto}
[dir="rtl"] .nav-dropdown,[dir="rtl"] .lang-menu{left:auto;right:0}
[dir="rtl"] .mini-actions{text-align:center}
[dir="rtl"] .dash-nav button{text-align:right}
[dir="rtl"] .breadcrumb li+li::before{content:'/';margin-right:0;margin-left:8px}
[dir="rtl"] .fav{right:auto;left:10px}

/* 16. CTA ------------------------------------------------------------------
   One component, four placements (hero / inline / rail / bar). The play button
   is green on purpose: blue is the site's link colour, so the money button has
   to be the one thing on the page that is not blue.                          */
.btn-cta{
  background:var(--green);color:#fff;font-weight:600;font-size:16px;
  padding:15px 30px;box-shadow:0 6px 18px rgba(111,190,47,.32);
}
.btn-cta.btn-sm{padding:9px 18px;font-size:13.5px;box-shadow:none}
.btn-cta:hover{background:#5da625;color:#fff;box-shadow:0 8px 22px rgba(111,190,47,.42)}
.btn-cta:active{transform:translateY(1px)}
.btn-cta::after{content:'→';margin-inline-start:10px;font-weight:400}
[dir="rtl"] .btn-cta::after{content:'←'}

.cta .cta-kicker{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.cta .cta-brand{font-family:var(--font-head);font-size:17px;font-weight:600;color:var(--ink);margin:0 0 4px}
.cta .cta-bonus{font-family:var(--font-head);font-weight:700;color:var(--blue);margin:0}
.cta .cta-tc{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.cta .cta-geo{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);margin:12px 0 0}
.cta .cta-geo .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.cta.is-alt .cta-bonus{color:var(--ink)}

/* hero — sits under the welcome-bonus tile, the primary conversion point */
.cta-hero{
  margin-top:var(--gap);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-tile);padding:22px 24px;box-shadow:var(--shadow);
}
.cta-hero .cta-main{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cta-hero .cta-copy{flex:1 1 260px}
.cta-hero .logo-tile{flex:none}
.cta-hero .cta-brand.lg{font-size:22px;margin:0}
.cta-hero .cta-bonus{font-size:24px;line-height:1.25}
.cta-hero .cta-act{text-align:center;flex:none}
.cta-hero .cta-act .cta-tc{margin-top:9px}
.cta-hero .cta-disc{font-size:12px;color:var(--muted);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.cta-hero .cta-alt-note{font-size:14px;color:var(--ink-soft);margin:0 0 16px;line-height:1.55}
.cta-hero.is-alt{border-color:#f0d9a8;background:#fffaf0}

/* inline — a band placed after the review text */
.cta-inline{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--blue-soft);border-radius:var(--r-tile);padding:24px 26px;margin:40px 0 0;
}
.cta-inline .cta-brand{font-size:19px;margin-bottom:6px}
.cta-inline .cta-bonus{font-size:16px}

/* rail — sticky sidebar card */
.cta-rail{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);
  padding:22px;text-align:center;box-shadow:var(--shadow);
  /* Clears BOTH pinned things above it: the site header, and the casino head
     that pins under it and halves on scroll. app.js measures the compact head
     and writes --rail-top; the literal here is the same sum (73 + 126 + 16) and
     only applies before that runs, or if JS is off. */
  position:sticky;top:var(--rail-top,215px);margin-bottom:38px;
}
/* 2.5x the 56px base tile — the sidebar card is the one place the brand mark
   has room to be the thing you look at first. Radius, padding and the
   initials fallback all scale with it or a real logo sits in a tiny box. */
.cta-rail .logo-tile{
  width:140px;height:140px;border-radius:25px;padding:10px;font-size:26px;
  margin:0 auto 16px;
}
.cta-rail .cta-bonus{font-size:19px;line-height:1.35;margin-bottom:16px}
.cta-rail .cta-geo{justify-content:center}
.cta-rail.is-alt{border-color:#f0d9a8;background:#fffaf0}

/* Two things have to be true for the rail to stick usefully.
   A sticky element can only travel inside its own parent's box, so that box has
   to be tall — hence the sidebar stretches to the article's height and the rail
   sits in a 1fr row that takes everything the other blocks leave over.
   And anything that FOLLOWS a sticky element scrolls behind it, so the other
   blocks cannot be its siblings — they live in the second row, and the rail
   simply releases when it reaches them. */
.casino-body .side{align-self:stretch;display:grid;grid-template-rows:1fr auto}
.side-sticky{min-height:0}
.side-rest{min-width:0}

/* bar — mobile only, revealed once the hero CTA has scrolled out of view */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,20,28,.12);
}
.cta-bar .cta-bonus{font-size:14px;font-weight:700;line-height:1.3}
.cta-bar .cta-tc{font-size:11.5px;margin:2px 0 0}
.cta-bar .btn-cta{padding:12px 20px;font-size:14.5px;flex:none;box-shadow:none}
.cta-bar-copy{min-width:0;overflow:hidden}
.cta-bar-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:860px){
  .cta-hero .cta-main,.cta-inline{flex-direction:column;align-items:stretch;text-align:center}
  .cta-hero .cta-act .btn-cta,.cta-inline .btn-cta{display:flex;width:100%}
  .cta-hero .cta-geo,.cta-inline .cta-tc{justify-content:center}
  .cta-rail{position:static}
  .casino-body .side{display:block}
  .cta-bar[hidden]{display:none}
  .cta-bar.is-shown{display:flex}
  body.has-cta-bar{padding-bottom:76px}
}

/* 17. Cities ---------------------------------------------------------------*/
.city-section{border-top:1px solid var(--line);padding-top:34px}
.city-note{font-size:14px;color:var(--muted);margin:0 0 18px;max-width:70ch;line-height:1.6}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.city-chip{
  display:block;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card);font-size:14.5px;color:var(--ink-soft);
}
.city-chip:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}

/* 18. Gates (age confirmation, refused market) -----------------------------
   A blocking overlay, not a dismissible banner: the page underneath stays in
   the markup so crawlers — which skip the gate entirely — see the real page. */
body.is-gated{overflow:hidden}
.gate{
  position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(16,20,28,.72);backdrop-filter:blur(4px);overflow-y:auto;
}
.gate-card{
  background:var(--card);border-radius:var(--r-tile);box-shadow:var(--shadow-lg);
  padding:34px 34px 28px;max-width:520px;width:100%;text-align:center;margin:auto;
}
.gate-mark{
  display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue);font-size:26px;margin-bottom:18px;
}
.gate-mark.age{font-family:var(--font-head);font-weight:700;font-size:22px;background:#eaf6e2;color:#4e8f1f}
.gate-block .gate-mark{background:#fdeceb;color:var(--red)}
.gate-card h1{font-size:24px;line-height:1.25;margin:0 0 12px}
.gate-card p{font-size:15px;line-height:1.65;color:var(--ink-soft);margin:0 0 16px}
.gate-points{text-align:start;margin:0 0 22px;padding:18px 20px;background:var(--bg-alt);border-radius:var(--r-card)}
.gate-points li{
  position:relative;padding-inline-start:26px;font-size:14px;line-height:1.55;
  color:var(--ink-soft);margin-bottom:11px;
}
.gate-points li:last-child{margin-bottom:0}
.gate-points li::before{
  content:'✓';position:absolute;inset-inline-start:0;top:0;color:var(--green);font-weight:700;
}
.gate-leave{display:inline-block;margin-top:14px;font-size:14px;color:var(--muted)}
.gate-small{font-size:12.5px;color:var(--muted);margin:18px 0 0;line-height:1.6}
.gate-small a{text-decoration:underline}
@media (max-width:560px){
  .gate{padding:0}
  .gate-card{border-radius:0;min-height:100%;padding:28px 22px}
}

/* 19. Footer affiliate disclosure ------------------------------------------*/
.footer-disclosure{
  margin-top:34px;padding:22px 24px;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-tile);
}
.footer-disclosure p{font-size:13px;line-height:1.7;margin:0 0 10px;opacity:.78}
.footer-disclosure p:last-child{margin-bottom:0}
.footer-disclosure .head{font-weight:600;font-size:13.5px;opacity:1;margin-bottom:8px}
.footer-disclosure .age{font-weight:600;opacity:1}
.footer-disclosure a{text-decoration:underline}

/* The head panel when it is selling THIS casino rather than an alternative:
   green button, no competitor link on the cover, and the geo line as caption. */
.alt-promo.is-own{border-color:#cfe6b6;background:#f7fcf2}
.alt-promo.is-own .caption{color:var(--ink-soft)}
.alt-promo.is-own .banner{cursor:default}

/* 20. "Today's top" menu ----------------------------------------------------
   A promotional dropdown rather than a list of links, so it gets rows with the
   brand mark and the offer. Width is fixed because a bonus line varies wildly
   and a menu that changes width as you hover reads as broken. */
.nav-dropdown.top{width:340px;padding:8px;max-height:70vh;overflow-y:auto}
.nav-dropdown.top .top-row{
  display:grid;grid-template-columns:18px 34px minmax(0,1fr);gap:10px;align-items:center;
  padding:7px 8px;border-radius:8px;
}
.nav-dropdown.top .top-row:hover{background:var(--bg-alt);text-decoration:none}
.nav-dropdown.top .rank{
  font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--muted);text-align:center;
}
.nav-dropdown.top .logo-tile{width:34px;height:34px;border-radius:7px;font-size:7.5px;padding:2px}
.nav-dropdown.top .txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.nav-dropdown.top .nm{font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-dropdown.top .bn{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){
  .nav-dropdown.top{width:auto;max-height:none}
}
.nav-dropdown.top .top-all{
  display:block;margin-top:4px;padding:9px 8px;border-top:1px solid var(--line);
  font-size:13px;color:var(--blue);text-align:center;border-radius:0 0 8px 8px;
}
.nav-dropdown.top .top-all:hover{background:var(--bg-alt);text-decoration:none}
.top-note{border-top:1px solid var(--line);padding-top:26px}
.top-note .muted{font-size:14px;line-height:1.65;max-width:70ch;margin:0 0 16px}
.top-note .btn+.btn{margin-inline-start:10px}