/* Kids Clock v2 — visual countdown. No framework, no chart lib. */

:root {
  --sky-top: #000814;
  --sky-bot: #001E3C;
  --ink: #10baf8;
  --c-total: #10baf8;
  --c-hours: #5ee0c8;
  --c-minutes: #a78bfa;
  --c-seconds: #ffd166;
  --track: rgba(255, 255, 255, .06);
  --glow: rgba(16, 186, 248, .30);
  --dial: min(78vmin, 520px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #001E3C;
  -webkit-font-smoothing: antialiased;
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---- sky ---------------------------------------------------------------- */
#sky {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-bot) 100%);
  transition: background 1.2s linear;
  z-index: 0;
}

#glow {
  position: fixed;
  left: 50%;
  bottom: -30vmin;
  width: 120vmin;
  height: 60vmin;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, var(--glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 1.2s linear;
  z-index: 1;
  pointer-events: none;
}

#stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s linear;
}
#stars.off { display: none; }

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle var(--dur) ease-in-out infinite alternate;
  animation-delay: var(--delay);
  will-change: opacity;
}
@keyframes twinkle { from { opacity: .15; } to { opacity: .95; } }

/* ---- layout ------------------------------------------------------------- */
#app {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* ---- sun / moon travelling arc ------------------------------------------ */
#body-arc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
#body-img {
  position: absolute;
  width: min(20vmin, 120px);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(255, 220, 150, .45));
  transition: filter .8s linear;
  will-change: transform;
}
body.is-morning #body-img {
  filter: drop-shadow(0 0 34px rgba(255, 210, 120, .85));
  animation: bob 6s ease-in-out infinite alternate;
}
@keyframes bob { from { margin-top: 0; } to { margin-top: -1.2vmin; } }

/* ---- dial --------------------------------------------------------------- */
#dial-wrap {
  position: relative;
  width: var(--dial);
  height: var(--dial);
  flex: 0 0 auto;
}

#dial {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.track {
  fill: none;
  stroke: var(--track);
  stroke-width: 15;
}

.ring {
  fill: none;
  stroke-width: 15;
  stroke-linecap: round;
  filter: url(#soft);
}

#r-total   { stroke: var(--c-total); }
#r-hours   { stroke: var(--c-hours); }
#r-minutes { stroke: var(--c-minutes); }
#r-seconds { stroke: var(--c-seconds); }

/* ---- readout, below the dial -------------------------------------------- */
#readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8vmin;
}

#countdown {
  font-size: min(11vmin, 62px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow: 0 0 24px var(--glow);
  transition: color 1.2s linear;
}

#caption {
  font-size: min(3vmin, 17px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

/* ---- legend + wall clock ------------------------------------------------ */
#legend {
  display: flex;
  gap: 2.4vmin;
  font-size: min(2.4vmin, 13px);
  color: rgba(255, 255, 255, .38);
  letter-spacing: .06em;
}
.lg { display: inline-flex; align-items: center; gap: .7vmin; }
.lg i {
  width: min(1.5vmin, 8px);
  height: min(1.5vmin, 8px);
  border-radius: 50%;
  display: inline-block;
}
.lg[data-k=total] i   { background: var(--c-total); }
.lg[data-k=hours] i   { background: var(--c-hours); }
.lg[data-k=minutes] i { background: var(--c-minutes); }
.lg[data-k=seconds] i { background: var(--c-seconds); }

#clocknow {
  font-size: min(3.4vmin, 19px);
  font-weight: 600;
  color: rgba(255, 255, 255, .32);
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}

/* In the morning the readout already shows the wall time - don't say it twice. */
body.is-morning #legend,
body.is-morning #clocknow { opacity: 0; }

/* ---- morning theme ------------------------------------------------------ */
body.is-morning {
  --ink: #7a4a12;
  --track: rgba(255, 255, 255, .22);
  --glow: rgba(255, 200, 110, .55);
}
body.is-morning #caption { color: rgba(90, 55, 15, .65); }
body.is-morning .ring { stroke: #ffffff; }
body.is-morning #r-total { stroke: #fff4d6; }

/* ---- preview badge ------------------------------------------------------ */
#badge {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #001E3C;
  background: #ffd166;
  padding: 4px 10px;
  border-radius: 999px;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}

/* ---- small / landscape screens ------------------------------------------ */
@media (max-height: 560px) {
  :root { --dial: min(60vmin, 300px); }
  #legend, #clocknow { display: none; }
  #countdown { font-size: min(9vmin, 42px); }
}

@media (prefers-reduced-motion: reduce) {
  .star, body.is-morning #body-img { animation: none; }
  #sky, #glow, #stars { transition: none; }
}