* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body { 
      background: #080a0e;
      color: #e8eaf0;
      font-family: 'Exo 2', sans-serif;
      scroll-behavior: smooth;
      overflow-x: hidden;
    }
    h1, h2, h3, .orbitron { font-family: 'Orbitron', monospace; }
    .rajdhani { font-family: 'Rajdhani', sans-serif; }

    /* --- Geometric background --- */
    .geo-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
    }
    .geo-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 15% 20%, rgba(139,0,0,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 75%, rgba(139,0,0,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(212,160,23,0.04) 0%, transparent 60%);
    }
    
    /* --- FLOATING EMBERS --- */
    .ember {
      position: absolute;
      bottom: -20px;
      background: radial-gradient(circle, #ffd700 0%, #ff4500 60%, transparent 100%);
     border-radius: 50%;
      filter: blur(1px) drop-shadow(0 0 4px #ff4500);
      opacity: 0;
      pointer-events: none; /* Ensures they don't block clicks */
      animation: floatUp linear infinite;
      z-index: 0;
    }

      @keyframes floatUp {
        0% { transform: translateY(0) scale(1) translateX(0); opacity: 0; }
        10% { opacity: 0.8; }
        50% { transform: translateY(-50vh) scale(0.8) translateX(20px); opacity: 0.6; }
        90% { opacity: 0.8; }
        100% { transform: translateY(-120vh) scale(0.4) translateX(-20px); opacity: 0; }
      }
    .geo-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(135deg, transparent 40%, rgba(139,0,0,0.04) 50%, transparent 60%),
        repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 60px,
          rgba(255,255,255,0.012) 60px,
          rgba(255,255,255,0.012) 61px
        );
    }

    .hex-shape { position: absolute; opacity: 0.07; }

    /* --- Glow effects --- */
    .glow-red { box-shadow: 0 0 24px rgba(139,0,0,0.6), 0 0 48px rgba(139,0,0,0.3); }
    .text-glow-gold { text-shadow: 0 0 20px rgba(212,160,23,0.7), 0 0 40px rgba(212,160,23,0.4); }

    /* --- Clip paths --- */
    .clip-hero { clip-path: polygon(0 0, 100% 0, 100% 88%, 94% 100%, 0 100%); }
    .clip-card { clip-path: polygon(0 0, 95% 0, 100% 8%, 100% 100%, 0 100%); }
    .clip-btn { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

    /* --- Buttons --- */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      background: linear-gradient(135deg, #8b0000 0%, #c0392b 100%);
      color: #fff;
      font-family: 'Rajdhani', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      transition: all 0.25s ease;
      border: none;
      cursor: pointer;
      text-decoration: none;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(192,57,43,0.5); }

    .btn-gold {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      background: linear-gradient(135deg, #d4a017 0%, #f0b429 100%);
      color: #0a0a0a;
      font-family: 'Rajdhani', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      transition: all 0.25s ease;
      border: none;
      cursor: pointer;
      text-decoration: none;
    }
    .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,0.5); }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 26px;
      background: transparent;
      color: #e8eaf0;
      font-family: 'Rajdhani', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      border: 1px solid rgba(212,160,23,0.4);
      transition: all 0.25s ease;
      cursor: pointer;
      text-decoration: none;
    }
    .btn-outline:hover { background: rgba(212,160,23,0.08); border-color: #d4a017; color: #d4a017; transform: translateY(-2px); }

    /* --- Live Status Banner --- */
    .live-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 101;
      background: linear-gradient(90deg, rgba(139,0,0,0.95), rgba(192,57,43,0.95));
      border-bottom: 2px solid #d4a017;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #fff;
      animation: livePulse 2s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .live-banner:hover {
      background: linear-gradient(90deg, rgba(192,57,43,1), rgba(220,38,38,1));
      box-shadow: 0 8px 24px rgba(192,57,43,0.6);
    }

    .live-banner.hidden {
      display: none;
    }

    .live-dot {
      width: 12px;
      height: 12px;
      background: #ff0000;
      border-radius: 50%;
      animation: liveDot 1.5s ease-in-out infinite;
      box-shadow: 0 0 12px rgba(255,0,0,0.8), inset 0 0 4px rgba(255,255,255,0.3);
    }

    @keyframes livePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.85; }
    }

    @keyframes liveDot {
      0%, 100% { box-shadow: 0 0 12px rgba(255,0,0,0.8), inset 0 0 4px rgba(255,255,255,0.3); }
      50% { box-shadow: 0 0 20px rgba(255,0,0,1), inset 0 0 6px rgba(255,255,255,0.5); }
    }

    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(8,10,14,0.85);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(139,0,0,0.2);
      margin-top: 0;
    }

    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, #8b0000, #d4a017, transparent);
      opacity: 0.4;
    }

    .section-label {
      font-family: 'Rajdhani', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: #d4a017;
    }

    .avatar-ring::before, .avatar-ring::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      animation: pulse-ring 3s ease-in-out infinite;
    }
    .avatar-ring::before {
      inset: -8px;
      border: 2px solid rgba(139,0,0,0.5);
    }
    .avatar-ring::after {
      inset: -16px;
      border: 1px solid rgba(212,160,23,0.25);
      animation-delay: 1s;
    }
    @keyframes pulse-ring {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.03); }
    }

    .avatar-inner {
      width: 200px; height: 200px;
      border-radius: 50%;
      background: linear-gradient(135deg, #111318 0%, #1a1e26 100%);
      border: 3px solid #8b0000;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      box-shadow: 0 0 40px rgba(139,0,0,0.4);
    }

    .scan-line {
      position: absolute;
      left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, #d4a017, transparent);
      opacity: 0;
      animation: scan 8s linear infinite;
    }
    @keyframes scan {
      0% { top: 0; opacity: 0; }
      5% { opacity: 0.5; }
      95% { opacity: 0.5; }
      100% { top: 100%; opacity: 0; }
    }

    .stat-box {
      background: rgba(139,0,0,0.08);
      border: 1px solid rgba(139,0,0,0.2);
      clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
      transition: all 0.25s;
    }
    .stat-box:hover { background: rgba(139,0,0,0.15); border-color: rgba(212,160,23,0.3); }

    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(6px); }
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.2); }
    }

    .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.7s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    .about-line {
      width: 3px;
      background: linear-gradient(180deg, #8b0000 0%, #d4a017 100%);
      border-radius: 2px;
      flex-shrink: 0;
    }

    .cta-bg {
      background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(139,0,0,0.2) 0%, transparent 70%),
        linear-gradient(180deg, #111318 0%, #0d0f13 100%);
    }

    .footer-icon {
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: #7a7f8e;
      text-decoration: none;
      transition: all 0.25s;
    }
    .footer-icon:hover { background: rgba(139,0,0,0.2); border-color: #8b0000; color: #fff; }

/* --- CUSTOM CYBERPUNK SCROLLBAR --- */

@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #d4a017 #080a0e; 
  }
}

::-webkit-scrollbar {
  width: 14px; 
}

::-webkit-scrollbar-track {
  background: #080a0e;
  border-left: 1px solid rgba(139,0,0,0.3); 
}

/* The Textured Mechanical Thumb */
::-webkit-scrollbar-thumb {
  /* Creates a high-tech diagonal hazard stripe pattern */
  background: repeating-linear-gradient(
    -45deg,
    #8b0000,
    #8b0000 6px,
    #5c0000 6px,
    #5c0000 12px
  );
  border-radius: 8px;
  border: 3px solid #080a0e; 
  background-clip: padding-box; 
}

/* Ignites into Gold Stripes when hovered */
::-webkit-scrollbar-thumb:hover {
  background: repeating-linear-gradient(
    -45deg,
    #d4a017,
    #d4a017 6px,
    #b3850b 6px,
    #b3850b 12px
  );
}

/* --- LASER SCROLL PROGRESS --- */
.scroll-progress-container {
    position: absolute;
    bottom: -1px; /* Overlays perfectly on the nav's bottom border */
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    z-index: 101;
}

#scroll-laser {
    height: 100%;
    width: 0%; /* Starts at 0, JS powers the animation */
    background: linear-gradient(90deg, #8b0000, #ff3333, #d4a017, #fff);
    box-shadow: 0 0 10px #ff3333, 0 0 20px #d4a017;
    border-radius: 0 2px 2px 0;
    /* Smooth, responsive digital tracking physics */
    transition: width 0.1s ease-out; 
}
  /* --- Page transition animations --- */
    .page-section {
      display: none;
      opacity: 0;
      animation: pageTransitionIn 0.5s ease-out forwards;
    }
    .page-section.active {
      display: block;
    }
    @keyframes pageTransitionIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pageTransitionOut {
      from {
        opacity: 1;
        transform: translateY(0);
      }
      to {
        opacity: 0;
        transform: translateY(20px);
      }
    }

  /* --- Sort buttons --- */
    .sort-btn {
      padding: 10px 20px;
      background: rgba(139,0,0,0.08);
      border: 1px solid rgba(139,0,0,0.2);
      color: #7a7f8e;
      font-family: 'Rajdhani', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.25s ease;
      clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    }
    .sort-btn:hover { background: rgba(139,0,0,0.15); border-color: #d4a017; color: #d4a017; }
    .sort-btn.active {
      background: linear-gradient(135deg, #8b0000 0%, #c0392b 100%);
      border-color: #d4a017;
      color: #fff;
    }

  /* Game cards */
  /* --- GAME CARD LOAD-IN WRAPPER --- */
    .game-card-wrapper {
     position: relative;
     width: 100%;
     min-height: 420px;
     opacity: 1;
     animation: gameCardFadeIn 0.5s ease-out forwards;
     transform: translateZ(0); /* Hardware acceleration */
     transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .game-card-wrapper:hover {
      z-index: 10;
    }

    .game-card-wrapper:nth-child(1) { animation-delay: 0.1s; }
    .game-card-wrapper:nth-child(2) { animation-delay: 0.15s; }
    .game-card-wrapper:nth-child(3) { animation-delay: 0.2s; }
    .game-card-wrapper:nth-child(4) { animation-delay: 0.25s; }
    .game-card-wrapper:nth-child(n+5) { animation-delay: calc((var(--index, 5) - 4) * 0.05s); }

    @keyframes gameCardFadeIn {
      0% { opacity: 0; transform: translateY(20px) translateZ(0); }
      100% { opacity: 1; transform: translateY(0) translateZ(0); }
    }

  /* --- GAME CARD BASE STYLES --- */
    .game-card {
      background: rgba(139,0,0,0.06);
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
      border: none !important; 
      transition: background 0.5s ease;
    }
    .game-card-wrapper:hover .game-card {
      background: rgba(139,0,0,0.12);
    }
    .game-card img {
      /* Added filter to the smooth transition */
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease;
      /* Idle State: Slightly dimmed and desaturated like a dormant screen */
      filter: brightness(0.75) saturate(0.6); 
    }
  /* --- Creates the invisible angled light beam --- */
    .game-card::after {
      content: '';
      position: absolute;
      top: 0; 
      left: -150%;
      width: 50%; 
      height: 100%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-25deg);
      z-index: 5;
      pointer-events: none; /* Ensures the light doesn't block your mouse clicks */
    }

  /* --- Triggers the sweep animation on hover --- */
    .game-card-wrapper:hover .game-card::after {
      animation: glassSweep 0.65s ease-out forwards;
    }

      @keyframes glassSweep {
        0% { left: -150%; }
        100% { left: 200%; }
      }
    .game-card-wrapper:hover .game-card img {
    transform: scale(1.08) rotate(0.5deg);
    
  /* Hover State: Powers on to full brightness and vibrant color! */
    filter: brightness(1.05) saturate(1.1); 
    }
    .game-card-wrapper.card-standard {
      filter: drop-shadow(0 0 1px rgba(139,0,0,0.6)) drop-shadow(0 12px 0px rgba(139,0,0,0));
    }

    .game-title { font-family: 'Orbitron', monospace; font-size: 1.15rem; font-weight: 900; margin-bottom: 16px; line-height: 1.3; margin-top: 32px; }
    .game-status {
      position: absolute;
      top: 24px;
      right: 24px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 6px 12px;
      background: rgba(0,0,0,0.5);
      border: 1px solid currentColor;
      clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
      white-space: nowrap;
    }


    .game-label {
      display: inline-block;
      font-family: 'Rajdhani', sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 5px 11px;
      margin-right: 8px;
      margin-bottom: 16px;
      clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
      border: 1px solid;
      white-space: nowrap;
    }

    .label-horror {
      background: rgba(139,0,0,0.4);
      color: #ff6b6b;
      border-color: #ff6b6b;
      box-shadow: 0 0 12px rgba(255,107,107,0.4), inset 0 0 8px rgba(255,107,107,0.15);
      position: relative;
    }

    .game-card-wrapper.card-horror {
      filter: drop-shadow(0 0 1px rgba(139,0,0,0.6)) drop-shadow(0 0 0px rgba(255,107,107,0));
    }
    .game-card-wrapper.card-horror:hover {
      filter: drop-shadow(0 0 1px #ff6b6b) drop-shadow(0 0 35px rgba(255,107,107,0.85));
    }

    .label-maxedout {
      background: rgba(212,160,23,0.4);
      color: #ffd700;
      border-color: #ffd700;
      box-shadow: 0 0 18px rgba(212,160,23,0.7), 0 0 36px rgba(212,160,23,0.3);
      position: relative;
    }

    .game-card-wrapper.card-maxedout {
      filter: drop-shadow(0 0 1px rgba(139,0,0,0.6)) drop-shadow(0 0 0px rgba(212,160,23,0));
    }
    .game-card-wrapper.card-maxedout:hover {
      filter: drop-shadow(0 0 1px #ffd700) drop-shadow(0 0 45px rgba(212,160,23,0.95));
    }

    .label-kompetitiv {
      background: rgba(0,255,255,0.3);
      color: #00ffff;
      border-color: #00ffff;
      box-shadow: 0 0 14px rgba(0,255,255,0.6), inset 0 0 8px rgba(0,255,255,0.25);
      position: relative;
    }

    .game-card-wrapper.card-kompetitiv {
      filter: drop-shadow(0 0 1px rgba(139,0,0,0.6)) drop-shadow(0 0 0px rgba(0,255,255,0));
    }
    .game-card-wrapper.card-kompetitiv:hover {
      filter: drop-shadow(0 0 1px #00ffff) drop-shadow(0 0 45px rgba(0,255,255,0.95));
    }
      
    .game-watch-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: auto;
      padding: 10px 18px;
      background: linear-gradient(135deg, #8b0000 0%, #c0392b 100%);
      color: #fff;
      font-family: 'Rajdhani', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      text-decoration: none;
      clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
      transition: all 0.25s ease;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }
    .game-watch-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(192,57,43,0.4);
    }

  /* --- Scroll reveal animations --- */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    .scroll-reveal.stagger-1 { transition-delay: 0.1s; }
    .scroll-reveal.stagger-2 { transition-delay: 0.2s; }
    .scroll-reveal.stagger-3 { transition-delay: 0.3s; }
    .scroll-reveal.stagger-4 { transition-delay: 0.4s; }
    .scroll-reveal.stagger-5 { transition-delay: 0.5s; }
 
        body { box-sizing: border-box; }

        .pc-part-item {
          background: rgba(139, 0, 0, 0.04);
          animation: partSlideIn 0.6s ease-out forwards;
          opacity: 0;
          border-left: 3px solid transparent;
        }
        .pc-part-item:nth-child(1) { animation-delay: 0.05s; }
        .pc-part-item:nth-child(2) { animation-delay: 0.1s; }
        .pc-part-item:nth-child(3) { animation-delay: 0.15s; }
        .pc-part-item:nth-child(4) { animation-delay: 0.2s; }
        .pc-part-item:nth-child(5) { animation-delay: 0.25s; }
        .pc-part-item:nth-child(6) { animation-delay: 0.3s; }
        .pc-part-item:nth-child(7) { animation-delay: 0.35s; }
        .pc-part-item:nth-child(8) { animation-delay: 0.4s; }
        .pc-part-item:nth-child(9) { animation-delay: 0.45s; }
        .pc-part-item:nth-child(10) { animation-delay: 0.5s; }
        .pc-part-item:nth-child(n+11) { animation-delay: calc(0.55s + (var(--index, 11) - 11) * 0.05s); }
        
        @keyframes partSlideIn {
          from {
            opacity: 0;
            transform: translateX(-12px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        .pc-part-item:hover {
          background: rgba(139, 0, 0, 0.12);
          border-left-color: #d4a017;
          transform: translateX(8px);
          box-shadow: -4px 0 12px rgba(212, 160, 23, 0.15);
        }

      @keyframes modalSlideIn {
        from {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.9);
        }
        to {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
      }

      #sublabel-modal {
        opacity: 1 !important;
      }

      #sublabel-filter-btn:hover {
        background: rgba(212,160,23,0.2);
        border-color: #d4a017;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(212,160,23,0.2);
      }

      .sublabel-btn.selected {
        background: linear-gradient(135deg, #f0b429 0%, #ffd700 100%);
        border-color: #ffd700;
        color: #0a0a0a;
        box-shadow: 0 0 32px rgba(212,160,23,0.9), 0 0 64px rgba(212,160,23,0.5), inset 0 0 16px rgba(255,255,255,0.3);
        font-weight: 700;
        transform: translateY(-6px);
        animation: selectedGlow 2s ease-in-out infinite;
      }

      .sublabel-btn.selected:hover {
        background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
        box-shadow: 0 0 48px rgba(212,160,23,1), 0 0 96px rgba(212,160,23,0.6), inset 0 0 20px rgba(255,255,255,0.4);
        transform: translateY(-8px);
      }

      @keyframes selectedGlow {
        0%, 100% { 
          box-shadow: 0 0 32px rgba(212,160,23,0.9), 0 0 64px rgba(212,160,23,0.5), inset 0 0 16px rgba(255,255,255,0.3);
        }
        50% { 
          box-shadow: 0 0 48px rgba(212,160,23,1), 0 0 80px rgba(212,160,23,0.7), inset 0 0 20px rgba(255,255,255,0.4);
        }
      }
      /* Platforms Section Flexbox Layout */
        .platforms-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 28px;
        }

        .platform-card {
         flex: 1 1 280px;
         max-width: 360px; /* Keeps the cards from stretching too wide on big screens */
        }
  /* --- TWITCH LIVE ALERT BANNER --- */
  .live-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  /* Twitch purple gradient that seamlessly loops */
    background: linear-gradient(90deg, rgba(100,65,165,0.95) 0%, rgba(49,27,88,0.95) 50%, rgba(100,65,165,0.95) 100%);
    background-size: 200% auto;
    color: #ffffff;
    text-align: center;
    padding: 14px 20px;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 9999;
    cursor: pointer;
    border-bottom: 2px solid #9146ff;
  
  /* Hidden state mechanics */
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
  
  /* Flexbox to align the red dot and text */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  /* When the JavaScript activates the banner */
  .live-banner.active {
    transform: translateY(0);
    opacity: 1;
    animation: twitchPulseBg 3s infinite linear;
  }

    @keyframes twitchPulseBg {
      0% { background-position: 0% center; box-shadow: 0 4px 15px rgba(145,70,255,0.3); }
      50% { box-shadow: 0 4px 35px rgba(145,70,255,0.7); }
      100% { background-position: 200% center; box-shadow: 0 4px 15px rgba(145,70,255,0.3); }
    }

  /* The pulsing red "On Air" dot */
  .live-dot {
    width: 12px;
    height: 12px;
    background-color: #ff3333;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff3333;
    animation: blinkDot 1s infinite alternate;
  }

    @keyframes blinkDot {
      from { opacity: 0.4; transform: scale(0.85); }
      to { opacity: 1; transform: scale(1.15); box-shadow: 0 0 15px #ff3333, 0 0 30px #ff3333; }
    }
  /* --- PROGRESS PERCENTAGE SLIDE ANIMATION --- */
  .progress-badge {
    position: relative;
    z-index: 1; /* Forces it to stay underneath the status label */
    margin-right: -45px; /* Deeply tucks the badge behind the status label */
    opacity: 0; /* Makes it completely invisible while resting */
    transform: translateX(15px) scale(0.9); /* Pushes it further right and shrinks it slightly */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }

  .game-card-wrapper:hover .progress-badge {
    margin-right: 8px; /* Pushes out to create the standard 8px gap */
    opacity: 1; /* Fades in smoothly */
    transform: translateX(0) scale(1); /* Snaps to full size and correct position */
  }
  
  /* --- ANIMATED LASER BORDERS FOR STAT CARDS --- */
  /* The outer wrapper that holds the laser */
  .laser-stat-card {
    position: relative;
    background: #080a0e; /* Base dark color */
    overflow: hidden;
    padding: 2px; /* This 2px padding BECOMES the thickness of your laser border! */
    border-radius: 4px; /* Slight rounding looks best with the laser */
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .laser-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(212,160,23,0.15);
  }

  /* The actual rotating laser beam (a massive spinning background) */
  .laser-stat-card::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
  /* The gradient creates the "tail" and "head" of the laser */
    background: conic-gradient(from 0deg, transparent 75%, #8b0000 85%, #d4a017 100%);
    animation: rotateLaser 3.5s linear infinite;
    z-index: 0;
  }

  /* The dark inner plate that hides the middle of the beam */
  .laser-stat-content {
    position: relative;
    background: #080a0e; /* Matches your site's dark background exactly */
    /* Adds a very subtle gradient over the dark background to make it look like glass */
    background-image: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 32px 24px; /* Gives the stats plenty of breathing room */
    border-radius: 2px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

    @keyframes rotateLaser {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    /* --- SZÖVETSÉGESEK / COLLAB SECTION --- */

.friend-card {
    background: rgba(8, 10, 14, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* The animated glowing top border */
.friend-card::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4a017, transparent);
    opacity: 0;
    transition: 0.4s ease;
}

.friend-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 160, 23, 0.3);
    background: rgba(8, 10, 14, 0.9);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 160, 23, 0.1);
}

.friend-card:hover::before {
    opacity: 1;
}

/* Avatar styling with a custom gradient ring */
.friend-avatar-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, #8b0000, #d4a017);
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

.friend-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #080a0e;
}

.friend-name {
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.friend-role {
    font-family: 'Rajdhani', sans-serif;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.friend-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.friend-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Makes the social icons glow Gold when hovered */
.friend-social-link:hover {
    background: rgba(212, 160, 23, 0.15);
    color: #d4a017;
    border: 1px solid rgba(212, 160, 23, 0.4);
    transform: scale(1.1);
}
/* --- ULTIMATE CYBERPUNK GLITCH EFFECT --- */

/* 1. The Holographic Screen Tear Overlay */
.friend-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: hard-light; /* Makes the glitch interact with the colors underneath */
}

.friend-card:hover::after {
    animation: master-glitch-tear 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 2. The RGB Text Split (Chromatic Aberration) */
.friend-card:hover .friend-name {
    animation: text-rgb-split 0.3s linear forwards;
}

/* 3. The Avatar System Jitter */
.friend-card:hover .friend-avatar-wrapper {
    animation: avatar-jitter 0.3s linear forwards;
}

/* --- THE KEYFRAMES (The Physics of the Glitch) --- */

@keyframes master-glitch-tear {
    0% { background: rgba(212, 160, 23, 0.2); clip-path: polygon(0 15%, 100% 15%, 100% 25%, 0 25%); transform: translateX(-10px); }
    20% { background: rgba(255, 0, 60, 0.3); clip-path: polygon(0 65%, 100% 65%, 100% 75%, 0 75%); transform: translateX(10px); }
    40% { background: rgba(0, 255, 255, 0.3); clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); transform: translateX(-5px); }
    60% { background: rgba(212, 160, 23, 0.2); clip-path: polygon(0 85%, 100% 85%, 100% 95%, 0 95%); transform: translateX(5px); }
    80% { background: rgba(255, 255, 255, 0.1); clip-path: polygon(0 35%, 100% 35%, 100% 40%, 0 40%); transform: translateX(-2px); }
    100% { background: transparent; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateX(0); }
}

@keyframes text-rgb-split {
    0% { text-shadow: 3px 0 #ff003c, -3px 0 #00f0ff; transform: translateX(-2px); }
    25% { text-shadow: -3px 0 #ff003c, 3px 0 #00f0ff; transform: translateX(2px); }
    50% { text-shadow: 2px 0 #ff003c, -2px 0 #00f0ff; transform: translateX(-1px); }
    75% { text-shadow: -1px 0 #ff003c, 1px 0 #00f0ff; transform: translateX(1px); }
    100% { text-shadow: 0 0 transparent; transform: translateX(0); }
}

@keyframes avatar-jitter {
    0% { transform: translateX(-4px) skewX(8deg); filter: hue-rotate(90deg); }
    25% { transform: translateX(4px) skewX(-8deg); filter: hue-rotate(-90deg); }
    50% { transform: translateX(-2px) skewX(4deg); filter: contrast(150%); }
    75% { transform: translateX(2px) skewX(-4deg); filter: invert(20%); }
    100% { transform: translateX(0) skewX(0); filter: none; }
}
/* --- DOSSIER TECH DECALS & BRACKETS --- */

.tech-decal {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    pointer-events: none;
    z-index: 5;
    transition: color 0.3s ease;
}

.decal-top-left { top: 12px; left: 12px; }
.decal-top-right { top: 12px; right: 12px; }
.decal-bottom-left { 
    bottom: 12px; 
    left: 12px; 
    color: rgba(212, 160, 23, 0.4); /* Faded gold */
    font-size: 8px;
    letter-spacing: 2px;
}

/* Make decals light up when the card is hovered */
.friend-card:hover .tech-decal {
    color: rgba(255, 255, 255, 0.7);
}
.friend-card:hover .decal-bottom-left {
    color: #d4a017;
}

/* Tactical Targeting Brackets */
.tech-bracket {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(212, 160, 23, 0.2);
    pointer-events: none;
    z-index: 5;
    transition: all 0.3s ease;
}

.friend-card:hover .tech-bracket {
    border-color: #d4a017;
    width: 16px;
    height: 16px;
}

.bracket-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket-br { bottom: 0; right: 0; border-left: none; border-top: none; }
/* --- DOSSIER GAME BANNERS --- */

.card-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px; /* Covers just the top half behind the avatar */
    background-size: cover;
    background-position: center 20%;
    z-index: 0; 
    opacity: 0.4; /* Keeps it dim so it doesn't distract from the data */
    
    /* The magic trick: Fades the bottom of the image into nothing! */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    transition: opacity 0.4s ease, filter 0.4s ease;
    filter: grayscale(50%); /* Dulls the colors slightly for a tactical look */
}

/* When the card is hovered, the banner brightens and regains its full color */
.friend-card:hover .card-banner {
    opacity: 0.8;
    filter: grayscale(0%);
}

/* Ensure all the text and avatars stay ON TOP of the new banner */
.friend-avatar-wrapper, .friend-name, .friend-role, .friend-socials {
    position: relative;
    z-index: 1; 
}
/* --- TÁMOGATÓI ADATBÁZIS (SUPPORTERS WALL) --- */

.marquee-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 0;
    /* Fades the left and right edges so names emerge and disappear smoothly */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 24px;
    /* The 30s controls the speed. Lower = faster, Higher = slower */
    animation: scroll-marquee 30s linear infinite; 
}

/* Pauses the scrolling stream when you hover over it so you can read a name! */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused; 
}

@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12px)); } /* Scrolls exactly half the track to create a perfect infinite loop */
}

/* The standard supporter name tag */
.supporter-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(139, 0, 0, 0.1);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 4px;
    color: #e8eaf0;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s ease;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    cursor: default;
}

.supporter-tag:hover {
    background: rgba(139, 0, 0, 0.25);
    border-color: #ff3333;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(139, 0, 0, 0.4);
    color: #fff;
}

/* The VIP / Top Tier Supporter styling */
.supporter-tag.top-tier {
    background: rgba(212, 160, 23, 0.1);
    border-color: rgba(212, 160, 23, 0.4);
    color: #d4a017;
}

.supporter-tag.top-tier:hover {
    background: rgba(212, 160, 23, 0.2);
    border-color: #ffd700;
    color: #fff;
    box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3), 0 0 15px rgba(212, 160, 23, 0.4);
}
/* --- HIGH-TECH NAVIGATION DROPDOWN --- */

/* 1. The Main Dropdown Panel */
.nav-dropdown {
    position: absolute;
    top: 56px;
    right: 0;
    width: 240px;
    background: rgba(8, 10, 14, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 0, 0, 0.4);
    border-top: 2px solid #d4a017;
    border-radius: 4px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 0, 0, 0.2);
    z-index: 200;
    
    /* Closing Physics: Waits 0.2s for the links to slide out before shrinking */
    opacity: 0;
    transform: translateY(-15px) scale(0.98);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
    transition-delay: 0.2s; 
}

/* Opening Physics: Appears instantly */
.nav-dropdown.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s; 
}

/* 2. The Laser Scanline Border */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -2px; 
    left: 0; 
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff3333, #d4a017, transparent);
    transform: scaleX(0);
    transform-origin: left; /* Scans from left to right */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-dropdown.active::before {
    transform: scaleX(1);
}

/* 3. The Links Base State (Hidden) */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #7a7f8e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    border-radius: 2px;
    
    /* Closing Physics: Fast slide out */
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.2s ease;
}

/* 4. The Links Active State (Visible) */
.nav-dropdown.active .nav-dropdown-item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), padding-left 0.2s ease, color 0.2s ease, background 0.2s ease;
}

/* --- THE TIMING MATRIX --- */

/* OPENING: Staggered Cascade (Top to Bottom) */
.nav-dropdown.active .nav-dropdown-item:nth-child(1) { transition-delay: 0.05s; }
.nav-dropdown.active .nav-dropdown-item:nth-child(2) { transition-delay: 0.10s; }
.nav-dropdown.active .nav-dropdown-item:nth-child(3) { transition-delay: 0.15s; }
.nav-dropdown.active .nav-dropdown-item:nth-child(4) { transition-delay: 0.20s; }
.nav-dropdown.active .nav-dropdown-item:nth-child(5) { transition-delay: 0.25s; }
.nav-dropdown.active .nav-dropdown-item:nth-child(6) { transition-delay: 0.30s; }

/* CLOSING: Reverse Stagger (Bottom to Top) */
.nav-dropdown .nav-dropdown-item:nth-child(1) { transition-delay: 0.15s; }
.nav-dropdown .nav-dropdown-item:nth-child(2) { transition-delay: 0.12s; }
.nav-dropdown .nav-dropdown-item:nth-child(3) { transition-delay: 0.09s; }
.nav-dropdown .nav-dropdown-item:nth-child(4) { transition-delay: 0.06s; }
.nav-dropdown .nav-dropdown-item:nth-child(5) { transition-delay: 0.03s; }
.nav-dropdown .nav-dropdown-item:nth-child(6) { transition-delay: 0.00s; }

/* --- HOVER STYLING --- */
.nav-dropdown-item i {
    width: 16px;
    height: 16px;
    color: #d4a017;
    transition: all 0.25s ease;
}

.nav-dropdown-item:hover {
    background: rgba(139, 0, 0, 0.15);
    color: #fff;
    padding-left: 24px;
}

.nav-dropdown-item:hover i {
    color: #ff3333;
}

#nav-menu-btn:hover {
    background: rgba(139,0,0,0.25) !important;
    border-color: #d4a017 !important;
    box-shadow: 0 0 16px rgba(212,160,23,0.2);
}
/* --- HIGH-TECH NAV LOGO --- */
.nav-logo-group:hover .emblem-outer {
    border-color: #d4a017;
    transform: rotate(135deg) scale(1.1);
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.3);
}

.nav-logo-group:hover .emblem-inner {
    background: linear-gradient(135deg, #c0392b, #ff3333);
    box-shadow: 0 0 24px rgba(255, 51, 51, 0.6);
}

.nav-logo-group:hover .logo-text-main {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.nav-logo-group:hover .logo-text-sub {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.5);
}
/* --- TRANSLATION ANIMATION PHYSICS --- */

/* --- TRANSLATION ANIMATION PHYSICS --- */

/* --- TRANSLATION ANIMATION PHYSICS (CYBER-WIPE) --- */

/* --- TRANSLATION ANIMATION PHYSICS (HARDCORE GLITCH) --- */

[data-tr] {
    display: inline-block; 
    /* The aggressive "snap back" physics when the new language loads */
    transition: clip-path 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.2s ease, 
                text-shadow 0.2s ease,
                filter 0.2s ease !important;
}

/* Triggers a 300ms system meltdown before the JS swaps the text */
.lang-transitioning {
    animation: text-meltdown 0.3s linear forwards !important;
}

/* The Physics of the Broken Monitor */
@keyframes text-meltdown {
    0% { 
        clip-path: inset(0 0 0 0); 
        transform: skewX(0deg); 
        text-shadow: none; 
        opacity: 1; 
    }
    20% { 
        /* Tears out the middle of the text */
        clip-path: inset(20% 0 60% 0); 
        transform: skewX(-40deg) translate(-10px, 4px) scaleY(1.2); 
        text-shadow: 8px 0 #ff3333, -8px 0 #00ffff; 
        filter: contrast(200%);
    }
    40% { 
        /* Violent snap to the opposite direction */
        clip-path: inset(60% 0 10% 0); 
        transform: skewX(50deg) translate(15px, -4px) scaleY(0.8); 
        text-shadow: -10px 0 #ff3333, 10px 0 #00ffff; 
        filter: contrast(250%) hue-rotate(45deg);
    }
    60% { 
        /* Tiny sliver remaining, extreme RGB split */
        clip-path: inset(10% 0 80% 0); 
        transform: skewX(-30deg) translate(-5px, 2px); 
        text-shadow: 12px 0 #ff3333, -12px 0 #00ffff; 
        opacity: 0.6;
    }
    80% { 
        /* Bottom tear */
        clip-path: inset(80% 0 5% 0); 
        transform: skewX(70deg) translate(25px, 0); 
        text-shadow: none; 
        opacity: 0.2;
    }
    100% { 
        /* Complete deletion exactly at the 300ms mark */
        clip-path: inset(0 100% 0 0); 
        transform: translateX(40px); 
        opacity: 0; 
    }
}
/* --- MOBILE OPTIMIZATION ENGINE (PHONES & TABLETS) --- */

@media (max-width: 768px) {
    /* 1. Global Spacing Override */
    /* Shrinks the massive 100px gaps between sections to fit mobile scrolling */
    section:not(#hero) {
        padding: 60px 16px !important;
    }
    
    /* 2. Top Navigation Compactor */
    /* Hides the "Liga Központ" subtext and shrinks buttons to prevent overlap */
    .logo-text-sub {
        display: none !important; 
    }
    .logo-text-main {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }
    .nav-logo-group {
        gap: 8px !important; 
    }
    #lang-toggle-btn {
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }
    #nav-menu-btn {
        width: 36px !important;
        height: 36px !important;
    }
    .nav-dropdown {
        top: 48px !important; /* Snaps the menu slightly higher to match the smaller buttons */
    }

    /* 3. Hero Section Scale-Down */
    #hero {
        padding-top: 80px !important; 
    }
    #hero-title {
        font-size: 2.5rem !important; 
        line-height: 1.2 !important;
    }
    .avatar-inner {
        width: 160px !important;
        height: 160px !important;
    }

    /* 4. Batcomputer Parts List Grid */
    /* Changes the parts list from horizontal rows into highly readable stacked blocks */
    .pc-part-item {
        flex-direction: column !important; 
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 16px !important;
    }

    /* 5. Game Grid & Stats */
    .laser-stat-content {
        padding: 20px 12px !important;
    }
    /* Shrinks the giant 14/4/18 numbers so they don't break their boxes */
    .laser-stat-content div[id$="-count"] {
        font-size: 2.2rem !important; 
    }

    /* 6. Sub-label Modal Fix */
    /* Prevents the filter popup from overflowing off the screen */
    #sublabel-modal > div {
        padding: 24px 16px !important;
        width: 95% !important;
        max-height: 90vh !important; 
        overflow-y: auto !important; /* Adds a scrollbar inside the popup if the phone is too small! */
    }
    
    /* Makes the filter buttons stack cleanly in 1 column on tiny phones, or 2 columns on larger ones */
    #sublabel-modal > div > div:nth-child(2) {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }
}