/* =========================================================
   NostalgiaNet — Effects (CRT, scanlines, grain, glass)
   Toggle CRT via body[data-crt="on"]
   ========================================================= */

.bg-wrap{
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events:none;
  background: var(--bg);
}
.bg-wrap::before{
  content: "";
  position:absolute; inset:0;
  background: var(--noise);
  opacity: 0.65;
  mix-blend-mode: screen;
}

body[data-crt="on"]::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index: 9998;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      rgba(0,0,0,0.00) 3px,
      rgba(0,0,0,0.00) 4px
    );
  opacity: 0.22;
  mix-blend-mode: overlay;
}
body[data-crt="on"]::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index: 9997;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10), transparent 58%);
  opacity: 0.7;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--stroke2);
  box-shadow: var(--shadow-1);
  border-radius: var(--r-2);
}

.pixel-border{
  outline: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, #000 20%, transparent);
}

/* subtle “HUD shimmer” */
@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 120% 50%; }
}
.shimmer{
  background: linear-gradient(90deg,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.00));
  background-size: 220% 100%;
  animation: shimmer 2.8s linear infinite;
}