/* beat-boxer.css -- every selector is prefixed .beat-boxer-, so nothing
   here can touch the host page and nothing on the host page matches it.
   Sizes and fonts are for the DOM control row only; the game itself is
   drawn on the canvas at a fixed design size and scaled to fit. */

.beat-boxer-game {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d0820;          /* the game's own space, not a backplate */
  outline: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
/* The mount is the focus target (TASK-1731[Q], on adoption): it hears the
   keys, so the ring is drawn inside the game when the mount has a keyboard
   focus, and the mount itself draws no outline of its own. */
[data-metaeden-beat-boxer]:focus { outline: none; }
[data-metaeden-beat-boxer]:focus-visible > .beat-boxer-game { box-shadow: inset 0 0 0 2px #41e7ff; }

.beat-boxer-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. */
.beat-boxer-frame { position: absolute; pointer-events: none; }

.beat-boxer-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
/* No app chrome on the title screen. */
.beat-boxer-game.is-title .beat-boxer-controls { display: none; }

.beat-boxer-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 #7a4fe0;    /* same width in every state: no layout jump */
  border-radius: 8px;
  background: rgba(14, 8, 32, 0.9);
  color: #f6f2ff;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.beat-boxer-btn:hover { border-color: #41e7ff; }
.beat-boxer-btn:focus-visible { outline: 2px solid #ffd35a; outline-offset: 2px; }
.beat-boxer-btn:disabled { cursor: default; color: #c7bce8; border-color: #4a3f6a; }

/* Reserved widths: the labels change (PAUSE / RESUME, VIEW: FLAT / ISO,
   SOUND ON / OFF) but the buttons never change size. */
.beat-boxer-btn-label { display: inline-block; min-width: 4.9em; text-align: left; }
.beat-boxer-snd { min-width: 6.6em; }
.beat-boxer-view { min-width: 6.4em; }

/* In a small box the key caps come off the buttons, so the row stays clear
   of the key list beside it (the keys are listed on the pause screen). */
.beat-boxer-game.is-compact .beat-boxer-key { display: none; }
.beat-boxer-game.is-compact .beat-boxer-btn { padding: 0 8px; gap: 0; }

.beat-boxer-key {
  font: 700 12px/1 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  color: #0d0820;
  background: #c7bce8;
  border-radius: 4px;
  padding: 3px 5px;
}