/* gumball-blitz.css -- every selector is prefixed .gumball-blitz-, 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. */

.gumball-blitz-game {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0f24;          /* 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-1726[Q]): 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-gumball-blitz]:focus { outline: none; }
[data-metaeden-gumball-blitz]:focus-visible > .gumball-blitz-game { box-shadow: inset 0 0 0 2px #7fe0ff; }

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

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

.gumball-blitz-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 #5b6bd6;    /* same width in every state: no layout jump */
  border-radius: 8px;
  background: rgba(10, 12, 32, 0.9);
  color: #e8fbff;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.gumball-blitz-btn:hover { border-color: #7fe0ff; }
.gumball-blitz-btn:focus-visible { outline: 2px solid #ffd35a; outline-offset: 2px; }
.gumball-blitz-btn:disabled { cursor: default; color: #b9c3e8; border-color: #3b4590; }

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

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