/*
 * JetLA - the utility toolbar of every game (Turbo, Sound, Provably Fair).
 *
 * Hierarchy of every game, top to bottom:
 *     [play field] -> [main action: Spin / Bet] -> [stake + auto settings] -> [utility toolbar]
 * The toolbar is the LAST element of the game container (a <footer class="aux-bar"> after <main>; in the Swipe games,
 * the row under the stake bar). It must never compete with the main action, so it is quiet:
 *   - icons (inline SVG, stroke = currentColor) with a tiny label; the full name is in aria-label / title
 *   - idle: opacity 0.6, a muted silver
 *   - hover / keyboard focus: opacity 1, white-silver, a faint glass chip behind the icon
 *
 * Load it AFTER the game's own style.css:
 *     <link rel="stylesheet" href="../shared/aux-bar.css" />
 * The ids (turboBtn, soundBtn, fairBtn) and the aria-pressed / aria-expanded / data-state attributes are the ones the
 * game scripts already drive; nothing here depends on a script.
 */

.aux-bar {
  /* the palette is a set of variables so a game with a light surface (retro Swipe) can darken it */
  --aux-fg: #b9bdc7;
  --aux-fg-hover: #f3f5f9;
  --aux-fg-off: #8c909b;
  --aux-chip: rgba(255, 255, 255, 0.07);
  --aux-chip-line: rgba(255, 255, 255, 0.16);
  --aux-line: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0.6rem auto 0;
  padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--aux-line);
}

.aux-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px; /* a comfortable touch target even though the button looks small */
  min-height: 44px;
  margin: 0;
  padding: 0 0.7rem;
  font: 600 0.62rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aux-fg); /* silver */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  opacity: 0.6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.22s ease, color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.aux-ico {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aux-btn:hover,
.aux-btn:focus-visible {
  opacity: 1;
  color: var(--aux-fg-hover);
  background-color: var(--aux-chip);
  border-color: var(--aux-chip-line);
}
.aux-btn:focus-visible { outline: 2px solid var(--aux-fg-hover); outline-offset: 2px; }
.aux-btn:active { background-color: var(--aux-chip-line); }
.aux-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Sound: waves while on, a cross while muted (aria-pressed is kept in sync by the game script) */
.aux-sound .ico-mute { display: none; }
.aux-sound[aria-pressed="false"] .ico-waves { display: none; }
.aux-sound[aria-pressed="false"] .ico-mute { display: inline; }
.aux-sound[aria-pressed="false"] { color: var(--aux-fg-off); }
.aux-sound[aria-pressed="false"]:hover,
.aux-sound[aria-pressed="false"]:focus-visible { color: var(--aux-fg-hover); }

/* Turbo: a quiet warm tint while it is on, so the player can still tell */
.aux-turbo[aria-pressed="true"] { color: #ffd23f; opacity: 0.9; }
.aux-turbo[aria-pressed="true"]:hover,
.aux-turbo[aria-pressed="true"]:focus-visible { color: #ffe27a; opacity: 1; }

/* Fair: the Swipe games colour it by the state of the round (data-state); all the others just open the dialog */
.aux-fair[data-state="ACTIVE"] { color: #7fe9ff; }
.aux-fair[data-state="CASHED_OUT"] { color: #7dffc8; }
.aux-fair[data-state="CRASHED"] { color: #ff7a96; }
.aux-fair[aria-expanded="true"] { opacity: 1; color: var(--aux-fg-hover); }

/* very narrow phones: icons only, the toolbar stays on one row */
@media (max-width: 359px) {
  .aux-txt { display: none; }
  .aux-btn { padding: 0 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aux-btn { transition: none; }
}