:root{--bg:#050905;--panel:#0b140b;--green:#9cff00;--green2:#4fa800;--accent:#c8ff64}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Press Start 2P',monospace;
  color:#9cff00;

  background:
    radial-gradient(circle at 30% 20%, #1aff0033, transparent 40%),
    radial-gradient(circle at 70% 60%, #00ff8833, transparent 40%),
    radial-gradient(circle at 50% 100%, #0a1f0a, #020402 70%);

  background-color:#020402;
}

header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:3px solid var(--green2);background:#030803}
.nav a{margin-left:12px;text-decoration:none;color:var(--green);border:2px solid var(--green2);padding:8px 10px;font-size:9px}
.nav a:hover{background:var(--green);color:black}

.hero{text-align:center;padding:70px 20px;background:radial-gradient(circle,#132f13,#020402 70%)}
.hero h1{
  font-size:48px;
  text-shadow:
    0 0 10px #00ff88,
    0 0 20px #00ff88,
    0 0 40px #00ff88;
}

.box{
  max-width:1000px;
  margin:40px auto;
  padding:24px;

  border:1px solid #1aff00;
  background:rgba(10,20,10,0.6);

  backdrop-filter: blur(6px);

  box-shadow:
    0 0 20px #00ff88,
    inset 0 0 10px #00ff4422;
}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}

.card{border:3px solid var(--green2);padding:20px;background:#060e06;text-align:center}
.item-img{width:120px;image-rendering:pixelated;display:block;margin:0 auto 10px}

input,select{width:100%;padding:10px;margin:6px 0;background:#020602;border:2px solid var(--green2);color:var(--green);font-family:inherit}
button{width:100%;margin-top:10px;background:none;border:2px solid var(--green);color:var(--green);padding:10px;cursor:pointer;font-family:inherit;font-size:9px}
button:hover{background:var(--green);color:black}

.footer{text-align:center;padding:20px;opacity:.6;font-size:9px}
body{
  background:linear-gradient(#041104,#020402);
  overflow-x:hidden;
  position:relative;
}

/* ===== Floating Pixel Cubes Background ===== */

body{
  background:linear-gradient(#041104,#020402);
  overflow-x:hidden;
  position:relative;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  /* tiny squares instead of dots */
  background-image:
    linear-gradient(rgba(156,255,0,.6) 2px, transparent 2px),
    linear-gradient(90deg, rgba(156,255,0,.6) 2px, transparent 2px);

  background-size: 40px 40px;
  animation: floatCubes 16s linear infinite;
  opacity:.25;
  z-index:-1;
}

body::after{
  background-size: 60px 60px;
  animation-duration: 24s;
  opacity:.15;
}

@keyframes floatCubes{
  from { background-position:0 0; }
  to   { background-position:0 -400px; }
}

/* ===== POPUP ===== */

.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:999;
}

.popup-box{
  background:#0b140b;
  border:3px solid #4fa800;
  padding:30px;
  text-align:center;
  box-shadow:0 0 20px #9cff00;
}

.popup button{
  margin-top:10px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background-image:
    radial-gradient(circle, #9cff00 2px, transparent 2px);

  background-size: 120px 120px;
  opacity:0.15;

  animation: floatSoft 20s linear infinite;
}

@keyframes floatSoft{
  from{ background-position:0 0; }
  to{ background-position:0 -300px; }
}