html,body{margin:0;height:100%;background:#14110f;overflow:hidden}body{display:flex;align-items:center;justify-content:center}canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}canvas:focus-visible{outline:2px solid #ffd67c;outline-offset:-2px}#msg{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font:600 12px/1.6 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.24em;color:#c9b48c;text-align:center;padding:24px;pointer-events:none}

@font-face {
  font-family: "Pond Pixel";
  src: url("../fonts/pond-pixel.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Feedback shares the pond's square panels, sea-green edges and gold controls. */
.pond-feedback {
  --pond-pixel: 3px;
  box-sizing: border-box;
  width: min(calc(160 * var(--pond-pixel)), calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  margin: auto;
  padding: calc(6 * var(--pond-pixel));
  border: var(--pond-pixel) solid #987650;
  border-radius: 0;
  background: rgb(38 33 29 / 98%);
  color: #fff6e2;
  font: 400 calc(8 * var(--pond-pixel))/1 "Pond Pixel", monospace;
  font-synthesis: none;
  scrollbar-color: #987650 #26211d;
}
.pond-feedback::backdrop { background: rgb(2 10 12 / 80%); }
  .pond-feedback h2 {
    margin: 0 0 calc(6 * var(--pond-pixel));
    padding-bottom: calc(5 * var(--pond-pixel));
    border-bottom: var(--pond-pixel) solid #987650;
    color: #ffd67c;
    font-size: calc(16 * var(--pond-pixel));
    font-weight: 400;
    text-align: center;
  }
.pond-feedback p { margin: 0 0 calc(5 * var(--pond-pixel)); }
.pond-feedback label { display: block; margin: calc(6 * var(--pond-pixel)) 0 calc(3 * var(--pond-pixel)); color: #ffd67c; }
.pond-feedback select, .pond-feedback textarea {
  box-sizing: border-box;
  width: 100%;
  padding: calc(4 * var(--pond-pixel));
  border: var(--pond-pixel) solid #987650;
  border-radius: 0;
  background: #26211d;
  color: #fff6e2;
  font: inherit;
  caret-color: #ffd67c;
  color-scheme: dark;
}
.pond-feedback textarea { resize: vertical; min-height: calc(48 * var(--pond-pixel)); max-height: 40dvh; }
.pond-feedback ::selection { background: #ffd67c; color: #26211d; }
.pond-feedback :focus-visible { outline: 2px solid #ffd67c; outline-offset: 3px; }
.pond-feedback .feedback-count { margin: calc(2 * var(--pond-pixel)) 0 calc(5 * var(--pond-pixel)); text-align: right; }
.pond-feedback .feedback-status { min-height: calc(16 * var(--pond-pixel)); margin: calc(4 * var(--pond-pixel)) 0; color: #ffd67c; }
.pond-feedback .feedback-actions { display: flex; gap: calc(4 * var(--pond-pixel)); }
.pond-feedback button {
  flex: 1;
  padding: calc(4 * var(--pond-pixel));
  border: var(--pond-pixel) solid #987650;
  border-radius: 0;
  background: #26211d;
  color: #fff6e2;
  font: inherit;
  cursor: pointer;
}
.pond-feedback button[type="submit"] { border-color: #ffd67c; color: #ffd67c; }
.pond-feedback button:disabled { opacity: 0.6; cursor: wait; }
@media (hover: hover) and (pointer: fine) {
  .pond-feedback button:not(:disabled):hover { background: #3a322a; }
}
@media (max-height: 600px) {
  .pond-feedback { --pond-pixel: 2px; }
}