/* LUCK Live · C5 Insight brand tokens (Material Design 3 inspired) */
/* Roboto is loaded non-blocking by each page (link media=print onload) so a venue without internet never stalls page loads */
:root {
  --primary: #002533;
  --primary-2: #06394b;
  --tertiary: #006B97;
  --teal: #006250;
  --accent: #7A9A01;
  --accent-bright: #9cc31a;
  --neutral: #F0F5F7;
  --white: #FFFFFF;
  --muted: #8FA6B0;
  --border: #CDD7DC;
  --body: #1A2A33;
  --danger: #c2410c;
  --warn: #b7791f;
  --ok: #4d7c0f;
  --font: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --cond: 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  /* LUCK Live tokens (Phase 1a) — the names above stay for existing pages and packs */
  --c5-navy: #002533;
  --c5-blue: #006B97;
  --c5-teal: #006250;
  --c5-lime: #7A9A01;
  --c5-lime-bright: #9cc31a;
  --c5-neutral: #F0F5F7;
  --c5-border: #CDD7DC;
  --c5-body: #1A2A33;
  --c5-muted: #8FA6B0;
  --c5-white: #FFFFFF;
  --c5-font: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --c5-cond: 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --c5-clover: url('/shared/brand/c5-clover-96.png');
  --c5-logo-dark: url('/shared/brand/c5-logo-dark.png');
  --c5-logo-white: url('/shared/brand/c5-logo-white.png');
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font); color: var(--body); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
.eyebrow { font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }

/* LUCK Live mark: 16–20px clover + "LUCK Live" wordmark. Fits inside an existing header line (no extra height).
   <span class="c5-mark"><img src="/shared/brand/c5-clover-96.png" alt="">LUCK <b>Live</b></span>
   (an empty <span class="c5-mark"></span> works too: the clover comes from CSS and the text from the markup) */
.c5-mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--c5-font); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: .01em; color: inherit; white-space: nowrap; vertical-align: middle; text-decoration: none; }
.c5-mark > img { width: 18px; height: 18px; object-fit: contain; flex: none; display: block; }
.c5-mark:not(:has(> img))::before { content: ''; width: 18px; height: 18px; flex: none; background: var(--c5-clover) center / contain no-repeat; }
.c5-mark b { font-weight: 400; opacity: .85; margin-left: -2px; }
.c5-mark.sm { font-size: 12px; gap: 5px; } .c5-mark.sm > img, .c5-mark.sm::before { width: 16px; height: 16px; }
.c5-mark.lg { font-size: 16px; } .c5-mark.lg > img, .c5-mark.lg::before { width: 20px; height: 20px; }
.c5-mark.icon { gap: 0; font-size: 0; } /* clover only */
.c5-cond { font-family: var(--c5-cond); text-transform: uppercase; letter-spacing: .1em; }
/* 3.1: participant avatars (RL.avatar) — built-in characters, headshots or the initial letter */
.avi { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: inline-flex; vertical-align: middle; flex: none; background: #e6edf0; }
.avi.avl { align-items: center; justify-content: center; color: #002533; font: 700 12px/1 var(--font, Roboto, Arial, sans-serif); }