@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,700;1,700&display=swap');

#fpl-team-view { max-width: 920px; margin: 0 auto; font-family: Arial, sans-serif; }
.fpl-score-panel { text-align: center; padding: 16px; background: linear-gradient(#f6f9ff,#eaf2ff); border-radius: 8px; margin-bottom: 12px; }
.fpl-pitch {
	/* Football-pitch style stripes using two greens */
	background: repeating-linear-gradient(180deg, #00A34F 0px, #00A34F 40px, #009B4C 40px, #009B4C 80px);
	padding: 18px;
	border-radius: 8px;
	color: white;
	position: relative;
	overflow: visible;
}

/* Toggle controls under the pitch */
.fpl-toggles{ display:flex; gap:12px; justify-content:center; margin-top:12px; }
.fpl-toggle{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,0.92); padding:6px 10px; border-radius:6px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.fpl-toggle select{ padding:6px 8px; border-radius:6px; border:1px solid rgba(11,91,53,0.12); background:#fff; font-weight:700; color:#0b5b35; }
.fpl-toggle .label-text{ font-weight:700; color:#0b5b35; font-size:13px; }

/* visually dim locked/disabled select options */
.fpl-toggle select option:disabled { color: #9aa; }

/* Dark mode overrides */
.fpl-dark .fpl-score-panel{ background: linear-gradient(#0f1720,#081018); color: #e6eef6; }
.fpl-dark .stat-value{ color:#e6eef6; }
.fpl-dark .stat-label, .fpl-dark .stat-subsmall{ color:#9fb4c8; }
.fpl-dark .score-box{ background: linear-gradient(180deg,#2a6b4f,#153428); box-shadow: 0 6px 0 rgba(0,0,0,0.28); }
.fpl-dark .score-number{ color:#dff7ea; }
.fpl-dark .player-card{
	background: rgba(255,255,255,0.04);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.04);
	box-shadow: 0 4px 10px rgba(0,0,0,0.36);
}
.fpl-dark .player-name{ background:#f6f6f6; color:#073; }
.fpl-dark .player-points{ background: rgba(255,255,255,0.08); color:#fff; }

/* Dark-mode pitch stripes */
.fpl-dark .fpl-pitch {
	background: repeating-linear-gradient(180deg, #053826 0px, #053826 36px, #032f20 36px, #032f20 72px);
}

/* make the small banners match dark mode for readability */
.fpl-dark .fpl-pitch::before,
.fpl-dark .fpl-pitch::after {
	background: #072b1c;
	color: #ffffff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Christmas theme: red/green pitch with falling snow overlay */
.fpl-christmas .fpl-pitch {
	/* use provided festive background image; cover and center it */
	background-image: url('https://fpltoolbox.com/wp-content/uploads/2025/12/c6be1976-af20-4e05-a689-9c389d113ae9.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* banners: red background with white text for Christmas */
.fpl-christmas .fpl-pitch::before,
.fpl-christmas .fpl-pitch::after {
	background: #b71c1c;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* falling snow overlay (two layers for parallax) */
.fpl-christmas .fpl-pitch::after,
.fpl-christmas .fpl-pitch::before {
	/* ensure pseudo-elements don't interfere with banner text - we'll create dedicated overlay */
}
.fpl-christmas .fpl-pitch .fpl-snow-container{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:8; overflow:hidden; }
.fpl-christmas .fpl-pitch .fpl-snowflake{ position:absolute; left:0; top:0; will-change: transform; user-select:none; pointer-events:none; display:block; }

/* snowflake animation - each flake will have randomized duration/delay/size set inline by JS */
@keyframes flake-fall{
	0%{ transform: translateY(-10vh) rotate(0deg); opacity: 0; }
	10%{ opacity: 1; }
	100%{ transform: translateY(110vh) rotate(360deg); opacity: 0.9; }
}

/* select focus accessibility */
.fpl-toggle select:focus{ outline:2px solid rgba(11,91,53,0.18); }

/* small white banners in the top-left and top-right that say "FPLToolbox" */
.fpl-pitch::before,
.fpl-pitch::after {
	content: "FPLToolbox";
	position: absolute;
	top: 8px;
	background: #fff;
	color: #007A3A;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
	z-index: 5;
	/* use Archivo italic for a blocky italic look */
	font-family: 'Archivo', Arial, sans-serif;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.fpl-pitch::before { left: 8px; }
.fpl-pitch::after { right: 8px; }
.fpl-row { 
    display:flex; 
    gap:10px; 
    justify-content:center; 
    padding: 4px 0; 
}
.player-card {
	width:110px;
	/* glass effect */
	background: rgba(255,255,255,0.06);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius:6px;
	text-align:center;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
	/* ensure the translucent background blurs the underlying festive image */
	background-clip: padding-box;
}
.player-shirt { 
    width:64px; 
    height:64px; 
    object-fit:contain; 
    display:block; 
	margin: 0 auto -15px; 
	position: relative;
	z-index: 1;
}
.player-name {
	position: relative;
	z-index: 2;
	font-size:10px;
	font-weight:700;
	background: #ffffff;
	color: #0b5b35; /* darker green text to match pitch branding */
    padding: 0px 6px;
	border-radius: 6px 6px 0 0;
	display: block;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
.player-points {
	font-size:10px;
	margin: 0;
	background: rgba(0,0,0,0.65);
	color: #fff;
    padding: 0px 6px;
	border-radius: 0 0 6px 6px;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-weight:700;
}
.player-card { position: relative; }
.player-badge { position: absolute; top: 6px; left: 6px; width: 14px; height: 14px; pointer-events: none; }
.player-badge.vice { width: 12px; height: 12px; opacity: 0.95; }
.fpl-team-view-missing { padding:12px; background:#fff3cd; border:1px solid #ffeeba; border-radius:6px; }
.fpl-error { color: #fff; }
.rank-change { font-size:12px; color:#084; }
.overall-change { font-size:12px; color:#064; font-weight:600; }

/* Score panel grid similar to provided mock */
.fpl-score-grid{ display:grid; grid-template-columns: 1fr 160px 1fr; grid-template-rows: 60px 1fr 60px; gap:12px; align-items:center; }
.score-stat{ text-align:center; color:#222; }
.stat-value{ font-size:18px; font-weight:700; }
.stat-label{ font-size:12px; color:#666; }
.stat-subvalue{ font-size:12px; color:#444; margin-top:4px; }
.stat-subsmall { font-size:11px; color:#666; margin-top:6px; font-weight:400; }
.rank-up { color: #1aaf5d; }
.rank-down { color: #d9534f; }
.rank-same { color: #666; }
.score-center{ grid-column:2 / 3; grid-row:1 / 4; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-box{ background: linear-gradient(180deg,#6fe0ff,#6b6bff); width:120px; height:120px; border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 0 rgba(0,0,0,0.12); }
.score-number{ font-size:36px; font-weight:800; color:#071; color:#fff; }
.score-chip{ margin-top:8px; background:#2b1b4a; color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:700; }
.score-col-left{ grid-column:1 / 2; grid-row:1 / 4; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; }
.score-col-right{ grid-column:3 / 4; grid-row:1 / 4; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; }

@media (max-width:640px){
	.fpl-score-grid{ grid-template-columns: 1fr 120px 1fr; }
	.score-box{ width:96px; height:96px; }
	.score-number{ font-size:28px; }

	/* slightly smaller player shirts on mobile for better fit */
	.player-shirt { width:48px; height:48px; }

	/* Make toggles stack full-width on small screens */
	.fpl-toggles{ flex-direction: column; align-items: stretch; }
	.fpl-toggle{ display:flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width:100%; }
	.fpl-toggle .label-text{ margin-bottom:6px; }
	.fpl-toggle select{ width:100%; box-sizing: border-box; }
}

/* Red & White theme for paid members */
.fpl-redwhite .fpl-pitch {
	background: repeating-linear-gradient(180deg, #b71c1c 0px, #b71c1c 40px, #ffffff 40px, #ffffff 80px);
	color: #ffffff;
}
.fpl-redwhite .fpl-pitch::before,
.fpl-redwhite .fpl-pitch::after {
	background: #ffffff;
	color: #b71c1c;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.fpl-redwhite .player-card {
	background: rgba(255,255,255,0.96);
	border: 1px solid rgba(183,28,28,0.12);
	color: #b71c1c;
}
.fpl-redwhite .player-name { background: #fff; color: #b71c1c; }
.fpl-redwhite .player-points { background: #b71c1c; color: #fff; }