/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Inter,system-ui;
}

body{
  background:#060606;
  color:#fff;
  overflow:hidden;
}

/* 🌌 BACKGROUND */
#bg{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,255,0.15), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(140,0,255,0.15), transparent 40%);
  filter:blur(40px);
}

/* 🔫 CURSOR */
#cursor{
  position:fixed;
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(45deg,cyan,purple);
  pointer-events:none;
  mix-blend-mode:difference;
  transition:transform .08s;
}

/* 🎬 ENTER SCREEN */
#enter{
  backdrop-filter:blur(20px);
  background:rgba(0,0,0,0.8);
}

#enter button{
  background:linear-gradient(135deg,cyan,purple);
  color:#000;
  font-weight:bold;
  letter-spacing:1px;
  box-shadow:0 0 25px rgba(0,255,255,0.5);
}

/* 🧭 NAVBAR */
nav{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:30px;
  padding:12px 30px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(15px);
  box-shadow:0 0 20px rgba(0,255,255,0.15);
}

nav button{
  color:#aaa;
  font-size:15px;
  transition:.2s;
}

nav button:hover{
  color:#fff;
  text-shadow:0 0 10px cyan;
}

/* 📄 PAGE */
.page{
  padding-top:100px;
  gap:20px;
}

/* 💎 CARD */
.card{
  padding:35px;
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 0 30px rgba(0,255,255,0.15);
  transition:.3s;
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:0 0 50px rgba(0,255,255,0.3);
}

/* 🧠 TITLE */
.card h1{
  font-size:42px;
  background:linear-gradient(90deg,cyan,purple);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 🔘 BUTTON */
.btn{
  margin-top:15px;
  padding:12px 22px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,cyan,purple);
  color:#000;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

.btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px cyan;
}

/* 🛒 SHOP GRID */
.items{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:25px;
  width:80%;
}

/* 🧱 ITEM CARD */
.item{
  padding:20px;
  border-radius:15px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  transition:.3s;
  text-align:center;
}

.item:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 0 25px rgba(0,255,255,0.2);
}

.item h3{
  margin-bottom:10px;
  font-size:18px;
}

/* 🛒 CART */
.cart{
  right:30px;
  bottom:30px;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 0 25px rgba(0,255,255,0.2);
}

/* 🧾 MODAL */
.modal .card{
  width:300px;
  text-align:center;
}

/* ⚙️ SETTINGS */
#settings{
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,0.1);
}