/* NUYED - Neo Cyber UI custom styles */

:root {
    --gx-bg: #070A13;
    --gx-surface: #171F31;
    --gx-electric: #2388FF;
    --gx-cyan: #00E5FF;
    --gx-purple: #6D28FF;
    --gx-text: #FFFFFF;
    --gx-muted: #B6C2D1;
    --gx-border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

html, body {
    background: var(--gx-bg);
    color: var(--gx-text);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.3); }

/* Selection */
::selection { background: rgba(0, 229, 255, 0.25); color: var(--gx-text); }

/* Glass card */
.gx-glass {
    background: rgba(20, 20, 20, 0.45);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

.gx-glass-strong {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Holographic shimmer text */
.gx-holo-text {
    background: linear-gradient(90deg, var(--gx-cyan), var(--gx-electric), var(--gx-purple), var(--gx-cyan));
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gx-shimmer 6s linear infinite;
}

@keyframes gx-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Cyber border glow */
.gx-border-glow {
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.gx-border-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--gx-cyan), var(--gx-electric), var(--gx-purple));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
}

/* Hover lift */
.gx-hover-lift { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; }
.gx-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 229, 255, 0.15); }

/* Card spotlight */
.gx-spotlight { position: relative; overflow: hidden; }
.gx-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0,229,255,0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.gx-spotlight:hover::after { opacity: 1; }

/* Buttons */
.gx-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--gx-electric), var(--gx-cyan));
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gx-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
}

.gx-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--gx-text);
    transition: all 0.2s;
}
.gx-btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(0, 229, 255, 0.3); }

/* Inputs */
.gx-input {
    width: 100%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--gx-text);
    transition: all 0.2s;
}
.gx-input:focus { outline: none; border-color: var(--gx-cyan); box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15); }

/* Loading dots */
.gx-loader { display: inline-flex; gap: 4px; align-items: center; }
.gx-loader span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gx-cyan);
    animation: gx-bounce 1.2s infinite ease-in-out both;
}
.gx-loader span:nth-child(1) { animation-delay: -0.32s; }
.gx-loader span:nth-child(2) { animation-delay: -0.16s; }
@keyframes gx-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* Reveal animation (used with Intersection Observer) */
.gx-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.gx-reveal.gx-revealed { opacity: 1; transform: translateY(0); }

/* Tier badge colors */
.gx-tier-bronze { color: #CD7F32; background: rgba(205, 127, 50, 0.1); }
.gx-tier-silver { color: #C0C0C0; background: rgba(192, 192, 192, 0.1); }
.gx-tier-gold { color: #FFD700; background: rgba(255, 215, 0, 0.1); }
.gx-tier-platinum { color: #E5E4E2; background: rgba(229, 228, 226, 0.1); }
.gx-tier-diamond { color: #B9F2FF; background: rgba(185, 242, 255, 0.15); }

/* Game card hover */
.gx-game-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.gx-game-card:hover { transform: translateY(-6px) scale(1.02); }
.gx-game-card:hover img { transform: scale(1.08); }
.gx-game-card img { transition: transform 0.6s; }

/* Marketplace category tree (collapsible groups) */
.gx-mp-children{ max-height:0; transition:max-height .28s ease; }
.gx-mp-group.open .gx-mp-children{ max-height:600px; }
.gx-mp-group .gx-mp-toggle i{ transition:transform .25s; }
.gx-mp-group.open .gx-mp-toggle i{ transform:rotate(180deg); }

/* Forum threads-first UI */
.gx-forum-tab{ padding:.5rem 1.1rem; border-radius:999px; font-family:'Outfit',sans-serif; font-weight:600; font-size:.85rem; color:#9AA7BD; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); transition:all .18s; }
.gx-forum-tab:hover{ color:#fff; }
.gx-forum-tab.is-active{ color:#04121d; background:linear-gradient(135deg,#00E5FF,#2388FF); border-color:transparent; box-shadow:0 0 18px rgba(0,229,255,.35); }
.gx-forum-grp-children{ max-height:0; transition:max-height .28s ease; }
.gx-forum-group.open .gx-forum-grp-children{ max-height:400px; }
.gx-forum-group.open .gx-forum-grp-ic{ transform:rotate(180deg); }

/* Forum category color accent */
.gx-cat-accent { position: relative; }
.gx-cat-accent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-color, var(--gx-cyan)); border-radius: 2px; }

/* ============================================================
   Sidebar 2.0 — logo, dual-state collapse, flyout/dropdown nav
   ============================================================ */
.gx-sidebar{
    position:fixed; left:0; top:0; z-index:40; height:100vh; width:16rem;
    display:flex; flex-direction:column;
    background:linear-gradient(180deg,#070C18 0%,#05101E 100%);
    border-right:1px solid rgba(255,255,255,0.06);
    transform:translateX(-100%);
    transition:width .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
}
@media(min-width:768px){ .gx-sidebar{ transform:translateX(0); } }
#gx-sidebar.gx-mobile-open{ transform:translateX(0); box-shadow:0 0 60px rgba(0,229,255,.25); }

.gx-sidebar-head{
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    height:4rem; padding:0 .9rem; border-bottom:1px solid rgba(255,255,255,0.06);
}
.gx-logo-wrap{ display:flex; align-items:center; gap:.6rem; min-width:0; text-decoration:none; }
.gx-logo-img{ height:30px; width:auto; max-width:150px; display:none; }
.gx-logo-iconimg{ height:32px; width:32px; object-fit:contain; display:none; }
.gx-logo-wrap.has-logo .gx-logo-img{ display:block; }
.gx-logo-wrap.has-logo .gx-logo-badge,
.gx-logo-wrap.has-logo .gx-logo-word{ display:none; }
.gx-logo-badge{
    width:34px; height:34px; flex-shrink:0; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Outfit',sans-serif; font-weight:900; font-size:1.1rem; color:#04121d;
    background:linear-gradient(135deg,#2388FF,#00E5FF);
    box-shadow:0 0 22px rgba(0,229,255,.5);
}
.gx-logo-word{ font-family:'Outfit',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:.12em; color:#fff; white-space:nowrap; }

.gx-collapse-btn{
    flex-shrink:0; width:32px; height:32px; border-radius:9px; display:none;
    align-items:center; justify-content:center; color:#7E8BA3;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
    transition:all .2s; cursor:pointer;
}
@media(min-width:768px){ .gx-collapse-btn{ display:flex; } }
.gx-collapse-btn:hover{ color:#00E5FF; border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.08); }
.gx-collapse-ic{ width:18px; height:18px; transition:transform .3s; }

.gx-sidebar-nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:.75rem .55rem; display:flex; flex-direction:column; gap:2px; }
.gx-sidebar-nav::-webkit-scrollbar{ width:5px; }

.gx-nav-link{
    position:relative; display:flex; align-items:center; gap:.75rem; width:100%;
    padding:.6rem .7rem; border-radius:.7rem; color:#9AA7BD; text-align:left;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:.875rem; font-weight:500;
    background:transparent; border:0; cursor:pointer; transition:color .18s, background .18s;
}
.gx-nav-ic-wrap{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:22px; height:22px; }
.gx-nav-ic{ width:20px; height:20px; }
.gx-nav-label{ white-space:nowrap; overflow:hidden; }
.gx-nav-link:hover{ color:#fff; background:rgba(255,255,255,0.04); }
.gx-nav-link.is-active{ color:#00E5FF; background:linear-gradient(90deg,rgba(0,229,255,.12),rgba(0,229,255,0)); }
.gx-nav-link.is-active::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; border-radius:3px; background:#00E5FF; box-shadow:0 0 10px #00E5FF; }
.gx-nav-admin{ color:#A78BFA; }
.gx-nav-admin:hover{ color:#C4B5FD; background:rgba(109,40,255,.08); }

.gx-sub-chevron{ width:15px; height:15px; margin-left:auto; transition:transform .25s; opacity:.7; }
.gx-nav-item.open > .gx-sub-toggle .gx-sub-chevron{ transform:rotate(180deg); }

.gx-nav-item{ display:flex; flex-direction:column; }
.gx-submenu{ display:flex; flex-direction:column; overflow:hidden; max-height:0; transition:max-height .28s ease; padding-left:2.4rem; }
.gx-nav-item.open > .gx-submenu{ max-height:360px; }
.gx-submenu-title{ display:none; }
.gx-submenu-link{
    position:relative; padding:.42rem .6rem; border-radius:.5rem; color:#8190A6;
    font-size:.8rem; font-family:'Plus Jakarta Sans',sans-serif; transition:color .15s,background .15s;
}
.gx-submenu-link::before{ content:''; position:absolute; left:.1rem; top:50%; width:5px; height:5px; border-radius:50%; background:currentColor; transform:translateY(-50%); opacity:.4; }
.gx-submenu-link:hover{ color:#fff; background:rgba(255,255,255,0.04); }
.gx-submenu-link.is-active{ color:#00E5FF; }

.gx-nav-divider{ margin:.6rem .3rem .3rem; padding-top:.6rem; border-top:1px solid rgba(255,255,255,0.06); }
.gx-nav-section{ font-family:'Outfit',sans-serif; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:#5B6678; }

/* ===== Wallet card — professional, ultra-modern ===== */
.gx-wallet-card{
    position:relative; display:block; margin:.65rem; padding:1px; border-radius:1.15rem; text-decoration:none;
    overflow:hidden; isolation:isolate;
    background:linear-gradient(135deg,rgba(0,229,255,.55),rgba(109,40,255,.45) 45%,rgba(0,229,255,.15));
    box-shadow:0 10px 30px -12px rgba(0,229,255,.35), 0 2px 8px rgba(0,0,0,.4);
    transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.gx-wallet-card::before{
    content:''; position:absolute; inset:1px; border-radius:calc(1.15rem - 1px); z-index:-1;
    background:radial-gradient(120% 120% at 0% 0%, rgba(0,229,255,.18), transparent 55%), linear-gradient(160deg,#0B1524 0%,#0A1120 60%,#0C0F1E 100%);
}
.gx-wallet-card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(0,229,255,.5), 0 4px 12px rgba(0,0,0,.5); }
.gx-wallet-inner{ position:relative; padding:.85rem .95rem .8rem; }
.gx-wallet-shine{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:0; }
.gx-wallet-shine::after{
    content:''; position:absolute; top:-60%; left:-30%; width:60%; height:220%;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);
    transform:translateX(-120%) rotate(8deg); transition:transform .8s ease;
}
.gx-wallet-card:hover .gx-wallet-shine::after{ transform:translateX(320%) rotate(8deg); }
.gx-wallet-top{ position:relative; z-index:1; display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; }
.gx-wallet-coin{
    width:30px; height:30px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#00E5FF,#2388FF); color:#04121d; box-shadow:0 0 16px rgba(0,229,255,.45);
}
.gx-wallet-coin svg{ width:17px; height:17px; }
.gx-wallet-label{ font-family:'Outfit',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9FB0C6; }
.gx-wallet-live{ margin-left:auto; width:7px; height:7px; border-radius:50%; background:#19E58C; box-shadow:0 0 0 3px rgba(25,229,140,.15); animation:gxWalletPulse 2s ease-in-out infinite; }
@keyframes gxWalletPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(25,229,140,.15);} 50%{ box-shadow:0 0 0 5px rgba(25,229,140,.05);} }
.gx-wallet-balance{ position:relative; z-index:1; display:flex; align-items:baseline; gap:.3rem; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.6rem; line-height:1;
    background:linear-gradient(90deg,#fff,#B8ECFF 60%,#79D0FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gx-wallet-balance .gx-wallet-unit{ font-family:'Outfit',sans-serif; font-size:.7rem; font-weight:800; letter-spacing:.08em; -webkit-text-fill-color:#00E5FF; color:#00E5FF; }
.gx-wallet-cta{ position:relative; z-index:1; margin-top:.6rem; display:flex; align-items:center; justify-content:space-between;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:600; color:#00E5FF; }
.gx-wallet-cta svg{ width:14px; height:14px; transition:transform .25s ease; }
.gx-wallet-card:hover .gx-wallet-cta svg{ transform:translateX(3px); }

/* Nav label tooltips are hidden everywhere by default (incl. mobile drawer);
   only the collapsed desktop sidebar re-enables them as flyouts. */
.gx-nav-tip{ display:none !important; }

@media(min-width:768px){
    body.gx-sidebar-collapsed .gx-sidebar{ width:4.75rem; }
    body.gx-sidebar-collapsed .gx-content{ padding-left:4.75rem; }
    body.gx-sidebar-collapsed .gx-topbar{ left:4.75rem; }
    body.gx-sidebar-collapsed .gx-sidebar-label{ display:none !important; }
    body.gx-sidebar-collapsed .gx-sidebar-head{ flex-direction:column; height:auto; padding:.7rem .25rem .6rem; gap:.5rem; overflow:hidden; }
    /* Collapsed logo: ONLY the square icon (or N badge) — never the wordmark/full logo */
    body.gx-sidebar-collapsed .gx-logo-wrap{ justify-content:center; width:46px; max-width:46px; margin:0 auto; overflow:hidden; gap:0; }
    body.gx-sidebar-collapsed .gx-logo-img{ display:none !important; }
    body.gx-sidebar-collapsed .gx-logo-word{ display:none !important; }
    body.gx-sidebar-collapsed .gx-logo-iconimg{ display:none; }
    body.gx-sidebar-collapsed .gx-logo-wrap.has-icon .gx-logo-iconimg{ display:block !important; height:36px; width:36px; }
    body.gx-sidebar-collapsed .gx-logo-wrap.has-icon .gx-logo-badge{ display:none !important; }
    /* If only the full logo was uploaded (no separate icon), fall back to the N badge */
    body.gx-sidebar-collapsed .gx-logo-wrap:not(.has-icon) .gx-logo-badge{ display:flex !important; }
    body.gx-sidebar-collapsed .gx-collapse-ic{ transform:rotate(180deg); }
    body.gx-sidebar-collapsed .gx-nav-link{ justify-content:center; padding:.6rem; }
    body.gx-sidebar-collapsed .gx-nav-link.is-active::before{ display:none; }
    body.gx-sidebar-collapsed .gx-nav-link.is-active{ background:rgba(0,229,255,.12); border-radius:.85rem; box-shadow:inset 0 0 0 1px rgba(0,229,255,.25); }
    body.gx-sidebar-collapsed .gx-sub-chevron{ display:none; }
    /* Flyout panels anchored to their own icon (pure CSS, no JS dependency) */
    body.gx-sidebar-collapsed .gx-sidebar-nav{ overflow:visible; }
    body.gx-sidebar-collapsed .gx-nav-item.gx-has-sub{ position:relative; }
    body.gx-sidebar-collapsed .gx-submenu{
        position:absolute; left:100%; top:0; max-height:none; width:210px; padding:.5rem; margin-left:.4rem;
        background:rgba(7,12,24,.98); backdrop-filter:blur(18px);
        border:1px solid rgba(0,229,255,.18); border-radius:.9rem; box-shadow:0 24px 60px rgba(0,0,0,.65);
        opacity:0; visibility:hidden; transform:translateX(-6px); pointer-events:none;
        transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:80;
    }
    /* invisible bridge so the cursor can cross the gap without closing the flyout */
    body.gx-sidebar-collapsed .gx-submenu::after{ content:''; position:absolute; right:100%; top:0; width:.5rem; height:100%; }
    body.gx-sidebar-collapsed .gx-nav-item.gx-has-sub:hover > .gx-submenu{ opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
    body.gx-sidebar-collapsed .gx-submenu-title{ display:block; padding:.2rem .6rem .45rem; font-family:'Outfit',sans-serif; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#00E5FF; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:.3rem; }
    body.gx-sidebar-collapsed .gx-wallet-card{ display:none; }
    body.gx-sidebar-collapsed .gx-nav-divider{ display:flex; justify-content:center; }

    /* Label tooltip for simple icons when collapsed (pure CSS, anchored to the icon) */
    body.gx-sidebar-collapsed .gx-nav-link{ position:relative; }
    body.gx-sidebar-collapsed .gx-nav-tip{
        display:block !important; position:absolute; left:100%; top:50%; margin-left:.4rem; transform:translateY(-50%) translateX(-6px);
        white-space:nowrap; padding:.45rem .75rem; border-radius:.55rem;
        background:rgba(7,12,24,.98); color:#E8EEF6; font-size:.8rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600;
        border:1px solid rgba(0,229,255,.25); box-shadow:0 12px 30px rgba(0,0,0,.55);
        opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s, transform .15s, visibility .15s; z-index:80;
    }
    body.gx-sidebar-collapsed .gx-nav-tip::before{
        content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%);
        border:5px solid transparent; border-right-color:rgba(0,229,255,.25);
    }
    body.gx-sidebar-collapsed .gx-nav-link:hover .gx-nav-tip{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
    /* Groups use their flyout submenu instead of the tooltip — avoid overlap */
    body.gx-sidebar-collapsed .gx-has-sub .gx-nav-tip{ display:none !important; }

    /* Anti-flicker: while the sidebar animates collapse/expand, freeze the
       tooltip/flyout transitions so they don't briefly fade in/out. */
    body.gx-anim-off .gx-submenu,
    body.gx-anim-off .gx-nav-tip{ transition:none !important; }
}

/* === NUYED Plus flair === */
.gx-plus-name{ font-weight:700; }
.gx-plus-badge{
    display:inline-block; margin-left:.25rem; font-size:.85em; line-height:1;
    background:linear-gradient(135deg,#00E5FF,#A855F7); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; animation:gx-plus-pulse 2s ease-in-out infinite;
}
@keyframes gx-plus-pulse{ 0%,100%{ filter:drop-shadow(0 0 2px rgba(0,229,255,.5)); opacity:.9; } 50%{ filter:drop-shadow(0 0 7px rgba(168,85,247,.8)); opacity:1; } }
.gx-plus-pill{
    display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:999px;
    font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:#04121d; background:linear-gradient(135deg,#00E5FF,#A855F7); box-shadow:0 0 14px rgba(0,229,255,.4);
}

/* Mobile responsive tweaks */
@media (max-width: 767px) {
    h1.text-4xl, h1.md\:text-5xl { font-size: 1.875rem !important; line-height: 1.1; }
    .gx-glass { backdrop-filter: blur(16px) saturate(140%); }
    section.mb-16 { margin-bottom: 3rem; }
}

/* Prose for forum/news content */
.gx-prose { line-height: 1.75; color: var(--gx-text); }
.gx-prose p { margin-bottom: 1em; }
.gx-prose a { color: var(--gx-cyan); text-decoration: underline; }
.gx-prose strong { color: var(--gx-text); font-weight: 700; }
.gx-prose code { background: rgba(0,229,255,0.1); padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.875em; }
.gx-prose ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }

/* Page reveal */
body { animation: gx-page-in 0.6s ease-out; }
@keyframes gx-page-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================
   Quill 2 — Dark Neo Cyber theme
   ============================================ */
.ql-toolbar.ql-snow {
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: none !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 8px;
}
.ql-container.ql-snow {
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-top: none !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: transparent;
    color: var(--gx-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}
.ql-editor { min-height: 280px; color: var(--gx-text); }
.ql-editor.ql-blank::before { color: rgba(161,161,170,0.6); font-style: normal; }
.ql-snow .ql-stroke { stroke: #cfcfd5; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #cfcfd5; }
.ql-snow .ql-picker { color: #cfcfd5; }
.ql-snow .ql-picker-options {
    background: #0e0e10; border: 1px solid rgba(255,255,255,0.1); color: var(--gx-text);
    border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
.ql-snow .ql-tooltip {
    background: #0e0e10; color: var(--gx-text);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
.ql-snow .ql-tooltip input[type=text] {
    background: rgba(0,0,0,0.4); color: var(--gx-text);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
}
.ql-snow .ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-picker-label.ql-active .ql-stroke,
.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke { stroke: var(--gx-cyan); }
.ql-snow .ql-active .ql-fill,
.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill { fill: var(--gx-cyan); }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active { color: var(--gx-cyan); }
.ql-snow .ql-picker-label { color: #cfcfd5; }
.ql-editor blockquote { border-left: 3px solid var(--gx-cyan); padding-left: 1em; color: var(--gx-muted); }
.ql-editor pre.ql-syntax {
    background: rgba(0,0,0,0.55); color: var(--gx-text);
    border: 1px solid rgba(0,229,255,0.15); border-radius: 8px; padding: 12px;
    font-family: 'JetBrains Mono', monospace;
}
.ql-editor img, .gx-rich-content img { max-width: 100%; border-radius: 12px; margin: 0.5em 0; }
.ql-editor iframe { max-width: 100%; border-radius: 12px; }

/* ============================================
   Rich content (rendered HTML from WYSIWYG)
   ============================================ */
.gx-rich-content h1, .gx-rich-content h2, .gx-rich-content h3, .gx-rich-content h4 {
    font-family: 'Inter', sans-serif; font-weight: 700;
    color: var(--gx-text); margin-top: 1.4em; margin-bottom: 0.5em;
    letter-spacing: -0.01em;
}
.gx-rich-content h1 { font-size: 2rem; }
.gx-rich-content h2 { font-size: 1.6rem; }
.gx-rich-content h3 { font-size: 1.25rem; }
.gx-rich-content h4 { font-size: 1.05rem; }
.gx-rich-content p { margin-bottom: 1em; }
.gx-rich-content ul, .gx-rich-content ol { padding-left: 1.5em; margin-bottom: 1em; }
.gx-rich-content ul { list-style: disc; }
.gx-rich-content ol { list-style: decimal; }
.gx-rich-content blockquote {
    border-left: 3px solid var(--gx-cyan);
    padding: 0.5em 1em; margin: 1em 0;
    background: rgba(0,229,255,0.04); color: var(--gx-muted);
    border-radius: 0 8px 8px 0;
}
.gx-rich-content pre {
    background: rgba(0,0,0,0.55); color: var(--gx-text);
    border: 1px solid rgba(0,229,255,0.15); border-radius: 10px;
    padding: 14px; overflow-x: auto;
    font-family: 'JetBrains Mono', monospace; font-size: 0.9em;
}
.gx-rich-content code { background: rgba(0,229,255,0.08); color: #b9f7ff; padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
.gx-rich-content a { color: var(--gx-cyan); text-decoration: underline; text-decoration-color: rgba(0,229,255,0.4); }
.gx-rich-content a:hover { text-decoration-color: var(--gx-cyan); }
.gx-rich-content table {
    width: 100%; border-collapse: collapse; margin: 1.2em 0;
    background: rgba(255,255,255,0.02); border-radius: 10px; overflow: hidden;
}
.gx-rich-content th, .gx-rich-content td {
    border: 1px solid rgba(255,255,255,0.08); padding: 8px 12px; text-align: left;
}
.gx-rich-content th { background: rgba(0,229,255,0.08); color: var(--gx-cyan); font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.05em; }
.gx-rich-content hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 2em 0; }
.gx-rich-content figure { margin: 1.2em 0; }
.gx-rich-content figcaption { color: var(--gx-muted); font-size: 0.85em; text-align: center; margin-top: 0.4em; }
.gx-rich-content iframe { width: 100%; aspect-ratio: 16/9; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin: 1em 0; }
.gx-rich-content mark { background: rgba(255,215,0,0.25); color: #ffe27a; padding: 1px 3px; border-radius: 3px; }

/* ============================================
   Nested comments
   ============================================ */
.gx-comment .gx-comment-replies > .gx-comment {
    margin-top: 12px;
    position: relative;
}
.gx-comment-content { word-break: break-word; line-height: 1.5; }

/* ============================================
   Feed composer / post menu
   ============================================ */
.gx-post-menu { animation: gx-menu-in 0.18s ease-out; }
@keyframes gx-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

#gx-emoji-panel { box-shadow: 0 20px 60px rgba(0,0,0,0.7); }
.gx-emoji-btn { transform: scale(1); transition: transform 0.12s; }
.gx-emoji-btn:hover { transform: scale(1.25); }

/* Embed preview inside composer */
#gx-composer-embed-preview iframe { width: 100%; aspect-ratio: 16/9; }
#gx-composer-embed-preview > div > div { max-width: 100%; }


/* ============================================================================
   Online dots (v2.2.9) — punto verde sobre avatares de usuarios online via WS.
   Aplicado dinámicamente por applyOnlineDots() en nuyed.js. Para que el dot
   se renderice en la posición correcta, el avatar debe estar envuelto en un
   <span class="gx-avatar-wrap" data-user-id="N">. La función JS lo hace
   automáticamente para cualquier <img data-user-id="N"> en el DOM.
   ============================================================================ */
.gx-avatar-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}
.gx-avatar-wrap.gx-online::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 28%;
    height: 28%;
    min-width: 8px; min-height: 8px;
    max-width: 14px; max-height: 14px;
    background: #22c55e;                            /* emerald-500 */
    border: 2px solid #0a0e2a;
    border-radius: 9999px;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    pointer-events: none;
    animation: gxOnlinePulse 2.4s ease-in-out infinite;
}
@keyframes gxOnlinePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
    50%      { box-shadow: 0 0 10px rgba(34, 197, 94, 1); }
}

/* ---- Markdown/BBCode editor toolbar (Resources) ---- */
.gx-md-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;font-size:13px;border-radius:8px;background:rgba(255,255,255,.05);color:#B6C2D1;border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .15s}
.gx-md-btn:hover{background:rgba(0,229,255,.12);color:#00E5FF;border-color:rgba(0,229,255,.3)}
.prose-invert blockquote{border-left:3px solid rgba(0,229,255,.4);padding-left:12px;color:#B6C2D1;margin:8px 0}
.prose-invert pre{background:rgba(0,0,0,.4);padding:12px;border-radius:10px;overflow:auto;border:1px solid rgba(255,255,255,.06)}
.prose-invert code{background:rgba(0,0,0,.4);padding:1px 5px;border-radius:5px;font-size:.85em}
.prose-invert h3{font-size:1.15rem;font-weight:700;margin:10px 0 4px}
.prose-invert h4{font-size:1.05rem;font-weight:700;margin:8px 0 4px}
.prose-invert ul{list-style:disc;padding-left:20px;margin:6px 0}
.prose-invert a{color:#00E5FF;text-decoration:underline}
.prose-invert img{max-width:100%;border-radius:10px;margin:6px 0}

/* ---- Gallery lightbox ---- */
#gx-lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center}
#gx-lightbox.open{display:flex}
#gx-lightbox img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:0 0 60px rgba(0,229,255,.2)}
#gx-lightbox .gx-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.1)}
#gx-lightbox .gx-lb-nav:hover{background:rgba(0,229,255,.2)}

/* ============================================================
   NUYED 2026 — Landing redesign utilities
   ============================================================ */
.gx-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);pointer-events:none}
.gx-noise{position:absolute;inset:0;opacity:.04;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Animated gradient border card */
.gx-gborder{position:relative;border-radius:1.25rem;background:linear-gradient(135deg,rgba(0,229,255,.45),rgba(109,40,255,.35),rgba(35,136,255,.45));padding:1px;background-size:200% 200%;animation:gx-border-pan 8s ease infinite}
.gx-gborder>*{border-radius:calc(1.25rem - 1px);background:#0A0F1C}
@keyframes gx-border-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Bento hover card — clean, aesthetic, ultramodern */
.gx-bento{position:relative;border-radius:1.25rem;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;overflow:hidden}
.gx-bento:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.28);box-shadow:0 14px 40px -22px rgba(0,229,255,.45)}

/* Shine sweep — kept subtle, opt-in only */
.gx-shine{position:relative;overflow:hidden}
.gx-shine::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-18deg);transition:left .8s;pointer-events:none}
.gx-shine:hover::after{left:150%}

/* Marquee ticker */
.gx-marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gx-marquee-track{display:flex;gap:1rem;flex-shrink:0;min-width:100%;animation:gx-marquee 32s linear infinite}
.gx-marquee:hover .gx-marquee-track{animation-play-state:paused}
@keyframes gx-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Floating orb / pulse */
@keyframes gx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gx-float{animation:gx-float 6s ease-in-out infinite}

/* Section eyebrow */
.gx-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem;border-radius:999px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gx-cyan);background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.22)}

/* Category showcase tile */
.gx-cat-tile{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);transition:transform .3s,border-color .3s,background .3s}
.gx-cat-tile:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.4);background:rgba(0,229,255,.04)}

/* Live pulse dot */
.gx-live-dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e}
.gx-live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:gx-live-ping 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes gx-live-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}

/* Thread row — clean hover */
.gx-thread-row{position:relative;transition:background .25s,border-color .25s}
.gx-thread-row::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent,#00E5FF);opacity:0;transition:opacity .25s}
.gx-thread-row:hover{background:rgba(255,255,255,.025)}
.gx-thread-row:hover::before{opacity:.8}

/* Section header rule */
.gx-sec-rule{height:1px;background:linear-gradient(90deg,rgba(0,229,255,.35),transparent)}