/* Fluxcord Ultra-HD modern UI — 2026: layers, oklch, container queries, :has, fluid type, glass */
@layer reset, tokens, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
  img, video, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
}

@layer tokens {
  :root {
    --font-ui: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --accent: #5865F2; --accent2: #EB459E; --accent3: #57F287;
    --danger: #ED4245; --warn: #FEE75C;
    --radius: 14px; --radius-s: 9px;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 8px 28px rgb(0 0 0 / .35);
    --shadow-2: 0 12px 60px rgb(0 0 0 / .55);
    --glass-bd: 1px solid rgb(255 255 255 / .09);
    --font-scale: 100%;
    color-scheme: dark;
  }
  body[data-theme="dark"] {
    --bg0: #08090f; --bg1: #101320; --bg2: #171b2e; --bg3: #0c0e18;
    --panel: rgb(20 24 42 / .72); --panel-solid: #14182b;
    --text: #eef1ff; --muted: #9aa3c0; --faint: #6b7392;
    --line: rgb(255 255 255 / .08); --hover: rgb(255 255 255 / .07); --active: rgb(124 138 255 / .18);
    --input: rgb(8 10 18 / .7);
  }
  body[data-theme="midnight"] {
    --bg0: #000; --bg1: #050507; --bg2: #0b0b10; --bg3: #000;
    --panel: rgb(12 12 16 / .8); --panel-solid: #0c0c11;
    --text: #f2f4ff; --muted: #8a8fa8; --faint: #555a76;
    --line: rgb(255 255 255 / .07); --hover: rgb(255 255 255 / .06); --active: rgb(124 138 255 / .2);
    --input: #060608; --accent: #7c8aff;
    color-scheme: dark;
  }
  body[data-theme="light"] {
    --bg0: #eef1fb; --bg1: #ffffff; --bg2: #f2f4fc; --bg3: #e4e8f7;
    --panel: rgb(255 255 255 / .78); --panel-solid: #fff;
    --text: #151a30; --muted: #5b6280; --faint: #8b91ad;
    --line: rgb(20 26 60 / .1); --hover: rgb(88 101 242 / .08); --active: rgb(88 101 242 / .14);
    --input: #fff;
    color-scheme: light;
  }
}

@layer base {
  html, body { height: 100%; }
  body {
    background: var(--bg0); color: var(--text);
    font-family: var(--font-ui);
    font-size: calc(clamp(14px, .6vw + 12px, 16px) * var(--font-scale) / 100);
    line-height: 1.5; overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: color-mix(in oklch, var(--accent) 70%, transparent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgb(130 140 180 / .28); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgb(130 140 180 / .5); background-clip: content-box; border: 2px solid transparent; }
  .hidden { display: none !important; }
  button {
    background: rgb(255 255 255 / .07); color: var(--text);
    border: var(--glass-bd); border-radius: var(--radius-s);
    padding: 8px 13px; cursor: pointer; font-weight: 600; font-size: .86em;
    transition: transform .12s ease, background .15s, filter .15s, box-shadow .15s;
  }
  button:hover { background: var(--hover); transform: translateY(-1px); }
  button:active { transform: translateY(0) scale(.98); }
  button.primary { background: linear-gradient(135deg, var(--accent), #7c3aed 55%, var(--accent2)); border: 0; color: #fff; box-shadow: 0 4px 22px rgb(88 101 242 / .45); }
  button.primary:hover { filter: brightness(1.12); }
  button.danger { background: linear-gradient(135deg, #f04747, #c81e5b); border: 0; color: #fff; }
  .btn-glow { position: relative; }
  input, textarea, select {
    background: var(--input); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-s);
    padding: 9px 12px; backdrop-filter: blur(8px);
  }
  input::placeholder, textarea::placeholder { color: var(--faint); }
  input:focus, textarea:focus, select:focus { border-color: color-mix(in oklch, var(--accent) 70%, white); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 30%, transparent); outline: none; }
  kbd { background: rgb(127 140 180 / .16); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: .8em; }
  code, pre { font-family: var(--font-mono); }
  .icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; font-size: 16px; }
  .chip { border-radius: 99px; font-size: .72em; letter-spacing: .06em; font-weight: 800; padding: 6px 10px; }
  .glass { background: var(--panel); backdrop-filter: blur(18px) saturate(1.3); border: var(--glass-bd); box-shadow: var(--shadow-1); }
  .glass-side { background: color-mix(in oklch, var(--panel-solid) 82%, transparent); backdrop-filter: blur(20px); border-inline-end: 1px solid var(--line); }
  .glass-head { background: color-mix(in oklch, var(--panel-solid) 70%, transparent); backdrop-filter: blur(20px); border-block-end: 1px solid var(--line); }
}

@layer layout {
  #bg-orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .orb { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(90px); opacity: .5; }
  .o1 { background: radial-gradient(circle, #5865F266, transparent 65%); top: -18vmax; left: -12vmax; animation: drift 22s ease-in-out infinite alternate; }
  .o2 { background: radial-gradient(circle, #EB459E55, transparent 65%); bottom: -20vmax; right: -10vmax; animation: drift 26s ease-in-out infinite alternate-reverse; }
  .o3 { background: radial-gradient(circle, #00e5ff33, transparent 65%); top: 30%; left: 45%; animation: drift 30s ease-in-out infinite alternate; }
  .grain { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

  #splash { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; gap: 14px; background: #08090f; transition: opacity .5s; text-align: center; color: #aab; }
  #splash.done { opacity: 0; pointer-events: none; }
  .splash-logo { font-size: 64px; animation: pop 1.2s ease infinite alternate; filter: drop-shadow(0 0 24px #5865F2aa); }
  .splash-bar { width: 220px; height: 4px; border-radius: 99px; background: #ffffff18; overflow: hidden; margin-inline: auto; }
  .splash-bar span { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); animation: load 1.1s ease-in-out infinite alternate; }

  #app { position: relative; z-index: 1; display: grid; grid-template-columns: 76px 300px 1fr auto; height: 100dvh; }
  #toasts { position: fixed; bottom: 88px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, 90vw); }
  .toast { background: var(--panel); backdrop-filter: blur(16px); border: var(--glass-bd); border-radius: 12px; padding: 10px 13px; box-shadow: var(--shadow-2); font-size: .86em; animation: toastIn .25s ease; border-inline-start: 3px solid var(--accent); }
}

@layer components {
  /* auth */
  .auth-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow: auto; }
  .auth-glow { position: absolute; inset: 0; background: radial-gradient(700px 380px at 25% 18%, rgb(88 101 242 / .35), transparent), radial-gradient(700px 420px at 82% 85%, rgb(235 69 158 / .28), transparent); }
  .auth-card { position: relative; width: min(480px, 94vw); padding: clamp(20px, 4vw, 32px); border-radius: 22px; }
  .brand-row { display: flex; align-items: center; gap: 12px; }
  .brand-mark { width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px; border-radius: 16px; background: linear-gradient(135deg, #7c8aff, #5865F2 45%, #EB459E); box-shadow: 0 8px 30px rgb(88 101 242 / .5); }
  .logo { font-size: clamp(26px, 5vw, 34px); font-weight: 800; letter-spacing: -.03em; background: linear-gradient(90deg, #fff, #b9c1ff 60%, #ffb1dd); -webkit-background-clip: text; background-clip: text; color: transparent; }
  body[data-theme="light"] .logo { background: linear-gradient(90deg, #1a2050, #5865F2, #a83a7c); -webkit-background-clip: text; background-clip: text; }
  .logo-sub { font-size: .68em; letter-spacing: .18em; color: var(--muted); font-weight: 700; }
  .ver-pill { margin-inline-start: auto; font-size: .7em; font-weight: 700; color: var(--muted); border: 1px solid var(--line); padding: 4px 9px; border-radius: 99px; }
  .tagline { color: var(--muted); margin: 12px 0; } .tagline span { color: var(--text); font-weight: 600; }
  .feat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .feat-pills span { font-size: .72em; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgb(124 138 255 / .12); border: 1px solid var(--line); }
  .auth-tabs { display: flex; gap: 8px; margin: 12px 0; background: rgb(0 0 0 / .25); padding: 4px; border-radius: 12px; border: var(--glass-bd); }
  .auth-tabs button { flex: 1; border: 0; } .auth-tabs .active { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; }
  .fld { display: grid; gap: 6px; margin: 8px 0; font-size: .8em; font-weight: 700; color: var(--muted); }
  .fld input { width: 100%; }
  #auth-go { width: 100%; margin-top: 10px; padding: 12px; font-size: 1em; border-radius: 12px; }
  .err { color: #ff8a8a; min-height: 1.2em; }
  details { color: var(--muted); font-size: .85em; } summary { cursor: pointer; }

  /* rail */
  #guild-rail { background: rgb(5 6 12 / .7); backdrop-filter: blur(16px); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 8px; overflow-y: auto; }
  .rail-btn { position: relative; width: 50px; height: 50px; border-radius: 50%; font-size: 22px; display: grid; place-items: center; background: var(--panel-solid); border: var(--glass-bd); transition: border-radius .18s, background .18s, transform .12s; }
  .rail-btn:hover, .rail-btn.active { border-radius: 16px; background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; }
  .rail-btn.ghost { border-style: dashed; color: var(--muted); }
/* Discord-style rail: folders, favorites, drag states */
.rail-btn img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; pointer-events: none; }
.rail-btn.drag-over, .rail-folder.drag-over { outline: 2px solid gold; outline-offset: 2px; box-shadow: 0 0 16px rgb(255 215 0 / .6); }
.rail-btn.rail-hidden { opacity: .45; filter: saturate(.4); }
.rail-fav { position: absolute; top: -4px; right: -4px; font-size: 11px; filter: drop-shadow(0 1px 2px #000); pointer-events: none; }
.rail-count { position: absolute; bottom: -4px; right: -4px; font-size: 10px; font-weight: 800; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 99px; padding: 0 5px; pointer-events: none; }
.rail-folder { border-style: solid; border-color: gold; }
.rail-folder > span:first-child { font-weight: 800; font-size: 15px; pointer-events: none; }
.rail-folder-open { display: flex; flex-direction: column; gap: 8px; align-items: center; background: rgb(127 140 180 / .07); border: 1px dashed var(--line); border-radius: 16px; padding: 8px 4px; }
  .rail-pill { position: absolute; left: -12px; width: 4px; height: 0; border-radius: 99px; background: #fff; transition: height .18s; }
  .rail-btn.active .rail-pill { height: 60%; }
  .rail-sep { width: 30px; height: 2px; background: var(--line); border-radius: 99px; }
  #guild-list { display: flex; flex-direction: column; gap: 8px; align-items: center; }

  /* sidebar */
  #sidebar { display: flex; flex-direction: column; min-height: 0; }
  #sidebar-head { padding: 12px; }
  #quick-open-mini { width: 100%; cursor: pointer; border-radius: 10px; }
  .side-label { font-size: .68em; font-weight: 800; letter-spacing: .1em; color: var(--muted); padding: 12px 14px 5px; display: flex; justify-content: space-between; align-items: center; }
  .side-label button { padding: 2px 8px; }
  /* left panel scrolls as ONE column (like the message panel) — bottom bar stays pinned */
  #dm-section, #guild-section { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  #dm-list, #friend-list, #channel-list, #member-list { overflow: visible; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 1px; }
  .dm-item, .chan-item, .member-item, .friend-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--muted); border: 1px solid transparent; transition: background .13s; }
  :is(.dm-item, .chan-item, .member-item, .friend-item):hover { background: var(--hover); color: var(--text); }
  :is(.dm-item, .chan-item).active { background: var(--active); color: #fff; border-color: rgb(124 138 255 / .25); }
  #friend-tools { display: flex; gap: 6px; padding: 0 10px; } #friend-add-input { flex: 1; min-width: 0; }
  .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; position: relative; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 2px 10px rgb(0 0 0 / .4); }
  .avatar.frame-neon { box-shadow: 0 0 0 2px #00f6ff, 0 0 16px #00f6ff; }
/* critter frames wave 2 — same orbit pattern as wave 1 */
.avatar.frame-tiger { box-shadow: 0 0 0 2px #ff8c1a, 0 0 14px #ff8c1a; overflow: visible; }
.avatar.frame-tiger::before, .avatar.frame-tiger::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-tiger::before { content: "\1F42F"; font-size: 13px; animation: spin 6s linear infinite; }
.avatar.frame-tiger::after { content: "\1F33F"; font-size: 11px; animation: spinRev 8s linear infinite; }
.avatar.frame-shark { box-shadow: 0 0 0 2px #38bdf8, 0 0 14px #0369a1; overflow: visible; }
.avatar.frame-shark::before, .avatar.frame-shark::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-shark::before { content: "\1F988"; font-size: 13px; animation: spin 7s linear infinite; }
.avatar.frame-shark::after { content: "\1F30A"; font-size: 11px; animation: spinRev 5s linear infinite; }
.avatar.frame-phoenix { box-shadow: 0 0 0 2px #ff5a00, 0 0 16px #ffb300; overflow: visible; }
.avatar.frame-phoenix::before, .avatar.frame-phoenix::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-phoenix::before { content: "\1F525"; font-size: 13px; animation: spin 4s linear infinite; }
.avatar.frame-phoenix::after { content: "\1FAB6"; font-size: 11px; animation: spinRev 6s linear infinite; }
.avatar.frame-koala { box-shadow: 0 0 0 2px #9db8a0, 0 0 14px #5c7a5e; overflow: visible; }
.avatar.frame-koala::before, .avatar.frame-koala::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-koala::before { content: "\1F428"; font-size: 13px; animation: spin 10s linear infinite; }
.avatar.frame-koala::after { content: "\1F343"; font-size: 11px; animation: spinRev 12s linear infinite; }
.avatar.frame-owl { box-shadow: 0 0 0 2px #a78bfa, 0 0 14px #6d28d9; overflow: visible; }
.avatar.frame-owl::before, .avatar.frame-owl::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-owl::before { content: "\1F989"; font-size: 13px; animation: spin 8s linear infinite; }
.avatar.frame-owl::after { content: "\2B50\FE0F"; font-size: 10px; animation: spinRev 10s linear infinite; }
.avatar.frame-crab { box-shadow: 0 0 0 2px #ff6b6b, 0 0 14px #c0392b; overflow: visible; }
.avatar.frame-crab::before, .avatar.frame-crab::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-crab::before { content: "\1F980"; font-size: 13px; animation: spinRev 5s linear infinite; }
.avatar.frame-crab::after { content: "\1F41A"; font-size: 11px; animation: spin 7s linear infinite; }
  .avatar.frame-gold { box-shadow: 0 0 0 2px gold, 0 0 16px gold; }
  .avatar.frame-pixel { outline: 2px dashed var(--accent3); }
/* animated critter frames — emoji orbit the avatar like Discord decorations */
.avatar[class*="frame-"] { position: relative; }
.avatar.frame-fish, .avatar.frame-butterfly, .avatar.frame-wolf, .avatar.frame-bee, .avatar.frame-petals, .avatar.frame-ghost { overflow: visible; }
.avatar.frame-fish::before, .avatar.frame-butterfly::before, .avatar.frame-wolf::before, .avatar.frame-bee::before, .avatar.frame-petals::before, .avatar.frame-ghost::before,
.avatar.frame-fish::after, .avatar.frame-butterfly::after, .avatar.frame-wolf::after, .avatar.frame-bee::after, .avatar.frame-petals::after, .avatar.frame-ghost::after {
  position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-fish { box-shadow: 0 0 0 2px #4dd8ff, 0 0 14px #4dd8ff; }
.avatar.frame-titan { box-shadow: 0 0 0 2px #ffd700, 0 0 18px #ff7a00; overflow: visible; }
.avatar.frame-titan::before, .avatar.frame-titan::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-titan::before { content: "\26A1"; font-size: 14px; animation: spin 4s linear infinite; }
.avatar.frame-titan::after { content: "\1F525"; font-size: 12px; animation: spinRev 6s linear infinite; }
/* ASCENDANT: crown-star orbit, plasma plate, starshower */
.avatar.frame-ascendant { box-shadow: 0 0 0 2px #ff5fd2, 0 0 20px #7c3aed; overflow: visible; }
.avatar.frame-ascendant::before, .avatar.frame-ascendant::after { position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
.avatar.frame-ascendant::before { content: "\1F451"; font-size: 13px; animation: spin 5s linear infinite; }
.avatar.frame-ascendant::after { content: "\2B50\FE0F"; font-size: 11px; animation: spinRev 7s linear infinite; }
.plate-ascendant { background: linear-gradient(90deg, #ff5fd2, #7c3aed, #00e5ff, #a3e635, #ffd700, #ff5fd2); background-size: 300% auto; color: #fff !important; animation: plateSlide 2s linear infinite; }
.profx-ascendantfx { background-image: radial-gradient(2px 2px at 25% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 92%, #ffd700, transparent), radial-gradient(2px 2px at 80% 88%, #ff5fd2, transparent); background-size: 190px 230px, 240px 280px, 210px 250px; animation: riseY 4s linear infinite, decoTwinkle 2s ease-in-out infinite; }
.avatar.frame-fish::before { content: "🐟"; font-size: 13px; animation: spin 5s linear infinite; }
.avatar.frame-fish::after { content: "🐠"; font-size: 11px; animation: spinRev 7s linear infinite; }
.avatar.frame-butterfly { box-shadow: 0 0 0 2px #ff9ff3, 0 0 14px #ff9ff3; }
.avatar.frame-butterfly::before { content: "🦋"; font-size: 13px; animation: spin 6s linear infinite; }
.avatar.frame-butterfly::after { content: "🌸"; font-size: 11px; animation: spinRev 8s linear infinite; }
.avatar.frame-wolf { box-shadow: 0 0 0 2px #8d8d9e, 0 0 14px #5a5a72; }
.avatar.frame-wolf::before { content: "🐺"; font-size: 14px; animation: spin 9s linear infinite; }
.avatar.frame-wolf::after { content: "🌙"; font-size: 11px; animation: spinRev 12s linear infinite; }
.avatar.frame-bee { box-shadow: 0 0 0 2px #ffd700, 0 0 14px #ffd700; }
.avatar.frame-bee::before { content: "🐝"; font-size: 12px; animation: spin 3.5s linear infinite; }
.avatar.frame-bee::after { content: "🍯"; font-size: 10px; animation: spinRev 5s linear infinite; }
.avatar.frame-petals { box-shadow: 0 0 0 2px #ffb1dd, 0 0 14px #ff5fa2; }
.avatar.frame-petals::before { content: "🌸"; font-size: 12px; animation: spin 5.5s linear infinite; }
.avatar.frame-petals::after { content: "✨"; font-size: 10px; animation: spinRev 4s linear infinite; }
.avatar.frame-ghost { box-shadow: 0 0 0 2px #c9c9ff, 0 0 16px #8f8fff; }
.avatar.frame-ghost::before { content: "👻"; font-size: 13px; animation: spin 7s linear infinite; }
.avatar.frame-ghost::after { content: "💜"; font-size: 10px; animation: spinRev 9s linear infinite; }
  .dot { width: 11px; height: 11px; border-radius: 50%; position: absolute; right: -1px; bottom: -1px; border: 2.5px solid var(--panel-solid); }
  .dot.online { background: var(--accent3); box-shadow: 0 0 8px var(--accent3); } .dot.idle { background: var(--warn); } .dot.dnd { background: var(--danger); } .dot.offline, .dot.invisible { background: var(--faint); }
  #guild-banner { padding: 13px 14px; display: flex; gap: 9px; align-items: center; border-block-end: 1px solid var(--line); font-size: 1.02em; position: relative; overflow: hidden; }
  #guild-banner > *:not(video) { position: relative; z-index: 1; }
  #guild-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
  #guild-buttons { margin-inline-start: auto; display: flex; gap: 6px; }
  #event-strip { padding: 8px 12px; font-size: .8em; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
  #event-strip a { color: var(--accent3); }
  #you-bar { margin-top: 0; flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 10px; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
  /* wallet lives in its own row above the profile bar — never overlapping it */
  #wallet-row { margin-top: auto; flex-shrink: 0; display: flex; padding: 8px 10px 0; }
  #wallet-row #wallet-pill { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #you-meta b, #you-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #you-bar button { flex-shrink: 0; }
  #sidebar-head, #guild-banner { flex-shrink: 0; }
  #you-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
  #you-meta { flex: 1; min-width: 0; } #you-name { font-size: .9em; } #you-meta small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .75em; }

  /* main */
  #main { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, transparent, rgb(0 0 0 / .18)), var(--bg1); container-type: inline-size; }
  #chat-head { display: flex; align-items: center; gap: 9px; padding: 10px 16px; }
  #chan-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--hover); color: var(--muted); }
  #chan-name { font-size: 1.02em; letter-spacing: -.01em; cursor: pointer; }
  #chan-topic { color: var(--muted); font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
  .spacer { flex: 1; }
  #pins-bar, #search-bar { border-block-end: 1px solid var(--line); padding: 10px 14px; max-height: 240px; overflow: auto; }
  .search-row { display: flex; gap: 8px; } .search-row input { flex: 1; }
  #messages { flex: 1; overflow-y: auto; padding: 16px clamp(10px, 3vw, 26px); display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; }
  body[data-mode="compact"] #messages .msg { padding: 3px 10px; } body[data-mode="compact"] .avatar { width: 24px; height: 24px; font-size: 11px; }
  .msg { display: flex; gap: 12px; padding: 9px 12px; border-radius: 12px; animation: msgIn .22s ease; border: 1px solid transparent; }
  .msg:hover { background: rgb(127 140 180 / .08); border-color: var(--line); }
  .msg .body { flex: 1; min-width: 0; }
  .msg .head { font-size: .78em; color: var(--muted); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .msg .head b { font-size: 1.08em; color: var(--text); }
  .msg .content { overflow-wrap: anywhere; line-height: 1.55; font-size: .96em; }
  .msg .content pre { background: #05060d; border: 1px solid var(--line); padding: 10px 12px; border-radius: 10px; overflow: auto; }
  body[data-theme="light"] .msg .content pre { background: #0e1230; color: #e8ecff; }
  .msg .content code { background: rgb(127 140 180 / .18); padding: 1px 6px; border-radius: 6px; font-size: .86em; }
  .msg .content blockquote { border-inline-start: 3px solid var(--accent); padding-inline-start: 10px; color: var(--muted); }
  .spoiler { background: #000; cursor: pointer; border-radius: 6px; padding: 0 6px; } .spoiler.reveal { background: rgb(255 255 255 / .14); }
  .embed { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); background: rgb(0 0 0 / .28); padding: 10px 12px; border-radius: 0 12px 12px 0; margin-top: 8px; font-size: .85em; }
  body[data-theme="light"] .embed { background: rgb(88 101 242 / .07); }
  .embed a { color: #6ea8ff; }
  .attach img, .attach video { max-width: min(380px, 100%); max-height: 260px; border-radius: 12px; margin-top: 8px; border: 1px solid var(--line); }
  .reactions { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
  .react { background: rgb(127 140 180 / .12); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; cursor: pointer; font-size: .8em; transition: transform .1s; }
  .react:hover { transform: scale(1.07); } .react.mine { border-color: var(--accent); background: rgb(88 101 242 / .22); }
  .msg-actions { opacity: 0; display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
  .msg-actions button { padding: 3px 9px; font-size: .75em; }
  .poll { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-top: 8px; background: rgb(127 140 180 / .06); }
  .poll button { display: block; width: 100%; text-align: start; margin: 5px 0; }
  .thread-tag { font-size: .75em; color: #8ea2ff; cursor: pointer; }
  /* Phase 10: cross-channel pills, quote unfurls, math, sandbox, scheduled rows */
  .chan-link { color: #8ea2ff; background: rgb(88 101 242 / .16); border-radius: 6px; padding: 0 6px; cursor: pointer; font-weight: 600; white-space: nowrap; }
  .chan-link:hover { background: rgb(88 101 242 / .32); text-decoration: underline; }
  .quote-link { display: inline-block; color: var(--muted); border-left: 3px solid var(--accent); padding: 1px 8px; margin: 2px 0; cursor: pointer; background: rgb(127 140 180 / .07); border-radius: 0 8px 8px 0; max-width: 100%; }
  .quote-link:hover { color: inherit; }
  .math { font-family: Georgia, 'Times New Roman', serif; font-style: italic; background: rgb(127 140 180 / .1); border-radius: 6px; padding: 0 6px; }
  .math-block { font-family: Georgia, 'Times New Roman', serif; font-style: italic; text-align: center; padding: 10px; margin: 6px 0; background: rgb(127 140 180 / .08); border: 1px solid var(--line); border-radius: 12px; font-size: 1.1em; overflow-x: auto; }
  .frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 2px; }
  .fnum { border-bottom: 1px solid currentColor; padding: 0 4px; } .fden { padding: 0 4px; }
  .rad { border-top: 1px solid currentColor; padding: 0 2px; }
  .code-run { margin-top: 4px; font-size: .75em; padding: 3px 10px; cursor: pointer; }
  .code-out { margin-top: 4px; padding: 8px 10px; background: #0a0e1a; border: 1px solid var(--line); border-radius: 8px; font-family: monospace; font-size: .8em; max-height: 220px; overflow: auto; white-space: pre-wrap; }
  .sb-err { color: #ff7b7b; } .sb-ret { color: #7bff9e; } .sb-note { color: var(--muted); font-style: italic; }
  .sched-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  /* Phase 12: sealed-DM lock box */
  .e2ee-lock { margin: 4px 0; }
  .e2ee-lock button { border: 1px dashed var(--accent); border-radius: 10px; padding: 8px 14px; background: rgb(88 101 242 / .1); cursor: pointer; }
  .thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: rgb(127 140 180 / .07); font-size: .85em; }
  .thread-head .avatar, .thread-head img { width: 24px; height: 24px; font-size: 12px; }
  .burst-fx { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
  .burst-fx span { position: absolute; top: 55%; font-size: 30px; animation: burstUp 1.2s ease-out forwards; }
  @keyframes burstUp { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-38vh) scale(1.3) rotate(24deg); opacity: 0; } }
  .bulk-bar { position: sticky; bottom: 8px; z-index: 30; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid, #151824); margin-top: 8px; font-size: .85em; }
  .bulk-check { margin-right: 6px; width: 18px; height: 18px; accent-color: var(--accent); }
  #sticker-suggest { display: flex; gap: 6px; padding: 6px 14px; overflow-x: auto; }
  .avatar { position: relative; }
  .frame-img { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); pointer-events: none; }
  .avatarWrap { position: relative; }
  .avatarWrap .pet { position: absolute; right: -6px; bottom: -4px; font-size: 15px; filter: drop-shadow(0 1px 2px #000); pointer-events: none; }
  .avatarWrap .pet.lv3 { font-size: 17px; } .avatarWrap .pet.lv4 { font-size: 19px; } .avatarWrap .pet.lv5 { font-size: 21px; }
  .game-board { display: inline-grid; gap: 4px; margin-top: 6px; }
  .game-board.ttt { grid-template-columns: repeat(3, 40px); }
  .game-board.ttt button { width: 40px; height: 40px; font-size: 20px; }
  .game-board.c4 { grid-template-columns: repeat(7, 30px); }
  .game-board.c4 button { font-size: 14px; }
  .game-board.c4 span { font-size: 20px; text-align: center; }
  .disc-theme { color: var(--muted); font-size: .85em; }
  .disc-bracket { color: var(--accent3); font-weight: 700; }
  .disc-glow { color: var(--accent3); text-shadow: 0 0 8px var(--accent3); font-weight: 700; }
  .disc-gold { color: gold; font-weight: 800; }
  #announce-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: linear-gradient(135deg, var(--accent), #7c3aed); font-weight: 700; font-size: .85em; flex-shrink: 0; }
  #announce-bar button { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 1em; }
  #chat-head.chanhead-bg { background-size: cover; background-position: center; position: relative; }
  #chat-head.chanhead-bg > * { position: relative; z-index: 1; }
  .e-wrap { position: relative; display: inline-block; }
  .e-fav { position: absolute; top: -6px; right: -2px; font-size: 10px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }
  .e-fav.on { color: var(--warn); }
  .stk-sug { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; background: rgb(127 140 180 / .07); cursor: pointer; }
  .stk-sug img { width: 28px; height: 28px; }
  #typing { display: flex; align-items: center; gap: 4px; font-size: .78em; color: var(--muted); min-height: 22px; padding: 0 18px; }
  #typing .tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
  #typing .tdot:nth-child(2) { animation-delay: .15s; } #typing .tdot:nth-child(3) { animation-delay: .3s; }

  /* voice */
  #voice-tray { border-top: 1px solid var(--line); padding: 10px 12px; }
  .vt-head { display: flex; align-items: center; gap: 8px; }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; animation: blink 1.4s infinite; }
  #voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin: 8px 0; }
  #voice-grid[data-layout="focus"] { grid-template-columns: 2fr 1fr 1fr; }
  #voice-grid[data-layout="focus"] .tile:first-child { grid-row: span 2; min-height: 220px; }
  #voice-grid[data-layout="split"] { grid-template-columns: 1fr 1fr; }
  #voice-dock { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
  #voice-dock-msgs { max-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
  #hand-queue .member-item, #voice-dock .member-item { margin: 4px 0; }
  #voice-captions { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; font-size: .85em; }
  #caption-lines { margin-bottom: 6px; }
  .tile { aspect-ratio: 16/10; background: #070912; border-radius: 14px; overflow: hidden; position: relative; border: 2px solid var(--line); transition: border-color .15s, transform .15s; }
  .tile:hover { transform: translateY(-2px); }
  .tile.speaking { border-color: var(--accent3); box-shadow: 0 0 0 3px rgb(87 242 135 / .25), 0 8px 28px rgb(0 0 0 / .5); }
  .tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
  .tile .tag { position: absolute; left: 8px; bottom: 8px; background: rgb(0 0 0 / .65); backdrop-filter: blur(8px); padding: 3px 9px; border-radius: 99px; font-size: .72em; border: 1px solid var(--line); }
/* file cards + audio attachments */
.attach audio { width: min(340px, 100%); margin-top: 6px; }
.voice-msg { border-color: color-mix(in oklch, var(--accent) 55%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
#composer.dragging, #messages.dragging { outline: 2px dashed var(--accent3); outline-offset: -6px; }
#btn-voice.recording, #btn-videonote.recording { background: linear-gradient(135deg, #f04747, #c81e5b); animation: recPulse 1.2s ease-in-out infinite; font-size: 12px; font-weight: 800; }
  .attach.video-note video { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; }
  .gif-cell { position: relative; display: inline-block; }
  .gif-fav { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); border: 0; border-radius: 8px; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 6px; }
  .gif-fav.on { color: var(--warn); }
@keyframes recPulse { 50% { box-shadow: 0 0 18px #f04747; } }
  .file-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 6px; background: rgb(127 140 180 / .07); max-width: 420px; }
  /* screen-share watch tiles */
  .tile[id*="screen"] { aspect-ratio: 16/9; border-color: color-mix(in oklch, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent), 0 10px 30px rgb(0 0 0 / .5); cursor: zoom-in; }
  #voice-controls { display: flex; gap: 6px; flex-wrap: wrap; }
  #voice-controls button { border-radius: 11px; }
  #soundboard-row, #activity-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  /* Discord-style audio popover */
  #audio-pop { margin-top: 8px; padding: 12px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
  #audio-pop label { display: flex; align-items: center; gap: 8px; font-size: .82em; font-weight: 700; }
  #audio-pop select { flex: 1; min-width: 0; }
  #audio-vol { flex: 1; accent-color: var(--accent); }

  /* composer */
  #composer { display: flex; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); align-items: flex-end; border-top: 1px solid var(--line); margin: 0 12px 12px; border-radius: 18px; }
  #msg-input { flex: 1; resize: none; max-height: 150px; border-radius: 13px; line-height: 1.45; }
  #btn-send { width: 42px; height: 42px; border-radius: 50%; font-size: 18px; display: grid; place-items: center; }

  /* right */
  #right { width: 250px; padding: 8px; overflow-y: auto; }

  /* modals + pops */
  .modal { position: fixed; inset: 0; z-index: 150; background: rgb(3 4 10 / .6); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 16px; animation: fade .18s ease; }
  .modal .box { border-radius: 20px; padding: 20px; width: min(480px, 94vw); max-height: 88dvh; overflow: auto; animation: pop-in .22s cubic-bezier(.2, 1.2, .3, 1); }
  .modal .box.wide { width: min(760px, 96vw); }
  .modal .box h3, .modal .box h4 { margin: 12px 0 6px; } .modal .box input { width: 100%; margin: 4px 0; }
  .modal hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
  .set-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .set-grid { display: grid; grid-template-columns: 170px 1fr; gap: 14px; }
  .set-nav { display: flex; flex-direction: column; gap: 6px; }
  .set-nav .active { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border-color: transparent; }
  .set-body label { display: grid; gap: 5px; margin: 9px 0; font-size: .86em; font-weight: 600; color: var(--muted); }
  .set-body input, .set-body textarea, .set-body select { width: 100%; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .check { display: flex !important; flex-direction: row !important; align-items: center; gap: 9px !important; }
  .check input { width: auto !important; accent-color: var(--accent); }
  .bio-preview { border: 1px dashed var(--line); border-radius: 10px; padding: 9px; min-height: 34px; color: var(--text); }
  .hint { color: var(--muted); font-size: .78em; }
  .theme-swatches { display: flex; gap: 8px; margin-top: 8px; } .theme-swatches button { background: var(--sw); }
  .pop { position: fixed; bottom: 92px; left: min(390px, 40vw); border-radius: 16px; padding: 12px; z-index: 160; box-shadow: var(--shadow-2); max-width: 350px; animation: pop-in .18s ease; }
  #gif-grid, #emoji-pop { display: flex; flex-wrap: wrap; gap: 6px; max-height: 230px; overflow: auto; margin-top: 8px; }
  #gif-grid img { width: 104px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); } #gif-grid img:hover { transform: scale(1.04); }
  .e-btn { font-size: 22px; background: none; border: 0; } .e-btn:hover { transform: scale(1.2); }
  #qs-results .qs-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; } #qs-results .qs-item:hover { background: var(--hover); }
  #discovery-list .msg, #ss-audit div, #ss-roles div { font-size: .86em; }
  .keys { list-style: none; padding: 0; display: grid; gap: 7px; }
  .streamer-mode .secret { filter: blur(7px); }
  body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }
  body.high-contrast { --text: #fff; --muted: #d5d9ea; }
}

@layer motion {
  @keyframes msgIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
  @keyframes toastIn { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes pop-in { from { opacity: 0; scale: .96; translate: 0 8px; } to { opacity: 1; scale: 1; translate: 0 0; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.12); } }
  @keyframes load { to { transform: translateX(280%); } }
  @keyframes pop { from { transform: scale(1); } to { transform: scale(1.12); } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
}

/* Ultra-HD: crisper on retina / 4K */
@media (min-resolution: 2dppx) {
  body { letter-spacing: -.005em; }
  .msg .content { font-variant-ligatures: contextual; }
}

/* Container query: tighten chat on narrow panes (modern) */
@container (max-width: 560px) {
  #chan-topic { display: none; }
  .tile { border-radius: 10px; }
}

/* Responsive */
@media (max-width: 1080px) { #app { grid-template-columns: 68px 250px 1fr; } #right { display: none; } }
/* Phase 11: tablets get the drawer sidebar (between phone and desktop) */
@media (min-width: 761px) and (max-width: 1080px) {
  #app { grid-template-columns: 68px 1fr; }
  #sidebar { display: none; }
  #app:has(#guild-section:not(.hidden)) #sidebar { display: flex; position: fixed; z-index: 60; inset: 0 auto 0 68px; width: 280px; box-shadow: 0 0 60px #000; }
}
/* Phase 11: display modes (?tv ?watch ?overlay ?xr) */
body.fx-tv { font-size: 20px; }
body.fx-tv #guild-rail { width: 96px; }
body.fx-tv #sidebar, body.fx-tv #right { display: none !important; }
body.fx-tv #app { grid-template-columns: 96px 1fr; }
body.fx-tv .msg { font-size: 1.25em; padding: 12px; }
body.fx-tv #msg-input { font-size: 1.2em; }
body.fx-watch #guild-rail, body.fx-watch #sidebar, body.fx-watch #right, body.fx-watch #composer { display: none !important; }
body.fx-watch #app { grid-template-columns: 1fr; }
body.fx-watch .msg { font-size: .85em; }
#watch-react { display: none; position: fixed; bottom: 12px; left: 0; right: 0; justify-content: center; gap: 14px; z-index: 300; }
body.fx-watch #watch-react { display: flex; }
#watch-react button { font-size: 30px; width: 64px; height: 64px; border-radius: 50%; }
body.fx-overlay { background: transparent !important; }
body.fx-overlay #bg-orbs, body.fx-overlay #guild-rail, body.fx-overlay #sidebar, body.fx-overlay #right, body.fx-overlay #composer, body.fx-overlay #chat-head { display: none !important; }
body.fx-overlay #app { grid-template-columns: 1fr; background: transparent; }
body.fx-overlay #messages { background: transparent; }
body.fx-overlay .msg { background: rgb(0 0 0 / .55); border-radius: 10px; margin: 4px 8px; }
body.fx-xr #app, body.fx-xr #guild-rail, body.fx-xr #sidebar, body.fx-xr #right, body.fx-xr #composer, body.fx-xr #splash { display: none !important; }
#xr-split { position: fixed; inset: 0; display: flex; z-index: 400; background: #000; }
.xr-eye { flex: 1; overflow: hidden; padding: 40px 24px; border-right: 1px solid #333; touch-action: none; }
.xr-eye .msg { font-size: 1.3em; margin-bottom: 14px; }
.xr-eye .msg-actions, .xr-eye .reactions { display: none; }
@media (max-width: 760px) {
  #app { grid-template-columns: 58px 1fr; }
  /* Phone drawers: sidebar NEVER auto-shows — channel view stays full-screen.
     Hamburger (top-left) or left-edge swipe opens it; picking a channel/DM
     closes it. Members open from the right via 👥. */
  #sidebar { display: none; }
  #app.mnav-open #sidebar { display: flex; position: fixed; z-index: 60; top: 0; bottom: 0; left: 58px; width: min(280px, 78vw); box-shadow: 0 0 60px #000; animation: mnavIn .18s ease; }
  @keyframes mnavIn { from { transform: translateX(-24px); opacity: .4; } to { transform: none; opacity: 1; } }
  #mnav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .55); }
  #mnav-backdrop.hidden { display: none; }
  #right { display: none; }
  #app.mright-open #right { display: flex; position: fixed; z-index: 60; top: 0; bottom: 0; right: 0; width: min(280px, 78vw); box-shadow: 0 0 60px #000; animation: mrightIn .18s ease; }
  @keyframes mrightIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
  .set-grid { grid-template-columns: 1fr; } .set-nav { flex-direction: row; flex-wrap: wrap; }
  .pop { left: 12px; right: 12px; max-width: none; }
}
/* Hamburger lives in #chat-head; desktop keeps the existing ☰ behavior. */
#btn-mnav { display: none; }
@media (max-width: 760px) { #btn-mnav { display: inline-flex; } }
/* ===== Phone fit (≤760px): everything reachable, nothing clipped =====
   Chat-head keeps: ☰ · #name · 📞/📷 (DMs) · 🔍 · 👥 · ⋮ — the rest moves
   into the ⋮ popup. Composer keeps: [+] · GIF · 😀 · 🎤 · input · ➤ —
   the rest moves into the + bottom sheet. Nodes are MOVED (not cloned)
   so all handlers survive; desktop restores them in place. */
#btn-more, #btn-plus { display: none; }
@media (max-width: 760px) {
  #btn-more, #btn-plus { display: inline-flex; }
  #msheet-more, #msheet-attach {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    max-height: 55vh; overflow-y: auto; padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg, #10131f); border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px #000;
  }
  #msheet-more.hidden, #msheet-attach.hidden { display: none; }
  #msheet-more .mact, #msheet-attach .mact {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 6px 4px; background: none; border: 0; color: inherit;
    font-size: 1em; text-align: left; cursor: pointer;
  }
  #msheet-more .mact > .icon-btn, #msheet-attach .mact > .icon-btn,
  #msheet-more .mact > .chip, #msheet-attach .mact > .chip { flex: none; }
  #msheet-more .mact > small, #msheet-attach .mact > small { color: var(--muted); }
  #composer { gap: 4px; padding: 8px; }
  #msg-input { font-size: 16px; }
}
/* touch devices: fat-finger targets + no iOS auto-zoom + home-indicator clearance */
@media (pointer: coarse) {
  .icon-btn, .msg-actions button, .ctx-item { min-height: 40px; min-width: 40px; }
  #msg-input { font-size: 16px; }
  .react { font-size: 1.15em; }
  #composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ FLUXCORD POP PACK — HD shine, motion & new components ============ */
@layer pop {
/* richer aurora + vignette */
#bg-orbs { background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgb(0 0 0 / .5)); }
#bg-orbs::after { content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 180deg at 50% 120%, transparent 40%, rgb(88 101 242 / .07), transparent 60%); }
/* gradient rail icons */
.rail-btn { background: linear-gradient(160deg, var(--panel-solid), rgb(0 0 0 / .35)); box-shadow: 0 4px 14px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .08); }
.rail-btn:hover { box-shadow: 0 6px 22px rgb(88 101 242 / .5), inset 0 1px 0 rgb(255 255 255 / .15); }
/* buttons get a shine sweep */
button.primary, #btn-send { position: relative; overflow: hidden; }
button.primary::after, #btn-send::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent); transform: skewX(-20deg); animation: shine 3.4s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
/* messages lift + glow faces */
.msg { transition: background .15s, transform .15s, border-color .15s; }
.msg:hover { transform: translateX(2px); }
.avatar { background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3)); background-size: 200% 200%; animation: avShift 8s ease infinite; box-shadow: 0 3px 12px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .12); }
@keyframes avShift { 50% { background-position: 100% 100%; } }
/* jumbo emoji (Discord-style) */
.msg .content.jumbo { font-size: 2.6em; line-height: 1.25; }
.msg .content.jumbo.mega { font-size: 4em; animation: jumboFloat 3s ease-in-out infinite; }
@keyframes jumboFloat { 50% { translate: 0 -4px; } }
/* sensitive media veil */
.attach.sens-blur img, .attach.sens-blur video { filter: blur(18px) saturate(.6); }
.sens-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .45); border-radius: 10px; cursor: pointer; z-index: 2; font-weight: 700; }
.attach { position: relative; }
#messages.cozy .msg { padding: 4px 10px; font-size: .9em; }
#messages.cozy .msg .avatarWrap { scale: .85; }
/* tighter grouping for rapid same-author runs */
.msg.grp-same { margin-top: -4px; }
.msg.grp-same .avatarWrap { visibility: hidden; height: 0; }
.msg.grp-same .head b { display: none; }
/* standalone stickers render at your chosen size; inline stay emoji-size */
body[data-sticker="S"] { --sticker-size: 72px; }
body[data-sticker="M"] { --sticker-size: 160px; }
body[data-sticker="L"] { --sticker-size: 240px; }
.sticker-solo .md-sticker { width: var(--sticker-size, 160px); height: var(--sticker-size, 160px); vertical-align: baseline; }
.sticker-solo a:has(> .md-sticker) { display: inline-block; }
/* per-channel wallpaper */
#messages.chanbg { background-color: transparent; background-size: cover; background-attachment: fixed; background-position: center; }
/* drag-and-drop channel reordering */
.chan-item { cursor: grab; }
.chan-item:active { cursor: grabbing; }
.chan-item.drop-above { box-shadow: 0 -2px 0 var(--accent3); }
.chan-item.drop-below { box-shadow: 0 2px 0 var(--accent3); }
.chan-item.dragging { opacity: .45; }
.side-label.drop-below { box-shadow: 0 2px 0 var(--accent3); border-radius: 6px; }
/* reactions pop */
.react { transition: transform .12s; } .react:hover { transform: scale(1.12) rotate(-3deg); }
/* typing glow */
#typing { color: var(--accent3); font-weight: 600; }
/* composer focus glow */
#composer:focus-within { border-color: color-mix(in oklch, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent), var(--shadow-1); }
/* chat header shimmer */
#chan-name { background: linear-gradient(90deg, #fff, #ffd6ec 50%, #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; }
body[data-theme="light"] #chan-name { background: linear-gradient(90deg, #1a2050, #a83a7c 50%, #1a2050); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; }
/* voice tiles glow */
.tile { box-shadow: 0 8px 26px rgb(0 0 0 / .5); }
/* wallet */
.wallet-chip { border-color: gold !important; color: gold !important; font-weight: 800; box-shadow: 0 0 12px rgb(255 215 0 / .35); animation: gemPulse 2.4s ease-in-out infinite; }
@keyframes gemPulse { 50% { box-shadow: 0 0 22px rgb(255 215 0 / .6); } }
.wallet-big { font-size: 1.6em; font-weight: 800; color: gold; text-shadow: 0 0 18px rgb(255 215 0 / .5); }
/* context menu */
#ctx-menu { position: fixed; z-index: 400; min-width: 220px; max-width: 300px; padding: 6px; border-radius: 14px;
  background: color-mix(in oklch, var(--panel-solid) 92%, black); backdrop-filter: blur(22px);
  border: var(--glass-bd); box-shadow: var(--shadow-2); animation: pop-in .14s ease; }
#ctx-menu .ctx-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: start; background: none; border: 0; padding: 9px 11px; border-radius: 9px; font-weight: 600; font-size: .88em; }
#ctx-menu .ctx-item:hover { background: var(--accent); color: #fff; transform: none; }
#ctx-menu .ctx-item.danger:hover { background: var(--danger); }
#ctx-menu .ctx-sep { height: 1px; background: var(--line); margin: 5px 8px; }
/* profile modal */
.profile-box { padding: 0 !important; overflow: hidden; }
#prof-banner { height: 110px; background: linear-gradient(135deg, var(--accent), var(--accent2)); position: relative; }
#prof-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .45)); }
.prof-body { padding: 0 20px 18px; margin-top: -34px; position: relative; }
#prof-avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); border: 4px solid var(--panel-solid); box-shadow: 0 6px 22px rgb(0 0 0 / .5); }
#prof-badges { display: flex; gap: 6px; margin: 10px 0 2px; flex-wrap: wrap; }
.badge { font-size: 1.05em; background: rgb(127 140 180 / .14); border: 1px solid var(--line); border-radius: 9px; padding: 2px 8px; cursor: default; }
#prof-name { font-size: 1.4em; letter-spacing: -.02em; margin: 2px 0; }
#prof-name.glow-gold { color: gold; text-shadow: 0 0 16px rgb(255 215 0 / .7); }
#prof-name.glow-neon { color: #aef7ff; text-shadow: 0 0 16px rgb(0 246 255 / .8); }
#prof-name.glow-rose { color: #ffc0da; text-shadow: 0 0 16px rgb(255 95 162 / .8); }
#prof-sub { color: var(--muted); font-size: .82em; }
#prof-status { margin: 8px 0; font-size: .88em; background: rgb(127 140 180 / .1); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
#prof-bio { font-size: .9em; margin-bottom: 10px; }
.prof-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* big Discord-modern profile: bordered cards, status dot, animated accents */
.profile-box.profile-big { width: min(560px, 96vw); border: 1px solid var(--line); box-shadow: 0 24px 70px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04) inset; display: flex; flex-direction: column; }
.profile-big #prof-banner { flex: none; }
.profile-big .prof-body { overflow-y: auto; min-height: 0; }
.profbg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.profile-big #prof-banner { height: 150px; }
.profile-big #prof-avatar { width: 92px; height: 92px; font-size: 36px; border-width: 6px; }
.profile-big #prof-name { font-size: 1.6em; }
.prof-toprow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prof-ava-wrap { position: relative; flex: none; }
/* WEARABLE decos: emoji props layered above the avatar (base + hats) */
.avatarWrap { position: relative; }
.avatarWrap .dot { z-index: 3; }
.avatarWrap .deco-layer, .prof-ava-wrap .deco-layer { position: absolute; inset: 0; container-type: size; pointer-events: none; z-index: 2; }
/* stacked slot 2: nested wrap reuses every deco rule via descendant selectors */
.avatarWrap.slot2, .prof-ava-wrap.slot2 { position: absolute; inset: 0; pointer-events: none; }
/* stack tiers T4/T5: aura + animated showcase */
.stack-aura { filter: drop-shadow(0 0 5px gold); }
.stack-show .slot2 { animation: stackCycle 5s ease-in-out infinite alternate; }
@keyframes stackCycle { from { opacity: .55; scale: .94; } to { opacity: 1; scale: 1.04; } }
.avatarWrap .deco-layer::before, .prof-ava-wrap .deco-layer::before,
.avatarWrap .deco-layer::after, .prof-ava-wrap .deco-layer::after { position: absolute; line-height: 1; }
@keyframes decoBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -4%; } }
.avatarWrap.deco-hat_magic .deco-layer::before, .prof-ava-wrap.deco-hat_magic .deco-layer::before { content: "\1F3A9"; top: -18%; left: 50%; translate: -50% 0; font-size: 46cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_grad .deco-layer::before, .prof-ava-wrap.deco-hat_grad .deco-layer::before { content: "\1F393"; top: -14%; left: 50%; translate: -50% 0; font-size: 44cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_helmet .deco-layer::before, .prof-ava-wrap.deco-hat_helmet .deco-layer::before { content: "\26D1\FE0F"; top: -14%; left: 50%; translate: -50% 0; font-size: 44cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_crown .deco-layer::before, .prof-ava-wrap.deco-hat_crown .deco-layer::before { content: "\1F451"; top: -16%; left: 50%; translate: -50% 0; font-size: 40cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_bow .deco-layer::before, .prof-ava-wrap.deco-hat_bow .deco-layer::before { content: "\1F380"; top: -12%; left: 50%; translate: -50% 0; font-size: 38cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_sun .deco-layer::before, .prof-ava-wrap.deco-hat_sun .deco-layer::before { content: "\1F452"; top: -18%; left: 50%; translate: -50% 0; font-size: 50cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_party .deco-layer::before, .prof-ava-wrap.deco-hat_party .deco-layer::before { content: "\1F389"; top: -14%; left: 50%; translate: -50% 0; font-size: 40cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_phones .deco-layer::before, .prof-ava-wrap.deco-hat_phones .deco-layer::before { content: "\1F3A7"; top: 50%; left: 50%; translate: -50% -50%; font-size: 92cqw; }
.avatarWrap.deco-hat_flower .deco-layer::before, .prof-ava-wrap.deco-hat_flower .deco-layer::before { content: "\1F338"; top: -8%; left: 50%; translate: -50% 0; font-size: 34cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_flower .deco-layer::after, .prof-ava-wrap.deco-hat_flower .deco-layer::after { content: "\1F33C"; top: -2%; left: 14%; font-size: 22cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_leaf .deco-layer::before, .prof-ava-wrap.deco-hat_leaf .deco-layer::before { content: "\1F342"; top: -12%; left: 50%; translate: -50% 0; font-size: 40cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_shell .deco-layer::before, .prof-ava-wrap.deco-hat_shell .deco-layer::before { content: "\1F41A"; top: -12%; left: 50%; translate: -50% 0; font-size: 36cqw; animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-hat_gem .deco-layer::before, .prof-ava-wrap.deco-hat_gem .deco-layer::before { content: "\1F48E"; top: 2%; left: 50%; translate: -50% 0; font-size: 24cqw; animation: decoTwinkle 2s ease-in-out infinite; }
/* WEARABLE decos continued: masks + accents */
@keyframes decoTwinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.3; opacity: .65; } }
@keyframes decoFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -8%; } }
.avatarWrap.deco-mask_hero .deco-layer::before, .prof-ava-wrap.deco-mask_hero .deco-layer::before { content: "\1F9B8"; top: 50%; left: 50%; translate: -50% -50%; font-size: 80cqw; }
.avatarWrap.deco-mask_clown .deco-layer::before, .prof-ava-wrap.deco-mask_clown .deco-layer::before { content: "\1F921"; top: 50%; left: 50%; translate: -50% -50%; font-size: 84cqw; }
.avatarWrap.deco-mask_ninja .deco-layer::before, .prof-ava-wrap.deco-mask_ninja .deco-layer::before { content: "\1F977"; top: 50%; left: 50%; translate: -50% -50%; font-size: 80cqw; }
.avatarWrap.deco-mask_alien .deco-layer::before, .prof-ava-wrap.deco-mask_alien .deco-layer::before { content: "\1F47D"; top: 50%; left: 50%; translate: -50% -50%; font-size: 78cqw; }
.avatarWrap.deco-mask_bot .deco-layer::before, .prof-ava-wrap.deco-mask_bot .deco-layer::before { content: ""; top: -20%; left: 9%; width: 82%; height: 60%; background: linear-gradient(to bottom, transparent 60%, rgba(8,18,28,.94) 60%, rgba(8,18,28,.94) 78%, transparent 78%), radial-gradient(ellipse at 50% 26%, #f4f7fb 0%, #bcc6d2 38%, #707a88 72%, #3f4650 100%); border-radius: 50% 50% 46% 46% / 80% 80% 20% 20%; box-shadow: inset -6px -8px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.4); }
.avatarWrap.deco-mask_bot .deco-layer::after, .prof-ava-wrap.deco-mask_bot .deco-layer::after { content: ""; top: -30%; left: 50%; width: 5%; height: 13%; translate: -50% 0; background: linear-gradient(#ff6b6b, #b00); border-radius: 99px; box-shadow: 0 0 8px 2px rgba(255,80,80,.85); animation: decoBob 4s ease-in-out infinite; }
.avatarWrap.deco-mask_pumpkin .deco-layer::before, .prof-ava-wrap.deco-mask_pumpkin .deco-layer::before { content: "\1F383"; top: 50%; left: 50%; translate: -50% -50%; font-size: 82cqw; }
.avatarWrap.deco-mask_cat .deco-layer::before, .prof-ava-wrap.deco-mask_cat .deco-layer::before { content: "\1F431"; top: 50%; left: 50%; translate: -50% -50%; font-size: 78cqw; }
.avatarWrap.deco-mask_dog .deco-layer::before, .prof-ava-wrap.deco-mask_dog .deco-layer::before { content: "\1F436"; top: 50%; left: 50%; translate: -50% -50%; font-size: 78cqw; }
.avatarWrap.deco-acc_bowtie .deco-layer::before, .prof-ava-wrap.deco-acc_bowtie .deco-layer::before { content: "\1F454"; left: 50%; bottom: -6%; translate: -50% 0; font-size: 36cqw; }
.avatarWrap.deco-acc_medal .deco-layer::before, .prof-ava-wrap.deco-acc_medal .deco-layer::before { content: "\1F3C5"; right: 0; bottom: 8%; font-size: 30cqw; }
.avatarWrap.deco-acc_scarf .deco-layer::before, .prof-ava-wrap.deco-acc_scarf .deco-layer::before { content: "\1F9E3"; left: 50%; bottom: -16%; translate: -50% 0; font-size: 66cqw; }
.avatarWrap.deco-acc_guitar .deco-layer::before, .prof-ava-wrap.deco-acc_guitar .deco-layer::before { content: "\1F3B8"; right: -16%; bottom: -8%; font-size: 46cqw; rotate: -14deg; }
.avatarWrap.deco-acc_mic .deco-layer::before, .prof-ava-wrap.deco-acc_mic .deco-layer::before { content: "\1F3A4"; right: 2%; bottom: -10%; font-size: 30cqw; rotate: 12deg; }
.avatarWrap.deco-acc_star .deco-layer::before, .prof-ava-wrap.deco-acc_star .deco-layer::before { content: "\2B50\FE0F"; top: 12%; right: 10%; font-size: 20cqw; animation: decoTwinkle 2s ease-in-out infinite; }
.avatarWrap.deco-acc_star .deco-layer::after, .prof-ava-wrap.deco-acc_star .deco-layer::after { content: "\2728\FE0F"; top: 32%; left: 6%; font-size: 14cqw; animation: decoTwinkle 2s ease-in-out 1s infinite; }
.avatarWrap.deco-acc_heart .deco-layer::before, .prof-ava-wrap.deco-acc_heart .deco-layer::before { content: "\1F496"; top: 24%; left: 4%; font-size: 18cqw; animation: decoTwinkle 2s ease-in-out infinite; }
.avatarWrap.deco-acc_heart .deco-layer::after, .prof-ava-wrap.deco-acc_heart .deco-layer::after { content: "\1F495"; top: 44%; left: 0; font-size: 14cqw; animation: decoTwinkle 2s ease-in-out 1s infinite; }
.avatarWrap.deco-acc_flower .deco-layer::before, .prof-ava-wrap.deco-acc_flower .deco-layer::before { content: "\1F337"; top: 6%; left: 8%; font-size: 24cqw; rotate: -10deg; }
.avatarWrap.deco-acc_balloon .deco-layer::before, .prof-ava-wrap.deco-acc_balloon .deco-layer::before { content: "\1F388"; top: -20%; right: -8%; font-size: 38cqw; animation: decoFloat 5s ease-in-out infinite; }
.avatarWrap.deco-acc_balloon .deco-layer::after, .prof-ava-wrap.deco-acc_balloon .deco-layer::after { content: "\1F388"; top: -10%; right: -18%; font-size: 26cqw; animation: decoFloat 5s ease-in-out 2s infinite; }
.avatarWrap.deco-acc_coffee .deco-layer::before, .prof-ava-wrap.deco-acc_coffee .deco-layer::before { content: "\2615\FE0F"; left: -6%; bottom: -8%; font-size: 30cqw; }
/* Legacy gap-fill: Panda Pal never had a rule — now a chill corner buddy. */
.avatarWrap.deco-pandapal .deco-layer::before, .prof-ava-wrap.deco-pandapal .deco-layer::before { content: "\1F43C"; right: -4%; bottom: -6%; font-size: 32cqw; animation: decoBob 3.5s ease-in-out infinite; }
/* EMOTE decos: animated feeling pops around the avatar */
@keyframes decoDrip { 0% { margin-top: -6%; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 12%; opacity: 0; } }
@keyframes decoBounce { 0%, 100% { margin-top: 0; } 50% { margin-top: -10%; } }
@keyframes decoShake { 0%, 100% { translate: -50% 0; } 25% { translate: calc(-50% - 6%) 0; } 75% { translate: calc(-50% + 6%) 0; } }
@keyframes decoRise { 0% { margin-top: 0; opacity: 0; } 25% { opacity: 1; } 100% { margin-top: -16%; opacity: 0; } }
@keyframes decoWiggle { 0%, 100% { rotate: -10deg; } 50% { rotate: 10deg; } }
.avatarWrap.deco-emote_anger .deco-layer::before, .prof-ava-wrap.deco-emote_anger .deco-layer::before { content: "\1F4A2"; top: -4%; right: -2%; font-size: 30cqw; animation: decoTwinkle 1s ease-in-out infinite; }
.avatarWrap.deco-emote_sweat .deco-layer::before, .prof-ava-wrap.deco-emote_sweat .deco-layer::before { content: "\1F4A6"; top: 2%; right: 8%; font-size: 24cqw; animation: decoDrip 2s ease-in infinite; }
.avatarWrap.deco-emote_joy .deco-layer::before, .prof-ava-wrap.deco-emote_joy .deco-layer::before { content: "\1F602"; left: -2%; bottom: -4%; font-size: 30cqw; animation: decoBounce 1.6s ease-in-out infinite; }
.avatarWrap.deco-emote_love .deco-layer::before, .prof-ava-wrap.deco-emote_love .deco-layer::before { content: "\1F60D"; left: -4%; top: 34%; font-size: 26cqw; animation: decoTwinkle 2s ease-in-out 1s infinite; }
.avatarWrap.deco-emote_sad .deco-layer::before, .prof-ava-wrap.deco-emote_sad .deco-layer::before { content: "\1F62D"; right: 2%; bottom: -2%; font-size: 26cqw; animation: decoDrip 2.4s ease-in 1s infinite; }
.avatarWrap.deco-emote_shock .deco-layer::before, .prof-ava-wrap.deco-emote_shock .deco-layer::before { content: "\1F631"; top: -10%; left: 50%; translate: -50% 0; font-size: 34cqw; animation: decoShake .5s linear infinite; }
.avatarWrap.deco-emote_sleep .deco-layer::before, .prof-ava-wrap.deco-emote_sleep .deco-layer::before { content: "\1F4A4"; top: -14%; right: 8%; font-size: 26cqw; animation: decoRise 3s ease-out infinite; }
.avatarWrap.deco-emote_cool .deco-layer::before, .prof-ava-wrap.deco-emote_cool .deco-layer::before { content: "\1F60E"; left: 0; bottom: -6%; font-size: 32cqw; animation: decoBob 3s ease-in-out infinite; }
.avatarWrap.deco-emote_party .deco-layer::before, .prof-ava-wrap.deco-emote_party .deco-layer::before { content: "\1F973"; top: -8%; left: -4%; font-size: 32cqw; animation: decoWiggle 1.2s ease-in-out infinite; }
.avatarWrap.deco-emote_devil .deco-layer::before, .prof-ava-wrap.deco-emote_devil .deco-layer::before { content: "\1F608"; top: 6%; left: -6%; font-size: 28cqw; animation: decoTwinkle 1.6s ease-in-out .5s infinite; }
/* EMOTE decos wave 2 */
.avatarWrap.deco-emote_think .deco-layer::before, .prof-ava-wrap.deco-emote_think .deco-layer::before { content: "\1F914"; top: 6%; right: -4%; font-size: 28cqw; animation: decoBob 3s ease-in-out infinite; }
.avatarWrap.deco-emote_rage .deco-layer::before, .prof-ava-wrap.deco-emote_rage .deco-layer::before { content: "\1F92C"; top: -8%; left: 50%; translate: -50% 0; font-size: 32cqw; animation: decoShake .4s linear infinite; }
.avatarWrap.deco-emote_clap .deco-layer::before, .prof-ava-wrap.deco-emote_clap .deco-layer::before { content: "\1F44F"; left: 0; bottom: -6%; font-size: 30cqw; animation: decoBounce 1.4s ease-in-out infinite; }
.avatarWrap.deco-emote_fire .deco-layer::before, .prof-ava-wrap.deco-emote_fire .deco-layer::before { content: "\1F525"; top: -10%; left: -2%; font-size: 30cqw; animation: decoTwinkle 1.2s ease-in-out infinite; }
.avatarWrap.deco-emote_ghost .deco-layer::before, .prof-ava-wrap.deco-emote_ghost .deco-layer::before { content: "\1F47B"; right: -6%; top: 36%; font-size: 26cqw; animation: decoFloat 4s ease-in-out infinite; }
.avatarWrap.deco-emote_100 .deco-layer::before, .prof-ava-wrap.deco-emote_100 .deco-layer::before { content: "\1F4AF"; left: -6%; top: 8%; font-size: 24cqw; animation: decoTwinkle 2s ease-in-out 1s infinite; }
#prof-dot { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; border: 5px solid var(--panel-solid); background: #80848e; z-index: 3; }
#prof-dot.st-online { background: #57F287; animation: dotPulse 2.4s ease-out infinite; }
#prof-dot.st-idle { background: #FEE75C; }
#prof-dot.st-dnd { background: #ED4245; }
#prof-dot.st-offline { background: #80848e; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgb(87 242 135 / .55); } 70% { box-shadow: 0 0 0 9px rgb(87 242 135 / 0); } 100% { box-shadow: 0 0 0 0 rgb(87 242 135 / 0); } }
/* animated conic ring for users with animated perks */
.prof-ava-wrap.fx-ring::before { content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(from var(--ring-a, 0deg), #5865F2, #EB459E, #FEE75C, #57F287, #5865F2);
  animation: spinRing 4s linear infinite; z-index: 0; }
.prof-ava-wrap.fx-ring #prof-avatar { position: relative; z-index: 1; }
@property --ring-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinRing { to { --ring-a: 360deg; } }
/* shimmering name when a glow is equipped */
#prof-name.fx-shimmer { background: linear-gradient(110deg, currentColor 30%, #fff 50%, currentColor 70%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; animation: nameShimmer 3.2s linear infinite; }
@keyframes nameShimmer { to { background-position: -220% 0; } }
/* bordered section cards with staggered entrance */
.prof-card { background: rgb(127 140 180 / .07); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 10px 0;
  animation: riseIn .35s cubic-bezier(.2, 1.1, .3, 1) backwards; }
.prof-card:nth-of-type(2) { animation-delay: .05s; } .prof-card:nth-of-type(3) { animation-delay: .1s; }
.prof-card:nth-of-type(4) { animation-delay: .15s; } .prof-card:nth-of-type(5) { animation-delay: .2s; }
.prof-card h5 { font-size: .66em; font-weight: 800; letter-spacing: .12em; color: var(--muted); margin: 0 0 6px; }
.prof-card > div { font-size: .9em; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } }
/* badge box + shine on hover */
#prof-badges { background: rgb(127 140 180 / .07); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; max-width: 55%; justify-content: flex-end; }
.badge { transition: transform .15s; position: relative; overflow: hidden; }
.badge:hover { transform: translateY(-2px) scale(1.08); }
.badge:hover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); animation: badgeShine .6s ease; }
@keyframes badgeShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* role chips */
.role-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: rgb(127 140 180 / .08);
  border-radius: 999px; padding: 3px 10px 3px 7px; font-size: .78em; font-weight: 600; margin: 2px 4px 2px 0; }
.role-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
/* copy-tag button */
.prof-copy { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .75em;
  padding: 3px 9px; cursor: pointer; margin: 2px 0 4px; transition: box-shadow .15s, color .15s; }
.prof-copy:hover { color: #fff; box-shadow: 0 0 12px rgb(124 138 255 / .5); }
/* profile plate banner spots */
#prof-plate-top:empty, #prof-plate-bottom:empty { display: none; }
#prof-plate-top .plate, #prof-plate-bottom .plate { display: block; text-align: center; font-size: 1.1em; padding: 8px 10px; margin: 0 0 10px; }
/* avatar shape picker + cropper */
.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 6px 0; }
.shape-pick { background: rgb(127 140 180 / .06); border: 1px solid var(--line); border-radius: 12px; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: var(--text); }
.shape-pick small { font-size: .62em; color: var(--muted); }
.shape-pick:hover { border-color: var(--accent); transform: translateY(-2px); }
.shape-pick.sel { border-color: gold; box-shadow: 0 0 12px rgb(255 215 0 / .35); }
.shape-pick .avatar { pointer-events: none; }
#crop-view { width: min(320px, 80vw); margin: 10px auto; overflow: hidden; position: relative; background: #000; touch-action: none; cursor: grab; }
#crop-img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* slow zoom for custom image banners */
.banner-zoom { animation: kbZoom 18s ease-in-out infinite alternate !important; }
@keyframes kbZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
/* action buttons glow */
.prof-actions button:hover { box-shadow: 0 0 14px rgb(124 138 255 / .45); }
/* Art Studio: sticker badges, profile backgrounds, nameplate art */
.mbadge-img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; vertical-align: -5px; }
.badge-stk img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; vertical-align: -5px; margin-right: 2px; }
.stk-thumb { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; vertical-align: middle; border: 1px solid var(--line); }
.stk-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: .85em; }
.stk-row button { margin-left: auto; }
.plate-art { background-size: cover; background-position: center; border-radius: 8px; padding: 2px 12px; border: 1px solid rgb(255 255 255 / .25); animation: plateSheen 5s ease-in-out infinite alternate; }
@keyframes plateSheen { from { filter: brightness(.92) saturate(1); } to { filter: brightness(1.1) saturate(1.25); } }
.prof-body { transition: background .3s; }
/* shop */
.shop-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.shop-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-tabs .active { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border-color: transparent; }
#shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 46vh; overflow: auto; padding: 2px; }
.perk-card { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgb(127 140 180 / .06); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.perk-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 34px rgb(0 0 0 / .45), 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent); }
.perk-card.owned { border-color: color-mix(in oklch, var(--accent3) 55%, transparent); }
/* seasonal collectibles */
.season-tag { display: inline-block; font-size: .72em; font-weight: 700; color: #fbbf24; background: rgb(251 191 36 / .12); border: 1px solid rgb(251 191 36 / .4); border-radius: 8px; padding: 2px 8px; margin-top: 4px; }
/* stacked-count tag on shop cards */
.stack-tag { display: inline-block; font-size: .72em; font-weight: 700; color: #7dd3fc; background: rgb(125 211 252 / .12); border: 1px solid rgb(125 211 252 / .4); border-radius: 8px; padding: 2px 8px; margin-top: 4px; }
.perk-card.retired { opacity: .55; }
.perk-card .perk-art { height: 64px; border-radius: 12px; margin-bottom: 8px; display: grid; place-items: center; font-size: 30px; }
.perk-card b { font-size: .92em; } .perk-card small { color: var(--muted); display: block; min-height: 2.4em; font-size: .78em; }
.perk-card .price { font-weight: 800; color: gold; margin: 6px 0; }
.perk-card .owned-tag { font-weight: 800; color: var(--accent3); margin: 6px 0; }
.perk-card button { width: 100%; margin-top: 4px; }
.perk-card.equipped::before { content: "EQUIPPED"; position: absolute; top: 10px; right: -30px; rotate: 35deg; background: var(--accent3); color: #04140a; font-size: .62em; font-weight: 800; padding: 2px 32px; }
#shop-history { margin-top: 10px; font-size: .78em; color: var(--muted); max-height: 90px; overflow: auto; }
/* gif shop */
#gifshop-cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
#gifshop-cats .active { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border-color: transparent; }
#gif-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 44vh; overflow: auto; }
#gif-grid2 img { width: 100%; border-radius: 12px; cursor: pointer; border: 1px solid var(--line); transition: transform .13s; aspect-ratio: 1; object-fit: cover; background: #000; }
#gif-grid2 img:hover { transform: scale(1.05); box-shadow: 0 10px 26px rgb(0 0 0 / .5); }
.tenor-box { margin-top: 10px; color: var(--muted); font-size: .85em; }
#media-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#media-tabs .active { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border-color: transparent; }
#ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 40vh; overflow: auto; margin-top: 8px; }
#ai-grid img { width: 100%; border-radius: 14px; cursor: pointer; border: 1px solid gold; transition: transform .13s; aspect-ratio: 1; object-fit: cover; background: #000; box-shadow: 0 8px 24px rgb(0 0 0 / .5); }
#ai-grid img:hover { transform: scale(1.05); box-shadow: 0 12px 30px rgb(255 215 0 / .25); }
#ai-status { margin-top: 8px; min-height: 1.2em; }
.md-img { max-width: min(420px, 100%); max-height: 340px; border-radius: 12px; border: 1px solid var(--line); margin-top: 6px; display: block; cursor: zoom-in; background: #000; }
.md-img:hover { box-shadow: 0 10px 28px rgb(0 0 0 / .5); }
/* Discord-style APP badge for bots */
.app-tag { font-size: .62em; font-weight: 800; letter-spacing: .04em; background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border-radius: 5px; padding: 1px 5px; vertical-align: 2px; white-space: nowrap; }
/* context menu headers + disabled info rows */
.ctx-header { font-size: .66em; font-weight: 800; letter-spacing: .1em; color: var(--muted); padding: 8px 11px 3px; }
.ctx-item.ctx-disabled { opacity: .75; cursor: default; }
.ctx-item.ctx-disabled:hover { background: none; color: var(--text); transform: none; }
/* animated profile banners */
.anim-banner { background-size: 220% 220% !important; animation: bannerFlow 4.5s ease-in-out infinite alternate, bannerHue 9s linear infinite; }
@keyframes bannerFlow { from { background-position: 0% 20%; } 50% { background-position: 100% 60%; } to { background-position: 20% 100%; } }
@keyframes bannerHue { to { filter: hue-rotate(360deg); } }
/* holographic profile card */
.profile-box.holo .box, .profile-box.holo { position: relative; overflow: hidden; }
.profile-box.holo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .14) 45%, rgb(124 138 255 / .18) 50%, rgb(255 255 255 / .14) 55%, transparent 70%);
  background-size: 280% 280%; animation: holoSweep 3.6s ease-in-out infinite; }
@keyframes holoSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
/* snowfall variant */
#fx-overlay.snow { background-image: radial-gradient(2px 2px at 20% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 30%, #dff3ff, transparent), radial-gradient(2.5px 2.5px at 80% 70%, #fff, transparent), radial-gradient(1px 1px at 40% 85%, #eef, transparent); background-size: 300px 300px, 420px 420px, 360px 360px, 500px 500px; animation: snowFall 7s linear infinite; opacity: .9; }
@keyframes snowFall { to { background-position: 60px 300px, -80px 420px, 120px 360px, -60px 500px; } }
/* ===== screen FX engine layers ===== */
.fxlayer { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .9; }
@keyframes fxFall { to { background-position: 0 300px, 0 420px; } }
@keyframes fxFallFast { to { background-position: 0 220px, 0 260px; } }
@keyframes fxRise { to { background-position: 0 -240px, 0 -340px; } }
@keyframes fxDrift { to { background-position: 380px 190px, -460px 230px; } }
@keyframes fxTwinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
/* ===== extra critter frames ===== */
.avatar.frame-dragon { box-shadow: 0 0 0 2px #ff4d00, 0 0 14px #ff4d00; }
.avatar.frame-dragon::before { content: "🐲"; font-size: 13px; animation: spin 6s linear infinite; }
.avatar.frame-dragon::after { content: "🦖"; font-size: 11px; animation: spinRev 8s linear infinite; }
.avatar.frame-cat { box-shadow: 0 0 0 2px #ffb6c1, 0 0 14px #ff8fc7; }
.avatar.frame-cat::before { content: "🐱"; font-size: 13px; animation: spin 5s linear infinite; }
.avatar.frame-cat::after { content: "🐾"; font-size: 11px; animation: spinRev 7s linear infinite; }
.avatar.frame-dog { box-shadow: 0 0 0 2px #d2a679, 0 0 14px #d2a679; }
.avatar.frame-dog::before { content: "🐶"; font-size: 13px; animation: spin 5.5s linear infinite; }
.avatar.frame-dog::after { content: "🦴"; font-size: 11px; animation: spinRev 7.5s linear infinite; }
.avatar.frame-fox { box-shadow: 0 0 0 2px #ff7a3d, 0 0 14px #ff7a3d; }
.avatar.frame-fox::before { content: "🦊"; font-size: 13px; animation: spin 6.5s linear infinite; }
.avatar.frame-fox::after { content: "🍂"; font-size: 11px; animation: spinRev 8.5s linear infinite; }
.avatar.frame-panda { box-shadow: 0 0 0 2px #e8e8e8, 0 0 14px #9a9ab0; }
.avatar.frame-panda::before { content: "🐼"; font-size: 13px; animation: spin 7s linear infinite; }
.avatar.frame-panda::after { content: "🎋"; font-size: 11px; animation: spinRev 9s linear infinite; }
.avatar.frame-frog { box-shadow: 0 0 0 2px #00c98d, 0 0 14px #00c98d; }
.avatar.frame-frog::before { content: "🐸"; font-size: 13px; animation: spin 4.5s linear infinite; }
.avatar.frame-frog::after { content: "💧"; font-size: 11px; animation: spinRev 6s linear infinite; }
.avatar.frame-lion { box-shadow: 0 0 0 2px #ffb84d, 0 0 16px #b8860b; }
.avatar.frame-lion::before { content: "🦁"; font-size: 14px; animation: spin 8s linear infinite; }
.avatar.frame-lion::after { content: "👑"; font-size: 11px; animation: spinRev 10s linear infinite; }
.avatar.frame-unicorn { box-shadow: 0 0 0 2px #ff9ff3, 0 0 16px #b366ff; }
.avatar.frame-unicorn::before { content: "🦄"; font-size: 13px; animation: spin 5s linear infinite; }
.avatar.frame-unicorn::after { content: "🌈"; font-size: 11px; animation: spinRev 6.5s linear infinite; }
.avatar.frame-dragon::before, .avatar.frame-cat::before, .avatar.frame-dog::before, .avatar.frame-fox::before, .avatar.frame-panda::before, .avatar.frame-frog::before, .avatar.frame-lion::before, .avatar.frame-unicorn::before,
.avatar.frame-dragon::after, .avatar.frame-cat::after, .avatar.frame-dog::after, .avatar.frame-fox::after, .avatar.frame-panda::after, .avatar.frame-frog::after, .avatar.frame-lion::after, .avatar.frame-unicorn::after {
  position: absolute; inset: -13px; display: flex; justify-content: center; border-radius: 50%; pointer-events: none; }
/* ===== extra deco rings ===== */
.deco-comet::after { background: conic-gradient(from 0deg, transparent 60%, #fff 75%, #00e5ff 85%, transparent 95%); animation: spin 2.6s linear infinite; }
.deco-bubble::after { background: repeating-conic-gradient(from 0deg, transparent 0 24deg, rgb(155 233 255 / .9) 24deg 27deg); animation: spinRev 7s linear infinite; }
.deco-flame::after { background: conic-gradient(from 0deg, #ff3b5c, #ff7a3d, #ffd700, #ff7a3d, #ff3b5c); animation: spin 3.2s linear infinite; filter: saturate(1.5); }
.deco-wave::after { background: conic-gradient(from 0deg, transparent 20%, #00b4d8 45%, #90e0ef 55%, transparent 80%); animation: spin 4.4s linear infinite; }
.deco-leaf::after { background: repeating-conic-gradient(from 0deg, transparent 0 40deg, #00ff87 40deg 46deg, transparent 46deg 90deg, #bfff3c 90deg 94deg, transparent 94deg 140deg); animation: spin 6s linear infinite; }
.deco-crown::after { background: conic-gradient(from 0deg, #ffd700, #fff2b0, #b8860b, #ffd700); animation: spin 5s linear infinite; box-shadow: 0 0 12px gold; }
/* ===== prop decorations (buddies & hats riding the avatar) ===== */
.avatarWrap.deco-pirate::before, .avatarWrap.deco-anger::before, .avatarWrap.deco-starhalo::before, .avatarWrap.deco-horns::before, .avatarWrap.deco-catbuddy::before, .avatarWrap.deco-foxbuddy::before, .avatarWrap.deco-frogbuddy::before, .avatarWrap.deco-panda::before, .avatarWrap.deco-sprout::before, .avatarWrap.deco-strawhat::before, .avatarWrap.deco-wizard::before, .avatarWrap.deco-warrior::before,
.avatarWrap.deco-pirate::after, .avatarWrap.deco-anger::after, .avatarWrap.deco-starhalo::after, .avatarWrap.deco-horns::after, .avatarWrap.deco-catbuddy::after, .avatarWrap.deco-foxbuddy::after, .avatarWrap.deco-frogbuddy::after, .avatarWrap.deco-panda::after, .avatarWrap.deco-sprout::after, .avatarWrap.deco-strawhat::after, .avatarWrap.deco-wizard::after, .avatarWrap.deco-warrior::after {
  -webkit-mask: none; mask: none; inset: auto; position: absolute; }
.avatarWrap.deco-pirate::before { content: "🏴‍☠️"; top: -13px; left: -9px; font-size: 18px; animation: bob 3s ease-in-out infinite; }
.avatarWrap.deco-pirate::after { content: "⚓"; bottom: -9px; right: -8px; font-size: 14px; animation: bob2 3.6s ease-in-out infinite; }
.avatarWrap.deco-anger::before { content: "💢"; top: -11px; right: -9px; font-size: 16px; animation: angerPop 1.8s ease-in-out infinite; }
.avatarWrap.deco-anger::after { content: "💥"; bottom: -9px; left: -8px; font-size: 13px; animation: bob2 2.6s ease-in-out infinite; }
.avatarWrap.deco-starhalo::before { content: "🌟"; top: -12px; left: 30%; font-size: 14px; animation: twinkle 2s ease-in-out infinite alternate; }
.avatarWrap.deco-starhalo::after { content: "💫"; bottom: -8px; right: -6px; font-size: 13px; animation: spinRev 9s linear infinite; }
.avatarWrap.deco-horns::before { content: "😈"; top: -11px; left: -9px; font-size: 15px; animation: bob 4s ease-in-out infinite; }
.avatarWrap.deco-horns::after { content: "🔥"; bottom: -8px; right: -7px; font-size: 12px; animation: bob2 3s ease-in-out infinite; }
.avatarWrap.deco-catbuddy::before { content: "🐱"; top: -12px; right: -6px; font-size: 16px; animation: bob 2.8s ease-in-out infinite; }
.avatarWrap.deco-catbuddy::after { content: "🐾"; bottom: -7px; left: -6px; font-size: 12px; }
.avatarWrap.deco-foxbuddy::before { content: "🦊"; top: -12px; right: -6px; font-size: 16px; animation: bob 3.2s ease-in-out infinite; }
.avatarWrap.deco-foxbuddy::after { content: "🍂"; bottom: -7px; left: -7px; font-size: 12px; animation: spinRev 10s linear infinite; }
.avatarWrap.deco-frogbuddy::before { content: "🐸"; top: -11px; left: -8px; font-size: 15px; animation: bob 2.4s ease-in-out infinite; }
.avatarWrap.deco-frogbuddy::after { content: "💧"; bottom: -8px; right: -7px; font-size: 12px; animation: bob2 3s ease-in-out infinite; }
.avatarWrap.deco-panda::before { content: "🐼"; top: -12px; right: -7px; font-size: 17px; animation: bob 3.8s ease-in-out infinite; }
.avatarWrap.deco-panda::after { content: "🎋"; bottom: -8px; left: -7px; font-size: 13px; }
.avatarWrap.deco-sprout::before { content: "🌱"; top: -13px; left: 25%; font-size: 16px; animation: sproutSway 3.4s ease-in-out infinite; }
.avatarWrap.deco-sprout::after { content: "🍀"; bottom: -7px; right: -6px; font-size: 12px; }
.avatarWrap.deco-strawhat::before { content: "👒"; top: -14px; left: -4px; font-size: 20px; animation: bob 4.2s ease-in-out infinite; }
.avatarWrap.deco-strawhat::after { content: "🌻"; bottom: -8px; right: -7px; font-size: 13px; }
.avatarWrap.deco-wizard::before { content: "🔮"; top: -12px; right: -7px; font-size: 15px; animation: twinkle 2.4s ease-in-out infinite alternate; }
.avatarWrap.deco-wizard::after { content: "✨"; bottom: -7px; left: -6px; font-size: 12px; animation: bob2 2.8s ease-in-out infinite; }
.avatarWrap.deco-warrior::before { content: "⚔️"; top: -12px; left: -9px; font-size: 16px; animation: bob 3.6s ease-in-out infinite; }
.avatarWrap.deco-warrior::after { content: "🛡️"; bottom: -8px; right: -8px; font-size: 13px; }
#prof-avatar[class*="deco-"]::before { font-size: 30px; }
#prof-avatar[class*="deco-"]::after { font-size: 24px; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes bob2 { 50% { transform: translateY(3px); } }
@keyframes angerPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes sproutSway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
/* ===== extra nameplates ===== */
/* nameplate wave 2 — animated slides (plateSlide keyframes reused) */
.plate-cyber { background: linear-gradient(90deg, #001318, #00f0ff, #001318); background-size: 200% auto; color: #e0ffff !important; animation: plateSlide 3s linear infinite; }
.plate-blossom { background: linear-gradient(90deg, #831843, #f9a8d4, #fce7f3, #f9a8d4, #831843); background-size: 200% auto; color: #4a0e24 !important; animation: plateSlide 4s linear infinite; }
.plate-thunder { background: linear-gradient(90deg, #1e1b4b, #facc15, #7c3aed, #facc15, #1e1b4b); background-size: 200% auto; color: #fff !important; animation: plateSlide 2.5s linear infinite; }
.plate-mocha { background: linear-gradient(90deg, #3f2a1d, #a16207, #fde68a, #a16207, #3f2a1d); background-size: 200% auto; color: #2a1a0e !important; animation: plateSlide 4.5s linear infinite; }
.plate-ultraviolet { background: linear-gradient(90deg, #0b0014, #7c3aed, #d8b4fe, #7c3aed, #0b0014); background-size: 200% auto; color: #f3e8ff !important; animation: plateSlide 3.5s linear infinite; }
.plate-tidal { background: linear-gradient(90deg, #082f49, #0ea5e9, #a5f3fc, #0ea5e9, #082f49); background-size: 200% auto; color: #f0f9ff !important; animation: plateSlide 4s linear infinite; }
.plate-gold { background: linear-gradient(90deg, #3a2a00, #ffd700, #fff2b0, #ffd700, #3a2a00); background-size: 200% auto; color: #2a1f00 !important; animation: plateSlide 3.5s linear infinite; }
.plate-titan { background: linear-gradient(90deg, #1a0d00, #ff7a00, #ffd700, #fff8e0, #ffd700, #ff7a00, #1a0d00); background-size: 250% auto; color: #231000 !important; animation: plateSlide 2.5s linear infinite; }
.plate-silver { background: linear-gradient(90deg, #333, #e8e8e8, #fff, #e8e8e8, #333); background-size: 200% auto; color: #111 !important; animation: plateSlide 4s linear infinite; }
.plate-fire { background: linear-gradient(90deg, #200122, #ff3b5c, #ffd700, #ff3b5c, #200122); background-size: 200% auto; color: #fff !important; text-shadow: 0 0 10px #ff3b5c; animation: plateSlide 2.8s linear infinite; }
.plate-ice { background: linear-gradient(90deg, #04121f, #9be9ff, #dff6ff, #9be9ff, #04121f); background-size: 200% auto; color: #06283a !important; animation: plateSlide 4.5s linear infinite; }
.plate-toxic { background: linear-gradient(90deg, #0a1f00, #7fff00, #00ffa3, #7fff00, #0a1f00); background-size: 200% auto; color: #061a00 !important; text-shadow: 0 0 8px #7fff00; animation: plateSlide 3s linear infinite; }
.plate-bubble { background: linear-gradient(90deg, #ff9ff3, #ffc0da, #bff6ff, #ffc0da, #ff9ff3); background-size: 300% auto; color: #4a0a2e !important; animation: plateSlide 3.2s linear infinite; }
/* ===== extra profile effects ===== */
.profx-meteor { background-image: radial-gradient(2px 6px at 20% 5%, #fff, transparent), radial-gradient(1.5px 5px at 60% 0%, #ffd700, transparent), radial-gradient(2px 7px at 85% 10%, #fff, transparent); background-size: 200px 240px, 260px 300px, 180px 220px; animation: fallY 2.4s linear infinite; }
.profx-fireflies { background-image: radial-gradient(2px 2px at 25% 60%, #d6ff7d, transparent), radial-gradient(1.5px 1.5px at 70% 30%, #fff2b0, transparent), radial-gradient(2px 2px at 50% 80%, #d6ff7d, transparent); background-size: 300px 300px, 380px 380px, 260px 260px; animation: twinkle 2.8s ease-in-out infinite alternate; }
.profx-hearts { background-image: radial-gradient(3px 3px at 30% 90%, #ff5fa2, transparent), radial-gradient(2px 2px at 65% 95%, #ffc0da, transparent), radial-gradient(2.5px 2.5px at 80% 85%, #ff8fc7, transparent); background-size: 180px 220px, 240px 280px, 200px 240px; animation: riseY 6s linear infinite; }
.profx-lightning { background: linear-gradient(115deg, transparent 42%, rgb(255 255 200 / .55) 47%, rgb(160 200 255 / .5) 50%, transparent 55%); background-size: 300% 300%; animation: boltFlash 3.4s ease-in-out infinite; }
.profx-sakura { background-image: radial-gradient(3px 2px at 25% 5%, #ffc0da, transparent), radial-gradient(2px 3px at 60% 0%, #ff9ff3, transparent), radial-gradient(2.5px 2px at 85% 8%, #ffe3ef, transparent); background-size: 190px 230px, 250px 290px, 210px 250px; animation: fallY 5s linear infinite; }
.profx-galaxy { background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 60%, #b366ff, transparent), radial-gradient(2px 2px at 80% 20%, #00e5ff, transparent); background-size: 220px 220px, 300px 300px, 260px 260px; animation: spinSlow 12s linear infinite; }
@keyframes boltFlash { 0%, 88%, 100% { opacity: 0; } 90%, 94% { opacity: 1; } 92% { opacity: .3; } }
/* ===== profile layouts ===== */
.profile-box[class*="layout-"] { border: 1px solid var(--line); }
/* profile layouts wave 2 */
.profile-box.layout-rose { background: linear-gradient(160deg, #3b0a1e, #8f1d4e); }
.profile-box.layout-tempest { background: linear-gradient(160deg, #0a1628, #1e3a5f, #0a1628); background-size: 200% 200%; animation: layoutShift 6s ease infinite alternate; }
.profile-box.layout-mint { background: linear-gradient(160deg, #04241c, #0d7a5f); }
.profile-box.layout-eclipse { background: linear-gradient(160deg, #000000, #2b1055, #000000); background-size: 200% 200%; animation: layoutShift 10s ease infinite alternate; }
/* FluxAI chat area + blocked manager */
.ai-box { width: min(580px, 94vw); }
.ai-thread { display: flex; flex-direction: column; gap: 10px; max-height: 50dvh; overflow-y: auto; padding: 6px 2px; }
.ai-msg { background: rgb(127 140 180 / .1); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.ai-msg b { display: block; font-size: .8em; margin-bottom: 4px; }
.ai-msg.ai { border-color: var(--accent); }
#ai-img-out img { max-width: 100%; border-radius: 12px; margin-top: 8px; }
.block-list { display: flex; flex-direction: column; gap: 6px; }
.block-item { display: flex; align-items: center; gap: 8px; }
.block-item button { margin-left: auto; }
/* one-click avatar motion FX */
.avafx-spin { animation: avaSpin 6s linear infinite; }
@keyframes avaSpin { to { rotate: 1turn; } }
.avafx-pulse { animation: avaPulse 2s ease-in-out infinite; }
@keyframes avaPulse { 50% { scale: 1.12; } }
.avafx-wobble { animation: avaWobble 2.4s ease-in-out infinite; }
@keyframes avaWobble { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.avafx-bounce { animation: avaBounce 1.6s ease-in-out infinite; }
@keyframes avaBounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12%; } }
.avafx-shake { animation: avaShake .5s linear infinite; }
@keyframes avaShake { 0%, 100% { translate: 0 0; } 25% { translate: -4% 0; } 75% { translate: 4% 0; } }
.avafx-glow { animation: avaGlow 2.5s ease-in-out infinite; }
@keyframes avaGlow { 50% { filter: brightness(1.35) saturate(1.3); } }
/* grand titles (120-char flair) shimmer */
#prof-name.long-title { animation: titleShimmer 3s linear infinite; background: linear-gradient(90deg, gold, #fff2b0, gold); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; }
@keyframes titleShimmer { to { background-position: 200% center; } }
/* premium avatar motion: halo / trail / rainbow / zoom / flip / glitch */
.avafx-halo { animation: avaHalo 3s ease-in-out infinite; }
@keyframes avaHalo { 50% { box-shadow: 0 0 0 4px gold, 0 0 20px gold; } }
.avafx-trail { animation: avaTrail 2.2s ease-in-out infinite; }
@keyframes avaTrail { 50% { scale: 1.07; filter: brightness(1.25); } }
.avafx-rainbow { animation: avaRainbow 4s linear infinite; }
@keyframes avaRainbow { to { filter: hue-rotate(1turn); } }
.avafx-zoom { animation: avaZoom 7s ease-in-out infinite alternate; }
@keyframes avaZoom { from { scale: 1; } to { scale: 1.18; } }
.avafx-flip { animation: avaFlip 5s ease-in-out infinite; }
@keyframes avaFlip { 0%, 20% { rotate: y 0deg; } 50%, 80% { rotate: y 180deg; } 100% { rotate: y 360deg; } }
.avafx-glitch { animation: avaGlitch .9s steps(2) infinite; }
@keyframes avaGlitch { 20% { translate: -3% 1%; filter: hue-rotate(90deg) contrast(1.4); } 40% { translate: 3% -1%; filter: none; } 60% { translate: -2% 0; filter: hue-rotate(-60deg); } }
.ava-over { animation-duration: 1.1s !important; filter: saturate(1.25); }
/* profile song mini player */
.prof-song { margin-top: 8px; }
.prof-song audio { width: 100%; height: 34px; }
.song-title { font-size: .8em; color: var(--muted); display: block; margin-bottom: 4px; }
.song-ctrl { display: flex; gap: 6px; margin-top: 6px; }
.song-ctrl button { flex: 1; }
.song-viz { width: 100%; margin-top: 6px; border-radius: 8px; background: #0a0c18; }
/* GIF Studio */
#gif-canvas { width: 100%; border-radius: 12px; margin-top: 8px; background: #14172a; }
#gif-dl { align-self: center; }
/* empty states: never a blank panel */
#messages:empty::after { content: 'No messages yet — say hi! 👋'; display: block; text-align: center; color: var(--muted); padding: 40px 10px; }
#dm-list:empty::after { content: 'No DMs — start one with +'; display: block; color: var(--muted); font-size: .8em; padding: 10px; }
#member-list:empty::after { content: 'Nobody here yet.'; display: block; color: var(--muted); font-size: .8em; padding: 10px; }
/* accessibility: visible focus + honor reduced motion */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* native capture source picker */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; max-height: 220px; overflow-y: auto; }
.cap-src { cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 4px; text-align: center; }
.cap-src:hover { border-color: var(--accent); }
.cap-src img { width: 100%; border-radius: 6px; display: block; }
.cap-nothumb { font-size: 28px; }
.profile-box.layout-aurora { background: linear-gradient(160deg, #0a2036, #3a1c71, #0a2036); background-size: 200% 200%; animation: layoutShift 8s ease infinite alternate; }
.profile-box.layout-candy { background: linear-gradient(160deg, #3a0a2e, #7c1d4e); }
.profile-box.layout-abyss { background: linear-gradient(180deg, #020608, #06283a); box-shadow: inset 0 0 60px #00b4d8; }
.profile-box.layout-royal { background: linear-gradient(160deg, #1a0f2e, #3d2358); border-color: gold !important; }
.profile-box.layout-matrix { background: #020604; }
.profile-box.layout-matrix::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 8px, rgb(0 255 135 / .06) 8px 10px); }
.profile-box.layout-sunset { background: linear-gradient(160deg, #2b0f1e, #7c2d12); }
.profile-box.layout-mono { background: #101014; filter: saturate(.4); }
.profile-box.layout-ocean { background: linear-gradient(160deg, #04121f, #0a4a5c); }
@keyframes layoutShift { to { background-position: 100% 100%; } }
.settings-preview[class*="layout-"] { border-radius: 14px; }
.settings-preview.layout-aurora { background: linear-gradient(160deg, #0a2036, #3a1c71, #0a2036); background-size: 200% 200%; animation: layoutShift 8s ease infinite alternate; }
.settings-preview.layout-candy { background: linear-gradient(160deg, #3a0a2e, #7c1d4e); }
.settings-preview.layout-abyss { background: linear-gradient(180deg, #020608, #06283a); }
.settings-preview.layout-royal { background: linear-gradient(160deg, #1a0f2e, #3d2358); border-color: gold; }
.settings-preview.layout-matrix { background: #020604; }
.settings-preview.layout-sunset { background: linear-gradient(160deg, #2b0f1e, #7c2d12); }
.settings-preview.layout-mono { background: #101014; }
.settings-preview.layout-ocean { background: linear-gradient(160deg, #04121f, #0a4a5c); }
/* theme background layer (gradients + GIF wallpapers live here) */
#theme-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* identity menu (bottom-left, Discord-style) + clips */
#you-bar { cursor: pointer; }
#you-menu { display: flex; flex-direction: column; gap: 4px; min-width: 250px; }
#you-menu .ym-head { display: flex; gap: 10px; align-items: center; padding: 6px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#you-menu button { text-align: start; }
#you-menu .ym-label { font-size: .66em; font-weight: 800; letter-spacing: .1em; color: var(--muted); padding: 8px 4px 2px; }
#ym-status { display: flex; gap: 6px; }
#ym-status button { flex: 1; font-size: 17px; text-align: center; }
#ym-status button.on { background: linear-gradient(135deg, var(--accent), #7c3aed); }
#ym-accounts { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; }
#ym-accounts .acc { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; cursor: pointer; }
#ym-accounts .acc:hover { background: var(--hover); }
#ym-accounts .acc.cur { background: var(--active); }
#ym-accounts .acc small { color: var(--muted); }
#ym-accounts .acc-x { margin-left: auto; padding: 1px 7px; }
#clips-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
#clips-list video { width: 100%; max-height: 220px; border-radius: 12px; background: #000; }
#clips-list .clip-row { border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
/* sticker reactions — same picker, one click */
.react img.react-sticker { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
/* try-on bar, quests, inbox */
#preview-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; gap: 8px; align-items: center; background: var(--panel); backdrop-filter: blur(16px); border: var(--glass-bd); border-radius: 99px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow-2); font-size: .85em; }
.quest-bar { height: 8px; border-radius: 99px; background: rgb(127 140 180 / .2); overflow: hidden; margin: 6px 0; }
.quest-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.unread-pill { background: var(--danger); color: #fff; font-size: .7em; font-weight: 800; border-radius: 99px; padding: 1px 7px; margin-left: 6px; }
#inbox-badge { background: var(--danger); border-radius: 99px; font-size: .62em; padding: 1px 6px; margin-left: 2px; }
#quests-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; }
#inbox-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; }
/* bundle cards */
.bundle-items { font-size: .76em; color: var(--muted); line-height: 1.7; margin: 4px 0; }
.was-price { text-decoration: line-through; opacity: .55; font-weight: 400; }
.save-tag { background: var(--accent3); color: #04140a; font-size: .72em; font-weight: 800; border-radius: 6px; padding: 1px 6px; }
/* Discord-style jump pills */
#main { position: relative; }
#jump-present { position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px; z-index: 20;
  background: linear-gradient(135deg, var(--accent), #7c3aed); border: 0; border-radius: 99px; padding: 9px 18px;
  font-weight: 800; box-shadow: 0 10px 30px rgb(0 0 0 / .5); animation: pop-in .18s ease; white-space: nowrap; }
#jump-oldest { position: absolute; right: 18px; top: 64px; z-index: 20; border-radius: 99px; padding: 7px 13px;
  background: var(--panel); backdrop-filter: blur(12px); animation: pop-in .18s ease; white-space: nowrap; }
/* ===== animated avatar decorations (pure motion, no assets) ===== */
.avatarWrap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatarWrap .avatar { position: relative; }
.avatarWrap[class*="deco-"]::after, #prof-avatar[class*="deco-"]::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.avatarWrap[class*="deco-"]::after { inset: -5px; }
#prof-avatar { position: relative; }
#prof-avatar[class*="deco-"]::after { inset: -7px; }
.deco-neonspin::after { background: conic-gradient(from 0deg, transparent 5%, #00f6ff 35%, #ff5ffa 55%, transparent 75%); animation: spin 3s linear infinite; }
.deco-starburst::after { background: repeating-conic-gradient(from 0deg, #fff 0 4deg, transparent 4deg 18deg, #ffd700 18deg 20deg, transparent 20deg 38deg); animation: spinRev 5s linear infinite; opacity: .95; }
.deco-lava::after { background: conic-gradient(from 0deg, #ff3b5c, #ff7a3d, #ffd700, #ff3b5c); animation: spin 4s linear infinite; filter: saturate(1.5); }
.deco-frost::after { background: conic-gradient(from 0deg, transparent, #dff6ff 30%, #9be9ff 50%, transparent 70%); animation: spin 6s linear infinite; }
.deco-void::after { background: conic-gradient(from 0deg, #000, #7c3aed, #000); animation: voidPulse 2.4s ease-in-out infinite; }
.deco-prism::after { background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red); animation: spin 2.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes voidPulse { 50% { transform: scale(1.12); opacity: .85; } }
/* ===== animated nameplates ===== */
.plate { display: inline-block; padding: 0 10px; border-radius: 8px; font-weight: 800; line-height: 1.55; }
.plate-neon { background: linear-gradient(90deg, #003844, #00e5ff, #003844); background-size: 200% auto; color: #eaffff !important; text-shadow: 0 0 10px #00e5ff; animation: plateSlide 3s linear infinite; }
.plate-ember { background: linear-gradient(90deg, #3a0a0a, #ff7a3d, #ffd700, #ff7a3d, #3a0a0a); background-size: 200% auto; color: #fff2df !important; text-shadow: 0 0 10px #ff7a3d; animation: plateSlide 4s linear infinite; }
.plate-candy { background: linear-gradient(90deg, #ff5fa2, #7c8aff, #00e5ff, #ff5fa2); background-size: 300% auto; color: #fff !important; animation: plateSlide 3.5s linear infinite; }
.plate-abyss { background: linear-gradient(180deg, #04121f, #0a3a5c); color: #bfe9ff !important; box-shadow: inset 0 0 12px #00b4d8, 0 0 10px rgb(0 180 216 / .4); }
.plate-royal { background: linear-gradient(90deg, #2a0a4a, #7c3aed 40%, #ffd700 50%, #7c3aed 60%, #2a0a4a); background-size: 200% auto; color: #fff !important; animation: plateSlide 5s linear infinite; }
.plate-matrix { background: #020604; color: #00ff87 !important; text-shadow: 0 0 8px #00ff87; position: relative; overflow: hidden; }
.plate-matrix::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 6px, rgb(0 255 135 / .18) 6px 8px); animation: matrixScan 2s linear infinite; }
.plate-sunset { background: linear-gradient(90deg, #7c2d12, #fb923c, #fde68a, #fb923c, #7c2d12); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-ocean { background: linear-gradient(90deg, #082f49, #0284c7, #7dd3fc, #0284c7, #082f49); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-forest { background: linear-gradient(90deg, #052e16, #16a34a, #a3e635, #16a34a, #052e16); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-volcano { background: linear-gradient(90deg, #200122, #dc2f02, #ffba08, #dc2f02, #200122); background-size: 200% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-galaxy { background: linear-gradient(90deg, #0b0d2a, #4c1d95, #db2777, #4c1d95, #0b0d2a); background-size: 200% auto; color: #fff !important; animation: plateSlide 5s linear infinite; }
.plate-rainbow { background: linear-gradient(90deg, #ff5f5f, #ffb84d, #f9f871, #5fff8f, #5fc9ff, #b366ff, #ff5f5f); background-size: 300% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-pastel { background: linear-gradient(90deg, #fecdd3, #fbcfe8, #e9d5ff, #bae6fd, #fecdd3); background-size: 200% auto; color: #4a044e !important; animation: plateSlide 5s linear infinite; }
.plate-chrome { background: linear-gradient(90deg, #27272a, #a1a1aa, #fafafa, #a1a1aa, #27272a); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-copper { background: linear-gradient(90deg, #431407, #c2703d, #fdba74, #c2703d, #431407); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-bronze { background: linear-gradient(90deg, #292524, #b45309, #fcd34d, #b45309, #292524); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-neonpink { background: linear-gradient(90deg, #500f28, #ff1493, #ffc0da, #ff1493, #500f28); background-size: 200% auto; color: #fff !important; text-shadow: 0 0 10px #ff1493; animation: plateSlide 3s linear infinite; }
.plate-neongreen { background: linear-gradient(90deg, #052e16, #39ff14, #d9f99d, #39ff14, #052e16); background-size: 200% auto; color: #052e16 !important; text-shadow: 0 0 10px #39ff14; animation: plateSlide 3s linear infinite; }
.plate-shadow { background: linear-gradient(90deg, #000, #334155, #000); color: #cbd5e1 !important; }
.plate-ghost { background: linear-gradient(90deg, #f8fafc, #cbd5e1, #f8fafc); color: #475569 !important; }
.plate-honey { background: linear-gradient(90deg, #713f12, #fbbf24, #fef3c7, #fbbf24, #713f12); background-size: 200% auto; color: #451a03 !important; animation: plateSlide 4s linear infinite; }
.plate-lilac { background: linear-gradient(90deg, #4c1d95, #c4b5fd, #f5f3ff, #c4b5fd, #4c1d95); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-minty { background: linear-gradient(90deg, #00332a, #00ff87, #d1fae5, #00ff87, #00332a); background-size: 200% auto; color: #00332a !important; animation: plateSlide 4s linear infinite; }
.plate-peachy { background: linear-gradient(90deg, #7c2d12, #fcb69f, #ffecd2, #fcb69f, #7c2d12); background-size: 200% auto; color: #431407 !important; animation: plateSlide 4s linear infinite; }
.plate-skye { background: linear-gradient(90deg, #0c4a6e, #7dd3fc, #f0f9ff, #7dd3fc, #0c4a6e); background-size: 200% auto; color: #082f49 !important; animation: plateSlide 4s linear infinite; }
.plate-frosty { background: linear-gradient(90deg, #164e63, #a5f3fc, #ffffff, #a5f3fc, #164e63); background-size: 200% auto; color: #164e63 !important; animation: plateSlide 3s linear infinite; }
.plate-lava { background: linear-gradient(90deg, #450a0a, #ff4500, #ffd700, #ff4500, #450a0a); background-size: 200% auto; color: #fff !important; animation: plateSlide 2.5s linear infinite; }
.plate-wine { background: linear-gradient(90deg, #2d0606, #881337, #fda4af, #881337, #2d0606); background-size: 200% auto; color: #fff !important; animation: plateSlide 5s linear infinite; }
.plate-candyblue { background: linear-gradient(90deg, #082f49, #01cdfe, #e0f9ff, #01cdfe, #082f49); background-size: 200% auto; color: #082f49 !important; animation: plateSlide 3s linear infinite; }
.plate-candygrape { background: linear-gradient(90deg, #2e1065, #a855f7, #fae8ff, #a855f7, #2e1065); background-size: 200% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-royalsilver { background: linear-gradient(90deg, #020617, #94a3b8, #f8fafc, #94a3b8, #020617); background-size: 200% auto; color: #020617 !important; animation: plateSlide 4s linear infinite; }
.plate-royalcrimson { background: linear-gradient(90deg, #1c0202, #dc2626, #fca5a5, #dc2626, #1c0202); background-size: 200% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-matrixred { background: #0d0202; color: #ff2a2a !important; text-shadow: 0 0 8px #ff2a2a; position: relative; overflow: hidden; }
.plate-matrixred::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 6px, rgb(255 42 42 / .18) 6px 8px); animation: matrixScan 2s linear infinite; }
.plate-matrixgold { background: #0d0a02; color: #ffd700 !important; text-shadow: 0 0 8px #ffd700; position: relative; overflow: hidden; }
.plate-matrixgold::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 6px, rgb(255 215 0 / .18) 6px 8px); animation: matrixScan 2s linear infinite; }
.plate-candymix { background: linear-gradient(115deg, #ff6fd8, #01cdfe, #ff6fd8, #01cdfe, #ff6fd8); background-size: 300% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-sunsetmix { background: linear-gradient(115deg, #ff8008, #ff512f, #dd2476, #ff512f, #ff8008); background-size: 300% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-oceanmix { background: linear-gradient(115deg, #004e92, #00e5ff, #004e92, #00e5ff, #004e92); background-size: 300% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-neonmix { background: linear-gradient(115deg, #39ff14, #00e5ff, #ff00cc, #00e5ff, #39ff14); background-size: 300% auto; color: #04140a !important; animation: plateSlide 3s linear infinite; }
.plate-goldmix { background: linear-gradient(115deg, #3a2a00, #ffd700, #fff7cc, #ffd700, #3a2a00); background-size: 300% auto; color: #2a1f00 !important; animation: plateSlide 3s linear infinite; }
.plate-silvermix { background: linear-gradient(115deg, #111827, #e5e7eb, #ffffff, #e5e7eb, #111827); background-size: 300% auto; color: #111827 !important; animation: plateSlide 3s linear infinite; }
.plate-pinkmix { background: linear-gradient(115deg, #ff5fa2, #ffc0da, #7c8aff, #ffc0da, #ff5fa2); background-size: 300% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-bluemix { background: linear-gradient(115deg, #0c4a6e, #38bdf8, #e0f9ff, #38bdf8, #0c4a6e); background-size: 300% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-greenmix { background: linear-gradient(115deg, #052e16, #4ade80, #d9f99d, #4ade80, #052e16); background-size: 300% auto; color: #052e16 !important; animation: plateSlide 3s linear infinite; }
.plate-redmix { background: linear-gradient(115deg, #450a0a, #ef4444, #fecaca, #ef4444, #450a0a); background-size: 300% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-purplemix { background: linear-gradient(115deg, #2e1065, #a855f7, #f5d0fe, #a855f7, #2e1065); background-size: 300% auto; color: #fff !important; animation: plateSlide 3s linear infinite; }
.plate-rainbowmix { background: linear-gradient(115deg, #ff5f5f, #ffb84d, #f9f871, #5fff8f, #5fc9ff, #b366ff, #ff5f5f); background-size: 400% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-pastelneon { background: linear-gradient(115deg, #fecdd3, #a5f3fc, #fef9c3, #a5f3fc, #fecdd3); background-size: 300% auto; color: #334155 !important; animation: plateSlide 4s linear infinite; }
.plate-chromemix { background: linear-gradient(115deg, #09090b, #d4d4d8, #fafafa, #d4d4d8, #09090b); background-size: 300% auto; color: #09090b !important; animation: plateSlide 4s linear infinite; }
.plate-coppermix { background: linear-gradient(115deg, #431407, #fb923c, #ffedd5, #fb923c, #431407); background-size: 300% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-honeymix { background: linear-gradient(115deg, #451a03, #fbbf24, #fef3c7, #fbbf24, #451a03); background-size: 300% auto; color: #451a03 !important; animation: plateSlide 4s linear infinite; }
.plate-frostmix { background: linear-gradient(115deg, #083344, #a5f3fc, #ffffff, #a5f3fc, #083344); background-size: 300% auto; color: #083344 !important; animation: plateSlide 3s linear infinite; }
.plate-lavamix { background: linear-gradient(115deg, #1c0a00, #ff6b00, #ffe259, #ff6b00, #1c0a00); background-size: 300% auto; color: #fff !important; animation: plateSlide 2.5s linear infinite; }
.plate-winemix { background: linear-gradient(115deg, #1c0208, #be123c, #fecdd3, #be123c, #1c0208); background-size: 300% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-shadowmix { background: linear-gradient(115deg, #000, #475569, #000, #475569, #000); background-size: 300% auto; color: #e2e8f0 !important; animation: plateSlide 5s linear infinite; }
.plate-ghostmix { background: linear-gradient(115deg, #f1f5f9, #94a3b8, #f8fafc, #94a3b8, #f1f5f9); background-size: 300% auto; color: #334155 !important; animation: plateSlide 4s linear infinite; }
.plate-prismix { background: linear-gradient(115deg, #ff0080, #ff8c00, #ffee00, #0080ff, #8000ff, #ff0080); background-size: 400% auto; color: #fff !important; animation: plateSlide 4s linear infinite; }
.plate-sz-s { font-size: .8em; }
.plate-sz-l { font-size: 1.25em; }
.plate-storm { background: linear-gradient(90deg, #0f172a, #38bdf8, #e0f2fe, #38bdf8, #0f172a); background-size: 200% auto; color: #fff !important; text-shadow: 0 0 10px #38bdf8; animation: plateSlide 3s linear infinite; }
.plate-aurora { background: linear-gradient(90deg, #003833, #00e5ff, #b366ff, #00e5ff, #003833); background-size: 250% auto; color: #eafffb !important; text-shadow: 0 0 10px #00e5ff; animation: plateSlide 4s linear infinite; }
.plate-obsidian { background: linear-gradient(90deg, #000, #434343, #e8e8e8, #434343, #000); background-size: 200% auto; color: #fff !important; animation: plateSlide 5s linear infinite; }
.plate-glacier { background: linear-gradient(90deg, #082f49, #7dd3fc, #f0f9ff, #7dd3fc, #082f49); background-size: 200% auto; color: #082f49 !important; animation: plateSlide 4s linear infinite; }
.plate-rosegold { background: linear-gradient(90deg, #881337, #f9a8d4, #fde68a, #f9a8d4, #881337); background-size: 200% auto; color: #fff !important; text-shadow: 0 0 8px #f9a8d4; animation: plateSlide 3.5s linear infinite; }
.plate-midnight { background: linear-gradient(90deg, #020617, #4338ca, #0ea5e9, #4338ca, #020617); background-size: 250% auto; color: #e0e7ff !important; text-shadow: 0 0 10px #6366f1; animation: plateSlide 6s linear infinite; }
.avatar.frame-storm { box-shadow: 0 0 0 2px #38bdf8, 0 0 18px #38bdf8; }
.avatar.frame-aurora { box-shadow: 0 0 0 2px #00e5ff, 0 0 18px #b366ff; }
.avatar.frame-obsidian { box-shadow: 0 0 0 2px #e8e8e8, 0 0 14px #555; }
.avatar.frame-glacier { box-shadow: 0 0 0 2px #dff6ff, 0 0 20px #7dd3fc; }
.profx-emberstorm { background-image: radial-gradient(3px 3px at 20% 90%, #ff7a3d, transparent), radial-gradient(2px 2px at 55% 95%, #ffd700, transparent), radial-gradient(2.5px 2.5px at 80% 88%, #ff4500, transparent); background-size: 160px 200px, 220px 260px, 190px 230px; animation: riseY 3.5s linear infinite; }
.profx-snowdrift { background-image: radial-gradient(3px 3px at 15% 5%, #fff, transparent), radial-gradient(2px 2px at 55% 0%, #dff6ff, transparent), radial-gradient(2.5px 2.5px at 85% 8%, #fff, transparent); background-size: 210px 250px, 270px 310px, 190px 230px; animation: fallY 6s linear infinite; }
.profx-bloom { background-image: radial-gradient(4px 4px at 30% 60%, #ff9ff3, transparent), radial-gradient(3px 3px at 65% 40%, #c4f82a, transparent), radial-gradient(5px 5px at 80% 70%, #ff5fa2, transparent); background-size: 260px 260px, 320px 320px, 240px 240px; animation: twinkle 3s ease-in-out infinite alternate; }
.profx-tidepool { background-image: radial-gradient(60px 18px at 30% 70%, rgb(0 228 200 / .25), transparent), radial-gradient(80px 22px at 70% 60%, rgb(0 180 216 / .25), transparent); background-size: 300px 200px, 380px 240px; animation: tideShift 7s ease-in-out infinite alternate; }
/* TITAN storm: lightning forks over rising embers */
.profx-titanfx { background-image: radial-gradient(3px 3px at 25% 90%, #ffd700, transparent), radial-gradient(2px 6px at 60% 85%, #fff8e0, transparent), radial-gradient(2.5px 2.5px at 80% 92%, #ff7a00, transparent); background-size: 200px 240px, 160px 200px, 220px 260px; animation: riseY 2.8s linear infinite, boltFlash 4s ease-in-out infinite; }
/* profile effects wave 2 — Discord-rival ambience */
@keyframes profSway { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
.profx-petalstorm { background-image: radial-gradient(4px 3px at 20% 5%, #ffc0da, transparent), radial-gradient(3px 2px at 55% 0%, #ff9ff3, transparent), radial-gradient(3.5px 2.5px at 80% 8%, #ffe3ef, transparent); background-size: 200px 240px, 260px 300px, 220px 260px; animation: fallY 4s linear infinite, profSway 2.2s ease-in-out infinite alternate; }
.profx-starshower { background-image: radial-gradient(2px 2px at 20% 5%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 0%, #ffd700, transparent), radial-gradient(2px 2px at 80% 8%, #fff, transparent); background-size: 180px 220px, 240px 280px, 200px 240px; animation: fallY 2.8s linear infinite; }
.profx-bubblerise { background-image: radial-gradient(3px 3px at 30% 90%, transparent 60%, #7dd3fc 65%, transparent 75%), radial-gradient(2px 2px at 60% 95%, transparent 60%, #a5f3fc 65%, transparent 75%), radial-gradient(2.5px 2.5px at 80% 88%, transparent 60%, #38bdf8 65%, transparent 75%); background-size: 200px 240px, 260px 300px, 220px 260px; animation: riseY 5s linear infinite; }
.profx-aurorawave { background: linear-gradient(115deg, transparent 30%, rgb(124 58 237 / .35) 45%, rgb(0 229 255 / .3) 55%, transparent 70%); background-size: 300% 300%; animation: tideShift 8s ease-in-out infinite alternate; }
.profx-firefall { background-image: radial-gradient(3px 3px at 20% 5%, #ff7a3d, transparent), radial-gradient(2px 2px at 55% 0%, #ffd700, transparent), radial-gradient(2.5px 2.5px at 80% 8%, #ff4500, transparent); background-size: 170px 210px, 230px 270px, 190px 230px; animation: fallY 3s linear infinite; }
.profx-moonbeam { background: linear-gradient(105deg, transparent 40%, rgb(230 240 255 / .25) 48%, transparent 56%); background-size: 250% 250%; animation: boltFlash 6s ease-in-out infinite; }
@keyframes tideShift { from { background-position: 0 0, 0 0; } to { background-position: 120px 0, -140px 0; } }
/* wave-4 profile effects */
.profx-emberfall { background-image: radial-gradient(3px 3px at 25% 5%, #ff7a3d, transparent), radial-gradient(2px 2px at 60% 0%, #ffd700, transparent), radial-gradient(2.5px 2.5px at 85% 8%, #ff4500, transparent); background-size: 190px 230px, 250px 290px, 210px 250px; animation: fallY 4s linear infinite; }
.profx-frostfall { background-image: radial-gradient(3px 3px at 20% 5%, #dff6ff, transparent), radial-gradient(2px 2px at 65% 0%, #fff, transparent), radial-gradient(2.5px 2.5px at 85% 6%, #a5f3fc, transparent); background-size: 200px 240px, 260px 300px, 220px 260px; animation: fallY 5.5s linear infinite; }
.profx-roseshower { background-image: radial-gradient(3px 2px at 30% 5%, #ff5fa2, transparent), radial-gradient(2px 3px at 65% 0%, #ffc0da, transparent), radial-gradient(2.5px 2px at 85% 7%, #ff9ff3, transparent); background-size: 200px 240px, 260px 300px, 220px 260px; animation: fallY 6.5s linear infinite; }
.profx-goldendrift { background-image: radial-gradient(2.5px 2.5px at 30% 80%, #ffd700, transparent), radial-gradient(2px 2px at 65% 70%, #ffedb0, transparent), radial-gradient(3px 3px at 85% 75%, #fbbf24, transparent); background-size: 280px 280px, 340px 340px, 260px 260px; animation: riseY 8s linear infinite; }
.profx-violetmist { background-image: radial-gradient(4px 4px at 30% 50%, #b366ff, transparent), radial-gradient(3px 3px at 65% 45%, #8f00ff, transparent), radial-gradient(5px 5px at 85% 55%, #e3ccff, transparent); background-size: 300px 300px, 360px 360px, 280px 280px; animation: twinkle 4s ease-in-out infinite alternate; }
.profx-bluesurge { background-image: radial-gradient(3px 3px at 25% 85%, #2f7bff, transparent), radial-gradient(2px 2px at 60% 80%, #7dd3fc, transparent), radial-gradient(4px 4px at 85% 90%, #1d4ed8, transparent); background-size: 240px 240px, 300px 300px, 260px 260px; animation: riseY 5s linear infinite; }
.profx-greentide { background-image: radial-gradient(70px 20px at 30% 65%, rgb(163 230 53 / .22), transparent), radial-gradient(90px 24px at 70% 60%, rgb(22 163 74 / .22), transparent); background-size: 320px 220px, 400px 260px; animation: tideShift 8s ease-in-out infinite alternate; }
.profx-pinkbloom { background-image: radial-gradient(4px 4px at 30% 55%, #ff5fa2, transparent), radial-gradient(3px 3px at 60% 45%, #f9a8d4, transparent), radial-gradient(5px 5px at 80% 60%, #ff71ce, transparent); background-size: 260px 260px, 320px 320px, 280px 280px; animation: twinkle 3.2s ease-in-out infinite alternate; }
.profx-orangespark { background-image: radial-gradient(2px 2px at 30% 50%, #ffab00, transparent), radial-gradient(1.5px 1.5px at 60% 45%, #ffd700, transparent), radial-gradient(2.5px 2.5px at 80% 55%, #ff7a3d, transparent); background-size: 240px 240px, 300px 300px, 260px 260px; animation: twinkle 1.8s ease-in-out infinite alternate; }
.profx-tealwave { background-image: radial-gradient(3px 3px at 25% 50%, #2dd4bf, transparent), radial-gradient(2px 2px at 60% 45%, #5eead4, transparent), radial-gradient(4px 4px at 85% 55%, #0d9488, transparent); background-size: 200% 200%; animation: layoutShift 9s ease infinite alternate; }
.profx-silverrain { background-image: radial-gradient(2px 4px at 25% 5%, #e5e7eb, transparent), radial-gradient(1.5px 3px at 60% 0%, #fff, transparent), radial-gradient(2px 4px at 85% 6%, #9ca3af, transparent); background-size: 180px 220px, 240px 280px, 200px 240px; animation: fallY 3.8s linear infinite; }
.profx-crimsonrise { background-image: radial-gradient(3px 3px at 25% 90%, #ff2a2a, transparent), radial-gradient(2px 2px at 60% 85%, #ff8a8a, transparent), radial-gradient(4px 4px at 85% 92%, #991b1b, transparent); background-size: 230px 230px, 290px 290px, 250px 250px; animation: riseY 4.5s linear infinite; }
.profx-azuretwinkle { background-image: radial-gradient(2px 2px at 30% 40%, #2f7bff, transparent), radial-gradient(1.5px 1.5px at 60% 55%, #bfe0ff, transparent), radial-gradient(2.5px 2.5px at 80% 35%, #60a5fa, transparent); background-size: 260px 260px, 320px 320px, 280px 280px; animation: twinkle 2.4s ease-in-out infinite alternate; }
.profx-limelight { background-image: radial-gradient(60px 60px at 50% 50%, rgb(163 230 53 / .3), transparent); background-size: 300px 300px; animation: spinSlow 10s linear infinite; }
.profx-magentafall { background-image: radial-gradient(3px 3px at 25% 5%, #ff2fb3, transparent), radial-gradient(2px 2px at 60% 0%, #ffc2e2, transparent), radial-gradient(2.5px 2.5px at 85% 7%, #ff71ce, transparent); background-size: 200px 240px, 260px 300px, 220px 260px; animation: fallY 4.2s linear infinite; }
.profx-amberspin { background-image: radial-gradient(80px 80px at 50% 50%, rgb(255 171 0 / .22), transparent); background-size: 340px 340px; animation: spinSlow 14s linear infinite; }
.profx-roserise { background-image: radial-gradient(3px 3px at 30% 90%, #fb7185, transparent), radial-gradient(2px 2px at 65% 85%, #fecdd3, transparent), radial-gradient(4px 4px at 85% 92%, #f43f5e, transparent); background-size: 240px 240px, 300px 300px, 260px 260px; animation: riseY 7s linear infinite; }
.profx-goldfall { background-image: radial-gradient(3px 3px at 20% 5%, #ffd700, transparent), radial-gradient(2px 2px at 55% 0%, #fff2b0, transparent), radial-gradient(2.5px 2.5px at 85% 6%, #fbbf24, transparent); background-size: 210px 250px, 270px 310px, 230px 270px; animation: fallY 5s linear infinite; }
.profx-violetrise { background-image: radial-gradient(3px 3px at 25% 88%, #8f00ff, transparent), radial-gradient(2px 2px at 60% 82%, #c4b5fd, transparent), radial-gradient(4px 4px at 85% 90%, #5b21b6, transparent); background-size: 240px 240px, 300px 300px, 260px 260px; animation: riseY 6s linear infinite; }
.profx-bluebolt { background: linear-gradient(115deg, transparent 42%, rgb(47 123 255 / .5) 47%, rgb(191 224 255 / .5) 50%, transparent 55%); background-size: 300% 300%; animation: boltFlash 3s ease-in-out infinite; }
.profx-greenflash { background: linear-gradient(115deg, transparent 42%, rgb(163 230 53 / .5) 47%, rgb(220 252 231 / .5) 50%, transparent 55%); background-size: 300% 300%; animation: boltFlash 2.6s ease-in-out infinite; }
.profx-pinkspin { background-image: radial-gradient(70px 70px at 50% 50%, rgb(255 95 162 / .25), transparent); background-size: 320px 320px; animation: spinSlow 11s linear infinite; }
.profx-tealfall { background-image: radial-gradient(3px 3px at 25% 5%, #2dd4bf, transparent), radial-gradient(2px 2px at 60% 0%, #99f6e4, transparent), radial-gradient(2.5px 2.5px at 85% 6%, #0d9488, transparent); background-size: 200px 240px, 260px 300px, 220px 260px; animation: fallY 4.8s linear infinite; }
.profx-silverdrift { background-image: radial-gradient(2px 2px at 30% 70%, #e5e7eb, transparent), radial-gradient(1.5px 1.5px at 65% 60%, #fff, transparent), radial-gradient(2.5px 2.5px at 85% 75%, #9ca3af, transparent); background-size: 300px 300px, 360px 360px, 280px 280px; animation: riseY 9s linear infinite; }
.profx-emberbloom { background-image: radial-gradient(4px 4px at 30% 55%, #ff7a3d, transparent), radial-gradient(3px 3px at 60% 45%, #ffd700, transparent), radial-gradient(5px 5px at 80% 60%, #ff4500, transparent); background-size: 270px 270px, 330px 330px, 290px 290px; animation: twinkle 3.6s ease-in-out infinite alternate; }
@keyframes plateSlide { to { background-position: 200% center; } }
@keyframes matrixScan { to { transform: translateY(8px); } }
/* ===== animated profile effects ===== */
#prof-banner { position: relative; overflow: hidden; }
.profx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.profx-bubbles { background-image: radial-gradient(3px 3px at 25% 90%, rgb(255 255 255 / .8), transparent), radial-gradient(2px 2px at 60% 95%, rgb(255 255 255 / .6), transparent), radial-gradient(4px 4px at 80% 85%, rgb(155 233 255 / .8), transparent); background-size: 120px 120px, 170px 170px, 200px 200px; animation: riseY 5s linear infinite; }
.profx-emberdrift { background-image: radial-gradient(2.5px 2.5px at 30% 90%, #ffb84d, transparent), radial-gradient(2px 2px at 70% 95%, #ff7a3d, transparent), radial-gradient(3px 3px at 50% 85%, #ffd700, transparent); background-size: 140px 140px, 190px 190px, 230px 230px; animation: riseY 6s linear infinite; }
.profx-stardust { background-image: radial-gradient(1.5px 1.5px at 15% 30%, #fff, transparent), radial-gradient(1px 1px at 55% 60%, #ffe9a8, transparent), radial-gradient(2px 2px at 85% 25%, #fff, transparent), radial-gradient(1px 1px at 35% 75%, #ffb1dd, transparent); background-size: 130px 130px, 180px 180px, 150px 150px, 210px 210px; animation: twinkle 2.2s ease-in-out infinite alternate; }
.profx-pixelrain { background-image: repeating-linear-gradient(180deg, rgb(0 246 255 / .5) 0 3px, transparent 3px 12px); background-size: 26px 120px; animation: fallY 1.6s linear infinite; }
.profx-neonwaves { background: conic-gradient(from 0deg at 50% 120%, transparent 40%, rgb(0 246 255 / .35), transparent 60%, rgb(255 95 162 / .3), transparent 80%); animation: spinSlow 7s linear infinite; }
.profx-confetti { background-image: radial-gradient(3px 2px at 20% 5%, #ff5f5f, transparent), radial-gradient(2px 3px at 45% 0%, #ffd700, transparent), radial-gradient(3px 2px at 65% 8%, #00e5ff, transparent), radial-gradient(2px 2px at 85% 3%, #b366ff, transparent); background-size: 120px 160px, 170px 200px, 140px 180px, 190px 150px; animation: fallY 4s linear infinite; }
@keyframes riseY { to { background-position: 0 -120px, 0 -170px, 0 -200px; } }
@keyframes fallY { to { background-position: 0 120px, 0 200px, 0 180px, 0 150px; } }
@keyframes twinkle { to { opacity: .35; } }
@keyframes spinSlow { to { transform: rotate(360deg) scale(1.6); } }
/* server template picker */
.tpl-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: pointer; border: 1px solid var(--line); margin: 6px 0; transition: transform .12s, background .13s; }
.tpl-item:hover { background: var(--hover); transform: translateX(2px); }
.tpl-item.sel { border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: var(--active); }
.tpl-item small { color: var(--muted); }
/* mini animated stickers — emoji-sized, play inline like Discord stickers */
.md-sticker { width: 28px; height: 28px; object-fit: contain; vertical-align: -6px; display: inline-block; border-radius: 6px; }
a:has(> .md-sticker) { text-decoration: none; }
.msg .content.jumbo .md-sticker { width: 44px; height: 44px; vertical-align: -10px; }
/* avatar photos + settings studio preview */
.avatar img, #you-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
#you-avatar { overflow: hidden; }
/* 24 avatar shapes — radius family rounds, clip family cuts, portrait trio goes tall */
.ashape-circle { border-radius: 50%; }
.ashape-square { border-radius: 8px; }
.ashape-rounded { border-radius: 22%; }
.ashape-oval, .ashape-pill, .ashape-arch { aspect-ratio: 4/5 !important; width: auto !important; overflow: hidden; }
.ashape-oval { border-radius: 50%; }
.ashape-pill { border-radius: 999px; }
.ashape-arch { border-radius: 50% 50% 10px 10px / 32% 32% 10px 10px; }
.ashape-squircle { border-radius: 30%; overflow: hidden; }
.ashape-blob { border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%; overflow: hidden; }
.ashape-leaf { border-radius: 6px 50% 6px 50%; overflow: hidden; }
.ashape-teardrop { border-radius: 6px 50% 50% 50%; overflow: hidden; }
.ashape-hexagon { clip-path: polygon(25% 5%, 75% 5%, 95% 50%, 75% 95%, 25% 95%, 5% 50%); }
.ashape-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.ashape-pentagon { clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%); }
.ashape-triangle { clip-path: polygon(50% 2%, 98% 98%, 2% 98%); }
.ashape-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ashape-octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.ashape-shield { clip-path: polygon(50% 0%, 100% 15%, 100% 55%, 50% 100%, 0% 55%, 0% 15%); }
.ashape-gem { clip-path: polygon(50% 0%, 100% 30%, 75% 100%, 25% 100%, 0% 30%); }
.ashape-cross { clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%); }
.ashape-trapezoid { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
.ashape-parallelogram { clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); }
.ashape-burst { clip-path: polygon(50% 0%, 61% 12%, 76% 6%, 79% 21%, 94% 24%, 88% 38%, 100% 50%, 88% 62%, 94% 76%, 79% 79%, 76% 94%, 61% 88%, 50% 100%, 39% 88%, 24% 94%, 21% 79%, 6% 76%, 12% 62%, 0% 50%, 12% 38%, 6% 24%, 21% 21%, 24% 6%, 39% 12%); }
.ashape-flower { clip-path: polygon(50% 0%, 60% 10%, 72% 5%, 76% 18%, 90% 20%, 88% 33%, 100% 40%, 93% 52%, 100% 63%, 87% 68%, 88% 81%, 75% 80%, 71% 93%, 59% 88%, 50% 100%, 41% 88%, 29% 93%, 25% 80%, 12% 81%, 13% 68%, 0% 63%, 7% 52%, 0% 40%, 12% 33%, 10% 20%, 24% 18%, 28% 5%, 40% 10%); }
.ashape-moon { border-radius: 50%; -webkit-mask: radial-gradient(circle 42% at 66% 30%, transparent 96%, #000 100%); mask: radial-gradient(circle 42% at 66% 30%, transparent 96%, #000 100%); }
[class*="ashape-"] img { border-radius: inherit !important; }
.avatar[class*="ashape-hexagon"] .dot, .avatar[class*="ashape-diamond"] .dot, .avatar[class*="ashape-pentagon"] .dot,
.avatar[class*="ashape-triangle"] .dot, .avatar[class*="ashape-star"] .dot, .avatar[class*="ashape-octagon"] .dot,
.avatar[class*="ashape-shield"] .dot, .avatar[class*="ashape-gem"] .dot, .avatar[class*="ashape-cross"] .dot,
.avatar[class*="ashape-trapezoid"] .dot, .avatar[class*="ashape-parallelogram"] .dot, .avatar[class*="ashape-burst"] .dot,
.avatar[class*="ashape-flower"] .dot, .avatar[class*="ashape-moon"] .dot { right: 3px; bottom: 3px; }
#prof-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.settings-preview { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgb(0 0 0 / .25); }
.sprev-banner { height: 74px; }
.sprev-row { display: flex; gap: 10px; align-items: center; padding: 0 12px; margin-top: -26px; }
.sprev-row .avatar { border: 3px solid var(--panel-solid); }
.sprev-status, .sprev-bio { margin: 8px 12px; font-size: .86em; }
.sprev-status { background: rgb(127 140 180 / .1); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; }
.sprev-bio { margin-bottom: 12px; }
/* generic small modals */
.confirm-box, #picker-modal .box, #mod-modal .box, #input-modal .box { display: flex; flex-direction: column; gap: 10px; }
#picker-list { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
#picker-list .pick { display: flex; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
#picker-list .pick:hover { background: var(--hover); }
#picker-list .pick.sel { background: var(--active); border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent); }
.mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* inline editor */
.inline-edit { width: 100%; min-height: 60px; margin-top: 6px; }
.inline-row { display: flex; gap: 6px; margin-top: 6px; }
/* member name glow + badges inline */
.glow-gold { color: gold !important; text-shadow: 0 0 12px rgb(255 215 0 / .6); }
.glow-neon { color: #aef7ff !important; text-shadow: 0 0 12px rgb(0 246 255 / .7); }
.glow-rose { color: #ffc0da !important; text-shadow: 0 0 12px rgb(255 95 162 / .7); }
.mbadge { font-size: .8em; margin-inline-start: 4px; }
/* scrollbars pop */
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent2)); border: 2px solid transparent; background-clip: content-box; }
/* toast cards pop */
.toast { border-inline-start: 3px solid transparent; border-image: linear-gradient(180deg, var(--accent), var(--accent2)) 1; }
/* ===== layout/docking hardening: nothing clips, everything reflows ===== */
#app { grid-template-columns: auto minmax(0, 300px) minmax(0, 1fr) auto; overflow: hidden; }
#guild-rail, #sidebar, #main, #right { min-width: 0; min-height: 0; overflow: hidden; }
#guild-rail { overflow-y: auto; overflow-x: hidden; }
#sidebar-head, #guild-banner, #chat-head, #composer, #you-bar { flex-shrink: 0; }
#messages { overflow-x: hidden; }
/* ambient video layer sits behind chat when present */
#chanbg-video ~ #messages, #chanbg-yt ~ #messages { position: relative; z-index: 1; }
#chanbg-yt iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; aspect-ratio: 16/9; min-width: 100%; min-height: 100%; }
#chanbg-yt img { width: 100%; height: 100%; object-fit: cover; }
/* jukebox queue rows */
.juke-track { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.juke-track small { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juke-track button { padding: 1px 7px; }
/* jukebox listening bar */
#jukebox-bar { border-top: 1px solid var(--line); padding: 8px 14px; background: rgb(0 0 0 / .25); }
#jukebox-bar .juke-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#juke-player audio { width: 100%; height: 34px; }
#juke-player video, #juke-player iframe { width: 100%; max-height: 220px; border-radius: 10px; background: #000; }
#juke-queue { max-height: 120px; overflow-y: auto; margin: 4px 0; }
.msg { min-width: 0; } .msg .body { min-width: 0; }
@media (min-width: 761px) {
  #app { grid-template-columns: auto var(--side-w, 300px) minmax(0, 1fr) auto; }
  #sidebar { position: relative; }
  #app.side-hidden { grid-template-columns: auto 0px minmax(0, 1fr) auto; }
  #app.side-hidden #sidebar { overflow: hidden; border: 0; min-width: 0; }
  #app.side-hidden #sidebar > * { visibility: hidden; }
  #app.side-hidden #side-drag { display: none; }
  #side-drag { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; cursor: ew-resize; z-index: 5; border-radius: 5px; }
  #side-drag:hover, #side-drag.on { background: linear-gradient(180deg, var(--accent), #EB459E); }
}
.msg.pending { opacity: .55; }
.msg.pending::after { content: " · sending…"; font-size: .72em; color: var(--muted); }
/* send-staging studio */
#stage-strip { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0; }
#stage-strip img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 2px solid transparent; cursor: pointer; flex: none; }
#stage-strip img.sel { border-color: gold; box-shadow: 0 0 10px rgb(255 215 0 / .5); }
#stage-strip .stk-file { width: auto; max-width: 140px; height: 56px; border-radius: 10px; border: 2px solid var(--line); display: grid; place-items: center; font-size: .72em; padding: 0 8px; cursor: pointer; flex: none; color: var(--muted); }
#stage-strip .stk-file.sel { border-color: gold; color: #fff; }
#stage-main { position: relative; max-height: 42vh; display: grid; place-items: center; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
#stage-img { max-width: 100%; max-height: 42vh; display: block; }
#stage-marks { position: absolute; inset: 0; touch-action: none; }
.smark { position: absolute; transform: translate(-50%, -50%); cursor: move; user-select: none; text-shadow: 0 2px 6px #000, 0 0 2px #000; white-space: nowrap; }
.smark.sel { outline: 2px dashed gold; outline-offset: 4px; border-radius: 6px; }
#stage-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; margin: 8px 0; font-size: 24px; }
#stage-emojis.hidden { display: none; }
#stage-emojis span { cursor: pointer; text-align: center; border-radius: 8px; }
#stage-emojis span:hover { background: rgb(127 140 180 / .15); transform: scale(1.2); }
#stage-caption { width: 100%; margin: 8px 0; }
#stage-tools { flex-wrap: wrap; }
.perk-card.premium { border-color: rgb(255 215 0 / .55); box-shadow: 0 0 18px rgb(255 215 0 / .12); position: relative; }
.perk-card.premium::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 215 0 / .1) 45%, rgb(255 255 255 / .12) 50%, rgb(255 215 0 / .1) 55%, transparent 70%);
  background-size: 250% 100%; animation: premiumSheen 3.5s linear infinite; }
@keyframes premiumSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.msg .content { overflow-wrap: anywhere; word-break: break-word; }
.msg .content pre { max-width: 100%; }
#chan-topic { min-width: 0; flex-shrink: 1; }
#chat-head { overflow-x: auto; scrollbar-width: none; }
#chat-head::-webkit-scrollbar { display: none; }
#msg-input { min-width: 0; }
.modal { padding: 16px; }
.modal .box { margin: auto; max-width: calc(100vw - 32px); }
#ctx-menu { max-height: calc(100vh - 32px); overflow-y: auto; }
/* ===== Discord-style emoji/GIF picker ===== */
#emoji-pop.emoji-panel { position: fixed; z-index: 320; width: min(380px, calc(100vw - 24px)); max-height: 440px; display: flex; flex-direction: column; gap: 8px; padding: 12px; animation: pop-in .16s ease; }
.emoji-tabs { display: flex; gap: 6px; }
.emoji-tabs .active { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border-color: transparent; }
.emoji-search { width: 100%; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; overflow-y: auto; min-height: 180px; max-height: 300px; padding: 2px; }
.emoji-grid .e-btn { font-size: 24px; padding: 6px 2px; border-radius: 8px; }
.emoji-grid .e-btn:hover { background: var(--hover); transform: scale(1.2); }
.emoji-cat { grid-column: 1 / -1; font-size: .68em; font-weight: 800; letter-spacing: .1em; color: var(--muted); padding: 8px 4px 2px; }
.emoji-grid.mini-gif { grid-template-columns: repeat(3, 1fr); }
.emoji-grid.mini-gif img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); }
/* ===== new glow / frame / theme flair ===== */
.glow-emerald { color: #a9ffd6 !important; text-shadow: 0 0 12px rgb(0 255 135 / .7); }
.glow-sapphire { color: #c2d9ff !important; text-shadow: 0 0 12px rgb(77 166 255 / .7); }
.glow-violet { color: #ddc2ff !important; text-shadow: 0 0 12px rgb(179 102 255 / .75); }
.glow-crimson { color: #ffc2cc !important; text-shadow: 0 0 12px rgb(255 59 92 / .75); }
.glow-rainbow { color: transparent !important; background: linear-gradient(90deg, #ff5f5f, #ffb84d, #f9f871, #5fff8f, #5fc9ff, #b366ff, #ff5f5f); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; animation: rainbowSlide 3s linear infinite; filter: drop-shadow(0 0 6px rgb(255 255 255 / .35)); }
@keyframes rainbowSlide { to { background-position: 300% center; } }
#prof-name.glow-emerald { color: #a9ffd6; text-shadow: 0 0 16px rgb(0 255 135 / .7); }
#prof-name.glow-sapphire { color: #c2d9ff; text-shadow: 0 0 16px rgb(77 166 255 / .7); }
#prof-name.glow-violet { color: #ddc2ff; text-shadow: 0 0 16px rgb(179 102 255 / .8); }
#prof-name.glow-crimson { color: #ffc2cc; text-shadow: 0 0 16px rgb(255 59 92 / .8); }
#prof-name.glow-rainbow { color: transparent; background: linear-gradient(90deg, #ff5f5f, #ffb84d, #f9f871, #5fff8f, #5fc9ff, #b366ff, #ff5f5f); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; animation: rainbowSlide 3s linear infinite; }
.avatar.frame-diamond { box-shadow: 0 0 0 2px #dff6ff, 0 0 18px #9be9ff; }
.avatar.frame-crimson { box-shadow: 0 0 0 2px #ff3b5c, 0 0 16px #ff3b5c; }
/* unlockable app themes */
body[data-theme="neon"] { --bg0: #04070f; --bg1: #071426; --bg2: #0a2036; --bg3: #030509; --panel: rgb(8 22 40 / .78); --panel-solid: #081426; --text: #d9f6ff; --muted: #6fd7e8; --faint: #3f7d92; --line: rgb(0 246 255 / .14); --hover: rgb(0 246 255 / .08); --active: rgb(0 246 255 / .16); --accent: #00e5ff; --accent2: #7c3aed; color-scheme: dark; }
body[data-theme="sunset"] { --bg0: #160a12; --bg1: #241019; --bg2: #331724; --bg3: #10060c; --panel: rgb(40 18 32 / .78); --panel-solid: #28121f; --text: #ffe9d6; --muted: #d89a7c; --faint: #8a5f4d; --line: rgb(255 140 80 / .16); --hover: rgb(255 140 80 / .1); --active: rgb(255 140 80 / .18); --accent: #ff7a3d; --accent2: #dd2476; color-scheme: dark; }
/* sparkle screen FX */
#fx-overlay { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 68% 8%, #ffe9a8, transparent), radial-gradient(2px 2px at 84% 64%, #9be9ff, transparent), radial-gradient(1px 1px at 32% 78%, #ffb1dd, transparent), radial-gradient(1.5px 1.5px at 52% 42%, #fff, transparent);
  background-size: 260px 260px, 340px 340px, 300px 300px, 380px 380px, 420px 420px;
  animation: sparkleDrift 9s linear infinite; }
@keyframes sparkleDrift { to { background-position: 260px 130px, -340px 200px, 150px -300px, -200px -380px, 420px 210px; } }
}


/* ===== Deco motion pass: encase entrances, iron closes, buddy orbits (GIF-speed life) ===== */
@keyframes decoEncase { 0% { opacity: 0; scale: 2.1; } 55% { opacity: 1; scale: .93; } 100% { opacity: 1; scale: 1; } }
@keyframes decoIron { 0% { opacity: 0; translate: 0 -48%; } 55% { opacity: 1; translate: 0 4%; } 78% { translate: 0 -1.5%; } 100% { opacity: 1; translate: 0 0; } }
@keyframes decoOrbit { 0% { translate: 26% -22%; } 25% { translate: 30% 24%; } 50% { opacity: 1; translate: -24% 28%; } 75% { translate: -28% -24%; } 100% { translate: 26% -22%; } }
/* Universal encase: every new-convention deco (hats/masks/acc/emotes) closes in on appear. Pseudos keep their own idle. */
.avatarWrap[class*="deco-"] > .deco-layer, .prof-ava-wrap[class*="deco-"] > .deco-layer { animation: decoEncase 1.1s cubic-bezier(.2,.9,.25,1.15) 1; }
/* Iron close: the chrome dome slams down like a helmet. */
.avatarWrap.deco-mask_bot .deco-layer::before, .prof-ava-wrap.deco-mask_bot .deco-layer::before { animation: decoIron 1.4s ease-out 1; }
.avatarWrap.deco-foxbuddy::before { content: "🦊"; top:-12px;right:-6px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.prof-ava-wrap.deco-foxbuddy::before { content: "🦊"; top:-12px;right:-6px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.avatarWrap.deco-foxbuddy::after { content: "🍂"; left:-7px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, spinRev 10s linear infinite; }
.prof-ava-wrap.deco-foxbuddy::after { content: "🍂"; left:-7px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, spinRev 10s linear infinite; }
.avatarWrap.deco-frogbuddy::before { content: "🐸"; top:-11px;left:-8px; font-size: 15px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.prof-ava-wrap.deco-frogbuddy::before { content: "🐸"; top:-11px;left:-8px; font-size: 15px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.avatarWrap.deco-frogbuddy::after { content: "💧"; right:-7px;bottom:-8px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 3s ease-in-out infinite; }
.prof-ava-wrap.deco-frogbuddy::after { content: "💧"; right:-7px;bottom:-8px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 3s ease-in-out infinite; }
.avatarWrap.deco-panda::before { content: "🐼"; top:-12px;right:-7px; font-size: 17px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.prof-ava-wrap.deco-panda::before { content: "🐼"; top:-12px;right:-7px; font-size: 17px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.avatarWrap.deco-panda::after { content: "🎋"; left:-7px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.prof-ava-wrap.deco-panda::after { content: "🎋"; left:-7px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.avatarWrap.deco-sprout::before { content: "🌱"; top:-13px;left:25%; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, sproutSway 3.4s ease-in-out infinite; }
.prof-ava-wrap.deco-sprout::before { content: "🌱"; top:-13px;left:25%; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, sproutSway 3.4s ease-in-out infinite; }
.avatarWrap.deco-sprout::after { content: "🍀"; right:-6px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.prof-ava-wrap.deco-sprout::after { content: "🍀"; right:-6px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.avatarWrap.deco-strawhat::before { content: "👒"; top:-14px;left:-4px; font-size: 20px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 4.2s ease-in-out infinite; }
.prof-ava-wrap.deco-strawhat::before { content: "👒"; top:-14px;left:-4px; font-size: 20px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 4.2s ease-in-out infinite; }
.avatarWrap.deco-strawhat::after { content: "🌻"; right:-7px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.prof-ava-wrap.deco-strawhat::after { content: "🌻"; right:-7px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.avatarWrap.deco-wizard::before { content: "🔮"; top:-12px;right:-7px; font-size: 15px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, twinkle 2.4s ease-in-out infinite alternate; }
.prof-ava-wrap.deco-wizard::before { content: "🔮"; top:-12px;right:-7px; font-size: 15px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, twinkle 2.4s ease-in-out infinite alternate; }
.avatarWrap.deco-wizard::after { content: "✨"; left:-6px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 2.8s ease-in-out infinite; }
.prof-ava-wrap.deco-wizard::after { content: "✨"; left:-6px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 2.8s ease-in-out infinite; }
.avatarWrap.deco-warrior::before { content: "⚔️"; top:-12px;left:-9px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 3.6s ease-in-out infinite; }
.prof-ava-wrap.deco-warrior::before { content: "⚔️"; top:-12px;left:-9px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 3.6s ease-in-out infinite; }
.avatarWrap.deco-warrior::after { content: "🛡️"; right:-8px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.prof-ava-wrap.deco-warrior::after { content: "🛡️"; right:-8px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.avatarWrap.deco-anger::before { content: "💢"; top:-11px;right:-9px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, angerPop 1.8s ease-in-out infinite; }
.prof-ava-wrap.deco-anger::before { content: "💢"; top:-11px;right:-9px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, angerPop 1.8s ease-in-out infinite; }
.avatarWrap.deco-anger::after { content: "💥"; left:-8px;bottom:-9px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 2.6s ease-in-out infinite; }
.prof-ava-wrap.deco-anger::after { content: "💥"; left:-8px;bottom:-9px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 2.6s ease-in-out infinite; }
.avatarWrap.deco-horns::before { content: "😈"; top:-11px;left:-9px; font-size: 15px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 4s ease-in-out infinite; }
.prof-ava-wrap.deco-horns::before { content: "😈"; top:-11px;left:-9px; font-size: 15px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 4s ease-in-out infinite; }
.avatarWrap.deco-horns::after { content: "🔥"; right:-7px;bottom:-8px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 3s ease-in-out infinite; }
.prof-ava-wrap.deco-horns::after { content: "🔥"; right:-7px;bottom:-8px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 3s ease-in-out infinite; }
.avatarWrap.deco-pirate::before { content: "🏴‍☠️"; top:-13px;left:-9px; font-size: 18px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 3s ease-in-out infinite; }
.prof-ava-wrap.deco-pirate::before { content: "🏴‍☠️"; top:-13px;left:-9px; font-size: 18px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 3s ease-in-out infinite; }
.avatarWrap.deco-pirate::after { content: "⚓"; right:-8px;bottom:-9px; font-size: 14px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 3.6s ease-in-out infinite; }
.prof-ava-wrap.deco-pirate::after { content: "⚓"; right:-8px;bottom:-9px; font-size: 14px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob2 3.6s ease-in-out infinite; }
.avatarWrap.deco-starhalo::before { content: "🌟"; top:-12px;left:30%; font-size: 14px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, twinkle 2s ease-in-out infinite alternate; }
.prof-ava-wrap.deco-starhalo::before { content: "🌟"; top:-12px;left:30%; font-size: 14px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, twinkle 2s ease-in-out infinite alternate; }
.avatarWrap.deco-starhalo::after { content: "💫"; right:-6px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, spinRev 9s linear infinite; }
.prof-ava-wrap.deco-starhalo::after { content: "💫"; right:-6px;bottom:-8px; font-size: 13px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, spinRev 9s linear infinite; }
.avatarWrap.deco-catbuddy::before { content: "🐱"; top:-12px;right:-6px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.prof-ava-wrap.deco-catbuddy::before { content: "🐱"; top:-12px;right:-6px; font-size: 16px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, decoOrbit 5s ease-in-out 1s infinite; }
.avatarWrap.deco-catbuddy::after { content: "🐾"; left:-6px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }
.prof-ava-wrap.deco-catbuddy::after { content: "🐾"; left:-6px;bottom:-7px; font-size: 12px; animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1; }

/* ===== Glow line-art decos (self-drawing SVG, original art) ===== */
.avatarWrap.deco-line_cat .deco-layer::before, .prof-ava-wrap.deco-line_cat .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%3E%3CanimateTransform%20attributeName%3D%27transform%27%20type%3D%27rotate%27%20values%3D%27-5%2030%2028%3B6%2030%2028%3B-5%2030%2028%27%20keyTimes%3D%270%3B.12%3B1%27%20dur%3D%273s%27%20repeatCount%3D%27indefinite%27%2F%3E%3Cpath%20d%3D%27M28%2C36%20L21%2C11%20L41%2C25%20Z%27%20stroke%3D%27%23ff6ec7%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M72%2C36%20L79%2C11%20L59%2C25%20Z%27%20stroke%3D%27%23ff6ec7%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cpath%20d%3D%27M10%2C46%20L34%2C50%27%20stroke%3D%27%23ff6ec7%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M10%2C59%20L34%2C55%27%20stroke%3D%27%23ff6ec7%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M90%2C46%20L66%2C50%27%20stroke%3D%27%23ff6ec7%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M90%2C59%20L66%2C55%27%20stroke%3D%27%23ff6ec7%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M46%2C54%20L54%2C54%20L50%2C58%20Z%27%20stroke%3D%27%23ff6ec7%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #ff6ec7); }
.avatarWrap.deco-line_dog .deco-layer::before, .prof-ava-wrap.deco-line_dog .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M27%2C30%20Q13%2C44%2019%2C63%27%20stroke%3D%27%23ffb347%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M73%2C30%20Q87%2C44%2081%2C63%27%20stroke%3D%27%23ffb347%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M40.0%2C63.0%20a10.0%2C10.0%200%201%2C0%2020.0%2C0%20a10.0%2C10.0%200%201%2C0%20-20.0%2C0%27%20stroke%3D%27%23ffb347%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M46%2C60%20L54%2C60%20L50%2C65%20Z%27%20stroke%3D%27%23ffb347%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #ffb347); }
.avatarWrap.deco-line_bunny .deco-layer::before, .prof-ava-wrap.deco-line_bunny .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M38%2C40%20Q29%2C20%2036%2C7%20Q43%2C20%2038%2C40%20Z%27%20stroke%3D%27%23c99cff%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M62%2C40%20Q71%2C20%2064%2C7%20Q57%2C20%2062%2C40%20Z%27%20stroke%3D%27%23c99cff%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M44%2C62%20Q50%2C58%2056%2C62%27%20stroke%3D%27%23c99cff%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #c99cff); }
.avatarWrap.deco-line_frog .deco-layer::before, .prof-ava-wrap.deco-line_frog .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M25.0%2C28.0%20a9.0%2C9.0%200%201%2C0%2018.0%2C0%20a9.0%2C9.0%200%201%2C0%20-18.0%2C0%27%20stroke%3D%27%234ade80%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M57.0%2C28.0%20a9.0%2C9.0%200%201%2C0%2018.0%2C0%20a9.0%2C9.0%200%201%2C0%20-18.0%2C0%27%20stroke%3D%27%234ade80%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M30%2C62%20Q50%2C74%2070%2C62%27%20stroke%3D%27%234ade80%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #4ade80); }
.avatarWrap.deco-line_fox .deco-layer::before, .prof-ava-wrap.deco-line_fox .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M24%2C36%20L16%2C12%20L38%2C24%20Z%27%20stroke%3D%27%23fb923c%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M76%2C36%20L84%2C12%20L62%2C24%20Z%27%20stroke%3D%27%23fb923c%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M22%2C44%20L50%2C60%20L78%2C44%27%20stroke%3D%27%23fb923c%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M50%2C34%20L44%2C20%20M50%2C34%20L56%2C20%27%20stroke%3D%27%23fb923c%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #fb923c); }
.avatarWrap.deco-line_panda .deco-layer::before, .prof-ava-wrap.deco-line_panda .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19.0%2C26.0%20a9.0%2C9.0%200%201%2C0%2018.0%2C0%20a9.0%2C9.0%200%201%2C0%20-18.0%2C0%27%20stroke%3D%27%23a7f3d0%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M63.0%2C26.0%20a9.0%2C9.0%200%201%2C0%2018.0%2C0%20a9.0%2C9.0%200%201%2C0%20-18.0%2C0%27%20stroke%3D%27%23a7f3d0%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M36%2C52%20Q42%2C48%2046%2C53%20Q42%2C58%2036%2C52%20Z%27%20stroke%3D%27%23a7f3d0%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M64%2C52%20Q58%2C48%2054%2C53%20Q58%2C58%2064%2C52%20Z%27%20stroke%3D%27%23a7f3d0%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #a7f3d0); }
.avatarWrap.deco-line_tiger .deco-layer::before, .prof-ava-wrap.deco-line_tiger .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M28%2C36%20L21%2C11%20L41%2C25%20Z%27%20stroke%3D%27%23ff7847%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M72%2C36%20L79%2C11%20L59%2C25%20Z%27%20stroke%3D%27%23ff7847%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M44%2C20%20L44%2C31%20M50%2C17%20L50%2C31%20M56%2C20%20L56%2C31%27%20stroke%3D%27%23ff7847%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M10%2C50%20L34%2C52%20M90%2C50%20L66%2C52%27%20stroke%3D%27%23ff7847%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #ff7847); }
.avatarWrap.deco-line_unicorn .deco-layer::before, .prof-ava-wrap.deco-line_unicorn .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M50%2C36%20L44%2C10%20L56%2C10%20Z%27%20stroke%3D%27%23c4b5fd%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M62%2C42%20Q79%2C52%2071%2C70%27%20stroke%3D%27%23c4b5fd%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M38%2C42%20Q21%2C52%2029%2C70%27%20stroke%3D%27%23c4b5fd%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cg%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%271%3B.3%3B1%27%20dur%3D%272.2s%27%20repeatCount%3D%27indefinite%27%2F%3E%3Cpath%20d%3D%27M20%2C20%20L20%2C28%20M16%2C24%20L24%2C24%27%20stroke%3D%27%23c4b5fd%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M82%2C66%20L82%2C74%20M78%2C70%20L86%2C70%27%20stroke%3D%27%23c4b5fd%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #c4b5fd); }
.avatarWrap.deco-line_bolt .deco-layer::before, .prof-ava-wrap.deco-line_bolt .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%271%3B.25%3B1%3B.55%3B1%27%20dur%3D%271.7s%27%20repeatCount%3D%27indefinite%27%2F%3E%3Cpath%20d%3D%27M56%2C6%20L31%2C56%20L48%2C56%20L43%2C94%20L73%2C42%20L53%2C42%20Z%27%20stroke%3D%27%23fde047%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #fde047); }
.avatarWrap.deco-line_wings .deco-layer::before, .prof-ava-wrap.deco-line_wings .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M48%2C56%20Q30%2C40%2011%2C48%20Q29%2C53%2047%2C63%27%20stroke%3D%27%2367e8f9%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M52%2C56%20Q70%2C40%2089%2C48%20Q71%2C53%2053%2C63%27%20stroke%3D%27%2367e8f9%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M34%2C50%20L28%2C58%20M66%2C50%20L72%2C58%27%20stroke%3D%27%2367e8f9%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #67e8f9); }
.avatarWrap.deco-line_devil .deco-layer::before, .prof-ava-wrap.deco-line_devil .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M31%2C33%20Q23%2C15%2035%2C22%27%20stroke%3D%27%23f87171%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M69%2C33%20Q77%2C15%2065%2C22%27%20stroke%3D%27%23f87171%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M78%2C68%20Q91%2C78%2084%2C92%27%20stroke%3D%27%23f87171%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M44%2C66%20Q50%2C62%2056%2C66%27%20stroke%3D%27%23f87171%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #f87171); }
.avatarWrap.deco-line_alien .deco-layer::before, .prof-ava-wrap.deco-line_alien .deco-layer::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M24%2C72%20Q22%2C32%2050%2C27%20Q78%2C32%2076%2C72%27%20stroke%3D%27%23bef264%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M32%2C50%20Q39%2C43%2047%2C50%20Q39%2C57%2032%2C50%20Z%27%20stroke%3D%27%23bef264%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M68%2C50%20Q61%2C43%2053%2C50%20Q61%2C57%2068%2C50%20Z%27%20stroke%3D%27%23bef264%27%20stroke-dasharray%3D%27280%27%20stroke-dashoffset%3D%27280%27%3E%3Canimate%20attributeName%3D%27stroke-dashoffset%27%20values%3D%27280%3B0%27%20dur%3D%271.1s%27%20fill%3D%27freeze%27%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); display: block; position: absolute; inset: -9%; width: 118%; height: 118%; filter: drop-shadow(0 0 5px #bef264); }

/* Buddies: dramatic encase entrance, then their original idle (orbit retired). */
.avatarWrap.deco-catbuddy::before, .prof-ava-wrap.deco-catbuddy::before { animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 2.8s ease-in-out 1s infinite; }
.avatarWrap.deco-foxbuddy::before, .prof-ava-wrap.deco-foxbuddy::before { animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 3.2s ease-in-out 1s infinite; }
.avatarWrap.deco-frogbuddy::before, .prof-ava-wrap.deco-frogbuddy::before { animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 2.4s ease-in-out 1s infinite; }
.avatarWrap.deco-panda::before, .prof-ava-wrap.deco-panda::before { animation: decoEncase 1s cubic-bezier(.2,.9,.25,1.15) 1, bob 3.8s ease-in-out 1s infinite; }