body{
  margin:0;
  font-family:system-ui,-apple-system,sans-serif;
  background:#0f111a;
  color:#e8ecff;
  transition:background .4s ease;
  overflow-x:hidden;
}

/* atmospheric glow */
body::before{
  content:"";
  position:fixed;
  inset:-30%;
  background:radial-gradient(circle at center, rgba(120,140,255,.10), transparent 60%);
  filter: blur(70px);
  pointer-events:none;
}

.wrapper{
  max-width:900px;
  margin:auto;
  padding:70px 20px;
  text-align:center;
}

h1{ margin:0 0 6px; font-weight:700; }
.subtitle{ color:#9aa3d4; margin-bottom:45px; }

/* 🔴 RANDOM PORTAL BUTTON */
.random-btn{
  width:170px;
  height:170px;
  border-radius:50%;
  border:none;
  background: radial-gradient(circle at 35% 35%, #ff7a7a, #ff2d2d 55%, #b80000 80%);
  color:white;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  margin-bottom:55px;
  position:relative;
  overflow:visible;
  transition:.2s ease;
  box-shadow:
    0 0 30px rgba(255,60,60,.65),
    inset 0 0 30px rgba(255,255,255,.15);
}

/* highlight */
.random-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%);
}

/* INNER ROTATING RING */
.random-btn::after{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border:3px solid rgba(255,120,120,.65);
  animation: spinInner 6s linear infinite;
}

/* OUTER RING */
.random-btn span{
  position:absolute;
  inset:-42px;
  border-radius:50%;
  border:2px solid rgba(255,120,120,.45);
  animation: spinOuter 14s linear infinite;
  pointer-events:none;
}

/* RIPPLE PULSE */
.random-btn span::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:2px solid rgba(255,120,120,.35);
  animation: ripple 2.6s ease-out infinite;
}

@keyframes spinInner{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes spinOuter{
  from{transform:rotate(0deg);}
  to{transform:rotate(-360deg);}
}
@keyframes ripple{
  0%{transform:scale(1);opacity:.8;}
  70%{transform:scale(1.45);opacity:0;}
  100%{opacity:0;}
}

.random-btn:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 55px rgba(255,60,60,.85),
    0 0 110px rgba(255,60,60,.35),
    inset 0 0 40px rgba(255,255,255,.25);
}
.random-btn:active{ transform:scale(.94); }

/* grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,max-content));
  justify-content:center;
  gap:16px;
}

/* category buttons */
.cat-btn{
  border:none;
  padding:16px 14px;
  border-radius:14px;
  background:#1b1f2d;
  color:#dbe2ff;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.cat-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px rgba(0,0,0,.55);
}