/* The title written in chalk: a canvas for the slate and the chalk, an SVG on top for the frame, the tray, the
   stick of chalk and the eraser. Every colour is a variable here. */
:root {
  --board: #2c4a3b;         /* the green slate */
  --board-dark: #1b3127;    /* the slate in shadow: blotches, the corners, the edge under the frame */
  --board-light: #46695a;   /* the lighter blotches of the slate */
  --chalk: #f2efe6;         /* the chalk: the writing, the stick, the dust */
  --chalk-light: #fffdf7;   /* the light side of the stick */
  --chalk-shade: #c9c3b2;   /* the shaded side of the stick */
  --haze: #e9efe8;          /* the white haze the eraser leaves on the slate */
  --wood: #a86f3d;          /* the wooden frame and the tray */
  --wood-light: #d29a5f;    /* the lit edge of the wood */
  --wood-dark: #6a3f1d;     /* the wood in shadow */
  --eraser: #5f7f9c;        /* the painted back of the eraser */
  --eraser-light: #86a4bd;  /* its lit edge */
  --eraser-dark: #3b546b;   /* its shaded edge */
  --felt: #d9d5ca;          /* the felt under the eraser, grey with chalk */
  --felt-dark: #9f9a8d;     /* the felt in shadow */
  --hint: rgba(242, 239, 230, 0.55); /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

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

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

.lavagna,
.cornice {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.cornice {
  overflow: visible;
  pointer-events: none;
}

/* the words are in chalk: 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;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hint-top, 30px);
  margin: 0;
  font-family: 'Familjen Grotesk Variable', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
  opacity: 0;
}