/* ==========================================================================
   PLOP! — LEAVE A MARK.

   One sheet of paper, taped to the table, that you are allowed to draw on. The
   containment is the whole design: everywhere else on this page a drag moves an
   object or scrolls the document, and here — and only here — it leaves a line.

   touch-action:none is on the canvas and nowhere else, so a finger dragged
   across any other part of the page still scrolls it.
   ========================================================================== */

.draw { margin-top: clamp(3rem, 8vw, 6rem); }

.draw__sheet {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: #fff;
  box-shadow: var(--lift-photo);
  rotate: -1.2deg;
}
/* two pieces of tape holding it down */
.draw__sheet::before,
.draw__sheet::after {
  content: '';
  position: absolute;
  top: -.9rem;
  width: 6.5rem;
  height: 1.8rem;
  background: rgba(49, 191, 195, .5);
  clip-path: polygon(4% 10%, 96% 0, 100% 90%, 0 100%);
}
.draw__sheet::before { left: 8%; rotate: -6deg; }
.draw__sheet::after  { right: 8%; rotate: 5deg; background: rgba(240, 141, 168, .5); }

.draw__title { color: var(--ink); }
.draw__hint { font-size: var(--t-small); color: var(--ink-soft); margin-top: .3rem; }

.draw__canvas {
  display: block;
  width: 100%;
  height: clamp(15rem, 34vw, 22rem);
  margin-top: .9rem;
  background: repeating-linear-gradient(
    to bottom,
    #fff 0 27px,
    rgba(21, 87, 213, .10) 27px 28px
  );
  border: 1px dashed rgba(23, 23, 23, .22);
  touch-action: none;               /* the one element on the page that claims the gesture */
  cursor: crosshair;
}

.draw__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}
.draw__colours { display: flex; gap: .5rem; }

/* a crayon: a stubby paper-wrapped stick with a cut tip */
.crayon {
  width: 2.1rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  background: var(--c);
  cursor: pointer;
  rotate: var(--tilt, 0deg);
  box-shadow: var(--lift-scrap);
  clip-path: polygon(50% 0, 78% 22%, 78% 100%, 22% 100%, 22% 22%);
  transition: transform var(--t-fast) var(--snap);
}
.crayon:hover { transform: translateY(-3px); }
.crayon[aria-pressed="true"] {
  transform: translateY(-7px);
  box-shadow: var(--lift-card);
}
/* the paper band round the middle */
.crayon::after {
  content: '';
  position: absolute;
  inset: 42% 0 30%;
  background: rgba(255, 255, 255, .55);
}
.crayon { position: relative; }

.draw__gone { margin-top: .6rem; }

@media (max-width: 899px) {
  .draw__sheet { rotate: -.8deg; }
  .draw__canvas { height: 15rem; }
}