/* The world fills the window; the pixel-art UI sits on top, pinned top-left so its
   whole-number scale never lands on a half pixel (src/main.js layout). */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
canvas { position: absolute; left: 0; top: 0; display: block; }
#ui { image-rendering: pixelated; pointer-events: none; }

/* The squares trial's land options (src/squares.js; Esc on the Ground with ?land=squares). */
.squares-panel { display: none; position: fixed; left: 12px; top: 12px; z-index: 50; padding: 8px 10px; max-height: calc(100vh - 24px); overflow-y: auto; background: rgba(20, 18, 30, 0.85);
  color: #eee; font: 13px/1.3 system-ui, sans-serif; border-radius: 6px; user-select: none; }
.squares-panel.open { display: block; }
.squares-panel .row { display: flex; align-items: flex-start; gap: 4px; margin: 4px 0; }
.squares-panel .row span { width: 70px; flex: none; color: #aab; padding-top: 4px; }
.squares-panel .row b { padding-top: 4px; font-weight: normal; max-width: 330px; }
.squares-panel .opts { display: flex; flex-wrap: wrap; gap: 4px; max-width: 330px; }
.squares-panel h4 { margin: 10px 0 2px; font: 11px/1.2 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #8a86a8;
  border-bottom: 1px solid #3a3650; padding-bottom: 2px; }
.squares-panel h4:first-child { margin-top: 0; }
.squares-panel canvas { display: block; position: static; width: 320px; height: 96px; border-radius: 4px; image-rendering: auto; }
.squares-panel canvas.map { width: 160px; height: 160px; image-rendering: pixelated; }
.squares-panel input.slider, .squares-panel input.tune { width: 170px; accent-color: #6a5acd; }
.squares-panel button { background: #333044; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 3px 8px; font: inherit; cursor: pointer; }
.squares-panel button.on { background: #6a5acd; border-color: #9a8aff; }