/* shaymin.net — black background, real ASCII text, CRT glow on top. */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #000;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  overflow: hidden;
  background: #000;
}

.stage {
  position: relative;
  width: min(92vw, 920px);
}

/* CRT scanlines over the ENTIRE screen, not just over the art:
   a fixed overlay, subtle on purpose. Note: dark-only scanlines
   are invisible on a pure black background (black over black),
   so this pattern alternates a dark line and a very faint light
   line in a 4px cycle — the light line is what makes the overlay
   actually show up in the black areas, without stealing the show.
   pointer-events none, so the text underneath is still selectable. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .20) 0px,
    rgba(0, 0, 0, .20) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px,
    rgba(255, 255, 255, .05) 3px,
    rgba(255, 255, 255, .05) 4px
  );
  z-index: 999;
}

/* CRT vignette: edges of the screen a little darker, like a tube TV. */
.stage::before {
  content: "";
  position: absolute;
  inset: -4%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, .55) 100%
  );
  z-index: 2;
}

#ascii {
  margin: 0;
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  /* 120 columns at ~0.6em per character: this size keeps the art at
     most 92vw wide, and at most 16px on a wide screen. */
  font-size: min(16px, 1.28vw);
  line-height: 1.125;
  white-space: pre;
  color: #fff;
  /* Text, so it can be highlighted and copied — do not turn this off. */
  user-select: text;
  -webkit-user-select: text;
  position: relative;
  z-index: 1;
  /* Subtle CRT brightness flicker — small enough to feel alive,
     not so much that it strobes. */
  animation: crt-flicker 4s infinite steps(1);
}

@keyframes crt-flicker {
  0%, 91%, 94%, 100% { opacity: 1; }
  92% { opacity: .96; }
  93% { opacity: .99; }
}

/* CRT glow, per character: the shadow colour follows the character's
   own colour (currentColor), so pink glows pink and green glows green.
   The -1px/+1px magenta/cyan offsets are the RGB split that makes it
   look weirdly 3D, like the CRT effect on the original shaymin.net. */
#ascii span {
  text-shadow:
    -1px 0 rgba(255, 0, 128, .45),
    1px 0 rgba(0, 255, 255, .35),
    0 0 8px currentColor,
    0 0 22px currentColor;
}

#ascii ::selection {
  background: rgba(255, 143, 178, .45);
  color: #fff;
}