:root {
  --pink: #ff2bd6;
  --cyan: #00f6ff;
  --acid: #c8ff00;
  --purple: #6515ff;
  --yellow: #fff200;
  --red: #ff1744;
  --ink: #050008;
  --chrome-light: #f5f5f5;
  --chrome-mid: #bdbdbd;
  --chrome-dark: #444;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  color: white;
  font-family: "Courier New", monospace;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,43,214,.25), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(0,246,255,.22), transparent 25%),
    linear-gradient(180deg, #13001d 0%, #030006 55%, #10001a 100%);
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: perspective(400px) rotateX(68deg) scale(1.6) translateY(36%);
  transform-origin: bottom;
}

.scanlines, .crt-noise, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
.scanlines { background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.23) 3px, rgba(0,0,0,.23) 4px); mix-blend-mode: multiply; }
.crt-noise { opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: noise .15s steps(2) infinite; }
.vignette { box-shadow: inset 0 0 130px #000, inset 0 0 40px #000; }
@keyframes noise { 0% { transform: translate(0); } 25% { transform: translate(-2%,1%); } 50% { transform: translate(1%,-2%); } 75% { transform: translate(2%,2%); } }

.topbar, footer {
  position: fixed;
  left: 0; right: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 7px 10px;
  background: #05000a;
  border-color: var(--cyan);
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
  font-size: 12px;
}
.topbar { top: 0; border-bottom: 2px solid var(--cyan); }
footer { bottom: 0; border-top: 2px solid var(--pink); color: var(--pink); }
.brand { font-weight: 900; letter-spacing: 3px; color: var(--yellow); text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan); }
.status { text-align: center; }
.clock { color: var(--acid); }

.marquee-wrap { position: fixed; left: 0; right: 0; height: 25px; overflow: hidden; z-index: 110; background: #fff200; color: #000; border-top: 2px solid #000; border-bottom: 2px solid #000; font-weight: 900; white-space: nowrap; }
.top-marquee { top: 31px; }
.bottom-marquee { bottom: 31px; background: var(--pink); color: #fff; }
.marquee { display: inline-block; min-width: 200%; animation: crawl 21s linear infinite; }
.marquee.reverse { animation-direction: reverse; animation-duration: 17s; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.desktop { position: relative; min-height: 160vh; padding-top: 95px; padding-bottom: 120px; isolation: isolate; }

.chrome-window {
  background: #c0c0c0;
  color: #000;
  border: 3px solid;
  border-color: #fff #222 #222 #fff;
  box-shadow: 6px 6px 0 #000, 0 0 24px rgba(255,43,214,.35);
}
.panel { z-index: 20; }
.window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  padding: 3px 4px 3px 7px;
  color: #fff;
  background: linear-gradient(90deg, #050061, #0086ff 65%, #050061);
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;
  user-select: none;
}
.drag-handle { cursor: move; }
.window-controls { display: flex; gap: 3px; }
.window-controls button { min-width: 23px; height: 20px; padding: 0; border: 2px solid; border-color: #fff #222 #222 #fff; background: #c0c0c0; font-weight: 900; line-height: 14px; cursor: pointer; }

.hero { width: min(680px, 82vw); margin: 9vh auto 0; transform: rotate(-.45deg); }
.hero-inner { padding: 25px; text-align: center; background: repeating-linear-gradient(45deg, #09000e 0 12px, #12001f 12px 24px); color: #fff; }
.eyebrow { margin: 0 0 8px; color: var(--acid); letter-spacing: 4px; font-size: 12px; }
h1 { margin: 0; text-transform: uppercase; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-style: italic; font-size: clamp(68px, 13vw, 145px); line-height: .8; letter-spacing: -3px; color: transparent; -webkit-text-stroke: 2px #fff; text-shadow: 7px 7px 0 var(--purple), 11px 11px 0 var(--pink), 0 0 28px var(--cyan); transform: skew(-8deg); }
.tagline { color: var(--cyan); font-size: clamp(13px, 2vw, 18px); text-shadow: 0 0 10px var(--cyan); }
.ascii-logo pre { display: inline-block; margin: 12px 0; color: var(--pink); text-align: left; font-size: clamp(6px, 1.1vw, 11px); line-height: 1; text-shadow: 0 0 10px var(--pink); }
.hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.retro-btn { font: 900 13px/1 "Courier New", monospace; padding: 10px 13px; color: #000; background: var(--cyan); border: 3px solid; border-color: #fff #09282b #09282b #fff; box-shadow: 3px 3px 0 #000; cursor: pointer; text-transform: uppercase; }
.retro-btn:hover { filter: invert(1); transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.retro-btn.danger { background: var(--red); color: #fff; }
.retro-btn.alt { background: var(--acid); }
.retro-btn.tiny { font-size: 11px; padding: 8px 10px; }
.meter-row { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; margin-top: 20px; font-size: 11px; text-align: left; }
.meter { height: 10px; border: 1px solid #fff; background: #000; overflow: hidden; }
.meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--pink) 0 6px, transparent 6px 8px); }

.floating-window { position: absolute; width: min(360px, 82vw); left: var(--x); top: var(--y); transform: rotate(var(--rot)); }
.terminal { background: #000; color: #47ff5d; min-height: 220px; padding: 11px; font-size: 12px; text-shadow: 0 0 5px #1cff3a; overflow: hidden; }
.terminal p { margin: 3px 0; }
.blink { animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.counter-body { padding: 14px; text-align: center; background: #111; color: var(--yellow); }
#counter { padding: 4px 8px; background: #000; border: 2px inset #999; color: #ff3100; font: 900 28px/1 monospace; letter-spacing: 3px; text-shadow: 0 0 8px red; }
.counter-body small { display: block; margin-top: 6px; color: #fff; }

.ad-body { position: relative; padding: 18px; text-align: center; background: linear-gradient(135deg,#fffc00,#ff7a00 45%,#ff00bf); font-family: Arial, sans-serif; font-weight: 900; }
.ad-body p { margin: 10px 0; }
.ad-body small { display: block; margin-top: 10px; font-size: 8px; font-weight: 400; }
.burst { position: absolute; right: -25px; top: -34px; display: grid; place-items: center; width: 90px; height: 90px; background: var(--yellow); color: red; clip-path: polygon(50% 0%,61% 28%,85% 15%,72% 39%,100% 50%,72% 61%,85% 85%,61% 72%,50% 100%,39% 72%,15% 85%,28% 61%,0% 50%,28% 39%,15% 15%,39% 28%); transform: rotate(14deg); font-size: 22px; }

.guestbook-body { padding: 12px; background: #fff; font-size: 11px; }
.guestbook-body p { border-bottom: 1px dashed #999; padding-bottom: 5px; }
.guestbook-body form { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.guestbook-body input { font: 11px monospace; border: 2px inset #aaa; padding: 6px; }

.floating-junk { position: absolute; z-index: 8; user-select: none; pointer-events: none; }
.word-art { font-family: Impact, sans-serif; font-style: italic; font-size: clamp(34px, 6vw, 90px); color: var(--yellow); -webkit-text-stroke: 2px #000; text-shadow: 5px 5px 0 var(--pink), 9px 9px 0 var(--cyan); filter: drop-shadow(0 0 9px var(--pink)); }
.w1 { left: 1vw; top: 18vh; transform: rotate(-15deg); animation: bob 3s ease-in-out infinite; }
.w2 { right: 1vw; top: 42vh; transform: rotate(12deg); animation: bob 2.4s ease-in-out infinite reverse; }
.star { color: var(--yellow); text-shadow: 0 0 14px var(--yellow), 4px 4px 0 var(--pink); font-size: 78px; animation: spin 7s linear infinite; }
.s1 { left: 12vw; top: 88vh; }
.s2 { right: 14vw; top: 102vh; font-size: 54px; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { translate: 0 -15px; } }

.floppy { left: 3vw; top: 111vh; width: 105px; height: 110px; padding: 15px 8px; background: #222; border: 5px solid #999; color: #fff; box-shadow: inset 0 -36px #555, 8px 8px 0 #000; font: 900 24px/1 Arial; text-align: center; transform: rotate(-7deg); }
.floppy span { font-size: 12px; }
.eyeball { right: 6vw; top: 116vh; width: 110px; height: 78px; border: 6px solid var(--cyan); border-radius: 55% 45% 52% 48%; background: #fff; transform: rotate(-8deg); box-shadow: 0 0 25px var(--cyan); overflow: hidden; }
.eyeball i { position: absolute; left: 37px; top: 22px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #000 0 30%, var(--purple) 31% 67%, #000 68%); transition: transform .08s linear; }

.wireframe-cube { left: 51vw; top: 26vh; width: 75px; height: 75px; border: 2px solid var(--cyan); transform: rotate(25deg) skew(-12deg); box-shadow: 20px 20px 0 -2px transparent, 20px 20px 0 0 var(--pink); animation: cube 5s ease-in-out infinite; }
.wireframe-cube::before, .wireframe-cube::after { content:""; position:absolute; background: var(--cyan); transform-origin:left center; }
.wireframe-cube::before { width:28px; height:2px; left:0; top:0; transform:rotate(45deg); box-shadow: 0 74px 0 var(--cyan); }
.wireframe-cube::after { width:2px; height:28px; right:0; top:0; transform:rotate(-45deg); box-shadow: -74px 0 0 var(--cyan); }
@keyframes cube { 50% { transform: rotate(205deg) skew(-12deg) scale(1.2); } }
.badge { left: 44vw; top: 112vh; display:grid; place-items:center; width:82px; height:82px; border-radius:50%; background: repeating-conic-gradient(var(--pink) 0 10deg,var(--yellow) 10deg 20deg); border:3px solid #fff; color:#000; font:900 17px/1 Arial; text-align:center; transform:rotate(8deg); }
.skull { right: 33vw; top: 95vh; font-size: 60px; color: var(--acid); text-shadow: 0 0 12px var(--acid); animation: bob 1.5s ease-in-out infinite; }
.cursor-ghost { left: 64vw; top: 12vh; font-size: 70px; color: white; text-shadow: 5px 5px 0 #000; transform: rotate(-20deg); animation: cursorGhost 4s linear infinite; }
@keyframes cursorGhost { 25% { translate: 30px 80px; } 50% { translate: -40px 130px; } 75% { translate: 80px 20px; } }

.under-construction { position: absolute; left: 50%; top: 140vh; transform: translateX(-50%) rotate(-2deg); z-index: 10; padding: 12px 18px; background: repeating-linear-gradient(135deg,#ffd400 0 18px,#111 18px 36px); color: #fff; border: 4px solid #fff; box-shadow: 8px 8px 0 #000; font-weight: 900; white-space: nowrap; text-shadow: 2px 2px 0 #000; }

.popup-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
.virus-popup { position: absolute; width: min(430px, 92vw); pointer-events: auto; box-shadow: 9px 9px 0 rgba(0,0,0,.75), 0 0 35px rgba(255,0,40,.6); }
.warning-title { background: linear-gradient(90deg,#7b0000,#ff1515 70%,#7b0000); }
.virus-content { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; padding: 17px; background: #dedede; }
.warning-icon { display: grid; place-items:center; width: 64px; height: 64px; border-radius: 50%; background: #ffea00; border: 5px solid #000; font: 900 45px/1 Arial; }
.virus-content h2 { margin: 0 0 8px; color: #d40000; font: 900 19px/1.05 Arial; }
.virus-content p { margin: 4px 0; font: 12px Arial; }
.virus-actions { display: flex; gap: 9px; justify-content: flex-end; padding: 10px; background: #c0c0c0; border-top: 2px solid #777; }
.popup-disclaimer { padding: 3px 7px 5px; background:#000; color:#00ff5a; font:10px monospace; text-align:center; }

.glitch { animation: glitch .22s steps(2) 8; }
@keyframes glitch {
  0% { transform: translate(0) skew(0); filter: hue-rotate(0); }
  25% { transform: translate(8px,-3px) skew(4deg); filter: hue-rotate(80deg); }
  50% { transform: translate(-9px,4px) skew(-5deg); filter: hue-rotate(180deg); }
  75% { transform: translate(4px,2px) skew(2deg); filter: invert(.2) hue-rotate(250deg); }
}

@media (max-width: 760px) {
  .status { display: none; }
  .topbar, footer { grid-template-columns: 1fr auto; }
  footer span:nth-child(2) { display: none; }
  .desktop { min-height: 220vh; }
  .hero { width: 92vw; margin-top: 7vh; }
  .floating-window { left: 5vw !important; width: 88vw; transform: none; }
  .terminal-window { top: 82vh !important; }
  .hit-counter { top: 118vh !important; }
  .ad-window { top: 134vh !important; }
  .guestbook { top: 166vh !important; }
  .floating-junk { opacity: .75; }
  .w1 { top: 61vh; }
  .w2 { top: 126vh; }
  .under-construction { top: 208vh; font-size: 11px; }
  .wireframe-cube, .badge, .floppy, .eyeball { display:none; }
}

/* --- MAXIMUM ANNOYANCE PACK ------------------------------------------------ */
.drag-handle { touch-action: none; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none !important; }

.gif-zoo .gif {
  position: absolute;
  z-index: 12;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 #000);
}
.g-new { left: 20vw; top: 42vh; transform: rotate(-8deg) scale(1.25); }
.g-flame { right: 3vw; top: 83vh; transform: scale(1.5); }
.g-mail { left: 8vw; top: 136vh; transform: rotate(7deg) scale(1.35); }
.g-at { right: 24vw; top: 151vh; transform: rotate(-10deg) scale(1.4); }
.g-construct { left: 57vw; top: 124vh; transform: rotate(4deg) scale(1.1); }
.g-hazard { left: 33vw; top: 93vh; transform: rotate(-12deg) scale(1.6); }

.old-web-box {
  position: absolute;
  z-index: 14;
  left: 19vw;
  top: 124vh;
  width: min(430px, 70vw);
  padding: 9px;
  color: #ffff00;
  background: #000080;
  border: 4px ridge #d6d6d6;
  font: 900 11px/1.5 "Comic Sans MS", "Courier New", monospace;
  transform: rotate(-2deg);
  box-shadow: 8px 8px 0 #000;
}
.old-web-box a { color: #00ffff; text-decoration: underline; }
.old-web-box a:visited { color: #ff00ff; }
.blink-hard { color: #ff0; font-size: 18px; text-align: center; animation: hardBlink .35s steps(1) infinite; }
@keyframes hardBlink { 50% { opacity: 0; color: #f00; } }

.legacy-marquee {
  position: absolute;
  z-index: 13;
  height: 34px;
  padding: 5px 0;
  overflow: hidden;
  border: 3px ridge #fff;
  color: #fff;
  background: #ff00b7;
  font: 900 18px/1.1 "Comic Sans MS", Arial, sans-serif;
  text-shadow: 2px 2px 0 #000;
}
.legacy-marquee img { height: 25px; vertical-align: middle; image-rendering: pixelated; }
.m1 { left: 0; top: 46vh; width: 100%; transform: rotate(-1deg); }
.m2 { left: 7vw; top: 107vh; width: 84vw; height: 46px; background: #000; color: #00ff00; border-color: #00ff00; }
.m3 { position: fixed; right: 0; top: 18vh; width: 58px; height: 58vh; background: #330066; color: #ffff00; z-index: 7000; text-align: center; font-size: 13px; }

.diagonal-ad {
  position: fixed;
  z-index: 6500;
  left: -12vw;
  width: 124vw;
  padding: 6px 0;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  font: 900 15px/1 Arial, sans-serif;
  letter-spacing: 3px;
  border: 3px solid #fff;
  box-shadow: 0 0 20px #000;
  text-shadow: 2px 2px 0 #000;
}
.ad-a { top: 29vh; color: #fff; background: repeating-linear-gradient(90deg,#ff0000 0 25px,#ffff00 25px 50px); transform: rotate(5deg); animation: adFlash .45s steps(1) infinite; }
.ad-b { top: 72vh; color: #00ff00; background: #000; transform: rotate(-4deg); border-color: #00ff00; animation: adFlash .7s steps(1) infinite reverse; }
@keyframes adFlash { 50% { filter: invert(1) hue-rotate(120deg); } }

.side-banner {
  position: fixed;
  z-index: 6000;
  top: 47vh;
  width: 82vh;
  height: 24px;
  padding: 3px;
  overflow: hidden;
  white-space: nowrap;
  color: #000;
  background: #00ffff;
  border: 2px solid #000;
  font: 900 12px/1.2 Arial, sans-serif;
  pointer-events: none;
}
.left-side { left: -39vh; transform: rotate(90deg); }
.right-side { right: -39vh; transform: rotate(-90deg); background: #ff00ff; }

.random-bullshit {
  position: absolute;
  z-index: 9;
  width: 110px;
  min-height: 80px;
  display: grid;
  place-items: center;
  padding: 8px;
  color: #fff;
  text-align: center;
  font: 900 18px/.95 Impact, Arial, sans-serif;
  border: 5px outset #ddd;
  box-shadow: 7px 7px 0 #000;
  text-shadow: 2px 2px 0 #000;
  animation: rbWobble 1.2s ease-in-out infinite alternate;
}
.rb1 { left: 2vw; top: 72vh; background: #00a800; transform: rotate(-10deg); }
.rb2 { right: 18vw; top: 88vh; background: #ff0000; transform: rotate(7deg); }
.rb3 { left: 56vw; top: 102vh; background: #0000ff; transform: rotate(-5deg); }
.rb4 { left: 4vw; top: 153vh; background: #ff00c8; transform: rotate(12deg); }
@keyframes rbWobble { to { translate: 4px -7px; scale: 1.06; } }

.junk-popup {
  position: fixed;
  pointer-events: auto;
  color: #000;
  box-shadow: 9px 9px 0 rgba(0,0,0,.8), 0 0 30px rgba(0,255,255,.55);
}
.junk-title { background: linear-gradient(90deg,#650067,#ff00e6,#650067); }
.junk-popup-body {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 100px;
  padding: 10px;
  background: repeating-linear-gradient(135deg,#ffff00 0 8px,#ff9d00 8px 16px);
  font-family: Arial, sans-serif;
}
.junk-popup-body img { max-width: 72px; max-height: 68px; image-rendering: pixelated; }
.junk-popup-body strong { display: block; color: #f00; font: 900 18px/1 Arial, sans-serif; text-shadow: 1px 1px #fff; }
.junk-popup-body p { margin: 7px 0 0; font: 900 12px/1.25 Arial, sans-serif; }
.junk-popup-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: #c0c0c0; }
.tiny-lie { display: block; padding: 2px 6px 5px; background: #000; color: #0f0; font: 8px monospace; }

.cursor-trail {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  color: #ffff00;
  font: 900 19px/1 Arial, sans-serif;
  text-shadow: 0 0 5px #ff00ff, 2px 2px 0 #00ffff;
  animation: trailDie .85s ease-out forwards;
}
@keyframes trailDie {
  0% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(var(--drift), 44px) scale(.1) rotate(240deg); }
}

.runtime-junk {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  color: #fff200;
  font-family: Impact, "Arial Black", sans-serif;
  -webkit-text-stroke: 1px #000;
  text-shadow: 3px 3px 0 #ff00cc, 6px 6px 0 #00ffff;
  animation: runtimeJunk 2s linear infinite alternate;
}
@keyframes runtimeJunk {
  from { translate: -9px -7px; filter: hue-rotate(0deg); }
  to { translate: 13px 11px; filter: hue-rotate(240deg); }
}

/* Make the desktop longer so all the garbage has somewhere to exist. */
.desktop { min-height: 195vh; }
.under-construction { top: 179vh; }

@media (max-width: 760px) {
  .m3, .side-banner { display: none; }
  .diagonal-ad { font-size: 10px; }
  .old-web-box { left: 4vw; top: 181vh; width: 92vw; }
  .gif-zoo .gif { opacity: .8; }
  .g-new { left: 5vw; top: 63vh; }
  .g-flame { right: 2vw; top: 154vh; }
  .g-mail { left: 3vw; top: 211vh; }
  .g-at { right: 2vw; top: 196vh; }
  .g-construct { left: 28vw; top: 222vh; }
  .g-hazard { left: 50vw; top: 118vh; }
  .m1 { top: 73vh; }
  .m2 { top: 174vh; }
  .desktop { min-height: 255vh; }
  .under-construction { top: 238vh; }
  .rb1 { top: 103vh; }
  .rb2 { top: 145vh; right: 3vw; }
  .rb3 { top: 202vh; left: 53vw; }
  .rb4 { top: 228vh; left: 4vw; }
}

/* --- SIGNAL CORRUPTION + MEME INFESTATION --------------------------------- */
.meme-gif {
  max-width: 230px;
  max-height: 190px;
  border: 3px ridge #fff;
  background: #000;
  box-shadow: 7px 7px 0 #000, 0 0 18px #ff00ff;
}
.meme1 { left: 2vw; top: 29vh; width: 175px; transform: rotate(-7deg); }
.meme2 { right: 2vw; top: 48vh; width: 220px; transform: rotate(5deg); }
.meme3 { left: 58vw; top: 145vh; width: 210px; transform: rotate(-4deg); }
.meme4 { left: 26vw; top: 160vh; width: 205px; transform: rotate(8deg); }
.meme5 { left: 68vw; top: 88vh; width: 145px; transform: rotate(-12deg) scale(.9); }
.meme6 { left: 8vw; top: 169vh; width: 180px; transform: rotate(4deg); }

.sticker-wall { position:absolute; inset:0; z-index:11; pointer-events:none; }
.sticker {
  position:absolute; display:grid; place-items:center; min-width:90px; min-height:45px; padding:7px 10px;
  border:4px outset #d6d6d6; background:#000080; color:#fff; text-align:center;
  font:900 11px/1.05 "Arial Black", Arial, sans-serif; text-shadow:2px 2px #000;
  box-shadow:6px 6px 0 #000; animation: stickerPulse 1.1s steps(2) infinite alternate;
}
.st1 { left:46vw; top:14vh; background:#ff00bf; transform:rotate(-5deg); }
.st2 { left:15vw; top:56vh; background:#008000; transform:rotate(7deg); }
.st3 { right:12vw; top:35vh; background:#ff5a00; transform:rotate(-9deg); }
.st4 { left:43vw; top:93vh; background:#5200a8; transform:rotate(4deg); }
.st5 { left:3vw; top:98vh; background:#0044aa; transform:rotate(-3deg); }
.st6 { right:4vw; top:126vh; background:#a80000; transform:rotate(8deg); }
.st7 { left:35vw; top:174vh; background:#006d68; transform:rotate(-6deg); }
.st8 { right:22vw; top:178vh; background:#888000; transform:rotate(5deg); }
@keyframes stickerPulse { to { scale:1.08; filter:saturate(2) contrast(1.4); } }

.fake-browser-chrome {
  position:absolute; left:9vw; top:188vh; width:min(760px,82vw); min-height:64px; z-index:15;
  padding:7px; color:#000; background:#c0c0c0; border:4px outset #e8e8e8; box-shadow:9px 9px 0 #000;
  font:11px "MS Sans Serif",Arial,sans-serif; transform:rotate(1deg);
}
.fake-browser-chrome span { display:inline-block; margin:0 4px 6px 0; padding:4px 8px; border:2px outset #eee; background:#c0c0c0; }
.fake-browser-chrome b { margin-right:5px; }
.fake-browser-chrome em { display:inline-block; width:70%; padding:3px 5px; background:#fff; border:2px inset #aaa; font-style:normal; overflow:hidden; white-space:nowrap; }

.broken-image-field {
  position:absolute; left:61vw; top:197vh; z-index:12; width:260px; padding:8px; background:#fff; color:#000;
  border:3px ridge #ccc; font:11px/1.7 "Times New Roman",serif; transform:rotate(-4deg); box-shadow:6px 6px 0 #000;
}
.broken-image-field div { border-bottom:1px dotted #888; }

.dvd-bouncer {
  position:fixed; left:0; top:0; z-index:5800; width:88px; height:50px; display:grid; place-items:center;
  pointer-events:none; color:#fff; background:#111; border:3px solid #0ff; text-align:center;
  font:900 14px/.9 Impact,Arial,sans-serif; text-shadow:2px 2px #f0f; box-shadow:0 0 14px #0ff;
  will-change:transform;
}

.glitch-tear {
  position:fixed; left:0; width:100vw; z-index:9990; pointer-events:none; opacity:0;
  mix-blend-mode:screen; backdrop-filter:hue-rotate(90deg) contrast(1.8) saturate(2);
  background:repeating-linear-gradient(90deg,rgba(255,0,255,.25) 0 9px,rgba(0,255,255,.25) 9px 17px,transparent 17px 31px);
}
.tear-a { top:var(--tear-y,20vh); height:var(--tear-h,7vh); }
.tear-b { top:62vh; height:3vh; }
.tear-c { top:83vh; height:1.5vh; }
body.signal-glitch .tear-a { opacity:.95; transform:translateX(var(--tear-shift,20px)); }
body.signal-glitch .tear-b { opacity:.75; transform:translateX(calc(var(--tear-shift,20px) * -0.45)); }
body.signal-glitch .tear-c { opacity:.6; transform:translateX(calc(var(--tear-shift,20px) * .7)); }

.rgb-ghost {
  position:fixed; inset:0; z-index:9975; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,rgba(255,0,0,.08),transparent 35%,rgba(0,255,255,.08));
  mix-blend-mode:screen;
}
body.signal-glitch .rgb-ghost { opacity:1; animation:rgbGhost .12s steps(2) infinite; }
@keyframes rgbGhost { 50% { transform:translateX(9px); filter:hue-rotate(180deg); } }

body.signal-glitch main,
body.signal-glitch header,
body.signal-glitch footer { filter:contrast(1.3) saturate(1.8); text-shadow:-2px 0 rgba(255,0,0,.5),2px 0 rgba(0,255,255,.55); }
body.signal-glitch .desktop { transform:translateX(var(--tear-shift,0px)); }
body.hard-desync { animation:hardDesync .13s steps(2) 2; }
@keyframes hardDesync {
  0% { filter:none; transform:none; }
  33% { filter:invert(1) hue-rotate(130deg) contrast(2); transform:translate(8px,-2px) skewX(2deg); }
  66% { filter:saturate(4) contrast(2); transform:translate(-7px,3px) skewX(-3deg); }
}

.signal-loss {
  position:fixed; inset:0; z-index:100000; display:grid; place-items:center; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(0deg,#111 0 2px,#222 2px 4px), #111;
  transition:none;
}
.signal-loss span { color:#fff; background:#000; padding:10px 18px; border:2px solid #fff; font:900 32px monospace; letter-spacing:6px; }
.signal-loss.show { opacity:.93; animation:signalJitter .08s steps(2) infinite; }
@keyframes signalJitter { 50% { transform:translate(4px,-3px); filter:invert(.08); } }

.runtime-meme {
  position:fixed; z-index:7200; max-height:260px; object-fit:contain; image-rendering:auto; pointer-events:none;
  border:4px ridge #fff; box-shadow:9px 9px 0 #000,0 0 30px #ff00ff;
  animation:runtimeMeme .45s steps(2) infinite alternate;
}
@keyframes runtimeMeme { to { translate:7px -4px; filter:hue-rotate(35deg) saturate(1.7); } }

.virus-content { background:linear-gradient(#ededed,#cfcfcf); }
.virus-content .alert-code { font:10px "Courier New",monospace; color:#222; background:#fff; border:1px inset #aaa; padding:4px; }
.virus-actions { justify-content:flex-end; }
.popup-disclaimer { display:none !important; }
.tiny-lie { display:none !important; }

/* keep the content field larger for the extra garbage */
.desktop { min-height:225vh; }
.under-construction { top:213vh; }

@media (max-width:760px) {
  .meme-gif { max-width:150px; opacity:.86; }
  .meme1 { left:1vw; top:88vh; width:135px; }
  .meme2 { right:1vw; top:135vh; width:145px; }
  .meme3 { left:3vw; top:229vh; width:140px; }
  .meme4 { right:1vw; left:auto; top:245vh; width:140px; }
  .meme5,.meme6,.fake-browser-chrome,.broken-image-field { display:none; }
  .sticker { scale:.8; transform-origin:center; }
  .st1 { top:56vh; left:48vw; }
  .st2 { top:112vh; left:5vw; }
  .st3 { top:145vh; right:3vw; }
  .st4 { top:183vh; left:50vw; }
  .st5 { top:207vh; }
  .st6 { top:238vh; }
  .st7,.st8 { display:none; }
  .dvd-bouncer { width:68px; height:40px; font-size:11px; }
  .desktop { min-height:290vh; }
  .under-construction { top:274vh; }
}


/* PolderHub portal advertisement */
.polderhub-mega-ad {
  position: relative;
  display: grid;
  gap: 5px;
  width: min(560px, 96%);
  margin: 18px auto 14px;
  padding: 16px 18px 15px;
  overflow: hidden;
  border: 4px solid #ff7a00;
  outline: 3px ridge #efefef;
  color: #f7f7f7;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(255,122,0,.06) 49% 51%, transparent 51%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #050505 0%, #161616 62%, #211006 100%);
  box-shadow: 6px 6px 0 #000, 0 0 25px rgba(255,122,0,.7), inset 0 0 30px rgba(255,122,0,.08);
  text-align: left;
  text-decoration: none;
  transform: rotate(.55deg);
  cursor: pointer;
  isolation: isolate;
}
.polderhub-mega-ad::before {
  content: "";
  position: absolute;
  inset: -50% -10%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 40%, rgba(255,122,0,.16) 48%, rgba(255,185,80,.34) 50%, rgba(255,122,0,.12) 52%, transparent 60%);
  animation: polderhubSweep 2.4s linear infinite;
}
.polderhub-mega-ad::after {
  content: "LIVE • VIDEO • LIVE • VIDEO • LIVE • VIDEO";
  position: absolute;
  right: -37px;
  top: 28px;
  width: 180px;
  padding: 4px 0;
  color: #0d0d0d;
  background: #ff7a00;
  font: 900 9px/1 "Courier New", monospace;
  letter-spacing: 1px;
  text-align: center;
  transform: rotate(36deg);
  box-shadow: 0 2px 0 #000;
}
.polderhub-mega-ad__eyebrow {
  color: #ff9a3d;
  font: 900 10px/1.2 "Courier New", monospace;
  letter-spacing: 2px;
}
.polderhub-mega-ad__brand {
  color: #f4f4f4;
  font: 900 clamp(34px, 7vw, 62px)/.9 Arial, Helvetica, sans-serif;
  letter-spacing: -3px;
  text-shadow: 3px 3px 0 #000;
}
.polderhub-mega-ad__brand span { color: #ff7a00; }
.polderhub-mega-ad__copy {
  color: #b9b9b9;
  font: 700 11px/1.3 "Courier New", monospace;
  letter-spacing: .5px;
}
.polderhub-mega-ad__cta {
  justify-self: start;
  margin-top: 5px;
  padding: 8px 12px;
  border: 2px solid #ff9a3d;
  color: #090909;
  background: #ff7a00;
  box-shadow: 3px 3px 0 #000;
  font: 900 12px/1 "Courier New", monospace;
  animation: polderhubBlink 1.1s steps(1) infinite;
}
.polderhub-mega-ad:hover,
.polderhub-mega-ad:focus-visible {
  filter: brightness(1.18);
  transform: rotate(-.35deg) scale(1.02);
  box-shadow: 8px 8px 0 #000, 0 0 38px rgba(255,122,0,.95), inset 0 0 35px rgba(255,122,0,.14);
}
@keyframes polderhubSweep {
  from { transform: translateX(-65%); }
  to { transform: translateX(65%); }
}
@keyframes polderhubBlink {
  50% { color: #fff; background: #bd4e00; }
}
@media (max-width: 760px) {
  .polderhub-mega-ad { width: 100%; padding: 13px 14px; }
  .polderhub-mega-ad__brand { letter-spacing: -2px; }
  .polderhub-mega-ad::after { display: none; }
}