/* micropolis.css -- every selector is prefixed .micropolis-, so nothing here
   can touch the host page and nothing on the host page matches it. The game
   is drawn on the canvas at 960x540 and scaled to fit; this file styles the
   mount box, the canvas and the DOM control row (MENU, SOUND, SKIN). */

.micropolis-game {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07090f;          /* the game's own night, not a backplate */
  outline: none;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.micropolis-game.is-title { cursor: pointer; }
.micropolis-game:focus-visible { box-shadow: inset 0 0 0 2px #f1d27a; }

.micropolis-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The fitted design rect. The control row is anchored inside it, so it sits
   on the play area at every box size. */
.micropolis-frame { position: absolute; pointer-events: none; }

/* Bottom right of the map, just above the status line (its bottom offset is
   set from the fit scale). The top bar and the palette stay clear. */
.micropolis-controls {
  position: absolute;
  right: 8px;
  bottom: 30px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
/* No app chrome on the title screen. */
.micropolis-game.is-title .micropolis-controls { display: none; }

.micropolis-btn {
  box-sizing: border-box;
  height: 44px;                 /* 44x44 minimum touch target */
  min-width: 44px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #5a4a2c;    /* same width in every state: no layout jump */
  border-radius: 8px;
  background: rgba(8, 10, 20, 0.92);
  color: #f5efdc;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.micropolis-btn:hover { border-color: #f1d27a; }
.micropolis-btn:focus-visible { outline: 2px solid #f1d27a; outline-offset: 2px; }
.micropolis-btn:disabled { cursor: default; color: #b9b09a; border-color: #3a3020; }

/* Reserved widths: SOUND ON / SOUND OFF never changes the button's size. */
.micropolis-btn-label { display: inline-block; text-align: left; }
.micropolis-snd { min-width: 6.6em; }

.micropolis-key {
  font: 700 12px/1 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  color: #07090f;
  background: #b9b09a;
  border-radius: 4px;
  padding: 3px 5px;
  white-space: nowrap;
}
/* A modal window (budget, menu, saves) owns the box: the row steps aside. */
.micropolis-game.is-modal .micropolis-controls { visibility: hidden; }