/* ============================================================
   PE-HEAD — THE ONE HEADER. (owner 2026-08-02: "for all those game modes
   that push you to another page the headers are constantly messed up. just
   use the same style and dimensions and all that as the main page")

   WHY THIS FILE EXISTS
   Every overlay used to carry its OWN header CSS (.gwp-ov__head,
   .totw-ov__head, .awards-ov__head, .pp-modehead). Those stylesheets are
   injected LAZILY, so they always land after build-xi.css in the cascade —
   meaning a shared rule could never win and each mode drifted on its own.
   Patching them one at a time is what kept breaking.

   Now there is exactly one implementation, and the markup uses these class
   names everywhere. The per-mode header rules are dead: they target class
   names no longer present in the HTML.

   DIMENSIONS ARE THE MAIN PAGE'S .topbar / .brand, verbatim:
     bar      sticky, rgba(10,10,10,.85), blur 14, 1px var(--rule) rule,
              padding 14px var(--pad), safe-area padding-top
     mark     38x38, radius 2, var(--pitch) on var(--ink), 18px/900
     name     22px var(--font-display), letter-spacing .04em
     sub      10px var(--font-mono), letter-spacing .12em, var(--mute)

   Per-mode identity is ONE variable: --head-accent. Nothing else changes.
   ============================================================ */

.pe-head {
  --head-accent: var(--pitch, #00ff85);
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule, #2a2a2a);
  padding-top: env(safe-area-inset-top, 0px);
}
/* Paints the notch strip and any rubber-band overscroll above the bar, so
   page content can never show through at the top on iOS. */
.pe-head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: calc(env(safe-area-inset-top, 0px) + 240px);
  background: rgba(10, 10, 10, 0.98); pointer-events: none;
}
.pe-head__inner {
  /* Full-bleed (owner 2026-08-02: "make the top banner over extended to the
     left and right") — no max-width cage, content runs to the edges. */
  max-width: none; margin: 0;
  padding: 14px 14px;
  display: flex; align-items: center; gap: 12px;
}
.pe-head__brandlink { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.pe-head__mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  background: var(--pitch, #00ff85); color: var(--ink, #0a0a0a);
  font-family: var(--font-display, 'Anton'), 'Anton', Impact, sans-serif;
  font-size: 18px; font-weight: 900; border-radius: 2px;
}
.pe-head__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 0 1 auto; }
.pe-head__name {
  font-family: var(--font-display, 'Anton'), 'Anton', Impact, sans-serif;
  font-size: 22px; line-height: 1.05; letter-spacing: 0.04em;
  color: var(--bone, #fafafa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-head__name b { color: var(--head-accent); font-weight: inherit; }
.pe-head__sub {
  font-family: var(--font-mono, 'JetBrains Mono'), 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; color: var(--mute, #8a8a8a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Left-justified: the action group follows the title instead of being
   shoved to the right edge (owner 2026-08-02). */
.pe-head__actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: 0; }
.pe-head__pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono, 'JetBrains Mono'), 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--head-accent);
  background: color-mix(in srgb, var(--head-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--head-accent) 30%, transparent);
}
.pe-head__pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pe-head__btn {
  appearance: none; cursor: pointer; flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--rule, #2a2a2a); background: rgba(255, 255, 255, 0.04);
  color: var(--bone, #fafafa);
  font-family: var(--font-sans, 'Space Grotesk'), 'Space Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  text-decoration: none;
}
.pe-head__btn:hover { border-color: var(--head-accent); color: var(--head-accent); }

/* PHONES — one predictable reflow for every mode, so none of them can drift
   apart again: brand keeps the first line with the actions; the status pill
   drops to a second line only when it cannot fit. */
@media (max-width: 640px) {
  .pe-head__inner { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .pe-head__brandlink { flex: 0 1 auto; min-width: 0; }
  .pe-head__titles { flex: 1 1 auto; min-width: 0; }
  .pe-head__name { font-size: 18px; }
  .pe-head__mark { width: 34px; height: 34px; font-size: 16px; }
  .pe-head__actions { margin-left: 0; }
  .pe-head__btn { min-height: 38px; padding: 0 12px; font-size: 12px; }
  /* Label-less on the narrowest phones so two actions still fit one line. */
  .pe-head__btn--icon { font-size: 0; padding: 0 11px; }
  .pe-head__btn--icon::before { content: attr(data-icon); font-size: 15px; }
  .pe-head__pill { order: 9; flex: 0 0 auto; }
}

/* ---- HOW TO PLAY dialog (mode-head.js) — same shell for every mode, tinted
   by that mode's --head-accent. ---- */
.pe-howto {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(4, 8, 6, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pe-howto[hidden] { display: none; }
.pe-howto__panel {
  width: min(560px, 100%); max-height: 86dvh; display: flex; flex-direction: column;
  background: linear-gradient(165deg, #10161c, #0a0e12 70%);
  border: 1px solid var(--head-accent, #00ff85); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.pe-howto__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.pe-howto__head b {
  flex: 1; min-width: 0;
  font-family: var(--font-display, 'Anton'), 'Anton', Impact, sans-serif;
  font-size: 15px; letter-spacing: .05em; color: var(--head-accent, #00ff85);
}
.pe-howto__x {
  appearance: none; cursor: pointer; flex: none;
  min-width: 40px; min-height: 40px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; font-size: 15px;
}
.pe-howto__x:hover { border-color: var(--head-accent); color: var(--head-accent); }
.pe-howto__body { overflow-y: auto; padding: 14px 16px 18px; }
.pe-howto__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.pe-howto__steps li {
  font-family: var(--font-sans, 'Space Grotesk'), 'Space Grotesk', system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.5; color: #d6dee8;
}
.pe-howto__steps b { color: #fff; }
.pe-howto__label {
  margin: 18px 0 8px;
  font-family: var(--font-mono, 'JetBrains Mono'), 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 800; letter-spacing: .16em; color: rgba(255,255,255,.5);
}
.pe-howto__score { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: baseline; }
.pe-howto__pts {
  font-family: var(--font-mono, 'JetBrains Mono'), 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--head-accent, #00ff85); white-space: nowrap;
}
.pe-howto__what {
  font-family: var(--font-sans, 'Space Grotesk'), 'Space Grotesk', system-ui, sans-serif;
  font-size: 12.5px; line-height: 1.45; color: #b9c4d0;
}
.pe-howto__foot {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-sans, 'Space Grotesk'), 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.6);
}

/* Opt-in green subline (owner 2026-08-02: "make the Gameweek 1 green").
   Deliberately NOT tied to --head-accent: Gameweek keeps its blue accent,
   only this live-state line is green. */
.pe-head__sub--green { color: #00ff85; }