/* The shortbread title: a stage as big as the window, an SVG the script fills. Every colour is a variable here:
   the kitchen, the dough before and after the oven, the tools, the oven, the icing and the sprinkles. */
:root {
  --counter: #f4e6d2;       /* the background: the kitchen counter */
  --counter-deep: #e8d3b8;  /* the counter towards the corners */
  --tile: #e9d7bf;          /* the lines of the tiles */
  --board: #dcae74;         /* the wooden board */
  --board-deep: #b9844b;    /* its grain and edge */
  --flour: #fffdf7;         /* the flour */
  --dough: #f7dfb4;         /* the raw dough */
  --dough-edge: #e3c08a;    /* the edge of the raw dough and the cuts */
  --baked: #f2c77f;         /* the biscuit, once baked */
  --golden: #d98a35;        /* its golden edges */
  --toasted: #9a4f1c;       /* the edges after a long bake */
  --speck: #b8752f;         /* the specks of the crumb */
  --crumb-inside: #fbe7c2;  /* the inside of a bitten biscuit */
  --shadow: #6b4523;        /* the shadows */
  --pin: #e2b47a;           /* the rolling pin */
  --pin-light: #f6d6a6;     /* its highlight */
  --pin-deep: #a96c35;      /* its sides and handles */
  --steel: #b9c0c6;         /* the cutter */
  --steel-deep: #6d767e;    /* its inner edge */
  --grip: #d9483b;          /* the red grip of the cutter */
  --tray: #8b949b;          /* the baking tray */
  --tray-deep: #5d666d;     /* its rim */
  --parchment: #f6ecd8;     /* the baking paper */
  --oven: #2a2420;          /* the oven door */
  --oven-light: #4a403a;    /* its bevel */
  --oven-inside: #1a1210;   /* inside the oven */
  --heat: #ff7a2e;          /* the heating coil, red hot */
  --warm: #ffb25e;          /* the warm light inside */
  --icing: #fffaf3;         /* the icing */
  --icing-shade: #c9a77c;   /* the shade under the icing */
  --bag: #f3eefb;           /* the piping bag */
  --bag-deep: #b9aed1;      /* its folds */
  --steam: #ffffff;         /* the steam */
  --sprinkle-1: #f2789a;    /* the sprinkles */
  --sprinkle-2: #5fc4a5;
  --sprinkle-3: #f6c445;
  --sprinkle-4: #6aa6e6;
  --sprinkle-5: #fdf6ea;
  --ink: #5a3418;           /* the bakery's name */
  --hint: #9b7e5c;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background-color: var(--counter);
  background-image:
    radial-gradient(120% 95% at 50% 45%, transparent 50%, var(--counter-deep)),
    linear-gradient(var(--tile) 2px, transparent 2px),
    linear-gradient(90deg, var(--tile) 2px, transparent 2px);
  background-size: 100% 100%, 120px 120px, 120px 120px;
  background-position: 0 0, -1px -1px, -1px -1px;
  overflow: hidden;
}

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

/* the biscuits are cut in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Fredoka Variable', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  font-weight: 700;
}

/* the board and the flour */
.tavola { fill: var(--board); stroke: var(--board-deep); stroke-width: 3; }
.tavola-vena { fill: none; stroke: var(--board-deep); stroke-linecap: round; opacity: 0.35; }
.farina { fill: var(--flour); }
.ombra { fill: var(--shadow); }

/* the dough */
.pasta { fill: var(--dough); stroke: var(--dough-edge); stroke-width: 2.5; }
.pasta-segno { fill: none; stroke: var(--dough-edge); stroke-linecap: round; opacity: 0.6; }

/* the rolling pin */
.mattarello { fill: url(#barrel); stroke: var(--pin-deep); stroke-width: 2.5; }
.mattarello-vena { fill: none; stroke: var(--pin-deep); stroke-linecap: round; opacity: 0.4; }
.manico { fill: var(--pin-deep); stroke: #7d4c22; stroke-width: 2.5; }
.manico-luce { fill: #fff; opacity: 0.22; }
.stop-legno { stop-color: var(--pin); }
.stop-legno-luce { stop-color: var(--pin-light); }
.stop-legno-scuro { stop-color: var(--pin-deep); }

/* the cutter */
.stampino { fill: none; stroke: var(--steel); stroke-linejoin: round; }
.stampino-dentro { fill: none; stroke: var(--steel-deep); stroke-linejoin: round; }
.stampino-luce { fill: none; stroke: #fff; stroke-linejoin: round; opacity: 0.7; }
.impugnatura { fill: var(--grip); stroke: #9e2a20; stroke-width: 3; }
.impugnatura-luce { fill: #fff; opacity: 0.3; }

/* the tray */
.teglia { fill: var(--tray); stroke: var(--tray-deep); stroke-width: 3; }
.teglia-fondo { fill: url(#steel); }
.carta { fill: var(--parchment); }
.carta-piega { fill: none; stroke: #e4d5b8; stroke-linecap: round; }
.stop-acciaio { stop-color: var(--tray); }
.stop-acciaio-luce { stop-color: #c6cdd2; }

/* the biscuits */
.biscotto-bordo { stroke-linejoin: round; }
.biscotto { stroke-linejoin: round; }
.biscotto-grana { fill: url(#crumb); }
.briciola-a { fill: var(--speck); opacity: 0.55; }
.briciola-b { fill: #fff; opacity: 0.45; }
.taglio { fill: none; stroke: var(--dough-edge); stroke-linejoin: round; }
.dentro { fill: var(--crumb-inside); }
.glassa { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* the oven */
.forno { fill: var(--oven); fill-rule: evenodd; }
.forno-cornice { fill: none; stroke: var(--oven-light); }
.forno-guarnizione { fill: none; stroke: #0d0907; }
.forno-maniglia { fill: url(#steel); stroke: var(--tray-deep); stroke-width: 3; }
.forno-vetro { fill: #ffffff; opacity: 0.08; }
.forno-dentro { fill: var(--oven-inside); }
.forno-griglia { fill: none; stroke: #3a2c26; stroke-linecap: round; }
.forno-ventola { fill: none; stroke: #33261f; stroke-linecap: round; }
.resistenza { fill: none; stroke: #40332c; stroke-linecap: round; stroke-linejoin: round; }
.resistenza-alone { fill: none; stroke: var(--heat); stroke-linecap: round; stroke-linejoin: round; }
.luce-calda { mix-blend-mode: multiply; }
.luce-alone { mix-blend-mode: screen; }
.stop-forno-forte { stop-color: var(--warm); stop-opacity: 0.9; }
.stop-forno { stop-color: var(--warm); stop-opacity: 0.55; }
.stop-forno-via { stop-color: var(--heat); stop-opacity: 0.35; }
.manopola { fill: var(--oven-light); stroke: #0d0907; stroke-width: 3; }
.manopola-segno { stroke: var(--counter); stroke-linecap: round; }

/* the steam, the piping bag, the crumbs */
.vapore { fill: none; stroke: var(--steam); stroke-linecap: round; }
.sacca { fill: var(--bag); stroke: var(--bag-deep); stroke-width: 2.5; stroke-linejoin: round; }
.sacca-piega { fill: none; stroke: var(--bag-deep); stroke-linecap: round; }
.beccuccio { fill: #c9d0d5; stroke: var(--tray-deep); stroke-width: 2; }

/* the bakery's name */
.insegna {
  fill: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-style: italic;
  font-weight: 600;
}
.insegna-piccola {
  fill: var(--hint);
  font-family: 'Fredoka Variable', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font: 500 13px/1.3 'Fredoka Variable', sans-serif;
  letter-spacing: 0.02em;
  color: var(--hint);
  opacity: 0;
  pointer-events: none;
}