/* ================================================================
   RANK BADGE STYLES — Elemental effects for review ranks
   ================================================================ */

/* ---- Base badge ---- */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  padding: 4px 18px;
  border-radius: 8px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---- F Rank ---- */
.rank-F {
  background: #3a2a1a;
  color: #a0845c;
  border: 2px solid #5c4a2a;
}
.rank-F::after {
  content: '\1F4A9';
  position: absolute;
  right: -4px;
  top: -8px;
  font-size: 16px;
  animation: poopBounce 1.5s ease-in-out infinite;
}
@keyframes poopBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-10deg); }
  75% { transform: translateY(2px) rotate(5deg); }
}

/* ---- D Rank — Wind ---- */
.rank-D {
  background: linear-gradient(135deg, #16232e 0%, #243a4c 50%, #16232e 100%);
  color: #8fd0f0;
  border: 1px solid rgba(160, 215, 245, 0.55);
  overflow: hidden;
  text-shadow: 0 0 8px rgba(143, 208, 240, 0.7), 0 0 18px rgba(143, 208, 240, 0.3);
  /* static mid-glow; the breath is now a cheap opacity pulse, not a box-shadow repaint */
  box-shadow: 0 0 10px rgba(122, 184, 212, 0.32), 0 0 20px rgba(122, 184, 212, 0.12), inset 0 0 8px rgba(122, 184, 212, 0.12);
}
/* Flowing gust streaks — three layers sweeping across at different speeds/directions */
.rank-D::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(160, 220, 250, 0.55) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(143, 208, 240, 0.35) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(122, 184, 212, 0.25) 50%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 55% 1.5px, 75% 1px, 40% 1px;
  background-position: 20% 28%, 70% 52%, 35% 74%;
  border-radius: 2px;
  /* streaks stay put; only opacity breathes (no background-position repaint) */
  animation: gustBreath 2.2s ease-in-out infinite;
}
@keyframes gustBreath {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
/* Soft swirling air current rising through the badge */
.rank-D::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 90% at 30% 100%, rgba(143, 208, 240, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 80% at 75% 0%, rgba(143, 208, 240, 0.12), transparent 70%);
  animation: windSwirl 1.8s ease-in-out infinite;
}
@keyframes windSwirl {
  0%, 100% { transform: translateX(-4px); opacity: 0.6; }
  50% { transform: translateX(4px); opacity: 1; }
}

/* ---- C Rank — Earth ---- */
.rank-C {
  background: linear-gradient(180deg, #2a1f14 0%, #3d2b18 100%);
  color: #c49a6c;
  border: 2px solid #5a4030;
  overflow: hidden;
}
.rank-C::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(139, 90, 43, 0.3), transparent 60%);
  animation: earthRumble 4s ease-in-out infinite;
}
@keyframes earthRumble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

/* ---- B Rank — Water ---- */
.rank-B {
  background: linear-gradient(180deg, #0a1e3d 0%, #0d2847 60%, #102e50 100%);
  color: #4fc3f7;
  border: 2px solid rgba(79, 195, 247, 0.4);
  overflow: hidden;
}
.rank-B::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  height: 55%;
  background:
    radial-gradient(ellipse 12px 10px at 20% 50%, rgba(79, 195, 247, 0.35) 0%, transparent 100%),
    radial-gradient(ellipse 10px 8px at 50% 30%, rgba(79, 195, 247, 0.3) 0%, transparent 100%),
    radial-gradient(ellipse 14px 12px at 75% 60%, rgba(79, 195, 247, 0.25) 0%, transparent 100%),
    linear-gradient(0deg, rgba(79, 195, 247, 0.15), transparent);
  animation: waterFlow 2.5s ease-in-out infinite;
  border-radius: 0 0 6px 6px;
}
@keyframes waterFlow {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(8px) scaleY(0.85); }
}

/* ---- A Rank — Lightning ---- */
.rank-A {
  background: linear-gradient(135deg, #1a1a30 0%, #15152a 100%);
  color: #e8d44d;
  border: 2px solid rgba(232, 212, 77, 0.3);
  overflow: hidden;
}
.rank-A::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 30%, rgba(232, 212, 77, 0.6) 48%, white 50%, rgba(232, 212, 77, 0.6) 52%, transparent 70%);
  opacity: 0;
  animation: lightningStrike 3.5s ease-in-out infinite;
}
.rank-A::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  border: 2px solid rgba(232, 212, 77, 0.4);
  opacity: 0;
  animation: thunderGlow 3.5s ease-in-out infinite;
}
@keyframes lightningStrike {
  0%, 40%, 44%, 48%, 100% { opacity: 0; }
  41%, 43% { opacity: 1; }
  45%, 47% { opacity: 0.7; }
}
@keyframes thunderGlow {
  0%, 48%, 58%, 100% { opacity: 0; box-shadow: none; }
  50%, 56% { opacity: 1; box-shadow: 0 0 15px rgba(232, 212, 77, 0.4); }
}

/* ---- S Rank — Blue Glow ---- */
.rank-S {
  background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #0a1628 100%);
  color: #60c5ff;
  border: 2px solid rgba(96, 197, 255, 0.6);
  /* static mid-glow; the pulse now runs on a separate opacity layer, not box-shadow */
  box-shadow:
    0 0 11px rgba(96, 197, 255, 0.5),
    0 0 28px rgba(96, 197, 255, 0.25),
    inset 0 0 15px rgba(96, 197, 255, 0.12);
  text-shadow:
    0 0 8px rgba(96, 197, 255, 0.8),
    0 0 20px rgba(96, 197, 255, 0.4);
}
.rank-S::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  box-shadow:
    0 0 16px rgba(96, 197, 255, 0.55),
    0 0 40px rgba(96, 197, 255, 0.3),
    0 0 70px rgba(96, 197, 255, 0.12);
  animation: sGlowPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sGlowPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---- S+ Rank — Galaxy ---- */
.rank-S\+ {
  background: radial-gradient(circle at 30% 40%, #1a0a30, #0a0020 60%, #050010);
  color: #e0c0ff;
  border: 2px solid rgba(224, 192, 255, 0.4);
  overflow: hidden;
  position: relative;
}
.rank-S\+ .rank-text {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #ff69b4, #9370db, #87ceeb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(200, 150, 255, 0.7));
}
.rank-S\+::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255, 105, 180, 0.3),
    transparent,
    rgba(147, 112, 219, 0.3),
    transparent,
    rgba(135, 206, 235, 0.3),
    transparent
  );
  will-change: transform;
  animation: galaxySpin 6s linear infinite;
}
@keyframes galaxySpin {
  to { transform: rotate(360deg); }
}
.rank-S\+::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background:
    radial-gradient(1px 1px at 15% 25%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 75%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 35%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 85%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 65% 45%, white 50%, transparent 100%);
  background-color: transparent;
  animation: starsTwinkle 3s ease-in-out infinite;
}
@keyframes starsTwinkle {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ---- Reduced motion: freeze badge FX for users who opt out ---- */
@media (prefers-reduced-motion: reduce) {
  .rank-badge,
  .rank-badge::before,
  .rank-badge::after {
    animation: none !important;
  }
}

/* ---- Vote buttons ---- */
.vote-btn-wrap {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid #333;
  background: #1a1a2e;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.vote-btn:hover { background: #252540; border-color: #555; }
.vote-btn.upvoted { background: #1a3a2a; color: #4ade80; border-color: #4ade80; }
.vote-btn.downvoted { background: #3a1a1a; color: #f87171; border-color: #f87171; }
.vote-btn .icon { font-size: 15px; }

/* ---- Threads profile / XP-rank popup ---- */
.thr-modal-user-card { width: 360px; }
.thr-user-pill { cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.thr-user-pill:hover { background: rgba(255,255,255,0.05); border-color: var(--thr-accent); }
.thr-user-caret { font-size: 11px; color: var(--thr-muted); margin-right: 4px; }
.thr-mine-card { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.thr-mine-top { display: flex; align-items: center; gap: 14px; text-align: left; }
.thr-mine-avatar {
    width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 20px; object-fit: cover;
}
.thr-mine-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.thr-mine-username { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thr-mine-role { color: var(--thr-muted); font-size: 13px; }
.thr-mine-rank { display: flex; justify-content: center; }
.thr-mine-rank .rank-badge { font-size: 18px; padding: 6px 26px; }
.thr-mine-xp { display: flex; flex-direction: column; gap: 7px; text-align: center; }
.thr-mine-xp .xp-bar { width: 100%; }
.thr-mine-xp-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--thr-muted); font-weight: 600; }
.thr-mine-link { margin-top: 2px; }
.thr-mine-logout { text-align: center; padding: 6px; }

/* Other-user mini-profile modal */
.thr-mine-joined {
    font-size: 12.5px;
    color: var(--thr-muted);
    font-weight: 600;
    padding: 8px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
}
.thr-profile-tags-wrap { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.thr-profile-tags-label { font-size: 12px; color: var(--thr-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.thr-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.thr-profile-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(139,92,246,.16);
    border: 1px solid rgba(139,92,246,.4);
    color: #dcd3ff;
    font-size: 12.5px; font-weight: 600;
}
.thr-profile-tag i { font-size: 10px; color: #8b5cf6; }
.thr-profile-tag .thr-tag-role {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: #a78bfa; background: rgba(255,255,255,.08); border-radius: 999px; padding: 1px 6px;
}
.thr-profile-tags .thr-profile-empty { font-size: 12.5px; color: var(--thr-muted); }