/* ============================================================
   STORE COSMETICS — unified premium renderer
   Bridges the store catalog (backgrounds / borders / chat / UI
   themes) to the actual profile + chat rendering so equipped
   items show up everywhere. Class naming:
     ogbg-<id>  -> .profile-bg-effect / .user-profile-bg-effect
     ogbd-<id>  -> .profile-border-effect
   ============================================================ */

/* -------------------- shared keyframes -------------------- */
@keyframes ogDrift      { 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-3%,-3%,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes ogSpin       { to { transform: rotate(360deg); } }
@keyframes ogPulseGlow  { 0%,100%{opacity:.85;filter:blur(14px) brightness(1)} 50%{opacity:1;filter:blur(18px) brightness(1.3)} }
@keyframes ogHue        { to { filter: hue-rotate(360deg); } }
@keyframes ogScan       { 0%{background-position:0 0} 100%{background-position:0 26px} }
@keyframes ogFloatY     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8%)} }
@keyframes ogTwinkle    { 0%,100%{opacity:.35} 50%{opacity:1} }
@keyframes ogShimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
/* Soft glow that does NOT blur the fill (blur turned backgrounds to mush) */
@keyframes ogGlowSoft   { 0%,100%{filter:brightness(1) saturate(1.05)} 50%{filter:brightness(1.18) saturate(1.25)} }

/* ============================================================
   PROFILE BACKGROUNDS  (.profile-bg-effect.ogbg-*)
   These also apply to other-user cards (.user-profile-bg-effect)
   ============================================================ */
.profile-bg-effect[class*="ogbg-"],
.user-profile-bg-effect[class*="ogbg-"] {
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden;
}

/* --- Particles (free) --- */
.ogbg-particles {
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(2px 2px at 70% 60%, rgba(140,170,255,.9), transparent 60%),
        radial-gradient(2px 2px at 45% 80%, rgba(180,140,255,.9), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(102,126,234,.45), rgba(118,75,162,.35) 60%, transparent 75%);
    background-size: 120px 120px, 160px 160px, 140px 140px, 100% 100%;
    animation: ogDrift 7s ease-in-out infinite;
}
/* --- Ocean Waves (free) --- */
.ogbg-waves {
    background:
        radial-gradient(circle at 50% 120%, rgba(0,212,255,.55), transparent 55%),
        repeating-radial-gradient(circle at 50% 130%, rgba(0,180,255,.25) 0 12px, transparent 12px 24px),
        linear-gradient(180deg, rgba(0,40,80,.5), rgba(0,120,180,.45));
    animation: ogFloatY 5s ease-in-out infinite;
}
/* --- Aurora (epic) --- */
.ogbg-aurora {
    background:
        radial-gradient(60% 40% at 30% 35%, rgba(0,255,140,.55), transparent 70%),
        radial-gradient(55% 45% at 70% 55%, rgba(120,0,255,.5), transparent 70%),
        radial-gradient(circle at 50% 50%, rgba(0,30,40,.6), rgba(0,10,25,.7));
    background-size: 180% 180%, 180% 180%, 100% 100%;
    animation: ogDrift 8s ease-in-out infinite, ogHue 14s linear infinite;
}
/* --- Star Field (epic) --- */
.ogbg-stars {
    background:
        radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 80% 30%, #cfe3ff, transparent 60%),
        radial-gradient(2px 2px at 55% 70%, #fff, transparent 60%),
        radial-gradient(1px 1px at 35% 85%, #9db4ff, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(20,20,55,.8), rgba(4,4,18,.95));
    background-size: 90px 90px,120px 120px,140px 140px,70px 70px,100% 100%;
    animation: ogTwinkle 3.5s ease-in-out infinite;
}
/* --- Energy Plasma (legendary) --- */
.ogbg-plasma {
    background:
        radial-gradient(50% 50% at 35% 40%, rgba(255,0,100,.6), transparent 70%),
        radial-gradient(50% 50% at 65% 60%, rgba(255,140,0,.55), transparent 70%),
        radial-gradient(circle at 50% 50%, rgba(40,0,20,.7), rgba(10,0,8,.85));
    background-size: 160% 160%, 160% 160%, 100% 100%;
    animation: ogDrift 5s ease-in-out infinite, ogHue 10s linear infinite;
}
/* --- Cosmic Nebula (legendary) --- */
.ogbg-nebula {
    background:
        radial-gradient(55% 45% at 40% 40%, rgba(138,43,226,.6), transparent 70%),
        radial-gradient(50% 45% at 65% 60%, rgba(75,0,130,.55), transparent 70%),
        radial-gradient(2px 2px at 30% 30%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 70% 65%, #e6ccff, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(15,0,30,.85), rgba(5,0,15,.95));
    background-size:180% 180%,180% 180%,120px 120px,90px 90px,100% 100%;
    animation: ogDrift 9s ease-in-out infinite;
}
/* --- Quantum (epic, gold) --- */
.ogbg-quantum {
    background:
        conic-gradient(from 0deg at 50% 50%, rgba(255,215,0,.5), rgba(255,100,100,.4), rgba(255,215,0,.5)),
        radial-gradient(circle at 50% 50%, rgba(30,15,0,.7), rgba(10,5,0,.9));
    animation: ogSpin 12s linear infinite;
}
/* --- Matrix Digital (rare) --- */
.ogbg-matrix {
    background:
        repeating-linear-gradient(0deg, rgba(0,255,65,.25) 0 2px, transparent 2px 13px),
        linear-gradient(180deg, rgba(0,30,8,.85), rgba(0,12,4,.95));
    background-size: 100% 26px, 100% 100%;
    animation: ogScan 1.1s linear infinite;
}
/* --- Neon Arcade City (epic) --- */
.ogbg-cyber {
    background:
        radial-gradient(circle at 25% 10%, rgba(0,240,255,.4), transparent 45%),
        radial-gradient(circle at 75% 90%, rgba(255,0,132,.4), transparent 45%),
        repeating-linear-gradient(90deg, rgba(0,220,255,.18) 0 2px, transparent 2px 22px),
        linear-gradient(160deg, rgba(255,0,132,.25), rgba(0,18,50,.85));
    animation: ogGlowSoft 3.2s ease-in-out infinite, ogHue 16s linear infinite;
}
/* --- 8-Bit Level Map (epic) --- */
.ogbg-geometry {
    background:
        conic-gradient(from 45deg at 50% 50%, rgba(255,212,0,.35) 0 25%, rgba(0,120,255,.3) 0 50%, rgba(255,212,0,.35) 0 75%, rgba(0,120,255,.3) 0),
        linear-gradient(135deg, rgba(0,120,255,.25), rgba(0,35,75,.85));
    background-size: 38px 38px, 100% 100%;
    animation: ogDrift 6s ease-in-out infinite;
}
/* --- Boss Battle Arena (legendary, lava) --- */
.ogbg-lava {
    background:
        radial-gradient(circle at 50% 110%, rgba(255,90,0,.75), transparent 55%),
        radial-gradient(circle at 30% 80%, rgba(255,40,0,.55), transparent 45%),
        repeating-radial-gradient(circle at 50% 120%, rgba(120,20,0,.4) 0 10px, transparent 10px 22px),
        linear-gradient(180deg, rgba(40,4,0,.8), rgba(12,2,2,.95));
    animation: ogGlowSoft 2.6s ease-in-out infinite;
}
/* --- Retro Warp Tunnel (mythic, galaxy) --- */
.ogbg-galaxy {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), transparent 12%),
        conic-gradient(from 0deg at 50% 50%, rgba(90,20,200,.6), rgba(255,170,0,.4), rgba(0,200,255,.5), rgba(90,20,200,.6)),
        radial-gradient(circle at 50% 50%, rgba(2,5,18,.4), rgba(2,5,18,.95) 80%);
    animation: ogSpin 9s linear infinite;
}

/* ============================================================
   PROFILE BORDERS  (.profile-border-effect.ogbd-*)
   ============================================================ */
/* ---- PREMIUM border rings (v5): crisp masked annulus + bloom + signature
   detail. ONE unscoped definition drives every surface that carries the class:
   profile ring (.profile-border-effect), my-profile glow (.my-profile-avatar-glow),
   store live preview (#storePreviewBorder) and store grid thumbnails (.og-thumb-ring).
   Every layer is an annulus / has a transparent centre, so the avatar face is
   never tinted even though .profile-border-effect stacks ABOVE the avatar. ---- */
.profile-border-effect[class*="ogbd-"],
.my-profile-avatar-glow[class*="ogbd-"] {
    border-radius: 50% !important;
    opacity: 1 !important;
    filter: none;            /* neutralise the base blur(15px) on the glow layer */
    background: none;        /* neutralise the base red conic on the glow layer */
    overflow: visible !important;
}
/* store grid thumbnail ring scaffold */
.og-thumb-ring-wrap { position: relative; width: 80px; height: 80px; }
.og-thumb-ring-wrap .og-thumb-av { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); }
.og-thumb-ring { position: absolute; inset: -10px; z-index: 2; border-radius: 50%; pointer-events: none; }

[class*="ogbd-"]::before,
[class*="ogbd-"]::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
}
@keyframes ogbdSpinR { to { transform: rotate(-360deg); } }
@keyframes ogbdBreath { 0%,100%{opacity:.5} 50%{opacity:.95} }
@keyframes ogbdFlick  { 0%,100%{opacity:1} 42%{opacity:.85} 55%{opacity:.94} 72%{opacity:.7} }
@keyframes ogbdBolt   { 0%,16%,100%{opacity:.2} 6%{opacity:1} 10%{opacity:.42} 13%{opacity:.95} }
/* crisp annulus mask on the coloured ring (element) + its detail layer (::after) */
.ogbd-fire,.ogbd-ice,.ogbd-gold,.ogbd-rainbow,.ogbd-neon,.ogbd-lightning,.ogbd-void,
.ogbd-fire::after,.ogbd-ice::after,.ogbd-gold::after,.ogbd-lightning::after,.ogbd-void::after {
    -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 79%, #000 100%) !important;
            mask: radial-gradient(closest-side, transparent 74%, #000 79%, #000 100%) !important;
}
.ogbd-fire::before,.ogbd-ice::before,.ogbd-gold::before,.ogbd-rainbow::before,.ogbd-neon::before,.ogbd-lightning::before,.ogbd-void::before { filter: blur(6px); }

/* FIRE */
.ogbd-fire { background: conic-gradient(from 0deg,#5c0a00,#ff3a00,#ff8a00,#ffd24a,#fff6d0,#ffd24a,#ff8a00,#ff3a00,#5c0a00) !important; animation: ogSpin 7s linear infinite !important; filter: saturate(1.25) drop-shadow(0 0 4px rgba(255,90,0,.85)) drop-shadow(0 0 10px rgba(255,55,0,.45)) !important; }
.ogbd-fire::before { background: radial-gradient(closest-side, transparent 56%, rgba(255,120,20,.7) 76%, transparent 96%); animation: ogbdBreath 1.5s ease-in-out infinite; }
.ogbd-fire::after {
    background:
      radial-gradient(2.5px 6px at 50% 2%, #fff7d8, transparent 66%),
      radial-gradient(2.5px 5px at 76% 12%, #ffd98a, transparent 66%),
      radial-gradient(2.5px 5px at 24% 14%, #ffc35a, transparent 66%),
      radial-gradient(2.5px 5px at 93% 50%, #ffab3e, transparent 66%),
      radial-gradient(2.5px 5px at 8% 54%, #ff8a2a, transparent 66%),
      radial-gradient(2.5px 6px at 64% 94%, #ffd98a, transparent 66%),
      radial-gradient(2px 5px at 36% 90%, #ffb347, transparent 66%);
    mix-blend-mode: screen; filter: drop-shadow(0 0 2px rgba(255,180,60,.9));
    animation: ogSpin 3.6s linear infinite, ogbdFlick .45s steps(3) infinite;
}
/* ICE */
.ogbd-ice { background: conic-gradient(from 0deg,#0a3a55,#7fe3ff,#eafcff,#39b6ff,#eafcff,#7fe3ff,#39b6ff,#eafcff,#0a3a55) !important; animation: ogSpin 12s linear infinite !important; filter: saturate(1.1) drop-shadow(0 0 4px rgba(60,200,255,.7)) drop-shadow(0 0 9px rgba(120,220,255,.35)) !important; }
.ogbd-ice::before { background: radial-gradient(closest-side, transparent 56%, rgba(90,210,255,.6) 76%, transparent 96%); animation: ogbdBreath 3s ease-in-out infinite; }
.ogbd-ice::after {
    background:
      radial-gradient(2.5px 2.5px at 50% 5%, #fff, transparent 58%),
      radial-gradient(2px 2px at 82% 29%, #eafcff, transparent 58%),
      radial-gradient(2.5px 2.5px at 18% 33%, #fff, transparent 58%),
      radial-gradient(2px 2px at 91% 65%, #dff6ff, transparent 58%),
      radial-gradient(2.5px 2.5px at 11% 63%, #fff, transparent 58%),
      radial-gradient(2px 2px at 50% 95%, #eafcff, transparent 58%),
      radial-gradient(2px 2px at 68% 84%, #fff, transparent 58%);
    filter: drop-shadow(0 0 2px rgba(200,240,255,.9)); animation: ogbdBreath 2.2s ease-in-out infinite;
}
/* GOLD (brushed metal + travelling specular) */
.ogbd-gold { background: conic-gradient(from 0deg,#6a4a12,#c9952b,#ffe9a6,#fff6d8,#ffe9a6,#c9952b,#8a5f1b,#ffe08a,#c9952b,#6a4a12) !important; animation: ogSpin 9s linear infinite !important; filter: drop-shadow(0 0 4px rgba(255,200,80,.7)) drop-shadow(0 0 9px rgba(200,140,40,.35)) !important; }
.ogbd-gold::before { background: radial-gradient(closest-side, transparent 56%, rgba(255,200,80,.55) 76%, transparent 96%); }
.ogbd-gold::after { background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.95) 10deg, transparent 36deg, transparent 360deg); animation: ogSpin 2.6s linear infinite; mix-blend-mode: screen; }
/* RAINBOW */
.ogbd-rainbow { background: conic-gradient(from 0deg,#ff2d62,#ff8a3d,#ffd74a,#64f58a,#44ffe8,#4b8bff,#9b6bff,#ff2d62) !important; animation: ogSpin 5s linear infinite !important; filter: saturate(1.3) drop-shadow(0 0 5px rgba(120,120,255,.5)) !important; }
.ogbd-rainbow::before { background: radial-gradient(closest-side, transparent 58%, rgba(155,107,255,.4) 78%, transparent 96%); }
.ogbd-rainbow::after { background: radial-gradient(closest-side, transparent 75%, rgba(255,255,255,.4) 77%, transparent 80%); }
/* NEON (glass tube + buzz) */
.ogbd-neon { background: conic-gradient(from 0deg,#44ffe8,#0affff,#ff2df0,#9b6bff,#44ffe8) !important; animation: ogSpin 6s linear infinite, ogbdFlick 2.4s steps(6) infinite !important; filter: drop-shadow(0 0 3px #22ffe0) drop-shadow(0 0 9px #ff2df0) !important; }
.ogbd-neon::before { background: radial-gradient(closest-side, transparent 54%, rgba(0,240,255,.5) 74%, rgba(255,45,240,.3) 84%, transparent 96%); animation: ogbdBreath 1.8s ease-in-out infinite; }
.ogbd-neon::after { background: radial-gradient(closest-side, transparent 74%, rgba(255,255,255,.85) 76%, transparent 79%); }
/* LIGHTNING (irregular electric arcs) */
.ogbd-lightning { background: conic-gradient(from 0deg,#2a2a00,#fff500,#ffffff,#8ab4ff,#fff500,#2a2a00,#fff8b0,#3a3a00) !important; animation: ogSpin 4.5s linear infinite !important; filter: drop-shadow(0 0 5px rgba(255,245,0,.75)) drop-shadow(0 0 10px rgba(150,170,255,.4)) !important; }
.ogbd-lightning::before { background: radial-gradient(closest-side, transparent 56%, rgba(255,245,0,.55) 76%, transparent 96%); animation: ogbdBreath .9s ease-in-out infinite; }
.ogbd-lightning::after {
    background: conic-gradient(from 0deg,
      transparent 0 7deg, #fff 8deg 10deg, transparent 11deg 66deg,
      #cfe0ff 71deg 73deg, transparent 74deg 146deg,
      #fff 147deg 150deg, transparent 151deg 201deg,
      #fff 246deg 248deg, transparent 249deg 296deg,
      #e6eeff 317deg 320deg, transparent 321deg 360deg);
    filter: drop-shadow(0 0 3px #fff); mix-blend-mode: screen;
    animation: ogbdSpinR 6s linear infinite, ogbdBolt .85s steps(1) infinite;
}
/* VOID (black hole / accretion disk + stars) */
.ogbd-void { background: conic-gradient(from 0deg,#1a0634,#9b6bff,#ff2d9b,#5a1ec8,#1a0634,#7a2bff,#1a0634) !important; animation: ogSpin 8s linear infinite !important; filter: drop-shadow(0 0 6px rgba(140,60,255,.6)) drop-shadow(0 0 11px rgba(80,0,160,.4)) !important; }
.ogbd-void::before { background: radial-gradient(closest-side, transparent 54%, rgba(120,0,200,.6) 74%, transparent 94%); animation: ogbdBreath 2.4s ease-in-out infinite; }
.ogbd-void::after {
    background:
      radial-gradient(2px 2px at 50% 7%, #fff, transparent 58%),
      radial-gradient(1.5px 1.5px at 80% 33%, #f0e0ff, transparent 58%),
      radial-gradient(2px 2px at 20% 39%, #fff, transparent 58%),
      radial-gradient(1.5px 1.5px at 88% 69%, #e6ccff, transparent 58%),
      radial-gradient(2px 2px at 14% 72%, #fff, transparent 58%),
      radial-gradient(closest-side, transparent 73%, rgba(255,255,255,.55) 75%, transparent 77%);
    filter: drop-shadow(0 0 2px rgba(220,190,255,.8)); animation: ogbdSpinR 10s linear infinite;
}

/* ============================================================
   LIVE PROFILE PREVIEW CARD  (#myProfilePreviewCard)
   The card the user actually sees. Background is a full-card
   layer (canvas element reused as a CSS box) + avatar glow ring.
   These reuse the same ogbg-*/ogbd-* visuals as the store so the
   preview matches the thumbnails exactly.
   ============================================================ */
.my-profile-bg-canvas[class*="ogbg-"] {
    border-radius: 20px;
    opacity: .9;
}
/* Darken toward the bottom so the username/badges stay readable */
.my-profile-preview-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8,10,20,.05) 0%, rgba(8,10,20,.35) 45%, rgba(8,10,20,.82) 100%);
}
.my-profile-header { position: relative; z-index: 1; }

/* Avatar glow ring driven by equipped border (ogbd-*) on the card */
.my-profile-avatar-glow[class*="ogbd-"] {
    width: 130px !important;
    height: 130px !important;
    opacity: .95 !important;
}

/* ============================================================
   CHAT EFFECT POLISH — premium upgrade for the new look.
   Layers on top of existing .chat-effect-* base classes.
   ============================================================ */
.chat-message-box[class*="chat-effect-"] { border-radius: 12px; transition: box-shadow .25s ease; }
.chat-message-box.chat-effect-gold {
    background: linear-gradient(135deg, rgba(245,196,81,.16), rgba(201,149,43,.10)) !important;
    box-shadow: inset 0 0 0 1px rgba(245,196,81,.4), 0 0 18px rgba(245,196,81,.25) !important;
}
.chat-message-box.chat-effect-shadow {
    background: linear-gradient(135deg, rgba(20,20,30,.55), rgba(10,10,18,.6)) !important;
    box-shadow: inset 0 0 0 1px rgba(120,120,160,.25), 0 6px 18px rgba(0,0,0,.5) !important;
}
.chat-message-box.chat-effect-lightning {
    box-shadow: inset 0 0 0 1px rgba(255,245,0,.4), 0 0 16px rgba(255,245,0,.3) !important;
}

/* ============================================================
   UI THEMES — body.ui-theme-<id> recolors site chrome accents.
   Vars are consumed by the polish selectors below + emulator.
   ============================================================ */
body[class*="ui-theme-"] { --og-accent:#ff0040; --og-accent-rgb:255,0,64; --og-accent-2:#00ffff; }
body.ui-theme-classic { --og-accent:#ff0040; --og-accent-rgb:255,0,64;   --og-accent-2:#00ffff; }
body.ui-theme-cyber   { --og-accent:#00f0ff; --og-accent-rgb:0,240,255;  --og-accent-2:#ff00d4; }
body.ui-theme-arcade  { --og-accent:#ffcc00; --og-accent-rgb:255,204,0;  --og-accent-2:#ff3b3b; }
body.ui-theme-galaxy  { --og-accent:#9b6bff; --og-accent-rgb:155,107,255;--og-accent-2:#49b6ff; }
body.ui-theme-sakura  { --og-accent:#ff7eb6; --og-accent-rgb:255,126,182;--og-accent-2:#ffd1e6; }
body.ui-theme-ocean   { --og-accent:#1fc8ff; --og-accent-rgb:31,200,255; --og-accent-2:#00e0c4; }
body.ui-theme-sunset  { --og-accent:#ff6a3d; --og-accent-rgb:255,106,61; --og-accent-2:#ffb23d; }

/* Apply accent to key chrome so the recolor is visible site-wide */
body[class*="ui-theme-"]:not(.ui-theme-classic) ::selection { background: var(--og-accent); color:#fff; }
body[class*="ui-theme-"]:not(.ui-theme-classic) ::-webkit-scrollbar-thumb { background: var(--og-accent) !important; }
body[class*="ui-theme-"]:not(.ui-theme-classic) a:hover { color: var(--og-accent) !important; }
body[class*="ui-theme-"]:not(.ui-theme-classic) .nav-link.active,
body[class*="ui-theme-"]:not(.ui-theme-classic) .navbar .active { color: var(--og-accent) !important; }
body[class*="ui-theme-"]:not(.ui-theme-classic) .btn-primary,
body[class*="ui-theme-"]:not(.ui-theme-classic) .primary-btn,
body[class*="ui-theme-"]:not(.ui-theme-classic) .play-now-btn {
    background: linear-gradient(135deg, var(--og-accent), var(--og-accent-2)) !important;
    border-color: var(--og-accent) !important;
    box-shadow: 0 6px 22px rgba(var(--og-accent-rgb), .35) !important;
}
body[class*="ui-theme-"]:not(.ui-theme-classic) .store-tab-btn.active,
body[class*="ui-theme-"]:not(.ui-theme-classic) .store-cosmetics-active {
    color: var(--og-accent) !important;
    border-color: var(--og-accent) !important;
}

/* ============================================================
   STORE MODAL — premium glass + rarity polish
   ============================================================ */
#storeModal .store-item {
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease !important;
    will-change: transform;
}
#storeModal .store-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}
#storeModal .store-item.selected,
#storeModal .store-item.equipped {
    box-shadow: 0 0 0 2px var(--emu-gold, #f5c451), 0 14px 30px rgba(0,0,0,.5) !important;
}
/* Rarity edge glow */
#storeModal .store-item.rarity-epic      { box-shadow: 0 0 0 1px rgba(190,120,255,.4) inset; }
#storeModal .store-item.rarity-legendary { box-shadow: 0 0 0 1px rgba(255,150,40,.45) inset; }
#storeModal .store-item.rarity-mythic    { box-shadow: 0 0 0 1px rgba(255,80,200,.45) inset; }
#storeModal .store-item.rarity-epic:hover      { box-shadow: 0 14px 34px rgba(140,60,255,.35), 0 0 0 1px rgba(190,120,255,.6) inset !important; }
#storeModal .store-item.rarity-legendary:hover { box-shadow: 0 14px 34px rgba(255,150,40,.35), 0 0 0 1px rgba(255,170,60,.6) inset !important; }
#storeModal .store-item.rarity-mythic:hover    { box-shadow: 0 14px 34px rgba(255,80,200,.38), 0 0 0 1px rgba(255,120,220,.65) inset !important; }

/* Equipped badge */
#storeModal .store-item .og-equipped-badge {
    position:absolute; top:10px; right:10px; z-index:3;
    background: linear-gradient(135deg, var(--emu-gold,#f5c451), var(--emu-gold-deep,#c9952b));
    color:#1a1205; font-weight:800; font-size:.62rem; letter-spacing:.04em;
    padding:3px 9px; border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.4);
    text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .profile-bg-effect[class*="ogbg-"],
    .user-profile-bg-effect[class*="ogbg-"],
    .profile-bg-effect[class*="ogbg-"]::before,
    .profile-bg-effect[class*="ogbg-"]::after,
    .user-profile-bg-effect[class*="ogbg-"]::before,
    .user-profile-bg-effect[class*="ogbg-"]::after,
    .profile-border-effect[class*="ogbd-"],
    .profile-border-effect[class*="ogbd-"]::before,
    .profile-border-effect[class*="ogbd-"]::after,
    .my-profile-avatar-glow[class*="ogbd-"]::before,
    .my-profile-avatar-glow[class*="ogbd-"]::after { animation: none !important; }
}

/* ============================================================
   STORE ARCADE REPAIR PASS
   Fixes the Store modal, live preview, item previews, borders,
   and chat-effect demos with selectors strong enough to override
   the older inline modal styling.
   ============================================================ */
@keyframes ogStoreGridPan {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 48px 48px, 0 0; }
}
@keyframes ogStorePulse {
    0%, 100% { opacity: .78; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}
@keyframes ogStoreSweep {
    0% { transform: translateX(-120%); opacity: 0; }
    20%, 70% { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}
@keyframes ogStoreBlink {
    0%, 100% { opacity: .52; }
    50% { opacity: 1; }
}
@keyframes ogStoreBorderFlow {
    to { background-position: 240% 0; }
}
@keyframes ogStoreFloat {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-5px,0); }
}
@keyframes ogStoreRingSpin {
    to { transform: rotate(360deg); }
}
@keyframes ogStoreScan {
    0% { background-position: 0 -40px; }
    100% { background-position: 0 40px; }
}

body #storeModal {
    --store-bg: #070913;
    --store-panel: rgba(12, 13, 28, .92);
    --store-panel-2: rgba(20, 11, 32, .9);
    --store-cyan: #44ffe8;
    --store-pink: #ff2d62;
    --store-gold: #ffd74a;
    --store-green: #64f58a;
    --store-line: rgba(120, 100, 210, .38);
    background:
        radial-gradient(circle at 16% 12%, rgba(68,255,232,.12), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(255,45,98,.13), transparent 34%),
        linear-gradient(180deg, rgba(8,10,19,.98), rgba(7,5,15,.98)) !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}
body #storeModal::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68,255,232,.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 10%, rgba(255,215,74,.06), transparent 32%);
    background-size: 100% 3px, 48px 48px, 100% 100%;
    animation: ogStoreGridPan 18s linear infinite;
    mix-blend-mode: screen;
}
body #storeModal::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, rgba(255,45,98,.09), transparent 22%, transparent 78%, rgba(68,255,232,.08));
}
body #storeModal > div {
    position: relative;
    z-index: 1;
    max-width: min(1440px, 100%) !important;
    padding: clamp(12px, 2vw, 24px) !important;
}
body #storeModal > div > div:nth-of-type(2) {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    gap: clamp(16px, 2.2vw, 30px) !important;
    align-items: start !important;
}

body #storeModal .store-header-redesign {
    border-radius: 8px !important;
    border: 2px solid rgba(68,255,232,.24) !important;
    background:
        linear-gradient(90deg, rgba(68,255,232,.08), transparent 18%, rgba(255,45,98,.10) 72%, rgba(255,215,74,.08)),
        linear-gradient(180deg, rgba(19, 21, 39, .94), rgba(9, 8, 20, .94)) !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.55),
        inset 0 1px rgba(255,255,255,.08),
        0 0 0 1px rgba(255,45,98,.18) !important;
    margin-bottom: 18px !important;
}
body #storeModal .store-header-redesign::before {
    border-radius: 8px !important;
    background: linear-gradient(90deg, var(--store-pink), var(--store-cyan), var(--store-gold), var(--store-pink)) !important;
    background-size: 240% 100% !important;
    animation: ogStoreBorderFlow 5s linear infinite !important;
}
body #storeModal .store-title-neon {
    font-size: clamp(1.35rem, 2.4vw, 2.35rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 1px !important;
    /* The title is a gradient-clipped text with an animated shimmer
       (storeTitleShift). The old hard 3px/6px offset shadows sat ON TOP of the
       transparent-filled text and rendered as a broken doubled red/cyan ghost.
       Keep only a soft warm glow so the gradient + shimmer read cleanly. */
    text-shadow: 0 0 22px rgba(255,180,60,.35) !important;
}
body #storeModal .store-coin-badge {
    min-height: 42px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255,215,74,.42) !important;
    background: linear-gradient(180deg, rgba(255,215,74,.16), rgba(10,8,18,.9)) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 20px rgba(255,215,74,.14) !important;
}
body #storeModal .store-ticker-wrap {
    border-top: 1px solid rgba(68,255,232,.24) !important;
    background: rgba(5, 7, 15, .7) !important;
}

body #storeModal .store-tab-bar-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* UI Themes tab removed: 5 -> 4 */
    gap: 10px !important;
    margin: 0 0 16px !important;
    padding: 8px !important;
    border: 1px solid rgba(120,100,210,.34) !important;
    border-radius: 8px !important;
    background: rgba(7,8,18,.72) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body #storeModal .store-tab {
    min-height: 52px !important;
    border-radius: 6px !important;
    border: 2px solid rgba(120,100,210,.32) !important;
    background: linear-gradient(180deg, rgba(23,22,42,.96), rgba(12,10,24,.96)) !important;
    color: rgba(255,255,255,.86) !important;
    font-family: "Russo One", system-ui, sans-serif !important;
    font-size: .78rem !important;
    letter-spacing: .4px !important;
    text-transform: uppercase;
    box-shadow: inset 0 -3px rgba(0,0,0,.22) !important;
}
body #storeModal .store-tab.active {
    color: #09101a !important;
    background: linear-gradient(135deg, var(--store-gold), #ff8a3d) !important;
    border-color: rgba(255,255,255,.44) !important;
    box-shadow: 0 0 24px rgba(255,215,74,.22), inset 0 -4px rgba(0,0,0,.16) !important;
}
body #storeModal .store-tab-count {
    border-radius: 5px !important;
    background: rgba(8,10,18,.72) !important;
    color: var(--store-cyan) !important;
    border: 1px solid rgba(68,255,232,.35) !important;
}

body #storeModal .store-left-panel {
    top: 12px !important;
}
body #storeModal .store-left-panel > div {
    border-radius: 8px !important;
    border: 2px solid rgba(255,45,98,.38) !important;
    background:
        linear-gradient(180deg, rgba(18,12,27,.96), rgba(7,7,18,.98)) !important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.55),
        0 0 0 1px rgba(68,255,232,.14),
        inset 0 0 35px rgba(255,45,98,.06) !important;
}
body #storeModal .store-preview-label {
    margin: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-family: "Russo One", system-ui, sans-serif !important;
    font-size: .78rem !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
}
body #storeModal #storePreviewContainer {
    height: clamp(330px, 40vw, 430px) !important;
    min-height: 320px;
    border-top: 1px solid rgba(68,255,232,.18) !important;
    border-bottom: 1px solid rgba(255,45,98,.22) !important;
    background: #070913 !important;
    isolation: isolate;
}
body #storeModal #storePreviewContainer::before,
body #storeModal #storePreviewContainer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
body #storeModal #storePreviewContainer::before {
    background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        radial-gradient(circle at 50% 8%, rgba(255,215,74,.14), transparent 36%);
    background-size: 100% 4px, 100% 100%;
    animation: ogStoreScan 2.4s linear infinite;
    opacity: .44;
}
body #storeModal #storePreviewContainer::after {
    background: linear-gradient(180deg, transparent 0%, rgba(4,5,13,.18) 48%, rgba(4,5,13,.82) 100%);
}
body #storeModal #storePreviewCanvas,
body #storeModal .store-preview-canvas {
    display: block;
    background-color: #080b16;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    image-rendering: auto;
}
body #storeModal #storePreviewCanvas {
    opacity: .96;
    filter: saturate(1.08) contrast(1.03);
}
body #storeModal .store-preview-canvas {
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,.08);
}

body #storeModal #storePreviewAvatarWrapper {
    width: 124px !important;
    height: 124px !important;
    display: grid !important;
    place-items: center !important;
    margin-bottom: 18px !important;
}
body #storeModal #storePreviewBorder {
    inset: -11px !important;
    display: block;
    border-radius: 50% !important;
    opacity: .95 !important;
    transform: translateZ(0);
}
body #storeModal #storePreviewBorder.ogbd-none,
body #storeModal #storePreviewBorder.avatar-border-none {
    display: none !important;
}
body #storeModal #storePreviewAvatar {
    width: 104px !important;
    height: 104px !important;
    border: 3px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
}
body #storeModal #storePreviewName {
    font-family: "Black Ops One", "Russo One", system-ui, sans-serif !important;
    text-shadow: 0 0 18px rgba(120,200,255,.4) !important;
}

/* Store canvas fallback backgrounds. These show immediately while JS warms up. */
body #storeModal .store-preview-canvas[data-effect="particles"],
body #storeModal #storePreviewCanvas.ogbg-particles { background-image: radial-gradient(2px 2px at 20% 28%, #fff, transparent), radial-gradient(2px 2px at 68% 56%, #8fa7ff, transparent), linear-gradient(135deg, rgba(102,126,234,.5), rgba(118,75,162,.42)); }
body #storeModal .store-preview-canvas[data-effect="waves"],
body #storeModal #storePreviewCanvas.ogbg-waves { background-image: repeating-radial-gradient(circle at 50% 130%, rgba(68,255,232,.28) 0 10px, transparent 10px 22px), linear-gradient(180deg, rgba(0,28,62,.9), rgba(0,125,180,.62)); }
body #storeModal .store-preview-canvas[data-effect="aurora"],
body #storeModal #storePreviewCanvas.ogbg-aurora { background-image: radial-gradient(60% 42% at 30% 34%, rgba(85,255,152,.62), transparent), radial-gradient(55% 45% at 70% 58%, rgba(166,86,255,.6), transparent), linear-gradient(160deg, #06131c, #12082a); }
body #storeModal .store-preview-canvas[data-effect="stars"],
body #storeModal #storePreviewCanvas.ogbg-stars { background-image: radial-gradient(2px 2px at 18% 22%, #fff, transparent), radial-gradient(1px 1px at 72% 36%, #d5e6ff, transparent), radial-gradient(2px 2px at 50% 70%, #fff, transparent), linear-gradient(180deg, #050814, #15123a); }
body #storeModal .store-preview-canvas[data-effect="plasma"],
body #storeModal #storePreviewCanvas.ogbg-plasma { background-image: radial-gradient(60% 60% at 32% 36%, rgba(255,45,98,.72), transparent), radial-gradient(60% 56% at 70% 62%, rgba(255,138,61,.62), transparent), linear-gradient(160deg, #18020d, #08101f); }
body #storeModal .store-preview-canvas[data-effect="nebula"],
body #storeModal #storePreviewCanvas.ogbg-nebula { background-image: radial-gradient(55% 45% at 38% 42%, rgba(138,43,226,.72), transparent), radial-gradient(55% 48% at 70% 62%, rgba(68,255,232,.28), transparent), linear-gradient(150deg, #070316, #15052f); }
body #storeModal .store-preview-canvas[data-effect="quantum"],
body #storeModal #storePreviewCanvas.ogbg-quantum { background-image: conic-gradient(from 45deg at 50% 50%, rgba(255,215,74,.64), rgba(68,255,232,.32), rgba(255,45,98,.5), rgba(255,215,74,.64)), radial-gradient(circle, #140d05, #050711); }
body #storeModal .store-preview-canvas[data-effect="matrix"],
body #storeModal #storePreviewCanvas.ogbg-matrix { background-image: repeating-linear-gradient(0deg, rgba(100,245,138,.25) 0 2px, transparent 2px 13px), linear-gradient(180deg, #001407, #061006); }
body #storeModal .store-preview-canvas[data-effect="cyber"],
body #storeModal #storePreviewCanvas.ogbg-cyber { background-image: radial-gradient(circle at 22% 16%, rgba(68,255,232,.5), transparent 42%), radial-gradient(circle at 78% 88%, rgba(255,45,98,.46), transparent 42%), repeating-linear-gradient(90deg, rgba(68,255,232,.15) 0 2px, transparent 2px 18px), linear-gradient(150deg, #061020, #1a0622); }
body #storeModal .store-preview-canvas[data-effect="geometry"],
body #storeModal #storePreviewCanvas.ogbg-geometry { background-image: conic-gradient(from 45deg, rgba(255,215,74,.34) 0 25%, rgba(68,255,232,.24) 0 50%, rgba(255,45,98,.24) 0 75%, rgba(255,215,74,.34) 0), linear-gradient(135deg, #07162c, #0b1024); background-size: 34px 34px, cover; }
body #storeModal .store-preview-canvas[data-effect="lava"],
body #storeModal #storePreviewCanvas.ogbg-lava { background-image: radial-gradient(circle at 50% 105%, rgba(255,110,0,.82), transparent 52%), radial-gradient(circle at 30% 70%, rgba(255,45,45,.55), transparent 42%), linear-gradient(180deg, #210200, #07060c); }
body #storeModal .store-preview-canvas[data-effect="galaxy"],
body #storeModal #storePreviewCanvas.ogbg-galaxy { background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.74), transparent 12%), conic-gradient(from 0deg, rgba(155,107,255,.65), rgba(255,215,74,.4), rgba(68,255,232,.5), rgba(155,107,255,.65)), radial-gradient(circle, #071326, #04050f); }
body #storeModal .store-preview-canvas[data-effect="sparkles"] { background-image: radial-gradient(2px 2px at 18% 22%, #fff7c8, transparent), radial-gradient(2px 2px at 62% 46%, #fff, transparent), linear-gradient(135deg, rgba(255,215,74,.32), rgba(255,45,98,.22)); }
body #storeModal .store-preview-canvas[data-effect="confetti"] { background-image: radial-gradient(4px 4px at 22% 24%, #ff2d62, transparent), radial-gradient(4px 4px at 66% 34%, #44ffe8, transparent), radial-gradient(4px 4px at 46% 72%, #ffd74a, transparent), linear-gradient(135deg, #120a22, #071018); }
body #storeModal .store-preview-canvas[data-effect="sakura"] { background-image: radial-gradient(8px 5px at 20% 25%, rgba(255,126,182,.65), transparent), radial-gradient(8px 5px at 72% 55%, rgba(255,196,220,.65), transparent), linear-gradient(135deg, #1c0714, #120a22); }
body #storeModal .store-preview-canvas[data-effect="snow"] { background-image: radial-gradient(2px 2px at 20% 24%, #fff, transparent), radial-gradient(2px 2px at 70% 58%, #e4f8ff, transparent), linear-gradient(180deg, #081827, #0f2238); }
body #storeModal .store-preview-canvas[data-effect="fireflies"] { background-image: radial-gradient(3px 3px at 24% 30%, #fff68a, transparent), radial-gradient(3px 3px at 68% 64%, #64f58a, transparent), linear-gradient(135deg, #07190f, #08101a); }
body #storeModal .store-preview-canvas[data-effect="bubbles"] { background-image: radial-gradient(circle at 24% 32%, transparent 0 10px, rgba(68,255,232,.5) 11px, transparent 13px), radial-gradient(circle at 72% 68%, transparent 0 14px, rgba(170,120,255,.45) 15px, transparent 17px), linear-gradient(180deg, #08233a, #0d102c); }
body #storeModal .store-preview-canvas[data-effect="leaves"] { background-image: radial-gradient(9px 5px at 24% 30%, rgba(255,215,74,.66), transparent), radial-gradient(9px 5px at 72% 62%, rgba(255,138,61,.55), transparent), linear-gradient(135deg, #171007, #241406); }
body #storeModal .store-preview-canvas[data-effect="hearts"] { background-image: radial-gradient(circle at 28% 28%, rgba(255,45,98,.62), transparent 12%), radial-gradient(circle at 68% 62%, rgba(255,126,182,.58), transparent 12%), linear-gradient(135deg, #1a0714, #110d22); }
body #storeModal .store-preview-canvas[data-effect="embers"] { background-image: radial-gradient(3px 3px at 18% 75%, #ff8a3d, transparent), radial-gradient(3px 3px at 70% 34%, #ffd74a, transparent), radial-gradient(circle at 50% 100%, rgba(255,70,0,.72), transparent 45%), linear-gradient(180deg, #1e0400, #07060c); }
body #storeModal .store-preview-canvas[data-effect="lightning"] { background-image: linear-gradient(120deg, transparent 0 45%, rgba(255,255,255,.72) 47%, rgba(255,215,74,.8) 49%, transparent 52%), linear-gradient(135deg, #101228, #251608); }
body #storeModal .store-preview-canvas[data-effect="glitch"] { background-image: repeating-linear-gradient(0deg, rgba(68,255,232,.15) 0 2px, transparent 2px 8px), linear-gradient(90deg, rgba(255,45,98,.38), rgba(68,255,232,.3)), linear-gradient(180deg, #050712, #12081d); }

/* Store preview border layer now inherits the canonical premium .ogbd-* rings
   above (crisp masked annulus + bloom + detail) — no separate blurred-disc
   override, so the live preview matches the profile exactly (true WYSIWYG).
   Only the geometry (#storePreviewBorder inset) stays scoped below. */
body #storeModal #storePreviewBorder[class*="ogbd-"] { filter: none; }

body #storeModal .store-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border-color: rgba(120,100,210,.34) !important;
    background:
        linear-gradient(180deg, rgba(20,20,38,.92), rgba(10,9,21,.94)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.26) !important;
    isolation: isolate;
}
body #storeModal .store-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.08) 45%, transparent 58%);
    transform: translateX(-120%);
    opacity: 0;
}
body #storeModal .store-item:hover::before {
    animation: ogStoreSweep 1.1s ease;
}
body #storeModal .store-item.selected {
    border-color: rgba(255,215,74,.75) !important;
    box-shadow: 0 0 0 2px rgba(255,215,74,.58), 0 16px 36px rgba(0,0,0,.48), 0 0 28px rgba(255,215,74,.12) !important;
}
body #storeModal .rarity-badge {
    border-radius: 5px !important;
    letter-spacing: .7px !important;
    box-shadow: inset 0 -2px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.24) !important;
}

/* Chat demos and real chat effect boxes share the same repaired layers. */
.chat-message-box[class*="chat-effect-"],
body #storeModal .chat-demo-message[class*="chat-effect-"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 8px !important;
    transform: translateZ(0);
}
/* Keep message content above the effect layers, but EXCLUDE the particle canvas
   (.chat-special-effect-canvas) — it must stay position:absolute (overlay) or it
   drops into normal flow and pushes the message text out of view. */
.chat-message-box[class*="chat-effect-"] > *:not(.chat-special-effect-canvas),
body #storeModal .chat-demo-message[class*="chat-effect-"] > *:not(.chat-special-effect-canvas) {
    position: relative;
    z-index: 2;
}
/* Particle overlay: always an absolute layer behind the text, never in flow.
   Kept subtle (opacity + soft-light-ish blend) so it's a gentle accent that
   never washes the message or clashes with the chat-effect border colours. */
.chat-message-box .chat-special-effect-canvas {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 0.62 !important;
    mix-blend-mode: screen;
}
/* Text must sit above the absolute particle canvas even with NO chat-effect class. */
.chat-message-box > *:not(.chat-special-effect-canvas) {
    position: relative;
    z-index: 2;
}
/* When a chat EFFECT is equipped it OWNS the whole box look. The own/admin/vip/
   streamer base skins each add their own border/background/glow (blue own bg,
   gold 4px left-bar + pulsing gold glow, etc.) that FIGHT the effect and produce
   the clashing colours the user reported ("conflito nas bordas" — e.g. a green
   cyber fill under a pulsing gold admin glow). Neutralise those competing skins
   ONLY when an effect is present; the effect's own bg/border/glow (set with
   !important) still wins, and admin/VIP stay identified by their name badge. */
.chat-message-box[class*="chat-effect-"].own-message,
.chat-message-box[class*="chat-effect-"].admin-message,
.chat-message-box[class*="chat-effect-"].vip-message,
.chat-message-box[class*="chat-effect-"].streamer-message {
    /* Override the skin's thick colored left-bar so it matches the effect's own
       1.5px border on the other three sides (was border-left:0 → a 3-sided box).
       Width+style only: the effect's `border` shorthand keeps supplying the color. */
    border-left-width: 1.5px !important;
    border-left-style: solid !important;
    animation: none !important;
    background-image: none;
    box-shadow: none;
}
body #storeModal .chat-demo-message {
    min-height: 84px;
    border-radius: 8px !important;
    background: rgba(7, 9, 18, .76) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
body #storeModal .chat-effect-item {
    min-height: 245px;
}
body #storeModal #storeTabChatEffects[style*="display: grid"] {
    display: block !important;
}
body #storeModal .chat-effect-item:hover .chat-demo-message {
    transform: translateY(-2px);
}

/* ---- PREMIUM chat effects (v5): tinted glass box + signature ANIMATED
   particle/texture layer (::before), no cheap emoji badges. One definition
   drives the real chat (.chat-message-box) AND the store demo tiles
   (.chat-demo-message) = true WYSIWYG. store-cosmetics.css loads last on every
   page, so it wins over the legacy stream-chat-effects.css emoji styling. ---- */
@keyframes cfRise  { to { background-position: 0 -120px, 0 -120px, 0 -120px; } }
@keyframes cfDrift { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-6px,-5px); } }
@keyframes cfHue   { to { filter: hue-rotate(360deg); } }
@keyframes cfFlash { 0%,72%,100%{opacity:0} 78%{opacity:.9} 82%{opacity:.2} 86%{opacity:.7} }
@keyframes cfStar  { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes cfFall  { to { background-position: 0 0, 0 90px; } }

/* kill the legacy emoji badges (🔥 ❄️ ✨ ⚡ 👻 "01") from stream-chat-effects.css */
.chat-message-box[class*="chat-effect-"]::after,
body #storeModal .chat-demo-message[class*="chat-effect-"]::after { content: none !important; }

/* NEON */
.chat-message-box.chat-effect-neon,
body #storeModal .chat-demo-message.chat-effect-neon {
    border: 1.5px solid rgba(68,255,232,.9) !important;
    background: linear-gradient(135deg, rgba(68,255,232,.12), rgba(68,120,255,.05), rgba(7,10,20,.9)) !important;
    box-shadow: 0 0 22px rgba(68,255,232,.28), inset 0 0 20px rgba(68,255,232,.07) !important;
}
.chat-message-box.chat-effect-neon::before,
body #storeModal .chat-demo-message.chat-effect-neon::before {
    content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:1; pointer-events:none;
    background: linear-gradient(90deg, transparent, #8ffff0, transparent); filter: blur(.5px);
    animation: ogStoreSweep 3.2s ease-in-out infinite;
}
/* FIRE — rising embers */
.chat-message-box.chat-effect-fire,
body #storeModal .chat-demo-message.chat-effect-fire {
    border: 1.5px solid rgba(255,138,61,.9) !important;
    background: linear-gradient(180deg, rgba(255,70,0,.05), rgba(7,10,20,.9) 62%), radial-gradient(120% 60% at 50% 120%, rgba(255,90,0,.32), transparent 70%) !important;
    box-shadow: 0 0 22px rgba(255,100,0,.24), inset 0 -16px 26px rgba(255,70,0,.12) !important;
}
.chat-message-box.chat-effect-fire::before,
body #storeModal .chat-demo-message.chat-effect-fire::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.9;
    background:
      radial-gradient(2px 2px at 20% 90%, #ffcf7a, transparent 60%),
      radial-gradient(2px 2px at 55% 96%, #ff9a3d, transparent 60%),
      radial-gradient(1.6px 1.6px at 82% 88%, #ffd98a, transparent 60%);
    background-size: 100% 120px, 100% 120px, 100% 120px; background-repeat: repeat;
    animation: cfRise 2.6s linear infinite;
}
/* ICE — drifting frost */
.chat-message-box.chat-effect-ice,
body #storeModal .chat-demo-message.chat-effect-ice {
    border: 1.5px solid rgba(150,224,255,.9) !important;
    background: linear-gradient(180deg, rgba(150,224,255,.12), rgba(7,16,28,.9)) !important;
    box-shadow: 0 0 22px rgba(120,224,255,.24), inset 0 1px rgba(255,255,255,.14) !important;
}
.chat-message-box.chat-effect-ice::before,
body #storeModal .chat-demo-message.chat-effect-ice::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.85;
    background:
      radial-gradient(1.5px 1.5px at 18% 30%, #fff, transparent 60%),
      radial-gradient(1.5px 1.5px at 62% 20%, #eafcff, transparent 60%),
      radial-gradient(1.5px 1.5px at 84% 60%, #fff, transparent 60%),
      radial-gradient(1.5px 1.5px at 38% 72%, #dff6ff, transparent 60%);
    animation: cfDrift 5s ease-in-out infinite;
}
/* RAINBOW — flowing gradient border + inner sheen */
.chat-message-box.chat-effect-rainbow,
body #storeModal .chat-demo-message.chat-effect-rainbow {
    border: 1.5px solid transparent !important;
    background:
        linear-gradient(rgba(11,12,24,.93), rgba(11,12,24,.93)) padding-box,
        linear-gradient(90deg, #ff2d62, #ff8a3d, #ffd74a, #64f58a, #44ffe8, #9b6bff, #ff2d62) border-box !important;
    background-size: auto, 250% 100% !important;
    animation: ogStoreBorderFlow 3s linear infinite !important;
    box-shadow: 0 0 24px rgba(255,45,98,.14), 0 0 24px rgba(68,255,232,.12) !important;
}
.chat-message-box.chat-effect-rainbow::before,
body #storeModal .chat-demo-message.chat-effect-rainbow::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.10) 50%, transparent 60%);
    animation: ogStoreSweep 4.5s ease-in-out infinite;
}
/* GOLD — travelling specular shine */
.chat-message-box.chat-effect-gold,
body #storeModal .chat-demo-message.chat-effect-gold {
    border: 1.5px solid rgba(255,215,74,.92) !important;
    background: linear-gradient(135deg, rgba(255,215,74,.16), rgba(201,149,43,.05), rgba(9,11,20,.9)) !important;
    box-shadow: 0 0 24px rgba(255,215,74,.2), inset 0 1px rgba(255,255,255,.2) !important;
}
.chat-message-box.chat-effect-gold::before,
body #storeModal .chat-demo-message.chat-effect-gold::before {
    content:""; position:absolute; top:0; bottom:0; left:0; width:45%; z-index:1; pointer-events:none;
    background: linear-gradient(105deg, transparent, rgba(255,248,210,.5), transparent);
    animation: ogStoreSweep 3.6s ease-in-out infinite;
}
/* PLASMA — hue-cycling energy blobs. The hue-rotate lives on a ::before overlay
   ONLY (not the whole box) so it never recolors the message text/avatar/badges
   (that was the reported "cores estranhas rgb"). */
.chat-message-box.chat-effect-plasma,
body #storeModal .chat-demo-message.chat-effect-plasma {
    border: 1.5px solid rgba(255,80,220,.86) !important;
    background: rgba(9,11,20,.9) !important;
    box-shadow: 0 0 24px rgba(255,45,220,.18) !important;
}
.chat-message-box.chat-effect-plasma::before,
body #storeModal .chat-demo-message.chat-effect-plasma::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(60% 70% at 18% 20%, rgba(255,45,220,.30), transparent 60%), radial-gradient(60% 70% at 82% 84%, rgba(68,255,232,.26), transparent 60%);
    animation: cfHue 8s linear infinite;
}
/* GALAXY — drifting star field + nebula */
.chat-message-box.chat-effect-galaxy,
body #storeModal .chat-demo-message.chat-effect-galaxy {
    border: 1.5px solid rgba(155,107,255,.86) !important;
    background: radial-gradient(70% 80% at 20% 80%, rgba(155,107,255,.24), transparent 55%), radial-gradient(60% 70% at 82% 18%, rgba(255,45,98,.14), transparent 55%), linear-gradient(160deg, #0a0620, #12082a) !important;
    box-shadow: 0 0 24px rgba(155,107,255,.2) !important;
}
.chat-message-box.chat-effect-galaxy::before,
body #storeModal .chat-demo-message.chat-effect-galaxy::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(1.5px 1.5px at 22% 30%, #fff, transparent 60%),
      radial-gradient(1px 1px at 62% 22%, #e6ccff, transparent 60%),
      radial-gradient(1.5px 1.5px at 80% 62%, #fff, transparent 60%),
      radial-gradient(1px 1px at 40% 74%, #d9b3ff, transparent 60%);
    animation: cfStar 3s ease-in-out infinite;
}
/* CYBER — horizontal scanlines */
.chat-message-box.chat-effect-cyber,
body #storeModal .chat-demo-message.chat-effect-cyber {
    border: 1.5px solid rgba(100,245,138,.82) !important;
    background: linear-gradient(135deg, rgba(100,245,138,.08), rgba(0,18,8,.92)) !important;
    box-shadow: 0 0 20px rgba(100,245,138,.18), inset 0 0 22px rgba(100,245,138,.06) !important;
}
.chat-message-box.chat-effect-cyber::before,
body #storeModal .chat-demo-message.chat-effect-cyber::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.6;
    background: repeating-linear-gradient(0deg, rgba(100,245,138,.10) 0 1px, transparent 1px 5px);
    animation: ogStoreScan 1.6s linear infinite;
}
/* MATRIX — falling code columns */
.chat-message-box.chat-effect-matrix,
body #storeModal .chat-demo-message.chat-effect-matrix {
    border: 1.5px solid rgba(0,255,90,.7) !important;
    background: linear-gradient(180deg, rgba(0,20,8,.94), rgba(0,8,4,.96)) !important;
    box-shadow: 0 0 18px rgba(0,255,90,.16), inset 0 0 22px rgba(0,255,90,.05) !important;
}
.chat-message-box.chat-effect-matrix::before,
body #storeModal .chat-demo-message.chat-effect-matrix::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
    background: repeating-linear-gradient(90deg, rgba(0,255,90,.12) 0 1px, transparent 1px 11px), linear-gradient(180deg, transparent, rgba(0,255,90,.14));
    background-size: 100% 100%, 100% 60px; background-position: 0 0, 0 0;
    animation: cfFall 1.2s linear infinite;
}
/* SHADOW — elegant vignette */
.chat-message-box.chat-effect-shadow,
body #storeModal .chat-demo-message.chat-effect-shadow {
    border: 1.5px solid rgba(140,120,200,.4) !important;
    background: linear-gradient(135deg, rgba(18,18,30,.96), rgba(6,6,12,.97)) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.5) !important;
}
.chat-message-box.chat-effect-shadow::before,
body #storeModal .chat-demo-message.chat-effect-shadow::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(80% 60% at 50% 0%, rgba(150,130,220,.14), transparent 70%);
}
/* LIGHTNING — flash sweep */
.chat-message-box.chat-effect-lightning,
body #storeModal .chat-demo-message.chat-effect-lightning {
    border: 1.5px solid rgba(255,245,0,.82) !important;
    background: linear-gradient(135deg, rgba(255,245,0,.1), rgba(88,166,255,.05), rgba(9,11,20,.92)) !important;
    box-shadow: 0 0 20px rgba(255,245,0,.2) !important;
}
.chat-message-box.chat-effect-lightning::before,
body #storeModal .chat-demo-message.chat-effect-lightning::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.5) 48%, rgba(255,245,0,.5) 50%, transparent 58%);
    animation: cfFlash 2.6s linear infinite;
}

@media (max-width: 980px) {
    body #storeModal > div > div:nth-of-type(2) {
        grid-template-columns: 1fr !important;
    }
    body #storeModal .store-left-panel {
        position: relative !important;
        top: auto !important;
    }
    body #storeModal .store-tab-bar-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        position: static !important;
    }
    body #storeModal .store-tab {
        min-height: 48px !important;
        font-size: .72rem !important;
    }
}
@media (max-width: 560px) {
    body #storeModal > div {
        padding: 10px !important;
    }
    body #storeModal .store-header-redesign > div:nth-child(2) {
        align-items: flex-start !important;
        gap: 12px !important;
        flex-direction: column !important;
    }
    body #storeModal .store-tab-bar-wrapper {
        grid-template-columns: 1fr !important;
    }
    body #storeModal #storePreviewContainer {
        height: 330px !important;
    }
    body #storeModal #storeTabBackgrounds,
    body #storeModal #storeTabBorders,
    body #storeModal #storeTabEffects,
    body #storeModal #storeTabChatEffects > div:last-child {
        grid-template-columns: 1fr !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    body #storeModal::before,
    body #storeModal .store-header-redesign::before,
    body #storeModal .chat-demo-message[class*="chat-effect-"]::before,
    body #storeModal #storePreviewBorder,
    body #storeModal .chat-message-box[class*="chat-effect-"],
    .chat-message-box[class*="chat-effect-"]::before,
    .chat-message-box[class*="chat-effect-"]::after {
        animation: none !important;
    }
}

/* ============================================================================
   PREMIUM PROFILE FX v3 (2026-07-03) — hand-illustrated SVG scenes + light
   CSS particle overlays. Same class = store preview AND applied profile/chat bg
   (WYSIWYG). cyber=Cyberpunk City, geometry=Ronin's Dusk, lava=Phoenix Volcano,
   galaxy=Cosmic Odyssey. Appended last so it overrides the base ogbg defs.
   ============================================================================ */
body #storeModal .store-preview-el { position:relative; width:100%; height:100%; min-height:120px; border-radius:10px; overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.08); }
.ogbg-cyber, .ogbg-geometry, .ogbg-lava, .ogbg-galaxy { position:relative; overflow:hidden; }
.ogbg-cyber::before,.ogbg-cyber::after,.ogbg-geometry::before,.ogbg-geometry::after,.ogbg-lava::before,.ogbg-lava::after,.ogbg-galaxy::before,.ogbg-galaxy::after { content:""; position:absolute; pointer-events:none; }
.ogbg-cyber { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='cbsky'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23080826'/%3E%3Cstop%20offset='.45'%20stop-color='%2326094a'/%3E%3Cstop%20offset='.78'%20stop-color='%237a1560'/%3E%3Cstop%20offset='1'%20stop-color='%23ff5a8c'/%3E%3C/linearGradient%3E%3CradialGradient%20id='cbmoon'%20cx='.5'%20cy='.5'%20r='.5'%3E%3Cstop%20offset='0'%20stop-color='%23e6faff'/%3E%3Cstop%20offset='.55'%20stop-color='%2379c8ff'/%3E%3Cstop%20offset='1'%20stop-color='%2379c8ff'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpattern%20id='win'%20width='11'%20height='15'%20patternUnits='userSpaceOnUse'%3E%3Crect%20x='2'%20y='2'%20width='3'%20height='4'%20fill='%2300e6ff'%20opacity='.9'/%3E%3Crect%20x='7'%20y='8'%20width='3'%20height='4'%20fill='%23ff3ea5'%20opacity='.8'/%3E%3Crect%20x='2'%20y='9'%20width='2'%20height='3'%20fill='%23ffd24a'%20opacity='.65'/%3E%3C/pattern%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23cbsky)'/%3E%3Ccircle%20cx='372'%20cy='74'%20r='96'%20fill='url(%23cbmoon)'/%3E%3Ccircle%20cx='372'%20cy='74'%20r='40'%20fill='%23e8fbff'/%3E%3Cg%20fill='%23150a38'%20opacity='.85'%3E%3Crect%20x='0'%20y='150'%20width='42'%20height='110'/%3E%3Crect%20x='46'%20y='128'%20width='30'%20height='132'/%3E%3Crect%20x='82'%20y='162'%20width='36'%20height='98'/%3E%3Crect%20x='300'%20y='140'%20width='34'%20height='120'/%3E%3Crect%20x='338'%20y='156'%20width='28'%20height='104'/%3E%3Crect%20x='420'%20y='134'%20width='42'%20height='126'/%3E%3C/g%3E%3Cg%3E%3Crect%20x='150'%20y='98'%20width='56'%20height='162'%20fill='%230b0722'/%3E%3Crect%20x='150'%20y='98'%20width='56'%20height='162'%20fill='url(%23win)'/%3E%3Crect%20x='212'%20y='138'%20width='44'%20height='122'%20fill='%230b0722'/%3E%3Crect%20x='212'%20y='138'%20width='44'%20height='122'%20fill='url(%23win)'/%3E%3Crect%20x='260'%20y='76'%20width='50'%20height='184'%20fill='%230b0722'/%3E%3Crect%20x='260'%20y='76'%20width='50'%20height='184'%20fill='url(%23win)'/%3E%3Crect%20x='58'%20y='172'%20width='42'%20height='88'%20fill='%230b0722'/%3E%3Crect%20x='58'%20y='172'%20width='42'%20height='88'%20fill='url(%23win)'/%3E%3C/g%3E%3Crect%20x='166'%20y='118'%20width='5'%20height='44'%20fill='%23ff2d9a'/%3E%3Crect%20x='278'%20y='96'%20width='4'%20height='58'%20fill='%2300e6ff'/%3E%3Crect%20x='226'%20y='150'%20width='4'%20height='34'%20fill='%23ffd24a'/%3E%3Crect%20x='0'%20y='238'%20width='480'%20height='24'%20fill='%23ff5a8c'%20opacity='.2'/%3E%3Crect%20x='0'%20y='246'%20width='480'%20height='14'%20fill='%230b0722'/%3E%3C/svg%3E") center center / cover no-repeat, #080826 !important; animation:none !important; }
.ogbg-cyber::before { inset:0; background-image: repeating-linear-gradient(104deg, transparent 0 7px, rgba(160,205,255,.13) 7px 8px); background-size:64px 64px; animation: ogRain .55s linear infinite; opacity:.7; z-index:2; }
.ogbg-cyber::after { inset:0; background: radial-gradient(circle at 50% 100%, rgba(255,90,140,.22), transparent 55%); mix-blend-mode:screen; animation: ogNeonFlicker 3.6s ease-in-out infinite; z-index:1; }
@keyframes ogRain { from{background-position:0 0} to{background-position:-20px 64px} }
@keyframes ogNeonFlicker { 0%,100%{opacity:.6} 44%{opacity:.95} 48%{opacity:.5} 52%{opacity:.9} }
.ogbg-geometry { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='sky'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23150a2c'/%3E%3Cstop%20offset='.38'%20stop-color='%233f123f'/%3E%3Cstop%20offset='.64'%20stop-color='%239a1e3c'/%3E%3Cstop%20offset='.85'%20stop-color='%23e05a2c'/%3E%3Cstop%20offset='1'%20stop-color='%23f2c05a'/%3E%3C/linearGradient%3E%3CradialGradient%20id='glow'%20cx='.5'%20cy='.5'%20r='.5'%3E%3Cstop%20offset='0'%20stop-color='%23ffe08a'/%3E%3Cstop%20offset='.4'%20stop-color='%23ff6a38'%20stop-opacity='.75'/%3E%3Cstop%20offset='1'%20stop-color='%23ff6a38'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient%20id='blade'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23dfefff'/%3E%3Cstop%20offset='1'%20stop-color='%239fb8d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23sky)'/%3E%3Ccircle%20cx='236'%20cy='150'%20r='160'%20fill='url(%23glow)'/%3E%3Ccircle%20cx='236'%20cy='150'%20r='74'%20fill='%23ff4a2e'/%3E%3Ccircle%20cx='236'%20cy='150'%20r='74'%20fill='%23c11026'%20opacity='.32'/%3E%3Crect%20x='120'%20y='140'%20width='232'%20height='7'%20rx='3.5'%20fill='%232c0f2e'%20opacity='.6'/%3E%3Crect%20x='150'%20y='162'%20width='176'%20height='6'%20rx='3'%20fill='%232c0f2e'%20opacity='.5'/%3E%3Cpath%20d='M0%20176%20L80%20116%20L152%20168%20L236%2096%20L322%20168%20L404%20120%20L480%20174%20L480%20260%20L0%20260%20Z'%20fill='%23331342'%20opacity='.9'/%3E%3Cg%20fill='%2312061a'%3E%3Crect%20x='92'%20y='150'%20width='9'%20height='84'/%3E%3Crect%20x='150'%20y='150'%20width='9'%20height='84'/%3E%3Cpath%20d='M80%20137%20h83%20l-7%2011%20h-69%20z'/%3E%3Cpath%20d='M74%20133%20h95%20l-5%207%20h-85%20z'/%3E%3Crect%20x='88'%20y='157'%20width='75'%20height='7'/%3E%3C/g%3E%3Cpath%20d='M0%20212%20L96%20178%20L188%20210%20L280%20174%20L378%20210%20L480%20180%20L480%20260%20L0%20260%20Z'%20fill='%23170617'/%3E%3Cg%3E%3Cpath%20d='M300%20178%20L340%20178%20L320%20158%20Z'%20fill='%230c0410'/%3E%3Cpath%20d='M296%20178%20L344%20178%20L338%20184%20L302%20184%20Z'%20fill='%230c0410'/%3E%3Ccircle%20cx='320'%20cy='184'%20r='4'%20fill='%230c0410'/%3E%3Cpath%20d='M309%20188%20L331%20188%20L337%20220%20L303%20220%20Z'%20fill='%230c0410'/%3E%3Cpath%20d='M303%20220%20L314%20220%20L312%20236%20L300%20236%20Z'%20fill='%230c0410'/%3E%3Cpath%20d='M326%20220%20L337%20220%20L340%20236%20L328%20236%20Z'%20fill='%230c0410'/%3E%3Cpath%20d='M331%20194%20L368%20176%20L370%20180%20L333%20199%20Z'%20fill='url(%23blade)'/%3E%3Cpath%20d='M328%20196%20L334%20192%20L338%20198%20L332%20202%20Z'%20fill='%230c0410'/%3E%3C/g%3E%3Crect%20x='0'%20y='232'%20width='480'%20height='28'%20fill='%230c0410'/%3E%3Cg%20fill='%231e0a22'%3E%3Cpath%20d='M40%20232%20q4%20-16%208%200%20z'/%3E%3Cpath%20d='M52%20232%20q3%20-12%206%200%20z'/%3E%3Cpath%20d='M410%20232%20q4%20-18%208%200%20z'/%3E%3Cpath%20d='M422%20232%20q3%20-13%206%200%20z'/%3E%3Cpath%20d='M434%20232%20q4%20-15%208%200%20z'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat, #150a2c !important; animation:none !important; }
.ogbg-geometry::before { inset:0; background-image: radial-gradient(ellipse 5px 3px at 15% 8%, rgba(255,192,216,.95), transparent 62%), radial-gradient(ellipse 4px 2.4px at 44% 26%, rgba(255,166,202,.9), transparent 62%), radial-gradient(ellipse 5px 3px at 71% 14%, rgba(255,204,224,.95), transparent 62%), radial-gradient(ellipse 4px 2.4px at 88% 38%, rgba(255,178,210,.9), transparent 62%), radial-gradient(ellipse 4px 2.4px at 30% 62%, rgba(255,190,214,.85), transparent 62%); background-size:230px 170px; animation: ogSakura 7.5s linear infinite; opacity:.92; z-index:2; }
.ogbg-geometry::after { inset:0; background: radial-gradient(circle at 49% 57%, rgba(255,140,70,.22), transparent 42%); mix-blend-mode:screen; animation: ogRoninFlash 6.5s ease-in-out infinite; z-index:1; }
@keyframes ogSakura { from{background-position:0 0} to{background-position:-46px 170px} }
@keyframes ogRoninFlash { 0%,86%,100%{opacity:.55} 88%,90%{opacity:1; background-color:rgba(198,210,255,.22)} 89%{opacity:.65} }
.ogbg-lava { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='dvsky'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23140406'/%3E%3Cstop%20offset='.5'%20stop-color='%233a0808'/%3E%3Cstop%20offset='.8'%20stop-color='%238a1e0a'/%3E%3Cstop%20offset='1'%20stop-color='%23ff6a1e'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='lavaflow'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ffe36a'/%3E%3Cstop%20offset='.5'%20stop-color='%23ff6a10'/%3E%3Cstop%20offset='1'%20stop-color='%23c81800'/%3E%3C/linearGradient%3E%3CradialGradient%20id='phx'%20cx='.5'%20cy='.4'%20r='.65'%3E%3Cstop%20offset='0'%20stop-color='%23fff3b0'/%3E%3Cstop%20offset='.45'%20stop-color='%23ff9a26'/%3E%3Cstop%20offset='1'%20stop-color='%23ff3c0a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23dvsky)'/%3E%3Cellipse%20cx='232'%20cy='120'%20rx='170'%20ry='80'%20fill='%23ff3800'%20opacity='.26'/%3E%3Cpath%20d='M104%20260%20L232%2092%20L360%20260%20Z'%20fill='%231c0a0a'/%3E%3Cpath%20d='M210%20138%20q22%2020%2044%200%20L248%20104%20q-16%2014%20-32%200%20z'%20fill='url(%23lavaflow)'/%3E%3Cpath%20d='M226%20108%20L240%20108%20L256%20260%20L214%20260%20Z'%20fill='url(%23lavaflow)'%20opacity='.9'/%3E%3Cg%20fill='url(%23phx)'%3E%3Cellipse%20cx='232'%20cy='74'%20rx='7'%20ry='15'/%3E%3Ccircle%20cx='232'%20cy='56'%20r='6'/%3E%3Cpath%20d='M232%2051%20l7%20-7%20l0%208%20z'/%3E%3Cpath%20d='M225%2056%20l-8%20-3%20l8%20-2%20z'/%3E%3Cpath%20d='M226%2072%20C%20188%2056%20172%2036%20166%2014%20C%20190%2030%20208%2042%20222%2056%20C%20210%2038%20206%2022%20208%2010%20C%20220%2032%20228%2048%20230%2064%20Z'/%3E%3Cpath%20d='M238%2072%20C%20276%2056%20292%2036%20298%2014%20C%20274%2030%20256%2042%20242%2056%20C%20254%2038%20258%2022%20256%2010%20C%20244%2032%20236%2048%20234%2064%20Z'/%3E%3Cpath%20d='M232%2090%20C%20224%20116%20210%20132%20196%20148%20C%20214%20140%20224%20128%20231%20114%20C%20232%20132%20229%20146%20222%20158%20C%20238%20146%20245%20124%20243%20104%20C%20250%20126%20251%20144%20244%20160%20C%20258%20142%20260%20116%20250%2094%20Z'/%3E%3C/g%3E%3Cg%20fill='%23080202'%3E%3Cpath%20d='M0%20238%20L70%20222%20L150%20244%20L240%20224%20L330%20246%20L410%20226%20L480%20244%20L480%20260%20L0%20260%20Z'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat, #140406 !important; animation:none !important; }
.ogbg-lava::before { inset:0; background-image: radial-gradient(circle 2px at 30% 92%, #ffb040 70%, transparent), radial-gradient(circle 1.6px at 50% 92%, #ff7020 70%, transparent), radial-gradient(circle 2.4px at 68% 92%, #ffd060 70%, transparent), radial-gradient(circle 1.6px at 44% 92%, #ff5010 70%, transparent), radial-gradient(circle 2px at 80% 92%, #ffa030 70%, transparent); background-size:150px 160px; animation: ogEmbersUp 3.2s linear infinite; z-index:2; }
.ogbg-lava::after { inset:0; background: radial-gradient(circle at 48% 28%, rgba(255,150,40,.28), transparent 42%); mix-blend-mode:screen; animation: ogPhoenixGlow 2.4s ease-in-out infinite; z-index:1; }
@keyframes ogEmbersUp { from{background-position:0 0} to{background-position:24px -160px} }
@keyframes ogPhoenixGlow { 0%,100%{opacity:.55; filter:brightness(1)} 50%{opacity:1; filter:brightness(1.25)} }
.ogbg-galaxy { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3CradialGradient%20id='cospace'%20cx='.35'%20cy='.4'%20r='.9'%3E%3Cstop%20offset='0'%20stop-color='%231a2050'/%3E%3Cstop%20offset='.5'%20stop-color='%230a0a28'/%3E%3Cstop%20offset='1'%20stop-color='%2303030f'/%3E%3C/radialGradient%3E%3CradialGradient%20id='planet'%20cx='.38'%20cy='.34'%20r='.7'%3E%3Cstop%20offset='0'%20stop-color='%23ffb26a'/%3E%3Cstop%20offset='.5'%20stop-color='%23e0662a'/%3E%3Cstop%20offset='1'%20stop-color='%237a1e10'/%3E%3C/radialGradient%3E%3CradialGradient%20id='neb'%20cx='.5'%20cy='.5'%20r='.5'%3E%3Cstop%20offset='0'%20stop-color='%238a3aff'%20stop-opacity='.5'/%3E%3Cstop%20offset='1'%20stop-color='%238a3aff'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23cospace)'/%3E%3Cellipse%20cx='120'%20cy='90'%20rx='120'%20ry='90'%20fill='url(%23neb)'/%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='40'%20cy='40'%20r='1.6'/%3E%3Ccircle%20cx='90'%20cy='70'%20r='1.1'/%3E%3Ccircle%20cx='160'%20cy='30'%20r='1.4'/%3E%3Ccircle%20cx='220'%20cy='60'%20r='1'/%3E%3Ccircle%20cx='300'%20cy='40'%20r='1.6'/%3E%3Ccircle%20cx='360'%20cy='90'%20r='1.1'/%3E%3Ccircle%20cx='60'%20cy='140'%20r='1.2'/%3E%3Ccircle%20cx='200'%20cy='150'%20r='1'/%3E%3Ccircle%20cx='430'%20cy='60'%20r='1.5'/%3E%3Ccircle%20cx='450'%20cy='150'%20r='1.1'/%3E%3Ccircle%20cx='260'%20cy='120'%20r='1.3'/%3E%3C/g%3E%3Cg%20transform='translate(330%20150)%20rotate(-18)'%3E%3Cellipse%20cx='0'%20cy='0'%20rx='96'%20ry='26'%20fill='none'%20stroke='%23c89a6a'%20stroke-width='7'%20opacity='.85'/%3E%3Cellipse%20cx='0'%20cy='0'%20rx='96'%20ry='26'%20fill='none'%20stroke='%23ffd9a0'%20stroke-width='2.5'%20opacity='.6'/%3E%3C/g%3E%3Ccircle%20cx='330'%20cy='150'%20r='52'%20fill='url(%23planet)'/%3E%3Cpath%20d='M330%2098%20a52%2052%200%200%201%200%20104%20a40%2062%200%200%200%200%20-104%20z'%20fill='%233a0f08'%20opacity='.35'/%3E%3Cg%20transform='translate(150%20175)'%3E%3Cpath%20d='M0%200%20L26%20-7%20L34%200%20L26%207%20Z'%20fill='%23cdd6e6'/%3E%3Cpath%20d='M8%20-3%20L22%20-4%20L22%204%20L8%203%20Z'%20fill='%235fd0ff'/%3E%3Cpath%20d='M-2%200%20L-22%20-5%20L-22%205%20Z'%20fill='%23ff6a30'%20opacity='.9'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat, #03030f !important; animation:none !important; }
.ogbg-galaxy::before { inset:0; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1.4px 1.4px at 66% 22%, #fff, transparent), radial-gradient(1px 1px at 82% 58%, #cfe0ff, transparent), radial-gradient(1.2px 1.2px at 40% 72%, #fff, transparent), radial-gradient(1px 1px at 54% 44%, #fff, transparent); animation: ogStarTwinkle 3s ease-in-out infinite; z-index:2; }
.ogbg-galaxy::after { inset:0; background: radial-gradient(circle at 26% 36%, rgba(138,58,255,.22), transparent 46%); mix-blend-mode:screen; animation: ogCosmicDrift 8s ease-in-out infinite; z-index:1; }
@keyframes ogStarTwinkle { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes ogCosmicDrift { 0%,100%{opacity:.6; transform:translateX(0)} 50%{opacity:.95; transform:translateX(8px)} }
@media (prefers-reduced-motion: reduce) { .ogbg-cyber::before,.ogbg-cyber::after,.ogbg-geometry::before,.ogbg-geometry::after,.ogbg-lava,.ogbg-lava::before,.ogbg-lava::after,.ogbg-galaxy::before,.ogbg-galaxy::after { animation:none !important; } }

/* ============================================================================
   PREMIUM PROFILE FX v4 (2026-07-03) — 8 more hand-illustrated SVG scenes
   replacing the abstract canvas backgrounds. Appended last → overrides base defs.
   ============================================================================ */
.ogbg-particles,.ogbg-waves,.ogbg-aurora,.ogbg-stars,.ogbg-plasma,.ogbg-nebula,.ogbg-quantum,.ogbg-matrix { position:relative; overflow:hidden; }
.ogbg-particles::before,.ogbg-particles::after,.ogbg-waves::before,.ogbg-waves::after,.ogbg-aurora::before,.ogbg-aurora::after,.ogbg-stars::before,.ogbg-stars::after,.ogbg-plasma::before,.ogbg-plasma::after,.ogbg-nebula::before,.ogbg-nebula::after,.ogbg-quantum::before,.ogbg-quantum::after,.ogbg-matrix::before,.ogbg-matrix::after { content:""; position:absolute; pointer-events:none; }

.ogbg-particles { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='ap-sky'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23050a24'/%3E%3Cstop%20offset='.6'%20stop-color='%230a2038'/%3E%3Cstop%20offset='1'%20stop-color='%23123044'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='ap-au'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%233affc0'%20stop-opacity='0'/%3E%3Cstop%20offset='.5'%20stop-color='%233affc0'%20stop-opacity='.55'/%3E%3Cstop%20offset='1'%20stop-color='%232a8aff'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23ap-sky)'/%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='40'%20cy='36'%20r='1.4'/%3E%3Ccircle%20cx='120'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='210'%20cy='40'%20r='1.3'/%3E%3Ccircle%20cx='300'%20cy='28'%20r='1'/%3E%3Ccircle%20cx='380'%20cy='44'%20r='1.4'/%3E%3Ccircle%20cx='440'%20cy='30'%20r='1'/%3E%3Ccircle%20cx='80'%20cy='60'%20r='1'/%3E%3Ccircle%20cx='260'%20cy='66'%20r='1.2'/%3E%3C/g%3E%3Ccircle%20cx='398'%20cy='58'%20r='22'%20fill='%23eaf4ff'/%3E%3Ccircle%20cx='398'%20cy='58'%20r='30'%20fill='%23eaf4ff'%20opacity='.18'/%3E%3Cpath%20d='M-20%2090%20Q%20120%2040%20240%20100%20T%20500%2088%20L500%20150%20L-20%20150%20Z'%20fill='url(%23ap-au)'%20opacity='.8'/%3E%3Cpath%20d='M-20%20120%20Q%20160%2070%20320%20130%20T%20500%20118%20L500%20170%20L-20%20170%20Z'%20fill='url(%23ap-au)'%20opacity='.55'/%3E%3Cpath%20d='M0%20210%20L70%20150%20L120%20190%20L180%20140%20L250%20200%20L300%20165%20L360%20205%20L420%20155%20L480%20200%20L480%20260%20L0%20260%20Z'%20fill='%230a1826'/%3E%3Cpath%20d='M180%20140%20L192%20158%20L168%20158%20Z%20M70%20150%20L82%20168%20L58%20168%20Z%20M300%20165%20L312%20182%20L288%20182%20Z'%20fill='%23e8f4ff'%20opacity='.85'/%3E%3Cpath%20d='M0%20224%20L110%20196%20L220%20220%20L330%20198%20L440%20220%20L480%20210%20L480%20260%20L0%20260%20Z'%20fill='%23050e18'/%3E%3C/svg%3E") center center / cover no-repeat, #050a24 !important; animation:none !important; }
.ogbg-particles::before { inset:0; background: linear-gradient(100deg, transparent 20%, rgba(90,255,180,.14) 50%, transparent 80%); background-size:220% 100%; animation: ogAuroraSweep 7s ease-in-out infinite; mix-blend-mode:screen; z-index:1; }
.ogbg-particles::after { inset:0; background-image: radial-gradient(1px 1px at 20% 18%,#fff,transparent),radial-gradient(1.3px 1.3px at 62% 12%,#fff,transparent),radial-gradient(1px 1px at 85% 24%,#dff,transparent),radial-gradient(1px 1px at 40% 26%,#fff,transparent); animation: ogTw 3s ease-in-out infinite; z-index:2; }

.ogbg-waves { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='ts-sky'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%232a1a4a'/%3E%3Cstop%20offset='.4'%20stop-color='%23a03a6a'/%3E%3Cstop%20offset='.7'%20stop-color='%23ff8a4a'/%3E%3Cstop%20offset='1'%20stop-color='%23ffd27a'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='ts-sea'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ffcf7a'/%3E%3Cstop%20offset='.3'%20stop-color='%23e06a4a'/%3E%3Cstop%20offset='1'%20stop-color='%233a1a4a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='150'%20fill='url(%23ts-sky)'/%3E%3Ccircle%20cx='240'%20cy='140'%20r='54'%20fill='%23fff2b0'/%3E%3Ccircle%20cx='240'%20cy='140'%20r='54'%20fill='%23ffb050'%20opacity='.4'/%3E%3Crect%20y='150'%20width='480'%20height='110'%20fill='url(%23ts-sea)'/%3E%3Cg%20fill='%23fff'%20opacity='.55'%3E%3Crect%20x='200'%20y='158'%20width='80'%20height='3'%20rx='1.5'/%3E%3Crect%20x='190'%20y='170'%20width='100'%20height='3'%20rx='1.5'/%3E%3Crect%20x='180'%20y='184'%20width='120'%20height='4'%20rx='2'/%3E%3Crect%20x='170'%20y='202'%20width='140'%20height='4'%20rx='2'/%3E%3Crect%20x='160'%20y='224'%20width='160'%20height='5'%20rx='2.5'/%3E%3C/g%3E%3Cg%20fill='%233a1a4a'%20opacity='.85'%3E%3Cpath%20d='M60%2066%20q8%20-8%2016%200%20q-8%20-3%20-16%200%20z'/%3E%3Cpath%20d='M76%2066%20q8%20-8%2016%200%20q-8%20-3%20-16%200%20z'/%3E%3C/g%3E%3Cg%20fill='%233a1a4a'%20opacity='.75'%3E%3Cpath%20d='M380%2050%20q7%20-7%2014%200%20q-7%20-3%20-14%200%20z'/%3E%3Cpath%20d='M394%2050%20q7%20-7%2014%200%20q-7%20-3%20-14%200%20z'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat, #2a1a4a !important; animation:none !important; }
.ogbg-waves::before { inset:56% 0 0 0; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.07) 9px 11px); background-size:100% 34px; animation: ogWater 2.6s linear infinite; z-index:1; }
.ogbg-waves::after { inset:0; background: radial-gradient(circle at 50% 54%, rgba(255,200,90,.22), transparent 32%); mix-blend-mode:screen; animation: ogPulseSoft 3.4s ease-in-out infinite; z-index:2; }

.ogbg-aurora { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='nw-sky'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%230a0620'/%3E%3Cstop%20offset='1'%20stop-color='%230e2230'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='nw-au'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%237affb0'%20stop-opacity='0'/%3E%3Cstop%20offset='.5'%20stop-color='%235affa0'%20stop-opacity='.6'/%3E%3Cstop%20offset='1'%20stop-color='%23b060ff'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23nw-sky)'/%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='60'%20cy='30'%20r='1.3'/%3E%3Ccircle%20cx='160'%20cy='20'%20r='1'/%3E%3Ccircle%20cx='250'%20cy='34'%20r='1.2'/%3E%3Ccircle%20cx='350'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='430'%20cy='38'%20r='1.3'/%3E%3C/g%3E%3Ccircle%20cx='110'%20cy='50'%20r='18'%20fill='%23eef6ff'/%3E%3Cpath%20d='M-20%2070%20Q%20130%2020%20260%2080%20T%20500%2066%20L500%20150%20L-20%20150%20Z'%20fill='url(%23nw-au)'%20opacity='.85'/%3E%3Cpath%20d='M-20%20100%20Q%20150%2060%20300%20110%20T%20500%2096%20L500%20160%20L-20%20160%20Z'%20fill='url(%23nw-au)'%20opacity='.5'/%3E%3Cg%20fill='%23050d14'%3E%3Cpath%20d='M40%20230%20L58%20175%20L76%20230%20Z'/%3E%3Cpath%20d='M48%20230%20L58%20150%20L68%20230%20Z'/%3E%3Cpath%20d='M110%20235%20L132%20168%20L154%20235%20Z'/%3E%3Cpath%20d='M120%20235%20L132%20140%20L144%20235%20Z'/%3E%3Cpath%20d='M200%20232%20L216%20180%20L232%20232%20Z'/%3E%3Cpath%20d='M208%20232%20L216%20158%20L224%20232%20Z'/%3E%3Cpath%20d='M300%20235%20L324%20165%20L348%20235%20Z'/%3E%3Cpath%20d='M312%20235%20L324%20138%20L336%20235%20Z'/%3E%3Cpath%20d='M400%20232%20L418%20178%20L436%20232%20Z'/%3E%3Cpath%20d='M408%20232%20L418%20152%20L428%20232%20Z'/%3E%3C/g%3E%3Crect%20x='0'%20y='230'%20width='480'%20height='30'%20fill='%23050d14'/%3E%3C/svg%3E") center center / cover no-repeat, #0a0620 !important; animation:none !important; }
.ogbg-aurora::before { inset:0 0 40% 0; background: linear-gradient(100deg, transparent 18%, rgba(120,255,180,.16) 50%, rgba(176,96,255,.12) 70%, transparent 86%); background-size:230% 100%; animation: ogAuroraSweep 6s ease-in-out infinite; mix-blend-mode:screen; z-index:1; }
.ogbg-aurora::after { inset:0; background-image: radial-gradient(1px 1px at 30% 14%,#fff,transparent),radial-gradient(1.2px 1.2px at 70% 10%,#fff,transparent); animation: ogTw 3.4s ease-in-out infinite; z-index:2; }

.ogbg-stars { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3CradialGradient%20id='sf-sky'%20cx='.5'%20cy='.2'%20r='1'%3E%3Cstop%20offset='0'%20stop-color='%231a1a4a'/%3E%3Cstop%20offset='.6'%20stop-color='%230a0a26'/%3E%3Cstop%20offset='1'%20stop-color='%23050512'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23sf-sky)'/%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='40'%20cy='40'%20r='1.6'/%3E%3Ccircle%20cx='90'%20cy='70'%20r='1'/%3E%3Ccircle%20cx='150'%20cy='30'%20r='1.3'/%3E%3Ccircle%20cx='210'%20cy='60'%20r='1'/%3E%3Ccircle%20cx='280'%20cy='36'%20r='1.5'/%3E%3Ccircle%20cx='340'%20cy='72'%20r='1'/%3E%3Ccircle%20cx='400'%20cy='44'%20r='1.4'/%3E%3Ccircle%20cx='450'%20cy='30'%20r='1'/%3E%3Ccircle%20cx='120'%20cy='100'%20r='1'/%3E%3Ccircle%20cx='300'%20cy='110'%20r='1.2'/%3E%3Ccircle%20cx='60'%20cy='130'%20r='1'/%3E%3C/g%3E%3Cg%20stroke='%23fff'%20stroke-linecap='round'%3E%3Cline%20x1='120'%20y1='30'%20x2='160'%20y2='60'%20stroke-width='2'%20opacity='.9'/%3E%3Cline%20x1='108'%20y1='24'%20x2='124'%20y2='34'%20stroke-width='1'%20opacity='.4'/%3E%3Cline%20x1='330'%20y1='50'%20x2='360'%20y2='72'%20stroke-width='1.6'%20opacity='.8'/%3E%3Cline%20x1='400'%20y1='90'%20x2='424'%20y2='108'%20stroke-width='1.4'%20opacity='.7'/%3E%3C/g%3E%3Cpath%20d='M0%20200%20L120%20150%20L240%20195%20L360%20155%20L480%20200%20L480%20260%20L0%20260%20Z'%20fill='%230a0a1e'/%3E%3Cg%20fill='%2305050f'%3E%3Cpath%20d='M300%20172%20L308%20130%20L316%20172%20Z'/%3E%3Crect%20x='305'%20y='166'%20width='6'%20height='20'/%3E%3C/g%3E%3Cpath%20d='M0%20220%20L160%20190%20L320%20216%20L480%20192%20L480%20260%20L0%20260%20Z'%20fill='%23050510'/%3E%3C/svg%3E") center center / cover no-repeat, #0a0a26 !important; animation:none !important; }
.ogbg-stars::before { inset:0; background-image: radial-gradient(1px 1px at 24% 20%,#fff,transparent),radial-gradient(1.4px 1.4px at 58% 16%,#fff,transparent),radial-gradient(1px 1px at 80% 30%,#dff,transparent),radial-gradient(1px 1px at 44% 40%,#fff,transparent); animation: ogTw 2.6s ease-in-out infinite; z-index:1; }
.ogbg-stars::after { inset:0; background: linear-gradient(118deg, transparent 44%, rgba(255,255,255,.55) 49%, transparent 53%); background-size:280% 280%; background-position:120% -20%; animation: ogShoot 4s ease-in infinite; z-index:2; }

.ogbg-plasma { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='tp-sky'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%231a0a30'/%3E%3Cstop%20offset='.6'%20stop-color='%232a1050'/%3E%3Cstop%20offset='1'%20stop-color='%230a0518'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23tp-sky)'/%3E%3Cellipse%20cx='260'%20cy='80'%20rx='150'%20ry='60'%20fill='%237a4aff'%20opacity='.2'/%3E%3Cpath%20d='M0%20210%20L120%2090%20L200%20210%20Z'%20fill='%230e0820'/%3E%3Cpath%20d='M150%20210%20L300%2060%20L440%20210%20Z'%20fill='%2315092e'/%3E%3Cpath%20d='M300%2060%20L318%2096%20L296%2092%20L308%20126%20L286%20116%20L300%20156'%20fill='none'%20stroke='%23eaf0ff'%20stroke-width='3'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M300%2060%20L318%2096%20L296%2092%20L308%20126%20L286%20116%20L300%20156'%20fill='none'%20stroke='%23b98cff'%20stroke-width='7'%20stroke-linejoin='round'%20stroke-linecap='round'%20opacity='.4'/%3E%3Cg%20stroke='rgba(180,200,255,.35)'%20stroke-width='1'%3E%3Cline%20x1='60'%20y1='0'%20x2='40'%20y2='260'/%3E%3Cline%20x1='180'%20y1='0'%20x2='160'%20y2='260'/%3E%3Cline%20x1='340'%20y1='0'%20x2='320'%20y2='260'/%3E%3Cline%20x1='440'%20y1='0'%20x2='420'%20y2='260'/%3E%3C/g%3E%3Crect%20x='0'%20y='206'%20width='480'%20height='54'%20fill='%2308040f'/%3E%3C/svg%3E") center center / cover no-repeat, #1a0a30 !important; animation:none !important; }
.ogbg-plasma::before { inset:0; background-image: repeating-linear-gradient(100deg, transparent 0 8px, rgba(180,200,255,.12) 8px 9px); background-size:70px 70px; animation: ogRain2 .5s linear infinite; opacity:.6; z-index:1; }
.ogbg-plasma::after { inset:0; background: radial-gradient(ellipse at 55% 20%, rgba(200,180,255,.5), transparent 55%); mix-blend-mode:screen; animation: ogFlash 4s ease-in-out infinite; z-index:2; }

.ogbg-nebula { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3CradialGradient%20id='nd-a'%20cx='.5'%20cy='.5'%20r='.5'%3E%3Cstop%20offset='0'%20stop-color='%23ff4aa0'%20stop-opacity='.6'/%3E%3Cstop%20offset='1'%20stop-color='%23ff4aa0'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient%20id='nd-b'%20cx='.5'%20cy='.5'%20r='.5'%3E%3Cstop%20offset='0'%20stop-color='%234a7aff'%20stop-opacity='.55'/%3E%3Cstop%20offset='1'%20stop-color='%234a7aff'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient%20id='nd-c'%20cx='.5'%20cy='.5'%20r='.5'%3E%3Cstop%20offset='0'%20stop-color='%23a04aff'%20stop-opacity='.5'/%3E%3Cstop%20offset='1'%20stop-color='%23a04aff'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='%2304030f'/%3E%3Cellipse%20cx='150'%20cy='110'%20rx='170'%20ry='120'%20fill='url(%23nd-c)'/%3E%3Cellipse%20cx='320'%20cy='90'%20rx='150'%20ry='100'%20fill='url(%23nd-a)'/%3E%3Cellipse%20cx='260'%20cy='180'%20rx='160'%20ry='90'%20fill='url(%23nd-b)'/%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='40'%20cy='40'%20r='1.4'/%3E%3Ccircle%20cx='110'%20cy='80'%20r='1'/%3E%3Ccircle%20cx='200'%20cy='40'%20r='1.2'/%3E%3Ccircle%20cx='300'%20cy='60'%20r='1'/%3E%3Ccircle%20cx='380'%20cy='36'%20r='1.5'/%3E%3Ccircle%20cx='440'%20cy='90'%20r='1'/%3E%3Ccircle%20cx='90'%20cy='150'%20r='1'/%3E%3Ccircle%20cx='240'%20cy='120'%20r='1.2'/%3E%3Ccircle%20cx='360'%20cy='160'%20r='1'/%3E%3Ccircle%20cx='420'%20cy='200'%20r='1.3'/%3E%3C/g%3E%3Ccircle%20cx='380'%20cy='200'%20r='24'%20fill='%23c88a5a'/%3E%3Ccircle%20cx='372'%20cy='192'%20r='24'%20fill='%23a86838'%20opacity='.5'/%3E%3Cg%3E%3Ccircle%20cx='120'%20cy='70'%20r='4'%20fill='%23eaf6ff'/%3E%3Cpath%20d='M124%2072%20L210%20110%20L124%2068%20Z'%20fill='%239fd0ff'%20opacity='.8'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat, #04030f !important; animation:none !important; }
.ogbg-nebula::before { inset:0; background-image: radial-gradient(1px 1px at 20% 22%,#fff,transparent),radial-gradient(1.3px 1.3px at 66% 16%,#fff,transparent),radial-gradient(1px 1px at 84% 34%,#cdf,transparent),radial-gradient(1px 1px at 40% 48%,#fff,transparent); animation: ogTw 3.2s ease-in-out infinite; z-index:2; }
.ogbg-nebula::after { inset:0; background: radial-gradient(circle at 30% 40%, rgba(160,74,255,.16), transparent 48%); mix-blend-mode:screen; animation: ogDriftSoft 9s ease-in-out infinite; z-index:1; }

.ogbg-quantum { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3CradialGradient%20id='qr-bg'%20cx='.5'%20cy='.5'%20r='.7'%3E%3Cstop%20offset='0'%20stop-color='%230a2a3a'/%3E%3Cstop%20offset='1'%20stop-color='%2303030f'/%3E%3C/radialGradient%3E%3CradialGradient%20id='qr-core'%20cx='.5'%20cy='.5'%20r='.5'%3E%3Cstop%20offset='0'%20stop-color='%23eaffff'/%3E%3Cstop%20offset='.4'%20stop-color='%233affe0'/%3E%3Cstop%20offset='1'%20stop-color='%2300a0ff'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width='480'%20height='260'%20fill='url(%23qr-bg)'/%3E%3Cg%20fill='none'%20stroke='%233affe0'%3E%3Cellipse%20cx='240'%20cy='130'%20rx='150'%20ry='96'%20stroke-width='2'%20opacity='.2'/%3E%3Cellipse%20cx='240'%20cy='130'%20rx='115'%20ry='72'%20stroke-width='2.5'%20opacity='.35'/%3E%3Cellipse%20cx='240'%20cy='130'%20rx='82'%20ry='50'%20stroke-width='3'%20opacity='.55'/%3E%3Cellipse%20cx='240'%20cy='130'%20rx='52'%20ry='32'%20stroke-width='3'%20stroke='%238affff'%20opacity='.8'/%3E%3C/g%3E%3Cellipse%20cx='240'%20cy='130'%20rx='40'%20ry='24'%20fill='url(%23qr-core)'/%3E%3Cg%20fill='%238affff'%3E%3Crect%20x='120'%20y='60'%20width='10'%20height='10'%20transform='rotate(20%20125%2065)'%20opacity='.7'/%3E%3Crect%20x='360'%20y='180'%20width='12'%20height='12'%20transform='rotate(-15%20366%20186)'%20opacity='.6'/%3E%3Crect%20x='90'%20y='190'%20width='8'%20height='8'%20transform='rotate(30%2094%20194)'%20opacity='.6'/%3E%3Crect%20x='380'%20y='60'%20width='9'%20height='9'%20transform='rotate(10%20384%2064)'%20opacity='.55'/%3E%3C/g%3E%3Cg%20fill='%23eafcff'%3E%3Ccircle%20cx='160'%20cy='110'%20r='1.6'/%3E%3Ccircle%20cx='320'%20cy='150'%20r='1.6'/%3E%3Ccircle%20cx='210'%20cy='190'%20r='1.4'/%3E%3Ccircle%20cx='290'%20cy='80'%20r='1.4'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat, #03030f !important; animation:none !important; }
.ogbg-quantum::before { inset:0; background: conic-gradient(from 0deg at 50% 50%, transparent 0 12%, rgba(58,255,224,.28) 16%, transparent 20% 60%, rgba(58,255,224,.2) 64%, transparent 68%); animation: ogSpin2 6s linear infinite; mix-blend-mode:screen; z-index:1; }
.ogbg-quantum::after { inset:0; background: radial-gradient(circle at 50% 50%, rgba(138,255,255,.4), transparent 22%); mix-blend-mode:screen; animation: ogPulseSoft 2s ease-in-out infinite; z-index:2; }

.ogbg-matrix { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20260'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Crect%20width='480'%20height='260'%20fill='%23020805'/%3E%3Cg%20font-family='monospace'%20font-size='13'%20font-weight='700'%3E%3Ctext%20x='24'%20y='30'%20fill='%230aff5a'%20opacity='.35'%3E1%3C/text%3E%3Ctext%20x='24'%20y='52'%20fill='%230aff5a'%20opacity='.5'%3E0%3C/text%3E%3Ctext%20x='24'%20y='74'%20fill='%230aff5a'%20opacity='.7'%3E1%3C/text%3E%3Ctext%20x='24'%20y='96'%20fill='%237dffb0'%3E1%3C/text%3E%3Ctext%20x='24'%20y='118'%20fill='%23eaffea'%3E0%3C/text%3E%3Ctext%20x='70'%20y='40'%20fill='%230aff5a'%20opacity='.4'%3E0%3C/text%3E%3Ctext%20x='70'%20y='62'%20fill='%230aff5a'%20opacity='.6'%3E1%3C/text%3E%3Ctext%20x='70'%20y='84'%20fill='%237dffb0'%3E0%3C/text%3E%3Ctext%20x='70'%20y='106'%20fill='%23eaffea'%3E1%3C/text%3E%3Ctext%20x='116'%20y='24'%20fill='%230aff5a'%20opacity='.35'%3E1%3C/text%3E%3Ctext%20x='116'%20y='46'%20fill='%230aff5a'%20opacity='.55'%3E1%3C/text%3E%3Ctext%20x='116'%20y='68'%20fill='%230aff5a'%20opacity='.75'%3E0%3C/text%3E%3Ctext%20x='116'%20y='90'%20fill='%23eaffea'%3E1%3C/text%3E%3Ctext%20x='166'%20y='50'%20fill='%230aff5a'%20opacity='.4'%3E0%3C/text%3E%3Ctext%20x='166'%20y='72'%20fill='%230aff5a'%20opacity='.65'%3E0%3C/text%3E%3Ctext%20x='166'%20y='94'%20fill='%237dffb0'%3E1%3C/text%3E%3Ctext%20x='166'%20y='116'%20fill='%23eaffea'%3E0%3C/text%3E%3Ctext%20x='214'%20y='34'%20fill='%230aff5a'%20opacity='.4'%3E1%3C/text%3E%3Ctext%20x='214'%20y='56'%20fill='%230aff5a'%20opacity='.6'%3E0%3C/text%3E%3Ctext%20x='214'%20y='78'%20fill='%237dffb0'%3E1%3C/text%3E%3Ctext%20x='214'%20y='100'%20fill='%23eaffea'%3E1%3C/text%3E%3Ctext%20x='262'%20y='44'%20fill='%230aff5a'%20opacity='.35'%3E0%3C/text%3E%3Ctext%20x='262'%20y='66'%20fill='%230aff5a'%20opacity='.6'%3E1%3C/text%3E%3Ctext%20x='262'%20y='88'%20fill='%237dffb0'%3E0%3C/text%3E%3Ctext%20x='310'%20y='28'%20fill='%230aff5a'%20opacity='.4'%3E1%3C/text%3E%3Ctext%20x='310'%20y='50'%20fill='%230aff5a'%20opacity='.6'%3E1%3C/text%3E%3Ctext%20x='310'%20y='72'%20fill='%237dffb0'%3E0%3C/text%3E%3Ctext%20x='310'%20y='94'%20fill='%23eaffea'%3E1%3C/text%3E%3Ctext%20x='358'%20y='54'%20fill='%230aff5a'%20opacity='.45'%3E0%3C/text%3E%3Ctext%20x='358'%20y='76'%20fill='%230aff5a'%20opacity='.7'%3E1%3C/text%3E%3Ctext%20x='358'%20y='98'%20fill='%23eaffea'%3E0%3C/text%3E%3Ctext%20x='406'%20y='36'%20fill='%230aff5a'%20opacity='.4'%3E1%3C/text%3E%3Ctext%20x='406'%20y='58'%20fill='%230aff5a'%20opacity='.6'%3E0%3C/text%3E%3Ctext%20x='406'%20y='80'%20fill='%237dffb0'%3E1%3C/text%3E%3Ctext%20x='406'%20y='102'%20fill='%23eaffea'%3E1%3C/text%3E%3Ctext%20x='450'%20y='46'%20fill='%230aff5a'%20opacity='.4'%3E0%3C/text%3E%3Ctext%20x='450'%20y='68'%20fill='%230aff5a'%20opacity='.65'%3E1%3C/text%3E%3Ctext%20x='450'%20y='90'%20fill='%23eaffea'%3E0%3C/text%3E%3C/g%3E%3Crect%20width='480'%20height='260'%20fill='url(%23mr-fade)'/%3E%3Cdefs%3E%3ClinearGradient%20id='mr-fade'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23020805'%20stop-opacity='.5'/%3E%3Cstop%20offset='.4'%20stop-color='%23020805'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center center / cover no-repeat, #020805 !important; animation:none !important; }
.ogbg-matrix::before { inset:0; background-image: repeating-linear-gradient(180deg, rgba(10,255,90,0) 0 16px, rgba(10,255,90,.18) 18px 26px, rgba(10,255,90,0) 30px 46px); background-size:100% 130px; animation: ogMatrix 1.4s linear infinite; z-index:1; }
.ogbg-matrix::after { inset:0; background: linear-gradient(180deg, rgba(2,8,5,.55), transparent 42%); z-index:2; }

@keyframes ogAuroraSweep { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes ogTw { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes ogWater { from{background-position:0 0} to{background-position:0 34px} }
@keyframes ogPulseSoft { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes ogShoot { 0%,70%,100%{background-position:120% -20%; opacity:0} 78%{opacity:1} 86%{background-position:-40% 60%; opacity:0} }
@keyframes ogRain2 { from{background-position:0 0} to{background-position:-16px 70px} }
@keyframes ogFlash { 0%,90%,100%{opacity:0} 92%,94%{opacity:.8} 93%{opacity:.3} }
@keyframes ogDriftSoft { 0%,100%{opacity:.6; transform:translateX(0)} 50%{opacity:.95; transform:translateX(10px)} }
@keyframes ogSpin2 { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ogMatrix { from{background-position:0 0} to{background-position:0 130px} }
@media (prefers-reduced-motion: reduce){ .ogbg-particles::before,.ogbg-particles::after,.ogbg-waves::before,.ogbg-waves::after,.ogbg-aurora::before,.ogbg-aurora::after,.ogbg-stars::before,.ogbg-stars::after,.ogbg-plasma::before,.ogbg-plasma::after,.ogbg-nebula::before,.ogbg-nebula::after,.ogbg-quantum::before,.ogbg-quantum::after,.ogbg-matrix::before,.ogbg-matrix::after{animation:none !important} }

/* ══════════════════════════════════════════════════════════════════════════
   CROSS-BROWSER CONSISTENCY — store premium borders (.ogbd-*)
   Every rule below is @supports/@media-gated, so it NEVER changes how a modern
   browser already paints these rings; it only adds a clean, consistent fallback
   where a CSS feature is missing — so the border looks the same on every browser
   version instead of vanishing or rendering "crazy" ("igual pra todos").
   ══════════════════════════════════════════════════════════════════════════ */

/* No conic-gradient support (pre-2020 Safari/Firefox/Chrome, some in-app webviews)
   → the ring background would be empty. Give each border a themed linear-gradient
   so it still reads as fire/ice/gold/etc. and stays consistent for everyone. The
   annulus mask + ::before glow still apply, so it remains a proper ring. */
@supports not (background: conic-gradient(from 0deg, #000, #000)) {
  .ogbd-fire      { background: linear-gradient(135deg,#ff3a00,#ffd24a,#ff3a00) !important; }
  .ogbd-ice       { background: linear-gradient(135deg,#39b6ff,#eafcff,#39b6ff) !important; }
  .ogbd-gold      { background: linear-gradient(135deg,#c9952b,#fff6d8,#c9952b) !important; }
  .ogbd-rainbow   { background: linear-gradient(135deg,#ff2d62,#ffd74a,#44ffe8,#9b6bff) !important; }
  .ogbd-neon      { background: linear-gradient(135deg,#0affff,#ff2df0,#0affff) !important; }
  .ogbd-lightning { background: linear-gradient(135deg,#fff500,#8ab4ff,#fff500) !important; }
  .ogbd-void      { background: linear-gradient(135deg,#9b6bff,#1a0634,#9b6bff) !important; }
  [class*="ogbd-"]::after { display: none !important; } /* detail layers depend on conic */
}

/* Honour reduced-motion: hold the ring still for users who ask for it (a11y + a
   calmer, consistent look). The static ring itself stays. */
@media (prefers-reduced-motion: reduce) {
  [class*="ogbd-"],
  [class*="ogbd-"]::before,
  [class*="ogbd-"]::after { animation: none !important; }
}