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

:root {
  --bg-dark: #090514;
  --bg-card: rgba(18, 12, 33, 0.7);
  --neon-pink: #ff007f;
  --neon-pink-glow: 0 0 8px rgba(255, 0, 127, 0.6), 0 0 20px rgba(255, 0, 127, 0.3);
  --neon-cyan: #00f0ff;
  --neon-cyan-glow: 0 0 8px rgba(0, 240, 255, 0.6), 0 0 20px rgba(0, 240, 255, 0.3);
  --neon-green: #39ff14;
  --neon-green-glow: 0 0 8px rgba(57, 255, 20, 0.6), 0 0 20px rgba(57, 255, 20, 0.3);
  --neon-yellow: #ffea00;
  --neon-yellow-glow: 0 0 8px rgba(255, 234, 0, 0.6), 0 0 20px rgba(255, 234, 0, 0.3);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: #f3f4f6;
  overflow-x: hidden;
}

.font-title {
  font-family: 'Outfit', sans-serif;
}

/* Custom Neon Utilities */
.neon-text-pink {
  color: var(--neon-pink);
  text-shadow: var(--neon-pink-glow);
}

.neon-text-cyan {
  color: var(--neon-cyan);
  text-shadow: var(--neon-cyan-glow);
}

.neon-text-green {
  color: var(--neon-green);
  text-shadow: var(--neon-green-glow);
}

.neon-border-pink {
  border-color: var(--neon-pink);
  box-shadow: var(--neon-pink-glow);
}

.neon-border-cyan {
  border-color: var(--neon-cyan);
  box-shadow: var(--neon-cyan-glow);
}

.neon-border-green {
  border-color: var(--neon-green);
  box-shadow: var(--neon-green-glow);
}

.neon-border-yellow {
  border-color: var(--neon-yellow);
  box-shadow: var(--neon-yellow-glow);
}

.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-cyan {
  background: rgba(0, 240, 255, 0.03);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.15);
}

.glass-panel-pink {
  background: rgba(255, 0, 127, 0.03);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 0, 127, 0.15);
}

/* Animations */
@keyframes pulse-glow-pink {
  0%, 100% {
    box-shadow: 0 0 4px rgba(255, 0, 127, 0.4), inset 0 0 4px rgba(255, 0, 127, 0.2);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 0, 127, 0.8), inset 0 0 8px rgba(255, 0, 127, 0.4);
  }
}

.pulse-pink {
  animation: pulse-glow-pink 2s infinite ease-in-out;
}

@keyframes pulse-glow-cyan {
  0%, 100% {
    box-shadow: 0 0 4px rgba(0, 240, 255, 0.4), inset 0 0 4px rgba(0, 240, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.8), inset 0 0 8px rgba(0, 240, 255, 0.4);
  }
}

.pulse-cyan {
  animation: pulse-glow-cyan 2s infinite ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.6s ease-in-out;
}

@keyframes flash-red {
  0% { background-color: rgba(255, 0, 60, 0); }
  15% { background-color: rgba(255, 0, 60, 0.6); }
  100% { background-color: rgba(255, 0, 60, 0); }
}

.sabotage-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  animation: flash-red 0.8s ease-out forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(18, 12, 33, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 127, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 0, 127, 0.6);
}

/* Mock Phone Frame for Desktop View */
.phone-frame {
  max-width: 480px;
  margin: 0 auto;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  background: radial-gradient(circle at top, #140d2b 0%, var(--bg-dark) 100%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

/* Custom switch toggle */
.switch-input:checked + .switch-label {
  background-color: var(--neon-cyan);
  box-shadow: var(--neon-cyan-glow);
}
.switch-input:checked + .switch-label .switch-dot {
  transform: translateX(1.25rem);
}

/* Custom Grid layout for Decor mini-game */
.decor-grid-button {
  transition: all 0.2s ease-in-out;
}
.decor-grid-button:active {
  transform: scale(0.92);
}

/* Outfit game pieces */
.outfit-piece {
  transition: transform 0.2s ease;
  user-select: none;
}
.outfit-piece:active {
  cursor: grabbing;
}

/* Floating Animations for Ambient Background Geometries */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(8deg); }
}
@keyframes float-reverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(18px) rotate(-8deg); }
}
.animate-float-slow {
  animation: float-slow 10s ease-in-out infinite;
}
.animate-float-reverse {
  animation: float-reverse 12s ease-in-out infinite;
}