@font-face {
    font-family: 'Digital Numbers Regular';
    font-style: italic;
    font-weight: bolder;
    src: local('Digital Numbers Regular'), url('./DigitalNumbers-Regular.woff') format('woff');
    }


*{
    margin: 0px;
}


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-image: url(./bomb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}


@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

.container-title {
    margin-top: 25vh;
}

.titulo, .subtitulo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.pass {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000000;  
    margin-top: 10vh;
}

.pass1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: darkred;
}



#bomb {
    margin-top: 10vh;
    display: flex;
    height: 260px;
    width: 630px;
    border: 1px solid black;
    border-radius: 30px;
    background: linear-gradient(to bottom, #6a715d, #535A47, #3e4435);
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

.flexcol {
    display: flex;
    flex-direction: column;
}


#wire1 {
    margin-left: 125px;
    margin-top: 105px;
    height: 8px;
    width: 85px;
    background: linear-gradient(to bottom, #000000, #333333);
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    box-shadow: -4px 0px 2px rgba(0, 0, 0, 0.562);
}

#wire2 {
    margin-left: 125px;
    margin-top: 0px;
    height: 8px;
    width: 85px;
    background: linear-gradient(to bottom, #800080, #4b004b);
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    box-shadow: -4px 0px 2px rgba(0, 0, 0, 0.562);
}

#wire3 {
    margin-left: 125px;
    margin-top: 0px;
    height: 8px;
    width: 85px;
    background: linear-gradient(to bottom, #ffffff, #cccccc);
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    box-shadow: -4px 0px 2px rgba(0, 0, 0, 0.562);
}

#wire4 {
    margin-left: 125px;
    margin-top: 0px;
    height: 8px;
    width: 85px;
    background: linear-gradient(to bottom, #00aa00, #006600);
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    box-shadow: -4px 0px 2px rgba(0, 0, 0, 0.562);
}

#wire5 {
    margin-left: 125px;
    margin-top: 0px;
    height: 8px;
    width: 85px;
    background: linear-gradient(to bottom, #0000ff, #0033aa);
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    box-shadow: -4px 0px 2px rgba(0, 0, 0, 0.562);
}

#wire6 {
    margin-left: 125px;
    margin-top: 0px;
    height: 8px;
    width: 85px;
    background: linear-gradient(to bottom, #ff0000, #990000);
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    box-shadow: -4px 0px 2px rgba(0, 0, 0, 0.562);
}




#timer {
    display: flex;
    justify-content: space-around;
    margin-top: 4%;
    height: 210px;
    width: 350px;
    background: linear-gradient(to bottom, #3a3a3a, #292929, #1c1c1c);
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px,
              rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
              rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
}


#demo {
    height: 50px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 187px;
    color: rgb(0, 62, 0);
    cursor: default;
    text-align: center;
    font-size: 33px;
    font-family: 'Digital Numbers Regular';
    border: 1px solid black;
    border-radius: 10px;
    background-color: #C1B812;

 /* Efecto de irradiación */
  box-shadow:
    0 0 5px 1px #C1B812,         /* halo amarillo suave */
    0 0 20px 4px rgba(193, 184, 18, 0.5), /* irradiación más amplia */
    inset 0 0 5px rgba(255, 255, 150, 0.3), /* brillo interno */
    inset 0 0 15px rgba(255, 255, 150, 0.2); /* profundidad interna */
}

/* BOTÓN DESACTIVAR CONTRASEÑA */

.omitir {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20%;
    margin-right: 12px;
}

.switch {
  display: block;
  background-color: black;
  width: 38px;
  height: 49px;
  box-shadow: 0 0 3px 0.5px rgba(0, 0, 0, 0.2), 0 0 0.5px 0.5px black,
              inset 0 0.5px 0.5px -0.5px white, inset 0 0 0.5px 4px #47434c,
              inset 0 0 0.5px 6px black;
  border-radius: 2px;
  padding: 4px;
  perspective: 700px;
}

.switch input {
  display: none;
}

.switch input:checked + .button {
  transform: translateZ(5px) rotateX(25deg);
  box-shadow: 0 -2px 5px #ff1818;
}

.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch input:checked + .button .shine {
  opacity: 1;
}

.switch input:checked + .button .shadow {
  opacity: 0;
}

.switch .button {
  display: block;
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -5px;
  transform: translateZ(5px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.switch .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 13px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 13px;
  transform-origin: top;
  transform: translateY(13px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 13px 2px 0px black, 0 20px 5px 0px rgba(0, 0, 0, 0.5);
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 3px 3px;
}

.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%,
              radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
              linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes light-off {
  0% { opacity: 1; }
  80% { opacity: 0; }
}






/* CONTENEDOR VERTICAL DE LEDS */
.led-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #171717;
  padding: 8px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px,
              rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
              rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  width: fit-content;
  margin: auto;
  margin-left: 12px;
  align-items: center;
  justify-content: center;
}

/* ESTILO BASE PARA TODOS LOS LEDS FUNCIONALES */
#greenlight,
#redlightblink,
#redlight {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background-color: black;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2),
              0 0 1px 1px black,
              inset 0 1px 1px -1px white,
              inset 0 0 1px 2px #47434c,
              inset 0 0 1px 6px black;
}

/* LED VERDE SIEMPRE ENCENDIDO */
#greenlight::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%);
  animation: flicker 0.2s infinite 0.3s;
  opacity: 1;
}

/* LED ROJO PARPADEANTE */
#redlightblink.blink::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
  animation: flicker 0.2s infinite 0.3s;
  opacity: 1;
}

/* LED ROJO FIJO ENCENDIDO */
#redlight.active::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
  animation: flicker 0.2s infinite 0.3s;
  opacity: 1;
}

/* ANIMACIONES LED */
@keyframes flicker {
  0%   { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { opacity: 1; }
}


/* BOTONES NUEVOS */

.grid {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  grid-template-rows: repeat(3, 40px);
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 7px;
}

.d3warpper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d3warpper.special {
  grid-column: span 2; /* ajusta según el espacio que quieras ocupar */
}

/* Fondo 3D para todos los botones */
.cover {
  background: linear-gradient(to bottom, #1a1a1a, #000000, #0a0a0a);
  height: 29px;
  width: 35px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
  box-shadow: 0 0 3px 0.5px rgba(0, 0, 0, 0.2), 0 0 0.5px 0.5px black,
              inset 0 0.5px 0.5px -0.5px white, inset 0 0 0.5px 4px #47434c,
              inset 0 0 0.5px 6px black;
}

/* Fondo más ancho para botones especiales */
.cover.wide {
  width: 85px;
}

/* Botones numéricos */
.button-1 {
  cursor: pointer;
  border: none;
  border-bottom: 2px solid white;
  background-color: rgb(221, 221, 221);
  box-shadow: 0px 3px 0px 0.2px rgb(44, 44, 44);
  height: 25px;
  width: 30px;
  border-radius: 5px;
  z-index: 2;
  position: absolute;
  transition: 80ms;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  font-weight: 500;
}

.button-1:active {
  box-shadow: 0px 3px 0px 0.2px rgba(116, 116, 116, 0);
  transform: translateY(3px);
  transition: 80ms;
}

/* Botones especiales */
.specialbtn-start,
.specialbtn-clear {
  cursor: pointer;
  border: none;
  border-bottom: 2px solid white;
  background-color: rgb(221, 221, 221);
  box-shadow: 0px 3px 0px 0.2px rgb(44, 44, 44);
  height: 25px;
  width: 80px;
  border-radius: 5px;
  z-index: 2;
  position: absolute;
  transition: 80ms;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  font-weight: 500;
}

.specialbtn-start:active,
.specialbtn-clear:active {
  box-shadow: 0px 3px 0px 0.2px rgba(116, 116, 116, 0);
  transform: translateY(3px);
  transition: 80ms;
}

.d3warpper.special:nth-child(11) {
  grid-column: 1 / span 2;
}

.d3warpper.special:nth-child(12) {
  grid-column: 4 / span 2;
}