/* ═══════════════════════════════════════════════════════════════
   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-X é appendado por user.js dentro do .status-skeleton
   ──────────────────────────────────────────────────────────── */
.pawn-hat {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 16px;
    pointer-events: none;
    z-index: 12;
    font-size: 14px;
    display: flex; align-items: flex-end; justify-content: center;
}
.pawn-hat.hat-crown::before    { content: '👑'; font-size: 16px; }
.pawn-hat.hat-halo::before     { content: '⊙';  color: #ffe680; text-shadow: 0 0 8px #ffe680, 0 0 16px #ffe680; font-size: 18px; animation: haloFloat 3s ease-in-out infinite; }
.pawn-hat.hat-devil::before    { content: '😈'; }
.pawn-hat.hat-witch::before    { content: '🧙‍♀️'; }
.pawn-hat.hat-viking::before   { content: '⛑'; color: #8a6a3a; }
.pawn-hat.hat-ninja::before    { content: '🥷'; }
.pawn-hat.hat-samurai::before  { content: '⚔'; color: #b22222; }
.pawn-hat.hat-chef::before     { content: '🧑‍🍳'; }
.pawn-hat.hat-cap::before      { content: '🧢'; }
.pawn-hat.hat-tiara::before    { content: '💎'; }
.pawn-hat.hat-santa::before    { content: '🎅'; }
@keyframes haloFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}

/* ── PAWN SKINS (cores no SVG do bonequinho) ────────────────── */
.status-skeleton.pawn-black svg path,
.status-skeleton.pawn-black svg rect,
.status-skeleton.pawn-black svg circle { fill: #0a0a0a !important; }
.status-skeleton.pawn-gold svg path,
.status-skeleton.pawn-gold svg rect,
.status-skeleton.pawn-gold svg circle { fill: #FFD700 !important; filter: drop-shadow(0 0 6px rgba(255,215,0,0.7)); }
.status-skeleton.pawn-silver svg path,
.status-skeleton.pawn-silver svg rect,
.status-skeleton.pawn-silver svg circle { fill: #C0C0C0 !important; }
.status-skeleton.pawn-crystal svg path,
.status-skeleton.pawn-crystal svg rect,
.status-skeleton.pawn-crystal svg circle { fill: #80E0FF !important; opacity: 0.85; filter: drop-shadow(0 0 4px #80E0FF); }
.status-skeleton.pawn-fire svg path,
.status-skeleton.pawn-fire svg rect,
.status-skeleton.pawn-fire svg circle { fill: #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 svg path,
.status-skeleton.pawn-ice svg rect,
.status-skeleton.pawn-ice svg circle { fill: #00BFFF !important; filter: drop-shadow(0 0 4px #00BFFF); }
.status-skeleton.pawn-toxic svg path,
.status-skeleton.pawn-toxic svg rect,
.status-skeleton.pawn-toxic svg circle { fill: #39FF14 !important; filter: drop-shadow(0 0 4px #39FF14); }
.status-skeleton.pawn-cosmic svg path,
.status-skeleton.pawn-cosmic svg rect,
.status-skeleton.pawn-cosmic svg circle {
    fill: url(#cosmicGradient) !important;
}
.status-skeleton.pawn-cosmic { position: relative; }
.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 svg path,
.status-skeleton.pawn-neon svg rect,
.status-skeleton.pawn-neon svg circle { fill: #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, rgba(80,80,80,0.5), transparent 70%);
    animation: smokeShift 3s ease-in-out infinite;
}
.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: 0.4; transform: translate(0, 0) scale(1); }
    50%     { opacity: 0.7; transform: translate(2px, -2px) scale(1.1); }
}
@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) ───────────────────── */
.chat-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);
}
.chat-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%; }
}
.chat-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); }
}
.chat-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);
}
.chat-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;
}
.chat-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.5s ease-in-out infinite;
}
.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 24px #aa0033; }
    50%     { box-shadow: 0 0 20px #ff2244, 0 0 36px #ff6688, 0 0 48px #aa0033; }
}

/* ── 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);
}