/*
Theme Name: Rapid Transfer kasinot
Theme URI: https://rapidtransferkasinot.io/
Author: Kaarnatie Media Oy
Description: Vaalea sisaltokortti tumman palkin alla, taulukkomainen karkilista ja oikean laidan sisallysluettelo. Sisaltaa Kasino-sisaltotyypin seka kasinot-, karki-, toimi-, ukk- ja kuukausi-shortcodet.
Version: 1.0.1
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: rapidtransferkasinot
*/

:root {
  /* Slate ground with Rapid Transfer's own green as the single action colour.
     The payment screens pair exactly these two, so the site reads as the
     method it is about rather than as a generic casino skin. Amber is kept
     for caveats only and never sits on a button. */
 --ink-900: #10233f;
 --ink-800: #1b3356;
 --ink-700: #16294a;
 --ink-600: #2e4973;

 --act-500: #0ea97a;
 --act-600: #0b8260;
 --act-400: #34c295;
 --act-ink: #ffffff;

 --flag: #c2410c;
 --flag-dim: #9a3412;

 --link: #10233f;
 --link-hover: #0b8260;

 --bg: #f5f7fa;
 --bg-alt: #ffffff;
 --bg-tint: #eaf1f6;
 --card: #ffffff;
 --card-alt: #f3f6fa;
 --cream: #f3f6fa;
 --sand: #cdd9e6;
 --line: #e1e8f0;
 --line-strong: #c2cfdd;

 --tx: #0d1b30;
 --tx-soft: #41536f;
 --tx-faint: #697c99;
 --on-dark: #eef3f9;
 --on-dark-soft: #a8bbd4;

 --pos: #0b8260;
 --pos-bg: #e3f5ee;
 --neg: #c2410c;
 --neg-bg: #fdeee6;
 --warn: #8a6410;
 --warn-bg: #fdf4e2;
 --star: #d8a318;
 --shadow-1: 0 1px 3px rgba(8, 7, 36, .07);
 --shadow-2: 0 6px 20px rgba(8, 7, 36, .12);
 --header-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.72;
 -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- layout */

.rt-wrap { width: 100%; max-width: var(--w-text); margin-inline: auto; padding-inline: 20px; }
.rt-wrap-wide { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: 20px; }
main section { scroll-margin-top: calc(var(--header-h) + 14px); }

.entry-content > * { max-width: var(--w-text); margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--w-wide); }
.entry-content > .alignfull { max-width: none; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-weight: 800; line-height: 1.22; letter-spacing: -.015em;
  color: var(--ink-900); margin: 0 0 .55em; text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-top: 0; letter-spacing: -.026em; }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.85rem); margin-top: 2.1em; }
h3 { font-size: clamp(1.12rem, 2.2vw, 1.24rem); margin-top: 1.75em; margin-bottom: .4em; }
h4 { font-size: 1.04rem; margin-top: 1.4em; margin-bottom: .3em; }
h2 + h3, h3 + h4 { margin-top: .9em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }

strong { font-weight: 700; color: var(--ink-800); }

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

.rt-lead { font-size: 1.1rem; }
.rt-small { font-size: .9rem; color: var(--tx-faint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

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

.rt-sitehead {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: var(--ink-900);
}
.admin-bar .rt-sitehead { top: 32px; }
@media (max-width: 782px) { .admin-bar .rt-sitehead { top: 46px; } }

/* Same shell width as the article below, so the logo lines up with the content. */
.rt-sitehead .rt-bar {
  max-width: var(--w-jump); margin-inline: auto; padding-inline: 20px;
  height: var(--header-h); display: flex; align-items: center; gap: 18px;
}
/* flex: none - otherwise the nav squeezes the wordmark and distorts it. */
.rt-sitehead .rt-brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; flex: none; }
.rt-sitehead .rt-brand img { height: 28px; width: auto; max-width: none; display: block; }

.rt-nav-links ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.rt-nav-links li { margin: 0; }
.rt-nav-links a {
  color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.rt-nav-links a:hover { color: var(--act-400); }

/* The toggle only exists below the breakpoint where the menu row fits. */
.rt-nav-toggle { display: none; }
.rt-nav-toggle-bars, .rt-nav-toggle-bars::before, .rt-nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .18s ease, opacity .18s ease;
}
.rt-nav-toggle-bars::before, .rt-nav-toggle-bars::after { content: ""; position: absolute; }
.rt-nav-toggle-bars::before { transform: translateY(-6px); }
.rt-nav-toggle-bars::after  { transform: translateY(6px); }

@media (max-width: 1200px) {
  .rt-nav-toggle {
    display: flex; align-items: center; justify-content: center; position: relative;
    flex: none; width: 42px; height: 42px; margin-right: -8px;
    background: transparent; border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r); color: #fff; cursor: pointer; order: 3;
  }
  .rt-nav-toggle:hover { border-color: rgba(255, 255, 255, .45); }
  .rt-nav-toggle:focus-visible { outline: 2px solid var(--act-400); outline-offset: 2px; }
  .rt-nav-toggle[aria-expanded="true"] .rt-nav-toggle-bars { background: transparent; }
  .rt-nav-toggle[aria-expanded="true"] .rt-nav-toggle-bars::before { transform: rotate(45deg); }
  .rt-nav-toggle[aria-expanded="true"] .rt-nav-toggle-bars::after  { transform: rotate(-45deg); }

  /* Panel drops out of the header bar rather than pushing it taller, so the
     sticky header keeps its fixed height and nothing below it shifts. */
  .rt-nav-links {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    display: none; background: var(--ink-800);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 14px 30px rgba(8, 7, 36, .3);
  }
  .rt-nav-open .rt-nav-links { display: block; }
  .rt-nav-links ul {
    display: block; max-width: var(--w-jump); margin-inline: auto; padding: 6px 20px 14px;
  }
  .rt-nav-links li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
  .rt-nav-links a { display: block; padding: 13px 0; font-size: .88rem; }
}

/* On a phone the header CTA and the sticky dockbar say the same thing, and the
   two of them plus the toggle do not fit on one line. The dockbar wins: it is
   on screen the whole way down the page. */
/* .rt-sitehead qualifier on purpose: .rt-btn sets display later in this file at the
   same specificity and would otherwise win. */
/* The CTA is the only thing left in the header, so it stays at every width.
   It was hidden below 560px back when it shared the bar with the menu
   toggle and the wordmark and the three would not fit. */
@media (max-width: 420px) { .rt-nav-cta { padding: 9px 13px; font-size: .78rem; } }

@media (prefers-reduced-motion: reduce) {
  .rt-nav-toggle-bars, .rt-nav-toggle-bars::before, .rt-nav-toggle-bars::after { transition: none; }
}

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

.rt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-weight: 800; font-size: .97rem; line-height: 1;
  padding: 14px 24px; border-radius: var(--r); border: 0;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .12s ease, transform .12s ease;
}
.rt-btn:hover { text-decoration: none; transform: translateY(-1px); }

.rt-btn-cta { background: var(--act-500); color: var(--act-ink); box-shadow: var(--shadow-1); }
.rt-btn-cta:hover { background: var(--act-600); color: #fff; }

.rt-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.rt-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.entry-content .rt-btn-ghost { color: var(--ink-800); border-color: var(--line-strong); }
.entry-content .rt-btn-ghost:hover { border-color: var(--ink-800); background: var(--bg-tint); }

.rt-btn-sm { padding: 10px 16px; font-size: .87rem; }
.rt-btn-block { display: flex; width: 100%; }
.rt-nav-cta { padding: 10px 18px; font-size: .84rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---------------------------------------------------------------- dark head band */

.rt-pagehead {
  background: var(--ink-800); color: #fff;
  padding: 4px 0 38px;
  background-image: radial-gradient(1100px 380px at 82% -12%, rgba(229, 99, 11, .16), transparent 62%);
}
.rt-pagehead h1 { color: #fff; margin-bottom: .45em; }
.rt-pagehead > .rt-wrap > p,
.rt-pagehead .rt-lead { color: rgba(255, 255, 255, .88); }
.rt-pagehead a { color: #fff; }
/* The global `strong` colour is navy, which is the pagehead's own background -
   bold inside the dark head band would otherwise be invisible. */
.rt-pagehead strong,
.rt-pagehead b { color: inherit; }
.rt-pagehead a:hover { color: var(--act-400); }

/* On the front page the band sits above the contents-rail shell, so it has to
   take the shell's geometry - otherwise the H1, byline and intro are centred on
   the viewport while the article text below starts somewhere else entirely.
   These two rules mirror .rt-article-shell and .entry-content > * exactly. */
.home .rt-pagehead > .rt-wrap { max-width: var(--w-jump); padding-inline: 20px; }
.home .rt-pagehead > .rt-wrap > * { max-width: var(--w-text); margin-inline: auto; }

.rt-crumbs { font-size: .83rem; color: rgba(255, 255, 255, .6); padding: 22px 0 14px; }
.rt-crumbs a { color: rgba(255, 255, 255, .6); font-weight: 500; text-decoration: none; }
.rt-crumbs a:hover { color: #fff; text-decoration: underline; }
.rt-crumbs span.rt-sep { margin: 0 7px; opacity: .55; }

/* byline card */
.rt-byline {
  display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center;
  background: var(--ink-900); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg); padding: 14px 22px; margin: 0 0 24px;
}
.rt-by-item { display: flex; align-items: center; gap: 10px; }
.rt-by-item img {
  width: 38px; height: 38px; border-radius: 50%; display: block; flex: none;
  background: var(--ink-700);
}
/* label and value sit side by side, so the whole card reads as one line */
.rt-by-txt { display: flex; flex-direction: row; align-items: baseline; gap: 6px; line-height: 1.35; }
.rt-by-txt b { color: #fff; font-size: .82rem; font-weight: 700; }
.rt-by-txt a { color: rgba(255, 255, 255, .82); font-size: .82rem; font-weight: 500; text-decoration: underline; }
.rt-by-txt a:hover { color: var(--act-400); }
.rt-by-txt time { color: rgba(255, 255, 255, .82); font-size: .82rem; }
.rt-by-date { margin-left: auto; }
@media (max-width: 720px) {
  .rt-byline { gap: 14px 22px; padding: 14px 16px; }
  .rt-by-date { margin-left: 0; }
}

/* keyfacts bullets inside the band */
.rt-keyfacts { margin: 22px 0 0; }
.rt-keyfacts-head { font-weight: 800; color: #fff; margin: 0 0 .5em; }
.rt-keyfacts ul { list-style: none; padding: 0; margin: 0; }
.rt-keyfacts li {
  position: relative; padding-left: 20px; margin-bottom: .45em;
  color: rgba(255, 255, 255, .88); font-size: .97rem;
}
.rt-keyfacts li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--act-500);
}
.rt-keyfacts strong { color: #fff; }

.rt-lead-buttons { display: flex; flex-wrap: wrap; gap: 11px; margin: 26px 0 0; }

/* ---------------------------------------------------------------- toplist */

.rt-toplist { display: flex; flex-direction: column; gap: 16px; margin: 30px 0 12px; }

.rt-cmp-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px 22px 30px; display: grid; gap: 20px;
  grid-template-columns: minmax(130px, .95fr) minmax(150px, 1.05fr) minmax(170px, 1.15fr) minmax(158px, .85fr);
  align-items: center; position: relative; box-shadow: var(--shadow-1);
}
.rt-cmp-row:hover { box-shadow: var(--shadow-2); }
.rt-cmp-row.rt-is-top { border-color: var(--act-500); }

/* the rank badge hangs off the top-left corner, as in the reference */
.rt-cmp-rank {
  position: absolute; top: -12px; left: -12px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ink-800); color: #fff;
  display: grid; place-items: center; font-size: .95rem; font-weight: 800;
  box-shadow: var(--shadow-1); z-index: 2;
}
.rt-cmp-row.rt-is-top .rt-cmp-rank { background: var(--act-500); }

.rt-cmp-ribbon {
  position: absolute; top: -11px; right: 22px; background: var(--act-500); color: #fff;
  font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}

.rt-cmp-brand { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rt-cmp-mark {
  height: 62px; border-radius: 10px; background: var(--ink-900);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px;
}
.rt-cmp-mark img { max-height: 48px; width: auto; }
.rt-cmp-mark.rt-is-empty {
  background: var(--bg-tint); border: 1px dashed var(--line-strong);
  color: var(--tx-faint); font-size: .74rem; font-weight: 600; text-align: center; padding: 8px;
}
.rt-cmp-title { font-weight: 800; color: var(--ink-900); font-size: 1.14rem; line-height: 1.2; }
.rt-cmp-score { font-size: .82rem; color: var(--tx-faint); display: flex; flex-direction: column; gap: 1px; }
.rt-cmp-score b { color: var(--ink-900); font-size: .86rem; }
.rt-cmp-stars { color: var(--star); letter-spacing: 2px; font-size: .95rem; }

.rt-cmp-specs { margin: 0; font-size: .85rem; }
.rt-cmp-specs div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.rt-cmp-specs div:last-child { border-bottom: 0; }
.rt-cmp-specs dt { color: var(--tx-faint); }
.rt-cmp-specs dd { margin: 0; font-weight: 700; color: var(--ink-800); text-align: right; }

.rt-cmp-wins { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.rt-cmp-wins li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: .45em; line-height: 1.4; }
.rt-cmp-wins li::before {
  content: "✓"; flex: none; color: var(--pos); font-weight: 800;
  font-size: .9rem; margin-top: 1px;
}

.rt-cmp-go { display: flex; flex-direction: column; gap: 8px; }
.rt-cmp-go .rt-cmp-fine { font-size: .68rem; color: var(--tx-faint); text-align: center; line-height: 1.35; }

@media (max-width: 1000px) {
  .rt-cmp-row { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr); row-gap: 18px; }
  .rt-cmp-wins { grid-column: 1 / -1; }
  .rt-cmp-go { grid-column: 1 / -1; }
  .rt-cmp-ribbon { right: 16px; }
}
@media (max-width: 620px) {
  .rt-cmp-row { grid-template-columns: 1fr; padding: 24px 18px 20px; }
  .rt-cmp-rank { left: 14px; }
}

.rt-slot-empty {
  border: 2px dashed var(--act-500); background: #fff6ee;
  border-radius: var(--r-lg); padding: 26px 22px; text-align: center; margin: 26px 0;
}
.rt-slot-empty .rt-flag {
  display: inline-block; background: var(--act-500); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px; margin-bottom: 10px;
}
.rt-slot-empty p { margin: 0; color: var(--ink-800); font-weight: 600; font-size: .93rem; }
.rt-slot-empty code { background: rgba(13, 28, 52, .08); padding: 1px 5px; border-radius: 3px; font-size: .88em; }

/* ---------------------------------------------------------------- picks */

.rt-picks { margin: 26px auto 0; }
.rt-picks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .rt-picks-grid { grid-template-columns: 1fr; } }
.rt-picks-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 18px; text-align: center; display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--shadow-1);
}
.rt-picks-card.rt-is-top { border-color: var(--act-500); border-width: 2px; }
.rt-picks-flag {
  align-self: center; background: var(--bg-tint); color: var(--ink-800); font-size: .68rem;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.rt-picks-card.rt-is-top .rt-picks-flag { background: var(--act-500); color: #fff; }
.rt-picks-logo { height: 54px; border-radius: 10px; background: var(--ink-900); display: flex; align-items: center; justify-content: center; padding: 6px; }
.rt-picks-logo img { max-height: 42px; width: auto; }
.rt-picks-logo.rt-is-empty { background: var(--bg-tint); border: 1px dashed var(--line-strong); color: var(--tx-faint); font-size: .78rem; font-weight: 600; }
.rt-picks-offer { font-weight: 800; color: var(--ink-900); font-size: 1.02rem; line-height: 1.35; }
.rt-picks-meta { font-size: .8rem; color: var(--tx-faint); margin-top: -5px; }

/* ---------------------------------------------------------------- content blocks */

.rt-callout {
  background: var(--ink-800); color: #fff; border-radius: var(--r-lg);
  padding: 24px 26px; margin: 2.2em auto;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.rt-callout h3 { margin: 0 0 .25em; font-size: 1.14rem; color: #fff; }
/* The global `strong` colour is navy, and this box's background IS that navy,
   so without this the bolded lead-in of every callout renders invisible. The
   pagehead, keyfacts and howbox carry the same override for the same reason. */
.rt-callout strong,
.rt-callout b { color: #fff; }
.rt-callout p { color: rgba(255, 255, 255, .82); margin: 0; font-size: .94rem; max-width: 50ch; }
.rt-callout .rt-btn { flex: none; }

.rt-jump, .rt-toc-inline {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 28px auto; box-shadow: var(--shadow-1);
}
.rt-jump h2 { margin: 0 0 .6em; font-size: 1.02rem; }
.rt-jump ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 28px; font-size: .9rem; }
.rt-jump li { margin-bottom: .3em; break-inside: avoid; }
.rt-jump a { color: var(--tx-soft); font-weight: 500; text-decoration: none; }
.rt-jump a:hover { color: var(--link-hover); text-decoration: underline; }
@media (max-width: 640px) { .rt-jump ol { columns: 1; } }

.rt-note {
  background: var(--bg-alt); border: 1px solid var(--line); border-left: 4px solid var(--ink-700);
  border-radius: var(--r); padding: 17px 22px; margin: 1.7em auto; box-shadow: var(--shadow-1);
}
.rt-note.rt-warn { background: var(--warn-bg); border-color: #f0e0bb; border-left-color: #d9a520; }
.rt-note.rt-warn strong { color: var(--warn); }
.rt-note p:last-child { margin-bottom: 0; }
.rt-note h3, .rt-note h4 { margin-top: 0; }

.rt-checklist {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 1.8em auto; box-shadow: var(--shadow-1);
}
.rt-checklist ul { list-style: none; padding: 0; margin: 0; }
.rt-checklist li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: .5em; }
.rt-checklist li::before {
  content: "✓"; flex: none; color: #fff; background: var(--pos);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; margin-top: 3px;
}

figure { margin: 1.9em auto; }
figure img, figure svg { border-radius: var(--r-lg); display: block; width: 100%; }
figcaption { font-size: .84rem; color: var(--tx-faint); margin-top: .6em; text-align: center; }

.rt-table-wrap {
  overflow-x: auto; margin: 1.7em auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
/* Six of these tables are wider than a phone, and a table that scrolls with no
   sign that it scrolls just reads as a cut-off table. Two background layers do
   it without JS: a solid patch pinned to the right edge of the *content*
   (attachment: local, so it scrolls in from off-screen) sitting over a shadow
   pinned to the *box*. Scrolled to the end, the patch covers the shadow; before
   that, the shadow shows and says there is more to the right. */
@media (max-width: 720px) {
  .rt-table-wrap {
    background-image:
      linear-gradient(to right, var(--bg-alt), var(--bg-alt)),
      linear-gradient(to left, rgba(8, 7, 36, .16), rgba(8, 7, 36, 0));
    background-position: right center, right center;
    background-size: 30px 100%, 26px 100%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: local, scroll;
  }
}
table { width: 100%; border-collapse: collapse; font-size: .91rem; }
caption { caption-side: bottom; padding: 10px 14px; text-align: left; }
th, td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--ink-800); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .01em; }
tbody th { font-weight: 700; color: var(--ink-800); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--bg-tint); }

.rt-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.8em auto; }
@media (max-width: 680px) { .rt-proscons { grid-template-columns: 1fr; } }
.rt-proscons > div { border-radius: var(--r-lg); padding: 18px 22px; border: 1px solid var(--line); }
.rt-proscons .rt-pro { background: var(--pos-bg); border-color: #c3e4d1; }
.rt-proscons .rt-con { background: var(--neg-bg); border-color: #f2cbc7; }
.rt-proscons h3 { margin-top: 0; font-size: 1.04rem; }
.rt-proscons .rt-pro h3 { color: var(--pos); }
.rt-proscons .rt-con h3 { color: var(--neg); }
.rt-proscons ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.rt-proscons li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: .45em; }
.rt-proscons .rt-pro li::before { content: "+"; color: var(--pos); font-weight: 800; flex: none; }
.rt-proscons .rt-con li::before { content: "-"; color: var(--neg); font-weight: 800; flex: none; }

.rt-steps { counter-reset: s; list-style: none; padding: 0; margin: 1.8em auto; }
.rt-steps > li { counter-increment: s; position: relative; padding: 0 0 0 50px; margin-bottom: 1.5em; }
.rt-steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  border-radius: 50%; background: var(--act-500); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.rt-steps h3 { margin-top: 0; margin-bottom: .3em; }

.rt-bio {
  display: flex; gap: 17px; align-items: flex-start; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; margin: 1.4em auto;
  box-shadow: var(--shadow-1);
}
.rt-bio img { width: 68px; height: 68px; border-radius: 50%; flex: none; background: var(--ink-800); }
.rt-bio h3 { margin: 0 0 .15em; font-size: 1.08rem; }
.rt-bio .rt-role { color: var(--act-600); font-weight: 700; font-size: .85rem; margin-bottom: .55em; }
.rt-bio p { margin: 0 0 .5em; font-size: .93rem; color: var(--tx-soft); }
@media (max-width: 560px) { .rt-bio { flex-direction: column; } }

.rt-howbox {
  background: var(--ink-800); color: rgba(255, 255, 255, .86); border-radius: var(--r-lg);
  padding: 22px 26px; margin: 1.8em auto;
}
.rt-howbox h3 { margin-top: 0; color: #fff; }
.rt-howbox a { color: #fff; }
.rt-howbox strong { color: #fff; }

.rt-faq { margin: 1.6em auto; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 22px; box-shadow: var(--shadow-1); }
.rt-faq details { border-bottom: 1px solid var(--line); }
.rt-faq details:last-child { border-bottom: 0; }
.rt-faq summary {
  cursor: pointer; padding: 16px 40px 16px 0; font-weight: 700; color: var(--ink-900);
  position: relative; list-style: none; font-size: 1rem; line-height: 1.45;
}
.rt-faq summary::-webkit-details-marker { display: none; }
.rt-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--act-500); border-bottom: 2px solid var(--act-500);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.rt-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.rt-faq .rt-answer { padding: 0 0 18px; color: var(--tx-soft); font-size: .95rem; }
.rt-faq .rt-answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- sticky mobile CTA */

.rt-dockbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink-900); border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
}
.rt-dockbar .rt-txt { color: #fff; font-size: .8rem; line-height: 1.3; min-width: 0; }
.rt-dockbar .rt-txt b { display: block; font-size: .9rem; }
.rt-dockbar .rt-txt span { color: var(--on-dark-soft); }
.rt-dockbar .rt-btn { flex: none; margin-left: auto; }
@media (max-width: 1000px) { .rt-dockbar { display: flex; } body { padding-bottom: 66px; } }

/* ---------------------------------------------------------------- inner pages */

.rt-legal h2 { font-size: 1.32rem; margin-top: 2em; padding-top: .7em; border-top: 1px solid var(--line); }
.rt-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.rt-legal h3 { font-size: 1.06rem; }

.entry-content { padding-top: 34px; padding-bottom: 8px; }

/* ---------------------------------------------------------------- contents rail */

.rt-article-shell { width: 100%; max-width: var(--w-jump); margin-inline: auto; padding-inline: 20px; }
.rt-toc-rail { display: none; }

/* The narrow-screen stand-in for the rail: same list, collapsed by default so
   thirty-odd entries do not push the article a screen and a half down. */
.rt-toc-drop {
  margin: 0 0 2em; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.rt-toc-drop summary {
  display: flex; align-items: center; gap: .6em; padding: 14px 16px;
  font-weight: 800; font-size: .95rem; color: var(--ink-900); cursor: pointer;
  list-style: none;
}
.rt-toc-drop summary::-webkit-details-marker { display: none; }
.rt-toc-drop summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--tx-faint); border-bottom: 2px solid var(--tx-faint);
  transform: translateY(-2px) rotate(45deg); transition: transform .18s ease;
}
.rt-toc-drop[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rt-toc-drop summary:focus-visible { outline: 2px solid var(--act-500); outline-offset: -2px; }
.rt-toc-drop-n { font-weight: 500; font-size: .82rem; color: var(--tx-faint); }
.rt-toc-drop nav { padding: 0 16px 14px; }
.rt-toc-drop ol {
  columns: 2; column-gap: 22px; list-style: none; margin: 0; padding: 0; font-size: .87rem;
}
.rt-toc-drop li { margin: 0; break-inside: avoid; }
.rt-toc-drop a { display: block; padding: 6px 0; color: var(--tx-soft); font-weight: 600; text-decoration: none; }
.rt-toc-drop a:hover { color: var(--link-hover); }
@media (max-width: 520px) { .rt-toc-drop ol { columns: 1; } }
@media (min-width: 1200px) { .rt-toc-drop { display: none; } }
@media (prefers-reduced-motion: reduce) { .rt-toc-drop summary::after { transition: none; } }

@media (min-width: 1200px) {
  .rt-article-shell {
    display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 48px; align-items: start;
  }
  .rt-article-shell > .entry-content { min-width: 0; }
  .rt-article-shell > .entry-content > * { margin-inline: 0; }
  .rt-toc-rail { position: sticky; top: calc(var(--header-h) + 34px); display: block; }
  .rt-toc-inline { display: none; }

  /* Above 1200px the article column is left-aligned in the grid, so the band
     content has to be too. */
  .home .rt-pagehead > .rt-wrap > * { margin-inline: 0; }
}

.rt-toc-rail nav {
  border-left: 2px solid var(--line-strong); padding: 2px 0 2px 16px;
  max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain;
}
.rt-toc-rail h2 { margin: 0 0 .7em; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-faint); }
.rt-toc-rail ol { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.rt-toc-rail li { margin-bottom: .1em; }
.rt-toc-rail a { display: block; padding: 4px 0; color: var(--tx-faint); font-weight: 500; text-decoration: none; }
.rt-toc-rail a:hover { color: var(--link-hover); }
.rt-toc-rail a.rt-is-active { color: var(--ink-900); font-weight: 800; }

/* ---------------------------------------------------------------- sources + changelog */

.rt-sources { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; margin: 2em auto; box-shadow: var(--shadow-1); }
.rt-sources h2, .rt-sources h3 { margin-top: 0; }
.rt-sources ol, .rt-sources ul { margin: 0; padding-left: 1.2em; font-size: .91rem; }
.rt-sources li { margin-bottom: .4em; }
.rt-sources .rt-src-note { font-size: .83rem; color: var(--tx-faint); margin: .9em 0 0; }

.rt-changelog { list-style: none; margin: 1.1em 0 0; padding: 0; font-size: .89rem; }
.rt-changelog li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rt-changelog li:last-child { border-bottom: 0; }
.rt-changelog time { flex: none; width: 78px; color: var(--tx-faint); font-variant-numeric: tabular-nums; }

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

.rt-foot { background: var(--ink-900); color: var(--on-dark-soft); font-size: .88rem; padding: 40px 0 24px; margin-top: 56px; }
.rt-foot a { color: var(--on-dark-soft); font-weight: 500; text-decoration: none; }
.rt-foot a:hover { color: #fff; text-decoration: underline; }
.rt-sitefoot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px 24px; }
.rt-foot h3 { color: #fff; font-size: .92rem; margin: 0 0 .8em; }
.rt-foot ul { list-style: none; padding: 0; margin: 0; }
.rt-foot li { margin-bottom: .42em; }
.rt-sitefoot-brand img { height: 24px; margin-bottom: 14px; }
.rt-foot .rt-addr { font-style: normal; line-height: 1.7; }

.rt-marks {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch;
  margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .13);
}
.rt-mark {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px; padding: 10px 14px; color: var(--on-dark);
  font-size: .78rem; font-weight: 600; line-height: 1.25; text-decoration: none;
}
a.rt-mark:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.rt-mark svg, .rt-mark img { flex: none; display: block; }
.rt-mark b { display: block; color: #fff; font-weight: 700; }
.rt-mark span { display: block; color: var(--on-dark-soft); font-size: .7rem; font-weight: 500; }
/* `.rt-mark .rt-mark-18`, not `.rt-mark-18`: the card's own `.rt-mark span` rule is
   (0,1,1) against a bare class's (0,1,0) and was winning on display, colour,
   size and weight. display:block made place-items:center inert, which is what
   pushed "18+" out of the ring. Geometry matches the rest of the network:
   34px across at 11px/800 leaves the glyphs room the old 28px did not. */
.rt-mark .rt-mark-18 {
  inline-size: 34px; block-size: 34px; border-radius: 50%; border: 2px solid var(--act-400);
  color: var(--act-400); font-weight: 800; font-size: 11px; line-height: 1;
  letter-spacing: -.01em; display: inline-grid; place-items: center; flex: none;
}
@media (max-width: 560px) { .rt-mark { flex: 1 1 100%; } }

.rt-sitefoot-base {
  border-top: 1px solid rgba(255, 255, 255, .13); margin-top: 26px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.rt-sitefoot-resp { display: flex; align-items: center; gap: 11px; }

/* ---------------------------------------------------------------- utils */

.rt-visually-hidden, .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rt-center { text-align: center; }
.rt-mt0 { margin-top: 0; }
.alignwide { max-width: var(--w-wide); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ---------------------------------------------------------------- telegram link */
/* Colour-agnostic on purpose: this same rule ships on footers with different
   backgrounds, so it borrows the surrounding text colour rather than naming one. */
.rt-sitefoot-tg {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid currentColor; color: inherit;
  font-size: .88rem; font-weight: 700; line-height: 1;
  text-decoration: none; opacity: .82;
  transition: opacity .15s ease, background-color .15s ease;
}
.rt-sitefoot-tg svg { flex: none; }
.rt-sitefoot-tg:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.rt-sitefoot-tg:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rt-sitefoot-tg { transition: none; } }


/* ------------------------------------------------------ hero: toplist on the dark field */
/* The whole point of this layout: cool indigo behind warm cards, so each row
   reads as an object lit from inside rather than as more page. */
.rt-pagehead-hero { padding-bottom: 46px; }
.rt-pagehead-hero .rt-lead-buttons { margin-bottom: 4px; }

.rt-pagehead-list {
  margin-top: 34px;
  /* Same shell geometry as .rt-article-shell so the toplist lines up with the H1
     above it and the body text below it, instead of floating in its own column. */
  max-width: var(--w-jump);
  margin-inline: auto;
  padding-inline: 20px;
}
.rt-pagehead-list > section { margin: 0; }
.rt-pagehead-list h2 {
  color: #fff; margin: 0 0 .35em; font-size: clamp(1.4rem, 3vw, 1.75rem);
}
.rt-pagehead-note { color: rgba(255, 255, 255, .8); font-size: .95rem; max-width: 74ch; margin: 0; }
.rt-pagehead-fine { color: rgba(255, 255, 255, .55); font-size: .78rem; margin: 14px 0 0; max-width: 84ch; }
.rt-pagehead-fine a { color: rgba(255, 255, 255, .8); }
.rt-pagehead-fine a:hover { color: #fff; }
.rt-pagehead-list .rt-toplist { margin-top: 20px; }

/* A slot placeholder shown on the dark field needs light text, not the body colour. */
.rt-pagehead-list .rt-slot-empty { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); }
.rt-pagehead-list .rt-slot-empty p { color: rgba(255, 255, 255, .85); }

@media (max-width: 680px) {
  .rt-pagehead-hero { padding-bottom: 32px; }
  .rt-pagehead-list { margin-top: 26px; }
}

/* ---------------------------------------------------------------- toplist card */
/* Re-skinned to the card anatomy the client picked out: a warm cream card sitting
   on the dark indigo field, a solid brand-colour panel doing the identification,
   data chunked into small white chips, and secondary facts demoted to a hairline
   strip. Class names stay .tl-* so the shared casino data works unchanged. */
.rt-toplist, .rt-ranklist, .rt-cmp-list, .rt-caslist { display: flex; flex-direction: column; gap: 20px; margin: 26px 0 8px; }

.rt-tl-card {
 --tl-accent: var(--act-500);
 --tl-brand: var(--ink-700);
 --tl-surface: #ffffff;
 --tl-ink: var(--tx, #080724);
  display: grid; grid-template-columns: 186px minmax(0, 1fr) 190px;
  gap: 0; align-items: stretch; position: relative; overflow: hidden;
  background: var(--cream, #f1edeb); border: 0;
  /* The card sets its own text colour on purpose. It is rendered both on the
     dark hero band and in the light article body, and without this it inherits
     white from the hero - which put white text on a near-white card for every
     child that does not set a colour of its own (.rt-tl-why, the perk bullets).
     .rt-tl-brand and .rt-tl-name below are dark-panelled and stay white explicitly. */
  color: var(--tl-ink);
  border-radius: var(--r-lg, 10px); box-shadow: var(--shadow-1);
}
.rt-tl-card:hover { box-shadow: var(--shadow-2); }
.rt-tl-card.rt-is-top { outline: 2px solid var(--tl-accent); outline-offset: -2px; }

/* brand panel - a slab of the casino's own colour, logo reversed out of it */
.rt-tl-brand {
  background: var(--tl-brand); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; padding: 26px 16px; min-width: 0;
  position: relative;
}
.rt-tl-rank {
  position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff;
  font-weight: 800; font-size: .82rem;
}
.rt-tl-card.rt-is-top .rt-tl-rank { background: var(--tl-accent); }
.rt-tl-ribbon {
  position: absolute; top: 10px; right: 10px; background: #ffffff; color: var(--ink-900);
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
}
.rt-tl-logo { display: grid; place-items: center; width: 100%; }
.rt-tl-logo img { max-height: 44px; max-width: 128px; width: auto; }
.rt-tl-logo.rt-is-empty { color: #fff; font-size: .95rem; font-weight: 800; text-align: center; }
.rt-tl-name { color: #fff; font-weight: 800; font-size: 1rem; text-align: center; }
.rt-tl-score { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(255, 255, 255, .72); }
.rt-tl-score b { color: #fff; font-size: .9rem; }
.rt-tl-stars { color: var(--star); letter-spacing: .5px; }

/* middle - the reason anyone clicks, chunked into white chips */
.rt-tl-mid { min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.rt-tl-offers { display: flex; gap: 10px; flex-wrap: wrap; }
.rt-tl-offer {
  flex: 1 1 148px; min-width: 0; background: var(--tl-surface);
  border-radius: var(--r, 6px); padding: 9px 14px; text-align: center;
}
.rt-tl-offer.rt-is-alt { flex: 0 1 106px; }
.rt-tl-olab { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-faint); }
.rt-tl-oval { display: block; font-size: 1.22rem; font-weight: 800; color: var(--tl-ink); line-height: 1.15; margin-top: 2px; }

.rt-tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.rt-tl-chip { background: var(--tl-surface); border-radius: 5px; padding: 5px 10px; font-size: .74rem; color: var(--tx-soft); }
.rt-tl-chip b { color: var(--tl-ink); font-weight: 700; }

.rt-tl-lic { margin-top: 10px; font-size: .75rem; font-weight: 700; color: var(--pos); }
.rt-tl-lic::before { content: "✓ "; }
.rt-tl-lic.rt-is-warn { color: var(--neg); }
.rt-tl-lic.rt-is-warn::before { content: "⚠ "; }

.rt-tl-more { margin-top: 10px; }
.rt-tl-more > summary { cursor: pointer; list-style: none; font-size: .77rem; font-weight: 700; color: var(--link); display: inline-flex; align-items: center; gap: 5px; }
.rt-tl-more > summary::-webkit-details-marker { display: none; }
.rt-tl-more > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.rt-tl-more[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.rt-tl-more-in { padding-top: 10px; border-top: 1px solid var(--sand); margin-top: 8px; }
.rt-tl-perks { list-style: none; margin: 0 0 8px; padding: 0; font-size: .83rem; }
.rt-tl-perks li { position: relative; padding-left: 23px; margin-bottom: .3em; line-height: 1.45; }
.rt-tl-perks li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--pos); font-weight: 800; background: var(--pos-bg); width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; }
.rt-tl-terms { font-size: .71rem; color: var(--tx-faint); margin: 8px 0 0; line-height: 1.45; }

/* action column */
.rt-tl-go { display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; padding: 22px 22px 22px 0; }
.rt-tl-btn { font-size: 1rem; padding: 14px 12px; box-shadow: 0 4px 15px rgba(45, 159, 128, .35); }
.rt-tl-micro { font-size: .68rem; color: var(--tx-faint); margin-top: 8px; line-height: 1.4; }
.rt-tl-why { font-size: .75rem; font-weight: 700; color: var(--link); margin-top: 8px; }

@media (max-width: 1040px) {
  .rt-tl-card { grid-template-columns: 160px minmax(0, 1fr); }
  .rt-tl-go { grid-column: 1 / -1; padding: 0 22px 22px; }
  .rt-tl-btn { padding: 15px 12px; }
}
@media (max-width: 680px) {
  .rt-tl-card { grid-template-columns: 1fr; }
  .rt-tl-brand { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 42px 18px 16px; }
  .rt-tl-logo { width: auto; flex: none; }
  .rt-tl-logo img { max-height: 34px; max-width: 96px; }
  .rt-tl-name { text-align: left; }
  .rt-tl-mid { padding: 18px; }
  .rt-tl-go { padding: 0 18px 18px; }
  .rt-tl-oval { font-size: 1.1rem; }
}

/* The card also has to survive inside a narrow reading column, not just a wide
   one, so it reflows on its own width rather than the viewport. The viewport
   queries above stay as the fallback for browsers without container queries. */
.rt-toplist, .rt-ranklist, .rt-cmp-list, .rt-caslist { container-type: inline-size; }
@container (max-width: 820px) {
  .rt-tl-card { grid-template-columns: 160px minmax(0, 1fr); }
  .rt-tl-go { grid-column: 1 / -1; padding: 0 22px 22px; }
  .rt-tl-btn { padding: 15px 12px; }
}
@container (max-width: 620px) {
  .rt-tl-card { grid-template-columns: 1fr; }
  .rt-tl-brand { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 42px 18px 16px; }
  .rt-tl-logo { width: auto; flex: none; }
  .rt-tl-logo img { max-height: 34px; max-width: 96px; }
  .rt-tl-name { text-align: left; }
  .rt-tl-mid { padding: 18px; }
  .rt-tl-go { padding: 0 18px 18px; }
  .rt-tl-oval { font-size: 1.1rem; }
}

/* touch-targets: the logo and the small CTAs render 32-34px tall, which is under
   the comfortable thumb size. Only the hit area grows; the artwork is unchanged. */
@media (max-width: 860px) {
  .rt-sitehead .rt-brand,
    .rt-btn-cta,
    .rt-dockbar .rt-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Section header image, sits directly under the H2 it belongs to. */
.rt-section-banner { display: block; width: 100%; height: auto; margin: 4px 0 24px; border-radius: var(--r, 10px); }

/* --- 18+ age badge ------------------------------------------------------
   Drawn in CSS so it inherits the footer's text colour and needs no artwork. */
.rt-age-badge {
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	border: 2px solid currentColor;
	color: inherit;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	display: inline-grid;
	place-items: center;
	flex: none;
	opacity: .92;
	margin-right: 12px;
}

/* ------------------------------------------------- deposit step figures --- */
/* Five phone-shaped diagrams. Stacked vertically on a phone they would add
   roughly two thousand pixels to an already long page, so below 700px they
   become a snap-scrolling strip - the natural gesture for a sequence of
   screens, and it keeps each step's text beside its picture. */

.rt-stepshots {
  list-style: none; margin: 1.7em 0 1.9em; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.rt-stepshots li { margin: 0; min-width: 0; }
.rt-stepshots img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.rt-stepshots .rt-cap { margin: .75em 0 0; font-size: .92rem; line-height: 1.5; }
.rt-stepshots .rt-cap b { color: var(--tx); }

@media (max-width: 940px) { .rt-stepshots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .rt-stepshots {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* same two-layer trick as the tables: the shadow shows only while there
       is another card still off to the right */
    background-image:
      linear-gradient(to right, var(--bg), var(--bg)),
      linear-gradient(to left, rgba(17, 35, 92, .16), rgba(17, 35, 92, 0));
    background-position: right center, right center;
    background-size: 24px 100%, 22px 100%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: local, scroll;
  }
  .rt-stepshots li { flex: 0 0 76%; scroll-snap-align: start; }
}

.rt-stepnote { margin: -.6em 0 1.6em; font-size: .86rem; color: var(--tx-faint); }

/* wpautop leaves an empty paragraph after a block-level image or shortcode.
   They render at zero height but keep their bottom margin, which shows up as
   uneven spacing between sections. */
.entry-content p:empty { display: none; }

/* --------------------------------------------------- hero: mark on right --- */
/* The mark identifies the subject beside the heading instead of above the
   text, so the first paragraph stays above the fold. Below 900px it is
   dropped: on a phone that vertical space is worth more than the decoration. */

.rt-pagehead-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px; align-items: start;
}
.rt-pagehead-main { min-width: 0; }
.rt-pagehead-mark { justify-self: end; padding-top: 6px; }
.rt-pagehead-mark img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) { .rt-pagehead-grid { grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; } }
@media (max-width: 900px) {
  .rt-pagehead-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-pagehead-mark { display: none; }
}

/* ------------------------------------------------------ contrast fixes --- */

/* The hero band turns every link white (.rt-pagehead a). The toplist card sits on
   that band but has a light background of its own, so its links were white on
   near-white. Buttons are excluded: they carry their own background. */
.rt-pagehead .rt-tl-card a:not(.rt-btn),
.rt-tl-card a:not(.rt-btn) { color: var(--link); }
.rt-pagehead .rt-tl-card a:not(.rt-btn):hover,
.rt-tl-card a:not(.rt-btn):hover { color: var(--link-hover); }

/* Links inside the navy callout inherited the navy link colour, which left
   them at 1.5:1 against the box. White + underline reads on the dark panel. */
.rt-callout a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.rt-callout a:hover { color: var(--mint, #a5e8cf); }

/* White on --act-500 measures 4.1:1, just under the 4.5 needed at this size.
   The darker step clears it without changing the button's role. */
.rt-sitehead .rt-nav-cta { background: var(--act-600); }
.rt-sitehead .rt-nav-cta:hover { background: var(--act-500); }

/* White on --act-500 measures 4.07:1 and the warn line 4.12:1, both just under
   the 4.5 WCAG AA needs at these sizes. One step darker on each clears it. */
.rt-btn-cta { background: var(--act-600); }
.rt-btn-cta:hover { background: var(--act-500); }
.rt-tl-lic.rt-is-warn { color: var(--flag-dim); }


/* Footer legal row. Replaces the old multi-column footer nav: one inline
   line of policy links, kept because removing every link to the terms and
   responsible-gambling pages would leave them unreachable from the site. */
.rt-sitefoot-legal,
.rt-foot-legal {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin: 0 0 1rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--line, rgba(255, 255, 255, .14));
	font-size: .86rem;
}

.rt-sitefoot-legal a,
.rt-foot-legal a {
	color: inherit;
	opacity: .78;
	text-decoration: none;
}

.rt-sitefoot-legal a:hover,
.rt-foot-legal a:hover,
.rt-sitefoot-legal a:focus-visible,
.rt-foot-legal a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* Footer CTA on the .rt-net build, which had no footer button of its own. */
.rt-foot-cta {
	margin: .9rem 0 0;
}

/* Official game art from the studio. Portrait 600x840, so it is capped narrow and
   floated beside the prose on wide screens rather than interrupting it.
   live gamecard */
.entry-content .rt-gamecard,
.rt-prose .rt-gamecard {
	float: right; width: 210px; margin: 4px 0 18px 26px;
}
.rt-gamecard img {
	display: block; width: 100%; height: auto; border-radius: 12px;
	border: 1px solid var(--line, rgba(0,0,0,.12));
}
.rt-gamecard figcaption {
	margin-top: 8px; font-size: .74rem; line-height: 1.45;
	color: var(--tx-faint, #5d6472);
}
@media (max-width: 720px) {
	.entry-content .rt-gamecard,
	.rt-prose .rt-gamecard { float: none; width: 100%; max-width: 280px; margin: 18px auto; }
	.rt-gamecard figcaption { text-align: left; }
}

/* Named editorial opinion inside the article. Deliberately a different shape to
   the .rt-note boxes so a reader can tell a person is speaking, and the portrait
   plus linked name make the attribution checkable. author quote */
.rt-authorquote {
	margin: 26px 0; padding: 24px 26px 20px;
	background: var(--bg-alt, #f3f1f7);
	border-radius: 16px;
	text-align: center;
}
.rt-aq-face {
	display: block; width: 72px; height: 72px; border-radius: 50%;
	margin: 0 auto 14px; background: #fff;
}
.rt-authorquote .rt-aq-text {
	margin: 0; padding: 0; border: 0; font-style: normal;
}
.rt-authorquote .rt-aq-text p {
	margin: 0; font-size: 1.02rem; line-height: 1.6; font-weight: 600;
	color: var(--tx, #1b1b2b);
}
/* straight quotes, per house style */
.rt-authorquote .rt-aq-text p::before { content: "\0022"; }
.rt-authorquote .rt-aq-text p::after  { content: "\0022"; }
.rt-aq-by {
	margin-top: 14px; font-size: .82rem; line-height: 1.45;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.rt-aq-by .rt-aq-name { font-weight: 700; text-decoration: none; }
.rt-aq-by .rt-aq-name:hover { text-decoration: underline; }
.rt-aq-by .rt-aq-role { color: #58586e; }

@media (max-width: 640px) {
	.rt-authorquote { padding: 20px 18px 16px; margin: 22px 0; }
	.rt-authorquote .rt-aq-text p { font-size: .97rem; }
}

/* Refinement: the quote was reading as loud as a section of its own. Narrower
   than the text column, smaller portrait and lighter type, so it sits inside the
   section as an aside rather than competing with it. author quote smaller */
.rt-authorquote {
	max-width: 560px;
	margin: 22px auto;
	padding: 18px 22px 15px;
	border-radius: 14px;
}
.rt-aq-face { width: 54px; height: 54px; margin-bottom: 10px; }
.rt-authorquote .rt-aq-text p {
	font-size: .93rem;
	line-height: 1.55;
	font-weight: 500;
}
.rt-aq-by { margin-top: 10px; font-size: .76rem; }
.rt-aq-by .rt-aq-role { font-size: .72rem; }

@media (max-width: 640px) {
	.rt-authorquote { max-width: none; padding: 16px 16px 13px; margin: 18px 0; }
	.rt-authorquote .rt-aq-text p { font-size: .9rem; }
	.rt-aq-face { width: 48px; height: 48px; }
}

/* --- arvostelut: hub list and review card ---------------------------------
   One row per casino: identity, offer and facts, action. Three columns on a
   wide screen, stacked below 860px. Colours are this theme's own, with the
   accent darkened where the brand colour is too light to read as text. */
.rt-rv-list { --rv-card: #ffffff; --rv-tint: #f1f6f6; --rv-line: #dfeaea;
           --rv-ink: #0b2226; --rv-soft: #3c565a; --rv-faint: #6b8386;
           --rv-accent: #c14e36;
           display: grid; gap: 14px; margin: 26px 0 34px; }

.rt-rv-row {
	display: grid; grid-template-columns: minmax(0, 1fr) 186px;
	grid-template-areas: "lead act" "mid act";
	gap: 10px 18px; align-items: start;
	background: var(--rv-card); border: 1px solid var(--rv-line);
	border-radius: 12px; padding: 16px 18px;
}
.rt-rv-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rt-rv-rank {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: .8rem;
	background: var(--rv-accent); color: #fff;
}
/* Fixed plate, flex not grid: a percentage height on a centred grid item
   resolves to auto and a tall logo overflows. */
.rt-rv-logo {
	flex: none; width: 104px; height: 48px; border-radius: 8px;
	background: var(--rv-tint); display: flex; align-items: center;
	justify-content: center; overflow: hidden; padding: 6px 8px;
}
.rt-rv-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rt-rv-logo i { font-style: normal; font-weight: 800; color: var(--rv-soft); }
.rt-rv-id { display: grid; gap: 2px; min-width: 0; }
.rt-rv-id b { color: var(--rv-ink); font-size: 1.02rem; }
.rt-rv-rate { color: var(--rv-faint); font-size: .84rem; }

.rt-rv-mid { display: grid; gap: 3px; min-width: 0; }
.rt-rv-lab {
	font-size: .64rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--rv-faint);
}
.rt-rv-bonus { font-weight: 700; color: var(--rv-ink); font-size: 1rem; line-height: 1.3; }
.rt-rv-spins { color: var(--rv-accent); font-weight: 600; font-size: .86rem; }
.rt-rv-facts {
	display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px;
	padding-top: 8px; border-top: 1px solid var(--rv-line);
}
.rt-rv-facts div { display: flex; gap: 6px; font-size: .82rem; }
.rt-rv-facts span { color: var(--rv-faint); }
.rt-rv-facts b { color: var(--rv-soft); font-weight: 600; }

.rt-rv-act { display: grid; justify-items: center; gap: 6px; }
.rt-rv-act .rt-rv-go { width: 100%; text-align: center; }
.rt-rv-more { font-size: .86rem; font-weight: 600; color: var(--rv-accent); }
.rt-rv-soon { font-size: .82rem; color: var(--rv-faint); }
.rt-rv-fine { font-size: .68rem; color: var(--rv-faint); }

.rt-rv-single { margin-top: 0; }
.rt-rv-single .rt-rv-row { background: var(--rv-tint); }

@media (max-width: 620px) {
	.rt-rv-row { grid-template-columns: 1fr; grid-template-areas: "lead" "mid" "act"; }
	.rt-rv-act { justify-items: stretch; align-self: stretch; }
}
.rt-rv-lead { grid-area: lead; }
.rt-rv-mid  { grid-area: mid; }
.rt-rv-act  { grid-area: act; align-self: center; }
.rt-rv-id b { overflow-wrap: anywhere; }


/* ---------------------------------------------------------------------------
   Light hero.

   The fork put the page head in a dark band. The reference design this site is
   modelled on runs a dark top bar over a light content card instead, which also
   lets the toplist start higher up the page. Everything below just re-points
   the colours that were written for a dark ground; the layout is untouched.
   --------------------------------------------------------------------------- */
.rt-pagehead {
  background: var(--bg-alt);
  color: var(--tx);
  border-bottom: 1px solid var(--line);
  background-image: radial-gradient(900px 320px at 85% -20%, rgba(14, 169, 122, .10), transparent 64%);
}
.rt-pagehead h1 { color: var(--tx); }
.rt-pagehead > .rt-wrap > p,
.rt-pagehead .rt-lead { color: var(--tx-soft); }
.rt-pagehead a { color: var(--link); }
.rt-pagehead a:hover { color: var(--act-600); }
.rt-pagehead strong,
.rt-pagehead b { color: var(--tx); }

/* The byline card sat on the dark band and was styled for it. */
.rt-pagehead .rt-byline {
  background: var(--card-alt);
  border: 1px solid var(--line);
}
.rt-pagehead .rt-by-txt,
.rt-pagehead .rt-by-date { color: var(--tx-soft); }
.rt-pagehead .rt-by-item b,
.rt-pagehead .rt-by-item strong { color: var(--tx); }
.rt-pagehead .rt-byline a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* Key-facts bullets inherited white text from the dark head. */
.rt-pagehead .rt-keyfacts,
.rt-pagehead .rt-keyfacts li { color: var(--tx-soft); }
.rt-pagehead .rt-keyfacts-head { color: var(--tx); }

/* Ghost button was outlined in white for the dark ground. */
.rt-pagehead .rt-btn-ghost {
  color: var(--link);
  border-color: var(--line-strong);
  background: var(--bg-alt);
}
.rt-pagehead .rt-btn-ghost:hover { border-color: var(--act-500); color: var(--act-600); }

/* The hero mark reads better with a little breathing room on a light card. */
.rt-pagehead-mark img { filter: none; }

/* Light-hero fixes, round two.

   The first pass re-pointed the obvious colours but missed everything that the
   hero-mounted toplist and the section headings inherit. A contrast sweep found
   121 failures, most of them at ratio 1.0 - white text now sitting on a white
   card. These are measured fixes, not guesses: --act-600 is used wherever white
   sits on green, because --act-500 only reaches 3.0:1. */

.rt-pagehead-list h2,
.rt-pagehead .rt-pagehead-list h2 { color: var(--tx); }
.rt-pagehead-note { color: var(--tx-soft); }
.rt-pagehead-fine { color: var(--tx-faint); }
.rt-pagehead-fine a { color: var(--tx-soft); }
.rt-pagehead-fine a:hover { color: var(--act-600); }
.rt-pagehead-list .rt-slot-empty { background: var(--card-alt); border-color: var(--line-strong); }
.rt-pagehead-list .rt-slot-empty p { color: var(--tx-soft); }

/* Cards inside the hero were inheriting the band's white text. Re-assert the
   card's own ink so ratings, names and chips come back. */
.rt-pagehead .rt-tl-card,
.rt-pagehead .rt-picks-card { color: var(--tx); }
.rt-pagehead .rt-tl-card a:not(.rt-btn),
.rt-pagehead .rt-picks-card a:not(.rt-btn) { color: var(--link); }
.rt-pagehead .rt-tl-name,
.rt-pagehead .rt-tl-score,
.rt-pagehead .rt-tl-offer,
.rt-pagehead .rt-tl-oval,
.rt-pagehead .rt-picks-offer { color: var(--tx); }
.rt-pagehead .rt-tl-micro,
.rt-pagehead .rt-tl-olab,
.rt-pagehead .rt-tl-terms,
.rt-pagehead .rt-tl-lic,
.rt-pagehead .rt-picks-meta { color: var(--tx-soft); }
.rt-pagehead .rt-tl-perks li { color: var(--tx-soft); }
.rt-pagehead .rt-tl-why,
.rt-pagehead .rt-tl-more summary { color: var(--link); }

/* White on green needs the darker green to clear AA at badge sizes. */
.rt-tl-rank,
.rt-tl-card.rt-is-top .rt-tl-rank { background: var(--act-600); color: #fff; }
.rt-picks-flag { background: var(--act-600); color: #fff; }

/* Stars keep their amber but need a darker tone on a light card. */
.rt-pagehead .rt-tl-stars { color: var(--star); }

/* Light-hero fixes, round three - corrected against a measured map of the card.

   Round two over-reached: it darkened every card element inside the hero, but
   the card is two-tone by design. The brand strip (.rt-tl-brand and its logo,
   name, score and stars) is ink #16294a and keeps white text; everything from
   .rt-tl-mid down sits on #f3f6fa and needs dark text. Measured per element
   rather than assumed, after the first guess inverted the problem. */

/* --- on the dark brand strip: white --- */
.rt-pagehead .rt-tl-brand,
.rt-pagehead .rt-tl-name,
.rt-pagehead .rt-tl-score { color: #fff; }
.rt-pagehead .rt-tl-brand a:not(.rt-btn) { color: #fff; }
.rt-pagehead .rt-tl-stars { color: var(--star); }

/* --- below the strip, on the light card body: ink --- */
.rt-pagehead .rt-tl-mid,
.rt-pagehead .rt-tl-offer,
.rt-pagehead .rt-tl-oval,
.rt-pagehead .rt-tl-chip,
.rt-pagehead .rt-tl-more-in { color: var(--tx); }
.rt-pagehead .rt-tl-olab,
.rt-pagehead .rt-tl-micro,
.rt-pagehead .rt-tl-terms,
.rt-pagehead .rt-tl-lic,
.rt-pagehead .rt-tl-perks li { color: var(--tx-soft); }
.rt-pagehead .rt-tl-why,
.rt-pagehead .rt-tl-more summary { color: var(--link); }

/* The picks cards follow the same two-tone rule. */
.rt-pagehead .rt-picks-logo,
.rt-pagehead .rt-picks-card { color: var(--tx); }
.rt-pagehead .rt-picks-meta { color: var(--tx-soft); }

/* The date chip in the byline was white-on-light. */
.rt-pagehead .rt-by-date,
.rt-pagehead .rt-by-date b,
.rt-pagehead .rt-byline time { color: var(--tx-soft); }

/* Light-hero fixes, round four - the action green and bold inside dark chips.

   Two findings from the sweep:

   1. White text on --act-500 measured 2.99:1, below AA for button labels. The
      token itself is darkened rather than overriding each button, so anything
      added later inherits a green that passes. #0b8260 gives 4.80:1 white-on-
      green; the hover green goes darker still.

   2. The global `b` colour (var(--tx)) was repainting bold text inside the
      card's dark brand strip, so the rating read ink-on-ink. The theme already
      documents this exact trap for .rt-pagehead; the card needs the same
      treatment. */

:root {
  --act-500: #0b8260;
  --act-600: #086a4e;
  --act-400: #10b981;
}

/* Bold inside any dark strip follows its parent, never the global ink. */
.rt-tl-brand b, .rt-tl-brand strong,
.rt-tl-score b, .rt-tl-score strong,
.rt-tl-rank b, .rt-tl-rank strong,
.rt-picks-flag b, .rt-picks-flag strong,
.rt-btn b, .rt-btn strong { color: inherit; }

/* Light-hero fixes, round five - stop the link rules repainting buttons.

   The hero link colours added in round one were written as `.rt-pagehead a`,
   which also matches every CTA, because the buttons are anchors. The result was
   ink-on-green at 2.38:1 on "Lunasta etu" and the lead button, while the header
   CTA - which those rules do not reach - stayed correct at 6.6:1.

   This is a known trap in this codebase: a descendant link rule has taken out
   in-content buttons before. Every link rule here is scoped off .rt-btn. */

.rt-pagehead a:not(.rt-btn) { color: var(--link); }
.rt-pagehead a:not(.rt-btn):hover { color: var(--act-600); }
.rt-pagehead .rt-tl-card a:not(.rt-btn),
.rt-pagehead .rt-picks-card a:not(.rt-btn) { color: var(--link); }
.rt-pagehead .rt-tl-brand a:not(.rt-btn) { color: #fff; }
.rt-pagehead .rt-byline a:not(.rt-btn) { color: var(--link); }

/* Re-assert the button's own ink after any of the above. */
.rt-btn-cta,
.rt-pagehead .rt-btn-cta,
.rt-pagehead a.rt-btn-cta { color: var(--act-ink); }
.rt-btn-ghost,
.rt-pagehead a.rt-btn-ghost { color: var(--link); }

/* Light-hero fixes, round six - the muted ink.

   --tx-faint was picked for a dark ground and measures 3.92:1 on the light
   cards, which is below AA for the terms line, the "Siirryt kasinon sivulle"
   note and the empty-logo fallbacks - 84 instances in all, every one of them
   the same token. Darkened to clear 4.5:1 on the card, the tint and white. */
:root { --tx-faint: #55657d; }

/* Lead figure.

   Sits in the second H2 so it is the first in-content image on the page, and it
   carries the main keyword in the artwork as well as in its alt text. Width is
   capped rather than fixed so it scales down cleanly on a phone instead of
   forcing a horizontal scroll - the overflow trap this theme has hit before. */
.rt-leadshot { margin: 0 0 1.6em; }
.rt-leadshot img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 14px; border: 1px solid var(--line);
}
.rt-leadshot figcaption {
  margin: .7em 0 0; font-size: .9rem; line-height: 1.5; color: var(--tx-faint);
}