@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@400&family=Space+Grotesk:wght@700&family=DM+Mono:wght@500&family=Playfair+Display:wght@700&family=Bebas+Neue&family=Pacifico&family=Orbitron:wght@700&family=Noto+Sans:wght@600&family=Rubik:wght@600&family=Dancing+Script:wght@700&family=Chewy&family=Poppins:wght@600&family=MedievalSharp&family=Press+Start+2P&family=Pirata+One&family=Luckiest+Guy&family=VT323&family=Metal+Mania&family=Caveat:wght@700&display=swap');

/* ── avatar decorations ──
   Hosts (.msg-av-wrap, .rs-av-wrap, .pc-av-wrap, .av-wrap …) are position:relative.
   The overlay sits OUTSIDE the avatar circle (avatars use overflow:hidden). */
.kdeco{position:absolute;inset:-9%;border-radius:50%;pointer-events:none;z-index:0;--kd-t:13%;
  --kd-mask:radial-gradient(farthest-side,transparent calc(100% - var(--kd-t)),#000 calc(100% - var(--kd-t) + 1px))}
.kdeco::before,.kdeco::after{content:"";position:absolute;inset:0;border-radius:50%}
/* animations go through variables so no page-level "animation:none" reset can freeze them */
.kdeco.kdeco{animation:var(--kd-a,none)!important}
.kdeco.kdeco::before{animation:var(--kd-b,none)!important}
.kdeco.kdeco::after{animation:var(--kd-c,none)!important}
.kdeco-img{inset:auto;left:-10%;top:-10%;width:120%;height:120%;border-radius:0;object-fit:contain}
.kdeco-img::before,.kdeco-img::after{display:none}

.kd-neon-ring{filter:drop-shadow(0 0 4px #a78bfa);--kd-b:kd-spin 3s linear infinite}
.kd-neon-ring::before{background:conic-gradient(#a78bfa,#22d3ee,#f472b6,#a78bfa);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}

.kd-rainbow{--kd-b:kd-spin 4s linear infinite}
.kd-rainbow::before{background:conic-gradient(#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}

.kd-gold-halo{--kd-a:kd-glow 2.4s ease-in-out infinite}
.kd-gold-halo::before{background:conic-gradient(#fde68a,#f59e0b,#fff7d6,#d97706,#fde68a);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}

.kd-pulse::before,.kd-pulse::after{border:2px solid var(--accent,#a78bfa);opacity:0}
.kd-pulse{--kd-b:kd-ping 2s ease-out infinite;--kd-c:kd-ping 2s ease-out 1s infinite}

.kd-frost{filter:drop-shadow(0 0 3px #bae6fd)}
.kd-frost::before{background:conic-gradient(#e0f2fe,#7dd3fc,#fff,#38bdf8,#e0f2fe);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}
.kd-frost::after{background:radial-gradient(circle at 15% 25%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 86% 30%,#fff 0 1.2px,transparent 2.5px),radial-gradient(circle at 70% 90%,#cfefff 0 1.5px,transparent 2.5px),radial-gradient(circle at 22% 82%,#fff 0 1px,transparent 2.5px)}
.kd-frost{--kd-c:kd-twinkle 1.8s ease-in-out infinite}

.kd-ember{filter:drop-shadow(0 0 5px #f97316);--kd-a:kd-flicker 1.2s ease-in-out infinite;--kd-b:kd-spin 6s linear infinite}
.kd-ember::before{background:conic-gradient(#facc15,#f97316,#dc2626,#7f1d1d,#f97316,#facc15);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}

.kd-sakura{--kd-c:kd-spin 12s linear infinite}
.kd-sakura::before{background:conic-gradient(#fbcfe8,#f9a8d4,#fff1f2,#f9a8d4,#fbcfe8);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}
.kd-sakura::after{background:radial-gradient(circle at 50% 2%,#fda4cf 0 2.5px,transparent 3.5px),radial-gradient(circle at 96% 38%,#fbcfe8 0 2px,transparent 3px),radial-gradient(circle at 78% 94%,#f9a8d4 0 2.5px,transparent 3.5px),radial-gradient(circle at 18% 84%,#fbcfe8 0 2px,transparent 3px),radial-gradient(circle at 4% 36%,#fda4cf 0 2px,transparent 3px)}

.kd-glitch{--kd-b:kd-glitch 1.6s steps(2,end) infinite;--kd-c:kd-glitch 1.6s steps(2,end) .4s infinite reverse}
.kd-glitch::before{background:#22d3ee;-webkit-mask:var(--kd-mask);mask:var(--kd-mask);mix-blend-mode:screen}
.kd-glitch::after{background:#f43f5e;-webkit-mask:var(--kd-mask);mask:var(--kd-mask);mix-blend-mode:screen}

.kd-starfield{--kd-b:kd-spin 20s linear infinite;--kd-c:kd-twinkle 2.2s ease-in-out infinite}
.kd-starfield::before{background:conic-gradient(#1e1b4b,#4338ca,#0f172a,#6366f1,#1e1b4b);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}
.kd-starfield::after{background:radial-gradient(circle at 10% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 92% 22%,#fde68a 0 1.3px,transparent 2px),radial-gradient(circle at 60% 98%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 30% 94%,#c7d2fe 0 1px,transparent 2px),radial-gradient(circle at 98% 70%,#fff 0 1px,transparent 2px)}

.kd-void{filter:drop-shadow(0 0 5px #7c3aed);--kd-b:kd-spin 6s linear infinite;--kd-c:kd-spin 5s linear infinite reverse}
.kd-void::before{background:conic-gradient(#000,#7c3aed,#000,#4c1d95,#000);-webkit-mask:var(--kd-mask);mask:var(--kd-mask)}
.kd-void::after{inset:14%;background:conic-gradient(transparent,#c4b5fd,transparent 60%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8%),#000 calc(100% - 8% + 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 8%),#000 calc(100% - 8% + 1px));opacity:.7}

@keyframes kd-spin{to{transform:rotate(360deg)}}
@keyframes kd-glow{0%,100%{filter:drop-shadow(0 0 2px #f59e0b)}50%{filter:drop-shadow(0 0 8px #fbbf24)}}
@keyframes kd-ping{0%{transform:scale(.8);opacity:.85}100%{transform:scale(1.35);opacity:0}}
@keyframes kd-flicker{0%,100%{filter:drop-shadow(0 0 5px #f97316) brightness(1)}40%{filter:drop-shadow(0 0 8px #ef4444) brightness(1.25)}70%{filter:drop-shadow(0 0 3px #f97316) brightness(.9)}}
@keyframes kd-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes kd-glitch{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}100%{transform:translate(0,0)}}

/* ── profile effects ──
   Tall Discord-style art stretched over the WHOLE profile card it decorates. Hosts are
   position:relative; card content sits above it (z-index) and it never swallows clicks. */
.kpe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none;z-index:1;border-radius:inherit}

/* ── nametag fonts ── */
.kf-kyro-brand{font-family:'Dongle','DM Sans',sans-serif!important;font-weight:400!important;zoom:1.5;}
.kf-space-grotesk{font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;}
.kf-dm-mono{font-family:'DM Mono',monospace!important;font-weight:500!important;}
.kf-playfair{font-family:'Playfair Display',serif!important;font-weight:700!important;}
.kf-bebas{font-family:'Bebas Neue',Impact,sans-serif!important;font-weight:400!important;letter-spacing:.04em!important;zoom:1.15;}
.kf-pacifico{font-family:'Pacifico',cursive!important;font-weight:400!important;zoom:0.92;}
.kf-orbitron{font-family:'Orbitron',sans-serif!important;font-weight:700!important;zoom:0.85;}
.kf-discord-gg-sans{font-family:'Noto Sans',sans-serif!important;font-weight:600!important;}
.kf-discord-tempo{font-family:'Rubik',sans-serif!important;font-weight:600!important;}
.kf-discord-sakura{font-family:'Dancing Script',cursive!important;font-weight:700!important;zoom:1.1;}
.kf-discord-jellybean{font-family:'Chewy',cursive!important;font-weight:400!important;}
.kf-discord-modern{font-family:'Poppins',sans-serif!important;font-weight:600!important;}
.kf-discord-medieval{font-family:'MedievalSharp',serif!important;font-weight:400!important;}
.kf-discord-8bit{font-family:'Press Start 2P',monospace!important;font-weight:400!important;zoom:0.72;}
.kf-discord-vampyre{font-family:'Pirata One',serif!important;font-weight:400!important;zoom:1.1;}
.kf-discord-monkey-bars{font-family:'Luckiest Guy',cursive!important;font-weight:400!important;zoom:0.9;}
.kf-discord-mainframe{font-family:'VT323',monospace!important;font-weight:400!important;zoom:1.25;}
.kf-discord-headbang{font-family:'Metal Mania',cursive!important;font-weight:400!important;zoom:0.95;}
.kf-discord-journal{font-family:'Caveat',cursive!important;font-weight:700!important;zoom:1.15;}