/* ============================================================
   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-*)
   ============================================================ */
.profile-border-effect[class*="ogbd-"] {
    border-radius: 50%;
    opacity: 1 !important;
}
.ogbd-fire {
    background: conic-gradient(from 0deg, #ff4500, #ff8c00, #ffd700, #ff8c00, #ff4500) !important;
    animation: ogSpin 1.6s linear infinite, ogPulseGlow .6s ease-in-out infinite !important;
    filter: blur(14px) !important;
    box-shadow: 0 0 38px rgba(255,69,0,.8), 0 0 70px rgba(255,140,0,.5);
}
.ogbd-ice {
    background: conic-gradient(from 0deg, #7fdbff, #d6f5ff, #00b7ff, #d6f5ff, #7fdbff) !important;
    animation: ogSpin 3s linear infinite !important;
    filter: blur(13px) !important;
    box-shadow: 0 0 34px rgba(0,183,255,.7), 0 0 64px rgba(170,230,255,.45);
}
.ogbd-rainbow {
    background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) !important;
    animation: ogSpin 1.5s linear infinite !important;
    filter: blur(12px) !important;
    box-shadow: 0 0 30px rgba(255,0,255,.5), 0 0 60px rgba(0,255,255,.3);
}
.ogbd-neon {
    background: linear-gradient(45deg, #00f0ff, #ff00ff, #00f0ff) !important;
    background-size: 200% 200%;
    animation: ogShimmer 2s linear infinite, ogPulseGlow 1.5s ease-in-out infinite !important;
    filter: blur(14px) !important;
    box-shadow: 0 0 32px #00f0ff, 0 0 60px #ff00ff;
}
.ogbd-gold {
    background: conic-gradient(from 0deg, #f5c451, #fff1b8, #c9952b, #fff1b8, #f5c451) !important;
    animation: ogSpin 2.4s linear infinite !important;
    filter: blur(12px) !important;
    box-shadow: 0 0 34px rgba(245,196,81,.8), 0 0 66px rgba(201,149,43,.5);
}
.ogbd-lightning {
    background: conic-gradient(from 0deg, #fff500, #ffffff, #aab4ff, #fff500) !important;
    animation: ogSpin 1.2s linear infinite, ogPulseGlow .35s ease-in-out infinite !important;
    filter: blur(11px) !important;
    box-shadow: 0 0 30px rgba(255,245,0,.8), 0 0 60px rgba(160,180,255,.5);
}
.ogbd-void {
    background: radial-gradient(circle, rgba(120,0,200,.9) 0 40%, rgba(20,0,40,.9) 70%), conic-gradient(from 0deg, #6400c8, #1a0033, #9b00ff, #1a0033, #6400c8) !important;
    animation: ogSpin 4s linear infinite !important;
    filter: blur(15px) !important;
    box-shadow: 0 0 34px rgba(120,0,200,.7), 0 0 70px rgba(60,0,120,.5);
}

/* ============================================================
   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-border-effect[class*="ogbd-"] { animation: none !important; }
}