/* Turnstiles — styles.css */

:root {
  /* Warm vintage ticket paper */
  --parchment:   #F2E7CE;
  --parchment-dk:#E6D5B0;
  --parchment-md:#D8C39A;
  /* Ink */
  --ink:         #1A2A3A;
  --ink-mid:     #2C4257;
  --ink-light:   #4F6678;
  --ink-faint:   #5F5340;
  --ink-ghost:   rgba(26,42,58,0.10);
  /* Gold foil (legacy name kept: --gold) */
  --gold:        #C29A2C;
  --gold-lt:     #E7CE8A;
  --gold-pale:   #F6EBCF;
  /* Primary accent — ticket red (legacy name kept: --coral) */
  --coral:       #B83D2B;
  --coral-dk:    #99301F;
  --coral-lt:    #F1DBD1;
  /* Teal secondary */
  --teal:        #1B8F89;
  --teal-lt:     #CFE9E4;
  /* Navy */
  --navy:        #1E354E;
  --navy-lt:     #D5E2EC;
  /* Borders */
  --border:      rgba(26,42,58,0.14);
  --border-md:   rgba(26,42,58,0.22);
  --border-gold: rgba(194,154,44,0.40);
  --radius:      6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Josefin Sans', sans-serif;
  background: var(--parchment);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ========== BG SILHOUETTES ========== */
.bg-layer {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page { position: relative; z-index: 1; }

/* ========== NAV ========== */
.nav {
  background: rgba(242,231,206,0.94);
  border-bottom: 1px solid var(--border-gold);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(14px);
}

.nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 32px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo-wrap {
  width: 38px;
  height: 38px;
  border: 2px solid var(--gold);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gold-pale);
}

.nav-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--ink);
  line-height: 1;
}
.nav-wordmark span { color: var(--coral); }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }

.nav-links a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 4px;
  transition: all 0.15s;
}
.nav-links a:hover { background: var(--parchment-dk); color: var(--ink); }
.nav-links a.active { color: var(--coral); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn-outline {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-mid);
  background: none;
  border: 1px solid var(--border-md);
  padding: 7px 18px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-outline:hover { background: var(--parchment-dk); }

.btn-solid {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: white;
  background: var(--coral);
  border: none;
  padding: 8px 20px;
  border-radius: 3px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.btn-solid:hover { background: var(--coral-dk); }

/* ========== HERO ========== */
.hero-wrap {
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 56px 32px 52px;
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 60px;
  align-items: start;
}

/* ── HERO TITLE BLOCK — Vintage Carnival Marquee ── */
.hero-title-block {
  margin-bottom: 28px;
  position: relative;
}

/* Starburst badge behind the logo text */
.hero-starburst {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}

.hero-starburst-inner {
  background: var(--navy);
  border: 3px solid var(--gold);
  border-radius: 4px;
  padding: 6px 18px 4px;
  position: relative;
  display: inline-block;
}

.hero-starburst-text {
  font-family: 'Special Elite', cursive;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold-lt);
  text-transform: uppercase;
  display: block;
  text-align: center;
}

/* Main marquee wordmark */
.hero-marquee-sign {
  display: block;
  position: relative;
  margin-bottom: 8px;
}

/* Outline effect on TURNSTILES */
.hero-name-outline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: 4px;
  display: block;
  /* layered text-shadow for outline/neon effect */
  color: var(--parchment);
  text-shadow:
    -3px -3px 0 var(--coral),
     3px -3px 0 var(--coral),
    -3px  3px 0 var(--coral),
     3px  3px 0 var(--coral),
     0px -3px 0 var(--coral),
     0px  3px 0 var(--coral),
    -3px  0px 0 var(--coral),
     3px  0px 0 var(--coral),
    0 0 24px rgba(184,61,43,0.22);
}

/* Underline banner */
.hero-name-banner {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 4px 0 16px;
}

.hero-banner-left {
  background: var(--coral);
  height: 8px;
  flex: 1;
  border-radius: 2px 0 0 2px;
}

.hero-banner-center {
  background: var(--navy);
  border: 2px solid var(--coral);
  padding: 0 14px;
  height: 28px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--gold-lt);
}

.hero-banner-right {
  background: var(--coral);
  height: 8px;
  flex: 1;
  border-radius: 0 2px 2px 0;
}

/* Tagline */
.hero-tagline-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.hero-tagline-star { color: var(--gold); font-size: 22px; flex-shrink: 0; }

.hero-tagline {
  font-family: 'Abril Fatface', serif;
  font-style: italic;
  font-size: 34px;
  color: var(--ink-mid);
  line-height: 1;
  letter-spacing: -0.5px;
}

.hero-tagline em {
  color: var(--teal);
  font-style: italic;
}

/* Ticket stub row */
.hero-ticket-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.hero-ticket-stub {
  background: var(--gold-pale);
  border: 1.5px solid var(--border-gold);
  border-radius: 4px;
  padding: 4px 14px;
  font-family: 'Special Elite', cursive;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 1px;
  position: relative;
}

.hero-ticket-stub::before,
.hero-ticket-stub::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--parchment);
  border: 1px solid var(--border-gold);
}
.hero-ticket-stub::before { left: -6px; }
.hero-ticket-stub::after  { right: -6px; }

.hero-ticket-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  background-image: repeating-linear-gradient(
    90deg,
    var(--border) 0, var(--border) 6px,
    transparent 6px, transparent 12px
  );
  border: none;
}

/* Ornamental rule — keep for spacing */
.ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.ornament-line { flex: 0 0 48px; height: 2px; background: var(--gold); }
.ornament-icon { color: var(--gold); font-size: 14px; letter-spacing: 4px; }

.hero-sub {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--ink-light);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 28px;
  font-style: italic;
}

.hero-stats {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  background: var(--gold-pale);
}

.hero-stat {
  padding: 14px 26px;
  text-align: center;
  border-right: 1px solid var(--border-gold);
}
.hero-stat:last-child { border-right: none; }

.hero-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 1px;
  color: var(--coral);
  line-height: 1;
  margin-bottom: 3px;
}

.hero-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-actions { display: flex; gap: 12px; align-items: center; }

.btn-hero {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: white; background: var(--coral);
  border: none; padding: 13px 30px;
  border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.15s;
}
.btn-hero:hover { background: var(--coral-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,75,40,0.25); }

.btn-hero-outline {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-mid);
  background: none; border: 1px solid var(--border-md);
  padding: 13px 22px; border-radius: 3px; cursor: pointer;
  transition: all 0.15s;
}
.btn-hero-outline:hover { background: var(--parchment-dk); }

.btn-hero-outline {
  color: #F3E7C8;
  border-color: rgba(231,206,138,0.4);
}
.btn-hero-outline:hover {
  background: rgba(231,206,138,0.10);
  border-color: rgba(231,206,138,0.7);
}

/* ========== PASSPORT CARD ========== */
.passport {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(14,30,46,0.14), 0 0 0 1px var(--border-gold);
  color: var(--ink);
}

.passport-stub {
  background: var(--navy);
  padding: 18px 22px 16px;
  position: relative;
}

/* Dashed tear line */
.passport-tear {
  height: 0;
  border-top: 2.5px dashed rgba(255,255,255,0.25);
  margin: 14px -22px 14px;
  position: relative;
}
.passport-tear::before {
  content: '';
  position: absolute;
  left: -12px; top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--parchment);
  border: 2px solid rgba(255,255,255,0.2);
}
.passport-tear::after {
  content: '';
  position: absolute;
  right: -12px; top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--parchment);
  border: 2px solid rgba(255,255,255,0.2);
}

.pp-serial {
  font-family: 'Special Elite', cursive;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.pp-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pp-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  color: white;
  line-height: 1;
}

.pp-avatar {
  width: 46px; height: 46px;
  border-radius: 4px;
  border: 2px solid var(--gold-lt);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px; letter-spacing: 1px;
  color: var(--gold-lt);
}

.pp-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pp-tier-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-lt);
  background: rgba(245,217,138,0.12);
  border: 1px solid rgba(245,217,138,0.25);
  padding: 3px 10px; border-radius: 2px;
}

.pp-rank {
  font-size: 11px; font-weight: 300; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55);
}
.pp-rank strong { color: white; font-weight: 700; }

.passport-body {
  padding: 18px 22px;
  background: white;
}

.pp-section-lbl {
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.park-bars { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }

.park-bar-row { display: flex; align-items: center; gap: 10px; }

.park-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.park-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-mid);
  flex: 1;
}

.park-bar-track {
  width: 85px; height: 4px;
  background: var(--parchment-dk);
  border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.park-bar-fill { height: 100%; border-radius: 2px; }

.park-count {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px; letter-spacing: 0.5px;
  color: var(--ink); min-width: 22px; text-align: right;
}

.passport-footer {
  background: var(--parchment);
  border-top: 2px dashed var(--parchment-md);
  padding: 14px 22px;
  display: flex; justify-content: space-around; align-items: center;
}

.pf-stat { text-align: center; }
.pf-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; letter-spacing: 1px; color: var(--coral); line-height: 1;
}
.pf-lbl {
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-faint);
}
.pf-div { width: 1px; height: 28px; background: var(--border); }

/* ========== SECTION WRAPPERS ========== */
.section-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 52px 32px 0;
}

.section-head {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px; letter-spacing: 2px;
  color: var(--ink); line-height: 1; margin-bottom: 3px;
}

.section-sub {
  font-size: 11px; font-weight: 300;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint);
}

.section-link {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--coral); text-decoration: none;
  display: flex; align-items: center; gap: 5px;
  border-bottom: 1px solid rgba(201,75,40,0.3);
  padding-bottom: 1px;
}

.subsection-title {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 21px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #F3E7C8;
  margin-bottom: 12px; padding-bottom: 11px;
  border-bottom: 2px solid rgba(231,206,138,0.22);
}
.subsection-title i {
  flex-shrink: 0; font-size: 13px; color: #2a1d07;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #F8E9B0, #D9B441);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* ========== ORNAMENTAL DIVIDER ========== */
.divider-ornament {
  max-width: 1300px; margin: 0 auto;
  padding: 52px 32px 0;
  display: flex; align-items: center; gap: 16px;
}
.div-rule { flex: 1; height: 1px; background: var(--border); }
.div-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px; letter-spacing: 4px; color: var(--ink-faint);
}

/* ========== TABS ========== */
.tabs {
  display: flex; gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--border-md);
  border-radius: 4px; overflow: hidden;
  width: fit-content;
}

.tab {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 9px 22px; cursor: pointer;
  border: none; border-right: 1px solid var(--border-md);
  background: white; color: var(--ink-faint);
  transition: all 0.15s;
}
.tab:last-child { border-right: none; }
.tab:hover { background: var(--parchment); color: var(--ink); }
.tab.active { background: var(--coral); color: white; border-color: var(--coral); }

/* ========== PARK GRID ========== */
.park-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 12px; }
.park-grid-3 { grid-template-columns: repeat(3,1fr); }

.park-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.park-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--coral); opacity: 0;
  transition: opacity 0.2s;
}
.park-card:hover { border-color: var(--border-md); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,30,46,0.08); }
.park-card:hover::before { opacity: 1; }

.park-icon-big { font-size: 28px; margin-bottom: 12px; display: block; }

.park-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 1px;
  color: var(--ink); margin-bottom: 3px; line-height: 1.1;
}

.park-card-visits {
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.5px; color: var(--ink-faint);
  margin-bottom: 13px;
}

.checkin-btn {
  width: 100%;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 0; border-radius: 3px;
  border: 1px solid var(--border-md);
  background: transparent; color: var(--ink-faint);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all 0.15s;
}
.checkin-btn:hover { border-color: var(--coral); color: var(--coral); background: var(--coral-lt); }
.checkin-btn.featured { border-color: var(--coral); color: var(--coral); background: var(--coral-lt); }
.checkin-btn.featured:hover { background: var(--coral); color: white; }

/* ========== TWO / THREE COL ========== */
.two-col {
  max-width: 1300px; margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.three-col {
  max-width: 1300px; margin: 0 auto;
  padding: 0 32px 52px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px;
}

/* ========== CARD BASE ========== */
.light-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card-hd {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--parchment);
}
.card-hd-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 1.5px;
  color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.card-hd-title i { color: var(--gold); font-size: 16px; }
.card-link {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--coral); text-decoration: none;
}

/* ========== LEADERBOARD ========== */
.lb-row {
  display: flex; align-items: center;
  padding: 11px 18px; gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s; cursor: pointer;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--parchment); }
.lb-row.you { background: var(--coral-lt); }
.lb-row.you:hover { background: #ECD3C6; }

.lb-rank {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: 1px;
  min-width: 22px; text-align: center; color: var(--ink-faint);
}
.lb-rank.gold { color: var(--gold); }
.lb-rank.silver { color: #888; }
.lb-rank.bronze { color: var(--coral); }

.lb-av {
  width: 34px; height: 34px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px; letter-spacing: 1px; flex-shrink: 0;
}

.lb-info { flex: 1; }
.lb-username { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink); }
.lb-detail { font-size: 10px; font-weight: 300; letter-spacing: 0.5px; color: var(--ink-faint); }

.lb-visits-wrap { text-align: right; }
.lb-visits {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 1px; color: var(--ink); line-height: 1;
}
.lb-visits-lbl { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }

.lb-tabs { display: flex; gap: 0; }
.lb-tab {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--border-md); border-right: none;
  background: white; color: var(--ink-faint);
  transition: all 0.1s;
}
.lb-tab:first-child { border-radius: 3px 0 0 3px; }
.lb-tab:last-child { border-right: 1px solid var(--border-md); border-radius: 0 3px 3px 0; }
.lb-tab.active { background: var(--coral); color: white; border-color: var(--coral); }

.you-tag {
  font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--coral);
  background: var(--coral-lt);
  border: 1px solid rgba(21,101,168,0.3);
  padding: 1px 6px; border-radius: 2px; margin-left: 6px;
}

/* ========== FEED ========== */
.feed { display: flex; flex-direction: column; gap: 10px; }

.feed-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  transition: border-color 0.15s;
}
.feed-card:hover { border-color: var(--border-md); }

.feed-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }

.feed-av {
  width: 34px; height: 34px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 1px;
  flex-shrink: 0;
}

.feed-meta { flex: 1; }
.feed-username { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink); }
.feed-parkname { font-size: 11px; font-weight: 300; letter-spacing: 0.5px; color: var(--ink-faint); }
.feed-time { font-size: 10px; letter-spacing: 0.5px; color: var(--ink-faint); white-space: nowrap; }

.feed-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
  display: flex; align-items: center; gap: 4px;
}
.pill i { font-size: 11px; }
.pill-walk { background: var(--teal-lt); color: var(--teal); border: 1px solid rgba(26,125,111,0.2); }
.pill-food { background: var(--gold-pale); color: var(--gold); border: 1px solid rgba(29,160,154,0.25); }
.pill-score { background: var(--coral-lt); color: var(--coral); border: 1px solid rgba(201,75,40,0.2); }
.pill-photo { background: var(--navy-lt); color: var(--navy); border: 1px solid rgba(22,50,84,0.2); }

/* ========== CHECKIN FORM ========== */
.checkin-form-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.form-hd { background: var(--coral); padding: 15px 18px; }
.form-hd-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 2px; color: white; margin-bottom: 1px; }
.form-hd-sub { font-size: 10px; font-weight: 300; letter-spacing: 1px; color: rgba(255,255,255,0.7); text-transform: uppercase; }

.form-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.form-lbl { font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }

.form-mock-input {
  width: 100%; background: var(--parchment);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 9px 12px; font-size: 13px;
  font-family: 'Josefin Sans', sans-serif; font-weight: 300;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}

.form-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.form-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
  background: var(--gold-pale); color: var(--gold);
  border: 1px solid rgba(29,160,154,0.3);
  display: flex; align-items: center; gap: 5px;
}
.form-tag-add {
  font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
  border: 1px dashed var(--border-md);
  background: none; color: var(--ink-faint); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  font-family: 'Josefin Sans', sans-serif;
}

.score-row { display: flex; align-items: center; gap: 10px; }
.score-pips { display: flex; gap: 3px; flex: 1; }
.score-pip { flex: 1; height: 6px; border-radius: 1px; background: var(--parchment-dk); }
.score-pip.filled { background: var(--gold); }
.score-pip.half { background: linear-gradient(to right, var(--gold) 50%, var(--parchment-dk) 50%); }
.score-val { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; color: var(--gold); min-width: 38px; }

.form-textarea {
  width: 100%; background: var(--parchment);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 9px 12px; font-size: 12px;
  font-family: 'Josefin Sans', sans-serif; font-weight: 300;
  letter-spacing: 0.5px; color: var(--ink-light);
  resize: none; height: 64px; line-height: 1.6;
}

.form-submit {
  width: 100%; font-family: 'Josefin Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: white; background: var(--coral);
  border: none; border-radius: 4px; padding: 11px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all 0.15s;
}
.form-submit:hover { background: var(--coral-dk); }
.form-note { padding: 0 18px 13px; font-size: 9px; font-weight: 300; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-faint); text-align: center; }

/* ========== FOOD SCORES ========== */
.food-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--border);
  transition: background 0.1s; cursor: pointer;
}
.food-item:last-child { border-bottom: none; }
.food-item:hover { background: var(--parchment); }

.food-rank { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; color: var(--ink-faint); min-width: 20px; text-align: center; }
.food-emoji { font-size: 20px; width: 34px; text-align: center; }
.food-info { flex: 1; }
.food-name { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink); margin-bottom: 1px; }
.food-loc { font-size: 10px; font-weight: 300; letter-spacing: 0.5px; color: var(--ink-faint); }
.food-score-block { text-align: right; }
.food-score-num { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; color: var(--gold); line-height: 1; }
.food-rev-count { font-size: 9px; font-weight: 300; color: var(--ink-faint); }

/* ========== PHOTOS ========== */
.photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 3px; }
.photo-thumb {
  aspect-ratio: 1; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer; position: relative; overflow: hidden;
  border: 1px solid var(--border); transition: opacity 0.15s;
}
.photo-thumb:hover { opacity: 0.85; }
.photo-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(14,30,46,0.6));
  padding: 4px 5px 5px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.photo-user { font-size: 8px; font-weight: 700; color: white; letter-spacing: 0.5px; }
.photo-score { font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: var(--gold-lt); }

/* ========== TIERS ========== */
.tiers-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 10px;
}
.tiers-lbl { font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 7px; }
.tier-row { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.tier-row:last-child { margin-bottom: 0; }
.tier-badge-block { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; min-width: 76px; text-align: center; }
.t-bronze { background: var(--coral-lt); color: var(--coral); border: 1px solid rgba(201,75,40,0.2); }
.t-silver { background: #F0F0EE; color: #666; border: 1px solid rgba(0,0,0,0.12); }
.t-gold { background: var(--gold-pale); color: var(--gold); border: 1px solid rgba(29,160,154,0.3); }
.t-platinum { background: var(--teal-lt); color: var(--teal); border: 1px solid rgba(26,125,111,0.2); }
.tier-visits { font-size: 11px; font-weight: 300; letter-spacing: 0.5px; color: var(--ink-light); }

/* ========== CTA BANNER ========== */
.cta-wrap { max-width: 1300px; margin: 52px auto 0; padding: 0 32px; }
.cta-inner {
  background: var(--navy);
  border-radius: var(--radius); padding: 48px 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
}
.cta-watermark {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 140px; letter-spacing: 4px;
  color: rgba(232,236,240,0.04);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.cta-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 10px; }
.cta-title { font-family: 'Bebas Neue', sans-serif; font-size: 48px; letter-spacing: 2px; color: white; line-height: 0.95; margin-bottom: 14px; }
.cta-sub { font-size: 14px; font-weight: 300; letter-spacing: 0.5px; color: rgba(232,236,240,0.65); max-width: 440px; line-height: 1.7; }
.cta-actions { display: flex; gap: 12px; position: relative; z-index: 2; flex-shrink: 0; }

.btn-cta-wh {
  font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--navy); background: white;
  border: none; padding: 12px 28px; border-radius: 3px; cursor: pointer;
  transition: all 0.15s;
}
.btn-cta-wh:hover { background: var(--parchment-dk); }

.btn-cta-out {
  font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(232,236,240,0.8);
  background: none; border: 1px solid rgba(232,236,240,0.2);
  padding: 12px 22px; border-radius: 3px; cursor: pointer;
  transition: all 0.15s;
}
.btn-cta-out:hover { background: rgba(232,236,240,0.07); }

/* ========== FOOTER ========== */
.site-footer {
  max-width: 1300px; margin: 52px auto 0;
  padding: 26px 32px 44px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.footer-brand { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 2px; color: var(--ink); }
.footer-brand span { color: var(--coral); }
.footer-tagline { font-size: 10px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.footer-links { display: flex; gap: 22px; list-style: none; }
.footer-links a { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { font-size: 10px; font-weight: 300; letter-spacing: 0.5px; color: var(--ink-faint); }



/* =====================================================
   INTERACTIVE APP — MODALS, VIEWS, STATE
   ===================================================== */

/* ── Screen/view system ── */
.screen { display: none; }
.screen.active { display: block; }

/* ── Overlay backdrop ── */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(14,30,46,0.55);
  z-index: 500;
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay.open { display: flex; }

/* ── Modal panel ── */
.modal {
  background: #FCF9F1;
  border-radius: 16px;
  width: 100%;
  min-width: 0;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(194,154,44,0.22);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  animation: modal-in 0.22s cubic-bezier(.2,.7,.3,1);
}
.modal-wide { max-width: 640px; }

@keyframes modal-in {
  from { opacity:0; transform: translateY(16px) scale(0.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.modal-hd {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-hd-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px; letter-spacing: 1.5px; color: var(--ink);
}
.modal-close {
  width: 34px; height: 34px;
  border: none; border-radius: 999px;
  background: rgba(26,42,58,0.05); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-light); font-size: 17px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: rgba(26,42,58,0.10); color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.modal-body { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ── Form inputs (real ones) ── */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-light);
  display: block; margin-bottom: 7px;
}
.field-input {
  width: 100%;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px; font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(26,42,58,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(184,61,43,0.13); }
.field-input::placeholder { color: var(--ink-faint); font-weight: 300; }

select.field-input { cursor: pointer; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field-hint {
  font-size: 10px; font-weight: 300; letter-spacing: 0.3px;
  color: var(--ink-faint); margin-top: 5px;
}

.field-error {
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  color: #C0392B; margin-top: 5px; display: none;
}
.field-error.show { display: block; }

.pw-requirements { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -8px 0 16px; }
.pw-req {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--ink-faint); display: flex; align-items: center; gap: 4px;
  transition: color 0.15s;
}
.pw-req::before { content: '○'; font-size: 9px; }
.pw-req.met { color: var(--teal); }
.pw-req.met::before { content: '✓'; }

/* consistent keyboard focus rings across action buttons */
.btn-hero:focus-visible, .btn-hero-outline:focus-visible,
.btn-cta-wh:focus-visible, .btn-cta-out:focus-visible,
.btn-sm:focus-visible, .btn-solid:focus-visible,
.btn-outline:focus-visible, .checkin-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ── Score slider ── */
.score-slider-wrap { margin-bottom: 8px; }
.score-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: var(--parchment-dk); outline: none; cursor: pointer;
}
.score-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral); border: 2px solid white;
  box-shadow: 0 2px 6px rgba(14,30,46,0.2); cursor: pointer;
}
.score-slider-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--ink-faint); margin-top: 4px;
  letter-spacing: 0.5px;
}
.score-display {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px; letter-spacing: 1px; color: var(--coral);
  text-align: center; line-height: 1;
}
.score-display-sub {
  text-align: center; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}

/* ── Step indicator ── */
.steps {
  display: flex; gap: 0; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.step-item {
  flex: 1; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 12px;
  border-bottom: 2px solid transparent; margin-bottom: -17px;
  transition: all 0.15s;
}
.step-item.active { color: var(--coral); border-color: var(--coral); }
.step-item.done { color: var(--teal); border-color: var(--teal); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--parchment-dk); color: var(--ink-faint);
  font-size: 11px; margin-right: 6px;
  transition: all 0.15s;
}
.step-item.active .step-num { background: var(--coral); color: white; }
.step-item.done .step-num { background: var(--teal); color: white; }

/* ── Stat cards (profile) ── */
.stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 20px; }
.stat-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 12px; text-align: center;
}
.stat-card-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; letter-spacing: 1px; color: var(--coral); line-height: 1;
}
.stat-card-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 2px;
}

/* ── Park visit history table ── */
.visit-table { width: 100%; border-collapse: collapse; }
.visit-table th {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 14px; text-align: left;
  border-bottom: 1px solid var(--border); background: var(--parchment);
}
.visit-table td {
  font-size: 13px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); color: var(--ink);
}
.visit-table tr:last-child td { border-bottom: none; }
.visit-table tr:hover td { background: var(--parchment); }
.visit-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 2px 8px; border-radius: 2px;
  background: var(--coral-lt); color: var(--coral);
}

/* ── Auth screens ── */
.auth-wrap {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  padding: 32px;
}
.auth-card {
  background: white; border-radius: 12px;
  width: 100%; max-width: 440px;
  box-shadow: 0 16px 48px rgba(14,30,46,0.12);
  overflow: hidden;
}
.auth-hd {
  background: var(--navy);
  padding: 24px 28px 20px;
  text-align: center;
}
.auth-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; letter-spacing: 4px; color: white; margin-bottom: 4px;
}
.auth-logo span { color: var(--gold-lt); }
.auth-sub {
  font-size: 11px; font-weight: 300; letter-spacing: 1px;
  color: rgba(255,255,255,0.6); text-transform: uppercase;
}
.auth-body { padding: 28px; }
.auth-switch {
  text-align: center; margin-top: 18px;
  font-size: 12px; font-weight: 300; color: var(--ink-faint);
}
.auth-switch a {
  color: var(--coral); font-weight: 700; cursor: pointer; text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }

.auth-avatar-picker {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 14px 0;
}
.avatar-opt {
  width: 48px; height: 48px; border-radius: 6px;
  border: 2px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer;
  transition: all 0.15s; background: var(--parchment);
}
.avatar-opt:hover { border-color: var(--coral); }
.avatar-opt.selected { border-color: var(--coral); background: var(--coral-lt); }

/* uploaded profile photo — fills whatever container it's dropped into
   (border-radius:inherit picks up the container's shape automatically) */
.avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-img-inline {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  object-fit: cover; vertical-align: middle; margin-right: 2px;
}

/* ── Profile avatar circle ── */
.profile-avatar {
  width: 64px; height: 64px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  border: 2px solid var(--border-gold);
  flex-shrink: 0;
}

/* ── Toast notification ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--navy); color: white;
  font-size: 13px; font-weight: 500; letter-spacing: 0.5px;
  padding: 12px 20px; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(14,30,46,0.3);
  z-index: 1000; opacity: 0; transform: translateY(8px);
  transition: all 0.25s; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--teal); }
.toast.error { background: #C0392B; }

/* ── Photo upload area ── */
.photo-upload-zone {
  border: 2px dashed var(--border-md);
  border-radius: 8px; padding: 32px 20px;
  text-align: center; cursor: pointer;
  transition: all 0.15s; background: var(--parchment);
}
.photo-upload-zone:hover { border-color: var(--coral); background: var(--coral-lt); }
.photo-upload-icon { font-size: 32px; margin-bottom: 10px; color: var(--ink-faint); }
.photo-upload-text { font-size: 13px; font-weight: 600; color: var(--ink-light); }
.photo-upload-sub { font-size: 11px; color: var(--ink-faint); margin-top: 4px; font-weight: 300; }

/* ── Nav user pill ── */
.nav-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--border-md); border-radius: 24px;
  cursor: pointer; transition: all 0.15s; background: white;
}
.nav-user:hover { background: var(--parchment); }
.nav-user-av {
  width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--coral-lt);
}
.nav-user-name {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--ink);
}

/* ── Dropdown menu ── */
.dropdown {
  position: absolute; top: 52px; right: 32px;
  background: white; border: 1px solid var(--border-md);
  border-radius: 6px; padding: 6px;
  box-shadow: 0 8px 24px rgba(14,30,46,0.12);
  z-index: 300; min-width: 180px;
  display: none;
}
.dropdown.open { display: block; }
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 4px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.3px;
  color: var(--ink); cursor: pointer;
  transition: background 0.1s;
}
.dropdown-item:hover { background: var(--parchment); }
.dropdown-item i { font-size: 15px; color: var(--ink-faint); }
.dropdown-item.danger { color: #C0392B; }
.dropdown-item.danger i { color: #C0392B; }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Profile page ── */
.profile-header-card {
  background: var(--navy);
  border-radius: 10px; overflow: hidden; margin-bottom: 20px;
}
.profile-hd-inner {
  padding: 28px 28px 24px;
  display: flex; align-items: flex-start; gap: 20px;
}
.profile-info { flex: 1; }
.profile-display-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px; letter-spacing: 2px; color: white; line-height: 1;
  margin-bottom: 4px;
}
.profile-username {
  font-size: 13px; font-weight: 300; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55); margin-bottom: 10px;
}
.profile-bio {
  font-size: 13px; font-weight: 300; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.7); line-height: 1.6; max-width: 400px;
}
.profile-badges {
  padding: 14px 28px;
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; gap: 12px; flex-wrap: wrap;
}
.badge {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 2px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}
.badge.gold { background: rgba(29,160,154,0.2); border-color: rgba(29,160,154,0.4); color: var(--gold-lt); }

/* ── Rank tier emblems (Monthly / Yearly) ── */
.tier-emblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; line-height: 1; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  vertical-align: middle;
}
.tier-emblem-sm { width: 16px; height: 16px; font-size: 9px; }
.tier-emblem-empty {
  /* solid, background-agnostic - this one shows up on both light (food review) and dark (profile) surfaces */
  background: #9CA3AF; color: #fff;
  font-size: 10px; font-weight: 700;
}
.tier-badge { display: inline-flex; align-items: center; gap: 6px; }
.tier-badge-label { opacity: 0.6; font-weight: 400; letter-spacing: 0.5px; }
.tier-badge-empty { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); }

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 48px 24px;
  color: var(--ink-faint);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.empty-state-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 1px; color: var(--ink-light);
  margin-bottom: 6px;
}
.empty-state-sub { font-size: 13px; font-weight: 300; line-height: 1.6; }

/* ── Page nav tabs ── */
.page-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.page-tab {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 10px 20px; cursor: pointer; border: none; background: none;
  color: var(--ink-faint); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all 0.15s;
}
.page-tab:hover { color: var(--ink); }
.page-tab.active { color: var(--coral); border-color: var(--coral); }

/* ── Responsive nav ── */
.nav-inner { position: relative; }

/* ── Btn sizes ── */
.btn-sm {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 3px;
  border: 1px solid var(--border-md);
  background: white; color: var(--ink-mid);
  cursor: pointer; transition: all 0.15s;
}
.btn-sm:hover { background: var(--parchment); }
.btn-sm.primary {
  background: var(--coral); color: white; border-color: var(--coral);
}
.btn-sm.primary:hover { background: var(--coral-dk); }
.btn-sm.danger { color: #C0392B; border-color: rgba(192,57,43,0.35); }
.btn-sm.danger:hover { background: #C0392B; color: white; border-color: #C0392B; }

/* ── Progress bar ── */
.rank-progress { margin: 10px 0; }
.rank-progress-track {
  height: 5px; background: var(--parchment-dk); border-radius: 3px; overflow: hidden;
}
.rank-progress-fill { height: 100%; border-radius: 3px; background: var(--coral); transition: width 0.6s; }
.rank-progress-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--ink-faint); margin-top: 4px; letter-spacing: 0.5px;
}

/* ======================================================
   GIANT TICKET HERO (landing) + ANIMATED SKY
   ====================================================== */
.ticket-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 32px 76px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -6%, rgba(231,206,138,0.20), transparent 60%),
    radial-gradient(ellipse 130% 95% at 50% 0%, #2B465F 0%, #20374F 48%, #182C3E 100%);
  border-bottom: 1px solid var(--border-gold);
}
@media (max-width: 600px) { .ticket-hero { padding-top: 112px; } }

/* ---------- animated sky layer ---------- */
.sky-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* twinkling star field */
.sky-fx::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 28% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 45% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 68% 16%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 82% 26%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 92% 10%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 58% 8%, rgba(255,255,255,0.5), transparent);
  animation: twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.55} 50%{opacity:1} }

/* fireworks: a bright flash that bursts into radiating sparks + a shockwave ring */
.fw {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  opacity: 0;
  /* radiating spark particles — outer ring of 16 + inner ring of 8 */
  box-shadow:
    38px 0 0 currentColor, 35px 15px 0 currentColor, 27px 27px 0 currentColor, 15px 35px 0 currentColor,
    0 38px 0 currentColor, -15px 35px 0 currentColor, -27px 27px 0 currentColor, -35px 15px 0 currentColor,
    -38px 0 0 currentColor, -35px -15px 0 currentColor, -27px -27px 0 currentColor, -15px -35px 0 currentColor,
    0 -38px 0 currentColor, 15px -35px 0 currentColor, 27px -27px 0 currentColor, 35px -15px 0 currentColor,
    20px 0 0 currentColor, 14px 14px 0 currentColor, 0 20px 0 currentColor, -14px 14px 0 currentColor,
    -20px 0 0 currentColor, -14px -14px 0 currentColor, 0 -20px 0 currentColor, 14px -14px 0 currentColor;
  animation: fw-burst 6s ease-out infinite;
}
/* bright core flash */
.fw::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 16px 5px currentColor;
  opacity: 0;
  animation: fw-flash 6s ease-out infinite;
  animation-delay: inherit;
}
/* expanding shockwave ring */
.fw::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: fw-ring 6s ease-out infinite;
  animation-delay: inherit;
}
@keyframes fw-burst {
  0%   { opacity: 0; transform: translateY(0) scale(0.12); }
  6%   { opacity: 1; }
  42%  { opacity: 1; transform: translateY(3px) scale(1); }
  68%  { opacity: 0; transform: translateY(14px) scale(1.18); }
  100% { opacity: 0; transform: translateY(14px) scale(1.18); }
}
@keyframes fw-burst-big {
  0%   { opacity: 0; transform: translateY(0) scale(0.15); }
  6%   { opacity: 1; }
  42%  { opacity: 1; transform: translateY(4px) scale(1.7); }
  72%  { opacity: 0; transform: translateY(24px) scale(1.95); }
  100% { opacity: 0; transform: translateY(24px) scale(1.95); }
}
@keyframes fw-flash {
  0%, 100% { opacity: 0; transform: scale(0); }
  3%  { opacity: 1; transform: scale(1.3); }
  13% { opacity: 0; transform: scale(0.4); }
}
@keyframes fw-ring {
  0%, 4% { opacity: 0; transform: scale(0.3); }
  9%  { opacity: 0.85; }
  26% { opacity: 0; transform: scale(4); }
  100%{ opacity: 0; transform: scale(4); }
}
.fw-1 { top: 96px; left: 14%; color: #E7CE8A; animation-delay: 0s;   }
.fw-2 { top: 124px; left: 30%; color: #F1A6A0; animation-delay: 1.3s; }
.fw-3 { top: 92px; left: 48%; color: #A6E3DE; animation-delay: 2.6s; }
.fw-4 { top: 132px; left: 66%; color: #F2C879; animation-delay: 3.6s; }
.fw-5 { top: 104px; left: 84%; color: #F1A6A0; animation-delay: 4.5s; }
.fw-6 { top: 136px; left: 20%; color: #A6E3DE; animation-delay: 5.4s; }
.fw-7 { top: 108px; left: 58%; color: #FFF3D0; animation-delay: 3.0s; }
.fw-8 { top: 128px; left: 78%; color: #F2C879; animation-delay: 6.6s; }
/* bigger finale shells */
.fw-4, .fw-7 { animation-name: fw-burst-big; }

/* ---------- the ticket card ---------- */
.ticket {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 240px;
  /* shadow follows the scalloped shape of the masked pieces */
  filter: drop-shadow(0 22px 38px rgba(0,0,0,0.5));
}
/* scalloped LEFT edge + notched left corners (main panel) */
.ticket-main {
  background: linear-gradient(180deg, #F7E9C2 0%, #EFDCAE 100%);
  -webkit-mask:
    radial-gradient(circle 9px at left center, #0000 0 9px, #000 9.5px) left center / 100% 26px repeat-y,
    radial-gradient(circle 14px at 0 0,    #0000 13px, #000 14px) no-repeat,
    radial-gradient(circle 14px at 0 100%, #0000 13px, #000 14px) no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at left center, #0000 0 9px, #000 9.5px) left center / 100% 26px repeat-y,
    radial-gradient(circle 14px at 0 0,    #0000 13px, #000 14px) no-repeat,
    radial-gradient(circle 14px at 0 100%, #0000 13px, #000 14px) no-repeat;
  mask-composite: intersect;
}
/* engraved double-rule frame on the main panel */
.ticket-main::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1.4px solid rgba(154,107,30,0.55);
  outline: 1px solid rgba(154,107,30,0.28);
  outline-offset: 3px;
  border-radius: 4px;
  pointer-events: none;
}
/* thin inset frame on the stub */
.ticket-stub::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1.2px solid rgba(154,107,30,0.45);
  border-radius: 4px;
  pointer-events: none;
}

.ticket-main { padding: 36px 40px 34px; position: relative; }

.ticket-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 4px; font-size: 15px;
  color: var(--coral);
  border-bottom: 2px solid rgba(26,42,58,0.12);
  padding-bottom: 12px; margin-bottom: 18px;
}
.ticket-head-star { color: var(--gold); }
.ticket-head-no {
  margin-left: auto;
  font-family: 'Special Elite', cursive;
  font-size: 11px; letter-spacing: 2px; color: var(--ink-faint);
}

.ticket-eyebrow {
  font-family: 'Special Elite', cursive;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink-light); margin-bottom: 6px;
}

.beta-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--coral); background: var(--coral-lt);
  border: 1px solid rgba(184,61,43,0.3); border-radius: 999px;
  padding: 4px 12px; margin-bottom: 12px;
}

.ticket-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.82;
  letter-spacing: 3px;
  color: var(--ink);
  margin: 2px 0 4px;
}
.ticket-wordmark span { color: var(--coral); }

.ticket-banner {
  display: flex; align-items: center; gap: 0; margin: 12px 0 18px;
}
.ticket-banner .tb-l, .ticket-banner .tb-r {
  flex: 1; height: 7px; background: var(--coral);
}
.ticket-banner .tb-l { border-radius: 2px 0 0 2px; }
.ticket-banner .tb-r { border-radius: 0 2px 2px 0; }
.ticket-banner .tb-c {
  background: var(--navy); color: var(--gold-lt);
  border: 2px solid var(--coral);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 4px; font-size: 14px;
  padding: 4px 16px; white-space: nowrap;
}

.ticket-tagline {
  font-size: 15px; font-weight: 300; line-height: 1.75;
  color: var(--ink-mid); max-width: 560px; margin-bottom: 26px;
}
.ticket-tagline em { color: var(--coral); font-style: italic; font-weight: 400; }

.ticket-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

.ticket-feats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Special Elite', cursive;
  font-size: 12px; letter-spacing: 1px; color: var(--ink-light);
}
.ticket-feats .tf-dot { color: var(--gold); }

/* ---------- tear-off stub ---------- */
.ticket-stub {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(122,92,28,0.05) 18px 19px),
    linear-gradient(180deg, #F0E0AE, #E7D496);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 30px 18px; text-align: center;
  /* scalloped RIGHT edge + notched right corners */
  -webkit-mask:
    radial-gradient(circle 9px at right center, #0000 0 9px, #000 9.5px) right center / 100% 26px repeat-y,
    radial-gradient(circle 14px at 100% 0,    #0000 13px, #000 14px) no-repeat,
    radial-gradient(circle 14px at 100% 100%, #0000 13px, #000 14px) no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at right center, #0000 0 9px, #000 9.5px) right center / 100% 26px repeat-y,
    radial-gradient(circle 14px at 100% 0,    #0000 13px, #000 14px) no-repeat,
    radial-gradient(circle 14px at 100% 100%, #0000 13px, #000 14px) no-repeat;
  mask-composite: intersect;
}
/* real ticket perforation — a column of punched holes along the seam */
.ticket-stub::before {
  content: '';
  position: absolute; left: -9px; top: 0; bottom: 0; width: 18px;
  background: radial-gradient(circle at center, #142636 0 3px, rgba(20,38,54,0) 3.7px);
  background-size: 18px 15px;
  background-position: center -1px;
  background-repeat: repeat-y;
}
.stub-star { color: var(--gold); font-size: 14px; line-height: 1; }
.stub-lines { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.stub-good, .stub-adm {
  font-family: 'Special Elite', cursive;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink-mid);
}
.stub-one {
  font-family: 'Abril Fatface', serif;
  font-size: 38px; line-height: 0.9; letter-spacing: 1px;
  color: var(--coral);
}
.stub-no {
  font-family: 'Special Elite', cursive;
  font-size: 11px; letter-spacing: 2px; color: var(--ink-faint);
}

/* ---------- ticket hero responsive ---------- */
@media (max-width: 820px) {
  .ticket { grid-template-columns: 1fr; }
  /* stacked: scallop both side edges; notch top corners (main) / bottom corners (stub) */
  .ticket-main {
    -webkit-mask:
      radial-gradient(circle 9px at left center,  #0000 0 9px, #000 9.5px) left center / 100% 26px repeat-y,
      radial-gradient(circle 9px at right center, #0000 0 9px, #000 9.5px) right center / 100% 26px repeat-y,
      radial-gradient(circle 14px at 0 0,    #0000 13px, #000 14px) no-repeat,
      radial-gradient(circle 14px at 100% 0, #0000 13px, #000 14px) no-repeat;
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 9px at left center,  #0000 0 9px, #000 9.5px) left center / 100% 26px repeat-y,
      radial-gradient(circle 9px at right center, #0000 0 9px, #000 9.5px) right center / 100% 26px repeat-y,
      radial-gradient(circle 14px at 0 0,    #0000 13px, #000 14px) no-repeat,
      radial-gradient(circle 14px at 100% 0, #0000 13px, #000 14px) no-repeat;
    mask-composite: intersect;
  }
  .ticket-stub {
    -webkit-mask:
      radial-gradient(circle 9px at left center,  #0000 0 9px, #000 9.5px) left center / 100% 26px repeat-y,
      radial-gradient(circle 9px at right center, #0000 0 9px, #000 9.5px) right center / 100% 26px repeat-y,
      radial-gradient(circle 14px at 0 100%,    #0000 13px, #000 14px) no-repeat,
      radial-gradient(circle 14px at 100% 100%, #0000 13px, #000 14px) no-repeat;
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 9px at left center,  #0000 0 9px, #000 9.5px) left center / 100% 26px repeat-y,
      radial-gradient(circle 9px at right center, #0000 0 9px, #000 9.5px) right center / 100% 26px repeat-y,
      radial-gradient(circle 14px at 0 100%,    #0000 13px, #000 14px) no-repeat,
      radial-gradient(circle 14px at 100% 100%, #0000 13px, #000 14px) no-repeat;
    mask-composite: intersect;
    flex-direction: row; flex-wrap: wrap; border-radius: 0 0 8px 8px;
    padding: 22px 18px; gap: 8px 20px; justify-content: center;
    background:
      repeating-linear-gradient(90deg, transparent 0 18px, rgba(122,92,28,0.05) 18px 19px),
      linear-gradient(180deg, #F0E0AE, #E7D496);
  }
  .ticket-stub::before {
    left: 0; right: 0; top: -9px; bottom: auto; width: auto; height: 18px;
    background: radial-gradient(circle at center, #142636 0 3px, rgba(20,38,54,0) 3.7px);
    background-size: 15px 18px;
    background-position: -1px center;
    background-repeat: repeat-x;
  }
  .stub-lines { flex-direction: row; align-items: baseline; gap: 8px; }
  .stub-one { font-size: 26px; }
}
@media (max-width: 560px) {
  .ticket-main { padding: 28px 22px 24px; }
  .ticket-actions .btn-hero, .ticket-actions .btn-hero-outline { width: 100%; justify-content: center; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sky-fx::before,
  .fw, .fw::before, .fw::after { animation: none !important; }
  .fw { opacity: 0.5; transform: scale(1); }
  .fw::before { opacity: 0.5; }
  .fw::after { opacity: 0.3; transform: scale(2); }
}

/* ======================================================
   SITE HEADER (landing) — full-width, blends into the hero
   ====================================================== */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease,
              -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease;
}
.site-head.scrolled {
  background: rgba(12, 25, 40, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 6px 28px rgba(0,0,0,0.32);
}
.site-head-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 40px; height: 74px;
}
.sh-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; border-radius: 8px; }
.sh-logo { width: 34px; height: 34px; flex-shrink: 0; color: #E7CE8A; }
.sh-logo svg { width: 100%; height: 100%; display: block; }
.sh-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 25px; letter-spacing: 3px; line-height: 1;
  color: #F4EFE3;
}
/* center browse nav — high-contrast, restrained */
.sh-nav { display: flex; align-items: center; gap: 2px; }
.sh-nav a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.70); text-decoration: none;
  padding: 9px 14px; border-radius: 999px;
  transition: color 0.18s ease, background-color 0.18s ease; white-space: nowrap;
}
.sh-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sh-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sh-signin {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(255,255,255,0.82); background: transparent; border: none;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease; white-space: nowrap;
}
.sh-signin:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sh-join {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.2px;
  color: #14213a; border: none; padding: 11px 22px; margin-left: 6px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #F0D27E, #DDB247);
  box-shadow: 0 1px 2px rgba(0,0,0,0.22);
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.sh-join:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(221,178,71,0.30); }
.sh-nav a:focus-visible, .sh-signin:focus-visible, .sh-join:focus-visible, .sh-brand:focus-visible {
  outline: 2px solid #E7CE8A; outline-offset: 2px;
}

/* hamburger (mobile) */
.sh-burger {
  display: none; width: 42px; height: 42px; flex-shrink: 0;
  background: transparent; border: none; cursor: pointer; border-radius: 999px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background-color 0.18s ease;
}
.sh-burger:hover { background: rgba(255,255,255,0.08); }
.sh-burger span { width: 20px; height: 2px; border-radius: 2px; background: #F4EFE3; transition: transform 0.22s ease, opacity 0.22s ease; }
.site-head.menu-open .sh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-head.menu-open .sh-burger span:nth-child(2) { opacity: 0; }
.site-head.menu-open .sh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sh-burger:focus-visible { outline: 2px solid #E7CE8A; outline-offset: 2px; }

/* mobile dropdown panel */
.sh-mobile {
  position: absolute; top: calc(100% - 6px); right: 16px; left: auto;
  width: min(320px, calc(100vw - 32px));
  background: rgba(12,25,40,0.96);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px; padding: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  display: none; flex-direction: column; gap: 2px;
}
.site-head.menu-open .sh-mobile { display: flex; }
.sh-mobile a {
  font-family: 'Josefin Sans', sans-serif; font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,0.82); text-decoration: none;
  padding: 13px 16px; border-radius: 12px; transition: background-color 0.18s ease, color 0.18s ease;
}
.sh-mobile a:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sh-mobile-actions { display: flex; gap: 8px; padding: 10px 6px 6px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; }
.sh-mobile-actions .sh-signin, .sh-mobile-actions .sh-join {
  flex: 1; justify-content: center; text-align: center; padding: 13px 14px; margin: 0; display: block;
}
.sh-mobile-actions .sh-signin { background: rgba(255,255,255,0.07); }

@media (max-width: 1000px) {
  .sh-nav { display: none; }
  .sh-burger { display: inline-flex; }
  .sh-actions .sh-signin { display: none; }
}
@media (max-width: 640px) {
  .site-head-inner { padding: 0 16px; height: 64px; }
  .sh-wordmark { font-size: 22px; letter-spacing: 2px; }
  .sh-actions .sh-join { display: none; }
}

/* ---- guest browse mode: app nav swaps to sign-up CTAs ---- */
.nav-guest-actions { display: none; align-items: center; gap: 10px; }
body.guest .nav-guest-actions { display: flex; }
body.guest .nav .btn-solid,
body.guest #nav-user-pill,
body.guest #user-dropdown,
body.guest #nav-home { display: none !important; }

/* ======================================================
   ABOUT VIEW
   ====================================================== */
.about-wrap { max-width: 1000px; margin: 0 auto; padding: 64px 32px 76px; }
.about-hero { text-align: center; max-width: 740px; margin: 0 auto 46px; }
.about-eyebrow {
  font-family: 'Special Elite', cursive; font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: #E7CE8A; margin-bottom: 16px;
}
.about-title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 7vw, 84px);
  letter-spacing: 2px; line-height: 0.9; color: #F3E7C8; margin-bottom: 18px;
}
.about-lead { font-size: 17px; font-weight: 300; line-height: 1.7; color: rgba(231,206,138,0.82); }
.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 46px; }
.about-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 26px 26px;
}
.about-card i { font-size: 26px; color: var(--coral); }
.about-card h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px;
  color: var(--ink); margin: 12px 0 8px;
}
.about-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ink-light); }
.about-cta {
  text-align: center;
  background: linear-gradient(180deg, #20374F, #1A2E3F);
  border: 1px solid rgba(194,154,44,0.30); border-radius: 14px; padding: 46px 28px;
}
.about-cta h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 1px;
  color: #F3E7C8; margin-bottom: 8px;
}
.about-cta p { font-size: 14px; color: rgba(231,206,138,0.7); margin-bottom: 22px; }
.about-cta .btn-hero { display: inline-flex; }
@media (max-width: 680px) { .about-grid { grid-template-columns: 1fr; } }

/* ======================================================
   DARK PREMIUM ROLLOUT — dark chrome, light paper content
   ====================================================== */

/* Park-at-night page background */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(231,206,138,0.06), transparent 60%),
    radial-gradient(100% 90% at 50% 120%, rgba(27,143,137,0.10), transparent 65%),
    #142636;
  background-attachment: fixed;
}

/* ---- App top nav → illuminated dark ---- */
.nav {
  background: rgba(22,42,60,0.92);
  border-bottom: 1px solid rgba(194,154,44,0.45);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.nav-logo-wrap {
  border: none; background: transparent;
  filter: drop-shadow(0 0 7px rgba(231,206,138,0.45));
}
.nav-wordmark { color: #F4EFE3; letter-spacing: 2px; }
.nav-wordmark span { color: #E7CE8A; }
.nav-links a { color: rgba(255,255,255,0.66); font-weight: 600; letter-spacing: 0.2px; text-transform: none; }
.nav-links a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-links a.active { color: #E7CE8A; }
.nav-user { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.nav-user:hover { background: rgba(255,255,255,0.12); }
.nav-user-name { color: rgba(255,255,255,0.88); }
.nav-user-av { background: rgba(231,206,138,0.18); }
.btn-solid {
  color: #14213a;
  background: linear-gradient(180deg, #F0D27E, #DDB247);
  box-shadow: 0 1px 2px rgba(0,0,0,0.22);
}
.btn-solid:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(221,178,71,0.30); }
.dropdown { border-color: rgba(194,154,44,0.40); box-shadow: 0 12px 30px rgba(0,0,0,0.45); }

/* ---- On-background section chrome → light ---- */
.section-title { color: #F3E7C8; }
.section-sub { color: rgba(231,206,138,0.62); }
.section-link { color: #E7CE8A; border-bottom-color: rgba(231,206,138,0.4); }
.section-link:hover { color: #F8E9B0; }
.divider-ornament .div-rule { background: rgba(231,206,138,0.18); }
.divider-ornament .div-label { color: rgba(231,206,138,0.6); }

/* tabs on dark */
.tabs { border-color: rgba(231,206,138,0.25); }
.tab { background: rgba(231,206,138,0.04); color: rgba(231,206,138,0.6); border-right-color: rgba(231,206,138,0.18); }
.tab:hover { background: rgba(231,206,138,0.10); color: #F8E9B0; }
.tab.active { background: linear-gradient(180deg, #F8E9B0, #D9B441); color: #2a1d07; border-color: transparent; }

/* ---- App-home hero text on dark ---- */
.hero-tagline { color: #F1E4C4; }
.hero-sub { color: rgba(231,206,138,0.72); }
.hero-stat-lbl { color: var(--ink-faint); }

/* ---- CTA band + footer ---- */
.cta-inner { border: 1px solid rgba(194,154,44,0.32); }
.site-footer { border-top: 1px solid rgba(194,154,44,0.30); }
.footer-brand { color: #E7CE8A; }
.footer-brand span { color: #C9A227; }
.footer-tagline { color: rgba(231,206,138,0.55); }
.footer-links a { color: rgba(231,206,138,0.6); }
.footer-links a:hover { color: #F8E9B0; }
.footer-copy { color: rgba(231,206,138,0.45); }

/* ---- Ticket rip-on-enter ---- */
.ticket-stub {
  transition: transform 0.7s cubic-bezier(.45,.05,.3,1), opacity 0.55s ease;
  transform-origin: left center;
  backface-visibility: hidden;
}
.ticket.ripping .ticket-stub { transform: translate(48px, 92px) rotate(15deg); opacity: 0; }
.ticket.ripping .ticket-main { animation: ticket-settle 0.55s ease; }
@keyframes ticket-settle {
  0%   { transform: translateX(0) rotate(0); }
  22%  { transform: translateX(-5px) rotate(-0.35deg); }
  60%  { transform: translateX(2px) rotate(0.1deg); }
  100% { transform: translateX(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-stub { transition: none; }
  .ticket.ripping .ticket-main { animation: none; }
}

/* ---- Ambient park silhouettes recolored to faint gold for the night sky ---- */
.bg-layer [stroke]:not([stroke="none"]) { stroke: rgba(231,206,138,0.85); }
.bg-layer [fill="#0E1E2E"] { fill: rgba(231,206,138,0.6); }
.bg-layer text { fill: rgba(231,206,138,0.85); }
/* skip-to-content link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#E7CE8A;color:#14213a;font-family:Josefin Sans,sans-serif;font-weight:700;font-size:13px;padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}


/* food item search-and-pick */
.fr-results { margin-top: 6px; border: 1px solid rgba(26,42,58,0.18); border-radius: 8px; overflow: hidden; }
.fr-result { padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--border); background: #fff; transition: background-color .12s ease; }
.fr-result:last-child { border-bottom: none; }
.fr-result:hover { background: var(--parchment); }
.fr-r-name { font-weight: 600; color: var(--ink); }
.fr-r-loc { font-size: 11px; color: var(--ink-faint); text-align: right; }
.fr-result-new { color: var(--coral); font-weight: 700; justify-content: flex-start; }
.fr-picked { margin-top: 8px; font-size: 13px; color: var(--ink-mid); background: var(--coral-lt); padding: 8px 10px; border-radius: 6px; }
.fr-picked a { color: var(--coral); cursor: pointer; text-decoration: underline; margin-left: 4px; }


/* my food reviews (profile) */
.myfr-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.myfr-row:last-child { border-bottom: none; }
.myfr-emoji { font-size: 24px; flex-shrink: 0; }
.myfr-info { flex: 1; min-width: 0; }
.myfr-name { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 0.5px; color: var(--ink); }
.myfr-loc { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.myfr-review { font-size: 12px; color: var(--ink-light); margin-top: 3px; font-style: italic; }
.myfr-score { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--coral); flex-shrink: 0; min-width: 34px; text-align: right; }

/* clickable avatar+username -> view that user's profile */
.user-link { cursor: pointer; }
.user-link:hover { opacity: 0.8; }

/* ── View-profile modal (read-only) ── */
.up-section-title { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: var(--ink); margin: 18px 0 8px; }
#up-visits { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Food item detail modal ── */
.fd-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.fd-summary-loc { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.fd-summary-score { display: flex; align-items: baseline; gap: 8px; }
.fd-summary-avg { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--gold); line-height: 1; }
.fd-summary-count { font-size: 11px; color: var(--ink-faint); }
.fd-review { padding: 14px 0; border-bottom: 1px solid var(--border); }
.fd-review:last-child { border-bottom: none; }
.fd-review-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fd-review-user { font-size: 13px; font-weight: 700; color: var(--ink); }
.fd-review-score { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--coral); }
.fd-review-text { font-size: 13px; color: var(--ink-light); line-height: 1.5; }
.fd-review-photo { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; margin-top: 10px; }

/* ======================================================
   MOBILE RESPONSIVE — app nav, hero, grids, tables
   ====================================================== */

/* app nav: hamburger + dropdown panel (mirrors the landing .sh-mobile pattern) */
.app-burger {
  display: none;
  width: 38px; height: 38px; flex-shrink: 0;
  border: none; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 8px;
}
.app-burger:hover { background: rgba(255,255,255,0.08); }
.app-burger span { width: 20px; height: 2px; border-radius: 2px; background: #F4EFE3; transition: transform 0.22s ease, opacity 0.22s ease; }
.nav.menu-open .app-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.menu-open .app-burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .app-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.app-burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.app-mobile-menu {
  display: none;
  flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(20,38,54,0.98); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(194,154,44,0.45);
  padding: 10px 20px 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}
.nav.menu-open .app-mobile-menu { display: flex; }
.app-mobile-menu a {
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.75); text-decoration: none; padding: 12px 10px; border-radius: 6px;
}
.app-mobile-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-mobile-menu a.active { color: #E7CE8A; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .app-burger { display: inline-flex; }
  .nav-inner { padding: 0 20px; }
  .nav-guest-actions .sh-signin { display: none; }
}
@media (max-width: 480px) {
  .btn-solid-label { display: none; }
  .btn-solid { padding: 8px 12px; }
  .nav-user-name { display: none; }
  .nav-guest-actions .sh-join { padding: 9px 14px; font-size: 12px; }
}

/* home hero: stack the passport under the hero text, scale the marquee down */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 40px; }
}
.hero-name-outline { font-size: clamp(52px, 13vw, 120px); }
.hero-tagline { font-size: clamp(20px, 6vw, 34px); }
@media (max-width: 600px) {
  .hero-ticket-row { flex-wrap: wrap; }
  .hero-ticket-line { display: none; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn-hero, .hero-actions .btn-hero-outline { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-stat { border-right: 1px solid var(--border-gold); border-bottom: 1px solid var(--border-gold); }
  .hero-stat:nth-child(2n) { border-right: none; }
  .hero-stat:nth-child(n+3) { border-bottom: none; }
}

/* section headers: let title + action button wrap instead of overflowing */
.section-head { flex-wrap: wrap; gap: 12px; }

/* form fields: stack two-column rows on narrow screens */
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

/* grids: fewer columns as space shrinks */
.food-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.photos-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media (max-width: 700px) {
  .food-cols { grid-template-columns: 1fr; }
  .photos-cols { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .park-grid, .park-grid-3 { grid-template-columns: repeat(2,1fr); }
  .stat-cards { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 380px) {
  .park-grid, .park-grid-3 { grid-template-columns: 1fr; }
}

/* wide tables: scroll within their card instead of blowing out the page */
#visit-history-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* profile food-review rows: Edit/Delete drop to their own row as a unit on narrow screens */
.myfr-row { flex-wrap: wrap; }
.myfr-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 480px) {
  .myfr-actions { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; margin-top: 4px; }
}

/* toast: keep clear of the edges on narrow screens */
@media (max-width: 480px) {
  .toast { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: calc(100vw - 32px); text-align: center; justify-content: center; }
}

/* CTA banners: stack text above actions, full-width buttons */
@media (max-width: 760px) {
  .cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 36px 26px; }
  .cta-actions { flex-wrap: wrap; width: 100%; }
  .cta-actions button { flex: 1 1 auto; }
}

/* site footer: stack instead of overflowing the row */
@media (max-width: 700px) {
  .site-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { flex-wrap: wrap; gap: 10px 18px; }
}