:root {
  --azure-195: #96e1ff;
  --gold-45: #f0ae00;
  --ring-dark: #0f1418;
  --ring-mid: #1a232b;
  --ink: #e5eef5;
  --ink-dim: #9ab0c3;
  --bg-1: #0b0e12;
  --bg-2: #101820;
  --bg-3: #1a2027;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Marcellus", "Cinzel", "Times New Roman", serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 40%, rgba(36, 58, 72, 0.35), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(130, 70, 20, 0.2), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
  display: grid;
  place-items: center;
  overflow: hidden;
}

main {
  width: min(92vmin, 960px);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
}

.ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0) 54%, rgba(13, 18, 24, 0.9) 56%, rgba(20, 28, 36, 1) 62%, rgba(7, 9, 12, 1) 100%);
  box-shadow:
    inset 0 0 0 1px #7a8086,
    inset 0 0 0 3px #94999e,
    inset 0 0 0 4px #b6bbc0,
    inset 0 0 0 6px #94999e,
    inset 0 0 0 8px #7a8086,
    inset 0 0 40px rgba(0, 0, 0, 0.85),
    0 30px 60px rgba(0, 0, 0, 0.55);
  position: relative;
  display: grid;
  place-items: center;
}

.ring > * {
  position: relative;
  z-index: 1;
}

.top-ring-mask,
.top-ring-bevel {
  position: absolute;
  width: 15%;
  height: 15%;
  top: 5.4%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.top-ring-mask {
  background: #151922;
  z-index: 1;
}

.top-ring-bevel {
  box-shadow:
    inset 0 0 0 1px #7a8086,
    inset 0 0 0 3px #94999e,
    inset 0 0 0 4px #b6bbc0,
    inset 0 0 0 6px #94999e,
    inset 0 0 0 8px #7a8086;
  z-index: 8;
}

.effects {
  position: absolute;
  inset: 11%;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
}

.fangs {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.segment-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  transform-origin: 50% 50%;
  --segment-even: #202326;
  --segment-odd: #232c31;
  --groove-angle: clamp(0.35deg, 0.55deg, 0.9deg);
  --segment-inner: 56%;
  --segment-outer: 70%;
  background:
    repeating-conic-gradient(
      from -7.5deg,
      var(--segment-even) 0deg 15deg,
      var(--segment-odd) 15deg 30deg
    );
  -webkit-mask-image: radial-gradient(circle at center, transparent 0 var(--segment-inner), #fff var(--segment-inner) var(--segment-outer), transparent var(--segment-outer) 100%);
  mask-image: radial-gradient(circle at center, transparent 0 var(--segment-inner), #fff var(--segment-inner) var(--segment-outer), transparent var(--segment-outer) 100%);
}

.segment-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -7.5deg,
    #1D2023 0deg var(--groove-angle),
    transparent var(--groove-angle) 15deg
  );
  opacity: 1;
  pointer-events: none;
}

.fang {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 30px;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
  opacity: 1;
}

.fang-shape {
  width: 100%;
  height: 100%;
  background: #050607;
  transform: scale(var(--fang-scale, 1));
  transform-origin: 50% 0%;
  -webkit-clip-path: path('M 0 0 C 9 0.5 10.5 18 11 32 C 11.5 18 13 0.5 22 0 Z');
          clip-path: path('M 0 0 C 9 0.5 10.5 18 11 32 C 11.5 18 13 0.5 22 0 Z');
}

.effect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  transform: scale(1.12);
  transform-origin: 50% 50%;
}

.effect-sun {
  transform: scale(1.18);
}

.effect-moon {
  transform: scale(1.18);
}

.effects[data-cycle="day"] .effect-sun,
.effects[data-cycle="moon"] .effect-moon {
  opacity: 1;
}

.sun-base {
  fill: #7c3e1f;
}

.sun-core-void {
  fill: #C67436;
}


.sun-orange-core {
  fill: #C67436;
}

.sun-yellow-core {
  fill: #FCE680;
}

.sun-ring-fill {
  fill: none;
  stroke: #FCE680;
  stroke-width: 4;
}

.sun-ring-outline {
  fill: none;
  stroke: #C67436;
  stroke-width: 0.5;
}

.sun-flame {
  fill: #C67436;
}

.sun-flame-orange {
  fill: #B67A26;
}

.sun-flame-orange-shadow {
  fill: #714218;
  opacity: 0.6;
}

.sun-flame-yellow {
  fill: #FCE680;
}

.sun-orange-layer {
  transform-origin: 50% 50%;
  animation: sun-rotate-orange 50s steps(1500) infinite;
  
  filter: drop-shadow(0 0 3px rgba(182, 122, 38, 0.65)) drop-shadow(0 0 6px rgba(148, 89, 31, 0.4));
}

.sun-yellow-layer {
  transform-origin: 50% 50%;
  animation: sun-rotate-yellow 120s steps(3600) infinite;
}

.moon-ring {
  fill: none;
  stroke: #95dbf8;
  stroke-width: 2.2;
}

.moon-ring.inner {
  stroke-width: 2.1;
}

.moon-ring.offset-left {
  stroke-width: 2.3;
}

.moon-ring.offset-right {
  stroke-width: 2.2;
}

.moon-ring.outer {
  stroke-width: 2.6;
}

.moon-mist {
  opacity: 0.82;
}

.moon-core {
  opacity: 0.2;
}

.moon-beams {
  transform-origin: 50% 50%;
  animation: moon-spin 54s steps(1620) infinite;
  filter: blur(2px);
}

.moon-beams-thin,
.moon-beams-thick {
  transform-origin: 50% 50%;
}

.moon-beams-thin-a {
  animation: beams-thin-a 24s steps(720) infinite;
}

.moon-beams-thin-b {
  animation: beams-thin-b 24s steps(720) infinite;
}

.moon-beams-thick {
  animation: beams-thick 24s steps(720) infinite;
}

.moon-beam-thin,
.moon-beam-thick {
  fill: #27254f;
}

.moon-beam-thick {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  animation: beams-thick-width 24s steps(720) infinite;
}

@keyframes moon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes sun-rotate-orange {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes sun-rotate-yellow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes beams-thin-a {
  0%,
  30% {
    opacity: 0.65;
  }
  50%,
  65% {
    opacity: 0.55;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0.65;
  }
}

@keyframes beams-thin-b {
  0%,
  30% {
    opacity: 0;
  }
  50%,
  65% {
    opacity: 0.55;
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes beams-thick {
  0%,
  50% {
    opacity: 0;
  }
  65%,
  90% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}

@keyframes beams-thick-width {
  0%,
  50% {
    transform: scaleX(1);
  }
  65%,
  85% {
    transform: scaleX(1.8);
  }
  100% {
    transform: scaleX(1);
  }
}

.digits {
  position: absolute;
  inset: 6.3%;
  border-radius: 50%;
  z-index: 5;
}

.digit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  font-size: clamp(24px, 5vmin, 75px);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  font-variant-numeric: lining-nums;
  cursor: pointer;
  user-select: none;
  z-index: 1;
  text-shadow:
    0 1px 0 rgba(5, 7, 10, 0.9),
    1px 0 0 rgba(5, 7, 10, 0.9),
    -1px 0 0 rgba(5, 7, 10, 0.9),
    0 -1px 0 rgba(5, 7, 10, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.7);
}

.digit.azure {
  color: var(--azure-195);
}

.digit.gold {
  color: var(--gold-45);
}

.center-core {
  width: 52%;
  height: 52%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10%;
  z-index: 6;
}

.status-label {
  display: none;
}

.countdown {
  font-size: clamp(38px, 7vmin, 120px);
  font-weight: 700;
  line-height: 1.1;
  display: none;
  text-shadow:
    0 0 20px rgba(0, 0, 0, 0.95),
    0 0 36px rgba(0, 0, 0, 0.7);
}

.countdown.active {
  display: block;
}

.hint {
  font-size: clamp(14px, 2.1vmin, 22px);
  color: var(--ink-dim);
  line-height: 1.4;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.hidden {
  display: none;
}

@media (max-width: 640px) {
  main {
    width: min(92vmin, 640px);
  }
}