/* ============================================================================
   Gamer's Guild Social Club — shared stylesheet (v6.3)
   Linked from every page AFTER its inline <style>, so these rules win.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Password fields
   The inline rule styles text/email/tel/select/textarea but not password, so
   password boxes fell through to browser defaults. This closes the gap and
   gives every text-like input the same, slightly taller footprint.
   ---------------------------------------------------------------------------- */
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=password],
.field input[type=search],
.field input[type=number],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  background: var(--cream);
  border: 1px solid rgba(167,147,88,.55);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink);
  padding: 13px 16px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(167,147,88,.22);
}

/* Show / hide control that sits inside a password field */
.pw-wrap { position: relative; }
.pw-wrap input[type=password],
.pw-wrap input[type=text] { padding-right: 84px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 40px;
  padding: 0 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Cinzel, serif;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.pw-toggle:hover { color: var(--green); }

/* Visible keyboard focus everywhere, in gold */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   2. Mobile legibility
   The site's rem-based sizes hang off the html root (16px), while body text
   is set to 19px. Raising both on small screens scales every element in
   proportion, so the layout survives and the smallest copy (value cards,
   tier lists, notes) climbs from 16px to 18px. Cormorant's low x-height means
   21px body reads roughly like 17-18px in a conventional serif.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html  { font-size: 18px; }
  body  { font-size: 21px; line-height: 1.6; }

  /* Copy that was tuned tight for desktop columns */
  .value p, .game p, .games-note,
  .tier li, .tier .tag,
  .auth-note, .auth-msg, .book-msg,
  .foot-brand p, .foot-contact p { font-size: 1.05rem; line-height: 1.55; }

  .lead { font-size: 1.28rem; }

  /* Tap targets */
  .btn { min-height: 48px; padding-top: 14px; padding-bottom: 14px; }
  .linkish { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .nav-links a { padding: 10px 0; }

  /* Wider gutters cost line length on a phone */
  .wrap { padding: 0 20px; }
}

/* ----------------------------------------------------------------------------
   3. Getting here — rideshare block on the booking and lounge pages
   ---------------------------------------------------------------------------- */
.getting-here {
  margin-top: 40px;
  padding: 26px 28px;
  border: 1px solid rgba(167,147,88,.45);
  background: rgba(167,147,88,.08);
}
.getting-here h3 {
  font-family: Cinzel, serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}
.getting-here p {
  font-style: italic;
  color: var(--muted-cream);
  font-size: 1.02rem;
  margin-bottom: 16px;
}
.ride-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ride-row .btn { flex: 1 1 140px; }
.ride-row .btn-ghost-dark { color: var(--green); }

/* ----------------------------------------------------------------------------
   4. Library
   ---------------------------------------------------------------------------- */
.lib-toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  align-items: end;
  margin-bottom: 30px;
}
.lib-toolbar .field { margin: 0; }
.lib-count {
  font-family: Cinzel, serif;
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-cream);
  margin-bottom: 18px;
}
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.lib-card {
  background: #F2EFE4;
  border: 1px solid rgba(167,147,88,.5);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease;
}
.lib-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.lib-cover {
  aspect-ratio: 1 / 1;
  background: var(--green-3);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lib-cover img { width: 100%; height: 100%; object-fit: cover; }
.lib-cover span {
  font-family: Cinzel, serif;
  color: var(--gold);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 20px;
  text-align: center;
}
.lib-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.lib-title {
  font-family: Cinzel, serif;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.25;
  color: var(--green);
  margin-bottom: 8px;
}
.lib-meta {
  font-size: .98rem;
  color: var(--muted-cream);
  line-height: 1.45;
  margin-bottom: 10px;
}
.lib-meta b { color: var(--ink); font-weight: 600; }
.lib-shelf {
  margin-top: auto;
  font-family: Cinzel, serif;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-top: 10px;
  border-top: 1px solid rgba(167,147,88,.3);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.lib-shelf .ok  { color: var(--green); }
.lib-shelf .out { color: #8d4a3a; }
.lib-shelf .none{ color: var(--muted-cream); }

.lib-empty {
  text-align: center;
  font-style: italic;
  color: var(--muted-cream);
  padding: 40px 0;
}

/* Suggestions */
.lib-suggest {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(167,147,88,.35);
}
.lib-suggest h2 {
  font-family: Cinzel, serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--green);
  margin-bottom: 6px;
}
.lib-suggest > p { font-style: italic; color: var(--muted-cream); margin-bottom: 24px; }
.suggest-form { display: grid; grid-template-columns: 2fr 3fr auto; gap: 12px; align-items: end; margin-bottom: 26px; }
.suggest-form .field { margin: 0; }
.suggest-list { list-style: none; display: grid; gap: 8px; }
.suggest-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #F2EFE4;
  border: 1px solid rgba(167,147,88,.4);
}
.suggest-list .vote {
  min-width: 56px;
  min-height: 44px;
  border: 1px solid var(--gold);
  background: none;
  cursor: pointer;
  font-family: Cinzel, serif;
  font-size: .9rem;
  color: var(--green);
}
.suggest-list .vote.mine { background: var(--gold); color: var(--green-3); }
.suggest-list .stitle { font-weight: 600; flex: 1; }
.suggest-list .snote { color: var(--muted-cream); font-style: italic; font-size: .95rem; }
.suggest-list .sstatus {
  font-family: Cinzel, serif; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}

/* Curator panel (staff only) */
.curator {
  margin-top: 64px;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(167,147,88,.4);
  outline-offset: 5px;
  background: var(--green);
  color: var(--cream);
  padding: 40px 36px;
}
.curator h2 {
  font-family: Cinzel, serif; font-weight: 600; font-size: 1.2rem; color: var(--gold-bright); margin-bottom: 6px;
}
.curator > p { color: var(--muted-green); font-style: italic; margin-bottom: 22px; }
.curator .field label { color: var(--gold-bright); }
.curator .field textarea, .curator .field input, .curator .field select {
  background: rgba(237,233,221,.06);
  border-color: rgba(167,147,88,.5);
  color: var(--cream);
}
.curator .field textarea { min-height: 200px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; line-height: 1.5; }
.curator-report {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(167,147,88,.4);
  font-size: 1rem;
  white-space: pre-wrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  line-height: 1.5;
  display: none;
}
.curator-report.show { display: block; }
.copy-table { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 1rem; }
.copy-table th {
  font-family: Cinzel, serif; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-bright); text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(167,147,88,.4);
}
.copy-table td { padding: 8px 10px; border-bottom: 1px solid rgba(167,147,88,.18); vertical-align: middle; }
.copy-table input, .copy-table select {
  width: 100%; min-height: 40px; padding: 6px 10px;
  background: rgba(237,233,221,.06); border: 1px solid rgba(167,147,88,.4); color: var(--cream);
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem;
}
.copy-table .save { min-height: 40px; padding: 6px 14px; }

@media (max-width: 768px) {
  .lib-toolbar { grid-template-columns: 1fr; }
  .suggest-form { grid-template-columns: 1fr; }
  .curator { padding: 28px 20px; }
  .copy-table { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-card, .lib-card:hover { transition: none; transform: none; }
}

/* ----------------------------------------------------------------------------
   5. Member navigation — grouped menus, dividers, centred labels
   Desktop: Lounge | Play ▾ | Club ▾ | Public Site | Sign Out
   Mobile:  the same, flattened into the existing drop-down panel with the
            group names as headings.
   ---------------------------------------------------------------------------- */
.nav-links { gap: 0; }
.nav-links > a,
.nav-group { text-align: center; }
.nav-links > a { padding: 6px 22px; }
.nav-links > a + a,
.nav-links > a + .nav-group,
.nav-group + a,
.nav-group + .nav-group { border-left: 1px solid rgba(167,147,88,.35); }
.nav-links > .btn { margin-left: 22px; }

.nav-group { position: relative; }
.nav-group-btn {
  background: none; border: none; cursor: pointer;
  font-family: Cinzel, serif; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-green); padding: 6px 22px; position: relative;
}
.nav-group-btn::after { content: "\25BE"; font-size: .7em; margin-left: 8px; opacity: .7; }
.nav-group-btn:hover, .nav-group:focus-within .nav-group-btn, .nav-group.open .nav-group-btn { color: var(--cream); }
.nav-group.is-active .nav-group-btn { color: var(--cream); }
.nav-group.is-active .nav-group-btn::before {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: var(--gold);
}

.nav-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 230px; background: var(--green-3); border: 1px solid rgba(167,147,88,.45);
  padding: 8px 0; z-index: 60; box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { display: block; }
.nav-menu a {
  display: block; padding: 12px 22px; text-align: center; white-space: nowrap;
}
.nav-menu a::after { display: none; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(167,147,88,.12); color: var(--cream); }
.nav-menu a.active { color: var(--cream); background: rgba(167,147,88,.16); }

@media (max-width: 860px) {
  .nav-links > a, .nav-group { border-left: none !important; text-align: left; }
  .nav-links > a { padding: 14px 28px; }
  .nav-group { width: 100%; }
  .nav-group-btn { display: block; width: 100%; text-align: left; padding: 16px 28px 6px; color: var(--gold); font-size: .6rem; pointer-events: none; }
  .nav-group-btn::after, .nav-group.is-active .nav-group-btn::before { display: none; }
  .nav-menu { display: block; position: static; transform: none; min-width: 0; background: transparent; border: none; box-shadow: none; padding: 0; }
  .nav-menu a { text-align: left; padding: 12px 28px 12px 44px; }
  .nav-links > .btn { margin: 14px 28px 0; }
}

/* ---------------------------------------------------------------------------
   v7.9.4 — Gold button legibility
   `.nav-links a` (muted-green / cream on hover) was out-ranking `.btn-gold`,
   so the header Apply button rendered pale text on gold. Restore the intended
   deep-green label, and set all gold buttons in semibold for contrast.
   ---------------------------------------------------------------------------- */
.btn-gold { font-weight: 600; }
.nav-links a.btn-gold,
.nav-links a.btn-gold:hover,
.nav-links a.btn-gold:focus-visible { color: var(--green-3); }
.nav-links a.btn-gold::after { display: none; }