@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
:root {
    --bg: #0a0f1e;
    --bg2: #132535;
    --bg3: #1e293b;
    --card: rgba(18, 24, 43, 0.8);
    --accent: #01a7fe;
    --accent2: #007acc;
    --gold: #ffcc00;
    --text: #ffffff;
    --muted: #94a3b8;
    --border: rgb(2 2 2);
    --red: #ff4d4d;
    --green: #00ffa3;
}
*{margin:0;padding:0;box-sizing:border-box}
html {
  overflow-y: scroll;
  overflow-x: clip;
}
body{font-family:'Inter',sans-serif;background: linear-gradient(180deg, var(--bg2), var(--bg3));color:var(--text);min-height:100vh; position: relative; overflow-x: clip; width: 100%; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0, 242, 255, 0.05) 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
a{color:inherit;text-decoration:none}
.page-wrapper { padding-top: 0; }

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #060913;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
  background: #ffcc00;
  border-radius: 6px;
  border: 2px solid #060913;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff7f00;
}

/* NAV */

      @keyframes flash-glow-header {
        0%, 95%, 100% { filter: drop-shadow(0 0 2px rgba(0, 242, 255, 0.2)) brightness(1); }
        97% { filter: drop-shadow(0 0 15px rgba(0, 242, 255, 0.9)) brightness(1.4); }
      }
      .logo-icon-premium {
        animation: flash-glow-header 10s infinite ease-in-out;
        transform-origin: center;
      }
      /* Disable the moving white shimmer rhombus on the logo container */
      .logo-icon::after {
        display: none;
      }
      /* Premium Slotsalytics typography to match the high-end animated branding */
      .logo-text {
        font-family: 'Inter', sans-serif;
        font-size: 1.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #ffffff;
        display: flex;
        align-items: center;
        line-height: 1;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
      }
      .logo-text span {
        font-weight: 300;
        color: #00f2ff !important;
        /* text-shadow: 0 0 8px rgba(0, 242, 255, 0.6), 0 0 15px rgba(0, 242, 255, 0.3) !important; */
        letter-spacing: 0.15em;
        margin-left: 0.05em;
        transition: all 0.3s ease;
      }
      .logo:hover .logo-text {
        text-shadow: 0 2px 15px rgba(0, 242, 255, 0.3);
      }
      .logo:hover .logo-text span {
        color: #00f2ff !important;
        /* text-shadow: 0 0 12px rgba(0, 242, 255, 0.8), 0 0 25px rgba(0, 242, 255, 0.4); */
      }

      /* Futuristic Chevron Hover Flow Underlines */
      .nav-links > a::after {
        display: none;
      }
      .nav-chevron-flow {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        opacity: 0;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }
      .nav-links > a:hover .nav-chevron-flow,
      .nav-dropdown:hover > a .nav-chevron-flow {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      .nav-chevron {
        fill: none;
        stroke: var(--accent, #00f2ff);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.15;
        animation: navChevronFlow 1.2s infinite linear;
      }
      @keyframes navChevronFlow {
        0%, 100% { opacity: 0.15; filter: drop-shadow(0 0 0px transparent); }
        25% { opacity: 1.0; filter: drop-shadow(0 0 6px var(--accent, #00f2ff)); }
        50%, 99% { opacity: 0.15; filter: drop-shadow(0 0 0px transparent); }
      }

      /* Glowing down-pointing dropdown chevrons - Visible only when dropdown is open */
      .arrow {
        display: none;
      }
      .nav-dropdown > a {
        position: relative;
        padding-right: 2.6rem; /* Increased space to accommodate chevrons with larger padding */
      }
      .arrow-chevrons {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
      }
      .nav-dropdown:hover .arrow-chevrons {
        opacity: 1;
      }
      .nav-arrow-chevron {
        fill: none;
        stroke: var(--accent, #00f2ff);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: all 0.3s ease;
        animation: navArrowChevronFlow 1.2s infinite linear;
      }
      @keyframes navArrowChevronFlow {
        0%, 100% { opacity: 0.25; filter: drop-shadow(0 0 0px transparent); }
        25% { opacity: 1.0; filter: drop-shadow(0 0 5px var(--accent, #00f2ff)); }
        50%, 99% { opacity: 0.25; filter: drop-shadow(0 0 0px transparent); }
      }

      /* Clean and compact borderless mega-menu list styling */
      .dropdown-menu {
        position: absolute;
        left: 0;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(-10px);
        z-index: 1100;
        background: rgba(6, 10, 20, 0.98);
        border-bottom: 2px solid rgba(0, 242, 255, 0.35);
        border-top: 1px solid rgba(0, 242, 255, 0.15);
        box-shadow: 0 40px 100px rgba(0,0,0,0.95), 0 0 45px rgba(0, 242, 255, 0.15);
        padding: 2rem;
        top: 140px; /* Altura exacta del nav */
        max-height: calc(100vh - 120px);
        overflow-y: auto;
      }
      .nav-dropdown:hover .dropdown-menu {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
      }
      .dropdown-inner {
        max-width: 1400px;
        width: fit-content;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem 4rem; /* Más separación entre columnas */
      }
      .mega-column {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .mega-column-title {
        color: var(--accent);
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0, 242, 255, 0.2);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .mega-column-list {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        overflow: visible;
      }
      .mega-column-list::-webkit-scrollbar { display: none; }
      .dropdown-inner a {
        background: transparent;
        border: none;
        border-radius: 0px;
        box-shadow: none;
        padding: 0.35rem 0.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: #94a3b8; /* Color atenuado por defecto */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .dropdown-inner a:hover {
        background: var(--accent);
        color: #0f172a;
        border: none;
        box-shadow: 0 4px 15px rgba(0, 242, 255, 0.3);
        padding-left: 0.5rem;
        transform: none;
        animation: none;
      }
      @keyframes breathingRgbGlow {
        0%, 100% {
          color: #00f2ff;
          text-shadow: 
            0 0 5px rgba(0, 242, 255, 0.45),
            0 0 12px rgba(0, 242, 255, 0.25);
        }
        33% {
          color: #c084fc; /* Púrpura brillante */
          text-shadow: 
            0 0 6px rgba(192, 132, 252, 0.55),
            0 0 15px rgba(192, 132, 252, 0.3);
        }
        66% {
          color: #4ade80; /* Verde neon vibrante */
          text-shadow: 
            0 0 6px rgba(74, 222, 128, 0.55),
            0 0 15px rgba(74, 222, 128, 0.3);
        }
      }

      /* Permanent Futuristic Neon Text Glow for Menu Items */
      .nav-links > a, .nav-dropdown > a {
        color: #ffffff;
        text-shadow: 
          0 0 4px rgba(0, 242, 255, 0.35),
          0 0 12px rgba(0, 242, 255, 0.2);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 0 1.6rem; /* Increased horizontal hover padding */
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 0.9rem; /* Slightly larger text size for readability and hover ease */
        position: relative;
      }
      .nav-links > a::after, .nav-dropdown > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #00f2ff;
        box-shadow: 0 -2px 10px rgba(0, 242, 255, 0.6);
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .nav-links > a:hover::after, .nav-dropdown:hover > a::after {
        opacity: 1;
      }
      .nav-links > a:hover, .nav-dropdown:hover > a {
        color: #ffffff;
        text-shadow: 
          0 0 10px rgba(0, 242, 255, 0.8),
          0 0 20px rgba(0, 242, 255, 0.4),
          0 0 30px rgba(0, 242, 255, 0.2);
      }

      /* Theme Emojis Glowing Neon Shadow Overrides */
      .theme-neon-emoji {
        margin-right: 0.55rem;
        display: inline-block;
        filter: drop-shadow(0 0 3px rgba(0, 242, 255, 0.65));
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .dropdown-inner a:hover .theme-neon-emoji {
        filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.95)) drop-shadow(0 0 16px rgba(0, 242, 255, 0.5));
        transform: scale(1.18);
      }

      /* Clickable Area and Stretch Extensions for Flawless Dropdowns */
      nav {
        align-items: stretch;
        height: auto;
        flex-direction: column;
        padding: 0;
        display: flex;
        background: linear-gradient(180deg, rgba(6, 9, 19, 0.98) 0%, rgba(10, 15, 30, 0.85) 100%);
        backdrop-filter: blur(24px);
      }
      .nav-utility-bar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 30px;
        padding: 0 2rem;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255,255,255,0.03);
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
      }
      .nav-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 65px;
        padding: 0 2rem;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
      }
      .nav-top-left, .nav-top-right {
        flex: 1;
        display: flex;
        align-items: center;
      }
      .nav-top-left { justify-content: flex-start; }
      .nav-top-right { justify-content: flex-end; }
      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        transition: all 0.3s ease;
        position: relative;
      }
      .logo::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 350px;
        height: 60px;
        /* background: radial-gradient(ellipse at 50% 50%, rgba(0, 242, 255, 0.12), transparent 60%); */
        pointer-events: none;
        z-index: -1;
      }
      .nav-bottom-bar {
        display: flex;
        justify-content: center;
        height: 45px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
      }
      .nav-links {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 0.5rem;
        white-space: nowrap;
        flex-wrap: nowrap;
        height: 100%;
      }
      .nav-dropdown {
        height: 100%;
        display: flex;
        align-items: stretch;
      }
      .nav-dropdown > a {
        display: flex;
        align-items: center;
        height: 100%;
      }
      .nav-account-btn {
        padding: 0.25rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        font-size: 0.85rem;
        font-weight: 600;
        gap: 0.5rem;
        border-radius: 4px;
        transition: all 0.2s;
      }
      .nav-account-btn:hover {
        color: #fff;
        background: rgba(255,255,255,0.08);
        border-radius: 6px;
      }
    

/* EXTRA RULES TO ENSURE DROPDOWN BRIDGE */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* TRON NAVIGATION MENU (CENTERED) */
.nav-tron-menu {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.tron-nav-btn {
  background: rgba(0, 242, 255, 0.05);
  border: none;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0.8rem 2.5rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
  border-bottom: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
}

.tron-nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 242, 255, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tron-nav-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent);
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  opacity: 0.4;
  transition: all 0.3s;
}

.tron-nav-btn:hover, .tron-nav-btn.active { 
  color: white; 
  background: rgba(0, 242, 255, 0.15);
  transform: translateY(-2px);
}

.tron-nav-btn:hover::before, .tron-nav-btn.active::before { opacity: 1; }
.tron-nav-btn:hover::after, .tron-nav-btn.active::after { 
  opacity: 1; 
  box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.5);
  border-width: 2px;
}

.tron-nav-btn[data-tab="features"]::after { border-color: #f0abfc; }
.tron-nav-btn[data-tab="features"]:hover, .tron-nav-btn[data-tab="features"].active { background: rgba(240, 171, 252, 0.15); }
.tron-nav-btn[data-tab="features"]:hover::after, .tron-nav-btn[data-tab="features"].active::after { border-color: #f0abfc; box-shadow: inset 0 0 15px rgba(240, 171, 252, 0.5); }

.tron-nav-btn[data-tab="themes"]::after { border-color: #4ade80; }
.tron-nav-btn[data-tab="themes"]:hover, .tron-nav-btn[data-tab="themes"].active { background: rgba(74, 222, 128, 0.15); }
.tron-nav-btn[data-tab="themes"]:hover::after, .tron-nav-btn[data-tab="themes"].active::after { border-color: #4ade80; box-shadow: inset 0 0 15px rgba(74, 222, 128, 0.5); }

.nav-links { display: flex; align-items: stretch; gap: 0.5rem; justify-content: flex-end; }
.nav-links > a, .nav-dropdown > a { 
  display: flex; align-items: center; padding: 0 1.25rem; 
  font-size: 0.85rem; font-weight: 800; color: #f1f5f9; text-transform: uppercase; letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; text-decoration: none;
}
.nav-links > a:hover, .nav-dropdown:hover > a { 
  color: #ffffff; text-shadow: 0 0 10px rgba(0, 242, 255, 0.6); background: transparent; 
}
.nav-links > a::after {
  content: ''; position: absolute; bottom: 0; left: 15%; right: 15%; height: 3px; 
  background: var(--accent); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transition: transform 0.3s ease; transform-origin: center;
}
.nav-links > a:hover::after {
  transform: scaleX(1); box-shadow: 0 -2px 10px rgba(0, 242, 255, 0.5);
}

.nav-dropdown { position: relative; display: flex; align-items: center; height: 100%; cursor: pointer; }
.nav-dropdown > a span.arrow { margin-left: 0.4rem; font-size: 0.7rem; transition: transform 0.3s ease; }
.nav-dropdown:hover > a span.arrow { transform: translateY(2px) rotate(180deg); color: var(--accent); }

/* Full-Width Mega Menu */
.dropdown-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    background: rgba(10, 15, 30, 0.98);
    backdrop-filter: blur(40px);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 1rem 2rem;
    box-shadow: 0 40px 100px rgba(0,0,0,0.8);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-20px);
    z-index: 1100;
    display: flex;
    justify-content: center;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}

.nav-dropdown:hover .dropdown-menu { 
  opacity: 1; 
  pointer-events: all; 
  transform: translateY(0);
}

.dropdown-inner {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #cbd5e1;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
}
.dropdown-menu a:hover { 
    color: #0f172a; 
    background: var(--accent); 
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.3);
}
.dropdown-menu a .icon { display: none; }

/* Mobile Menu Button */
.mobile-menu-btn { display: none; background: none; border: none; flex-direction: column; gap: 6px; cursor: pointer; padding: 0.5rem; }
.mobile-menu-btn span { width: 26px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s; }

/* HERO (COMPACT) */
.hero.compact-hero { padding: 1.5rem 2rem 1rem; text-align: center; position: relative; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: linear-gradient(180deg, var(--bg3) 0%, var(--bg) 100%); }
.hero.compact-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124,58,237,.12), transparent); pointer-events: none; }
.hero-content { max-width: 700px; width: 100%; position: relative; z-index: 20; }
.hero.compact-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 900; line-height: 1.1; margin-bottom: 0.5rem; }
.hero h1 span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero.compact-hero p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.5rem; }

/* SEARCH */
.search-wrap { max-width: 680px; margin: 0 auto; position: relative; z-index: 10; }
.search-wrap input { width: 100%; padding: 1.1rem 1.5rem 1.1rem 3.5rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 100px; color: var(--text); font-size: 1rem; font-family: inherit; transition: all .3s; outline: none; box-shadow: 0 0 20px rgba(0, 242, 255, 0.05); }
.search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 242, 255, 0.1); }
.search-wrap .search-icon { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.125rem; }
.autocomplete { position: absolute; top: calc(100% + 12px); left: 0; right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; overflow-y: auto; max-height: 400px; z-index: 9999; text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.autocomplete-item { padding: 1.25rem 1.5rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; font-size: .95rem; }
.autocomplete-item:hover { background: var(--bg3); }
.autocomplete-item img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; }

/* HERO STATS (COMPACT) */
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 1.25rem; background: var(--bg2); border: 3px solid var(--border); padding: 0.6rem 1.75rem; border-radius: 0; position: relative; z-index: 1; box-shadow: 4px 4px 0px rgba(0,0,0,1); }
.stat-item { display: flex; align-items: center; gap: 0.5rem; }
.stat-item span:first-child { font-size: 1.125rem; font-weight: 800; color: var(--accent2); }
.stat-item span:last-child { font-size: 0.825rem; font-weight: 600; color: var(--text); }
.stat-divider { width: 1px; height: 16px; background: var(--border); }
/* SECTION */
.section{padding: 2rem; background: var(--bg); }
.section-inner{max-width:1400px;margin:0 auto}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.section-title{font-size:1.5rem;font-weight:800}
.section-title span{color:var(--accent)}
.view-all{font-size:.875rem;color:var(--accent);border:1px solid var(--accent);padding:.375rem .875rem;border-radius:8px;transition:all .2s}
.view-all:hover{background:var(--accent);color:#fff}
/* CARDS GRID */
.slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.75rem;grid-auto-flow:dense;}
.mechanics-overview-panel {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.97) 100%);
  border: 1px solid rgba(0, 242, 255, 0.2);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  color: #fff;
  align-items: start;
}
.mop-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}
.mop-header h2 {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mop-header p {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}
.mop-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.mop-stat-item {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
}
.mop-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.mop-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
}
.mop-related {
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.mop-related h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #f1f5f9;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
  font-weight: 800;
}
.mop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mop-tag {
  font-size: 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}
.mop-tag:hover {
  background: rgba(0, 242, 255, 0.1);
  border-color: rgba(0, 242, 255, 0.3);
  color: #fff;
}
.mop-cta {
  display: block;
  text-align: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}
.mop-cta:hover {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}
.slot-card{background:#1a2333;border:0px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.3s;position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;backdrop-filter: blur(10px); }
.slot-card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 0 20px rgba(0, 242, 255, 0.2); }
.card-thumb{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}
.card-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.slot-card:hover .card-thumb img{transform:scale(1.1)}
.card-badges{position:absolute;top:.75rem;left:.75rem;display:flex;gap:.35rem;flex-wrap:wrap;z-index:15}
.badge{padding:.2rem .5rem;border-radius:6px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.badge-new{background:var(--green);color:#fff;box-shadow:0 2px 10px rgba(34,197,94,0.3)}
.badge-hot{background:var(--red);color:#fff;box-shadow:0 2px 10px rgba(239,68,68,0.3)}
.badge-featured{background:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(124,58,237,0.3)}
.badge-vol{background:rgba(0,0,0,.7);color:var(--text);backdrop-filter:blur(4px)}
.card-fav{position:absolute;top:.75rem;right:.75rem;background:rgba(0,0,0,.6);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s;font-size:.875rem;z-index:15;backdrop-filter:blur(4px)}
.card-fav:hover,.card-fav.active{color:#ef4444;background:rgba(0,0,0,.8)}
.card-body{position:static;background:transparent;padding:1rem;display:flex;flex-direction:column;justify-content:flex-end;opacity:1;z-index:10;flex:1}
/* removed body hover */
.card-provider{font-size:.7rem;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem;opacity:1}
/* removed provider hover */
.card-name {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .2rem;
    line-height: 1.2;
    opacity: 1;
}
/* removed name hover */
.card-stats{display:flex;gap:.75rem;opacity:1}
/* removed stats hover */
.stars{opacity:1}
/* removed stars hover */
.card-stat{font-size:.75rem;color:rgba(255,255,255,0.7)}
.card-stat strong{color:#fff; font-weight: 800;}
.rtp-bar{height:4px;background:rgba(255,255,255,0.2);border-radius:2px;margin-top:.75rem;overflow:hidden;opacity:1}
/* removed rtp-bar hover */
.rtp-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
/* SIDEBAR FILTERS GLOBALS */
.sidebar-filters {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.sf-section h4 {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* FILTERS */
.filters-section{background:var(--bg2);border:0px solid var(--border);border-radius:0px;padding:1.5rem;margin-bottom:2rem}
.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.filter-group label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}
.filter-group select,.filter-group input{width:100%;padding:.6rem .875rem;background:var(--bg3);border:0px solid var(--border);border-radius:10px;color:var(--text);font-family:inherit;font-size:.875rem;outline:none;transition:border-color .2s}
.filter-group select:focus,.filter-group input:focus{border-color:var(--accent)}
.filter-group select option{background:var(--bg2)}
.filter-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.filter-tag{padding:.35rem .75rem;background:var(--accent);color:#fff;border-radius:8px;font-size:.75rem;display:flex;align-items:center;gap:.35rem;cursor:pointer}
.filter-tag:hover{background:#6d28d9}
/* QUICK FILTERS */
.quick-filters{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2rem}
.qf-btn{padding:.5rem 1rem;background:var(--bg2);border:0px solid var(--border);border-radius:10px;color:var(--muted);font-size:.8rem;cursor:pointer;transition:all .2s;font-family:inherit}
.qf-btn:hover,.qf-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* HOME GRID LAYOUT */
.home-grid { display: grid; grid-template-columns: 350px 1fr; gap: 2.5rem; align-items: stretch; }
.home-sidebar { background: var(--bg2); border: 3px solid var(--border); border-radius: 0; padding: 0; box-shadow: 6px 6px 0px rgba(0,0,0,1); display: flex; flex-direction: column; }
.sidebar-header { margin-bottom: 1.5rem; }
.sidebar-header h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.25rem; }
.sidebar-header p { font-size: 0.75rem; color: var(--muted); }
.vertical-filters { display: flex; flex-direction: column; gap: 0.5rem; }
.vertical-filters .qf-btn { width: 100%; text-align: left; padding: 0.75rem 1rem; justify-content: flex-start; }

@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-sidebar { display: none; }
}
/* SLOT PAGE */
.slot-hero {
      padding: 65px 2rem 2rem;
    background: linear-gradient(180deg, var(--bg2), var(--bg3));
    position: relative;
    overflow: hidden;
}
/* Drifting Starfield layers for Slot Hero */
.slot-hero::before,
  .slot-hero::after,
  .browse-hero::before,
  .browse-hero::after,
  body.index-page::before,
  body.index-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
}
/* Star Layer 1: Slow drift down-right */
.slot-hero::before,
  .browse-hero::before,
  body.index-page::before {
  opacity: 0.35;
  background-image: 
    radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.95) 100%, transparent),
    radial-gradient(1px 1px at 185px 115px, rgba(255, 255, 255, 0.75) 100%, transparent),
    radial-gradient(2px 2px at 80px 220px, rgba(0, 242, 255, 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 245px 75px, rgba(255, 255, 255, 0.95) 100%, transparent);
  background-size: 290px 290px;
  animation: heroSpaceDrift1 120s linear infinite;
}
/* Star Layer 2: Slow drift up-left */
.slot-hero::after,
  .browse-hero::after,
  body.index-page::after {
  opacity: 0.25;
  background-image: 
    radial-gradient(1.5px 1.5px at 65px 125px, rgba(255, 255, 255, 0.95) 100%, transparent),
    radial-gradient(2px 2px at 150px 45px, rgba(167, 139, 250, 0.8) 100%, transparent),
    radial-gradient(1px 1px at 210px 285px, rgba(255, 255, 255, 0.7) 100%, transparent),
    radial-gradient(2px 2px at 290px 170px, rgba(0, 242, 255, 0.75) 100%, transparent);
  background-size: 410px 410px;
  animation: heroSpaceDrift2 160s linear infinite;
}
@keyframes heroSpaceDrift1 {
  from { background-position: 0 0; }
  to   { background-position: 290px 580px; }
}
@keyframes heroSpaceDrift2 {
  from { background-position: 0 0; }
  to   { background-position: -410px 410px; }
}
.slot-hero-inner {
    max-width: 1376px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0rem;
    align-items: stretch;
    position: relative;
    z-index: 2;
}
.demo-wrap{background:#000;border-radius:0px;overflow:hidden;position:relative;border:0px solid var(--border);height: 610px !important; display: flex; flex-direction: column;}
@media (max-width: 768px) {
  .demo-wrap {
    height: 400px !important;
  }
}
.demo-wrap iframe{width:100%;height:100%;border:none}
.demo-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);flex-direction:column;gap:1rem}
.play-btn{padding:1rem 2.5rem;background:linear-gradient(135deg,var(--accent),#9333ea);color:#fff;border:none;border-radius:12px;font-size:1.125rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s}
.play-btn:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(124,58,237,.5)}
/* Flag Carousel */
.flag-carousel-wrap { position: relative; }
.flag-carousel-wrap .countrySelector { overflow: hidden; scroll-behavior: smooth; }
.flag-carousel-prev, .flag-carousel-next { transition: background 0.2s, box-shadow 0.2s; }
.flag-carousel-prev:hover, .flag-carousel-next:hover { background: rgba(255,255,255,0.15) !important; box-shadow: 0 0 8px rgba(124,58,237,0.5); }
.geo-flag-btn { transition: opacity 0.2s, transform 0.2s; }

.stats-panel, .content-sidebar .widget {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgb(0 0 0);
  border-radius: 24px;
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.stats-panel::after, .content-sidebar .widget::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.4), transparent);
}

/* HORIZONTAL STATS PANEL */
.stats-horizontal-panel {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgb(0 0 0);
  border-radius: 24px;
  padding: 0.5rem 1rem 0.25rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.stats-horizontal-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.4), transparent);
}
.stats-horizontal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.stats-horizontal-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stats-horizontal-col:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding-right: 0.75rem;
}
.stats-horizontal-panel .stats-horizontal-col > div {
  font-size: 0.8rem;
}
.stats-horizontal-panel .stats-horizontal-col span,
.stats-horizontal-panel .stats-horizontal-col strong,
.stats-horizontal-panel .stats-horizontal-col a,
.stats-horizontal-panel .stats-horizontal-col select {
  font-size: 0.8rem;
}
.stats-horizontal-panel #realMaxWinMoney {
  font-size: 0.8rem;
}
@media (max-width: 1024px) {
  .stats-horizontal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .stats-horizontal-col:nth-child(2) {
    border-right: none !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 600px) {
  .stats-horizontal-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .stats-horizontal-col {
    border-right: none !important;
    padding-right: 0 !important;
  }
}
.stats-panel h2{font-size:1.5rem;font-weight:900;margin-bottom:1.25rem;letter-spacing:-0.03em}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.stat-box{background:var(--bg3);border-radius:10px;padding:.875rem}
.stat-box .label{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.stat-box .value{font-size:1rem;font-weight:700;color:var(--text)}
.stat-box.highlight .value{color:var(--accent)}
.features-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.feature-chip{padding:.35rem .75rem;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.3);border-radius:8px;font-size:.75rem;color:var(--accent)}
/* BREADCRUMB */
.breadcrumb{padding:1rem 2rem;max-width:1400px;margin:0 auto;display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--border)}
/* SLOT CONTENT */
.slot-content{width:100%;max-width:calc(1376px + 4rem);margin:0 auto;padding:2rem;display:block;}
.content-main {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
/* Drifting Starfield layers for Content Main */
.content-main::before,
.content-main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}
.content-main::before {
  opacity: 0.3;
  background-image: 
    radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.95) 100%, transparent),
    radial-gradient(1px 1px at 185px 115px, rgba(255, 255, 255, 0.75) 100%, transparent),
    radial-gradient(2px 2px at 80px 220px, rgba(0, 242, 255, 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 245px 75px, rgba(255, 255, 255, 0.95) 100%, transparent);
  background-size: 290px 290px;
  animation: heroSpaceDrift1 120s linear infinite;
}
.content-main::after {
  opacity: 0.2;
  background-image: 
    radial-gradient(1.5px 1.5px at 65px 125px, rgba(255, 255, 255, 0.95) 100%, transparent),
    radial-gradient(2px 2px at 150px 45px, rgba(167, 139, 250, 0.8) 100%, transparent),
    radial-gradient(1px 1px at 210px 285px, rgba(255, 255, 255, 0.7) 100%, transparent),
    radial-gradient(2px 2px at 290px 170px, rgba(0, 242, 255, 0.75) 100%, transparent);
  background-size: 410px 410px;
  animation: heroSpaceDrift2 160s linear infinite;
}
.slot-content ul:not(.how-to-list) {
  margin-left: 1rem !important;
  padding-left: 0 !important;
  list-style-type: none !important;
}
.slot-content ul:not(.how-to-list) > li {
  position: relative !important;
  margin-bottom: 1rem !important;
  line-height: 1.8 !important;
  color: var(--muted) !important;
  padding-left: 1.8rem !important;
}
.slot-content ul:not(.how-to-list) > li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.45rem !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f2ff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(0, 242, 255, 0.6)) !important;
}

.content-main section{margin-bottom:0rem; display: flow-root;}
.content-main h3{font-size:1.25rem;font-weight:800;margin-bottom:1rem;padding-bottom:.75rem;border-bottom: 2px dashed rgb(255 255 255 / 20%); display:flow-root;}
.content-main p{color:var(--muted);line-height:1.8;margin-bottom:1rem;font-size:1rem}
.checkbox-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.3rem;border-radius:6px;transition:background .2s}
.checkbox-item:hover{background:var(--border)}
.checkbox-item input{accent-color:var(--accent)}
.checkbox-item label{font-size:.825rem;cursor:pointer}
.count-badge{margin-left:auto;font-size:.7rem;color:var(--muted);background:var(--border);padding:.1rem .4rem;border-radius:4px}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.results-count{font-size:.9rem;color:var(--muted)}
.sort-select{padding:.5rem .875rem;background:var(--bg2);border:0px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:.8rem;outline:none}
/* CATEGORIES */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.25rem;
}
.cat-card {
  position: relative;
  background: rgba(8, 12, 25, 0.95);
  border: 1px solid rgba(0, 242, 255, 0.15);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  background: radial-gradient(800px circle at 50% 0%, rgba(0, 242, 255, 0.15), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.cat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 242, 255, 0.5);
  background: rgba(12, 18, 35, 0.95);
  box-shadow: 0 10px 30px -10px rgba(0, 242, 255, 0.3);
}
.cat-card:hover::before {
  opacity: 1;
}
.cat-icon {
  font-size: 2.8rem;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.3));
  z-index: 2;
  transition: transform 0.3s ease;
}
.cat-card:hover .cat-icon {
  transform: scale(1.15);
}
.cat-name {
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 0.35rem;
  color: #ffffff;
  z-index: 2;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 10px rgba(255,255,255,0.2);
}
.cat-count {
  font-size: 0.8rem;
  color: var(--accent);
  z-index: 2;
  font-weight: 800;
  background: rgba(0, 242, 255, 0.1);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  margin-top: 0.5rem;
  border: 1px solid rgb(0 0 0);
  box-shadow: inset 0 0 8px rgba(0, 242, 255, 0.1);
}
/* Image-based cat card */
.cat-card-img {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  padding: 0;
  border: none;
  display: flex;
  align-items: flex-end;
  border-radius: 16px;
}
.cat-card-img::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  pointer-events: none;
  z-index: 3;
}
.cat-card-img .cat-card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.4) 50%, transparent 100%);
  z-index: 1;
  transition: all 0.3s ease;
}
.cat-card-img:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.cat-card-img:hover .cat-card-overlay {
  background: linear-gradient(to top, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.6) 60%, rgba(0, 242, 255, 0.2) 100%);
}
.cat-card-img .cat-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.25rem 1rem;
  text-align: left;
}
.cat-card-img .cat-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.cat-card-img .cat-count {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  background: none;
  padding: 0;
  margin-top: 0;
}
/* TOASTS */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#22c55e;border:none;border-radius:12px;padding:20px;font-size:0.95rem;font-weight:700;color:#fff;z-index:9999;text-align:center;box-shadow:0 15px 40px rgba(0,0,0,0.6);animation:popIn .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);max-width:90vw;width:max-content;}
@keyframes popIn{from{transform:translate(-50%, -40%) scale(0.9);opacity:0}to{transform:translate(-50%, -50%) scale(1);opacity:1}}
/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal{background:var(--bg2);border:0px solid var(--border);border-radius:20px;padding:2rem;max-width:700px;width:100%;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.modal-close{background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer}
/* COMPARE */
.compare-bar{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;gap:1rem;z-index:100;transform:translateY(100%);transition:transform .3s}
.compare-bar.visible{transform:translateY(0)}
.compare-slots{display:flex;gap:.75rem;flex:1}
.compare-slot-thumb{width:60px;height:45px;border-radius:8px;object-fit:cover;border:2px solid var(--accent)}
.compare-btn{padding:.75rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:10px;font-family:inherit;font-weight:700;cursor:pointer;transition:all .2s}
.compare-btn:hover{background:#6d28d9}
/* RATING */
.stars{color:var(--gold);font-size:.875rem;letter-spacing:1px}
/* SCROLL */
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#ffcc00;border-radius:6px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#ff7f00}
/* RESPONSIVE */
@media(max-width:1024px) {
  .slot-hero-inner { grid-template-columns: 1fr; }
  .slot-hero-inner > div:last-child { width: 100%; max-width: 100%; margin: 0; }
}
/* BROWSE PAGE */
.browse-hero {
    max-width: calc(1400px - 3rem);
    width: calc(100% - 3rem);
    margin: 1.5rem auto 0 auto;
    box-sizing: border-box;
    padding: 1.5rem 2rem 0rem 2rem;
    text-align: center;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: background 0.3s ease, padding 0.3s ease;
    background: linear-gradient(to top, rgb(4 25 26 / 25%) 0%, rgba(13, 18, 32, 0.4) 100%), linear-gradient(rgba(0, 242, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 255, 0.06) 1px, #091c28 1px), #142737;
    background-size: 100% 100%, 30px 30px, 30px 30px;
    background-position: center bottom, center top, center top;
    border: 0px solid rgb(13 18 32);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 255, 0.1);
}
.browse-hero h1 {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.browse-hero p {
  color: var(--muted);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.browse-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  position: relative;
  z-index: 1; /* Stacking context */
}
/* Drifting Starfield layers for Browse Main */
.browse-main::before,
.browse-main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1; /* Behind all filters, content and sidebar card elements */
  pointer-events: none;
  background-repeat: repeat;
}
.browse-main::before {
  opacity: 0.35;
  background-image: 
    radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.95) 100%, transparent),
    radial-gradient(1px 1px at 185px 115px, rgba(255, 255, 255, 0.75) 100%, transparent),
    radial-gradient(2px 2px at 80px 220px, rgba(0, 242, 255, 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 245px 75px, rgba(255, 255, 255, 0.95) 100%, transparent);
  background-size: 290px 290px;
  animation: heroSpaceDrift1 120s linear infinite;
}
.browse-main::after {
  opacity: 0.25;
  background-image: 
    radial-gradient(1.5px 1.5px at 65px 125px, rgba(255, 255, 255, 0.95) 100%, transparent),
    radial-gradient(2px 2px at 150px 45px, rgba(167, 139, 250, 0.8) 100%, transparent),
    radial-gradient(1px 1px at 210px 285px, rgba(255, 255, 255, 0.7) 100%, transparent),
    radial-gradient(2px 2px at 290px 170px, rgba(0, 242, 255, 0.75) 100%, transparent);
  background-size: 410px 410px;
  animation: heroSpaceDrift2 160s linear infinite;
}
.browse-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem 1.5rem;
  align-items: start;
}
@media(max-width:1024px) {
  .browse-main { grid-template-columns: 1fr; }
}
@media(max-width:768px){.nav-links{display:none}.slots-grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:2.5rem}.stats-inner{gap:1.5rem}}
@media(max-width:600px){.hero-stats{flex-wrap:wrap;border-radius:0px;padding:1rem;gap:1rem}.stat-divider{display:none}.hero-stats .stat-item{flex:1 1 40%;justify-content:center}}
@media(max-width:480px){.slots-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}}
/* LOADING */
.skeleton{background:linear-gradient(90deg,var(--border) 25%,var(--bg3) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* INFINITE SCROLL LOADER */
.load-more-spinner{text-align:center;padding:2rem;color:var(--muted);font-size:.875rem}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto .5rem}
@keyframes spin{to{transform:rotate(360deg)}}
/* VOL COLORS */
.vol-low{color:#22c55e}.vol-medium{color:#f59e0b}.vol-high{color:#f97316}.vol-extreme{color:#ef4444}
/* FOOTER */
footer{background: #000000; border-top:4px solid var(--accent); padding:4rem 2rem 2.5rem; margin-top:auto; color: #ffffff; }
.footer-inner{max-width:1400px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:1.5rem}
.footer-col h5 { font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 1rem; }
.footer-col a { display: block; padding: 0.35rem 0; font-size: 0.85rem; color: rgba(245,242,237,0.6); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: #ffffff; }
.footer-brand-logo {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0.75rem !important;
}
.footer-brand p{font-size:.825rem;color:rgba(245,242,237,0.6);line-height:1.7;max-width:100%;margin-bottom:1rem}
.foot.mega-col h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 1rem; font-weight: 800; }
.mega-col a { display: block; padding: 0.5rem 0; font-size: 0.85rem; color: rgba(255,255,255,0.7); transition: all 0.2s; font-weight: 500; }
.mega-col a:hover { color: #fff; transform: translateX(5px); }
.footer-bottom{border-top:none;padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:.75rem;color:rgba(245,242,237,0.4)}
.legal-badge{display:inline-block;margin-top:1rem;margin-bottom:1.5rem;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#f87171;padding:.25rem .875rem;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.05em}
/* MOBILE NAV BUTTON */
.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:.35rem;margin-left:auto;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:8px;transition:background .2s}
.mobile-menu-btn:hover{background:var(--border)}
.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
/* MOBILE NAV OVERLAY */
.mobile-nav{display:none;position:fixed;inset:0;background:var(--bg);z-index:200;padding:72px 1.5rem 2rem;overflow-y:auto;flex-direction:column}
.mobile-nav.open{display:flex;animation:mnSlide .25s ease}
@keyframes mnSlide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.mobile-nav-close{position:absolute;top:1rem;right:1rem;background:var(--border);border:none;color:var(--text);font-size:1.2rem;cursor:pointer;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.mn-section-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:1.25rem 0 .5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.mobile-nav a{display:block;font-size:.95rem;font-weight:500;color:var(--text);padding:.55rem 0;border-bottom:1px solid rgba(30,41,59,.5)}
.mobile-nav a:hover{color:var(--accent)}
/* SCROLL TO TOP */
.scroll-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--accent);border:none;border-radius:50%;color:#fff;font-size:1.1rem;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .3s;z-index:99;box-shadow:0 4px 16px rgba(124,58,237,.5)}
.scroll-top.visible{display:flex}
.scroll-top:hover{background:#6d28d9;transform:translateY(-3px);box-shadow:0 8px 24px rgba(124,58,237,.6)}
/* RECENTLY VIEWED */
.recently-wrap{padding:3rem 2rem;background:var(--bg2);border-top:1px solid var(--border)}
.recently-inner{max-width:1400px;margin:0 auto}
/* FAVORITES PAGE */
.favs-empty{text-align:center;padding:5rem 2rem;color:var(--muted)}
.favs-empty .empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}
.favs-empty h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}
.favs-empty p{max-width:400px;margin:0 auto 1.5rem;font-size:.9rem}
.favs-empty a{display:inline-block;padding:.75rem 2rem;background:var(--accent);color:#fff;border-radius:10px;font-weight:600;transition:background .2s}
.favs-empty a:hover{background:#6d28d9}
/* PROVIDER TAG */
.provider-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.25);border-radius:6px;color:var(--accent2);font-size:.75rem;font-weight:600}
/* RESPONSIVE ADDITIONS */
@media(max-width:768px){
  .mobile-menu-btn{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .recently-wrap{padding:2rem 1rem}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
/* BODY FLEX */
body{display:flex;flex-direction:column}
main,section,.section,.browse-main,.slot-hero,.slot-content{flex-shrink:0}
.page-wrapper{flex:1}

/* Provider Clusters */
.providers-grid-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.provider-card-mini {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 0.75rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.provider-card-mini img {
  width: 50px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  
  transition: filter 0.2s;
}

.provider-card-mini:hover {
  border-color: var(--accent);
  background: var(--bg3);
  transform: translateY(-2px);
}

.provider-card-mini:hover img {
  
}

.provider-card-mini .provider-svg-icon {
  width: 50px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  transition: all 0.2s;
  color: white;
}

.provider-card-mini:hover .provider-svg-icon {
  
}

.provider-svg-preview svg {
  max-width: 100%;
  max-height: 100%;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Apply high-end monochrome light-grey silhouette filter to brand logos to maintain contrast and structure */
.top-brand-svg-wrap svg, 
.dropdown-inner a img {
  filter: grayscale(100%) brightness(0) invert(0.65) opacity(0.7) !important;
  transition: all 0.3s ease !important;
}

/* Smooth transition to pure bright white on mouseover */
.top-brand-svg-wrap:hover svg, 
.provider-card-mini:hover .dropdown-inner a:hover .dropdown-inner a:hover img {
  filter: grayscale(100%) brightness(0) invert(1) opacity(1) !important;
}

/* Ensure slot detail page provider SVGs are displayed beautifully and vibrantly without the dark silhouette filter */
.slot-hero .stats-horizontal-panel .provider-svg-icon svg {
  filter: none !important;
  opacity: 1 !important;
}

.top-brand-svg-wrap {
  height: 75px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Render the vector SVGs prominently and beautifully without collapsing */
.top-brand-svg-wrap svg {
  height: 65px !important;
  width: auto !important;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.pcm-body {
  display: flex;
  flex-direction: column;
}

.pcm-body strong {
  font-size: 0.9rem;
  color: white;
}

@media(max-width:600px){.hero-stats{flex-wrap:wrap;border-radius:0px;padding:1rem;gap:1rem}.stat-divider{display:none}.hero-stats .stat-item{flex:1 1 40%;justify-content:center}}
@media(max-width:480px){.slots-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}}
/* LOADING */
.skeleton{background:linear-gradient(90deg,var(--border) 25%,var(--bg3) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* INFINITE SCROLL LOADER */
.load-more-spinner{text-align:center;padding:2rem;color:var(--muted);font-size:.875rem}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto .5rem}
@keyframes spin{to{transform:rotate(360deg)}}
/* VOL COLORS */
.vol-low{color:#22c55e}.vol-medium{color:#f59e0b}.vol-high{color:#f97316}.vol-extreme{color:#ef4444}
/* FOOTER */
footer{background: #000000; border-top:4px solid var(--accent); padding:4rem 2rem 2.5rem; margin-top:auto; color: #ffffff; }
.footer-inner{max-width:1400px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:1.5rem}
.footer-col h5 { font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 1rem; }
.footer-col a { display: block; padding: 0.35rem 0; font-size: 0.85rem; color: rgba(245,242,237,0.6); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: #ffffff; }
.footer-brand-logo {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0.75rem !important;
}
.footer-brand p{font-size:.825rem;color:rgba(245,242,237,0.6);line-height:1.7;max-width:100%;margin-bottom:1rem}
.foot.mega-col h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 1rem; font-weight: 800; }
.mega-col a { display: block; padding: 0.5rem 0; font-size: 0.85rem; color: rgba(255,255,255,0.7); transition: all 0.2s; font-weight: 500; }
.mega-col a:hover { color: #fff; transform: translateX(5px); }
.footer-bottom{border-top:none;padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:.75rem;color:rgba(245,242,237,0.4)}
.legal-badge{display:inline-block;margin-top:1rem;margin-bottom:1.5rem;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#f87171;padding:.25rem .875rem;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.05em}
/* MOBILE NAV BUTTON */
.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:.35rem;margin-left:auto;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:8px;transition:background .2s}
.mobile-menu-btn:hover{background:var(--border)}
.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
/* MOBILE NAV OVERLAY */
.mobile-nav{display:none;position:fixed;inset:0;background:var(--bg);z-index:200;padding:72px 1.5rem 2rem;overflow-y:auto;flex-direction:column}
.mobile-nav.open{display:flex;animation:mnSlide .25s ease}
@keyframes mnSlide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.mobile-nav-close{position:absolute;top:1rem;right:1rem;background:var(--border);border:none;color:var(--text);font-size:1.2rem;cursor:pointer;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.mn-section-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:1.25rem 0 .5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.mobile-nav a{display:block;font-size:.95rem;font-weight:500;color:var(--text);padding:.55rem 0;border-bottom:1px solid rgba(30,41,59,.5)}
.mobile-nav a:hover{color:var(--accent)}
/* SCROLL TO TOP */
.scroll-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--accent);border:none;border-radius:50%;color:#fff;font-size:1.1rem;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .3s;z-index:99;box-shadow:0 4px 16px rgba(124,58,237,.5)}
.scroll-top.visible{display:flex}
.scroll-top:hover{background:#6d28d9;transform:translateY(-3px);box-shadow:0 8px 24px rgba(124,58,237,.6)}
/* RECENTLY VIEWED */
.recently-wrap{padding:3rem 2rem;background:var(--bg2);border-top:1px solid var(--border)}
.recently-inner{max-width:1400px;margin:0 auto}
/* FAVORITES PAGE */
.favs-empty{text-align:center;padding:5rem 2rem;color:var(--muted)}
.favs-empty .empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}
.favs-empty h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}
.favs-empty p{max-width:400px;margin:0 auto 1.5rem;font-size:.9rem}
.favs-empty a{display:inline-block;padding:.75rem 2rem;background:var(--accent);color:#fff;border-radius:10px;font-weight:600;transition:background .2s}
.favs-empty a:hover{background:#6d28d9}
/* PROVIDER TAG */
.provider-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.25);border-radius:6px;color:var(--accent2);font-size:.75rem;font-weight:600}
/* RESPONSIVE ADDITIONS */
@media(max-width:768px){
  .mobile-menu-btn{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .recently-wrap{padding:2rem 1rem}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
/* BODY FLEX */
body{display:flex;flex-direction:column}
main,section,.section,.browse-main,.slot-hero,.slot-content{flex-shrink:0}
.page-wrapper{flex:1}

/* Provider Clusters */
.providers-grid-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.provider-card-mini {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 0.75rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.provider-card-mini img {
  width: 50px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  
  transition: filter 0.2s;
}

.provider-card-mini:hover {
  border-color: var(--accent);
  background: var(--bg3);
  transform: translateY(-2px);
}

.provider-card-mini:hover img {
  
}

.provider-card-mini .provider-svg-icon {
  width: 50px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  transition: all 0.2s;
  color: white;
}

.provider-card-mini:hover .provider-svg-icon {
  
}

.provider-svg-preview svg {
  max-width: 100%;
  max-height: 100%;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Apply high-end monochrome light-grey silhouette filter to brand logos to maintain contrast and structure */
.top-brand-svg-wrap svg, 
.dropdown-inner a img {
  filter: grayscale(100%) brightness(0) invert(0.65) opacity(0.7) !important;
  transition: all 0.3s ease !important;
}

/* Smooth transition to pure bright white on mouseover */
.top-brand-svg-wrap:hover svg, 
.provider-card-mini:hover .dropdown-inner a:hover .dropdown-inner a:hover img {
  filter: grayscale(100%) brightness(0) invert(1) opacity(1) !important;
}

/* Ensure slot detail page provider SVGs are displayed beautifully and vibrantly without the dark silhouette filter */
.slot-hero .stats-horizontal-panel .provider-svg-icon svg {
  filter: none !important;
  opacity: 1 !important;
}

.top-brand-svg-wrap {
  height: 75px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Render the vector SVGs prominently and beautifully without collapsing */
.top-brand-svg-wrap svg {
  height: 65px !important;
  width: auto !important;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.pcm-body {
  display: flex;
  flex-direction: column;
}

.pcm-body strong {
  font-size: 0.9rem;
  color: white;
}

.pcm-body span {
  font-size: 0.7rem;
  color: var(--muted);
}

/* CUSTOM REVIEW STYLES */
.custom-review::after { content: ""; display: table; clear: both; }
.custom-review img { max-width: 100%; height: auto !important; object-fit: contain !important; border-radius: 8px; margin: 0; display: block; }
.custom-review h1, .custom-review h2, .custom-review h3 { margin-top: 2rem; margin-bottom: 1rem; color: var(--text); }
.custom-review p { margin-bottom: 1.25rem; line-height: 1.7; color: var(--text); opacity: 0.9; }
.custom-review ul, .custom-review ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.custom-review li { margin-bottom: 0.5rem; color: var(--text); opacity: 0.9; }
.custom-review table, .content-main table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: var(--bg2); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.custom-review th, .custom-review td, .content-main th, .content-main td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.custom-review th, .content-main th { background: var(--bg3); color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.custom-review tr:last-child td, .content-main tr:last-child td { border-bottom: none; }
.custom-review strong { color: #ffffff; font-weight: 700; }

/* VIDEO CONTAINER */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 2rem 0; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ADMIN-STYLE SIDEBAR (GLOBAL) */
.admin-sidebar { 
  background: var(--bg2); 
  border: 1px solid var(--border); 
  border-radius: 16px; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  max-height: calc(100vh - 100px); 
  position: sticky; 
  top: 100px; 
}
.admin-search { padding: 1rem; border-bottom: 1px solid var(--border); }
.admin-search input { width: 100%; padding: 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); outline: none; }
.admin-search input:focus { border-color: var(--accent); }

.admin-list { overflow-y: auto; flex: 1; }
.admin-list-item { padding: 1rem; border-bottom: 1px solid var(--border); display: flex; gap: 1rem; align-items: center; cursor: pointer; transition: background 0.2s; }
.admin-list-item:hover, .admin-list-item.active { background: var(--bg3); }
.admin-list-item img { width: 48px; height: 36px; border-radius: 6px; object-fit: cover; }

/* SIDEBAR STATS GRID */
.sidebar-stats-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  background: var(--bg3); 
  border-bottom: 1px solid var(--border);
}
.sb-stat { 
  padding: 1.25rem 1rem; 
  text-align: center; 
  border-right: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.sb-stat:nth-child(2n) { border-right: none; }
.sb-stat strong { display: block; font-size: 1.25rem; font-weight: 900; color: var(--accent); }
.sb-stat span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }

/* CIRCULAR IMAGES FOR HOME SIDEBAR */
.home-sidebar .admin-list-item img { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  border: 1px solid var(--border);
  padding: 2px;
  background: white;
}
.admin-list-info { flex: 1; overflow: hidden; }
.admin-list-info strong { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-list-info span { font-size: 0.75rem; color: var(--muted); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.btn-primary:hover { background: var(--accent2); }

/* TRON-STYLE CATEGORY BUTTONS */
.category-btn {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  padding: 1rem !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 0 0 transparent;
  border-radius: 4px !important;
}

.category-btn:hover { 
  background: rgba(0,0,0,0.6) !important;
  transform: translateY(-1px);
}

.category-btn[data-tab="providers"]:hover, .category-btn[data-tab="providers"].active { 
  border-color: var(--accent) !important; 
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.2), inset 0 0 10px rgba(0, 242, 255, 0.1) !important;
  color: var(--accent) !important;
}

.category-btn[data-tab="features"]:hover, .category-btn[data-tab="features"].active { 
  border-color: #f0abfc !important; 
  box-shadow: 0 0 20px rgba(240, 171, 252, 0.2), inset 0 0 10px rgba(240, 171, 252, 0.1) !important;
  color: #f0abfc !important;
}

.category-btn[data-tab="themes"]:hover, .category-btn[data-tab="themes"].active { 
  border-color: #4ade80 !important; 
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.2), inset 0 0 10px rgba(74, 222, 128, 0.1) !important;
  color: #4ade80 !important;
}

.category-btn.active {
  background: rgba(255,255,255,0.05) !important;
}

.sidebar-list-header { 
  background: var(--bg3); 
  padding: 0.75rem 0; 
  font-size: 0.7rem; 
  font-weight: 900; 
  text-transform: uppercase; 
  letter-spacing: 0.1em; 
  color: var(--muted); 
  border-bottom: 1px solid var(--border);
}

/* Sidebar Autocomplete */
.sb-autocomplete { 
  position: absolute; top: 100%; left: 0; right: 0; background: var(--bg2); border: 1px solid var(--border); 
  z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,0.4); display: none; margin-top: 5px; border-radius: 8px; overflow: hidden;
}
.sb-ac-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background 0.2s; }
.sb-ac-item:hover { background: var(--bg3); }

/* SIDEBAR NAV STACK */
.sidebar-nav-stack { display: flex; flex-direction: column; background: var(--bg3); border-bottom: 2px solid var(--border); }
.sb-nav-btn { width: 100%; text-align: left; padding: 1rem 1.5rem; background: var(--bg2); border: none; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: all 0.2s; color: var(--muted); letter-spacing: 0.05em; }
.sb-nav-btn.active { background: var(--accent); color: white; }
.sb-nav-btn:hover:not(.active) { background: var(--bg3); padding-left: 1.75rem; }

.sidebar-list-header { padding: 1rem 1.5rem 0.5rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: var(--accent); letter-spacing: 0.1em; opacity: 0.8; }

.sb-autocomplete { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg2); border: 1px solid var(--border); z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,0.3); display: none; }
.sb-ac-item { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.05); }
.sb-ac-item:hover { background: var(--bg3); }
.sb-ac-item img { width: 80px; height: 60px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.sb-ac-item span { font-size: 0.95rem; font-weight: 700; color: var(--text); }

/* SIDEBAR HERO */
.sidebar-hero {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.sidebar-hero h1 {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.sidebar-hero h1 span { 
  background: linear-gradient(135deg, var(--accent), var(--accent2)); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
}
.sidebar-hero p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 500;
}

/* SIDEBAR MINI NAV */
.sidebar-mini-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mini-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 1rem 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  text-align: left;
}
.mini-nav-link:hover, .mini-nav-link.active { 
  color: var(--text); 
  background: var(--bg3);
  border-color: var(--accent);
  transform: translateY(2px);
  box-shadow: 0 4px 20px rgba(0, 242, 255, 0.1);
}
.mini-nav-link::after {
  content: 'â–¾';
  font-size: 1.2rem;
  opacity: 0.3;
  transition: all 0.3s;
}
.mini-nav-link:hover::after, .mini-nav-link.active::after {
  opacity: 1;
  color: var(--accent);
  transform: translateY(2px);
}
.mini-nav-link.active {
  background: rgba(0, 242, 255, 0.05);
  border-left: 4px solid var(--accent);
}

/* RECOMMENDED CASINO CARD BORDER BEAM EFFECT */
@keyframes border-beam {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.recommended-casino-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.recommended-casino-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 25px rgba(255,255,255,0.08);
}

.recommended-casino-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    transparent,
    transparent,
    rgba(255, 255, 255, 0.95) 15%,
    transparent 30%,
    transparent
  );
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.recommended-casino-card:hover::before {
  opacity: 1;
  animation: border-beam 4s linear infinite;
}

.recommended-casino-card-inner {
  position: relative;
  z-index: 2;
  background: var(--bg2);
  border-radius: 0;
  margin: 1.5px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 3px);
  width: calc(100% - 3px);
  flex-grow: 1;
  overflow: hidden;
}

/* JUGAR BUTTON SLOW GREEN NEON BREATHING PULSE */
@keyframes neon-breathing {
  0%, 100% {
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.45);
  }
  50% {
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.75), 0 0 8px rgba(16, 185, 129, 0.35);
  }
}

.play-btn-pulse {
  display: block;
  width: 100%;
  background: #10b981;
  color: #000000;
  text-align: center;
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-decoration: none;
  margin-top: 0.25rem;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}

.play-btn-pulse:hover {
  background: #059669;
  animation: neon-breathing 2s ease-in-out infinite;
}

/* ALIGN TAGS ROW TO MATCH GRID LAYOUT ABOVE SIDEBAR */
.slot-tags-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  width: 100%;
  margin-top: 1rem;
}

.slot-tags-row-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
}

.slot-tags-row-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 1024px) {
  .slot-tags-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .slot-tags-row-right {
    justify-content: flex-start;
  }
}

/* SlotScoreâ„¢ Responsive Styles */
@media (max-width: 900px) {
  .slotscore-grid-wrapper {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .slotscore-split-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .slotscore-strategy-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* WoW Armory-style Slot Symbol Interactive Tooltips */
.symbol-tooltip-trigger {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  line-height: 1;
  margin-right: 8px;
}

.symbol-tooltip-card {
  line-height: 1.5;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: max-content;
  min-width: 240px;
  max-width: 90vw;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 242, 255, 0.35);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 242, 255, 0.15);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}

/* Tooltip Arrow */
.symbol-tooltip-card::before,
.symbol-tooltip-card::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
}

/* Arrow Border */
.symbol-tooltip-card::before {
  top: 100%;
  border-width: 7px;
  border-color: rgba(0, 242, 255, 0.35) transparent transparent transparent;
}

/* Arrow Background */
.symbol-tooltip-card::after {
  top: 100%;
  margin-top: -1.5px;
  border-width: 6px;
  border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
}

.symbol-tooltip-trigger:hover .symbol-tooltip-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.symbol-tooltip-header {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.symbol-tooltip-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 0.4rem;
}

.symbol-tooltip-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.symbol-tooltip-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  line-height: 1.4;
}

.symbol-tooltip-qty {
  color: #94a3b8;
  font-weight: 500;
}

.symbol-tooltip-val {
  color: #10b981; /* Premium Emerald green color for payouts */
  font-weight: 800;
}

/* Toggle tooltip open state via Class */
.symbol-tooltip-trigger.tooltip-active .symbol-tooltip-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.symbol-tooltip-bet-control {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tooltip-bet-val {
  color: var(--accent) !important;
  font-weight: 900;
  font-size: 0.75rem;
}

.tooltip-bet-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0.4rem 0;
  outline: none;
}

.tooltip-bet-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 6px var(--accent);
}

.tooltip-bet-btn {
  padding: 3px 6px;
  font-size: 0.6rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.tooltip-bet-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: white !important;
}

/* Paytable Symbol Row Glass Card Wrapper */
.paytable-symbol-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(18, 24, 43, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 242, 255, 0.08);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.paytable-symbol-card:hover {
  z-index: 50;
  background: rgba(18, 24, 43, 0.65);
  border-color: rgba(0, 242, 255, 0.22);
  box-shadow: 0 8px 30px rgba(0, 242, 255, 0.05);
}

.paytable-symbol-aside {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paytable-symbol-aside .symbol-tooltip-trigger {
  margin-right: 0 !important;
  display: block;
}

.paytable-symbol-text {
  flex-grow: 1;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}

.paytable-symbol-text strong {
  color: white;
  font-weight: 700;
}

/* Visually hidden – readable by Google & screen readers, invisible to users */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================================
   
/* RECOVERED FROM SCRIPTS */
/* From add_logo_css.js */
/* Logo Enhancements */
.logo-icon-premium {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  animation: logo-glow-pulse 6s infinite;
  will-change: transform, filter;
  cursor: pointer;
}

.logo-icon-premium:hover {
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)) brightness(1.1) !important;
  animation-play-state: paused;
}

@keyframes logo-glow-pulse {
  0%, 80%, 100% { filter: drop-shadow(0 0 0 rgba(255,215,0,0)) brightness(1); }
  90% { filter: drop-shadow(0 0 12px rgba(255,215,0,0.8)) brightness(1.25); }
}


/* From append_css.js */
/* Slot Machine Artwork */
.slot-artwork {
  display: flex;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border: 3px solid #374151;
  border-radius: 12px;
  padding: 8px;
  gap: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5), inset 0 2px 10px rgba(0,0,0,0.5), 0 0 15px rgba(124, 58, 237, 0.3);
  position: relative;
  margin-left: auto;
}

.slot-artwork::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(255, 94, 0, 0.8));
  z-index: -1;
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  0% { opacity: 0.5; box-shadow: 0 0 10px rgba(124, 58, 237, 0.5); }
  100% { opacity: 1; box-shadow: 0 0 20px rgba(255, 94, 0, 0.8); }
}

.reel {
  width: 45px;
  height: 65px;
  background: #f8fafc;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 8px 10px rgba(0,0,0,0.6), inset 0 -8px 10px rgba(0,0,0,0.6);
  border: 1px solid #94a3b8;
}

.symbols-strip {
  display: flex;
  flex-direction: column;
  animation: spin 1.2s linear infinite;
}

.reel:nth-child(1) .symbols-strip { animation-duration: 0.8s; }
.reel:nth-child(2) .symbols-strip { animation-duration: 1.1s; animation-direction: reverse; }
.reel:nth-child(3) .symbols-strip { animation-duration: 0.95s; }

.symbol {
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@keyframes spin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } 
}


/* From apply_premium_nav.js */
nav {
        align-items: stretch !important;
        height: auto !important;
        flex-direction: column !important;
        padding: 0 !important;
        display: flex !important;
        background: linear-gradient(180deg, rgba(6, 9, 19, 0.98) 0%, rgba(10, 15, 30, 0.85) 100%) !important;
        backdrop-filter: blur(24px) !important;
      }


/* From apply_premium_nav.js */
.nav-account-btn:hover {
        color: #fff !important;
        background: rgba(255,255,255,0.08) !important;
        border-radius: 6px !important;
      }


/* From apply_premium_nav.js */
.logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        transition: all 0.3s ease !important;
        position: relative !important;
      }
      .logo::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 350px !important;
        height: 60px !important;
        background: radial-gradient(ellipse at 50% 50%, rgba(0, 242, 255, 0.12), transparent 60%) !important;
        pointer-events: none !important;
        z-index: -1 !important;
      }


/* From apply_premium_nav.js */
.nav-links > a, .nav-dropdown > a {
        color: #ffffff !important;
        text-shadow: 
          0 0 4px rgba(0, 242, 255, 0.35),
          0 0 12px rgba(0, 242, 255, 0.2) !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        padding: 0 1.6rem !important; /* Increased horizontal hover padding */
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0.9rem !important; /* Slightly larger text size for readability and hover ease */
        position: relative !important;
      }
      .nav-links > a::after, .nav-dropdown > a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background: #00f2ff !important;
        box-shadow: 0 -2px 10px rgba(0, 242, 255, 0.6) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
      }
      .nav-links > a:hover::after, .nav-dropdown:hover > a::after {
        opacity: 1 !important;
      }


/* From apply_pure_text_logo.js */
/* Pure Text Logo */
.pure-text-logo {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: 0px;
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  transition: transform 0.3s ease;
}
.pure-text-logo:hover {
  }
.pure-text-neon {
  color: #00f2ff;
  text-shadow: 0 0 12px rgba(0, 242, 255, 0.6), 0 0 24px rgba(0, 242, 255, 0.4);
}


/* From clean_logo.js */
/* Brand Text Logo */
.brand-text-logo {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-left: 2px;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  margin-top: 2px;
}
.brand-text-highlight {
  background: linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #D4AF37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* From css_append.js */
/* ========================================================
   GOOGLE TRANSLATE HIDDEN SYSTEM & LANGUAGE DROPDOWN
======================================================== */

/* Hide Google Translate top bar completely */
body {
  top: 0 !important;
}
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
.goog-tooltip {
  display: none !important;
}
.goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  border: none !important; 
  box-shadow: none !important;
}

/* Hide the actual google widget */
#google_translate_element {
  display: none !important;
}

/* Language Dropdown Button Styling */
.lang-selector-wrapper {
  position: relative;
}
.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: var(--bg2);
  border: 1px solid rgb(0 0 0);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 2000;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  min-width: 100px;
}
.lang-selector-wrapper:hover .lang-dropdown-menu,
.lang-dropdown-menu.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.lang-option {
  padding: 0.75rem 1rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lang-option:last-child {
  border-bottom: none;
}
.lang-option:hover {
  background: rgba(0, 242, 255, 0.1);
  color: var(--accent);
}
.lang-option.active-lang {
  color: var(--accent);
}
.lang-flag {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* From final_header_fix.js */
.slot-header {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  background: linear-gradient(181deg, #5835027a 50%, #00000000 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 6px 12px 4px 12px;
  box-shadow: 
    inset 0 4px 6px rgba(255,255,255,0.15), 
    inset 0 -4px 6px rgba(0,0,0,0.8), 
    0 0 10px rgb(8 7 22);
  position: relative;
  width: fit-content;
  z-index: 10;
}

.slot-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cracks'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -2' in='noise' result='highContrast'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cracks)' opacity='0.12'/%3E%3C/svg%3E");
  z-index: 11;
}

.slot-header-hole {
  background: #5e4518;
  border-radius: 8px;
  position: relative;
  box-shadow: inset 0 15px 15px -5px rgba(0, 0, 0, 0.95), inset 0 -15px 15px -5px rgba(0, 0, 0, 0.95), 0 1px 1px rgba(255, 255, 255, 0.25);
  border: 1px solid #080a10;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20; /* THIS MUST BE ABOVE 11 */
}

.slot-header-hole span {
  position: relative;
  z-index: 30;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.slots-part {
  color: #ffffff;
}

.alytics-part {
  color: #00f2ff;
}

.slot-header.win-effect {
  animation: winPulseHeader 0.5s ease-in-out 6;
}

.slot-header.win-effect .slot-header-hole span span {
  color: #ffea00;
  text-shadow: 0 0 10px #ffea00, 0 0 20px #ffea00;
  transition: all 0.2s;
}

@keyframes winPulseHeader {
  0% { box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.15), inset 0 -4px 6px rgba(0,0,0,0.8), 0 0 10px rgb(8 7 22); }
  50% { box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.15), inset 0 -4px 6px rgba(0,0,0,0.8), 0 0 30px #ffea00; border-color: #ffea00; }
  100% { box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.15), inset 0 -4px 6px rgba(0,0,0,0.8), 0 0 10px rgb(8 7 22); }
}


/* From fix_css2.js */
::-webkit-scrollbar-thumb {
  background: #ffcc00;
  border-radius: 6px;
  border: 2px solid #060913;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff7f00;
}

/* NAV */
nav { 
  position: fixed; top: 0; left: 0; right: 0; height: auto; 
  background: rgba(10, 15, 30, 0.95);
  backdrop-filter: blur(20px); 
  border-bottom: 1px solid var(--border); 
  z-index: 99999; 
  display: flex; 
  flex-direction: column;
  transition: all 0.3s; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  padding: 0;
}
.nav-inner { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem; }
.logo { display: flex; align-items: center; gap: 1rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding: 0.5rem 0; position: relative; flex-shrink: 0; align-self: center; }
.logo:hover { }
.logo-icon { 
  width: 48px; height: 48px;


/* From fix_css_syntax.js */
/* ========================================================
   GOOGLE TRANSLATE HIDDEN SYSTEM & LANGUAGE DROPDOWN
======================================================== */

/* Language Dropdown Button Styling */
.lang-selector-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 15px; /* Bridge to the dropdown */
}
.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: var(--bg2);
  border: 1px solid rgb(0 0 0);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 2000;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  min-width: 100px;


/* From fix_layout.js */
.library-subtitle-center {
        flex: 1;
        display: flex;
        justify-content: center;
        text-align: center;
      }


/* From fix_layout.js */
.library-subtitle-center {
        display: flex;
        justify-content: flex-end;
        text-align: right;
        flex-shrink: 0;
      }


/* From fix_layout.js */
.library-title-container {
        flex: 1;
        display: flex;
        justify-content: flex-start;
      }


/* From fix_layout.js */
.library-title-container {
        flex: 1;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
      }


/* From fix_nav_css.js */
.nav-main-glass {
        background: rgba(10, 15, 30, 0.7) !important;
        backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid rgba(0, 242, 255, 0.15) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
        display: flex !important; align-items: stretch !important; justify-content: space-between !important;
        height: 70px !important; padding: 0 2rem !important;
        width: 100% !important; margin: 0 auto !important;
      }


/* From fix_nav_css.js */
.nav-main-glass {
        background: rgba(10, 15, 30, 0.7) !important;
        backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(0, 242, 255, 0.15) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
        display: flex !important; align-items: stretch !important; justify-content: space-between !important;
        height: 70px !important; padding: 0 2rem !important;
        width: 95% !important; max-width: 1400px !important; margin: 15px auto !important;
      }


/* From fix_nav_css.js */
.nav-account-btn {
        display: flex !important; align-items: center !important; justify-content: center !important;
        gap: 0.4rem !important; padding: 0.5rem 1rem !important;
        color: rgba(220, 230, 240, 0.9) !important; font-size: 0.8rem !important; font-weight: 800 !important;
        letter-spacing: 0.08em !important; text-transform: uppercase !important;
        text-decoration: none !important; border-radius: 8px !important;
        transition: all 0.2s !important; white-space: nowrap !important; cursor: pointer !important;
        background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.05) !important;
        height: auto !important; margin: auto 0 !important;
      }
      .nav-account-btn:hover { 
        color: #fff !important; background: rgba(0, 242, 255, 0.1) !important; 
        border-color: rgba(0, 242, 255, 0.3) !important; box-shadow: 0 0 15px rgba(0, 242, 255, 0.2) !important;
      }


/* From fix_nav_css.js */
.nav-account-btn {
        display: flex !important; align-items: center !important; justify-content: center !important;
        height: 100% !important;
        padding: 0 1.2rem !important; color: rgba(255, 255, 255, 0.75) !important;
        font-size: 0.85rem !important; font-weight: 700 !important; gap: 0.4rem !important;
        letter-spacing: 0.05em !important; text-transform: uppercase !important;
        text-decoration: none !important; cursor: pointer !important;
        position: relative !important; transition: all 0.3s ease !important;
        background: transparent !important; border: none !important;
        margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
      }
      .nav-account-btn::before {
        content: '' !important; position: absolute !important; inset: 16px 0 !important;
        border-radius: 8px !important; background: rgba(0, 242, 255, 0.0) !important;
        z-index: -1 !important; transition: background 0.25s ease !important;
      }
      .nav-account-btn:hover::before {
        background: rgba(0, 242, 255, 0.08) !important;
      }
      .nav-account-btn:hover { 
        color: #fff !important; text-shadow: 0 0 10px rgba(0, 242, 255, 0.4) !important;
      }


/* From fix_wrap.js */
.library-title-container {
        display: flex;
        justify-content: flex-start;
        flex-shrink: 0;
        white-space: nowrap;
      }


/* From fix_wrap.js */
.library-subtitle-center {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        text-align: right;
        min-width: 0;
      }


/* From fix_wrap.js */
.library-header-spacer {
        flex: 1;
      }


/* From fix_wrap.js */
.library-header-spacer {
        display: none;
      }


/* From force_header.js */
.slot-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 8px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cracks'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -2' in='noise' result='highContrast'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cracks)' opacity='0.12'/%3E%3C/svg%3E");
  z-index: 1;
}


/* From nav.js */
.lang-selector-wrapper { position: relative; }
      .lang-selector-wrapper:hover .lang-dropdown-menu,
      .lang-dropdown-menu.active { display: flex !important; }
      .lang-option:hover { background: rgba(255,255,255,0.1); }
      nav { display: flex !important; justify-content: space-between; align-items: center; padding: 0 2rem; height: 70px; background: #010818; backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 9999; border-bottom: 1px solid rgba(255,255,255,0.05); width: 100%; }


/* From patch_logo_absolute.js */
.desktop-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 330px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }


/* From patch_search_center.js */
@media (min-width: 901px) {
        .desktop-search-center {
          margin-right: 260px;
        }
      }


/* From patch_top_header.js */
nav {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        padding: 0 2rem;
        height: 70px;
        background: #010818;
        backdrop-filter: blur(10px);
        position: sticky;
        top: 0;
        z-index: 900;
        gap: 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }
      @media (max-width: 900px) {
        nav { padding-right: 4.5rem; }
      }


/* From refactor_explain.js */
.dc-explain { margin-top: 1rem; border-top: 1px dashed rgba(255,255,255,0.05); padding-top: 0.8rem; font-size: 0.8rem; color: rgba(255,255,255,0.7); line-height: 1.5; }
.dc-explain summary { cursor: pointer; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.65rem; list-style: none; display: flex; align-items: center; gap: 0.3rem; outline: none; }
.dc-explain summary::before { content: "►"; font-size: 0.5rem; transition: transform 0.2s; }
.dc-explain[open] summary::before { transform: rotate(90deg); }
.dc-explain ul { margin: 0.5rem 0 0 1rem; padding: 0; }
.dc-explain li { margin-bottom: 0.3rem; }
.dc-market-label { margin-top: 1rem; text-align: center; font-weight: 800; font-size: 0.8rem; padding: 0.4rem; border-radius: 6px; }
.m-above { background: rgba(0,255,100,0.1); color: #00ff64; border: 1px solid rgba(0,255,100,0.2); }
.m-below { background: rgba(255,50,100,0.1); color: #ff3264; border: 1px solid rgba(255,50,100,0.2); }
.dc-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media(max-width:700px){ .dc-decision-grid{grid-template-columns:1fr;} }
.dc-dec-col { background: rgba(18,24,43,0.5); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); }
.dc-dec-title { font-weight: 900; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.dc-dec-title.good { color: #00ff64; }
.dc-dec-title.bad { color: #ff3264; }
.dc-dec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dc-dec-list li { font-size: 0.85rem; color: rgba(255,255,255,0.8); display: flex; align-items: flex-start; gap: 0.4rem; line-height: 1.4; }
.dc-dec-list li::before { content: "•"; color: var(--accent); }


/* From refactor_index.js */
CASINO_DB = (data.casinos || [])
      .filter(c => c.name && c.country && c.regulator && c.bvs !== undefined && c.wpi !== undefined && c.wfs !== undefined && c.scs !== undefined && c.ots !== undefined)
      .map(c => ({
        ...c,
        country: c.country || "Not specified",
        regulator: c.regulator || "Unknown Regulator",
        flag: c.flag || ""
      }));


/* From restore_nav.js */
/* Clean and compact borderless mega-menu list styling */
        .dropdown-menu {
          position: absolute !important;
          left: 0 !important;
          width: 100% !important;
          opacity: 0 !important;
          pointer-events: none !important;
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
          transform: translateY(-10px) !important;
          z-index: 1100 !important;
          background: rgba(6, 10, 20, 0.98) !important;
          border-bottom: 2px solid rgba(0, 242, 255, 0.35) !important;
          border-top: 1px solid rgba(0, 242, 255, 0.15) !important;
          box-shadow: 0 40px 100px rgba(0,0,0,0.95), 0 0 45px rgba(0, 242, 255, 0.15) !important;
          padding: 2rem !important;
          top: 140px !important; /* Altura exacta del nav */
        }
        .nav-dropdown:hover .dropdown-menu {
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: translateY(0) !important;
        }
        .dropdown-inner {
          max-width: 1400px !important;
          width: fit-content !important;
          margin: 0 auto !important;
          display: grid !important;
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 0.45rem 4rem !important;
        }
        .mega-column {
          display: flex !important;
          flex-direction: column !important;
          gap: 0.5rem !important;
        }
        .mega-column-title {
          color: var(--accent, #00f2ff) !important;
          font-size: 1.1rem !important;
          font-weight: 800 !important;
          margin-bottom: 0.5rem !important;
          padding-bottom: 0.5rem !important;
          border-bottom: 1px solid rgba(0, 242, 255, 0.2) !important;
          text-transform: uppercase !important;
          letter-spacing: 0.05em !important;
        }
        .mega-column-list {
          display: flex !important;
          flex-direction: column !important;
          gap: 0.2rem !important;
          max-height: 400px !important;
          overflow-y: auto !important;
        }
        .mega-column-list::-webkit-scrollbar {
          width: 4px !important;
        }
        .mega-column-list::-webkit-scrollbar-thumb {
          background: rgba(0, 242, 255, 0.3) !important;
          border-radius: 4px !important;
        }
        .dropdown-inner a {
          color: #94a3b8 !important;
          text-decoration: none !important;
          font-size: 0.85rem !important;
          padding: 0.35rem 0.5rem !important;
          border-radius: 6px !important;
          transition: all 0.2s ease !important;
          display: flex !important;
          align-items: center !important;
          border: 1px solid transparent !important;
          background: transparent !important;
        }
        .dropdown-inner a:hover {
          background: rgba(0, 242, 255, 0.05) !important;
          color: #ffffff !important;
          border-color: rgba(0, 242, 255, 0.2) !important;
          transform: translateX(4px) !important;
        }
        
        @keyframes breathingRgbGlow {
          0%, 100% {
            color: #00f2ff;
            text-shadow: 0 0 5px rgba(0, 242, 255, 0.45), 0 0 12px rgba(0, 242, 255, 0.25);
          }
          33% {
            color: #c084fc;
            text-shadow: 0 0 6px rgba(192, 132, 252, 0.55), 0 0 15px rgba(192, 132, 252, 0.3);
          }
          66% {
            color: #4ade80;
            text-shadow: 0 0 6px rgba(74, 222, 128, 0.55), 0 0 15px rgba(74, 222, 128, 0.3);
          }
        }

        .nav-links > a, .nav-dropdown > a {
          color: #ffffff !important;
          text-shadow: 0 0 4px rgba(0, 242, 255, 0.35), 0 0 12px rgba(0, 242, 255, 0.2) !important;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
          padding: 0 1.6rem !important;
          height: 100% !important;
          display: flex !important;
          align-items: center !important;
          font-size: 0.9rem !important;
          position: relative !important;
          text-decoration: none !important;
          cursor: pointer !important;
        }
        .nav-links > a::after, .nav-dropdown > a::after {
          content: '' !important;
          position: absolute !important;
          bottom: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 2px !important;
          background: #00f2ff !important;
          box-shadow: 0 -2px 10px rgba(0, 242, 255, 0.6) !important;
          opacity: 0 !important;
          transition: opacity 0.3s ease !important;
        }
        .nav-links > a:hover::after, .nav-dropdown:hover > a::after {
          opacity: 1 !important;
        }
        .nav-links > a:hover, .nav-dropdown:hover > a {
          color: #ffffff !important;
          text-shadow: 0 0 10px rgba(0, 242, 255, 0.8), 0 0 20px rgba(0, 242, 255, 0.4), 0 0 30px rgba(0, 242, 255, 0.2) !important;
        }

        .theme-neon-emoji {
          margin-right: 0.55rem !important;
          display: inline-block !important;
          filter: drop-shadow(0 0 3px rgba(0, 242, 255, 0.65)) !important;
          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .dropdown-inner a:hover .theme-neon-emoji {
          filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.95)) drop-shadow(0 0 16px rgba(0, 242, 255, 0.5)) !important;
          transform: scale(1.18) !important;
        }

        /* 
          FIX FOR TOP BAR:
          The user wants the top bar (utility bar) "encima del header" (visually above).
          So we will NOT put the background gradient on the entire nav. 
          We put it on the bottom two sections.
        */
        nav {
          align-items: stretch !important;
          height: auto !important;
          flex-direction: column !important;
          padding: 0 !important;
          display: flex !important;
          background: transparent !important;
          /* Removed gradient from root nav */
        }
        
        .nav-utility-bar {
          display: flex !important;
          justify-content: flex-end !important;
          align-items: center !important;
          height: 30px !important;
          padding: 0 2rem !important;
          background: #000000 !important; /* Solid dark background to distinguish it */
          border-bottom: 1px solid rgba(255,255,255,0.08) !important;
          width: 100% !important;
          max-width: 100% !important; /* Full width visually */
        }
        
        /* The inner content of the utility bar stays centered to 1400px */
        .nav-utility-inner {
          display: flex !important;
          justify-content: flex-end !important;
          align-items: center !important;
          width: 100% !important;
          max-width: 1400px !important;
          margin: 0 auto !important;
          height: 100% !important;
        }

        /* Group the middle and bottom bar in a wrapper for the glassmorphism effect */
        .nav-main-glass {
          background: linear-gradient(180deg, rgba(6, 9, 19, 0.98) 0%, rgba(10, 15, 30, 0.85) 100%) !important;
          backdrop-filter: blur(24px) !important;
          width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
        }

        .nav-top-bar {
          display: flex !important;
          justify-content: space-between !important;
          align-items: center !important;
          height: 65px !important;
          padding: 0 2rem !important;
          width: 100% !important;
          max-width: 1400px !important;
          margin: 0 auto !important;
        }
        .nav-top-left, .nav-top-right {
          flex: 1 !important;
          display: flex !important;
          align-items: center !important;
        }
        .nav-top-left { justify-content: flex-start !important; }
        .nav-top-right { justify-content: flex-end !important; }
        
        .logo {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          height: 100% !important;
          transition: all 0.3s ease !important;
          position: relative !important;
          text-decoration: none !important;
        }
        .logo::before {
          content: '' !important;
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
          width: 350px !important;
          height: 60px !important;
          background: radial-gradient(ellipse at 50% 50%, rgba(0, 242, 255, 0.12), transparent 60%) !important;
          pointer-events: none !important;
          z-index: -1 !important;
        }
        
        .nav-bottom-bar {
          display: flex !important;
          justify-content: center !important;
          height: 45px !important;
          border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
          width: 100% !important;
          max-width: 1400px !important;
          margin: 0 auto !important;
        }
        .nav-links {
          display: flex !important;
          align-items: stretch !important;
          justify-content: center !important;
          gap: 0.5rem !important;
          white-space: nowrap !important;
          flex-wrap: nowrap !important;
          height: 100% !important;
        }
        .nav-dropdown {
          height: 100% !important;
          display: flex !important;
          align-items: stretch !important;
        }
        .nav-dropdown > a {
          display: flex !important;
          align-items: center !important;
          height: 100% !important;
        }
        .nav-account-btn {
          padding: 0.25rem 1rem !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          color: #94a3b8 !important;
          font-size: 0.85rem !important;
          font-weight: 600 !important;
          gap: 0.5rem !important;
          border-radius: 4px !important;
          transition: all 0.2s !important;
          text-decoration: none !important;
        }
        .nav-account-btn:hover {
          color: #fff !important;
          background: rgba(255,255,255,0.08) !important;
          border-radius: 6px !important;
        }


/* From restore_nav2.js */
/* Clean and compact borderless mega-menu list styling */
        .dropdown-menu {
          position: absolute !important;
          left: 0 !important;
          width: 100% !important;
          opacity: 0 !important;
          pointer-events: none !important;
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
          transform: translateY(-10px) !important;
          z-index: 1100 !important;
          background: rgba(6, 10, 20, 0.98) !important;
          border-bottom: 2px solid rgba(0, 242, 255, 0.35) !important;
          border-top: 1px solid rgba(0, 242, 255, 0.15) !important;
          box-shadow: 0 40px 100px rgba(0,0,0,0.95), 0 0 45px rgba(0, 242, 255, 0.15) !important;
          padding: 2rem !important;
          top: 140px !important;
        }
        .nav-dropdown:hover .dropdown-menu {
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: translateY(0) !important;
        }
        .dropdown-inner {
          max-width: 1400px !important;
          width: fit-content !important;
          margin: 0 auto !important;
          display: grid !important;
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 0.45rem 4rem !important;
        }
        .mega-column {
          display: flex !important;
          flex-direction: column !important;
          gap: 0.5rem !important;
        }
        .mega-column-title {
          color: var(--accent, #00f2ff) !important;
          font-size: 1.1rem !important;
          font-weight: 800 !important;
          margin-bottom: 0.5rem !important;
          padding-bottom: 0.5rem !important;
          border-bottom: 1px solid rgba(0, 242, 255, 0.2) !important;
          text-transform: uppercase !important;
          letter-spacing: 0.05em !important;
        }
        .mega-column-list {
          display: flex !important;
          flex-direction: column !important;
          gap: 0.2rem !important;
          max-height: 400px !important;
          overflow-y: auto !important;
        }
        .mega-column-list::-webkit-scrollbar {
          width: 4px !important;
        }
        .mega-column-list::-webkit-scrollbar-thumb {
          background: rgba(0, 242, 255, 0.3) !important;
          border-radius: 4px !important;
        }
        .dropdown-inner a {
          color: #94a3b8 !important;
          text-decoration: none !important;
          font-size: 0.85rem !important;
          padding: 0.35rem 0.5rem !important;
          border-radius: 6px !important;
          transition: all 0.2s ease !important;
          display: flex !important;
          align-items: center !important;
          border: 1px solid transparent !important;
          background: transparent !important;
        }
        .dropdown-inner a:hover {
          background: rgba(0, 242, 255, 0.05) !important;
          color: #ffffff !important;
          border-color: rgba(0, 242, 255, 0.2) !important;
          transform: translateX(4px) !important;
        }
        
        .nav-links > a, .nav-dropdown > a {
          color: #ffffff !important;
          text-shadow: 0 0 4px rgba(0, 242, 255, 0.35), 0 0 12px rgba(0, 242, 255, 0.2) !important;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
          padding: 0 1.6rem !important;
          height: 100% !important;
          display: flex !important;
          align-items: center !important;
          font-size: 0.9rem !important;
          position: relative !important;
          text-decoration: none !important;
          cursor: pointer !important;
        }
        .nav-links > a::after, .nav-dropdown > a::after {
          content: '' !important;
          position: absolute !important;
          bottom: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 2px !important;
          background: #00f2ff !important;
          box-shadow: 0 -2px 10px rgba(0, 242, 255, 0.6) !important;
          opacity: 0 !important;
          transition: opacity 0.3s ease !important;
        }
        .nav-links > a:hover::after, .nav-dropdown:hover > a::after {
          opacity: 1 !important;
        }
        .nav-links > a:hover, .nav-dropdown:hover > a {
          color: #ffffff !important;
          text-shadow: 0 0 10px rgba(0, 242, 255, 0.8), 0 0 20px rgba(0, 242, 255, 0.4), 0 0 30px rgba(0, 242, 255, 0.2) !important;
        }

        .theme-neon-emoji {
          margin-right: 0.55rem !important;
          display: inline-block !important;
          filter: drop-shadow(0 0 3px rgba(0, 242, 255, 0.65)) !important;
          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .dropdown-inner a:hover .theme-neon-emoji {
          filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.95)) drop-shadow(0 0 16px rgba(0, 242, 255, 0.5)) !important;
          transform: scale(1.18) !important;
        }

        /* 
          TOP BAR FIX:
          We separate the top bar from the glassmorphic header.
        */
        nav {
          align-items: stretch !important;
          height: auto !important;
          flex-direction: column !important;
          padding: 0 !important;
          display: flex !important;
          background: transparent !important;
        }
        
        /* 1. Utility Top Bar (Separated, solid, dark) */
        .nav-utility-wrapper {
          background: #010818 !important;
          border-bottom: 1px solid rgba(255,255,255,0.06) !important;
          width: 100% !important;
        }
        .nav-utility-bar {
          display: flex !important;
          justify-content: flex-end !important;
          align-items: center !important;
          height: 30px !important;
          padding: 0 2rem !important;
          width: 100% !important;
          max-width: 1400px !important;
          margin: 0 auto !important;
        }
        
        /* 2. Main Glassmorphic Header Wrapper */
        .nav-main-glass {
          background: #010818 !important;
          backdrop-filter: blur(24px) !important;
          width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
        }

        .nav-top-bar {
          display: flex !important;
          justify-content: space-between !important;
          align-items: center !important;
          height: 65px !important;
          padding: 0 2rem !important;
          width: 100% !important;
          max-width: 1400px !important;
          margin: 0 auto !important;
        }
        .nav-top-left, .nav-top-right {
          flex: 1 !important;
          display: flex !important;
          align-items: center !important;
        }
        .nav-top-left { justify-content: flex-start !important; }
        .nav-top-right { justify-content: flex-end !important; }
        
        .logo {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          height: 100% !important;
          transition: all 0.3s ease !important;
          position: relative !important;
          text-decoration: none !important;
        }
        .logo::before {
          content: '' !important;
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
          width: 350px !important;
          height: 60px !important;
          background: radial-gradient(ellipse at 50% 50%, rgba(0, 242, 255, 0.12), transparent 60%) !important;
          pointer-events: none !important;
          z-index: -1 !important;
        }
        
        .nav-bottom-bar {
          display: flex !important;
          justify-content: center !important;
          height: 45px !important;
          border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
          width: 100% !important;
          max-width: 1400px !important;
          margin: 0 auto !important;
        }
        .nav-links {
          display: flex !important;
          align-items: stretch !important;
          justify-content: center !important;
          gap: 0.5rem !important;
          white-space: nowrap !important;
          flex-wrap: nowrap !important;
          height: 100% !important;
        }
        .nav-dropdown {
          height: 100% !important;
          display: flex !important;
          align-items: stretch !important;
        }
        .nav-dropdown > a {
          display: flex !important;
          align-items: center !important;
          height: 100% !important;
        }
        .nav-account-btn {
          padding: 0.25rem 1rem !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          color: #94a3b8 !important;
          font-size: 0.85rem !important;
          font-weight: 600 !important;
          gap: 0.5rem !important;
          border-radius: 4px !important;
          transition: all 0.2s !important;
          text-decoration: none !important;
        }
        .nav-account-btn:hover {
          color: #fff !important;
          background: rgba(255,255,255,0.08) !important;
          border-radius: 6px !important;
        }


/* From update_3d_relief.js */
.slot-artwork {
  display: flex;
  background: linear-gradient(180deg, #161b2a 0%, #4e344c 100%);
  border: 0px solid rgb(249 248 252 / 29%);
  border-radius: 12px;
  padding: 13px;
  gap: 15px;
  box-shadow: 0 10px 25px rgb(213 202 202 / 80%), inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgb(8 7 22);
  position: relative;
  margin-left: auto;
}


/* From update_3d_relief.js */
.slot-artwork {
  display: flex;
  background: linear-gradient(180deg, #161b2a 0%, #4e344c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 13px;
  gap: 15px;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.6), 
    inset 0 6px 8px rgba(255,255,255,0.15), 
    inset 0 -6px 8px rgba(0,0,0,0.8), 
    inset 4px 0 6px rgba(255,255,255,0.05), 
    inset -4px 0 6px rgba(0,0,0,0.6),
    0 0 15px rgb(8 7 22);
  position: relative;
  margin-left: auto;
}


/* From update_3d_relief.js */
.reel {
  width: 75px;
  height: 100px;
  background: #1e293b;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.8), inset 0 -10px 15px rgba(0, 0, 0, 0.8);
  border: 1px solid #12182b;
}


/* From update_3d_relief.js */
.reel {
  width: 75px;
  height: 100px;
  background: #0f131d;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: 
    inset 0 15px 15px -5px rgba(0, 0, 0, 0.95), 
    inset 0 -15px 15px -5px rgba(0, 0, 0, 0.95), 
    0 1px 1px rgba(255,255,255,0.25);
  border: 1px solid #080a10;
}


/* From update_adminjs_seo.js */
);
  } catch(err) {
    showToast('❌ Error saving SEO: ' + err.message);
  }
};


/* From update_browse_animation.js */
.symbols-strip {
  display: flex;
  flex-direction: column;
  animation: spinDown 10s linear infinite;
}

.reel:nth-child(1) .symbols-strip { animation-duration: 10s; }
.reel:nth-child(2) .symbols-strip { animation-duration: 12s; }
.reel:nth-child(3) .symbols-strip { animation-duration: 14s; }

.symbol {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

@keyframes spinDown {
  0% { transform: translateY(calc(var(--spin-start) * -100px)); }
  100% { transform: translateY(0); } 
}


/* From update_browse_animation.js */
.symbols-strip {
  display: flex;
  flex-direction: column;
}

.reel:nth-child(1) .symbols-strip { animation: spinSlot 5s cubic-bezier(0.15, 0.85, 0.25, 1) infinite; }
.reel:nth-child(2) .symbols-strip { animation: spinSlot 6s cubic-bezier(0.15, 0.85, 0.25, 1) infinite; }
.reel:nth-child(3) .symbols-strip { animation: spinSlot 7s cubic-bezier(0.15, 0.85, 0.25, 1) infinite; }

.symbol {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

@keyframes spinSlot {
  0% { transform: translateY(calc(var(--spin-start) * -100px)); filter: blur(2px); }
  45% { filter: blur(0px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0); } 
}


/* From update_browse_css.js */
.slot-artwork {
  display: flex;
  background-color: #4a4a52;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E"), linear-gradient(180deg, #595a63 0%, #313136 100%);
  border: 4px solid #2a2a2e;
  border-radius: 12px;
  padding: 13px;
  gap: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.8), inset 0 4px 10px rgba(255,255,255,0.1), inset 0 -4px 10px rgba(0,0,0,0.5), 0 0 15px rgb(8 7 22);
  position: relative;
  margin-left: auto;
}


/* From update_browse_css.js */
.symbols-strip {
  display: flex;
  flex-direction: column;
  animation: spin 10s linear infinite;
}

.reel:nth-child(1) .symbols-strip { animation-duration: 10s; }
.reel:nth-child(2) .symbols-strip { animation-duration: 10s; animation-direction: reverse; }
.reel:nth-child(3) .symbols-strip { animation-duration: 10s; }

.symbol {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

@keyframes spin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } 
}


/* From update_browse_css.js */
.symbols-strip {
  display: flex;
  flex-direction: column;
  animation: spinDown 10s linear infinite;
}

.reel:nth-child(1) .symbols-strip { animation-duration: 3s; }
.reel:nth-child(2) .symbols-strip { animation-duration: 4s; }
.reel:nth-child(3) .symbols-strip { animation-duration: 5s; }

.symbol {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

@keyframes spinDown {
  0% { transform: translateY(-500px); }
  100% { transform: translateY(0); } 
}


/* From update_browse_css2.js */
.slot-artwork {
  display: flex;
  background: linear-gradient(180deg, #161b2a 0%, #4e344c 100%);
  border: 0px solid rgb(249 248 252 / 29%);
  border-radius: 12px;
  padding: 13px;
  gap: 15px;
  box-shadow: 0 10px 25px rgb(213 202 202 / 80%), inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgb(8 7 22);
  position: relative;
  margin-left: auto;
}

.slot-artwork::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cracks'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -2' in='noise' result='highContrast'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cracks)' opacity='0.12'/%3E%3C/svg%3E");
  z-index: 10;
}


/* From update_catcard_legibility.js */
/* CATEGORIES */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.25rem;
}
.cat-card {
  position: relative;
  background: rgba(8, 12, 25, 0.95);
  border: 1px solid rgba(0, 242, 255, 0.15);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  background: radial-gradient(800px circle at 50% 0%, rgba(0, 242, 255, 0.15), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.cat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 242, 255, 0.5);
  background: rgba(12, 18, 35, 0.95);
  box-shadow: 0 10px 30px -10px rgba(0, 242, 255, 0.3);
}
.cat-card:hover::before {
  opacity: 1;
}
.cat-icon {
  font-size: 2.8rem;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.3));
  z-index: 2;
  transition: transform 0.3s ease;
}
.cat-card:hover .cat-icon {
  transform: scale(1.15);
}
.cat-name {
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 0.35rem;
  color: #ffffff;
  z-index: 2;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 10px rgba(255,255,255,0.2);
}
.cat-count {
  font-size: 0.8rem;
  color: var(--accent);
  z-index: 2;
  font-weight: 800;
  background: rgba(0, 242, 255, 0.1);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  margin-top: 0.5rem;
  border: 1px solid rgb(0 0 0);
  box-shadow: inset 0 0 8px rgba(0, 242, 255, 0.1);
}


/* From update_community.js */
"slot.stats.statisticsDesc": "In-depth objective technical analysis and payout statistics for {slotName} by {provider}.",\n    "slot.community.title": "Community Gameplay Intelligence",


/* From update_community.js */
"slot.stats.statisticsDesc": "Análisis técnico objetivo en profundidad y estadísticas de pagos de {slotName} por {provider}.",\n    "slot.community.title": "Inteligencia de Juego de la Comunidad",


/* From update_css.js */
/* Slot Machine Artwork */
.slot-artwork {
  display: flex;
  background: linear-gradient(180deg, #12182b 0%, #0a0f1e 100%);
  border: 2px solid rgba(0, 242, 255, 0.3);
  border-radius: 12px;
  padding: 8px;
  gap: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.8), inset 0 2px 10px rgba(0,0,0,0.5), 0 0 15px rgba(0, 242, 255, 0.2);
  position: relative;
  margin-left: auto;
}

.slot-artwork::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.8), rgba(0, 122, 204, 0.8));
  z-index: -1;
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  0% { opacity: 0.5; box-shadow: 0 0 10px rgba(0, 242, 255, 0.4); }
  100% { opacity: 1; box-shadow: 0 0 20px rgba(0, 122, 204, 0.8); }
}

.reel {
  width: 45px;
  height: 65px;
  background: #1e293b;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 10px 15px rgba(0,0,0,0.8), inset 0 -10px 15px rgba(0,0,0,0.8);
  border: 1px solid rgb(0 0 0);
}

.symbols-strip {
  display: flex;
  flex-direction: column;
  animation: spin 1.2s linear infinite;
}

.reel:nth-child(1) .symbols-strip { animation-duration: 0.8s; }
.reel:nth-child(2) .symbols-strip { animation-duration: 1.1s; animation-direction: reverse; }
.reel:nth-child(3) .symbols-strip { animation-duration: 0.95s; }

.symbol {
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

@keyframes spin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } 
}


/* From update_css_clean.js */
.symbols-strip {
  display: flex;
  flex-direction: column;
  will-change: transform, filter;
  animation: none !important;
}

.symbol {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}


/* From update_header.js */
.slot-header {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  background: linear-gradient(180deg, #161b2a 0%, #4e344c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 20px;
  box-shadow: 
    0 10px 20px rgba(0,0,0,0.6), 
    inset 0 4px 6px rgba(255,255,255,0.15), 
    inset 0 -4px 6px rgba(0,0,0,0.8), 
    0 0 10px rgb(8 7 22);
  position: relative;
  overflow: hidden;
  width: fit-content;
}

.slot-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 8px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cracks'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -2' in='noise' result='highContrast'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cracks)' opacity='0.12'/%3E%3C/svg%3E");
  z-index: 1;
}

.slot-header span {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.slot-header.win-effect {
  animation: winPulseHeader 0.5s ease-in-out 6;
}

.slot-header.win-effect span {
  color: #ffea00;
  text-shadow: 0 0 10px #ffea00, 0 0 20px #ffea00;
  transition: all 0.2s;
}

@keyframes winPulseHeader {
  0% { box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.15), inset 0 -4px 6px rgba(0,0,0,0.8), 0 0 10px rgb(8 7 22); }
  50% { box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.15), inset 0 -4px 6px rgba(0,0,0,0.8), 0 0 30px #ffea00; border-color: #ffea00; }
  100% { box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.15), inset 0 -4px 6px rgba(0,0,0,0.8), 0 0 10px rgb(8 7 22); }
}


/* From update_header_hole.js */
.slot-header {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  background: linear-gradient(180deg, #161b2a 0%, #4e344c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 20px;
  box-shadow: 
    0 10px 20px rgba(0,0,0,0.6), 
    inset 0 4px 6px rgba(255,255,255,0.15), 
    inset 0 -4px 6px rgba(0,0,0,0.8), 
    0 0 10px rgb(8 7 22);
  position: relative;
  overflow: hidden;
  width: fit-content;
}


/* From update_header_hole.js */
.slot-header {
  display: none;
}

.slot-header::after {
  display: none;
}

.slot-header-hole {
  background: #131a22;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  /* box-shadow: inset 0 8px 10px -3px rgb(255 255 255 / 94%), inset 0 -8px 10px -3px rgb(232 228 219 / 95%), 0 1px 1px rgb(255 255 255); */
  /* border: 1px solid #516064; */
  padding: 2px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.slot-header span {
  position: relative;
  z-index: 2;
  /* text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); */
}


/* Redundant glass-stat-card styles removed - styled inline in index.html for page-specific requirements */


/* From update_lang.js */
/* Language Selector */
.lang-selector-wrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding: 0.5rem 0;
}
.lang-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--sidebar-bg, #1e293b);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 9999;
  min-width: 130px;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.lang-selector-wrapper:hover .lang-dropdown-menu, .lang-dropdown-menu.active {
  display: flex !important;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  transition: background 0.2s;
}
.lang-option:hover {
  background: rgba(255,255,255,0.1);
}
.lang-flag {
  width: 20px;
  min-width: 20px;
  border-radius: 2px;
}


/* From update_nav.js */
/* Clickable Area and Stretch Extensions for Flawless Dropdowns */
      nav {
        align-items: stretch !important;
      }
      .nav-top-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
        padding: 0 2rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
      }
      .nav-top-left, .nav-top-right {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
      }
      .nav-top-left { justify-content: flex-start !important; }
      .nav-top-right { justify-content: flex-end !important; }
      .logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        transition: all 0.3s ease !important;
      }
      .nav-bottom-bar {
        display: flex !important;
        justify-content: center !important;
        height: 45px !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
      }
      .nav-links {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        height: 100% !important;
      }
      .nav-dropdown {
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
      }
      .nav-dropdown > a {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
      }
      .nav-account-btn {
        padding: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
      }


/* From update_slot_logic.js */
@keyframes winPulse {
  0% { box-shadow: 0 10px 25px rgb(213 202 202 / 80%), inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgb(8 7 22); }
  50% { box-shadow: 0 10px 25px rgb(213 202 202 / 80%), inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 50px #ffea00, 0 0 100px #ffea00; }
  100% { box-shadow: 0 10px 25px rgb(213 202 202 / 80%), inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgb(8 7 22); }
}

.slot-artwork.win-effect {
  animation: winPulse 0.5s ease-in-out 6; /* 3 seconds total */
}

.slot-artwork.win-effect::before {
  animation: winPulse 0.5s ease-in-out 6; 
  background: linear-gradient(179deg, #ffea00, #ff8c00);
}


/* From update_tiers.js */
.nav-utility-bar {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        height: 30px !important;
        padding: 0 2rem !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border-bottom: 1px solid rgba(255,255,255,0.03) !important;
      }
      .nav-top-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 65px !important;
        padding: 0 2rem !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
      }
      .nav-top-left, .nav-top-right {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
      }
      .nav-top-left { justify-content: flex-start !important; }
      .nav-top-right { justify-content: flex-end !important; }
      .logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        transition: all 0.3s ease !important;
      }
      .nav-bottom-bar {
        display: flex !important;
        justify-content: center !important;
        height: 45px !important;
        border-top: 1px solid rgba(255,255,255,0.03) !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
      }
      .nav-links {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        height: 100% !important;
      }
      .nav-dropdown {
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
      }
      .nav-dropdown > a {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
      }
      .nav-account-btn {
        padding: 0.25rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #94a3b8 !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        gap: 0.5rem !important;
        border-radius: 4px !important;
        transition: all 0.2s !important;
      }
      .nav-account-btn:hover {
        color: #fff !important;
        background: rgba(255,255,255,0.05) !important;
      }


/* From update_user_css.js */
.slot-artwork {
  display: flex;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 15px;
  position: relative;
  width: 100%;
}

.slot-artwork::after {
  display: none;
}

.slot-artwork::before {
  display: none;
}

/* From update_user_css.js */
.reel {
  flex: 1;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 3px solid #131a22;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 15px 20px rgba(0, 0, 0, 0.15), inset 0 -15px 20px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.4);
}


/* FORCED OVERRIDES TO RESTORE HEADER */

.lang-selector-wrapper {
  position: relative !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding-bottom: 15px !important;
}
.lang-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  right: 0 !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(0, 242, 255, 0.2) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
  transition: all 0.2s ease !important;
  z-index: 9999 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
  min-width: 100px !important;
}
.lang-selector-wrapper:hover .lang-dropdown-menu,
.lang-dropdown-menu.active {
  opacity: 1 !important;
  pointer-events: all !important;
  transform: translateY(0) !important;
  display: flex !important;
}

/* Ensure the top header stays on top */
.wsa-top-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}


/* FIX SEARCH BAR AND AUTH CLICKS */
.search-container { z-index: 9999 !important; }
#searchAutocomplete { z-index: 10000 !important; }
#authContainer { z-index: 9999 !important; position: relative; }
#authContainer button { pointer-events: all !important; position: relative; z-index: 10000 !important; }
.lang-selector-wrapper { z-index: 9999 !important; }


/* FIX SEARCH BAR AND AUTH CLICKS */
.search-container { z-index: 9999 !important; }
#searchAutocomplete { z-index: 10000 !important; }
#authContainer { z-index: 9999 !important; position: relative; }
#authContainer button { pointer-events: all !important; position: relative; z-index: 10000 !important; }
.lang-selector-wrapper { z-index: 9999 !important; }

/* Ensure the top header stays on top */
.wsa-top-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}

/* Guide and Review Custom Styles */
.guide-review-section {
    background-color: #1c2f40 !important;
    padding: 0rem 1.75rem 1rem 1.75rem !important;
    /* border: 2px dashed #273d4d !important; */
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.guide-review-section h2 {
    color: #e2e8f0 !important;
    background-color: #000000 !important;
    font-weight: 600 !important;
    font-size: 1.4rem !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    border-bottom: 2px dashed #273d4d !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: -1.75rem !important;
    margin-right: -1.75rem !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}
/* Wow Category Header & Symbol Cards Responsiveness */
.wow-category-header {
  margin-top: 0rem !important;
}

.wow-payout-grid-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 1.5rem 0 1.5rem 0 !important;
}

.wow-payout-card {
  flex: 1 1 calc(25% - 0.75rem) !important;
  min-width: 170px !important; /* Mobile friendly minimum width */
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .wow-payout-card {
    flex: 1 1 calc(50% - 0.75rem) !important; /* 2 columns on tablets */
  }
}

@media (max-width: 480px) {
  .wow-payout-card {
    flex: 1 1 100% !important; /* 1 column on mobile */
  }
}

/* Global H3 Styles */
h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

/* Gradient Navigation Bar Override */
nav:not([aria-label="breadcrumb"]) {
  background: linear-gradient(90deg, #010818 0%, #002859 50%, #010818 100%) !important;
}
nav:not([aria-label="breadcrumb"]) .nav-utility-wrapper,
nav:not([aria-label="breadcrumb"]) .nav-main-glass {
  background: transparent !important;
}

/* FAQ Item Custom Styling */
.faq-item[open] {
    border-color: #000000;
    background: rgba(124, 58, 237, 0.03);
}

.faq-item[open] {
    border-color: #000000;
    background: rgb(14 21 27 / 49%);
}

.faq-item[open] summary .faq-trigger-icon {
    transform: rotate(180deg);
    background: #ffffff;
    color: #000000;
}

.faq-item {
    background: rgb(13 20 27 / 34%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.5rem 1.5rem 0.5rem 3.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 400;
    color: var(--text);
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
    user-select: none;
}


/* ==========================================================================
   SLOTS INTELLIGENCE GUIDE & PILLAR PAGES STYLES
   ========================================================================== */

/* Neon Ambient Glowing Backgrounds */
.slots-guide-container {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
}

.ambient-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.ambient-glow.cyan {
  top: 10%;
  left: 5%;
  background: #00f2ff;
}
.ambient-glow.emerald {
  bottom: 20%;
  right: 10%;
  background: #00ff88;
}

/* 3-Column Grid Layout Wrapper */
.guide-layout-wrapper {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 2.5rem;
  align-items: start;
  width: 100%;
  position: relative;
  z-index: 1;
}
.guide-layout-wrapper.no-right-sidebar {
  grid-template-columns: 280px minmax(0, 1fr);
}

/* Left Sidebar Navigation */
.guide-sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 125px);
  overflow-y: auto;
  padding-right: 0.5rem;
}
.guide-sidebar::-webkit-scrollbar {
  width: 4px;
}
.guide-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
.guide-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.guide-sidebar-nav-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #64748b);
  margin-bottom: 1rem;
  padding-left: 0.5rem;
}

/* Cluster Accordion Groups */
.sidebar-cluster-group {
  margin-bottom: 0.75rem;
  background: rgba(15, 22, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.sidebar-cluster-group:hover {
  border-color: rgba(0, 242, 255, 0.15);
}
.sidebar-cluster-group.expanded {
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-cluster-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.sidebar-cluster-header:hover {
  background: rgba(255, 255, 255, 0.02);
}
.sidebar-cluster-header .arrow {
  font-size: 0.6rem;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--muted);
}
.sidebar-cluster-group.expanded .sidebar-cluster-header .arrow {
  transform: rotate(90deg);
}

.sidebar-cluster-links {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(10, 15, 30, 0.2);
}
.sidebar-cluster-group.expanded .sidebar-cluster-links {
  max-height: 1000px;
}

.sidebar-nav-item {
  display: block;
  padding: 0.6rem 1rem 0.6rem 1.5rem;
  color: #94a3b8;
  font-size: 0.82rem;
  text-decoration: none;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: all 0.18s;
}
.sidebar-nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.01);
  border-left-color: rgba(0, 242, 255, 0.3);
}
.sidebar-nav-item.active-page {
  color: #00f2ff;
  font-weight: 700;
  background: rgba(0, 242, 255, 0.03);
  border-left-color: #00f2ff;
}

/* Sidebar Table of Contents (Scroll Spy) */
.sidebar-toc-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem 1rem 0.75rem 2rem;
  padding-left: 0.75rem;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
}
.sidebar-toc-link {
  font-size: 0.76rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-toc-link:hover {
  color: #fff;
}
.sidebar-toc-link.active-toc-section {
  color: #00ff88;
  font-weight: 700;
}

/* Right Panel (Widgets) */
.guide-right-panel {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.right-panel-widget {
  background: rgba(15, 22, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1.25rem;
}
.right-panel-widget h4 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.5rem;
}

.widget-mechanics-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.widget-mech-badge {
  font-size: 0.74rem;
  font-weight: 600;
  color: #00f2ff;
  background: rgba(0, 242, 255, 0.06);
  border: 1px solid rgba(0, 242, 255, 0.15);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  transition: all 0.18s;
}
.widget-mech-badge:hover {
  color: #fff;
  background: #00f2ff;
  border-color: #00f2ff;
  transform: translateY(-2px);
}

.widget-definitions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.definition-item {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 0.75rem;
}
.definition-term {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}
.definition-term .definition-link {
  color: #00f2ff;
  text-decoration: none;
}
.definition-term .definition-link:hover {
  text-decoration: underline;
}
.definition-desc {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Central Main Content Column */
.guide-main-content {
  flex-grow: 1;
}

/* Breadcrumb Navigation */
.guide-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.25rem;
    width: 100%;
  }
  .guide-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
  }
  .guide-breadcrumbs a:hover {
    color: #00f2ff;
    text-shadow: 0 0 12px rgba(0, 242, 255, 0.4);
    transform: translateY(-1px);
  }
  .guide-breadcrumbs .sep {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.15);
    user-select: none;
  }
  .guide-breadcrumbs .active {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Page Header */
.guide-page-header {
  background: linear-gradient(185deg, #132a3b, #000000) !important;
  padding: 2rem 2.5rem 2rem 2.5rem !important;
  border: none !important;
  border-radius: 0 0 24px 24px !important;
  overflow: hidden;
  margin-bottom: 2.5rem;
  margin-top: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.guide-category-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.75rem;
  font-family: monospace;
}
.guide-page-header h1 {
  color: #fff !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1.2;
}
.guide-page-subtitle {
  font-size: 1rem;
  color: #a1a1a1;
  margin: 0;
  line-height: 1.6;
}

/* Subpage Custom Content Blocks */
.guide-subpage-blocks {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Block 1: Standard Article Text Block */
.guide-block-text {
  line-height: 1.7;
  color: #cbd5e1;
  font-size: 0.95rem;
}
.guide-block-text h2, .guide-block-text h3 {
  color: #fff;
  font-weight: 800;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.guide-block-text h2 { font-size: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 0.5rem; }
.guide-block-text h3 { font-size: 1.2rem; }
.guide-block-text p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}
.guide-block-text ul, .guide-block-text ol {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.guide-block-text li {
  margin-bottom: 0.5rem;
}
.guide-block-text strong {
  color: #fff;
}

/* Highlight Note Box */
.guide-block-note {
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.05) 0%, rgba(0, 255, 136, 0.02) 100%);
  border: 1px dashed rgba(0, 242, 255, 0.25);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

/* Block 2: Live Slots Grid inside Article */
.guide-block-slots {
  margin: 2rem 0;
}
.guide-block-slots h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}
.guide-block-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.5rem;
}

/* Block 3: Mapped Disciplines/Clusters Grid inside Article */
.guide-block-cluster {
  margin: 2rem 0;
}
.guide-block-cluster h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}
.guide-block-cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Block 4: Side-by-side What to Know / What to Avoid */
.guide-block-what-know {
  margin: 2rem 0;
}
.guide-block-what-know h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.25rem;
}
.guide-block-what-know-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media(max-width: 768px) {
  .guide-block-what-know-grid { grid-template-columns: 1fr; }
}

.what-know-col {
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(15, 22, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.what-know-col.positive {
  border-left: 4px solid #00ff88;
}
.what-know-col.negative {
  border-left: 4px solid #ff3366;
}
.what-know-col h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.what-know-col.positive h4 { color: #00ff88; }
.what-know-col.negative h4 { color: #ff3366; }

.what-know-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.what-know-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #cbd5e1;
}
.what-know-item .bullet {
  font-size: 0.9rem;
  line-height: 1;
}
.what-know-col.positive .bullet { color: #00ff88; }
.what-know-col.negative .bullet { color: #ff3366; }

/* Block 5: Accordion FAQ */
.guide-block-faq {
  margin: 2rem 0;
}
.guide-block-faq h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.25rem;
}
.guide-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.guide-faq-item {
  background: rgba(15, 22, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}
.guide-faq-item.active {
  border-color: rgba(0, 242, 255, 0.25);
  background: rgba(15, 22, 42, 0.5);
}
.guide-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.guide-faq-question .arrow {
  font-size: 0.65rem;
  color: var(--muted);
  transition: transform 0.2s;
}
.guide-faq-item.active .guide-faq-question .arrow {
  transform: rotate(90deg);
  color: #00f2ff;
}
.guide-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: #cbd5e1;
  font-size: 0.86rem;
  line-height: 1.6;
}
.guide-faq-item.active .guide-faq-answer {
  max-height: 500px;
}
.guide-faq-answer-inner {
  padding: 0 1.25rem 1.25rem 1.25rem;
}

/* Related Intelligence Net Footer section */
.related-intelligence-net {
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.related-net-header {
  margin-bottom: 2rem;
}
.related-net-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem 0;
}
.related-net-header p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.related-net-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
@media(max-width: 900px) {
  .related-net-sections { grid-template-columns: 1fr; gap: 1.5rem; }
}

.related-net-col h4 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 1rem;
}
.related-topics-list, .related-mechanics-list, .related-providers-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.related-topics-list a, .mech-link, .prov-link {
  font-size: 0.84rem;
  font-weight: 600;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.18s;
  display: flex;
  align-items: center;
}
.related-topics-list a:hover, .mech-link:hover, .prov-link:hover {
  color: #00f2ff;
  transform: translateX(3px);
}

.related-slots-container h4 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 1.25rem;
}
.related-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.5rem;
}

.guide-footer-action {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}

.back-hub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.back-hub-btn:hover {
  background: rgba(0, 242, 255, 0.06);
  border-color: #00f2ff;
  color: #00f2ff;
}

/* ==========================================================================
   HUB SPECIFIC: HERO CARD, PATHS, CLUSTERS
   ========================================================================== */

.guide-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 23, 42, 0.8) 0%, rgba(10, 15, 30, 0.95) 100%);
  border: 1px solid rgba(0, 242, 255, 0.12);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  margin-bottom: 3.5rem;
  overflow: visible;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.guide-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f2ff, #00ff88, transparent);
}

.guide-hero-badge {
  display: inline-block;
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #00f2ff;
  background: rgba(0, 242, 255, 0.08);
  border: 1px solid rgba(0, 242, 255, 0.2);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 1.25rem;
}
.guide-hero-title {
  font-size: 2.75rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 1rem 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.guide-hero-subtitle {
  font-size: 1.1rem;
  color: #94a3b8;
  margin: 0 0 2.5rem 0;
  max-width: 800px;
  line-height: 1.6;
}

/* Hub search box */
.guide-search-wrapper {
  position: relative;
  max-width: 600px;
  margin-bottom: 2.5rem;
  z-index: 10;
}
.guide-search-box {
  display: flex;
  align-items: center;
  background: rgba(10, 15, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0 1.25rem;
  height: 52px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.guide-search-box:focus-within, .guide-search-box:hover {
  border-color: #00f2ff;
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.15);
  background: rgba(10, 15, 30, 0.85);
}
.guide-search-box .search-icon {
  font-size: 1.1rem;
  margin-right: 0.85rem;
  opacity: 0.6;
}
.guide-search-box input {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.guide-search-box input::placeholder {
  color: #475569;
}
.guide-search-clear {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: background 0.15s;
}
.guide-search-clear:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.guide-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(13, 18, 32, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 242, 255, 0.2);
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
.search-result-item {
  display: block;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background: rgba(0, 242, 255, 0.04);
}
.search-result-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #00f2ff;
  margin-bottom: 0.15rem;
}
.search-result-subtitle {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-featured-topics {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.featured-label {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.featured-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.featured-tag-badge {
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  text-decoration: none;
  transition: all 0.15s;
}
.featured-tag-badge:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

/* Sections headers */
.guide-section-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 1.25rem;
}
.guide-section-header .header-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 24px;
  background: linear-gradient(#00f2ff, #00ff88);
  border-radius: 2px;
}
.guide-section-header h2 {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 0.4rem 0;
  line-height: 1.2;
}
.guide-section-header p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
  max-width: 700px;
  line-height: 1.5;
}

/* Guided Roadmaps Paths */
.learning-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}
@media(max-width: 1050px) {
  .learning-paths-grid { grid-template-columns: 1fr; }
}

.learning-path-card {
  background: rgba(15, 22, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: all 0.22s ease;
  position: relative;
}
.learning-path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.learning-path-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 12px 12px 0 0;
}
.learning-path-card.beginner::before { background: #00f2ff; }
.learning-path-card.advanced::before { background: #00ff88; }
.learning-path-card.mechanics::before { background: #ffcc00; }

.path-icon-wrapper {
  font-size: 1.8rem;
  margin-bottom: 0.85rem;
}
.learning-path-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem 0;
}
.learning-path-card p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1.75rem 0;
  flex-grow: 1;
}

/* Roadmap steps timeline */
.roadmap-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.roadmap-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 12px;
  width: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.roadmap-step {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition: transform 0.15s;
}
.roadmap-step:hover {
  transform: translateX(4px);
}
.roadmap-node {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.roadmap-node-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  transition: color 0.15s;
}
.roadmap-step:hover .roadmap-node-label {
  color: #fff;
}

.beginner .roadmap-step:hover .roadmap-node { background: #00f2ff; border-color: #00f2ff; color: #000; box-shadow: 0 0 10px rgba(0, 242, 255, 0.4); }
.advanced .roadmap-step:hover .roadmap-node { background: #00ff88; border-color: #00ff88; color: #000; box-shadow: 0 0 10px rgba(0, 255, 136, 0.4); }
.mechanics .roadmap-step:hover .roadmap-node { background: #ffcc00; border-color: #ffcc00; color: #000; box-shadow: 0 0 10px rgba(255, 204, 0, 0.4); }

/* Knowledge Clusters Grid */
.clusters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media(max-width: 850px) {
  .clusters-grid { grid-template-columns: 1fr; }
}

.cluster-card {
  background: rgba(15, 22, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.75rem;
  text-decoration: none;
  display: block;
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
}
.cluster-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 255, 0.25);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  background: rgba(15, 22, 42, 0.5);
}
.cluster-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(0, 242, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cluster-prefix {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #00ff88;
  margin-bottom: 0.6rem;
}
.cluster-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cluster-card-icon {
  font-size: 1.25rem;
}
.cluster-title-wrap h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.cluster-card p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 1.5rem 0;
}

.cluster-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 1rem;
}
.cluster-sub-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.cluster-card:hover .cluster-sub-link {
  color: #cbd5e1;
}
.cluster-sub-link:hover {
  color: #00f2ff !important;
  transform: translateX(3px);
}
.cluster-sub-link .arrow-node {
  font-size: 0.65rem;
  color: var(--muted);
}
.cluster-sub-link:hover .arrow-node {
  color: #00f2ff;
}

/* ==========================================================================
   MOBILE DESIGN SYSTEM (DRAWER, MOBILE BAR)
   ========================================================================== */

/* Mobile Header navigation bar */
.mobile-guide-nav-bar {
  display: none;
  background: #0d1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  height: 50px;
  align-items: center;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.mobile-guide-nav-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.mobile-guide-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-guide-active-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #00f2ff;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile Sidebar drawer elements */
.mobile-guide-close-btn {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* 404 Guide Container */
.guide-404-container {
  text-align: center;
  padding: 5rem 2rem;
  background: rgba(15, 22, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  max-width: 500px;
  margin: 3rem auto;
}
.guide-404-container .icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}
.guide-404-container h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem 0;
}
.guide-404-container p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 2rem 0;
}

/* Media Query Adaptations */
@media (max-width: 950px) {
  .mobile-guide-nav-bar {
    display: flex;
  }
  .mobile-guide-close-btn {
    display: flex;
  }
  .guide-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    z-index: 10000;
    background: #080c16;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 40px rgba(0,0,0,0.6);
    padding: 3rem 1.5rem 2rem 1.5rem;
    max-height: 100vh;
  }
  .guide-sidebar.mobile-open {
    left: 0;
  }
  .guide-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
  }
  .guide-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
  .guide-hero-card {
    padding: 2.25rem 1.75rem;
  }
  .guide-hero-title {
    font-size: 2.2rem;
  }
  .guide-hero-subtitle {
    font-size: 0.95rem;
  }
}


/* Fact-Friction Comparison Grid */
.fact-friction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
  width: 100%;
}
@media (max-width: 768px) {
  .fact-friction-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.fact-col {
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(15, 22, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.fact-col:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.fact-col.verified {
  border-left: 4px solid #00ff88;
}
.fact-col.friction {
  border-left: 4px solid #ffcc00;
}

.col-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.col-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}
.verified .col-icon {
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.15);
}
.friction .col-icon {
  background: rgba(255, 204, 0, 0.08);
  color: #ffcc00;
  border: 1px solid rgba(255, 204, 0, 0.15);
}

.col-title h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.verified .col-title h4 {
  color: #00ff88;
}
.friction .col-title h4 {
  color: #ffcc00;
}

.col-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.col-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #cbd5e1;
}
.col-list .bullet {
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1.2;
}
.verified .col-list .bullet {
  color: #00ff88;
}
.friction .col-list .bullet {
  color: #ffcc00;
}
.col-list .txt {
  flex-grow: 1;
}


/* Custom FAQ Accordion Styles */
.faq-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.faq-accordion-container .faq-item {
  background: rgba(15, 22, 42, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.22s, background-color 0.22s, box-shadow 0.22s !important;
  padding: 0 !important; /* Overrides detail/summary padding conflict */
}
.faq-accordion-container .faq-item:hover {
  border-color: rgba(0, 242, 255, 0.25) !important;
  background: rgba(15, 22, 42, 0.45) !important;
}
.faq-accordion-container .faq-item.active {
  border-color: rgba(0, 242, 255, 0.4) !important;
  background: rgba(15, 22, 42, 0.55) !important;
  box-shadow: 0 10px 30px rgba(0, 242, 255, 0.05) !important;
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  user-select: none;
  gap: 1.5rem;
}
.faq-question {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  transition: color 0.18s;
}
.faq-accordion-container .faq-item:hover .faq-question {
  color: #00f2ff;
}
.faq-accordion-container .faq-item.active .faq-question {
  color: #fff;
}

.faq-chevron {
  font-size: 0.75rem;
  color: var(--muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
}
.faq-accordion-container .faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: #00f2ff;
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-accordion-container .faq-item.active .faq-body {
  max-height: 800px;
}

.faq-content {
  padding: 0 1.4rem 1.4rem 1.4rem;
  color: #cbd5e1;
  font-size: 0.86rem;
  line-height: 1.6;
}
.faq-content p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.faq-content p:last-child {
  margin-bottom: 0;
}

/* --- Knowledge Clusters Links Styling --- */
.cluster-card-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}

.cluster-link {
  font-size: 0.84rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

.cluster-link .chevron {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.2);
  transition: transform 0.2s, color 0.2s;
}

.cluster-link:hover {
  color: #00f2ff !important;
  transform: translateX(4px);
}

.cluster-link:hover .chevron {
  color: #00f2ff;
  transform: translateX(1px);
}

/* Expanded Links transition */
.expanded-links-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

/* Expand Button */
.cluster-expand-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.75rem;
  margin-top: 1rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.cluster-expand-btn:hover {
  background: rgba(0, 242, 255, 0.05);
  border-color: rgba(0, 242, 255, 0.2);
  color: #00f2ff;
}

.cluster-expand-btn:active {
  transform: scale(0.98);
}


/* BROWSE FILTER SELECTS */
.browse-top-select {
  width: 100%;
  padding: .7rem 2rem .7rem .8rem;
  background: #080b15 url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 0.5rem center;
  background-size: 1rem auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.browse-top-select:hover {
  border-color: rgba(0, 242, 255, 0.6);
  background-color: #03050a;
}
.browse-top-select:focus {
  border-color: #00f2ff;
  box-shadow: 0 0 0 2px rgba(0, 242, 255, 0.25);
  background-color: #03050a;
}
.browse-top-select option {
  background: #080b15;
  color: var(--text);
}
@media (max-width: 900px) { .mechanics-overview-panel { grid-template-columns: 1fr; } }

.header-tags-container::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1920px) and (max-height: 1080px) {
  .header-tags-container a {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.6rem !important;
  }
}

@media (max-height: 1080px) and (min-width: 901px) {
    .nav-item, .nav-category-title {
        padding: 0.5rem 0.5rem !important;
        gap: 0.5rem !important;
        font-size: 1rem;
    }
}

.content-main p {
    font-size: 1rem;
}


.browse-hero #seoHeroOverlay {
  background: transparent !important;
}


#providerName {
  font-size: 2rem !important;
  font-weight: 400 !important;
}

/* New Reviews Section */
.new-reviews-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  
  background: 
    linear-gradient(to top, rgba(13, 18, 32, 1) 0%, rgba(13, 18, 32, 0.4) 100%),
    linear-gradient(rgba(0, 242, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 242, 255, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  background-position: center bottom, top left, top left;
  
  border-top: 1px solid rgba(0, 242, 255, 0.15);
  border-left: 1px solid rgba(0, 242, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
}
.new-review-card {
  display: flex;
  gap: 1.25rem;
  background: transparent;
  border-right: 1px solid rgba(0, 242, 255, 0.15);
  border-bottom: 1px solid rgba(0, 242, 255, 0.15);
  border-top: none;
  border-left: none;
  border-radius: 0;
  padding: 1.5rem;
  text-decoration: none;
  align-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.new-review-card:hover {
  background: rgba(0, 242, 255, 0.08);
  box-shadow: inset 0 0 30px rgba(0, 242, 255, 0.15);
  transform: none;
  z-index: 2;
}
.new-review-img-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.new-review-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.new-review-card:hover .new-review-img-wrap img {
  transform: scale(1.12);
}
.new-review-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.new-review-content h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1.15rem;
  color: #fff;
  font-weight: 800;
}
.new-review-content p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


@media(max-width: 1100px) {
  .new-reviews-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 600px) {
  .new-reviews-container {
    grid-template-columns: 1fr;
  }
  .new-review-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .new-review-img-wrap {
    width: 100%;
    height: 180px;
  }
}
/* Warp Canvas replaces CSS pseudo-element starfields */
.slot-hero::before, .slot-hero::after,
.browse-hero::before, .browse-hero::after,
body.index-page::before, body.index-page::after,
.content-main::before, .content-main::after,
.browse-main::before, .browse-main::after {
  display: none !important;
}