/* The dinosaur-bitten logo: a stage as big as the window, an SVG the script fills with the logo and the bite, and a
   dinosaur drawn once in the page. Every colour is a variable here: the logo, the blood, the dinosaur. */
:root {
  --paper: #f4eee2;        /* the background */
  --ink: #18161c;          /* the logo */
  --blood: #e0142f;        /* the blood */
  --blood-deep: #8a0618;   /* the inside of the bite */
  --dino: #4fae5b;         /* the dinosaur */
  --dino-deep: #2f7d43;    /* its spikes, spots, far leg and far arm */
  --dino-line: #1d4a2c;    /* its outline */
  --belly: #d9ec9c;        /* its belly */
  --tooth: #fffaf0;        /* its teeth and claws */
  --mouth: #6d0f22;        /* inside its mouth */
  --tongue: #e8697d;       /* its tongue */
  --eye: #f2b33a;          /* its eyes */
  --blush: #f59a8e;        /* its cheeks */
  --dust: #d8ccb6;         /* the dust it raises */
  --hint: #8c8273;         /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--paper);
  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: 'Unbounded Variable', 'Arial Black', sans-serif;
  font-weight: 800;
}

.lettera { fill: var(--ink); }
.briciola { fill: var(--ink); }
.crepa {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ferita-scura { stop-color: var(--blood-deep); }
.ferita { stop-color: var(--blood); }
.ferita--via { stop-opacity: 0; }
.sangue { fill: var(--blood); }
.lucido { fill: #fff; opacity: 0.55; }
.pozza { fill: var(--blood); }

/* the dinosaur: flat colours with an outline, so that every piece reads even over another piece of the same green */
.dino,
.dino-lontano,
.dino-cresta,
.unghia,
.occhio {
  stroke: var(--dino-line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dino { fill: var(--dino); }
.dino--pieno { stroke: none; }
.dino-lontano { fill: var(--dino-deep); }
.dino-cresta { fill: var(--dino-deep); stroke-width: 2.4; }
.dino-scuro { fill: var(--dino-line); }
.dino-pancia { fill: var(--belly); }
.dino-macchia { fill: var(--dino-deep); opacity: 0.5; }
.dino-righe,
.dino-linea,
.dino-lucido {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dino-righe { stroke: var(--dino-deep); stroke-width: 2.4; opacity: 0.55; }
.dino-linea { stroke: var(--dino-line); stroke-width: 3; }
.dino-lucido { stroke: #fff; stroke-width: 5; opacity: 0.25; }
.dino-ombra { fill: var(--ink); opacity: 0.12; }
.dente { fill: var(--tooth); stroke: var(--dino-line); stroke-width: 1; stroke-linejoin: round; }
.unghia { fill: var(--tooth); stroke-width: 1.4; }
.bocca { fill: var(--mouth); }
.lingua { fill: var(--tongue); }
.guancia { fill: var(--blush); opacity: 0.75; }
.orbita { fill: var(--dino-deep); opacity: 0.4; }
.occhio { fill: var(--tooth); stroke-width: 2.2; }
.iride { fill: var(--eye); }
.pupilla { fill: var(--ink); }
.riflesso { fill: #fff; }
.palpebra { fill: var(--dino); }
/* the little arms are two strokes: a dark wide one for the outline and the green one on top */
.braccio-bordo,
.braccio {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.braccio-bordo { stroke: var(--dino-line); stroke-width: 14; }
.braccio { stroke: var(--dino); stroke-width: 8.4; }
.braccio--lontano { stroke: var(--dino-deep); }
.ciglio {
  fill: none;
  stroke: var(--dino-line);
  stroke-width: 5;
  stroke-linecap: round;
}
.polvere { fill: var(--dust); }
.onda {
  fill: none;
  stroke: var(--dust);
}
.ruggito,
.colpo {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
}

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