/* Staff perks: badges next to names, exclusive frames / effects / name styles, coloured tags.
   (The server only lets staff save the exclusive ones; see app/profiles.js PERKS.) */

/* ───────── badges ───────── */
.lk-nw { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.lk-nw > .lk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-nw.big { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lk-nw.big > .lk-name { white-space: normal; }
.lk-sbs { display: inline-flex; gap: 4px; flex: none; }
.lk-sb { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(255, 255, 255, .12); white-space: nowrap; -webkit-text-fill-color: currentColor; }
.lk-sb b { font-weight: 700; }
.lk-nw.big .lk-sb { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 8px; }
.lk-nw.big .lk-sb .ic { width: 13px; height: 13px; }
.sb-founder {
  color: #1a1200; background: linear-gradient(110deg, #fff6cf, #ffd36b 25%, #ff9ad5 45%, #9ae8ff 60%, #ffd36b 80%, #fff6cf); background-size: 250% 100%;
  box-shadow: 0 0 0 1px rgba(255, 220, 120, .6), 0 0 14px rgba(255, 196, 64, .45); animation: sbShine 4s linear infinite;
}
@keyframes sbShine { to { background-position: -250% 0; } }
.sb-staff { color: #dbeafe; background: linear-gradient(135deg, #2563eb, #1e3a8a); box-shadow: 0 0 0 1px rgba(147, 197, 253, .4); }
.sb-og { color: #ffedd5; background: linear-gradient(135deg, #f97316, #9a3412); }
.sb-verified { color: #fff; background: #1d9bf0; border-radius: 50%; width: 18px; padding: 0; justify-content: center; }
.lk-nw.big .sb-verified { width: auto; border-radius: 8px; padding: 0 9px; }
.sb-partner { color: #f3e8ff; background: linear-gradient(135deg, #a855f7, #581c87); }
.sb-champion { color: #1a1200; background: linear-gradient(135deg, #fde68a, #d4a017); }
.sb-beta { color: #ccfbf1; background: linear-gradient(135deg, #14b8a6, #115e59); }

/* ───────── staff frames ───────── */
.fr-founder .lk-ring, .fr-prism .lk-ring, .fr-plasma .lk-ring {
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--s) * .065), #000 0); mask: radial-gradient(closest-side, transparent calc(100% - var(--s) * .065), #000 0);
}
.fr-founder .lk-ring {
  background: conic-gradient(from 0deg, #fff6cf, #ffc93c, #ff7ad9, #8be9ff, #b5ff7a, #ffc93c, #fff6cf);
  filter: drop-shadow(0 0 calc(var(--s) * .1) rgba(255, 201, 60, .75)); animation: spinSlow 5s linear infinite;
}
/* a small gold crown sitting on the ring */
.fr-founder::after {
  content: ''; position: absolute; z-index: 2; left: 50%; top: calc(var(--s) * -.3); width: calc(var(--s) * .42); height: calc(var(--s) * .3); transform: translateX(-50%) rotate(-8deg);
  background: linear-gradient(180deg, #fff6cf, #ffc93c 45%, #b87a00);
  clip-path: polygon(0 100%, 4% 22%, 28% 58%, 50% 0, 72% 58%, 96% 22%, 100% 100%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); animation: crownBob 3s ease-in-out infinite;
}
@keyframes crownBob { 50% { transform: translateX(-50%) translateY(-2px) rotate(-4deg); } }
.fr-prism .lk-ring {
  background: conic-gradient(from 0deg, #ff004c, #ff9900, #ffee00, #00ff88, #00c3ff, #7a00ff, #ff00d4, #ff004c);
  filter: blur(.4px) saturate(1.4) drop-shadow(0 0 calc(var(--s) * .12) rgba(160, 100, 255, .7)); animation: spinSlow 2.5s linear infinite, prismHue 6s linear infinite;
}
@keyframes prismHue { to { filter: blur(.4px) saturate(1.4) hue-rotate(360deg) drop-shadow(0 0 calc(var(--s) * .12) rgba(160, 100, 255, .7)); } }
.fr-plasma .lk-ring {
  background: conic-gradient(from 0deg, transparent 0 8%, var(--la, #7af0ff) 14%, #fff 16%, transparent 22% 40%, var(--la, #7af0ff) 48%, #fff 50%, transparent 56% 74%, var(--la, #7af0ff) 82%, #fff 84%, transparent 90%), radial-gradient(closest-side, transparent 80%, color-mix(in srgb, var(--la, #7af0ff) 45%, transparent));
  filter: drop-shadow(0 0 4px var(--la, #7af0ff)) drop-shadow(0 0 calc(var(--s) * .14) var(--la, #7af0ff)); animation: spinSlow 1.6s linear infinite, plasma .18s steps(2) infinite;
}
@keyframes plasma { 50% { opacity: .78; } }

/* ───────── staff name styles ───────── */
.lk-name.ns-rainbow { background: linear-gradient(90deg, #ff004c, #ff9900, #ffee00, #00ff88, #00c3ff, #7a00ff, #ff00d4, #ff004c); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradSlide 3s linear infinite; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .15)); }
.lk-name.ns-gold { background: linear-gradient(172deg, #fff6cf 10%, #ffd36b 35%, #9a6a00 50%, #ffe08a 64%, #fff6cf 90%); background-size: 100% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 3.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 12px rgba(255, 201, 60, .4)); }
.lk-name.ns-holo { background: linear-gradient(115deg, #ffc9f1, #a9dcff 25%, #c3b2ff 45%, #ffffff 55%, #9ff3d6 75%, #ffc9f1); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradSlide 5s linear infinite, holoHue 8s linear infinite; }
@keyframes holoHue { to { filter: hue-rotate(360deg); } }

/* ───────── staff banner effects ───────── */
.fx-galaxy::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(30% 25% at 40% 45%, rgba(168, 85, 247, .45), transparent 70%), radial-gradient(25% 20% at 62% 55%, rgba(56, 189, 248, .4), transparent 70%), radial-gradient(20% 18% at 50% 50%, rgba(255, 255, 255, .35), transparent 70%), radial-gradient(35% 22% at 30% 65%, rgba(236, 72, 153, .3), transparent 70%); filter: blur(10px); animation: spinSlow 40s linear infinite; mix-blend-mode: screen; }
.fx-galaxy i { width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .9); animation: twinkle var(--d) ease-in-out var(--w) infinite; opacity: .2; transform: scale(var(--z)); }
.fx-galaxy i:nth-child(3n) { background: #c4b5fd; box-shadow: 0 0 8px 2px rgba(167, 139, 250, .9); }
.fx-galaxy i:nth-child(5n) { background: #7dd3fc; box-shadow: 0 0 8px 2px rgba(56, 189, 248, .9); }
.fx-galaxy i:nth-child(7n) { background: #f9a8d4; box-shadow: 0 0 8px 2px rgba(236, 72, 153, .9); width: 3px; height: 3px; }

.fx-lightning::before { content: ''; position: absolute; inset: 0; background: rgba(200, 220, 255, .5); opacity: 0; animation: flash 5s linear infinite; }
.fx-lightning i { top: 0; width: 34px; height: 100%; opacity: 0; background: linear-gradient(180deg, #fff, #bfdbfe 60%, transparent); filter: drop-shadow(0 0 6px #93c5fd) drop-shadow(0 0 14px #60a5fa);
  clip-path: polygon(46% 0, 60% 0, 52% 32%, 68% 32%, 38% 72%, 48% 44%, 32% 44%); animation: bolt calc(var(--d) + 2s) linear calc(var(--w) * -1) infinite; }
.fx-lightning i:nth-child(even) { transform: scaleX(-1) scale(var(--z)); }
@keyframes bolt { 0%, 88%, 100% { opacity: 0; } 89%, 91% { opacity: 1; } 90%, 92% { opacity: .2; } }
@keyframes flash { 0%, 86%, 100% { opacity: 0; } 88% { opacity: .35; } 89% { opacity: 0; } 90% { opacity: .25; } }

.fx-confetti i { top: -6%; width: 7px; height: 11px; border-radius: 2px; background: #ffd36b; animation: confetti calc(var(--d) + 1.5s) linear calc(var(--w) * -1) infinite; }
.fx-confetti i:nth-child(6n + 1) { background: #ff6b9d; }
.fx-confetti i:nth-child(6n + 2) { background: #7af0ff; width: 9px; height: 6px; }
.fx-confetti i:nth-child(6n + 3) { background: #b5ff7a; border-radius: 50%; width: 7px; height: 7px; }
.fx-confetti i:nth-child(6n + 4) { background: #a78bfa; }
.fx-confetti i:nth-child(6n + 5) { background: #fff; width: 5px; height: 9px; }
@keyframes confetti { to { transform: translate(calc((var(--z) - 1) * 120px), 420px) rotate(calc(var(--z) * 900deg)); } }

/* ───────── tag colours ───────── */
.lk-tag.tg-hex { color: color-mix(in srgb, var(--tc) 80%, #fff); background: color-mix(in srgb, var(--tc) 16%, transparent); border-color: color-mix(in srgb, var(--tc) 50%, transparent); box-shadow: 0 0 12px -4px var(--tc); }
.lk-tag[class*=" tg-"]:not(.tg-hex) { font-weight: 650; border-color: transparent; }
.lk-tag.tg-rainbow { color: #111; background: linear-gradient(90deg, #ff8fab, #ffd36b, #b5ff7a, #7af0ff, #c4b5fd, #ff8fab); background-size: 200% 100%; animation: gradSlide 4s linear infinite; }
.lk-tag.tg-gold { color: #2a1b00; background: linear-gradient(172deg, #fff6cf, #ffd36b 40%, #c08a12 55%, #ffe08a 75%); box-shadow: 0 0 14px -4px rgba(255, 201, 60, .8); }
.lk-tag.tg-holo { color: #1b1530; background: linear-gradient(115deg, #ffc9f1, #a9dcff, #c3b2ff, #ffffff, #9ff3d6, #ffc9f1); background-size: 300% 100%; animation: gradSlide 6s linear infinite; }
.lk-tag.tg-fire { color: #fff7ed; background: linear-gradient(135deg, #ff3d00, #ff9100 60%, #ffd600); box-shadow: 0 0 14px -3px rgba(255, 109, 0, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.lk-tag.tg-ice { color: #0c2a3d; background: linear-gradient(135deg, #e0fbff, #8fdcff 60%, #c7f0ff); box-shadow: 0 0 14px -4px rgba(111, 214, 255, .9); }
.lk-tag.tg-neon { color: #ff4fd8; background: rgba(255, 79, 216, .08); border: 1px solid #ff4fd8; box-shadow: 0 0 10px rgba(255, 79, 216, .6), inset 0 0 8px rgba(255, 79, 216, .35); text-shadow: 0 0 8px #ff4fd8; }
.lk-tag.tg-toxic { color: #0d1a00; background: linear-gradient(135deg, #d9ff3d, #5cff5c); box-shadow: 0 0 14px -2px rgba(140, 255, 60, .8); }
.lk-tag.tg-sunset { color: #fff; background: linear-gradient(120deg, #ff5f6d, #ffc371 50%, #8e54e9); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

/* ───────── studio: staff-only choices ───────── */
.st-chip.perk { position: relative; border-color: rgba(255, 201, 60, .45); background: linear-gradient(135deg, rgba(255, 201, 60, .12), rgba(255, 122, 217, .08)); }
.st-chip.perk::after { content: ''; position: absolute; top: -5px; right: -4px; width: 12px; height: 9px; background: linear-gradient(180deg, #fff6cf, #ffc93c); clip-path: polygon(0 100%, 4% 22%, 28% 58%, 50% 0, 72% 58%, 96% 22%, 100% 100%); }
.st-perks-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 8px 11px; border-radius: 10px; font-size: 12px; color: #fde68a; background: rgba(255, 201, 60, .08); border: 1px solid rgba(255, 201, 60, .22); }
.st-tags .chip { cursor: pointer; }
.st-tags .chip.sel { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.tagc { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line-2); }
.tagc-h { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.tagc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tagc-f .lk-tag { cursor: pointer; transition: transform .15s; }
.tagc-f:hover .lk-tag { transform: translateY(-2px); }
.tagc-f.on .lk-tag { outline: 2px solid #fff; outline-offset: 2px; }
.tagc-sw { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.tagc-sw.on { box-shadow: 0 0 0 2px #0a0a0b, 0 0 0 4px var(--c); }

@media (prefers-reduced-motion: reduce) {
  .sb-founder, .fr-founder::after, .lk-tag { animation: none !important; }
}