/*
Theme Name: Live kasinot
Description: Live-kasinovertailu suomalaiselle pelaajalle.
Author: Toimitus
Version: 2.1.1
Text Domain: live-kasinot
*/

/* ---------------------------------------------------------------------------
   Layout idea, so later edits do not fight it.

   Every other site in this portfolio is hero -> card grid -> sticky right rail.
   This one is deliberately none of those:

     - a STATUS STRIP runs above everything, because the one Finnish-language
       table has real opening hours and "is it open right now" is the question
       this site exists to answer
     - casinos are a TABLE, not cards. A table invites column comparison, which
       is what someone choosing between five operators is actually doing
     - the standing panel is on the LEFT and holds the table clock, not a
       table of contents

   Palette is espresso and amber with a single live-red. Red marks the on-air
   state only and is never used on a control, so the two never blur.
--------------------------------------------------------------------------- */

:root {
	--espresso: #17120e;
	--espresso-2: #241c15;
	--espresso-3: #33271d;
	--bark: #4a3a2c;

	--amber: #c9862a;
	--amber-d: #a76c1c;
	--amber-l: #e8b556;
	--on-amber: #17120e;

	--live: #d8442f;
	--live-soft: #fbeae7;

	--paper: #fdfbf7;
	--card: #ffffff;
	--sand: #f5efe4;
	--sand-2: #ece3d3;
	--rule: #e3d9c9;
	--rule-2: #cfc0a9;

	--ink: #1a1410;
	--ink-2: #4f4339;
	--ink-3: #7a6b5d;
	--on-dark: #f7f2ea;
	--on-dark-2: #bdac98;

	--ok: #3f7d52;
	--ok-bg: #eaf3ec;
	--warn: #8a6410;
	--warn-bg: #fdf4e2;

	--w: 1180px;
	--panel: 260px;
	--r: 4px;
	--r-2: 10px;
	--sh: 0 1px 2px rgba(23,18,14,.06);
	--sh-2: 0 10px 30px rgba(23,18,14,.14);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--amber-d); text-underline-offset: 2px; }
a:hover { color: var(--amber); }

h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; color: var(--espresso); }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: -.015em; font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 800; }
p { margin: 0 0 1.05em; }

.wrap { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: 20px; }

/* --------------------------------------------------------- status strip -- */

.onair {
	background: var(--espresso);
	color: var(--on-dark);
	font-size: .82rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.onair .wrap { display: flex; align-items: center; gap: 14px; padding-block: 8px; flex-wrap: wrap; }
.onair-dot {
	inline-size: 9px; block-size: 9px; border-radius: 50%;
	background: var(--live); flex: none;
	box-shadow: 0 0 0 3px rgba(216,68,47,.22);
}
.onair.is-closed .onair-dot { background: var(--ink-3); box-shadow: none; }
.onair b { color: #fff; font-weight: 700; }
.onair-when { color: var(--on-dark-2); }
.onair-note { margin-left: auto; color: var(--on-dark-2); }

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

.top {
	position: sticky; top: 0; z-index: 40;
	background: rgba(253,251,247,.94);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { display: block; }

.chips {
	display: flex; gap: 7px; overflow-x: auto; flex: 1 1 auto;
	scrollbar-width: none; -ms-overflow-style: none; padding-block: 6px;
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
	flex: none; font-size: .82rem; font-weight: 600; text-decoration: none;
	color: var(--ink-2); background: var(--sand); border: 1px solid var(--rule);
	padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.chips a:hover { background: var(--sand-2); color: var(--espresso); }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 700; text-decoration: none; border-radius: var(--r);
	padding: 11px 18px; border: 1px solid transparent; cursor: pointer;
	font-size: .95rem; line-height: 1.1;
}
.btn-cta { background: var(--amber); color: var(--on-amber); border-color: var(--amber-d); }
.btn-cta:hover { background: var(--amber-l); color: var(--on-amber); }
.btn-ghost { background: transparent; color: var(--espresso); border-color: var(--rule-2); }
.btn-ghost:hover { background: var(--sand); color: var(--espresso); }
.btn-sm { padding: 8px 13px; font-size: .86rem; }
.top .btn { flex: none; }

/* ------------------------------------------------------------- pagehead -- */

.pagehead { padding: 34px 0 10px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.pagehead h1 { max-width: 20ch; }

.byline {
	display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
	font-size: .86rem; color: var(--ink-2); margin: 0 0 20px;
	padding: 10px 0; border-block: 1px solid var(--rule);
}
.byline b { color: var(--espresso); font-weight: 700; }
.byline a { color: var(--amber-d); }

.lead { font-size: 1.1rem; max-width: 68ch; }
.lead p:last-child { margin-bottom: 0; }

/* horizontal spec row instead of a bullet list */
.spec {
	display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 1px; background: var(--rule); border: 1px solid var(--rule);
	border-radius: var(--r-2); overflow: hidden; margin: 24px 0 30px;
}
.spec > div { background: var(--card); padding: 14px 16px; font-size: .88rem; line-height: 1.5; }
.spec b { display: block; color: var(--espresso); font-weight: 800; margin-bottom: 2px; }
.spec strong { color: var(--espresso); }

/* ---------------------------------------------------------------- shell -- */

.shell { width: 100%; max-width: var(--w); margin-inline: auto; padding: 0 20px 60px; }

@media (min-width: 1040px) {
	.shell {
		display: grid; grid-template-columns: var(--panel) minmax(0,1fr);
		gap: 44px; align-items: start;
	}
}

/* left standing panel - the table clock, not a contents list */
.panel { display: none; }
@media (min-width: 1040px) {
	.panel {
		display: block; position: sticky; top: calc(60px + 18px);
		font-size: .86rem;
	}
}
.panel-box {
	background: var(--espresso); color: var(--on-dark);
	border-radius: var(--r-2); padding: 16px 16px 14px; margin-bottom: 16px;
}
.panel-box h2 {
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--amber-l); margin: 0 0 10px;
}
.panel-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.1); }
.panel-row:first-of-type { border-top: 0; }
.panel-row span { color: var(--on-dark-2); }
.panel-row b { color: #fff; font-weight: 700; white-space: nowrap; }

.panel nav h2 {
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ink-3); margin: 0 0 8px;
}
.panel nav ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.panel nav li { counter-increment: s; }
.panel nav a {
	display: block; padding: 5px 0 5px 24px; position: relative;
	color: var(--ink-2); text-decoration: none; font-weight: 500; line-height: 1.35;
}
.panel nav a::before {
	content: counter(s, decimal-leading-zero);
	position: absolute; left: 0; top: 5px;
	font-size: .72rem; color: var(--rule-2); font-weight: 700;
}
.panel nav a:hover { color: var(--amber-d); }

/* ----------------------------------------------------------- the table --- */

.tbl-wrap { margin: 0 0 30px; }
.lktable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lktable caption {
	text-align: left; font-size: .82rem; color: var(--ink-3);
	padding: 0 0 10px;
}
.lktable thead th {
	text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-3); font-weight: 800; padding: 0 12px 8px;
	border-bottom: 2px solid var(--rule-2);
}
.lktable tbody tr { border-bottom: 1px solid var(--rule); }
.lktable tbody tr.is-top { background: var(--sand); }
.lktable td { padding: 14px 12px; vertical-align: middle; }

.lk-rank { font-weight: 800; color: var(--ink-3); width: 34px; font-size: 1.02rem; }
.lktable tbody tr.is-top .lk-rank { color: var(--amber-d); }

.lk-brand { min-width: 150px; }
.lk-brand .logo { display: block; height: 30px; width: auto; max-width: 118px; object-fit: contain; }
.lk-brand .nm { font-weight: 800; color: var(--espresso); display: block; }
.lk-flag {
	display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .05em;
	text-transform: uppercase; color: var(--amber-d); margin-top: 3px;
}

.lk-offer b { display: block; font-weight: 800; color: var(--espresso); font-size: 1rem; }
.lk-offer span { color: var(--ink-2); font-size: .84rem; }

.lk-suomi { font-size: .84rem; line-height: 1.4; }
.lk-suomi .tag {
	display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
	padding: 3px 9px; border-radius: 999px; font-size: .76rem; white-space: nowrap;
}
.lk-suomi.is-yes .tag { background: var(--ok-bg); color: var(--ok); }
.lk-suomi.is-no .tag { background: var(--warn-bg); color: var(--warn); }
.lk-suomi p { margin: 5px 0 0; color: var(--ink-3); font-size: .8rem; }

.lk-lic { font-size: .84rem; color: var(--ink-2); }
.lk-lic b { display: block; color: var(--espresso); font-weight: 700; }
.lk-go { text-align: right; white-space: nowrap; }
.lk-go .micro { display: block; font-size: .72rem; color: var(--ink-3); margin-top: 6px; }

/* the table becomes stacked blocks on narrow screens */
@media (max-width: 860px) {
	.lktable, .lktable tbody, .lktable tr, .lktable td { display: block; width: 100%; }
	.lktable thead { display: none; }
	.lktable tbody tr {
		border: 1px solid var(--rule); border-radius: var(--r-2);
		margin-bottom: 14px; padding: 14px; position: relative;
	}
	.lktable tbody tr.is-top { border-color: var(--amber); }
	.lktable td { padding: 5px 0; }
	.lk-rank { position: absolute; top: 14px; right: 14px; }
	.lk-go { text-align: left; }
	.lk-go .btn { width: 100%; }
}

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

.entry > * { max-width: 72ch; }
.entry > .tbl-wrap, .entry > figure, .entry > .picks { max-width: none; }

.entry section { padding-top: 34px; }
.entry section > h2 {
	position: relative; padding-top: 14px; border-top: 2px solid var(--espresso);
	display: flex; align-items: baseline; gap: 12px;
}
.entry section > h2::before {
	content: attr(data-n);
	font-size: .78rem; font-weight: 800; color: var(--amber-d);
	letter-spacing: .1em; flex: none;
}

.entry ul, .entry ol { padding-left: 1.15em; margin: 0 0 1.05em; }
.entry li { margin-bottom: .4em; }

.note {
	background: var(--sand); border-left: 3px solid var(--amber);
	padding: 13px 16px; border-radius: 0 var(--r) var(--r) 0;
	font-size: .93rem; margin: 0 0 1.2em;
}
.callout {
	background: var(--live-soft); border: 1px solid #f2cdc5;
	padding: 15px 18px; border-radius: var(--r-2); margin: 1.4em 0;
	font-size: .94rem;
}
.callout p:last-child { margin-bottom: 0; }

figure { margin: 1.6em 0; }
figure img { display: block; border: 1px solid var(--rule); border-radius: var(--r-2); }
figcaption { font-size: .84rem; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
	content: ""; position: absolute; left: 4px; top: .55em;
	inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--amber);
}

.sources { list-style: none; padding: 0; font-size: .92rem; color: var(--ink-2); }
.sources li { padding-left: 18px; position: relative; }
.sources li::before { content: "\2014"; position: absolute; left: 0; color: var(--rule-2); }

/* three editorial picks, as a row of plain blocks */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 0 0 30px; }
.picks-card {
	border: 1px solid var(--rule); border-radius: var(--r-2);
	padding: 16px; background: var(--card); display: flex; flex-direction: column;
}
.picks-card.is-top { border-color: var(--amber); box-shadow: var(--sh-2); }
.picks-flag {
	font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
	color: var(--amber-d); margin-bottom: 9px;
}
.picks-logo { min-height: 30px; margin-bottom: 9px; display: flex; align-items: center; }
.picks-logo .logo { height: 30px; width: auto; max-width: 118px; object-fit: contain; }
.picks-logo.is-empty { font-weight: 800; color: var(--espresso); }
.picks-offer { font-weight: 800; font-size: 1.02rem; margin-bottom: 3px; }
.picks-meta { font-size: .84rem; color: var(--ink-2); margin-bottom: 14px; }
.picks-card .btn { margin-top: auto; width: 100%; }
@media (max-width: 860px) { .picks { grid-template-columns: 1fr; } }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
	cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--espresso);
	list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber-d); font-weight: 800; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 16px; font-size: .95rem; color: var(--ink-2); }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- foot --- */

.foot { background: var(--espresso); color: var(--on-dark-2); margin-top: 40px; font-size: .9rem; }
.foot a { color: var(--on-dark); text-decoration: none; }
.foot a:hover { color: var(--amber-l); text-decoration: underline; }
.foot .wrap { padding-block: 34px 26px; }

.foot-top { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; } }
.foot h2 {
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--amber-l); margin: 0 0 10px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; }
.foot-brand img { display: block; margin-bottom: 12px; }
.foot-brand p { color: var(--on-dark-2); max-width: 46ch; }

.foot-tg { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; }

.foot-marks {
	display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch;
	margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
}
.mark {
	display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--r-2); padding: 10px 14px; color: var(--on-dark);
	font-size: .78rem; font-weight: 600; line-height: 1.25;
}
.mark svg, .mark img { flex: none; display: block; }
.mark b { display: block; color: #fff; font-weight: 700; }
.mark span { display: block; color: var(--on-dark-2); font-size: .72rem; font-weight: 500; }

/* `.mark .mark-18`, not `.mark-18`: the card's own `.mark span` rule is more
   specific than a bare class and would otherwise win on display and colour,
   which is what pushed "18+" out of the ring on four other sites. */
.mark .mark-18 {
	inline-size: 34px; block-size: 34px; border-radius: 50%;
	border: 2px solid var(--amber-l); color: var(--amber-l);
	font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: -.01em;
	display: inline-grid; place-items: center; flex: none;
}

.foot-base {
	margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
	display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
	font-size: .82rem;
}
.foot-base .resp { color: var(--on-dark-2); max-width: 72ch; }

@media (max-width: 1039px) {
	.entry > * { max-width: none; }
}


/* 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. */
.sitefoot-legal,
.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;
}

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

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

/* Footer CTA on the .net build, which had no footer button of its own. */
.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 .gamecard,
.prose .gamecard {
	float: right; width: 210px; margin: 4px 0 18px 26px;
}
.gamecard img {
	display: block; width: 100%; height: auto; border-radius: 12px;
	border: 1px solid var(--line, rgba(0,0,0,.12));
}
.gamecard figcaption {
	margin-top: 8px; font-size: .74rem; line-height: 1.45;
	color: var(--tx-faint, #5d6472);
}
@media (max-width: 720px) {
	.entry-content .gamecard,
	.prose .gamecard { float: none; width: 100%; max-width: 280px; margin: 18px auto; }
	.gamecard figcaption { text-align: left; }
}

/* Correction: this theme's content container is .entry, not .entry-content, so
   the earlier scoped rule never matched and the 600x840 art was being upscaled
   to the full column. Style the figure itself instead. live gamecard fix */
figure.gamecard { float: right; width: 210px; margin: 4px 0 18px 26px; }
figure.gamecard img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 720px) {
	figure.gamecard { float: none; width: 100%; max-width: 280px; margin: 18px auto; }
}

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

@media (max-width: 640px) {
	.authorquote { padding: 20px 18px 16px; margin: 22px 0; }
	.authorquote .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 */
.authorquote {
	max-width: 560px;
	margin: 22px auto;
	padding: 18px 22px 15px;
	border-radius: 14px;
}
.aq-face { width: 54px; height: 54px; margin-bottom: 10px; }
.authorquote .aq-text p {
	font-size: .93rem;
	line-height: 1.55;
	font-weight: 500;
}
.aq-by { margin-top: 10px; font-size: .76rem; }
.aq-by .aq-role { font-size: .72rem; }

@media (max-width: 640px) {
	.authorquote { max-width: none; padding: 16px 16px 13px; margin: 18px 0; }
	.authorquote .aq-text p { font-size: .9rem; }
	.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. */
.rv-list { --rv-card: #ffffff; --rv-tint: #f5f6f8; --rv-line: #e3e6e8;
           --rv-ink: #1a1410; --rv-soft: #4f4339; --rv-faint: #7a6b5d;
           --rv-accent: #147e3f;
           display: grid; gap: 14px; margin: 26px 0 34px; }

.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;
}
.rv-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.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. */
.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;
}
.rv-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rv-logo i { font-style: normal; font-weight: 800; color: var(--rv-soft); }
.rv-id { display: grid; gap: 2px; min-width: 0; }
.rv-id b { color: var(--rv-ink); font-size: 1.02rem; }
.rv-rate { color: var(--rv-faint); font-size: .84rem; }

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

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

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

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

/* ==========================================================================
   [esittely] - TOP casino showcase block
   Compact strip, sized so a full roster of eight does not run to 6 000px.

   Surfaces, rules and muted text are mixed from currentColor rather than from
   this theme's token names, because the twenty installs that carry this block
   name their palette tokens about a dozen different ways. The mix adapts on its
   own: dark text on a light page gives a slightly darker panel, light text on a
   dark page a slightly lighter one. Only the accent and the two semantic pairs
   are injected, and each falls back to this theme's own token when it has one.
   ========================================================================== */

.es-wrap {
  --es-surface: color-mix(in srgb, currentColor 4%, transparent);
  --es-rule: color-mix(in srgb, currentColor 16%, transparent);
  --es-rule-2: color-mix(in srgb, currentColor 26%, transparent);
  --es-soft: color-mix(in srgb, currentColor 68%, transparent);
  --es-faint: color-mix(in srgb, currentColor 52%, transparent);
  --es-accent: #c9862a;
  --es-accent-ink: #17120e;
  --es-warn: var(--warn, #8a5a00);
  --es-warn-bg: var(--warn-bg, var(--warn-l, #fdf3e2));
  --es-pos: var(--pos, var(--good, #1b7a52));
  --es-pos-bg: var(--pos-bg, var(--good-l, #e6f3ed));
  --es-star: var(--star, #d8a318);
  margin: 40px 0;
}

.es-eyebrow {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--es-accent);
}

.es-title { margin: 0 0 8px; line-height: 1.14; text-wrap: balance; }

.es-stand { margin: 0 0 22px; max-width: 62ch; color: var(--es-soft); }

.es-cards { display: flex; flex-direction: column; gap: 16px; }

.es-card {
  display: grid;
  /* Proportional, not fixed: the twenty article columns this lands in run from
     about 660px to 920px wide. A flat 320px shot left only ~330px for the
     content on the narrow ones, which wrapped the fact chips onto four rows and
     pushed the card past 400px. */
  grid-template-columns: minmax(0, clamp(210px, 34%, 320px)) minmax(0, 1fr);
  background: var(--es-surface);
  border: 1px solid var(--es-rule);
  border-radius: 12px;
  overflow: hidden;
}

/* ---------- screenshot ---------- */

.es-shot { position: relative; border-right: 1px solid var(--es-rule); }

.es-shot-img { position: absolute; inset: 0; overflow: hidden; }

/* Absolute, or the image's own intrinsic height sets the card height instead of
   the content doing it. Anchored left because that is where an operator's offer
   headline sits; a centre crop cut one of the two in half. */
.es-shot-img:not(.is-empty) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.es-shot-img.is-empty {
  display: grid;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.es-shot-img.is-empty img {
  position: static;
  width: auto;
  height: auto;
  max-width: 190px;
  max-height: 68%;
  object-fit: contain;
}

.es-wordmark { font-weight: 700; font-size: 1.15rem; color: var(--es-soft); }

.es-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--es-accent);
  color: var(--es-accent-ink);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

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

.es-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 18px 16px;
  min-width: 0;
}

.es-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.es-id { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }

.es-name { margin: 0; font-size: 1.25rem; line-height: 1.15; }

.es-site { font-size: .74rem; color: var(--es-faint); }

.es-score { margin-left: auto; display: flex; align-items: baseline; gap: 7px; flex-shrink: 0; }

.es-score b { font-size: 1.2rem; font-variant-numeric: tabular-nums; line-height: 1; }

.es-stars { color: var(--es-star); font-size: .76rem; letter-spacing: .03em; }

.es-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.es-offer {
  margin: 0;
  padding: 9px 12px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid var(--es-rule);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Facts inline. As tiles these cost ~120px of card height each. */
.es-bits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin: 0;
  font-size: .76rem;
  line-height: 1.3;
}

.es-bit {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--es-rule-2);
  border-radius: 6px;
  font-weight: 600;
}

.es-bit i {
  font-style: normal;
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--es-faint);
}

.es-tax {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 700;
  color: var(--es-warn);
  background: var(--es-warn-bg);
}

.es-tax.is-good { color: var(--es-pos); background: var(--es-pos-bg); }

.es-note { margin: 0; color: var(--es-soft); font-size: .86rem; line-height: 1.5; }

.es-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
}

.es-btn {
  display: inline-flex;
  align-items: center;
  background: var(--es-accent);
  color: var(--es-accent-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
  padding: 9px 18px;
  border-radius: 8px;
  transition: filter .13s ease, transform .13s ease;
}

.es-btn:hover,
.es-btn:focus-visible {
  color: var(--es-accent-ink);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.es-fine { font-size: .7rem; line-height: 1.4; color: var(--es-faint); }

@media (max-width: 720px) {
  /* Stacked, with the shot back on a ratio since nothing beside it sets a height. */
  .es-card { grid-template-columns: minmax(0, 1fr); }
  .es-shot { border-right: 0; border-bottom: 1px solid var(--es-rule); aspect-ratio: 16 / 9; }
  .es-name { font-size: 1.15rem; }
  .es-offer { font-size: .95rem; }
  .es-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .es-btn { transition: none; } }


/* Top four rather than three. Guarded with min-width so each theme's existing
   one-column rule still wins on phones. */
@media (min-width: 1001px) {
  .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Intro fold
   The first paragraph stays visible; the rest sits in a <details> that is
   open in the markup, so the text is in the page source and readable without
   scripting. Phones close it so the ranked list is in the opening viewport;
   the summary never shows on desktop, where the fold is always open.
   ========================================================================== */

.lead-first > p:last-child { margin-bottom: 0; }
.intro-fold > .intro-rest { margin-top: 0; }
.intro-fold > summary { display: none; }
.intro-fold .intro-less { display: none; }

@media (max-width: 1040px) {
  .intro-fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px 18px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    list-style: none;
    width: auto;
    max-width: 100%;
  }
  .intro-fold > summary::-webkit-details-marker { display: none; }
  .intro-fold > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .intro-fold[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .intro-fold[open] .intro-more { display: none; }
  .intro-fold[open] .intro-less { display: inline; }
}

/* Narrow phones. Measured at 360px: 320px of usable width, brand 196px and
   unshrinkable, CTA 123px natural, secondary nav 68px - the three cannot fit,
   and letting the CTA shrink collapsed it to 34px with the label spilling out.
   The secondary nav points at the same #parhaat anchor as the CTA, so it goes
   and the button keeps its readable natural size. */
@media (max-width: 420px) {
  .top .wrap { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .top .chips { display: none; }
  .top .btn-sm {
    flex-shrink: 0;
    padding-left: 12px;
    padding-right: 12px;
    font-size: .86rem;
    white-space: nowrap;
  }
}