/* fore-wholesome-fun.css -- every selector is prefixed .fore-wholesome-fun-, 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. */

.fore-wholesome-fun-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;
}
.fore-wholesome-fun-game:focus-visible { box-shadow: inset 0 0 0 2px #7fe0ff; }

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

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

.fore-wholesome-fun-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;
}
.fore-wholesome-fun-btn:hover { border-color: #7fe0ff; }
.fore-wholesome-fun-btn:focus-visible { outline: 2px solid #ffd35a; outline-offset: 2px; }
.fore-wholesome-fun-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. */
.fore-wholesome-fun-btn-label { display: inline-block; min-width: 4.9em; text-align: left; }
.fore-wholesome-fun-snd { min-width: 6.6em; }

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