/* ============================================================
   AnimixCloud Shared Navbar
   Source: main index.html navbar + existing synchronized nav system.
   ============================================================ */

/* ============================================================
   ANIMIXCLOUD GAME-PAGE NAV — INDEX REFERENCE SYNC
   Shared across all non-Minecraft/Hytale game pages.
   Uses the same logo, section icons, sizing and responsive breakpoint
   language as index.html. Panels + Client Area intentionally omitted.
   ============================================================ */
.desktop-nav-wrap{
  width:min(900px,calc(100% - 48px)) !important;
  min-height:56px !important;
  margin:8px auto !important;
  padding:6px 10px 6px 18px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  border:1px solid rgba(148,163,184,.16) !important;
  border-radius:32px !important;
  background:rgba(15,23,42,.42) !important;
  backdrop-filter:blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(140%) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.desktop-nav-logo{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:145px !important;
  cursor:pointer !important;
  user-select:none !important;
  text-decoration:none !important;
}
.desktop-nav-logo img{
  width:27px !important;
  height:27px !important;
  object-fit:contain !important;
  border-radius:7px !important;
}
.desktop-nav-logo>span{
  font-size:14px !important;
  font-weight:800 !important;
  color:#f8fafc !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
}
.desktop-nav-logo>span span{color:#38bdf8 !important}
.desktop-nav-links{
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  flex:1 !important;
  justify-content:center !important;
}
.desktop-nav-actions{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  margin-left:auto !important;
}
.desktop-nav-link{
  height:36px !important;
  padding:0 11px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:#cbd5e1 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  font:600 11px 'Outfit',sans-serif !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  transition:background .18s ease,color .18s ease !important;
}
.desktop-nav-link i:first-child{
  font-size:11px !important;
  color:#7dd3fc !important;
}
.desktop-nav-link .chevron{
  font-size:8px !important;
  margin-left:-2px !important;
  color:#7dd3fc !important;
}
.desktop-nav-link:hover,
.desktop-nav-link.active,
.desktop-dropdown:hover>.desktop-nav-link{
  background:rgba(148,163,184,.15) !important;
  color:#fff !important;
}
.desktop-nav-link:hover i:first-child,
.desktop-dropdown:hover>.desktop-nav-link i:first-child{color:#67e8f9 !important}
.desktop-dropdown{position:relative !important}
.desktop-dropdown-menu{
  position:absolute !important;
  top:calc(100% + 7px) !important;
  left:50% !important;
  transform:translate(-50%,-6px) !important;
  width:245px !important;
  padding:8px !important;
  border:1px solid rgba(125,211,252,.1) !important;
  border-radius:8px !important;
  background:rgba(13,22,38,.98) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.38) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease !important;
  z-index:100 !important;
}
.desktop-dropdown:hover>.desktop-dropdown-menu,
.desktop-dropdown.open>.desktop-dropdown-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(-50%,0) !important;
}
.desktop-dropdown-menu a{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  padding:10px 9px !important;
  border-radius:6px !important;
  color:#cbd5e1 !important;
  text-decoration:none !important;
  transition:background .15s ease,color .15s ease !important;
}
.desktop-dropdown-menu a:hover{
  background:rgba(56,189,248,.08) !important;
  color:#fff !important;
}
.desktop-dropdown-menu a>i{
  width:16px !important;
  margin-top:2px !important;
  text-align:center !important;
  color:#7dd3fc !important;
  font-size:12px !important;
}
.desktop-dropdown-menu .desktop-game-item{align-items:center !important}
.desktop-dropdown-menu .desktop-game-item img{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
  border-radius:5px !important;
  flex:0 0 28px !important;
  background:#0d1b2a !important;
}
.desktop-dropdown-menu a span{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  min-width:0 !important;
}
.desktop-dropdown-menu a b{font-size:11px !important;line-height:1.2 !important;color:#e2e8f0 !important}
.desktop-dropdown-menu a small{font-size:9px !important;line-height:1.25 !important;color:#7f8da2 !important}
.services-menu{width:235px !important}
.games-menu{width:410px !important;display:grid !important;grid-template-columns:1fr 1fr !important;gap:3px !important}
.resources-menu{width:245px !important}
.mobile-only-nav{display:none !important}

/* Currency selector — desktop/mobile */
.desktop-nav-actions .currency-picker{
  position:relative !important;
  z-index:1300 !important;
}
.currency-trigger{
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:0 7px 0 10px !important;
  border:0 !important;
  background:transparent !important;
  color:#cbd5e1 !important;
  font-family:'Outfit',sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  border-radius:10px !important;
  transition:background .18s ease,color .18s ease !important;
}
.currency-trigger:hover,
.currency-picker.open .currency-trigger{
  background:rgba(148,163,184,.12) !important;
  color:#fff !important;
}
.currency-trigger-symbol{
  color:#7dd3fc !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:700 !important;
}
.currency-trigger-code{white-space:nowrap !important}
.currency-chevron{
  width:15px !important;
  height:15px !important;
  margin-left:3px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  transition:transform .3s ease !important;
}
.currency-picker.open .currency-chevron{transform:rotate(180deg) !important}
.currency-menu{
  position:absolute !important;
  top:calc(100% + 12px) !important;
  right:0 !important;
  width:258px !important;
  max-height:500px !important;
  overflow:hidden !important;
  padding:9px !important;
  border:1px solid rgba(70,182,255,.30) !important;
  border-radius:18px !important;
  background:rgba(7,18,29,.98) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.48),0 0 28px rgba(70,182,255,.10) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-8px) scale(.97) !important;
  transform-origin:top right !important;
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .22s !important;
}
.currency-picker.open .currency-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
}
.currency-menu-inner{
  max-height:425px !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
}
.currency-menu-inner::-webkit-scrollbar{width:5px !important}
.currency-menu-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14) !important;border-radius:99px !important}
.currency-option{
  width:100% !important;
  min-height:54px !important;
  display:grid !important;
  grid-template-columns:48px 1fr 22px !important;
  align-items:center !important;
  gap:4px !important;
  padding:7px 10px !important;
  border:0 !important;
  border-radius:15px !important;
  background:transparent !important;
  color:#b7c7d4 !important;
  font:inherit !important;
  cursor:pointer !important;
  text-align:left !important;
  transition:background .2s ease,color .2s ease !important;
}
.currency-option:hover{
  color:#fff !important;
  background:rgba(255,255,255,.055) !important;
}
.currency-option.active{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(70,182,255,.22),rgba(126,216,255,.10)) !important;
  box-shadow:inset 0 0 0 1px rgba(70,182,255,.10) !important;
}
.currency-option-symbol{font-size:20px !important;font-weight:700 !important;color:currentColor !important;text-align:center !important}
.currency-option-code{font-size:15px !important;font-weight:650 !important;letter-spacing:.01em !important}
.currency-option-name{display:block !important;font-size:9px !important;color:#64748b !important;margin-top:2px !important}
.currency-option-meta{display:flex !important;flex-direction:column !important;min-width:0 !important}
.currency-check{
  width:18px !important;height:18px !important;fill:none !important;
  stroke:#7dd3fc !important;stroke-width:2.4 !important;stroke-linecap:round !important;
  stroke-linejoin:round !important;opacity:0 !important;transform:scale(.7) !important;
  transition:opacity .2s ease,transform .2s ease !important;
}
.currency-option.active .currency-check{opacity:1 !important;transform:scale(1) !important}
.currency-loading{font-size:16px !important;color:#94a3b8 !important;font-weight:700 !important}

/* Shared nav responsive rule: phone only below 768px. */
@media(max-width:900px){
  .desktop-nav-wrap{width:calc(100% - 28px) !important;gap:7px !important}
  .desktop-nav-logo{min-width:auto !important}
  .desktop-nav-links{gap:0 !important}
  .desktop-nav-link{padding:0 7px !important}
  .desktop-nav-link span{display:none !important}
  .desktop-nav-logo>span{display:none !important}
}
@media(max-width:767px){
  .desktop-nav-wrap{
    width:100% !important;
    min-height:64px !important;
    margin:0 !important;
    padding:0 14px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .desktop-nav-logo{min-width:0 !important}
  .desktop-nav-logo img{width:29px !important;height:29px !important}
  .desktop-nav-logo>span{font-size:14px !important}
  .desktop-nav-links{display:none !important}
  .desktop-nav-actions{
    display:flex !important;
    margin-left:auto !important;
    margin-right:7px !important;
  }
  .mobile-only-nav{display:flex !important;margin-left:0 !important}
  .desktop-dropdown-menu{display:none !important}
  .currency-menu{
    position:fixed !important;
    top:64px !important;
    right:12px !important;
    width:min(290px,calc(100vw - 24px)) !important;
    max-height:calc(100vh - 84px) !important;
  }
  .currency-menu-inner{max-height:calc(100vh - 145px) !important}
}
@media(min-width:768px){
  .desktop-nav-links{display:flex !important}
  .desktop-nav-actions{display:flex !important}
  .mobile-only-nav{display:none !important}
}

/* Accessibility / interaction safety */
.desktop-nav-link:focus-visible,
.currency-trigger:focus-visible,
.currency-option:focus-visible,
.hamburger-btn:focus-visible,
.drawer-close:focus-visible{
  outline:2px solid #7dd3fc !important;
  outline-offset:2px !important;
}

.currency-chevron svg{width:15px !important;height:15px !important;display:block !important}

/* Currency selector inside the shared mobile drawer/sidebar. */
.mobile-drawer .currency-picker,
.drawer .currency-picker{
  position:relative !important;
  width:100% !important;
}
.mobile-drawer .currency-trigger,
.drawer .currency-trigger{
  width:100% !important;
  justify-content:flex-start !important;
}
.mobile-drawer .currency-menu,
.drawer .currency-menu{
  position:absolute !important;
  top:auto !important;
  bottom:calc(100% + 10px) !important;
  left:0 !important;
  right:auto !important;
  width:min(290px,100%) !important;
  max-height:min(55vh,430px) !important;
  transform:translateY(8px) scale(.97) !important;
  transform-origin:bottom left !important;
}
.mobile-drawer .currency-picker.open .currency-menu,
.drawer .currency-picker.open .currency-menu{
  transform:translateY(0) scale(1) !important;
}


/* ============================================================
   Main-page mobile drawer styles
   ============================================================ */

/* ==================== SIDEBAR CSS INTEGRATION ==================== */
        
        .hamburger-btn {
            width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px; color: #eaeaea; font-size: 1.15rem; cursor: pointer;
            transition: all 0.2s; flex-shrink: 0;
            will-change: transform, background-color;
        }
        .hamburger-btn:hover { background: rgba(255,255,255,0.1); }
        .hamburger-btn:active { transform: scale(0.95); }

        /* Drawer Overlay */
        .drawer-overlay {
            position: fixed; inset: 0; z-index: 998;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0; pointer-events: none;
            transition: opacity 0.18s ease;
            will-change: opacity;
            transform: translateZ(0);
        }
        .drawer-overlay.active { opacity: 1; pointer-events: auto; }

        /* Mobile Drawer */
        .mobile-drawer {
            font-family: 'Outfit', sans-serif;
            position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
            width: 300px; max-width: 85vw;
            background: rgba(10,10,16,0.97);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border-left: 1px solid rgba(255,255,255,0.05);
            transform: translate3d(100%, 0, 0);
            transition: transform 0.24s ease-out;
            display: flex; flex-direction: column;
            overflow: hidden;
            will-change: transform;
        }
        .mobile-drawer.open { transform: translate3d(0, 0, 0); }
        .mobile-drawer::before {
            content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
            background: linear-gradient(180deg, #60a5fa 0%, rgba(96,165,250,0.1) 100%);
            z-index: 1;
        }

        /* Drawer Header */
        .drawer-header {
            flex-shrink: 0; padding: 20px 18px 14px 22px;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .drawer-logo {
            font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem;
            letter-spacing: -0.02em;
        }
        .drawer-close {
            width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07);
            border-radius: 8px; color: #8b8b9e; font-size: 0.9rem; cursor: pointer;
            transition: all 0.2s;
        }
        .drawer-close:hover { background: rgba(255,255,255,0.1); color: #eaeaea; }

        /* Drawer Menu */
        .drawer-menu {
            flex: 1; overflow-y: auto; padding: 8px 0;
            transform: translateZ(0);
        }
        .drawer-menu::-webkit-scrollbar { width: 3px; }
        .drawer-menu::-webkit-scrollbar-track { background: transparent; }
        .drawer-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

        /* Drawer Items */
        .drawer-item {
            display: flex; align-items: center; padding: 11px 18px; cursor: pointer;
            transition: background 0.18s ease; position: relative;
            user-select: none; -webkit-user-select: none;
        }
        .drawer-item:hover { background: rgba(255,255,255,0.04); }
        .drawer-item:active { background: rgba(255,255,255,0.06); }
        .item-icon {
            width: 36px; height: 36px; border-radius: 9px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.85rem; color: #b0b0c0; flex-shrink: 0;
            transition: all 0.2s;
        }
        .drawer-item:hover .item-icon {
            background: rgba(255,255,255,0.08); color: #e0e0e8;
        }
        .item-label {
            flex: 1; font-size: 0.9rem; font-weight: 500; color: #d4d4de;
            margin-left: 13px; transition: color 0.18s;
        }
        .drawer-item:hover .item-label { color: #f0f0f5; }
        .item-arrow {
            font-size: 0.7rem; color: #55556a; transition: transform 0.32s cubic-bezier(0.32,0.72,0,1), color 0.2s;
            margin-left: 8px;
            will-change: transform;
        }
        .drawer-item.expanded .item-arrow { transform: rotate(90deg); color: #60a5fa; }
        .drawer-item.expanded .item-icon {
            background: rgba(96,165,250,0.1); color: #60a5fa;
            border-color: rgba(96,165,250,0.15);
        }
        .drawer-item.expanded .item-label { color: #f0f0f5; }

        /* Dropdown Content */
        .dropdown-content {
            max-height: 0; overflow: hidden;
            transition: max-height 0.22s ease-out;
            background: rgba(0,0,0,0.2);
            will-change: max-height;
        }
        .dropdown-content.open { max-height: 600px; }

        /* Dropdown Sub-items */
        .dropdown-item {
            display: flex; align-items: center; padding: 9px 18px 9px 67px;
            cursor: pointer; transition: background 0.14s ease;
            opacity: 1; transform: none;
        }
        .dropdown-item:hover { background: rgba(255,255,255,0.03); }
        .sub-icon {
            width: 30px; height: 30px; border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.72rem; flex-shrink: 0; margin-right: 11px;
        }
        .sub-icon.game-logo {
            background: transparent !important; border: none !important;
            padding: 0; overflow: hidden;
        }
        .sub-icon.game-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
        .sub-icon.game-logo .game-fallback {
            width: 30px; height: 30px; border-radius: 7px; display: flex;
            align-items: center; justify-content: center; font-weight: 700;
            font-size: 0.75rem; font-family: 'Space Grotesk', sans-serif;
        }
        /* View All Games: clean blue arrow, matching the reference design */
        .view-all-games-item .view-all-game-icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: 11px;
            background: transparent !important;
            border: none !important;
            color: #60a5fa;
            font-size: 1.45rem;
            line-height: 1;
        }
        .view-all-games-item:hover .view-all-game-icon {
            color: #7dd3fc;
            transform: translateX(2px);
        }
        .view-all-game-icon i {
            transition: transform 0.2s ease, color 0.2s ease;
        }
        .view-all-games-item:hover .view-all-game-icon i {
            transform: translateX(2px);
        }

        .sub-text { min-width: 0; }
        .sub-text h4 { font-size: 0.82rem; font-weight: 500; color: #ccccd8; line-height: 1.3; margin: 0; }
        .sub-text p { font-size: 0.7rem; color: #5e5e72; line-height: 1.3; margin-top: 1px; }

        /* Sub-icon Variants */
        .si-teal { background: rgba(20,184,166,0.12); color: #2dd4bf; border: 1px solid rgba(20,184,166,0.1); }
        .si-violet { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.1); }
        .si-amber { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.1); }
        .si-blue { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.1); }
        .si-indigo { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.1); }
        .si-rose { background: rgba(244,63,94,0.12); color: #fb7185; border: 1px solid rgba(244,63,94,0.1); }
        .si-emerald { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.1); }
        .si-sky { background: rgba(14,165,233,0.12); color: #38bdf8; border: 1px solid rgba(14,165,233,0.1); }
        .si-slate { background: rgba(148,163,184,0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.08); }
        .si-green { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.1); }
        .si-cyan { background: rgba(6,182,212,0.12); color: #22d3ee; border: 1px solid rgba(6,182,212,0.1); }
        .si-orange { background: rgba(249,115,22,0.12); color: #fb923c; border: 1px solid rgba(249,115,22,0.1); }
        .si-red { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.1); }
        .si-gray { background: rgba(148,163,184,0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.06); }