/* ===========================================================================
   Fitz & Pop Arcade — CANONICAL HEADER (shared, do not edit per-game)
   Source of truth: docs/CANONICAL-HEADER-SPEC.md
   Copied byte-identical into every game repo. Change it in fitzpop-arcade,
   then re-sync the copies. Header ONLY — never styles anything below the bar.
   =========================================================================== */
:root{
  --hdr-bar-bg:linear-gradient(#2a1f42,#221935);
  --hdr-h:52px;
  --hdr-line:#4a3b6b;
  --hdr-ink:#ece3ff;
  --hdr-dim:#9c8fbf;
  --hdr-pill:#3a2c58;
  --hdr-pill2:#1e1730;
  --hdr-arcade-gold:#e8c15a;   /* ← Arcade — NEVER re-themed */
  --hdr-accent:#f2c94c;        /* per-game: set on the .ah-topbar / .ah-status element */
}

/* ---------- DESKTOP BAR ---------- */
.ah-topbar{
  height:var(--hdr-h);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:16px;padding:0 16px;
  background:var(--hdr-bar-bg);
  border-bottom:2px solid var(--hdr-accent);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
}
.ah-topbar *,.ah-status *{box-sizing:border-box;}
.ah-left,.ah-right{display:flex;align-items:center;gap:10px;min-width:0;}
.ah-center{display:flex;justify-content:center;min-width:0;}

.ah-arcade{
  text-decoration:none;font:700 13px/1 system-ui,-apple-system,sans-serif;
  background:var(--hdr-arcade-gold);color:#1a1205;
  padding:8px 14px;border-radius:9px;white-space:nowrap;border:0;cursor:pointer;
}
.ah-arcade:hover{filter:brightness(1.08);}
.ah-arcade[hidden]{display:none;}

/* Identity: logo image where we have one, tiny text otherwise. Both bounded. */
.ah-logo{height:28px;width:auto;max-width:130px;display:block;object-fit:contain;}
.ah-brand-text{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--hdr-accent);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;}

.ah-stat{font-size:12px;color:var(--hdr-dim);background:var(--hdr-pill2);
  padding:5px 10px;border-radius:999px;border:1px solid var(--hdr-line);
  white-space:nowrap;cursor:default;}
.ah-stat.click{cursor:pointer;}

.ah-flash{background:linear-gradient(90deg,color-mix(in srgb,var(--hdr-accent) 16%,transparent),
  color-mix(in srgb,var(--hdr-accent) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--hdr-accent) 40%,transparent);
  border-radius:8px;padding:5px 14px;max-width:560px;font-size:13px;color:#f4ead0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ah-flash b{color:var(--hdr-accent);text-transform:uppercase;font-size:11px;letter-spacing:1px;margin-right:8px;}

.ah-ctl{background:var(--hdr-pill);color:var(--hdr-ink);border:1px solid var(--hdr-line);
  padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.ah-ctl.icon{padding:6px 9px;font-size:15px;line-height:1;}
.ah-ctl.off{opacity:.4;text-decoration:line-through;}
/* Music ON is GREEN and a touch larger — the note must read as lit, not as
   a dim glyph. OFF falls back to the shared .off dimming + strike-through. */
.ah-ctl.icon.music{color:#6fdc8c;font-size:18px;font-weight:bold;}
.ah-ctl.icon.music.off{color:var(--hdr-dim);}
.ah-ctl:hover{background:#4a3a70;}
.ah-divider{width:1px;height:24px;background:var(--hdr-line);margin:0 2px;flex:0 0 auto;}
.ah-ks{background:var(--hdr-arcade-gold);color:#1a1205;text-decoration:none;
  font:700 12px/1 system-ui;padding:8px 12px;border-radius:9px;white-space:nowrap;}
.ah-mode{color:var(--hdr-accent);font-size:12px;letter-spacing:2px;font-weight:bold;white-space:nowrap;}

/* Fixed ← Arcade clearance kept for any legacy bridge injection (should be none now) */
body:has(#arcade-home) .ah-topbar{padding-left:16px;}

/* ---------- MOBILE STRIP + MENU ---------- */
.ah-status{height:var(--hdr-h);display:flex;align-items:center;gap:8px;padding:0 12px;
  background:linear-gradient(180deg,#241a34,#191226);border-bottom:2px solid var(--hdr-accent);
  box-shadow:0 2px 8px #0008;font-family:system-ui,-apple-system,sans-serif;}
.ah-mbrand{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--hdr-ink);cursor:pointer;padding:2px;}
.ah-mbrand img{height:26px;width:auto;max-width:120px;}
.ah-mbrand .ah-brand-text{font-size:13px;}
.ah-mbrand small{color:var(--hdr-dim);font-size:10px;text-transform:uppercase;letter-spacing:.5px;}
.ah-spacer{flex:1;}
.ah-mstat{display:flex;flex-direction:column;align-items:center;font-size:9px;color:var(--hdr-dim);line-height:1.15;}
.ah-mstat b{font-size:13px;color:var(--hdr-ink);}

.ah-scrim{position:fixed;inset:0;background:#000b;z-index:70;display:none;}
.ah-scrim.show{display:block;}
.ah-menu{position:fixed;left:0;right:0;top:0;z-index:80;max-width:520px;margin:0 auto;
  background:linear-gradient(#241a34,#1a1329);border-bottom:2px solid var(--hdr-accent);
  border-radius:0 0 18px 18px;transform:translateY(-110%);transition:transform .22s ease;
  font-family:system-ui,-apple-system,sans-serif;}
.ah-menu.show{transform:translateY(0);}
.ah-mhead{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;color:var(--hdr-accent);font-weight:800;font-size:13px;}
.ah-mhead img{height:22px;}
.ah-mitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 16px;color:var(--hdr-ink);font-size:14px;background:none;border:0;border-top:1px solid #2a2040;cursor:pointer;}
.ah-mitem:hover{background:#2a2040;}
.ah-mitem .ah-ico{width:22px;text-align:center;font-size:16px;flex:0 0 auto;}
.ah-mitem small{display:block;color:var(--hdr-dim);font-size:11px;}
.ah-mitem .ah-state{margin-left:auto;color:var(--hdr-dim);font-size:12px;}

@media (max-width:640px){
  .ah-topbar{gap:8px;padding:0 10px;}
  .ah-mode{display:none;}
}