/* I'm In Niagara — styles
   Palette: "Editorial Navy & Gold" — deep ink-navy with a restrained gold
   accent on warm ivory. Refined, editorial, professional.
   (Variable names kept as --navy / --gold etc. so existing markup still works;
    aliases like --teal/--coral now map to navy/gold tones.) */
:root {
  --navy: #1b2a4a;        /* primary ink-navy */
  --navy-light: #2c4068;  /* lighter navy */
  --navy-dark: #11203b;   /* deep navy */
  --gold: #b08d57;        /* refined gold accent */
  --gold-dark: #94733f;   /* deeper gold */
  --bg: #fbf9f4;          /* warm ivory */
  --card: #ffffff;
  --text: #1a1d24;        /* near-black ink */
  --muted: #6f7480;       /* warm grey */
  --border: #e7e1d6;      /* warm hairline */
  --green: #3f5236;       /* muted forest, for prices/success */

  /* aliases (kept for older markup; mapped to the navy/gold palette) */
  --teal: #1b2a4a;
  --teal-light: #2c4068;
  --coral: #b08d57;
  --coral-dark: #94733f;
  --lime: #c2a878;        /* soft gold highlight on dark backgrounds */
  --lime-deep: #94733f;
  --purple: #34466a;      /* slate */

  /* Typography */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Elegant serif for display headings (award-winning editorial feel) */
h1, h2, h3,
.logo-text, .band-head h2, .section-head h2,
.hero-slide h1, .ticker-title, .pb-title, .feature-card h3,
.community-tile h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 22px; }

a { color: var(--navy-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header {
  background: linear-gradient(110deg, #1b2a4a 0%, #2c4068 45%, #34466a 100%);
  color: #fff;
  box-shadow: 0 2px 14px rgba(27,42,74,0.3);
  position: relative; z-index: 50;
  border-bottom: 3px solid var(--lime);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
.logo { color: #fff; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.logo:hover { text-decoration: none; }
.logo strong { color: var(--lime); font-weight: 800; }
.logo-mark { width: 38px; height: 38px; flex: none; border-radius: 11px; box-shadow: 0 3px 10px rgba(0,0,0,0.22); display: block; }
.logo-text { letter-spacing: -0.01em; }
.logo-region { font-size: 0.72rem; color: #c3cad8; margin-left: 2px; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.site-footer .logo strong { color: var(--lime); }
.nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav > a, .nav-item > a { color: #dde2ea; font-size: 0.95rem; font-weight: 500; }
.nav a:hover { color: var(--lime); }
.nav-muted { opacity: 0.8; }

/* Headline ticker — each item is a full-width photo with the headline overlaid */
.ticker {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: linear-gradient(90deg, #11203b 0%, #1b2a4a 100%);
}
@media (max-width: 640px) { .ticker { height: 230px; } }
.ticker-item { background-size: cover; background-position: center 30%; }
.ticker-label {
  position: absolute; top: 14px; left: 18px; z-index: 3;
  background: var(--gold); color: #fff; font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 30px;
  box-shadow: 0 3px 10px rgba(176,141,87,0.45);
}
.ticker-item {
  position: absolute; inset: 0; display: block;
  background-size: cover; background-position: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.ticker-item.show { opacity: 1; visibility: visible; }
.ticker-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,20,45,0.15) 0%, rgba(13,20,45,0.55) 55%, rgba(13,20,45,0.9) 100%);
}
/* event / no-image items get a vibrant brand gradient instead of a photo */
.ticker-item--plain { background: linear-gradient(120deg, #1b2a4a 0%, #34466a 60%, #b08d57 100%); }
.ticker-item--plain::after { background: linear-gradient(180deg, rgba(13,20,45,0) 0%, rgba(13,20,45,0.35) 100%); }
.ticker-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 0 26px; }
.ticker-caption .container { display: block; }
.ticker-kicker {
  display: inline-block; color: var(--lime); font-weight: 800;
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ticker-title {
  display: block; color: #fff; font-size: 1.7rem; font-weight: 700; line-height: 1.2;
  max-width: 760px; text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
@media (max-width: 640px) { .ticker-title { font-size: 1.2rem; } }
.ticker-item:hover .ticker-title { text-decoration: underline; }

/* Manual prev/next arrows on the headline ticker */
.ticker-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,16,0.5); color: #fff; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.3); font-size: 1.9rem; line-height: 1; padding-bottom: 4px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.18s ease, transform 0.18s ease;
}
.ticker-nav:hover { background: var(--gold); border-color: var(--gold); color: #14161c; }
.ticker-prev { left: 16px; }
.ticker-next { right: 16px; }
.ticker-prev:hover { transform: translateY(-50%) scale(1.08); }
.ticker-next:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 640px) { .ticker-nav { width: 38px; height: 38px; font-size: 1.5rem; } }

/* Buttons */
.btn { display: inline-block; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.95rem; }
.btn-gold {
  background: var(--gold);
  color: #fff !important; font-weight: 700;
  box-shadow: 0 2px 8px rgba(176,141,87,0.35);
}
.btn-gold:hover { background: var(--gold-dark); text-decoration: none; }
.btn-navy {
  background: var(--navy);
  color: #fff !important; font-weight: 700;
  box-shadow: 0 2px 8px rgba(27,42,74,0.35);
}
.btn-navy:hover { background: var(--navy-dark); text-decoration: none; }
.btn-danger { background: #b3372f; color: #fff !important; }
.btn-sm { padding: 5px 10px; font-size: 0.85rem; }

/* Layout with sidebar */
.layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; margin-top: 26px; }
.sidebar { position: sticky; top: 16px; }
.sidebar-card h3 { color: var(--navy); font-size: 1rem; margin-bottom: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.community-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-weight: 600; color: var(--navy); }
.community-link:hover { background: #faf7f0; text-decoration: none; }
.community-link.active { background: var(--navy); color: #fff; }
.community-flag { font-size: 1.2rem; }
.sidebar-note { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.layout .hero { margin-top: 0; }
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

.layout.three { grid-template-columns: 190px 1fr 270px; }
.sidebar-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
@media (max-width: 1000px) {
  .layout.three { grid-template-columns: 1fr; }
  .sidebar-right { position: static; }
}

/* Calendar */
.cal { width: 100%; border-collapse: collapse; font-size: 0.78rem; text-align: center; }
.cal th { color: var(--muted); font-weight: 600; padding: 3px 0; }
.cal td { padding: 5px 0; border-radius: 6px; }
.cal-today { outline: 2px solid var(--navy); outline-offset: -2px; font-weight: 700; }
.cal-holiday { background: var(--gold); color: var(--navy); font-weight: 700; cursor: help; }
.cal-event { background: #d8edde; color: var(--green); font-weight: 700; cursor: help; }
.cal-legend { font-size: 0.72rem; color: var(--muted); margin-top: 8px; }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot-gold { background: var(--gold); }
.dot-green { background: #6dbb87; }

/* Events */
.event-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.event-item:last-of-type { border-bottom: none; }
.event-item:hover { text-decoration: none; background: #faf7f0; }
.event-date-badge { background: var(--navy); color: #fff; border-radius: 8px; padding: 4px 8px; text-align: center; font-size: 0.68rem; line-height: 1.15; min-width: 42px; height: fit-content; }
.event-date-badge strong { display: block; font-size: 1.05rem; }
.event-card { display: flex; gap: 14px; margin-bottom: 12px; }
.event-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.event-row:last-child { border-bottom: none; }
.event-row-sm { font-size: 0.85rem; padding: 5px 0; }
.event-row-sm strong { color: var(--gold-dark); margin-right: 4px; }

/* Member cards */
.member-card { text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.member-avatar { font-size: 2rem; }

/* Hero */
.hero {
  background:
    radial-gradient(ellipse at 25% -30%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 70%, #11203b 100%);
  color: #fff; border-radius: 14px; padding: 44px 36px; margin: 26px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px rgba(21,36,61,0.3);
}
.hero h1 { font-size: 2rem; margin-bottom: 8px; }
.hero h1 span { color: var(--gold); }
.hero p { color: #d2d7e0; max-width: 560px; margin-bottom: 18px; }

/* Sections & cards */
.section { margin: 34px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.section-head h2 { font-size: 1.3rem; color: var(--navy); }
.section-head a { font-size: 0.9rem; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* News */
.news-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: #faf7f0; text-decoration: none; }
.news-item .news-title { font-weight: 600; color: var(--navy); }
.news-item .news-meta { font-size: 0.8rem; color: var(--muted); }

/* Community links */
.fb-link { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-weight: 600; color: var(--navy); }
.fb-link:hover { border-color: var(--gold); text-decoration: none; }
.fb-badge { background: #1877f2; color: #fff; border-radius: 6px; font-size: 0.7rem; padding: 2px 7px; }

/* Listings */
.listing-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.listing-card:hover { box-shadow: 0 4px 14px rgba(21,36,61,0.12); text-decoration: none; }
.listing-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #ece7db; }
.listing-photo-placeholder { width: 100%; aspect-ratio: 4/3; background: #ece7db; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: #b8ae99; }
.listing-body { padding: 12px 14px; }
.listing-price { font-weight: 700; color: var(--green); }
.listing-title { font-weight: 600; color: var(--text); margin: 2px 0; }
.listing-meta { font-size: 0.8rem; color: var(--muted); }
.badge-sold { background: #b3372f; color: #fff; font-size: 0.72rem; border-radius: 6px; padding: 2px 8px; margin-left: 6px; }
.badge-expired { background: #6f7480; color: #fff; font-size: 0.72rem; border-radius: 6px; padding: 2px 8px; margin-left: 6px; }

/* Forms */
.form-card { max-width: 480px; margin: 36px auto; }
.form-card h1 { font-size: 1.4rem; color: var(--navy); margin-bottom: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }

/* Google sign-in */
.or-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 0.8rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; border: 1px solid var(--border); color: var(--text) !important; font-weight: 600; padding: 10px; border-radius: 8px; }
.btn-google:hover { background: #f6f3ec; text-decoration: none; }

.alert { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.92rem; }
.alert-error { background: #fbe9e7; color: #8c2f28; border: 1px solid #efc4bf; }
.alert-ok { background: #e8f4ec; color: #205c3b; border: 1px solid #bfe0cc; }

/* Search bar */
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.search-bar input, .search-bar select { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.search-bar input[type=text] { flex: 1; min-width: 180px; }

/* Ad slots (replace with AdSense code when approved) */
.ad-slot { background: repeating-linear-gradient(45deg, #efe9dc, #efe9dc 12px, #f6f1e7 12px, #f6f1e7 24px); border: 1px dashed #cfc6b2; border-radius: 10px; text-align: center; color: #9a8f76; font-size: 0.8rem; padding: 26px 10px; margin: 26px 0; letter-spacing: 0.08em; text-transform: uppercase; }

/* Detail page */
.detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.detail img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }
@media (max-width: 720px) { .detail { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: linear-gradient(120deg, #11203b 0%, #1b2a4a 55%, #34466a 100%); color: #c3cad8; margin-top: 56px; font-size: 0.9rem; border-top: 3px solid var(--lime); }
.site-footer a { color: #dde2ea; }
.site-footer a:hover { color: #fff; }
.footer-links { margin: 6px 0; }
.footer-fine { font-size: 0.78rem; opacity: 0.7; margin-top: 10px; }

/* Multi-column footer (SLC-style) */
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 28px; padding: 40px 0 8px; }
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-brand .logo { font-size: 1.25rem; }
.footer-brand p { margin-top: 10px; max-width: 280px; color: #b9c0cd; line-height: 1.5; }
.footer-col h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: #c3cad8; }
.footer-bar { border-top: 1px solid rgba(255,255,255,0.12); padding: 16px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: #9aa3b2; }

/* ============================================================
   SLC-STYLE LAYOUT COMPONENTS (homepage)
   ============================================================ */

/* Full-bleed band helper: lets a section stretch edge-to-edge
   even though <main> is constrained. */
.page-main { display: block; }
.band { width: 100%; }
.band-cream { background: var(--bg); }
.band-teal {
  background: radial-gradient(ellipse at 82% -20%, rgba(176,141,87,0.22) 0%, rgba(176,141,87,0) 55%),
              linear-gradient(125deg, #16263f 0%, #1b2a4a 55%, #22324f 100%);
  color: #fff;
}
.band-soft { background: #f3efe6; }

/* Nav dropdowns */
.nav-item { position: relative; }
.nav-item > a { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav-caret { font-size: 0.6rem; opacity: 0.8; }
.nav-menu {
  position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 210px;
  background: #fff; border-radius: 12px; padding: 8px;
  box-shadow: 0 14px 34px rgba(27,42,74,0.22); border: 1px solid var(--border);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a { display: block; color: var(--text) !important; padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; }
.nav-menu a:hover { background: #f1ebde; text-decoration: none; color: var(--teal) !important; }

/* Hero slider */
.hero-slider { position: relative; padding: 54px 0 64px; overflow: hidden; }
.hero-slides { position: relative; min-height: 270px; }
.hero-slide {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 28px; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}
.hero-slide.show { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 760px) { .hero-slide { grid-template-columns: 1fr; } .hero-slides { min-height: 360px; } }
.hero-eyebrow { display: inline-block; background: var(--coral); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 30px; margin-bottom: 14px; }
.hero-slide h1 { font-size: 2.6rem; line-height: 1.08; margin-bottom: 14px; color: #fff; }
.hero-slide h1 span { color: var(--coral); }
.hero-slide p { color: #d2d7e0; max-width: 480px; margin-bottom: 22px; font-size: 1.05rem; }
.hero-art { font-size: 8rem; text-align: center; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.3)); }
.hero-art img { width: 100%; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.hero-dots { display: flex; gap: 9px; justify-content: center; margin-top: 26px; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; padding: 0; }
.hero-dot.active { background: var(--coral); transform: scale(1.15); }

/* Section heading, centered SLC style */
.band-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.band-head h2 { font-size: 1.9rem; color: var(--teal); }
.band-teal .band-head h2 { color: #fff; }
.band-head p { color: var(--muted); margin-top: 8px; }
.band-teal .band-head p { color: #d2d7e0; }
.band-section { padding: 56px 0; }

/* Explore tile grid (mirrors Leagues & Tournaments) */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 180px; border-radius: 16px; padding: 20px; overflow: hidden;
  color: #fff; background: var(--teal); isolation: isolate;
  box-shadow: 0 8px 22px rgba(27,42,74,0.16);
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.42) 100%);
}
.tile-emoji { position: absolute; top: 14px; right: 16px; font-size: 2.6rem; opacity: 0.95; }
.tile h3 { font-size: 1.2rem; margin-bottom: 4px; }
.tile p { font-size: 0.85rem; color: rgba(255,255,255,0.9); }
.tile:hover { text-decoration: none; transform: translateY(-4px); transition: transform 0.18s ease; box-shadow: 0 16px 34px rgba(27,42,74,0.3); }
.tile-a { background: linear-gradient(150deg, #1b2a4a, #11203b); }
.tile-b { background: linear-gradient(150deg, #b08d57, #94733f); }
.tile-c { background: linear-gradient(150deg, #34466a, #22304d); }
.tile-d { background: linear-gradient(150deg, #1e4b47, #143430); }
.tile-e { background: linear-gradient(150deg, #9c6b3b, #7e5430); }
.tile-f { background: linear-gradient(150deg, #3f5236, #2a3724); }

/* Newsletter band */
.newsletter { text-align: center; }
.newsletter form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 560px; margin: 20px auto 0; }
.newsletter input { flex: 1; min-width: 200px; padding: 13px 16px; border-radius: 10px; border: none; font: inherit; }
.newsletter .btn { padding: 13px 26px; }

/* Partners strip */
.partners { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.partner {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 22px; font-weight: 700; color: var(--teal); display: flex; align-items: center; gap: 10px;
  box-shadow: 0 3px 10px rgba(27,42,74,0.06);
}
.partner:hover { border-color: var(--coral); text-decoration: none; }
.partner .partner-badge { background: #1877f2; color: #fff; border-radius: 6px; font-size: 0.7rem; padding: 2px 7px; }

/* Coral button variant */
.btn-coral { background: var(--coral); color: #fff; font-weight: 600; }
.btn-coral:hover { background: var(--coral-dark); text-decoration: none; }
.btn-outline-light { border: 1.5px solid rgba(255,255,255,0.7); color: #fff; font-weight: 600; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); text-decoration: none; }

/* Mini calendar row inside teal band */
.home-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .home-aside { grid-template-columns: 1fr; } }

/* Sub-site feature cards (Community Chest + Communities) */
.subsite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .subsite-grid { grid-template-columns: 1fr; } }
.feature-card {
  position: relative; border-radius: 20px; padding: 34px; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; min-height: 230px; isolation: isolate;
  box-shadow: 0 10px 28px rgba(27,42,74,0.18);
}
.feature-card.fc-chest { background: linear-gradient(150deg, #1b2a4a 0%, #34466a 100%); }
.feature-card.fc-comm  { background: linear-gradient(150deg, #b08d57 0%, #9c6b3b 100%); }
.feature-emoji { font-size: 3rem; margin-bottom: 10px; }
.feature-card h3 { font-size: 1.6rem; margin-bottom: 8px; }
.feature-card p { color: rgba(255,255,255,0.9); margin-bottom: 18px; max-width: 360px; }
.feature-card .btn { align-self: flex-start; margin-top: auto; }
.feature-card:hover { transform: translateY(-3px); transition: transform 0.18s ease; text-decoration: none; }

/* Community list cards */
.community-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.community-tile { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; text-align: center; box-shadow: 0 4px 14px rgba(27,42,74,0.06); }
.community-tile:hover { border-color: var(--coral); text-decoration: none; transform: translateY(-3px); transition: transform 0.18s ease; }
.community-tile .ct-flag { font-size: 3.2rem; }
.community-tile h3 { color: var(--teal); margin: 8px 0 4px; }
.community-tile p { color: var(--muted); font-size: 0.9rem; }

/* News list in two columns on the main landing */
.news-columns { columns: 2; column-gap: 18px; }
@media (max-width: 680px) { .news-columns { columns: 1; } }
.news-columns .news-item { break-inside: avoid; }

/* ============================================================
   Reusable photo banner (marketplace, community pages)
   ============================================================ */
.photo-banner { position: relative; height: 360px; overflow: hidden; background: linear-gradient(120deg, #1b2a4a, #34466a); }
@media (max-width: 640px) { .photo-banner { height: 260px; } }
.pb-label {
  position: absolute; top: 16px; left: 18px; z-index: 3;
  background: var(--gold); color: #fff; font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 30px; box-shadow: 0 3px 10px rgba(176,141,87,0.45);
}
.pb-slide {
  position: absolute; inset: 0; display: block;
  background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease;
}
.pb-slide.show { opacity: 1; visibility: visible; }
.pb-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,20,45,0.05) 0%, rgba(13,20,45,0.5) 55%, rgba(13,20,45,0.92) 100%);
}
.pb-plain { background: linear-gradient(120deg, #1b2a4a 0%, #34466a 60%, #b08d57 100%); }
.pb-plain::after { background: linear-gradient(180deg, rgba(13,20,45,0) 0%, rgba(13,20,45,0.4) 100%); }
.pb-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 0 34px; }
.pb-caption .container { display: block; }
.pb-kicker {
  display: inline-block; color: var(--lime); font-weight: 800;
  font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.pb-title {
  display: block; color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.15;
  max-width: 780px; text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
@media (max-width: 640px) { .pb-title { font-size: 1.3rem; } }
.pb-cta { display: inline-block; margin-top: 14px; background: var(--coral); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 9px 18px; border-radius: 30px; }
.pb-slide:hover .pb-cta { background: var(--coral-dark); }
.pb-slide:hover .pb-title { text-decoration: underline; }
.pb-dots { position: absolute; bottom: 16px; right: 20px; z-index: 3; display: flex; gap: 8px; }
.pb-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; }
.pb-dot.active { background: var(--lime); transform: scale(1.15); }

/* News cards (community news grid) */
.news-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(27,42,74,0.06); }
.news-card:hover { text-decoration: none; transform: translateY(-3px); transition: transform 0.18s ease; box-shadow: 0 12px 26px rgba(27,42,74,0.16); }
.news-card-img { height: 150px; background-size: cover; background-position: center; background-color: #e7e1d6; }
.news-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.news-card-body .news-title { font-weight: 700; color: var(--navy); }
.news-card-body .news-meta { font-size: 0.8rem; color: var(--muted); }

/* Event card thumbnail */
.event-thumb { width: 120px; min-width: 120px; height: 92px; border-radius: 10px; background-size: cover; background-position: center; background-color: #e7e1d6; }
@media (max-width: 520px) { .event-card { flex-wrap: wrap; } .event-thumb { width: 100%; height: 150px; } }

/* ============================================================
   Community board
   ============================================================ */
.board-wrap { max-width: 760px; margin: 0 auto; }

.avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy-light), var(--navy));
  color: #fff; font-weight: 700; font-size: 1.05rem; font-family: var(--font-serif);
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.85rem; }

.board-new { margin-bottom: 22px; }
.board-new-label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.board-new textarea {
  width: 100%; min-height: 90px; resize: vertical; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; font: inherit; background: #fff;
}
.board-new-actions { margin-top: 12px; text-align: right; }
.board-signin { margin-bottom: 22px; text-align: center; }

.board-post { margin-bottom: 18px; }
.board-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.board-author { color: var(--navy); display: block; line-height: 1.2; }
.board-meta { font-size: 0.78rem; color: var(--muted); }
.board-body { color: var(--text); line-height: 1.6; white-space: normal; word-break: break-word; }

.board-replies { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.board-replies-count { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.board-reply { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1ece2; }
.board-reply:last-of-type { border-bottom: none; }
.board-reply .board-body { font-size: 0.95rem; margin-top: 3px; }

.board-reply-form { display: flex; gap: 8px; margin-top: 12px; }
.board-reply-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
.board-reply-login { margin-top: 12px; font-size: 0.9rem; color: var(--muted); }

/* Forum index — category sections + topic rows */
.forum-cat { margin-top: 30px; }
.forum-cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  border-bottom: 2px solid var(--navy); padding-bottom: 8px; margin-bottom: 12px; }
.forum-cat-head h2 { color: var(--navy); font-size: 1.3rem; }
.forum-cat-desc { color: var(--muted); font-size: 0.88rem; margin-top: 2px; }
.forum-cat-count { color: var(--muted); font-size: 0.78rem; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; }
.forum-topics { display: flex; flex-direction: column; gap: 8px; }
.forum-topic { display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; color: var(--text); }
.forum-topic:hover { text-decoration: none; border-color: var(--gold); box-shadow: 0 6px 18px rgba(27,42,74,0.08); }
.forum-topic-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.forum-topic-title { font-family: var(--font-serif); font-weight: 600; color: var(--navy); font-size: 1.08rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-topic-stats { text-align: right; font-size: 0.78rem; color: var(--muted); line-height: 1.25; white-space: nowrap; }
.forum-topic-stats strong { color: var(--navy); font-size: 1rem; }
.forum-topic-last { display: block; }
.forum-empty { color: var(--muted); font-size: 0.9rem; padding: 6px 2px; }
@media (max-width: 560px) { .forum-topic-stats { display: none; } }

/* Topic (thread) page */
.forum-back { color: #d2d7e0; font-size: 0.85rem; }
.forum-back:hover { color: #fff; }
.forum-cat-badge, .forum-cat-badge:visited {
  display: inline-block; margin-left: 10px; background: var(--gold); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 30px; vertical-align: middle;
}
.board-reply-card { display: flex; gap: 12px; margin-bottom: 10px; padding: 14px 16px; }
.board-reply-main { flex: 1; min-width: 0; }
.board-reply-main .board-body { margin-top: 4px; }

/* ============================================================
   Games arcade
   ============================================================ */
.game-wrap { max-width: 640px; margin: 0 auto; }
.game-wrap-wide { max-width: 760px; }
.game-title { color: var(--navy); margin: 10px 0 16px; }
.game-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.game-controls label { font-size: 0.85rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.game-controls select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
.game-status { font-weight: 600; color: var(--navy); margin-bottom: 12px; min-height: 1.4em; }
.game-tile { position: relative; }
.game-stat { position: absolute; top: 14px; left: 16px; font-size: 0.72rem; font-weight: 700;
  background: rgba(0,0,0,0.28); color: #fff; padding: 3px 9px; border-radius: 30px; }

/* Shared 8x8 board — flat, green & white */
.board-3d { width: fit-content; margin: 6px 0 30px; }
.chess-board, .checkers-board {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  width: min(92vw, 680px); aspect-ratio: 1;
  user-select: none; border-radius: 4px;
  box-shadow:
    0 0 0 12px #33373d,                         /* frame face */
    0 0 0 15px #16181c,                         /* frame edge */
    0 16px 32px -12px rgba(0,0,0,0.45);         /* ground shadow */
}
.sq { display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer;
  aspect-ratio: 1; min-height: 0; }
.sq.light { background: #eef1e4; }   /* white */
.sq.dark  { background: #86a666; }   /* light green */
.sq.sel { box-shadow: inset 0 0 0 3px var(--gold); }
.sq.target::after { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: rgba(20,28,16,0.28); }
.sq.target:has(.pc)::after { width: 86%; height: 86%; border-radius: 0;
  background: transparent; box-shadow: inset 0 0 0 4px rgba(20,28,16,0.3); }
.sq .pc {
  font-size: clamp(2.1rem, 10vw, 3.5rem); line-height: 1; paint-order: stroke fill;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}
/* Staunton piece images */
.pc-img { width: 94%; height: 94%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.3)); }
.chess-board { touch-action: none; }
.chess-board .sq:has(.pc-img) { cursor: grab; }
/* Floating piece that follows the cursor while dragging */
.pc-ghost { position: fixed; z-index: 1000; pointer-events: none; object-fit: contain;
  filter: drop-shadow(0 8px 7px rgba(0,0,0,0.45)); transform: scale(1.06); }

/* Board (player on top + bottom) beside a chat panel */
.game-arena { max-width: 1040px; }
.game-table { display: flex; gap: 20px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.board-col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.board-col .board-3d { margin: 0; }
.player { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; box-shadow: 0 3px 10px rgba(27,42,74,0.06);
  width: min(92vw, 680px); box-sizing: border-box; }
.player .avatar { width: 42px; height: 42px; flex: none; }
.player-info { display: flex; flex-direction: column; line-height: 1.2; }
.player-info strong { color: var(--navy); }
.player-info span { font-size: 0.78rem; color: var(--muted); }
.player.is-turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(176,141,87,0.4), 0 5px 14px rgba(27,42,74,0.1); }
.avatar.avatar-dark { background: linear-gradient(150deg, #3a3f47, #15171c); }

/* In-game chat */
.chat { width: 290px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 3px 10px rgba(27,42,74,0.06); }
.chat-head { background: var(--navy); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 11px 14px; }
.chat-log { flex: 1; min-height: 360px; max-height: 600px; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; }
.chat-empty { color: var(--muted); font-size: 0.85rem; text-align: center; margin: auto; padding: 0 10px; }
.chat-msg { max-width: 85%; padding: 7px 11px; border-radius: 12px; font-size: 0.9rem; line-height: 1.3; word-wrap: break-word; }
.chat-msg .who { display: block; font-size: 0.66rem; opacity: 0.7; margin-bottom: 1px; }
.chat-msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 3px; }
.chat-msg.them { align-self: flex-start; background: #eef1f6; color: var(--text); border-bottom-left-radius: 3px; }
.chat-form { display: flex; border-top: 1px solid var(--border); }
.chat-form input { flex: 1; border: none; padding: 11px 12px; font: inherit; background: #fff; }
.chat-form input:focus { outline: none; }
.chat-form .btn { border-radius: 0; }
@media (max-width: 760px) { .chat { width: 100%; max-width: 560px; } }

/* ============================================================
   SUB-SITE THEMES — refined & professional, each its own identity.
   (The home page keeps the navy/gold editorial look.)
   Pages set $bodyClass = 'theme-chest' | 'theme-comm' before the header.
   ============================================================ */

/* Community Chest — "Emerald & Amber" (premium commerce) */
body.theme-chest {
  --navy: #0f6e55; --navy-light: #15876a; --navy-dark: #0a5240;
  --gold: #c2883c; --gold-dark: #a06d2a;
  --teal: #0f6e55; --teal-light: #2a9d78;
  --coral: #c2883c; --coral-dark: #a06d2a;
  --lime: #e6c684; --green: #0f6e55;
  --bg: #f5f8f6; --text: #16241f; --border: #e0e8e3;
}
body.theme-chest .site-header { background: linear-gradient(110deg, #15876a 0%, #0f6e55 55%, #0a5240 100%); border-bottom-color: var(--gold); }
body.theme-chest .site-footer { background: linear-gradient(120deg, #0a5240 0%, #0f6e55 100%); border-top-color: var(--gold); }
body.theme-chest .band-teal {
  background: radial-gradient(ellipse at 82% -25%, rgba(194,136,60,0.20) 0%, rgba(194,136,60,0) 55%),
              linear-gradient(125deg, #15876a 0%, #0f6e55 60%, #0a5240 100%);
}
body.theme-chest .pb-plain { background: linear-gradient(120deg, #15876a, #0f6e55 60%, #0a5240); }

/* Communities — "Plum & Sand" (refined cultural) */
body.theme-comm {
  --navy: #5e2a4e; --navy-light: #784065; --navy-dark: #421c37;
  --gold: #b07a47; --gold-dark: #946134;
  --teal: #5e2a4e; --teal-light: #8a567a;
  --coral: #b5603f; --coral-dark: #97492e;
  --lime: #d9bb88; --green: #4a7a5e;
  --bg: #faf6f2; --text: #241620; --border: #ece1d9;
}
body.theme-comm .site-header { background: linear-gradient(110deg, #0f3d44 0%, #0b2f36 55%, #08252b 100%); border-bottom-color: var(--gold); }
body.theme-comm .site-footer { background: linear-gradient(120deg, #08252b 0%, #0f3d44 100%); border-top-color: var(--gold); }
body.theme-comm .band-teal {
  background: radial-gradient(ellipse at 82% -25%, rgba(23,196,212,0.25) 0%, rgba(23,196,212,0) 55%),
              linear-gradient(125deg, #0f3d44 0%, #0b2f36 60%, #08252b 100%);
}
body.theme-comm .pb-plain { background: linear-gradient(120deg, #0f3d44 0%, #0b8a96 55%, #17c4d4 100%); }

/* Refined tiles — clean white cards with a coloured top accent (replaces loud blocks) */
body.theme-chest .tile, body.theme-comm .tile {
  background: #fff; color: var(--text); border: 1px solid var(--border);
  border-top: 3px solid var(--navy); min-height: 148px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
body.theme-chest .tile::before, body.theme-comm .tile::before { display: none; }
body.theme-chest .tile h3, body.theme-comm .tile h3 { color: var(--navy); }
body.theme-chest .tile p, body.theme-comm .tile p { color: var(--muted); }
body.theme-chest .tile-emoji, body.theme-comm .tile-emoji { opacity: 1; font-size: 2.1rem; }
body.theme-chest .tile:hover, body.theme-comm .tile:hover {
  border-color: var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,0.1);
}

/* Refined typography & spacing for a professional, modern feel */
body.theme-chest h1, body.theme-chest h2, body.theme-chest h3, body.theme-chest .band-head h2,
body.theme-chest .pb-title, body.theme-chest .hero-slide h1, body.theme-chest .game-title, body.theme-chest .section-head h2,
body.theme-comm h1, body.theme-comm h2, body.theme-comm h3, body.theme-comm .band-head h2,
body.theme-comm .pb-title, body.theme-comm .hero-slide h1, body.theme-comm .game-title, body.theme-comm .section-head h2 {
  font-family: 'Poppins', var(--font-sans);
  font-weight: 700; letter-spacing: -0.01em;
}
body.theme-chest .band-section, body.theme-comm .band-section { padding: 48px 0; }
body.theme-chest .band-head, body.theme-comm .band-head { margin-bottom: 26px; }
body.theme-chest .band-head h2, body.theme-comm .band-head h2 { font-size: 1.65rem; }
body.theme-chest .pb-title, body.theme-comm .pb-title { font-size: 1.75rem; font-weight: 700; }
body.theme-chest .hero-eyebrow, body.theme-comm .hero-eyebrow { letter-spacing: 0.14em; }
body.theme-chest .btn, body.theme-comm .btn { letter-spacing: 0.01em; }

/* Checkers discs */
.checker { width: 70%; height: 70%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.9rem,4vw,1.3rem); color: var(--gold); box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.3); }
.ck-r { background: radial-gradient(circle at 35% 30%, #e05a4f, #b3372f); }
.ck-b { background: radial-gradient(circle at 35% 30%, #3a4a63, #11203b); }
.ck-king { outline: 2px solid var(--gold); outline-offset: -5px; }

/* Pusoy Dos */
.pusoy-opps { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); }
.opp { background: #fff; border: 1px solid var(--border); border-radius: 30px; padding: 4px 12px; }
.opp-turn { border-color: var(--gold); color: var(--navy); font-weight: 700; }
.pusoy-table { min-height: 110px; background: #11203b; border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.pusoy-played { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pusoy-by { color: #c3cad8; font-size: 0.8rem; }
.card-mini { background: #fff; color: #15171c; border-radius: 6px; padding: 6px 9px; font-weight: 700; font-size: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.25); }
.card-mini.red { color: #c0392b; }
.pusoy-hand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 14px; }
.card-face { background: #fff; border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  min-width: 46px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 700; color: #15171c; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.card-face span { font-size: 1.05rem; }
.card-face b { font-size: 1.1rem; }
.card-face.red { color: #c0392b; }
.card-face.picked { transform: translateY(-10px); border-color: var(--gold); box-shadow: 0 6px 14px rgba(176,141,87,0.4); }

/* Home-page forum preview box (whole box links to the forum) */
.forum-box { display: block; padding: 0; overflow: hidden; max-width: 760px; margin: 0 auto; }
.forum-box:hover { text-decoration: none; transform: translateY(-2px); transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 14px 32px rgba(27,42,74,0.16); }
.forum-box-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--navy); color: #fff; font-weight: 600; }
.forum-box-cta { color: var(--lime); font-size: 0.85rem; font-weight: 700; }
.forum-box-list { display: block; }
.forum-box-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.forum-box-row:last-child { border-bottom: none; }
.forum-box-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.forum-box-title { font-family: var(--font-serif); font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-box-replies { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) { .forum-box-replies { display: none; } }

/* ============================================================
   Community portal — award-style immersive layout
   ============================================================ */
.cn-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; color: #fff; }
.cn-hero-shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,10,18,0.25) 0%, rgba(18,10,18,0.55) 45%, rgba(18,10,18,0.92) 100%); }
.cn-hero-inner { position: relative; z-index: 1; padding: 50px 18px 46px; }
.cn-back { color: rgba(255,255,255,0.85); font-size: 0.85rem; }
.cn-back:hover { color: #fff; }
.cn-flag { display: block; font-size: 3.4rem; line-height: 1; margin: 16px 0 8px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); }
.cn-title { font-size: clamp(2.2rem, 6vw, 3.6rem); color: #fff; line-height: 1.04; margin-bottom: 12px; }
.cn-title span { color: var(--lime); }
.cn-lede { color: rgba(255,255,255,0.92); max-width: 620px; font-size: 1.12rem; margin-bottom: 22px; }
.cn-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cn-stats { display: flex; gap: 40px; margin-top: 32px; flex-wrap: wrap; }
.cn-stat strong { display: block; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; font-family: 'Poppins', var(--font-sans); }
.cn-stat span { font-size: 0.78rem; color: rgba(255,255,255,0.82); text-transform: uppercase; letter-spacing: 0.07em; }

.cn-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 26px; border-bottom: 2px solid var(--border); padding-bottom: 12px; }
.cn-sec-head h2 { font-size: 1.7rem; color: var(--navy); }
.cn-sec-sub { color: var(--muted); font-size: 0.9rem; }
.cn-sec-link { color: var(--coral-dark); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* Feature-led story grid */
.story-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .story-layout { grid-template-columns: 1fr; } }
.story-feature { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,0.07); }
.story-feature:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.14); transform: translateY(-3px); transition: all 0.2s ease; text-decoration: none; }
.story-feature-img { display: block; height: 300px; background-size: cover; background-position: center; }
.story-feature-body { display: block; padding: 20px 22px 24px; }
.story-kicker { display: block; color: var(--coral-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.story-feature-title { display: block; font-family: 'Poppins', var(--font-sans); font-weight: 700; color: var(--navy); font-size: 1.45rem; line-height: 1.22; }
.story-date { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 10px; }
.story-rail { display: flex; flex-direction: column; gap: 14px; }
.story-row { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.story-row:hover { border-color: var(--coral); text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,0.07); }
.story-row-img { flex: none; width: 88px; height: 66px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--border); }
.story-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.story-row-title { font-weight: 600; color: var(--navy); font-size: 0.95rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 24px; }
.story-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.story-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.12); transform: translateY(-3px); transition: all 0.2s ease; text-decoration: none; }
.story-card-img { height: 150px; background-size: cover; background-position: center; background-color: var(--border); }
.story-card-body { padding: 14px; }
.story-card-title { display: block; font-weight: 600; color: var(--navy); margin-top: 2px; line-height: 1.3; }
.cn-sources { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 26px; }

/* Member spotlight */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.member-spot { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.member-ring { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; color: #fff;
  background: linear-gradient(150deg, var(--navy-light), var(--navy)); margin-bottom: 8px;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--border); }
.member-spot strong { color: var(--navy); }
.member-city { color: var(--text); font-size: 0.85rem; }
.member-since { color: var(--muted); font-size: 0.75rem; }

/* Closing join CTA */
.cn-join { text-align: center; max-width: 640px; margin: 0 auto; }
.cn-join .cn-flag { font-size: 2.6rem; margin: 0 auto 10px; }
.cn-join h2 { color: #fff; font-size: 1.9rem; margin-bottom: 8px; }
.cn-join p { color: rgba(255,255,255,0.9); margin-bottom: 22px; }

/* Community portal: sidebar + content layout */
.cn-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .cn-layout { grid-template-columns: 1fr; } }
.cn-side { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
@media (max-width: 860px) { .cn-side { position: static; } }
.cn-side-head { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.cn-side-flag { font-size: 2.4rem; display: block; line-height: 1; }
.cn-side-head strong { display: block; color: var(--navy); font-size: 1.1rem; margin-top: 4px; }
.cn-side-head span { color: var(--muted); font-size: 0.8rem; }
.cn-nav { display: flex; flex-direction: column; gap: 4px; }
.cn-nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--text); font-weight: 600; font-size: 0.92rem; }
.cn-nav-link span { font-size: 1.1rem; }
.cn-nav-link:hover { background: var(--bg); text-decoration: none; }
.cn-nav-link.active { background: var(--navy); color: #fff; }
/* Collapsible sub-menu group in the community sidebar */
.cn-nav-group { display: block; }
.cn-nav-group > summary { list-style: none; cursor: pointer; }
.cn-nav-group > summary::-webkit-details-marker { display: none; }
.cn-nav-summary .cn-nav-caret { margin-left: auto; font-size: 0.7rem; opacity: 0.8; transition: transform 0.18s ease; }
.cn-nav-group[open] > summary .cn-nav-caret { transform: rotate(180deg); }
.cn-nav-child { padding-left: 34px; font-size: 0.9rem; }
.cn-side-join { display: block; text-align: center; margin-top: 14px; }
.cn-side-back { display: block; text-align: center; margin-top: 10px; color: var(--muted); font-size: 0.85rem; }
.cn-main { min-width: 0; }

/* Sub-page header + coming-soon panel */
.cn-page-head { margin-bottom: 22px; }
.cn-page-emoji { font-size: 2.6rem; display: block; line-height: 1; }
.cn-page-head h2 { color: var(--navy); font-size: 1.9rem; margin: 8px 0 6px; }
.cn-page-head p { color: var(--muted); max-width: 560px; margin-bottom: 12px; }
.cn-soon { text-align: center; background: var(--card); border: 1px dashed var(--border); border-radius: 16px; padding: 48px 24px; }
.cn-soon-emoji { font-size: 3rem; margin-bottom: 8px; }
.cn-soon h3 { color: var(--navy); font-size: 1.4rem; margin-bottom: 6px; }
.cn-soon p { color: var(--muted); max-width: 420px; margin: 0 auto 18px; }

/* ============================================================
   Always-visible community chat (pinned right edge)
   ============================================================ */
.cn-chat-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 300;
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  background: var(--navy); color: #fff; border: none; padding: 16px 9px;
  border-radius: 14px 0 0 14px; box-shadow: -4px 6px 18px rgba(0,0,0,0.22);
  font-weight: 800; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.cn-chat-tab:hover { padding-right: 13px; }
.cn-chat-badge {
  position: absolute; top: -7px; left: -7px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #e0322a; color: #fff; border: 2px solid #14161b;
  font-size: 0.66rem; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.cn-chat-badge[hidden] { display: none; }
.cn-chat-tab-icon { font-size: 1.35rem; }
.cn-chat.open .cn-chat-tab { display: none; }

.cn-chat-panel {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 301;
  width: min(92vw, 340px); height: min(74vh, 540px);
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.28); display: flex; flex-direction: column; overflow: hidden;
}
.cn-chat.collapsed .cn-chat-panel { display: none; }
.cn-chat-bar { background: var(--navy); color: #fff; padding: 12px 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; cursor: move; touch-action: none; }
.cn-chat-min { background: none; border: none; color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0.85; }
.cn-chat-min:hover { opacity: 1; }
.cn-chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 7px; background: var(--bg); }
.cn-chat-empty { color: var(--muted); text-align: center; margin: auto; font-size: 0.9rem; padding: 0 12px; }
.cn-msg { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 7px 10px;
  font-size: 0.9rem; line-height: 1.3; align-self: flex-start; max-width: 92%; word-wrap: break-word; }
.cn-msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-color: var(--navy); }
/* Links inside chat messages */
.cn-msg a { color: var(--lime); text-decoration: underline; word-break: break-word; }
.cn-msg.me a { color: #14223a; }
/* YouTube thumbnail inside a chat message */
.cn-msg-yt { display: block; position: relative; margin-top: 6px; border-radius: 10px; overflow: hidden; max-width: 220px; }
.cn-msg-yt img { display: block; width: 100%; }
.cn-msg-yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: rgba(224,50,42,0.92); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem; padding-left: 3px;
}
.cn-msg-yt:hover .cn-msg-yt-play { background: #e0322a; }
/* Emoji picker */
.cn-chat-emoji-btn { background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 6px; }
.cn-emoji-pop {
  position: absolute; bottom: 52px; left: 8px; right: 8px; z-index: 5;
  background: #1c1f27; border: 1px solid var(--border); border-radius: 10px; padding: 8px;
  display: flex; flex-wrap: wrap; gap: 3px; max-height: 168px; overflow-y: auto;
  box-shadow: 0 -8px 22px rgba(0,0,0,0.45);
}
.cn-emoji-pop[hidden] { display: none; }
.cn-emoji-pop button { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 5px; border-radius: 6px; }
.cn-emoji-pop button:hover { background: rgba(255,255,255,0.1); }
.cn-msg-user { display: block; font-size: 0.66rem; font-weight: 700; opacity: 0.7; margin-bottom: 1px; }
.cn-chat-form { display: flex; border-top: 1px solid var(--border); background: #fff; }
.cn-chat-form input { flex: 1; border: none; padding: 11px 12px; font: inherit; }
.cn-chat-form input:focus { outline: none; }
.cn-chat-form .btn { border-radius: 0; }
.cn-chat-signin { padding: 14px; text-align: center; font-size: 0.88rem; color: var(--muted); background: #fff; }
@media (max-width: 520px) { .cn-chat-panel { right: 8px; width: calc(100vw - 16px); height: 70vh; } }

/* ===================== Community videos ===================== */
.video-add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.video-add input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 13px;
  font: inherit;
  background: var(--bg);
  color: var(--text);
}
.video-add input:focus { outline: none; border-color: var(--coral); background: #fff; }
.video-add .btn { flex: 0 0 auto; }
.video-signin {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}
.video-signin a { color: var(--coral-dark); font-weight: 600; }

.video-flash {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.94rem;
}
.video-flash.ok  { background: #eef5ec; color: var(--green); border: 1px solid #cfe1c8; }
.video-flash.err { background: #fcefea; color: #9a4426; border: 1px solid #f3d2c4; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.video-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(27, 42, 74, 0.05);
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-meta { padding: 12px 14px; }
.video-title {
  display: block;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 4px;
}
.video-by { display: block; font-size: 0.82rem; color: var(--muted); }
.video-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.video-block { margin-top: 8px; }
@media (max-width: 520px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DARK GLOSSY THEME  —  charcoal surfaces + indigo accent
   Appended last so it overrides the original light styles.
   ============================================================ */
:root {
  /* Surfaces */
  --bg: #15171c;            /* base charcoal */
  --card: #1f232b;          /* panel */
  --surface-2: #272c35;     /* raised: inputs, header chips */
  --border: #2d333d;        /* hairline */
  --text: #e9ebf0;          /* primary text */
  --muted: #9aa1ad;         /* secondary text */
  --green: #46c98c;         /* success / prices */

  /* Brand color used both as text (headings) and surfaces.
     Kept light so all the `color: var(--navy)` headings read on dark. */
  --navy: #eef1f7;
  --navy-light: #dfe4ee;
  --navy-dark: #f5f7fb;
  --teal: #eef1f7;
  --teal-light: #dfe4ee;
  --purple: #aab4ff;

  /* Accent (indigo) — drives buttons, links, highlights */
  --gold: #7c8aff;
  --gold-dark: #5b67e0;
  --coral: #7c8aff;
  --coral-dark: #6f7bf7;
  --lime: #aab4ff;          /* light indigo highlight on dark */
  --lime-deep: #6f7bf7;
}

/* Glossy charcoal backdrop */
body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(124,138,255,0.10) 0%, rgba(124,138,255,0) 55%),
    linear-gradient(180deg, #20232b 0%, #15171c 40%, #121419 100%);
  background-attachment: fixed;
  color: var(--text);
}

/* Alternating section bands, dark */
.band-cream { background: #181b21; }
.band-soft  { background: #1c2027; }

a { color: var(--lime); }

/* --- Minimal monochrome luxury header --- */
.site-header {
  position: sticky; top: 0;
  background: rgba(13, 14, 17, 0.9);
  -webkit-backdrop-filter: saturate(120%) blur(16px);
  backdrop-filter: saturate(120%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 12px 34px rgba(0,0,0,0.55);
}
.header-inner { position: relative; padding-top: 16px; padding-bottom: 16px; }

/* Wordmark */
.logo { gap: 12px; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: 0 3px 12px rgba(124,138,255,0.4); filter: saturate(0.9);
  transition: transform 0.25s ease;
}
.logo:hover .logo-mark { transform: scale(1.04); }
.logo-text { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.01em; }
.logo strong, .logo-text strong { color: #fff; font-weight: 600; }
.logo-region {
  margin-left: -8px; padding-left: 0; border-left: none; background: none; border-radius: 0;
  font-family: var(--font-serif); font-size: 1em; letter-spacing: 0.01em;
  text-transform: none; font-weight: 600; color: #fff;
}

/* Nav — uppercase but bigger & bolder for legibility */
.nav { gap: 20px; }
.nav > a, .nav-item > a {
  color: #ccd0d8; position: relative; padding-bottom: 4px;
  font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
.nav-caret { letter-spacing: 0; }
.nav > a::after, .nav-item > a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav > a:hover::after, .nav-item:hover > a::after { transform: scaleX(1); }
.nav a:hover { color: #fff; text-decoration: none; }
.nav-muted { color: #6e737d; }

/* CTA — refined off-white pill */
.nav a.btn-coral {
  background: #f4f5f7; color: #14161c !important; border: none;
  border-radius: 30px; padding: 8px 18px;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  box-shadow: none;
}
.nav a.btn-coral:hover { background: #fff; filter: none; }
.nav a.btn-coral::after { display: none; }

/* Push nav to the right so the menu button + logo sit together on the left */
.header-inner { justify-content: flex-start; }
.nav { margin-left: auto; }

/* Hamburger menu button */
.menu-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.05); color: #d7dae1;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 30px;
  padding: 8px 14px; cursor: pointer; font: inherit;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.menu-toggle:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: #fff; }
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-toggle-bars span { width: 17px; height: 2px; border-radius: 2px; background: currentColor; }
@media (max-width: 560px) { .menu-toggle-text { display: none; } .menu-toggle { padding: 8px 10px; } }

/* ============================================================
   Events map
   ============================================================ */
.pin-map-card { padding: 0; overflow: hidden; margin-bottom: 18px; position: relative; }
.pin-map { width: 100%; height: 65vh; min-height: 480px; max-height: 760px; z-index: 0; position: relative; }
.pin-map .leaflet-marker-icon { cursor: pointer; }
.pin-map .leaflet-div-icon { background: transparent; border: none; cursor: pointer; }

/* Category color legend, floated over the bottom-left of a pin map. */
.pin-map-legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 900;
  background: rgba(255,255,255,0.95); border-radius: 10px; padding: 8px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22); display: flex; flex-direction: column; gap: 5px;
  font-size: 0.78rem; font-weight: 600; color: #23264f; max-width: 220px;
}
.pin-map-legend-item { display: flex; align-items: center; gap: 7px; }
.pin-map-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
@media (max-width: 640px) { .pin-map-legend { max-width: 150px; font-size: 0.72rem; } }

/* Custom hover card (plain DOM element, not a Leaflet tooltip) shown next
   to a pin on hover. Fixed width + break-word keeps text from overflowing;
   pointer-events stays enabled so the card itself can be hovered/clicked. */
.event-pin-card {
  position: absolute; left: 0; top: 0; z-index: 1000;
  width: 300px; max-width: calc(100% - 24px); box-sizing: border-box;
  transform: translate(-50%, -100%);
  background: #ffffff; border-radius: 14px; padding: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.30);
  display: none; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; pointer-events: auto; cursor: pointer;
  opacity: 0; transition: opacity 0.12s ease;
  max-height: calc(100% - 24px); overflow-y: auto;
}
.event-pin-card.show { display: flex; opacity: 1; }
/* Shown when there's no room above the pin — flips the card below it
   instead, so it never runs off the top of the map. */
.event-pin-card.pin-below { transform: translate(-50%, 16px); }
.event-pin-card.pin-below::after {
  bottom: auto; top: -8px; border-top-color: transparent; border-bottom-color: #ffffff;
}
.event-pin-card-img { position: relative; width: 100%; }
.event-pin-card img {
  width: 100%; height: 168px; object-fit: cover; border-radius: 10px; display: block;
}
.event-pin-card .event-img-credit { font-size: 0.62rem; padding: 2px 7px; }
.event-pin-card strong {
  font-size: 1.15rem; line-height: 1.3; color: #14192c; font-weight: 700;
  max-width: 100%; overflow-wrap: break-word; word-break: break-word;
}
.event-pin-card span {
  font-size: 0.9rem; color: #454b5c; font-weight: 500;
  max-width: 100%; overflow-wrap: break-word; word-break: break-word;
}
.event-pin-card p {
  font-size: 0.85rem; color: #444; line-height: 1.4; margin: 0; text-align: left;
  max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;
}
.event-pin-card em {
  font-style: normal; font-size: 0.78rem; color: #8a3ffc; font-weight: 700;
}
.event-pin-card-rating { font-size: 0.82rem; color: var(--gold-dark); font-weight: 700; letter-spacing: 0.3px; }
.event-pin-card-deal {
  margin: 0; font-size: 0.8rem; font-weight: 700; color: #8a5a00;
  background: #fff4d9; border-radius: 8px; padding: 6px 8px; text-align: left;
  overflow-wrap: break-word; word-break: break-word; white-space: normal;
}
.event-pin-card::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #ffffff;
}

/* Brief highlight flash on the list item when its map pin is clicked. */
@keyframes eventLiFlash {
  0%   { background: #fff6db; }
  100% { background: transparent; }
}
.event-li-flash { animation: eventLiFlash 1.8s ease-out; border-radius: 10px; }

/* ============================================================
   Slide-out sidebar menu (every page)
   ============================================================ */
:root { --sidebar-w: 300px; }

.side-menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 401;
  width: min(86vw, var(--sidebar-w));
  background: linear-gradient(180deg, #15171c 0%, #101216 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 12px 0 40px rgba(0,0,0,0.5);
  transform: translateX(-100%); transition: transform 0.28s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
body.menu-open .side-menu { transform: none; }
body.menu-no-anim .side-menu { transition: none; }

/* Backdrop only used as a mobile overlay */
.side-menu-backdrop {
  position: fixed; inset: 0; z-index: 400; display: none;
  background: rgba(6, 7, 10, 0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.28s ease;
}

/* Desktop: sidebar is DOCKED — it pushes the page instead of overlaying it */
@media (min-width: 900px) {
  body.menu-open { padding-left: var(--sidebar-w); }
  body:not(.menu-no-anim) { transition: padding-left 0.28s ease; }
}

/* Mobile: sidebar OVERLAYS the page with a dimmed backdrop */
@media (max-width: 899px) {
  body.menu-open .side-menu-backdrop { display: block; opacity: 1; }
}
.side-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 0; background: #15171c;
}
.side-menu-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-serif); font-size: 1.05rem; }
.side-menu-brand img { border-radius: 50%; }
.side-menu-brand strong { color: #fff; }
.side-menu-close {
  background: rgba(255,255,255,0.06); color: #cdd1d9; border: 1px solid rgba(255,255,255,0.12);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; line-height: 1;
}
.side-menu-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.side-menu-nav { display: flex; flex-direction: column; gap: 14px; padding: 14px 12px 24px; }
.side-menu-group {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 8px 8px 10px;
}
.side-menu-label {
  display: block;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8b919c; padding: 8px 10px 6px;
}
.side-menu-nav a {
  display: block; color: #d2d6de; padding: 10px 12px; border-radius: 9px;
  font-size: 0.95rem; font-weight: 500;
}
.side-menu-nav a:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }

/* --- Glossy raised panels --- */
.card, .video-card, .news-card, .story-feature, .story-row, .story-card,
.community-tile, .member-spot, .cn-side, .partner, .player, .forum-topic,
.opp, .cn-soon, .fb-link {
  background-color: var(--card);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.38);
}

/* Inputs & textareas → dark */
.field input, .field select, .field textarea,
.board-new textarea, .board-reply-form input, .search-bar input, .search-bar select,
.newsletter input, .chat-form input, .cn-chat-form input, .video-add input {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
.video-add input:focus, .field input:focus, .field textarea:focus { background: #2b313b; border-color: var(--coral); }
::placeholder { color: #7d8492; }

/* Dropdown menu → dark glass */
.nav-menu {
  background: rgba(28, 31, 39, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: var(--border); box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
.nav-menu a:hover { background: rgba(124,138,255,0.14); }

/* Light hovers → subtle white wash */
.community-link:hover, .event-item:hover, .news-item:hover { background: rgba(255,255,255,0.05); }

/* Components that used the (now light) brand color as a BACKGROUND */
.btn-navy { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn-navy:hover { background: #313742; }
.event-date-badge,
.community-link.active, .cn-nav-link.active {
  background: var(--gold); color: #14161c;
}
.community-link.active, .cn-nav-link.active { color: #14161c; font-weight: 700; }
.forum-box-head, .chat-head, .cn-chat-tab, .cn-chat-bar {
  background: var(--surface-2); color: var(--text);
}
.forum-box-cta { color: var(--lime); }
.chat-msg.me, .cn-msg.me { background: var(--gold); color: #14161c; border-color: var(--gold); }
.chat-msg.them { background: #2a2f38; color: var(--text); }
.avatar, .member-ring { background: linear-gradient(150deg, #444d61, #272d38); color: #fff; }

/* Calendar contrast on the new accent */
.cal-holiday { background: var(--gold); color: #14161c; }
.cal-today { outline-color: var(--gold); }
.cal-event { background: #1d3a2c; color: #7fe0ab; }

/* Buttons — glossy indigo CTA */
.btn-coral, .btn-gold {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #fff !important; font-weight: 700;
  box-shadow: 0 4px 16px rgba(124,138,255,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-coral:hover, .btn-gold:hover { filter: brightness(1.08); }

/* Floating chat panel → dark */
.cn-chat-panel, .cn-msg, .cn-chat-form, .cn-chat-signin { background: var(--card); }
.cn-msg { border-color: var(--border); color: var(--text); }

/* Kickers / small links → bright accent */
.story-kicker, .cn-sec-link, .video-signin a, .event-row-sm strong { color: var(--lime); }

/* Status chips → dark variants */
.video-flash.ok  { background: #14271d; color: #7fe0ab; border-color: #245138; }
.video-flash.err { background: #2c1714; color: #f0a48c; border-color: #5a2b22; }
.alert-ok    { background: #14271d; color: #8fe6b4; border-color: #245138; }
.alert-error { background: #2c1714; color: #f3b4a4; border-color: #5a2b22; }

/* Google button → dark */
.btn-google { background: var(--surface-2); color: var(--text) !important; border-color: var(--border); }
.btn-google:hover { background: #313742; }

/* Ad placeholder → dark */
.ad-slot {
  background: repeating-linear-gradient(45deg, #1c2027, #1c2027 12px, #20242b 12px, #20242b 24px);
  border-color: #2d333d; color: #7d8492;
}

/* Sub-sites share the dark shell (accent hue shifts per community) */
body.theme-chest, body.theme-comm {
  --bg: #15171c; --card: #1f232b; --surface-2: #272c35; --border: #2d333d;
  --text: #e9ebf0; --muted: #9aa1ad;
  --navy: #eef1f7; --navy-light: #dfe4ee; --navy-dark: #f5f7fb;
  --teal: #eef1f7; --teal-light: #dfe4ee;
}
body.theme-chest { /* emerald accent */
  --gold: #2fbf86; --gold-dark: #1f9d6e; --coral: #2fbf86; --coral-dark: #25a978;
  --lime: #67e0ad; --green: #2fbf86;
}
body.theme-comm { /* tropical teal & cyan accent */
  --gold: #17c4d4; --gold-dark: #0e9aab; --coral: #17c4d4; --coral-dark: #0e9aab;
  --lime: #5fe6ef; --green: #2fcf9e;
}
body.theme-chest .btn-coral, body.theme-chest .btn-gold,
body.theme-comm .btn-coral, body.theme-comm .btn-gold {
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Teal buttons read best with dark ink text */
body.theme-comm .btn-coral, body.theme-comm .btn-gold { color: #06262b !important; }
body.theme-comm .cn-nav-link.active, body.theme-comm .community-link.active,
body.theme-comm .event-date-badge, body.theme-comm .cal-holiday { color: #06262b !important; }
body.theme-chest .band-cream, body.theme-comm .band-cream { background: #181b21; }

/* Themed tiles (Community Chest) → dark glossy card with accent top border */
body.theme-chest .tile, body.theme-comm .tile {
  background-color: var(--card);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  color: var(--text); border-top: 3px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.38);
}

/* In-game chat box + game-control select → dark */
.chat { background: var(--card); }
.game-controls select { background: var(--surface-2); color: var(--text); }

/* Facebook page promo (footer, site-wide) */
.fb-promo { background: #14161b; border-top: 1px solid var(--border); padding: 34px 0; }
.fb-promo-inner { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
@media (max-width: 760px) { .fb-promo-inner { grid-template-columns: 1fr; } }
.fb-promo-text h3 { color: var(--navy); font-size: 1.35rem; margin-bottom: 8px; }
.fb-promo-text p { color: var(--muted); margin-bottom: 16px; max-width: 440px; }
.fb-promo-embed { min-width: 0; max-width: 100%; overflow: hidden; border-radius: 12px; }
.fb-promo-ph { width: 320px; max-width: 100%; height: 200px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); color: var(--muted); font-size: 0.9rem; background: rgba(255,255,255,0.03); }
.fb-promo-text code { background: rgba(255,255,255,0.07); padding: 1px 6px; border-radius: 5px; font-size: 0.85em; }

/* Facebook card — sits under the calendar in the sidebar */
.fb-card {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px;
  background: linear-gradient(180deg, #1877f2 0%, #135fc4 100%); color: #fff;
  border-radius: 14px; box-shadow: 0 8px 22px rgba(24,119,242,0.32);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.fb-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(24,119,242,0.42); color: #fff; }
.fb-card-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1877f2;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.5rem;
}
.fb-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fb-card-title { font-weight: 700; font-size: 0.98rem; }
.fb-card-sub { font-size: 0.72rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; }
.fb-card-cta { flex: none; font-weight: 700; font-size: 0.85rem; background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 30px; }

/* Facebook group "join" card */
.fb-group-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 230px; max-width: 100%; padding: 22px 20px; text-align: center;
  background: linear-gradient(180deg, #1877f2 0%, #135fc4 100%); color: #fff;
  border-radius: 16px; box-shadow: 0 10px 28px rgba(24,119,242,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fb-group-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(24,119,242,0.45); }
.fb-group-icon {
  width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #1877f2;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: 2rem; margin-bottom: 6px;
}
.fb-group-name { font-weight: 700; font-size: 1.05rem; color: #fff; }
.fb-group-sub { font-size: 0.78rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.08em; }
.fb-group-cta { margin-top: 10px; font-weight: 700; font-size: 0.9rem; background: rgba(255,255,255,0.18); padding: 7px 16px; border-radius: 30px; }

/* ===================== Places to Checkout ===================== */
.place-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.place-chip {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 30px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  font-size: 0.86rem; font-weight: 600;
}
.place-chip:hover { border-color: var(--gold); text-decoration: none; }
.place-chip.active { background: var(--gold); border-color: var(--gold); color: #14161c; }
/* Small color dot matching that category's map pin color — same swatch used
   in the map legend and on each category's heading border below. */
.place-chip-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }

.place-group { margin-bottom: 34px; }
.place-group-head {
  color: var(--navy); font-size: 1.35rem; margin-bottom: 14px;
  border-bottom: 2px solid var(--border); padding-bottom: 8px;
  border-left-width: 5px; border-left-style: solid; padding-left: 12px;
}
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.place-card-wrap { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
.place-card {
  position: relative; display: block; min-height: 230px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px 16px 0 0; color: #fff;
  background-size: cover; background-position: center; isolation: isolate;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.place-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,0.5); color: #fff; }
.place-card-shade {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,10,16,0.15) 0%, rgba(10,10,16,0.55) 55%, rgba(10,10,16,0.9) 100%);
}
.place-card-content {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px;
  height: 100%; min-height: 230px; padding: 18px; justify-content: flex-end;
}
.place-emoji { font-size: 2.1rem; line-height: 1; margin-bottom: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.place-name { font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: 1.18rem; line-height: 1.22;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.place-city { font-size: 0.82rem; color: rgba(255,255,255,0.9); }
.place-desc { font-size: 0.88rem; color: rgba(255,255,255,0.92); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.place-visit { margin-top: 8px; font-size: 0.84rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.18); align-self: flex-start; padding: 5px 12px; border-radius: 30px; }
.place-card:hover .place-visit { background: var(--gold); color: #14161c; }

/* Brief highlight ring when a place card is scrolled to from a map pin click. */
@keyframes placeCardFlash {
  0%   { box-shadow: 0 0 0 4px rgba(255,199,0,0.95); }
  100% { box-shadow: 0 0 0 4px rgba(255,199,0,0); }
}
.place-card-wrap.place-card-flash { animation: placeCardFlash 1.8s ease-out; border-radius: 16px; }

/* Current-deal callout: a hand-researched snapshot (not live), so it
   always carries an "as of" date + source link — see render_place_deal(). */
.place-deal {
  background: linear-gradient(135deg, #fff4d9, #ffe8b8); border: 1px solid #f0cf84; border-top: none;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.place-deal-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #8a5a00; }
.place-deal-text { margin: 0; font-size: 0.85rem; color: #4a3400; line-height: 1.4; }
.place-deal-meta { font-size: 0.72rem; color: #8a5a00; }
.place-deal-meta a { color: #8a5a00; font-weight: 700; text-decoration: underline; }

/* Rating strip under each place card: our own 1-5 star system (see
   render_place_rating() in helpers.php for why it's not Google's rating). */
.place-rating {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-top: none;
  padding: 10px 12px; font-size: 0.82rem;
}
.place-rating-avg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--text); }
.place-rating-stars-static { color: var(--gold); letter-spacing: 1px; }
.place-rating-num { font-weight: 700; }
.place-rating-count { color: #8a8f9c; font-size: 0.78rem; }
.place-rate-login { font-size: 0.78rem; font-weight: 600; color: var(--navy-light); white-space: nowrap; }

/* 5-star picker, built from plain radio inputs (no JS). Rendered 5-down-to-1
   in the markup and laid out right-to-left, so ":checked ~ label" and
   "label:hover ~ label" (which match *later* siblings) light up everything
   to the left of the chosen/hovered star. */
.place-rate-form { display: flex; flex-direction: column; gap: 6px; }
.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-rating label {
  cursor: pointer; font-size: 1.3rem; line-height: 1; color: #d8d3c6; padding: 2px 1px;
  transition: color 0.12s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: var(--gold); }
.star-rating input:focus-visible ~ label { outline: 2px solid var(--navy-light); outline-offset: 1px; }
.place-rate-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px;
  font-family: inherit; font-size: 0.82rem; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.place-rate-form .btn { align-self: flex-start; }

/* Written reviews, collapsed by default under a "N reviews" toggle. */
.place-reviews {
  background: var(--card); border: 1px solid var(--border); border-top: none;
  padding: 0 12px;
}
.place-reviews summary { cursor: pointer; padding: 8px 0; font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.place-review { padding: 8px 0; border-top: 1px solid var(--border); }
.place-review:first-child { border-top: none; }
.place-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.place-review-stars { color: var(--gold); letter-spacing: 1px; font-size: 0.85rem; }
.place-review-head strong { font-size: 0.85rem; color: var(--text); }
.place-review-date { font-size: 0.75rem; color: #8a8f9c; }
.place-review-text { font-size: 0.85rem; color: var(--text); line-height: 1.4; margin: 0 0 8px; white-space: pre-wrap; }

/* Admin: manage place photos */
.place-manage { display: flex; flex-direction: column; gap: 10px; }
.place-manage-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.place-manage-row:last-child { border-bottom: none; }
.place-manage-thumb { flex: none; width: 56px; height: 42px; border-radius: 8px;
  background-size: cover; background-position: center; background-color: var(--border); }
.place-manage-name { flex: 1; min-width: 160px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.place-manage-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.place-manage-form input[type=file] { max-width: 200px; font-size: 0.82rem; color: var(--muted); }

/* ===================== Basketball pickup games ===================== */
.pk-form { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.pk-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pk-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--muted); font-weight: 600; flex: 1 1 130px; margin-bottom: 12px; }
.pk-form label.pk-full { flex-basis: 100%; }
.pk-form input, .pk-form select, .pk-form textarea {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2);
  color: var(--text); font: inherit; font-weight: 400;
}
.pk-form input:focus, .pk-form select:focus, .pk-form textarea:focus { outline: none; border-color: var(--coral); }
.pk-form textarea { min-height: 64px; resize: vertical; }

.pk-preview { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.pk-preview-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.pk-games { display: flex; flex-direction: column; gap: 14px; }
.pk-game {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.pk-game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pk-game-loc { display: block; font-family: var(--font-serif); font-weight: 700; color: var(--navy); font-size: 1.12rem; }
.pk-game-when { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.pk-game-count { flex: none; background: var(--gold); color: #06262b; font-weight: 800; font-size: 0.82rem; padding: 5px 12px; border-radius: 30px; }
.pk-game-notes { margin: 10px 0 4px; color: var(--text); line-height: 1.5; }
.pk-game-host { font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }
.pk-empty { color: var(--muted); font-size: 0.9rem; margin: 6px 0 12px; }
.pk-game-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-game-actions form { display: inline; }
.pk-full-badge { background: rgba(255,255,255,0.08); color: var(--muted); font-weight: 700; font-size: 0.85rem; padding: 7px 14px; border-radius: 8px; }

/* Basketball court drag-and-drop lineup */
.pk-court-area { margin: 6px 0 14px; }
.bb-courts { display: flex; flex-direction: column; gap: 18px; }
.bcourt-wrap { width: 100%; }
.bcourt-label { font-weight: 800; color: var(--navy); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
/* Court row: left sideline | court | right sideline */
.pk-court-row { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.bb-sideline {
  flex: 0 0 132px; display: flex; flex-direction: column; gap: 10px; padding: 10px;
  border: 1px dashed var(--border); border-radius: 12px; background: rgba(255,255,255,0.03);
}
.bb-sideline-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-align: center; }
.bcourt {
  position: relative; flex: 1 1 auto; width: 100%; max-width: 680px; aspect-ratio: 760 / 1180; border-radius: 14px;
  background-image: url('img/court.jpg'); background-size: cover; background-position: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45); border: 1px solid rgba(0,0,0,0.3);
}
.bspot {
  border-radius: 11px; border: 2px dashed rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.12); transition: background 0.12s ease, border-color 0.12s ease;
}
/* on-court spots are absolutely placed over the image */
.bcourt > .bspot { position: absolute; transform: translate(-50%, -50%); width: 20%; min-width: 84px; aspect-ratio: 3/4; }
/* sideline spots stack in their column */
.bspot-side { width: 100%; aspect-ratio: 3/4; }
@media (max-width: 820px) {
  .pk-court-row { flex-direction: column; align-items: center; }
  .bb-sideline { flex: none; width: 100%; max-width: 600px; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .bb-sideline-label { width: 100%; }
  .bspot-side { width: 84px; }
}
.bspot.team-a { border-color: rgba(120,180,255,0.7); }
.bspot.team-b { border-color: rgba(255,150,90,0.7); }
.bspot.drop-hot, .bbench.drop-hot { background: rgba(255,255,255,0.28); border-color: #fff; }
.bspot:has(.bb-mini) { border-style: solid; background: rgba(0,0,0,0.25); }

.bbench {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 12px;
  border: 1px dashed var(--border); border-radius: 12px; background: rgba(255,255,255,0.03); min-height: 64px;
}
.bbench-label { width: 100%; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bbench.drop-hot { border-color: var(--coral); }

/* Mini player card (on court / bench): photo fills the card, name overlaid */
.bb-mini {
  position: relative; width: 100%; max-width: 104px; aspect-ratio: 3/4; overflow: hidden;
  border-radius: 11px; background-size: cover; background-position: center;
  background-color: #d2480b; box-shadow: 0 5px 14px rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.25);
}
.bb-mini--noimg { background: linear-gradient(165deg, #ff7a18 0%, #d2480b 100%); }
.bbench .bb-mini { max-width: 96px; }
.bb-mini.bb-movable { cursor: grab; }
.bb-mini.dragging { opacity: 0.5; }
.bb-mini-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 2rem; color: rgba(255,255,255,0.9); }
.bb-mini-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 5px 4px;
  color: #fff; font-size: 0.74rem; font-weight: 800; line-height: 1.1; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) { .bspot { min-width: 60px; } .bb-mini-name { font-size: 0.64rem; } }

/* Cool basketball profile cards (preview) */
.bb-card-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.bb-card {
  position: relative; width: 230px; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #d2480b; color: #fff;
  box-shadow: 0 10px 26px rgba(210,72,11,0.4);
}
.bb-card--noimg { background: linear-gradient(165deg, #ff7a18 0%, #d2480b 100%); }
.bb-card-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 6rem; color: rgba(255,255,255,0.9); }
.bb-card-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 36px 16px 16px; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
}
.bb-card-name { font-family: var(--font-serif); font-weight: 800; font-size: 5.7rem; line-height: 0.9; letter-spacing: -0.02em; text-shadow: 0 3px 12px rgba(0,0,0,0.95); overflow-wrap: anywhere; }

/* Your-card profile section (bottom of page): card on top, bio + videos under */
.bb-profile { max-width: 640px; }
.bb-profile-card { display: flex; justify-content: center; margin-bottom: 18px; }
.bb-facts { text-align: center; color: var(--muted); font-weight: 600; margin-top: 10px; }
.bb-bio { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; color: var(--text); line-height: 1.55; margin-bottom: 18px; white-space: normal; }
.bb-bio h4 { color: var(--navy); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.bb-vid-head { color: var(--navy); margin: 24px 0 12px; }
.bb-vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.bb-vid { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bb-vid-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.bb-vid-frame iframe, .bb-vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.bb-vid-meta { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.bb-vid-title { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-vid-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; }
.bb-vid-del:hover { color: #e0322a; }

/* Community Updates board */
.cu-form { margin-bottom: 18px; }
.cu-form textarea {
  width: 100%; min-height: 72px; resize: vertical; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  color: var(--text); font: inherit;
}
.cu-form textarea:focus { outline: none; border-color: var(--coral); }
.cu-form .btn { margin-top: 10px; }
.cu-signin { margin-bottom: 18px; color: var(--muted); }
.cu-signin a { color: var(--lime); font-weight: 600; }
.cu-list { display: flex; flex-direction: column; gap: 10px; }
.cu-item {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.cu-body { flex: 1; min-width: 0; }
.cu-head { display: flex; align-items: center; gap: 8px; }
.cu-head strong { color: var(--navy); }
.cu-del-form { margin-left: auto; display: inline; }
.cu-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.cu-del:hover { color: #e0322a; }
.cu-text { margin-top: 4px; color: var(--text); line-height: 1.5; word-break: break-word; }
.cu-text a { color: var(--lime); }

/* Imported-event source link */
.event-source-link { display: inline-block; margin-top: 8px; font-size: 0.85rem; font-weight: 600; color: var(--lime); }
.event-li-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* Homepage: news photo cards + calendar sidebar */
.news-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
@media (max-width: 860px) { .news-layout { grid-template-columns: 1fr; } }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.news-aside { position: sticky; top: 80px; }
@media (max-width: 860px) { .news-aside { position: static; } }
/* Left-align the news heading when it shares the row with the calendar */
.band-head--left { text-align: left; max-width: none; margin: 0 0 20px; }
.cal-card h3 { color: var(--navy); margin-bottom: 10px; }
.news-card-img--blank { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #5b6270; }

/* Events page: compact expandable list + calendar sidebar */
.events-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
@media (max-width: 860px) { .events-layout { grid-template-columns: 1fr; } }
.events-aside { position: sticky; top: 90px; }
@media (max-width: 860px) { .events-aside { position: static; } }
.events-list { display: flex; flex-direction: column; gap: 8px; }
.event-li {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.event-li > summary {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer;
  list-style: none; user-select: none;
}
.event-li > summary::-webkit-details-marker { display: none; }
.event-li[open] > summary { border-bottom: 1px solid var(--border); }
.event-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.event-li-title { font-family: var(--font-serif); font-weight: 600; color: var(--navy); font-size: 1.06rem; }
.event-li-chevron { color: var(--muted); transition: transform 0.18s ease; flex: none; }
.event-li[open] .event-li-chevron { transform: rotate(180deg); }
.event-li:hover { border-color: var(--gold); }
.event-li-detail { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.event-li-img { height: 170px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--border); position: relative; }

/* Small corner credit shown when the event photo is actually a satellite
   thumbnail of the venue (no uploaded photo was available) — Esri's terms
   ask for attribution when their World Imagery tiles are displayed. */
.event-img-credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  background: rgba(13,20,45,0.65); color: #fff; font-size: 0.68rem; font-weight: 600;
  padding: 3px 8px; border-radius: 20px; letter-spacing: 0.01em; white-space: nowrap;
}

/* ============================================================
   Ads — strategic display slots
   ============================================================ */
.ad-wrap { margin: 26px auto; }
.ad-wrap-side { margin: 14px 0 0; }
.ad-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 110px;
  background: repeating-linear-gradient(45deg, #1c2027, #1c2027 12px, #20242b 12px, #20242b 24px);
  border: 1px dashed #333a45; border-radius: 12px;
  color: #7d8492; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; padding: 22px 12px;
}
.ad-leaderboard { min-height: 130px; }
.ad-side { min-height: 250px; text-transform: none; letter-spacing: 0; }
.ad-tag {
  position: absolute; top: 8px; left: 10px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  color: #6b727e; background: rgba(255,255,255,0.04);
  padding: 2px 7px; border-radius: 5px;
}

/* ============================================================
   Gated video poster (click → ad → plays)
   ============================================================ */
.video-poster {
  display: block; width: 100%; border: 0; padding: 0; cursor: pointer;
  background-size: cover; background-position: center; background-color: #000;
}
.video-poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
  transition: background 0.2s ease;
}
.video-poster:hover::after { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.3)); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,138,255,0.92); color: #fff; font-size: 1.5rem; padding-left: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); transition: transform 0.15s ease, background 0.15s ease;
}
.video-poster:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--gold); }

/* ============================================================
   Forced ad interstitial overlay
   ============================================================ */
.ad-gate {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(8, 9, 12, 0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ad-gate[hidden] { display: none; }
.ad-gate-box {
  width: min(720px, 96vw);
  background: #14161b; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transition: transform 0.25s ease;
}
.ad-gate-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 8px 2px 12px; min-height: 0;
  background: linear-gradient(90deg, rgba(124,138,255,0.20) 0%, rgba(124,138,255,0.04) 60%, rgba(124,138,255,0) 100%);
  border-bottom: 1px solid rgba(124,138,255,0.28);
}
.ad-gate-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #aab4ff;
}
.ad-gate-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #7c8aff; box-shadow: 0 0 8px #7c8aff; animation: adPulse 1.6s ease-in-out infinite;
}
@keyframes adPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.ad-gate-close {
  background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 11px; font-size: 0.68rem; font-weight: 700;
  line-height: 1.2; cursor: pointer; min-width: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ad-gate-close:disabled { cursor: default; opacity: 0.6; }
.ad-gate-close:not(:disabled):hover {
  background: var(--gold); color: #14161c; border-color: var(--gold);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,138,255,0.45);
}
.ad-gate-count em { font-style: normal; font-weight: 800; color: var(--lime); }
.ad-gate-body {
  position: relative; min-height: 280px; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center; background: #0e0f13;
}
.ad-gate-placeholder { text-align: center; color: #7d8492; padding: 24px; position: relative; }
.ad-gate-placeholder p { margin-top: 6px; font-size: 0.95rem; }
.ad-gate-note { font-size: 0.78rem; color: #5f6672; margin-top: 10px; }
@media (max-width: 520px) { .ad-gate-body { aspect-ratio: auto; min-height: 320px; } }

/* "You're about to leave this site" warning for external links. Stays
   visible for as long as the gate is open (including after the ad below
   it is dismissed) so the real link is always there to click — only shown
   at all when .ad-gate-box has .has-warning. The ad (head/body) is hidden
   until .show-ad is added, 2s in, and re-hides if the ad alone is closed. */
.ad-gate-warning { display: none; }
.ad-gate-box.has-warning .ad-gate-warning {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px; background: rgba(255,196,0,0.08);
  border-bottom: 1px solid rgba(255,196,0,0.25);
}
.ad-gate-warning-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.ad-gate-warning-body { min-width: 0; }
.ad-gate-warning p { margin: 0; font-size: 0.92rem; color: var(--text); line-height: 1.4; }
.ad-gate-warning-link {
  display: inline-block; margin-top: 8px; max-width: 100%;
  font-size: 0.85rem; font-weight: 700; color: var(--gold);
  word-break: break-all; text-decoration: underline; text-underline-offset: 2px;
}
.ad-gate-warning-link:hover { color: var(--lime); }
.ad-gate-warning-link[hidden] { display: none; }
.ad-gate-box:not(.show-ad) .ad-gate-head,
.ad-gate-box:not(.show-ad) .ad-gate-body { display: none; }

/* ---- SEO: page-level <h1> reuses the section/band heading styles, so
   promoting a page's main heading from <h2> to <h1> changes nothing visually ---- */
.band-head h1 { font-size: 1.9rem; color: var(--teal); }
.band-teal .band-head h1 { color: #fff; }
.section-head h1 { font-size: 1.3rem; color: var(--navy); }
body.theme-chest .band-head h1, body.theme-comm .band-head h1 { font-size: 1.65rem; }

/* ---- Listing breadcrumb ---- */
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--teal); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 6px; opacity: 0.6; }
.breadcrumb-current { color: var(--muted); }
body.theme-chest .breadcrumb a { color: var(--coral); }
.listing-meta a { color: inherit; text-decoration: underline; }

/* ============ Buyer↔seller messages ============ */
.nav-messages { position: relative; }
.msg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; margin-left: 5px;
  border-radius: 10px; background: var(--gold); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.msg-threads { display: flex; flex-direction: column; gap: 10px; }
.msg-thread-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; text-decoration: none; color: var(--text);
}
.msg-thread-item:hover { border-color: var(--gold); text-decoration: none; }
.msg-unread { border-left: 4px solid var(--gold); }
.msg-thumb {
  width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.msg-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border); font-size: 1.4rem;
}
.msg-thread-info { flex: 1; min-width: 0; }
.msg-thread-top { display: flex; justify-content: space-between; gap: 10px; }
.msg-thread-sub { color: var(--muted); font-size: 0.85rem; margin: 2px 0; }
.msg-preview {
  color: var(--muted); font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-unread .msg-preview { color: var(--text); font-weight: 600; }

.msg-thread-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.msg-thread-title { font-weight: 700; color: var(--navy); }
.msg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.msg-bubble {
  max-width: 75%; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--card);
}
.msg-mine  { align-self: flex-end; background: var(--navy); color: #fff; border-color: var(--navy); border-bottom-right-radius: 4px; }
.msg-theirs { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-body { white-space: pre-wrap; word-wrap: break-word; }
.msg-meta { font-size: 0.75rem; margin-top: 4px; opacity: 0.7; }
.msg-form { display: flex; gap: 10px; align-items: flex-end; }
.msg-form textarea {
  flex: 1; min-height: 64px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font-sans); font-size: 0.95rem; background: var(--card); color: var(--text);
}
.msg-form--listing { margin-top: 8px; }
@media (max-width: 640px) {
  .msg-bubble { max-width: 90%; }
  .msg-thread-top { flex-direction: column; gap: 2px; }
}

/* ============ Reports & admin dashboard ============ */
.report-box { margin-top: 14px; }
.report-box summary {
  cursor: pointer; color: var(--muted); font-size: 0.85rem; list-style: none;
}
.report-box summary:hover { color: var(--danger, #b3372f); }
.report-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.report-form textarea {
  min-height: 60px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--font-sans); font-size: 0.9rem;
  background: var(--card); color: var(--text); resize: vertical;
}
.report-form button { align-self: flex-start; }

.admin-stats {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.admin-stat {
  flex: 1; min-width: 110px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; text-align: center;
}
.admin-stat-num { display: block; font-size: 1.7rem; font-weight: 700; color: var(--navy); }
.admin-stat-label { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.admin-h2 { margin: 24px 0 10px; font-size: 1.15rem; color: var(--navy); }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px;
}
.admin-row-main { flex: 1; min-width: 200px; }
.admin-reason { margin: 4px 0; font-style: italic; color: var(--text); }
.admin-actions { display: flex; gap: 6px; margin: 0; }
.nav-admin { position: relative; font-weight: 600; }

/* When ads aren't running, ad_slot() returns an empty string. The wrapper divs
   around it still exist in the markup, and their margins would leave odd gaps
   in the page. :empty collapses any wrapper that has no ad inside it, so the
   layout closes up neatly instead. */
.ad-wrap:empty { display: none; margin: 0; }

/* Curated newsroom links, shown when no Niagara stories are in the feeds. */
.news-sources { margin: 10px 0 0; padding-left: 18px; }
.news-sources li { margin: 4px 0; }