/* =========================================================
   TOP INVASIONES - Diseño V2
   Solo presentación. No altera lógica ni datos del ranking.
   ========================================================= */

.inv-main-tabs{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:9px;
	margin:14px 0 12px;
	padding:12px;
	background:
		radial-gradient(circle at 50% -30%,rgba(46,135,192,.16),transparent 48%),
		linear-gradient(180deg,#0b1a27 0%,#06111b 100%);
	border:1px solid #2a465d;
	border-radius:7px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.04),
		0 8px 20px rgba(0,0,0,.30);
}

.inv-main-tabs a{
	--inv-accent:#48bff3;
	--inv-top:#15354a;
	--inv-bottom:#091c2b;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:43px;
	padding:9px 10px 8px;
	overflow:hidden;
	border:1px solid color-mix(in srgb,var(--inv-accent) 48%,#294255);
	border-radius:5px;
	background:
		linear-gradient(180deg,rgba(255,255,255,.055),transparent 38%),
		linear-gradient(180deg,var(--inv-top),var(--inv-bottom));
	color:#c7d7e3!important;
	font-size:11px;
	font-weight:800;
	line-height:14px;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:.35px;
	text-shadow:0 1px 2px #000;
	text-decoration:none!important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.05),
		inset 0 -6px 12px rgba(0,0,0,.20),
		0 3px 8px rgba(0,0,0,.20);
	transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,filter .16s ease;
}

.inv-main-tabs a::before{
	content:"";
	position:absolute;
	left:10px;
	right:10px;
	top:0;
	height:2px;
	background:linear-gradient(90deg,transparent,var(--inv-accent),transparent);
	opacity:.55;
	box-shadow:0 0 8px var(--inv-accent);
}

.inv-main-tabs a::after{
	content:"";
	position:absolute;
	width:46px;
	height:46px;
	right:-18px;
	bottom:-24px;
	border-radius:50%;
	background:var(--inv-accent);
	opacity:.055;
	filter:blur(2px);
	transition:opacity .16s ease,transform .16s ease;
}

.inv-main-tabs a:hover{
	transform:translateY(-2px);
	color:#fff!important;
	border-color:var(--inv-accent);
	filter:brightness(1.10);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.09),
		inset 0 0 14px color-mix(in srgb,var(--inv-accent) 12%,transparent),
		0 5px 13px rgba(0,0,0,.32),
		0 0 10px color-mix(in srgb,var(--inv-accent) 20%,transparent);
}

.inv-main-tabs a:hover::after{
	opacity:.13;
	transform:scale(1.18);
}

.inv-main-tabs a.active{
	color:#fff!important;
	border-color:var(--inv-accent);
	background:
		linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%),
		linear-gradient(180deg,var(--inv-top),var(--inv-bottom));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.12),
		inset 0 0 19px color-mix(in srgb,var(--inv-accent) 18%,transparent),
		0 0 0 1px color-mix(in srgb,var(--inv-accent) 20%,transparent),
		0 0 13px color-mix(in srgb,var(--inv-accent) 28%,transparent),
		0 5px 12px rgba(0,0,0,.32);
}

.inv-main-tabs a.active::before{
	height:3px;
	opacity:1;
}

/* Acentos por boss principal */
.inv-main-tabs a:nth-child(1){--inv-accent:#e6b94b;--inv-top:#473617;--inv-bottom:#1d1609;} /* Golden */
.inv-main-tabs a:nth-child(2){--inv-accent:#58d0ff;--inv-top:#173c51;--inv-bottom:#0a202d;} /* Wizard */
.inv-main-tabs a:nth-child(3){--inv-accent:#b894ff;--inv-top:#35294d;--inv-bottom:#181123;} /* Skeleton */
.inv-main-tabs a:nth-child(4){--inv-accent:#ff6a61;--inv-top:#482222;--inv-bottom:#211010;} /* Red Dragon */
.inv-main-tabs a:nth-child(5){--inv-accent:#e26cff;--inv-top:#432448;--inv-bottom:#211023;} /* Medusa */
.inv-main-tabs a:nth-child(6){--inv-accent:#ffc857;--inv-top:#493817;--inv-bottom:#211807;} /* Golden Kundun */
.inv-main-tabs a:nth-child(7){--inv-accent:#ff4f78;--inv-top:#4a1f2d;--inv-bottom:#230c14;} /* Phoenix */
.inv-main-tabs a:nth-child(8){--inv-accent:#59d9aa;--inv-top:#193d32;--inv-bottom:#0b2019;} /* Protectores */
.inv-main-tabs a:nth-child(9){--inv-accent:#75c7ff;--inv-top:#1a354b;--inv-bottom:#0b1b28;} /* Selupan */
.inv-main-tabs a:nth-child(10){--inv-accent:#ff9b50;--inv-top:#49301c;--inv-bottom:#21150c;} /* Ferea */
.inv-main-tabs a:nth-child(11){--inv-accent:#d8b15d;--inv-top:#41351d;--inv-bottom:#1d170c;} /* Kundun */
.inv-main-tabs a:nth-child(12){--inv-accent:#63e0df;--inv-top:#193b3d;--inv-bottom:#0b1e20;} /* Nixie */
.inv-main-tabs a:nth-child(13){--inv-accent:#8a8fff;--inv-top:#2c2d4d;--inv-bottom:#141526;} /* Nightmare */

/* Submenús: Golden / Protectores */
.inv-sub-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0 0 13px;
	padding:9px;
	border:1px solid #263d50;
	border-radius:5px;
	background:linear-gradient(180deg,#081722,#06111a);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.inv-sub-tabs a{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:31px;
	padding:6px 10px;
	border:1px solid #2e4a60;
	border-radius:4px;
	background:linear-gradient(180deg,#10283a,#091923);
	color:#9db6c8!important;
	font-size:10px;
	font-weight:700;
	text-decoration:none!important;
	text-shadow:0 1px 1px #000;
	transition:.15s ease;
}

.inv-sub-tabs a:hover{
	transform:translateY(-1px);
	border-color:#5dc7f2;
	color:#fff!important;
	background:linear-gradient(180deg,#16364b,#0b2230);
	box-shadow:0 0 8px rgba(64,190,239,.16);
}

.inv-sub-tabs a.active{
	border-color:#e6b94b;
	color:#ffe7a5!important;
	background:linear-gradient(180deg,#493717,#201708);
	box-shadow:
		inset 0 0 10px rgba(230,185,75,.08),
		0 0 9px rgba(230,185,75,.16);
}

/* Cabecera del ranking seleccionado */
.inv-ranking-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin:14px 0 8px;
	padding:10px 12px;
	border:1px solid #294357;
	border-left:4px solid #d9ad43;
	border-radius:4px;
	background:
		linear-gradient(90deg,rgba(217,173,67,.08),transparent 35%),
		linear-gradient(180deg,#0b1d2a,#081620);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.inv-ranking-head span{
	color:#718da1;
	font-size:10px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:1.1px;
}

.inv-ranking-head strong{
	color:#f4d274;
	font-size:14px;
	font-weight:800;
	text-shadow:0 0 8px rgba(217,173,67,.15);
}

.inv-ranking-table .inv-kills{
	font-weight:900;
	color:#f4d273;
	text-shadow:0 0 7px rgba(244,210,115,.10);
}

.inv-ranking-table .inv-empty{
	padding:24px!important;
	text-align:center;
	color:#7892a6;
}

.inv-ranking-table img{max-width:32px}

@media(max-width:900px){
	.inv-main-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:650px){
	.inv-main-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* TOP GOLDEN - todos los subbotones en dorado */
.inv-main-tabs + .inv-sub-tabs a,
.inv-sub-tabs.inv-golden-tabs a {
	border-color:#8f6a20;
	background:
		linear-gradient(180deg,rgba(255,255,255,.055),transparent 38%),
		linear-gradient(180deg,#493817,#211707);
	color:#e7c56d!important;
	box-shadow:
		inset 0 1px 0 rgba(255,231,157,.08),
		inset 0 -5px 10px rgba(0,0,0,.22),
		0 2px 6px rgba(0,0,0,.22);
}

.inv-main-tabs + .inv-sub-tabs a:hover,
.inv-sub-tabs.inv-golden-tabs a:hover {
	border-color:#f0c85c;
	color:#fff0b3!important;
	background:
		linear-gradient(180deg,#624b1d,#2b1e08);
	box-shadow:
		inset 0 0 10px rgba(240,200,92,.10),
		0 0 10px rgba(240,200,92,.20);
}

.inv-main-tabs + .inv-sub-tabs a.active,
.inv-sub-tabs.inv-golden-tabs a.active {
	border-color:#ffd86a;
	color:#fff4c2!important;
	background:
		linear-gradient(180deg,#6b511d,#302108);
	box-shadow:
		inset 0 0 13px rgba(255,216,106,.13),
		0 0 11px rgba(255,216,106,.24);
}