/* ===============================
   DESIGN THEMES
   =============================== */

/* 9. Neon Grid (DEFAULT) */
body.design-neon-grid {
  background: #001220;
  color: #66e3ff;
  font-family: Rajdhani, Orbitron, sans-serif;
}
body.design-neon-grid:before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
      90deg,
      transparent 0,
      transparent calc(100% - 1px),
      rgba(102, 227, 255, 0.12) calc(100% - 1px),
      rgba(102, 227, 255, 0.12) 100%
    )
    0 0 / 80px 100%,
    linear-gradient(
      0deg,
      transparent 0,
      transparent calc(100% - 1px),
      rgba(102, 227, 255, 0.12) calc(100% - 1px),
      rgba(102, 227, 255, 0.12) 100%
    )
    0 0 / 100% 80px;
  perspective: 600px;
  transform: rotateX(65deg) scale(1.4);
  transform-origin: 50% 100%;
  opacity: 0.5;
}
body.design-neon-grid .wrap {
  position: relative;
  z-index: 1;
}
body.design-neon-grid header {
  background: rgba(0, 18, 32, 0.85);
  border: 2px solid #66e3ff;
  box-shadow: 0 0 30px rgba(102, 227, 255, 0.4), inset 0 0 30px rgba(102, 227, 255, 0.08);
  backdrop-filter: blur(10px);
}

/* Gaming theme purple propeller */
body.design-gaming .logo {
  background: radial-gradient(circle at center, #1a1a2e 0%, #0f1629 100%);
  box-shadow: 0 0 30px rgba(187, 85, 255, 0.6);
}

body.design-gaming .logo .propeller-blades {
  filter: drop-shadow(0 0 12px rgba(187, 85, 255, 0.8));
}

body.design-gaming .logo:hover {
  box-shadow: 0 0 40px rgba(187, 85, 255, 0.9);
}

body.design-gaming .logo:hover .propeller-blades {
  filter: drop-shadow(0 0 20px rgba(187, 85, 255, 1));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
body.design-neon-grid h1 {
  color: #66e3ff;
  text-shadow: 0 0 10px rgba(102, 227, 255, 1), 0 0 20px rgba(102, 227, 255, 0.8),
    0 0 30px rgba(102, 227, 255, 0.5);
  font-weight: 700;
}
body.design-neon-grid .subtitle {
  color: #ff66e3;
  text-shadow: 0 0 10px rgba(255, 102, 227, 0.8);
}
body.design-neon-grid nav a,
body.design-neon-grid .race-nav-btn {
  background: rgba(102, 227, 255, 0.08);
  border: 2px solid #66e3ff;
  color: #66e3ff;
  text-shadow: 0 0 5px rgba(102, 227, 255, 0.5);
  font-weight: 600;
}
body.design-neon-grid nav a:hover,
body.design-neon-grid nav a.active,
body.design-neon-grid .race-nav-btn:hover:not(:disabled) {
  background: #66e3ff;
  color: #001220;
  box-shadow: 0 0 20px rgba(102, 227, 255, 0.8);
  text-shadow: none;
}
body.design-neon-grid .card,
body.design-neon-grid .podium-card,
body.design-neon-grid .race-period {
  background: rgba(0, 18, 32, 0.7);
  border: 2px solid #66e3ff;
  box-shadow: 0 0 20px rgba(102, 227, 255, 0.25);
  backdrop-filter: blur(8px);
}
body.design-neon-grid .card h3,
body.design-neon-grid .race-period h3 {
  color: #ff66e3;
  text-shadow: 0 0 10px rgba(255, 102, 227, 0.7);
}
body.design-neon-grid .card .v,
body.design-neon-grid .race-period .period-dates {
  color: #66e3ff;
  text-shadow: 0 0 8px rgba(102, 227, 255, 0.6);
  font-weight: 600;
}
body.design-neon-grid thead th {
  color: #66e3ff;
  text-shadow: 0 0 10px rgba(102, 227, 255, 0.6);
  font-weight: 700;
}
body.design-neon-grid tbody td {
  background: rgba(0, 18, 32, 0.8);
  border: 1px solid rgba(102, 227, 255, 0.3);
  color: #66e3ff;
  font-size: 15px;
  text-shadow: 0 0 3px rgba(102, 227, 255, 0.3);
}
body.design-neon-grid tbody tr:hover td {
  background: rgba(0, 25, 45, 0.95);
  border-color: #66e3ff;
  box-shadow: 0 0 20px rgba(102, 227, 255, 0.4);
  text-shadow: 0 0 5px rgba(102, 227, 255, 0.5);
}
body.design-neon-grid .pos {
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(102, 227, 255, 0.7);
}
body.design-neon-grid .name {
  font-weight: 700;
}
body.design-neon-grid .badge {
  background: rgba(0, 18, 32, 0.8);
  border: 1px solid #66e3ff;
  color: #66e3ff;
  text-shadow: 0 0 5px rgba(102, 227, 255, 0.5);
  font-weight: 700;
  padding: 4px 10px;
}
body.design-neon-grid .badge.good {
  background: #34c759;
  color: #001220;
  border-color: #34c759;
  box-shadow: 0 0 10px rgba(52, 199, 89, 0.6);
  text-shadow: none;
}
body.design-neon-grid .badge.bad {
  background: #ff3b30;
  color: #fff;
  border-color: #ff3b30;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.6);
  text-shadow: none;
}
body.design-neon-grid .podium-card.first .position {
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}
body.design-neon-grid .podium-card.second .position {
  border-color: #c0c0c0;
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.6);
}
body.design-neon-grid .podium-card.third .position {
  border-color: #cd7f32;
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.6);
}

/* 10. Gaming Leaderboard */
body.design-gaming {
  background: linear-gradient(135deg, #232323 0%, #160813 50%, #2a3647 100%);
  color: #e8eef5;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  position: relative;
}

body.design-gaming::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 4px);
  background-size: 50px 50px;
}

body.design-gaming .wrap {
  position: relative;
  z-index: 1;
}

body.design-gaming header {
  background: rgba(25, 30, 45, 0.95);
  border: 2px solid rgba(100, 110, 130, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 20px;
}

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
  }
}

body.design-gaming h1 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  font-weight: 800;
}

body.design-gaming .subtitle {
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

body.design-gaming nav a,
body.design-gaming .race-nav-btn {
  background: rgba(35, 42, 58, 0.8);
  border: 2px solid rgba(100, 110, 130, 0.4);
  color: #e8eef5;
  font-weight: 600;
  text-shadow: none;
  border-radius: 14px;
}

body.design-gaming nav a:hover,
body.design-gaming nav a.active,
body.design-gaming .race-nav-btn:hover:not(:disabled) {
  background: rgba(45, 55, 75, 0.9);
  border-color: rgba(120, 140, 170, 0.6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

body.design-gaming .race-nav {
  background: rgba(25, 30, 45, 0.9);
  border: 2px solid rgba(100, 110, 130, 0.3);
  border-radius: 20px;
}

body.design-gaming .card,
body.design-gaming .race-period {
  background: rgba(25, 30, 45, 0.9);
  border: 2px solid rgba(100, 110, 130, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

body.design-gaming .card h3,
body.design-gaming .race-period h3 {
  font: 700 14px Orbitron, sans-serif;
  color: var(--accent);
  font-weight: 700;
}

body.design-gaming .card .v,
body.design-gaming .race-period .period-dates {
  color: #ffffff;
  font-weight: 600;
}

/* Podium Styling */
body.design-gaming .podium-card {
  background: rgba(25, 30, 45, 0.95);
  border: 2px solid rgba(100, 110, 130, 0.4);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

body.design-gaming .podium-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
  border-color: rgba(120, 140, 170, 0.6);
}

body.design-gaming .podium-card.first {
  background: linear-gradient(135deg, rgba(40, 35, 25, 0.95), rgba(30, 25, 20, 0.95));
  border-color: rgba(255, 215, 0, 0.5);
}

body.design-gaming .podium-card.first .position {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #1a1410;
  border-color: #ffd700;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
  animation: pulseGold 2s ease-in-out infinite;
}

body.design-gaming .podium-card.second {
  background: linear-gradient(135deg, rgba(30, 35, 42, 0.95), rgba(25, 28, 35, 0.95));
  border-color: rgba(192, 192, 192, 0.5);
}

body.design-gaming .podium-card.second .position {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #1a1a1a;
  border-color: #c0c0c0;
  box-shadow: 0 0 30px rgba(192, 192, 192, 0.6);
}

body.design-gaming .podium-card.third {
  background: linear-gradient(135deg, rgba(35, 28, 25, 0.95), rgba(28, 22, 20, 0.95));
  border-color: rgba(205, 127, 50, 0.5);
}

body.design-gaming .podium-card.third .position {
  background: linear-gradient(135deg, #cd7f32, #e89a5a);
  color: #fff;
  border-color: #cd7f32;
  box-shadow: 0 0 30px rgba(205, 127, 50, 0.6);
}

body.design-gaming .podium-card .avatar {
  border-color: rgba(100, 110, 130, 0.6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.design-gaming .podium-card .driver-name {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

body.design-gaming .podium-card .time {
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  font-weight: 700;
}

body.design-gaming .podium-card .country {
  color: #a0b0c0;
}

/* Table Styling */
body.design-gaming table {
  border-spacing: 0 10px;
}

body.design-gaming thead th {
  font: 700 14px Orbitron, sans-serif;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 2px;
}

body.design-gaming tbody td {
  background: rgba(25, 30, 45, 0.9);
  border-top: 1px solid rgba(100, 110, 130, 0.3);
  border-bottom: 1px solid rgba(100, 110, 130, 0.3);
  backdrop-filter: blur(8px);
  color: #e8eef5;
}

body.design-gaming tbody td:first-child {
  border-left: 1px solid rgba(100, 110, 130, 0.3);
  border-radius: 16px 0 0 16px;
}

body.design-gaming tbody td:last-child {
  border-right: 1px solid rgba(100, 110, 130, 0.3);
  border-radius: 0 16px 16px 0;
}

body.design-gaming tbody tr:hover td {
  background: rgba(35, 42, 58, 0.95);
  border-color: rgba(120, 140, 170, 0.5);
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); */
  transform: translateY(-1px);
}

body.design-gaming .pos {
  font-weight: 800;
  font-size: 18px;
  /* color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); */
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  /* padding: 12px 0 12px 10px; */
  /* padding: 12px 10px; */
  /* padding: 5px 10px; */
}

body.design-gaming .name {
  font-weight: 700;
  color: #ffffff;
}

body.design-gaming .avatar-sm {
  border-color: rgba(100, 110, 130, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Badges */
body.design-gaming .badge {
  background: rgba(45, 55, 75, 0.6);
  border: 1px solid rgba(100, 110, 130, 0.4);
  color: #e8eef5;
  font-weight: 600;
  text-shadow: none;
  border-radius: 12px;
}

body.design-gaming .badge.good {
  background: rgba(95, 216, 154, 0.2);
  border-color: rgba(95, 216, 154, 0.5);
  color: #5fd89a;
  box-shadow: 0 0 10px rgba(95, 216, 154, 0.2);
}

body.design-gaming .badge.bad {
  background: rgba(255, 100, 120, 0.2);
  border-color: rgba(255, 100, 120, 0.5);
  color: #ff6478;
  box-shadow: 0 0 10px rgba(255, 100, 120, 0.2);
}

body.design-gaming .badge.neutral {
  background: rgba(160, 176, 192, 0.2);
  border-color: rgba(160, 176, 192, 0.4);
  color: #a0b0c0;
}

/* Footer */
body.design-gaming footer {
  color: rgba(160, 176, 192, 0.7);
}

/* Theme selector */
body.design-gaming .theme-selector select {
  background: rgba(25, 30, 45, 0.9);
  border: 2px solid rgba(100, 110, 130, 0.4);
  color: #e8eef5;
  border-radius: 12px;
}

body.design-gaming .theme-selector select:hover {
  border-color: rgba(120, 140, 170, 0.6);
  background: rgba(35, 42, 58, 0.9);
}
/* Track Length Indicator */
.track-length-indicator {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.track-length-indicator .led {
  width: 32px;
  height: 12px;
  border-radius: 6px;
  background: rgba(100, 110, 130, 0.3);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.track-length-indicator .led.active {
  box-shadow: 0 0 12px currentColor, inset 0 0 8px currentColor;
}

.track-length-indicator .led.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shine 2s infinite;
}

@keyframes shine {
  to {
    left: 100%;
  }
}

.track-length-indicator .led.short {
  background: #16c172;
  border-color: #16c172;
  color: #16c172;
}

.track-length-indicator .led.medium {
  background: #ff9500;
  border-color: #ff9500;
  color: #ff9500;
}

.track-length-indicator .led.long {
  background: #ff5576;
  border-color: #ff5576;
  color: #ff5576;
}

.track-length-indicator .led.unknown {
  background: rgba(100, 110, 130, 0.4);
  border-color: rgba(100, 110, 130, 0.4);
}

.track-length-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
/* Meta Cards */
.meta {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}

.meta-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
}

.meta-4 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
}

.meta-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
}


.meta-settings-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
  grid-auto-columns: auto;
}

/* Responsive - Stack cards vertically on smaller screens */
@media (max-width: 1024px) {
  .meta {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .heat-table-wrapper {
    margin: 0 -16px;
  }
  
  .heat-table {
    font-size: 13px;
  }
  
  .heat-table thead th,
  .heat-table tbody td {
    padding: 8px;
  }
  
  .heat-table tbody td:first-child {
    min-width: 150px;
  }
}

/* Gaming theme subtabs */
body.design-gaming .subtab-nav {
  background: rgba(25, 30, 45, 0.8);
  border: 2px solid rgba(100, 110, 130, 0.3);
  border-radius: 20px;
}

body.design-gaming .subtab-link {
  color: #a0b0c0;
  border-radius: 14px;
}

body.design-gaming .subtab-link:hover {
  color: #e8eef5;
  background: rgba(35, 42, 58, 0.6);
}

body.design-gaming .subtab-link.active {
  color: #ffffff;
  background: rgba(45, 55, 75, 0.9);
  border-color: rgba(120, 140, 170, 0.4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.design-gaming .subtab-title {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
/* Gaming theme track length bar */
body.design-gaming .track-length-bar {
  background: rgba(15, 20, 30, 0.9);
  border: 2px solid rgba(100, 110, 130, 0.4);
  border-radius: 6px 0 0 6px;
  padding: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.design-gaming .bar-segment {
  background: rgba(40, 50, 70, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}

body.design-gaming .bar-segment.color-orange.active {
  background: linear-gradient(180deg, #ff9500, #ff7700);
  box-shadow: 0 0 10px rgba(255, 149, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.design-gaming .bar-segment.color-red.active {
  background: linear-gradient(180deg, #ff5555, #dd2222);
  box-shadow: 0 0 10px rgba(255, 85, 85, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.design-gaming .bar-segment.color-purple.active {
  background: linear-gradient(180deg, #bb55ff, #8800dd);
  box-shadow: 0 0 10px rgba(187, 85, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.design-gaming .bar-segment.color-blue.active {
  background: linear-gradient(180deg, #5599ff, #2266dd);
  box-shadow: 0 0 10px rgba(85, 153, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.design-gaming .bar-arrow.active {
  border-left-color: #2266dd;
  filter: drop-shadow(0 0 10px rgba(85, 153, 255, 0.8));
}

body.design-gaming .track-length-label {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Chart container styling for gaming theme */
body.design-gaming canvas {
  background: rgba(15, 20, 30, 0.5);
  border-radius: 12px;
  padding: 10px;
}

body.design-gaming .card canvas {
  background: transparent;
}

/* Gaming theme heat tables */
body.design-gaming .heat-table thead th {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(91, 140, 255, 0.4);
}

body.design-gaming .heat-table tbody td {
  background: rgba(25, 30, 45, 0.9);
  border-top: 1px solid rgba(100, 110, 130, 0.3);
  border-bottom: 1px solid rgba(100, 110, 130, 0.3);
  color: #e8eef5;
}

body.design-gaming .heat-table tbody td:first-child {
  border-left: 1px solid rgba(100, 110, 130, 0.3);
}

body.design-gaming .heat-table tbody td:last-child {
  border-right: 1px solid rgba(100, 110, 130, 0.3);
}

body.design-gaming .heat-table tbody tr:hover td {
  background: rgba(35, 42, 58, 0.95);
  border-color: rgba(120, 140, 170, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* body.design-gaming .heat-table .heat-time {
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
} */

/* Gaming theme message box */
body.design-gaming .important-message {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 149, 0, 0.08));
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-left: 5px solid #ffd700;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.design-gaming .message-icon {
  color: #ffd700;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
}

body.design-gaming .message-content {
  color: #fff9e6;
}

body.design-gaming .message-content strong {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

body.design-gaming .message-subtitle {
  color: rgba(255, 249, 230, 0.65);
}

/* Countdown clock */
/* Gaming theme countdown */
body.design-gaming .countdown-container {
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.15), rgba(0, 255, 224, 0.08));
  border: 2px solid rgba(100, 110, 130, 0.4);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

body.design-gaming .countdown-value {
  background: rgba(15, 20, 30, 0.8);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.3);
}

body.design-gaming .countdown-container.race-started {
  background: linear-gradient(135deg, rgba(22, 193, 114, 0.15), rgba(0, 255, 136, 0.08));
  border-color: rgba(22, 193, 114, 0.4);
}