/* ============================================
   FIFA Online Hype — Style Configuration
   ============================================ */

/* -------- Layout & Utilities -------- */
.skew-12 { transform: skewX(-12deg); }
.unskew-12 { transform: skewX(12deg); }
.skew-12-reverse { transform: skewX(12deg); }

/* -------- Glass Panel -------- */
.glass-panel {
	background: rgba(17, 20, 18, 0.6);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(186, 200, 220, 0.1);
}

/* -------- Volt Glow Effects -------- */
.volt-glow:hover {
	box-shadow: 0 0 20px rgba(195, 244, 0, 0.3);
}
.volt-glow:focus-within {
	box-shadow: 0 0 15px rgba(195, 244, 0, 0.3);
	border-color: #c3f400 !important;
}

/* -------- CTA Button Glow -------- */
.cta-glow {
	transition: box-shadow 0.2s ease;
}
.cta-glow:hover {
	box-shadow: 0 0 28px rgba(195, 244, 0, 0.6),
				0 0 60px rgba(195, 244, 0, 0.2);
}
.cta-glow:active {
	box-shadow: 0 0 14px rgba(195, 244, 0, 0.4);
}

/* -------- Input Focus -------- */
.input-gradient-focus:focus-within {
	border-left: 4px solid #c3f400;
}

/* -------- Diagonal Dividers -------- */
.diagonal-divider {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.diagonal-divider-reverse {
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}
.diagonal-cut {
	clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

/* -------- Player Card -------- */
.player-card-gradient {
	background: linear-gradient(180deg, #bac8dc 0%, #0f1a2e 100%);
}

/* -------- Stat Bars -------- */
.stat-bar {
	height: 4px;
	background: #333533;
	position: relative;
	overflow: hidden;
}
.stat-bar-fill {
	height: 100%;
	background: #c3f400;
}

/* -------- Stadium Overlay -------- */
.stadium-overlay {
	background: linear-gradient(180deg, rgba(17, 20, 18, 0.4) 0%, rgba(17, 20, 18, 0.95) 100%);
}

/* -------- Material Icons -------- */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
}