:root {
  --carta: #eef3ef;
  --petrolio: #072a29;
  --p900: #041b1a;
  --p700: #0b3b39;
  --tungsteno: #ff8a3d;
  --tungsteno-ombra: #d9602a;
  --tungsteno-chiaro: #ffb27a;
  --tungsteno-testo: #a8440c;
  --menta: #86cfc4;
  --bianco: #f6f7f3;
  --inchiostro: #07201f;
  --e-elastico: cubic-bezier(0.34, 1.9, 0.45, 1);
  --e-uscita: cubic-bezier(0.23, 1, 0.32, 1);

  /* day: script.js sets --fondo while the paper warms up, and puts .notte on <main> when the night falls */
  --fondo: var(--carta);
  --testo: var(--inchiostro);
  --tenue: #3f5452;
  --spento: rgba(7, 32, 31, 0.24);
  --accento: var(--tungsteno-testo);
  --pb: var(--inchiostro);
  --pt: var(--bianco);
  --pi: var(--tungsteno);
  --ott: var(--petrolio);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
}

body {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--fondo);
  color: var(--testo);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gioco {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--testo);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.gioco.notte {
  --testo: var(--bianco);
  --tenue: var(--menta);
  --spento: rgba(246, 247, 243, 0.24);
  --accento: var(--tungsteno-chiaro);
  --pb: var(--bianco);
  --pt: var(--inchiostro);
  --pi: var(--tungsteno-ombra);
  --ott: var(--p900);
}

.tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  outline: none;
}

/* ------------------------------------------------------------------ the top bar: the word, the score, two buttons */
.hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  pointer-events: none;
}
.parola,
.conto {
  position: relative;
  z-index: 3;
}
.parola {
  display: flex;
  margin: 2px 0 0;
  font-size: clamp(18px, 0.9rem + 0.9vw, 30px);
  font-weight: 660;
  line-height: 1;
  letter-spacing: 0.005em;
}
.parola span {
  --w: 106;
  display: inline-block;
  font-stretch: calc(var(--w) * 1%);
  color: var(--spento);
  transform-origin: 50% 100%;
  transition: color 0.3s ease;
}
.parola span.dopo {
  color: color-mix(in srgb, var(--testo) 58%, transparent);
}
.parola span.presa {
  color: var(--accento);
}
.destra {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 18px);
}
.conto {
  text-align: right;
}
.punti {
  margin: 0;
  font-size: clamp(22px, 1rem + 1.5vw, 40px);
  font-weight: 680;
  font-stretch: 112%;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.record {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 560;
  font-stretch: 108%;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.tasti {
  position: relative;
  z-index: 6;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.tondo {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--testo);
  box-shadow: inset 0 0 0 1.5px var(--spento);
  cursor: pointer;
  transition: transform 0.5s var(--e-elastico), box-shadow 0.2s ease, color 0.3s ease, opacity 0.2s ease;
}
.tondo svg {
  width: 18px;
  height: 18px;
}
.tondo .croce { display: none; }
.tondo[aria-pressed='false'] .onde { display: none; }
.tondo[aria-pressed='false'] .croce { display: inline; }
.tondo[data-pausa][aria-hidden='true'] {
  opacity: 0;
  pointer-events: none;
}
.tondo:focus-visible,
.pillola:focus-visible {
  outline: 2px solid var(--testo);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .tondo:hover {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: inset 0 0 0 1.5px var(--testo);
  }
}
.tondo:active {
  transform: scale(0.94);
}

/* ------------------------------------------------------------------ start, pause and end: over the sky, above the line */
.velo {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
  opacity: 0;
  pointer-events: none;
}
.schermo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  height: var(--cielo, 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: 70px 16px 18px;
  text-align: center;
  pointer-events: none;
}
.schermo > * {
  pointer-events: auto;
}
.schermo[hidden] {
  display: none;
}
.titolo {
  margin: 0;
  max-width: 100%;
  font-size: clamp(2.5rem, min(12.5vw, 15vh), 8.2rem);
  font-weight: 680;
  font-stretch: 112%;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.titolo--medio {
  font-size: clamp(2.2rem, min(10vw, 12vh), 6rem);
}
.titolo--punti {
  --w: 112;
  font-stretch: calc(var(--w) * 1%);
  font-size: clamp(3.4rem, min(18vw, 20vh), 10rem);
  font-variant-numeric: tabular-nums;
}
/* the title words rise out of a mask, letter by letter */
.parola-m {
  display: inline-block;
  overflow: clip;
  padding: 0.04em 0.03em 0.12em;
  margin: -0.04em -0.03em -0.12em;
  vertical-align: top;
}
.lettera {
  display: inline-block;
}
.come {
  margin: 0;
  max-width: 40em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: clamp(14px, 0.78rem + 0.3vw, 17px);
  font-weight: 520;
  line-height: 1.4;
  color: var(--tenue);
}
.gruppo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 2em;
  height: 2em;
  padding: 0 0.55em;
  border-radius: 7px;
  font: inherit;
  font-size: 0.8em;
  font-weight: 640;
  color: var(--testo);
  box-shadow: inset 0 0 0 1.5px var(--spento), inset 0 -2.5px 0 var(--spento);
}
kbd svg {
  width: 1em;
  height: 1em;
}
.meta,
.record-fine,
.etichetta {
  margin: 0;
  font-size: clamp(14px, 0.8rem + 0.35vw, 18px);
  font-weight: 560;
  font-stretch: 104%;
  color: var(--testo);
}
.meta b,
.record-fine b {
  font-weight: 680;
  font-stretch: 112%;
  color: var(--accento);
}
.etichetta {
  color: var(--tenue);
}
.record-fine {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ the elastic pill of the site */
.pillola {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 4px;
  padding: 0 28px 0 24px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pt);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 640;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;
}
.pillola::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--pb);
  transition: inset 0.6s var(--e-elastico), transform 0.16s var(--e-uscita), background-color 0.3s ease;
}
.pillola__testo {
  display: block;
  text-align: center;
  transition: font-stretch 0.6s var(--e-elastico);
}
/* the label at its widest, invisible and zero high: it keeps the room, so nothing around it moves */
.pillola__testo::before {
  content: attr(data-testo);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-stretch: 125%;
}
.pillola__tasto {
  display: grid;
  place-items: center;
  color: var(--pi);
  transition: transform 0.6s var(--e-elastico), color 0.3s ease;
}
.pillola__tasto svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .pillola:hover::before {
    inset: -2px -7px;
  }
  .pillola:hover .pillola__testo {
    font-stretch: 125%;
  }
  .pillola:hover .pillola__tasto {
    transform: translateX(2px) rotate(-14deg);
  }
}
.pillola:active::before {
  transform: scale(1.03, 0.88);
}

/* ------------------------------------------------------------------ the shutter */
.otturatore {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  pointer-events: none;
  visibility: hidden;
}
/* script.js puts the columns above the frame with GSAP (it would not read a percentage from here) and then shows them */
.otturatore.pronto {
  visibility: visible;
}
.otturatore i {
  display: block;
  height: 100%;
  margin-right: -1px;
  background: var(--ott);
}
.otturatore i:nth-child(1) { flex: 22; }
.otturatore i:nth-child(2) { flex: 18; }
.otturatore i:nth-child(3) { flex: 38; }
.otturatore i:nth-child(4) { flex: 22; }

@media (prefers-reduced-motion: reduce) {
  .pillola::before,
  .pillola__testo,
  .pillola__tasto,
  .tondo {
    transition: none;
  }
}

/* ------------------------------------------------------------------ the preview of the section (?anteprima=1): it plays by itself */
.anteprima .tasti,
.anteprima .record,
.anteprima .schermo,
.anteprima .velo {
  display: none !important;
}
/* in the preview everything follows the clock of the run, so the loop is always the same: no CSS transitions */
.anteprima *,
.anteprima *::before {
  transition: none !important;
}
.anteprima .otturatore i {
  background: var(--petrolio);
}
.anteprima .tela {
  pointer-events: none;
}