@font-face {
  font-family: 'DSEG7 Classic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/dseg7-classic@latest/latin-700-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/dseg7-classic@latest/latin-700-normal.woff) format('woff');
}

:root{
  --digit-color: #f3e9d2;
  --card-color: #020202;
  --label-color: #000000;
  --card-shadow: rgba(0,0,0,0.20);
  --card-h: 58px;
  --digit-size: 30px;
  --flap-duration: 0.4s; /* duracion de CADA hoja (arriba y abajo) */
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.countdown{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  transform-origin: center center;
  justify-content: center;
  margin: 8cqw 0 0;
  scale:1.3;
}

.unit{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flip-group{
  display: flex;
  gap: 4px;
}

.label{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--label-color);
  text-transform: uppercase;
}

.separator{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 1px;
  margin-top: calc(var(--card-h) / 2 - 7px);
}

.separator span{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--digit-color);
  opacity: 0.55;
}

/* ---------------- Flip card ---------------- */

.flip-card{
  position: relative;
  width: 36px;
  height: var(--card-h);
  perspective: 1100px;
}

/* Digito, mostrado como mitad superior o inferior de una cara,
   duplicando la altura y desplazandolo hacia arriba/abajo. */
.glyph{
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DSEG7 Classic', monospace;
  font-weight: 700;
  font-size: var(--digit-size);
  color: var(--digit-color);
  line-height: 1;
}
.glyph.top-half{ top: 0; }
.glyph.bottom-half{ top: -100%; }

/* Caras estaticas: el "fondo" de la tarjeta, siempre presentes */
.face, .flap{
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--card-color);
}

.face{ z-index: 1; }

.face-top{
  top: 0;
  border-radius: 8px 8px 0 0;
}
.face-top::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(0,0,0,0.45);
}
.face-bottom{
  bottom: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}

/* Hojas animadas: se ocultan hasta que la tarjeta esta "jugando" */
.flap{
  z-index: 5;
  visibility: hidden;
  backface-visibility: hidden;
}
.flap-top{
  top: 0;
  border-radius: 8px 8px 0 0;
  transform-origin: bottom center;
  box-shadow: 0 8px 14px rgba(0,0,0,0.10);
}
.flap-bottom{
  bottom: 0;
  border-radius: 0 0 8px 8px;
  transform-origin: top center;
  transform: rotateX(90deg);
  box-shadow: 0 -8px 14px rgba(0,0,0,0.10);
}

.flip-card.playing .flap{
  visibility: visible;
}

/* Fase 1: la hoja superior (numero viejo) cae hacia adentro, con una
   ondulacion leve (scaleY + skew) para que se sienta flexible, no rigida */
.flip-card.playing .flap-top{
  animation: flapTopDown var(--flap-duration) cubic-bezier(.37,0,.24,1) forwards;
}

/* Fase 2: la hoja inferior (numero nuevo) gira hacia abajo, arranca
   cuando termina la fase 1 */
.flip-card.playing .flap-bottom{
  animation: flapBottomDown var(--flap-duration) cubic-bezier(.37,0,.24,1) forwards;
  animation-delay: var(--flap-duration);
}

@keyframes flapTopDown{
  0%{
    transform: rotateX(0deg) scaleY(1) skewX(0deg);
    filter: brightness(1) blur(0px);
  }
  30%{
    transform: rotateX(-30deg) scaleY(0.97) skewX(-1.5deg);
    filter: brightness(0.96) blur(0.3px);
  }
  60%{
    transform: rotateX(-62deg) scaleY(0.93) skewX(1deg);
    filter: brightness(0.9) blur(0.5px);
  }
  85%{
    transform: rotateX(-86deg) scaleY(0.98) skewX(-0.4deg);
    filter: brightness(0.87) blur(0.15px);
  }
  100%{
    transform: rotateX(-90deg) scaleY(1) skewX(0deg);
    filter: brightness(0.86) blur(0px);
  }
}

@keyframes flapBottomDown{
  0%{
    transform: rotateX(90deg) scaleY(1) skewX(0deg);
    filter: brightness(0.86) blur(0px);
  }
  15%{
    transform: rotateX(86deg) scaleY(0.98) skewX(0.4deg);
    filter: brightness(0.87) blur(0.15px);
  }
  40%{
    transform: rotateX(58deg) scaleY(0.93) skewX(-1deg);
    filter: brightness(0.9) blur(0.5px);
  }
  70%{
    transform: rotateX(22deg) scaleY(0.97) skewX(1.5deg);
    filter: brightness(0.96) blur(0.3px);
  }
  100%{
    transform: rotateX(0deg) scaleY(1) skewX(0deg);
    filter: brightness(1) blur(0px);
  }
}

@media screen and (max-width: 768px) {
  .countdown{
    scale: 0.8;
  }
}