:root{
	--bg:#f6f8fb;
	/* page background */
	--card:#ffffff;
	/* card surface */
	--muted:#6b7280;
	/* secondary text */
	--text:#0b0d10;
	/* primary text */
	--accent:#22c55e;
	/* green accent */
	--accent-2:#3b82f6;
	/* blue accent */
	--danger:#ef4444;
	--slant: 14px;
	--line: rgba(0,0,0,.08);
	/* hairline borders */
	--ring: 0 0 0 1px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.08);
}
*{
	box-sizing:border-box
}
html,body{
	height:100%;
	background-color:transparent;
}
body {
	margin: 0;
	color: var(--text);
	font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
	padding-bottom: calc(64px + env(safe-area-inset-bottom));
	background-color: transparent;
	padding-top: 35px;
	/* equal to header height */
}
.page-bg{
	position: fixed;
	inset: 0;
	z-index: -1;
	background:url("/bg.jpg") center / 50% auto repeat;
	opacity: 0.1;
}
/* .wrap stays layout-only */
.wrap{
	max-width:1100px;
	margin:0 auto;
	padding:0;
	min-height:100vh;
}
a{
	color:inherit;
	text-decoration:none
}
.topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	background-color: #2b2c2d;
	line-height: 0;
	height: 35px;
	padding: 0;
}
.topbar-inner {
	padding: 0px;
}
header {
	position: fixed;
	padding: 0;
	height: 35px;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.profile-btn{
	padding:0;
	background:none;
	border:none;
	cursor:pointer
}
.profile-btn img{
	width:25px;
	height:25px;
	border-radius:50%;
	margin-right: 10px;
}
.header-logo {
	display: block;
	/* prevents inline-gap */
	height: 35px;
	width: auto;
	margin: 0;
	padding: 0;
}
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
	/* slightly above .topbar */
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #2b2c2d;
	/* same color for seamless blend */
	padding: 0;
	line-height: 0;
}
.hh2 {
	font-size:14px;
	color:#111827;
	margin-bottom: 5px;
}
.backlink{
	opacity:.8;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	cursor:pointer;
	transition:transform .15s ease
}
.backlink:hover{
	opacity:1;
	transform:scale(1.06)
}
.backlink img{
	width:40;
	height:40px;
	object-fit:contain;
	filter: invert(1);
	margin-right: 7px;
}
/* ---------- Bottom nav ---------- */
.navbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	background: #2b2c2d;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
	padding: 0px;
	box-sizing: border-box;
}
.navitem {
	position: relative;
	/* for pseudo-element positioning */
	display: grid;
	place-items: center;
	gap: 0px;
	color: #4b5563;
	font-size: 11px;
	color: white;
	transition: color 0.2s ease;
}
/* --- Active with parallelogram indicator --- */
.navitem.active {
	color: #69be28;
	font-weight: 600;
}
.navitem.active::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #002244;
	transform: skewX(-20deg);
	/* 🔹 creates the parallelogram effect */
	z-index: -1;
	/* stays behind text & icon */
	transition: transform 0.2s ease, background 0.2s ease;
}
.navitem.active:hover::before {
	background: white;
	transform: skewX(-20deg) scale(1.03);
}
/* Default */
img{
	display:block
}
.brand{
	display:flex;
	gap:10px;
	align-items:center
}
.brand img{
	width:28px;
	height:28px;
	border-radius:0px
}
.brand h1{
	font-size:18px;
	margin:0;
	font-weight:600;
	letter-spacing:.2px
}
.meta{
	font-size:12px;
	color:var(--muted)
}
/* Card */
.card{
	background:var(--card);
	border:1px solid rgba(255,255,255,.06);
	border-radius:14px;
	box-shadow:var(--ring);
	margin:10px 0
}
.card .content{
	padding:12px 14px;
	border-radius: 0px;
}
.head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:12px;
	margin-bottom:8px
}
h2{
	margin:0;
	font-size:16px;
	margin-bottom: 5px;
}
.section-title{
	font-size:14px;
	font-weight:700;
	margin:5px;
	color:black;
	padding:0px;
	margin-left: 10px;
}
/* Chip strip (sports filter) */
.chip-strip{
	display:flex;
	gap:8px;
	padding:8px 2px 10px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	margin-bottom:10px;
	margin-left: 10px;
}
.chip-strip::-webkit-scrollbar{
	display:none
}
.chip{
	background:#0f1318;
	color:var(--text);
	padding:8px 12px;
	white-space:nowrap;
	cursor:pointer;
	font-weight:600;
}
.chip.active{
	background:rgba(35,197,94,.12)
}
/* Searchbar */
.searchbar{
	margin-top:4px;
	display:grid;
	grid-template-columns:20px 1fr auto;
	align-items:center;
	gap:8px;
	background:#0f1318;
	border:1px solid rgba(255,255,255,.10);
	border-radius:10px;
	padding:8px 10px;
	margin-left: 10px;
	margin-right: 10px;
}
.searchbar input{
	background:transparent;
	border:0;
	outline:none;
	color:var(--text);
	font-size:14px;
}
.searchbar button{
	border:0;
	background:transparent;
	color:#cbd5e1;
	cursor:pointer;
	padding:4px;
}
.searchbar button:hover{
	background:rgba(255,255,255,.06)
}
.search-icon{
	color:#cbd5e1
}
/* Grid */
/* =============== Grid =============== */
.team-grid{
	display:grid;
	gap:0;
	/* no gaps between cards */
	background:transparent;
	/* you asked for transparent */
	grid-template-columns:repeat(3,1fr);
}
@media (max-width:840px){
	.team-grid{
		grid-template-columns:repeat(2,1fr);
	}
}
@media (max-width:560px){
	.team-grid{
		grid-template-columns:1fr;
	}
}
/* =============== Card shell =============== */
.team-card{
	position:relative;
	display:grid;
	grid-template-columns:56px 1fr auto;
	align-items:stretch;
	min-height:56px;
	margin:0;
	padding:0;
	background:transparent;
	/* each column paints its own bg */
	border:0;
	overflow:visible;
	cursor:pointer;
	transition:transform .2s ease, box-shadow .2s ease;
	isolation:isolate;
	/* keep z-index layering self-contained */
}
.team-card:hover{
	transform:translateY(-1px);
	box-shadow:0 4px 22px rgba(0,0,0,.24);
}
.team-card:focus-visible{
	outline:none;
	box-shadow:0 0 0 2px rgba(59,130,246,.6);
}
/* =============== Columns (shared) =============== */
/* Each column fills full row height;
content centered inside */
.team-badge,.team-main,.team-right{
	position:relative;
	display:flex;
	align-items:center;
	gap:0px;
	padding:0px 0px;
	z-index:0;
	/* content above its bg */
}
/* Pseudo backgrounds — slanted with a fixed px offset */
.team-badge::before,.team-main::before,.team-right::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	transition:transform .2s ease, background .2s ease;
}
/* =============== Left: Badge (red) =============== */
/* Slant only on the RIGHT edge so it mates with MAIN cleanly */
.team-badge{
	width:56px;
	/* fixed column width */
	justify-content:center;
	/* center the logo/initials */
	padding:0px;
	/* a bit tighter */
}
.team-badge::before{
	background:transparent;
	/* red */
	clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
}
.team-badge img{
	width:44px;
	height:44px;
	object-fit:cover;
	border-radius:8px;
	flex:0 0 auto;
}
/* =============== Middle: Name/Sub (dark slate) =============== */
/* Slant on BOTH edges so both seams line up */
.team-main::before{
	background:#2b2c2d;
	clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
}
.team-name{
	font-weight:700;
	line-height:1.1;
	color:#fff;
	padding-left: 10px;
}
.team-sub{
	font-size:12px;
	color:var(--muted);
	margin-top:2px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
/* =============== Right: Rating (blue) =============== */
/* Slant only on the LEFT edge so it mates with MAIN cleanly */
.team-right{
	margin-left: -20px;
	z-index: -3;
	width: 60px;
	justify-content:flex-end;
	text-align:right;
}
.team-right::before{
	background:darkgray;
	/* blue */
	clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%);
}
.team-rating,.small-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	border:1px solid rgba(255,255,255,.18);
	border-radius:999px;
	padding:2px 8px;
	font-size:11px;
	color:#e6edf3;
}
/* Middle column stacks name over sub */
.team-main{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	padding-left: 10px;
}
/* Text styles (ensure they behave as rows) */
.team-name{
	display: block;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}
.team-sub{
	display: block;
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 10px;
}
/* Small screens */
@media (max-width: 420px){
	.team-card{
		grid-template-columns: 48px 1fr auto;
	}
	.team-badge{
		width:48px;
		height:48px;
		padding: 6px;
		padding-top: 3px;
	}
}
/* Compact tweaks for very small screens */
@media (max-width: 420px){
	.team-card{
		grid-template-columns: 48px 1fr auto;
		padding: 0px 10px;
		padding-right: 0px;
	}
	.team-badge{
		width: 48px;
		height: 48px;
	}
}
/* Empty */
.empty{
	padding:16px;
	text-align:center;
	color:var(--muted)
}
/* Loader (blob) */
#loadingOverlay{
	position:fixed;
	inset:0;
	display:none;
	place-items:center;
	z-index:9998;
	opacity:0;
	pointer-events:none;
	transition:opacity .32s ease;
	background:radial-gradient(120% 80% at 50% 20%, rgba(35,197,94,.12), rgba(35,197,94,0) 45%),rgba(6,10,12,.45);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
}
#loadingOverlay .blob-loader{
	width:64px;
	aspect-ratio:1;
	position:relative;
	border-radius:50%;
	background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),linear-gradient(135deg, rgba(35,197,94,.55), rgba(35,197,94,.28));
	border:1px solid rgba(255,255,255,.28);
	box-shadow: inset 0 2px 14px rgba(255,255,255,.18), 0 10px 30px rgba(35,197,94,.35), 0 0 0 1px rgba(0,0,0,.18);
	animation: blob-morph 3s linear infinite, blob-float 2.8s ease-in-out infinite alternate;
}
#loadingOverlay .blob-loader::before,#loadingOverlay .blob-loader::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	pointer-events:none
}
#loadingOverlay .blob-loader::before{
	inset:6%;
	background: radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
	mix-blend-mode: screen;
	filter: blur(2px);
}
#loadingOverlay .blob-loader::after{
	background: conic-gradient(from 200deg at 70% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
	opacity:.7;
	filter: blur(4px);
}
@keyframes blob-morph{
	12.5% {
		border-radius:37% 63% 70% 30% / 30% 62% 38% 70%
}
	25% {
		border-radius:50% 50% 70% 30% / 52% 62% 38% 48%
}
	37.5% {
		border-radius:33% 67% 18% 82% / 52% 75% 25% 48%
}
	50% {
		border-radius:73% 27% 18% 82% / 52% 32% 68% 48%
}
	62.5% {
		border-radius:73% 27% 74% 26% / 64% 32% 68% 36%
}
	75% {
		border-radius:84% 16% 15% 85% / 55% 79% 21% 45%
}
	87.5% {
		border-radius:12% 88% 69% 31% / 10% 66% 34% 90%
}
}
@keyframes blob-float{
	from{
		transform:translateY(-4px)
}
	to{
		transform:translateY(6px)
}
}
.sr-only{
	position:absolute!important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0
}
/* subtle green border for rating */
.team-right .small-chip {
	border-color: rgba(35,197,94,.35);
}
/* Card */
.card{
	background:var(--card);
	border:1px solid rgba(0,0,0,.08);
	box-shadow:var(--ring);
}
.meta{
	color:var(--muted);
}
/* Chips */
.chip{
	background:#ffffff;
	color:var(--text);
}
/* Searchbar */
.searchbar{
	background:#ffffff;
	border:1px solid rgba(0,0,0,.12);
}
.searchbar input{
	color:var(--text);
}
.searchbar button{
	color:#475569;
}
.searchbar button:hover{
	background:rgba(0,0,0,.06);
}
button {
	border:0px solid rgba(0,0,0,.12);
}
.search-icon{
	color:#64748b;
}
.small-chip{
	border:1px solid rgba(0,0,0,.16);
	color:#334155;
}
/* subtle green border for rating */
.team-right .small-chip{
	border-color:rgba(35,197,94,.45);
}
/* Empty state */
.empty{
	color:var(--muted);
}
/* Loader (light variant) */
#loadingOverlay{
	background:radial-gradient(120% 80% at 50% 20%, rgba(35,197,94,.10), rgba(35,197,94,0) 45%),rgba(255,255,255,.55);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}
#loadingOverlay .blob-loader{
	background:radial-gradient(120% 120% at 30% 20%, rgba(0,0,0,.10), rgba(0,0,0,0) 40%),linear-gradient(135deg, rgba(35,197,94,.45), rgba(35,197,94,.22));
	border:1px solid rgba(0,0,0,.12);
	box-shadow: inset 0 2px 12px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.08);
}
/* Misc surface/borders used elsewhere */
.brand h1{
	color:var(--text);
}
/* Make the blue right column a container so its children can size to it */
.team-right{
	container-type: size;
	/* enables cqw/cqh units inside */
	display:flex;
	align-items:center;
	justify-content:flex-end;
	padding-right: 10px;
}
/* Replace the small-chip “pill” with a bold, no-border figure */
.team-right .small-chip{
	border: 0;
	/* no border */
	background: transparent;
	/* let your blue bg show */
	color: #fff;
	/* strong contrast on blue */
	font-weight: 900;
	/* chunky */
	letter-spacing: -0.02em;
	line-height: 0.9;
	/* dense vertical fit */
	padding: 0;
	/* let text touch the edges visually */
	display: block;
	/* Scale to the container’s height/width (modern Chrome/Edge/Safari) */
	font-size: 60cqh;
	/* ~60% of the column height */
	max-width: 95%;
	/* avoid accidental overflow on long text */
	text-align: right;
	text-transform: uppercase;
	/* subtle glow for readability on any blue */
	text-shadow: 0 2px 6px rgba(0,0,0,.28);
}
/* Fallback for browsers without container units */
@supports not (font-size: 1cqh){
	.team-right .small-chip{
		font-size: clamp(16px, 6vw, 28px);
	}
}
.team-right{
	justify-self: stretch;
	/* occupy the full 3rd column width */
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* push text to the far right */
	padding-right: 5px;
	/* no gap on the right edge */
	container-type: size;
	/* keep your cqh font sizing */
}
.team-right {
	justify-self: stretch;
	display: flex;
	align-items: center;
	/* centers vertically */
	justify-content: center;
	/* centers horizontally */
	padding: 0;
	position: relative;
	container-type: size;
}
.team-right::before {
	content: "";
	position: absolute;
	inset: 0;
	background: darkgrey;
	clip-path: polygon(var(--slant) 0,100% 0,100% 100%,0 100%);
	z-index: -1;
}
/* Fill text nicely inside the blue shape */
.team-right .small-chip {
	border: 0;
	background: transparent;
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.9;
	padding: 0;
	display: flex;
	/* centers text inside itself */
	align-items: center;
	justify-content: center;
	width: 100%;
	/* span the container */
	height: 100%;
	font-size: 60cqh;
	/* fill height proportionally */
	text-shadow: 0 2px 6px rgba(0,0,0,.28);
	padding-left: 10px;
	font-style: italic;
}
@supports not (font-size: 1cqh){
	.team-right .small-chip {
		font-size: clamp(16px, 6vw, 28px);
	}
}
.team-badge {
	width: 56px;
	height: 100%;
	/* fill the card’s row height */
	display: flex;
	/* enable flex alignment */
	align-items: center;
	/* center vertically */
	justify-content: center;
	/* center horizontally */
	position: relative;
	padding: 0;
}
.team-badge::before {
	background: transparent;
	clip-path: polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
	position: absolute;
	inset: 0;
	content: "";
	z-index: -1;
}
.team-badge img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
}
/* --- Chip Strip (filter-bar style with underline animation) --- */
.chip-strip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 6px 5px 10px;
	padding: 6px 2px 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	white-space: nowrap;
}
.chip-strip::-webkit-scrollbar {
	display: none;
}
/* 🔹 Animated underline bar */
.chip-strip .underline {
	position: absolute;
	bottom: 0;
	height: 2px;
	left: 0;
	width: 0;
	background: #69be28;
	transition: left .25s ease, width .25s ease;
}
/* 🔹 Base chip (keeps your design) */
.chip-strip .chip {
	position: relative;
	background: none;
	color: #111827;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 12px;
	white-space: nowrap;
	font-size: 14px;
}
/* Active chip changes text color */
.chip-strip .chip.active {
	color:black;
}
/* Optional hover feedback */
.chip-strip .chip:hover:not(.active) {
	color: black;
}