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

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

/* Mobile sidebar overlay */
@media (max-width: 767px) {
    #gx-sidebar.gx-mobile-open {
        transform: translateX(0) !important;
        box-shadow: 0 0 60px rgba(0,229,255,0.2);
    }
}

/* Collapsed sidebar (desktop) */
@media (min-width: 768px) {
    body.gx-sidebar-collapsed #gx-sidebar { width: 4.5rem; }
    body.gx-sidebar-collapsed #gx-sidebar .gx-sidebar-label { display: none; }
    body.gx-sidebar-collapsed .gx-content { padding-left: 4.5rem; }
    body.gx-sidebar-collapsed .gx-topbar { left: 4.5rem; }
    body.gx-sidebar-collapsed #gx-sidebar-collapse-btn svg { transform: rotate(180deg); }
    body.gx-sidebar-collapsed #gx-sidebar nav a { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; }
    body.gx-sidebar-collapsed #gx-sidebar nav { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* 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 gaxmer.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)}