/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── DSEG7 Classic — 7-segment digital font ── */
@font-face {
  font-family: 'DSEG7Classic';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

/* ── Root vars ── */
:root {
  --green-bright:  #3dff7a;
  --green-mid:     #29c95a;
  --green-dim:     #0d4a1e;
  --black:         #000000;
  --font-seg:      'DSEG7Classic', 'Courier New', monospace;
  --font-label:    'Courier New', 'Share Tech Mono', monospace;
}

/* ── Base ── */
html, body {
  width: 100%;
  height: 100%;
  background: var(--black);
  overflow: hidden;
}

/* ── Scene ── */
.scene {
  width: 100%;
  height: 100vh;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ── Static radial glow — no animation ── */
.glow-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 80, 0.20) 0%,
    rgba(0, 200, 60, 0.09) 32%,
    rgba(0, 150, 50, 0.03) 58%,
    transparent 72%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Top label ── */
.top-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-label);
  font-size: clamp(0.65rem, 1.8vw, 1rem);
  font-weight: bold;
  letter-spacing: 0.55em;
  color: #1e7a3e;
  text-transform: uppercase;
  margin-bottom: clamp(1.8rem, 5vh, 3.2rem);
  opacity: 0.85;
}

/* ── Countdown row ── */
.countdown-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 14px);
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;
}

/* ── Each unit block — fixed width so label always centers ── */
.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(90px, 16vw, 200px);
}

/* ── Segment wrapper — full width, flex center ── */
.seg-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 1;
}

/* ── Live digit only — clean, no ghost ── */
.seg.live {
  font-family: var(--font-seg);
  font-weight: 400;
  font-size: clamp(3.2rem, 10.5vw, 7.2rem);
  letter-spacing: 0.04em;
  display: block;
  width: 100%;
  text-align: center;
  color: var(--green-bright);
  text-shadow:
    0 0 8px  rgba(61, 255, 122, 0.60),
    0 0 18px rgba(61, 255, 122, 0.28),
    0 0 32px rgba(61, 255, 122, 0.10);
}

/* ── Colon separator ── */
.colon {
  font-family: var(--font-seg);
  font-size: clamp(2.8rem, 9.5vw, 6.4rem);
  color: var(--green-mid);
  line-height: 1;
  padding-bottom: clamp(0.7rem, 2vh, 1.3rem);
  opacity: 0.60;
  align-self: flex-end;
  position: relative;
  z-index: 2;
  letter-spacing: 0;
}

/* ── Unit labels — lebih besar & tebal ── */
.unit-label {
  font-family: var(--font-label);
  font-size: clamp(0.62rem, 1.8vw, 0.9rem);
  font-weight: bold;
  letter-spacing: 0.42em;
  color: #2a9950;
  text-transform: uppercase;
  margin-top: 0.65rem;
  text-align: center;
  width: 100%;
}

/* ── Date line ── */
.bottom-date {
  position: relative;
  z-index: 2;
  margin-top: clamp(1.8rem, 4.5vh, 3rem);
  font-family: var(--font-label);
  font-size: clamp(0.55rem, 1.4vw, 0.78rem);
  font-weight: bold;
  letter-spacing: 0.38em;
  color: #1a5e2e;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.80;
}

/* ── Motivasi ── */
.motivation {
  position: relative;
  z-index: 2;
  margin-top: clamp(1rem, 2.5vh, 1.8rem);
  font-family: var(--font-label);
  font-size: clamp(0.6rem, 1.5vw, 0.82rem);
  letter-spacing: 0.12em;
  color: #2bb555;
  text-align: center;
  line-height: 2;
  opacity: 0.70;
  font-style: italic;
}

/* ── Done message ── */
.done-msg {
  display: none;
  position: relative;
  z-index: 2;
  font-family: var(--font-seg);
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  color: var(--green-bright);
  letter-spacing: 0.2em;
  text-align: center;
  text-shadow: 0 0 20px rgba(61,255,122,0.6);
}

/* ── Mobile ── */
@media (max-width: 520px) {
  .glow-bg {
    width: 340px;
    height: 340px;
  }
  .countdown-wrap {
    gap: 3px;
  }
  .colon {
    padding-bottom: 0.55rem;
  }
}

@media (max-width: 360px) {
  .seg.live {
    font-size: 2.6rem;
  }
  .colon {
    font-size: 2rem;
  }
}