:root {
  --bg: #020504;
  --matrix: #47ff8a;
  --matrix-dim: #0b2f1b;
  --fire-core: #ffd87a;
  --fire-mid: #ff8d1f;
  --fire-hot: #ff4c14;
  --text: #e8fff0;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 50% 80%, #062015 0%, var(--bg) 55%);
}

body.glitch-burst {
  animation: frame-jolt 95ms steps(1, end) 1;
}

.vhs-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(90deg, rgba(255, 0, 90, 0.015) 0%, rgba(0, 220, 255, 0.02) 100%);
  mix-blend-mode: screen;
  animation: vhs-shift 6.2s steps(1, end) infinite;
}

#matrix-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.52;
}

.broadcast-scanline {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.24;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(147, 255, 191, 0.08) 0 1px,
      rgba(2, 10, 6, 0.02) 1px 3px
    ),
    linear-gradient(
      180deg,
      rgba(8, 18, 11, 0) 0%,
      rgba(92, 255, 153, 0.04) 50%,
      rgba(8, 18, 11, 0) 100%
    );
  animation: broadcast-sweep 5.4s linear infinite;
}

.broadcast-scanline.packet-loss {
  transform: translateY(calc(var(--pkt-y, 0) * 1px));
  opacity: calc(0.26 + (var(--pkt-a, 0) * 0.2));
}

.dialup-boot {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.8rem;
  background: rgba(2, 4, 3, 0.92);
  color: #98ffc1;
  font-family: "Courier New", Courier, monospace;
  text-shadow: 0 0 10px rgba(98, 255, 154, 0.3);
  transition: opacity 0.8s ease;
}

.dialup-boot.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.takeover {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: none;
  align-content: center;
  justify-items: center;
  pointer-events: none;
}

.takeover.is-active {
  display: grid;
}

.defacement-overlay {
  background: rgba(5, 0, 8, 0.93);
  color: #ffd7f7;
  text-shadow:
    0 0 12px rgba(255, 92, 203, 0.4),
    -1px 0 rgba(255, 82, 173, 0.25),
    1px 0 rgba(130, 255, 204, 0.25);
  animation: deface-flicker 0.14s steps(1, end) infinite;
}

.deface-title {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(1.35rem, 3.4vw, 3.4rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.deface-sub {
  margin: 0.7rem 0 0.5rem;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
}

.deface-hash {
  margin: 0.4rem 0 0;
  width: min(88vw, 760px);
  max-height: 42vh;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.68rem, 0.95vw, 0.88rem);
  line-height: 1.28;
  color: rgba(255, 200, 244, 0.92);
}

.bsod-overlay {
  background: #001a8c;
  color: #e8edff;
  font-family: "Courier New", Courier, monospace;
  padding: 8vh 6vw;
  align-content: start;
  justify-items: start;
}

.bsod-head {
  margin: 0 0 1rem;
  font-size: clamp(0.9rem, 1.25vw, 1.15rem);
}

.bsod-line {
  margin: 0.32rem 0;
  font-size: clamp(0.8rem, 1.1vw, 1rem);
}

.boot-title {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.84rem, 1.4vw, 1.08rem);
  opacity: 0.9;
}

.boot-lines {
  margin: 0;
  width: min(92vw, 760px);
  min-height: 130px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(118, 255, 169, 0.28);
  background: rgba(5, 20, 11, 0.46);
  color: rgba(199, 255, 219, 0.92);
  font-size: clamp(0.78rem, 1.2vw, 0.96rem);
  line-height: 1.5;
  white-space: pre-wrap;
  box-shadow:
    0 0 24px rgba(52, 255, 138, 0.11),
    inset 0 0 18px rgba(33, 151, 84, 0.12);
}

.content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.retro-taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.45rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  color: #d7f8e7;
  background: linear-gradient(180deg, rgba(68, 90, 105, 0.92) 0%, rgba(48, 66, 78, 0.95) 100%);
  border-top: 1px solid rgba(190, 214, 228, 0.45);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28);
  animation: taskbar-flicker 5.5s steps(1, end) infinite;
}

.taskbar-start,
.taskbar-item,
.taskbar-clock {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.52rem;
  border: 1px solid rgba(24, 40, 51, 0.9);
  background: linear-gradient(180deg, rgba(96, 124, 144, 0.92) 0%, rgba(68, 90, 106, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(220, 237, 248, 0.25);
}

.taskbar-start.taskbar-pressed,
.taskbar-item.taskbar-pressed {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(58, 78, 95, 0.94) 0%, rgba(45, 63, 77, 0.94) 100%);
  box-shadow: inset 0 1px 2px rgba(16, 30, 38, 0.75);
}

.taskbar-start {
  font-weight: 700;
  color: #f2fff7;
}

.taskbar-item {
  opacity: 0.92;
}

.net-item {
  margin-left: auto;
}

.net-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.42rem;
  background: #9cffbe;
  box-shadow: 0 0 8px rgba(143, 255, 183, 0.85);
}

.net-led.blink {
  animation: net-blink 0.62s steps(1, end) infinite;
}

.broadcast-layer {
  position: absolute;
  top: clamp(1rem, 4vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 860px);
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

.broadcast-layer.packet-loss {
  transform: translateX(calc(-50% + (var(--pkt-x, 0) * 1px)));
}

.retro-panels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: auto;
}

.panel-terminal,
.panel-terminal * {
  pointer-events: auto;
}

.retro-panel {
  position: absolute;
  width: min(30vw, 300px);
  min-width: 210px;
  border: 2px solid rgba(178, 193, 209, 0.7);
  background: rgba(15, 22, 28, 0.78);
  color: #d8ffea;
  font-family: "Courier New", Courier, monospace;
  box-shadow:
    0 0 0 1px rgba(23, 35, 44, 0.7),
    0 8px 20px rgba(0, 0, 0, 0.32);
  opacity: 0.82;
  transform: translateY(0);
  transition: transform 220ms ease, opacity 180ms ease;
  pointer-events: none;
}

.retro-panel.is-minimized {
  opacity: 0.3;
  transform: translateY(10px) scale(0.98);
}

.retro-panel.jitter {
  transform: translate(var(--jx, 0), var(--jy, 0));
}

.retro-panel.glitch-flash {
  filter: saturate(1.25) contrast(1.1);
  box-shadow:
    0 0 0 1px rgba(23, 35, 44, 0.7),
    0 8px 20px rgba(0, 0, 0, 0.32),
    -1px 0 rgba(255, 56, 160, 0.24),
    1px 0 rgba(96, 255, 181, 0.24);
}

.panel-status {
  top: 11vh;
  left: min(3vw, 26px);
}

.panel-packet {
  top: 30vh;
  right: min(4vw, 34px);
}

.panel-alert {
  bottom: 18vh;
  left: min(9vw, 100px);
}

.panel-terminal {
  top: 48vh;
  right: min(16vw, 190px);
  width: min(34vw, 360px);
}

.panel-honeypot {
  top: 14vh;
  right: min(22vw, 280px);
  width: min(28vw, 300px);
}

.panel-intrusion {
  bottom: 22vh;
  right: min(3vw, 34px);
  width: min(30vw, 320px);
}

.panel-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.32rem 0.48rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #355f87 0%, #4f84ab 50%, #355f87 100%);
  color: #e9f6ff;
  border-bottom: 1px solid rgba(15, 28, 38, 0.7);
}

.panel-controls {
  opacity: 0.85;
  letter-spacing: 0.1em;
}

.panel-body {
  padding: 0.54rem 0.62rem 0.6rem;
  font-size: 0.76rem;
  line-height: 1.45;
}

.panel-body p {
  margin: 0.2rem 0;
}

.panel-body strong {
  color: #a4ffd1;
}

.terminal-body {
  min-height: 124px;
}

.terminal-theme {
  margin: 0 0 0.36rem;
  display: inline-block;
  padding: 0.1rem 0.36rem;
  border: 1px solid rgba(126, 255, 184, 0.32);
  color: #b7ffd8;
  background: rgba(34, 83, 57, 0.24);
  letter-spacing: 0.08em;
}

.terminal-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0 0 0.42rem;
}

.terminal-switch {
  border: 1px solid rgba(124, 194, 160, 0.45);
  background: rgba(26, 47, 36, 0.72);
  color: #9de4c0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.64rem;
  line-height: 1;
  padding: 0.22rem 0.36rem;
  cursor: pointer;
}

.terminal-switch.is-active {
  color: #ddffe9;
  border-color: rgba(143, 255, 196, 0.72);
  background: rgba(45, 88, 66, 0.9);
  box-shadow: 0 0 8px rgba(109, 255, 178, 0.24);
}

.terminal-lines {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  line-height: 1.34;
  color: #ccffe3;
  max-height: 114px;
  overflow: hidden;
  white-space: pre-wrap;
  text-shadow:
    0 0 6px rgba(100, 255, 168, 0.24),
    -0.55px 0 rgba(255, 79, 170, 0.17),
    0.55px 0 rgba(107, 255, 187, 0.17);
}

.broadcast-label {
  margin: 0;
  font-size: clamp(0.75rem, 1.25vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(170, 255, 198, 0.66);
  text-shadow: 0 0 8px rgba(94, 255, 148, 0.3);
  transition: opacity 120ms ease;
}

.broadcast-label.glitching {
  animation: msg-glitch 220ms steps(1, end) 1;
  opacity: 0.65;
}

.broadcast-message {
  margin: 0.55rem 0 0;
  font-size: clamp(0.9rem, 1.7vw, 1.22rem);
  color: rgba(208, 255, 224, 0.88);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-shadow:
    0 0 8px rgba(95, 255, 150, 0.28),
    -0.7px 0 rgba(255, 72, 166, 0.2),
    0.7px 0 rgba(104, 255, 170, 0.22);
  animation: msg-glitch 2.2s steps(1, end) infinite;
}

.copy {
  position: relative;
  z-index: 4;
  text-align: center;
  margin-top: min(56vh, 480px);
  text-shadow: 0 0 16px rgba(82, 255, 133, 0.3);
}

.copy h1 {
  margin: 0;
  font-size: clamp(1.08rem, 2vw, 1.9rem);
  letter-spacing: 0.08em;
  animation: title-wobble 3.2s steps(1, end) infinite;
}

.copy p {
  margin: 0.38rem 0 0;
  font-size: clamp(0.74rem, 1.05vw, 0.92rem);
  color: #c8ffd7;
  opacity: 0.85;
}

.copy .hackers-unite {
  margin-top: 0.32rem;
  font-size: clamp(0.84rem, 1.45vw, 1.06rem);
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #9dffc0;
  text-shadow: 0 0 12px rgba(98, 255, 153, 0.4);
  animation: unite-matrix-float 2.8s ease-in-out infinite;
}

.bbs-prompt {
  margin-top: 0.46rem;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.64rem, 0.92vw, 0.78rem);
  letter-spacing: 0.04em;
  color: rgba(184, 255, 206, 0.82);
  text-shadow:
    0 0 8px rgba(96, 255, 160, 0.25),
    -0.7px 0 rgba(255, 78, 173, 0.18),
    0.7px 0 rgba(110, 255, 188, 0.2);
}

.prompt-user {
  color: rgba(118, 255, 169, 0.88);
}

.prompt-cmd {
  margin-left: 0.3rem;
}

.prompt-cursor {
  display: inline-block;
  width: 0.64em;
  height: 1.05em;
  margin-left: 0.2rem;
  vertical-align: -0.18em;
  background: rgba(198, 255, 216, 0.88);
  animation: bbs-cursor 0.92s steps(1, end) infinite;
}

.campfire-scene {
  position: absolute;
  bottom: 13vh;
  width: min(28vw, 240px);
  aspect-ratio: 1 / 1.35;
  z-index: 3;
  filter: drop-shadow(0 0 16px rgba(255, 85, 196, 0.45));
}

.campfire-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30%;
  width: 44%;
  height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 65%,
    rgba(255, 190, 236, 0.24) 0%,
    rgba(255, 110, 210, 0.12) 50%,
    rgba(255, 90, 190, 0) 100%
  );
  border-radius: 50%;
  filter: blur(10px);
  animation: heat-wobble 1.35s ease-in-out infinite;
  pointer-events: none;
}

.campfire-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42%;
  width: 34%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(
    to top,
    rgba(100, 100, 100, 0.24) 0%,
    rgba(70, 70, 70, 0.14) 35%,
    rgba(40, 40, 40, 0) 100%
  );
  filter: blur(8px);
  opacity: 0;
  animation: smoke-rise 3.6s ease-in-out infinite;
  pointer-events: none;
}

#campfire-canvas {
  position: absolute;
  inset: 8% 8% 17% 8%;
  width: 84%;
  height: 75%;
  z-index: 2;
  pointer-events: none;
  filter: blur(0.2px) saturate(1.08);
}

.glow {
  position: absolute;
  width: 155%;
  height: 60%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 150, 230, 0.34) 0%,
    rgba(255, 95, 200, 0.18) 45%,
    rgba(230, 70, 180, 0) 75%
  );
  animation: pulse 2.6s ease-in-out infinite;
}

.logs {
  position: absolute;
  bottom: 11%;
  left: 50%;
  width: 74%;
  height: 24%;
  transform: translateX(-50%);
  z-index: 3;
}

.logs-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}


@keyframes pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.84;
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes smoke-rise {
  0% {
    transform: translateX(-50%) translateY(0) scale(0.72);
    opacity: 0;
  }
  18% {
    opacity: 0.24;
  }
  100% {
    transform: translateX(-45%) translateY(-62px) scale(1.16);
    opacity: 0;
  }
}

@keyframes heat-wobble {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.64;
  }
  50% {
    transform: translateX(-50%) scale(1.08, 0.94);
    opacity: 0.86;
  }
}


@keyframes broadcast-sweep {
  0%,
  100% {
    transform: translateY(-2%);
    opacity: 0.15;
  }
  50% {
    transform: translateY(2%);
    opacity: 0.22;
  }
}

@keyframes msg-glitch {
  0%,
  100% {
    transform: translateX(0);
    filter: saturate(1);
  }
  21% {
    transform: translateX(-0.4px);
  }
  22% {
    transform: translateX(0.6px);
  }
  54% {
    transform: translateX(-0.2px);
    filter: saturate(1.15);
  }
  55% {
    transform: translateX(0.3px);
  }
}

@keyframes unite-matrix-float {
  0%,
  100% {
    transform: translateY(-2px);
    opacity: 0.88;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@keyframes bbs-cursor {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes vhs-shift {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.55;
  }
  13% {
    transform: translateX(-0.45px);
  }
  14% {
    transform: translateX(0.55px);
  }
  62% {
    transform: translateX(0.2px);
    opacity: 0.68;
  }
  63% {
    transform: translateX(-0.3px);
  }
  79% {
    transform: translateX(0.7px);
    opacity: 0.74;
  }
  80% {
    transform: translateX(-0.9px);
  }
}

@keyframes net-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.86);
  }
}

@keyframes frame-jolt {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1px, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes title-wobble {
  0%,
  100% {
    transform: translateX(0);
  }
  9% {
    transform: translateX(-0.5px);
  }
  10% {
    transform: translateX(0.8px);
  }
  61% {
    transform: translateX(-0.3px);
  }
  62% {
    transform: translateX(0.35px);
  }
}

@keyframes taskbar-flicker {
  0%,
  100% {
    filter: brightness(1);
  }
  47% {
    filter: brightness(1.05);
  }
  48% {
    filter: brightness(0.92);
  }
  49% {
    filter: brightness(1);
  }
}

@keyframes deface-flicker {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.88;
  }
  46% {
    opacity: 0.95;
  }
  75% {
    opacity: 0.9;
  }
}

@media (max-width: 700px) {
  .retro-panel {
    min-width: 165px;
    width: min(42vw, 220px);
  }

  .panel-terminal {
    right: min(4vw, 20px);
    top: 54vh;
  }

  .panel-honeypot {
    top: 8vh;
    right: min(4vw, 20px);
  }

  .panel-intrusion {
    bottom: 26vh;
    right: min(4vw, 20px);
  }

  .campfire-scene {
    width: min(44vw, 220px);
    bottom: 18vh;
  }

  .copy {
    margin-top: min(62vh, 420px);
  }
}