/* =========================================================================
   pointloto_1 — template 59
   Source skeleton: a Ukrainian slots casino home screen. Kept: the bar with
   the auth pair, the promo icon strip, the slider-beside-jackpot hero, the
   winners ticker, the category tabs, the cover grid, the four-column footer,
   and the source's diamond bullet, which is the one motif worth carrying.

   Simplified per the brief:
     - no photographic page background. The source floats the whole layout on
       a full-bleed picture of a casino floor; it costs a large image, fights
       every card edge and says nothing. One soft glow behind the hero replaces
       it.
     - one accent. The source runs a green CTA, a champagne jackpot, a violet
       and an orange at once; here champagne (--pl-gold) is the only CTA colour
       and green survives only as the live/win marker.
     - fewer rows. The 37-cover wall becomes two scroll-snap rails.

   Layout scale
     page measure      1280px  (--pl-w)
     reading measure    ≤78ch  only where no card column wraps (page, landing)
     content images     812px  centred (the network's standing rule)
     cover tiles      300x202  the source's own landscape proportion

   Sections
     1  tokens
     2  base + typography
     3  buttons and atoms
     4  header, promo strip, drawer, tab bar
     5  hero: slider + jackpot, winners ticker, stats
     6  chips, section heads, rails, tiles
     7  copy: page head, contents, article body, aside cards
     8  page types: toplist, review, landing
     9  footer
    10  responsive
   ========================================================================= */

/* ---------- 1. tokens ---------------------------------------------------- */

:root {
	--pl-bg:      #121113;
	--pl-bg-2:    #17171b;
	--pl-panel:   #1c1c21;
	--pl-panel-2: #232329;
	--pl-line:    #ffffff12;
	--pl-line-2:  #ffffff24;

	--pl-text:    #f4f4f6;
	--pl-muted:   #acacbc;   /* the source's own secondary text colour */
	--pl-dim:     #74747f;

	/* The single accent — the source's champagne, used for its jackpot counter
	   and its diamond bullets. Everything a visitor is meant to click is this. */
	--pl-gold:     #f2d499;
	--pl-gold-2:   #fbecd0;
	--pl-gold-dim: #c9a866;
	--pl-on-gold:  #1a1509;

	/* Reserved: the live dot and win figures. Never a button. */
	--pl-win: #7acd27;

	--pl-r-s:  8px;
	--pl-r-m:  12px;
	--pl-r-l:  16px;
	--pl-r-xl: 20px;

	--pl-w:     1280px;
	--pl-gap:   22px;
	--pl-top-h: 86px;   /* the shipped mark is a stacked cat-over-word lockup */

	--pl-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- 2. base + typography ----------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	position: relative;
	margin: 0;
	background: var(--pl-bg);
	color: var(--pl-text);
	font: 400 16px/1.6 var(--pl-font);
	padding-bottom: env(safe-area-inset-bottom);
	overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; }
img { border: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--pl-gold); outline-offset: 2px; border-radius: 4px; }

.pl-ico { display: inline-block; vertical-align: middle; flex: none; }

.pl-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	padding: 10px 16px; background: var(--pl-gold); color: var(--pl-on-gold);
	border-radius: 0 0 var(--pl-r-s) 0; font-weight: 700;
}
.pl-skip:focus { left: 0; }

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

.pl-main {
	position: relative;
	z-index: 0;
	width: 100%; max-width: var(--pl-w);
	margin-inline: auto;
	padding: 22px 20px 56px;
}
/* The source's page background, kept — softened rather than dropped.
   The blur and most of the darkening are baked into the shipped JPEG (see the
   note in that file's build): a CSS filter or backdrop-filter on a full-width
   layer would make the compositor re-blur it on every scroll frame, and this
   only has to be done once. What is left to CSS is the veil, because it has to
   land exactly on the page's own background colour so the image has no visible
   bottom edge.

   It scrolls with the page and ends around the fold, as it does on the source —
   the art is an entrance, not a wallpaper behind the article. */
body::before,
body::after {
	content: ''; position: absolute; z-index: -1;
	top: 0; left: 0; right: 0; height: 820px;
	pointer-events: none;
}
body::before {
	z-index: -2;
	/* Relative to this file, so it resolves under both roots the package is
	   served from. It is the one asset that bypasses pl_asset()'s mtime
	   cache-buster, so replace the art under a new filename rather than
	   overwriting bg.jpg, or the proxy in front of a live site serves the
	   old image for hours. */
	background: url('../img/bg/bg.jpg') center top / cover no-repeat;
	opacity: .62;
}
body::after {
	background: linear-gradient(180deg,
		#12111359 0%,
		#121113a6 42%,
		#121113e6 76%,
		var(--pl-bg) 100%);
}

/* ---------- 3. buttons and atoms ----------------------------------------- */

.pl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px;
	border-radius: var(--pl-r-s);
	font: 700 15px/1 var(--pl-font);
	white-space: nowrap;
	transition: background-color .16s, border-color .16s, color .16s, transform .16s;
}
.pl-btn:active { transform: translateY(1px); }

.pl-btn--primary {
	background: linear-gradient(180deg, var(--pl-gold-2), var(--pl-gold));
	color: var(--pl-on-gold);
	box-shadow: 0 6px 18px #f2d49923;
}
.pl-btn--primary:hover { background: linear-gradient(180deg, #fff7e8, var(--pl-gold-2)); }

.pl-btn--ghost {
	border: 1px solid var(--pl-line-2);
	color: var(--pl-text);
	background: #ffffff0a;
}
.pl-btn--ghost:hover { border-color: var(--pl-gold); color: var(--pl-gold); }

.pl-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.pl-btn--block { display: flex; width: 100%; }

/* Live marker. The only place green appears outside a win figure. */
.pl-live {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--pl-win);
	box-shadow: 0 0 0 4px #7acd2726;
	flex: none;
	animation: pl-pulse 2s ease-in-out infinite;
}
@keyframes pl-pulse { 50% { box-shadow: 0 0 0 7px #7acd2700; } }

/* ---------- 4. header, strip, drawer, tab bar ---------------------------- */

.pl-top {
	position: sticky; top: 0; z-index: 60;
	background: #121113ee;
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--pl-line);
}

.pl-top__in {
	width: 100%; max-width: var(--pl-w); margin-inline: auto;
	min-height: var(--pl-top-h);
	padding: 0 20px;
	display: flex; align-items: center; gap: 14px;
}

.pl-burger {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-left: -6px;
	border-radius: var(--pl-r-s); color: var(--pl-muted);
	transition: color .16s, background-color .16s;
}
.pl-burger:hover { color: var(--pl-text); background: #ffffff0f; }

/* --- brand mark --- */
.pl-mark { display: inline-flex; align-items: center; }
.pl-mark__img { display: block; height: var(--pl-mark-h); width: auto; }

.pl-mark__text { display: inline-flex; align-items: center; gap: 8px; }
.pl-mark__dia { display: inline-flex; color: var(--pl-gold); }
.pl-mark__word {
	font: 800 calc(var(--pl-mark-h) * .6)/1 var(--pl-font);
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.pl-mark__word em { font-style: normal; color: var(--pl-gold); }

.pl-top__nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }

.pl-top__link {
	display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 13px;
	border-radius: var(--pl-r-s);
	color: var(--pl-muted); font-weight: 600; font-size: 15px;
	transition: color .16s, background-color .16s;
}
.pl-top__link:hover { color: var(--pl-text); background: #ffffff0f; }
.pl-top__link .pl-ico { color: var(--pl-gold); }

.pl-top__auth { display: flex; align-items: center; gap: 9px; margin-left: auto; }

/* --- promo strip --- */
.pl-strip { border-top: 1px solid var(--pl-line); background: #17171b99; }
.pl-strip__in {
	width: 100%; max-width: var(--pl-w); margin-inline: auto;
	padding: 0 20px;
	display: flex; align-items: center; justify-content: center; gap: 4px;
	overflow-x: auto; scrollbar-width: none;
}
.pl-strip__in::-webkit-scrollbar { display: none; }

.pl-strip__i {
	display: inline-flex; align-items: center; gap: 8px;
	height: 46px; padding: 0 16px;
	color: var(--pl-muted); font-size: 14.5px; font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .16s, border-color .16s;
}
.pl-strip__i:hover { color: var(--pl-text); border-bottom-color: var(--pl-gold); }
.pl-strip__i .pl-ico { color: var(--pl-gold); }

/* --- drawer --- */
.pl-scrim {
	position: fixed; inset: 0; z-index: 79;
	background: #000000a6;
	opacity: 0; visibility: hidden;
	transition: opacity .22s, visibility .22s;
}
body.is-drawer .pl-scrim { opacity: 1; visibility: visible; }

.pl-drawer {
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
	width: min(340px, 88vw);
	display: flex; flex-direction: column;
	background: var(--pl-bg-2);
	border-right: 1px solid var(--pl-line);
	transform: translateX(-102%);
	transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
body.is-drawer .pl-drawer { transform: none; }

.pl-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--pl-line);
}
.pl-drawer__x {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: var(--pl-r-s); color: var(--pl-muted);
}
.pl-drawer__x:hover { color: var(--pl-text); background: #ffffff0f; }

.pl-drawer__scroll { flex: 1; overflow-y: auto; padding: 18px 0 20px; }

/* The panel leads with the jackpot counter instead of a banner image: it is
   the source's own signature block, it costs no picture, and it is what keeps
   this drawer from reading as a repeat of the other panel in the network. */
.pl-djack {
	display: grid; justify-items: center; gap: 4px;
	margin: 0 18px 6px;
	padding: 16px 14px;
	text-align: center;
	border-radius: var(--pl-r-m);
	border: 1px solid #f2d49938;
	background: radial-gradient(90% 90% at 50% 0%, #f2d49914 0%, #f2d49900 70%), var(--pl-panel);
	transition: border-color .16s;
}
.pl-djack:hover { border-color: var(--pl-gold); }
.pl-djack__t {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pl-muted);
}
.pl-djack__t .pl-ico { color: var(--pl-gold); }
.pl-djack__sum { font: 800 24px/1.1 var(--pl-font); letter-spacing: -.02em; color: var(--pl-gold); }
.pl-djack__sum i { font-style: normal; font-size: .6em; letter-spacing: .04em; }
.pl-djack__note { font-size: 12.5px; color: var(--pl-muted); }

/* Captions are centred rules rather than left kickers — the same diamond-
   flanked divider the jackpot title uses on the page. */
.pl-dgroup { margin-top: 22px; }
.pl-dgroup__t {
	display: flex; align-items: center; gap: 12px;
	margin: 0 18px 6px;
	font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--pl-dim); font-weight: 700;
}
.pl-dgroup__t::before, .pl-dgroup__t::after {
	content: ''; height: 1px; flex: 1; background: var(--pl-line);
}
.pl-dgroup__t span { flex: none; }

/* Rows are full-bleed and separated by hairlines, with a diamond marker that
   lights up and a chevron that slides in — no pill, no icon tile. */
.pl-drow {
	position: relative;
	display: flex; align-items: center; gap: 12px;
	min-height: 48px; padding: 0 18px;
	color: var(--pl-muted); font-size: 15px; font-weight: 600;
	border-bottom: 1px solid var(--pl-line);
	transition: color .16s, background-color .16s, padding-left .16s;
}
.pl-drow:last-child { border-bottom: 0; }
.pl-drow:hover { color: var(--pl-text); background: #ffffff08; padding-left: 24px; }
.pl-drow__d { display: inline-flex; color: var(--pl-dim); transition: color .16s; }
.pl-drow:hover .pl-drow__d { color: var(--pl-gold); }
.pl-drow__l { flex: 1; }
.pl-drow__n {
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
	color: var(--pl-gold); text-transform: uppercase;
}
.pl-drow > .pl-ico {
	color: var(--pl-dim);
	opacity: 0; transform: translateX(-4px);
	transition: opacity .16s, transform .16s;
}
.pl-drow:hover > .pl-ico { opacity: 1; transform: none; }

/* Socials are labelled rows, not a strip of circles. */
.pl-dsoc { display: grid; gap: 6px; margin: 24px 18px 0; }
.pl-dsoc__i {
	display: flex; align-items: center; gap: 10px;
	height: 38px; padding: 0 12px;
	border-radius: var(--pl-r-s);
	border: 1px solid var(--pl-line);
	color: var(--pl-muted); font-size: 13px; font-weight: 600;
	transition: color .16s, border-color .16s;
}
.pl-dsoc__i:hover { color: var(--pl-gold); border-color: #f2d49959; }
.pl-dsoc__i .pl-ico { color: var(--pl-gold); }

/* --- mobile tab bar --- */
.pl-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
	display: none; align-items: stretch;
	background: #121113f2;
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--pl-line);
	padding-bottom: env(safe-area-inset-bottom);
}
.pl-tabbar__i {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 60px; color: var(--pl-dim); font-size: 11px; font-weight: 600;
}
.pl-tabbar__i:first-child { color: var(--pl-gold); }

.pl-totop {
	position: fixed; right: 18px; bottom: 22px; z-index: 50;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--pl-panel-2); border: 1px solid var(--pl-line-2);
	color: var(--pl-text);
	box-shadow: 0 18px 44px #00000059;
}
.pl-totop .pl-ico { transform: rotate(180deg); }
.pl-totop[hidden] { display: none; }

/* ---------- 5. hero, winners, stats -------------------------------------- */

/* The source's own arrangement: slider on the left, jackpot counter on the
   right, both the same height. */
.pl-hero {
	display: grid; grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--pl-gap);
	margin-bottom: var(--pl-gap);
	align-items: stretch;
}

.pl-hero__slider { display: flex; flex-direction: column; min-width: 0; }

.pl-hero__deck {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--pl-r-l);
	border: 1px solid var(--pl-line);
	background: var(--pl-panel);
	flex: 1;
}
.pl-hero__deck::-webkit-scrollbar { display: none; }

.pl-slide { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.pl-slide__art { display: block; flex: 1; min-height: 0; }
/* The art is the message — the source burns the headline into the 900x360
   frame, so nothing is laid over it and the caption sits below instead. */
.pl-slide__art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pl-slide__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 12px 16px;
	border-top: 1px solid var(--pl-line);
	background: var(--pl-panel);
}
.pl-slide__kick {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14.5px; font-weight: 700;
	min-width: 0;
}
.pl-slide__kick .pl-ico { color: var(--pl-gold); }

.pl-hero__dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.pl-hero__dot {
	width: 7px; height: 7px; border-radius: 99px; background: var(--pl-line-2);
	transition: width .2s, background-color .2s;
}
.pl-hero__dot.is-on { width: 22px; background: var(--pl-gold); }

/* --- jackpot panel --- */
.pl-jack {
	display: grid; align-content: center; justify-items: center; gap: 10px;
	padding: 26px 24px;
	text-align: center;
	border-radius: var(--pl-r-l);
	border: 1px solid var(--pl-line);
	background:
		radial-gradient(80% 70% at 50% 0%, #f2d49914 0%, #f2d49900 68%),
		var(--pl-panel);
}
.pl-jack__t {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 22px; font-weight: 600; letter-spacing: .02em;
	color: var(--pl-text);
	padding-bottom: 12px; margin-bottom: 2px;
	border-bottom: 1px solid var(--pl-line);
	width: 100%; justify-content: center;
}
.pl-jack__t .pl-ico { color: var(--pl-gold); }
.pl-jack__sum {
	font: 800 clamp(28px, 3vw, 38px)/1.1 var(--pl-font);
	letter-spacing: -.02em;
	color: var(--pl-gold);
}
.pl-jack__sum i { font-style: normal; font-size: .62em; letter-spacing: .04em; }
.pl-jack__note { font-size: 13.5px; line-height: 1.6; color: var(--pl-muted); max-width: 34ch; }
.pl-jack .pl-btn { margin-top: 6px; }

/* --- winners ticker --- */
.pl-winners {
	display: flex; align-items: stretch; gap: 0;
	margin-bottom: var(--pl-gap);
	border-radius: var(--pl-r-l);
	border: 1px solid var(--pl-line);
	background: var(--pl-panel);
	overflow: hidden;
}
.pl-winners__lbl {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 20px;
	background: var(--pl-panel-2);
	border-right: 1px solid var(--pl-line);
	flex: none;
}
.pl-winners__lbl > span {
	display: grid; gap: 1px;
	font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
	white-space: nowrap;
}
/* The subtitle is a sentence, not a label — it must not inherit the caps. */
.pl-winners__lbl em {
	font-style: normal; font-size: 11.5px; font-weight: 500;
	text-transform: none; letter-spacing: 0; color: var(--pl-dim);
}

.pl-winners__rail {
	display: flex; gap: 0;
	overflow-x: auto; scroll-snap-type: x proximity;
	scrollbar-width: none;
	min-width: 0;
}
.pl-winners__rail::-webkit-scrollbar { display: none; }

.pl-win {
	display: flex; align-items: center; gap: 11px;
	padding: 12px 18px;
	flex: none; scroll-snap-align: start;
	border-right: 1px solid var(--pl-line);
	transition: background-color .16s;
}
.pl-win:hover { background: #ffffff08; }
.pl-win img { width: 46px; height: 31px; object-fit: cover; border-radius: 5px; flex: none; }
.pl-win__txt { display: grid; gap: 1px; }
.pl-win__game { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pl-win__sum { font-size: 13.5px; font-weight: 800; color: var(--pl-win); }
.pl-win__nick { font-size: 11.5px; color: var(--pl-dim); }

/* --- stats strip --- */
.pl-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
	margin-bottom: 32px;
}
.pl-stat {
	display: grid; gap: 3px;
	padding: 16px 18px;
	border-radius: var(--pl-r-m);
	background: var(--pl-panel);
	border: 1px solid var(--pl-line);
}
.pl-stat__i { color: var(--pl-gold); margin-bottom: 4px; }
.pl-stat__v { font: 800 20px/1.2 var(--pl-font); letter-spacing: -.01em; }
.pl-stat__l { font-size: 12.5px; color: var(--pl-muted); }

/* ---------- 6. chips, section heads, rails, tiles ------------------------ */

.pl-sec { margin-bottom: 32px; }

.pl-chips {
	display: flex; gap: 8px;
	overflow-x: auto; scrollbar-width: none;
	padding-bottom: 2px;
}
.pl-chips::-webkit-scrollbar { display: none; }

.pl-chip {
	display: inline-flex; align-items: center; gap: 8px;
	height: 42px; padding: 0 16px; flex: none;
	border-radius: 99px;
	border: 1px solid var(--pl-line);
	background: var(--pl-panel);
	color: var(--pl-muted); font-size: 14px; font-weight: 600;
	white-space: nowrap;
	transition: color .16s, border-color .16s, background-color .16s;
}
.pl-chip .pl-ico { color: var(--pl-gold); }
.pl-chip:hover { color: var(--pl-text); border-color: var(--pl-line-2); }
.pl-chip.is-on {
	background: var(--pl-gold); border-color: var(--pl-gold); color: var(--pl-on-gold);
}
.pl-chip.is-on .pl-ico { color: var(--pl-on-gold); }

.pl-shead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pl-shead__t {
	display: inline-flex; align-items: center; gap: 10px;
	font: 700 19px/1.25 var(--pl-font); letter-spacing: -.015em;
}
.pl-shead__t .pl-ico { color: var(--pl-gold); }
.pl-shead__side { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.pl-shead__all {
	display: inline-flex; align-items: center; gap: 4px;
	height: 32px; padding: 0 12px;
	border-radius: 99px; border: 1px solid var(--pl-line);
	font-size: 13px; font-weight: 600; color: var(--pl-muted);
	transition: color .16s, border-color .16s;
}
.pl-shead__all:hover { color: var(--pl-gold); border-color: var(--pl-gold); }

.pl-arrows { display: flex; gap: 6px; }
.pl-arrows[hidden] { display: none; }
.pl-arrows__b {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid var(--pl-line); color: var(--pl-muted);
	transition: color .16s, border-color .16s, opacity .16s;
}
.pl-arrows__b:hover { color: var(--pl-gold); border-color: var(--pl-gold); }
.pl-arrows__b:disabled { opacity: .35; cursor: default; }

.pl-rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: 224px;
	gap: 14px;
	overflow-x: auto; scroll-snap-type: x proximity;
	scrollbar-width: none;
	margin-top: -4px; padding: 4px 0;
}
.pl-rail::-webkit-scrollbar { display: none; }

.pl-tile { scroll-snap-align: start; display: grid; gap: 7px; align-content: start; }
.pl-tile__art {
	position: relative; display: block;
	aspect-ratio: 300 / 202;
	border-radius: var(--pl-r-m); overflow: hidden;
	border: 1px solid var(--pl-line);
	background: var(--pl-panel);
	transition: transform .18s, border-color .18s, box-shadow .18s;
}
.pl-tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-tile:hover .pl-tile__art {
	transform: translateY(-4px);
	border-color: var(--pl-gold);
	box-shadow: 0 14px 30px #00000073;
}

.pl-tile__badge {
	position: absolute; top: 8px; left: 8px;
	padding: 3px 8px; border-radius: 99px;
	font-size: 10px; font-weight: 800; letter-spacing: .06em;
	text-transform: uppercase;
}
.pl-tile__badge--hot { background: var(--pl-win); color: #0d1a03; }
.pl-tile__badge--new { background: var(--pl-gold); color: var(--pl-on-gold); }

.pl-tile__play {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	background: #121113c4;
	color: var(--pl-gold);
	font-size: 13px; font-weight: 700;
	opacity: 0; transition: opacity .18s;
}
.pl-tile:hover .pl-tile__play, .pl-tile:focus-visible .pl-tile__play { opacity: 1; }

.pl-tile__name {
	display: flex; align-items: center; gap: 7px;
	font-size: 13.5px; font-weight: 600; line-height: 1.3;
	overflow: hidden;
}
.pl-tile__name .pl-ico { color: var(--pl-gold); }
.pl-tile__name { white-space: nowrap; text-overflow: ellipsis; }
.pl-tile__prov { font-size: 11.5px; color: var(--pl-dim); margin-top: -3px; padding-left: 16px; }

/* ---------- 7. copy ------------------------------------------------------ */

/* Below the two-column breakpoint the copy is one stack with the card column
   ordered AFTER the article: in DOM order the cards sit under the <h1>, which
   is what puts them beside the copy in the grid and keeps the heading first,
   but left alone it would bury the article behind three promo cards on a
   phone. */
.pl-copy { display: flex; flex-direction: column; margin-top: 44px; }
.pl-copy > .pl-phead   { order: 1; }
.pl-copy > .pl-toc     { order: 2; }
.pl-copy > .pl-content { order: 3; }
.pl-copy > .pl-aside   { order: 4; margin: 30px 0 0; }

.pl-plain { margin-top: 8px; }

/* page.php and landing.php call pl_copy() with no card column, so nothing
   wraps and nothing widens further down — there the copy keeps a reading
   measure instead of running the full 1240px of the page. */
.pl-copy:not(:has(.pl-aside)) { max-width: 78ch; }

.pl-phead { margin-bottom: 22px; }
.pl-phead h1 {
	margin: 0;
	font: 800 clamp(25px, 3.1vw, 35px)/1.2 var(--pl-font);
	letter-spacing: -.025em;
}
.pl-lead {
	margin: 14px 0 0;
	font-size: 17px; line-height: 1.65; color: var(--pl-muted);
}

.pl-toc {
	margin: 0 0 26px;
	padding: 16px 20px;
	border-radius: var(--pl-r-m);
	background: var(--pl-panel);
	border: 1px solid var(--pl-line);
	border-left: 3px solid var(--pl-gold);
}
.pl-toc__t { display: flex; align-items: center; gap: 9px; font: 700 14px/1 var(--pl-font); margin-bottom: 10px; }
.pl-toc__t .pl-ico { color: var(--pl-gold); }
.pl-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pl-toc li { color: var(--pl-dim); font-size: 14.5px; }
.pl-toc a { color: var(--pl-muted); }
.pl-toc a:hover { color: var(--pl-gold); text-decoration: underline; }

/* --- the article body --- */
/* Fluid at every breakpoint. Above 1240px the card column is a float, so the
   text wraps beside the cards and then runs the full page measure the moment
   the cards end — which is why no element in here carries a reading-measure
   cap: a cap would freeze the copy at the wrapped width and leave a dead
   gutter beside it for the rest of the article. The cap survives only on the
   page types that render no cards (see .pl-copy:not(:has(.pl-aside))). */
.pl-content { font-size: 17px; line-height: 1.75; color: #dedee4; }

.pl-content h2, .pl-content h3, .pl-content h4 {
	letter-spacing: -.02em;
	color: var(--pl-text);
	scroll-margin-top: calc(var(--pl-top-h) + 60px);
}
.pl-content h2 { font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; line-height: 1.3; margin: 42px 0 14px; }
.pl-content h3 { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 32px 0 12px; }
.pl-content h4 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
.pl-content > :first-child { margin-top: 0; }

.pl-content p { margin: 0 0 18px; }

.pl-content a { color: var(--pl-gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pl-content a:hover { color: var(--pl-gold-2); }

.pl-content strong, .pl-content b { color: var(--pl-text); font-weight: 700; }

.pl-content ul, .pl-content ol { margin: 0 0 20px; padding-left: 22px; }
.pl-content li { margin-bottom: 8px; }
.pl-content li::marker { color: var(--pl-gold); }

/* Content images: the network's standing rule — capped at 812px, centred in
   the measure, shrinking with the column below that. max-width rather than
   width, so a small image keeps its own size instead of upscaling to a blur. */
.pl-content img {
	display: block;
	max-width: min(812px, 100%);
	height: auto;
	margin: 26px auto;
	border-radius: var(--pl-r-m);
	border: 1px solid var(--pl-line);
}
.pl-content figure { margin: 26px auto; max-width: min(812px, 100%); }
.pl-content figure img { margin: 0 auto; }
.pl-content figcaption { margin-top: 9px; font-size: 13.5px; color: var(--pl-dim); text-align: center; }

.pl-content blockquote {
	margin: 26px 0; padding: 16px 20px;
	border-left: 3px solid var(--pl-gold);
	border-radius: 0 var(--pl-r-s) var(--pl-r-s) 0;
	background: var(--pl-panel);
	color: var(--pl-muted); font-style: italic;
}
.pl-content blockquote p:last-child { margin-bottom: 0; }

.pl-content hr { border: 0; border-top: 1px solid var(--pl-line); margin: 34px 0; }

.pl-tscroll { max-width: 100%; overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.pl-content table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.pl-content th, .pl-content td { padding: 11px 14px; border: 1px solid var(--pl-line); text-align: left; }
.pl-content th { background: var(--pl-panel); font-weight: 700; color: var(--pl-text); }
.pl-content tbody tr:nth-child(even) td { background: #ffffff05; }

/* --- the floated card column --- */
.pl-aside { display: grid; align-content: start; gap: 14px; margin: 0 0 26px; }

/* From 1240px up the cards are a FLOAT, not a grid track: the copy wraps
   beside them and then reclaims the full 1240px measure as soon as they end,
   so a long article never runs in a narrow ribbon with a dead gutter beside it
   for its whole length. A grid track cannot do that — the column keeps the
   same width down its entire height.

   1240px is the first viewport at which the wrapped column is still wide
   enough for an 812px content image: 1240 measure - 330 cards - 34 gutter =
   876px. Below it the cards drop under the article (the flex stack above).

   The DOM order is head, aside, contents, body: the head is a block before the
   float, so the <h1> stays the first substantive node on the page, and the
   float is declared before the copy that has to wrap around it.

   Scoped with :has() because page.php and landing.php call pl_copy() with no
   card column. A browser without :has() keeps the single-column stack, which
   is the layout every narrow viewport already gets. */
@media (min-width: 1240px) {
	/* flow-root, so the float is contained and the footer below the article is
	   not dragged up beside it. */
	.pl-copy:has(.pl-aside) { display: flow-root; }

	.pl-copy:has(.pl-aside) > .pl-aside {
		float: right;
		width: 330px;
		margin: 0 0 26px 34px;
	}

	/* Boxes that carry their own background, border or scroller would slide
	   UNDER the float — a float shortens the line boxes inside a block, not the
	   block's own box. Their own formatting context makes each one sit beside
	   the cards at the wrapped width, then widen once the float ends.
	   .pl-tscroll already has one via overflow-x, and a block-level replaced
	   element (a content image) may not overlap a float's margin box, so
	   neither needs re-stating here. */
	.pl-copy:has(.pl-aside) > .pl-toc,
	.pl-copy:has(.pl-aside) .pl-content blockquote,
	.pl-copy:has(.pl-aside) .pl-content figure { display: flow-root; }
}

/* Stacked under the article the three cards would run a screen and a half
   tall, so from the tablet width up they sit side by side instead. */
@media (min-width: 720px) and (max-width: 1239px) {
	.pl-copy > .pl-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.pl-card {
	padding: 18px;
	border-radius: var(--pl-r-l);
	background: var(--pl-panel);
	border: 1px solid var(--pl-line);
	display: grid; gap: 9px;
}
.pl-card__kick {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
	font-weight: 700; color: var(--pl-gold);
}
.pl-card__head { display: flex; align-items: center; gap: 9px; font: 700 15px/1.2 var(--pl-font); }
.pl-card__head .pl-ico { color: var(--pl-gold); }
.pl-card__sum { font: 800 26px/1.1 var(--pl-font); letter-spacing: -.02em; }
.pl-card__sum span { display: block; font: 600 13px/1.4 var(--pl-font); color: var(--pl-muted); margin-top: 4px; }
.pl-card__note { font-size: 13.5px; line-height: 1.6; color: var(--pl-muted); }
.pl-card--bonus {
	background: radial-gradient(120% 130% at 100% 0%, #f2d49918 0%, #f2d49900 58%), var(--pl-panel);
}
.pl-card .pl-btn { margin-top: 5px; }
.pl-247 {
	margin-left: auto; padding: 3px 8px; border-radius: 99px;
	font: 700 11px/1 var(--pl-font); letter-spacing: .05em;
	background: #ffffff0f; color: var(--pl-muted);
}

.pl-tops { display: grid; gap: 2px; }
.pl-tops__i {
	display: flex; align-items: center; gap: 11px;
	padding: 8px; border-radius: var(--pl-r-s);
	transition: background-color .16s;
}
.pl-tops__i:hover { background: #ffffff0a; }
.pl-tops__n { width: 16px; font: 800 14px/1 var(--pl-font); color: var(--pl-dim); flex: none; }
.pl-tops__i img { width: 46px; height: 31px; object-fit: cover; border-radius: 5px; flex: none; }
.pl-tops__txt { display: grid; min-width: 0; flex: 1; }
.pl-tops__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tops__prov { font-size: 11.5px; color: var(--pl-dim); }
.pl-tops__i .pl-ico { color: var(--pl-dim); flex: none; }

/* --- rating --- */
.pl-rate { display: inline-flex; align-items: center; gap: 8px; }
.pl-rate__stars { display: inline-flex; gap: 2px; }
.pl-rate__s { color: var(--pl-line-2); display: inline-flex; }
.pl-rate__s.is-on { color: var(--pl-gold); }
.pl-rate__n { font-size: 13.5px; font-weight: 700; }

/* ---------- 8. page types ------------------------------------------------ */

/* --- toplist --- */
.pl-tl { display: grid; gap: 12px; }
.pl-tl__i {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto auto;
	align-items: center; gap: 18px;
	padding: 16px 18px;
	border-radius: var(--pl-r-l);
	background: var(--pl-panel);
	border: 1px solid var(--pl-line);
	transition: border-color .16s;
}
.pl-tl__i:hover { border-color: var(--pl-line-2); }
.pl-tl__i:first-child {
	border-color: #f2d49959;
	background: radial-gradient(90% 130% at 0% 0%, #f2d49914, #f2d49900 60%), var(--pl-panel);
}
.pl-tl__n { font: 800 24px/1 var(--pl-font); color: var(--pl-dim); text-align: center; }
.pl-tl__i:first-child .pl-tl__n { color: var(--pl-gold); }
.pl-tl__name { display: block; font: 700 17px/1.25 var(--pl-font); margin-bottom: 7px; }
.pl-tl__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-tl__tag {
	font-size: 11.5px; font-weight: 600; color: var(--pl-muted);
	padding: 3px 9px; border-radius: 99px; border: 1px solid var(--pl-line);
}
.pl-tl__bonus { text-align: right; }
.pl-tl__sum { display: block; font: 800 21px/1.1 var(--pl-font); color: var(--pl-gold); }
.pl-tl__cond { display: block; font-size: 12.5px; line-height: 1.45; color: var(--pl-muted); max-width: 30ch; margin: 4px 0 0 auto; }
.pl-tl__go { display: grid; gap: 8px; justify-items: stretch; min-width: 152px; }

/* --- review --- */
.pl-rev {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--pl-gap);
	align-items: start;
	padding: 22px;
	border-radius: var(--pl-r-xl);
	background: var(--pl-panel);
	border: 1px solid var(--pl-line);
	margin-bottom: 12px;
}
.pl-rev__name { display: block; font: 800 26px/1.15 var(--pl-font); letter-spacing: -.02em; margin-bottom: 10px; }
.pl-rev__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.pl-rev__facts { display: grid; gap: 1px; background: var(--pl-line); border-radius: var(--pl-r-m); overflow: hidden; }
.pl-rev__f { display: flex; gap: 14px; padding: 11px 15px; background: var(--pl-panel); font-size: 14.5px; }
.pl-rev__fk { color: var(--pl-muted); min-width: 42%; }
.pl-rev__fv { font-weight: 600; }
.pl-rev__side { display: grid; gap: 12px; }
.pl-rev__badge {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 11px; border-radius: 99px;
	font-size: 12px; font-weight: 700;
	background: #ffffff0f; color: var(--pl-muted);
}

/* --- landing --- */
.pl-land {
	position: relative; isolation: isolate;
	padding: clamp(30px, 6vw, 62px);
	border-radius: var(--pl-r-xl);
	overflow: hidden;
	border: 1px solid var(--pl-line);
	text-align: center;
	margin-bottom: 26px;
}
/* Texture, not a picture: the art carries the source's own promo line, so it
   is scaled past the frame, blurred and buried under a near-opaque veil. */
.pl-land__bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.08); filter: blur(7px) saturate(1.1);
}
.pl-land__veil {
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(90% 120% at 50% 0%, #12111399 0%, #121113ee 70%), #121113bf;
}
.pl-land__kick {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
	font-weight: 700; color: var(--pl-gold); margin-bottom: 14px;
}
.pl-land__t {
	display: block;
	font: 800 clamp(27px, 4.4vw, 42px)/1.14 var(--pl-font);
	letter-spacing: -.03em; margin: 0 auto 14px; max-width: 22ch;
}
.pl-land__t em { font-style: normal; color: var(--pl-gold); }
.pl-land__note { font-size: 16.5px; line-height: 1.65; color: var(--pl-muted); max-width: 56ch; margin: 0 auto 24px; }
.pl-land__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pl-land__pts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
	margin-top: 30px; text-align: left;
}
.pl-land__pt {
	display: flex; gap: 11px; align-items: flex-start;
	padding: 14px 16px; border-radius: var(--pl-r-m);
	background: #ffffff0a; border: 1px solid var(--pl-line);
	font-size: 14px; color: var(--pl-muted);
}
.pl-land__pt .pl-ico { color: var(--pl-gold); margin-top: 2px; }

/* ---------- 9. footer ---------------------------------------------------- */

.pl-foot {
	margin-top: 20px;
	padding: 44px 0 30px;
	background: var(--pl-bg-2);
	border-top: 1px solid var(--pl-line);
}

.pl-foot__top {
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 40px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--pl-line);
}
.pl-foot__about { margin: 14px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--pl-muted); }
.pl-foot__soc { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pl-foot__socl { font-size: 13px; color: var(--pl-dim); margin-right: 2px; }
.pl-foot__soci {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--pl-line); color: var(--pl-muted);
	transition: color .16s, border-color .16s;
}
.pl-foot__soci:hover { color: var(--pl-gold); border-color: var(--pl-gold); }

.pl-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pl-foot__col { display: grid; align-content: start; gap: 10px; }
.pl-foot__ct { font: 700 13px/1 var(--pl-font); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.pl-foot__col a {
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; color: var(--pl-muted);
	transition: color .16s;
}
.pl-foot__col a .pl-ico { color: var(--pl-gold); }
.pl-foot__col a:hover { color: var(--pl-gold); }

.pl-pays { display: flex; flex-wrap: wrap; gap: 9px; padding: 24px 0; border-bottom: 1px solid var(--pl-line); }
.pl-pays__i {
	padding: 7px 14px; border-radius: var(--pl-r-s);
	background: #ffffff08; border: 1px solid var(--pl-line);
	font-size: 12.5px; font-weight: 600; color: var(--pl-dim);
}

.pl-foot__legal { display: grid; gap: 10px; padding: 24px 0; }
.pl-foot__legal p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--pl-dim); max-width: 92ch; }

.pl-foot__bottom {
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	padding-top: 20px; border-top: 1px solid var(--pl-line);
	font-size: 12.5px; color: var(--pl-dim);
}

/* ---------- 10. responsive ----------------------------------------------- */

@media (max-width: 1099px) {
	.pl-hero { grid-template-columns: 1fr; }
	.pl-jack { padding: 22px; }
	.pl-foot__top { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 899px) {
	.pl-top__nav { display: none; }
	.pl-strip__in { justify-content: flex-start; }
	.pl-winners { flex-direction: column; }
	.pl-winners__lbl { border-right: 0; border-bottom: 1px solid var(--pl-line); }
	.pl-rev { grid-template-columns: 1fr; }
	.pl-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
	.pl-tabbar { display: flex; }
	.pl-totop { bottom: calc(74px + env(safe-area-inset-bottom)); }

	.pl-main { padding: 16px 16px 40px; }
	.pl-wrap { padding-inline: 16px; }
	.pl-top__in { padding: 0 16px; gap: 10px; }
	.pl-strip__in { padding: 0 16px; }

	.pl-stats { grid-template-columns: repeat(2, 1fr); }
	.pl-rail { grid-auto-columns: 190px; }

	.pl-content { font-size: 16px; }
	.pl-lead { font-size: 16px; }

	.pl-tl__i { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 14px; }
	.pl-tl__bonus { grid-column: 1 / -1; text-align: left; }
	.pl-tl__cond { max-width: none; margin-left: 0; }
	.pl-tl__go { grid-column: 1 / -1; grid-auto-flow: column; }

	.pl-foot { padding-top: 32px; }
}

@media (max-width: 479px) {
	/* The auth pair drops to registration alone — at this width the two crowd
	   the wordmark, and login is one row down in the drawer. */
	.pl-top__auth .pl-btn--ghost { display: none; }
	.pl-rail { grid-auto-columns: 168px; }
	.pl-slide__bar { flex-direction: column; align-items: stretch; gap: 10px; }
	.pl-tl__go { grid-auto-flow: row; }
	.pl-foot__cols { grid-template-columns: 1fr; }
}

@media (max-width: 359px) {
	.pl-stats { grid-template-columns: 1fr; }
}