/* ============================================================== theme: pika
   Emerald + teal with a warm coral accent, deliberately unlike the lead domain's
   navy/amber. Values are tuned against the FLUX artwork so illustrations sit on
   surfaces that share their hue. */
.theme-pika{
  --bg:#f2f6f4; --surface:#fff; --surface-2:#eef4f1; --surface-3:#e2ece8;
  --ink:#0c2321; --ink-soft:#4a5f5a; --ink-faint:#748983;
  --line:#dbe6e1; --line-soft:#e9f0ed; --line-strong:#c3d5ce;

  --brand:#0a4d43; --brand-2:#0f6b5c; --brand-3:#072f29; --brand-ink:#fff;
  --accent:#e4614b; --accent-2:#f07f68; --accent-ink:#fff;

  --ok:#12705a; --ok-bg:#e2f2ec; --ok-line:#b7ddd0;
  --no:#a3372a; --no-bg:#fceae6; --no-line:#f2c8bf;
  --warn-bg:#fdf3e6; --warn-line:#eed6ad; --info-bg:#e8f2ef;

  --ring:0 0 0 3px rgba(228,97,75,.32);
  /* Kept only because base.css reads it; the content column is full width here
     (see "FULL-WIDTH CONTENT COLUMN" below), so this no longer caps anything. */
  --prose:880px;
}
.shape-sharp{--radius:6px;--radius-sm:4px;--radius-xs:3px}

/* base.css .btn uses --accent as the fill; coral on white needs white ink */
.theme-pika .btn{background:var(--accent);color:#fff;font-weight:700;letter-spacing:.01em}
.theme-pika .btn:hover{background:var(--accent-2);color:#fff}
.btn--lg{padding:16px 26px;font-size:1.04rem;width:100%}

/* ============================================================== header */
.topbar{background:var(--brand-3);color:#cfe3dd;font-size:.8rem}
.topbar a{color:#fff;text-decoration:underline}
@media (max-width:620px){.topbar-r{display:none}}
/* Header stays base.css's DARK gradient. Do not set .site-header{background:var(--surface)}
   here: base.css gives .nav a `color:inherit` (white, for the dark header), so a light
   background makes the whole nav invisible — white on white. If a light header is ever
   wanted, add the `hdr-light` body class instead, which recolours the links too. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.brand-mark{border-radius:var(--radius-sm);display:block}
.brand span{font-weight:800;font-size:1.12rem;line-height:1.1;display:block;letter-spacing:-.01em}
.brand small{display:block;font-weight:500;font-size:.72rem;color:#8dc9b8;
  letter-spacing:.02em;margin-top:2px}
/* hero sits directly under the header: one continuous dark band, no seam */
.hero-band .hero{margin-top:0}
.site-header::after{background:var(--accent)}

/* ============================================================== hero band */
.hero-band .hero{position:relative;padding:0;margin:0 0 30px;background:var(--brand-3);
  overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0;display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* readability scrim — the artwork is busy on the right, copy sits left */
.hero-band .hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(7,47,41,.95) 0%,rgba(7,47,41,.86) 42%,rgba(7,47,41,.55) 100%)}
.hero-in{position:relative;z-index:2;display:grid;gap:30px;padding-block:48px 44px;
  grid-template-columns:1fr}
@media (min-width:1000px){
  .hero-in{grid-template-columns:minmax(0,1.32fr) minmax(320px,.95fr);
    align-items:start;gap:48px;padding-block:60px 56px}
}
.hero-copy{color:#eaf5f1;min-width:0}
.hero-copy h1{color:#fff;font-size:clamp(1.95rem,4.3vw,3.05rem);line-height:1.08;
  letter-spacing:-.022em;margin:.36em 0 .34em;text-wrap:balance}
.hero-band .hero .lead{color:#c8e0d9;font-size:1.1rem;line-height:1.62;max-width:56ch}
.kicker{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#8dc9b8;margin:0}
.hero-copy .age{background:var(--accent);color:#fff;border-color:transparent}

.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:28px;color:#d6e9e3;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:2px;top:.44em;width:13px;height:8px;
  border-left:2.4px solid var(--accent-2);border-bottom:2.4px solid var(--accent-2);
  transform:rotate(-45deg)}

.hero-stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin:26px 0 0;padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.16)}
.hero-stats div{margin:0}
.hero-stats dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:#8dc9b8;
  font-weight:700}
.hero-stats dd{margin:3px 0 0;font-size:1.32rem;font-weight:800;color:#fff;line-height:1.1}

/* hero commercial slot */
.hero-cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-lg);color:var(--ink);min-width:0}
.hc-kicker{margin:0 0 12px;font-size:.7rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:7px}
.hc-kicker::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%}
.hc-logo{display:block;width:100%;max-width:210px;height:auto;margin:0 auto 12px;
  border-radius:var(--radius-sm);border:1px solid var(--line-soft)}
.hc-name{margin:0 0 6px;font-size:1.2rem;font-weight:800;color:var(--ink);text-align:center}
.hc-desc{margin:0 0 12px;font-size:.87rem;line-height:1.55;color:var(--ink-soft)}
.hc-more{margin:11px 0 10px;text-align:center;font-size:.88rem}
.hero-cta .fine{margin:0;color:var(--ink-faint)}

/* ============================================================== inner page head */
.phead{background:var(--brand-3);color:#eaf5f1;padding:34px 0 30px;margin-bottom:26px}
.phead h1{color:#fff;font-size:clamp(1.72rem,3.6vw,2.5rem);line-height:1.12;
  letter-spacing:-.02em;margin:.34em 0 .3em;text-wrap:balance}
.phead .lead{color:#c8e0d9;font-size:1.06rem;line-height:1.62;max-width:64ch;margin:0}
.phead .age{background:var(--accent);color:#fff;border-color:transparent}
.crumbs{padding-top:14px}

/* ============================================================== prose */
/* ---- FULL-WIDTH CONTENT COLUMN, ONE LEFT AND ONE RIGHT EDGE ---------
   base.css CENTRES .prose at the narrow measure (--prose) inside the shell and
   then pulls .rec-head, .toc and .table-wrap back out to --wide. That gives a
   page two left edges: the shell edge (header, H1, breadcrumbs, toplist, TOC,
   tables, footer) and the centred measure (byline, body copy, H2s, steps,
   related, sources, author box) — a 108px stagger at 1440px, five times down a
   single page.

   Owner's call: the content must be FULL WIDTH, matching the toplist and the
   table of contents, not a narrow column with a right gutter. So the column
   fills the shell and the break-outs are neutralised to zero — with everything
   already at shell width there is nothing left to break out of.

   NOTE: base.css's break-out margin is calc((--prose - min(--wide, 100vw-52px))/2).
   Those margins MUST be zeroed here. Widening .prose while leaving them in place
   makes the calc resolve against a --prose that no longer matches the rendered
   width, and the toplist/TOC/tables burst outside the shell by the difference. */
.prose{max-width:none;margin-inline:0}
@media (min-width:1000px){
  .prose > .rec-head,
  .prose > .toc,
  .prose > .paylist,
  .prose > .people,
  .prose .table-wrap{margin-inline:0}
}

/* flow-root, NOT overflow:hidden — the latter clips base.css's break-out elements */
.prose>section{display:flow-root}
.prose h2.sec{font-size:clamp(1.34rem,2.4vw,1.72rem);line-height:1.22;letter-spacing:-.015em;
  margin:2.1em 0 .55em;padding-top:.5em;border-top:2px solid var(--line);position:relative}
.prose h2.sec::after{content:"";position:absolute;top:-2px;left:0;width:58px;height:2px;
  background:var(--accent)}
.prose h3{font-size:1.09rem;line-height:1.3;margin:1.7em 0 .4em;letter-spacing:-.008em}

/* direct-answer box under the H1 */
.answer{background:var(--info-bg);border-left:4px solid var(--brand-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:16px 18px;margin:0 0 22px}
.answer p{margin:0;font-size:1.04rem;line-height:1.62;color:var(--ink)}

/* ============================================================== figures */
.secfig{float:right;width:min(266px,40%);margin:4px 0 16px 26px;shape-margin:14px}
.secfig img{width:100%;height:auto;display:block;border-radius:var(--radius-sm);
  border:1px solid var(--line)}
.secfig figcaption,.bandfig figcaption{font-size:.76rem;color:var(--ink-faint);
  margin-top:8px;line-height:1.45}
@media (max-width:700px){.secfig{float:none;width:100%;margin:16px 0}}
/* Wide components must clear .secfig. Without this a table that starts beside a floated
   figure is squeezed to ~290px and grows a horizontal scrollbar instead of using the
   full measure. Applies to every full-width block, not just tables. */
.prose .table-wrap,.prose .steps,.prose .pc,.prose .paystrip,
.prose .rel-grid,.prose .bandfig,.prose .note{clear:both}
.bandfig{margin:22px 0;display:grid;gap:14px;grid-template-columns:200px 1fr;align-items:center}
.bandfig img{width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--line)}
@media (max-width:640px){.bandfig{grid-template-columns:1fr}}

/* ============================================================== steps */
.steps{list-style:none;counter-reset:st;margin:20px 0;padding:0;display:grid;gap:2px}
.prose .steps{padding-left:0}
.steps li{counter-increment:st;position:relative;padding:16px 18px 16px 62px;
  background:var(--surface);border:1px solid var(--line);margin:0}
.steps li+li{border-top:none}
.steps li::before{content:counter(st);position:absolute;left:18px;top:16px;width:28px;height:28px;
  display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800;
  font-size:.92rem;border-radius:var(--radius-xs)}
.steps h3{margin:0 0 4px;font-size:1.01rem}
.steps p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.58}

/* ============================================================== pros / cons */
.pc{display:grid;gap:16px;grid-template-columns:1fr;margin:20px 0}
@media (min-width:720px){.pc{grid-template-columns:1fr 1fr}}
.pc-col{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;
  background:var(--surface)}
.pc-col h3{margin:0 0 10px;font-size:1rem}
.pc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.prose .pc-col ul{padding-left:0}
.pc-col li{position:relative;padding-left:26px;font-size:.93rem;line-height:1.55;margin:0}
.pc-pro{border-color:var(--ok-line);background:var(--ok-bg)}
.pc-con{border-color:var(--no-line);background:var(--no-bg)}
.pc-pro li::before{content:"+";position:absolute;left:4px;top:-1px;color:var(--ok);
  font-weight:800;font-size:1.12rem}
.pc-con li::before{content:"–";position:absolute;left:4px;top:-1px;color:var(--no);
  font-weight:800;font-size:1.12rem}

/* ============================================================== payment strip */
/* explicit reset: base.css `.prose ul` (0,1,1) beats a bare `.paystrip ul` */
.paystrip{margin:18px 0;padding:16px 18px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.paystrip ul,.prose .paystrip ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:0;padding:0}
.paystrip li{margin:0}
.paystrip img{display:block;height:38px;width:auto;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius-xs);padding:4px 8px}
.paystrip-h{margin:0 0 11px;font-weight:700;font-size:.93rem;color:var(--ink)}
.paystrip-c{margin:11px 0 0}

/* ============================================================== toplist cards */
.rec-grid .rec-list{gap:16px}
.rec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.rec-card::before{background:var(--accent);color:#fff;border-radius:var(--radius-xs);
  font-weight:800}
.rec-logo img{width:100%;height:auto;max-width:190px;margin:0 auto;display:block;
  border-radius:var(--radius-xs);border:1px solid var(--line-soft)}
.rec-body h3{margin:12px 0 6px;font-size:1.12rem}
.rec-desc{font-size:.88rem;line-height:1.55;color:var(--ink-soft);margin:0 0 12px}
.rec-meta{margin:0 0 12px;font-size:.81rem;display:grid;gap:5px}
.rec-meta div{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.rec-meta dt{color:var(--ink-faint);font-weight:600;margin:0}
.rec-meta dd{margin:0;color:var(--ink);font-weight:600}
.rec-cta{margin-top:auto;padding-top:12px}
.rec-cta .btn{width:100%}
.rec-cta .fine{display:block;text-align:center;margin:8px 0 0}

.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0}
.prose .tags{padding-left:0}
.tags li{margin:0}
.pill{font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-soft);border:1px solid var(--line)}
.pill--no{background:var(--no-bg);color:var(--no);border-color:var(--no-line)}

/* ============================================================== related */
.rel-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.prose .rel-grid{padding-left:0}
.rel-grid li{margin:0}
.rel-grid a{display:block;height:100%;padding:15px 17px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.rel-grid a:hover{border-color:var(--brand-2);box-shadow:var(--shadow)}
.rel-grid b{display:block;color:var(--brand);font-size:1rem;margin-bottom:4px}
.rel-grid span{display:block;color:var(--ink-soft);font-size:.86rem;line-height:1.5}

/* ============================================================== responsible gambling */
.rg{background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 22px;margin:34px 0 0}
.rg h2.sec{margin-top:0;border-top:none;padding-top:0}
.rg h2.sec::after{display:none}
.rg .ticks li{color:var(--ink-soft)}
.rg .ticks li::before{border-color:var(--accent)}

/* ============================================================== misc */
.keyfacts{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand-2)}
.note{border-radius:var(--radius-sm)}
.byline{border-bottom:1px solid var(--line);padding-bottom:14px}
.table-wrap table{border-radius:var(--radius-sm);overflow:hidden}
/* Safety for long unbreakable tokens (source URLs like wildz.com/fi/maksutavat) in the
   mobile stacked-card layout. Note: base.css makes <thead> screen-reader-only via
   position:absolute + clip, so an audit that measures element widths will report those
   header rows as "wider than the viewport" — that is by design, not an overflow bug. */
.prose table td,.prose table th{overflow-wrap:anywhere}
.prose table td.src{font-size:.86em}
.cols-2{display:grid;gap:4px 34px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.prose .cols-2{padding-left:0}
.site-footer{background:var(--brand-3);color:#b9d3cc}
.site-footer a{color:#fff}
.site-footer .foot-h{color:#fff}
.age{background:var(--brand);color:#fff;border:1px solid transparent;font-weight:800;
  font-size:.7rem;padding:2px 6px;border-radius:var(--radius-xs);letter-spacing:.03em}