/* Shared public page frame and navigation: keep dimensions identical to Club Lookup. */
:root { --pp-public-content-width: 1280px; }
.wrap,
.changelog-shell {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--pp-public-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 38px 22px 56px !important;
}
.changelog-shell { flex: 1 0 auto !important; margin-top: 0 !important; margin-bottom: 0 !important; }

.site-nav {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 0 28px !important;
  padding: 8px 10px !important;
  border: 1px solid color-mix(in srgb,var(--line) 88%,var(--accent)) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb,var(--panel) 92%,var(--bg)) !important;
  box-shadow: 0 12px 32px #0003 !important;
}
.site-nav-links > a,
.site-nav-actions > a,
.site-nav > .site-nav-support .support-link {
  box-sizing: border-box !important;
  display: inline-flex !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  color: var(--muted) !important;
  background: color-mix(in srgb,var(--panel) 90%,var(--bg)) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.site-nav > .site-nav-support .support-link { gap: 8px !important; padding: 0 16px !important; color: var(--text) !important; font-weight: 750 !important; }
.site-nav .site-nav-partners { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin-left: 0 !important; white-space: nowrap !important; }
.site-nav .site-nav-discord { display: inline-flex !important; align-items: center !important; gap: 4px !important; white-space: nowrap !important; }
.site-nav-links > a:hover,
.site-nav-links > a[aria-current="page"],
.site-nav-actions > a:hover,
.site-nav-actions > a[aria-current="page"],
.site-nav > .site-nav-support .support-link:hover {
  border-color: color-mix(in srgb,var(--accent) 72%,var(--line)) !important;
  color: var(--accent) !important;
  background: color-mix(in srgb,var(--accent) 13%,var(--panel)) !important;
  transform: none !important;
}
.site-nav-links { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; grid-column: 1 !important; grid-row: 1 !important; }
.site-nav-actions { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; grid-column: 3 !important; grid-row: 1 !important; }
.site-nav-support { position: absolute !important; left: 50% !important; top: 50% !important; width: auto !important; margin: 0 !important; transform: translate(-50%,-50%) !important; }
.site-nav .site-nav-live-visitors { box-sizing: border-box !important; display: inline-flex !important; min-height: 36px !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 0 10px !important; border: 1px solid var(--line) !important; border-radius: 9px !important; color: var(--muted) !important; background: color-mix(in srgb,var(--panel) 90%,var(--bg)) !important; font-size: 12px !important; line-height: 1.1 !important; white-space: nowrap !important; }
.site-nav-live-visitors img { display: none !important; }
.site-nav-live-visitors::before { content: "🌐"; color: var(--accent); font-size: 18px; line-height: 1; }
.site-nav-account-area { display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-left: 2px !important; padding-left: 12px !important; border-left: 1px solid var(--line) !important; }
.site-nav-account-menu { position: relative !important; }
.site-nav-account-menu > summary { box-sizing: border-box !important; display: inline-flex !important; min-height: 36px !important; align-items: center !important; gap: 8px !important; padding: 0 10px !important; border: 1px solid color-mix(in srgb,var(--accent) 45%,var(--line)) !important; border-radius: 9px !important; color: var(--accent) !important; background: color-mix(in srgb,var(--accent) 10%,var(--panel)) !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1.1 !important; text-decoration: none !important; white-space: nowrap !important; }
.site-nav-account-menu > summary::before,
.site-nav .site-nav-account-link::before { content: "🔐"; display: inline-grid; width: 24px; height: 24px; place-items: center; font-size: 18px; }
.site-nav-account-menu > summary::after,
.site-nav .site-nav-account-link::after { content: "⌄"; font-size: 11px; opacity: .9; }
.site-nav .account-changelog-link[aria-current="page"] { border-color: color-mix(in srgb,var(--accent) 72%,var(--line)) !important; background: color-mix(in srgb,var(--accent) 13%,var(--panel)) !important; color: var(--accent) !important; }
@media (max-width: 900px) {
  .wrap,
  .changelog-shell { padding: 28px 14px 42px !important; }
  .site-nav { display: grid !important; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important; align-items: center !important; gap: 5px !important; min-height: 54px !important; padding: 6px 8px !important; }
  .site-nav-links,.site-nav-actions { display: none !important; }
  .site-nav > .mobile-nav-dropdown { display: block !important; grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; width: max-content !important; max-width: 100% !important; }
  .site-nav > .site-nav-support { display: flex !important; position: absolute !important; left: 50% !important; top: 50% !important; grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; width: auto !important; margin: 0 !important; transform: translate(-50%,-50%) !important; }
  .site-nav .support-link { max-width: 100% !important; min-height: 36px !important; gap: 5px !important; padding: 0 8px !important; font-size: clamp(10px,2.9vw,12px) !important; font-weight: 750 !important; }
  .site-nav > .mobile-account-area { display: flex !important; grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; align-items: center !important; gap: 4px !important; width: max-content !important; max-width: 100% !important; min-width: 0 !important; }
  .site-nav > .mobile-account-area > [hidden] { display: none !important; }
  .site-nav > .mobile-account-area .mobile-account-link,
  .site-nav > .mobile-account-area .mobile-account-menu > summary { box-sizing: border-box !important; display: flex !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; min-height: 36px !important; align-items: center !important; justify-content: center !important; gap: 0 !important; padding: 0 !important; border: 1px solid color-mix(in srgb,var(--accent) 45%,var(--line)) !important; border-radius: 9px !important; color: var(--accent) !important; background: color-mix(in srgb,var(--accent) 10%,var(--panel)) !important; font-size: 0 !important; line-height: 1 !important; }
  .site-nav > .mobile-account-area .mobile-account-link::before,
  .site-nav > .mobile-account-area .mobile-account-menu > summary::before { content: "🔐" !important; width: auto !important; height: auto !important; font-size: 18px !important; }
  .site-nav > .mobile-account-area .mobile-account-link::after,
  .site-nav > .mobile-account-area .mobile-account-menu > summary::after { content: "⌄" !important; margin-left: 2px !important; font-size: 11px !important; }
  .site-nav > .mobile-account-area .account-changelog-link { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; }
}
@media (max-width: 380px) {
  .site-nav { gap: 3px !important; padding-right: 5px !important; padding-left: 5px !important; }
  .site-nav > .site-nav-support .support-link { width: 36px !important; min-width: 36px !important; max-width: 36px !important; padding: 0 !important; font-size: 0 !important; }
  .site-nav > .site-nav-support .support-link > span:first-child { font-size: 16px !important; }
}
/* Account menu items keep the same typography and hit area whether they are links or buttons. */
.site-nav .account-menu-items a,
.site-nav .account-menu-items button,
.site-nav .account-menu-items .account-menu-action,
.site-nav .mobile-account-items a,
.site-nav .mobile-account-items button,
.site-nav .mobile-account-items .account-menu-action {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 38px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 9px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.site-nav .account-menu-items a:hover,
.site-nav .account-menu-items button:hover,
.site-nav .mobile-account-items a:hover,
.site-nav .mobile-account-items button:hover {
  border-color: color-mix(in srgb,var(--accent) 55%,var(--line)) !important;
  color: var(--accent) !important;
  background: var(--glow) !important;
}
.site-nav .account-menu-items { z-index: 50 !important; }
.site-nav .account-menu-items > * { position: relative; pointer-events: auto !important; }
@media (prefers-reduced-motion: reduce) { .site-nav-links > a,.site-nav-actions > a,.site-nav .support-link { transition: none !important; } }

/* Keep the live visitor count accented as on Club Lookup. */
.site-nav-live-visitors strong { color: var(--accent) !important; font-weight: 850 !important; font-variant-numeric: tabular-nums !important; }
/* Match Club Lookup's longer Halloween web while keeping its current safe layer. */
:root.halloween-theme .halloween-spider::before { top: -32px !important; height: calc(var(--halloween-spider-top, 110px) + 32px) !important; }

/* Canonical public page heading shared by every route. */
.public-page-frame { position: relative; }
.public-page-heading { position: relative; z-index: 1; margin: 0; padding: 0 !important; }
.public-page-heading > .eyebrow { display: block; margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .2em; line-height: 1.35; text-transform: uppercase; }
.public-page-heading > .title { position: relative; width: fit-content; max-width: calc(100% - 48px); margin: 9px 0 10px !important; color: var(--text); font-size: clamp(34px,6vw,52px) !important; font-weight: 850 !important; line-height: 1.05 !important; letter-spacing: -.045em !important; }
.public-page-heading > .public-page-description { margin: 0 0 30px !important; color: var(--muted); font-size: 16px; line-height: 1.55; }
.public-page-heading > .seasonal-message { display: none; margin: -4px 0 18px !important; color: var(--accent) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: .04em; }
:root.halloween-theme .public-page-heading > .seasonal-message.halloween, :root.christmas-theme .public-page-heading > .seasonal-message.christmas, :root.newyear-theme .public-page-heading > .seasonal-message.newyear, :root.easter-theme .public-page-heading > .seasonal-message.easter { display: block; }
.public-page-heading > .title::after { content: none !important; display: none !important; animation: none !important; }
.public-page-heading .theme-heading-emoji { display: none; position: absolute; top: .08em; left: calc(100% + 12px); z-index: 4; pointer-events: none; font-size: .58em; line-height: 1; filter: drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 68%,transparent)); animation: seasonal-heading-float 3s ease-in-out infinite; }
.public-page-heading .theme-heading-emoji::before { content: none !important; }
:root.halloween-theme .public-page-heading .theme-heading-emoji, :root.christmas-theme .public-page-heading .theme-heading-emoji, :root.newyear-theme .public-page-heading .theme-heading-emoji, :root.easter-theme .public-page-heading .theme-heading-emoji { display: inline-block; }
@keyframes seasonal-heading-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@media (max-width:650px) { .public-page-heading .theme-heading-emoji { top: .06em; left: calc(100% + 7px); font-size: .6em; } }
@media (prefers-reduced-motion:reduce) { .public-page-heading .theme-heading-emoji { animation: none !important; } }

/* The mobile visitor control already contains its globe emoji in the markup. */
.mobile-site-nav-visitors::before { content: none !important; }