:root {
  color-scheme: normal;
  font-family: "Arial Narrow", Impact, Haettenschweiler, sans-serif;
  background: transparent !important;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body { pointer-events: none; }

.lost-control {
  --signal: #b14cff;
  --signal-bright: #d7a4ff;
  --accent: #61f2a7;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  color: #fbf7ff;
  opacity: 0;
  transform: scale(1.035);
  visibility: hidden;
  background: transparent !important;
}

.lost-control.active {
  visibility: visible;
  animation: event-in 360ms cubic-bezier(.16,.84,.31,1) forwards;
}

.lost-control.exiting {
  visibility: visible;
  animation: event-out 760ms cubic-bezier(.67,0,.84,.13) forwards;
}

.glitch-noise,
.scanlines {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transition: opacity 200ms ease;
}

.active .glitch-noise,
.active .scanlines { opacity: 1; }

.glitch-noise {
  background:
    radial-gradient(circle at 50% 51%, rgba(177, 76, 255, .24), transparent 28%),
    radial-gradient(circle at 20% 74%, rgba(97, 242, 167, .14), transparent 23%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    linear-gradient(110deg, rgba(13, 5, 23, .16), rgba(177, 76, 255, .18), rgba(8, 35, 27, .14));
  mix-blend-mode: screen;
  animation: noise-shift 210ms steps(2) infinite;
}

.scanlines {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.32) 4px 5px);
  mix-blend-mode: multiply;
  animation: scan-drift 2.4s linear infinite;
}

.event-stage {
  position: relative;
  width: min(88vw, 1420px);
  padding: clamp(28px, 4vw, 72px) clamp(24px, 6vw, 116px);
  text-align: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(18, 6, 31, .72) 15%, rgba(8, 28, 25, .7) 85%, rgba(0,0,0,.08)),
    radial-gradient(ellipse at center, rgba(119, 37, 181, .34), transparent 64%);
  border-top: 2px solid rgba(215, 164, 255, .9);
  border-bottom: 2px solid rgba(97, 242, 167, .88);
  box-shadow: 0 0 32px rgba(177, 76, 255, .48), 0 0 50px rgba(97, 242, 167, .12), inset 0 0 70px rgba(177, 76, 255, .14);
  clip-path: polygon(0 0, 98% 0, 100% 12%, 100% 100%, 2% 100%, 0 88%);
}

.event-stage::before,
.event-stage::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(207, 157, 255, .3);
  pointer-events: none;
}

.event-stage::after {
  inset: auto 0 15% 0;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--accent), var(--signal), transparent);
  opacity: .8;
}

.system-status,
.bottom-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(10px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: .15em;
}

.system-status {
  justify-content: space-between;
  color: var(--signal-bright);
  text-align: left;
}

.status-dot {
  width: 9px;
  height: 9px;
  margin-right: -2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: blink 620ms steps(2) infinite;
}

#event-code { color: rgba(255,255,255,.58); }

.kicker {
  margin: clamp(30px, 5vh, 65px) 0 10px;
  color: var(--accent);
  font: 800 clamp(11px, 1.2vw, 18px)/1 Consolas, "Courier New", monospace;
  letter-spacing: .42em;
}

.glitch-title {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 10.1vw, 168px);
  font-weight: 900;
  font-stretch: condensed;
  line-height: .83;
  letter-spacing: -.045em;
  text-shadow: 7px 0 0 rgba(97, 242, 167, .62), -7px 0 0 rgba(185, 87, 255, .78), 0 8px 18px rgba(0,0,0,.75);
  animation: title-shake 2.7s steps(2) infinite;
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: inherit;
  clip-path: inset(0 0 0 0);
}

.glitch-title::before {
  color: #67ffb0;
  transform: translate(-5px, -1px);
  mix-blend-mode: screen;
  animation: glitch-a 2.1s steps(2) infinite;
}

.glitch-title::after {
  color: #c65cff;
  transform: translate(5px, 1px);
  mix-blend-mode: screen;
  animation: glitch-b 1.65s steps(2) infinite reverse;
}

.subtitle {
  max-width: 900px;
  margin: clamp(18px, 2.5vw, 30px) auto 0;
  color: #e8fff3;
  font-family: Arial, sans-serif;
  font-size: clamp(16px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}

.timer-shell {
  display: inline-grid;
  grid-template-columns: auto;
  align-items: end;
  gap: 0 14px;
  margin-top: clamp(28px, 4vw, 50px);
  padding: 15px 25px 12px;
  background: linear-gradient(100deg, rgba(93, 28, 141, .36), rgba(12, 41, 31, .38));
  border-left: 5px solid var(--signal);
  border-right: 5px solid var(--accent);
  box-shadow: 0 0 34px rgba(177, 76, 255, .3), inset 0 0 18px rgba(97, 242, 167, .1);
}

.timer-label {
  color: #b7ffd8;
  font: 800 clamp(10px, 1vw, 14px)/1 Consolas, "Courier New", monospace;
  letter-spacing: .28em;
}

.timer-label { margin-bottom: 4px; }

.timer {
  color: #fff;
  font: 900 clamp(48px, 8vw, 126px)/.85 Consolas, "Courier New", monospace;
  letter-spacing: -.09em;
  text-shadow: 0 0 14px rgba(255,255,255,.55), 0 0 28px rgba(177, 76, 255, .8), 0 0 44px rgba(97, 242, 167, .22);
}

.warning-corners span {
  position: absolute;
  z-index: 1;
  width: 8vw;
  min-width: 48px;
  height: 6vw;
  min-height: 38px;
  border-color: rgba(198, 92, 255, .86);
  border-style: solid;
  filter: drop-shadow(0 0 8px rgba(177,76,255,.72));
}

.warning-corners span:nth-child(1) { top: 3.6vh; left: 3.6vw; border-width: 4px 0 0 4px; }
.warning-corners span:nth-child(2) { top: 3.6vh; right: 3.6vw; border-width: 4px 4px 0 0; }
.warning-corners span:nth-child(3) { bottom: 3.6vh; left: 3.6vw; border-width: 0 0 4px 4px; }
.warning-corners span:nth-child(4) { right: 3.6vw; bottom: 3.6vh; border-width: 0 4px 4px 0; }
.warning-corners span:nth-child(even) { border-color: rgba(97, 242, 167, .84); filter: drop-shadow(0 0 8px rgba(97,242,167,.62)); }

.bottom-warning {
  position: absolute;
  bottom: 1.6vh;
  width: 100%;
  overflow: hidden;
  justify-content: space-around;
  color: rgba(183, 255, 217, .8);
  white-space: nowrap;
  animation: warning-scroll 4s linear infinite;
}

.active .event-stage {
  animation: stage-unstable 4.8s cubic-bezier(.38,.05,.47,1) infinite;
}

.active .glitch-noise {
  animation: noise-shift 210ms steps(2) infinite, signal-breathe 1.7s ease-in-out infinite;
}

.active .scanlines {
  animation: scan-drift 1.25s linear infinite, scan-crackle 3.2s steps(2) infinite;
}

.active .warning-corners span {
  animation: corner-jitter 2.1s steps(2) infinite;
}

.active .timer-shell {
  animation: timer-lurch 2.8s steps(2) infinite;
}

.active .system-status {
  animation: status-tear 2.5s steps(2) infinite;
}

.active .kicker {
  animation: kicker-flicker 1.9s steps(2) infinite;
}

.active .bottom-warning {
  animation: warning-scroll 2.8s linear infinite, warning-flicker 1.45s steps(2) infinite;
}

@keyframes event-in {
  0% { opacity: 0; transform: scale(1.08); filter: contrast(2.1) brightness(2.3); }
  28% { opacity: 1; transform: scale(.99) translateX(-8px); }
  48% { transform: translateX(7px); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes event-out {
  0% { opacity: 1; transform: scale(1); }
  35% { opacity: .78; transform: translateX(-18px) scale(1.01); filter: contrast(1.8); }
  100% { opacity: 0; transform: translateX(35px) scale(1.08); filter: blur(3px) contrast(2.4); }
}

@keyframes stage-unstable {
  0%, 16%, 100% { transform: translate3d(0, 0, 0) skewX(0); filter: none; }
  17% { transform: translate3d(-11px, 3px, 0) skewX(-.7deg); filter: brightness(1.2) saturate(1.35); }
  19% { transform: translate3d(8px, -2px, 0) skewX(.5deg); }
  20% { transform: translate3d(0, 0, 0) skewX(0); }
  57% { transform: translate3d(0, 0, 0) skewX(0); }
  58% { transform: translate3d(6px, -4px, 0) skewX(.4deg); filter: hue-rotate(13deg) contrast(1.25); }
  60% { transform: translate3d(-4px, 2px, 0) skewX(-.3deg); }
  62% { transform: translate3d(0, 0, 0) skewX(0); filter: none; }
}

@keyframes signal-breathe {
  0%, 100% { opacity: .72; filter: saturate(1); }
  48% { opacity: 1; filter: saturate(1.5) brightness(1.3); }
  50% { opacity: .4; }
  53% { opacity: 1; }
}

@keyframes scan-crackle {
  0%, 71%, 100% { opacity: 1; }
  72% { opacity: .25; }
  74% { opacity: .95; }
  76% { opacity: .45; }
}

@keyframes corner-jitter {
  0%, 78%, 100% { transform: translate(0, 0); opacity: 1; }
  80% { transform: translate(-8px, 4px); opacity: .4; }
  83% { transform: translate(7px, -3px); opacity: 1; }
  86% { transform: translate(-2px, 1px); }
}

@keyframes timer-lurch {
  0%, 67%, 100% { transform: translateX(0) scale(1); }
  68% { transform: translateX(-9px) scale(1.035); }
  71% { transform: translateX(7px) scale(.985); }
  73% { transform: translateX(0) scale(1); }
}

@keyframes status-tear {
  0%, 51%, 100% { transform: translateX(0); letter-spacing: .15em; }
  52% { transform: translateX(-13px); letter-spacing: .28em; }
  54% { transform: translateX(8px); letter-spacing: .06em; }
  56% { transform: translateX(0); letter-spacing: .15em; }
}

@keyframes kicker-flicker {
  0%, 64%, 100% { opacity: 1; transform: translateX(0); }
  65% { opacity: .15; transform: translateX(10px); }
  67% { opacity: 1; transform: translateX(-6px); }
  69% { opacity: .55; transform: translateX(0); }
}

@keyframes warning-flicker {
  0%, 89%, 100% { opacity: 1; }
  90% { opacity: .2; }
  93% { opacity: .9; }
}

@keyframes title-shake { 0%, 87%, 100% { transform: none; } 88% { transform: translate(-2px, 2px); } 90% { transform: translate(5px, -1px); } 92% { transform: translate(-3px, 0); } }
@keyframes glitch-a { 0%, 85%, 100% { clip-path: inset(0 0 100% 0); } 86% { clip-path: inset(20% 0 52% 0); } 89% { clip-path: inset(68% 0 8% 0); } }
@keyframes glitch-b { 0%, 74%, 100% { clip-path: inset(100% 0 0 0); } 76% { clip-path: inset(5% 0 68% 0); } 80% { clip-path: inset(48% 0 26% 0); } }
@keyframes noise-shift { 0% { transform: translate(0); } 25% { transform: translate(1.5%, -1%); } 50% { transform: translate(-1%, 1%); } 75% { transform: translate(.5%, 2%); } 100% { transform: translate(0); } }
@keyframes scan-drift { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes warning-scroll { from { transform: translateX(-2%); } to { transform: translateX(2%); } }

@media (max-width: 640px) {
  .event-stage { width: 94vw; padding: 28px 18px; }
  .system-status { gap: 6px; font-size: 9px; letter-spacing: .08em; }
  .kicker { letter-spacing: .18em; }
  .bottom-warning span:not(:first-child) { display: none; }
}

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