/* ── Reset ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg: #0a0c1a;
  --surface: #13152a;
  --surface-alt: #1a1d33;
  --surface-hi: #202340;
  --border: #272a4a;
  --border-hi: #3a3f6e;
  --accent: #ffc107;
  --accent-dim: #e6a800;
  --accent-glow: rgba(255, 193, 7, 0.18);
  --red: #e63946;
  --blue: #4a9eff;
  --green: #4caf50;
  --text: #f0f0f5;
  --muted: #7b87a8;
  --danger: #e63946;
  --font: "DM Mono", "Courier New", monospace;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius: 10px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ── Atmospheric glow ───────────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(255, 193, 7, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed;
  bottom: -10%;
  right: -10%;
  width: 55%;
  height: 55%;
  background: radial-gradient(ellipse, rgba(74, 158, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Grain ──────────────────────────────────────────────────── */
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Header ─────────────────────────────────────────────────── */
#site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 12, 26, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4);
}
.header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  text-decoration: none;
  /* Never the thing that gives way. The header is a flex row holding the
     logo, a Back button and the event's name, and on a narrow screen with a
     long name there is not room for all three — something has to shrink, and
     it must not be the brand. */
  flex-shrink: 0;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
}
.logo-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  /* Nine separate letter spans, one per animated character — so without this
     the wrap lands *inside* the word and the header reads "Salu-S / alo". */
  white-space: nowrap;
}

@keyframes letterwave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.ll {
  display: inline-block;
  animation: letterwave 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.08s);
}
.header-title {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  /* The one that yields. A flex item will not shrink below its content
     without this, so the ellipsis above never got the chance to do its job
     and the squeeze was passed along to the logo instead. */
  flex: 0 1 auto;
  min-width: 0;
}
.back-btn {
  flex-shrink: 0;
}
.back-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font);
}
.back-btn:hover {
  color: var(--text);
  border-color: var(--text);
}

/* ── Main ───────────────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px calc(80px + env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* ── Typography ─────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* Privacy mode: show count instead of names */
.privacy-count {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-display);
  margin: 0 0 8px;
  opacity: 0.75;
}

/* Sits below every view. Quiet by design — it is a legal link, not navigation,
   and the app stores require it to be reachable from the site. */
#site-footer {
  text-align: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  font-family: var(--font);
  font-size: 12px;
}
#site-footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
#site-footer a:hover {
  color: var(--text);
  border-bottom-color: var(--border-hi);
}