:root {
  --roblox-dark: #1a1a2e;
  --roblox-darker: #0f0f1e;
  --roblox-red: #e2231a;
  --roblox-red-glow: rgba(226, 35, 26, 0.3);
  --roblox-green: #00b06f;
  --roblox-green-glow: rgba(0, 176, 111, 0.3);
  --roblox-yellow: #f5c542;
  --roblox-blue: #00a2ff;
  --roblox-charcoal: #393b3d;
  --roblox-gray: #2a2a3e;
  --roblox-light: #e8e8f0;
  --roblox-muted: #8888a8;
}

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

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--roblox-darker);
  color: var(--roblox-light);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(226, 35, 26, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 162, 255, 0.04) 0%, transparent 50%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgba(255,255,255,0.008) 50px,
      rgba(255,255,255,0.008) 51px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgba(255,255,255,0.008) 50px,
      rgba(255,255,255,0.008) 51px
    );
  pointer-events: none;
  z-index: 0;
}

#root {
  position: relative;
  z-index: 1;
}

.font-bungee {
  font-family: 'Bungee', cursive;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes typewriter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.animate-slide-up { animation: slideInUp 0.5s ease-out; }
.animate-slide-left { animation: slideInLeft 0.4s ease-out; }
.animate-slide-right { animation: slideInRight 0.4s ease-out; }
.animate-bounce-in { animation: bounceIn 0.6s ease-out; }
.animate-pulse-slow { animation: pulse 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-fade-scale { animation: fadeInScale 0.4s ease-out; }

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--roblox-muted);
  animation: dotPulse 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

.card-glow-red {
  box-shadow: 0 0 20px var(--roblox-red-glow), 0 4px 20px rgba(0,0,0,0.3);
}
.card-glow-green {
  box-shadow: 0 0 20px var(--roblox-green-glow), 0 4px 20px rgba(0,0,0,0.3);
}

.happiness-bar {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-accept {
  background: linear-gradient(135deg, #00b06f 0%, #00d084 100%);
  transition: all 0.2s ease;
}
.btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--roblox-green-glow);
}
.btn-accept:active {
  transform: translateY(0) scale(0.97);
}

.btn-reject {
  background: linear-gradient(135deg, #e2231a 0%, #ff4444 100%);
  transition: all 0.2s ease;
}
.btn-reject:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--roblox-red-glow);
}
.btn-reject:active {
  transform: translateY(0) scale(0.97);
}

.chat-bubble {
  max-width: 85%;
  word-wrap: break-word;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

.game-over-overlay {
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.85);
}

@media (max-width: 768px) {
  .main-panels {
    flex-direction: column !important;
  }
}

/* Infinite happiness glow effects */
@keyframes rainbowGlow {
  0% { box-shadow: 0 0 20px rgba(255,0,0,0.3); }
  16% { box-shadow: 0 0 20px rgba(255,165,0,0.3); }
  33% { box-shadow: 0 0 20px rgba(255,255,0,0.3); }
  50% { box-shadow: 0 0 20px rgba(0,255,0,0.3); }
  66% { box-shadow: 0 0 20px rgba(0,0,255,0.3); }
  83% { box-shadow: 0 0 20px rgba(128,0,255,0.3); }
  100% { box-shadow: 0 0 20px rgba(255,0,0,0.3); }
}

.rainbow-glow {
  animation: rainbowGlow 3s linear infinite;
}

@keyframes floatUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-40px); }
}

.float-up {
  animation: floatUp 1s ease-out forwards;
}

/* Scrollbar for community chat */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Tab glow for pending moderation */
@keyframes tabPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.tab-pulse {
  animation: tabPulse 2s ease-in-out infinite;
}