/* Theme Styles */
.theme-night {
  --primary-color: #1a1a2e;
  --primary-dark: #16213e;
  --primary-light: #0f3460;
  --secondary-color: #e94560;
  --background-color: #16213e;
  --card-background: #1a1a2e;
  --text-color: #ffffff;
  --text-light: #b0b0b0;
  background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
}

.theme-rainbow {
  --primary-color: #ff6b6b;
  --primary-dark: #ee5a52;
  --primary-light: #ff8e8e;
  --secondary-color: #4ecdc4;
  --background-color: #f8f9fa;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
  background-size: 400% 400%;
  animation: rainbowGradient 10s ease infinite;
}

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

.theme-mosque {
  --primary-color: #2c5530;
  --primary-dark: #1e3a21;
  --primary-light: #4a7c59;
  --secondary-color: #d4af37;
  --background-color: #f5f5dc;
  --card-background: #ffffff;
  background: linear-gradient(135deg, #f5f5dc 0%, #e6e6d4 100%);
}

.theme-nature {
  --primary-color: #2d5016;
  --primary-dark: #1e3a0f;
  --primary-light: #4a7c2a;
  --secondary-color: #8bc34a;
  --background-color: #f1f8e9;
  --card-background: #ffffff;
  background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
}

.theme-gold {
  --primary-color: #b8860b;
  --primary-dark: #9a7209;
  --primary-light: #daa520;
  --secondary-color: #ffd700;
  --background-color: #fffef7;
  --card-background: #ffffff;
  background: linear-gradient(135deg, #fffef7 0%, #f9f7e8 100%);
}

.theme-gold .card {
  border: 1px solid #daa520;
  box-shadow: 0 4px 15px rgba(218, 165, 32, 0.1);
}

/* Profile Stats */
.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--primary-light);
  border-radius: 8px;
  color: white;
}

.current-avatar {
  text-align: center;
}

.avatar-display {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Owned Items */
.owned-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.owned-item {
  text-align: center;
  padding: 0.5rem;
  background: var(--card-background);
  border: 1px solid var(--primary-light);
  border-radius: 6px;
  transition: transform 0.2s;
}

.owned-item:hover {
  transform: translateY(-2px);
}

.owned-item-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.owned-item-name {
  font-size: 0.7rem;
  color: var(--text-light);
}

/* Stickers Collection */
.stickers-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.user-sticker {
  font-size: 1.5rem;
  padding: 0.25rem;
  background: var(--primary-light);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
  display: inline-block;
}

.user-sticker:hover {
  transform: scale(1.2);
}

.mascot {
  font-size: 2.8rem;
  animation: pulse 2s infinite, wiggle 3s infinite;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
}

.bubble-post {
  border-radius: 30px 30px 30px 10px;
  background: linear-gradient(120deg, #fceabb 0%, #f8b500 100%);
  box-shadow: 0 4px 24px rgba(250, 200, 100, 0.15);
  border: 2px solid #ffe082;
  margin-bottom: 2rem;
  padding: 1.5rem;
  position: relative;
}

.user-badge {
  background: linear-gradient(90deg, #ffd600, #ff6f00);
  color: #fff;
  font-size: 0.85rem;
  border-radius: 12px;
  padding: 2px 10px;
  margin-left: 8px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 214, 0, 0.15);
}

.report-btn {
  background: #ffeaea;
  color: #e53935;
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 1.1rem;
  margin-left: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.report-btn:hover { background: #ffcdd2; }
.emoji-picker span {
  font-size: 1.4rem;
  margin: 0 4px;
  cursor: pointer;
  transition: transform 0.2s;
}
.emoji-picker span:hover { transform: scale(1.3) rotate(-10deg);}

.fab-post {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #fff;
  font-size: 2.2rem;
  box-shadow: 0 6px 24px rgba(79, 172, 254, 0.25);
  border: none;
  z-index: 2000;
  display: none;
}
@media (max-width: 600px) {
  .fab-post { display: block; }
}