/* WM Fan-Zentrale 2026 - Custom Styles */
:root {
  --accent: #10b981;
  --germany-red: #dd0000;
  --germany-gold: #ffcc00;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Modern card styles with stadium feel */
.card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  border: 1px solid #27272a;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.group-card {
  background: linear-gradient(145deg, #18181b 0%, #27272a 100%);
}

.stadium-card {
  background: linear-gradient(145deg, #18181b 0%, #27272a 100%);
  overflow: hidden;
}

.stadium-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(16, 185, 129, 0.08),
    transparent
  );
  transform: skewX(-25deg);
  transition: left 0.6s;
}

.stadium-card:hover::before {
  left: 150%;
}

/* Germany special styling */
.germany-accent {
  border-color: #dd0000;
}

.germany-accent:hover {
  border-color: #ffcc00;
  box-shadow: 0 0 0 1px #ffcc00;
}

/* Tab / View switching */
.view {
  display: none;
}

.view.active {
  display: block;
}

/* Search highlight */
.search-highlight {
  background-color: #10b981;
  color: black;
  padding: 0 2px;
  border-radius: 2px;
}

/* Live match row */
.match-row {
  transition: background-color 0.2s;
}

.match-row:hover {
  background-color: #27272a;
}

/* Nice flag + name */
.team-row {
  transition: all 0.1s ease;
}

.team-row:hover {
  background-color: #27272a;
  transform: translateX(4px);
}

/* Modal */
.modal {
  animation: modalPop 0.2s ease-out forwards;
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Stats cards */
.stat-card {
  background: linear-gradient(145deg, #18181b, #27272a);
}

/* Responsive nav */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .mobile-nav {
    display: flex;
  }
}