/* ======================================================
   REAL CRT BARREL DISTORTION (RADIAL, NOT NOISE)
====================================================== */

html, body{
  margin:0;
  background:#000;
}

/* Apply CRT bend globally */
body{
  filter:url(#crt-bend);
}

/* Inject SVG filter */
body::before{
  content:"";
  position:fixed;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
  background:
  url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='0' height='0'>\
  <filter id='crt-bend' x='-20%' y='-20%' width='140%' height='140%'>\
    <!-- Radial map: white edges = push out -->\
    <feImage href='data:image/svg+xml;utf8,\
      <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 100 100\\\">\
        <defs>\
          <radialGradient id=\\\"g\\\">\
            <stop offset=\\\"0%\\\" stop-color=\\\"#808080\\\"/>\
            <stop offset=\\\"70%\\\" stop-color=\\\"#808080\\\"/>\
            <stop offset=\\\"100%\\\" stop-color=\\\"#ffffff\\\"/>\
          </radialGradient>\
        </defs>\
        <rect width=\\\"100\\\" height=\\\"100\\\" fill=\\\"url(#g)\\\"/>\
      </svg>' result='warp'/>\
    <feDisplacementMap in='SourceGraphic' in2='warp' scale='100' \
      xChannelSelector='R' yChannelSelector='G'/>\
  </filter>\
</svg>");
}

/* ======================================================
   CRT GLASS MASK (ROUNDED TUBE)
====================================================== */

#mainMenu::after{
  content:"";
  position:fixed;
  inset:-14%;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,.25) 60%,
      rgba(0,0,0,.65) 78%,
      rgba(0,0,0,.95) 100%
    );
  z-index:90000;
}

/* ======================================================
   SCANLINES + RGB PHOSPHOR MASK
====================================================== */

#crt{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:99999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,.38) 3px
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,0,0,.09) 0px,
      rgba(0,255,0,.06) 1px,
      rgba(0,0,255,.09) 2px
    );
  background-size:
    100% 3px,
    3px 100%;
  mix-blend-mode:multiply;
  animation:crtDrift 6s steps(1,end) infinite;
}

/* ======================================================
   PHOSPHOR NOISE + GRAIN
====================================================== */

#crt::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("../images/crt.png") repeat;
  opacity:.22;
  mix-blend-mode:overlay;
}

/* ======================================================
   FLICKER / SIGNAL BREATH
====================================================== */

#crt::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.14);
  animation:crtFlicker 70ms infinite;
}

/* ======================================================
   ANALOG SOFTENING
====================================================== */

body{
  filter:
    blur(.3px)
    contrast(1.15)
    saturate(1.18)
    brightness(1.06)
    url(#crt-bend);
}

/* ======================================================
   TEXT PHOSPHOR BLEED
====================================================== */

*{
  text-shadow:
    0 0 1px rgba(255,176,0,.45),
    0 0 12px rgba(255,176,0,.25);
}

/* ======================================================
   MICRO DRIFT (WARM TUBE)
====================================================== */

@keyframes crtDrift{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(.9px,-.9px); }
}

@keyframes crtFlicker{
  0%{opacity:.09}
  50%{opacity:.22}
  100%{opacity:.09}
}

/* ======================================================
   PIXEL DISCIPLINE
====================================================== */

.win,
.terminal,
img,
canvas,
#santaSprite{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

#crt-dither{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:99998;

  background:url("../images/dither.png") repeat;
  image-rendering:pixelated;

  mix-blend-mode:hard-light;
  opacity:.05;
}