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

:root {
  --banana: #FFE135;
  --hotpink: #FF69B4;
  --charcoal: #1E1E1E;
  --neon: #39FF14;
  --darkbg: #121212;
}

body {
  background: var(--darkbg);
  font-family: 'Space Mono', monospace;
  color: #fff;
  overflow-x: hidden;
}

@keyframes spin-banana {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounce-in {
  0% { transform: scale(0.3) translateY(20px); opacity: 0; }
  50% { transform: scale(1.05) translateY(-5px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes fade-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px var(--banana); }
  50% { box-shadow: 0 0 20px var(--banana), 0 0 40px var(--hotpink); }
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

@keyframes map-spin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.spin-banana {
  animation: spin-banana 4s linear infinite;
  display: inline-block;
}

.bounce-in {
  animation: bounce-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

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

.glitch-text {
  animation: glitch 0.3s ease-in-out;
}

.map-loading-spin {
  animation: map-spin 2s ease-in-out infinite;
  font-size: 3rem;
}

.shimmer-text {
  background: linear-gradient(90deg, var(--banana), var(--hotpink), var(--neon), var(--banana));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

.chat-scroll::-webkit-scrollbar {
  width: 6px;
}
.chat-scroll::-webkit-scrollbar-track {
  background: #2a2a2a;
  border-radius: 3px;
}
.chat-scroll::-webkit-scrollbar-thumb {
  background: var(--hotpink);
  border-radius: 3px;
}

.map-strip::-webkit-scrollbar {
  height: 6px;
}
.map-strip::-webkit-scrollbar-track {
  background: #2a2a2a;
}
.map-strip::-webkit-scrollbar-thumb {
  background: var(--banana);
  border-radius: 3px;
}

.header-gradient {
  background: linear-gradient(135deg, var(--banana) 0%, var(--hotpink) 50%, #ff3366 100%);
}

.grok-bubble {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid var(--neon);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
}

.user-bubble {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5986 100%);
  border: 1px solid #4a9eff;
}

.map-container {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0a 100%);
  border: 2px solid var(--banana);
}

.meme-caption {
  font-family: 'Archivo Black', Impact, sans-serif;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  letter-spacing: 1px;
}

.thumbnail-card {
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.thumbnail-card:hover {
  border-color: var(--banana);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 225, 53, 0.3);
}
.thumbnail-card.active {
  border-color: var(--hotpink);
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
}

.action-btn {
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.action-btn:active {
  transform: translateY(0);
}