/* root-access.css -- every selector is prefixed .root-access- (or is the
   game's own mount attribute), 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. */

.root-access-game {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05030d;          /* 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-1730[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-root-access]:focus { outline: none; }
[data-metaeden-root-access]:focus-visible > .root-access-game { box-shadow: inset 0 0 0 2px #36f1ff; }

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

/* The control row lives in the HUD. The script sets its right/bottom (or
   right/top) offsets from the fitted design rect on every layout. */
.root-access-controls {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}
/* No app chrome on the title screen. */
.root-access-game.is-title .root-access-controls { display: none; }

.root-access-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 #5a33a8;    /* same width in every state: no layout jump */
  border-radius: 8px;
  background: rgba(10, 6, 28, 0.92);
  color: #e8fbff;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.root-access-btn:hover { border-color: #36f1ff; }
.root-access-btn:focus-visible { outline: 2px solid #ffd35a; outline-offset: 2px; }
.root-access-btn:disabled { cursor: default; color: #a6d6ea; border-color: #3a2470; }

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

.root-access-key {
  font: 700 12px/1 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  color: #05030d;
  background: #a6d6ea;
  border-radius: 4px;
  padding: 3px 5px;
}