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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Press Start 2P", Menlo, Consolas, monospace;
}

/* The body keeps the phone's safe areas (the notch, the home bar) as padding, so the canvas inside it is the
   usable screen; 100dvh follows the browser bars as they hide and show. */
body {
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The canvas fills the body; render.js letterboxes the 1920 x 1080 cabinet inside it, or lays the phone layout
   out in CSS px when the viewport is portrait or under 900 px wide, and sizes the backing store in device pixels
   so the board's lattice mapping lands on whole pixels. */
#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  touch-action: none;
  cursor: default;
}

/* The round-1 tuning panel (?panel=1 or ?debug=1): palette and tile switch. */
#panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid #333;
  color: #ddd;
  font: 11px/1.6 Menlo, Consolas, monospace;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 10px;
  align-items: center;
}
#panel label { white-space: nowrap; }
#panel input[type="color"] { width: 48px; height: 22px; padding: 0; border: 1px solid #555; background: #000; }
#panel select, #panel button { font: inherit; background: #000; color: #ddd; border: 1px solid #555; padding: 2px 6px; }
/* The phone layout keeps its bottom-right corner for the zoom buttons. */
@media (max-width: 899px) { #panel { display: none; } }