/* ChessHub - Dark Luxury Chessboard & Legal Styles */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Cabinet+Grotesk:wght@700;800;900&display=swap');

:root {
  --gold-primary: #D4AF37;
  --gold-light: #F3E5AB;
  --gold-dark: #AA820A;
  --amber-accent: #F59E0B;
  --slate-dark: #0F172A;
  --slate-deeper: #0A0E1A;
  --slate-card: #1E293B;
  --slate-border: rgba(212, 175, 55, 0.2);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--slate-deeper);
  color: #F8FAFC;
  overflow-x: hidden;
}

.luxury-heading {
  font-family: 'Cinzel', serif;
}

.sans-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
}

/* Luxury Gold Gradients & Glows */
.gold-gradient-text {
  background: linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #AA820A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-glow {
  box-shadow: 0 0 40px -10px rgba(212, 175, 55, 0.35);
}

.gold-border-glow {
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 20px -5px rgba(212, 175, 55, 0.2);
}

/* Glassmorphism Luxury Cards */
.luxury-glass {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.18);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}

.luxury-card-hover {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-card-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 25px 50px -12px rgba(212, 175, 55, 0.2);
}

/* Chessboard Styling for Interactive Showcase */
.interactive-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  border: 8px solid #281D14;
  border-radius: 12px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 175, 55, 0.25);
  overflow: hidden;
}

.chess-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 4vw, 2.3rem);
  user-select: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  position: relative;
}

.chess-sq.light {
  background-color: #E2D6B5;
  color: #1a1a1a;
}

.chess-sq.dark {
  background-color: #B88B4A;
  color: #1a1a1a;
}

.chess-sq.selected {
  background-color: #7B9B42 !important;
}

.chess-sq.valid-dest::after {
  content: '';
  width: 28%;
  height: 28%;
  background-color: rgba(50, 80, 20, 0.45);
  border-radius: 50%;
  position: absolute;
}

/* Dual Clock Pass & Play Styles */
.clock-display {
  font-family: 'Cinzel', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}

.clock-btn-active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(245, 158, 11, 0.15));
  border-color: #D4AF37 !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.35);
}

/* Ambient Radial Background */
.chess-radial-bg {
  background: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 45%, #070a12 100%);
}

/* Subtle Animated Shimmer for Badges */
@keyframes goldShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.badge-gold-shimmer {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.15) 0%, rgba(255, 241, 197, 0.4) 50%, rgba(212, 175, 55, 0.15) 100%);
  background-size: 200% 100%;
  animation: goldShimmer 3.5s infinite linear;
}

/* Sound waveform equalizer */
.sound-bar {
  width: 3px;
  background: #D4AF37;
  border-radius: 3px;
  animation: soundBounce 1s infinite alternate ease-in-out;
}
.sound-bar:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.sound-bar:nth-child(2) { height: 14px; animation-delay: 0.3s; }
.sound-bar:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.sound-bar:nth-child(4) { height: 16px; animation-delay: 0.4s; }

@keyframes soundBounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.3); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0E1A;
}
::-webkit-scrollbar-thumb {
  background: #D4AF37;
  border-radius: 4px;
}