/* Banzai 88 — site-wide styles: header, logo, about page, scroll control (v13)
   Loaded by index.html and about.html. game.css is index.html only.
   ────────────────────────────────────────────────────────────────────────── */

/* ── base reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #090604;
  color: #f0e5ca;
  /* clip instead of hidden: prevents horizontal overflow without creating
     a scroll container, which would break position: sticky on the header. */
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100svh;
  min-height: 100vh; /* fallback for older browsers */
}

/* ── site header ──────────────────────────────────────────────────────────── */
/* The header is a sticky column: an optional .b88r-banner strip sits above
   the .b88r-header-row that holds the logo and nav. When no banner is
   injected the header is exactly 48/60px tall, same as before. */
#b88r-site-header {
  position: sticky;
  top: 0;
  width: 100%;
  padding-top: max(0px, env(safe-area-inset-top, 0px)); /* B88-PATCH 154: top safe-area inset (0 without one); the header background fills it. Was: no padding-top */
  background: #090604;
  border-bottom: 2px solid #2a1708;
  flex-shrink: 0;
  z-index: 60;
}

/* ── site banner ─────────────────────────────────────────────────────────── */
/* Pinned inside #b88r-site-header as a strip above .b88r-header-row.
   Automatically hidden during active play via the existing header display:none rule.
   Text is kept to ≤2 lines at 375px by the 140-char limit enforced server-side.
   #090604 bg with #f0e5ca text: ~14:1 contrast (exceeds 4.5:1 AA). */
.b88r-banner {
  width: 100%;
  background: #1a0e06;
  border-bottom: 1px solid #2a1708;
  text-align: center;
  padding: 6px 16px;
  box-sizing: border-box;
}

.b88r-banner span,
.b88r-banner-link {
  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f0e5ca;
  text-decoration: none;
  line-height: 1.4;
  display: inline;
  word-break: break-word;
}

.b88r-banner-link:hover {
  color: #c8a546;
  text-decoration: underline;
}

.b88r-banner-link:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 2px;
  border-radius: 1px;
}

/* ── header logo/nav row ─────────────────────────────────────────────────── */
.b88r-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: 48px;
}

@media (min-width: 640px) {
  .b88r-header-row {
    min-height: 60px;
    padding: 0 24px;
  }
}

/* ── logo SVG lockup + inline tagline ────────────────────────────────────── */
/* logo-link is an inline-flex row; align-items:center vertically centers the
   tagline on the SVG. gap:12px is the space between SVG and tagline.
   Desktop only (≥640px): tagline shown. Mobile: tagline display:none,
   header stays exactly 50px — logo-svg is 40px, min-height 48px covers it. */
.b88r-logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 0;
}

.b88r-logo-link:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 4px;
  border-radius: 2px;
}

.b88r-logo-svg {
  height: 29px; /* 35px desktop × (40/48) mobile ratio */
  width: auto;
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  /* viewBox="0 -5 138 35": glyph bbox is y=-4 h=33, 1px pad each side.
     CSS height = viewBox height (35) → scale 1:1, letters same size as before. */
  .b88r-logo-svg { height: 35px; }
}

.b88r-svg-l1 {
  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
  font-weight: 900;
}

.b88r-svg-banzai {
  fill: var(--b88r-logo-main, #ffffff);
}

.b88r-svg-88 {
  fill: var(--b88r-logo-accent, #ff008c);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--b88r-logo-accent, #ff008c) 45%, transparent));
}

.b88r-logo-img {
  height: 29px;
  width: auto;
  max-width: min(55vw, 280px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .b88r-logo-img { height: 35px; }
}

/* ── inline logo tagline — desktop only (≥640px) ─────────────────────────── */
/* Two lines to the right of the SVG, separated by a pink left border.
   line-height:1.5 at 9px = 13.5px/line × 2 lines = 27px — shorter than the
   48px SVG so the header never grows. Breakpoint: min-width:640px (same as
   .b88r-logo-svg height change). White-space:nowrap prevents wrapping into nav. */
.b88r-logo-tagline {
  display: none;
}

@media (min-width: 640px) {
  .b88r-logo-tagline {
    display: block;
    font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #bdb6a8;
    border-left: 2px solid var(--b88r-logo-accent, #ff008c);
    padding-left: 8px;
  }
}

/* ── site nav ─────────────────────────────────────────────────────────────── */
#b88r-site-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.b88r-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #c8a546;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #050302;
  transition: color 0.12s;
  white-space: nowrap;
}

/* B88-PATCH 224 */ @media (hover: hover) and (pointer: fine) { .b88r-nav-link:hover {
  color: #f0e5ca;
} }

.b88r-nav-link:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 3px;
  border-radius: 2px;
  color: #f0e5ca;
}

/* ── next show nav pill ───────────────────────────────────────────────────── */
/* NEXT SHOW is the primary action; styled as a pill to distinguish it from
   the plain ABOUT text link. ID specificity overrides the .b88r-nav-link
   class on all states below.
   Color #c86080 (HSL ~342°, 49%, 58%): muted rose that reads with the gold
   palette. Contrast vs #090604 header: 5.04:1 (passes AA text + UI component).
   Black text on fill: 5.44:1 (passes AA for hover/focus). */
#b88r-next-show-link {
  border: 1px solid #c86080;
  color: #c86080;
  padding: 0 10px;
  border-radius: 2px;
  text-shadow: none;
  transition: background 0.12s, color 0.12s;
}

/* B88-PATCH 224 */ @media (hover: hover) and (pointer: fine) { #b88r-next-show-link:hover {
  background: #c86080;
  color: #000;
  text-shadow: none;
} }

#b88r-next-show-link:focus-visible {
  background: #c86080;
  color: #000;
  outline: 2px solid #c86080;
  outline-offset: 3px;
  border-radius: 2px;
  text-shadow: none;
}

/* B88-PATCH 173: Settings gear (index.html only). 44 x 44, gold frame like the header buttons; hidden on the clean-start scope and on every
   screen but the start screen and the Settings screen itself. Classes only, no inline styles. */
/* B88-PATCH 175: the gear takes the Next Show button's values (1 px #c86080 border, 2 px radius, transparent background, #c86080 icon colour;
   hover and focus: #c86080 fill, #000 icon, focus outline 2 px #c86080 offset 3 px) and the nav link's 44 px height. Was (PATCH 173): 2 px #c8a546
   border, #c8a546 hover fill, #ff008c box-shadow focus ring. */
.b88r-gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid #c86080;
  border-radius: 2px;
  color: #c86080;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s;
}
.b88r-gear-btn svg { display: block; }
/* B88-PATCH 224: hover fill only on devices that really hover (iOS leaves :hover stuck after a tap). Was: .b88r-gear-btn:hover { background: #c86080; color: #000; } */
@media (hover: hover) and (pointer: fine) { .b88r-gear-btn:hover {
  background: #c86080;
  color: #000;
} }
.b88r-gear-btn:active { opacity: 0.7; } /* B88-PATCH 224 tap feedback */
.b88r-gear-btn:focus-visible {
  background: #c86080;
  color: #000;
  outline: 2px solid #c86080;
  outline-offset: 3px;
  border-radius: 2px;
}
/* end B88-PATCH 175 */
.b88r-gear-btn[hidden] { display: none; }
body:has(#b88r-start.b88r-clean-start) .b88r-gear-btn { display: none; }
body[data-screen]:not([data-screen="start"]):not([data-screen="settings"]) .b88r-gear-btn { display: none; }
/* end B88-PATCH 173 */

/* ── no-scroll during active play ────────────────────────────────────────── */
/* Set via document.documentElement.dataset.screen and document.body.dataset.screen
   in showScreen() so both html and body are covered.                         */
html[data-screen="game"],
body[data-screen="game"] {
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-screen="game"] {
  height: 100dvh;
  height: 100vh; /* fallback */
}

/* Header collapses during play so the canvas gets full vertical space. */
body[data-screen="game"] #b88r-site-header {
  display: none;
}

/* Wrap fills viewport exactly during play. */
body[data-screen="game"] #b88r-wrap {
  min-height: unset !important;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
}

/* Game screen fills the wrap. */
body[data-screen="game"] #b88r-game.b88r-active {
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
}

/* ── about page ───────────────────────────────────────────────────────────── */
.b88r-about-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 16px 80px;
}

@media (min-width: 480px) {
  .b88r-about-wrap {
    padding: 56px 32px 96px;
  }
}

.b88r-about-wrap h1 {
  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
  font-size: 22px;
  font-weight: 900;
  color: #c8a546;
  text-shadow: 2px 2px 0 #2a120d;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 36px;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .b88r-about-wrap h1 {
    font-size: 28px;
  }
}

.b88r-about-wrap p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #d8d0bc;
  margin: 0 0 24px;
}

/* ── about page body links ────────────────────────────────────────────────── */
.b88r-about-wrap a {
  color: #c8a546;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s;
}

.b88r-about-wrap a:hover {
  color: #e8c85a;
}

.b88r-about-wrap a:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 2px;
  border-radius: 1px;
}


/* ── page footer (index, about, privacy) ─────────────────────────────────── */
/* Column layout: text links row above, icon row below.
   Hidden during active play so it never overlaps the canvas or keypad. */
body[data-screen="game"] .b88r-page-footer {
  display: none;
}

.b88r-page-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .b88r-page-footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── footer text links row ───────────────────────────────────────────────── */
.b88r-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 16px;
}

.b88r-page-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c8a546;
  text-decoration: none;
  transition: color 0.12s;
  position: relative;
}

/* Thin vertical separator between adjacent footer text links.
   Scoped to .b88r-footer-links so it never appears beside icon links. */
.b88r-footer-links .b88r-page-footer-link:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0.7em;
  background: rgba(200, 165, 70, .35);
  pointer-events: none;
}

.b88r-page-footer-link:hover {
  color: #e8c85a;
}

.b88r-page-footer-link:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── footer icon row ─────────────────────────────────────────────────────── */
.b88r-footer-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.b88r-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #c8a546;
  text-decoration: none;
  transition: color 0.12s;
}

.b88r-footer-icon svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 640px) {
  .b88r-footer-icon {
    width: 44px;
    height: 44px;
  }
}

.b88r-footer-icon:hover {
  color: #e8c85a;
}

.b88r-footer-icon:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── footer App Store badge (only rendered when the link and image are both set) ── */
.b88r-footer-badge {
  display: flex;
  justify-content: center;
  margin-top: 4px; /* on top of the footer's 8px row gap */
}

.b88r-footer-badge-link {
  display: block;
  line-height: 0;
}

.b88r-footer-badge-img {
  display: block;
  height: 40px;
  width: auto;
}

.b88r-footer-badge-link:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 3px;
  border-radius: 2px;
}

/* B88-PATCH 228: app view of /about and /privacy (opened with exactly ?app=1 from the iPhone app).
   The header Play link would open the website game copy inside the Safari sheet, and the logo link
   goes to the same place, so the nav link is hidden and the logo stays visible but is not clickable. */
body.b88r-app-view .b88r-nav-link { display: none; }
body.b88r-app-view .b88r-logo-link { pointer-events: none; cursor: default; }
/* end B88-PATCH 228 */

/* B88-PATCH 229: Android install badge (website only; rendered only when pwa_badge_url is set) */
.b88r-footer-store {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px; /* same as .b88r-footer-badge on its own */
}
.b88r-footer-store .b88r-footer-badge { margin-top: 0; }
.b88r-footer-pwa {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b88r-pwa-btn {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  min-height: 44px;
}
.b88r-pwa-btn[hidden], .b88r-pwa-note[hidden] { display: none; }
/* no empty flex item (and no extra 8px gap) when the button is hidden: iPhone, desktop, installed */
.b88r-footer-pwa:has(> #b88r-pwa-install[hidden]) { display: none; }
.b88r-pwa-img {
  display: block;
  height: 40px;
  width: auto;
  margin: 2px 0; /* 44px tap target without enlarging the image */
}
.b88r-pwa-btn:focus-visible {
  outline: 2px solid #c8a546;
  outline-offset: 3px;
  border-radius: 2px;
}
.b88r-pwa-note {
  margin: 4px 0 0;
  max-width: 280px;
  font-size: 12px;
  line-height: 1.4;
  color: #bdb6a8;
  text-align: center;
}
/* end B88-PATCH 229 */

/* B88-PATCH 231: the Android install note never moves the badges (CSS only; the PATCH 229 rules above stay, these come later and win).
   Was: .b88r-footer-store sized itself to its content and .b88r-footer-pwa was a column flex item holding the button AND the up to 280px wide note,
   so showing the note made the Android item wider than the room beside the App Store badge and the two badges stacked.
   Now the store row spans the footer, .b88r-footer-pwa is display: contents (button and note become direct items of the row), and the note is its
   own full-width line (flex 0 0 100%) centred below both badges; its text stays 280px wide through padding-inline (not max-width, so it can never
   fit beside the badges). The empty-container rule `.b88r-footer-pwa:has(> #b88r-pwa-install[hidden])` has higher specificity than the display: contents
   rule, so a hidden button (iPhone, desktop, installed) still leaves no item and no extra gap. */
.b88r-footer-store { width: 100%; }
.b88r-footer-pwa { display: contents; }
.b88r-pwa-note {
  flex: 0 0 100%;
  box-sizing: border-box;
  max-width: none;
  margin: 0;                                   /* Was: 4px 0 0 (the row gap is 8px) */
  padding-inline: max(0px, calc((100% - 280px) / 2));
  text-align: center;
}
/* end B88-PATCH 231 */

/* B88-PATCH 230: installed web app (standalone display mode).
   (A) No store badges in the installed copy: the App Store badge and the Android install badge both go. Nothing changes outside standalone. */
@media (display-mode: standalone) {
  .b88r-footer-store,
  .b88r-footer-badge { display: none; }
}
/* (B) Splash on the game page: shown only with html.b88r-pwa (set by pwa-boot.js); without the class it is display none, so
   normal visitors never request the image. z-index 1000: above every other z-index in the project (highest was 100, the rotate prompt).
   Failsafe: the animation fades it out after 4s even if pwa.js never runs; pwa.js adds .b88r-splash-out earlier, once the page has loaded. */
#b88r-splash { display: none; }
html.b88r-pwa #b88r-splash {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: #080504;
  background-image: url(pwa-splash.png?v=1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(80vw, 520px) auto;
  animation: b88r-splash-failsafe 0.2s linear 4s forwards;
}
html.b88r-pwa #b88r-splash.b88r-splash-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
html.b88r-pwa #b88r-splash[hidden] { display: none; }
@keyframes b88r-splash-failsafe { to { opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  html.b88r-pwa #b88r-splash { animation-duration: 0.01s; }
  html.b88r-pwa #b88r-splash.b88r-splash-out { transition: none; }
}
/* end B88-PATCH 230 */

/* B88-PATCH 238: NEW dot on the Next Show button (shape, not colour alone; static, no animation). The ::after is absolutely
   positioned, so the button box and its neighbours do not move. The 1 px ring keeps it visible on the hover and focus fill. */
#b88r-next-show-link.b88r-has-new { position: relative; }
#b88r-next-show-link.b88r-has-new::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff008c;
  box-shadow: 0 0 0 1px #090604;
  pointer-events: none;
}