@font-face {
  font-family: 'UrbanJungle';
  src: url('fonts/UrbanJungleDEMO.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Courier New', monospace;
  color: #d0d0d0;
  background: #000;
  background-image: url('images/bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow-y: auto;
  position: relative;
}

.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

.panel {
  position: relative;
  background: rgba(5, 5, 5, 0.822);
  border: 1px solid rgba(92, 85, 85, 0.541);
  padding: 40px 20px;
  box-shadow: 0 0 80px rgba(0,0,0,1);
  overflow: hidden;
  max-width: 95%;
  box-sizing: border-box;
}

.panel-logo {
  position: absolute;
  top: 15px;
  left: 50%;
  margin-top: 5px;
  margin-bottom: 5px;
  transform: translate(-50%, 0%);
  width: 60px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

.link {
    color: #fdfdfd;
    text-decoration: none;
}

.link:hover {
    color: #ffcc00;
    text-decoration: underline;
}

h1.glitch {
  font-family: 'UrbanJungle', 'Courier New', monospace;
  font-size: 38px;
  letter-spacing: 5px;
  margin-top: 60px;
  margin-bottom: 40px;
  color: #c9c9c9;
  position: relative;
  display: inline-block;
  text-align: center;
}

h1.glitch::before,
h1.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  clip: rect(0, 9999px, 0, 0);
  mix-blend-mode: screen;
}

h1.glitch::before { color: #ff5c5c33; animation: glitchTop 4s infinite steps(2,end);}
h1.glitch::after { color: #5cffd134; animation: glitchBottom 4s infinite steps(2,end);}

@keyframes glitch { 0%{transform:none;}10%{transform:translate(-2px,1px);}20%{transform:translate(2px,-1px);}30%{transform:translate(-3px,2px);}40%{transform:translate(3px,-2px);}50%{transform:translate(-1px,1px);}60%{transform:translate(1px,-1px);}100%{transform:none;} }
@keyframes glitchTop {0%{clip:rect(0,9999px,0,0);}10%{clip:rect(0,9999px,24px,0);transform:translate(-6px,-2px);}20%{clip:rect(0,9999px,0,0);}30%{clip:rect(0,9999px,36px,0);transform:translate(6px,0);}40%{clip:rect(0,9999px,0,0);}100%{clip:rect(0,9999px,0,0);}}
@keyframes glitchBottom {0%{clip:rect(0,9999px,0,0);}12%{clip:rect(28px,9999px,70px,0);transform:translate(6px,3px);}24%{clip:rect(0,9999px,0,0);}36%{clip:rect(40px,9999px,95px,0);transform:translate(-6px,2px);}48%{clip:rect(0,9999px,0,0);}100%{clip:rect(0,9999px,0,0);}}

.warning { font-size: 13px; letter-spacing: 3px; color: #a33; margin-bottom: 35px; text-transform: uppercase; animation: blinkFast 0.8s infinite; }
@keyframes blinkFast { 0%,100%{opacity:1;}50%{opacity:0.35;} }

.label { font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; color: #8f8f8f; }
.countdown { font-size: 32px; color: #e0b36a; letter-spacing: 3px; text-shadow: 0 0 15px rgba(224,179,106,0.4); }
.status { margin-top: 25px; font-size: 12px; letter-spacing: 2px; color: #c9c9c9; }

.toxic-smoke {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.toxic-smoke span {
  position: absolute;
  border-radius: 50%;
  background: rgba(25, 49, 25, 0.541);
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  filter: blur(50px);
  animation: toxicFloat linear infinite;
  mix-blend-mode: lighten;
}

.toxic-smoke span:nth-child(2) { animation-duration: 15s; width:250px; height:350px; background: rgba(60,90,60,0.2);}
.toxic-smoke span:nth-child(3) { animation-duration: 16s; width:180px; height:280px; background: rgba(40,70,40,0.3);}
.toxic-smoke span:nth-child(4) { animation-duration: 17s; width:220px; height:320px; background: rgba(50,80,50,0.25);}

@keyframes toxicFloat {
  0% { transform: translate(-50%, -50%) translate(0,0) scale(1); }
  25% { transform: translate(-50%, -50%) translate(-120px,-80px) scale(1.15); }
  50% { transform: translate(-50%, -50%) translate(100px,70px) scale(1.2); }
  75% { transform: translate(-50%, -50%) translate(-80px,60px) scale(1.1); }
  100% { transform: translate(-50%, -50%) translate(0,0) scale(1); }
}

@media (max-width: 600px) {
  .panel {
    padding: 30px 15px;
  }

  h1.glitch {
    font-size: 8vw;
    letter-spacing: 1px;
  }

  .countdown {
    font-size: 8vw;
  }
}