/* The folded ribbon title: one canvas as big as the window over a warm sheet of card. Every colour is a variable
   here: the card, the five papers of the ribbons (each one has a coloured face and a paler back, which shows
   wherever the ribbon is folded over), the shadows and the small text. */
:root {
  --card: #f1ebe0;           /* the background */
  --card-edge: #e0d6c6;      /* the darker card at the edges */
  --red: #e2502f;            /* the papers: the coloured face... */
  --red-back: #f4a48d;       /* ...and the back, seen where the ribbon is folded over */
  --saffron: #eda62a;
  --saffron-back: #f8d38c;
  --green: #23806b;
  --green-back: #86c4b2;
  --blue: #3550c0;
  --blue-back: #9fb0ec;
  --pink: #e57a98;
  --pink-back: #f6c3d0;
  --shadow: #4a3420;         /* the shadows on the card */
  --text: #2b2520;           /* the line under the title */
  --hint: #8c8172;           /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--card);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(120% 95% at 50% 44%, var(--card) 50%, var(--card-edge) 100%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.palco {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* the words are drawn by the ribbons: this copy is only for screen readers */
.leggibile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

.sotto {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 70%;
  margin: 0;
  font-family: 'Archivo Variable', 'Arial Narrow', sans-serif;
  font-size: clamp(12px, 1.3vw, 18px);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  pointer-events: none;
}
.sotto .lettera {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Archivo Variable', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
  opacity: 0;
}