/* Cosmetics: the Cosmetics menu, server tags, nameplates, profile effects and the newer avatar decorations */

/* ===== Cosmetics menu ===== */
.modal.cos-modal { width: 1080px; max-width: 96vw; height: 680px; max-height: 92vh; padding: 0; overflow: hidden; }
.cos { display: grid; grid-template-columns: 210px 1fr 320px; height: 100%; min-height: 0; }
.cos-nav { background: var(--bg-side); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.cos-nav h2 { font-size: 18px; margin: 0 8px 12px; color: var(--text-strong); }
.cos-tab, .cos-tile, .tag-badges button { font: inherit; cursor: pointer; }
.cos-tab { background: none; border: 0; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; color: var(--text-muted); text-align: left; font-weight: 500; }
.cos-tab:hover { background: var(--bg-input); color: var(--text); }
.cos-tab.on { background: var(--bg-input); color: var(--text-strong); box-shadow: inset 3px 0 var(--brand); }
.cos-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cos-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.cos-body h3 { margin: 0 0 4px; color: var(--text-strong); }
.cos-prev { background: var(--bg-side); padding: 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.cos-prev .profile-card { margin-bottom: 8px; }
.cos-sample { background: var(--bg-main); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.cos-msg { display: flex; gap: 12px; align-items: flex-start; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.cos-grid.wide { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.cos-plates, .cos-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.cos-tile { background: var(--bg-side); border: 2px solid transparent; border-radius: 10px; padding: 14px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); cursor: pointer; min-width: 0; }
.cos-tile:hover { background: var(--bg-input); }
.cos-tile.sel { border-color: var(--brand); color: var(--text-strong); }
.cos-tile small { font-size: 12px; font-weight: 600; text-align: center; }
.cos-none { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); }
.cos-fx-sample { position: relative; display: block; width: 100%; height: 84px; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--acc, #5865f2) 45%, #111), #111); --fx-h: 110px; }
.cos-plate { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--text-strong); font-weight: 500; overflow: hidden; }
.cos-card-sample { display: block; width: 70px; height: 50px; border-radius: 8px; background: var(--bg-main); border-top: 16px solid var(--pc-accent); }
.cos-card-sample.pc-style-glass { background: color-mix(in srgb, var(--pc-accent) 18%, transparent); }
.cos-card-sample.pc-style-gradient { background: linear-gradient(180deg, var(--pc-accent), var(--bg-main)); }
.cos-card-sample.pc-style-minimal { border-top-width: 3px; }
.cos-card { display: flex; align-items: center; gap: 14px; background: var(--bg-side); border-radius: 10px; padding: 14px; margin: 8px 0 16px; }
.cos-card-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--brand); flex: none; }
.cos-card-t { font-weight: 600; color: var(--text-strong); }
@media (max-width: 860px) {
  .modal.cos-modal { height: 92vh; }
  .cos { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cos-nav { flex-direction: row; overflow-x: auto; padding: 10px; }
  .cos-nav h2 { display: none; }
  .cos-tab span { white-space: nowrap; }
  .cos-prev { display: none; }
}

/* ===== Server tags ===== */
.guild-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 5px; height: 17px; border-radius: 4px; background: var(--bg-input); color: var(--text-strong); font-size: 11px; line-height: 1; vertical-align: 1px; white-space: nowrap; font-family: var(--font); text-shadow: none; -webkit-text-fill-color: currentColor; }
.guild-tag b { font-weight: 700; letter-spacing: .3px; }
.guild-tag.big { height: 26px; font-size: 15px; padding: 0 9px; margin: 0; }

/* ===== Nameplates (member list, DMs) ===== */
.np { position: relative; isolation: isolate; }
.np::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: .55; pointer-events: none; }
.np-sunset::before { background: linear-gradient(90deg, #ff6b6b, #ffb347 55%, transparent); }
.np-ocean::before { background: linear-gradient(90deg, #0077b6, #00b4d8 55%, transparent); }
.np-forest::before { background: linear-gradient(90deg, #2d6a4f, #74c69d 55%, transparent); }
.np-aurora::before { background: linear-gradient(90deg, #00ffa3, #00c3ff, #a855f7, transparent); background-size: 200% 100%; animation: np-slide 6s linear infinite; }
.np-candy::before { background: repeating-linear-gradient(45deg, #ff8fab 0 10px, #ffc2d1 10px 20px); -webkit-mask: linear-gradient(90deg, #000 40%, transparent); mask: linear-gradient(90deg, #000 40%, transparent); }
.np-midnight::before { background: radial-gradient(circle at 15% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 45% 70%, #fff 0 1px, transparent 2px), radial-gradient(circle at 30% 20%, #fff 0 1px, transparent 2px), linear-gradient(90deg, #1b1f4b, #3a2c74 60%, transparent); }
.np-lava::before { background: linear-gradient(90deg, #d00000, #ff7b00, #ffba08, transparent); background-size: 200% 100%; animation: np-slide 4s ease-in-out infinite alternate; }
.np-gold::before { background: linear-gradient(100deg, #b8860b, #ffd700 30%, #fff6c4 40%, #ffd700 50%, transparent 85%); background-size: 200% 100%; animation: np-slide 5s linear infinite; }
.np-galaxy::before { background: radial-gradient(circle at 20% 50%, #ec4899aa, transparent 40%), radial-gradient(circle at 50% 30%, #6d28d9cc, transparent 45%), linear-gradient(90deg, #1a0b3d, transparent); }
.np-glitch::before { background: repeating-linear-gradient(0deg, #ff004c33 0 2px, transparent 2px 4px), linear-gradient(90deg, #00e5ff66, transparent); animation: deco-glitch 1.6s steps(1) infinite; }
@keyframes np-slide { from { background-position: 0 0; } to { background-position: -200% 0; } }
body.reduce-motion .np::before { animation: none; }

/* ===== Profile effects (over the profile card) ===== */
.pc-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; border-radius: inherit; }
.pc-fx i { position: absolute; left: var(--x); top: -10%; display: block; animation: fx-fall var(--t) linear var(--d) infinite; font-style: normal; }
.pc-fx i::before { content: ''; display: block; }
@keyframes fx-fall { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(var(--fx-h, 640px)) rotate(360deg); } }
@keyframes fx-rise { from { transform: translateY(var(--fx-h, 640px)) scale(var(--z)); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-30px) scale(var(--z)); opacity: 0; } }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(var(--z)) rotate(90deg); } }
@keyframes fx-shoot { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 30%, 100% { transform: translate(-240px, 240px); opacity: 0; } }
.fx-snowfall i::before { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; transform: scale(var(--z)); }
.fx-rain i { animation-duration: calc(var(--t) / 3); }
.fx-rain i::before { width: 1.5px; height: 16px; background: linear-gradient(transparent, #8ecaff); }
.fx-confetti i::before { width: 7px; height: 11px; border-radius: 2px; background: #ff5c5c; transform: scale(var(--z)); }
.fx-confetti i:nth-child(4n+1)::before { background: #ffd93d; }
.fx-confetti i:nth-child(4n+2)::before { background: #3ddc84; }
.fx-confetti i:nth-child(4n+3)::before { background: #4cc9f0; }
.fx-petals i::before { width: 10px; height: 7px; border-radius: 70% 0 70% 0; background: #ffb7c5; transform: scale(var(--z)); }
.fx-matrix i { animation-duration: calc(var(--t) / 1.5); }
.fx-matrix i::before { content: '1'; color: #3ddc84; font: 700 13px monospace; text-shadow: 0 0 6px #3ddc84; }
.fx-matrix i:nth-child(odd)::before { content: '0'; }
.fx-hearts i, .fx-embers i, .fx-bubbles i { top: 0; animation-name: fx-rise; }
.fx-hearts i::before { content: '❤'; color: #ff4d8d; font-size: 16px; text-shadow: 0 0 6px #ff4d8d; }
.fx-embers i::before { width: 5px; height: 5px; border-radius: 50%; background: #ffb300; box-shadow: 0 0 8px 2px #ff6d00; }
.fx-bubbles i::before { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), transparent 50%); }
.fx-sparkles i { top: var(--y); animation-name: fx-twinkle; animation-duration: calc(var(--t) / 1.6); }
.fx-sparkles i::before { content: '✦'; color: #ffe066; font-size: 15px; text-shadow: 0 0 8px #ffe066; }
.fx-stars i { top: calc(var(--y) / 2); left: calc(var(--x) + 30%); animation-name: fx-shoot; animation-duration: calc(var(--t) * 1.4); }
.fx-stars i::before { width: 60px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-45deg); transform-origin: left; box-shadow: 0 0 6px #fff; }
body.reduce-motion .pc-fx { display: none; }

/* ===== More avatar decorations ===== */
.deco-snow { box-shadow: inset 0 0 0 2px rgba(223, 243, 255, .5); }
.deco-snow::before, .deco-snow::after { content: '❄'; color: #dff3ff; font-size: 20cqw; text-shadow: 0 0 4px #8ecaff; left: 0; top: 0; animation: deco-float 3s ease-in-out infinite; }
.deco-snow::after { content: '❅'; left: auto; top: auto; right: 0; bottom: 4%; font-size: 16cqw; animation-delay: 1.4s; }
.deco-orbit { border: 1.5px dashed rgba(200, 245, 96, .5); animation: deco-spin 6s linear infinite; }
.deco-orbit::before { width: 14%; height: 14%; border-radius: 50%; background: #c8f560; box-shadow: 0 0 6px #c8f560; top: -3%; left: 43%; }
.deco-orbit::after { width: 9%; height: 9%; border-radius: 50%; background: #4cc9f0; box-shadow: 0 0 6px #4cc9f0; bottom: 0; left: 45%; }
.deco-rainbow { background: conic-gradient(#ff5c5c, #ff9f43, #ffd93d, #3ddc84, #4cc9f0, #9b5de5, #ff5c5c); -webkit-mask: radial-gradient(farthest-side, transparent 80%, #000 83%); mask: radial-gradient(farthest-side, transparent 80%, #000 83%); animation: deco-spin 5s linear infinite; }
.deco-catears::before, .deco-catears::after { width: 30%; height: 30%; top: -2%; left: 6%; background: #2b2b30; border: 2px solid #f6a5c0; border-radius: 10% 80% 0 80%; transform: rotate(-20deg); }
.deco-catears::after { left: auto; right: 6%; transform: rotate(110deg) scaleY(-1); }
.deco-bubbles::before, .deco-bubbles::after { width: 22%; height: 22%; border-radius: 50%; border: 2px solid rgba(160, 220, 255, .85); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), transparent 45%); right: -2%; bottom: 8%; animation: deco-float 2.6s ease-in-out infinite; }
.deco-bubbles::after { width: 14%; height: 14%; right: auto; left: 0; bottom: auto; top: 6%; animation-delay: 1.1s; }
.deco-ghost { box-shadow: 0 0 10px 2px rgba(220, 220, 255, .35); }
.deco-ghost::before { content: '👻'; font-size: 30cqw; right: -10%; top: -12%; animation: deco-float 2.8s ease-in-out infinite; opacity: .92; }

/* ===== Themed avatar decorations (Elements, Fantasy, Cute, Neon & Retro, Space & Seasons) ===== */
.cos-group { margin: 18px 0 -4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
/* Elements */
.deco-water::after { inset: 0; border-radius: 50%; background: conic-gradient(#0077b6, #48cae4, #caf0f8, #00b4d8, #0077b6); -webkit-mask: radial-gradient(farthest-side, transparent 79%, #000 82%); mask: radial-gradient(farthest-side, transparent 79%, #000 82%); animation: deco-spin 3.5s linear infinite; }
.deco-water { filter: drop-shadow(0 0 3px #48cae4); }
.deco-water::before { content: '💧'; font-size: 22cqw; right: -2%; bottom: -2%; z-index: 1; animation: deco-float 2.4s ease-in-out infinite; }
.deco-air { border: 2px dashed rgba(220, 240, 255, .75); animation: deco-spin 2.6s linear infinite; }
.deco-air::before, .deco-air::after { inset: 8%; border-radius: 50%; border: 2px dotted rgba(200, 230, 255, .6); animation: deco-spin 1.8s linear infinite reverse; }
.deco-air::after { inset: -8%; border: 1px solid rgba(255, 255, 255, .25); animation-duration: 4s; }
.deco-earth { box-shadow: 0 0 0 3px #588157, 0 0 0 5px #8a6d3b, 0 0 8px 4px rgba(88, 129, 87, .5); }
.deco-earth::before { content: '🌿'; font-size: 26cqw; left: -8%; top: -8%; transform: rotate(-30deg); }
.deco-earth::after { content: '🍄'; font-size: 20cqw; right: -4%; bottom: -4%; }
.deco-frost { box-shadow: 0 0 0 3px #caf0f8, 0 0 12px 2px #90e0ef, inset 0 0 8px #caf0f8; animation: deco-pulse 3s ease-in-out infinite; }
.deco-frost::before { content: '✦'; color: #fff; font-size: 22cqw; left: 6%; top: -4%; text-shadow: 0 0 6px #90e0ef; animation: deco-twinkle 1.8s infinite; }
.deco-frost::after { content: '❄'; color: #caf0f8; font-size: 18cqw; right: 2%; bottom: 0; animation: deco-twinkle 2.4s infinite .9s; }
/* Fantasy */
.deco-thorns { background: repeating-conic-gradient(#1a0008 0 6deg, #7f1d1d 6deg 9deg, #1a0008 9deg 15deg); -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 80%, #000 88%, transparent 100%); mask: radial-gradient(farthest-side, transparent 76%, #000 80%, #000 88%, transparent 100%); filter: drop-shadow(0 0 4px #b91c1c); animation: deco-spin 30s linear infinite; }
.deco-devil::before, .deco-devil::after { width: 20%; height: 28%; top: -6%; left: 14%; background: linear-gradient(#ef4444, #7f1d1d); clip-path: polygon(30% 0, 100% 100%, 0 100%); transform: rotate(-24deg); filter: drop-shadow(0 0 3px #ef4444); }
.deco-devil::after { left: auto; right: 14%; transform: rotate(24deg) scaleX(-1); }
.deco-devil { box-shadow: 0 0 10px 1px rgba(239, 68, 68, .45); }
.deco-angel { box-shadow: 0 0 14px 3px rgba(255, 255, 255, .45); }
.deco-angel::before { left: 20%; right: 20%; top: -10%; height: 14%; border-radius: 50%; box-shadow: 0 0 0 3px #fff3b0, 0 0 10px 3px rgba(255, 243, 176, .9); animation: deco-float 2.6s ease-in-out infinite; }
.deco-angel::after { content: '✧'; color: #fff; font-size: 18cqw; right: -2%; top: 30%; text-shadow: 0 0 6px #fff; animation: deco-twinkle 2s infinite; }
.deco-fairy { box-shadow: 0 0 0 2px rgba(244, 172, 255, .6), 0 0 12px rgba(190, 255, 240, .6); }
.deco-fairy::before, .deco-fairy::after { content: '✨'; font-size: 20cqw; left: -6%; top: 0; animation: deco-twinkle 1.6s infinite; }
.deco-fairy::after { content: '🧚'; left: auto; top: auto; right: -10%; bottom: 0; font-size: 24cqw; animation: deco-float 2.6s ease-in-out infinite; }
/* Cute */
.deco-bunny::before, .deco-bunny::after { width: 18%; height: 40%; top: -26%; left: 22%; background: #fafafa; border-radius: 50% 50% 45% 45%; box-shadow: inset 0 0 0 4px #fafafa, inset 0 0 0 30px #f9a8d4; transform: rotate(-12deg); }
.deco-bunny::after { left: auto; right: 22%; transform: rotate(12deg); }
/* Neon & Retro */
.deco-cyber { inset: -10%; border-radius: 22%; border: 2px solid #f0f; box-shadow: 0 0 6px #f0f, inset 0 0 6px #0ff, 3px 3px 0 -1px #0ff; animation: deco-zap 2.2s steps(1) infinite; }
.deco-cyber::before { inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(0, 255, 255, .18) 0 2px, transparent 2px 5px); -webkit-mask: radial-gradient(farthest-side, transparent 85%, #000 86%); mask: radial-gradient(farthest-side, transparent 85%, #000 86%); }
.deco-lofi::before { content: '🎧'; font-size: 40cqw; left: 50%; top: -24%; transform: translateX(-50%); }
.deco-lofi::after { content: '♪'; color: #c4b5fd; font-size: 22cqw; right: -6%; top: 30%; text-shadow: 0 0 4px #a78bfa; animation: deco-float 2s ease-in-out infinite; }
.deco-arcade { inset: -10%; border-radius: 18%; border: 3px solid #22c55e; box-shadow: 0 0 6px #22c55e; }
.deco-arcade::before { content: '👾'; font-size: 26cqw; right: -10%; top: -12%; animation: deco-bob 1.4s steps(2) infinite; }
.deco-arcade::after { content: '🕹️'; font-size: 20cqw; left: -6%; bottom: -6%; }
.deco-vinyl { background: repeating-radial-gradient(circle, #111 0 2px, #2a2a2a 2px 3px); -webkit-mask: radial-gradient(farthest-side, transparent 78%, #000 80%); mask: radial-gradient(farthest-side, transparent 78%, #000 80%); animation: deco-spin 3s linear infinite; }
.deco-vinyl::before { width: 16%; height: 16%; border-radius: 50%; background: #ef4444; top: 2%; left: 42%; }
/* Space & Seasons */
.deco-lantern::before, .deco-lantern::after { content: '🏮'; font-size: 24cqw; left: -6%; top: -14%; animation: deco-float 2.8s ease-in-out infinite; }
.deco-lantern::after { left: auto; right: -6%; top: -4%; font-size: 20cqw; animation-delay: 1.2s; }
.deco-lantern { box-shadow: 0 0 0 2px #fbbf24, 0 0 10px rgba(239, 68, 68, .6); }
.deco-pirate::after { inset: 0; border-radius: 50%; background: repeating-conic-gradient(#8b5a2b 0 8deg, #c8a165 8deg 14deg); -webkit-mask: radial-gradient(farthest-side, transparent 79%, #000 82%); mask: radial-gradient(farthest-side, transparent 79%, #000 82%); }
.deco-pirate::before { content: '🏴‍☠️'; font-size: 26cqw; right: -10%; top: -14%; transform: rotate(10deg); z-index: 1; }
.deco-toxic { box-shadow: 0 0 0 3px #84cc16, 0 0 14px 3px rgba(132, 204, 22, .7); animation: deco-pulse 1.6s ease-in-out infinite; }
.deco-toxic::before { content: '🧪'; font-size: 24cqw; right: -8%; bottom: -6%; }

/* ===== More profile effects ===== */
.fx-fireflies i { top: var(--y); animation-name: fx-drift; animation-duration: calc(var(--t) * 1.4); animation-timing-function: ease-in-out; }
.fx-fireflies i::before { width: 5px; height: 5px; border-radius: 50%; background: #fef08a; box-shadow: 0 0 10px 3px #facc15; animation: deco-twinkle 1.8s infinite; }
@keyframes fx-drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(18px, -14px); } 66% { transform: translate(-12px, 10px); } }
.fx-lanterns i, .fx-notes i { top: 0; animation-name: fx-rise; animation-duration: calc(var(--t) * 1.6); }
.fx-lanterns i::before { content: '🏮'; font-size: 18px; filter: drop-shadow(0 0 6px #ef4444); }
.fx-notes i::before { content: '♪'; color: #c4b5fd; font-size: 18px; text-shadow: 0 0 6px #a78bfa; }
.fx-notes i:nth-child(odd)::before { content: '♫'; color: #f9a8d4; }
.fx-leaves i { animation-duration: calc(var(--t) * 1.5); }
.fx-leaves i::before { content: '🍂'; font-size: 16px; }
.fx-leaves i:nth-child(3n)::before { content: '🍁'; }
.fx-pixels i { animation-timing-function: steps(14); }
.fx-pixels i::before { width: 8px; height: 8px; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.fx-pixels i:nth-child(3n)::before { background: #f472b6; box-shadow: 0 0 6px #f472b6; }
.fx-pixels i:nth-child(3n+1)::before { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.fx-lightning::after { content: ''; position: absolute; inset: 0; background: rgba(200, 220, 255, .55); opacity: 0; animation: fx-flash 5s infinite; }
@keyframes fx-flash { 0%, 88%, 92%, 100% { opacity: 0; } 89%, 91% { opacity: 1; } 90% { opacity: .2; } }
.fx-lightning i { top: var(--y); animation-name: fx-twinkle; animation-duration: calc(var(--t) * 1.2); }
.fx-lightning i:nth-child(n+7) { display: none; }
.fx-lightning i::before { content: '⚡'; font-size: 18px; filter: drop-shadow(0 0 6px #facc15); }
.fx-aurora i { display: none; }
.fx-aurora::before { content: ''; position: absolute; inset: -20% -40% 50%; background: linear-gradient(100deg, transparent 10%, rgba(0, 255, 163, .45) 30%, rgba(0, 195, 255, .4) 50%, rgba(168, 85, 247, .45) 70%, transparent 90%); filter: blur(14px); animation: fx-wave 7s ease-in-out infinite alternate; }
@keyframes fx-wave { from { transform: translateX(-12%) skewY(-4deg); } to { transform: translateX(12%) skewY(4deg); } }
.fx-cybergrid i { display: none; }
.fx-cybergrid::before { content: ''; position: absolute; left: -50%; right: -50%; bottom: 0; height: 45%; background: repeating-linear-gradient(90deg, rgba(255, 0, 255, .5) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(0, 255, 255, .5) 0 1px, transparent 1px 22px); transform: perspective(180px) rotateX(55deg); transform-origin: bottom; animation: fx-grid 1.6s linear infinite; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); }
@keyframes fx-grid { to { background-position: 0 22px, 0 22px; } }

/* ===== Profile themes (card styles) ===== */
.pc-style-animated, .pc-style-aurora, .pc-style-sunset, .pc-style-ocean, .pc-style-cyber, .pc-style-lofi, .pc-style-candy, .pc-style-ember { border-radius: inherit; background-size: 300% 300%; animation: pc-shift 12s ease-in-out infinite; }
.pc-style-animated { background-image: linear-gradient(135deg, color-mix(in srgb, var(--pc-accent) 60%, transparent), transparent 45%, color-mix(in srgb, var(--pc-accent) 35%, #000) 75%, color-mix(in srgb, var(--pc-accent) 55%, transparent)); }
.pc-style-aurora { background-image: linear-gradient(135deg, #00ffa355, #00c3ff44, #a855f755, #00ffa333); }
.pc-style-sunset { background-image: linear-gradient(135deg, #ff6b6b66, #ffb34755, #c2185b55, #ff6b6b44); }
.pc-style-ocean { background-image: linear-gradient(135deg, #0077b666, #00b4d855, #03045e77, #48cae444); }
.pc-style-cyber { background-image: linear-gradient(135deg, #ff00ff44, #0b0b2a, #00ffff40, #0b0b2a); }
.pc-style-lofi { background-image: linear-gradient(135deg, #a78bfa55, #f9a8d444, #312e81aa, #a78bfa33); }
.pc-style-candy { background-image: linear-gradient(135deg, #ff8fab66, #ffc2d155, #a0e7e555, #ff8fab44); }
.pc-style-ember { background-image: linear-gradient(135deg, #7f1d1d99, #ff6d0055, #1a0008, #ffb30044); }
@keyframes pc-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.cos-card-sample.pc-style-animated, .cos-card-sample.pc-style-aurora, .cos-card-sample.pc-style-sunset, .cos-card-sample.pc-style-ocean, .cos-card-sample.pc-style-cyber, .cos-card-sample.pc-style-lofi, .cos-card-sample.pc-style-candy, .cos-card-sample.pc-style-ember { background-color: var(--bg-main); }
body.reduce-motion [class*="pc-style-"] { animation: none; }

/* ===== Image decorations and effects (staff uploads, Discord collectibles) ===== */
/* an image decoration is 1.2x the avatar, centred on it, like Discord's */
img.deco-img { inset: -10%; width: 120%; height: 120%; border-radius: 0; object-fit: contain; }
.pc-fx-img img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
body.reduce-motion .pc-fx-img { display: block; }

/* ===== Server settings: tag badge picker ===== */
.tag-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag-badges button { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-side); border: 2px solid transparent; font-size: 18px; }
.tag-badges button.sel { border-color: var(--brand); }