/* Custom Luxury VIP Football Director Styling */
:root {
  --color-board-dark: #07120e;
  --color-board-card: #0d221a;
  --color-gold: #e5c158;
}

body {
  background-color: #050d0a;
  background-image: radial-gradient(circle at 50% 0%, #12382c 0%, #061510 50%, #030806 100%);
  color: #f3f4f6;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Safe Area Insets */
.pb-safe {
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* Golden Gradients & Glow */
.bg-gold-gradient {
  background: linear-gradient(135deg, #fce08b 0%, #d4af37 50%, #aa820a 100%);
}

.shadow-gold {
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25);
}

.bg-board-card {
  background: linear-gradient(145deg, rgba(16, 42, 33, 0.85) 0%, rgba(8, 24, 18, 0.95) 100%);
}

.bg-board-glass {
  background: rgba(7, 21, 16, 0.88);
}

/* Animations */
@keyframes floatAnimation {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

.animate-float {
  animation: floatAnimation 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.8)); }
}

.glow-card {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 4px;
}

/* Tactical Card Styles */
.tactical-card {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tactical-card:active {
  transform: scale(0.94);
}
.tactical-card.used {
  opacity: 0.35;
  filter: grayscale(0.9);
  pointer-events: none;
}

/* Red Wax Seal Stamp Effect */
.wax-seal {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #b91c1c 40%, #7f1d1d 90%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(254, 202, 202, 0.4);
}

/* QR Code Display Card Glow */
#qr-code-canvas {
  image-rendering: pixelated;
  border-radius: 8px;
}

/* Betrayal Siren & Pulse Animation */
@keyframes betrayalFlash {
  0%, 100% { background-color: rgba(185, 28, 28, 0.2); }
  50% { background-color: rgba(185, 28, 28, 0.6); }
}

.betrayal-active-banner {
  animation: betrayalFlash 1.5s infinite ease-in-out;
}

/* Host Live Join Toast & Glow */
@keyframes slideDownBounce {
  0% { transform: translate(-50%, -40px); opacity: 0; }
  60% { transform: translate(-50%, 8px); opacity: 1; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

.animate-join-toast {
  animation: slideDownBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes newPlayerGlow {
  0% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); border-color: rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.6); border-color: rgba(16, 185, 129, 1); }
  100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.6); }
}

.player-newly-joined {
  animation: newPlayerGlow 2s ease-out;
}