/* Full-screen countdown for TVs and kiosks. Served at /display/:token. */
* { box-sizing: border-box; margin: 0 }
html, body { height: 100%; background: #09090b; color: var(--ink, #fafafa); overflow: hidden }
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.tnum, .unit .value { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1 }

#bg {
  position: fixed; inset: -10%;
  background:
    radial-gradient(60% 55% at 20% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(55% 60% at 85% 90%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    #09090b;
  animation: drift 40s ease-in-out infinite alternate;
}
#bg.photo { background: linear-gradient(rgba(9, 9, 11, .55), rgba(9, 9, 11, .85)), var(--photo) center / cover no-repeat, #09090b; animation: none }
@keyframes drift { to { transform: translate3d(4%, -3%, 0) scale(1.08) } }

main {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 4vh, 56px) clamp(20px, 5vw, 96px);
  transition: transform 2s ease;
}

header { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap }
#clock { font-size: clamp(2rem, 6.5vw, 7.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1 }
#clock .sec { opacity: .45 }
#date { font-size: clamp(1rem, 2.2vw, 2.4rem); opacity: .7; text-transform: capitalize }

#center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 3.5vh, 48px); text-align: center; min-height: 0 }
#title { font-family: var(--title-font); font-size: clamp(1.4rem, 4vw, 4.6rem); font-weight: var(--title-weight); letter-spacing: -.02em; line-height: 1.1; max-width: 22ch; text-wrap: balance }
#target { font-size: clamp(.95rem, 1.8vw, 1.9rem); opacity: .65 }

#units {
  --size: min(calc(90vw / (var(--n, 4) * 2.05)), 30vh);
  display: flex; justify-content: center; gap: calc(var(--size) * .28);
}
.unit { display: flex; flex-direction: column; align-items: center; gap: calc(var(--size) * .06) }
.unit .value {
  display: flex; font-family: var(--num-font); font-size: var(--size); font-weight: var(--num-weight); color: var(--num); letter-spacing: -.045em; line-height: .95;
  text-shadow: 0 0 calc(var(--size) * .35) color-mix(in srgb, var(--accent) 55%, transparent);
}
.unit .label { font-size: max(.8rem, calc(var(--size) * .13)); text-transform: uppercase; letter-spacing: .18em; color: var(--muted) }

/* Each digit is its own box so only the one that changed slides in. */
.digit { display: inline-block; width: .62em; text-align: center; line-height: 1 }
.digit > span { display: inline-block }
.digit > span.in { animation: roll .55s cubic-bezier(.2, .8, .2, 1) }
@keyframes roll { from { transform: translateY(-55%); opacity: 0; filter: blur(6px) } to { transform: none; opacity: 1; filter: none } }

.done { font-size: min(10vw, 20vh); animation: pop 1.2s ease infinite alternate }
@keyframes pop { to { transform: scale(1.06) } }

footer { display: flex; justify-content: space-between; align-items: center; font-size: clamp(.75rem, 1vw, 1rem); opacity: .45 }
#fs {
  font: inherit; color: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: opacity .4s;
}
#fs:hover, #fs:focus-visible { background: rgba(255, 255, 255, .16); outline: none }
body.idle { cursor: none }
body.idle #fs { opacity: 0; pointer-events: none }

/* Concept themes (themes.css): their own background, tiles and card instead of the accent glow. */
body:not([data-theme='classic']) #bg { inset: 0; background: var(--bg); animation: none }
body:not([data-theme='classic']) .unit .value { text-shadow: var(--glow) }
body:not([data-theme='classic']) .unit {
  padding: calc(var(--size) * .1) calc(var(--size) * .14) calc(var(--size) * .12);
  background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: var(--radius); box-shadow: var(--tile-shadow);
}
body:not([data-theme='classic']) #center {
  align-self: center; justify-self: center; max-width: 100%;
  background: var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); border-radius: calc(var(--radius) + 12px);
}
[data-theme='birthday'] #center, [data-theme='wedding'] #center { padding: clamp(20px, 5vh, 64px) clamp(24px, 6vw, 110px) }
[data-theme='minimal'] #bg { background: #fff }
[data-theme='minimal'][data-ink='light'] #bg { background: #09090b }
[data-theme='wedding'] #title { font-size: clamp(2.6rem, 7.5vw, 8.5rem); font-weight: 400 }
[data-theme='wedding'] .unit .value, [data-theme='birthday'] .unit .value, [data-theme='newyear'] .unit .value { background: none; color: inherit }
[data-theme='wedding'] .digit > span, [data-theme='birthday'] .digit > span, [data-theme='newyear'] .digit > span {
  background: var(--num-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#center .logo { display: block; max-width: min(42vw, 460px); max-height: clamp(36px, 11vh, 150px); width: auto; height: auto; object-fit: contain }
#center .badge { font-size: clamp(.75rem, 1.4vw, 1.5rem) }
#center:has(.badge:empty) { gap: clamp(12px, 3.5vh, 48px) }
#fs { color: inherit }
footer .powered { color: inherit; text-decoration: none; letter-spacing: .02em }
footer .powered:hover { text-decoration: underline }
/* The direct share link has no wall clock. */
[data-view='link'] header { display: none }
[data-view='link'] main { grid-template-rows: 1fr auto }

@media (max-aspect-ratio: 3/4) {
  #units { --size: min(calc(92vw / (var(--n, 4) * 1.9)), 18vh); flex-wrap: wrap }
  /* Four or more units sit in a 2-column grid on a phone instead of wrapping 3+1. */
  #units:has(> .unit:nth-child(4)) { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; --size: min(calc(92vw / 4.6), 15vh) }
  header { flex-direction: column; align-items: center; text-align: center }
}

@media (prefers-reduced-motion: reduce) {
  #bg, .done, .digit > span.in { animation: none }
}
/* Theme details and finish screen sizes on the full-screen page. */
#center .intro { font-size: clamp(1.4rem, 4vw, 4.4rem) }
#center .intro.company { font-size: clamp(.85rem, 1.6vw, 1.7rem) }
#center .portrait { width: clamp(84px, 18vh, 220px) }
#center .contact { font-size: clamp(.85rem, 1.5vw, 1.5rem) }
#center .finish-title { font-size: clamp(1.8rem, min(5.4vw, 9vh), 6.5rem) }
#center .finish-body { font-size: clamp(1rem, 2.2vw, 2.4rem) }
[data-finished] #title { opacity: .7; font-size: clamp(1.1rem, 2.6vw, 3rem) }