/* verovapaatkasinot.co — visual layer (presentation only) */

/* ---------------------------------------------------------------- tokens */
.theme-pika{
  --brand:#16232b; --brand-2:#27414f; --brand-3:#0d161c; --brand-ink:#f2f7f9;
  --accent:#0aa3bf; --accent-2:#35c3db; --accent-ink:#04222a;
  --bg:#f2f5f6; --surface:#fff; --surface-2:#e9eff1; --surface-3:#dde6e9;
  --ink:#131c22; --ink-soft:#4e5f69; --ink-faint:#7a8b95;
  --line:#dbe4e8; --line-soft:#e8eef0; --line-strong:#c3d0d6;
  --ok:#0d7355; --ok-bg:#e4f4ee; --ok-line:#b9dfd0;
  --no:#a13126; --no-bg:#fbeae7; --no-line:#f0cac2;
  --warn-bg:#fff5e6; --warn-line:#f0d9ac; --info-bg:#e6f1f4;
  --ring:0 0 0 3px rgba(10,163,191,.32);
  --shadow-xs:0 1px 2px rgba(13,22,28,.05);
  --shadow:0 1px 2px rgba(13,22,28,.05),0 10px 26px -14px rgba(13,22,28,.22);
  --shadow-lg:0 2px 4px rgba(13,22,28,.06),0 24px 56px -22px rgba(13,22,28,.34);
  --maxw:1150px;
  /* Column width comes from base v2's --prose/--wide, which the break-out rule
     also computes against. Setting .prose{max-width} here instead would desync
     the two and burst wide blocks out of the column. Set the variables.

     Both are pinned to the shell's inner width (--maxw minus .wrap's 2x22px
     padding) so the prose column, the break-out blocks and the hero all resolve
     to the SAME left edge. See the alignment block below. */
  --prose:1106px; --wide:1106px;
}

/* ---------------------------------------------------------------- alignment
   Before this, one page had four different left edges at 1280px: header/hero
   shell 57, h1 and hero-main 79, toplist/toc/tables 104, and prose body text
   224. The cause was base.css centring `.prose` at 860px (`margin-inline:auto`)
   while its break-out rule dragged data blocks 120px back out of that narrower
   box — so text, blocks and hero each landed somewhere different.

   Fix: let the prose wrap be exactly as wide as every other .wrap and neutralise
   the break-out (it has nothing left to break out of), so everything shares one
   left edge.

   ONE width, not two. An earlier pass capped running text at 74ch while blocks
   ran the full column; that reads as left-aligned text stranded against a dead
   right margin, which is what it was. Text now fills the column like every other
   block. (Same conclusion the .casino build reached — do not reintroduce a
   measure cap here.) */
.wrap.prose{max-width:var(--maxw);margin-inline:auto}
@media (min-width:1000px){
  .prose > .rec-head,
  .prose > .toc,
  .prose > .paylist,
  .prose > .people,
  .prose .table-wrap{margin-inline:0}
}
/* base.css caps .hero .lead at --measure (70ch). Override: the hero lead is text
   content too and gets the same full width as everything else. */
.hero .lead{max-width:none}

/* ---------------------------------------------------------------- type */
body{font-size:17.5px;line-height:1.66;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,.featured-name,.foot-h{font-family:var(--font-head)}
h1{font-size:clamp(2rem,1.2rem + 3.1vw,3.05rem);letter-spacing:-.015em;line-height:1.08}
h2{font-size:clamp(1.42rem,1.08rem + 1.3vw,2rem);letter-spacing:-.012em;line-height:1.18}
h3{font-size:1.18rem;letter-spacing:-.006em}
.prose p{margin:0 0 1.05em}
.lead{font-size:1.12rem;color:var(--ink-soft)}

/* A hairline rule under every section heading — the one repeated ornament on the
   site, standing in for the coloured blocks the other builds use. */
h2.sec{padding-bottom:.32em;border-bottom:2px solid var(--line-strong);margin-top:2.4em}
h2.sec::after{content:"";display:block;width:64px;height:2px;background:var(--accent);
  margin-bottom:-2px;position:relative;top:calc(.32em + 2px)}

/* ---------------------------------------------------------------- chrome */
.topbar{background:var(--brand-3);color:#c9d8de;font-size:.8rem;letter-spacing:.004em}
.topbar a{color:#eaf4f7}
.site-header{background:var(--brand);border-bottom:3px solid var(--accent)}
.brand small{color:#a9bfc9;font-weight:500;letter-spacing:.01em}
.brand-mark{border-radius:3px}
.nav a{border-radius:3px;font-weight:650}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(255,255,255,.1)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.age{background:var(--accent);color:#fff;border-radius:3px;font-weight:800}

/* ---------------------------------------------------------------- hero */
.hero{padding:34px 0 6px}
/* No 18ch cap: it forced the H1 to wrap over three lines and left the right half
   of the hero empty. The heading runs the full column like the rest of the text. */
.crumbs{padding-top:18px}
/* base.css resets .hero-fig's margin but never .secfig's, so section figures were
   inheriting the UA default `figure{margin:1em 40px}` and sitting 40px inset from
   every other block on the page. */
.secfig{margin:0 0 22px}
.hero-fig img,.secfig img{border-radius:0;border:1px solid var(--line);
  box-shadow:var(--shadow);width:100%;height:auto;display:block}
.hero-fig figcaption,.secfig figcaption{font-size:.83rem;color:var(--ink-faint);
  margin-top:8px;border-left:2px solid var(--accent);padding-left:10px}

/* ---------------------------------------------------------------- hero layout
   The markup emits .hero-grid > .hero-main + .hero-side. Without these rules the
   grid falls back to display:block and the affiliate CTA stacks full-width below
   the hero image instead of sitting beside it — which is the opposite of the
   agreed order (hero image + CTA, then toplist, then the rest). */
.hero-grid{display:grid;gap:26px;align-items:start;margin-top:22px}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 352px}
  .hero-side{position:sticky;top:18px}
}
.hero-main{min-width:0}
.hero-side{min-width:0}

/* ---------------------------------------------------------------- glossary */
.gloss{margin:18px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.gloss dt{font-family:var(--font-head);font-weight:700;color:var(--ink);
  padding:12px 0 2px;border-top:1px solid var(--line-soft)}
.gloss dt:first-of-type{border-top:0}
.gloss dd{margin:0 0 12px;color:var(--ink-soft);font-size:.96rem}

/* ---------------------------------------------------------------- featured CTA */
.featured{background:var(--brand);color:var(--brand-ink);border-radius:0;
  border:1px solid var(--brand-3);border-top:3px solid var(--accent);
  padding:22px;box-shadow:var(--shadow-lg)}
.featured-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 12px;font-weight:800}
.featured-logo{background:#0b1217;border:1px solid #23343d;padding:10px;width:100%;
  height:auto;object-fit:contain}
.featured-name{font-size:1.5rem;margin:14px 0 6px;font-weight:700}
.featured-desc{color:#c2d3db;font-size:.95rem;margin:0 0 4px}
.featured .fine{color:#93a8b2}
.featured .pill{background:rgba(255,255,255,.1);color:#dcecf1;border-color:rgba(255,255,255,.18)}
.featured .pill--no{background:rgba(214,92,76,.2);color:#ffd2c9;border-color:rgba(214,92,76,.35)}
.featured-cta{width:100%;justify-content:center;margin-top:16px}
.featured-more{margin:12px 0 0;font-size:.9rem}
.featured-more a{color:var(--accent-2)}

/* ---------------------------------------------------------------- buttons */
.btn{background:var(--accent);color:#fff;border-radius:3px;font-weight:750;
  letter-spacing:.005em;border:1px solid transparent;transition:background .15s var(--ease)}
.btn:hover{background:#0b8ea6}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---------------------------------------------------------------- toplist */
.rec-list{gap:14px}
.rec-card{background:var(--surface);border:1px solid var(--line);border-radius:0;
  border-left:3px solid var(--line-strong);box-shadow:var(--shadow-xs);
  transition:border-left-color .15s var(--ease),box-shadow .15s var(--ease)}
.rec-card:hover{border-left-color:var(--accent);box-shadow:var(--shadow)}
/* The ordinal is the only decorative flourish in the list; base.css sets the counter. */
.rec-card::before{content:counter(rec,decimal-leading-zero);position:absolute;
  top:0;left:0;background:var(--brand);color:var(--accent-2);font-size:.72rem;
  font-weight:800;letter-spacing:.06em;padding:4px 9px;font-family:var(--font-head)}
.rec-logo{background:#0b1217;border-radius:0;border:1px solid var(--line)}
.rec-body h3{margin:0 0 6px}
.rec-desc{margin:0 0 10px;color:var(--ink-soft);font-size:.95rem}
.rec-meta dt{color:var(--ink-faint)}
.pill{border-radius:3px;border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--ink-soft);font-weight:700}
.pill--no{background:var(--no-bg);border-color:var(--no-line);color:var(--no)}
.pill--ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}

/* ---------------------------------------------------------------- notes, facts */
.note{border-radius:0;border-left:3px solid var(--line-strong)}
.note--warn{border-left-color:#d8a13a}
.note strong{font-family:var(--font-head)}
.keyfacts{border-radius:0;border:1px solid var(--line);border-top:3px solid var(--accent);
  box-shadow:var(--shadow-xs)}
.keyfacts h2{font-size:1.06rem;letter-spacing:.01em}
.keyfacts h2.sec{border-bottom:0}
.keyfacts h2.sec::after{display:none}

/* ---------------------------------------------------------------- toc */
.toc{border:1px solid var(--line);border-radius:0;background:var(--surface);
  box-shadow:var(--shadow-xs)}
.toc summary{font-weight:750;font-family:var(--font-head)}
.toc a{color:var(--ink-soft)}
.toc a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- tables */
.table-wrap{border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow-xs);
  background:var(--surface)}
table{font-size:.94rem}
thead th{background:var(--brand);color:var(--brand-ink);font-family:var(--font-head);
  font-weight:650;letter-spacing:.01em}
tbody th[scope="row"]{font-weight:750}
tbody tr:nth-child(even){background:var(--surface-2)}
caption{text-align:left;color:var(--ink-faint);font-size:.83rem;padding:12px 14px;
  border-bottom:1px solid var(--line)}
td.src a{word-break:break-word;font-size:.88rem}

/* ---------------------------------------------------------------- byline, authors */
.byline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;font-size:.9rem}
.byline img{border-radius:50%;border:2px solid var(--accent)}
.author-box{background:var(--surface);border:1px solid var(--line);border-radius:0;
  border-left:3px solid var(--accent);box-shadow:var(--shadow-xs)}
.author-box img{border-radius:50%}
.author-box .role{color:var(--accent);font-weight:700;font-size:.9rem;margin:2px 0 8px}

/* ---------------------------------------------------------------- payments */
.paystrip{background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:18px;box-shadow:var(--shadow-xs)}
.paystrip-h{font-family:var(--font-head);font-weight:700;margin:0 0 12px;font-size:1.02rem}
.paystrip ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.paystrip li{background:var(--surface-2);border:1px solid var(--line);padding:8px 12px;
  display:grid;place-items:center}
.paystrip img{width:auto;height:26px;object-fit:contain;display:block}
.paystrip-c{margin:12px 0 0}

/* ---------------------------------------------------------------- step figures
   Process shown as a grid of captioned figures. Without this rule the component
   fell back to a bare <ol> of 760px-wide images and inline <b>/<span>, which
   rendered as a broken wall of whitespace on the live site. */
.stepfigs{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px;
  counter-reset:sf}
@media (min-width:640px){.stepfigs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1050px){.stepfigs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stepfigs li{counter-increment:sf;background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--line-strong);display:flex;flex-direction:column}
.stepfigs img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;
  border-bottom:1px solid var(--line)}
.stepfigs b{display:block;font-family:var(--font-head);font-weight:700;font-size:1rem;
  padding:13px 16px 4px}
.stepfigs b::before{content:counter(sf) ". ";color:var(--accent)}
.stepfigs span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.5;
  padding:0 16px 15px}

/* ---------------------------------------------------------------- related */
.related{margin:38px 0 0}
.rel-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:700px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1050px){.rel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rel-grid a{display:block;height:100%;background:var(--surface);
  border:1px solid var(--line);border-top:3px solid var(--line-strong);
  text-decoration:none;color:inherit;transition:border-top-color .15s var(--ease)}
.rel-grid a:hover{border-top-color:var(--accent)}
.rel-grid img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  border-bottom:1px solid var(--line)}
.rel-grid b{display:block;font-family:var(--font-head);font-weight:700;margin:0;
  padding:12px 16px 4px}
.rel-grid span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.45;
  padding:0 16px 14px}

/* ---------------------------------------------------------------- payment rails */
.rail-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:640px){.rail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1050px){.rail-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rail{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  padding:14px;display:grid;gap:10px;align-content:start}
.rail img{width:100%;max-width:150px;height:auto;background:var(--surface-2);
  border:1px solid var(--line);padding:6px;object-fit:contain}
.rail h3{margin:0;font-size:1.02rem}
.rail p{margin:0;font-size:.89rem;color:var(--ink-soft);line-height:1.5}

/* ---------------------------------------------------------------- faq */
.faq details{border:1px solid var(--line);border-radius:0;background:var(--surface);
  margin:0 0 8px}
.faq summary{font-family:var(--font-head);font-weight:700;padding:14px 16px;cursor:pointer}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 16px 14px;color:var(--ink-soft)}

/* ---------------------------------------------------------------- verdict, sources */
.verdict{background:var(--brand);color:var(--brand-ink);padding:26px;margin:34px 0 0;
  border-top:3px solid var(--accent)}
.verdict h2.sec{color:#fff;border-bottom-color:rgba(255,255,255,.22);margin-top:0}
.verdict p{color:#cfe0e7;margin:0}
.sources ol{font-size:.9rem;color:var(--ink-soft)}
.sources li{margin:0 0 6px}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--brand-3);color:#b9cdd5;border-top:3px solid var(--accent)}
.site-footer a{color:#e3f1f5}
.foot-h{color:#fff;font-weight:700;letter-spacing:.02em}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.12)}
.site-footer .fine{color:#8ba3ad}

/* ---------------------------------------------------------------- mobile */
@media (max-width:860px){
  body{font-size:17px}
  h2.sec{margin-top:2em}
  .featured{padding:18px}
  .paystrip img{height:22px}
}