/* jawn.games shared game chrome
   ───────────────────────────────────────────────────────────────────────────
   One row, in the same place in every game:

     [← Hub]                                   [?] [🔊] [account]

   Games include the markup themselves (so it renders even if this file is
   slow) and theme it with the --jawn-chrome-* custom properties below.
   Layout, sizing and behaviour live here so the row is identical everywhere.

   Markup:
     <div id="jawn-chrome">
       <a class="jawn-btn jawn-hub" href="https://jawn.games/">Hub</a>
       <span class="jawn-spacer"></span>
       <button class="jawn-btn jawn-icon jawn-help" id="jawn-help" type="button" aria-label="How to play" title="How to play">?</button>
       <button class="jawn-btn jawn-icon jawn-sound" id="jawn-sound" type="button" aria-pressed="true" aria-label="Sound" title="Sound on"></button>
       <div id="auth-badge" class="auth-badge"></div>
     </div>

   The sound button shows 🔊 / 🔇 from aria-pressed; the game only flips the
   attribute. Hide the row during play with a sibling rule in the game's CSS,
   e.g.  #game-screen.active ~ #jawn-chrome { display:none; }
   ─────────────────────────────────────────────────────────────────────────── */

#jawn-chrome {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 8px;
  /* Above the game's screens, below its modals / overlays (which start at 100 in every game). */
  z-index: var(--jawn-chrome-z, 60);
  pointer-events: none;
  font-family: var(--jawn-chrome-font, inherit);
}
#jawn-chrome > * { pointer-events: auto; }
#jawn-chrome .jawn-spacer { flex: 1 1 auto; pointer-events: none; }

.jawn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--jawn-chrome-size, 38px);
  min-width: var(--jawn-chrome-size, 38px);
  padding: 0 14px;
  margin: 0;
  border-radius: var(--jawn-chrome-radius, 999px);
  background: var(--jawn-chrome-bg, rgba(0,0,0,.45));
  color: var(--jawn-chrome-fg, #fff);
  border: var(--jawn-chrome-border, 1.5px solid rgba(255,255,255,.28));
  box-shadow: var(--jawn-chrome-shadow, 0 2px 8px rgba(0,0,0,.25));
  font-family: var(--jawn-chrome-font, inherit);
  font-weight: var(--jawn-chrome-weight, 700);
  font-size: var(--jawn-chrome-font-size, 14px);
  letter-spacing: var(--jawn-chrome-tracking, .02em);
  line-height: 1;
  text-decoration: none; text-transform: var(--jawn-chrome-transform, none);
  white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
  transition: transform .08s, opacity .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.jawn-btn:hover { background: var(--jawn-chrome-bg-hover, var(--jawn-chrome-bg, rgba(0,0,0,.6))); border-color: var(--jawn-chrome-border-hover, currentColor); }
.jawn-btn:active { transform: translateY(1px) scale(.97); }
.jawn-btn:focus-visible { outline: 2px solid var(--jawn-chrome-focus, currentColor); outline-offset: 2px; }

/* Hub button: the way back. Text so it reads as a destination, arrow so it reads as "back". */
.jawn-hub {
  padding-left: 12px; padding-right: 16px;
  background: var(--jawn-hub-bg, var(--jawn-chrome-bg, rgba(0,0,0,.45)));
  color: var(--jawn-hub-fg, var(--jawn-chrome-fg, #fff));
  border: var(--jawn-hub-border, var(--jawn-chrome-border, 1.5px solid rgba(255,255,255,.28)));
  box-shadow: var(--jawn-hub-shadow, var(--jawn-chrome-shadow, 0 2px 8px rgba(0,0,0,.25)));
}
.jawn-hub:hover { background: var(--jawn-hub-bg-hover, var(--jawn-hub-bg, var(--jawn-chrome-bg-hover, var(--jawn-chrome-bg, rgba(0,0,0,.6))))); }
.jawn-hub::before { content: "\2190"; font-weight: 700; }

/* Icon buttons: fixed square so the right cluster lines up in every game. */
.jawn-icon { width: var(--jawn-chrome-size, 38px); padding: 0; font-size: var(--jawn-chrome-icon-size, 17px); }
.jawn-help { font-family: var(--jawn-chrome-font, inherit); font-weight: 800; }
.jawn-sound::before { content: "\1F50A"; }
.jawn-sound[aria-pressed="false"] { opacity: var(--jawn-chrome-off-opacity, .55); }
.jawn-sound[aria-pressed="false"]::before { content: "\1F507"; }

/* Account badge (auth-ui.js) sits in the row and matches the other buttons. */
#jawn-chrome .auth-badge { position: static !important; top: auto; right: auto; margin: 0; z-index: auto; }
#jawn-chrome .auth-badge:empty { display: none; }
#jawn-chrome .auth-icon-btn {
  width: var(--jawn-chrome-size, 38px); height: var(--jawn-chrome-size, 38px);
  border-radius: var(--jawn-chrome-radius, 999px);
  background: var(--jawn-chrome-bg, rgba(0,0,0,.45));
  color: var(--jawn-chrome-fg, #fff);
  border: var(--jawn-chrome-border, 1.5px solid rgba(255,255,255,.28));
  box-shadow: var(--jawn-chrome-shadow, 0 2px 8px rgba(0,0,0,.25));
  backdrop-filter: none;
  font-family: var(--jawn-chrome-font, inherit); font-weight: 800; font-size: 14px;
}
#jawn-chrome .auth-badge { position: relative !important; }
#jawn-chrome .auth-dropdown { top: calc(var(--jawn-chrome-size, 38px) + 6px); }

@media (max-width: 360px) {
  #jawn-chrome { gap: 6px; }
  .jawn-hub { padding-left: 10px; padding-right: 12px; }
}