/**
 * World Cup Prediction Challenge — Front styles (autonome, aucun build SCSS).
 * Look « premium » : dégradé navy, accents or, cartes pays, barres de progression.
 * Préfixe .btwc- pour ne JAMAIS entrer en collision avec le moteur sportbets.
 */

.btwc {
	/* DA BonusTiime — bleu stade (CdM) + or médaille charte. Pas de navy générique,
	 * pas de vert. Le « navy » historique = bleu stade profond ($wc-blue-end). */
	--btwc-navy: #0a1f5e;
	--btwc-navy-2: #15369e;
	--btwc-gold: #ffd21e;
	--btwc-gold-2: #ffdf73;
	--btwc-ink: #eef3ff;
	--btwc-muted: #aebbd8;
	--btwc-line: rgba(255, 255, 255, .12);
	--btwc-radius: 20px;

	position: relative;
	z-index: 0;                 /* contexte d'empilement → rubans en z-index:-1 sous le contenu */
	margin: 34px 0;
	padding: 22px clamp(16px, 3.5vw, 32px);
	border-radius: var(--btwc-radius);
	/* Fond aligné sur Pool 2 (.wc-pools__card--overall) : halo or coin haut-droit
	 * + dégradé bleu stade clair → profond. Même langage que la structure de gains. */
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255, 210, 30, .18) 0%, transparent 45%),
		linear-gradient(150deg, var(--btwc-navy-2) 0%, var(--btwc-navy) 100%);
	color: var(--btwc-ink);
	/* Ombre alignée Pool 2 : box-shadow 0 4px 22px rgba($wc-blue-end,.4). */
	box-shadow: 0 4px 22px rgba(10, 31, 94, .4);
	-webkit-font-smoothing: antialiased;
}

/* Liseré or en haut de carte — recrée celui de Pool 2 (.wc-pools__card--overall::before).
 * Bords transparents : pas besoin d'overflow:hidden sur .btwc (rubans FIFA en z-index:-1). */
.btwc::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--btwc-gold) 50%, transparent);
	z-index: 2;
}

/* Popup ouvert : on élève TOUTE la carte au-dessus du reste du site. Le
 * .btwc-picker (position:fixed, z-index:99999) est sinon piégé dans le contexte
 * d'empilement de la carte (z-index:0) → il passait derrière la carte voisine
 * (Buteur) et sous le header. La classe est posée par worldcup.front.js. */
.btwc.btwc-picker-active { z-index: 100000; }

/* ---- Section globale (largeur de contenu = .wrapper.row, comme le héros) ---- */
.btwc-section { margin: 40px auto; }

/* ---- Duo de cartes : côte à côte en desktop, empilées sous 880px ---- */
.btwc-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	align-items: stretch;
}
.btwc-duo > .btwc { margin: 0; }
@media (max-width: 880px) {
	.btwc-duo { grid-template-columns: 1fr; }
}

/* ---- Rubans FIFA retirés : fond aligné Pool 2 (dégradé bleu stade + halo or),
 * pas de lignes de couleur diagonales. Markup conservé, masqué en CSS. ---- */
.btwc-ribbons { display: none; }
.btwc-ribbons--legacy {
	position: absolute; top: 0; left: 0; right: 0; height: 200px;
	z-index: -1; pointer-events: none; overflow: hidden;
	border-radius: var(--btwc-radius) var(--btwc-radius) 0 0;
	opacity: .85;
	-webkit-mask: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
	mask: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}
.btwc-rib {
	position: absolute; right: -10%; width: 130%; height: 58px;
	border-radius: 999px; transform: rotate(-19deg); filter: blur(3px);
}
.btwc-rib--1 { top: -6%; background: #1e6fff; opacity: .34; }
.btwc-rib--2 { top: 14%; background: #19c3e6; opacity: .26; height: 46px; }
.btwc-rib--3 { top: 36%; background: #14c46a; opacity: .26; }
.btwc-rib--4 { top: 58%; background: #ff7a00; opacity: .24; height: 50px; }
.btwc-rib--5 { top: 78%; background: #ff2d2d; opacity: .26; }

/* Variante Golden Boot : fond unifié sur Pool 2, identique à la carte Vainqueur
 * (hérite du fond de .btwc, plus d'override lime). */

/* ---- En-tête ---- */
.btwc-head { text-align: left; margin-bottom: 16px; }
.btwc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btwc-head-count {
	font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--btwc-muted);
	background: rgba(255, 255, 255, .05); border: 1px solid var(--btwc-line);
	padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
/* Kicker pill — conservé pour le récap clôturé (.btwc-closed). */
.btwc-kicker {
	display: inline-block;
	font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--btwc-navy);
	background: linear-gradient(180deg, var(--btwc-gold-2), var(--btwc-gold));
	padding: 6px 14px; border-radius: 999px;
}
.btwc-chip-num {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--btwc-navy);
	background: linear-gradient(180deg, var(--btwc-gold-2), var(--btwc-gold));
	padding: 4px 16px 4px 4px; border-radius: 999px;
}
.btwc-chip-num b {
	display: inline-grid; place-items: center; width: 22px; height: 22px;
	border-radius: 50%; background: var(--btwc-navy); color: var(--btwc-gold);
	font-size: 13px; line-height: 1;
}
.btwc-q {
	margin: 12px 0 6px;
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.2; font-weight: 800; color: #fff;
}
.btwc-prizeline { margin: 6px 0 0; color: var(--btwc-ink); font-size: 14px; line-height: 1.45; }
/* Montant en focal or — même traitement que .wc-pools__amount (overall) sur Pool 2 :
 * or plein, glow, chiffres tabulaires, léger resserrement. */
.btwc-prizeline strong {
	color: var(--btwc-gold);
	font-size: 28px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	text-shadow: 0 2px 24px rgba(255, 210, 30, .45);
}

/* ---- Infobulle « How it works » ---- */
.btwc-info {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	margin-top: 8px; cursor: help; outline: none;
}
.btwc-info-label {
	font-size: 13px; font-weight: 700; color: var(--btwc-ink);
	border-bottom: 1px dotted rgba(234, 240, 251, .55);
}
.btwc-info:hover .btwc-info-label,
.btwc-info:focus-visible .btwc-info-label { color: var(--btwc-gold-2); border-bottom-color: var(--btwc-gold-2); }

.btwc-tip {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px);
	z-index: 20; width: min(340px, 86vw);
	background: #fff; color: #1b2536;
	border-radius: 12px; padding: 14px 16px;
	box-shadow: 0 14px 40px rgba(8, 18, 40, .45);
	text-align: left;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.btwc-tip::before {
	content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
	border: 7px solid transparent; border-bottom-color: #fff;
}
.btwc-info:hover .btwc-tip,
.btwc-info:focus .btwc-tip,
.btwc-info:focus-within .btwc-tip {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.btwc-tip-title { display: block; font-size: 14px; margin-bottom: 8px; color: #0a1f5e; }
.btwc-tip ul { list-style: disc; margin: 0; padding: 0 0 0 18px; }
.btwc-tip li { font-size: 13px; line-height: 1.45; margin: 0 0 6px; color: #344155; }
.btwc-tip li:last-child { margin-bottom: 0; }

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

/* ---- Statut joueur / invite ---- */
/* Encart aligné sur les lignes inscrites de Pool 2 (.wc-pools__split-row) :
 * bg rgba(#fff,.06), bordure hairline, radius $radius-md (15px), texte blanc. */
.btwc-mypick, .btwc-invite {
	margin: 0 0 14px; padding: 9px 14px; border-radius: 15px;
	background: rgba(255, 255, 255, .06); border: 1px solid var(--btwc-line);
	font-size: 13.5px; text-align: center; color: #fff;
}
.btwc-mypick strong { color: var(--btwc-gold-2); }
.btwc-mypick-hint { color: var(--btwc-muted); font-size: 13px; }
.btwc-countdown { display: inline-block; margin-left: 6px; color: var(--btwc-gold-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.btwc-lock-ico { margin-right: 4px; }

/* ---- Grille de cartes ---- */
.btwc-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.btwc-card {
	position: relative; padding: 14px 16px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid var(--btwc-line); border-radius: 12px;
	transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btwc-card.is-clickable { cursor: pointer; }
.btwc-card.is-clickable:hover,
.btwc-card.is-clickable:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(255, 210, 30, .55);
	background: rgba(255, 210, 30, .07);
	outline: none;
}
.btwc-card.is-picked {
	border-color: var(--btwc-gold);
	background: linear-gradient(180deg, rgba(255, 210, 30, .16), rgba(255, 210, 30, .06));
	box-shadow: 0 0 0 1px var(--btwc-gold) inset;
}
.btwc-card.is-top::after {
	content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
	box-shadow: 0 0 0 1px rgba(255, 210, 30, .25) inset;
}
.btwc-card.is-locked { opacity: .62; }
.btwc-card.is-locked.is-clickable { cursor: default; }
.btwc-card.is-loading { opacity: .6; pointer-events: none; }

/* Hauteur réservée (≈ 2 lignes) pour que les cartes soient TOUTES identiques,
 * même quand un nom est long (ex. « Bosnia and Herzegovina ») : la barre et le
 * pourcentage restent alignés d'une carte à l'autre. */
.btwc-card-top { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.btwc-rank {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
	display: grid; place-items: center;
	font-size: 12px; font-weight: 800; color: var(--btwc-muted);
	background: rgba(255, 255, 255, .06);
}
.btwc-card.is-top .btwc-rank { color: var(--btwc-navy); background: var(--btwc-gold); }
.btwc-flag-wrap { flex: 0 0 auto; display: inline-flex; }
.btwc-flag-wrap .btwc-fi { width: 30px; height: 22px; font-size: 22px; }
.btwc-name {
	flex: 1 1 auto; min-width: 0; font-weight: 700; color: #fff; font-size: 15px; line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.btwc-badge {
	flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
}
/* « YOUR PICK » : petit badge à cheval sur le coin supérieur DROIT (moitié dans /
 * moitié hors de la carte), discret mais présent. Débord négatif, ne touche plus le nom. */
.btwc-badge-pick {
	position: absolute; top: -9px; right: -6px; z-index: 3;
	font-size: 9px; font-weight: 800; padding: 3px 8px; line-height: 1;
	background: var(--btwc-gold); color: var(--btwc-navy);
	text-transform: uppercase; letter-spacing: .05em;
	box-shadow: 0 3px 8px rgba(8, 18, 40, .45);
}
.btwc-badge-lock { background: rgba(255, 255, 255, .08); }

.btwc-bar {
	margin: 12px 0 6px; height: 8px; border-radius: 999px;
	background: rgba(255, 255, 255, .08); overflow: hidden;
}
.btwc-bar-fill {
	display: block; height: 100%; border-radius: 999px; min-width: 2px;
	background: linear-gradient(90deg, var(--btwc-gold), var(--btwc-gold-2));
	transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.btwc-card-bot { display: flex; align-items: baseline; justify-content: space-between; }
.btwc-pct { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.btwc-votes { font-size: 12px; color: var(--btwc-muted); }

/* ---- Pastille « pas de drapeau » (fallback) ---- */
.btwc-noflag {
	display: inline-grid; place-items: center; width: 30px; height: 22px;
	border-radius: 4px; font-size: 11px; font-weight: 800; color: #fff;
	background: rgba(255, 255, 255, .14);
}

/* ---- Catalogue Golden Boot : favoris + recherche + parcours pays ---- */
.btwc-sub-fav { margin-top: 4px; }
.btwc-rank.btwc-pos { font-size: 10px; letter-spacing: .02em; }
.btwc-finder {
	display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
	margin: 22px 0 6px;
}
.btwc-search-input, .btwc-country-select {
	height: 44px; border-radius: 10px; border: 1px solid var(--btwc-line);
	background: rgba(255, 255, 255, .06); color: #fff; font-size: 15px; padding: 0 14px;
	-webkit-appearance: none; appearance: none;
}
.btwc-search-input { flex: 1 1 240px; min-width: 0; }
.btwc-search-input::placeholder { color: var(--btwc-muted); }
.btwc-search-input:focus, .btwc-country-select:focus {
	outline: none; border-color: rgba(255, 210, 30, .55); background: rgba(255, 210, 30, .06);
}
.btwc-country-select {
	flex: 0 1 240px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239fb0cc' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}
.btwc-country-select option { color: #1b2536; }
.btwc-results { margin-top: 8px; }
.btwc-results .btwc-grid { margin-top: 8px; }
.btwc-results-hint { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--btwc-muted); }
.btwc-noresult { margin: 14px 0; text-align: center; color: var(--btwc-muted); font-size: 14px; }

.btwc-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--btwc-muted); margin: 0 0 10px; }

/* ---- Ancre de scroll (CTA hero → bloc pronostic) ---- */
.btwc-anchor { display: block; height: 0; scroll-margin-top: 110px; }

/* ---- Médaillon de pick (état vide globe → état rempli drapeau) ---- */
.btwc-medbox { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 8px 0 4px; }
.btwc-medallion {
	width: 110px; height: 110px; border-radius: 50%; cursor: pointer;
	display: grid; place-items: center; padding: 6px;
	background:
		radial-gradient(circle at 50% 35%, rgba(255, 210, 30, .14), rgba(255, 255, 255, .03) 70%);
	border: 2px dashed rgba(255, 210, 30, .55);
	box-shadow: 0 10px 30px rgba(4, 10, 28, .45);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btwc-medallion:hover, .btwc-medallion:focus-visible {
	transform: translateY(-3px); outline: none;
	border-color: var(--btwc-gold); box-shadow: 0 16px 38px rgba(4, 10, 28, .6);
}
.btwc-medallion.is-set { border-style: solid; border-color: var(--btwc-gold); }
.btwc-medallion-inner {
	width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
	display: grid; place-items: center;
}
.btwc-medallion-inner .btwc-fi {
	width: 100%; height: 100%; border-radius: 50%;
	background-size: cover; box-shadow: none;
}
.btwc-medallion-inner .btwc-noflag {
	width: 100%; height: 100%; border-radius: 50%; font-size: 28px;
}
.btwc-medallion-globe { color: rgba(255, 210, 30, .7); }
.btwc-medallion-globe svg { width: 46px; height: 46px; }
.btwc-medallion-name { margin: 12px 0 0; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.2; overflow-wrap: anywhere; }
.btwc-medallion-cta {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
	margin-top: 12px; padding: 10px 20px; border-radius: 999px;
	background: linear-gradient(135deg, #ffd21e 0%, #ffe87a 100%);
	color: #2a292b; border: 0;
	font-size: 14px; font-weight: 800; white-space: nowrap;
	box-shadow: 0 4px 12px rgba(42, 41, 43, .18);
	transition: transform .12s ease, box-shadow .12s ease;
}
.btwc-medallion-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(42, 41, 43, .24); }
.btwc-medallion-cta .btwc-arrow { transition: transform .12s ease; }
.btwc-medallion-cta:hover .btwc-arrow { transform: translateX(3px); }

/* ---- Mini-classement (lecture seule, top 5) ---- */
.btwc-mini { margin-top: 18px; }
.btwc-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.btwc-mini-head .btwc-sub { margin: 0; }
.btwc-live {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
	color: var(--btwc-gold-2);
}
.btwc-live i { width: 8px; height: 8px; border-radius: 50%; background: #38d39f; box-shadow: 0 0 0 0 rgba(56, 211, 159, .6); animation: btwc-pulse 1.6s ease-out infinite; }
@keyframes btwc-pulse { 0% { box-shadow: 0 0 0 0 rgba(56, 211, 159, .6); } 70% { box-shadow: 0 0 0 7px rgba(56, 211, 159, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 211, 159, 0); } }
.btwc-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.btwc-mini-row {
	display: grid; grid-template-columns: 26px 30px minmax(0, 1fr) minmax(60px, 1.2fr) auto;
	align-items: center; gap: 12px;
	padding: 8px 12px; border-radius: 10px;
	background: rgba(255, 255, 255, .04); border: 1px solid var(--btwc-line);
}
/* Pastille de rang circulaire — même grammaire que .wc-pools__split-num (Pool 2). */
.btwc-mini-rank {
	width: 24px; height: 24px; margin: 0 auto;
	display: grid; place-items: center; border-radius: 50%;
	font-size: 13px; font-weight: 900; color: #fff;
	background: rgba(30, 111, 255, .28);
	box-shadow: inset 0 0 0 1px rgba(30, 111, 255, .55);
	font-variant-numeric: tabular-nums;
}
/* Podium or / argent / bronze — médailles charte (cf. Pool 2). */
.btwc-mini-row:nth-child(1) .btwc-mini-rank { background: var(--btwc-gold); color: #2a292b; box-shadow: none; }
.btwc-mini-row:nth-child(2) .btwc-mini-rank { background: #c2ccdb; color: #20303f; box-shadow: none; }
.btwc-mini-row:nth-child(3) .btwc-mini-rank { background: #d79a63; color: #2c1808; box-shadow: none; }
/* Ligne 1 teintée or pour ancrer le leader. */
.btwc-mini-row:nth-child(1) { border-color: rgba(255, 210, 30, .55); background: rgba(255, 210, 30, .10); }
.btwc-mini-row:nth-child(1) .btwc-mini-pct { color: var(--btwc-gold); }
.btwc-mini-row .btwc-flag-wrap .btwc-fi { width: 26px; height: 19px; font-size: 19px; }
.btwc-mini-name { min-width: 0; font-weight: 700; color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btwc-mini-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.btwc-mini-pct { font-size: 14px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.btwc-mini-all {
	margin-top: 12px; width: 100%; padding: 11px 16px; cursor: pointer;
	background: rgba(255, 255, 255, .05); border: 1px solid var(--btwc-line); border-radius: 10px;
	color: var(--btwc-ink); font-size: 14px; font-weight: 700;
	transition: border-color .12s ease, background .12s ease;
}
.btwc-mini-all:hover { border-color: rgba(255, 210, 30, .5); background: rgba(255, 210, 30, .06); }

/* ---- Popup de sélection ---- */
body.btwc-noscroll { overflow: hidden; }
.btwc-picker { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.btwc-picker[hidden] { display: none; }
.btwc-picker-overlay { position: absolute; inset: 0; background: rgba(8, 18, 40, .72); backdrop-filter: blur(4px); }
.btwc-picker-panel {
	position: relative; z-index: 1; width: min(720px, 100%); max-height: 86vh;
	display: flex; flex-direction: column;
	padding: 24px; border-radius: 18px; overflow: hidden;
	background: linear-gradient(180deg, var(--btwc-navy-2), var(--btwc-navy));
	border: 1px solid rgba(255, 210, 30, .3);
	box-shadow: 0 24px 70px rgba(4, 10, 28, .7);
}
.btwc-picker-panel::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--btwc-gold), var(--btwc-gold-2));
}
.btwc-picker-x {
	position: absolute; top: 14px; right: 16px; z-index: 2;
	width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
	background: rgba(255, 255, 255, .08); border: 1px solid var(--btwc-line);
	color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center;
}
.btwc-picker-x:hover { background: rgba(255, 255, 255, .16); }
.btwc-picker-title { margin: 0 40px 6px 0; font-size: 20px; font-weight: 800; color: #fff; line-height: 1.25; }
.btwc-picker-sub { margin: 0 0 14px; font-size: 13px; color: var(--btwc-muted); line-height: 1.4; }
.btwc-picker-search { margin-bottom: 12px; }
.btwc-picker-search .btwc-search-input { width: 100%; }
.btwc-picker-tabs {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.btwc-tab {
	appearance: none; cursor: pointer;
	padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
	color: var(--btwc-muted); background: rgba(255, 255, 255, .05);
	border: 1px solid var(--btwc-line); transition: color .15s, background .15s, border-color .15s;
}
.btwc-tab:hover { color: var(--btwc-ink); background: rgba(255, 255, 255, .09); }
.btwc-tab.is-active {
	color: var(--btwc-navy);
	background: linear-gradient(180deg, var(--btwc-gold-2), var(--btwc-gold));
	border-color: var(--btwc-gold);
}
.btwc-picker-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: var(--btwc-gold-2); background: rgba(255, 210, 30, .08); border: 1px solid rgba(255, 210, 30, .25); }
.btwc-picker-empty { margin: 24px 0; text-align: center; font-size: 14px; color: var(--btwc-muted); }
.btwc-picker-grid {
	list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1 1 auto;
	display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
	scrollbar-width: thin; scrollbar-color: rgba(255, 210, 30, .5) transparent;
}
.btwc-picker-grid::-webkit-scrollbar { width: 8px; }
.btwc-picker-grid::-webkit-scrollbar-thumb { background: rgba(255, 210, 30, .5); border-radius: 999px; }

/* Corps scrollable du popup Buteur (finder fixe au-dessus, résultats + favoris défilent). */
.btwc-picker-body {
	flex: 1 1 auto; overflow-y: auto; padding: 4px;
	scrollbar-width: thin; scrollbar-color: rgba(255, 210, 30, .5) transparent;
}
.btwc-picker-body::-webkit-scrollbar { width: 8px; }
.btwc-picker-body::-webkit-scrollbar-thumb { background: rgba(255, 210, 30, .5); border-radius: 999px; }
.btwc-picker-body .btwc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btwc-picker-body .btwc-sub-fav { margin-top: 16px; }

/* ---- Bandeau « prédictions fermées » ---- */
.btwc-closed-banner {
	margin: 0 0 18px; padding: 12px 16px; text-align: center;
	font-weight: 700; color: var(--btwc-navy);
	background: linear-gradient(180deg, var(--btwc-gold-2), var(--btwc-gold));
	border-radius: 10px;
}

/* ---- Note d'éligibilité + message ---- */
.btwc-elig-note { margin: 14px 0 0; font-size: 11.5px; color: var(--btwc-muted); text-align: center; line-height: 1.45; }
.btwc-msg { margin-top: 12px; text-align: center; font-weight: 700; min-height: 20px; color: var(--btwc-gold-2); }
.btwc-msg.is-error { color: #ff8a8a; }

/* ---- Récap clôturé / podium ---- */
.btwc-closed .btwc-q { font-size: clamp(20px, 3vw, 28px); line-height: 1.2; }
.btwc-winner-line { text-align: center; font-size: 18px; line-height: 1.5; margin: 0 0 18px; color: var(--btwc-ink); }
.btwc-winner-line strong { color: var(--btwc-gold-2); }
.btwc-winner-line .btwc-fi { vertical-align: -3px; }
.btwc-podium { list-style: none; margin: 0 auto; padding: 0; max-width: 520px; display: grid; gap: 10px; }
.btwc-podium li {
	display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 14px 16px; border-radius: 12px; line-height: 1.35;
	background: rgba(255, 255, 255, .05); border: 1px solid var(--btwc-line);
}
.btwc-podium-rank { font-size: 20px; font-weight: 800; color: var(--btwc-gold-2); text-align: center; }
.btwc-podium-name { min-width: 0; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.btwc-podium-prize { font-weight: 800; color: var(--btwc-gold-2); white-space: nowrap; }
.btwc-podium-1 { box-shadow: 0 0 0 1px var(--btwc-gold) inset; }
.btwc-recap-note { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--btwc-muted); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
	.btwc { padding: 20px 14px; }
	.btwc-grid { grid-template-columns: 1fr; }
	.btwc-medallion { width: 116px; height: 116px; }
	.btwc-medallion-globe svg { width: 48px; height: 48px; }
	.btwc-medallion-name { font-size: 19px; }
	.btwc-medallion-cta { padding: 9px 15px; font-size: 13px; }
	.btwc-mini-row { grid-template-columns: 18px 26px minmax(0, 1fr) auto; }
	.btwc-mini-bar { display: none; }
	/* Popup mobile : marges autour (plus de bord-à-bord) + on réserve la barre
	 * d'onglets fixe du bas (.bottomTabBar : 68px + safe-area, z-index 100001 →
	 * elle passe AU-DESSUS du popup). Sans cette réserve, le bas du panneau
	 * disparaissait sous la tab bar et n'était plus visible/cliquable. */
	.btwc-picker {
		padding: 14px;
		padding-bottom: calc(14px + 68px + env(safe-area-inset-bottom));
	}
	.btwc-picker-panel { width: 100%; max-height: 100%; height: auto; border-radius: 16px; padding: 20px 16px; }
	.btwc-picker-tabs { gap: 6px; }
	.btwc-tab { padding: 6px 12px; font-size: 12px; }
	.btwc-picker-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.btwc-card, .btwc-bar-fill { transition: none; }
}

/* ── Encart « plus de points » : remplace les grosses cartes The Winner /
   Golden Boot. Texte à gauche, 2 médaillons (drapeau / maillot) à droite qui
   ouvrent les popups de sélection. Valeurs littérales (les var --btwc-* ne
   vivent que sur .btwc). ── */
.btwc-encart {
	display: flex; align-items: stretch; gap: clamp(14px, 2.4vw, 30px);
	margin: 34px 0; position: relative; overflow: hidden;
	padding: clamp(20px, 3vw, 34px) clamp(22px, 3.5vw, 42px);
	border-radius: 22px; color: #eef3ff;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255, 210, 30, .14) 0%, transparent 45%),
		linear-gradient(150deg, #15369e 0%, #0a1f5e 100%);
	box-shadow: 0 4px 22px rgba(10, 31, 94, .4);
}
.btwc-encart::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, transparent, #ffd21e 50%, transparent);
}

/* ── Visuel trophée : PNG à fond transparent (le glow doré se fond sur le bleu).
   Déborde à gauche dans le padding de la carte, légèrement plus grand que le texte. ── */
.btwc-encart__media {
	flex: 0 0 auto; align-self: center; min-width: 0;
	width: clamp(150px, 20vw, 250px);
	margin: clamp(-28px, -3vw, -14px) clamp(4px, 1vw, 14px)
	        clamp(-28px, -3vw, -14px) calc(-1 * clamp(18px, 3vw, 38px));
}
.btwc-encart__media img {
	display: block; width: 100%; height: auto;
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .4));
}

.btwc-encart__copy { flex: 1 1 auto; min-width: 0; align-self: center; }
/* Eyebrow en pastille contour or + étoile. */
.btwc-encart__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px; border-radius: 999px;
	border: 1px solid rgba(255, 210, 30, .5); background: rgba(255, 210, 30, .06);
	font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; color: #ffdf73;
}
.btwc-encart__eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; }
.btwc-encart__title { margin: 14px 0 12px; font-size: clamp(25px, 3.3vw, 40px); font-weight: 900; color: #fff; line-height: 1.06; }
.btwc-encart__title-accent { color: #ffd21e; }
.btwc-encart__text { margin: 0; font-size: 15px; line-height: 1.55; color: #aebbd8; max-width: 48ch; }
.btwc-encart__text strong { color: #ffdf73; font-weight: 800; }

/* Séparateur vertical entre le texte et les médaillons. */
.btwc-encart__divider {
	flex: 0 0 1px; align-self: stretch; margin: 8px clamp(6px, 1.4vw, 18px);
	background: linear-gradient(180deg, transparent, rgba(255, 210, 30, .35) 22%, rgba(255, 255, 255, .14) 50%, rgba(255, 210, 30, .35) 78%, transparent);
}

.btwc-encart__picks { flex: 0 0 auto; align-self: center; display: flex; gap: clamp(18px, 2.4vw, 46px); }

/* Neutralise le look « grosse carte » de .btwc pour les ronds de l'encart. */
.btwc.btwc-encart-pick {
	margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
	position: static;
}
.btwc.btwc-encart-pick::before { display: none; }
.btwc-encart-pick .btwc-medbox { margin: 0; position: relative; }
/* Médaillon un poil plus petit dans l'encart, nom plus discret. */
.btwc-encart-pick .btwc-medallion { width: 96px; height: 96px; position: relative; }
.btwc-encart-pick .btwc-medallion-name { font-size: 16px; margin-top: 12px; }
.btwc-encart-pick .btwc-medallion-cta { margin-top: 12px; padding: 8px 16px; font-size: 13px; }

/* Badge numéroté (1 / 2) en haut-gauche du médaillon — pastille or qui « perce » l'anneau. */
.btwc-mednum {
	position: absolute; top: -3px; left: -3px; z-index: 3;
	width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, #ffe87a 0%, #ffd21e 100%);
	color: #1a1a1a; font-weight: 900; font-size: 14px; line-height: 1;
	border: 3px solid #102a78;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
/* Sous-libellé sous le nom du pick (« Your champion pick » / « Top scorer pick »). */
.btwc-medsub { margin: 3px 0 0; font-size: 13px; color: #aebbd8; line-height: 1.3; }

@media (max-width: 980px) {
	.btwc-encart { flex-direction: column; align-items: center; text-align: center; }
	.btwc-encart__divider { display: none; }
	.btwc-encart__media { width: clamp(150px, 46vw, 230px); margin: 0 0 4px; }
	.btwc-encart__copy { align-self: stretch; }
	.btwc-encart__text { max-width: none; margin-left: auto; margin-right: auto; }
	.btwc-encart__picks { justify-content: center; }
}
@media (max-width: 420px) {
	.btwc-encart__picks { gap: 18px; }
	.btwc-encart-pick .btwc-medallion { width: 86px; height: 86px; }
	.btwc-mednum { width: 27px; height: 27px; font-size: 13px; }
}