#monitor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

#monitor-layer,
#monitor-layer * {
  box-sizing: border-box;
}

#monitor-root {
  --monitor-base-size: 900px;
  --monitor-scale: 1;
  width: var(--monitor-size, min(44vmin, var(--monitor-base-size)));
  height: var(--monitor-size, min(44vmin, var(--monitor-base-size)));
  position: absolute;
  left: var(--monitor-x, 70vw);
  top: var(--monitor-y, calc(58 * var(--vh, 1vh)));
  transform: translate(-50%, -50%);
}

#bg-monitor {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--monitor-base-size);
  height: var(--monitor-base-size);
  transform: scale(var(--monitor-scale));
  transform-origin: top left;
}

.monitor-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

#monitor-frame {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 10;
}

.monitor-ascii {
  position: absolute;
  left: 18%;
  top: 16%;
  width: 56%;
  height: 52%;
  z-index: 3;
  pointer-events: none;
}

#capsule-mount,
#capsule-mount canvas {
  width: 100%;
  height: 100%;
}

#capsule-mount {
  position: relative;
  z-index: 4;
}

.monitor-debug-rect {
  position: absolute;
  left: 26%;
  top: 23%;
  width: 35%;
  height: 34%;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 45%, rgba(240,248,255,0.95), rgba(190,210,225,0.88) 45%, rgba(150,170,185,0.85) 100%),
    linear-gradient(180deg, rgba(230,240,248,0.92), rgba(190,210,228,0.88));
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.35),
    inset 0 0 120px rgba(0,0,0,0.25),
    0 0 18px rgba(170,210,255,0.18);
  animation:
    crtFlicker 2.2s infinite steps(1),
    crtJitter 0.18s infinite steps(2);
}

.monitor-debug-rect::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), rgba(0,0,0,0.35) 85%),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.14) 0px,
      rgba(0,0,0,0.14) 1px,
      rgba(255,255,255,0.04) 2px,
      rgba(255,255,255,0.04) 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.55;
  animation: scanRoll 7s linear infinite;
}

.monitor-debug-rect::after {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,0.06) 0 1px,
      rgba(0,0,0,0.06) 1px 2px
    ),
    linear-gradient(
      90deg,
      rgba(255,60,60,0.10),
      rgba(255,255,255,0.02),
      rgba(90,255,140,0.10),
      rgba(255,255,255,0.02),
      rgba(120,170,255,0.12)
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255,255,255,0.10) 48%,
      transparent 52%,
      transparent 100%
    );
  background-size:
    180px 180px,
    100% 100%,
    100% 100%;
  mix-blend-mode: overlay;
  opacity: 0.55;
  animation:
    noiseMove 0.35s infinite steps(2),
    chromaSplit 2.8s infinite steps(1),
    tearJump 3.6s infinite steps(1);
}

#debug-rect {
  position: absolute;
  left: 63.2%;
  top: 14.8%;
  transform: translate(-50%, -50%) scale(1.5);
  width: 64px;
  height: 47px;
  background: #0b2f1e;
  border: 2px solid rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

#debug-rect .debug-text {
  font-family: 'VT323', monospace;
  font-size: 22px;
  line-height: 1;
  color: #a9b2ab;
  text-shadow: 0 0 2px rgba(255,255,255,0.15);
  display: inline-block;
  white-space: nowrap;
}

#debug-rect .debug-text .char {
  position: relative;
  display: inline-block;
  margin-right: -4px;
}

#debug-rect .debug-text .char.i {
  top: 5px;
}

#debug-rect .debug-text .char.c {
  top: 1px;
}

#debug-rect .debug-text .char.m {
  top: -3px;
}

#mini-monitor {
  position: absolute;
  left: 64.5%;
  top: 31.65%;
  transform: translate(-50%, -50%) scale(1.5);
  width: 40px;
  height: 29px;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

#mini-monitor img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: rotate(-6deg) scale(1.15);
  transform-origin: center;
  filter: brightness(0.95) contrast(1.05);
}

#signal-window {
  position: absolute;
  left: 65.65%;
  top: 25%;
  transform: translate(-50%, -50%) scale(1.5);
  width: 48px;
  height: 53px;
  background: #000;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#signal-bg {
  width: 100%;
  height: 100%;
  display: block;
}

#signal-window::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 255, 120, 0.18) 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 255, 160, 0.35),
      rgba(0, 0, 0, 0.9) 75%
    );
  background-size:
    100% 4px,
    100% 100%;
  animation: signalScan 4.5s linear infinite;
  opacity: 1;
  transform-origin: center;
  transform: rotate(-9.5deg) skewY(-1deg) scaleX(0.985);
}

#signal-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode: overlay;
  opacity: 0.35;
}

@keyframes crtFlicker {
  0%, 100% { opacity: 0.96; }
  7% { opacity: 0.88; }
  8% { opacity: 0.98; }
  52% { opacity: 0.92; }
  53% { opacity: 0.80; }
  54% { opacity: 0.96; }
  92% { opacity: 0.90; }
  93% { opacity: 0.99; }
}

@keyframes crtJitter {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1px, 0px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(0px, 1px); }
  100% { transform: translate(0,0); }
}

@keyframes scanRoll {
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}

@keyframes noiseMove {
  0% { transform: translate(0,0); }
  50% { transform: translate(-8px, 6px); }
  100% { transform: translate(6px, -8px); }
}

@keyframes chromaSplit {
  0%, 100% { transform: translateX(0); filter: saturate(1.05); }
  20% { transform: translateX(-2px); filter: saturate(1.25); }
  21% { transform: translateX(2px); }
  55% { transform: translateX(-1px); filter: saturate(1.15); }
  56% { transform: translateX(1px); }
}

@keyframes tearJump {
  0%, 100% { background-position: 0 0, 0 0, 0 55%; opacity: 0.50; }
  15% { background-position: 0 0, 0 0, 0 20%; opacity: 0.65; }
  16% { background-position: 0 0, 0 0, 0 78%; opacity: 0.55; }
  45% { background-position: 0 0, 0 0, 0 35%; opacity: 0.70; }
  46% { background-position: 0 0, 0 0, 0 62%; opacity: 0.55; }
}

@keyframes signalScan {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 120px, 0 0; }
}