/* The UFO-abducted logo: a stage as big as the window, an SVG the script fills with the logo and the beam, and a
   flying saucer with its pilot drawn once in the page. Every colour is a variable here. */
:root {
  --sky: #eef0f8;          /* the background */
  --dusk: #2a3590;         /* the evening that falls when the saucer comes */
  --ink: #1c1838;          /* the logo */
  --scan: #4fe0b6;         /* the thin scanner beam and the letters it reads */
  --beam: #ffd84a;         /* the tractor beam, its rings and the trail */
  --ufo: #c9d1de;          /* the saucer */
  --ufo-light: #e9edf4;    /* its top ring and the rim of the dome */
  --ufo-deep: #8a95ab;     /* its bowl and the band of the rim */
  --ufo-dark: #5f6a86;     /* the shade of the metal, under the rim and at the edges */
  --patch: #b7a58c;        /* the patch riveted on the disc */
  --heat: #ffb26b;         /* the heat under the engine */
  --porthole: #2e3a66;     /* the glass of the portholes */
  --ufo-line: #23263f;     /* the outline of everything drawn */
  --light-off: #4b5170;    /* the rim lights, off */
  --light-on: #ff8a3d;     /* the rim lights, on */
  --glass: #a9dcff;        /* the dome */
  --cabin: #d6f6ff;        /* the light of the cabin, from the console */
  --panel: #5a6098;        /* the console */
  --panel-top: #8088c4;    /* its top */
  --display: #173c48;      /* the little screen */
  --alien: #8ad65c;        /* the pilot */
  --alien-deep: #57a33b;   /* its spots */
  --suit: #8a6cf0;         /* its suit */
  --suit-light: #c3b4ff;   /* its collar and cuffs */
  --strap: #5b45c4;        /* its straps */
  --iris: #7b62d6;         /* the light of its eyes */
  --tongue: #ff7d9c;       /* its tongue */
  --tip: #ff6f91;          /* the tips of its antennae */
  --eye: #3a2a6e;          /* its eyes */
  --blush: #ff9aa8;        /* its cheeks */
  --chute: #ff6b5a;        /* the parachute */
  --chute-light: #fff1e4;  /* the stripes of the parachute */
  --dust: #cdd2e4;         /* the dust and the smoke */
  --hint: #7b8098;         /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

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

.scena {
  position: relative;
  height: var(--screen);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* the logo is written in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Sora Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}

.sera { stop-color: var(--dusk); }
.lettera { fill: var(--ink); }
/* the empty socket of a letter: the sign before it lights up, and the hole once the letter is gone */
.presa {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scintilla,
.molla {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
}
.ombra { fill: url(#shadow-fill); opacity: 0; }
.ombra-stop { stop-color: var(--ink); }

/* the beams */
.raggio-stop { stop-color: var(--beam); }
.raggio {
  stroke: var(--beam);
  stroke-opacity: 0.9;
  stroke-linejoin: round;
}
.pozza-luce { fill: var(--beam); }
.anello { fill: none; stroke: var(--beam); }
.granello { fill: var(--beam); }
.scansione-fascio { fill: var(--scan); opacity: 0.35; }
.scansione-riga { stroke: var(--scan); stroke-linecap: round; }
.scia { fill: url(#trail-fill); }
.fumo,
.polvere { fill: var(--dust); }

/* the saucer: flat colours with an outline, so that every piece reads even over another of the same grey */
.ufo,
.ufo-chiaro,
.ufo-scuro,
.ufo-fascia,
.botola,
.luce,
.cupola,
.tuta,
.alieno,
.occhio,
.palpebra,
.mano,
.antenna-punta,
.paracadute,
.ufo-conca,
.motore,
.aletta,
.oblo-cornice,
.toppa,
.parabola,
.parabola-dietro,
.parabola-testa,
.bandierina,
.leva,
.leva-pomo,
.cruscotto,
.cruscotto-piano,
.schermo,
.tasto,
.colletto,
.stemma,
.bocca-aperta,
.lingua,
.dentino,
.denti,
.goccia,
.antenna-giunto {
  stroke: var(--ufo-line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.metallo { stop-color: var(--ufo); }
.metallo-chiaro { stop-color: var(--ufo-light); }
.metallo-scuro { stop-color: var(--ufo-deep); }
.metallo-fondo { stop-color: var(--ufo-dark); }
.ufo { fill: url(#metal-fill); }
.ufo-chiaro { fill: var(--ufo-light); }
.ufo-scuro { fill: var(--ufo-deep); }
.ufo-fascia { fill: url(#band-fill); }
.ufo-conca { fill: url(#bowl-fill); }
.ufo-ombra-fascia { fill: none; stroke: var(--ufo-line); stroke-width: 10; opacity: 0.22; }
.ufo-solco { fill: none; stroke: var(--ufo-line); stroke-width: 1.6; opacity: 0.28; }
.rivetti { fill: none; stroke: var(--ufo-line); stroke-width: 3.4; stroke-linecap: round; opacity: 0.55; }
.rivetti--fini { stroke-width: 2.6; }
.cucitura { fill: none; stroke: var(--ufo-line); stroke-width: 1.6; opacity: 0.4; }
.graffio { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.65; }
.toppa { fill: var(--patch); stroke-width: 2; }
.ammaccatura { fill: var(--ufo-dark); opacity: 0.55; }
.ammaccatura-luce { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: 0.7; }
.oblo-cornice { fill: var(--ufo-light); stroke-width: 2; }
.oblo-vetro { fill: var(--porthole); stroke: var(--ufo-line); stroke-width: 1.4; }
.oblo-lucido { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.motore { fill: url(#bowl-fill); stroke-width: 2.6; }
.aletta { fill: var(--ufo-deep); stroke-width: 2.2; }
.calore { fill: none; stroke: var(--heat); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.parabola { fill: var(--ufo-light); stroke-width: 2.2; }
.parabola-dietro { fill: var(--ufo-deep); stroke-width: 2.2; }
.parabola-braccio,
.antennina { fill: none; stroke: var(--ufo-line); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.parabola-testa { fill: var(--tip); stroke-width: 1.6; }
.bandierina { fill: var(--tip); stroke-width: 2; }
.ufo-righe,
.ufo-lucido,
.tuta-righe,
.alieno-lucido,
.cupola-lucido,
.antenna,
.bocca-linea,
.fili {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ufo-righe { stroke: var(--ufo-line); stroke-width: 2; opacity: 0.45; }
.ufo-lucido { stroke: #fff; stroke-width: 5; opacity: 0.7; }
.botola { fill: var(--ufo-line); stroke-width: 2.4; }
.botola-luce { fill: var(--beam); }
.botola-iride { fill: none; stroke: var(--ufo-light); stroke-width: 1.2; stroke-linecap: round; opacity: 0.35; }
.luce { fill: var(--light-off); stroke-width: 1.6; }
.luce-accesa { fill: var(--light-on); }
.cupola-dietro { fill: url(#cabin-fill); opacity: 0.6; }
.cabina { stop-color: var(--glass); }
.cabina-luce { stop-color: var(--cabin); }
.luce-cabina { fill: url(#cabin-beam); }
.cupola-scia { fill: #fff; opacity: 0.3; }
.cupola-lucido--punto { stroke-width: 4; opacity: 0.6; }
.guarnizione { fill: none; stroke: var(--ufo-line); stroke-width: 3.2; stroke-linecap: round; opacity: 0.75; }

/* the controls and the console */
.leva { fill: var(--ufo-deep); stroke-width: 1.6; }
.leva-pomo { fill: var(--beam); stroke-width: 2; }
.leva-pomo--cloche { fill: var(--tip); }
.cruscotto { fill: var(--panel); stroke-width: 2.6; }
.cruscotto-piano { fill: var(--panel-top); stroke-width: 1.8; }
.schermo { fill: var(--display); stroke-width: 1.8; }
.schermo-griglia { fill: none; stroke: var(--scan); stroke-width: 0.6; opacity: 0.35; }
.onda { fill: none; stroke: var(--scan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tasto { stroke-width: 1.4; }
.tasto--a { fill: var(--tip); }
.tasto--b { fill: var(--scan); }
.tasto--c { fill: var(--beam); }
.tasto--grande { fill: var(--light-on); }
.tasto-premuto { fill: #fff; opacity: 0; }
.cupola { fill: var(--glass); fill-opacity: 0.22; }
.cupola-lucido { stroke: #fff; stroke-width: 6; opacity: 0.75; }
.cupola-lucido--fine { stroke-width: 3.5; opacity: 0.55; }

/* the pilot */
.tuta { fill: var(--suit); }
.tuta-righe { stroke: var(--ufo-line); stroke-width: 2.2; opacity: 0.45; }
.stemma { fill: var(--beam); stroke-width: 1.6; }
.stemma-segno { fill: none; stroke: var(--ufo-line); stroke-width: 1.2; stroke-linecap: round; }
.colletto { fill: var(--suit-light); stroke-width: 2.4; }
.cinghia-bordo,
.cinghia,
.polsino-bordo,
.polsino {
  fill: none;
  stroke-linecap: round;
}
.cinghia-bordo { stroke: var(--ufo-line); stroke-width: 7.4; }
.cinghia { stroke: var(--strap); stroke-width: 4; }
.polsino-bordo { stroke: var(--ufo-line); stroke-width: 6.6; }
.polsino { stroke: var(--suit-light); stroke-width: 3.2; }
.alieno { fill: var(--alien); }
.alieno-macchia { fill: var(--alien-deep); opacity: 0.6; }
.alieno-mento { fill: var(--alien-deep); opacity: 0.35; }
.antenna-giunto { fill: var(--alien-deep); stroke-width: 1.6; }
.antenna-lucido { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.sopracciglio { fill: none; stroke: var(--ufo-line); stroke-width: 3; stroke-linecap: round; }
.bocca-aperta { fill: var(--ufo-line); stroke: none; }
.bocca-bordo { fill: none; stroke: var(--ufo-line); stroke-width: 2.4; stroke-linejoin: round; }
.lingua { fill: var(--tongue); stroke-width: 1.6; }
.lingua-riga { fill: none; stroke: var(--ufo-line); stroke-width: 1.2; stroke-linecap: round; opacity: 0.6; }
.dentino { fill: #fff; stroke-width: 1; }
.denti { fill: #fff; stroke-width: 2.2; }
.denti-righe { fill: none; stroke: var(--ufo-line); stroke-width: 1.2; }
.goccia { fill: var(--cabin); stroke-width: 1.6; opacity: 0; }
.alieno-lucido { stroke: #fff; stroke-width: 4; opacity: 0.4; }
.antenna { stroke: var(--ufo-line); stroke-width: 3; }
.antenna-punta { fill: var(--tip); stroke-width: 2.4; }
.guancia { fill: var(--blush); }
.occhio { fill: #fff; stroke-width: 2.4; }
.iride { fill: url(#iris-fill); stroke: var(--eye); stroke-width: 1.2; }
.iride-chiara { stop-color: var(--iris); }
.iride-scura { stop-color: var(--eye); }
.pupilla { fill: var(--ufo-line); }
.riflesso { fill: #fff; }
.palpebra { fill: var(--alien); stroke-width: 2.4; }
.bocca-linea { stroke: var(--ufo-line); stroke-width: 2.6; }
.bocca-o { fill: var(--ufo-line); }
.braccio-bordo,
.braccio {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.braccio-bordo { stroke: var(--ufo-line); stroke-width: 10; }
.braccio { stroke: var(--suit); stroke-width: 5.2; }
.mano { fill: var(--alien); stroke-width: 2.2; }
.mano-dita { fill: none; stroke: var(--ufo-line); stroke-width: 1.3; stroke-linecap: round; opacity: 0.7; }

/* the parachute the stolen letter comes back with */
.paracadute { fill: var(--chute); }
.paracadute-righe { fill: var(--chute-light); }
.fili { stroke: var(--ufo-line); opacity: 0.7; }

.coriandolo-a { fill: var(--light-on); }
.coriandolo-b { fill: var(--tip); }
.coriandolo-c { fill: var(--beam); }
.coriandolo-d { fill: var(--scan); }

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