/* GreenBay Pick'em — frontend
   Encyclopedia style: cream page, dark green hero, gold accent, white cards.
   Matches design.md §22 "Archive / Hub" so the page belongs to the site. */

/* ════════════════════════════════════════════════════════════════════════
   PAGE TEMPLATE SHELL
   Used by the theme's template-tipovacka.php and template-tipovacka-rebricek.php.
   Deliberately unscoped — these wrap the plugin output rather than sit inside it.
   ════════════════════════════════════════════════════════════════════════ */

.gbp-tip-page {
	background: #F8F5EE;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* Layer-for-layer the same treatment as the Fan Club and Encyclopedia heroes,
   so the Pick'em reads as part of the site rather than a bolted-on plugin.
   Reference: themes/greenbaypackers-theme/assets/css/fanclub-novinky.css */

.gbp-tip-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: 82vh;
	overflow: hidden;
	background: #07130D;
	color: #fff;
}

.gbp-tip-hero--compact { min-height: 58vh; }

.gbp-tip-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Radial pool of lighter green behind the headline, falling to near-black at
   the edges — this is what stops the hero reading as a flat green wash. */
.gbp-tip-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 55% 30%, rgba(32,55,49,.7) 0%, #07130D 65%),
		linear-gradient(to top, rgba(2,6,3,.98) 0%, rgba(2,6,3,.45) 55%, transparent 100%);
}

/* Painted OVER the overlay (see the layer order in the page template) so the
   photograph reads through the gradient instead of sitting buried under it. */
.gbp-tip-hero__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 55%;
	background-repeat: no-repeat;
	opacity: .28;
}

/* The leaderboard photo has its subject dead centre — anchor it there rather
   than low, or the crowd's banner gets cropped off on tall viewports. */
.gbp-tip-hero--compact .gbp-tip-hero__img { background-position: center center; }

/* Widely spaced gold rules — an archival grid, not a dense screen texture. */
.gbp-tip-hero__lines {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent 79px,
		rgba(255,182,18,.03) 80px
	);
}

.gbp-tip-hero__grain {
	position: absolute;
	inset: 0;
	opacity: .032;
	background-repeat: repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.gbp-tip-hero__g-watermark {
	position: absolute;
	right: -3%;
	bottom: -5%;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 900;
	font-size: clamp(16rem, 34vw, 40rem);
	line-height: 1;
	color: rgba(255,182,18,.04);
	pointer-events: none;
	user-select: none;
}

.gbp-tip-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: clamp(120px, 18vh, 200px);
	padding-bottom: clamp(60px, 8vh, 80px);
}

.gbp-tip-hero--compact .gbp-tip-hero__inner {
	padding-top: clamp(100px, 13vh, 150px);
}

.gbp-tip-hero__content { max-width: 660px; }

.gbp-tip-hero__eyebrow {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid rgba(255,182,18,.18);
	border-radius: 2px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: #FFB612;
	margin-bottom: 18px;
}

.gbp-tip-hero__title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(2.8rem, 6.5vw, 5.5rem);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 8px;
}

.gbp-tip-hero__title-accent { display: block; color: #FFB612; }

.gbp-tip-hero__divider {
	width: 56px;
	height: 3px;
	margin: 22px 0;
	background: linear-gradient(90deg, #FFB612, transparent);
}

.gbp-tip-hero__desc {
	font-family: 'Inter', sans-serif;
	font-size: clamp(.9rem, 1.4vw, 1rem);
	font-weight: 400;
	line-height: 1.75;
	color: #FFFFFF;
	max-width: 520px;
	margin: 0 0 clamp(32px, 4vw, 44px);
}
.gbp-tip-hero__desc strong { color: #FFB612; }

/* Secondary line — the practical timing note, quieter than the pitch above. */
.gbp-tip-hero__desc--note {
	font-size: clamp(.84rem, 1.2vw, .92rem);
	color: rgba(255, 255, 255, .90);
	margin-top: -18px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 182, 18, .18);
	max-width: 460px;
}

.gbp-tip-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Solid gold — this is the hero's one call to action, and an outline button
   over a photograph reads as decoration rather than something to press. */
.gbp-tip-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 34px;
	border: 2px solid #FFB612;
	border-radius: 8px;
	background: #FFB612;
	color: #07130D;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.08rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	box-shadow: 0 6px 22px rgba(255, 182, 18, .28);
	transition: background .18s, box-shadow .18s, transform .18s;
	/* The rules trigger in the hero is a <button>, which gets neither the
	   pointer nor the inherited font by default. */
	cursor: pointer;
	line-height: 1.2;
}

/* Two buttons side by side on a desktop, stacked on a narrow phone. */
.gbp-tip-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.gbp-tip-hero__btn:hover {
	background: #FFC53D;
	border-color: #FFC53D;
	color: #07130D;
	box-shadow: 0 10px 30px rgba(255, 182, 18, .42);
}

@media (prefers-reduced-motion: no-preference) {
	.gbp-tip-hero__btn:hover { transform: translateY(-2px); }
}

.gbp-tip-hero__btn svg { stroke-width: 3; }

/* The leaderboard hero's "back" link is navigation, not a call to action. */
/* "Si tu prvýkrát?" — the same footprint as the solid button beside it, so the
   two read as a pair rather than a button and an afterthought. Distinct all the
   same: an outlined gold frame on a dark fill instead of a solid gold slab. The
   fill matters — gold text on a bright stadium photo alone is unreadable. */
.gbp-tip-hero__btn--rules {
	padding: 15px 30px;
	font-size: 1.08rem;
	font-weight: 800;
	background: rgba(7, 19, 13, .55);
	border-color: #FFB612;
	color: #FFB612;
	box-shadow: 0 4px 18px rgba(7, 19, 13, .35);
	backdrop-filter: blur(2px);
}
.gbp-tip-hero__btn--rules:hover {
	background: rgba(255, 182, 18, .16);
	border-color: #FFD466;
	color: #FFD466;
}

/* "Späť na tipovačku" — the leaderboard's only use of this variant. Same size
   as the rules button beside it so the pair lines up; kept lighter (no fill,
   dimmer frame) because a back link should not compete with the call to
   action next to it. */
.gbp-tip-hero__btn--ghost {
	background: transparent;
	border-color: rgba(255, 182, 18, .55);
	color: #FFB612;
	box-shadow: none;
	font-size: 1.08rem;
	font-weight: 800;
	padding: 15px 30px;
}
.gbp-tip-hero__btn--ghost:hover {
	background: rgba(255, 182, 18, .12);
	border-color: #FFB612;
	color: #FFB612;
	box-shadow: none;
}

@media (max-width: 767px) {
	.gbp-tip-hero__btn { width: 100%; justify-content: center; padding: 15px 24px; }
}

.gbp-tip-hero__scroll {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: rgba(255,182,18,.65);
}
.gbp-tip-hero__scroll span {
	display: block;
	width: 1px;
	height: 26px;
	background: linear-gradient(to bottom, transparent, rgba(255,182,18,.55));
}

@media (prefers-reduced-motion: no-preference) {
	.gbp-tip-hero__scroll { animation: gbp-tip-bounce 2.4s ease-in-out infinite; }
	@keyframes gbp-tip-bounce {
		0%, 100% { transform: translateX(-50%) translateY(0); }
		50%      { transform: translateX(-50%) translateY(6px); }
	}
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.gbp-tip-body {
	background: #F8F5EE;
	padding: 44px 0 72px;
}

/* The plugin centres itself; inside a template the container already does. */
.gbp-tip-body .gbpk-page { margin: 0; padding-bottom: 0; max-width: none; }

.gbp-tip-extra {
	max-width: 720px;
	margin: 40px auto 0;
	padding-top: 28px;
	border-top: 1px solid rgba(32,55,49,.1);
	font-family: 'Inter', system-ui, sans-serif;
	color: #3D3D3D;
	line-height: 1.75;
}

.gbp-tip-fallback {
	padding: 60px 24px;
	text-align: center;
	background: #FFFFFF;
	border: 1px dashed rgba(32,55,49,.12);
	border-radius: 12px;
}
.gbp-tip-fallback__title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #203731;
	margin: 0 0 8px;
}
.gbp-tip-fallback__text { color: #3D3D3D; margin: 0; }

@media (max-width: 768px) {
	.gbp-tip-hero { min-height: 65vh; }
	.gbp-tip-hero--compact { min-height: 48vh; }
	.gbp-tip-hero__inner { padding-top: 100px; padding-bottom: 52px; }
	.gbp-tip-hero__img { opacity: .20; }
	.gbp-tip-hero__scroll { display: none; }
	.gbp-tip-hero__btn--rules,
	.gbp-tip-hero__btn--ghost { padding: 13px 22px; font-size: 1rem; }
	.gbp-tip-body { padding: 28px 0 52px; }
}

/* Premenné platia aj v okne „Prihlás sa a tipuj“ — to sa vkladá priamo do
   <body>, mimo .gbpk-page, a bez nich mali jeho tlačidlá namiesto zlatej
   a zelenej priehľadnú farbu. Vzhľad samotnej stránky (pozadie, písmo) je
   nižšie, len pre .gbpk-page. */
.gbpk-page,
#gbpk-login-popup {
	--gbpk-green:    #203731;
	--gbpk-green-dk: #07130D;
	--gbpk-gold:     #FFB612;
	--gbpk-cream:    #F8F5EE;
	--gbpk-parch:    #F2EDD8;
	--gbpk-card:     #FFFFFF;
	--gbpk-text:     #1A1A1A;
	--gbpk-muted:    #3D3D3D;
	--gbpk-border:   rgba(32, 55, 49, .08);
	--gbpk-ok:       #2D6A4F;
	--gbpk-err:      #9B2335;

	--gbpk-font-head: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	--gbpk-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.gbpk-page {
	background: var(--gbpk-cream);
	color: var(--gbpk-text);
	font-family: var(--gbpk-font-body);
	max-width: 1100px;
	margin-inline: auto;
	padding: 0 0 64px;
}

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

/* ── Hero ───────────────────────────────────────────────────────────────── */

.gbpk-hero {
	background: var(--gbpk-green);
	border-radius: 14px;
	padding: 40px 28px 32px;
	margin-bottom: 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* Gold hairline along the top edge, the site's recurring accent. */
.gbpk-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(to right, transparent, var(--gbpk-gold) 30%, var(--gbpk-gold) 70%, transparent);
}

.gbpk-hero__inner { position: relative; z-index: 1; }

.gbpk-hero__eyebrow {
	font-family: var(--gbpk-font-head);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--gbpk-gold);
	margin: 0 0 16px;
}

.gbpk-hero__matchup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.gbpk-hero__team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 110px;
}

.gbpk-hero__logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.gbpk-hero__team-name {
	font-family: var(--gbpk-font-head);
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #FFFFFF;
	margin: 0;
}

.gbpk-hero__vs {
	font-family: var(--gbpk-font-head);
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--gbpk-gold);
}

.gbpk-hero__meta {
	font-size: .92rem;
	color: rgba(255, 255, 255, .90);
	margin: 0 0 18px;
}

.gbpk-hero__status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.gbpk-pill {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	font-family: var(--gbpk-font-head);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.gbpk-pill.is-ready   { background: rgba(255, 182, 18, .18); color: var(--gbpk-gold); }
.gbpk-pill.is-open    { background: var(--gbpk-gold); color: var(--gbpk-green-dk); }
.gbpk-pill.is-locked  { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.gbpk-pill.is-settled { background: #FFFFFF; color: var(--gbpk-green); }

.gbpk-countdown {
	font-size: .88rem;
	color: rgba(255, 255, 255, .90);
}
.gbpk-countdown strong { color: var(--gbpk-gold); }

/* ── Status bar (shown instead of the hero inside a page template) ──────── */

.gbpk-statusbar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 18px;
	margin-bottom: 20px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 10px;
}

.gbpk-statusbar .gbpk-pill.is-ready   { background: #FFF1CC; color: #8A5A00; }
.gbpk-statusbar .gbpk-pill.is-open    { background: var(--gbpk-gold); color: var(--gbpk-green-dk); }
.gbpk-statusbar .gbpk-pill.is-locked  { background: #E6E9E7; color: var(--gbpk-muted); }
.gbpk-statusbar .gbpk-pill.is-settled { background: var(--gbpk-green); color: var(--gbpk-gold); }

.gbpk-statusbar__game {
	font-size: .95rem;
	color: var(--gbpk-text);
	flex: 1 1 auto;
}
.gbpk-statusbar__game strong { color: var(--gbpk-green); }

.gbpk-statusbar__count {
	font-size: .86rem;
	color: var(--gbpk-muted);
	white-space: nowrap;
}
.gbpk-statusbar__count strong { color: var(--gbpk-green); }

@media (max-width: 767px) {
	.gbpk-statusbar { gap: 8px; padding: 12px 14px; }
	.gbpk-statusbar__game { flex-basis: 100%; font-size: .9rem; }
}

/* ── Počítadlo tipujúcich ───────────────────────────────────────────────
   Tmavozelený štítok so zlatým číslom — zlatá len ako akcent na tmavom
   podklade, ako všade inde na webe. Číslo je v nadpisovom písme a väčšie,
   aby bolo na prvý pohľad jasné, o čo ide. */

.gbpk-participants {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px 6px 11px;
	border-radius: 999px;
	background: var(--gbpk-green);
	color: #FFFFFF;
	font-family: var(--gbpk-font-head);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px rgba(255, 182, 18, .35);
}

.gbpk-participants__icon {
	flex: none;
	color: var(--gbpk-gold);
}

.gbpk-participants strong {
	display: inline-block;
	color: var(--gbpk-gold);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* V tmavom hero (keď ho kreslí plugin) by plný zelený štítok splynul. */
.gbpk-hero .gbpk-participants {
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(255, 182, 18, .5);
}

/* Krátke zvýraznenie, keď číslo narástlo. */
.gbpk-participants.is-bumped strong {
	animation: gbpk-participants-bump .6s ease-out;
}

@keyframes gbpk-participants-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.gbpk-participants.is-bumped strong { animation: none; }
}

/* ── Season overview ────────────────────────────────────────────────────── */

.gbpk-backlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .88rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gbpk-muted);
	text-decoration: none;
}
.gbpk-backlink:hover { color: var(--gbpk-green); }

.gbpk-myseason {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 14px 18px;
	margin-bottom: 24px;
	background: var(--gbpk-green);
	border-radius: 12px;
	color: #FFFFFF;
	font-size: .92rem;
}
.gbpk-myseason__item strong { color: var(--gbpk-gold); font-size: 1.2rem; }
.gbpk-myseason__link {
	margin-left: auto;
	color: var(--gbpk-gold);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
}
.gbpk-myseason__link:hover { color: #FFFFFF; }

.gbpk-gamelist { display: grid; gap: 10px; }

.gbpk-gamecard {
	display: grid;
	grid-template-columns: 56px 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
	text-decoration: none;
	color: var(--gbpk-text);
	transition: border-color .18s, box-shadow .18s, transform .18s;
}

a.gbpk-gamecard:hover {
	border-color: var(--gbpk-green);
	box-shadow: 0 6px 20px rgba(7, 19, 13, .09);
	transform: translateY(-2px);
}

/* Games not yet open are informational only. Signalled by a dashed border and
   a transparent fill — never by fading the card, which drags the text below
   the contrast the palette guarantees. */
.gbpk-gamecard.is-waiting {
	background: transparent;
	border-style: dashed;
	border-color: rgba(32, 55, 49, .22);
}

/* ── The current game ─────────────────────────────────────────────────────
   The one fixture a fan should act on now, and the only card that reverses
   the palette: Packers green fill, gold badge, cream type. Reversing beats
   tinting — a pale gold wash on cream barely separates from the page, which
   is why this card used to disappear into the list.

   Everything below re-states a colour the reversed surface would otherwise
   have swallowed. All of them are solid values; nothing is dimmed with
   opacity, which is what pushed text under the contrast floor before. */
.gbpk-gamecard.is-focus,
.gbpk-gamecard.is-focus.is-waiting {
	background: var(--gbpk-green);
	border-style: solid;
	border-color: var(--gbpk-green);
	color: var(--gbpk-cream);
	box-shadow: 0 4px 18px rgba(7, 19, 13, .18);
}

.gbpk-gamecard.is-focus .gbpk-gamecard__badge {
	background: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}
.gbpk-gamecard.is-focus .gbpk-gamecard__match strong { color: #FFFFFF; }
.gbpk-gamecard.is-focus .gbpk-gamecard__ha          { color: var(--gbpk-gold); }
.gbpk-gamecard.is-focus .gbpk-gamecard__when        { color: var(--gbpk-cream); }
.gbpk-gamecard.is-focus .gbpk-gamecard__note        { color: var(--gbpk-cream); }
.gbpk-gamecard.is-focus .gbpk-gamecard__note strong { color: var(--gbpk-gold); }
.gbpk-gamecard.is-focus .gbpk-gamecard__score       { color: var(--gbpk-cream); }
.gbpk-gamecard.is-focus .gbpk-gamecard__score strong { color: var(--gbpk-gold); }
.gbpk-gamecard.is-focus .gbpk-gamecard__mine        { color: var(--gbpk-gold); }
.gbpk-gamecard.is-focus .gbpk-gamecard__arrow       { color: var(--gbpk-gold); }

/* Pills sit on the dark surface here, so the cream-card tints do not apply. */
.gbpk-gamecard.is-focus .gbpk-pill.is-ready   { background: var(--gbpk-gold); color: var(--gbpk-green-dk); }
.gbpk-gamecard.is-focus .gbpk-pill.is-open    { background: var(--gbpk-gold); color: var(--gbpk-green-dk); }
.gbpk-gamecard.is-focus .gbpk-pill.is-locked  { background: #FFFFFF; color: var(--gbpk-green); }
.gbpk-gamecard.is-focus .gbpk-pill.is-settled { background: #FFFFFF; color: var(--gbpk-green); }

a.gbpk-gamecard.is-focus:hover {
	border-color: var(--gbpk-gold);
	box-shadow: 0 8px 24px rgba(7, 19, 13, .26);
}
a.gbpk-gamecard.is-focus:hover .gbpk-gamecard__arrow { color: #FFFFFF; }

/* On mobile the status block is divided off by a rule — on the dark card that
   hairline is invisible, so it gets a gold one. */
@media (max-width: 767px) {
	.gbpk-gamecard.is-focus .gbpk-gamecard__status {
		border-top-color: rgba(255, 182, 18, .45);
	}
}

.gbpk-gamecard__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 34px;
	padding: 0 9px;
	border-radius: 8px;
	background: var(--gbpk-green);
	color: #FFFFFF;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .9rem;
	font-weight: 800;
	letter-spacing: .03em;
}
.gbpk-gamecard.is-settled .gbpk-gamecard__badge { background: var(--gbpk-muted); }

.gbpk-gamecard__match {
	margin: 0 0 3px;
	font-size: 1.05rem;
	font-weight: 600;
}
.gbpk-gamecard__match strong { color: var(--gbpk-green); font-weight: 700; }
.gbpk-gamecard__ha { color: var(--gbpk-muted); font-weight: 600; margin-right: 3px; }

.gbpk-gamecard__when {
	margin: 0;
	font-size: .88rem;
	font-weight: 500;
	color: var(--gbpk-muted);
}
.gbpk-gamecard__when em { font-style: italic; }

/* The status pills are defined for the dark hero, where gold on translucent
   gold works. On a cream card that pairing is unreadable, so each one gets a
   solid tint with dark text instead. */
/* Muted green tints. Only the genuinely urgent state — picks are open right
   now — earns the gold. */
.gbpk-gamecard .gbpk-pill.is-ready   { background: #E7EBE8; color: #3F4C45; }
.gbpk-gamecard .gbpk-pill.is-open    { background: var(--gbpk-gold); color: var(--gbpk-green-dk); }
.gbpk-gamecard .gbpk-pill.is-locked  { background: #E2E7E4; color: #2F3B35; }
.gbpk-gamecard .gbpk-pill.is-settled { background: var(--gbpk-green); color: #FFFFFF; }

.gbpk-gamecard__status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
}

.gbpk-gamecard__note {
	font-size: .84rem;
	font-weight: 500;
	color: var(--gbpk-muted);
	white-space: nowrap;
}
.gbpk-gamecard__note strong { color: var(--gbpk-green); font-weight: 700; }

.gbpk-gamecard__mine {
	font-size: .78rem;
	font-weight: 600;
	color: var(--gbpk-ok);
}

.gbpk-gamecard__score {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gbpk-muted);
}
.gbpk-gamecard__score strong { font-size: 1.5rem; color: var(--gbpk-green); }
.gbpk-gamecard__score small { display: block; font-size: .74rem; font-weight: 600; }

.gbpk-gamecard__arrow { color: var(--gbpk-muted); display: flex; }
a.gbpk-gamecard:hover .gbpk-gamecard__arrow { color: var(--gbpk-gold); }

@media (max-width: 767px) {
	.gbpk-gamecard {
		grid-template-columns: 46px 1fr;
		gap: 10px 12px;
		padding: 14px;
	}
	.gbpk-gamecard__status {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 8px;
		text-align: left;
		padding-top: 10px;
		border-top: 1px solid var(--gbpk-border);
	}
	.gbpk-gamecard__arrow { display: none; }
	.gbpk-gamecard__score strong { font-size: 1.25rem; }
	.gbpk-myseason { gap: 12px; font-size: .86rem; }
	.gbpk-myseason__link { margin-left: 0; flex-basis: 100%; }
}

/* ── Game switcher ──────────────────────────────────────────────────────── */

.gbpk-switcher {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 2px 12px;
	margin-bottom: 20px;
	scrollbar-width: thin;
}

.gbpk-switcher__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 0 0 auto;
	min-width: 118px;
	padding: 10px 14px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 10px;
	text-decoration: none;
	/* Set on the link itself, not only on inner spans — the leaderboard tabs
	   put their label directly in the anchor and were inheriting body colour
	   on top of the dark green active state. */
	color: var(--gbpk-text);
	font-weight: 600;
	transition: border-color .2s, background .2s, color .2s, transform .2s;
}

.gbpk-switcher__item:hover {
	border-color: var(--gbpk-gold);
	transform: translateY(-2px);
	color: var(--gbpk-green);
}

.gbpk-switcher__item.is-active,
.gbpk-switcher__item.is-active:hover {
	background: var(--gbpk-green);
	border-color: var(--gbpk-green);
	color: #FFFFFF;
	transform: none;
}

/* ── Filter tabs (leaderboard) — one line of pills, not stacked cards ──── */

.gbpk-switcher--tabs {
	gap: 6px;
	padding: 6px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
	margin-bottom: 22px;
}

.gbpk-switcher--tabs .gbpk-switcher__item {
	flex-direction: row;
	align-items: center;
	min-width: 0;
	padding: 9px 16px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gbpk-muted);
	white-space: nowrap;
}

.gbpk-switcher--tabs .gbpk-switcher__item:hover {
	background: rgba(32, 55, 49, .07);
	color: var(--gbpk-green);
	transform: none;
}

.gbpk-switcher--tabs .gbpk-switcher__item.is-active,
.gbpk-switcher--tabs .gbpk-switcher__item.is-active:hover {
	background: var(--gbpk-green);
	color: var(--gbpk-gold);
}

/* ── Fixture picker (pick page) ───────────────────────────────────────────
   Same container as the leaderboard tabs, but laid out as a grid instead of
   a row. Seventeen fixtures never fit on one line, and the old sideways
   strip hid most of them; a grid wraps, so every game is on screen at once.

   auto-fill with 1fr columns is what makes the cards even — a flex row sizes
   each one to its opponent name, which is why they came out ragged. */

.gbpk-switcher--games {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 6px;
	padding: 6px;
	overflow: visible;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
	margin-bottom: 22px;
}

.gbpk-switcher--games .gbpk-switcher__item {
	min-width: 0;          /* lets a long name shrink instead of stretching the column */
	gap: 1px;
	padding: 9px 12px;
	border: none;
	border-radius: 8px;
	background: transparent;
}

.gbpk-switcher--games .gbpk-switcher__item:hover {
	background: rgba(32, 55, 49, .07);
	transform: none;
}

.gbpk-switcher--games .gbpk-switcher__item.is-active,
.gbpk-switcher--games .gbpk-switcher__item.is-active:hover {
	background: var(--gbpk-green);
}

/* Long opponent names truncate rather than widen their cell. */
.gbpk-switcher--games .gbpk-switcher__opp {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .88rem;
}
.gbpk-switcher--games .gbpk-switcher__round { font-size: .7rem; }
.gbpk-switcher--games .gbpk-switcher__state { font-size: .68rem; }

/* One item in the sheet: label above, state below it. */
.gbpk-sheet__item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gbpk-sheet__item-main small { font-size: .76rem; opacity: 1; color: var(--gbpk-muted); }
.gbpk-sheet__item.is-active .gbpk-sheet__item-main small { color: var(--gbpk-gold); }

/* Content swapped by AJAX dims briefly instead of flashing empty. */
.gbpk-page.is-loading { opacity: .55; pointer-events: none; transition: opacity .12s; }

/* ── Mobile filter sheet ─────────────────────────────────────────────────
   Thirteen tabs on a phone become a scroll strip where most options are
   invisible. Below 768px the strip is replaced by a trigger that opens a
   sheet listing every filter at once. */

.gbpk-filter-mobile { display: none; }

.gbpk-filter-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 13px 16px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 10px;
	color: var(--gbpk-green);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	min-height: 48px;
}

.gbpk-filter-trigger__label { flex: 1; text-align: left; }
.gbpk-filter-trigger[aria-expanded="true"] { border-color: var(--gbpk-gold); }

.gbpk-sheet {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: flex-end;
}
.gbpk-sheet[hidden] { display: none; }

.gbpk-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 3, .62);
	opacity: 0;
	transition: opacity .2s ease;
}
.gbpk-sheet.is-open .gbpk-sheet__backdrop { opacity: 1; }

.gbpk-sheet__panel {
	position: relative;
	width: 100%;
	max-height: 76vh;
	overflow-y: auto;
	padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	background: var(--gbpk-cream);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
	transform: translateY(100%);
	transition: transform .24s ease;
}
.gbpk-sheet.is-open .gbpk-sheet__panel { transform: translateY(0); }

.gbpk-sheet__handle {
	width: 40px;
	height: 4px;
	margin: 4px auto 14px;
	border-radius: 99px;
	background: rgba(32, 55, 49, .22);
}

.gbpk-sheet__title {
	margin: 0 0 12px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--gbpk-muted);
}

.gbpk-sheet__list { margin: 0; padding: 0; list-style: none; }

.gbpk-sheet__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px;
	margin-bottom: 6px;
	border-radius: 10px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	color: var(--gbpk-text);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	min-height: 48px;
}

.gbpk-sheet__item.is-active {
	background: var(--gbpk-green);
	border-color: var(--gbpk-green);
	color: var(--gbpk-gold);
}

@media (max-width: 767px) {
	.gbpk-filter-mobile { display: block; margin-bottom: 18px; }
	.gbpk-switcher--tabs,
	.gbpk-switcher--games { display: none; }
}

/* A sheet is a phone idiom; on a desktop the tab strip fits, so never show it. */
@media (min-width: 768px) {
	.gbpk-sheet { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.gbpk-sheet__panel, .gbpk-sheet__backdrop { transition: none; }
}

.gbpk-switcher__round {
	font-family: var(--gbpk-font-head);
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gbpk-muted);
}

.gbpk-switcher__opp {
	font-weight: 600;
	font-size: .92rem;
	color: var(--gbpk-text);
}

.gbpk-switcher__state {
	font-size: .72rem;
	font-weight: 600;
	color: var(--gbpk-muted);
}

.gbpk-switcher__item.is-active .gbpk-switcher__round,
.gbpk-switcher__item.is-active .gbpk-switcher__opp { color: #FFFFFF; }
.gbpk-switcher__item.is-active .gbpk-switcher__state { color: var(--gbpk-gold); }

/* ── Login gate ─────────────────────────────────────────────────────────── */

.gbpk-login-gate {
	background: var(--gbpk-cream);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
	padding: 26px;
	margin-bottom: 22px;
	text-align: center;
}

.gbpk-login-gate__title {
	font-family: var(--gbpk-font-head);
	font-size: 1.35rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--gbpk-green);
	margin: 0 0 8px;
}

.gbpk-login-gate__body {
	color: var(--gbpk-muted);
	font-size: .94rem;
	margin: 0 auto 18px;
	max-width: 480px;
	line-height: 1.6;
}

.gbpk-login-gate__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.gbpk-login-gate__icon {
	display: block;
	font-size: 2.2rem;
	margin-bottom: 10px;
}
.gbpk-login-gate__body strong { color: var(--gbpk-green); }

/* ── Login popup (shown when a logged-out fan tries to pick) ────────────── */

#gbpk-login-popup {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(2, 4, 3, .72);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

#gbpk-login-popup.is-visible { opacity: 1; visibility: visible; }

.gbpk-lpop {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 34px 28px 28px;
	background: #FFFFFF;
	border-radius: 14px;
	border-top: 4px solid #FFB612;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
	text-align: center;
	transform: translateY(10px);
	transition: transform .22s ease;
}
#gbpk-login-popup.is-visible .gbpk-lpop { transform: translateY(0); }

.gbpk-lpop__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: #3D3D3D;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
}
.gbpk-lpop__close:hover { background: #F0EEE9; }

.gbpk-lpop__icon { font-size: 2.4rem; margin-bottom: 10px; }

.gbpk-lpop__title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #203731;
	margin: 0 0 10px;
}

.gbpk-lpop__desc {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .94rem;
	line-height: 1.6;
	color: #3D3D3D;
	margin: 0 0 22px;
}

.gbpk-lpop__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.gbpk-lpop__actions .gbpk-btn { min-width: 160px; justify-content: center; }

@media (max-width: 480px) {
	.gbpk-lpop { padding: 30px 20px 22px; }
	.gbpk-lpop__actions { flex-direction: column; }
	.gbpk-lpop__actions .gbpk-btn { width: 100%; }
}

/* Logged-out fans see the questions but the controls read as unavailable.
   Signalled with a dashed border, not opacity — fading them would push the
   label text below readable contrast on cream. */
.gbpk-page[data-gbpk-guest] .gbpk-option,
.gbpk-page[data-gbpk-guest] .gbpk-number,
.gbpk-page[data-gbpk-guest] .gbpk-lock {
	cursor: pointer;
	border-style: dashed;
	border-color: rgba(32, 55, 49, .22);
	background: transparent;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.gbpk-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 24px;
	border-radius: 8px;
	border: 1.5px solid transparent;
	font-family: var(--gbpk-font-head);
	font-size: .92rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}

.gbpk-btn--primary {
	background: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}
.gbpk-btn--primary:hover { background: #FFC53D; color: var(--gbpk-green-dk); }

.gbpk-btn--ghost {
	background: transparent;
	border-color: var(--gbpk-green);
	color: var(--gbpk-green);
}
.gbpk-btn--ghost:hover { background: var(--gbpk-green); color: #FFFFFF; }

/* ── Progress ───────────────────────────────────────────────────────────── */

.gbpk-progress {
	position: sticky;
	/* Hlavička webu je tiež prilepená a leží nad touto kartou. S top: 0 sa
	   karta pri scrollovaní podsúvala pod ňu a bolo vidieť len jej spodok.
	   Premenné sú z témy (60 px mobil / 72 px desktop + admin lišta), takže
	   pri zmene výšky hlavičky sa to prispôsobí samo. */
	top: calc(var(--wp-admin-bar-offset, 0px) + var(--gbp-header-h, 72px) + 10px);
	z-index: 20;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 22px;
	box-shadow: 0 2px 12px rgba(7, 19, 13, .07);
}

.gbpk-progress__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.gbpk-progress__count {
	font-family: var(--gbpk-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gbpk-green);
}
.gbpk-progress__count strong { font-size: 1.35rem; }

.gbpk-progress__flags { display: flex; gap: 8px; flex-wrap: wrap; }

.gbpk-flag {
	padding: 4px 11px;
	border-radius: 999px;
	background: #EFEFEA;
	color: var(--gbpk-muted);
	font-size: .74rem;
	font-weight: 600;
	transition: background .2s, color .2s;
}
.gbpk-flag.is-done { background: var(--gbpk-green); color: var(--gbpk-gold); }

.gbpk-progress__bar {
	height: 7px;
	background: #EDEBE4;
	border-radius: 999px;
	overflow: hidden;
}

.gbpk-progress__fill {
	height: 100%;
	background: linear-gradient(to right, var(--gbpk-green), var(--gbpk-gold));
	border-radius: 999px;
	transition: width .3s ease;
}

.gbpk-progress__hint {
	margin: 8px 0 0;
	font-size: .8rem;
	color: var(--gbpk-muted);
}

/* ── Banner ─────────────────────────────────────────────────────────────── */

.gbpk-banner {
	padding: 14px 18px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 10px;
	margin-bottom: 22px;
	font-size: .92rem;
	color: var(--gbpk-muted);
	line-height: 1.6;
}
.gbpk-banner strong { color: var(--gbpk-green); }
.gbpk-banner--locked { border-left-color: var(--gbpk-err); }

/* ── Sections ───────────────────────────────────────────────────────────── */

/* ── Category sections (collapsible) ──────────────────────────────────────
   A ticket runs to 31 questions. Shown flat they are a wall you have to
   scroll to know what is left, so on the pick page each category is a drawer
   that states its own count.

   Everything here is keyed to details/summary on purpose. The season list
   reuses .gbpk-section and .gbpk-section__head for its plain (non-collapsing)
   headers, and a bare class selector would have turned those into buttons
   too. */

.gbpk-section { margin-bottom: 34px; }
details.gbpk-section { margin-bottom: 18px; }

.gbpk-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--gbpk-gold);
}

summary.gbpk-section__head {
	align-items: center;
	justify-content: flex-start;
	padding: 12px 14px;
	margin-bottom: 0;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-bottom: 2px solid var(--gbpk-gold);
	border-radius: 10px 10px 0 0;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background .16s;
}
summary.gbpk-section__head::-webkit-details-marker { display: none; }
summary.gbpk-section__head:hover { background: #FFFBF0; }
summary.gbpk-section__head:focus-visible { outline: 3px solid var(--gbpk-gold); outline-offset: 2px; }

/* Closed drawer: the heading is the whole block, so it gets all four corners. */
details.gbpk-section:not([open]) > summary.gbpk-section__head { border-radius: 10px; }

.gbpk-section__chevron {
	flex: 0 0 auto;
	display: flex;
	color: var(--gbpk-green);
	transition: transform .18s ease;
}
details.gbpk-section[open] .gbpk-section__chevron { transform: rotate(180deg); }

.gbpk-section__meta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* How many of this category are answered. Outlined while there is work left,
   filled once the category is done — readable at a glance down the page. */
.gbpk-section__tally {
	padding: 3px 10px;
	border: 2px solid var(--gbpk-green);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--gbpk-green);
	font-family: var(--gbpk-font-head);
	font-size: .85rem;
	font-weight: 700;
	white-space: nowrap;
}
.gbpk-section__tally strong { font-weight: 800; }
.gbpk-section__tally.is-done {
	background: var(--gbpk-green);
	border-color: var(--gbpk-green);
	color: var(--gbpk-gold);
}

.gbpk-section__body {
	padding: 16px 14px 4px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-top: none;
	border-radius: 0 0 10px 10px;
}

/* Inside a drawer the heading is already the label, so the title can sit at
   card size rather than page-section size. */
summary.gbpk-section__head .gbpk-section__title { font-size: 1.15rem; }

@media (max-width: 767px) {
	summary.gbpk-section__head { padding: 11px 12px; gap: 9px; }
	summary.gbpk-section__head .gbpk-section__title { font-size: 1rem; }
	.gbpk-section__meta { gap: 7px; }
	.gbpk-section__tally { font-size: .8rem; padding: 2px 8px; }
	.gbpk-section__body { padding: 13px 10px 4px; }
}

.gbpk-section__title {
	font-family: var(--gbpk-font-head);
	font-size: 1.45rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gbpk-green);
	margin: 0;
}

.gbpk-section__points {
	font-family: var(--gbpk-font-head);
	font-size: .86rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gbpk-muted);
	white-space: nowrap;
}

.gbpk-section__intro {
	font-size: .9rem;
	color: var(--gbpk-muted);
	margin: -6px 0 16px;
	line-height: 1.6;
}

.gbpk-section--risk .gbpk-section__head { border-bottom-color: var(--gbpk-green); }
.gbpk-section--tiebreaker .gbpk-section__head { border-bottom-color: var(--gbpk-border); }

.gbpk-questions { display: grid; gap: 14px; }

/* ── Question card ──────────────────────────────────────────────────────── */

.gbpk-card {
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 2px 8px rgba(7, 19, 13, .05);
	transition: border-color .2s, box-shadow .2s;
}

.gbpk-card:hover { box-shadow: 0 6px 20px rgba(7, 19, 13, .09); }

/* The Confidence Pick keeps its gold edge — it is the one genuinely special
   mechanic — but the card stays white so a page of questions does not turn
   yellow around it. */
.gbpk-card.is-confident {
	border-color: var(--gbpk-gold);
	border-width: 2px;
	background: var(--gbpk-card);
}

/* Flat cream rather than a gradient — the encyclopedia pages are printed
   surfaces, not glossy ones. */
.gbpk-card--risk {
	border-color: var(--gbpk-green);
	border-width: 2px;
	background: #FCFAF4;
}

/* The question is the entry heading: condensed headline face in team green,
   with a hairline gold rule under it. Same device as the section headers on
   the fixture list, so a page of questions reads as a set of records. */
.gbpk-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid rgba(255, 182, 18, .55);
}

.gbpk-card__question {
	font-family: var(--gbpk-font-head);
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--gbpk-green);
	margin: 0;
	line-height: 1.35;
}

/* The point value was cream-on-cream and all but invisible. It is a stamp on
   the record now — green field, gold figure. */
.gbpk-card__points {
	flex-shrink: 0;
	padding: 4px 11px;
	border-radius: 6px;
	background: var(--gbpk-green);
	color: var(--gbpk-gold);
	font-family: var(--gbpk-font-head);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gbpk-card__body {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ── Options ────────────────────────────────────────────────────────────── */

.gbpk-options {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
}

/* Answers are ruled boxes in team green — visibly clickable before you touch
   them, which the old hairline-on-cream buttons were not. */
.gbpk-option {
	padding: 10px 18px;
	border: 2px solid var(--gbpk-green);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--gbpk-green);
	font-family: var(--gbpk-font-head);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .16s, border-color .16s, color .16s;
	min-height: 44px; /* comfortable tap target */
}

.gbpk-option:hover:not(:disabled) {
	border-color: var(--gbpk-gold);
	background: #FFFBF0;
}

/* The chosen answer fills solid, with a gold ring so it still reads as picked
   on a page where several cards are answered. */
.gbpk-option.is-selected {
	background: var(--gbpk-green);
	border-color: var(--gbpk-green);
	color: #FFFFFF;
	box-shadow: 0 0 0 2px var(--gbpk-gold);
}
.gbpk-option.is-selected:hover:not(:disabled) {
	background: var(--gbpk-green-dk);
	border-color: var(--gbpk-green-dk);
}

/* A locked game greys the controls out. Kept as a colour change rather than
   opacity, which would drag the label under the contrast floor. */
.gbpk-option:disabled {
	cursor: not-allowed;
	border-color: #C6CDC9;
	color: #5C6660;
	background: #F4F4F2;
}
.gbpk-option.is-selected:disabled {
	background: #5C6660;
	border-color: #5C6660;
	color: #FFFFFF;
	box-shadow: none;
}

.gbpk-number {
	width: 150px;
	padding: 10px 14px;
	border: 2px solid var(--gbpk-green);
	border-radius: 6px;
	background: #FFFFFF;
	font-family: var(--gbpk-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gbpk-green);
	min-height: 44px;
}
.gbpk-number::placeholder { color: #7A837E; font-weight: 600; }

.gbpk-number:focus {
	outline: none;
	border-color: var(--gbpk-gold);
	background: #FFFBF0;
	box-shadow: 0 0 0 3px rgba(255, 182, 18, .30);
}

.gbpk-number:disabled {
	border-color: #C6CDC9;
	color: #5C6660;
	background: #F4F4F2;
}

/* ── Save status ────────────────────────────────────────────────────────── */

.gbpk-status {
	font-size: .8rem;
	font-weight: 600;
	min-height: 1em;
	transition: opacity .2s;
}
.gbpk-status.is-saving { color: var(--gbpk-muted); }
.gbpk-status.is-saved  { color: var(--gbpk-ok); }
.gbpk-status.is-error  { color: var(--gbpk-err); }

/* ── Confidence ─────────────────────────────────────────────────────────── */

.gbpk-card__confidence {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--gbpk-border);
}

/* Confidence Pick doubles a question's points, so the control should look
   like something worth spending — a gold-ruled stamp, not a grey chip. */
.gbpk-lock {
	padding: 6px 14px;
	border: 2px solid var(--gbpk-gold);
	border-radius: 6px;
	background: transparent;
	color: var(--gbpk-green);
	font-family: var(--gbpk-font-head);
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	transition: background .16s, color .16s, border-color .16s;
}

.gbpk-lock:hover:not(:disabled) {
	background: #FFFBF0;
	color: var(--gbpk-green-dk);
}

.gbpk-lock.is-active {
	background: var(--gbpk-gold);
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}

.gbpk-lock:disabled {
	cursor: not-allowed;
	border-color: #C6CDC9;
	color: #5C6660;
}
.gbpk-lock.is-active:disabled { background: #D8DCD9; border-color: #C6CDC9; color: #3D3D3D; }

.gbpk-card__confidence-note {
	font-size: .8rem;
	color: var(--gbpk-muted);
}

/* ── Community distribution ─────────────────────────────────────────────── */

.gbpk-community {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--gbpk-border);
}

.gbpk-community__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--gbpk-font-head);
	font-size: .84rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gbpk-muted);
	margin: 0 0 10px;
}

.gbpk-community__count { font-weight: 600; letter-spacing: 0; }

.gbpk-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-size: .86rem;
}

.gbpk-bar__label {
	flex: 0 0 88px;
	color: var(--gbpk-muted);
	font-weight: 600;
}

.gbpk-bar__track {
	flex: 1;
	height: 9px;
	background: #EDEBE4;
	border-radius: 999px;
	overflow: hidden;
}

.gbpk-bar__fill {
	display: block;
	height: 100%;
	background: var(--gbpk-muted);
	border-radius: 999px;
}

.gbpk-bar__value {
	flex: 0 0 58px;
	text-align: right;
	font-weight: 700;
	color: var(--gbpk-muted);
	font-variant-numeric: tabular-nums;
}

/* The viewer's own pick is highlighted so it is findable at a glance. */
.gbpk-bar.is-mine .gbpk-bar__fill  { background: var(--gbpk-gold); }
.gbpk-bar.is-mine .gbpk-bar__label,
.gbpk-bar.is-mine .gbpk-bar__value { color: var(--gbpk-green); font-weight: 800; }

.gbpk-community__label {
	display: inline-block;
	margin: 8px 0 0;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.gbpk-community__label--consensus  { background: #E4EFE8; color: var(--gbpk-ok); }
.gbpk-community__label--contrarian { background: #FBE9D8; color: #A05A1F; }

.gbpk-numeric-summary {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	font-size: .86rem;
	color: var(--gbpk-muted);
}
.gbpk-numeric-summary strong { color: var(--gbpk-green); font-size: 1.05rem; }
.gbpk-numeric-summary small { font-size: .78rem; }
/* Own pick last and in gold — the one figure a reader looks for first. */
.gbpk-numeric-summary .is-mine { margin-left: auto; }
.gbpk-numeric-summary .is-mine strong { color: var(--gbpk-gold); }

@media (max-width: 767px) {
	.gbpk-numeric-summary { gap: 10px 14px; font-size: .82rem; }
	/* Five figures do not fit one phone line — let it wrap instead of
	   pushing "tvoj tip" off on its own row every time. */
	.gbpk-numeric-summary .is-mine { margin-left: 0; }
}

/* ── Your result after settlement ───────────────────────────────────────── */

.gbpk-result {
	background: var(--gbpk-green);
	border-radius: 14px;
	padding: 28px 26px 24px;
	margin-bottom: 24px;
	color: #FFFFFF;
}

.gbpk-result__headline {
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.gbpk-result__eyebrow {
	font-family: var(--gbpk-font-head);
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--gbpk-gold);
	margin: 0 0 10px;
}

.gbpk-result__score {
	font-family: var(--gbpk-font-head);
	margin: 0 0 12px;
	line-height: 1;
}
.gbpk-result__score strong {
	font-size: 3.4rem;
	font-weight: 800;
	color: var(--gbpk-gold);
}
.gbpk-result__score span {
	font-size: 1.2rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .92);
	margin-left: 6px;
}

.gbpk-result__ranks {
	display: flex;
	justify-content: center;
	gap: 22px;
	flex-wrap: wrap;
	margin: 0;
	font-size: .9rem;
	color: rgba(255, 255, 255, .90);
}
.gbpk-result__ranks strong { color: var(--gbpk-gold); }
.gbpk-result__ranks small  { color: rgba(255, 255, 255, .90); }

.gbpk-result__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

.gbpk-result__table th {
	text-align: left;
	padding: 8px 10px;
	font-family: var(--gbpk-font-head);
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: rgba(255, 255, 255, .90);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.gbpk-result__table td {
	padding: 9px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	color: rgba(255, 255, 255, .92);
}

.gbpk-result__table tbody tr:last-child td { border-bottom: none; }
.gbpk-result__table tbody tr.is-hit td     { color: var(--gbpk-gold); }

.gbpk-result__max { color: rgba(255, 255, 255, .90); width: 70px; }

.gbpk-result__table tfoot td {
	padding-top: 12px;
	border-top: 2px solid var(--gbpk-gold);
	font-family: var(--gbpk-font-head);
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #FFFFFF;
}
.gbpk-result__table tfoot td strong { color: var(--gbpk-gold); }

.gbpk-result__flag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
}

.gbpk-result__tiebreak {
	margin: 14px 0 0;
	font-size: .86rem;
	color: rgba(255, 255, 255, .90);
	text-align: center;
}
.gbpk-result__tiebreak strong { color: var(--gbpk-gold); }

.gbpk-result__streaks {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.gbpk-streak {
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(255, 182, 18, .16);
	color: var(--gbpk-gold);
	font-size: .8rem;
	font-weight: 600;
}
.gbpk-streak strong { font-size: .95rem; }

/* ── Per-question outcome ───────────────────────────────────────────────── */

.gbpk-outcome {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--gbpk-cream);
	border-left: 4px solid var(--gbpk-border);
	font-size: .88rem;
}

.gbpk-outcome--correct   { border-left-color: var(--gbpk-ok);   background: #F2FAF5; }
.gbpk-outcome--partial   { border-left-color: var(--gbpk-gold); background: var(--gbpk-card); }
.gbpk-outcome--incorrect { border-left-color: var(--gbpk-err);  background: #FDF3F4; }
.gbpk-outcome--void      { border-left-color: #8B8B8B; }
.gbpk-outcome--blank     { border-left-color: #C9C9C9; }

.gbpk-outcome__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.gbpk-outcome__label {
	color: var(--gbpk-muted);
	font-weight: 600;
	flex: 0 0 auto;
}

.gbpk-outcome__value {
	color: var(--gbpk-text);
	font-weight: 600;
	text-align: right;
}
.gbpk-outcome__value small { color: var(--gbpk-muted); font-weight: 500; }

.gbpk-outcome__row--score {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid rgba(32, 55, 49, .09);
}

.gbpk-outcome__mark {
	font-family: var(--gbpk-font-head);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gbpk-muted);
}

.gbpk-outcome--correct .gbpk-outcome__mark   { color: var(--gbpk-ok); }
.gbpk-outcome--incorrect .gbpk-outcome__mark { color: var(--gbpk-err); }

.gbpk-outcome__points {
	font-family: var(--gbpk-font-head);
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--gbpk-green);
	text-align: right;
}
.gbpk-outcome__points small {
	display: block;
	font-family: var(--gbpk-font-body);
	font-size: .74rem;
	font-weight: 600;
	color: var(--gbpk-muted);
}

/* ── Own streak progress ────────────────────────────────────────────────── */

/* ── Streak panel ─────────────────────────────────────────────────────────
   Four cards that used to be four grey boxes with a heading each: nothing
   said what a streak was for, whether it was running, or how close the next
   reward was. Now each card carries a glyph, one line of plain purpose, the
   count, a bar that refills between milestones, and the points at stake.

   Colour carries the state, and only three states exist:
     idle   — parchment, nothing running
     running— green spine and green figures
     close  — gold, one game from a reward
   ─────────────────────────────────────────────────────────────────────── */

.gbpk-streaks {
	padding: 18px 20px 16px;
	margin-bottom: 22px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
}

.gbpk-streaks__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 2px solid var(--gbpk-gold);
}

.gbpk-streaks__title {
	margin: 0;
	font-family: var(--gbpk-font-head);
	font-size: 1.25rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gbpk-green);
}

/* Season total earned from streaks — a stamp, so it reads as a score. */
.gbpk-streaks__earned {
	padding: 4px 12px;
	border-radius: 6px;
	background: var(--gbpk-green);
	color: #FFFFFF;
	font-family: var(--gbpk-font-head);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
}
.gbpk-streaks__earned strong { color: var(--gbpk-gold); font-size: 1rem; }
.gbpk-streaks__earned.is-zero { background: #E7EBE8; color: #3F4C45; }
.gbpk-streaks__earned.is-zero strong { color: var(--gbpk-green); }

.gbpk-streaks__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

/* ── One streak ─────────────────────────────────────────────────────────── */

/* Every card wears the team: a Packers-green header band with a gold rule
   under it, white body below. The panel used to sit on parchment, which put
   four beige blocks on a cream page and read as one yellow smear — the colour
   said nothing and the whole widget looked switched off. */
.gbpk-streak-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 0 14px 14px;
	background: #FFFFFF;
	border: 1px solid var(--gbpk-border);
	border-radius: 10px;
	overflow: hidden;
}

.gbpk-streak-card__top {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;   /* keeps the four bands level when one title wraps */
	margin: 0 -14px 9px;
	padding: 8px 12px;
	background: var(--gbpk-green);
	border-bottom: 2px solid var(--gbpk-gold);
}

.gbpk-streak-card__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 182, 18, .45);
	color: var(--gbpk-gold);
}
/* An SVG has no baseline to drift on — the box is the glyph, so it centres
   exactly, at the same size, on every platform. */
.gbpk-streak-card__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* Wraps rather than truncates. "Kompletný tiket" is twice the length of
   "Účasť", and cutting the longer ones with an ellipsis is what made the row
   of headings look ragged and half-finished. */
.gbpk-streak-card__label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	/* Same box height as the icon and centred inside it, so the two share one
	   optical centre line however the title wraps. Aligning the raw text against
	   the tile left it sitting above the glyph. */
	display: flex;
	align-items: center;
	min-height: 28px;
	font-family: var(--gbpk-font-head);
	font-size: .88rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .025em;
	/* Tight on purpose. Barlow Condensed carries a tall ascent, so a roomy
	   line-height pushes all-caps text to the top of its own line box — the
	   box was centred against the icon, the letters inside it were not. */
	line-height: 1;
	color: #FFFFFF;
	hyphens: none;
}

/* Points at stake for the next milestone — gold on the green band. */
.gbpk-streak-card__reward {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: 22px;
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--gbpk-gold);
	border: 1.5px solid var(--gbpk-gold);
	color: var(--gbpk-green-dk);
	font-family: var(--gbpk-font-head);
	font-size: .78rem;
	font-weight: 800;
	white-space: nowrap;
}

.gbpk-streak-card__hint {
	margin: 0;
	font-size: .74rem;
	line-height: 1.4;
	color: var(--gbpk-muted);
}

.gbpk-streak-card__count {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 2px 0 0;
	font-size: .8rem;
	color: var(--gbpk-muted);
}
.gbpk-streak-card__count strong {
	font-family: var(--gbpk-font-head);
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
	color: #9AA5A0;
}

/* Progress to the next milestone. Refills between steps rather than filling
   once and staying full for the rest of the season. */
.gbpk-streak-card__bar {
	position: relative;
	height: 18px;
	border-radius: 4px;
	background: #EEF1EF;
	border: 1px solid rgba(32, 55, 49, .16);
	overflow: hidden;
}
.gbpk-streak-card__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: rgba(32, 55, 49, .35);
	transition: width .3s ease;
}
.gbpk-streak-card__scale {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gbpk-font-head);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--gbpk-green);
}

.gbpk-streak-card__next {
	margin: 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--gbpk-muted);
}
.gbpk-streak-card__next strong { color: var(--gbpk-green); }

.gbpk-streak-card__best {
	margin: 0;
	padding-top: 6px;
	border-top: 1px dashed rgba(32, 55, 49, .18);
	font-size: .72rem;
	color: var(--gbpk-muted);
}
.gbpk-streak-card__best strong { color: var(--gbpk-green); }

/* ── Running ────────────────────────────────────────────────────────────── */

/* Running: the figure and the bar go team green, the band stays as it is. */
.gbpk-streak-card.is-running { border-color: rgba(32, 55, 49, .28); }
.gbpk-streak-card.is-running .gbpk-streak-card__icon {
	background: var(--gbpk-gold);
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}
.gbpk-streak-card.is-close .gbpk-streak-card__icon,
.gbpk-streak-card.is-maxed .gbpk-streak-card__icon { color: var(--gbpk-green-dk); }
.gbpk-streak-card.is-running .gbpk-streak-card__count strong { color: var(--gbpk-green); }
.gbpk-streak-card.is-running .gbpk-streak-card__fill { background: var(--gbpk-green); }

/* ── One game away ──────────────────────────────────────────────────────── */

/* One game away: the band flips to gold, so the card that needs attention is
   the one that looks different from the other three. */
.gbpk-streak-card.is-close {
	background: #FFFBF0;
	border-color: var(--gbpk-gold);
	box-shadow: 0 3px 14px rgba(255, 182, 18, .28);
}
.gbpk-streak-card.is-close .gbpk-streak-card__top {
	background: var(--gbpk-gold);
	border-bottom-color: var(--gbpk-green);
}
.gbpk-streak-card.is-close .gbpk-streak-card__label { color: var(--gbpk-green-dk); }
.gbpk-streak-card.is-close .gbpk-streak-card__icon {
	background: rgba(7, 19, 13, .12);
	border-color: var(--gbpk-green-dk);
	color: var(--gbpk-green-dk);
}
.gbpk-streak-card.is-close .gbpk-streak-card__reward {
	background: var(--gbpk-green);
	border-color: var(--gbpk-green);
	color: var(--gbpk-gold);
}
.gbpk-streak-card.is-close .gbpk-streak-card__count strong { color: var(--gbpk-green); }
.gbpk-streak-card.is-close .gbpk-streak-card__fill { background: var(--gbpk-gold); }
.gbpk-streak-card.is-close .gbpk-streak-card__scale { color: var(--gbpk-green-dk); }
.gbpk-streak-card.is-close .gbpk-streak-card__next strong { color: #7A4E00; }

/* ── Ladder finished ────────────────────────────────────────────────────── */

.gbpk-streak-card.is-maxed {
	background: var(--gbpk-green);
	border-color: var(--gbpk-green);
}
.gbpk-streak-card.is-maxed .gbpk-streak-card__top {
	background: var(--gbpk-green-dk);
	border-bottom-color: var(--gbpk-gold);
}
.gbpk-streak-card.is-maxed .gbpk-streak-card__icon {
	background: var(--gbpk-gold);
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}
.gbpk-streak-card.is-maxed .gbpk-streak-card__label,
.gbpk-streak-card.is-maxed .gbpk-streak-card__count strong { color: var(--gbpk-gold); }
.gbpk-streak-card.is-maxed .gbpk-streak-card__hint,
.gbpk-streak-card.is-maxed .gbpk-streak-card__count,
.gbpk-streak-card.is-maxed .gbpk-streak-card__next,
.gbpk-streak-card.is-maxed .gbpk-streak-card__best { color: var(--gbpk-cream); }
.gbpk-streak-card.is-maxed .gbpk-streak-card__next strong,
.gbpk-streak-card.is-maxed .gbpk-streak-card__best strong { color: var(--gbpk-gold); }
.gbpk-streak-card.is-maxed .gbpk-streak-card__fill { background: var(--gbpk-gold); }
.gbpk-streak-card.is-maxed .gbpk-streak-card__bar { border-color: rgba(255, 182, 18, .5); background: rgba(0,0,0,.25); }
.gbpk-streak-card.is-maxed .gbpk-streak-card__reward {
	background: var(--gbpk-gold);
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}
.gbpk-streak-card.is-maxed .gbpk-streak-card__best { border-top-color: rgba(255, 182, 18, .35); }

.gbpk-streaks__note {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--gbpk-border);
	font-size: .8rem;
	line-height: 1.55;
	color: var(--gbpk-muted);
}
.gbpk-streaks__note strong { color: var(--gbpk-green); }

@media (max-width: 900px) {
	.gbpk-streaks__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	.gbpk-streaks { padding: 15px 16px 14px; }
	.gbpk-streaks__grid { gap: 8px; }
	.gbpk-streak-card { padding: 11px 12px 12px; }
	.gbpk-streak-card__label { font-size: .76rem; }
	.gbpk-streak-card__count strong { font-size: 1.4rem; }
	.gbpk-streak-card__hint { font-size: .71rem; }
}

@media (max-width: 460px) {
	.gbpk-streaks__grid { grid-template-columns: 1fr; }
}

/* ── "How it works" prompt ──────────────────────────────────────────────── */

/* ── "Si tu prvýkrát?" badge ──────────────────────────────────────────────
   A compact pill at the top of the page, not a full-width card. The question
   is one line long; giving it the footprint of a section made it read as
   something you had to deal with before you could get to the fixtures.
   Gold-ringed so a newcomer still finds it at a glance. */

.gbpk-howto-row {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 16px;
}

.gbpk-howto {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	width: auto;
	padding: 7px 15px;
	background: var(--gbpk-card);
	border: 2px solid var(--gbpk-gold);
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: background .18s, border-color .18s;
}
.gbpk-howto:hover { background: #FFFBF0; }
.gbpk-howto:focus-visible { outline: 3px solid var(--gbpk-gold); outline-offset: 2px; }

.gbpk-howto__icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1; }

.gbpk-howto__label {
	font-size: .88rem;
	font-weight: 600;
	color: var(--gbpk-text);
	white-space: nowrap;
}

.gbpk-howto__cta {
	flex-shrink: 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gbpk-green);
	white-space: nowrap;
}

@media (max-width: 767px) {
	/* Full width on a phone — a right-floated pill next to nothing else
	   reads as a stray button. */
	.gbpk-howto-row { justify-content: stretch; }
	.gbpk-howto { width: 100%; justify-content: center; padding: 9px 14px; }
}

.gbpk-page__footer-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Rules modal ────────────────────────────────────────────────────────── */

.gbpk-rules {
	position: fixed;
	inset: 0;
	/* Above every other overlay on the site. The Quick News comment modal is
	   rendered into the footer of every page at z-index 99990, and the rules
	   panel used to open underneath it — the click worked, the modal opened,
	   and the visitor saw nothing. A dialog opened by a deliberate click has to
	   be the top layer. */
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.gbpk-rules[hidden] { display: none; }

.gbpk-rules__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 3, .70);
	opacity: 0;
	transition: opacity .2s ease;
}
.gbpk-rules.is-open .gbpk-rules__backdrop { opacity: 1; }

.gbpk-rules__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 620px;
	max-height: 88vh;
	background: var(--gbpk-cream);
	border-radius: 14px;
	border-top: 4px solid var(--gbpk-gold);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .40);
	transform: translateY(12px);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}
.gbpk-rules.is-open .gbpk-rules__panel { transform: translateY(0); opacity: 1; }

.gbpk-rules__close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: var(--gbpk-muted);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
}
.gbpk-rules__close:hover { background: rgba(32, 55, 49, .08); color: var(--gbpk-green); }

.gbpk-rules__head {
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--gbpk-border);
}

.gbpk-rules__eyebrow {
	display: block;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--gbpk-muted);
	margin-bottom: 4px;
}

.gbpk-rules__title {
	margin: 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.7rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--gbpk-green);
}

/* The panel scrolls, not the page behind it. */
.gbpk-rules__body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

.gbpk-rules__block { margin-bottom: 24px; }
.gbpk-rules__block:last-child { margin-bottom: 0; }

.gbpk-rules__block--highlight {
	padding: 16px 18px;
	background: var(--gbpk-card);
	border-left: 4px solid var(--gbpk-gold);
	border-radius: 0 10px 10px 0;
}

.gbpk-rules__h {
	margin: 0 0 8px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.08rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gbpk-green);
}

.gbpk-rules__body p {
	margin: 0 0 10px;
	font-size: .94rem;
	line-height: 1.65;
	color: var(--gbpk-muted);
}
.gbpk-rules__body p:last-child { margin-bottom: 0; }
.gbpk-rules__body strong { color: var(--gbpk-green); }

.gbpk-rules__lead { margin-bottom: 10px !important; }

.gbpk-rules__note {
	font-size: .84rem !important;
	color: var(--gbpk-muted);
	opacity: .95;
}

.gbpk-rules__steps {
	margin: 0;
	padding-left: 22px;
	counter-reset: gbpk-step;
}
.gbpk-rules__steps li {
	margin-bottom: 9px;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--gbpk-muted);
}
.gbpk-rules__steps li::marker { color: var(--gbpk-gold); font-weight: 700; }

.gbpk-rules__list { margin: 0; padding-left: 20px; }
.gbpk-rules__list li {
	margin-bottom: 7px;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--gbpk-muted);
}
.gbpk-rules__list li::marker { color: var(--gbpk-gold); }

.gbpk-rules__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}
.gbpk-rules__table td {
	padding: 8px 6px;
	border-bottom: 1px solid var(--gbpk-border);
	color: var(--gbpk-muted);
}
.gbpk-rules__num { text-align: right; white-space: nowrap; }
.gbpk-rules__num strong { color: var(--gbpk-green); }

.gbpk-rules__bonus td { color: #8A5A00; }
.gbpk-rules__bonus .gbpk-rules__num strong { color: #8A5A00; }

.gbpk-rules__table tfoot td {
	padding-top: 11px;
	border-top: 2px solid var(--gbpk-green);
	border-bottom: none;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--gbpk-green);
}

.gbpk-rules__foot {
	padding: 16px 24px calc(18px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--gbpk-border);
	text-align: center;
}

@media (max-width: 767px) {
	.gbpk-rules { padding: 0; align-items: flex-end; }
	.gbpk-rules__panel {
		max-width: none;
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
	}
	.gbpk-rules__head, .gbpk-rules__body, .gbpk-rules__foot { padding-inline: 16px; }
	.gbpk-rules__foot .gbpk-btn { width: 100%; justify-content: center; }

	.gbpk-howto { flex-wrap: wrap; gap: 10px; }
	.gbpk-howto__cta { flex-basis: 100%; }
	.gbpk-page__footer-actions { width: 100%; }
	.gbpk-page__footer-actions .gbpk-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.gbpk-rules__panel, .gbpk-rules__backdrop { transition: none; }
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.gbpk-empty-state {
	padding: 48px 28px;
	text-align: center;
	background: var(--gbpk-card);
	border: 1px dashed var(--gbpk-border);
	border-radius: 12px;
}

.gbpk-empty-state__title {
	font-family: var(--gbpk-font-head);
	font-size: 1.3rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--gbpk-green);
	margin: 0 0 8px;
}

.gbpk-empty-state__body {
	color: var(--gbpk-muted);
	margin: 0 auto;
	max-width: 460px;
	line-height: 1.6;
}

/* ── Leaderboard ────────────────────────────────────────────────────────── */

/* ── Season picker ──────────────────────────────────────────────────────── */

.gbpk-seasons {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.gbpk-seasons__label {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--gbpk-muted);
	margin-right: 4px;
}

.gbpk-seasons__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1.5px solid var(--gbpk-border);
	border-radius: 999px;
	background: var(--gbpk-card);
	color: var(--gbpk-muted);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: border-color .18s, background .18s, color .18s;
}

.gbpk-seasons__item:hover {
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green);
}

.gbpk-seasons__item.is-active,
.gbpk-seasons__item.is-active:hover {
	background: var(--gbpk-gold);
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}

.gbpk-seasons__badge {
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(32, 55, 49, .12);
	font-size: .66rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.gbpk-seasons__item.is-active .gbpk-seasons__badge {
	background: rgba(7, 19, 13, .18);
}

.gbpk-lb-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-bottom: 22px;
}

.gbpk-lb-stat {
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 10px;
	padding: 16px 18px;
	text-align: center;
}

.gbpk-lb-stat__label {
	display: block;
	font-family: var(--gbpk-font-head);
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--gbpk-muted);
	margin-bottom: 6px;
}

.gbpk-lb-stat__value {
	display: block;
	font-family: var(--gbpk-font-head);
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--gbpk-green);
	line-height: 1.1;
}

.gbpk-lb-gamepick {
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 20px;
}

.gbpk-lb-gamepick select {
	padding: 8px 12px;
	border: 1.5px solid var(--gbpk-border);
	border-radius: 8px;
	background: var(--gbpk-cream);
	font-family: var(--gbpk-font-body);
	font-size: .92rem;
	color: var(--gbpk-text);
	min-height: 42px;
}

.gbpk-lb-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
	overflow: hidden;
}

.gbpk-lb-table th {
	text-align: left;
	padding: 12px 14px;
	background: var(--gbpk-cream);
	font-family: var(--gbpk-font-head);
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gbpk-muted);
	border-bottom: 2px solid var(--gbpk-border);
	white-space: nowrap;
}

.gbpk-lb-table td {
	padding: 13px 14px;
	border-bottom: 1px solid #F2F0EA;
	font-size: .92rem;
	color: var(--gbpk-text);
}

.gbpk-lb-table tr:last-child td { border-bottom: none; }

.gbpk-lb-rank {
	font-family: var(--gbpk-font-head);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--gbpk-muted);
	width: 58px;
}

.gbpk-lb-name { font-weight: 600; }

/* Player cell: picture + name on one baseline, the same face the fan map
   shows. The cell keeps its own min-width so the column does not jump
   between pages when one name is much longer than the rest. */
.gbpk-lb-player {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.gbpk-lb-avatar {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--gbpk-cream);
	border: 2px solid var(--gbpk-border);
}

/* Fallback initial for a row whose avatar URL is empty — every row keeps the
   same silhouette, so names stay aligned down the column. */
.gbpk-lb-avatar--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gbpk-font-head);
	font-size: .85rem;
	font-weight: 800;
	color: var(--gbpk-muted);
	line-height: 1;
}

.gbpk-lb-player__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Podium and "this is me" read from the picture, not just the number. */
.gbpk-lb-top .gbpk-lb-avatar    { border-color: var(--gbpk-gold); }
.gbpk-lb-row--me .gbpk-lb-avatar { border-color: var(--gbpk-green); }

.gbpk-lb-metric {
	font-family: var(--gbpk-font-head);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--gbpk-green);
	white-space: nowrap;
}

.gbpk-lb-top .gbpk-lb-rank { color: var(--gbpk-gold); }

.gbpk-lb-row--me {
	background: var(--gbpk-cream);
	box-shadow: inset 3px 0 0 var(--gbpk-green);
}
.gbpk-lb-row--me .gbpk-lb-name { color: var(--gbpk-green); font-weight: 800; }

/* Streak reward shown beside the base points, so the season total is
   legible as "what I scored" plus "what the streak added". */
.gbpk-lb-streakbonus {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(255, 182, 18, .22);
	color: #7A4E00;
	font-size: .76rem;
	font-weight: 700;
	white-space: nowrap;
}

/* V pruhu „Tvoja pozícia“ je pozadie tmavozelené, takže tmavohnedý text
   z tabuľky tam prakticky nebolo vidieť. Na tmavom je zlatá akcent — tu
   teda svieti zlatý text a odznak dostane tenký zlatý okraj, aby sa
   oddelil od pruhu. */
.gbpk-me .gbpk-lb-streakbonus {
	background: rgba(255, 182, 18, .16);
	box-shadow: inset 0 0 0 1px rgba(255, 182, 18, .55);
	color: var(--gbpk-gold);
}

.gbpk-myseason__item--streak strong { color: var(--gbpk-gold); }

.gbpk-result__streakrow td {
	padding-top: 10px;
	border-top: 1px dashed rgba(255, 182, 18, .45) !important;
	color: var(--gbpk-gold) !important;
	font-size: .95rem;
}
.gbpk-result__streakrow strong { color: var(--gbpk-gold); }
.gbpk-result__streakrow .gbpk-result__max {
	font-family: 'Inter', sans-serif;
	font-size: .74rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.gbpk-lb-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
	font-size: .88rem;
	color: var(--gbpk-muted);
}

/* ── Page footer ────────────────────────────────────────────────────────── */

.gbpk-page__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--gbpk-border);
}

.gbpk-page__footer-note {
	margin: 0;
	font-size: .86rem;
	color: var(--gbpk-muted);
	line-height: 1.6;
	max-width: 560px;
}
.gbpk-page__footer-note strong { color: var(--gbpk-green); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.gbpk-hero { padding: 30px 18px 26px; border-radius: 0; }
	.gbpk-hero__matchup { gap: 16px; }
	.gbpk-hero__team-name { font-size: 1.2rem; }

	.gbpk-card { padding: 15px 16px; }
	.gbpk-card__head { flex-direction: column; gap: 8px; }
	.gbpk-card__points { align-self: flex-start; }

	.gbpk-options { width: 100%; }
	.gbpk-option { flex: 1 1 calc(50% - 4px); text-align: center; }
	.gbpk-number { width: 100%; }

	.gbpk-section__title { font-size: 1.2rem; }
	.gbpk-bar__label { flex-basis: 68px; font-size: .8rem; }
	.gbpk-bar__value { flex-basis: 48px; font-size: .8rem; }

	/* A wide standings table has to scroll on its own, not the page. */
	.gbpk-lb-table { display: block; overflow-x: auto; white-space: nowrap; }

	/* Rank and player stay pinned while the numbers scroll past, so you never
	   lose track of whose row you are reading. Both need an opaque background
	   or the scrolling columns show through them. */
	.gbpk-lb-table th:first-child,
	.gbpk-lb-table td.gbpk-lb-rank {
		position: sticky;
		left: 0;
		z-index: 2;
		background: var(--gbpk-card);
	}
	.gbpk-lb-table th:nth-child(2),
	.gbpk-lb-table td.gbpk-lb-name {
		position: sticky;
		/* Must equal the rank column's width exactly, or the two sticky cells
		   leave a gap that the scrolling columns show through. */
		left: var(--gbpk-lb-rank-w);
		z-index: 2;
		background: var(--gbpk-card);
		box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .18);
	}
	.gbpk-lb-table th:first-child,
	.gbpk-lb-table th:nth-child(2) { background: var(--gbpk-cream); z-index: 3; }

	/* The highlight colours have to be repeated here: the sticky cells paint
	   their own background, which would otherwise cover the row tint. */
	.gbpk-lb-row--me td.gbpk-lb-rank,
	.gbpk-lb-row--me td.gbpk-lb-name { background: var(--gbpk-cream); }

	.gbpk-lb-table { --gbpk-lb-rank-w: 44px; }
	.gbpk-lb-table th:first-child,
	.gbpk-lb-rank {
		box-sizing: border-box;
		width: var(--gbpk-lb-rank-w);
		min-width: var(--gbpk-lb-rank-w);
		max-width: var(--gbpk-lb-rank-w);
		padding-left: 10px;
		padding-right: 4px;
	}
	.gbpk-lb-table td.gbpk-lb-name { padding-left: 10px; }

	.gbpk-lb-avatar { width: 30px; height: 30px; border-width: 2px; }
	.gbpk-lb-player { gap: 8px; }
	.gbpk-lb-player__name { max-width: 42vw; }

	.gbpk-page__footer { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.gbpk-page *,
	.gbpk-page *::before,
	.gbpk-page *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Admin preview bar ────────────────────────────────────────────────────
   Shown only to whoever is previewing a fixture before it goes live. It has
   to be impossible to mistake for part of the fan page, hence the reversed
   colours and the plain "Náhľad" tag. */

.gbpk-preview-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--gbpk-green);
	border: 2px solid var(--gbpk-gold);
	border-radius: 10px;
	color: var(--gbpk-cream);
	font-size: .9rem;
	line-height: 1.5;
}

.gbpk-preview-bar__tag {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 5px;
	background: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
	font-family: var(--gbpk-font-head);
	font-size: .78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.gbpk-preview-bar__text { flex: 1 1 260px; }
.gbpk-preview-bar__text strong { color: #FFFFFF; }

.gbpk-preview-bar__edit {
	flex: 0 0 auto;
	color: var(--gbpk-gold);
	font-family: var(--gbpk-font-head);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.gbpk-preview-bar__edit:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.gbpk-preview-bar { gap: 8px; padding: 10px 12px; }
	.gbpk-preview-bar__edit { flex-basis: 100%; }
}

/* ── Confidence Pick reminder ─────────────────────────────────────────────
   Sits above the questions and stays there whichever way it reads, so it can
   be checked as well as noticed. Gold while it is missing — it doubles a
   question and costs nothing, so forgetting it is pure loss. */

.gbpk-confbar {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: #FFFBF0;
	border: 2px solid var(--gbpk-gold);
	border-radius: 10px;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--gbpk-text);
}

.gbpk-confbar__mark {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
	font-size: .95rem;
	line-height: 26px;
}

.gbpk-confbar__text { display: flex; flex-direction: column; gap: 2px; }
.gbpk-confbar__text strong { color: var(--gbpk-green); }

/* Chosen: green and quiet — confirmation, not a prompt. */
.gbpk-confbar.is-set {
	background: #F2FAF5;
	border-color: var(--gbpk-green);
}
.gbpk-confbar.is-set .gbpk-confbar__mark {
	background: var(--gbpk-green);
	color: var(--gbpk-gold);
}

/* ── Save bar ─────────────────────────────────────────────────────────────
   Picks save themselves, so this is a status line first and a button second:
   it says what is actually stored, and gives the fan something to press when
   the answer is "not everything". */

.gbpk-savebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 22px 0 0;
	padding: 14px 18px;
	background: var(--gbpk-card);
	border: 1px solid var(--gbpk-border);
	border-radius: 12px;
}

.gbpk-savebar__state {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .9rem;
	color: var(--gbpk-muted);
}

.gbpk-savebar__dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gbpk-ok);
}

.gbpk-savebar__btn {
	flex: 0 0 auto;
	padding: 11px 24px;
	border: 2px solid var(--gbpk-green);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--gbpk-green);
	font-family: var(--gbpk-font-head);
	font-size: .95rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .16s, border-color .16s, color .16s;
}
.gbpk-savebar__btn:hover { background: #FFFBF0; border-color: var(--gbpk-gold); }

/* Something is outstanding — the whole bar changes, not just the wording. */
.gbpk-savebar.is-dirty {
	background: #FFFBF0;
	border-color: var(--gbpk-gold);
	box-shadow: 0 3px 14px rgba(255, 182, 18, .25);
}
.gbpk-savebar.is-dirty .gbpk-savebar__dot  { background: var(--gbpk-gold); }
.gbpk-savebar.is-dirty .gbpk-savebar__state { color: #7A4E00; font-weight: 600; }
.gbpk-savebar.is-dirty .gbpk-savebar__btn {
	background: var(--gbpk-gold);
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}

.gbpk-savebar.is-saving .gbpk-savebar__dot { background: var(--gbpk-muted); }

.gbpk-savebar.is-error {
	background: #FDF3F4;
	border-color: var(--gbpk-err);
}
.gbpk-savebar.is-error .gbpk-savebar__dot   { background: var(--gbpk-err); }
.gbpk-savebar.is-error .gbpk-savebar__state { color: var(--gbpk-err); font-weight: 600; }

@media (max-width: 767px) {
	.gbpk-savebar { padding: 12px 14px; }
	.gbpk-savebar__btn { flex: 1 1 100%; }
	.gbpk-confbar { padding: 11px 13px; font-size: .84rem; }
}

/* ── Scoring bands note (Cheesehead Risk and any other numeric question) ──
   Printed from the question's own rules, so a fan can see before answering
   how close is close enough. */
.gbpk-bands {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(32, 55, 49, 0.04);
    border: 1px solid rgba(32, 55, 49, 0.10);
    border-radius: 8px;
}
.gbpk-bands__lead {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gbpk-green);
    letter-spacing: 0.01em;
}
.gbpk-bands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gbpk-bands__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 10px;
    background: #FFFFFF;
    border: 1px solid rgba(32, 55, 49, 0.14);
    border-radius: 999px;
    white-space: nowrap;
}
.gbpk-bands__diff {
    font-size: 12px;
    font-weight: 600;
    color: var(--gbpk-green);
}
.gbpk-bands__pts {
    font-family: var(--font-headline, inherit);
    font-size: 12px;
    font-weight: 700;
    color: #8A5A00;
}
/* The band that pays nothing is shown too — knowing where the points stop
   is part of judging the risk. */
.gbpk-bands__item.is-zero {
    background: transparent;
    border-style: dashed;
    opacity: 0.65;
}
.gbpk-bands__item.is-zero .gbpk-bands__pts { color: var(--gbpk-muted, #6B7280); }
.gbpk-bands__foot {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--gbpk-muted, #6B7280);
}

/* Same breakdown inside the rules modal. */
.gbpk-rules__bands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
    padding: 0;
    list-style: none;
}
.gbpk-rules__bands li {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(255, 182, 18, 0.12);
    border: 1px solid rgba(255, 182, 18, 0.45);
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}
.gbpk-rules__bands li strong { color: #8A5A00; }
.gbpk-rules__bands li.is-zero {
    background: transparent;
    border-style: dashed;
    border-color: rgba(32, 55, 49, 0.25);
    opacity: 0.7;
}

/* ── Vlastná pozícia nad tabuľkou ────────────────────────────────────────
   Pripnutý riadok prihláseného tipujúceho. Bez neho fanúšik na 87. mieste
   otvorí prvú stranu a seba nikde nevidí — a pri trinástich rebríčkoch by
   sa musel hľadať zakaždým odznova. */
.gbpk-me {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0 0 16px;
	padding: 13px 18px;
	background: var(--gbpk-green);
	border-radius: 10px;
	color: #fff;
	box-shadow: 0 4px 18px rgba(7, 19, 13, .16);
}
.gbpk-me__label {
	font-family: var(--gbpk-font-condensed, 'Barlow Condensed', sans-serif);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gbpk-gold);
}
.gbpk-me__rank {
	font-family: var(--gbpk-font-condensed, 'Barlow Condensed', sans-serif);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--gbpk-gold);
}
.gbpk-me__player {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}
.gbpk-me__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--gbpk-gold);
	flex-shrink: 0;
}
.gbpk-me__name {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Údaje sa zoskupia doprava, aby tlačidlo zostalo na kraji */
.gbpk-me__metric {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.2;
}
.gbpk-me__metric:first-of-type { margin-left: auto; }
.gbpk-me__metric-label {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.gbpk-me__metric strong {
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
}

.gbpk-me__here {
	font-size: .78rem;
	color: rgba(255, 255, 255, .65);
	white-space: nowrap;
}
.gbpk-me .gbpk-me__jump {
	color: var(--gbpk-gold);
	border-color: rgba(255, 182, 18, .45);
	white-space: nowrap;
}
.gbpk-me .gbpk-me__jump:hover {
	background: var(--gbpk-gold);
	border-color: var(--gbpk-gold);
	color: var(--gbpk-green-dk);
}

/* Prihlásený, ale zatiaľ mimo rebríčka */
.gbpk-me--empty {
	background: var(--gbpk-cream);
	color: var(--gbpk-muted);
	box-shadow: inset 3px 0 0 var(--gbpk-green);
}
.gbpk-me--empty .gbpk-me__label { color: var(--gbpk-green); }
.gbpk-me__none { font-size: .88rem; }

@media (max-width: 720px) {
	.gbpk-me {
		gap: 8px 14px;
		padding: 14px 16px;
	}
	.gbpk-me__label { width: 100%; }
	.gbpk-me__metric:first-of-type { margin-left: 0; }
	.gbpk-me__metric { flex: 1 1 30%; }
	.gbpk-me .gbpk-me__jump,
	.gbpk-me__here {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* Skok z pruhu „Tvoja pozícia" nesmie skončiť pod lepkavou hlavičkou */
#gbpk-me-row { scroll-margin-top: 96px; }
/* :target — zvýrazní sa len po kliknutí na „Skočiť na moje miesto",
   nie pri každom otvorení strany, kde riadok náhodou je. */
#gbpk-me-row:target td { animation: gbpk-me-flash 1.6s ease-out 1; }
@keyframes gbpk-me-flash {
	0%, 30% { background: rgba(255, 182, 18, .3); }
	100%    { background: transparent; }
}

/* ── Odrážky v pravidlách ─────────────────────────────────────────────────
   Téma nastavuje globálne `ul, ol { list-style: none }`, takže pôvodné
   pravidlá pre `::marker` nemali čo zafarbiť a zo zoznamov zostal len
   odsadený text bez značiek. Kreslíme si ich preto sami cez ::before —
   nezávisle na tom, čo s odrážkami robí téma. */

/* Kroky „Kedy sa tipuje“ — číslované koliesko v tímových farbách. */
.gbpk-rules__steps {
	list-style: none;
	padding-left: 0;
	counter-reset: gbpk-step;
}
.gbpk-rules__steps li {
	position: relative;
	padding-left: 32px;
	counter-increment: gbpk-step;
}
.gbpk-rules__steps li::before {
	content: counter(gbpk-step);
	position: absolute;
	left: 0;
	top: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--gbpk-green);
	color: var(--gbpk-gold);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
}

/* Odrážkové zoznamy (série a pod.) — malý kosoštvorec.
   Tmavšia zlatá, lebo svetlá #FFB612 je na kréme pri 7 px sotva vidieť. */
.gbpk-rules__list {
	list-style: none;
	padding-left: 0;
}
.gbpk-rules__list li {
	position: relative;
	padding-left: 22px;
}
.gbpk-rules__list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.6em;
	width: 7px;
	height: 7px;
	background: #D4940A;
	border-radius: 1px;
	transform: rotate(45deg);
}

/* ── Oddelenie odohraných zápasov ─────────────────────────────────────────
   Aktuálne kolo má zostať navrchu a byť vidieť; to, čo už skončilo, patrí
   pod čiaru a nemá súťažiť o pozornosť. */
.gbpk-gamelist__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 12px;
	font-family: var(--gbpk-font-head, inherit);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gbpk-muted);
}
.gbpk-gamelist__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(32, 55, 49, .14);
}

/* Odohrané karty: pokojnejšie, bez ťahu na klik, ale stále čitateľné. */
.gbpk-gamelist--played .gbpk-gamecard {
	background: rgba(32, 55, 49, .04);
	border-color: rgba(32, 55, 49, .10);
}
.gbpk-gamelist--played .gbpk-gamecard__match strong,
.gbpk-gamelist--played .gbpk-gamecard__when {
	color: var(--gbpk-muted);
}
.gbpk-gamelist--played a.gbpk-gamecard:hover {
	background: rgba(32, 55, 49, .07);
	border-color: rgba(32, 55, 49, .20);
}