:root {
  --bg-1: #0a0a0f;
  --bg-2: #1a0033;
  --bg-3: #001f1a;
  --accent-neon: #6cff4d;
  --accent-alt: #4dd9ff;
  --accent-hot: #ff4dd6;
  --text-main: #fff;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, var(--bg-2) 0%, var(--bg-1) 40%, #000 80%);
  background-color: #000;
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--text-main);
  display: grid;
  place-items: center;
}

/* świecące plamy tła */
.blob {
  position: absolute;
  width: 40vmax;
  height: 40vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  mix-blend-mode: screen;
  animation: floaty 12s infinite ease-in-out;
  z-index: 0;
}
.blob.one {
  background: radial-gradient(circle at 30% 30%, var(--accent-neon) 0%, rgba(0,0,0,0) 70%);
  top: -10vmax;
  left: -10vmax;
  animation-delay: 0s;
}
.blob.two {
  background: radial-gradient(circle at 30% 30%, var(--accent-alt) 0%, rgba(0,0,0,0) 70%);
  bottom: -15vmax;
  right: -10vmax;
  animation-delay: -4s;
}
.blob.three {
  background: radial-gradient(circle at 30% 30%, var(--accent-hot) 0%, rgba(0,0,0,0) 70%);
  bottom: 10vmax;
  left: 20vmax;
  animation-delay: -8s;
}

@keyframes floaty {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(0,-5vmax,0) scale(1.15); }
}

/* szum */
.noise-overlay {
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.05) 0px, rgba(0,0,0,0) 3px);
  mix-blend-mode: soft-light;
  opacity: 0.07;
  pointer-events: none;
  z-index: 10;
}

/* główny napis 173 */
.main-173 {
  position: relative;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--accent-neon);
  text-shadow:
    0 0 10px var(--accent-neon),
    0 0 30px var(--accent-neon),
    0 0 60px var(--accent-neon),
    0 0 90px var(--accent-neon);
  filter: drop-shadow(0 0 15px var(--accent-neon));
  animation: pulseNeon 2.4s infinite;
  z-index: 6;
  font-family: "Inter", system-ui, sans-serif;
}

.main-173 .label-top {
  position: absolute;
  top: -2rem;
  left: 0;
  font-size: .7rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 8px var(--accent-alt);
  opacity: .8;
  letter-spacing: .15em;
  text-transform: uppercase;
  animation: flicker 4s infinite steps(2);
}

.main-173 .label-bottom {
  position: absolute;
  bottom: -2rem;
  right: 0;
  font-size: .7rem;
  color: #fff;
  opacity: .5;
  text-shadow: 0 0 8px var(--accent-hot);
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* glitch warstwy */
.main-173::before,
.main-173::after {
  content: "173";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .4;
}
.main-173::before {
  color: var(--accent-alt);
  text-shadow: 0 0 10px var(--accent-alt), 0 0 40px var(--accent-alt);
  animation: glitchShift1 2s infinite;
}
.main-173::after {
  color: var(--accent-hot);
  text-shadow: 0 0 10px var(--accent-hot), 0 0 40px var(--accent-hot);
  animation: glitchShift2 2s infinite;
}

@keyframes glitchShift1 {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-2px,1px); }
  11% { transform: translate(2px,-1px); }
  12% { transform: translate(-1px,2px); }
  13% { transform: translate(0,0); }
  60% { transform: translate(1px,-1px); }
}

@keyframes glitchShift2 {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(2px,-1px); }
  11% { transform: translate(-2px,1px); }
  12% { transform: translate(1px,-2px); }
  13% { transform: translate(0,0); }
  60% { transform: translate(-1px,1px); }
}

@keyframes pulseNeon {
  0%,100% {
    text-shadow:
      0 0 10px var(--accent-neon),
      0 0 30px var(--accent-neon),
      0 0 60px var(--accent-neon),
      0 0 90px var(--accent-neon);
    filter: drop-shadow(0 0 15px var(--accent-neon));
  }
  50% {
    text-shadow:
      0 0 5px var(--accent-neon),
      0 0 15px var(--accent-neon),
      0 0 30px var(--accent-neon),
      0 0 45px var(--accent-neon);
    filter: drop-shadow(0 0 6px var(--accent-neon));
  }
}

@keyframes flicker {
  0%   { opacity: .9; }
  50%  { opacity: .3; }
  51%  { opacity: .8; }
  52%  { opacity: .2; }
  53%  { opacity: .9; }
  100% { opacity: .6; }
}

/* ====== TŁO TERMINALOWE (CRT WERSJA) ====== */
.terminal-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #9eff7a;
  text-shadow:
    0 0 4px rgba(158,255,122,1),
    0 0 8px rgba(158,255,122,0.9),
    0 0 18px rgba(158,255,122,0.5),
    0 0 32px rgba(158,255,122,0.25);
  mix-blend-mode: screen;
  opacity: 0.55;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* CRT curve */
  mask-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
  z-index: 2;
  animation: crtJitter 0.12s infinite steps(2);
}

@keyframes crtJitter {
  0%   { transform: translate(0,0) scale(1);    filter: brightness(1) contrast(1); }
  50%  { transform: translate(-0.5px,0.5px) scale(1.001); filter: brightness(1.05) contrast(1.05); }
  100% { transform: translate(0,0) scale(1);    filter: brightness(1) contrast(1); }
}

.terminal-scroll {
  position: relative;
  flex: 1;
  animation: scrollUp 12s linear infinite;
}

@keyframes scrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.term-line {
  white-space: nowrap;
  padding: 0 .75rem;
  opacity: 0.9;
}
.term-line .prompt {
  color: #caffb6;
  font-weight: 600;
}
.term-line .path {
  color: #7be9ff;
  text-shadow:
    0 0 4px rgba(123,233,255,1),
    0 0 12px rgba(123,233,255,0.6);
}
.term-line .warn {
  color: #ff8ae8;
  font-weight: 600;
  text-shadow:
    0 0 4px rgba(255,138,232,1),
    0 0 12px rgba(255,138,232,0.7);
}
.term-line .dim {
  opacity: .5;
}

/* scanlines CRT */
.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.4) 0px,
    rgba(0,0,0,0.0) 2px,
    rgba(0,0,0,0.0) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.4;
  z-index: 3;
}

/* siatka techno */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #fff 0%, transparent 70%);
  z-index: 4;
}

/* narożniki z danymi */
.corner {
  position: absolute;
  font-family: monospace;
  font-size: .7rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.2);
  padding: .6rem .8rem .55rem;
  border-radius: .5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.8);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  min-width: 140px;
  z-index: 7;
}
.corner .line {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.corner .key {
  text-transform: uppercase;
  letter-spacing: .15em;
  opacity: .6;
  font-size: .6rem;
  line-height:1.2;
}
.corner .val {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height:1.2;
  text-align: right;
}

.corner.tl {
  top: 1rem;
  left: 1rem;
  color: var(--accent-neon);
  text-shadow: 0 0 8px var(--accent-neon);
  border-color: rgba(108,255,77,0.5);
}
.corner.tr {
  top: 1rem;
  right: 1rem;
  color: var(--accent-alt);
  text-shadow: 0 0 8px var(--accent-alt);
  border-color: rgba(77,217,255,0.5);
}
.corner.bl {
  bottom: 1rem;
  left: 1rem;
  color: var(--accent-hot);
  text-shadow: 0 0 8px var(--accent-hot);
  border-color: rgba(255,77,214,0.5);
}
.corner.br {
  bottom: 1rem;
  right: 1rem;
  color: #fff;
  opacity:.9;
  text-shadow: 0 0 8px rgba(255,255,255,0.9);
}

@media (max-width:480px){
  .corner { font-size:.6rem; padding:.5rem .6rem; min-width:120px; }
  .corner .key { font-size:.55rem; }
  .corner .val { font-size:.7rem; }
  .main-173 { font-size: clamp(2.4rem,10vw,4rem); }
  .terminal-wrap { font-size:0.7rem; }
}
.construction {
  position: absolute;
  bottom: 20%;
  width: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: #ff4dd6;
  text-shadow:
    0 0 8px #ff4dd6,
    0 0 16px #ff4dd6,
    0 0 32px rgba(255,77,214,0.7);
  opacity: 0.8;
  animation: flicker 3s infinite steps(2);
}

.broadcast {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: 0.15em;
  color: #ff4dd6;
  text-shadow:
    0 0 8px #ff4dd6,
    0 0 16px #ff4dd6,
    0 0 32px rgba(255,77,214,0.7);
  opacity: 0.8;
  animation: flicker 3s infinite steps(2);
  pointer-events: none; /* żeby nie przeszkadzało w przyszłych klikach */
}

.broadcast #broadcast-line {
  display: inline-block;
  /* opcjonalnie lekki jitter w poziomie przy zmianie tekstu */
  animation: broadcastJitter 0.12s steps(2,end) infinite;
}

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

/* już masz .construction, ale dla porządku zostawiam tu jak wygląda,
   żeby było jasne, że broadcast = ten sam vibe tylko inna pozycja */
.construction {
  position: absolute;
  bottom: 20%;
  width: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: #ff4dd6;
  text-shadow:
    0 0 8px #ff4dd6,
    0 0 16px #ff4dd6,
    0 0 32px rgba(255,77,214,0.7);
  opacity: 0.8;
  animation: flicker 3s infinite steps(2);
}

/* efekt zakłócenia transmisji dla broadcast */
.broadcast.glitch {
  animation: broadcastGlitch 0.48s steps(2, end);
}

@keyframes broadcastGlitch {
  0% {
    opacity: 0.2;
    transform: translate(1px, 0);
    filter: brightness(2) contrast(1.5);
  }
  50% {
    opacity: 1;
    transform: translate(-1px, 0);
    filter: brightness(1.8) contrast(1.8);
  }
  100% {
    opacity: 0.8;
    transform: translate(0, 0);
    filter: brightness(1) contrast(1);
  }
}