/* ═══════════════════════════════════════════════════════════════════════════
   shared/chrome.css
   THE SHELL. One set of styles for the chrome every page shares: the way home,
   the brand, who you are signed in as, and the settings gear.

   WHY THIS FILE EXISTS
   --------------------
   Every game grew its own copy of these rules and the copies drifted. By the
   time we audited there were five different settings-control names, home buttons
   with 12px icons in some games and 20px in others, three games with an
   icon-only home button and no "HOME" label, and two different hover designs
   (some fill with green, some only change the border colour).

   The values below are taken verbatim from the four template games the owner
   named — Bandle, Songless, Guess the Flag and Flagle — because those are the
   design of record.

   HOW TO INCLUDE IT
   -----------------
     <link rel="stylesheet" href="/shared/chrome.css">

   LOAD IT LAST, after the page's own stylesheet. It deliberately has to win
   ties so that a page which drifted is pulled back to the house style without
   anyone having to hunt down its old rule. It is written to be safe to load
   last because it only ever styles the chrome ELEMENTS:

   WHAT THIS FILE MUST NOT DO
   --------------------------
   It must not style `.header`, `.topbar`, `.shell` or any page container.
   `.header` means a chrome row in Breakout but a centred title block in
   Angledle and 2048, so touching it would reflow half the site. Container
   layout stays each page's own business; only the four chrome elements are
   shared, and every page already puts those in the right corners.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The house palette ─────────────────────────────────────────────────────
   The green is the single most visible brand cue, and one game had drifted to
   a different shade (#31d158 in paper.io). Declaring it at :root here means
   the last-loaded sheet wins and every page is the same green again. Only the
   green and its RGB triple are forced: `--green-dim` is used for text colour
   in some games and for fills in others, so it is left to each page, and the
   rules below always pass a literal fallback when they need a tint.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --green: #1db954;
  --green-rgb: 29, 185, 84;
}

/* ── The way home ──────────────────────────────────────────────────────────
   Top-left on every page, always a pill with a 12px chevron and a HOME label,
   and always filling with green on hover. This is Bandle's / Guess the Flag's
   definition; the games that used a 14-16px chip or a bare icon now match it.
   ────────────────────────────────────────────────────────────────────────── */
.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted, var(--text2, #a7a7a7));
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border: 1px solid var(--border, var(--line-strong, #404040));
  border-radius: 999px;
  background: var(--surface3, var(--bg2, var(--panel-2, rgba(255, 255, 255, 0.04))));
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.home-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-dim, rgba(29, 185, 84, 0.12));
}
/* The chevron. The stroke attributes live on the SVG itself in some pages and
   not others, so they are restated here to guarantee the same weight. */
.home-btn svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── The settings gear ─────────────────────────────────────────────────────
   One control, one look. Four legacy names are aliased here so that a page
   carrying `settings-btn`, `settings-toggle` or `icon-button` renders exactly
   like a page carrying the canonical `icon-btn`. The IDs were unified to
   `settings-btn` in the markup as well; this class list is the safety net.
   ────────────────────────────────────────────────────────────────────────── */
.icon-btn,
.settings-btn,
.settings-toggle,
.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
  color: var(--muted, var(--text2, #a7a7a7));
  background: var(--surface2, var(--bg2, rgba(255, 255, 255, 0.05)));
  border: 1px solid var(--border, var(--line-strong, #404040));
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.icon-btn:hover,
.settings-btn:hover,
.settings-toggle:hover,
.icon-button:hover {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-dim, rgba(29, 185, 84, 0.12));
}
.icon-btn svg,
.settings-btn svg,
.settings-toggle svg,
.icon-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
/* Guess the Flag's gear is a FILLED path rather than a stroked outline, so it
   needs its own sizing rule to look like the stroked ones beside it. */
.icon-button svg {
  fill: currentColor;
}

/* ── Who you are ───────────────────────────────────────────────────────────
   `display` is deliberately NOT set: Blackjack hides its badge on purpose and
   a rule here would undo that. Empty badges collapse to nothing so that a
   guest sees no stray gap where the name would be.
   ────────────────────────────────────────────────────────────────────────── */
.user-badge {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted, var(--text2, #a7a7a7));
  white-space: nowrap;
}
.user-badge:empty {
  display: none;
}

/* ── The brand ─────────────────────────────────────────────────────────────
   Alias the two names in use (`.brand` and `.logo`) so both sit the same way.
   ────────────────────────────────────────────────────────────────────────── */
.brand,
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--green);
}
.brand-text {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 24px;
  letter-spacing: 4px;
}

/* ── The right-hand cluster ────────────────────────────────────────────────
   `.header-right`, `.topbar-right` and `.settings-area` all hold the badge and
   the gear; they must push to the right edge and space their children the same.
   ────────────────────────────────────────────────────────────────────────── */
.header-right,
.topbar-right,
.settings-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ── Light mode ────────────────────────────────────────────────────────────
   The hover fill needs a lighter tint in light mode; the pages already restyle
   their own base colours. These selectors out-specify the non-light hover
   rules above, which is the only reason they are repeated.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .home-btn:hover,
[data-theme="light"] .icon-btn:hover,
[data-theme="light"] .settings-btn:hover,
[data-theme="light"] .settings-toggle:hover,
[data-theme="light"] .icon-button:hover {
  background: rgba(29, 185, 84, 0.10);
}