/* NA40 Clean Time split-flap counter v2.29.7
   Intentionally loaded after theme.css.php so the counter keeps one fixed,
   classic mechanical appearance in every published theme. */
body.cleantime-screen #dayCounter.cleantime-day-counter{
  gap:clamp(4px,.85vw,11px)!important;
  perspective:1400px!important;
  isolation:isolate;
}
body.cleantime-screen #dayCounter .cleantime-digit-card{
  position:relative!important;
  overflow:hidden!important;
  border-radius:clamp(5px,.65vw,10px)!important;
  background:linear-gradient(180deg,#202226 0%,#15171a 49.35%,#090a0c 50.65%,#15171a 100%)!important;
  border:1px solid #050607!important;
  outline:1px solid rgba(255,255,255,.12)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.9),
    inset 5px 0 10px rgba(255,255,255,.025),
    inset -5px 0 10px rgba(0,0,0,.22),
    0 8px 10px rgba(0,0,0,.26),
    0 18px 34px rgba(0,0,0,.38)!important;
  transform-style:preserve-3d!important;
}
body.cleantime-screen #dayCounter .cleantime-digit-card::before{
  content:""!important;
  position:absolute!important;
  z-index:8!important;
  left:0!important;
  right:0!important;
  top:calc(50% - 1px)!important;
  height:3px!important;
  background:linear-gradient(180deg,rgba(0,0,0,.95),#020203 55%,rgba(255,255,255,.10))!important;
  box-shadow:0 -1px 0 rgba(255,255,255,.055),0 1px 2px rgba(0,0,0,.9)!important;
  pointer-events:none!important;
}
body.cleantime-screen #dayCounter .cleantime-digit-card::after{
  content:""!important;
  position:absolute!important;
  z-index:7!important;
  inset:0!important;
  background:
    radial-gradient(circle at 5px 50%,#060708 0 2px,#46494e 2.5px 3.4px,transparent 3.8px),
    radial-gradient(circle at calc(100% - 5px) 50%,#060708 0 2px,#46494e 2.5px 3.4px,transparent 3.8px),
    linear-gradient(180deg,rgba(255,255,255,.075),transparent 30%,transparent 68%,rgba(0,0,0,.25))!important;
  pointer-events:none!important;
}
body.cleantime-screen #dayCounter .cleantime-digit{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 2px!important;
  color:#f1eee5!important;
  font-family:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",Impact,sans-serif!important;
  font-stretch:condensed!important;
  font-style:normal!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  letter-spacing:-.055em!important;
  line-height:.82!important;
  text-indent:-.055em!important;
  text-shadow:0 2px 0 #000,0 4px 8px rgba(0,0,0,.65)!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
  backface-visibility:hidden!important;
  transform-origin:center center!important;
}
body.cleantime-screen #dayCounter .cleantime-digit-card.flip{
  animation:none!important;
}
body.cleantime-screen #dayCounter .cleantime-digit-card.flip .cleantime-digit{
  animation:na40SplitFlap .95s cubic-bezier(.37,.01,.22,1)!important;
}
@keyframes na40SplitFlap{
  0%{transform:rotateX(0deg);filter:brightness(1)}
  38%{transform:rotateX(-86deg);filter:brightness(.50)}
  50%{transform:rotateX(-90deg);filter:brightness(.38)}
  51%{transform:rotateX(90deg);filter:brightness(.38)}
  77%{transform:rotateX(18deg);filter:brightness(.86)}
  100%{transform:rotateX(0deg);filter:brightness(1)}
}
@media(max-width:700px){
  body.cleantime-screen #dayCounter.cleantime-day-counter{gap:3px!important}
  body.cleantime-screen #dayCounter .cleantime-digit-card{border-radius:5px!important}
  body.cleantime-screen #dayCounter .cleantime-digit-card::after{
    background:
      radial-gradient(circle at 3px 50%,#060708 0 1.2px,#46494e 1.6px 2.1px,transparent 2.5px),
      radial-gradient(circle at calc(100% - 3px) 50%,#060708 0 1.2px,#46494e 1.6px 2.1px,transparent 2.5px),
      linear-gradient(180deg,rgba(255,255,255,.075),transparent 30%,transparent 68%,rgba(0,0,0,.25))!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.cleantime-screen #dayCounter .cleantime-digit-card.flip .cleantime-digit{animation-duration:.01ms!important}
}
