:root {
  --background: 0 0% 99%;
  --foreground: 350 24% 12%;
  --primary: 356 86% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 94%;
  --secondary-foreground: 350 24% 12%;
  --muted: 0 0% 92%;
  --muted-foreground: 350 9% 42%;
  --destructive: 0 84% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 350 20% 88%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 22px hsl(356 86% 22% / 0.08);
  --shadow-md: 0 16px 38px hsl(356 86% 22% / 0.13);
  --shadow-lg: 0 28px 70px hsl(356 86% 18% / 0.20);
  --transition-fast: 150ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 350 30% 8%;
  --foreground: 0 0% 98%;
  --primary: 356 88% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 350 22% 16%;
  --secondary-foreground: 0 0% 98%;
  --muted: 350 20% 18%;
  --muted-foreground: 350 8% 72%;
  --destructive: 0 84% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 350 18% 22%;
  --card: 350 28% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.game-grid {
  background-image:
    linear-gradient(hsl(var(--primary) / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary) / 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.loading-bar { animation: load 2.25s var(--transition-smooth) forwards; }
.logo-bounce { animation: logoBounce 1.6s ease-in-out infinite; }
.animate-pop-in { animation: popIn 520ms var(--transition-smooth) both; }
.animate-slide-up { animation: slideUp 520ms var(--transition-smooth) both; }
.animate-message-in { animation: messageIn 260ms var(--transition-smooth) both; }
.animate-menu-pop { animation: menuPop 180ms var(--transition-smooth) both; transform-origin: bottom left; }
.animate-toast { animation: toastIn 260ms var(--transition-smooth) both; }

.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--secondary)), hsl(var(--muted)));
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
}

.online-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  display: inline-block;
  background: hsl(138 78% 44%);
  box-shadow: 0 0 0 0 hsl(138 78% 44% / 0.7);
  animation: pulseOnline 1.35s infinite;
}

.typing-dots { display: flex; gap: 0.35rem; align-items: center; }
.typing-dots span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  animation: typing 1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 120ms; }
.typing-dots span:nth-child(3) { animation-delay: 240ms; }

.chat-scroll::-webkit-scrollbar { width: 10px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.22); border-radius: 999px; border: 3px solid hsl(var(--background)); }

@keyframes load { from { width: 0%; } 55% { width: 72%; } to { width: 100%; } }
@keyframes logoBounce { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes messageIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes menuPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulseOnline { 0% { box-shadow: 0 0 0 0 hsl(138 78% 44% / 0.65); } 70% { box-shadow: 0 0 0 8px hsl(138 78% 44% / 0); } 100% { box-shadow: 0 0 0 0 hsl(138 78% 44% / 0); } }
@keyframes typing { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}