/* The mini-games (petgames.js), wherever they are mounted: the in-app pet's care panel,
   Quorie Pet's game card and the Pet page's Play tab. ONE stylesheet for all three; the
   colours come from the host, which maps its own tokens onto these names:
     --pg-ink (text), --pg-soft (quieter text), --pg-line (borders, hover),
     --pg-accent (a lit pad), --pg-on-accent (text on it). */
.pg { display: flex; flex-direction: column; gap: 6px; padding: 2px; color: var(--pg-ink, inherit); }
.pg-title { font-weight: 600; font-size: 13px; }
.pg-line { font-size: 12.5px; line-height: 1.35; min-height: 2.7em; }
.pg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-btn { flex: 1 1 0; min-width: 56px; padding: 7px 8px; border-radius: 8px;
  border: 1px solid var(--pg-line, currentColor); background: transparent; color: inherit;
  font: inherit; font-size: 12.5px; text-align: center; cursor: pointer; }
.pg-btn:hover, .pg-btn:focus-visible { background: var(--pg-line, transparent); outline: none; }
.pg-pad { font-size: 18px; min-height: 40px; }
.pg-pad.on { background: var(--pg-accent, #6d6af8); border-color: var(--pg-accent, #6d6af8);
  color: var(--pg-on-accent, #ffffff); }
.pg-score { font-size: 11.5px; color: var(--pg-soft, inherit); font-variant-numeric: tabular-nums; }