/* ============================
   KS HackZone — Rank Badges
   Dynamic classes (from DB):
   - badge-n00b
   - badge-script-kiddie
   - badge-flag-hunter
   - badge-hacker
   - badge-elite-hacker
   - badge-haxor
   - badge-master-haxor
   - badge-wizard
   - badge-master-wizard
   - badge-exploit-master
   - badge-omega
   - badge-god-mode
   ============================ */

   :root{
    --rb-text: var(--text, #e9e6ff);
    --rb-muted: var(--muted, #b8b2d6);
    --rb-stroke: var(--stroke, rgba(155,140,243,.28));
    --rb-purple-1:#a176ff; --rb-purple-2:#6c3cff; --rb-cyan:#6be2ff;
    --rb-pink:#ff7fb0; --rb-mag:#ff3b8d; --rb-gold:#ffd86b; --rb-amber:#ffb13b;
    --rb-silver:#c9d6e2; --rb-bronze:#ffb27a; --rb-lime:#b6ff9b; --rb-orange:#ff9a5f;
  }
  
  /* baseline for any badge (your markup already adds .rank-badge; these rules assume it exists) */
  .rank-badge[class*="badge-"]{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
    font-weight:900; letter-spacing:.15px;
    line-height:1; white-space:nowrap;
    border-radius:999px;
    color:var(--rb-text);
    user-select:none;
    will-change: filter, transform;
  }
  
  /* ============================
     Keyframes (scoped)
     ============================ */
  @keyframes rb-shimmer-x { to { background-position: 200% 0; } }
  @keyframes rb-pulse     { 0%,100% { box-shadow:0 0 0 rgba(0,0,0,0) } 50% { box-shadow:0 0 26px rgba(162,118,255,.35) } }
  @keyframes rb-flicker   { 0%,100% { text-shadow:0 0 0 transparent } 50% { text-shadow:0 0 10px rgba(107,226,255,.55) } }
  @keyframes rb-scan      { 0% { transform: translateX(-120%)} 100%{ transform: translateX(220%)} }
  @keyframes rb-rotate    { to { transform: rotate(360deg) } }
  @keyframes rb-stars     { 0% { opacity:.3; transform: rotate(0) } 100% { opacity:.65; transform: rotate(360deg) } }
  @keyframes rb-ants      { to { background-position: 12px 0 } }
  @keyframes rb-breathe   { 0%,100% { filter:brightness(1) } 50% { filter:brightness(1.2) } }
  @keyframes rb-twinkle   { 0%,100% { opacity:.25; transform:translateY(0)} 50%{opacity:.6; transform:translateY(-2px)} }
  @keyframes rb-diag      { to { background-position: 40px 0 } }
  
  /* reduced-motion: stop animations */
  @media (prefers-reduced-motion: reduce){
    .rank-badge[class*="badge-"],
    .rank-badge[class*="badge-"]::before,
    .rank-badge[class*="badge-"]::after{
      animation: none !important;
      transition: none !important;
    }
  }
  
  /* ============================
     TIER 1 — Entry
     ============================ */
  
  /* {N00b} — low-key muted glass */
  .rank-badge.badge-n00b{
    padding:.22rem .55rem;
    color:#cbc6ef;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(180deg,#ffffff12,#ffffff06);
  }
  
  /* [Scr1pt_K1dd13] — playful tiny glitch */
  .rank-badge.badge-script-kiddie{
    padding:.24rem .58rem;
    color:#d7f5ff;
    border:1px solid rgba(108,60,255,.32);
    background:
      radial-gradient(60% 140% at 10% 0%, rgba(108,60,255,.35), transparent 60%),
      linear-gradient(180deg,#ffffff1e,#ffffff0a);
    filter:saturate(1.1);
    animation: rb-flicker 2.6s ease-in-out infinite;
  }
  
  /* <Flag_Hunt3r> — diagonal hunt stripes + tiny flag notch */
  .rank-badge.badge-flag-hunter{
    padding:.26rem .64rem .26rem .56rem;
    color:#eafff6;
    border:1px solid rgba(107,226,255,.35);
    background:
      repeating-linear-gradient(135deg, rgba(107,226,255,.22) 0 6px, rgba(161,118,255,.12) 6px 12px),
      linear-gradient(180deg,#ffffff20,#ffffff0a);
  }
  .rank-badge.badge-flag-hunter::after{
    content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
    width:10px; height:12px; border-radius:2px 2px 0 2px;
    background:linear-gradient(180deg, var(--rb-cyan), #74a2ff);
    box-shadow:0 0 10px rgba(107,226,255,.55);
  }
  
  /* ============================
     TIER 2 — Intermediate
     ============================ */
  
  /* ::H4ck3r:: — scanning line + subtle grid sheen */
  .rank-badge.badge-hacker{
    padding:.26rem .7rem;
    color:#eae7ff;
    border:1px solid rgba(161,118,255,.45);
    background:
      linear-gradient(90deg, #ffffff10 1px, transparent 1px) 0 0/8px 100%,
      linear-gradient(180deg,#2a164a88,#170c2e88);
    overflow:hidden;
  }
  .rank-badge.badge-hacker::before{
    content:""; position:absolute; inset:-2px; transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(107,226,255,.35), transparent);
    filter: blur(2px);
    animation: rb-scan 2.8s linear infinite;
  }
  
  /* //3l1t3_H4ck3r — purple→cyan shimmer + soft aura */
  .rank-badge.badge-elite-hacker{
    padding:.28rem .72rem;
    color:#f7f5ff;
    border:1px solid rgba(161,118,255,.55);
    background: linear-gradient(90deg, var(--rb-purple-1), var(--rb-purple-2), var(--rb-cyan), var(--rb-purple-1));
    background-size: 200% 100%;
    animation: rb-shimmer-x 4s ease infinite, rb-pulse 3.6s ease-in-out infinite;
    box-shadow:0 0 20px rgba(108,60,255,.25) inset;
  }
  
  /* #H4x0r# — marching-ants cyber border */
  .rank-badge.badge-haxor{
    padding:.28rem .7rem;
    color:#ffe8fb;
    border:1px solid transparent;
    background: linear-gradient(180deg,#ffffff1c,#ffffff0a);
  }
  .rank-badge.badge-haxor::before{
    content:""; position:absolute; inset:0; border-radius:999px; padding:2px;
    background:
      repeating-linear-gradient(90deg, #ff7fb0 0 6px, transparent 6px 12px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: rb-ants 1.2s linear infinite;
    opacity:.9;
  }
  
  /* ###M4st3r_H4x0r### — inner neon ring + breathing glow */
  .rank-badge.badge-master-haxor{
    padding:.3rem .76rem;
    color:#fff0ff;
    border:1px solid rgba(255,127,176,.45);
    background: radial-gradient(120% 120% at 10% 20%, rgba(255,127,176,.22), transparent 60%),
                linear-gradient(180deg,#ffffff1e,#ffffff08);
    animation: rb-breathe 2.8s ease-in-out infinite;
  }
  .rank-badge.badge-master-haxor::after{
    content:""; position:absolute; inset:-3px; border-radius:999px;
    box-shadow:0 0 22px rgba(255,127,176,.35) inset;
    pointer-events:none;
  }
  
  /* ============================
     TIER 3 — Advanced
     ============================ */
  
  /* [W1z4rd] — sparkly stars drifting */
  .rank-badge.badge-wizard{
    padding:.3rem .78rem;
    color:#f3eaff;
    border:1px solid rgba(161,118,255,.55);
    background:
      radial-gradient(80% 140% at 0% 0%, rgba(161,118,255,.28), transparent 60%),
      linear-gradient(180deg,#ffffff20,#ffffff0a);
  }
  .rank-badge.badge-wizard::before{
    content:""; position:absolute; inset:-8px; border-radius:999px;
    background:
      radial-gradient(#ffffff88 1px, transparent 2px) 0 0/12px 12px,
      radial-gradient(#caa9ff88 1px, transparent 3px) 6px 6px/18px 18px;
    mix-blend-mode: screen; opacity:.35; animation: rb-stars 18s linear infinite;
  }
  
  /* [[M4st3r_W1z4rd]] — orbiting arc + brighter twinkles */
  .rank-badge.badge-master-wizard{
    padding:.32rem .82rem;
    color:#fff;
    border:1px solid rgba(161,118,255,.6);
    background: linear-gradient(180deg,#ffffff28,#ffffff10);
  }
  .rank-badge.badge-master-wizard::before{
    content:""; position:absolute; inset:-6px; border-radius:999px;
    border:2px dashed rgba(161,118,255,.6); opacity:.7; animation: rb-rotate 12s linear infinite;
  }
  .rank-badge.badge-master-wizard::after{
    content:""; position:absolute; inset:-10px; border-radius:999px;
    background:
      radial-gradient(#ffffff 2px, transparent 3px) 0 0/18px 18px,
      radial-gradient(#7ce6ff 1px, transparent 2px) 9px 9px/18px 18px;
    mix-blend-mode: screen; opacity:.35; animation: rb-twinkle 3.2s ease-in-out infinite;
  }
  
  /* ::3xpl0it_M4st3r:: — caution diagonal stripes, subtle motion */
  .rank-badge.badge-exploit-master{
    padding:.32rem .84rem;
    color:#fff9f0;
    border:1px solid rgba(255,154,95,.55);
    background:
      repeating-linear-gradient(135deg, rgba(255,154,95,.25) 0 8px, rgba(255,154,95,.05) 8px 16px),
      linear-gradient(180deg,#ffffff22,#ffffff0c);
    animation: rb-diag 4s linear infinite;
    box-shadow: 0 0 18px rgba(255,154,95,.18) inset;
  }
  
  /* ============================
     TIER 4 — Legendary
     ============================ */
  
  /* <0m3g4/> — cosmic conic glow */
  .rank-badge.badge-omega{
    padding:.34rem .9rem;
    color:#ffffff;
    border:1px solid rgba(107,226,255,.55);
    background: radial-gradient(120% 140% at 20% 0%, rgba(107,226,255,.22), transparent 60%),
                linear-gradient(180deg,#ffffff28,#ffffff10);
    overflow:hidden;
  }
  .rank-badge.badge-omega::before{
    content:""; position:absolute; inset:-20%; border-radius:999px;
    background:
      conic-gradient(from 0deg, #6be2ff, #a176ff, #6c3cff, #6be2ff);
    filter: blur(18px); opacity:.45; animation: rb-rotate 16s linear infinite;
  }
  .rank-badge.badge-omega::after{
    content:""; position:absolute; inset:2px; border-radius:999px;
    background: linear-gradient(180deg,#03001488,#03001466);
  }
  
  /* ./G0d_M0d3 — divine gold aura + shimmer + glitter */
  .rank-badge.badge-god-mode{
    padding:.36rem 1rem;
    color:#0b0614;
    border:1px solid rgba(255,216,107,.85);
    background: linear-gradient(90deg, #fff8d4, #ffe79c, #ffd86b, #ffe79c, #fff8d4);
    background-size: 220% 100%;
    animation: rb-shimmer-x 5s ease-in-out infinite;
    box-shadow:
      0 0 0 2px rgba(255,216,107,.35) inset,
      0 10px 28px rgba(255,216,107,.25),
      0 0 32px rgba(255,216,107,.35);
  }
  .rank-badge.badge-god-mode::before{
    content:""; position:absolute; inset:-14px; border-radius:999px; pointer-events:none;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(255,216,107,.35), transparent 60%),
      radial-gradient(ellipse at 80% 100%, rgba(255,177,59,.28), transparent 60%);
    filter: blur(16px);
    animation: rb-pulse 3.2s ease-in-out infinite;
  }
  .rank-badge.badge-god-mode::after{
    content:""; position:absolute; inset:-6px; border-radius:999px;
    background:
      radial-gradient(#ffffff 1.3px, transparent 2.6px) 0 0/16px 16px,
      radial-gradient(#ffeaa8 1px, transparent 3px) 8px 8px/18px 18px;
    mix-blend-mode: screen; opacity:.45; animation: rb-stars 20s linear infinite;
  }
  
  /* ============================
     Fine-tuning on darker backgrounds
     ============================ */
  .rank-badge.badge-n00b,
  .rank-badge.badge-script-kiddie,
  .rank-badge.badge-flag-hunter,
  .rank-badge.badge-hacker,
  .rank-badge.badge-elite-hacker,
  .rank-badge.badge-haxor,
  .rank-badge.badge-master-haxor,
  .rank-badge.badge-wizard,
  .rank-badge.badge-master-wizard,
  .rank-badge.badge-exploit-master,
  .rank-badge.badge-omega{
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }
  
  /* compact mode helper if you ever need it */
  .rank-badge.is-sm{ transform: scale(.96); transform-origin: 50% 50% }