:root {
  color-scheme: dark;
  --signal-green: #9dff38;
  --signal-orange: #ff861c;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100svh;
  overflow: hidden;
}

.signal-screen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.signal-noise,
.signal-flash,
.lightning-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.signal-noise {
  z-index: -1;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(157, 255, 56, 0.018) 3px 4px
  );
  opacity: 0.38;
  animation: screen-noise 0.18s steps(2, end) infinite;
}

.signal-flash {
  z-index: 4;
  background: rgba(157, 255, 56, 0.055);
  opacity: 0;
  mix-blend-mode: screen;
}

.signal-flash.is-active {
  animation: ambient-flash 160ms steps(1, end);
}

.question-signal {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(128px, 24vw, 260px);
  aspect-ratio: 1;
  color: var(--signal-orange);
  text-decoration: none;
  outline: none;
  filter: drop-shadow(0 0 6px rgba(255, 134, 28, 0.58));
}

.question-signal::before,
.question-signal::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 74%;
  height: 74%;
  border: 1px solid rgba(157, 255, 56, 0.08);
  content: "";
  transform: translate(-50%, -50%);
  animation: signal-frame 2.8s steps(1, end) infinite;
}

.question-signal::after {
  width: 96%;
  height: 96%;
  border-color: rgba(255, 134, 28, 0.06);
  animation-delay: -1.1s;
}

.question-signal:focus-visible::before {
  border-color: rgba(157, 255, 56, 0.8);
  box-shadow: 0 0 28px rgba(157, 255, 56, 0.22);
}

.question-signal span,
.question-signal span::before,
.question-signal span::after {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(7rem, 24vw, 18rem);
  line-height: 1;
}

.question-signal span {
  position: relative;
  color: var(--signal-orange);
  text-shadow:
    7px 0 0 rgba(157, 255, 56, 0.34),
    0 0 18px rgba(255, 134, 28, 0.55),
    0 0 55px rgba(255, 134, 28, 0.18);
  animation: question-corrupt 1.32s steps(1, end) infinite;
}

.question-signal span::before,
.question-signal span::after {
  position: absolute;
  inset: 0;
  content: attr(data-symbol);
  pointer-events: none;
}

.question-signal span::before {
  color: var(--signal-green);
  clip-path: inset(9% 0 58% 0);
  opacity: 0.75;
  transform: translate(-10px, 2px);
  animation: question-slice-top 0.77s steps(1, end) infinite;
}

.question-signal span::after {
  color: #ff4d00;
  clip-path: inset(62% 0 5% 0);
  opacity: 0.8;
  transform: translate(12px, -2px);
  animation: question-slice-bottom 0.91s steps(1, end) infinite;
}

.lightning-field {
  z-index: 1;
}

.lightning {
  position: absolute;
  width: var(--bolt-width, 5px);
  height: var(--bolt-height, 62px);
  background: var(--signal-green);
  clip-path: polygon(42% 0, 100% 0, 63% 40%, 95% 40%, 8% 100%, 37% 53%, 0 53%);
  opacity: 0;
  filter:
    drop-shadow(0 0 3px #baff6d)
    drop-shadow(0 0 9px rgba(157, 255, 56, 0.85));
  transform: rotate(var(--bolt-rotation, 0deg)) scaleY(0.7);
  transform-origin: top;
}

.lightning.is-active {
  animation: lightning-strike var(--bolt-duration, 210ms) steps(1, end);
}

@keyframes screen-noise {
  0% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

@keyframes ambient-flash {
  0%, 100% { opacity: 0; }
  18% { opacity: 1; }
  42% { opacity: 0.16; }
  60% { opacity: 0.72; }
}

@keyframes signal-frame {
  0%, 17%, 22%, 48%, 54%, 81%, 87%, 100% { opacity: 0.24; transform: translate(-50%, -50%); }
  18% { opacity: 0.7; transform: translate(-54%, -49%) skewX(5deg); }
  20% { opacity: 0.08; transform: translate(-45%, -51%) skewX(-7deg); }
  49% { opacity: 0.55; transform: translate(-48%, -54%) scaleX(1.08); }
  51% { opacity: 0.12; transform: translate(-53%, -47%) scaleY(0.92); }
  82% { opacity: 0.62; transform: translate(-55%, -50%); }
  85% { opacity: 0.08; transform: translate(-46%, -50%); }
}

@keyframes question-corrupt {
  0%, 10%, 18%, 32%, 39%, 56%, 66%, 79%, 88%, 100% { transform: translate(0) scale(1); filter: none; }
  11% { transform: translate(-12px, 2px) scaleX(1.08); filter: brightness(1.7); }
  13% { transform: translate(14px, -3px) skewX(-5deg); }
  16% { transform: translate(-4px, 1px) scaleY(0.94); }
  33% { transform: translate(11px, 1px) skewY(3deg); filter: hue-rotate(25deg); }
  35% { transform: translate(-15px, -2px) scaleX(0.88); }
  37% { transform: translate(5px, 3px) scaleX(1.04); }
  57% { transform: translate(-9px, 0) skewX(7deg); filter: contrast(1.8); }
  60% { transform: translate(13px, -3px) skewX(-4deg); }
  63% { transform: translate(-3px, 2px); }
  80% { transform: translate(16px, 1px) scaleY(0.86); }
  83% { transform: translate(-13px, -1px) scaleX(1.12); filter: brightness(1.5); }
  86% { transform: translate(4px, 2px); }
}

@keyframes question-slice-top {
  0%, 14%, 23%, 45%, 55%, 72%, 83%, 100% { clip-path: inset(9% 0 58% 0); transform: translate(-10px, 2px); }
  15% { clip-path: inset(35% 0 43% 0); transform: translate(18px, -2px); }
  19% { clip-path: inset(4% 0 72% 0); transform: translate(-16px, 4px); }
  46% { clip-path: inset(58% 0 17% 0); transform: translate(14px, 1px); }
  51% { clip-path: inset(21% 0 55% 0); transform: translate(-20px, -3px); }
  73% { clip-path: inset(70% 0 4% 0); transform: translate(17px, 2px); }
  78% { clip-path: inset(43% 0 31% 0); transform: translate(-12px, 0); }
}

@keyframes question-slice-bottom {
  0%, 18%, 29%, 48%, 60%, 78%, 89%, 100% { clip-path: inset(62% 0 5% 0); transform: translate(12px, -2px); }
  19% { clip-path: inset(19% 0 56% 0); transform: translate(-17px, 3px); }
  25% { clip-path: inset(73% 0 2% 0); transform: translate(20px, -1px); }
  49% { clip-path: inset(44% 0 32% 0); transform: translate(-14px, -3px); }
  55% { clip-path: inset(8% 0 69% 0); transform: translate(16px, 2px); }
  79% { clip-path: inset(29% 0 47% 0); transform: translate(-21px, 1px); }
  85% { clip-path: inset(78% 0 0 0); transform: translate(12px, -2px); }
}

@keyframes lightning-strike {
  0%, 100% { opacity: 0; transform: rotate(var(--bolt-rotation, 0deg)) scaleY(0.45); }
  8% { opacity: 1; transform: rotate(var(--bolt-rotation, 0deg)) scaleY(1); }
  22% { opacity: 0.18; }
  38% { opacity: 0.92; }
  54% { opacity: 0; }
  68% { opacity: 0.7; }
}

@media (max-width: 560px) {
  .question-signal span,
  .question-signal span::before,
  .question-signal span::after {
    font-size: clamp(7rem, 38vw, 11rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}