@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ============================================
     PREMIUM TEAL AUTHORITY PALETTE
     Modern, Premium, Authoritative, Readable
     ============================================ */

  /* Primary Teal - The Command Color */
  --primary: #0D9488;
  /* Teal 600 - Main brand, authoritative */
  --primary-light: #2DD4BF;
  /* Teal 400 - Highlights, hover states */
  --primary-dark: #0F766E;
  /* Teal 700 - Deeper actions */
  --primary-darker: #134E4A;
  /* Teal 900 - Maximum depth */
  --primary-accent: #5EEAD4;
  /* Teal 300 - Soft glow accents */

  /* Secondary - Warm Copper/Amber (Premium Luxury Accent) */
  --secondary: #F59E0B;
  /* Amber 500 - CTAs, premium highlights */
  --secondary-hover: #D97706;
  /* Amber 600 - Hover state */
  --secondary-light: #FCD34D;
  /* Amber 300 - Soft accents */
  --accent: #FBBF24;
  /* Amber 400 - Warm accent */

  /* Background - Deep Teal-Black (Premium Dark) */
  --bg-dark: #021716;
  /* Near black with teal undertone */
  --bg-card: rgba(13, 30, 28, 0.95);
  /* Dark teal glass */
  --bg-elevated: #0A201E;
  /* Slightly elevated surface */
  --bg-surface: #0D2926;
  /* Card surfaces */

  /* Status Colors - Clear & Distinct */
  --success: #10B981;
  /* Emerald 500 */
  --success-light: rgba(16, 185, 129, 0.15);
  --error: #F43F5E;
  /* Rose 500 */
  --error-light: rgba(244, 63, 94, 0.15);
  --warning: #F59E0B;
  /* Amber 500 */
  --warning-light: rgba(245, 158, 11, 0.15);
  --info: #0EA5E9;
  /* Sky 500 */
  --info-light: rgba(14, 165, 233, 0.15);

  /* Text Colors - High Contrast for Readability */
  --text-main: #F0FDFA;
  /* Teal 50 - Primary text, crisp white-teal */
  --text-muted: #99F6E4;
  /* Teal 200 - Secondary text */
  --text-subtle: #5EEAD4;
  /* Teal 300 - Tertiary/subtle */
  --text-inverse: #134E4A;
  /* Teal 900 - Text on light bg */

  /* Gold Palette (Legacy Compatibility - Mapped to Teal/Amber) */
  --gold-primary: #0D9488;
  /* Now maps to primary teal */
  --gold-light: #2DD4BF;
  /* Maps to primary-light */
  --gold-dark: #0F766E;
  /* Maps to primary-dark */
  --gold-muted: #14B8A6;
  /* Teal 500 */
  --gold-gradient: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #14B8A6 100%);
  --military-gold: #0D9488;
  /* Teal as the command color */

  /* Premium Teal Gradient */
  --accent-gradient: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #2DD4BF 100%);
  --premium-gradient: linear-gradient(135deg, #134E4A 0%, #0F766E 50%, #0D9488 100%);

  /* Neutral Tones - Slate for Sophistication */
  --neutral-warm: #78716C;
  /* Stone 500 */
  --neutral-cool: #475569;
  /* Slate 600 */
  --slate-dark: #1E293B;
  /* Slate 800 */

  /* Glass Effects - Teal Tinted */
  --card-bg: rgba(13, 41, 38, 0.85);
  --glass-border: rgba(45, 212, 191, 0.2);
  /* Teal 400 border */
  --glass-border-light: rgba(45, 212, 191, 0.1);
  --glass-highlight: rgba(94, 234, 212, 0.08);

  /* Gold Legacy Variables (For backward compatibility - now teal-based) */
  --gold-bg-muted: rgba(13, 148, 136, 0.1);
  --gold-border-muted: rgba(13, 148, 136, 0.25);
  --gold-glow: rgba(45, 212, 191, 0.4);

  /* Premium Shadows - Teal Glow */
  --premium-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --glow-primary: 0 0 30px rgba(13, 148, 136, 0.4);
  --glow-accent: 0 0 20px rgba(45, 212, 191, 0.3);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  /* Prevents scrollbar flickering */
  line-height: 1.6;
  font-weight: 300;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.btn-premium-cta:focus-visible {
  outline: 2px solid var(--secondary-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.22);
}

/* Premium Teal Aura Background - Deep & Authoritative */
.bg-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(13, 148, 136, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(15, 118, 110, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(45, 212, 191, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse at 0% 50%, rgba(20, 184, 166, 0.06) 0%, transparent 50%);
  filter: blur(80px);
  animation: auraPulse 15s infinite alternate;
}

/* Particles using Teal Accent */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.8) 0%, rgba(13, 148, 136, 0.4) 55%, transparent 100%);
  border-radius: 50%;
  animation: floatParticle 20s infinite;
  opacity: 0;
}

.particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.particle:nth-child(2) {
  left: 20%;
  animation-delay: 2s;
  animation-duration: 20s;
}

.particle:nth-child(3) {
  left: 30%;
  animation-delay: 4s;
  animation-duration: 28s;
}

.particle:nth-child(4) {
  left: 40%;
  animation-delay: 1s;
  animation-duration: 22s;
}

.particle:nth-child(5) {
  left: 50%;
  animation-delay: 3s;
  animation-duration: 26s;
}

.particle:nth-child(6) {
  left: 60%;
  animation-delay: 5s;
  animation-duration: 24s;
}

.particle:nth-child(7) {
  left: 70%;
  animation-delay: 2.5s;
  animation-duration: 21s;
}

.particle:nth-child(8) {
  left: 80%;
  animation-delay: 4.5s;
  animation-duration: 27s;
}

.particle:nth-child(9) {
  left: 90%;
  animation-delay: 1.5s;
  animation-duration: 23s;
}

.particle:nth-child(10) {
  left: 15%;
  animation-delay: 6s;
  animation-duration: 29s;
}

.particle:nth-child(11) {
  left: 35%;
  animation-delay: 7s;
  animation-duration: 19s;
}

.particle:nth-child(12) {
  left: 55%;
  animation-delay: 3.5s;
  animation-duration: 30s;
}

.particle:nth-child(13) {
  left: 75%;
  animation-delay: 8s;
  animation-duration: 18s;
}

.particle:nth-child(14) {
  left: 85%;
  animation-delay: 5.5s;
  animation-duration: 25s;
}

.particle:nth-child(15) {
  left: 25%;
  animation-delay: 9s;
  animation-duration: 22s;
}

@keyframes floatParticle {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  10% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0;
  }
}

/* Ambient Teal Light Rays */
.light-rays {
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% 100%,
      transparent 0deg,
      rgba(13, 148, 136, 0.03) 20deg,
      transparent 40deg,
      rgba(45, 212, 191, 0.02) 60deg,
      transparent 80deg,
      rgba(13, 148, 136, 0.03) 100deg,
      transparent 120deg,
      rgba(20, 184, 166, 0.02) 140deg,
      transparent 160deg,
      rgba(13, 148, 136, 0.03) 180deg,
      transparent 200deg,
      rgba(45, 212, 191, 0.02) 220deg,
      transparent 240deg,
      rgba(13, 148, 136, 0.03) 260deg,
      transparent 280deg,
      rgba(20, 184, 166, 0.02) 300deg,
      transparent 320deg,
      rgba(13, 148, 136, 0.03) 340deg,
      transparent 360deg);
  animation: rotateRays 60s linear infinite;
  opacity: 0.8;
}

@keyframes rotateRays {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* Floating Premium Teal Shapes */
.floating-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.shuttle-float {
  position: absolute;
  opacity: 0.06;
  filter: drop-shadow(0 0 20px rgba(13, 148, 136, 0.3));
}

/* Teal Diamond 1 */
.shuttle-1 {
  width: 200px;
  height: 200px;
  top: 8%;
  right: 5%;
  color: rgba(13, 148, 136, 0.4);
  transform: rotate(45deg);
  animation: floatDiamond 25s ease-in-out infinite;
  border: 1px solid rgba(13, 148, 136, 0.25);
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.08) 0%, transparent 100%);
}

/* Teal Ring 2 */
.shuttle-2 {
  width: 150px;
  height: 150px;
  bottom: 20%;
  left: 3%;
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 50%;
  animation: floatRing 22s ease-in-out infinite reverse;
  animation-delay: -5s;
  background: radial-gradient(circle, transparent 60%, rgba(45, 212, 191, 0.08) 100%);
}

/* Teal Triangle 3 */
.shuttle-3 {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgba(13, 148, 136, 0.1);
  top: 45%;
  right: 8%;
  filter: drop-shadow(0 0 15px rgba(13, 148, 136, 0.25));
  animation: floatTriangle 18s ease-in-out infinite;
  animation-delay: -8s;
}

/* Teal Circle 4 */
.shuttle-4 {
  width: 100px;
  height: 100px;
  bottom: 35%;
  right: 20%;
  border-radius: 50%;
  border: 1px solid rgba(20, 184, 166, 0.3);
  background: radial-gradient(circle at 30% 30%, rgba(45, 212, 191, 0.12) 0%, transparent 70%);
  animation: floatCircle 20s ease-in-out infinite reverse;
  animation-delay: -3s;
}

/* Teal Hexagon outline 5 */
.shuttle-5 {
  width: 80px;
  height: 80px;
  top: 65%;
  left: 10%;
  border: 1px solid rgba(13, 148, 136, 0.25);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.1) 0%, transparent 100%);
  animation: floatHex 16s ease-in-out infinite;
  animation-delay: -10s;
}

@keyframes floatDiamond {

  0%,
  100% {
    transform: rotate(45deg) translateY(0);
    opacity: 0.06;
  }

  25% {
    transform: rotate(48deg) translateY(-20px);
  }

  50% {
    transform: rotate(43deg) translateY(-10px);
    opacity: 0.08;
  }

  75% {
    transform: rotate(47deg) translateY(-25px);
  }
}

@keyframes floatRing {

  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.06;
  }

  50% {
    transform: translateY(-30px) scale(1.05);
    opacity: 0.08;
  }
}

@keyframes floatTriangle {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes floatCircle {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.06;
  }

  33% {
    transform: translateY(-15px) translateX(10px);
  }

  66% {
    transform: translateY(-25px) translateX(-5px);
    opacity: 0.08;
  }
}

@keyframes floatHex {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.06;
  }

  50% {
    transform: translateY(-20px) rotate(30deg);
    opacity: 0.08;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 480px) {
  .container {
    padding: 0 1.25rem;
  }

  .floating-shapes,
  .bg-aura {
    display: none;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .container {
    padding: 0 1rem;
  }
}

/* Navigation - Premium Bright */
nav {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(180deg,
      rgba(13, 41, 38, 0.95) 0%,
      rgba(13, 41, 38, 0.85) 100%);
  border-bottom: 1px solid rgba(45, 212, 191, 0.2);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(45, 212, 191, 0.1) inset;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;

  /* Bright White-Teal Gradient */
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 40%, #5EEAD4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.15));
}

/* Commander's Crest Logo - Crossed Rackets with Crown */
.logo-icon {
  width: 44px;
  height: 44px;
  color: #5EEAD4;
  filter: drop-shadow(0 0 12px rgba(45, 212, 191, 0.5));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-icon .crown,
.logo-icon .crown-base {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-icon .racket-head,
.logo-icon .racket-handle {
  transition: all 0.3s ease;
}

/* Hover state - commanding presence */
.logo:hover .logo-icon {
  color: var(--primary-accent);
  filter: drop-shadow(0 0 15px rgba(45, 212, 191, 0.6));
  transform: scale(1.05);
}

.logo:hover .logo-icon .crown,
.logo:hover .logo-icon .crown-base {
  stroke-width: 2.5;
}

.logo:hover .logo-icon .racket-head {
  stroke-width: 2.5;
}

.logo:hover .logo-icon .racket-handle {
  stroke-width: 3;
}

/* Remove old bracket styles */
.logo::before,
.logo::after {
  content: none;
}


.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.nav-links a:hover {
  color: var(--primary-light);
}

.nav-actions {
  display: flex;
  align-items: center;
}

/* Hero Section */
.hero {
  padding: 10rem 0 6rem;
  text-align: center;
  position: relative;
}

/* Premium Hero Badge with Teal Shimmer */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.75rem;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.2) 0%, rgba(45, 212, 191, 0.1) 100%);
  border: 1px solid rgba(45, 212, 191, 0.5);
  border-radius: 100px;
  color: var(--primary-light);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 30px rgba(13, 148, 136, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: var(--transition-premium);
  cursor: default;
  position: relative;
  overflow: hidden;
  animation: badgeFloat 4s ease-in-out infinite;
}

@keyframes badgeFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.hero-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.35), transparent);
  animation: badge-shimmer 4s infinite;
}

.hero-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.15) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
}

@keyframes badge-shimmer {
  0% {
    left: -100%;
  }

  40%,
  100% {
    left: 100%;
  }
}

.hero-badge:hover {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.25) 0%, rgba(20, 184, 166, 0.15) 100%);
  box-shadow:
    0 0 50px rgba(13, 148, 136, 0.35),
    0 0 80px rgba(45, 212, 191, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: var(--primary-accent);
  letter-spacing: 0.2em;
  animation: none;
  transform: translateY(-3px);
}

.hero-badge:hover::after {
  opacity: 1;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 5.5rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  position: relative;

  /* Premium Teal Gradient - Authoritative & Modern */
  background: linear-gradient(180deg, #F0FDFA 0%, #5EEAD4 30%, #0D9488 70%, #0F766E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% 200%;
  animation: heroTextShimmer 8s ease-in-out infinite;

  /* Sharp Shadow for Readability */
  filter: drop-shadow(0 2px 4px rgba(13, 148, 136, 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.hero h1::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(13, 148, 136, 0.2) 0%, transparent 60%);
  z-index: -1;
  filter: blur(40px);
  animation: heroGlow 4s ease-in-out infinite alternate;
}

@keyframes heroTextShimmer {

  0%,
  100% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 0% 100%;
  }
}

@keyframes heroGlow {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.hero p {
  font-size: 1.35rem;
  color: #8B8F99;
  max-width: 650px;
  margin: 0 auto 3.5rem;
  line-height: 1.8;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 1;
}

.btn-primary {
  background: var(--premium-gradient);
  color: #FFFFFF;
  box-shadow:
    0 0 30px rgba(13, 148, 136, 0.4),
    0 10px 40px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(45, 212, 191, 0.4);
  position: relative;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s;
  z-index: 1;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--premium-gradient);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  filter: blur(15px);
  transition: opacity 0.4s;
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 0 60px rgba(13, 148, 136, 0.5),
    0 20px 50px -15px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: var(--primary-accent);
}

.btn-primary:hover::before {
  left: 200%;
}

.btn-primary:hover::after {
  opacity: 0.6;
}

.btn-primary:active {
  transform: translateY(-2px) scale(1.01);
}

/* Silver/Slate variant for secondary actions */
.btn-primary.btn-secondary {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  box-shadow: 0 0 20px rgba(71, 85, 105, 0.4);
  border-color: rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
}

.btn-primary.btn-secondary:hover {
  box-shadow: 0 0 40px rgba(71, 85, 105, 0.6);
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* Loading Spinner */
.loader {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(13, 148, 136, 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Button inline loader - fixed positioning */
.btn .loader,
button .loader,
.btn .spinner,
button .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  margin: 0;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  animation: spin 0.8s linear infinite;
}

/* For buttons with gold gradient background */
.btn-primary .loader,
.btn-primary .spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
}

/* Ensure button text stays aligned when loading */
.btn[disabled],
button[disabled] {
  cursor: not-allowed;
  opacity: 0.85;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Premium Cards */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

.card {
  background: linear-gradient(145deg, rgba(26, 26, 31, 0.9) 0%, rgba(20, 20, 24, 0.8) 100%);
  border: 1px solid var(--glass-border-light);
  padding: 2.5rem;
  border-radius: 24px;
  backdrop-filter: blur(16px);
  transition: var(--transition-premium);
  position: relative;
  overflow: hidden;
}

#join-card {
  overflow: visible;
}

/* Animated border gradient */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 40%, rgba(13, 148, 136, 0.4) 50%, transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  background-size: 300% 300%;
  animation: borderShimmer 3s ease infinite;
}

@keyframes borderShimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Inner glow effect */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.05) 0%, transparent 100%);
  border-radius: 24px 24px 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.card:hover {
  border-color: rgba(13, 148, 136, 0.4);
  background: linear-gradient(145deg, rgba(13, 41, 38, 0.98) 0%, rgba(10, 32, 30, 0.95) 100%);
  box-shadow:
    var(--premium-shadow),
    0 0 40px rgba(13, 148, 136, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card:hover::before {
  opacity: 1;
}

.card:hover::after {
  opacity: 1;
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.card p {
  color: var(--text-muted);
  font-weight: 300;
}

/* Step Cards - How It Works (Premium) */
.steps-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border-light);
  padding: 2rem 1.5rem;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  transition: var(--transition-premium);
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 280px;
}

.step-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(13, 148, 136, 0.4);
  box-shadow: var(--premium-shadow), 0 0 40px rgba(13, 148, 136, 0.15);
}

.step-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.4s ease;
}

.step-icon-1 {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.25), rgba(13, 148, 136, 0.08));
  color: var(--primary-light);
  box-shadow: 0 0 30px rgba(13, 148, 136, 0.25);
}

.step-icon-2 {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.25), rgba(15, 118, 110, 0.08));
  color: var(--primary);
  box-shadow: 0 0 30px rgba(15, 118, 110, 0.25);
}

.step-icon-3 {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.05));
  color: var(--primary-accent);
  box-shadow: 0 0 30px rgba(45, 212, 191, 0.2);
}

.step-card:hover .step-icon {
  transform: scale(1.1);
}

.step-number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--premium-gradient);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.5);
}

.step-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: white;
}

.step-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.step-connector {
  display: flex;
  align-items: center;
  opacity: 0.5;
}

/* =====================================================
   RESPONSIVE DESIGN - Mobile First
   ===================================================== */

/* Mobile Menu Toggle */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn svg,
.mobile-menu-btn i {
  width: 28px;
  height: 28px;
}

/* Mobile Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu Panel */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: var(--bg-dark);
  z-index: 1000;
  padding: 2rem;
  transition: right 0.3s ease;
  border-left: 1px solid var(--glass-border);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu a {
  display: block;
  padding: 1rem;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.mobile-menu a:hover {
  background: rgba(13, 148, 136, 0.15);
  color: var(--primary-light);
}

/* Tablet - 768px */
@media (max-width: 768px) {

  /* Navigation */
  .nav-links {
    display: none;
  }

  .nav-actions {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  /* Hero */
  .hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
  }

  /* Steps */
  .steps-container {
    flex-direction: column;
    gap: 2rem;
  }

  .step-connector {
    transform: rotate(90deg);
  }

  .step-card {
    max-width: 100%;
  }

  /* Cards */
  .card {
    padding: 1.5rem;
  }

  /* Container Padding */
  .container {
    padding: 0 1rem;
  }

  /* Buttons - Touch Friendly */
  .btn {
    padding: 0.875rem 1.5rem;
    min-height: 48px;
  }

  .btn-primary {
    padding: 1rem 2rem;
  }

  /* Floating Shapes - Smaller on mobile */
  .shuttle-float {
    opacity: 0.08;
  }

  .shuttle-1 {
    width: 180px;
    height: 180px;
  }

  .shuttle-2 {
    width: 120px;
    height: 120px;
  }

  .shuttle-3,
  .shuttle-4,
  .shuttle-5 {
    display: none;
  }
}

/* Small Mobile - 480px */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.75rem;
  }

  .hero p {
    font-size: 0.9rem;
  }

  .step-card {
    padding: 1.5rem 1rem;
  }

  .step-icon {
    width: 60px;
    height: 60px;
  }

  .step-card h3 {
    font-size: 1.1rem;
  }

  .step-card p {
    font-size: 0.85rem;
  }

  /* Section Headers */
  #how-it-works h2,
  #clubs-courts h2 {
    font-size: 1.75rem;
  }

  /* Logo */
  .logo {
    font-size: 1rem;
  }

  /* Footer/Form */
  .card h2 {
    font-size: 1.5rem;
  }

  input,
  select {
    padding: 0.875rem;
    font-size: 16px;
    /* Prevents iOS zoom */
  }

  /* FAB mobile fix */
  .player-fab {
    min-width: 140px;
    min-height: 48px;
    padding: 4px 12px 4px 4px;
  }

  /* Container padding reduction */
  .container {
    padding: 0 1rem;
  }

  /* Button padding reduction */
  .btn {
    padding: 0.875rem 1.5rem;
  }

  /* Hide all decorative shuttles on mobile */
  .shuttle-1,
  .shuttle-2 {
    display: none;
  }
}

/* Extra Small Mobile - 360px */
@media (max-width: 360px) {
  .container {
    padding: 0 0.75rem;
  }

  .player-fab {
    min-width: 120px;
  }

  .card {
    padding: 1.5rem;
  }
}

/* =====================================================
   UI POLISH: Toogle & Badges
   ===================================================== */

/* 1. Toggle Switch (Premium Pill) */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  transition: all 0.3s ease;
  user-select: none;
}

.toggle-switch:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.toggle-input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 34px;
  transition: .3s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Checked State */
.toggle-input:checked+.toggle-slider {
  background-color: var(--primary);
  box-shadow: 0 0 15px rgba(13, 148, 136, 0.4);
}

.toggle-input:checked+.toggle-slider:before {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.3s;
}

.toggle-input:checked~.toggle-label {
  color: white;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}


/* 2. Neon Queue Badge */
.neon-badge-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.5rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem 0;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.neon-number {
  font-family: 'Outfit', sans-serif;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  text-shadow: 0 0 20px rgba(13, 148, 136, 0.5);
  margin-bottom: 0.25rem;
}

.neon-caption {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-light);
  font-weight: 600;
}

/* 3. Urgent Pulse Animation (For use in JS) */
.urgent-pulse {
  border-color: var(--error);
  box-shadow: 0 0 30px rgba(193, 122, 122, 0.2), inset 0 0 20px rgba(193, 122, 122, 0.1);
  animation: pulse-border 1.5s infinite;
}

.urgent-pulse .neon-number {
  color: var(--error);
  text-shadow: 0 0 30px rgba(193, 122, 122, 0.6);
}

.urgent-pulse .neon-caption {
  color: var(--error);
}

@keyframes pulse-border {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(193, 122, 122, 0.2);
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(193, 122, 122, 0.4);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(193, 122, 122, 0.2);
  }
}


/* =====================================================
   UI POLISH: Floating Labels
   ===================================================== */
.floating-group {
  position: relative;
  margin-bottom: 1.5rem;
  z-index: 0;
}

#join-card .floating-group {
  z-index: 0;
}

#join-card .floating-group.dropdown-open {
  z-index: 9999;
  overflow: visible;
}

#join-form {
  overflow: visible;
}

#join-card .btn {
  z-index: 0;
}

.floating-group:focus-within {
  z-index: 10;
}

.floating-group.dropdown-open {
  z-index: 999;
  overflow: visible;
}

.floating-input {
  width: 100%;
  padding: 1rem 1rem 1rem 1rem;
  /* Adjust padding for label */
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  height: 56px;
  min-height: 56px;
  /* Fixed height for consistency */
}

.floating-input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.2);
}

.floating-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  transition: all 0.2s ease;
  font-size: 1rem;
  background: transparent;
  z-index: 2;
  line-height: 1;
}

/* Float State: Input Focus OR Valid (has value) */
.floating-input:focus~.floating-label,
.floating-input:not(:placeholder-shown)~.floating-label,
.floating-input:valid~.floating-label {
  top: -10px;
  left: 10px;
  font-size: 0.75rem;
  background: var(--bg-dark);
  padding: 0 0.5rem;
  color: var(--primary-light);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg-dark);
}

/* Select specific tweaks */
/* Select specific tweaks */
select.floating-input {
  /* Hide default arrow in some browsers if strictly using native, but we use custom JS now */
  padding-top: 0;
  padding-right: 3rem;
  appearance: none;
  background-color: rgba(4, 12, 11, 0.95);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2399F6E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 16px 16px;
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

select.floating-input:focus {
  background-color: rgba(8, 20, 18, 0.95);
}

select.floating-input option,
select.floating-input optgroup {
  background: #051312;
  color: var(--text-main);
}

/* =====================================================
   UI POLISH: Custom Javascript Select
   ===================================================== */
.custom-select-container {
  position: relative;
  width: 100%;
  z-index: 1;
}

.custom-select-container.open {
  z-index: 100;
}

.custom-select-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.custom-select-trigger .select-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.3s;
}

.custom-select-container.open .select-arrow {
  transform: rotate(180deg);
  color: var(--primary-light);
}

.custom-options {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(6, 20, 18, 0.98) 0%, rgba(3, 12, 11, 0.98) 100%);
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 12px;
  box-shadow:
    0 16px 36px rgba(2, 10, 9, 0.75),
    0 0 0 1px rgba(13, 148, 136, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 250px;
  overflow-y: auto;
  backdrop-filter: blur(12px);
}

.custom-select-container.open .custom-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-option {
  padding: 0.875rem 1.25rem;
  color: rgba(240, 253, 250, 0.9);
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(45, 212, 191, 0.08);
}

.custom-option:last-child {
  border-bottom: none;
}

.custom-option:hover {
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.28) 0%, rgba(13, 148, 136, 0.12) 100%);
  color: #FFFFFF;
  padding-left: 1.5rem;
}

.custom-select-trigger:focus-visible {
  outline: 2px solid var(--secondary-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.22);
}

/* Floating Label Logic for Custom Select */
/* If active (open) or has-value, float the label */
.custom-select-trigger.active~.floating-label,
.custom-select-trigger.has-value~.floating-label {
  top: -10px;
  left: 10px;
  font-size: 0.75rem;
  background: var(--bg-dark);
  padding: 0 0.5rem;
  color: var(--primary-light);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg-dark);
}

/* =====================================================
   PREMIUM LANDING PAGE STYLES
   ===================================================== */

/* Neon Text Effect - Teal Premium */
.neon-text {
  color: white;
  text-shadow: 0 0 10px rgba(13, 148, 136, 0.5),
    0 0 20px rgba(13, 148, 136, 0.3),
    0 0 40px rgba(45, 212, 191, 0.15);
}

/* Premium Teal Text */
.gold-text {
  background: var(--premium-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Step Cards */
.steps-grid {
  display: grid;
  /* Mobile Optimized Grid */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2rem;
  padding: 1rem;
}

.step-card {
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid var(--glass-border);
  padding: 2.5rem 2rem;
  border-radius: 24px;
  text-align: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.step-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* FAQ Items - Premium */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem;
}

.faq-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border-light);
  border-radius: 16px;
  padding: 1.5rem;
  transition: var(--transition-premium);
  position: relative;
}

.faq-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--premium-gradient);
  border-radius: 0 3px 3px 0;
  transition: height 0.3s ease;
}

.faq-item:hover {
  background: rgba(13, 41, 38, 0.95) !important;
  border-color: rgba(13, 148, 136, 0.3);
  transform: translateX(5px);
  box-shadow: var(--glow-primary);
}

.faq-item:hover::before {
  height: 60%;
}

.faq-item h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.faq-item p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
  padding-left: 30px;
}

/* Section Headers - Premium with Teal Underline */
.section-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fff 0%, #5EEAD4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--premium-gradient);
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(13, 148, 136, 0.5);
}

/* Elegant Section Dividers */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(13, 148, 136, 0.15) 20%,
      rgba(13, 148, 136, 0.4) 50%,
      rgba(13, 148, 136, 0.15) 80%,
      transparent 100%);
  margin: 4rem 0;
  position: relative;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(13, 148, 136, 0.6);
}

/* Diamond divider variant */
.section-divider.diamond::before {
  width: 10px;
  height: 10px;
  background: var(--premium-gradient);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Responsive Adjusments */
@media (max-width: 768px) {
  .section-header h2 {
    font-size: 2rem;
  }

  .step-card {
    padding: 2rem 1.5rem;
  }
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

/* Scroll-triggered Entrance Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger animation delays */
.stagger-1 {
  transition-delay: 0.1s;
}

.stagger-2 {
  transition-delay: 0.2s;
}

.stagger-3 {
  transition-delay: 0.3s;
}

.stagger-4 {
  transition-delay: 0.4s;
}

/* Premium glow pulse for important elements */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(13, 148, 136, 0.25);
  }

  50% {
    box-shadow: 0 0 40px rgba(13, 148, 136, 0.45), 0 0 60px rgba(45, 212, 191, 0.15);
  }
}

/* Global Premium Button Style */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
}

/* ===== Floating Action Button (Player Status FAB) ===== */
.player-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: auto;
  min-width: 140px;
  height: auto;
  min-height: 60px;
  padding: 6px 20px 6px 6px;
  border-radius: 40px;
  /* Glassmorphism effect */
  background: rgba(13, 41, 38, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(45, 212, 191, 0.15);
  border-left: 3px solid var(--primary);
  color: white;
  cursor: grab;
  z-index: 9999;
  box-shadow:
    0 10px 30px -5px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(13, 148, 136, 0.15);
  /* Teal glow */
  display: none;
  /* Hidden by default */
  flex-direction: row;
  align-items: center;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: none;
  overflow: hidden;
}

.player-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 15px 35px -5px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(13, 148, 136, 0.25);
  border-color: rgba(45, 212, 191, 0.3);
}

.player-fab:active,
.player-fab.dragging {
  cursor: grabbing;
  transform: scale(0.98);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Internal Layout */
.fab-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.fab-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(13, 148, 136, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.fab-avatar i {
  width: 24px;
  height: 24px;
}

.fab-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.fab-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--primary-light);
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 2px;
}

.fab-status {
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Shine Effect */
.fab-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  z-index: 1;
  pointer-events: none;
  animation: shine 6s infinite;
}

/* Status Variations */

/* PLAYING: Amber/Gold/Orange Theme */
.player-fab.status-playing {
  border-left-color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.3);
}

.player-fab.status-playing .fab-avatar {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.player-fab.status-playing .fab-label {
  color: #fbbf24;
}

/* BENCHED: Indigo/Apps Theme */
.player-fab.status-benched {
  border-left-color: #6366f1;
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.3);
}

.player-fab.status-benched .fab-avatar {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

.player-fab.status-benched .fab-label {
  color: #a5b4fc;
}

/* ARRIVING: Blue/Sky Theme */
.player-fab.status-arriving {
  border-left-color: #0ea5e9;
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(14, 165, 233, 0.3);
}

.player-fab.status-arriving .fab-avatar {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
}

.player-fab.status-arriving .fab-label {
  color: #7dd3fc;
}

/* JUST PLAYED (Cooldown): Cyan/Ice Theme */
.player-fab.status-cooldown {
  border-left-color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.3);
}

.player-fab.status-cooldown .fab-avatar {
  background: linear-gradient(135deg, #22d3ee, #0891b2);
}

.player-fab.status-cooldown .fab-label {
  color: #67e8f9;
}

/* Pulse animation for attention-grabbing */
@keyframes fab-pulse {

  0%,
  100% {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(13, 148, 136, 0.15);
  }

  50% {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 40px rgba(13, 148, 136, 0.45);
  }
}

.player-fab.attention {
  animation: fab-pulse 1.5s infinite;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .player-fab {
    bottom: 16px;
    left: 16px;
    min-width: 160px;
    min-height: 56px;
  }

  .fab-avatar {
    width: 40px;
    height: 40px;
  }

  .fab-status {
    font-size: 0.85rem;
  }
}

/* =====================================================
   SHARED MODAL STYLES (Player Card)
   ===================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  /* Responsive Modal Width */
  width: min(calc(100% - 2rem), 400px);
  max-width: 400px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-header {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(to bottom, rgba(13, 148, 136, 0.1), transparent);
  border-bottom: 1px solid var(--glass-border);
}

.modal-avatar {
  width: 64px;
  height: 64px;
  background: var(--premium-gradient);
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(13, 148, 136, 0.4);
}

.modal-avatar i {
  width: 32px;
  height: 32px;
  color: white;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.modal-body {
  padding: 1.5rem;
}

.info-grid,
#status-card .info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.5rem;
}

.status-badge.status-idle {
  background: rgba(13, 148, 136, 0.15);
  color: var(--primary-light);
  border: 1px solid rgba(13, 148, 136, 0.3);
}

.status-badge.status-playing {
  background: rgba(13, 148, 136, 0.25);
  color: var(--primary);
  border: 1px solid rgba(13, 148, 136, 0.45);
}

.status-badge.status-active {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(122, 158, 122, 0.3);
}

.info-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.info-item .label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item .value {
  font-weight: 600;
  color: white;
  font-size: 1rem;
}

.queue-card,
.court-card {
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

.court-card {
  background: rgba(13, 148, 136, 0.15);
  border-color: rgba(13, 148, 136, 0.4);
}

.queue-label,
.court-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
  display: block;
}

.queue-number,
.court-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 0 20px rgba(13, 148, 136, 0.6);
}

.court-number {
  text-shadow: 0 0 25px rgba(45, 212, 191, 0.5);
  font-size: 2rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  text-align: center;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: white;
  background: rgba(13, 148, 136, 0.1);
}

/* Outline Button - Gold/Receipt Accent */
.btn-outline {
  background: rgba(251, 191, 36, 0.05);
  border: 1.5px solid rgba(251, 191, 36, 0.3);
  color: var(--gold-light);
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-outline:hover {
  border-color: var(--gold-light);
  background: rgba(251, 191, 36, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.btn-outline:active {
  transform: translateY(0);
  background: rgba(251, 191, 36, 0.2);
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    max-height: 300px;
    transform: translateY(0);
  }
}

/* Standalone centered loader (for modals, sections) */
.loader-centered {
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top: 3px solid var(--primary);
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

/* =====================================================
   COMMAND CARD - QUICK ACTIONS
   ===================================================== */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.quick-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* Default hidden - revealed by JS based on status */
#view-queue-btn {
  display: none;
}

.quick-action-tile:hover {
  background: rgba(13, 148, 136, 0.12);
  border-color: rgba(13, 148, 136, 0.35);
  transform: translateY(-2px);
}

.quick-action-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}

.quick-action-tile:active {
  transform: scale(0.95);
}

.quick-action-icon {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.quick-action-tile:hover .quick-action-icon {
  color: var(--primary-light);
}

.quick-action-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(240, 253, 250, 0.82);
}

/* Alert Toggle States */
.quick-action-icon.alert-on {
  color: var(--primary-light);
}

.quick-action-icon.alert-off {
  color: var(--text-muted);
  opacity: 0.5;
}

/* More Menu */
.more-menu-trigger {
  position: relative;
}

.more-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  transform: none;
  width: 180px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  animation: slideUpCentered 0.2s ease;
}

.more-menu.is-fixed {
  position: fixed;
  animation: slideUpSimple 0.2s ease;
}

@keyframes slideUpSimple {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpCentered {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.more-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  text-decoration: none;
}

.more-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.more-menu-item i {
  width: 16px;
  height: 16px;
}

.more-menu-item.danger {
  color: var(--error);
}

.more-menu-item.danger:hover {
  background: var(--error-light);
  color: #D49A9A;
}

.more-menu-divider {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 0.5rem 0;
}

/* Primary Action Button */
.primary-action-btn {
  width: 100%;
  padding: 1rem;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 0 30px rgba(13, 148, 136, 0.45);
  animation: pulse-teal 2s infinite;
}

@keyframes pulse-teal {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(13, 148, 136, 0.45);
  }

  50% {
    box-shadow: 0 0 35px rgba(13, 148, 136, 0.65);
  }
}

.primary-action-btn i {
  width: 20px;
  height: 20px;
}

/* Tablet: 3 columns */
@media (max-width: 768px) {
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns on narrow screens */
@media (max-width: 480px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Extra small: still 2 columns but smaller gap */
@media (max-width: 360px) {
  .quick-actions-grid {
    gap: 0.5rem;
  }
}

/* =====================================================
   NEW PREMIUM FEATURES
   ===================================================== */

/* Live Stats Bar - Premium Teal Accent */
.live-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(13, 41, 38, 0.95) 0%, rgba(10, 32, 30, 0.98) 100%);
  backdrop-filter: blur(20px);
  padding: 1rem 2.5rem;
  border-radius: 100px;
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-bottom: 2px solid var(--primary);
  margin-bottom: 2.5rem;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(13, 148, 136, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(13, 148, 136, 0.15);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.live-stats-bar:hover {
  border-color: rgba(13, 148, 136, 0.4);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(13, 148, 136, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(13, 148, 136, 0.2);
  transform: translateY(-2px);
}

/* Animated shimmer across stats bar */
.live-stats-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(13, 148, 136, 0.04) 25%,
      rgba(45, 212, 191, 0.1) 50%,
      rgba(13, 148, 136, 0.04) 75%,
      transparent 100%);
  animation: stats-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes stats-shimmer {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

/* Teal glow line at bottom */
.live-stats-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: var(--premium-gradient);
  filter: blur(6px);
  opacity: 0.6;
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {

  0%,
  100% {
    opacity: 0.4;
    width: 50%;
  }

  50% {
    opacity: 0.7;
    width: 70%;
  }
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  position: relative;
}

.stat-item:hover {
  color: var(--text-primary);
  background: rgba(13, 148, 136, 0.08);
}

.stat-item i {
  color: var(--primary);
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.stat-item:hover i {
  color: var(--primary-light);
  text-shadow: 0 0 10px rgba(13, 148, 136, 0.5);
  transform: scale(1.1);
}

/* Stat numbers with teal accent */
.stat-item strong,
.stat-item .stat-value {
  color: var(--primary-light);
  font-weight: 600;
  text-shadow: 0 0 20px rgba(13, 148, 136, 0.3);
}

.stat-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(13, 148, 136, 0.3), transparent);
}

.pulsing-dot {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, var(--primary-light) 0%, var(--primary) 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(13, 148, 136, 0.4), 0 0 15px rgba(13, 148, 136, 0.6);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.7), 0 0 15px rgba(13, 148, 136, 0.6);
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(13, 148, 136, 0), 0 0 20px rgba(13, 148, 136, 0.4);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0), 0 0 15px rgba(13, 148, 136, 0.6);
    transform: scale(1);
  }
}

/* Button Shine Effect */
.btn-shine {
  overflow: hidden;
  position: relative;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }

  20% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

/* Teal Step Numbers - Premium */
.step-number-gold {
  background: var(--premium-gradient);
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.4), 0 0 0 3px rgba(13, 148, 136, 0.1);
  color: #F0FDFA;
  font-weight: 800;
}

/* Testimonials - Premium Gold Accents */
.testimonial-card {
  background: linear-gradient(145deg, rgba(26, 26, 31, 0.85) 0%, rgba(18, 18, 22, 0.9) 100%);
  border: 1px solid var(--glass-border-light);
  padding: 2.25rem;
  border-radius: 24px;
  position: relative;
  transition: var(--transition-premium);
  overflow: hidden;
}

/* Decorative large quote mark */
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 0.5rem;
  right: 1.5rem;
  font-size: 6rem;
  font-family: Georgia, serif;
  background: var(--premium-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Teal accent line on left */
.testimonial-card::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  width: 3px;
  height: 60%;
  background: var(--premium-gradient);
  opacity: 0;
  transition: all 0.4s ease;
  border-radius: 0 4px 4px 0;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  border-color: rgba(13, 148, 136, 0.3);
  background: linear-gradient(145deg, rgba(10, 32, 30, 0.95) 0%, rgba(13, 30, 28, 0.95) 100%);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(13, 148, 136, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.testimonial-card:hover::before {
  opacity: 0.15;
}

.testimonial-card:hover::after {
  opacity: 1;
  top: 10%;
  height: 80%;
}

.quote-icon {
  margin-bottom: 1rem;
  color: var(--primary-light);
  font-size: 1.5rem;
  opacity: 0.7;
}

.testimonial-text {
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.75rem;
  line-height: 1.8;
  font-weight: 300;
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(13, 148, 136, 0.1);
}

.author-avatar {
  width: 52px;
  height: 52px;
  background: var(--premium-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #F0FDFA;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
  transition: all 0.3s ease;
}

.testimonial-card:hover .author-avatar {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
}

.author-name {
  color: white;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
  font-weight: 500;
}

.author-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  color: var(--primary-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  gap: 0.25rem;
}

.author-badge i {
  color: var(--primary);
}

/* Featured Venue Card - Premium */
.featured-venue-card {
  background: linear-gradient(180deg, rgba(13, 30, 28, 0.9) 0%, rgba(13, 30, 28, 0.6) 100%);
  border: 1px solid rgba(13, 148, 136, 0.15);
  padding: 3rem 2rem;
  border-radius: 32px;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  backdrop-filter: blur(16px);
  transition: var(--transition-premium);
  overflow: hidden;
}

.featured-venue-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--premium-shadow), 0 0 60px rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.3);
}

.featured-venue-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--premium-gradient);
}

.venue-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(13, 148, 136, 0.1);
  color: var(--primary-light);
  border: 1px solid rgba(13, 148, 136, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.venue-badge i {
  color: var(--primary);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .live-stats-bar {
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.5rem;
    border-radius: 24px;
    width: calc(100% - 2rem);
    max-width: 320px;
  }

  .live-stats-bar::before {
    animation: stats-shimmer 8s ease-in-out infinite;
  }

  .stat-item {
    width: 100%;
    justify-content: center;
    padding: 0.4rem 0.75rem;
  }

  .stat-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(13, 148, 136, 0.2), transparent);
  }
}

@media (max-width: 480px) {
  .live-stats-bar {
    padding: 1rem;
    gap: 0.5rem;
    max-width: 280px;
  }

  .stat-item {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
}

/* =====================================================
   PREMIUM FOOTER
   ===================================================== */

.site-footer {
  margin-top: 5rem;
  padding: 3rem 0 2rem;
  position: relative;
  color: var(--text-muted);
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 7, 0.8) 100%);
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13, 148, 136, 0.3), transparent);
}

.footer-brand {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  font-weight: 300;
  color: var(--text-muted);
}

.footer-brand .brand-name {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}

.footer-links {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 4px;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--accent-gradient);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.footer-links a:hover {
  color: var(--primary-light);
}

.footer-links a:hover::after {
  width: 100%;
}

.footer-divider {
  width: 40px;
  height: 2px;
  background: var(--accent-gradient);
  margin: 1.5rem auto;
  border-radius: 2px;
  opacity: 0.5;
}

.footer-copyright {
  font-size: 0.75rem;
  opacity: 0.6;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .site-footer {
    margin-top: 3rem;
    padding: 2rem 1rem 1.5rem;
  }

  .footer-links {
    gap: 1.5rem;
  }
}

/* =====================================================
   PHASE 10.3 QUICK FIXES
   ===================================================== */

/* Ensure check-in button is always clickable above decorations/fab */
.primary-action-btn {
  position: relative;
  z-index: 2000 !important;
}

/* Cap FAB z-index so it doesn't block modals */
.player-fab {
  z-index: 900 !important;
}

/* Ensure status card sits comfortably below interaction layer */
#status-card {
  position: relative;
  z-index: 950;
}

#status-card.more-menu-open {
  overflow: visible !important;
}

/* =====================================================
   COOLDOWN CARD STYLES
   ===================================================== */

.cooldown-card {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.15) 0%, rgba(45, 212, 191, 0.08) 100%);
  border: 1px solid rgba(13, 148, 136, 0.3);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  animation: cooldownPulse 2s ease-in-out infinite;
}

.cooldown-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cooldown-icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.cooldown-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cooldown-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cooldown-timer {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.cooldown-message {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

@keyframes cooldownPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(13, 148, 136, 0.1);
  }

  50% {
    box-shadow: 0 0 20px rgba(13, 148, 136, 0.25);
  }
}

/* =====================================================
   AWAITING PLAYERS BUTTON (Clickable)
   ===================================================== */

.btn-awaiting-players {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(13, 148, 136, 0.05) 100%);
  border: 1px dashed var(--primary);
  color: var(--primary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  width: 100%;
}

.btn-awaiting-players:hover {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.2) 0%, rgba(13, 148, 136, 0.1) 100%);
  transform: translateY(-1px);
}

.btn-awaiting-players:active {
  transform: translateY(0);
}

/* Beta Badge - Premium Look */
.beta-badge {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  color: #021716;
  -webkit-text-fill-color: #021716;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(13, 148, 136, 0.4);
  vertical-align: middle;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: pulse-teal 2s infinite;
}

@keyframes pulse-teal {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(13, 148, 136, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
  }
}

/* ============================================
   PRINT STYLES - Receipt Printing
   ============================================ */
@media print {
  body.printing-receipt * {
    visibility: hidden;
  }

  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container,
  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container * {
    visibility: visible;
  }

  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }

  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container .quick-actions-grid,
  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container .primary-action-section,
  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container #cooldown-card,
  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container #queue-stats-container,
  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container #print-receipt-btn,
  body.printing-receipt[data-print-target="receipt-clone"] #receipt-print-container #download-receipt-png-btn {
    display: none !important;
  }

  body.printing-receipt[data-print-target="status-card"] #status-card,
  body.printing-receipt[data-print-target="status-card"] #status-card * {
    visibility: visible;
  }

  body.printing-receipt[data-print-target="status-card"] #status-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  body.printing-receipt[data-print-target="status-card"] .modal-header {
    background: #f5f5f5 !important;
    color: black !important;
  }

  body.printing-receipt[data-print-target="status-card"] .modal-title,
  body.printing-receipt[data-print-target="status-card"] .status-badge,
  body.printing-receipt[data-print-target="status-card"] .info-item .label,
  body.printing-receipt[data-print-target="status-card"] .info-item .value {
    color: black !important;
  }

  body.printing-receipt[data-print-target="status-card"] #receipt-card {
    background: #f9f9f9 !important;
    border: 1px solid #ddd !important;
  }

  body.printing-receipt[data-print-target="status-card"] #receipt-reference {
    color: #d97706 !important;
    background: #fef3c7 !important;
  }

  body.printing-receipt[data-print-target="status-card"] #download-receipt-btn,
  body.printing-receipt[data-print-target="status-card"] .quick-actions-grid,
  body.printing-receipt[data-print-target="status-card"] .primary-action-section,
  body.printing-receipt[data-print-target="status-card"] #cooldown-card,
  body.printing-receipt[data-print-target="status-card"] #queue-stats-container {
    display: none !important;
  }

  body.printing-receipt[data-print-target="status-card"] #status-desc {
    color: #666 !important;
  }

  body.printing-receipt[data-print-target="player-modal"] #player-modal,
  body.printing-receipt[data-print-target="player-modal"] #player-modal * {
    visibility: visible;
  }

  body.printing-receipt[data-print-target="player-modal"] #player-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent !important;
  }

  body.printing-receipt[data-print-target="player-modal"] #player-modal .modal-content {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

body[data-exporting="receipt"] #print-receipt-btn,
body[data-exporting="receipt"] #download-receipt-png-btn,
body[data-exporting="receipt"] .quick-actions-grid,
body[data-exporting="receipt"] .primary-action-section,
body[data-exporting="receipt"] #cooldown-card,
body[data-exporting="receipt"] #queue-stats-container {
  display: none !important;
}

/* =====================================================
   QUICK ACTIONS & MORE MENU FIX
   ===================================================== */

/* Tile Styling */
.quick-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
  text-decoration: none;
}

.quick-action-tile:hover {
  background: rgba(13, 148, 136, 0.25);
  transform: translateY(-2px);
  color: white;
  border-color: var(--primary);
}

.quick-action-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
}

/* More Menu Dropdown - Pop Upwards */
.more-menu {
  position: absolute;
  bottom: 120%;
  right: 0;
  width: 210px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform-origin: bottom right;
  animation: scaleIn 0.2s ease;
}

/* Ensure trigger is relative */
.more-menu-trigger {
  position: relative;
}

/* Menu Items */
.more-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  text-decoration: none;
}

.more-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.more-menu-item i {
  width: 18px;
  height: 18px;
  color: var(--primary-light);
}

.more-menu-item.danger {
  color: var(--error);
}

.more-menu-item.danger:hover {
  background: rgba(244, 63, 94, 0.1);
}

.more-menu-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.25rem 0;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.more-menu.active {
  display: flex;
}