/* Base site chrome. Not a full port of Ghost's screen.css -- just enough
   for the migrated pages to be legible during development. Accent color
   and dark palette match the live Ghost theme settings (#FF1A75). */

:root {
  --gv-accent: #FF1A75;
  --gv-bg: #111;
  --gv-fg: #eee;

  /* Shared design tokens -- consolidates colors that were previously
     hardcoded ad hoc across games.ejs/big-screen.ejs/profile.ejs/
     account.ejs/game-modal.css (confirmed via a site-wide hex grep: #333
     background/#444 border alone appeared 40+ times independently across
     4+ files). Each token names a *role*, not just a color, so a future
     page reaches for the right one instead of picking a fresh shade. */
  --gv-input-bg: #222;         /* text inputs, selects */
  --gv-btn-bg: #333;           /* utility buttons/panels (.gv-action-btn, .gv-panel-btn) */
  --gv-btn-bg-hover: #3d3d3d;
  --gv-pill-bg: #2a2a2a;       /* pill-shaped controls (.gv-status-btn, chat input) */
  --gv-border: #444;
  --gv-row-bg: rgba(34, 34, 34, 0.55);   /* translucent card-rows inside modals/lists */
  --gv-row-border: rgba(255, 255, 255, 0.08);
  --gv-row-hover: rgba(255, 255, 255, 0.1);
  --gv-muted: #999;
  --gv-link: #8ecbff;
  --gv-active-bg: #2d6a4f;     /* selected/active toggle state (kept distinct from --gv-accent, which is the brand pink used for primary CTAs/links) */
  --gv-active-border: #40916c;
  --gv-danger-solid: #c0392b;  /* solid danger buttons (e.g. a destructive confirm action) */
  --gv-danger-bg: #3d1f1f;     /* soft danger/warning zone panels */
  --gv-danger-border: #6a2d2d;
  --gv-danger-text: #d68f8f;

  --gv-radius-sm: 4px;   /* buttons, inputs, badges */
  --gv-radius-md: 6px;   /* cards, card-rows */
  --gv-radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--gv-bg);
  color: var(--gv-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--gv-accent); }

.gh-head {
  /* Establishes a stacking context above page content -- without this, a
     full-bleed app page's own wrapper (games/profile/account/big-screen all
     use width:100vw sections) can end up painting over the account
     dropdown, silently eating clicks on Logout/My Profile/Settings. */
  position: relative;
  z-index: 1000;
}

.gh-head-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.gh-head-logo img { height: 32px; display: block; }

.gh-head-menu { display: flex; gap: 1.25rem; flex: 1; }
.gh-head-menu a { color: var(--gv-fg); text-decoration: none; font-weight: 600; }
.gh-head-menu a:hover, .gh-head-menu a.is-active { color: var(--gv-accent); }

/* Pure-CSS hamburger that morphs into an X, same 2-bar approach (not 3) as
   the old Ghost "Episode" theme's .gh-burger -- two pseudo-elements that
   rotate toward each other rather than a 3rd bar that has to fade out. */
.gh-head-toggle {
  display: none;
  position: relative;
  width: 26px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gh-head-toggle::before, .gh-head-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gv-fg);
  transition: all 0.2s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.gh-head-toggle::before { top: 4px; }
.gh-head-toggle::after { bottom: 4px; }
.gh-head.is-nav-open .gh-head-toggle::before { top: 10px; transform: rotate(45deg); }
.gh-head.is-nav-open .gh-head-toggle::after { bottom: 10px; transform: rotate(-45deg); }
.gh-head.is-nav-open .gh-head-toggle::before,
.gh-head.is-nav-open .gh-head-toggle::after { background: #111; }

@media (max-width: 780px) {
  .gh-head-inner { flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; }
  .gh-head-logo { order: 1; }
  /* Sign in only lives inside the hamburger menu on mobile now -- the top
     bar just has the logo and the toggle, anchored to the right. */
  .gh-head:not(.is-nav-open) .gh-head-account { display: none; }
  .gh-head-toggle { display: block; order: 3; margin-left: auto; }
  .gh-head-menu { display: none; }

  /* Same trick the old Ghost theme used: the *header itself* becomes the
     full-screen overlay (fixed, filling the viewport, accent-colored)
     rather than a separate overlay element -- see project memory for the
     real reference screenshot/CSS this was matched against. */
  .gh-head.is-nav-open {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
    background: var(--gv-accent);
  }
  /* Grid, not flex, for the open state: logo+toggle need to share one row
     while menu/account each get their own full-width row below -- flexbox
     with `order` alone can't express "these two share a row, these two
     don't" without an extra wrapper element. (The old Ghost theme's real
     CSS used this same grid-rows: auto 1fr auto structure.) */
  .gh-head.is-nav-open .gh-head-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
  }
  .gh-head.is-nav-open .gh-head-logo { grid-column: 1; grid-row: 1; align-self: center; }
  .gh-head.is-nav-open .gh-head-toggle { grid-column: 2; grid-row: 1; align-self: center; }
  .gh-head.is-nav-open .gh-head-menu {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
  }
  .gh-head.is-nav-open .gh-head-menu a {
    color: #111;
    font-size: 1.9rem;
    font-weight: 700;
    padding: 0;
    border: none;
  }
  .gh-head.is-nav-open .gh-head-menu a.is-active { text-decoration: underline; }
  .gh-head.is-nav-open .gh-head-account {
    grid-column: 1 / -1;
    grid-row: 3;
    position: static;
    display: block;
    text-align: center;
    padding: 1.5rem 0 2rem;
  }
  .gh-head.is-nav-open .gh-head-account .gh-head-btn[data-signin-link] {
    display: inline-block;
    background: #111;
    color: #fff;
  }
  /* When signed in, the dropdown's contents are shown directly (no need for
     a second tap on "Account" inside an already-open full-screen menu). */
  .gh-head.is-nav-open [data-account-toggle] { display: none; }
  .gh-head.is-nav-open .gh-account-menu {
    position: static;
    display: block;
    background: none;
    border: none;
    margin-top: 0.75rem;
  }
  .gh-head.is-nav-open .gh-account-menu a,
  .gh-head.is-nav-open .gh-account-logout-form button {
    color: #111;
    text-align: center;
    font-weight: 600;
  }
  .gh-head.is-nav-open .gh-account-menu a:hover,
  .gh-head.is-nav-open .gh-account-logout-form button:hover { background: rgba(0, 0, 0, 0.08); }

  body.gv-nav-open { overflow: hidden; }
}

.gh-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.gh-primary-btn { background: var(--gv-accent); color: #fff; border: none; cursor: pointer; }

.gh-head-account { position: relative; }
.gh-account-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 110%;
  z-index: 1001;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.5rem 0;
  min-width: 150px;
}
.gh-account-menu.is-open { display: block; }
.gh-account-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--gv-fg);
  text-decoration: none;
}
.gh-account-menu a:hover { background: #222; }
.gh-account-logout-form { margin: 0; }
.gh-account-logout-form button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  color: var(--gv-fg);
  font: inherit;
  cursor: pointer;
}
.gh-account-logout-form button:hover { background: #222; }

.gv-signin-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  /* Must always sit above every page-specific overlay (games.ejs's game
     detail modal and lightbox both use z-index up to 100001) -- it can be
     opened from a "Sign in to ..." prompt inside those, so it needs enough
     headroom to never end up hidden behind one again. */
  z-index: 500000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.gv-signin-modal-backdrop.is-open { display: flex; }
.gv-signin-modal {
  position: relative;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 1.75rem;
  width: 100%;
  max-width: 380px;
}
.gv-signin-modal h2 { margin: 0 0 0.75rem; font-size: 1.3rem; }
.gv-signin-modal p { color: #ccc; margin: 0 0 1rem; }
.gv-signin-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: #999;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.gv-signin-modal-close:hover { color: #eee; }
#gv-signin-modal-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
#gv-signin-modal-email {
  flex: 1 1 180px;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  background: var(--gv-input-bg);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-radius-sm);
  color: var(--gv-fg);
}
.gv-signin-modal-error { color: #ff6b6b; }
#gv-signin-modal-fullpage {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--gv-link);
}

.gh-main { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.gh-content { line-height: 1.6; }
.gh-content img { max-width: 100%; height: auto; }

.gh-foot {
  border-top: 1px solid #222;
  padding: 2rem 1.5rem;
  text-align: center;
  color: #888;
  font-size: 0.85rem;
}
.gh-foot-menu { display: flex; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; }
.gh-foot-menu a { color: #aaa; }

.gv-live-dot { color: #ff3b3b; }

/* ---- Shared app-page components -------------------------------------
   Centralizes what used to be copy-pasted per-page: games.ejs and
   big-screen.ejs each independently declared identical .gv-action-btn/
   .gv-panel-btn rules, while events.ejs used .gv-action-btn on its
   "Watch" button without ever defining it anywhere in its own scope --
   since this file (site.css) is the only stylesheet linked from every
   page's <head>, that button rendered with zero styling until now.
   Confirmed live 2026-09-01 via direct grep across the codebase. */
.gv-action-btn {
  background: var(--gv-btn-bg);
  border: 1px solid var(--gv-border);
  color: #ccc;
  border-radius: var(--gv-radius-sm);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.gv-action-btn:hover { background: var(--gv-btn-bg-hover); }
.gv-action-btn:disabled { background: var(--gv-pill-bg); border-color: #3a3a3a; color: #666; cursor: not-allowed; }
/* Variants layer alongside .gv-action-btn (e.g. class="gv-action-btn gv-action-btn-lg"). */
.gv-action-btn-lg { padding: 0.4rem 0.8rem; font-weight: bold; }
.gv-action-btn-accept { background: #2ecc71; color: #003d1f; border: none; }
.gv-action-btn-danger { background: var(--gv-danger-solid); color: #fff; border: none; }

.gv-panel-btn {
  background: var(--gv-btn-bg);
  border: 1px solid var(--gv-border);
  color: var(--gv-fg);
  border-radius: var(--gv-radius-md);
  padding: 0.6rem;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
}
.gv-panel-btn:hover { background: var(--gv-btn-bg-hover); }
.gv-panel-btn:disabled { background: var(--gv-pill-bg); border-color: #3a3a3a; color: #666; cursor: not-allowed; }

/* Pill-style toggle buttons (Follow/Playing/Backlog/Completed, etc.) --
   previously lived only in game-modal.css, not shared with games.ejs's
   own "My Library" row buttons, which is why they drifted out of sync. */
.gv-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gv-pill-bg);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-radius-pill);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: #ccc;
  cursor: pointer;
  text-decoration: none;
}
.gv-status-btn:hover { background: var(--gv-btn-bg-hover); }
.gv-status-btn.gv-active { background: var(--gv-active-bg); border-color: var(--gv-active-border); color: #fff; }

/* Canonical text input / select -- previously every page invented its own
   (or, for games.ejs's "My Library" search/filter, didn't style it at all
   and fell back to unstyled native browser inputs). */
.gv-input, .gv-select {
  background: var(--gv-input-bg);
  color: var(--gv-fg);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-radius-sm);
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

/* Reusable translucent "card row" recipe -- the same shape already shared
   by the game modal's internal rows (.gv-price-row/.gv-dlc-row/etc. in
   game-modal.css), pulled out here so OTHER pages' list-style tiles (e.g.
   events.ejs's game cards, profile.ejs's library cards) can opt into the
   same look/hover behavior with one class instead of a bespoke
   redeclaration that's missing the hover state. */
.gv-card-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gv-row-bg);
  border: 1px solid var(--gv-row-border);
  border-radius: var(--gv-radius-md);
  text-decoration: none;
  color: inherit;
}
.gv-card-row:hover { background: var(--gv-row-hover); }

/* Platform badges (PS/Xbox/Switch/PC pills shown next to a game's
   platform list) -- previously only defined inline in games.ejs. */
.gv-platform-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.35rem;
  border-radius: var(--gv-radius-sm);
  color: #fff;
  background: #555;
}
.gv-platform-badge-pc { background: #3a6ea5; }
.gv-platform-badge-playstation { background: #1b4e9b; }
.gv-platform-badge-xbox { background: #2d7d32; }
.gv-platform-badge-switch { background: #c62828; }

/* Status banners (e.g. "Steam account linked!" / "Couldn't link..."). */
.gv-banner-success { background: #1f3d2b; border: 1px solid var(--gv-active-border); color: #8fd6a8; }
.gv-banner-danger { background: var(--gv-danger-bg); border: 1px solid var(--gv-danger-border); color: var(--gv-danger-text); }

/* Gameoverse custom app pages -- these render their own full-bleed wrapper
   (translucent-blur background spanning 100vw), so the default centered
   .gh-main/.gh-content padding/max-width would just add unwanted margins
   around them. Matches the old Ghost theme's body.page-* treatment. */
body.page-account .gh-main,
body.page-games .gh-main,
body.page-big-screen .gh-main,
body.page-profile .gh-main,
body.page-events .gh-main {
  max-width: none;
  padding: 0;
}
body.page-account .gh-content,
body.page-games .gh-content,
body.page-big-screen .gh-content,
body.page-profile .gh-content,
body.page-events .gh-content {
  line-height: normal;
}