html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #e8e3d4;
  overscroll-behavior: none;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
}

#pieces {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#pieces.over { cursor: grab; }
#pieces.grabbing { cursor: grabbing; }

#hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font: italic 15px/1.3 "Iowan Old Style", "Palatino", Georgia, serif;
  letter-spacing: 0.01em;
  color: rgb(70 58 40 / 0.55);
  pointer-events: none;
  transition: opacity 2.4s ease 0.6s;
}
#hint.gone { opacity: 0; }
.unsupported #hint { color: rgb(70 58 40 / 0.85); bottom: 50%; }

/* Tuning panel, toggled with ` */
.dev {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 268px;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 10px 12px 12px;
  background: rgb(252 250 244 / 0.94);
  box-shadow: 0 1px 2px rgb(60 45 25 / 0.18), 0 6px 24px rgb(60 45 25 / 0.12);
  border-radius: 6px;
  font: 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  color: #3d3428;
}
.dev[hidden] { display: none; }
.dev-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.dev-stat { color: #8a7d68; }
.dev-group {
  margin: 10px 0 4px;
  color: #8a7d68;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.dev-row { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 6px; height: 22px; }
.dev-row input[type=range] { width: 100%; margin: 0; accent-color: #9a7a46; }
.dev-row input[type=color] { grid-column: 2 / 4; width: 100%; height: 18px; padding: 0; border: 0; background: none; }
.dev-row output { text-align: right; font-variant-numeric: tabular-nums; }
.dev-buttons { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.dev-buttons button {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid rgb(60 45 25 / 0.2);
  border-radius: 4px;
  background: #fffdf7;
  color: inherit;
  cursor: pointer;
}
.dev-buttons button:hover { background: #f4efe2; }


/* Credits: a quiet line, and a paper slip. */
.credits-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 18px;
  padding: 4px 2px;
  border: 0;
  background: none;
  font: italic 13px/1.3 "Iowan Old Style", "Palatino", Georgia, serif;
  color: rgb(70 58 40 / 0.5);
  cursor: pointer;
}
.credits-btn:hover, .credits-btn[aria-expanded="true"] { color: rgb(70 58 40 / 0.85); }
.credits {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top)) + 30px);
  right: 16px;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 80px);
  overflow: auto;
  padding: 14px 16px 12px;
  background: #f7f3e8;
  box-shadow: 0 1px 2px rgb(60 45 25 / 0.2), 0 8px 26px rgb(60 45 25 / 0.14);
  transform: rotate(0.6deg);
  font: 13px/1.45 "Iowan Old Style", "Palatino", Georgia, serif;
  color: #3d3428;
  text-wrap: pretty;
}
.credits[hidden] { display: none; }
.credits p { margin: 0 0 8px; font-style: italic; color: #6b5d48; }
.credits ul { margin: 0; padding: 0; list-style: none; }
.credits li { margin: 0 0 5px; }
.credits a { color: inherit; text-decoration-color: rgb(61 52 40 / 0.35); text-underline-offset: 2px; }
.credits a:hover { text-decoration-color: currentColor; }