:root {
  --ink: #fffdf3;
  --ink-shadow: rgba(28, 52, 18, 0.6);
}

* { box-sizing: border-box; margin: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #79bd45;
  font-family: "Silkscreen", ui-monospace, monospace;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

canvas { position: fixed; top: 0; left: 0; display: block; touch-action: none; cursor: crosshair; }
canvas.pixel { image-rendering: pixelated; }

.hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 var(--ink-shadow);
  pointer-events: none;
}

.hint .touch { display: none; }
@media (pointer: coarse) {
  .hint .mouse { display: none; }
  .hint .touch { display: inline; }
}

.back {
  position: fixed;
  top: 12px;
  left: 16px;
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
  text-shadow: 0 2px 0 var(--ink-shadow);
}