:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #faf8f3;
  font: 12px system-ui, sans-serif;
  color: #2a2622;
}

#canvas {
  display: block;
  touch-action: none;
  cursor: crosshair;
}

#hud {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

#mode-label {
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#palette {
  display: flex;
  gap: 4px;
}

#palette button {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid #ccc6ba;
  border-radius: 4px;
  background: #fff;
  color: #2a2622;
  opacity: 0.6;
  cursor: pointer;
}

#palette button.active {
  opacity: 1;
  background: #2a2622;
  color: #faf8f3;
  border-color: #2a2622;
}

@media (prefers-color-scheme: dark) {
  html, body { background: #1b1a17; color: #ece7dd; }
  #canvas { background: #1b1a17; }
  #palette button { background: #26241f; color: #ece7dd; border-color: #45403a; }
  #palette button.active { background: #ece7dd; color: #1b1a17; border-color: #ece7dd; }
}