:root {
          --bg: #0f0e17;
          --bg2: #1a1a24;
          --bg3: #13121c;
          --surface: #1e1d2b;
          --accent: #e65616;
          --accent2: #f00069;
          --white: #fffffe;
          --muted: #6b6b82;
          --font-head: 'Bebas Neue', sans-serif;
          --font-body: 'DM Sans', sans-serif;
          --radius: 10px;
          --tr: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      *,
      *::before,
      *::after {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html,
      body {
          height: 100%;
      }

      body {
          font-family: var(--font-body);
          background: var(--bg);
          color: var(--white);
          min-height: 100vh;
          overflow-x: hidden;
          cursor: none;
      }

      /* CURSOR */
      #cd {
          position: fixed;
          width: 8px;
          height: 8px;
          background: var(--accent);
          border-radius: 50%;
          pointer-events: none;
          z-index: 9999;
          transform: translate(-50%, -50%);
      }

      #cr {
          position: fixed;
          width: 34px;
          height: 34px;
          border: 1.5px solid rgba(230, 86, 22, 0.5);
          border-radius: 50%;
          pointer-events: none;
          z-index: 9998;
          transform: translate(-50%, -50%);
          transition: left .12s, top .12s, transform .2s;
      }

      /* BG MESH */
      .bg-mesh {
          position: fixed;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          overflow: hidden;
      }

      .bg-mesh::before {
          content: '';
          position: absolute;
          width: 700px;
          height: 700px;
          left: -150px;
          top: -150px;
          background: radial-gradient(circle, rgba(230, 86, 22, 0.1) 0%, transparent 60%);
          animation: drift 18s ease-in-out infinite alternate;
      }

      .bg-mesh::after {
          content: '';
          position: absolute;
          width: 500px;
          height: 500px;
          right: -100px;
          bottom: 0;
          background: radial-gradient(circle, rgba(240, 0, 105, 0.1) 0%, transparent 55%);
          animation: drift 22s ease-in-out infinite alternate-reverse;
      }

      @keyframes drift {
          from {
              transform: translate(0, 0)
          }

          to {
              transform: translate(50px, 30px)
          }
      }

      /* NAV */
      header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 500;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 48px;
          background: rgba(15, 14, 23, 0.8);
          backdrop-filter: blur(16px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .logo {
          font-family: var(--font-head);
          font-size: 20px;
          letter-spacing: 3px;
          color: var(--white);
      }

      .logo span {
          color: var(--accent);
      }

      .back-btn {
          font-family: var(--font-head);
          font-size: 13px;
          letter-spacing: 2px;
          color: var(--muted);
          text-decoration: none;
          transition: var(--tr);
          cursor: none;
      }

      .back-btn:hover {
          color: var(--accent);
      }

      /* MAIN WRAP */
      .wrap {
          max-width: 1200px;
          margin: 0 auto;
          padding: 100px 48px 80px;
      }

      .eyebrow {
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.25em;
          text-transform: uppercase;
          color: var(--accent);
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .eyebrow::before {
          content: '';
          width: 32px;
          height: 2px;
          background: var(--accent);
          border-radius: 2px;
      }

      .page-title {
          font-family: var(--font-head);
          font-size: clamp(48px, 8vw, 88px);
          line-height: 0.92;
          letter-spacing: 2px;
          margin-bottom: 60px;
      }

      .page-title em {
          font-style: normal;
          color: var(--accent);
      }

      /* CAROUSEL LAYOUT */
      .carousel-wrap {
          display: grid;
          grid-template-columns: 1fr 420px;
          gap: 40px;
          align-items: center;
          min-height: 520px;
      }

      /* SLIDES STACK */
      .slides-stack {
          position: relative;
          height: 480px;
      }

      .slide {
          position: absolute;
          inset: 0;
          border-radius: 16px;
          overflow: hidden;
          opacity: 0;
          transform: scale(0.94) translateY(20px);
          transition: opacity 0.5s ease, transform 0.5s ease;
          pointer-events: none;
      }

      .slide.active {
          opacity: 1;
          transform: scale(1) translateY(0);
          pointer-events: all;
      }

      .slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      .slide-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(15, 14, 23, 0.85) 0%, transparent 50%);
      }

      /* slide number badge */
      .slide-num {
          position: absolute;
          top: 20px;
          left: 20px;
          font-family: var(--font-head);
          font-size: 13px;
          letter-spacing: 3px;
          color: rgba(255, 255, 255, 0.5);
          background: rgba(15, 14, 23, 0.5);
          backdrop-filter: blur(8px);
          padding: 5px 12px;
          border-radius: 6px;
      }

      /* dot nav on slide */
      .slide-dots {
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 8px;
      }

      .dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.3);
          transition: var(--tr);
          cursor: none;
      }

      .dot.active {
          background: var(--accent);
          width: 22px;
          border-radius: 3px;
      }

      /* INFO PANEL */
      .info-panel {
          display: flex;
          flex-direction: column;
          gap: 28px;
      }

      .game-card {
          display: none;
          animation: fadeSlide 0.45s ease both;
      }

      .game-card.active {
          display: flex;
          flex-direction: column;
          gap: 16px;
      }

      @keyframes fadeSlide {
          from {
              opacity: 0;
              transform: translateY(12px)
          }

          to {
              opacity: 1;
              transform: translateY(0)
          }
      }

      .game-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(230, 86, 22, 0.1);
          border: 1px solid rgba(230, 86, 22, 0.25);
          border-radius: 6px;
          padding: 5px 14px;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: var(--accent);
          width: fit-content;
      }

      .game-badge::before {
          content: '';
          width: 6px;
          height: 6px;
          background: var(--accent);
          border-radius: 50%;
          box-shadow: 0 0 6px var(--accent);
          animation: blink 2s ease-in-out infinite;
      }

      @keyframes blink {

          0%,
          100% {
              opacity: 1
          }

          50% {
              opacity: 0.3
          }
      }

      .game-title {
          font-family: var(--font-head);
          font-size: clamp(32px, 4vw, 52px);
          line-height: 1;
          letter-spacing: 2px;
          color: var(--white);
      }

      .game-title span {
          color: var(--accent2);
      }

      .game-desc {
          font-size: 15px;
          line-height: 1.7;
          color: var(--muted);
      }

      /* color indicators */
      .indicators {
          display: flex;
          gap: 10px;
      }

      .ind {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: rgba(107, 107, 130, 0.3);
          border: 2px solid rgba(107, 107, 130, 0.3);
          transition: var(--tr);
          cursor: none;
      }

      .ind.active {
          background: var(--accent);
          border-color: var(--accent);
          box-shadow: 0 0 8px rgba(230, 86, 22, 0.5);
      }

      /* PLAY BTN */
      .play-btn {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 15px 32px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          border: none;
          border-radius: var(--radius);
          color: var(--white);
          font-family: var(--font-head);
          font-size: 17px;
          letter-spacing: 3px;
          text-decoration: none;
          cursor: none;
          transition: var(--tr);
          width: fit-content;
          position: relative;
          overflow: hidden;
      }

      .play-btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
          transition: left 0.5s;
      }

      .play-btn:hover::before {
          left: 100%;
      }

      .play-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 28px rgba(230, 86, 22, 0.4);
      }

      .play-icon {
          font-size: 14px;
      }

      /* NAV ARROWS */
      .arrow-wrap {
          display: flex;
          gap: 12px;
          margin-top: 8px;
      }

      .arrow-btn {
          width: 44px;
          height: 44px;
          background: var(--surface);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: var(--muted);
          cursor: none;
          transition: var(--tr);
      }

      .arrow-btn:hover {
          border-color: rgba(230, 86, 22, 0.4);
          color: var(--accent);
          background: rgba(230, 86, 22, 0.08);
      }

      /* ──────────────────────────────
       FOOTER
    ────────────────────────────── */
      footer {
          position: relative;
          z-index: 2;
          background: var(--bg3);
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          padding: 48px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;
      }

      .footer-logo {
          font-family: var(--font-head);
          font-size: 28px;
          letter-spacing: 4px;
          color: var(--white);
          margin-bottom: 8px;
      }

      .footer-logo span {
          color: var(--accent);
      }

      footer p {
          font-size: 12px;
          color: var(--muted);
          text-align: center;
          line-height: 1.6;
      }

      /* ── DIVIDER ── */
      .divider {
          width: 64px;
          height: 2px;
          background: linear-gradient(90deg, var(--accent), var(--accent2));
          border-radius: 2px;
          margin: 12px 0;
      }

      /* ── SCROLL REVEAL ── */
      .reveal {
          opacity: 0;
          transform: translateY(24px);
          transition: opacity 0.6s ease, transform 0.6s ease;
      }

      .reveal.visible {
          opacity: 1;
          transform: translateY(0);
      }

      @media(max-width:900px) {
          .carousel-wrap {
              grid-template-columns: 1fr;
          }

          .slides-stack {
              height: 280px;
          }

          header {
              padding: 0 24px;
          }

          .wrap {
              padding: 90px 24px 60px;
          }
      }