* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #efe6d8;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  color: #3a3027;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* the room: a warm wall, light coming from up and left across the desk */
body {
  background:
    radial-gradient(120% 80% at 20% 0%, #fbf4e7 0%, #efe6d8 45%, #d9cbb6 100%);
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 12px;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  gap: 8px;
  /* the whole room is the play surface on a touchscreen: no scrolling it,
     no pinching it, no double-tap zoom on a paint pot */
  touch-action: none;
}

/* ---------- top: the picture you were given, and sound ---------- */

#topbar {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

#refBox .label {
  font-size: 10px;
  letter-spacing: 2.4px;
  opacity: 0.65;
  margin-bottom: 4px;
}

#ref {
  width: 66px;
  height: 88px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(60, 40, 20, 0.28);
  display: block;
}

#soundBtn {
  font: inherit;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #6b5b47;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(120, 96, 68, 0.3);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
}

#soundBtn[aria-pressed="true"] { color: #2f6f3e; border-color: #2f9e44; }

/* ---------- the canvas: a rectangle standing up, and the biggest thing here ---------- */

#stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#frame {
  position: relative;
  height: 100%;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  border-radius: 4px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 34px rgba(70, 48, 24, 0.3),
    0 2px 6px rgba(70, 48, 24, 0.2);
}

#frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: block;
  touch-action: none;
}

#cursor { pointer-events: none; }
#paint { cursor: none; }

/* ---------- paints and the water pot ---------- */

#paintsRow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 0;
}

#paints {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}

.blob {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(90, 70, 45, 0.25);
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(70, 48, 24, 0.25);
}

.blob.on {
  border-color: #3a3027;
  transform: translateY(-3px);
}

#waterBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

#waterBtn .pot {
  width: 30px;
  height: 26px;
  border-radius: 4px 4px 9px 9px;
  background: linear-gradient(#cdeafd, #7fc4ee 55%, #4a9fd4);
  border: 2px solid rgba(60, 90, 110, 0.4);
  box-shadow: 0 2px 4px rgba(70, 48, 24, 0.25);
}

#waterBtn.clean .pot { filter: brightness(1.12); }

.cap {
  font-size: 9px;
  letter-spacing: 1.5px;
  opacity: 0.7;
}

/* ---------- the three brushes: a small row under a big painting ---------- */

#brushRow {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

#brushes { display: flex; align-items: flex-end; gap: 16px; }

.brush {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  opacity: 0.55;
}

.brush.on { opacity: 1; }
.brush.on .cap { opacity: 1; font-weight: 600; }

/* each brush is drawn at its own width, so the three read as three sizes */
.bristle {
  display: block;
  background: linear-gradient(#8a5a2b, #6b431f);
  border-radius: 2px 2px 1px 1px;
  position: relative;
}

.bristle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #b9a184;
}

.bristle.thin   { width: 4px;  height: 18px; }
.bristle.medium { width: 9px;  height: 20px; }
.bristle.fat    { width: 17px; height: 22px; }

.brush.on .bristle { background: linear-gradient(#a8702f, #7d4f21); }

#doneBtn {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  background: #2f9e44;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 #24762f;
}

#doneBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #24762f; }

/* ---------- start card and the score at the end ---------- */

#start, #result {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(247, 240, 228, 0.96);
  overflow: auto;
  /* a card can scroll if a small screen needs it, but never zoom */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.hidden { display: none !important; }

#start h1 {
  margin: 0;
  font-size: 42px;
  letter-spacing: 5px;
}

#start .tag {
  margin: 0;
  font-size: 14px;
  letter-spacing: 2px;
  opacity: 0.75;
}

#start .how {
  list-style: none;
  padding: 0;
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.9;
}

#start .note {
  max-width: 420px;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.8;
  margin: 0;
}

#startBtn, #nextBtn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: #fff;
  background: #1c7ed6;
  border: 0;
  border-radius: 999px;
  padding: 14px 30px;
  cursor: pointer;
  box-shadow: 0 4px 0 #155fa0;
  margin-top: 6px;
}

.pct {
  font-size: 74px;
  font-weight: 700;
  line-height: 1;
}

.pct .sign { font-size: 32px; opacity: 0.6; margin-left: 2px; }

#verdict {
  font-size: 15px;
  letter-spacing: 1px;
  min-height: 20px;
}

#result.perfect .pct { color: #e8a90c; text-shadow: 0 0 26px rgba(232, 169, 12, 0.55); }

.compare { display: flex; gap: 18px; }

.compare figure { margin: 0; }

.compare canvas {
  width: 96px;
  height: 128px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(70, 48, 24, 0.3);
  display: block;
}

.compare figcaption {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.6;
  margin-top: 6px;
}

#bestLine {
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.7;
}

/* a phone held the normal way up is the point of a canvas that stands up */
@media (max-width: 560px) {
  #start h1 { font-size: 34px; }
  .blob { width: 25px; height: 25px; }
  #paints { max-width: 260px; }
}

/* ---------- fingers: everything you tap is at least 44 across ---------- */
/* The brushes and paints stay a small row under a big painting; on a
   touchscreen they just get enough room around them to land a finger on. */
@media (pointer: coarse) {
  #soundBtn { min-height: 44px; padding: 0 16px; }

  #paints { gap: 8px; }
  .blob { position: relative; width: 36px; height: 36px; }
  /* the tap lands a little outside the blob you see */
  .blob::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }

  #waterBtn { min-width: 48px; min-height: 48px; justify-content: center; }
  #waterBtn .pot { width: 34px; height: 30px; }

  #brushes { gap: 10px; }
  .brush { min-width: 56px; min-height: 52px; justify-content: flex-end; }

  #doneBtn { min-height: 46px; padding: 0 26px; }

  #startBtn, #nextBtn { min-height: 50px; }
}

/* An iPad turned sideways has room beside the canvas, so the picture you were
   given and the sound switch sit up in the corners instead of over it, and
   the canvas gets that height back. */
@media (pointer: coarse) and (orientation: landscape) {
  #topbar {
    position: absolute;
    z-index: 2;
    top: max(10px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    pointer-events: none;
  }
  #topbar > * { pointer-events: auto; }
  #ref { width: 96px; height: 128px; }
}