:root{
  --bg: #050607;
  --g: #00ff88;
  --g2: rgba(0,255,136,0.35);
  --g3: rgba(0,255,136,0.12);
  --text: rgba(200,255,230,0.75);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }

body{
  margin: 0;
  background:
    radial-gradient(900px 700px at 50% 45%, rgba(0,255,136,0.08), transparent 62%),
    radial-gradient(900px 700px at 50% 55%, rgba(0,0,0,0.6), transparent 60%),
    linear-gradient(180deg, #040506, #060708);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow: hidden;
}

/* scanlines */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      rgba(0,0,0,0.0) 2px,
      rgba(0,0,0,0.0) 6px
    );
  opacity: 0.22;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* subtle noise */
body::after{
  content:"";
  position: fixed;
  inset: -25%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: screen;
}

.stage{
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.emblem{
  position: relative;
}

.frame{
  position: relative;
  width: min(360px, 72vw);
  aspect-ratio: 1 / 1.05;
  border-radius: 26px;
  border: 1px solid rgba(0,255,136,0.18);
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(0,255,136,0.08), transparent 55%),
    rgba(255,255,255,0.02);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 40px rgba(0,255,136,0.12);
  overflow: hidden;
}

/* faint inner corners */
.frame::before{
  content:"";
  position: absolute;
  inset: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,255,136,0.10);
  box-shadow: 0 0 30px rgba(0,255,136,0.08) inset;
  pointer-events: none;
}

/* pixel glider */
.glider{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.glider .px{
  position: absolute;
  width: clamp(18px, 3.5vw, 26px);
  height: clamp(18px, 3.5vw, 26px);
  left: 50%;
  top: 50%;
  transform:
    translate(calc(-50% + (var(--x) - 2) * 1.15 * clamp(18px, 3.5vw, 26px)),
              calc(-50% + (var(--y) - 2) * 1.15 * clamp(18px, 3.5vw, 26px)));
  border-radius: 6px;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.18);
  box-shadow: 0 0 0 rgba(0,255,136,0);
}

.glider .px.on{
  background: linear-gradient(180deg, rgba(0,255,136,0.95), rgba(0,255,136,0.65));
  border: 1px solid rgba(0,255,136,0.45);
  box-shadow:
    0 0 18px rgba(0,255,136,0.35),
    0 0 50px rgba(0,255,136,0.12);
  animation: flicker 2.8s infinite;
}

.glider .px.on:nth-child(2){ animation-delay: .12s; }
.glider .px.on:nth-child(3){ animation-delay: .26s; }
.glider .px.on:nth-child(4){ animation-delay: .18s; }
.glider .px.on:nth-child(5){ animation-delay: .34s; }

@keyframes flicker{
  0%, 100% { opacity: 0.92; filter: brightness(1); }
  7% { opacity: 0.65; filter: brightness(1.25); }
  9% { opacity: 0.95; }
  47% { opacity: 0.88; }
  52% { opacity: 0.72; filter: brightness(1.3); }
  54% { opacity: 0.94; filter: brightness(1); }
}

/* tiny “hacker” signature */
.sig{
  position: absolute;
  bottom: 16px;
  left: 18px;
  letter-spacing: 0.35em;
  color: rgba(0,255,136,0.35);
  text-shadow: 0 0 14px rgba(0,255,136,0.18);
  user-select: none;
}

/* glitch sweep */
.glitch{
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,255,136,0.06) 45%,
      rgba(0,255,136,0.14) 50%,
      rgba(0,255,136,0.06) 55%,
      transparent 100%);
  transform: translateX(-60%) skewX(-12deg);
  animation: sweep 6s infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.9;
}

@keyframes sweep{
  0%, 72% { transform: translateX(-75%) skewX(-12deg); opacity: 0; }
  74% { opacity: 0.9; }
  86% { transform: translateX(85%) skewX(-12deg); opacity: 0.9; }
  90%, 100% { opacity: 0; }
}