/* EA FC Ultimate Team Inspired Styles & Theme Utilities */
:root {
  --fc-green: #00ff87;
  --fc-cyan: #00d2ff;
  --fc-gold: #ffd000;
  --fc-red: #ff3366;
  --fc-dark: #070b14;
  --fc-navy: #0c1424;
  --fc-card-bg: rgba(16, 26, 48, 0.7);
}

/* Typography & Custom Colors without tailwind.config */
.font-tajawal { font-family: 'Tajawal', sans-serif; }
.font-fc { font-family: 'Chakra Petch', 'Tajawal', sans-serif; }

.bg-fcDark { background-color: #070b14; }
.bg-fcNavy { background-color: #0c1424; }
.bg-fcCard { background-color: #111c33; }

.bg-fcGreen { background-color: #00ff87; }
.bg-fcGreen\/10 { background-color: rgba(0, 255, 135, 0.1); }
.bg-fcGreen\/20 { background-color: rgba(0, 255, 135, 0.2); }

.bg-fcCyan { background-color: #00d2ff; }
.bg-fcCyan\/10 { background-color: rgba(0, 210, 255, 0.1); }
.bg-fcCyan\/20 { background-color: rgba(0, 210, 255, 0.2); }

.bg-fcGold\/20 { background-color: rgba(255, 208, 0, 0.2); }
.bg-fcRed\/20 { background-color: rgba(255, 51, 102, 0.2); }

.text-fcGreen { color: #00ff87; }
.text-fcCyan { color: #00d2ff; }
.text-fcGold { color: #ffd000; }
.text-fcRed { color: #ff3366; }

.border-fcGreen { border-color: #00ff87; }
.border-fcGreen\/30 { border-color: rgba(0, 255, 135, 0.3); }
.border-fcGreen\/40 { border-color: rgba(0, 255, 135, 0.4); }
.border-fcGreen\/50 { border-color: rgba(0, 255, 135, 0.5); }
.border-r-fcGreen { border-right-color: #00ff87; }

.border-fcCyan { border-color: #00d2ff; }
.border-r-fcCyan { border-right-color: #00d2ff; }

.border-fcGold { border-color: #ffd000; }
.border-fcGold\/40 { border-color: rgba(255, 208, 0, 0.4); }
.border-r-fcGold { border-right-color: #ffd000; }

.border-r-fcRed { border-right-color: #ff3366; }

.hover\:border-fcGreen:hover { border-color: #00ff87; }
.hover\:border-fcCyan:hover { border-color: #00d2ff; }
.hover\:bg-fcGreen:hover { background-color: #00ff87; }
.hover\:text-fcGreen:hover { color: #00ff87; }

.from-fcGreen { --tw-gradient-from: #00ff87 var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 255 135 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-fcCyan { --tw-gradient-to: #00d2ff var(--tw-gradient-to-position); }
.to-fcGreen { --tw-gradient-to: #00ff87 var(--tw-gradient-to-position); }

::selection {
  background-color: #00ff87;
  color: #000000;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #070b14;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00ff87;
}

/* Base Card Styling with chamfered look */
.fc-card {
  background: var(--fc-card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}

.fc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.4), transparent);
  pointer-events: none;
}

/* Tabs */
.tab-btn.active-tab {
  background: linear-gradient(135deg, rgba(0, 255, 135, 0.2), rgba(0, 210, 255, 0.15));
  border: 1px solid rgba(0, 255, 135, 0.5);
  color: #00ff87;
  box-shadow: 0 0 15px rgba(0, 255, 135, 0.2);
}

.tab-btn.inactive-tab {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}
.tab-btn.inactive-tab:hover {
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Formation selector buttons */
.formation-selector.active-selector {
  background: #00ff87;
  color: #000;
  box-shadow: 0 0 15px rgba(0, 255, 135, 0.4);
}
.formation-selector.inactive-selector {
  background: #1e293b;
  color: #94a3b8;
}

/* Filter buttons */
.combo-filter-btn.active-filter {
  background: #00ff87;
  color: #000;
}

/* Platform toggle buttons */
.platform-toggle-btn.active-platform {
  background: linear-gradient(135deg, rgba(0, 255, 135, 0.25), rgba(0, 210, 255, 0.2));
  color: #00ff87;
  border: 1px solid rgba(0, 255, 135, 0.6);
  box-shadow: 0 0 10px rgba(0, 255, 135, 0.25);
}
.platform-toggle-btn.inactive-platform {
  background: transparent;
  color: #94a3b8;
  border: 1px solid transparent;
}
.platform-toggle-btn.inactive-platform:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

/* Xbox active toggle styling */
.platform-toggle-btn.active-xbox {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(34, 197, 94, 0.25)) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.8) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

/* Xbox Face Button specific colors */
.btn-xbox-y {
  border-color: rgba(251, 191, 36, 0.8) !important;
  color: #fbbf24 !important;
}
.btn-xbox-b {
  border-color: rgba(244, 63, 94, 0.8) !important;
  color: #f43f5e !important;
}
.btn-xbox-a {
  border-color: rgba(52, 211, 153, 0.8) !important;
  color: #34d399 !important;
}
.btn-xbox-x {
  border-color: rgba(56, 189, 248, 0.8) !important;
  color: #38bdf8 !important;
}

/* Controller interactive highlighting */
.ps-active-highlight {
  border-color: #00ff87 !important;
  background-color: rgba(0, 255, 135, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px #00ff87, inset 0 0 8px #00ff87 !important;
  transform: scale(1.08);
}

.ps-secondary-highlight {
  border-color: #00d2ff !important;
  background-color: rgba(0, 210, 255, 0.35) !important;
  box-shadow: 0 0 12px #00d2ff !important;
  transform: scale(1.05);
}

/* Touch targets and Native feel */
button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Pitch Tactical Board Mini View */
.pitch-board {
  background: radial-gradient(circle at center, #0f2d1e 0%, #08170f 100%);
  border: 2px solid rgba(0, 255, 135, 0.25);
  position: relative;
  overflow: hidden;
}

.pitch-line-half {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 255, 135, 0.2);
}

.pitch-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 135, 0.2);
}

.pitch-penalty-top {
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 40px;
  border-bottom: 1px solid rgba(0, 255, 135, 0.2);
  border-left: 1px solid rgba(0, 255, 135, 0.2);
  border-right: 1px solid rgba(0, 255, 135, 0.2);
}

.pitch-penalty-bottom {
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 40px;
  border-top: 1px solid rgba(0, 255, 135, 0.2);
  border-left: 1px solid rgba(0, 255, 135, 0.2);
  border-right: 1px solid rgba(0, 255, 135, 0.2);
}