@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@400;600;700&display=swap');

:root {
	--neon-blue: #47d6ff;
	--neon-orange: #ff9f43;
	--glass-bg: rgba(15, 28, 58, 0.72);
	--glass-border: rgba(71, 214, 255, 0.2);
}

body {
	margin: 0;
	font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
	background: #050816;
	color: #fff;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	z-index: 0;
	background-image: var(--action-bg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(71, 214, 255, 0.12), transparent 55%),
		radial-gradient(circle at 80% 10%, rgba(255, 159, 67, 0.12), transparent 50%);
	z-index: -2;
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(5, 8, 22, 0.72);
	backdrop-filter: blur(2px);
	z-index: -1;
}

.container { max-width: 1200px; margin: 0 auto; padding: 28px 24px 40px; position: relative; z-index: 1; }
.card {
	background: var(--glass-bg);
	border-radius: 18px;
	padding: 18px;
	margin-bottom: 18px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.35);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(24, 42, 78, 0.85), rgba(34, 56, 110, 0.9)); border: 1px solid rgba(255,255,255,0.12); position: relative; overflow: hidden; min-height: 160px; }
.hero-header.has-banner { background: #121c3a; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.05) contrast(1.05); transform: scale(1.02); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(6, 12, 28, 0.92), rgba(6, 12, 28, 0.55) 60%, rgba(6, 12, 28, 0.25)); }
.hero-left { display: flex; align-items: center; gap: 16px; }
.hero-left, .hero-text { position: relative; z-index: 1; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; margin-left: auto; }

.hero-action {
	text-decoration: none;
	color: #0b1637;
	background: #ffffff;
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.92rem;
	line-height: 1;
	position: relative;
	overflow: hidden;
	border: 1px solid #ffffff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 24px rgba(0,0,0,0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hero-action:visited { color: #0b1637; }
.hero-action::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(71, 214, 255, 0.15), rgba(255, 159, 67, 0.18));
	opacity: 0;
	transition: opacity 0.2s ease;
}
.hero-action:hover {
	transform: translateY(-2px);
	border-color: rgba(71, 214, 255, 0.6);
	box-shadow: 0 16px 30px rgba(0,0,0,0.45);
}
.hero-action:hover::after { opacity: 1; }
.hero-action:active { transform: translateY(0); filter: brightness(0.98); }
.hero-action.primary {
	background: #ffffff;
	color: #0b1637;
	border-color: #ffffff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 28px rgba(0,0,0,0.45), 0 0 24px rgba(71, 214, 255, 0.25);
}
.hero-action.primary:visited { color: #0b1637; }
.logo-badge { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 246, 210, 0.95), rgba(255, 159, 67, 0.9)); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.2); }
.logo-img { width: 54px; height: auto; display: block; }
.hero-text { display: flex; flex-direction: column; gap: 4px; }
.hero-kicker { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: #f3d597; font-weight: 700; }
.hero-title { margin: 0; font-size: 2rem; font-family: 'Orbitron', 'Rajdhani', sans-serif; letter-spacing: 0.02em; }
.hero-subtitle { color: #e6edf7; font-size: 0.98rem; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: #f4f7ff; background: rgba(255,255,255,0.08); padding: 9px 12px; border-radius: 10px; font-weight: 600; position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.12); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.nav a::before { content: ''; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); border: 1px solid var(--neon-blue); box-shadow: 0 0 6px rgba(71, 214, 255, 0.6); }
.nav a.active { background: rgba(71, 214, 255, 0.2); border-color: rgba(71, 214, 255, 0.5); box-shadow: 0 0 16px rgba(71, 214, 255, 0.35); }
.nav a:hover { transform: translateY(-2px); border-color: rgba(255, 159, 67, 0.6); box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: rgba(8, 18, 40, 0.6); border-radius: 14px; padding: 12px; border: 1px solid rgba(255,255,255,0.08); }
.stat .value { font-size: 1.35rem; font-weight: 700; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid rgba(255,255,255,0.15); padding: 8px; text-align: left; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.16); font-size: 12px; }
.meta { color: #d1d5db; font-size: 0.92rem; }
.item { background: rgba(8, 18, 40, 0.6); border-radius: 14px; padding: 14px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.08); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.item:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(0,0,0,0.35); border-color: rgba(255, 159, 67, 0.5); }
.item-list { display: flex; flex-direction: column; gap: 10px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.page-roster .item { padding-left: 70px; min-height: 64px; position: relative; }
.page-roster .item::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: rgba(255,255,255,0.08);
	background-image: var(--team-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	box-shadow: 0 0 12px rgba(71, 214, 255, 0.35);
}

a.button { display: inline-block; text-decoration: none; background: linear-gradient(135deg, rgba(71, 214, 255, 0.9), rgba(255, 159, 67, 0.9)); color: #081228; font-weight: 700; padding: 10px 14px; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.35); }

a.button:hover { filter: brightness(1.05); }

@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }