* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #FF4B01; }
#field { display: block; width: 100%; height: 100%; touch-action: none; }
#debug {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 6px 8px;
  font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #FFED52;
  background: #FF4B01;
  border-radius: 3px;
  pointer-events: none;
  user-select: none;
}

/* Temporary palette test control; no changes to the canvas or existing readout. */
#month {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #FFED52;
  background: #FF4B01;
  border: 0;
  border-radius: 3px;
  padding: 5px 7px;
  opacity: 0.85;
}