:root {
  --bg: #050505;

  --panel: rgba(10, 10, 10, 0.78);
  --panel-hover: rgba(20, 12, 7, 0.88);

  --orange: #ff6500;
  --orange-bright: #ff8a00;

  --text: #f2f2f2;
  --muted: #777;

  --border: rgba(255, 101, 0, 0.2);
  --border-hover: rgba(255, 101, 0, 0.65);
}


* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {
  min-height: 100vh;

  overflow-x: hidden;

  background: var(--bg);

  color: var(--text);

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  cursor: none;
}


/* ========================================
   REMOVE NORMAL POINTER
======================================== */

a,
button,
input,
textarea,
select {
  cursor: none;
}


/* ========================================
   CUSTOM CURSOR
======================================== */

.custom-cursor {
  position: fixed;

  top: 0;
  left: 0;

  width: 28px;
  height: 28px;

  margin-left: -14px;
  margin-top: -14px;

  border:
    1px solid rgba(255, 255, 255, 0.9);

  border-radius: 50%;

  pointer-events: none;

  z-index: 999999;

  opacity: 0;

  visibility: hidden;

  will-change:
    transform,
    width,
    height;

  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.25);

  transition:
    width 0.2s ease,
    height 0.2s ease,
    margin 0.2s ease,
    opacity 0.18s ease,
    visibility 0.18s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.custom-cursor.visible {
  opacity: 1;

  visibility: visible;
}


/* ========================================
   ORANGE CENTER
======================================== */

.cursor-dot {
  position: absolute;

  width: 5px;
  height: 5px;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    var(--orange);

  box-shadow:
    0 0 7px var(--orange),
    0 0 14px
    rgba(255, 101, 0, 0.65);
}


/* ========================================
   HOVERING CLICKABLE
======================================== */

.custom-cursor.hovering {
  width: 42px;
  height: 42px;

  margin-left: -21px;
  margin-top: -21px;

  border-color:
    white;

  box-shadow:
    0 0 10px
    rgba(255, 255, 255, 0.25),

    0 0 18px
    rgba(255, 101, 0, 0.25);
}


.custom-cursor.hovering .cursor-dot {
  width: 4px;
  height: 4px;
}


/* ========================================
   CLICK
======================================== */

.custom-cursor.clicking {
  width: 22px;
  height: 22px;

  margin-left: -11px;
  margin-top: -11px;
}


.custom-cursor.clicking .cursor-dot {
  width: 7px;
  height: 7px;
}


/* ========================================
   BACKGROUND GRID
======================================== */

#grid {
  position: fixed;

  inset: -20%;

  z-index: -2;

  background-color: #050505;

  background-image:
    linear-gradient(
      rgba(255, 101, 0, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 101, 0, 0.045) 1px,
      transparent 1px
    );

  background-size: 65px 65px;

  transform:
    perspective(800px)
    rotateX(55deg)
    scale(1.35);

  transform-origin: center bottom;

  animation:
    gridMove 20s linear infinite;
}


#grid::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(5, 5, 5, 0.25) 28%,
      rgba(5, 5, 5, 0.88) 60%,
      #050505 85%
    );
}


@keyframes gridMove {

  from {
    background-position: 0 0;
  }

  to {
    background-position: 65px 65px;
  }

}


/* ========================================
   NAVBAR
======================================== */

.navbar {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 78px;

  display: flex;

  align-items: center;

  padding: 0 5vw;

  background:
    rgba(5, 5, 5, 0.72);

  border-bottom:
    1px solid
    rgba(255, 101, 0, 0.12);

  backdrop-filter:
    blur(14px);

  z-index: 100;
}


/* ========================================
   NAVBAR LOGO
======================================== */

.logo {
  display: flex;

  align-items: center;

  gap: 13px;

  color: white;

  text-decoration: none;

  font-size: 22px;

  font-weight: 900;

  letter-spacing: 0.1em;

  margin-right: auto;
}


.logo img {
  width: 45px;
  height: 45px;

  display: block;

  flex-shrink: 0;

  filter:
    drop-shadow(
      0 0 7px
      rgba(255, 101, 0, 0.5)
    );

  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}


.logo:hover img {
  transform:
    rotate(15deg)
    scale(1.08);

  filter:
    drop-shadow(
      0 0 13px
      rgba(255, 101, 0, 0.85)
    );
}


.logo span {
  display: flex;

  align-items: center;
}


.logo b {
  color: white;

  font-weight: 900;
}


.logo strong {
  color: var(--orange);

  font-weight: 900;

  text-shadow:
    0 0 14px
    rgba(255, 101, 0, 0.3);
}


/* ========================================
   NAVIGATION
======================================== */

nav {
  display: flex;

  align-items: center;

  gap: 32px;
}


nav a {
  position: relative;

  color: #888;

  text-decoration: none;

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}


nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 1px;

  background:
    var(--orange);

  box-shadow:
    0 0 8px var(--orange);

  transition:
    width 0.25s ease;
}


nav a:hover,
nav a.active {
  color: white;

  text-shadow:
    0 0 12px
    rgba(255, 101, 0, 0.45);
}


nav a:hover::after,
nav a.active::after {
  width: 100%;
}


/* ========================================
   SEARCH BUTTON
======================================== */

.search-button {
  width: 42px;
  height: 42px;

  margin-left: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

  padding: 0;

  border: 1px solid var(--border);

  border-radius: 10px;

  background:
    rgba(255, 101, 0, 0.035);

  color:
    var(--orange);

  font-size: 19px;

  cursor: none;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}


.search-button span {
  display: flex;

  align-items: center;

  justify-content: center;

  transform: translateY(-1px);
}


.search-button:hover {
  background:
    rgba(255, 101, 0, 0.12);

  border-color:
    var(--border-hover);

  color:
    var(--orange-bright);

  box-shadow:
    0 0 18px
    rgba(255, 101, 0, 0.2);
}


/* ========================================
   HOME
======================================== */

.home {
  min-height: 100vh;

  padding:
    125px 6vw 60px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  position: relative;
}


/* ========================================
   CENTER BRAND
======================================== */

.home-center {
  text-align: center;

  margin-bottom: 55px;

  position: relative;

  z-index: 2;
}


/* ========================================
   BACK TO HOME LINK
======================================== */

.back-home {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 26px;

  padding: 11px 18px;

  border: 1px solid var(--border);

  border-radius: 8px;

  background:
    rgba(255, 101, 0, 0.035);

  color: var(--muted);

  font-size: 11px;

  font-weight: 600;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.back-home::before {
  content: "←";

  font-size: 13px;
}


.back-home:hover {
  color: var(--orange-bright);

  border-color: var(--border-hover);

  background:
    rgba(255, 101, 0, 0.1);

  box-shadow:
    0 0 16px
    rgba(255, 101, 0, 0.18);
}


.status {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  margin-bottom: 20px;

  color:
    var(--orange);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.2em;
}


.status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--orange);

  box-shadow:
    0 0 8px var(--orange),
    0 0 16px
    rgba(255, 101, 0, 0.5);

  animation:
    pulse 1.5s ease-in-out infinite;
}


@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

}


.home-center h1 {
  color: white;

  font-size:
    clamp(60px, 10vw, 135px);

  font-weight: 900;

  line-height: 0.85;

  letter-spacing: -0.07em;
}


.home-center h1 span {
  color:
    var(--orange);

  text-shadow:
    0 0 25px
    rgba(255, 101, 0, 0.25);
}


.home-center p {
  margin-top: 25px;

  color: #777;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.28em;
}


/* ========================================
   MODULE GRID
======================================== */

.modules {
  width:
    min(1050px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 16px;

  position: relative;

  z-index: 2;
}


/* ========================================
   MODULES
======================================== */

.module {
  position: relative;

  min-height: 175px;

  display: flex;

  align-items: flex-end;

  padding: 26px;

  overflow: hidden;

  text-decoration: none;

  color: white;

  background:
    rgba(12, 12, 12, 0.85);

  border:
    1px solid var(--border);

  border-radius: 6px;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}


.module::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  background: var(--border);

  transition: background 0.25s ease;
}


.module::after {
  content: attr(data-index);

  position: absolute;

  top: 18px;
  right: 22px;

  color:
    rgba(255, 101, 0, 0.3);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.1em;
}


.module:hover {
  transform:
    translateY(-4px);

  background:
    rgba(18, 12, 8, 0.92);

  border-color:
    var(--border-hover);
}


.module:hover::before {
  background: var(--orange);

  box-shadow:
    0 0 10px var(--orange);
}


/* ========================================
   MODULE CONTENT
======================================== */

.module-content {
  position: relative;

  z-index: 2;
}


.module-content h2 {
  font-size: 30px;

  font-weight: 800;

  letter-spacing: -0.03em;
}


.module-content p {
  margin-top: 8px;

  color: #666;

  font-size: 12px;
}


/* ========================================
   MODULE ARROW
======================================== */

.module-arrow {
  position: absolute;

  right: 24px;
  bottom: 22px;

  color:
    var(--orange);

  font-size: 20px;

  z-index: 2;

  transition:
    transform 0.25s ease,
    text-shadow 0.25s ease;
}


.module:hover .module-arrow {
  transform:
    translateX(6px);

  text-shadow:
    0 0 12px
    rgba(255, 101, 0, 0.7);
}


/* ========================================
   MODULE SIZES
======================================== */

.module-games {
  min-height: 215px;
}


.module-search {
  min-height: 215px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 800px) {

  body {
    cursor: auto;
  }


  a,
  button,
  input,
  textarea,
  select {
    cursor: pointer;
  }


  .custom-cursor {
    display: none;
  }


  .navbar {
    padding:
      0 20px;

    height: 70px;
  }


  .logo {
    font-size: 18px;

    gap: 9px;
  }


  .logo img {
    width: 36px;
    height: 36px;
  }


  nav {
    display: none;
  }


  .search-button {
    margin-left: auto;

    cursor: pointer;
  }


  .home {
    padding:
      110px 20px 40px;
  }


  .home-center {
    margin-bottom: 40px;
  }


  .home-center h1 {
    font-size: 18vw;
  }


  .home-center p {
    font-size: 9px;

    letter-spacing: 0.18em;
  }


  .modules {
    grid-template-columns: 1fr;
  }


  .module,
  .module-games,
  .module-search {
    min-height: 155px;
  }

}


/* ========================================
   SMALL PHONES
======================================== */

@media (max-width: 450px) {

  .logo {
    font-size: 17px;
  }


  .logo img {
    width: 32px;
    height: 32px;
  }


  .home-center h1 {
    font-size: 19vw;
  }


  .module {
    padding: 21px;
  }


  .module-content h2 {
    font-size: 25px;
  }


  .module-arrow {
    right: 20px;

    bottom: 19px;
  }

}