/*
 * write.css — Write It (write.js). Load after theme.css, game.css and
 * strokes.css. The writing box is square, as wide as it can be up to
 * 360px and half the screen height, and takes every touch for drawing (no scrolling or zooming on it).
 */

.write-pad {
  position: relative;
  width: min(100%, 360px, 50vh);
  aspect-ratio: 1;
  margin: 14px auto 6px;
  background: var(--surface);
  border-radius: 8px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.write-art, .write-art .strokes, .write-ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.write-ink { cursor: crosshair; }
.write-ink polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 48;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.write-ink polyline.miss { stroke: var(--bad); opacity: 0; transition: opacity 0.6s ease-in; }
.write-status { min-height: 1.6em; margin: 4px 0; text-align: center; color: var(--ink-soft); }
.write-tools { display: flex; justify-content: center; gap: 10px; }