/* ═══════════════════════════════════════════════════════════════
   SHOP ITEMS — visual effects for the 60+ new shop items.
   Loaded after themes.css to override defaults.
   Categories: name effects, sticky, hats, pawn skins, auras,
   chat bubbles, frames, badges, cursors, typing fx, sounds.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAME EFFECTS NOVOS ─────────────────────────────────────── */
.effect-cosmic {
    background: linear-gradient(90deg, #1a0033, #4b0082, #ff1493, #1a0033);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
    animation: cosmicFlow 5s linear infinite;
    text-shadow: 0 0 12px rgba(255, 20, 147, 0.5);
}
@keyframes cosmicFlow {
    0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; }
}
.effect-toxic {
    color: #39FF14 !important;
    text-shadow: 0 0 8px #39FF14, 0 0 16px #2d8c0f, 0 1px 0 #102e02;
    animation: toxicPulse 1.5s ease-in-out infinite;
}
@keyframes toxicPulse {
    0%,100% { text-shadow: 0 0 8px #39FF14, 0 0 16px #2d8c0f; }
    50%     { text-shadow: 0 0 14px #39FF14, 0 0 24px #39FF14, 0 0 32px #2d8c0f; }
}
.effect-blood {
    color: #c00 !important;
    text-shadow: 0 1px 0 #6b0000, 0 2px 2px #300, 0 0 8px rgba(200,0,0,0.6);
    animation: bloodDrip 3s ease-in-out infinite;
}
@keyframes bloodDrip {
    0%,100% { color: #c00; }
    50%     { color: #ff2222; }
}
.effect-bubblegum {
    background: linear-gradient(90deg, #ffb3da, #ff66c4, #ffb3da, #ffd6e8);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
    animation: bubblegumShift 4s ease infinite;
    text-shadow: 0 0 6px rgba(255,102,196,0.4);
}
@keyframes bubblegumShift {
    0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 0%; }
}

/* ── HATS ─────────────────────────────────────────────────────
   .pawn-hat.hat-X é appendado por user.js dentro do .status-skeleton.
   Cada hat é desenhado via SVG inline (no JS) pra ser consistente
   entre sistemas (não depende de font emoji).
   ──────────────────────────────────────────────────────────── */
.pawn-hat {
    position: absolute;
    top: -22px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 24px;
    pointer-events: none;
    z-index: 12;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
/* Mobile: pawn renderiza menor, hat fica longe demais — desce.
   FIX: user pediu o dobro da diminuição anterior (era -14, foi pra -10,
   agora pra -6 = grudado na cabeça). */
@media (max-width: 768px) {
    .pawn-hat {
        top: -6px;
        width: 22px; height: 18px;
    }
}
.pawn-hat svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
}

/* Halo animation */
.pawn-hat.hat-halo {
    animation: haloFloat 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #ffe680) drop-shadow(0 0 10px #ffe680);
}
@keyframes haloFloat {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%     { transform: translateX(-50%) translateY(-2px); }
}
/* Devil glow */
.pawn-hat.hat-devil  { filter: drop-shadow(0 0 3px #ff3030); }
/* Ninja shadow */
.pawn-hat.hat-ninja  { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
/* Tiara sparkle */
.pawn-hat.hat-tiara  {
    filter: drop-shadow(0 0 4px #88ddff);
    animation: tiaraSparkle 2s ease-in-out infinite;
}
@keyframes tiaraSparkle {
    0%,100% { filter: drop-shadow(0 0 4px #88ddff); }
    50%     { filter: drop-shadow(0 0 8px #aaeeff) drop-shadow(0 0 12px #88ddff); }
}
/* Santa wave */
.pawn-hat.hat-santa  { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* ── PAWN SKINS (overridem o currentColor do .skeleton-icon mask) ── */
.status-skeleton.pawn-black   { color: #0a0a0a !important; }
.status-skeleton.pawn-gold    { color: #FFD700 !important; filter: drop-shadow(0 0 6px rgba(255,215,0,0.7)); }
.status-skeleton.pawn-silver  { color: #C0C0C0 !important; }
.status-skeleton.pawn-crystal { color: #80E0FF !important; filter: drop-shadow(0 0 4px #80E0FF); opacity: 0.9; }
.status-skeleton.pawn-fire    { color: #FF4500 !important; filter: drop-shadow(0 0 4px #FF4500) drop-shadow(0 0 8px #FF8C00); animation: pawnFireFlicker 1.2s ease-in-out infinite; }
.status-skeleton.pawn-ice     { color: #00BFFF !important; filter: drop-shadow(0 0 4px #00BFFF); }
.status-skeleton.pawn-toxic   { color: #39FF14 !important; filter: drop-shadow(0 0 4px #39FF14); }
.status-skeleton.pawn-cosmic  { color: #b088ff !important; }
.status-skeleton.pawn-cosmic::after {
    content: ''; position: absolute; inset: -4px;
    background: radial-gradient(circle, rgba(176,136,255,0.4), transparent 60%);
    border-radius: 50%; pointer-events: none;
    animation: cosmicGlow 3s ease-in-out infinite;
}
.status-skeleton.pawn-neon    { color: #FF1493 !important; filter: drop-shadow(0 0 6px #FF1493) drop-shadow(0 0 12px #FF1493); }
@keyframes pawnFireFlicker {
    0%,100% { filter: drop-shadow(0 0 4px #FF4500) drop-shadow(0 0 8px #FF8C00); }
    50%     { filter: drop-shadow(0 0 8px #FF4500) drop-shadow(0 0 16px #FF8C00); }
}
@keyframes cosmicGlow {
    0%,100% { opacity: 0.4; transform: scale(1); }
    50%     { opacity: 0.7; transform: scale(1.15); }
}

/* ── AURAS (efeitos ao redor do pawn na lista) ──────────────── */
.status-skeleton { position: relative; }
.status-skeleton.aura-active::before {
    content: ''; position: absolute; inset: -10px;
    pointer-events: none; border-radius: 50%;
    z-index: -1;
}
.status-skeleton.aura-hearts::before {
    background: radial-gradient(circle, rgba(255,105,180,0.3), transparent 70%);
    animation: auraPulse 2s ease-in-out infinite;
}
.status-skeleton.aura-hearts::after {
    content: '♥'; position: absolute; top: -6px; right: -4px;
    color: #ff69b4; font-size: 8px;
    animation: heartFloat 2s ease-in-out infinite;
}
.status-skeleton.aura-sparkle::before {
    background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%);
    animation: sparklePulse 1.5s ease-in-out infinite;
}
.status-skeleton.aura-sparkle::after {
    content: '✦'; position: absolute; top: -4px; left: -4px;
    color: #ffd; font-size: 10px;
    animation: sparkleSpin 2s linear infinite;
    text-shadow: 0 0 6px white;
}
.status-skeleton.aura-lightning::before {
    background: radial-gradient(circle, rgba(135,206,250,0.4), transparent 70%);
    animation: lightningPulse 0.6s ease-in-out infinite;
}
.status-skeleton.aura-lightning::after {
    content: '⚡'; position: absolute; top: -4px; right: -6px;
    color: #87ceeb; font-size: 10px;
    animation: lightningFlash 1s steps(2) infinite;
    text-shadow: 0 0 8px #87ceeb;
}
.status-skeleton.aura-smoke::before {
    background:
        radial-gradient(circle at 30% 70%, rgba(180,180,200,.6), transparent 35%),
        radial-gradient(circle at 70% 60%, rgba(200,200,220,.5), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(160,160,180,.55), transparent 32%);
    animation: smokeShift 3s ease-in-out infinite;
    filter: blur(2px);
}
.status-skeleton.aura-smoke::after {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    background: radial-gradient(circle, rgba(200,200,220,.9), transparent 70%);
    border-radius: 50%;
    animation: smokeRise 2.5s ease-out infinite;
    filter: blur(1.5px);
    pointer-events: none;
}
.status-skeleton.aura-snow::before {
    background: radial-gradient(circle, rgba(220,240,255,0.4), transparent 70%);
}
.status-skeleton.aura-snow::after {
    content: '❄'; position: absolute; top: -4px; left: -4px;
    color: white; font-size: 9px;
    animation: snowFall 3s linear infinite;
}
.status-skeleton.aura-petals::before {
    background: radial-gradient(circle, rgba(255,182,193,0.4), transparent 70%);
}
.status-skeleton.aura-petals::after {
    content: '🌸'; position: absolute; top: -6px; right: -6px;
    font-size: 8px;
    animation: petalFall 4s ease-in-out infinite;
}
.status-skeleton.aura-stars::before {
    background: radial-gradient(circle, rgba(255,255,150,0.3), transparent 70%);
    animation: starsPulse 2s ease-in-out infinite;
}
.status-skeleton.aura-stars::after {
    content: '★'; position: absolute; top: -4px; right: -4px;
    color: #ffd700; font-size: 9px;
    text-shadow: 0 0 6px #ffd700;
    animation: starTwinkle 1.2s ease-in-out infinite;
}
.status-skeleton.aura-fireflies::before {
    background: radial-gradient(circle, rgba(255,220,80,0.25), transparent 70%);
}
.status-skeleton.aura-fireflies::after {
    content: '·'; position: absolute; top: -2px; right: -2px;
    color: #ffd; font-size: 16px; text-shadow: 0 0 8px #ffd, 0 0 16px #ffd700;
    animation: fireflyDance 2s ease-in-out infinite;
}
.status-skeleton.aura-bubbles::before {
    background: radial-gradient(circle, rgba(150,200,255,0.4), transparent 70%);
}
.status-skeleton.aura-bubbles::after {
    content: '○'; position: absolute; top: -4px; right: -4px;
    color: #aaccff; font-size: 8px;
    animation: bubbleRise 2.5s ease-in-out infinite;
}

@keyframes auraPulse {
    0%,100% { opacity: 0.5; transform: scale(1); }
    50%     { opacity: 0.9; transform: scale(1.15); }
}
@keyframes sparklePulse {
    0%,100% { opacity: 0.4; }  50% { opacity: 0.9; }
}
@keyframes sparkleSpin {
    0%   { transform: rotate(0deg) scale(1);   opacity: 1; }
    50%  { transform: rotate(180deg) scale(0.5); opacity: 0.5; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
@keyframes lightningPulse {
    0%,100% { opacity: 0.5; }  50% { opacity: 1; }
}
@keyframes lightningFlash {
    0%,49%   { opacity: 0; }   50%,100% { opacity: 1; }
}
@keyframes smokeShift {
    0%,100% { opacity: .7; transform: translate(0, 0)    scale(1); }
    33%     { opacity: .9; transform: translate(2px,-3px) scale(1.08); }
    66%     { opacity: .8; transform: translate(-2px,-2px) scale(1.05); }
}
@keyframes smokeRise {
    0%   { opacity: .9; transform: translate(-50%, 0)   scale(.6); }
    60%  { opacity: .6; transform: translate(-30%,-10px) scale(1.2); }
    100% { opacity: 0;  transform: translate(-50%,-20px) scale(1.6); }
}
@keyframes heartFloat {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-8px); opacity: 0; }
}
@keyframes snowFall {
    0%   { transform: translateY(-4px); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}
@keyframes petalFall {
    0%   { transform: translate(0,-6px) rotate(0deg); opacity: 1; }
    100% { transform: translate(8px, 18px) rotate(180deg); opacity: 0; }
}
@keyframes starsPulse {
    0%,100% { opacity: 0.3; }  50% { opacity: 0.7; }
}
@keyframes starTwinkle {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(0.7); }
}
@keyframes fireflyDance {
    0%   { transform: translate(0,0); opacity: 1; }
    25%  { transform: translate(3px,-3px); opacity: 0.4; }
    50%  { transform: translate(-2px,2px); opacity: 1; }
    75%  { transform: translate(2px,3px); opacity: 0.5; }
    100% { transform: translate(0,0); opacity: 1; }
}
@keyframes bubbleRise {
    0%   { transform: translateY(0); opacity: 0.8; }
    100% { transform: translateY(-12px); opacity: 0; }
}

/* ── CHAT BUBBLES (estilo das mensagens) ───────────────────── */
.message.bubble-gold .message-content {
    background: linear-gradient(135deg, #ffd700, #ffaa00, #ffd700) !important;
    color: #2a1a00 !important;
    border: 1px solid #ffe680;
    box-shadow: 0 0 12px rgba(255,215,0,0.4);
}
.message.bubble-rainbow .message-content {
    background: linear-gradient(90deg, #ff0080, #ff8c00, #ffd700, #00ff7f, #00bfff, #b088ff) !important;
    background-size: 300% 100% !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    animation: rainbowBubble 4s linear infinite;
}
@keyframes rainbowBubble {
    0% { background-position: 0% 0%; } 100% { background-position: 300% 0%; }
}
.message.bubble-electric .message-content {
    background: linear-gradient(135deg, #1a1a3e, #2e1a5c) !important;
    border: 1px solid #87ceeb;
    color: #cef !important;
    box-shadow: 0 0 12px rgba(135,206,235,0.5), inset 0 0 8px rgba(135,206,235,0.2);
    animation: electricFlicker 1.2s ease-in-out infinite;
}
@keyframes electricFlicker {
    0%,100% { box-shadow: 0 0 12px rgba(135,206,235,0.5), inset 0 0 8px rgba(135,206,235,0.2); }
    50%     { box-shadow: 0 0 18px rgba(135,206,235,0.9), inset 0 0 14px rgba(135,206,235,0.4); }
}
.message.bubble-cosmic .message-content {
    background:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(1px 1px at 80% 60%, white, transparent),
        radial-gradient(2px 2px at 40% 80%, white, transparent),
        linear-gradient(135deg, #0a0033, #1a0055, #330066) !important;
    color: #e0d8ff !important;
    border: 1px solid #4b0082;
    box-shadow: 0 0 14px rgba(176,136,255,0.4);
}
.message.bubble-blood .message-content {
    background: linear-gradient(180deg, #4a0000, #2a0000) !important;
    color: #ff4444 !important;
    text-shadow: 0 0 6px #ff4444;
    border: 1px solid #800000;
    box-shadow: 0 0 10px rgba(128,0,0,0.5);
    position: relative;
}
.message.bubble-blood .message-content::after {
    content: ''; position: absolute; bottom: -4px; left: 12px;
    width: 6px; height: 8px;
    background: #800000; border-radius: 0 0 50% 50%;
}

/* ── PROFILE FRAMES (moldura no avatar) ────────────────────── */
.user-avatar.frame-epic       { border: 2px solid #b088ff; box-shadow: 0 0 8px #b088ff; }
.user-avatar.frame-legendary  {
    border: 2px solid #ff8a00;
    box-shadow: 0 0 12px #ff8a00, inset 0 0 4px #ffaa44;
    animation: legendaryGlow 2s ease-in-out infinite;
}
.user-avatar.frame-mythic     {
    border: 2px solid #ff2244;
    box-shadow: 0 0 14px #ff2244, 0 0 24px #aa0033, inset 0 0 6px #ff6688;
    animation: mythicFlame 1.4s ease-in-out infinite;
    position: relative;
    overflow: visible;
}
/* Anel conico rotativo de chamas em volta do avatar */
.user-avatar.frame-mythic::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #ff2244 0deg, #ff8855 25deg, #ffdd33 50deg, #ff5500 75deg,
        #cc0033 100deg, #ff2244 125deg, #ff8855 150deg, #ffdd33 175deg,
        #ff5500 200deg, #cc0033 225deg, #ff2244 250deg, #ff8855 275deg,
        #ffdd33 300deg, #ff5500 325deg, #ff2244 360deg
    );
    -webkit-mask: radial-gradient(transparent 55%, #000 58%, #000 100%);
            mask: radial-gradient(transparent 55%, #000 58%, #000 100%);
    animation: mythicRingSpin 3s linear infinite;
    z-index: 0;
    filter: drop-shadow(0 0 6px #ff4422);
    pointer-events: none;
}
/* Embers que pulsam ao redor — chamas radiais soltas */
.user-avatar.frame-mythic::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 110%, rgba(255,80,0,.9), transparent 18%),
        radial-gradient(circle at 30% 105%, rgba(255,140,0,.7), transparent 15%),
        radial-gradient(circle at 70% 105%, rgba(255,200,40,.8), transparent 14%),
        radial-gradient(circle at 15% 95%,  rgba(255,60,0,.6),  transparent 12%),
        radial-gradient(circle at 85% 95%,  rgba(255,100,20,.7),transparent 13%);
    animation: mythicEmber 1.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.user-avatar.frame-mythic > * { position: relative; z-index: 1; }
.user-avatar.frame-abyss      {
    border: 2px solid #000;
    box-shadow: 0 0 0 2px #1a0033, 0 0 16px rgba(176,136,255,0.6);
    background: radial-gradient(circle, transparent 40%, #000 80%);
}
@keyframes legendaryGlow {
    0%,100% { box-shadow: 0 0 12px #ff8a00, inset 0 0 4px #ffaa44; }
    50%     { box-shadow: 0 0 20px #ff8a00, 0 0 32px #ffaa44, inset 0 0 8px #ffd279; }
}
@keyframes mythicFlame {
    0%,100% { box-shadow: 0 0 14px #ff2244, 0 0 28px #aa0033, inset 0 0 6px #ff6688; }
    50%     { box-shadow: 0 0 22px #ff2244, 0 0 40px #ff6688, 0 0 56px #aa0033, inset 0 0 10px #ff8899; }
}
@keyframes mythicRingSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes mythicEmber {
    0%,100% { opacity: .7; transform: translateY(0)    scale(1); }
    50%     { opacity: 1;  transform: translateY(-2px) scale(1.08); }
}

/* ── NAME BADGES (ícones próximo ao nome) ──────────────────── */
.user-name .name-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    vertical-align: middle;
}
.user-name .name-badge.badge-pirate::before    { content: '☠'; color: #1a1a1a; }
.user-name .name-badge.badge-king::before      { content: '♔'; color: #ffd700; text-shadow: 0 0 4px #ffd700; }
.user-name .name-badge.badge-streamer::before  { content: '●'; color: #ff0000; animation: streamerBlink 1.2s ease-in-out infinite; }
.user-name .name-badge.badge-og::before        { content: 'OG'; font-weight: 900; font-size: 8px; color: #ffd700; background: #000; padding: 1px 3px; border-radius: 2px; }
.user-name .name-badge.badge-verified::before  { content: '✓'; color: #00bfff; text-shadow: 0 0 4px #00bfff; }
@keyframes streamerBlink {
    0%,100% { opacity: 1; }  50% { opacity: 0.3; }
}

/* ── CURSORS ───────────────────────────────────────────────── */
body.cursor-katana       { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2 22 L 8 16 L 16 8 L 22 2 L 18 2 L 2 18 Z' fill='%23ccc' stroke='%23333' stroke-width='1'/></svg>") 2 22, auto; }
body.cursor-wand         { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2 22 L 20 4' stroke='%23b088ff' stroke-width='3' stroke-linecap='round'/><circle cx='20' cy='4' r='3' fill='%23ffd700'/></svg>") 2 22, auto; }
body.cursor-pixel        { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='2' height='2' fill='black' x='0' y='0'/><rect width='2' height='2' fill='black' x='2' y='2'/><rect width='2' height='2' fill='black' x='4' y='4'/><rect width='2' height='2' fill='white' x='2' y='4'/><rect width='2' height='2' fill='white' x='4' y='6'/></svg>") 0 0, auto; }

/* ── TYPING FX (efeito enquanto digita) ────────────────────── */
.chat-input.typing-fire-fx     { box-shadow: 0 0 12px rgba(255,80,0,0.6), inset 0 0 4px rgba(255,80,0,0.3); }
.chat-input.typing-electric-fx { box-shadow: 0 0 12px rgba(135,206,235,0.6), inset 0 0 4px rgba(135,206,235,0.3); }
.chat-input.typing-rainbow-fx  { box-shadow: 0 0 12px rgba(255,0,128,0.5), 0 0 24px rgba(0,191,255,0.4); }

/* ── SHOP UI: tabs por categoria ───────────────────────────── */
.shop-category-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    overflow-x: auto;
}
.shop-cat-tab {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.shop-cat-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.shop-cat-tab.active {
    background: linear-gradient(135deg, #b088ff, #7e57c2);
    color: white; border-color: #b088ff;
    box-shadow: 0 0 8px rgba(176,136,255,0.5);
}

/* ═══════════════════════════════════════════════════════════════
   FIXES (rodada UI shop) — typing fx particles, badge isolation,
   smoke aura visibility (ja inline acima), mythic frame premium
   (ja inline acima). Aqui ficam as adicoes novas.
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX BADGE ISOLATION ─────────────────────────────────────────
   Color names usam background-clip:text + color:transparent. Sem
   este reset, filhos (.name-badge) herdam e o "OG" / icone do badge
   somem. Reseta no badge, depois restaura cor especifica. */
.user-name .name-badge,
.user-name .name-badge::before {
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
    text-shadow: none !important;
    animation: none !important;
}
.user-name .name-badge.badge-pirate::before    { color: #1a1a1a !important; }
.user-name .name-badge.badge-king::before      { color: #ffd700 !important; text-shadow: 0 0 4px #ffd700 !important; }
.user-name .name-badge.badge-streamer::before  { color: #ff0000 !important; animation: streamerBlink 1.2s ease-in-out infinite !important; }
.user-name .name-badge.badge-og::before        { color: #ffd700 !important; background: #000 !important; }
.user-name .name-badge.badge-verified::before  { color: #00bfff !important; text-shadow: 0 0 4px #00bfff !important; }

/* ── TYPING FX — particulas SVG sobre o input ────────────────────
   Overlay div absolute injetada por shop.js no parent do .chat-input
   (.message-input-container). 3 svgs por kind (fire/electric/rainbow),
   posicionados absolute, animados por keyframes proprios. */
.typing-fx-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}
.tfx-particle {
    position: absolute;
    width: 14px; height: 22px;
    opacity: 0;
}

/* FIRE — chamas sobem da borda inferior */
.typing-fx-fire .tfx-p1 { left: 18%; bottom: 4px; animation: tfxFireRise 1.1s ease-out forwards;       filter: drop-shadow(0 0 4px #ff7a00); }
.typing-fx-fire .tfx-p2 { left: 50%; bottom: 4px; animation: tfxFireRise 1s   ease-out .15s forwards;  filter: drop-shadow(0 0 5px #ff5500); transform: scale(.85); }
.typing-fx-fire .tfx-p3 { left: 78%; bottom: 4px; animation: tfxFireRise 1.2s ease-out .3s  forwards;  filter: drop-shadow(0 0 4px #ffaa00); transform: scale(.9); }
@keyframes tfxFireRise {
    0%   { opacity: 0; transform: translateY(0)    scale(.6) rotate(0deg); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-28px) scale(.3) rotate(8deg); }
}
.chat-input.typing-fire-fx { box-shadow: 0 0 10px rgba(255,80,0,.35), inset 0 0 4px rgba(255,80,0,.25); }

/* ELECTRIC — raios piscam laterais */
.typing-fx-electric .tfx-p1 { left:  6%; top: 30%; width: 12px; height: 20px; animation: tfxBolt .6s steps(2) infinite;        filter: drop-shadow(0 0 6px #5cb3ff) drop-shadow(0 0 12px #5cb3ff); }
.typing-fx-electric .tfx-p2 { right: 6%; left: auto; top: 25%; width: 12px; height: 20px; animation: tfxBolt .55s steps(2) .12s infinite; filter: drop-shadow(0 0 6px #87ceeb) drop-shadow(0 0 14px #87ceeb); }
@keyframes tfxBolt {
    0%,40%   { opacity: 0; transform: scale(.7) translateY(0); }
    50%,80%  { opacity: 1; transform: scale(1)  translateY(-1px); }
    100%     { opacity: 0; transform: scale(.7) translateY(0); }
}
.chat-input.typing-electric-fx { box-shadow: 0 0 12px rgba(135,206,235,.55), inset 0 0 4px rgba(135,206,235,.3); }

/* RAINBOW — sparkles flutuam, borda anima gradient */
.typing-fx-rainbow .tfx-p1 { left: 12%; top: 20%; width: 10px; height: 10px; animation: tfxSparkle 1.4s ease-in-out infinite;       filter: drop-shadow(0 0 6px #ff80c8); }
.typing-fx-rainbow .tfx-p2 { left: 50%; top: 60%; width: 8px;  height: 8px;  animation: tfxSparkle 1.2s ease-in-out .35s infinite; filter: drop-shadow(0 0 6px #80d4ff); }
.typing-fx-rainbow .tfx-p3 { left: 82%; top: 30%; width: 9px;  height: 9px;  animation: tfxSparkle 1.5s ease-in-out .7s  infinite; filter: drop-shadow(0 0 6px #ffd54d); }
@keyframes tfxSparkle {
    0%,100% { opacity: 0; transform: scale(.4) rotate(0deg); }
    50%     { opacity: 1; transform: scale(1)  rotate(180deg); }
}
.chat-input.typing-rainbow-fx {
    background: linear-gradient(90deg, rgba(255,0,128,.08), rgba(255,140,0,.08), rgba(255,215,0,.08), rgba(0,255,127,.08), rgba(0,191,255,.08), rgba(176,136,255,.08)) !important;
    background-size: 300% 100% !important;
    animation: tfxRainbowBorder 4s linear infinite;
    box-shadow: 0 0 12px rgba(255,0,128,.4), 0 0 20px rgba(0,191,255,.3);
}
@keyframes tfxRainbowBorder { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }

/* ── Profile modal: frames aplicados ao wrap do avatar ────────── */
.profile-modal-avatar.frame-mythic, .profile-avatar.frame-mythic, [class*="profile"].frame-mythic {
    border: 2px solid #ff2244 !important;
    box-shadow: 0 0 14px #ff2244, 0 0 28px #aa0033 !important;
    border-radius: 50% !important;
}
.profile-modal-avatar.frame-gold, [class*="profile"].frame-gold {
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 12px #ffd700 !important;
    border-radius: 50% !important;
}
.profile-modal-avatar.frame-neon, [class*="profile"].frame-neon {
    border: 2px solid #00e7ff !important;
    box-shadow: 0 0 12px #00e7ff !important;
    border-radius: 50% !important;
}