/* =========================================================================
   Yaypick — design system
   A friendly live-voting look: bright surfaces, navy ink, one warm brand red,
   and a colour per answer (A/B/C/D tiles). Rounded, tactile, game-show buttons.
   Tokens are scoped so any element can carry its own poll theme
   (data-theme-mode / data-font / data-radius / data-bg + --accent).
   ========================================================================= */

:root,
[data-theme-mode="light"] {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f2f0ea;
  --surface-3: #e7e4dc;
  --border: #e3dfd5;
  --border-strong: #c7c2b5;
  --text: #1d1f3b;
  --text-2: #484b67;
  --muted: #777a92;
  --danger: #c62f22;
  --success: #12825c;
  --warning: #a86800;
  --gold: #ffc21a;
  --on-gold: #1d1f3b;
  --shadow: 0 1px 2px rgba(29, 31, 59, .04);
  --shadow-lg: 0 2px 4px rgba(29, 31, 59, .06), 0 24px 48px -16px rgba(29, 31, 59, .22);
  --dot: rgba(29, 31, 59, .13);
  --grid: rgba(29, 31, 59, .06);
  color-scheme: light;
}

[data-theme-mode="dark"] {
  --bg: #12142a;
  --surface: #1a1c33;
  --surface-2: #22253f;
  --surface-3: #2d3050;
  --border: #2f3252;
  --border-strong: #4a4e74;
  --text: #f1f1f8;
  --text-2: #c5c7dc;
  --muted: #8f92ad;
  --danger: #ff7a6b;
  --success: #4fd1a1;
  --warning: #f2b544;
  --shadow: 0 1px 2px rgba(29, 31, 59, .04);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
  --dot: rgba(241, 241, 248, .12);
  --grid: rgba(241, 241, 248, .05);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode="light"]),
  [data-theme-mode="auto"] {
    --bg: #12142a;
    --surface: #1a1c33;
    --surface-2: #22253f;
    --surface-3: #2d3050;
    --border: #2f3252;
    --border-strong: #4a4e74;
    --text: #f1f1f8;
    --text-2: #c5c7dc;
    --muted: #8f92ad;
    --danger: #ff7a6b;
    --success: #4fd1a1;
    --warning: #f2b544;
    --shadow: 0 1px 2px rgba(29, 31, 59, .04);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
    --dot: rgba(241, 241, 248, .12);
    --grid: rgba(241, 241, 248, .05);
    color-scheme: dark;
  }
}

:root {
  --accent: #d93a2b;
  --on-accent: #ffffff;
  /* Answer colours, fixed order (validated for colour-blind separation). */
  --c1: #e5412f; --c2: #2f6fe8; --c3: #bf8400; --c4: #119e72;
  /* Per-language fallbacks (see "Fonts per language" below): Latin glyphs stay
     in Rubik, other scripts use the language's own typeface. */
  --lang-sans: system-ui; --lang-serif: Georgia;
  /* Nunito: rounded and friendly across the whole site (Rubik stays loaded for the "Modern" big-screen style). */
  --font: "Nunito", "Rubik", var(--lang-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-btn: 8px;
}

[data-theme-mode] { color: var(--text); }

/* Accent-derived tokens recompute wherever --accent is overridden. */
:root, [data-theme-mode], [style*="--accent"] {
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 85%, var(--text));
  --accent-lip: color-mix(in srgb, var(--accent) 68%, #000);
}

[data-font="sans"] { --font-display: var(--font); }
[data-font="serif"] { --font-display: "Newsreader", var(--lang-serif), Georgia, serif; }
[data-font="mono"] { --font: "IBM Plex Mono", var(--lang-sans), ui-monospace, monospace; --font-display: var(--font); }
[data-font="rounded"] { --font: "Nunito", "Rubik", var(--lang-sans), system-ui, sans-serif; --font-display: var(--font); }
[data-font] { font-family: var(--font); }

[data-radius="sharp"] { --radius-sm: 3px; --radius: 4px; --radius-lg: 6px; --radius-btn: 4px; }
[data-radius="soft"] { --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-btn: 12px; }
[data-radius="round"] { --radius-sm: 16px; --radius: 22px; --radius-lg: 28px; --radius-btn: 999px; }

[data-bg] { background-color: var(--bg); }
[data-bg="grid"] {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
}
[data-bg="dots"] { background: radial-gradient(var(--dot) 1.2px, transparent 1.4px) 0 0 / 18px 18px, var(--bg); }
/* A solid accent band behind the top of the page. */
[data-bg="band"] { background: linear-gradient(var(--accent) 0 250px, var(--bg) 250px) no-repeat, var(--bg); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
html[data-bg] body { background: transparent; }
html[data-bg] { min-height: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -0.015em; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent-text); text-decoration: none; font-weight: 500; }
a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--gold) 60%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.tiny { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 0; }
.grow:has(> h2, > h3, > p) { flex-basis: 240px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Small label above headings */
.kicker, .section-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em;
}
.kicker b { color: var(--accent); font-weight: 700; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 720px; }

.topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topbar .container { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none !important; font-family: var(--font); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.brand-mark { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a.navlink, .nav button.navlink {
  color: var(--text-2); padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500;
  text-decoration: none; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center;
}
.nav a.navlink:hover, .nav button.navlink:hover { background: var(--surface-2); color: var(--text); }
.nav a.navlink[aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
.prefs { position: relative; }
.prefs > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); font-size: 13.5px; font-weight: 600; user-select: none; }
.prefs > summary:hover { background: var(--surface-2); color: var(--text); }
.prefs > summary::-webkit-details-marker { display: none; }
.prefs > summary svg { color: var(--muted); }
.prefs-cur { color: var(--muted); font-weight: 500; }
.prefs-cur::before { content: "·"; margin-right: 6px; }
.prefs[open] > summary { background: var(--surface-2); color: var(--text); }
.prefs-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: flex; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: min(70vh, 460px); }
.prefs-col { display: flex; flex-direction: column; gap: 1px; min-width: 170px; overflow-y: auto; }
.prefs-col + .prefs-col { border-left: 1px solid var(--border); padding-left: 6px; }
.prefs-col h5 { margin: 4px 10px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.prefs-col p { margin: 8px 10px 2px; max-width: 170px; }
.prefs-item { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.prefs-item:hover { background: var(--surface-2); }
.prefs-item.on { background: var(--accent-softer); color: var(--accent-text); font-weight: 600; }
.prefs-item .muted { font-size: 12px; }
@media (max-width: 600px) {
  .prefs-cur { display: none; }
  .prefs { position: static; }
  .prefs-panel { left: 12px; right: 12px; top: 62px; flex-direction: column; max-height: 75vh; overflow-y: auto; }
  .prefs-col { min-width: 0; overflow: visible; }
  .prefs-col + .prefs-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 6px; }
}

/* Short pages: the footer stays at the bottom of the window, not halfway up it. */
#app:has(> .footer) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#app:has(> .footer) > main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.footer { margin-top: 72px; background: #12142a; color: rgba(255,255,255,.66); font-size: 14px; }
.footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .brand { color: #fff; font-size: 22px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.footer-brand p { margin-top: 14px; max-width: 320px; line-height: 1.55; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: inherit; opacity: .8; text-decoration: none; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }
/* Terms, Privacy and Refund pages: a comfortable reading column. */
.legal { max-width: 760px; margin-top: 40px; margin-bottom: 72px; }
@media (max-width: 640px) { .legal { margin-top: 24px; } .legal-tabs { margin-bottom: 20px; } }
.legal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.legal-tabs a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; }
.legal-tabs a[aria-current="page"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); font-weight: 600; }
.legal-doc h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 6px; }
.legal-doc h2 { font-size: 20px; margin: 32px 0 10px; }
.legal-doc p, .legal-doc li { font-size: 15.5px; line-height: 1.7; }
.legal-doc .lead { font-size: 16.5px; }
.legal-doc h1 + .muted { margin-bottom: 22px; }
.legal-doc ul { padding-left: 22px; display: grid; gap: 6px; }
.terms-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.terms-check input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; }
@media (max-width: 1023px) {
  .footer-top { grid-template-columns: 1fr 1fr; padding-top: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Buttons ---------- */
.btn {
  --lip: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--radius-btn);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  box-shadow: none;
  transition: transform .06s, box-shadow .06s, background .12s, border-color .12s;
  text-decoration: none !important; position: relative; top: 0;
}
.btn:hover { border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { --lip: var(--accent-lip); background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ink { --lip: #000; background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.gold { --lip: #b38600; background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.ghost:active { transform: none; }
.btn.danger { color: var(--danger); --lip: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.btn.danger.solid { background: var(--danger); color: #fff; border-color: var(--danger); --lip: #8f1f16; }
.btn.lg { height: 54px; padding: 0 28px; font-size: 16.5px; }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13.5px; }
.btn.sm:active { box-shadow: none; }
.btn.icon { width: 40px; padding: 0; height: 40px; }
.btn.icon.sm { width: 30px; height: 30px; }
.btn.ghost.icon, .btn.ghost.sm { box-shadow: none; }
.btn.block { width: 100%; }
.btn .spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.hint { font-size: 13px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 15px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input.invalid, .textarea.invalid { border-color: var(--danger); }
/* Locked fields (e.g. an event's dates once it has started): visibly read-only. */
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.input.title-input { font-size: 24px; font-weight: 700; font-family: var(--font-display); padding: 11px 15px; letter-spacing: -0.015em; }
/* Every drop-down, whatever its class: our arrow with room on the right, never the browser's own (founder, 30 Oct 2026). */
.select, :where(select:not([multiple])) { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
input[type="color"].swatch-input { width: 30px; height: 30px; border: 1.5px solid var(--border); border-radius: 9px; padding: 0; background: none; cursor: pointer; flex-shrink: 0; }
input[type="color"].swatch-input::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"].swatch-input::-webkit-color-swatch { border: none; border-radius: 6px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background .15s; flex-shrink: 0; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .track { background: var(--c4); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .45; }

.segmented { display: inline-flex; padding: 4px; background: var(--surface-2); border-radius: 8px; gap: 2px; flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; padding: 7px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(29,31,59,.15); }

.choice-cards { display: grid; gap: 8px; }
.choice-card { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; width: 100%; }
.choice-card:hover { border-color: var(--border-strong); }
.choice-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-softer); }
.choice-card .t { font-weight: 600; font-size: 14.5px; }
.choice-card .d { font-size: 13px; color: var(--muted); }
.pay-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pay-logo { box-sizing: border-box; height: 26px; padding: 3px 7px; border: 1px solid #e3dfd5; border-radius: 6px; background: #fff; }
img.pay-logo { width: auto; min-width: 38px; object-fit: contain; }
.pay-logo.word { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: .01em; line-height: 1; }
.pay-logo.paynow { color: #7b1fa2; }
.pay-logo.fpx { color: #1b3a8c; }
.pay-logo.duitnow { color: #ed2c67; }
.pay-logo.paypal { color: #003087; font-style: italic; }
.pay-logo.bank { color: #3a3d55; font-weight: 600; }
.choice-card .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; margin-top: 2px; }
.choice-card[aria-pressed="true"] .radio { border: 6px solid var(--accent); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
.card.ruled { border: 1px solid var(--border); }
.card-pad { padding: 24px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 16px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.open { color: var(--success); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
.badge.closed { color: var(--muted); }
.badge.live .dot { animation: pulse-dot 1.4s ease-in-out infinite; }
.badge.accent { color: var(--accent-text); background: var(--accent-soft); }
.badge.ink { background: var(--text); color: var(--bg); }
.badge.warn { color: var(--warning); background: color-mix(in srgb, var(--gold) 22%, var(--surface)); }
@keyframes pulse-dot { 50% { opacity: .3; } }

.lock-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--on-gold); text-decoration: none !important; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: 0; background: none; padding: 12px 14px; font-weight: 600; font-size: 14.5px; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Toasts & dialogs ---------- */
#toasts { position: fixed; z-index: 100; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.idle-warn { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 24px; z-index: 1000; width: min(420px, calc(100vw - 32px)); display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: toastIn .2s ease-out; }
.idle-warn p { margin: 0; font-size: 14.5px; }
.toast { pointer-events: auto; background: #1d1f3b; color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: center; animation: toastIn .2s ease-out; }
.toast.error { background: #b3261b; }
.toast.success svg { color: #4fd1a1; }
.toast a { color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

dialog.modal { border: 0; padding: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog.modal.wide { width: min(760px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(18, 20, 42, .45); backdrop-filter: blur(2px); }
dialog.modal .modal-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
dialog.modal .modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }
/* Phones: three actions don't fit on one row; stack them full width, the main one first. */
@media (max-width: 480px) { dialog.modal .modal-actions:has(> :nth-child(3)) { flex-direction: column-reverse; } dialog.modal .modal-actions:has(> :nth-child(3)) > * { width: 100%; justify-content: center; } }
dialog.modal h3 { font-size: 20px; }

/* ---------- Answer tiles (A/B/C/D) — the signature element ---------- */
.letter { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; background: var(--tile, var(--c1)); }

/* ---------- Landing ---------- */
.hero { padding: 56px 0 64px; }
.hero h1 { font-size: clamp(42px, 6.2vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; margin: 16px 0 20px; }
.hero h1 .hl { position: relative; white-space: nowrap; z-index: 0; }
.hero h1 .hl::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: .06em; height: .32em; border-radius: 8px; background: var(--hl, var(--gold)); z-index: -1; opacity: .9; }
.hero p.lead { font-size: 19px; color: var(--text-2); max-width: 540px; margin: 0 0 30px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero illustration: phone voting + big-screen results */
.phone { position: absolute; left: 0; top: 10px; width: 250px; background: #1d1f3b; border-radius: 36px; padding: 12px; box-shadow: var(--shadow-lg); z-index: 2; }
.screen { position: absolute; left: 228px; right: 0; top: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 22px 22px 18px; box-shadow: var(--shadow-lg); }
.screen .row.top { justify-content: space-between; margin-bottom: 14px; }

.features { padding: 72px 0 24px; }
.features > .container > .head { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.features h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; margin: 8px 0 12px; }
.features .head p { color: var(--text-2); font-size: 17px; }

/* Kept for pages that still use the spec list (pricing FAQ). */
.spec-list { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.spec { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.spec h4 { font-size: 15.5px; margin-bottom: 6px; }
.spec p { font-size: 14px; color: var(--muted); }

.section { padding: 48px 0; }
.section > .container > .head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.section h2 { font-size: 30px; letter-spacing: -0.025em; }

.grid { display: grid; gap: 16px; }

.template { padding: 20px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; }
.template:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.template h3 { font-size: 17px; }
.template p { font-size: 14px; color: var(--muted); }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.price-col { padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); }
.price-col.hl { border: 2px solid var(--accent); box-shadow: 0 0 0 5px var(--accent-softer), var(--shadow-lg); }
.price-col .flag { position: absolute; top: -13px; left: 22px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.price-col h3 { font-size: 22px; }
.price-col h3.aud { font-size: 21px; margin-top: 4px; }
.price { display: flex; align-items: baseline; gap: 4px 6px; flex-wrap: wrap; }
.price b { font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.price span.per { white-space: nowrap; }
.price span { font-size: 14px; color: var(--muted); }
.price-col.quote-col .price b { font-size: clamp(30px, 2.8vw, 38px); }
.price-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.price-col li { display: flex; gap: 8px; align-items: flex-start; }
.price-col li svg { flex-shrink: 0; margin-top: 3px; color: var(--c4); }
.price-col li.off { color: var(--muted); }
.price-col li.off svg { color: var(--muted); }
.price-col .btn { margin-top: auto; }
.segmented button .save { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: var(--on-gold); }
.included { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 22px 24px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.included-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px; }
.included-grid > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.included-grid svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.included-grid b { display: block; font-size: 14.5px; }
.included-grid span { color: var(--muted); }
.plan-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.strip-item { display: flex; gap: 16px; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); }
.strip-item h4 { font-size: 18px; letter-spacing: -0.01em; margin: 4px 0; }
/* "Above 5,000 guests? Talk to us": the button drops below the text on phones. */
@media (max-width: 560px) { .strip-item.talk { flex-wrap: wrap; } .strip-item.talk > div:last-child { width: 100%; } }

/* Guest add-ons (pricing page #addons): cards whose rows line up across the row (subgrid). */
.addons { margin-top: 56px; display: grid; gap: 28px; scroll-margin-top: 90px; }
.addons-head h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; margin: 6px 0 10px; }
.addons-head p { color: var(--text-2); font-size: 17px; max-width: 680px; }
.addons-sub { font-size: 19px; }
.addon-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.addon-terms li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 600; }
.addon-terms svg { color: var(--accent-text); flex-shrink: 0; }
/* Pricing promises under the headline (pricing page, home pricing section). */
.trust-strip { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.trust-strip li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; font-weight: 600; }
.trust-strip svg { color: var(--success, #1a9e6a); flex-shrink: 0; }
.lp-head .trust-strip { flex-basis: 100%; margin-top: 0; }
.addon-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.addon-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; }
.addon-col .addon-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-softer); color: var(--accent-text); margin-bottom: 10px; }
.addon-col h3 { margin-bottom: 4px; }
.addon-col .addon-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.addon-col .addon-save { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); white-space: nowrap; }
.addon-col.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.addon-col .btn { align-self: end; }
.addon-grid-wrap, .addon-compare-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.addon-grid, .addon-compare { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.addon-grid :is(th, td), .addon-compare :is(th, td) { padding: 13px 16px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.addon-grid thead :is(th, td), .addon-compare thead :is(th, td) { border-top: 0; background: var(--surface-2); font-size: 13px; }
.addon-grid thead th b { display: block; font-size: 14.5px; }
.addon-grid thead th span { color: var(--muted); font-weight: 400; }
.addon-grid tbody th, .addon-compare tbody th { font-weight: 600; }
.addon-grid td b { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.addon-grid td .approx { font-size: 12.5px; }
.addon-compare :is(th, td):not(:first-child) { text-align: center; width: 17%; }
.addon-compare .yes { color: var(--success); display: inline-flex; }
.addon-compare .no { color: var(--muted); }
.strip-item.enterprise .ent-side { min-width: 180px; display: grid; gap: 6px; justify-items: start; }
.strip-item.enterprise .price b { font-size: 26px; }
/* Phones: each add-on's prices become a card, size by size. */
@media (max-width: 640px) {
  .addon-grid-wrap { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .addon-grid, .addon-grid tbody, .addon-grid tr, .addon-grid th, .addon-grid td { display: block; }
  .addon-grid thead { display: none; }
  .addon-grid tr { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
  .addon-grid tbody th { border-top: 0; background: var(--surface-2); font-size: 15.5px; }
  .addon-grid td { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
  .addon-grid td::before { content: attr(data-label); color: var(--text-2); }
  .addon-grid td .approx { flex-basis: 100%; text-align: right; margin-top: 0; }
  .addon-compare { font-size: 13.5px; }
  .addon-compare :is(th, td) { padding: 11px 8px; }
  .addon-compare :is(th, td):first-child { padding-left: 14px; }
  .addon-compare thead th { font-size: 12px; }
  .addon-compare :is(th, td):not(:first-child) { width: 19%; }
}

/* Prepaid passes (billing) */
.pass-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.pass-row { display: flex; gap: 16px; align-items: center; padding: 15px 18px; border-top: 1px solid var(--border); }
.pass-row:first-child { border-top: 0; }
.pass-row .ticket-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex-shrink: 0; }
.pass-row.live .ticket-ico { background: var(--accent); color: var(--on-accent); }
.pass-row .t { font-weight: 600; }
.pass-row.ready .ticket-ico { background: var(--accent-soft); color: var(--accent); }
.pass-count { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-size: 12.5px; font-weight: 700; vertical-align: 2px; white-space: nowrap; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-side { background: #1d1f3b; color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; isolation: isolate; }
.auth-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.auth-side::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,20,42,.2) 0%, rgba(18,20,42,.55) 40%, rgba(18,20,42,.96) 72%); }
.auth-side-copy { display: grid; gap: 14px; max-width: 480px; }
.auth-side h2 { font-family: var(--font-serif); font-size: clamp(36px, 4.2vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; }
.auth-side h2 em { font-style: italic; color: var(--gold); }
.auth-side p { color: rgba(255,255,255,.78); }
.auth-form { padding: 56px; display: flex; align-items: center; justify-content: center; }
.auth-form form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.forgot-link { margin: -8px 0 0; text-align: right; }
.reset-card { max-width: 480px; margin: 64px auto; }
.reset-ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); }
.auth-form h1 { font-size: 34px; letter-spacing: -0.03em; }
@media (max-width: 980px) {
  .auth-wrap { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .auth-side { display: none; }
  .auth-form { padding: 32px 20px 48px; align-items: flex-start; }
  .auth-form form { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .auth-form { padding: 24px 16px 40px; }
  .auth-form h1 { font-size: 30px; }
  .auth-form .btn.lg { height: 50px; }
}
.demo-creds { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 12px 14px; font-size: 13.5px; display: grid; gap: 6px; }
.demo-creds button { all: unset; cursor: pointer; font-size: 13.5px; color: var(--accent-text); }
.demo-creds button:hover { text-decoration: underline; }

/* ---------- App shell (dashboard, billing, reports, admin) ---------- */
.page-head { padding: 34px 0 22px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.page-head h1 { font-size: clamp(30px, 3.8vw, 42px); letter-spacing: -0.035em; margin-top: 4px; }
.page-head .grow p { margin-top: 6px; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.stat .k { font-size: 13px; color: var(--muted); font-weight: 500; display: flex; gap: 7px; align-items: center; }
.stat .v { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.stat .v.sm { font-size: 18px; font-weight: 700; margin-top: 8px; letter-spacing: -0.01em; }
.stat .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-2); margin-top: 12px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--c4); }
.meter.full i { background: var(--danger); }
.spark { height: 46px; margin-top: 8px; display: flex; align-items: flex-end; gap: 2px; }
.spark i { flex: 1; background: var(--accent); min-height: 2px; border-radius: 3px 3px 0 0; }

.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-top: 1px solid var(--border); }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--surface-2); }
.list-row .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.list-row .sw { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.list-row .metric { font-size: 15px; font-weight: 700; text-align: right; min-width: 70px; font-variant-numeric: tabular-nums; }
.list-row .metric .tiny { font-weight: 400; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty h3 { color: var(--text); font-size: 20px; margin-bottom: 6px; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }

/* ---------- Builder ---------- */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 28px; align-items: start; padding: 20px 0 64px; }
.builder .preview-col { position: sticky; top: 86px; }
.builder-head { display: flex; align-items: flex-end; gap: 12px; padding: 30px 0 18px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.builder-head h1 { font-size: 34px; letter-spacing: -0.03em; }
.panel { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }

.qcard { padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.qcard.section { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-color: var(--accent-line); }
.qcard.section .qnum { background: var(--accent); color: var(--on-accent); }
.qcard.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.qcard-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qnum { min-width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--text); color: var(--bg); font-weight: 700; font-size: 14px; flex-shrink: 0; padding: 0 6px; }
.qcard-head .select { width: auto; min-width: 160px; height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; font-weight: 600; }
.opt-row { display: flex; gap: 8px; align-items: center; }
.opt-row .input { padding: 8px 11px; }
.opt-row .handle { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; background: var(--surface-2); color: var(--text-2); }
.opt-extra { padding-left: 76px; }
.opt-tools { display: flex; gap: 2px; }
.qcard-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--border); }
.add-q { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.add-q button { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: transparent; cursor: pointer; text-align: left; font-weight: 600; font-size: 14px; color: var(--text); }
.add-q button:hover { border-style: solid; border-color: var(--accent); background: var(--accent-softer); }
.add-q button svg { color: var(--accent); }

.settings-group { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.settings-group h3 { font-size: 17px; }
.setting { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.setting .s-text { display: flex; flex-direction: column; gap: 2px; }
.setting .s-text .t { font-weight: 600; font-size: 14.5px; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.setting .s-text .d { font-size: 13px; color: var(--muted); }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--text); }

.font-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.font-card { padding: 12px 8px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: center; }
.font-card .aa { font-size: 24px; font-weight: 700; }
.font-card .n { font-size: 12.5px; color: var(--muted); }
.font-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-softer); }

.preview-frame { border-radius: 26px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.preview-bar .dots { display: flex; gap: 6px; }
.preview-bar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.preview-bar .dots i:nth-child(1) { background: var(--c1); }
.preview-bar .dots i:nth-child(2) { background: var(--gold); }
.preview-bar .dots i:nth-child(3) { background: var(--c4); }
.preview-bar .url { flex: 1; text-align: center; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-body { max-height: calc(100vh - 220px); overflow: auto; padding: 24px 16px; }

/* ---------- Poll page ---------- */
.poll-page { min-height: 100vh; display: flex; flex-direction: column; }
.poll-wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 44px 16px 24px; flex: 1; }
.poll-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.poll-cover { aspect-ratio: 3 / 1; width: 100%; object-fit: cover; background: var(--surface-2); }
.poll-head { padding: 30px 30px 8px; display: flex; flex-direction: column; gap: 10px; }
.poll-head .emoji { font-size: 40px; line-height: 1; }
.poll-head h1 { font-size: clamp(26px, 4.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.poll-head .desc { color: var(--text-2); }
.poll-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.poll-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border-radius: 999px; }
.poll-body { padding: 18px 30px 30px; display: flex; flex-direction: column; gap: 30px; }
.poll-foot { padding: 16px 30px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.q { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 24px; }
.q-title { font-weight: 700; font-size: 18.5px; display: flex; gap: 8px; overflow-wrap: anywhere; line-height: 1.3; letter-spacing: -0.01em; }
.q-title .muted { font-weight: 600; white-space: nowrap; }
.q-title .req { color: var(--accent); }
.q-help { font-size: 14px; color: var(--muted); margin-top: -6px; }
.q-error { color: var(--danger); font-size: 13.5px; font-weight: 600; }
.q.invalid .choice, .q.invalid .input, .q.invalid .textarea { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choices.has-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.choice {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px 11px 11px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; text-align: left; font-size: 15.5px; font-weight: 500;
  box-shadow: 0 2px 0 var(--border);
  transition: border-color .1s, background .1s, transform .06s, box-shadow .06s;
}
.choice:hover { border-color: var(--tile, var(--accent-line)); }
.choice:active { transform: translateY(2px); box-shadow: none; }
.choice[aria-checked="true"] { border-color: var(--tile, var(--accent)); background: color-mix(in srgb, var(--tile, var(--accent)) 10%, var(--surface)); box-shadow: 0 2px 0 var(--tile, var(--accent)); }
.choice .mark { width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; margin-left: auto; }
.choice.checkbox .mark { border-radius: 7px; }
.choice[aria-checked="true"] .mark { background: var(--tile, var(--accent)); border-color: var(--tile, var(--accent)); }
.choice .mark svg { opacity: 0; transform: scale(.6); transition: all .12s; }
.choice[aria-checked="true"] .mark svg { opacity: 1; transform: none; }
.choice .clabel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.choice.img { flex-direction: column; align-items: stretch; padding: 8px; gap: 8px; }
.choice.img .cimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - 5px); background: var(--surface-2); }
.choice.img .crow { display: flex; gap: 10px; align-items: center; padding: 0 4px 4px; }
.choice.img .mark { margin-left: auto; }
.other-input { margin-top: -2px; }

.rating { display: flex; gap: 6px; flex-wrap: wrap; }
.rating.stars button { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--surface-3); transition: transform .1s, color .1s; }
.rating.stars button:hover { transform: scale(1.12); }
.rating.stars button.on { color: #f5b301; }
.rating.numbers button { min-width: 46px; height: 46px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 16px; box-shadow: 0 2px 0 var(--border); }
.rating.numbers button:hover { border-color: var(--accent-line); }
.rating.numbers button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 2px 0 var(--accent-lip); }
.rating-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); max-width: 520px; }

.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: grab; user-select: none; box-shadow: 0 2px 0 var(--border); }
.rank-item.dragging { opacity: .5; border-style: dashed; border-color: var(--accent); }
.rank-item .pos { width: 28px; height: 28px; border-radius: 9px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 13.5px; flex-shrink: 0; }
.rank-item .grip { color: var(--muted); }

.name-field { padding: 16px; border-radius: var(--radius); background: var(--surface-2); }

.state-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); font-size: 14.5px; }
.state-banner.success { background: color-mix(in srgb, var(--success) 11%, var(--surface)); }
.state-banner.success > svg { color: var(--success); }
.state-banner.warn { background: color-mix(in srgb, var(--gold) 24%, var(--surface)); }
.state-banner > svg { flex-shrink: 0; margin-top: 2px; }
.state-banner .t { font-weight: 700; }

.branding { text-align: center; padding: 20px 16px 32px; font-size: 13px; color: var(--muted); }
.branding a { color: var(--text-2); font-weight: 600; }

/* ---------- Results ---------- */
.results { display: flex; flex-direction: column; gap: 30px; }
.r-q { display: flex; flex-direction: column; gap: 12px; }
.r-q-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.r-q-head h3 { font-size: 16.5px; font-family: var(--font); font-weight: 700; overflow-wrap: anywhere; letter-spacing: -0.01em; }
.r-q-head .muted { white-space: nowrap; font-size: 13px; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar { position: relative; display: flex; flex-direction: column; gap: 6px; }
.bar-top { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.bar-top .lbl { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; gap: 10px; }
.bar-top .lbl .letter { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
.bar-top .val { font-variant-numeric: tabular-nums; font-weight: 700; }
.bar-top .cnt { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; min-width: 48px; text-align: right; }
.bar-track { height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--accent); width: 0; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.bar.lead .lbl::after { content: "Leading"; font-size: 11.5px; font-weight: 700; color: var(--on-gold); background: var(--gold); padding: 2px 8px; border-radius: 999px; }
.bar-thumb { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2) center / cover; flex-shrink: 0; }

.donut-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.donut { width: 180px; height: 180px; flex-shrink: 0; position: relative; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1), stroke-dashoffset .7s cubic-bezier(.2, .8, .2, 1); }
.donut .center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut .center b { font-size: 28px; font-weight: 800; display: block; line-height: 1; }
.legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; }
.legend-item { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.legend-item .sw { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
.legend-item .lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.legend-item .val { font-weight: 700; font-variant-numeric: tabular-nums; }

.rating-summary { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.rating-avg { text-align: center; min-width: 110px; }
.rating-avg b { font-size: 50px; line-height: 1; display: block; font-weight: 800; letter-spacing: -0.03em; }
.rating-avg .stars-row { display: flex; gap: 2px; justify-content: center; color: #f5b301; margin: 6px 0 2px; }
.rating-dist { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.rating-dist .row { font-size: 13px; }
.rating-dist .row .k { width: 22px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.rating-dist .row .bar-track { flex: 1; height: 9px; }
.rating-dist .row .n { width: 36px; color: var(--muted); font-variant-numeric: tabular-nums; }

.rank-results { display: flex; flex-direction: column; gap: 8px; }
.rank-result { display: flex; gap: 12px; align-items: center; padding: 11px 13px; border-radius: var(--radius); background: var(--surface-2); }
.rank-result:first-child { background: color-mix(in srgb, var(--gold) 24%, var(--surface)); }
.rank-result .pos { font-weight: 800; font-size: 20px; width: 30px; text-align: center; color: var(--text-2); }
.rank-result .lbl { flex: 1; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.rank-result .meta { font-size: 12.5px; color: var(--muted); text-align: right; white-space: nowrap; }

.text-responses { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.text-response { padding: 11px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14.5px; }
.text-response .at { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Manage ---------- */
.manage-head { padding: 28px 0 0; display: flex; flex-direction: column; gap: 16px; }
.manage-head .titlerow { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.manage-head h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.manage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; padding: 20px 0 64px; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); position: sticky; top: 0; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; max-width: 320px; overflow-wrap: anywhere; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.dim td { color: var(--muted); text-decoration: line-through; }
.share-box { display: flex; gap: 8px; }
.share-box .input { font-size: 13px; }
.qr { width: 180px; height: 180px; padding: 10px; background: #fff; border-radius: 16px; margin: 0 auto; border: 1px solid var(--border); }
.qr img, .qr canvas { width: 100% !important; height: 100% !important; }
code.block { display: block; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-family: var(--font-mono); white-space: pre-wrap; word-break: break-all; }

/* ---------- Present (poll results on a projector) ---------- */
.present { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding: 48px clamp(20px, 5vw, 80px); align-items: start; }
.present h1 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.035em; }
.present .q-label { font-size: 16px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.present .results { margin-top: 40px; }
.present .bar-top { font-size: clamp(18px, 2vw, 26px); }
.present .bar-top .lbl .letter { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
.present .bar-track { height: 28px; }
.present .r-q-head { display: none; }
.present-side { position: sticky; top: 48px; display: flex; flex-direction: column; gap: 16px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 26px; box-shadow: var(--shadow-lg); }
.present-side .join { font-size: 15px; font-weight: 600; color: var(--muted); }
.present-side .url { font-size: 22px; font-weight: 800; word-break: break-all; }
.present-side .count b { font-size: 64px; font-weight: 800; display: block; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.present .qr { width: 240px; height: 240px; }

/* ---------- Draws: manage ---------- */
.draw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; padding-bottom: 64px; }
.prize-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; }
.control-panel {
  background: #1d1f3b; color: #fff; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 86px; box-shadow: var(--shadow-lg);
  --surface: #262947; --border: #383c63; --border-strong: #4a4e74; --text-2: #c5c7dc; --muted: #a8abc6;
}
.control-panel .kicker { color: var(--gold); }
.control-panel .select, .control-panel .input { background: #262947; color: #fff; border-color: #383c63; }
.control-panel h3 { font-size: 20px; }
.control-panel .btn:not(.primary) { background: transparent; color: #fff; border-color: #4a4e74; --lip: #0f1124; }
.control-panel .last { font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--gold); overflow-wrap: anywhere; letter-spacing: -0.02em; }

/* ---------- Draws: stage (projector) ----------
   Dark room, soft moving spotlights, everything centred on one name:
   a slot-machine reel rolls names + ID / phone, then the winner is spelled out. */
.stage {
  --s-bg: #0d0f22; --s-ink: #ffffff; --s-dim: #9496b3; --s-line: rgba(255,255,255,.09);
  position: fixed; inset: 0; background: radial-gradient(120% 80% at 50% 0%, #1b1e42 0%, var(--s-bg) 60%); color: var(--s-ink); display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; font-family: var(--font); isolation: isolate;
}
.stage-lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stage-lights i { position: absolute; top: -30%; width: 34vw; height: 140%; transform-origin: 50% 0; opacity: .16;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff) 0%, transparent 75%); filter: blur(28px); animation: sweep 11s ease-in-out infinite alternate; }
.stage-lights i:nth-child(1) { left: 6%; --from: -16deg; --to: 10deg; }
.stage-lights i:nth-child(2) { left: 33%; --from: 8deg; --to: -8deg; animation-duration: 14s; background: linear-gradient(180deg, #ffc21a 0%, transparent 70%); opacity: .1; }
.stage-lights i:nth-child(3) { right: 6%; --from: 16deg; --to: -10deg; animation-duration: 9s; background: linear-gradient(180deg, #2f6fe8 0%, transparent 75%); }
@keyframes sweep { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }
.stage-top { display: flex; align-items: center; gap: 24px; padding: 20px clamp(20px, 3vw, 48px); }
.stage-top h1 { font-size: clamp(20px, 2vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.stage-top .sub { color: var(--s-dim); font-size: 15px; margin-top: 4px; }
.stage-count { margin-left: auto; text-align: right; color: var(--s-dim); font-size: 14px; font-weight: 500; }
.stage-count b { display: block; color: var(--s-ink); font-size: clamp(26px, 2.6vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stage-main { display: grid; min-height: 0; overflow: hidden; }
.stage-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px clamp(16px, 4vw, 72px); min-width: 0; position: relative; }
.stage-prize { font-size: clamp(16px, 1.6vw, 24px); font-weight: 700; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--gold); }
.stage-prize .pill { display: inline-flex; gap: 10px; align-items: center; padding: 8px 20px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.stage-prize .left { color: var(--s-dim); font-weight: 500; }

/* The reel: five rows, the middle one framed and lit. */
.stage { --row: clamp(56px, 10.5vh, 128px); }
.stage-reel { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: calc(var(--row) * 5); width: min(1100px, 100%); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.reel-list { list-style: none; margin: 0; padding: 0; will-change: transform; }
.reel-list li { height: var(--row); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--s-dim); }
.reel-list li b { font-weight: 800; font-size: calc(var(--row) * .48); line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.reel-list li span { font-family: var(--font-mono); font-size: calc(var(--row) * .17); letter-spacing: .06em; opacity: .8; }
.reel-list li.in { color: var(--s-ink); }
.reel-frame { position: absolute; left: 0; right: 0; top: calc(var(--row) * 2); height: var(--row); border-top: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent); pointer-events: none; }
.stage-reel.stop .reel-list li.in { color: var(--gold); transform: scale(1.04); transition: transform .25s, color .25s; }

.stage-name {
  font-weight: 800; font-size: clamp(52px, 9vw, 168px); line-height: 1; letter-spacing: -0.04em; margin: 14px 0 12px;
  overflow-wrap: anywhere; min-height: 1.2em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 100%;
}
.stage-name.idle { color: rgba(255,255,255,.28); }
.stage-name.landed { color: var(--s-ink); text-shadow: 0 0 60px color-mix(in srgb, var(--accent) 55%, transparent); }
.stage-name .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotateX(80deg) scale(.7); filter: blur(8px);
  animation: letterIn .55s cubic-bezier(.2, 1.3, .35, 1) forwards; animation-delay: calc(var(--i) * var(--gap)); }
.stage-name .word { display: inline-flex; white-space: nowrap; }
.stage-name .sp { display: inline-block; width: .28em; }
@keyframes letterIn { 60% { opacity: 1; filter: blur(0); color: var(--gold); } 100% { opacity: 1; transform: none; filter: none; } }
.stage-detail { color: var(--s-dim); font-family: var(--font-mono); font-size: clamp(16px, 1.6vw, 26px); letter-spacing: .05em; min-height: 1.5em; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.stage-detail.on { opacity: 1; transform: none; }
.stage-underline { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--c1) 0 25%, var(--c2) 25% 50%, var(--gold) 50% 75%, var(--c4) 75%); width: 0; transition: width .7s cubic-bezier(.2, .8, .2, 1); margin-top: 14px; }
.stage-underline.on { width: min(420px, 50%); }
.stage-bulk { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 14vw, 230px), 1fr)); gap: 12px; margin-top: 22px; max-height: 46vh; overflow: hidden; align-content: start; text-align: left; }
.stage-tile { border-radius: 14px; background: rgba(255,255,255,.05); border: 1.5px solid var(--s-line); padding: 13px 15px; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .3s, transform .3s, border-color .3s; }
.stage-tile.on { opacity: 1; transform: none; border-color: var(--gold); }
.stage-tile b { display: block; font-weight: 800; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.1; overflow-wrap: anywhere; letter-spacing: -0.02em; }
.stage-tile span { font-size: 13px; color: var(--s-dim); font-family: var(--font-mono); }

/* Bottom rail: prizes, recent winners, QR to join */
.stage-rail { display: flex; gap: clamp(16px, 2.4vw, 40px); align-items: stretch; padding: 14px clamp(20px, 3vw, 48px) 18px; border-top: 1px solid var(--s-line); background: rgba(5,6,18,.45); backdrop-filter: blur(6px); }
.rail-block { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rail-block.grow { flex: 1; }
.stage-rail h4 { font-weight: 600; font-size: 12px; color: var(--s-dim); text-transform: uppercase; letter-spacing: .08em; }
.stage-join { display: flex; gap: 12px; align-items: center; padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--s-line); }
.stage-join .qr { width: 96px; height: 96px; padding: 6px; margin: 0; border: 0; border-radius: 12px; flex-shrink: 0; }
.stage-join b { display: block; font-size: 20px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.stage-join span { font-size: 12px; color: var(--s-dim); overflow-wrap: normal; word-break: normal; max-width: 200px; display: block; }
.stage canvas.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
@media (max-width: 760px) {
  .stage-top { padding: 14px 16px; }
  .stage-rail { flex-direction: column; gap: 10px; padding: 10px 16px; }
  .stage-rail h4 { display: none; }
  .stage-join { border-left: 0; padding-left: 0; }
  .stage-join .qr { width: 56px; height: 56px; padding: 4px; border-radius: 8px; }
  .stage-join b { font-size: 16px; }
  .stage { --row: min(54px, 8vh); }
  .stage-name { font-size: clamp(40px, 13vw, 72px); }
}

/* Attendee check-in page */
.join-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.join-band { background: #1d1f3b; color: #fff; padding: 40px 20px 76px; text-align: center; }
.join-band h1 { font-size: clamp(32px, 8vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; max-width: 520px; margin: 12px auto 0; }
.join-band .kicker { color: var(--gold); }
.join-card { max-width: 520px; width: calc(100% - 32px); margin: -46px auto 32px; }

/* ---------- Avatars (contest candidates) ---------- */
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; background: var(--surface-2); }
.avatar.initials { display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.xl { width: 96px; height: 96px; font-size: 32px; border: 4px solid var(--surface); box-shadow: var(--shadow); }
.avatar.fill { width: 100%; height: 100%; border-radius: 0; font-size: clamp(28px, 6vw, 56px); }

/* ---------- Contest voting page (guests) ---------- */
.vote-page { min-height: 100vh; background: var(--bg); padding-bottom: 110px; }
.vote-band { background: var(--accent); color: var(--on-accent); padding: 34px 18px 70px; text-align: center; }
.vote-band-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vote-band .kicker { color: inherit; opacity: .9; background: rgba(255,255,255,.18); padding: 4px 12px; border-radius: 999px; }
.vote-band h1 { font-size: clamp(28px, 7vw, 42px); font-weight: 800; letter-spacing: -0.035em; }
.vote-band p { opacity: .9; }
.vote-band.branded { padding-top: 28px; }
.vote-band .brand-logo { margin-bottom: 6px; max-width: 70%; }
.vote-band .brand-logo.large { height: 64px; } .vote-band .brand-logo.medium { height: 44px; } .vote-band .brand-logo.small { height: 30px; }
.vote-band h1 { font-family: inherit; }
.vote-main { max-width: 680px; margin: -46px auto 0; padding: 0 14px; position: relative; }
.vote-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px -18px rgba(20, 22, 50, .35); }
.vote-cat-head h2 { font-size: 22px; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.vote-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); z-index: 20; display: flex; justify-content: center; }
.vote-bar .btn { max-width: 640px; }
.cat-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 16px; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button { border: 0; background: none; padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--text-2); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.cat-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.cat-tabs .done { width: 18px; height: 18px; border-radius: 50%; background: var(--c4); color: #fff; display: grid; place-items: center; }
.phone-timer { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--border); margin: -4px 0 14px; font-weight: 600; font-size: 14px; color: var(--text-2); }
.phone-timer b { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.phone-timer.warn { border-color: var(--danger); color: var(--danger); animation: pulse-dot 1s ease-in-out infinite; }
.phone-timer.warn b { color: var(--danger); }
.phone-timer.paused b { color: var(--muted); }
.cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cand { position: relative; border: 2px solid var(--border); border-radius: 20px; background: var(--surface); padding: 8px 8px 12px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 3px 0 var(--border); transition: transform .08s, box-shadow .08s, border-color .12s; overflow: visible; }
.cand:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.cand:disabled { cursor: default; opacity: .85; }
.cand.on { border-color: var(--accent); box-shadow: 0 3px 0 var(--accent-lip), 0 0 0 4px var(--accent-soft); }
.cand-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: block; }
.cand-check { position: absolute; top: 8px; right: 8px; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.25); animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.cand-name { font-weight: 700; font-size: 15px; margin-top: 4px; line-height: 1.2; }
.cand-sub { font-size: 12.5px; color: var(--muted); }
@keyframes pop { from { transform: scale(.3); } }
.burst { position: absolute; left: 50%; top: 40%; pointer-events: none; z-index: 5; font-weight: 800; font-size: 22px; color: var(--on-accent); background: var(--accent); padding: 2px 12px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); animation: burst 1.1s ease-out forwards; }
@keyframes burst { from { transform: translate(-50%, 0) scale(.5); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -20px) scale(1.1); } to { transform: translate(-50%, -90px) scale(1); opacity: 0; } }
.id-card { max-width: 460px; margin: 0 auto; text-align: center; align-items: center; }
.id-card h2 { font-size: 24px; }
.id-card .input, .id-card .btn, .id-card form { width: 100%; }
.id-card form { display: flex; flex-direction: column; gap: 14px; align-items: stretch; text-align: left; }
.id-ico { width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.input.lg { height: 54px; font-size: 18px; text-align: center; }
.voted-card { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 30px; overflow: visible; }
.voted-card h2 { font-size: 28px; letter-spacing: -0.03em; }
.voted-photos { display: flex; gap: -10px; }
.voted-photos .avatar + .avatar { margin-left: -18px; }
.res-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 90px 34px; gap: 10px; align-items: center; font-size: 14px; }
.res-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.res-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.res-row b { text-align: right; font-variant-numeric: tabular-nums; }
.selfie { width: 100%; aspect-ratio: 4 / 5; max-width: 260px; margin: 0 auto; border: 2px dashed var(--border-strong); border-radius: 20px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); cursor: pointer; background: var(--surface-2); overflow: hidden; position: relative; font-weight: 600; }
.selfie.has { border-style: solid; padding: 0; }
.selfie img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.selfie .retake { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.selfie.sm { width: 92px; height: 112px; max-width: none; aspect-ratio: auto; margin: 0; font-size: 12px; }

/* ---------- Contest admin ---------- */
.id-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.id-grid .choice-card { align-items: center; }
.id-grid .choice-card > svg { color: var(--accent); flex-shrink: 0; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; max-height: 320px; overflow: auto; }
.codes span { font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; text-align: center; padding: 6px; border: 1px dashed var(--border-strong); border-radius: 8px; }

/* ---------- Contest stage (big screen) ---------- */
/* Branding (brand.js) sets --s-bg-paint, --s-ink, --s-card, --s-card-ink, --s-font. */
.cstage { --s-card: rgba(12, 14, 32, .72); --s-card-2: rgba(255,255,255,.08); --s-card-ink: var(--s-ink); background: var(--s-bg-paint, #12142a); font-family: var(--s-font, var(--font)); }
.cstage h1, .cstage h2, .cstage b, .cstage .stage-count b { font-family: var(--s-font, var(--font)); }
.cstage .stage-top { border-color: var(--s-line); }
.cs-row, .cs-card, .cs-place, .cs-mini, .cs-board-row, .cs-rest span { color: var(--s-card-ink); backdrop-filter: blur(6px); }
.cs-row .cs-who > span, .cs-cap span, .cs-rest em { color: color-mix(in srgb, var(--s-card-ink) 60%, transparent); }
.brand-logo { display: block; object-fit: contain; }
.brand-logo.small { height: 36px; } .brand-logo.medium { height: 56px; } .brand-logo.large { height: 84px; }
.cstage .stage-top.logo-center { justify-content: center; text-align: center; }
.cstage .stage-top.logo-center .cs-logo-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cstage .stage-top.logo-right .cs-logo-wrap { order: 3; }
.cstage .stage-top h1 { font-size: clamp(24px, 2.6vw, 42px); }
.cs-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; position: relative; }
.cs-main { min-height: 0; padding: 22px clamp(20px, 3.5vw, 64px); display: flex; flex-direction: column; justify-content: safe center; overflow: hidden; }
.cs-dim { color: var(--s-dim); }
.cs-title { font-size: 40px; font-weight: 800; }
.cs-race { display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); }
.cs-row { display: grid; grid-template-columns: 56px auto minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--s-card); border: 1.5px solid var(--s-line); border-radius: 22px; padding: 10px 22px 10px 14px; will-change: transform; }
.cs-row.lead { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,194,26,.18), var(--s-card) 60%); }
.cs-rank { font-size: clamp(22px, 2.2vw, 34px); font-weight: 800; text-align: center; color: var(--s-dim); }
.cs-row.lead .cs-rank { color: var(--gold); }
.cs-ava .avatar { width: clamp(52px, 5.6vw, 84px); height: clamp(52px, 5.6vw, 84px); border: 3px solid var(--s-line); }
.cs-row.lead .cs-ava .avatar { border-color: var(--gold); }
.cs-who b { font-size: clamp(20px, 2.1vw, 32px); font-weight: 800; letter-spacing: -0.02em; display: block; line-height: 1.15; }
.cs-who > span { font-size: 14px; color: var(--s-dim); }
.cs-track { height: 12px; border-radius: 999px; background: var(--s-card-2); margin-top: 8px; overflow: hidden; }
.cs-track i { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.cs-count { font-size: clamp(18px, 1.9vw, 28px); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-row.bump, .cs-card.bump { animation: bump .45s ease-out; }
@keyframes bump { 40% { transform: scale(1.03); } }
.cs-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 13vw, 220px), 1fr)); gap: 16px; align-content: center; }
.cs-wall.dense { grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 10vw, 160px), 1fr)); gap: 12px; }
.cs-card { background: var(--s-card); border: 2px solid var(--s-line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.cs-card.lead { border-color: var(--gold); }
.cs-card .cs-photo { aspect-ratio: 1; background: var(--s-card-2); overflow: hidden; }
.cs-cap { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-cap b { font-size: clamp(16px, 1.5vw, 22px); font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cap span { color: var(--s-dim); font-size: 14px; white-space: nowrap; }
.cs-card .cs-count { color: var(--gold); font-size: clamp(16px, 1.5vw, 22px); }
.cs-hidden-head { text-align: center; margin-bottom: 18px; }
.cs-hidden-head h2 { font-size: clamp(30px, 3.4vw, 56px); font-weight: 800; letter-spacing: -0.035em; }
.cs-hidden-head .kicker { color: var(--gold); font-size: 16px; }
.cs-hidden-head p { color: var(--s-dim); font-size: 18px; }
.cs-pop { position: absolute; font-size: clamp(22px, 2.2vw, 38px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; padding: .18em .5em; border-radius: 999px; background: var(--gold); color: #1d1f3b; box-shadow: 0 8px 22px -8px rgba(0,0,0,.6); pointer-events: none; z-index: 6; animation: floatup 1.5s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -260%) scale(.9); } }
.cs-reveal { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 340px); gap: 28px; align-items: center; height: 100%; }
.cs-reveal-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.cs-reveal-stage .kicker { color: var(--gold); font-size: clamp(18px, 2vw, 30px); font-weight: 700; }
.cs-big { font-size: clamp(60px, 9vw, 160px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.cs-count-down { font-size: clamp(120px, 18vw, 300px); font-weight: 800; line-height: 1; color: #fff; }
.cs-count-down.tick { animation: tick .9s ease-out; }
@keyframes tick { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.9); opacity: .2; } }
.cs-place { background: var(--s-card); border: 2px solid var(--s-line); border-radius: 26px; overflow: hidden; width: clamp(200px, 22vw, 340px); position: relative; }
.cs-place.big { width: clamp(240px, 24vw, 380px); }
.cs-place.big .cs-photo { aspect-ratio: 1; }
.cs-place.first { border-color: var(--gold); box-shadow: 0 0 0 6px rgba(255,194,26,.18), 0 30px 80px -10px rgba(255,194,26,.35); }
.cs-place .cs-photo { aspect-ratio: 4 / 5; background: var(--s-card-2); }
.cs-place .cs-cap { flex-direction: column; align-items: center; text-align: center; padding: 14px 16px 18px; }
.cs-place .cs-cap b { font-size: clamp(22px, 2.4vw, 40px); white-space: normal; }
.cs-place .cs-cap span { white-space: normal; font-size: clamp(14px, 1.2vw, 18px); }
.cs-medal { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(18,20,42,.85); border-radius: 999px; padding: 4px 12px; font-size: clamp(18px, 1.8vw, 28px); font-weight: 800; }
.cs-place.pop { animation: reveal .8s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes reveal { from { transform: rotateY(90deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.cs-reveal-list { display: flex; flex-direction: column; gap: 8px; }
.cs-reveal-list .kicker { color: var(--s-dim); margin-bottom: 4px; }
.cs-mini { display: grid; grid-template-columns: 40px 32px minmax(0, 1fr); gap: 10px; align-items: center; background: var(--s-card); border-radius: 14px; padding: 8px 12px; font-size: 16px; }
.cs-mini > span:first-child { font-weight: 800; color: var(--gold); }
.cs-mini b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-mini.ghost { opacity: .35; }
.cs-mini .initials { background: var(--s-card-2); color: var(--s-dim); }
.stage.spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(circle at 38% 52%, transparent 0 22%, rgba(5, 6, 16, .78) 40%); animation: spotin 1s ease-out; }
@keyframes spotin { from { opacity: 0; } }
.cs-podium-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cs-podium-wrap .kicker { color: var(--gold); font-size: 20px; }
.cs-podium { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2vw, 32px); }
.cs-podium-col { display: flex; flex-direction: column; align-items: center; }
.cs-podium-col .cs-place { width: clamp(160px, 15vw, 240px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cs-podium-col .cs-photo { aspect-ratio: 1; }
.cs-podium-col.p1 .cs-place { width: clamp(190px, 18vw, 290px); border-color: var(--gold); }
.cs-step { width: 100%; display: grid; place-items: center; font-size: clamp(26px, 2.6vw, 44px); line-height: 1; font-weight: 800; color: #12142a; border-radius: 0 0 18px 18px; }
.p1 .cs-step { height: clamp(72px, 10vh, 120px); background: var(--gold); }
.p2 .cs-step { height: clamp(54px, 7vh, 88px); background: #c5c7dc; }
.p3 .cs-step { height: clamp(42px, 5vh, 64px); background: #d9a066; }
.cs-rest { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cs-rest span { background: var(--s-card); border-radius: 999px; padding: 6px 14px; font-weight: 600; }
.cs-rest em { font-style: normal; color: var(--s-dim); margin-left: 8px; }
.cs-board { display: flex; flex-direction: column; gap: 10px; max-width: 1000px; width: 100%; margin: 0 auto; }
.cs-board .kicker { color: var(--gold); font-size: 18px; margin-bottom: 6px; }
.cs-board-row { display: grid; grid-template-columns: 60px 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; background: var(--s-card); border-radius: 18px; padding: 10px 20px; font-size: clamp(18px, 1.8vw, 26px); }
.cs-board-row.first { border: 2px solid var(--gold); }
.cs-board-row .avatar { width: 52px; height: 52px; }
.cs-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto; font-variant-numeric: tabular-nums; }
.cs-timer.compact:not(.hidden) + .stage-count { margin-left: 32px; }
.cs-timer.large + .stage-count, .cs-timer.hidden + .stage-count { margin-left: auto; }
.cs-timer-label { font-size: 13px; font-weight: 600; color: var(--s-dim); text-transform: uppercase; letter-spacing: .08em; }
.cs-timer b { font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cs-timer.large { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: var(--s-card); border: 2px solid var(--s-line); border-radius: 24px; padding: 8px 28px 10px; z-index: 5; margin: 0; }
.cs-timer.large b { font-size: clamp(44px, 5vw, 84px); }
.cs-timer.compact b { font-size: clamp(26px, 2.6vw, 40px); }
.cs-timer.warn { border-color: #ff5a4a; color: #ff6b5b; animation: warnpulse 1s ease-in-out infinite; }
.cs-timer.warn .cs-timer-label { color: #ff8b7e; }
.cs-timer.paused b { color: var(--s-dim); }
.cs-timer.up { border-color: var(--gold); }
.cs-timer.up .cs-timer-label { color: var(--gold); font-size: clamp(18px, 2vw, 30px); font-weight: 800; letter-spacing: 0; text-transform: none; }
@keyframes warnpulse { 50% { transform: translateX(-50%) scale(1.06); } }
.cs-timer.compact.warn { animation: warnpulse-c 1s ease-in-out infinite; }
@keyframes warnpulse-c { 50% { transform: scale(1.06); } }
.stage-top { position: relative; }
/* Motion levels chosen by the organiser */
.stage[data-motion="none"] .cs-track i, .stage[data-motion="none"] .cs-row, .stage[data-motion="none"] .cs-card { transition: none !important; animation: none !important; }
.stage[data-motion="calm"] .cs-row, .stage[data-motion="calm"] .cs-card { animation: none !important; }

.cs-sound { position: absolute; top: 90px; right: 24px; z-index: 8; background: var(--gold); color: #1d1f3b; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

/* ---------- Admin console ---------- */
.module { display: flex; gap: 16px; align-items: center; padding: 15px 18px; border-top: 1px solid var(--border); }
.module .s-text { flex: 1; min-width: 0; }
.module .t { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.module .d { font-size: 13.5px; color: var(--muted); }
.module code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
.matrix th, .matrix td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.matrix input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--c4); cursor: pointer; }
.matrix .input { padding: 6px 9px; font-size: 14px; text-align: right; }

/* ---------- Loading ---------- */
.loading { display: grid; place-items: center; min-height: 60vh; color: var(--muted); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.skeleton { background: var(--surface-2); border-radius: 10px; animation: pulse-bg 1.2s ease-in-out infinite; }
@keyframes pulse-bg { 50% { background: var(--surface-3); } }

.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Print (reports → PDF) ---------- */
@media print {
  .topbar, .footer, .no-print, #toasts { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .list, .stats, .stat { break-inside: avoid; box-shadow: none; }
  .container { max-width: none; padding: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .dash-grid, .draw-grid { grid-template-columns: minmax(0, 1fr); }
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder .preview-col { position: static; }
  .preview-body { max-height: none; }
  .manage-grid { grid-template-columns: minmax(0, 1fr); }
  .present { grid-template-columns: minmax(0, 1fr); }
  .present-side, .control-panel { position: static; }
  .cs-body { grid-template-columns: minmax(0, 1fr); }
  .cs-reveal { grid-template-columns: minmax(0, 1fr); }
  .cs-reveal-list { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .container { padding: 0 16px; }
  .topbar .container { gap: 8px; height: 58px; }
  .brand { font-size: 19px; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .nav a.navlink, .nav button.navlink { padding: 8px 8px; white-space: nowrap; }
  .page-head > .grow { flex-basis: 100%; }
  .poll-wrap { padding: 16px 12px; }
  .poll-head { padding: 22px 18px 6px; }
  .poll-body { padding: 14px 18px 22px; }
  .poll-foot { padding: 14px 18px; }
  .card-pad { padding: 18px; }
  .font-cards { grid-template-columns: repeat(2, 1fr); }
  .opt-extra { padding-left: 0; }
  .hero { padding: 32px 0 40px; }
  .phone, .screen { position: static; }
  .phone { width: min(270px, 100%); }
  .screen { display: none; }
  .rating.numbers button { min-width: 40px; height: 42px; }
  .prize-row { grid-template-columns: 26px minmax(0, 1fr) 70px auto; }
  .cand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cs-row { grid-template-columns: 40px auto minmax(0, 1fr) auto; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Questionnaire extras: sections, pages, NPS, numbers ---------- */
.q-section { padding: 6px 0 2px; border-bottom: 2px solid var(--accent-line); }
.q-section h2 { font-size: 22px; letter-spacing: -0.02em; }
.q-section p { color: var(--text-2); margin-top: 4px; font-size: 14.5px; }
.r-section { margin-top: 6px; }
.q-progress { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.q-progress-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.q-progress-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.q-nav { display: flex; gap: 10px; }
.q-nav .btn.block { flex: 1; }
.nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; }
.nps button { height: 44px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 2px 0 var(--border); }
.nps button.on.nps-low { background: var(--danger); border-color: var(--danger); color: #fff; }
.nps button.on.nps-mid { background: #bf8400; border-color: #bf8400; color: #fff; }
.nps button.on.nps-high { background: var(--success); border-color: var(--success); color: #fff; }
.nps-summary { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.nps-split { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.nps-split > div { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.nps-split .sw { width: 12px; height: 12px; border-radius: 4px; }
.nps-dist { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; height: 110px; align-items: end; }
.nps-dist > div { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; font-size: 12px; color: var(--muted); }
.nps-dist i { display: block; width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; }
.num-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .num-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.num-stats > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; }
.num-stats b { font-size: 22px; font-weight: 800; }
@media (max-width: 600px) {
  .nps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .num-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cat-row > .stack { min-width: 0; }
.cat-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cat-desc { color: var(--text-2); margin: -6px 2px 14px; font-size: 14.5px; }

/* ---------- Screen design panel ---------- */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.design-preview { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); container-type: inline-size; }
.preset-row { display: flex; gap: 10px; flex-wrap: wrap; }
.preset { display: flex; flex-direction: column; gap: 6px; align-items: center; background: none; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 0; }
.swatch-big { width: 72px; height: 44px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: flex-end; padding: 6px; }
.swatch-big i { width: 14px; height: 14px; border-radius: 50%; }
.preset:hover .swatch-big { outline: 2px solid var(--text); outline-offset: 2px; }
.color-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.color-field input[type=color] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.check-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }

/* ---------- Minimal dashboard ---------- */
.section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }

/* ---------- Landing: motion ---------- */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.12); } }

.hero h1 .hl::after { transform-origin: left; animation: sweep .8s .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sweep { from { transform: scaleX(0); } }

@keyframes tap { to { transform: scale(9); opacity: 0; } }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.template.reveal.in:hover { transform: translateY(-3px); transition-delay: 0ms; }

/* Occasions strip */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Big-screen showcase */
.stage-show { padding: 88px 0 40px; }
.stage-show .head, .how .head { text-align: center; max-width: 660px; margin: 0 auto 32px; }
.stage-show h2, .how h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; margin: 8px 0 12px; }
.stage-show .head p { color: var(--text-2); font-size: 17px; }
.ls-frame { max-width: 1040px; margin: 0 auto; }
.ls-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.ls-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 8px; padding: 9px 18px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.ls-tab.on { color: var(--text); border-color: var(--text); }
.ls-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.ls-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.ls-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; color: #fff; display: grid; grid-template-rows: auto 1fr;
  background: radial-gradient(120% 80% at 80% 0%, #2a2f6b 0%, transparent 60%), radial-gradient(80% 60% at 0% 100%, #4a1d3f 0%, transparent 60%), #12142a;
  box-shadow: 0 30px 80px -30px rgba(18, 20, 42, .55); border: 10px solid #1d1f3b; }
@keyframes emoji { from { opacity: 0; transform: translateY(-50%) scale(.4); } 25% { opacity: 1; transform: translateY(-80%) scale(1.15); } to { opacity: 0; transform: translateY(-260%) scale(.9); } }
/* Quiz, Q&A, photo wall, bingo, leaderboard and agenda scenes (same screen, same style). */
.lb { flex-direction: row; align-items: center; gap: 22px; }
@media (max-width: 760px) {
  .lb { flex-direction: column; align-items: stretch; }
}
.l-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.l-confetti i { position: absolute; top: 45%; width: 9px; height: 14px; border-radius: 2px; animation: lconf 1.6s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes lconf { from { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 160px)) rotate(var(--r)); opacity: 0; } }

/* How it works */
.how { padding: 72px 0 24px; }

/* Closing band */
@keyframes shift { to { background-position: 100% 50%; } }

@media (max-width: 760px) {
  .ls-screen { aspect-ratio: auto; min-height: 440px; border-width: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Environment badge (dev / uat / local) */
.env-badge { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; margin-left: 10px; color: #fff; background: #6b7a2a; }
.env-badge.env-uat { background: #bf8400; }
.env-badge.env-dev { background: #2f6fe8; }
.env-badge.env-local { background: #777a92; }

/* ---------- Responsive fixes (from the device test suite) ---------- */
/* Touch-friendly links: footer, back links and small text links get a real tap area. */
.footer-col a { display: inline-block; padding: 3px 0; }
.footer-bottom span { line-height: 1.8; }
a.small:not(.btn), .page-head a:not(.btn) { display: inline-block; padding-block: 3px; }
.list-row a.t { padding-block: 2px; }
button.link { padding-block: 4px; min-height: 28px; }
@media (max-width: 420px) {
  .topbar .container { gap: 6px; padding: 0 12px; }
  .brand { font-size: 18px; }
  .nav { gap: 4px; }
  .nav a.navlink, .nav button.navlink { padding: 8px 7px; }
  .env-badge { margin-left: 4px; padding: 2px 5px; }
}
@media (max-width: 600px) {
  .section-title { white-space: normal; }
  .page-head h1 { overflow-wrap: anywhere; }
  /* Lucky-draw prizes: name on its own line, quantity + actions below. */
  .prize-row { grid-template-columns: 30px minmax(0, 1fr) 70px; grid-auto-rows: auto; }
  .prize-row > :last-child { grid-column: 2 / -1; justify-self: end; }
  /* Contest categories stack their fields. */
}
/* Grid and flex children may shrink; long links and names wrap instead of widening the page. */
.draw-grid > *, .dash-grid > *, .manage-grid > *, .builder > * { min-width: 0; }
.mono, .tiny.mono { overflow-wrap: anywhere; }
.demo-creds button { min-height: 32px; padding: 6px 0; text-align: left; display: block; box-sizing: border-box; }
/* Headings keep their natural width; the controls beside them wrap instead. */
.row > h1.grow, .row > h2.grow, .row > h3.grow { flex: 1 0 auto; max-width: 100%; }
.builder-head > .grow, .page-head > .grow { min-width: min(100%, 220px); }
@media (max-width: 600px) {
  /* Stat tiles two per row instead of one tall column. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px; }
  .stat .v { font-size: 26px; }
  /* Contestant photo picker */
  .selfie { max-width: 180px; }
}
/* Inline validation */
.field-error { color: var(--danger); font-size: 13px; font-weight: 500; min-height: 0; }
.field-error:empty { display: none; }
.field-hint { color: var(--muted); font-size: 12.5px; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 6px 8px; min-height: 30px; cursor: pointer; border-radius: 6px; }
.pw-toggle:hover { background: var(--surface-2); }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.strength i { height: 4px; border-radius: 2px; background: var(--surface-3, #e3dfd5); }
.strength[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.strength[data-score="2"] i:nth-child(-n+2) { background: var(--warning); }
.strength[data-score="3"] i:nth-child(-n+3) { background: var(--c4); }
.strength[data-score="4"] i { background: var(--c4); }
.strength-label { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.email-suggest { font-size: 13px; color: var(--text-2); }
.email-suggest button { border: 0; background: none; color: var(--accent-text); font-weight: 600; cursor: pointer; padding: 2px 0; text-decoration: underline; }

/* Testimonials */
.sample-tag { position: absolute; top: 14px; right: 14px; }
/* Test sites only: room for the label above a review card's stars and event line. */
.lp-quote:has(.sample-tag) { padding-top: 40px; }
@media (max-width: 900px) {
  /* Swipe through the cards on phones and tablets. */
}

/* Event pass panel (event page) and the event note on each activity */
.pass-panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin: 18px 0 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.pass-panel.has { border-style: solid; border-color: color-mix(in srgb, var(--c4) 45%, var(--border)); background: color-mix(in srgb, var(--c4) 6%, var(--surface)); }
.pass-panel .ticket-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex-shrink: 0; }
.pass-panel.has .ticket-ico { background: color-mix(in srgb, var(--c4) 16%, var(--surface)); color: var(--c4); }
.pass-panel .t { font-weight: 700; }
.pass-panel .grow { min-width: 200px; }
/* Guest capacity used (counted once per guest, never given back after the start) and the dates lock. */
.pass-panel > .grow { flex: 1 1 320px; }
.pass-panel > .row.wrap { flex: 0 1 auto; justify-content: flex-end; margin-left: auto; }
.cap-line { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--text-2); }
.cap-line > .small { flex: 1 1 auto; min-width: 0; }
.cap-bar { flex: 0 0 120px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.cap-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c4); }
.cap-line.full .cap-bar > span { background: var(--danger); }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.ev-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; line-height: 1.35; }
.ev-chip svg { flex-shrink: 0; }
.ev-chip a { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0; padding: 0 4px; font-weight: 600; }
.ev-chip.warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); color: var(--text); }

/* Verok human check */
.verok-box { min-height: 64px; }
/* Verok in the site's colours: it follows light / dark and the brand red (or an event's own
   accent) instead of its built-in indigo. html raises the weight above Verok's own
   .vk-root[data-theme=dark]; "inherit" takes the site's value of a token with the same name. */
html .vk-root, html .vk-root[data-theme] {
  --bg: var(--surface-2); --fg: var(--text); --sub: var(--muted); --card: var(--surface);
  --line: var(--border); --cell: var(--surface-3); --accent: inherit; --accent2: var(--accent);
  --ok: var(--success); --danger: inherit; font-family: var(--font);
}
html .vk-root .vk-btn { color: var(--on-accent); }
/* The Verok label is a button: give it a comfortable touch target. */
.verok-box .vk-lbl { min-height: 32px; padding-block: 4px; }
@media (max-width: 600px) {
  /* Event activity rows: title on its own line, actions underneath. */
}

/* Pricing: worked example */
.example-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; display: grid; gap: 4px; }
.example-card h4 { font-size: 17px; }
.example-card .price b { font-size: 26px; }
.example-card .price span { color: var(--muted); font-size: 13px; margin-left: 6px; }

/* Lucky-draw list columns and import */
.columns-card summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.columns-card summary::-webkit-details-marker { display: none; }
.field-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.field-row.head span { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.grid-screen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.screen-preview { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: #12142a; color: #fff; }
.screen-preview b { font-size: 22px; letter-spacing: -0.02em; }
.screen-preview span:last-child { color: rgba(255,255,255,.7); font-size: 14px; min-height: 1.2em; }
.screen-preview .kicker { color: var(--gold); }
dialog.modal.wide { width: min(760px, calc(100vw - 32px)); }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.map-row .badge { margin-top: 4px; }
@media (max-width: 600px) {
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field-row > input { grid-column: 1 / -1; }
  .field-row.head { display: none; }
  .map-row { grid-template-columns: minmax(0, 1fr); }
  .map-row > svg { display: none; }
}

/* Purchase successful (return page from the payment provider) */
.purchase { padding-top: 48px; padding-bottom: 64px; }
.purchase-card { max-width: 560px; margin: 0 auto; padding: 36px 32px; display: grid; gap: 14px; justify-items: start; }
.purchase-card h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.15; margin: 0; }
.purchase-card p { margin: 0; }
.purchase-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; }
.purchase-mark.ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.purchase-mark.wait { background: var(--surface-2); color: var(--text-2); }
.purchase-mark.spin svg { animation: spin 1.2s linear infinite; }
.purchase-mark.fail { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.purchase-summary { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 6px; }
.purchase-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 14px; }
.purchase-row + .purchase-row { border-top: 1px solid var(--border); }
.purchase-row b { text-align: right; overflow-wrap: anywhere; }
.purchase-next { width: 100%; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 6px; display: grid; gap: 12px; justify-items: start; }
.purchase-next h2 { font-size: 18px; margin: 0; }
.purchase-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .purchase-card { padding: 28px 20px; } .purchase { padding-top: 24px; } }

/* Footer: language and currency */
.footer-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: inherit; opacity: .9; }
.footer-prefs .select.sm { width: auto; min-height: 36px; padding: 6px 30px 6px 10px; font-size: 13px; background-color: transparent; color: inherit; border-color: rgba(255, 255, 255, .25); }
.footer-prefs .select.sm option { color: #1d1f3b; }

/* Approximate price in the visitor's currency */
.approx { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); font-weight: 400; }

/* Top bar on phones: longer labels in some languages (e.g. "Magsimula nang libre",
   "Bảng điều khiển") wrap onto two short lines instead of pushing the page sideways. */
@media (max-width: 600px) {
  .topbar .brand { flex: none; }
  .nav { min-width: 0; flex-shrink: 1; }
  .nav a.navlink, .nav button.navlink { white-space: normal; line-height: 1.15; text-align: center; max-width: 34vw; overflow-wrap: anywhere; }
  .nav .btn.sm { white-space: normal; line-height: 1.15; text-align: center; max-width: 38vw; min-height: 36px; padding-block: 4px; }
}

/* =========================================================================
   Marketing pages (home, use cases, moments, reviews)
   Editorial rather than "app": serif headlines, real photographs, a few
   handwritten notes, uneven rhythm between sections.
   ========================================================================= */
:root { --font-serif: "Nunito", var(--lang-sans), system-ui, sans-serif; /* headings are friendly too (the name stays for the language overrides) */ --paper: #fbf8f2; }
/* Dark mode (the visitor's switch, or the device when on Auto): the marketing pages' paper follows. */
[data-theme-mode="dark"] { --paper: #14162a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme-mode="light"]) { --paper: #14162a; } }
.lp { background: var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme-mode="light"]) .lp { background: var(--bg); } }
.lp h1, .lp h2 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.02em; }
.lp .eyebrow { font-size: 14px; font-weight: 600; color: var(--accent-text); margin-bottom: 14px; }
/* Short notes (captions, "free with up to 10 guests"): the same easy-to-read font as the page, a little bolder. */
.hand { font-family: var(--font); font-weight: 600; font-size: 1em; line-height: 1.4; color: var(--text-2); }
.lp .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--gold); padding-bottom: 1px; text-decoration: none !important; }
.lp .more:hover { border-color: var(--accent); }
.btn.ghost-link { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border-strong); }
.btn.ghost-link:hover { text-decoration-color: var(--accent); background: transparent; }
.lp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 32px; }
.lp-head h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.04; max-width: 820px; }
.lp-head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; max-width: 720px; }
.lp-head p { color: var(--text-2); font-size: 17.5px; max-width: 620px; margin-top: 12px; flex-basis: 100%; }
.lp-head > div > p { flex-basis: auto; }
.lp-head.center { flex-direction: column; align-items: center; text-align: center; }
.lp-head.center p { flex-basis: auto; }

/* Hero */
.lp-hero { padding: 56px 0 72px; border-bottom: 1px solid var(--border); }
.lp-hero-grid, .uc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.lp-hero h1, .uc-hero h1 { font-size: clamp(44px, 5.6vw, 78px); line-height: .98; letter-spacing: -0.035em; margin: 0 0 22px; }
.uc-hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; }
.lp-hero h1 .mark { position: relative; display: inline-block; max-width: 100%; font-style: italic; color: var(--accent); }
/* The headline never runs off the edge: lines balance instead of cutting a word off. */
.lp-hero h1 { text-wrap: balance; overflow-wrap: break-word; }
/* Chinese, Japanese and Korean have no spaces to break at: on phones a size where each headline line fits whole. */
@media (max-width: 600px) { :lang(zh) .lp-hero h1, :lang(ja) .lp-hero h1, :lang(ko) .lp-hero h1 { font-size: min(40px, 9.6vw); line-height: 1.12; } }
.scribble { position: absolute; left: -2%; width: 104%; bottom: -.12em; height: .3em; overflow: visible; }
.scribble path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 1.1s .4s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lp .lead { font-size: 19px; color: var(--text-2); max-width: 520px; margin-bottom: 28px; line-height: 1.6; }
.lp .cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lp-hero-note { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.lp-hero-note .hand { color: var(--accent-text); font-size: 16px; }
.lp-cta-note { margin-top: 12px; font-size: 15px; opacity: .85; }
.lp-hero-photo { position: relative; margin: 0; padding: 0 0 26px; }
.lp-hero-photo .frame { background: #fff; padding: 10px 10px 42px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 22px 44px -18px rgba(29,31,59,.35); transform: rotate(1.4deg); }
.lp-hero-photo .frame img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.lp-hero-photo figcaption { position: absolute; right: 26px; bottom: 34px; font-size: 16px; color: #4a4d68; transform: rotate(1.4deg); }

/* One evening */
.lp-evening { padding: 88px 0 64px; }

/* Voices */
.lp-voices { padding: 56px 0; }
.lp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
/* Small cards whatever their number: 3 across on desktop, 2 on tablets, 1 on phones (one review stays one card wide). */
@media (max-width: 1023px) { .lp-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lp-quotes { grid-template-columns: minmax(0, 1fr); } }
.lp-quote { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 24px 24px 20px; transform: rotate(var(--r, 0deg)); box-shadow: 0 10px 24px -18px rgba(29,31,59,.4); position: relative; }
.lp-quote blockquote, .review blockquote { margin: 10px 0 16px; font-family: var(--font-serif); font-size: 20px; line-height: 1.4; color: var(--text); }
.lp-quote figcaption, .review figcaption { display: flex; flex-direction: column; font-size: 14px; }
.lp-quote figcaption span, .review figcaption span { color: var(--muted); }
.lp-quote blockquote { font-size: 18px; }
.lp-quote-empty { grid-column: 1 / -1; border: 2px dashed var(--border-strong); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lp-quote-empty .hand { font-size: 20px; color: var(--accent-text); }
.stars { display: inline-flex; gap: 1px; font-size: 17px; letter-spacing: 1px; color: var(--border-strong); }
.stars i { font-style: normal; }
.stars i.on { color: #e6a700; }

/* FAQ */
.lp-faq { display: grid; gap: 0; border-top: 1px solid var(--border-strong); }
.lp-faq details { border-bottom: 1px solid var(--border-strong); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 2px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq .plus { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.lp-faq .plus::before, .lp-faq .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--text); transition: transform .2s; }
.lp-faq .plus::after { transform: rotate(90deg); }
.lp-faq details[open] .plus::after { transform: rotate(0); }
.lp-faq details p { padding: 0 2px 22px; color: var(--text-2); font-size: 16.5px; max-width: 640px; }

/* Final call to action over a photo */
.lp-final { position: relative; padding: 110px 0; color: #fff; background: #1d1f3b; overflow: hidden; text-align: center; }
.lp-final .container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lp-final h2 { font-family: var(--font-serif); font-size: clamp(32px, 4.6vw, 56px); max-width: 760px; line-height: 1.05; }
.lp-final p { color: rgba(255,255,255,.8); font-size: 18px; max-width: 520px; }
main:has(> .lp) + .footer, main:has(> .auth-wrap) + .footer { margin-top: 0; }

/* Use-case pages */
.uc-hero { padding: 56px 0 64px; border-bottom: 1px solid var(--border); }
.uc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
.uc-steps li { border-top: 3px solid var(--text); padding-top: 18px; }
.uc-steps .n { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--accent); font-style: italic; }
.uc-steps h3 { font-family: var(--font-serif); font-size: 23px; margin: 10px 0 8px; }
.uc-steps p { color: var(--text-2); }
.uc-points { list-style: none; margin: 40px 0 0; padding: 22px 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.uc-points li { display: flex; gap: 10px; align-items: flex-start; }
.uc-points svg { color: var(--c4); flex-shrink: 0; margin-top: 4px; }
.uc-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.uc-other { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px; color: var(--text); text-decoration: none !important; }
.uc-reads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uc-read { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-weight: 600; line-height: 1.35; }
.uc-read > svg:first-child { color: var(--accent); flex: none; }
.uc-read > svg:last-child { color: var(--muted); flex: none; }
.uc-read:hover { border-color: var(--accent); }
.uc-other img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.uc-other b { display: block; font-family: var(--font-serif); font-size: 20px; line-height: 1.15; margin: 2px 0 8px; }
.uc-other .eyebrow { margin: 0; font-size: 12.5px; }
.uc-other:hover { border-color: var(--border-strong); }

/* Reviews */
.reviews-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.review-list { display: grid; gap: 18px; }
.review { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 22px 24px; }
.review-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-summary { display: flex !important; align-items: center; gap: 10px; font-size: 16px !important; }
.review-summary b { font-size: 22px; color: var(--text); }
.empty-reviews { border: 2px dashed var(--border-strong); border-radius: 8px; padding: 32px; }
.empty-reviews .hand { font-size: 20px; color: var(--accent-text); margin-bottom: 8px; }
.review-form-box { position: sticky; top: 84px; }
.review-form { display: flex; flex-direction: column; gap: 16px; }
.review-form h2, .review-cta h2 { font-family: var(--font-serif); font-size: 26px; }
.review-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.star-input { display: flex; gap: 4px; }
.star-btn { all: unset; cursor: pointer; font-size: 32px; line-height: 1; color: var(--border-strong); transition: transform .1s, color .1s; }
.star-btn:hover { transform: scale(1.12); }
.star-btn.on { color: #e6a700; }
.star-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (min-width: 761px) and (max-width: 1023px) { .uc-other { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 980px) {
  .lp-hero-grid, .uc-hero-grid, .reviews-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-hero-photo { max-width: 620px; margin: 0 auto; width: 100%; }
  .review-form-box { position: static; }
}
@media (max-width: 760px) {
  .lp-hero, .uc-hero { padding: 32px 0 48px; }
  .lp .lead { font-size: 17px; }
  .lp-hero-photo figcaption { font-size: 15px; right: 18px; bottom: 34px; }
  .lp-evening { padding: 56px 0 32px; }
  .lp-head { margin-bottom: 22px; }
  .lp-head p { font-size: 16px; }
  .lp-quote { transform: none; }
  .lp-faq summary { font-size: 18px; padding: 16px 0; }
  .lp-final { padding: 72px 0; }
  .uc-steps, .uc-points, .uc-others, .review-grid { grid-template-columns: minmax(0, 1fr); }
  .uc-steps { gap: 24px; }
  .uc-other { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .scribble path { stroke-dashoffset: 0; animation: none; } }
/* Header on phones: brand, language, log in and sign up on one line. */
.nav > * { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) {
  .topbar .brand { min-width: 0; }
  .nav { gap: 6px; }
  /* The language button and "Start free" must not touch. */
  .nav > .btn { margin-left: 4px; }
  .prefs > summary { padding: 8px 6px; }
  .nav .btn.sm { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 400px) {
  .env-badge { font-size: 9px; padding: 2px 5px; }
  .brand { font-size: 17px; }
}
@media (max-width: 600px) {
  .footer-top { padding: 40px 16px 32px; }
  .footer-bottom { padding: 18px 16px 24px; }
}
/* Server-written page text (for crawlers); replaced as soon as the app starts. */
.ssr { padding-top: 32px; padding-bottom: 48px; max-width: 760px; }
.ssr nav { font-size: 14px; margin-bottom: 28px; color: var(--muted); }
.ssr h1 { font-family: var(--font-serif); font-size: 40px; margin: 8px 0 16px; }
.ssr h2 { font-size: 24px; margin: 28px 0 10px; }
.ssr h3 { font-size: 18px; margin: 16px 0 4px; }
.ssr p, .ssr li { color: var(--text-2); }
.ssr img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; }

/* ---------- Fonts per language ----------
   Chinese, Japanese and Korean: the system UI font of each platform first
   (PingFang / Hiragino / Apple SD Gothic on Apple, YaHei / Yu Gothic / Malgun on
   Windows), then Noto as the web font. Thai: Noto Sans Thai for text and Prompt
   for headings, as most Thai sites do. Vietnamese: Be Vietnam Pro, drawn for
   Vietnamese diacritics. Loaded on demand by i18n.js. */
html[lang="zh-Hans"] { --lang-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC"; --lang-serif: "Noto Serif SC", "Songti SC", "SimSun"; }
html[lang="ja"] { --lang-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP"; --lang-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho"; }
html[lang="ko"] { --lang-sans: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR"; --lang-serif: "Noto Serif KR", "AppleMyungjo"; }
html[lang="th"] { --lang-sans: "Noto Sans Thai", "Sukhumvit Set", "Leelawadee UI", "Tahoma"; --lang-serif: "Prompt"; }
html[lang="th"] { --font-serif: "Prompt", "Noto Sans Thai", sans-serif; }
html[lang="vi"] { --font: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
/* CJK and Thai: no tight tracking or fake italics, more room between lines. */
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"], [lang="th"]) :is(h1, h2, h3, h4, .brand, .stage-name, .price b) { letter-spacing: 0; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .lp-hero h1 .mark { font-style: normal; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .lp-hero h1, html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .uc-hero h1 { line-height: 1.2; }
html[lang="th"] body { line-height: 1.75; }
html[lang="th"] :is(h1, h2, h3) { line-height: 1.35; font-weight: 600; }
html[lang="th"] .lp-hero h1, html[lang="th"] .uc-hero h1 { line-height: 1.3; }
/* Headlines break between words (Korean keeps words whole; balanced lines everywhere). */
.lp :is(h1, h2, h3), .auth-side h2, .stage-name { text-wrap: balance; }
html[lang="ko"] :is(h1, h2, h3, p, li, summary) { word-break: keep-all; }
html:is([lang="ja"], [lang="zh-Hans"]) :is(h1, h2, h3) { line-break: strict; }

/* ---------- Device frames for product pictures ----------
   Big-screen views sit in a dark bezel (a screen or projector), guest pages in a phone. */
.dev { position: relative; }
.dev img { display: block; width: 100%; height: auto; }
.dev-screen { background: #0b0c1a; padding: 2.2% 2.2% 3.2%; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 26px 50px -24px rgba(29,31,59,.55); }
.dev-screen img { border-radius: 3px; }
.dev-phone { background: #15172b; padding: 7px; border-radius: 28px; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 24px 44px -20px rgba(29,31,59,.6); }
.dev-phone img { border-radius: 22px; aspect-ratio: 600 / 1100; object-fit: cover; object-position: top; }
.dev-pair { position: relative; padding: 0 0 8% 0; }
.dev-pair > .dev-screen { width: 88%; }
.dev-pair > .dev-phone { position: absolute; right: 0; bottom: 0; width: 25%; }
.lp-hero-photo .frame img { aspect-ratio: 1100 / 616; }
.lp-scope { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--text-2); margin: -12px 0 26px; max-width: 520px; }
.lp-scope svg { color: var(--c4); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 760px) {
  .lp-scope { margin-top: -8px; }
}

/* ---------- Lucky-draw controller (/d/:id/control) ----------
   The organiser's own console: light, calm and thumb-friendly, so it never
   looks like the projector screen it controls. */
.dc { min-height: 100vh; background: var(--bg); color: var(--text); }
.dc-head { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 32px); background: var(--surface); border-bottom: 1px solid var(--border); }
.dc-back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--text); border: 1px solid var(--border); }
.dc-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dc-title span { font-size: 12px; font-weight: 600; color: var(--accent-text); text-transform: uppercase; letter-spacing: .06em; }
.dc-title b { font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
.dc-qr { flex-basis: 100%; display: flex; justify-content: flex-end; }
.dc-qr[hidden] { display: none; }
.dc-qr canvas, .dc-qr img, .dc-qr svg { width: 160px; height: 160px; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--border); }
.dc-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 48px; }
.dc-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dc h2 { font-size: 15px; font-weight: 700; display: flex; gap: 6px; align-items: baseline; margin-bottom: 10px; }
.dc-status { scroll-margin-top: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-height: 132px; justify-content: center; }
.dc-status.rolling { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.dc-status.landed { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.dc-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dc-big { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dc-status.rolling .dc-big { animation: dcPulse 1s ease-in-out infinite; }
@keyframes dcPulse { 50% { opacity: .45; } }
.dc-sub { color: var(--text-2); font-size: 14.5px; }
.dc-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dc-names span { background: var(--surface-2); border-radius: 8px; padding: 3px 9px; font-weight: 600; font-size: 14px; }
.dc-redraw { align-self: flex-start; margin-top: 8px; }
.dc-draw { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; min-height: 96px; border-radius: 18px; background: var(--accent); color: var(--on-accent, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 5px 0 var(--accent-lip), 0 18px 30px -18px var(--accent); transition: transform .08s, box-shadow .08s; text-align: center; }
.dc-draw span { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.dc-draw small { font-size: 13.5px; opacity: .85; }
.dc-draw:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-lip); }
.dc-draw:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 3px; }
.dc-draw:disabled { opacity: .5; cursor: not-allowed; }
.dc-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.dc-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); overflow: hidden; }
.dc-stepper button { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; font-weight: 600; }
.dc-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.dc-stepper span { min-width: 74px; text-align: center; display: flex; flex-direction: column; line-height: 1.05; }
.dc-stepper b { font-size: 18px; }
.dc-stepper small { font-size: 11.5px; color: var(--muted); }
.dc-hint { font-size: 13px; color: var(--muted); margin-top: 10px; }
.dc-prize-list { display: grid; gap: 8px; }
.dc-prize { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); }
.dc-prize .n { font-weight: 600; }
.dc-prize .c { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-prize i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--done); background: var(--gold); }
.dc-prize.on { border-color: var(--accent); background: var(--accent-softer); }
.dc-prize.on .c { color: var(--accent-text); font-weight: 600; }
.dc-prize.done { opacity: .5; cursor: default; text-decoration: line-through; }
.dc-prize.ghost { border-style: dashed; }
.dc-prize:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.dc-winners { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.dc-winner-table .table-wrap { max-height: 70vh; overflow: auto; }
@media (max-width: 860px) {
  .dc-main { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
}
@media (max-width: 480px) {
  .dc-head-actions .hide-xs-text { display: none; }
  .dc-draw { min-height: 110px; }
}
/* Stage: the controller link appears only while the mouse moves. */

/* ---------- Word cloud (poll question type "words") ---------- */
.word-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.word-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; padding: 18px 8px; min-height: 160px; }
.word-cloud span { font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--tile); font-size: calc(15px + var(--s) * 34px); opacity: calc(.55 + var(--s) * .45); transform: rotate(var(--rot)); transition: font-size .6s cubic-bezier(.2, .8, .2, 1); }
.present .word-cloud span { font-size: calc(20px + var(--s) * 70px); }

/* ---------- "Pick your event" chooser ---------- */
.ek-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
/* "How it works" and "Watch how" side by side, on one line with room between them. */
.ek-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 8px; }
.ek-links .more { line-height: 1.3; padding-top: 6px; } /* tall enough to tap (24px+) */
.ek-links .more svg { flex: none; }
.ek-tab { all: unset; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--border-strong); font-weight: 600; font-size: 15px; color: var(--text-2); }
.ek-tab:hover { border-color: var(--text); color: var(--text); }
.ek-tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.ek-tab:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.ek-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.ek-lead { font-family: var(--font-serif); font-size: 23px; line-height: 1.35; margin-bottom: 20px; }
.ek-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ek-tools li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); }
.ek-tools li:last-child { border-bottom: 1px solid var(--border); }
.ek-n { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 3px; }
.ek-tools li:first-child .ek-n { color: var(--accent-text); }
.ek-tools b { font-size: 18px; display: block; margin-bottom: 4px; }
.ek-tools p { color: var(--text-2); margin-bottom: 8px; }
.ek-pic .dev-phone { width: 52%; margin: 0 auto; }
/* ---------- Tool list ---------- */
.lp-tools { padding: 48px 0 32px; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.tool-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--border); }
.tool-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--accent-text); }
.tool-list h3 { font-family: var(--font-serif); font-size: 22px; margin-bottom: 6px; }
.tool-list h3 a { color: inherit; }
.tool-list p { color: var(--text-2); }
/* Guest identity (Honor Pass): the tool list on a soft band, so it reads as its own topic. */
.lp-guests { padding: 64px 0 48px; margin-top: 32px; background: color-mix(in srgb, var(--accent) 5%, var(--bg)); border-block: 1px solid var(--border); scroll-margin-top: 70px; }
.lp-guests .tool-ico { background: var(--surface); }
.lp-guests-more { margin-top: 20px; }
.lp-final { background: #1d1f3b radial-gradient(80% 120% at 50% 0%, #2b2f63 0%, #1d1f3b 60%); }
@media (max-width: 860px) {
  .ek-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ek-pic { order: -1; }
  .tool-list { grid-template-columns: minmax(0, 1fr); }
  .ek-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .ek-tab { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .dc-head { gap: 8px; }
  .dc-title span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The draw's name gets two lines instead of being cut after a few letters. */
  .dc-title b { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dc-head-actions { gap: 4px; }
  .dc-head-actions .btn.sm { height: 34px; padding: 0 9px; }
}

/* ---------- Lucky-draw stage: the organiser's layout ----------
   Header (logo + title left / centre / right, entry count opposite), the prize
   label centred, then the big draw box with prize pictures beside it. */
.stage-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.stage-brand { display: flex; align-items: center; gap: 16px; min-width: 0; grid-row: 1; grid-column: 1; }
.stage-brand h1 { overflow-wrap: anywhere; }
.stage-top[data-align="center"] .stage-brand { grid-column: 2; flex-direction: column; text-align: center; gap: 8px; max-width: 60vw; }
.stage-top[data-align="right"] .stage-brand { grid-column: 3; justify-self: end; flex-direction: row-reverse; text-align: right; }
.stage-top .stage-count { grid-row: 1; grid-column: 3; justify-self: end; margin-left: 0; }
.stage-top[data-align="right"] .stage-count { grid-column: 1; justify-self: start; text-align: left; }
.stage-logo { height: clamp(36px, 6vh, 72px); width: auto; max-width: 260px; object-fit: contain; }
.stage-top[data-align="center"] .stage-logo { height: clamp(40px, 7vh, 84px); }

.stage-center { gap: clamp(12px, 2vh, 24px); justify-content: center; padding: 8px clamp(16px, 3vw, 56px) 18px; }
.stage-arena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.5vw, 48px); width: 100%; max-width: 1760px; min-height: 0; }
.stage-arena[data-layout="wide"] { grid-template-columns: minmax(0, .25fr) minmax(0, 3fr) minmax(0, .25fr); }
.stage-arena .stage-pic.left { grid-column: 1; grid-row: 1; }
.stage-arena .stage-box { grid-column: 2; grid-row: 1; }
.stage-arena .stage-pic.right { grid-column: 3; grid-row: 1; }
.stage-pic { display: grid; place-items: center; min-width: 0; }
.stage-pic.hidden { display: grid; visibility: hidden; }
.stage-pic img { max-width: 100%; max-height: 62vh; width: auto; height: auto; object-fit: contain; border-radius: 20px; background: rgba(255,255,255,.04);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 70%, #000), 0 0 0 1px rgba(255,255,255,.08); animation: prizeIn .7s cubic-bezier(.2, 1.2, .3, 1); }
@keyframes prizeIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

/* The big box everything is revealed in */
.stage-box { --ns: 1; position: relative; min-width: 0; width: 100%; min-height: clamp(260px, 60vh, 760px); border-radius: clamp(18px, 2vw, 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 3vh, 36px) clamp(16px, 2.4vw, 40px); container-type: inline-size; overflow: hidden; isolation: isolate; }
.stage-box[data-box="glass"] { background: linear-gradient(180deg, color-mix(in srgb, var(--box-color, #fff) 14%, transparent), color-mix(in srgb, var(--box-color, #fff) 5%, transparent)); border: 1.5px solid rgba(255,255,255,.16); backdrop-filter: blur(12px);
  box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--accent) 70%, #000), inset 0 1px 0 rgba(255,255,255,.18); }
.stage-box[data-box="solid"] { background: var(--box-color, color-mix(in srgb, var(--accent) 24%, #090a1a)); border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 40px 90px -40px #000; }
.stage-box[data-box="outline"] { border: 3px solid var(--box-color, color-mix(in srgb, var(--gold) 75%, transparent)); box-shadow: 0 0 40px -10px color-mix(in srgb, var(--gold) 50%, transparent), inset 0 0 40px -10px color-mix(in srgb, var(--gold) 40%, transparent); }
.stage[data-size="m"] .stage-box { --ns: .8; } .stage[data-size="xl"] .stage-box { --ns: 1.25; }
.stage-box.compact { min-height: 0; justify-content: flex-start; }
.stage-display { width: 100%; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage-box .stage-name { font-size: calc(min(10cqi, 17vh) * var(--ns)); margin: 0; line-height: 1.05; text-align: center; }
.stage-box.compact .stage-name { font-size: calc(min(6cqi, 8vh) * var(--ns)); }
.stage-box .stage-detail { margin-top: 10px; }
.stage-box .stage-underline { margin-top: 12px; }
.stage-box .stage-bulk { max-height: 38vh; margin-top: 14px; }
.stage-name.pop { animation: namePop .6s cubic-bezier(.2, 1.4, .3, 1); }
@keyframes namePop { from { transform: scale(.7); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }

/* 1 · Roll & spell (reel) */
.stage-box .stage-reel { --row: min(9.5vh, 118px); position: relative; left: auto; top: auto; transform: none; width: 100%; }
.stage-box .reel-list li b { font-size: min(calc(var(--row) * .5), 8cqi); }
/* 2 · Flash */
.flash-detail { color: var(--s-dim); font-family: var(--font-mono); font-size: clamp(14px, 1.5vw, 24px); min-height: 1.4em; margin-top: 8px; }
/* 3 · Number matrix */
.mx-wall { position: absolute; inset: 0; z-index: -1; margin: 0; white-space: pre; overflow: hidden; text-align: center; font-family: var(--font-mono); font-size: clamp(12px, 1.3vw, 20px); line-height: 1.45;
  color: color-mix(in srgb, var(--accent) 70%, #fff); opacity: .16; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.mx-row { position: relative; --cell: min(calc(86cqi / var(--n, 10)), 12vh); display: flex; gap: calc(var(--cell) * .12); justify-content: center; }
.mx-cell { width: var(--cell); height: calc(var(--cell) * 1.3); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 800; font-size: calc(var(--cell) * .72); border-radius: calc(var(--cell) * .16);
  background: rgba(0,0,0,.4); border: 1.5px solid var(--s-line); color: var(--s-dim); }
.mx-cell.gap { width: calc(var(--cell) * .35); background: none; border: 0; }
.mx-cell.lock { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 70%, transparent); box-shadow: 0 0 24px -4px color-mix(in srgb, var(--gold) 60%, transparent); animation: namePop .35s ease-out; }
/* 4 · Hidden stars */
.stage-name .st { display: inline-block; min-width: .5em; color: var(--gold); animation: twinkle .8s ease-in-out infinite alternate; }
.stage-name .st:nth-child(2n) { animation-delay: .3s; }
.stage-name .st.on { color: var(--s-ink); animation: flipIn .5s cubic-bezier(.2, 1.3, .35, 1); }
@keyframes twinkle { from { opacity: .45; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }
@keyframes flipIn { from { transform: rotateX(90deg); color: var(--gold); } to { transform: none; } }
/* 5 · Spotlight */
.sp-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(8px, 1.4cqi, 18px); width: 100%; }
.sp-card { padding: clamp(10px, 2.2cqi, 24px) 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1.5px solid var(--s-line); font-weight: 700; font-size: clamp(15px, 3.2cqi, 40px);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, border-color .12s, transform .12s, opacity .4s; }
.sp-card.on { background: color-mix(in srgb, var(--gold) 22%, transparent); border-color: var(--gold); color: #fff; transform: scale(1.05); box-shadow: 0 0 40px -6px color-mix(in srgb, var(--gold) 70%, transparent); }
.sp-card.won { white-space: normal; }
.sp-card.dim { opacity: .2; }
/* 6 · Split-flap */
.stage-box .stage-name.flapped { font-size: calc(min(8.5cqi, 13vh) * var(--ns)); font-family: var(--font-mono); letter-spacing: 0; gap: .1em 0; }
.stage-name .fl { display: inline-block; min-width: .7em; margin: 0 .03em; padding: .04em .02em; text-align: center; border-radius: .1em; color: #fff;
  background: linear-gradient(#3a3f78 0 49%, #05060f 49% 51%, #2c3066 51%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 .06em .14em rgba(0,0,0,.55); line-height: 1.15; }
.stage-name .fl.flip { animation: flapFlip .08s linear; }
.stage-name .fl.lock { color: var(--gold); }
@keyframes flapFlip { 50% { transform: scaleY(.15); } }
/* 7 · Decode */
.stage-name.decoding .dz { font-family: var(--font-mono); color: color-mix(in srgb, var(--accent) 60%, #fff); opacity: .75; }
/* 8 · Typewriter */
.stage-name.typing { font-family: var(--font-mono); letter-spacing: -0.02em; }
.stage-name .caret { display: inline-block; width: .08em; height: .9em; margin-left: .08em; background: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* 9 · Countdown */
.cd-num { font-size: min(32cqi, 30vh); font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 0 60px color-mix(in srgb, var(--gold) 60%, transparent); animation: cdPop var(--per, 1s) ease-out forwards; }
@keyframes cdPop { 0% { transform: scale(1.8); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
.stage-box.flashed::after { content: ""; position: absolute; inset: 0; background: #fff; animation: boxFlash .7s ease-out forwards; pointer-events: none; }
@keyframes boxFlash { from { opacity: .7; } to { opacity: 0; } }
/* 10 · Name rain */
.rain { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; transition: opacity .6s; }
.rain.fade { opacity: .18; }
.rain .drop { position: absolute; top: -12%; font-weight: 700; font-size: calc(clamp(16px, 2.2cqi, 30px) * var(--sz, 1)); color: var(--s-dim); white-space: nowrap; animation: fall var(--dur, 2s) linear forwards; }
@keyframes fall { to { top: 110%; } }
.stage-name.dropped { position: relative; animation: drop .8s cubic-bezier(.3, 1.45, .5, 1); }
@keyframes drop { from { transform: translateY(-60vh); } }

.stage-preview-tag { position: absolute; top: 12px; right: 14px; z-index: 6; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255, 194, 26, .85); color: #1d1f3b; opacity: .8; pointer-events: none; }
.stage.no-count .stage-count { display: none; }
.stage.plain-bg .stage-lights { opacity: .45; }
@media (max-width: 760px), (orientation: portrait) {
  .stage-top { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .stage-top[data-align] .stage-brand { grid-column: 1; flex-direction: row; text-align: left; justify-self: start; max-width: none; }
  .stage-top[data-align] .stage-count { grid-column: 2; justify-self: end; text-align: right; }
  .stage-arena, .stage-arena[data-layout] { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stage-arena .stage-pic.left { grid-column: 1; grid-row: 1; } .stage-arena .stage-pic.right { grid-column: 2; grid-row: 1; }
  .stage-arena .stage-box { grid-column: 1 / -1; grid-row: 2; min-height: 34vh; }
  .stage-arena[data-pics="l"] .stage-pic.left, .stage-arena[data-pics="r"] .stage-pic.right { grid-column: 1 / -1; }
  .stage-arena[data-pics="l"] .stage-pic.right, .stage-arena[data-pics="r"] .stage-pic.left, .stage-arena[data-pics=""] .stage-pic { display: none; }
  .stage-pic img { max-height: 18vh; }
  .stage-box .stage-reel { --row: min(54px, 7vh); }
  .stage-box .stage-name { font-size: calc(min(11cqi, 9vh) * var(--ns)); }
}

/* Draw page: picture per prize, and the big-screen settings with a mini preview */
.prize-pics { display: flex; gap: 6px; align-items: center; }
.prize-pic-wrap { position: relative; display: inline-flex; }
.prize-pic.second { width: 30px; height: 44px; }
.prize-pic-x { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.prize-pic-x:focus-visible { outline: 2px solid var(--accent); }
.prize-pic { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; border: 1.5px dashed var(--border-strong); display: grid; place-items: center; color: var(--muted); overflow: hidden; background: var(--surface-2); }
.prize-pic.has { border-style: solid; }
.prize-pic img { width: 100%; height: 100%; object-fit: cover; }
.prize-pic:hover { border-color: var(--accent); color: var(--accent-text); }
.prize-pic:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
@media (max-width: 600px) { .prize-pic { width: 40px; height: 40px; } .prize-pic.second { width: 26px; height: 40px; } }
.look-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
/* Controller: prize pictures on the prize cards */
.dc-prize .pic { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; margin: -6px 0; }
.dc-prize .n { flex: 1; min-width: 0; }

/* ---------- Review requests and live numbers ---------- */
.review-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 18px 20px; margin-bottom: 22px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.review-ask b { font-size: 17px; display: block; }
.review-ask p { color: var(--text-2); font-size: 14px; margin-top: 2px; }
.review-ask .btn.ghost, .kit-card .btn.ghost { border-color: var(--border-strong); color: var(--text); }
/* My Events, our own marketing and test accounts only: "Reset demo data". */
.demo-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-top: 32px; border-radius: var(--radius); border: 1px dashed var(--border-strong, var(--border)); background: transparent; font-size: 14px; color: var(--muted); }
.demo-reset b { color: var(--text); }
.demo-reset > .grow { flex: 1 1 320px; min-width: 0; }
.demo-reset b { font-size: 16px; display: block; }
.demo-reset p { color: var(--muted); font-size: 13px; margin: 2px 0 0; max-width: 680px; }
.demo-reset-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.demo-reset-actions .input { width: auto; min-width: 260px; }
@media (max-width: 560px) { .demo-reset .btn { width: 100%; justify-content: center; } .demo-reset-actions { width: 100%; } .demo-reset-actions .input { width: 100%; min-width: 0; } }
.review-ask-stars { display: flex; gap: 2px; }
.review-ask-stars button { all: unset; cursor: pointer; font-size: 30px; line-height: 1; color: var(--border-strong); transition: color .1s, transform .1s; }
.review-ask-stars:hover button { color: #e6a700; }
.review-ask-stars button:hover ~ button { color: var(--border-strong); }
.review-ask-stars button:hover { transform: scale(1.12); }
.review-ask-stars button:focus-visible { outline: 3px solid var(--accent-line); border-radius: 4px; }
.review-verified { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--success); margin-top: 6px; }
.consent { gap: 10px; align-items: flex-start; }
.lp-numbers { border-bottom: 1px solid var(--border); background: var(--surface); }
.lp-numbers-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 26px; padding-bottom: 26px; }
.lp-numbers-row div { display: flex; flex-direction: column; }
.lp-numbers-row b { font-family: var(--font-serif); font-size: clamp(30px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lp-numbers-row span { color: var(--muted); font-size: 14px; margin-top: 6px; }
.lp-trust .lp-numbers-row b { font-size: clamp(24px, 2.6vw, 34px); }
/* Long words in other languages wrap inside their column, never into the next one. */
.lp-trust .lp-numbers-row b { overflow-wrap: anywhere; word-break: normal; line-break: strict; text-wrap: balance; }
.lp-numbers-row > div { min-width: 0; }
.lp-trust .lp-numbers-row span { line-height: 1.4; max-width: 24ch; }
.lp-badges { list-style: none; margin: 0; padding: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.lp-badges li { display: inline-flex; align-items: center; gap: 7px; }
.lp-badges svg { color: var(--success); flex: none; }
@media (max-width: 760px) { .lp-numbers-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.test-data-note { display: inline-block; max-width: 100%; margin-top: 10px; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--warning); font-size: 13px; font-weight: 600; white-space: normal; }
.review-plan { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); margin-top: 4px; }
.review-col { display: grid; gap: 14px; align-content: start; }
.review-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.review-filters .chip { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.review-filters .chip span { font-weight: 500; color: var(--muted); }
.review-filters .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.review-filters .chip[aria-pressed="true"] span { color: inherit; opacity: .7; }
.review-filters .chip:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.review-more { display: flex; justify-content: center; padding-top: 4px; }
.review-verified + .review-plan { margin-left: 12px; }

/* ---------- Settings area (profile, password, plan, buying, history, invoice details) ---------- */
.set-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 32px; padding-bottom: 48px; }
.set-side { position: sticky; top: 84px; display: grid; gap: 18px; }
.set-group { display: grid; gap: 2px; }
.set-group-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 0 10px 4px; }
.set-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-weight: 500; text-decoration: none !important; }
.set-link svg { color: var(--muted); }
.set-link:hover { background: var(--surface-2); color: var(--text); }
.set-link[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--border); }
.set-link[aria-current="page"] svg { color: var(--accent); }
.set-main { min-width: 0; display: grid; gap: 20px; align-content: start; }
.set-picker { display: none; }
.set-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.set-head h1 { font-size: 30px; letter-spacing: -0.02em; }
.set-head p { color: var(--text-2); margin-top: 6px; max-width: 620px; }
.set-section { display: grid; gap: 10px; }
.set-section > h2 { font-size: 17px; }
.empty-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; color: var(--muted); }
.dt td.pay-ref { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; }
/* The account button: a plain person icon and the organiser's name (always both, never a picture). */
.user-avatar { display: inline-flex; align-items: center; flex: none; color: var(--text-2); }
.user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Phones: the name keeps its room; passes are in the menu (☰ → Plan & passes). */
@media (max-width: 479px) { .user-name { max-width: 120px; }  }
@media (max-width: 860px) {
  .set-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .set-side { display: none; }
  .set-picker { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .set-head h1 { font-size: 26px; }
}
@media (max-width: 480px) { .nav .hide-xs-text { display: none; } }
/* Buy passes: boxes as roomy as on the pricing page (three a row beside the menu, fewer on smaller screens), not four thin ones. */
.set-main .pricing { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.set-main input::placeholder { text-transform: none; }
@media (max-width: 860px) {
  .set-head { flex-direction: column; align-items: stretch; }
  .set-actions .btn { width: 100%; }
}
.set-main .price b { font-size: clamp(28px, 2.5vw, 38px); }
.field label .optional { color: var(--muted); font-weight: 400; }
.field label .required { color: var(--danger); font-weight: 700; }
/* Every required field shows it: a red * after its label (labels that already carry .required keep theirs). */
.field:has(:is(input, select, textarea)[required]) > label:not(:has(.required))::after { content: ' *'; color: var(--danger); font-weight: 700; }
/* Demo videos */
.hall-video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 2px; background: #0b0c1a; }
/* Captions and the AI label over the hero video, in the visitor's language. */
.hall { position: relative; }
.hall-label { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 2px 7px; border-radius: 4px; background: rgba(10, 12, 26, .55); color: rgba(255,255,255,.9); font-size: 10.5px; line-height: 1.4; }
.hall-cap { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 5px 12px; border-radius: 6px; background: rgba(10, 12, 26, .78); color: #fff; font-size: clamp(12px, 1.25vw, 16px); font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; }


/* ---------- Landing responsive fixes (hero video, header on small phones) ---------- */
.lp-hero-grid > * { min-width: 0; }
.lp-hero-photo { max-width: 100%; }
.lp-hero-photo .frame { overflow: hidden; }
/* The phone sits beside the video, never over the projector. */
@media (max-width: 980px) {
  .lp-hero-photo { padding-bottom: 0; }
  .lp-hero-photo .frame { transform: none; padding: 8px 8px 0; }
  .lp-hero-photo figcaption { position: static; transform: none; text-align: right; padding: 6px 10px 10px; background: #fff; font-size: 15px; }
}
@media (max-width: 600px) {
  .lp-hero-photo .frame { padding: 6px 6px 0; }
  .lp-hero-photo figcaption { font-size: 14px; padding: 4px 8px 8px; }
}
@media (max-width: 380px) {
  .topbar .container { padding-left: 12px; padding-right: 12px; }
  .topbar .brand { font-size: 0; gap: 0; }
  .topbar .brand .tm { margin-left: 0; } /* no gap to take back: the logo keeps its full width */
  .nav .btn.sm { padding-left: 8px; padding-right: 8px; }
  .prefs > summary { padding: 8px 4px; }
}
@media (max-width: 600px) { .lp .cta .btn.ghost-link { padding-left: 0; padding-right: 0; justify-content: flex-start; } }

/* ---------- Lucky-draw entry table ---------- */
.entry-sources { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.entry-grid .card-head p { margin-top: 2px; }
.eg-wrap { overflow: auto; max-height: 460px; }
.eg-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.eg-table td:not(.eg-n):not(.eg-del), .eg-table th:not(.eg-n):not(.eg-add) { min-width: 170px; }
.eg-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.eg-table td { border-bottom: 1px solid var(--border); padding: 0; }
.eg-table td + td, .eg-table th + th { border-left: 1px solid var(--border); }
.eg-col { display: flex; align-items: center; gap: 8px; }
.eg-type { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.eg-key { color: #e6a700; }
.eg-x { all: unset; cursor: pointer; margin-left: auto; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.eg-x:hover { background: var(--surface-3); color: var(--danger); }
.eg-x:focus-visible { outline: 2px solid var(--accent-line); }
.eg-n { width: 40px; min-width: 40px; text-align: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; background: var(--surface-2); }
th.eg-n { text-align: center; }
.eg-add { width: 1%; background: var(--surface-2); }
.eg-del { width: 40px; text-align: center; }
.eg-cell { display: block; width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 9px 10px; font: inherit; color: var(--text); outline: none; }
.eg-cell:focus { background: var(--accent-softer); box-shadow: inset 0 0 0 2px var(--accent-line); }
.eg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--border); }
.entries-all-table { max-height: 62vh; }
.modal.wide { max-width: min(1100px, calc(100vw - 32px)); }
@media (max-width: 600px) {
  .eg-foot .btn.primary { width: 100%; }
  .entry-sources .btn { flex: 1 1 auto; }
}
/* Header pop-up menus: nothing laid out while closed; on phones the open panel is pinned to the screen. */
.prefs:not([open]) > .prefs-panel { display: none; }
@media (max-width: 600px) {
  .prefs[open] > .prefs-panel { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; max-height: calc(100vh - 80px); overflow-y: auto; }
}
@media (max-width: 600px) {
  .card-head { flex-wrap: wrap; }
  .card-head .input[type="search"] { max-width: none !important; flex: 1 1 100%; order: 5; }
}

/* Draw settings: the ten big-screen animations */
.anim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.anim-card { position: relative; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .15s, background .15s; }
.anim-card:hover { border-color: var(--border-strong); }
.anim-card.on { border-color: var(--accent); background: var(--accent-soft, color-mix(in srgb, var(--accent) 8%, var(--surface))); }
.anim-pick { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 56px 11px 12px; border-radius: 11px; }
.anim-pick:focus-visible { outline: 3px solid var(--accent-line); }
.anim-pick b { font-size: 14px; }
.anim-pick span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.anim-pick .anim-note { font-size: 12px; font-style: normal; color: var(--warning); line-height: 1.35; margin-top: 2px; }

/* Light theme: a bright corporate look (white box, dark text). The organiser's own box / text
   colours (--box-color, --s-ink) still win. */
.stage[data-theme="light"] { --s-bg: #eef0f6; --s-ink: #141a33; --s-dim: #5b6280; --s-line: rgba(20, 26, 51, .1);
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef0f6 55%, #dfe3ee 100%); }
.stage[data-theme="light"] .stage-lights { display: none; }
.stage[data-theme="light"] .stage-box[data-box="glass"] { background: color-mix(in srgb, var(--box-color, #ffffff) 92%, transparent); border-color: rgba(20, 26, 51, .08);
  box-shadow: 0 40px 90px -40px rgba(20, 26, 51, .35), 0 2px 0 rgba(255,255,255,.8) inset; backdrop-filter: none; }
.stage[data-theme="light"] .stage-box[data-box="solid"] { background: var(--box-color, #ffffff); border-color: rgba(20, 26, 51, .1); box-shadow: 0 40px 90px -40px rgba(20, 26, 51, .35); }
.stage[data-theme="light"] .stage-name.landed { text-shadow: none; }
.stage[data-theme="light"] .stage-name.idle { color: color-mix(in srgb, var(--s-ink) 22%, transparent); }
.stage[data-theme="light"] .stage-prize { color: color-mix(in srgb, var(--accent) 80%, #000); }
.stage[data-theme="light"] .stage-prize .pill { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, #fff); }
.stage[data-theme="light"] .reel-frame { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.stage[data-theme="light"] .stage-reel.stop .reel-list li.in, .stage[data-theme="light"] .stage-name .ch { color: var(--s-ink); }
.stage[data-theme="light"] .stage-rail { background: rgba(255, 255, 255, .7); border-top-color: var(--s-line); }
.stage[data-theme="light"] .stage-tile { background: #fff; border-color: var(--s-line); }
.stage[data-theme="light"] .stage-join { border-left-color: var(--s-line); }
.stage[data-theme="light"] .stage-pic img { background: #fff; box-shadow: 0 30px 70px -34px rgba(20, 26, 51, .45), 0 0 0 1px rgba(20, 26, 51, .06); }
.stage[data-theme="light"] .mx-cell { background: #fff; border-color: var(--s-line); }
.stage[data-theme="light"] .mx-cell.lock, .stage[data-theme="light"] .stage-name .st, .stage[data-theme="light"] .cd-num { color: color-mix(in srgb, var(--accent) 85%, #000); text-shadow: none; }
.stage[data-theme="light"] .sp-card { background: #fff; border-color: var(--s-line); }
.stage[data-theme="light"] .sp-card.on { color: var(--s-ink); background: color-mix(in srgb, var(--accent) 12%, #fff); border-color: var(--accent); }
.stage[data-theme="light"] .rain .drop { color: color-mix(in srgb, var(--s-ink) 45%, transparent); }

/* ---------- Visual guide (/guide): real screenshots, step by step ---------- */
.guide-steps { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.guide-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--accent-text, var(--accent)); font-weight: 800; font-size: 15px; margin-bottom: 14px; }

/* ---------- Winners screen (/d/:id/winners): a second display listing every winner ---------- */
.wscreen { grid-template-rows: auto minmax(0, 1fr); }
.ws-main { min-height: 0; overflow: hidden; padding: 4px clamp(20px, 3vw, 56px) clamp(20px, 3vh, 40px); display: flex; flex-direction: column; gap: clamp(14px, 2vh, 24px); }
.ws-kicker { display: flex; justify-content: center; }
.ws-kicker .pill { display: inline-flex; gap: 10px; align-items: center; padding: 8px 22px; border-radius: 999px; font-weight: 700; font-size: clamp(16px, 1.6vw, 24px); color: var(--gold);
  border: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.ws-list { columns: 3 clamp(280px, 26vw, 460px); column-gap: clamp(14px, 1.6vw, 28px); min-height: 0; }
.ws-card { break-inside: avoid; margin: 0 0 clamp(14px, 1.6vw, 28px); border-radius: 20px; padding: clamp(14px, 1.4vw, 22px); color: var(--card-ink, var(--s-ink));
  background: linear-gradient(180deg, color-mix(in srgb, var(--box-color, #fff) 12%, transparent), color-mix(in srgb, var(--box-color, #fff) 5%, transparent)); border: 1.5px solid rgba(255,255,255,.14); }
.ws-card[data-box="solid"] { background: var(--box-color, color-mix(in srgb, var(--accent) 22%, #0b0c1c)); }
.ws-card[data-box="outline"] { background: none; border: 2px solid var(--box-color, color-mix(in srgb, var(--gold) 70%, transparent)); }
.ws-card[data-box="none"] { background: none; border-color: transparent; padding-inline: 0; }
.ws-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ws-card header img { width: clamp(40px, 3.6vw, 60px); height: clamp(40px, 3.6vw, 60px); border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.ws-card header b { flex: 1; min-width: 0; font-size: clamp(17px, 1.5vw, 26px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.ws-card header span { font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(13px, 1vw, 17px); opacity: .7; }
.ws-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); }
.ws-card li b { font-size: clamp(16px, 1.35vw, 24px); font-weight: 700; overflow-wrap: anywhere; }
.ws-card li span { font-family: var(--font-mono); font-size: clamp(12px, .95vw, 16px); opacity: .7; white-space: nowrap; }
.ws-card li.new { animation: wsNew 1.6s ease-out; }
@keyframes wsNew { 0% { transform: scale(.94); background: color-mix(in srgb, var(--gold) 45%, transparent); } 100% { transform: none; } }
.ws-empty { text-align: center; color: var(--s-dim); font-size: clamp(20px, 2vw, 32px); padding: 12vh 16px; column-span: all; }
.stage[data-theme="light"] .ws-card { background: color-mix(in srgb, var(--box-color, #ffffff) 94%, transparent); border-color: rgba(20, 26, 51, .08); box-shadow: 0 24px 60px -36px rgba(20, 26, 51, .35); }
.stage[data-theme="light"] .ws-card[data-box="solid"] { background: var(--box-color, #ffffff); }
.stage[data-theme="light"] .ws-kicker .pill { color: color-mix(in srgb, var(--accent) 85%, #000); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, #fff); }
@media (max-width: 760px) { .ws-list { columns: 1; } }

/* Voting stage: full-screen "Scan to vote" page (before voting opens, or the QR page view) */
.cs-join { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 6vw, 120px); padding: clamp(16px, 3vh, 40px) clamp(24px, 6vw, 120px); }
.cs-join-text { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 20px); min-width: 0; }
.cs-join-kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(18px, 1.6vw, 26px); color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.cs-join h2 { font-size: clamp(56px, 8vw, 150px); font-weight: 800; line-height: .95; letter-spacing: -0.04em; margin: 0; font-family: var(--s-font, var(--font)); }
.cs-join-cat { font-size: clamp(24px, 2.6vw, 44px); font-weight: 700; margin: 0; }
.cs-join-url { font-family: var(--font-mono); font-size: clamp(16px, 1.5vw, 26px); color: var(--s-dim); margin: 0; overflow-wrap: anywhere; }
.cs-join-note { font-size: clamp(16px, 1.4vw, 24px); color: var(--s-dim); margin: 0; }
.cs-join-qr { width: min(64vh, 40vw); height: min(64vh, 40vw); padding: clamp(14px, 1.6vw, 26px); margin: 0; background: #fff; border-radius: 28px; box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); }
.cs-join-qr canvas, .cs-join-qr img, .cs-join-qr svg { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 760px), (orientation: portrait) {
  .cs-join { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cs-join-text { align-items: center; }
  .cs-join-qr { width: min(70vw, 46vh); height: min(70vw, 46vh); }
}
.theme-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--text-2); }
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent-line, var(--accent)); outline-offset: 2px; }
/* /guide: one guide per service (picker, video, steps in pictures) */
.gs-note { margin-top: 6px; color: var(--accent-text); font-size: 17px; }
.gs { margin-top: 18px; display: grid; gap: 28px; scroll-margin-top: 80px; }
.gs-picker { display: grid; gap: 22px; }
.gs-group-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gs-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.gs-pick { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; min-width: 0; }
.gs-pick:hover { border-color: var(--accent-line, var(--accent)); text-decoration: none; }
.gs-pick[aria-selected="true"] { background: var(--text); color: var(--paper); border-color: var(--text); }
.gs-pick-ico { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); color: var(--accent-text); }
.gs-pick[aria-selected="true"] .gs-pick-ico { background: rgba(255,255,255,.14); color: var(--gold, #ffc21a); }
.gs-panel { display: grid; gap: 18px; scroll-margin-top: 80px; min-width: 0; }
.gs-head { display: flex; gap: 14px; align-items: flex-start; }
.gs-head-ico { flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--accent-text); }
.gs-head h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gs-head p { color: var(--text-2); font-size: 17px; line-height: 1.55; max-width: 62ch; margin: 0; }
.gs-addon { font-size: 13px; letter-spacing: 0; }
.gs-sub { font-size: clamp(20px, 2vw, 25px); letter-spacing: -0.02em; margin: 14px 0 0; }
.gs-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px; }
.gs-nav-side { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 700; }
.gs-nav-link { color: inherit; padding: 6px 0; }
@media (max-width: 600px) {
  .gs-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-pick { font-size: 14px; padding: 8px 10px; gap: 8px; }
  .gs-pick-ico { width: 28px; height: 28px; }
  .gs-head-ico { display: none; }
}
/* Narrow phones: the Theme choice stays in the globe menu (and Auto follows the phone). */
@media (max-width: 440px) { .topbar .nav .theme-toggle { display: none; } }

/* =========================================================================
   Quiz game
   ========================================================================= */
/* Shared quiz look (quiz-look.js): a rounded, friendly font, answer letters in a speech bubble, the hand-drawn circle and tick */
.qs, .qp, .qz-q { --qz-font: "Nunito", "Rubik", var(--lang-sans), system-ui, sans-serif; }
.qs, .qp, :is(.qs, .qp) :is(h1, h2, h3) { font-family: var(--qz-font); }
.qz-badge { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.9em; height: 1.75em; border-radius: 46% 46% 46% 10%; background: var(--ink); color: var(--ink-text, #fff); font-weight: 800; font-size: .9em; line-height: 1; }
.qz-tick { width: 62%; height: 62%; overflow: visible; }
.qz-tick path { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.qz-circle { position: absolute; left: -3%; top: -20%; width: 106%; height: 140%; overflow: visible; pointer-events: none; z-index: 2; }
.qz-circle path { fill: none; stroke: var(--gold, #ffc21a); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 1s .25s ease-out forwards; }
.qz-hand { font-weight: 700; font-size: 1.1em; line-height: 1.1; color: var(--gold); }
/* Time: a bar that drains under the question, and the seconds big in a speech bubble (the Yaypick shape). */
.qs-timebar { width: min(1100px, 90%); height: 10px; border-radius: 10px; margin-top: clamp(8px, 1.6vh, 18px); background: color-mix(in srgb, var(--s-ink, #fff) 12%, transparent); overflow: hidden; }
.qs-timebar i { display: block; height: 100%; width: calc(var(--left, 1) * 100%); border-radius: inherit; background: var(--gold, #ffc21a); }
.qs-timer { grid-column: 1; justify-self: center; width: clamp(110px, 10vw, 180px); aspect-ratio: 1.08; border-radius: 46% 46% 46% 10%; background: var(--gold, #ffc21a); display: grid; place-items: center; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.qs-timer b { font-family: var(--qz-font); font-weight: 800; font-size: clamp(48px, 5vw, 92px); line-height: 1; font-variant-numeric: tabular-nums; color: #1d1f3b; }
.qs-q.low .qs-timer, .qs-q.low .qs-timebar i { background: #e8604f; }
.qs-q.low .qs-timer b { color: #fff; animation: qzBeat 1s infinite; }
@keyframes qzBeat { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .qz-circle path { animation: none; stroke-dashoffset: 0; } .qs-q.low .qs-timer b { animation: none; } }

/* ---- Organiser: question editor ---- */
.qz-q { display: grid; gap: 14px; }
.qz-q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qz-q-head .select { width: auto; min-width: 0; }
.qz-n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: color-mix(in srgb, #7c3aed 14%, transparent); color: #7c3aed; }
.qz-q-body { display: flex; gap: 16px; align-items: flex-start; }
.qz-text { font-size: 17px; font-weight: 600; resize: vertical; }
.qz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qz-opt { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--tile) 35%, var(--border)); background: color-mix(in srgb, var(--tile) 7%, var(--surface)); }
.qz-opt.on { border-color: var(--tile); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tile) 25%, transparent); }
.qz-opt .input { border: 0; background: transparent; box-shadow: none; padding-inline: 6px; min-width: 0; }
.qz-mark { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 28px; border-radius: 46% 46% 46% 10%; display: grid; place-items: center; flex-shrink: 0; background: var(--tile); color: var(--ink-text, #fff); font-weight: 800; font-size: 14px; opacity: .45; }
.qz-opt.on .qz-mark { opacity: 1; }
.qz-mark:focus-visible { outline: 3px solid var(--accent-line, var(--accent)); outline-offset: 2px; }
.qz-tf { font-weight: 700; padding: 6px; }
.qz-add-opt { justify-self: start; }
.qz-pic-wrap { display: grid; gap: 6px; justify-items: center; flex-shrink: 0; }
.qz-pic { all: unset; box-sizing: border-box; cursor: pointer; width: 132px; aspect-ratio: 4 / 3; border-radius: 12px; border: 1.5px dashed var(--border-strong); display: grid; place-items: center; color: var(--muted); overflow: hidden; background: var(--surface-2); text-align: center; font-size: 13px; }
.qz-pic span { display: grid; justify-items: center; gap: 4px; }
.qz-pic.has { border-style: solid; }
.qz-pic img { width: 100%; height: 100%; object-fit: cover; }
.qz-pic:focus-visible { outline: 3px solid var(--accent-line, var(--accent)); }
.qz-add { display: grid; gap: 10px; }
.qz-savebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 30px -16px rgba(20, 22, 50, .35); }
.qz-steps { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); }
@media (max-width: 640px) {
  .qz-q-body { flex-direction: column-reverse; }
  .qz-pic-wrap { justify-items: start; }
  .qz-options { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Player's phone ---- */
.qp { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: #f6f5f1 radial-gradient(rgba(29, 31, 59, .11) 1.1px, transparent 1.5px) 0 0 / 22px 22px; color: #1d1f3b; font-family: var(--qz-font); --gold: #ffc21a; }
.qp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-size: 15px; }
.qp-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-me { font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.qp-body { padding: 8px 16px 16px; display: grid; align-content: center; }
.qp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #1d1f3b; color: #fff; font-size: 14px; }
.qp-foot b { font-size: 18px; font-variant-numeric: tabular-nums; }
.qp-rank { margin-left: auto; font-weight: 700; }
.qp-card { background: #fff; color: #1d1f3b; border-radius: 22px 22px 22px 6px; padding: 26px 22px; box-shadow: 0 1px 0 #e3dfd5, 0 24px 48px -28px rgba(29, 31, 59, .45); display: grid; gap: 14px; }
.qp-card h1 { font-family: var(--qz-font); font-size: clamp(26px, 7.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.qp-card p { margin: 0; }
.qp-center { text-align: center; justify-items: center; }
.qp-kicker { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.qp-join .input, .qp-join .select { font-size: 18px; height: 52px; }
.qp-big-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); }
.qp-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000); font-weight: 700; }
.qp-meta { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; opacity: .75; flex-wrap: wrap; }
.qp-double { background: #ffc21a; color: #1d1f3b; border-radius: 999px; padding: 2px 10px; font-weight: 800; opacity: 1; }
.qp-q { display: grid; gap: 14px; align-content: start; }
.qp-q > .qp-meta { color: #484b67; opacity: 1; }
.qp-q h2 { font-family: var(--qz-font); font-size: clamp(22px, 6.4vw, 28px); line-height: 1.15; letter-spacing: -0.01em; text-align: center; margin: 0; text-wrap: balance; }
.qp-img { width: 100%; max-height: 28vh; object-fit: contain; border-radius: 14px; }
.qp-timer { display: flex; align-items: center; gap: 10px; }
.qp-track { flex: 1; height: 10px; border-radius: 10px; background: rgba(29, 31, 59, .1); overflow: hidden; }
.qp-track .fg { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--gold); transform: scaleX(var(--left, 1)); transform-origin: left center; transition: transform .25s linear; will-change: transform; }
.qp-timer b { min-width: 2.2em; padding: 4px 10px; border-radius: 12px 12px 12px 4px; background: var(--gold); color: #1d1f3b; font-weight: 800; font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.qp-timer.low .fg, .qp-timer.low b { background: #e8604f; color: #fff; }

.qp-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.qp-tile { all: unset; box-sizing: border-box; cursor: pointer; min-height: clamp(64px, 10.5vh, 104px); border-radius: 18px 18px 18px 6px; background: #fff; color: #1d1f3b; border: 2px solid transparent; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; text-align: left; font-weight: 700; font-size: 19px; line-height: 1.2; box-shadow: 0 1px 0 #e3dfd5, 0 12px 26px -18px rgba(29, 31, 59, .4); overflow-wrap: anywhere; transition: transform .12s, border-color .15s; }
.qp-tile:nth-child(odd) { rotate: -.4deg; } .qp-tile:nth-child(even) { rotate: .35deg; }
.qp-tile .qz-badge { font-size: 22px; }
.qp-tiles.n2 .qp-tile { min-height: clamp(84px, 15vh, 140px); font-size: 22px; }

.qp-tile:active { transform: scale(.97); }
.qp-tile.on { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, #fff); }
.qp-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.qp-typed { display: grid; gap: 12px; }
.qp-input { height: 60px; font-size: 22px; text-align: center; }
.qp-result.good .qp-big-ico { background: #e3f6ec; color: #12825c; }
.qp-result.bad .qp-big-ico { background: #fde8e6; color: #c22a1d; }
.qp-points { font-size: 40px; font-weight: 800; color: #12825c; letter-spacing: -0.02em; }
.qp-standing { font-weight: 600; color: #4a4e6a; }
.qp-place { font-family: var(--qz-font); font-size: 72px; font-weight: 700; color: var(--accent); line-height: 1; }
.qp-score { font-size: 20px; font-weight: 700; }

/* ---- Big screen ---- */
.qs { grid-template-rows: auto minmax(0, 1fr); background: var(--s-bg) radial-gradient(color-mix(in srgb, var(--s-ink) 12%, transparent) 1.2px, transparent 1.7px) 0 0 / 28px 28px; }
.qs .stage-lights { display: none; }
.qs .stage-count { display: grid; text-align: right; }
.qs-main { min-height: 0; overflow: hidden; padding: 0 clamp(20px, 3vw, 56px) clamp(18px, 3vh, 36px); display: grid; }
.qs-empty { display: grid; place-items: center; height: 100%; font-size: 28px; color: var(--s-dim); }
.qs-kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(18px, 1.6vw, 26px); color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
/* lobby */
.qs-lobby { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 100px); align-items: center; }
.qs-join-text { display: grid; gap: clamp(10px, 1.6vh, 18px); min-width: 0; align-content: center; }
.qs-join-text h2 { font-family: var(--qz-font); font-size: clamp(56px, 8vw, 150px); font-weight: 700; line-height: .95; letter-spacing: -0.04em; margin: 0; }
.qs-url { font-family: var(--font-mono); font-size: clamp(16px, 1.6vw, 28px); color: var(--s-dim); margin: 0; overflow-wrap: anywhere; }
.qs-joined { display: flex; align-items: baseline; gap: 12px; }
.qs-joined b { font-size: clamp(36px, 4vw, 64px); font-weight: 800; font-variant-numeric: tabular-nums; }
.qs-joined span { font-size: clamp(16px, 1.4vw, 24px); color: var(--s-dim); }
.qs-names { display: flex; flex-wrap: wrap; gap: 8px; max-height: 28vh; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.qs-names span { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 30%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); font-weight: 700; font-size: clamp(14px, 1.2vw, 20px); }
.qs-names span.new { animation: qsPop .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes qsPop { from { transform: scale(.4); opacity: 0; } }
.qs-qr { width: min(62vh, 40vw); height: min(62vh, 40vw); padding: clamp(14px, 1.6vw, 26px); margin: 0; background: #fff; border-radius: 28px; border: 0; box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); }
/* question */
.qs-q { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(10px, 2vh, 22px); min-height: 0; }
.qs-qhead { display: grid; justify-items: center; gap: 10px; text-align: center; }
.qs-qhead h2 { font-family: var(--qz-font); font-size: clamp(30px, 3.6vw, 64px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; max-width: 1500px; text-wrap: balance; }
.qs-double { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: #ffc21a; color: #1d1f3b; font-weight: 800; font-size: clamp(14px, 1.2vw, 20px); }
.qs-mid { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr) minmax(120px, 1fr); align-items: center; gap: 20px; min-height: 0; }
.qs-img { justify-self: center; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); grid-column: 2; }
.qs-img-gap { grid-column: 2; }
.qs-answered, .qs-stat { grid-column: 3; justify-self: center; display: grid; justify-items: center; text-align: center; gap: 2px; }
.qs-answered b, .qs-stat b { font-family: var(--qz-font); font-size: clamp(40px, 4.4vw, 84px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.qs-answered span, .qs-stat span { font-size: clamp(22px, 2vw, 36px); }
.qs-stat em { font-style: normal; font-size: clamp(13px, 1vw, 17px); color: var(--gold); margin-top: 6px; }
.qs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1vw, 16px); }
.qs-tile { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); padding: clamp(12px, 1.8vh, 24px) clamp(18px, 1.6vw, 28px) clamp(12px, 1.8vh, 24px) clamp(12px, 1.1vw, 20px); border-radius: 22px 22px 22px 6px; background: #fbf8f2; color: #1d1f3b; font-weight: 700; font-size: clamp(18px, 2vw, 36px); line-height: 1.15; box-shadow: 0 2px 0 rgba(29, 31, 59, .12), 0 24px 50px -28px rgba(0, 0, 0, .6); transition: opacity .4s, transform .4s, filter .4s; }
.qs-tile:nth-child(odd) { rotate: -.35deg; } .qs-tile:nth-child(even) { rotate: .3deg; }
.qs-tile .qz-badge { font-size: clamp(22px, 2.1vw, 40px); }

.qs-opt { flex: 1; min-width: 0; overflow-wrap: anywhere; position: relative; z-index: 1; }
.qs-count { font-family: var(--qz-font); font-weight: 700; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.qs-bar { position: absolute; left: clamp(18px, 1.6vw, 28px); bottom: 8px; height: 5px; border-radius: 5px; width: calc((100% - 2 * clamp(18px, 1.6vw, 28px)) * var(--wn, 0)); background: var(--ink); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.qs-tile.wrong { opacity: .4; filter: saturate(.2); }
.qs-tile.right { rotate: 0deg; transform: scale(1.03); z-index: 1; }
.qs-typehint { justify-self: center; display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border-radius: 999px; font-size: clamp(20px, 2vw, 34px); font-weight: 700; background: color-mix(in srgb, var(--s-ink) 8%, transparent); }
.qs-closest, .qs-typed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 60px); align-items: center; }
.qs-number { display: grid; justify-items: center; padding: clamp(14px, 2vh, 26px) clamp(24px, 3vw, 48px); border-radius: 26px 26px 26px 8px; background: #fbf8f2; color: #1d1f3b; position: relative; }
.qs-number span { font-weight: 700; opacity: .85; font-size: clamp(14px, 1.2vw, 20px); }
.qs-number b { font-family: var(--qz-font); font-size: clamp(40px, 5vw, 96px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.qs-closest ol, .qs-typed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qs-closest li, .qs-typed li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 10px 18px; border-radius: 12px; background: color-mix(in srgb, var(--s-ink) 7%, transparent); font-size: clamp(16px, 1.5vw, 26px); animation: qsIn .5s both; animation-delay: var(--d); }
.qs-typed li { grid-template-columns: minmax(0, 1fr) auto; }
.qs-typed li.ok { background: color-mix(in srgb, var(--gold) 26%, transparent); }
.qs-closest em { font-style: normal; color: var(--gold); font-weight: 700; }
@keyframes qsIn { from { opacity: 0; transform: translateY(14px); } }
/* "get ready" and "time's up" */
.qs-ready { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 10px; background: color-mix(in srgb, var(--s-bg, #0d0f22) 86%, transparent); z-index: 5; }
.qs.getting-ready .qs-ready { display: grid; }
.qs-ready span { font-size: clamp(22px, 2.4vw, 40px); font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.qs-ready b { font-family: var(--qz-font); font-size: clamp(120px, 20vw, 320px); font-weight: 700; line-height: 1; color: var(--gold); animation: qsPop .9s infinite; }
.qs.time-up .qs-tiles::after { content: ""; }
/* leaderboard */
.qs-lb { display: grid; gap: clamp(20px, 3vw, 48px); align-content: start; min-height: 0; }
.qs-lb.with-teams { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.qs-lb-title { font-family: var(--qz-font); font-size: clamp(32px, 3.4vw, 60px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; }
.qs-board { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1vh, 10px); }
.qs-board li { position: relative; overflow: hidden; display: grid; grid-template-columns: clamp(36px, 3vw, 56px) minmax(0, 1fr) auto auto auto auto; align-items: center; gap: clamp(10px, 1.2vw, 20px); padding: clamp(8px, 1.3vh, 14px) clamp(14px, 1.4vw, 24px); border-radius: 14px; background: color-mix(in srgb, var(--s-ink) 7%, transparent); animation: qsIn .5s both; animation-delay: var(--d); }
.qs-board li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: 0; }
.qs-board li > * { position: relative; z-index: 1; }
.qs-board li:first-child { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.qs-r { font-family: var(--qz-font); font-weight: 700; font-size: clamp(20px, 2vw, 34px); color: var(--s-dim); font-variant-numeric: tabular-nums; }
.qs-who { display: grid; min-width: 0; }
.qs-who b { font-size: clamp(18px, 1.9vw, 32px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-who span { font-size: clamp(12px, 1vw, 16px); color: var(--s-dim); }
.qs-streak { font-size: clamp(12px, 1vw, 16px); font-weight: 700; color: var(--gold); white-space: nowrap; }
.qs-move { display: inline-flex; align-items: center; font-weight: 800; min-width: 2.4em; font-size: clamp(13px, 1.1vw, 18px); }
.qs-move.up { color: #3ccf72; } .qs-move.down { color: #ff6b5c; }
.qs-gain { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(14px, 1.2vw, 20px); min-width: 4em; text-align: right; }
.qs-score { font-size: clamp(20px, 2vw, 34px); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.qs-teams h3 { font-size: clamp(22px, 2vw, 34px); margin: 6px 0 14px; }
.qs-teams ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qs-teams li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 12px; background: color-mix(in srgb, var(--s-ink) 7%, transparent); font-size: clamp(16px, 1.4vw, 24px); }
.qs-teams li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-teams li span:last-child { color: var(--s-dim); font-variant-numeric: tabular-nums; }
/* podium */
.qs-final { display: grid; justify-items: center; align-content: center; gap: clamp(14px, 2vh, 24px); min-height: 0; }
.qs-final h2 { font-family: var(--qz-font); font-size: clamp(32px, 3.6vw, 64px); font-weight: 700; margin: 0; }
.qs-podium { display: grid; grid-template-columns: repeat(3, minmax(0, clamp(180px, 20vw, 360px))); align-items: end; gap: clamp(14px, 2vw, 36px); }
.qs-pod { display: grid; gap: 12px; justify-items: center; opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .7s cubic-bezier(.2, 1.3, .4, 1); }
.qs-pod.in { opacity: 1; transform: none; }
.qs-pod-name { display: grid; justify-items: center; text-align: center; gap: 2px; max-width: 100%; }
.qs-pod-name b { font-size: clamp(20px, 2.2vw, 40px); font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-pod-name span { color: var(--s-dim); font-size: clamp(13px, 1vw, 17px); }
.qs-pod-name em { font-style: normal; color: var(--gold); font-weight: 700; font-size: clamp(15px, 1.3vw, 22px); }
.qs-pod-block { justify-self: center; width: 70%; display: grid; place-items: end center; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }
.qz-trophy, .qz-trophy svg { display: block; width: 100%; max-height: 36vh; }
.qs-pod.p1 .qs-pod-block { width: 100%; } .qs-pod.p1 .qz-trophy svg { max-height: 35vh; }
.qs-pod.p2 .qs-pod-block { width: 80%; } .qs-pod.p2 .qz-trophy svg { max-height: 27vh; }
.qs-pod.p3 .qs-pod-block { width: 68%; } .qs-pod.p3 .qz-trophy svg { max-height: 21vh; }
.qs-pod.empty .qs-pod-block { opacity: .25; }
.qs-teamwin { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); font-weight: 800; font-size: clamp(16px, 1.5vw, 26px); opacity: 0; transition: opacity .6s; }
.qs-teamwin.in { opacity: 1; }
.qs-rest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style-position: inside; color: var(--s-dim); font-size: clamp(14px, 1.2vw, 20px); opacity: 0; transition: opacity .6s; }
.qs-rest.in { opacity: 1; }
.qs-rest b { color: var(--s-ink); margin-right: 6px; }
@media (max-width: 760px), (orientation: portrait) {
  .qs-lobby { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .qs-qr { width: min(70vw, 40vh); height: min(70vw, 40vh); }
  .qs-names { justify-content: center; }
  .qs-mid { grid-template-columns: 1fr 1fr; }
  .qs-img, .qs-img-gap { grid-column: 1 / -1; grid-row: 2; max-height: 22vh; }
  .qs-answered, .qs-stat { grid-column: 2; }
  .qs-tiles { grid-template-columns: 1fr; }
  .qs-lb.with-teams { grid-template-columns: minmax(0, 1fr); }
  .qs-board li { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
  .qs-board .qs-streak, .qs-board .qs-gain { display: none; }
  .qs-closest, .qs-typed { grid-template-columns: minmax(0, 1fr); }
  .qs-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* light theme for the quiz screen */
.stage[data-theme="light"] .qs-names span { color: var(--s-ink); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.stage[data-theme="light"] .qs-kicker, .stage[data-theme="light"] .qs-stat em, .stage[data-theme="light"] .qs-gain, .stage[data-theme="light"] .qs-closest em, .stage[data-theme="light"] .qs-streak, .stage[data-theme="light"] .qs-pod-name em, .stage[data-theme="light"] .qs-ready span { color: color-mix(in srgb, var(--accent) 85%, #000); }
.stage[data-theme="light"].qs { --s-bg: #f6f5f1; }
.stage[data-theme="light"] .qz-hand { color: #a86800; }
.stage[data-theme="light"] .qs-tile, .stage[data-theme="light"] .qs-number { background: #fff; box-shadow: 0 1px 0 #e3dfd5, 0 20px 40px -26px rgba(29, 31, 59, .35); }
.stage[data-theme="light"] .qz-circle path { stroke: #e0a400; }
.stage[data-theme="light"] .qs-qr { box-shadow: 0 30px 80px -40px rgba(20, 26, 51, .45); border: 1px solid rgba(20, 26, 51, .08); }
.stage[data-theme="light"] .qs-ready { background: color-mix(in srgb, #eef0f6 88%, transparent); }

/* ---- Host controller ---- */
.qh .dc-status { position: relative; }
.qh-clock { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qh-answer { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px dashed var(--border-strong); }
.qh-answer h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
.qh-q { font-weight: 700; margin: 0; }
.qh-a { display: grid; gap: 6px; }
.qh-a > b { font-size: 20px; }
.qh-opts { display: grid; gap: 6px; }
.qh-opts span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border-left: 5px solid var(--tile); background: var(--surface-2); color: var(--text-2); }
.qh-opts span.ok { color: var(--text); font-weight: 700; background: color-mix(in srgb, #26890c 12%, var(--surface)); }

/* Without a picture: question, timer and compact answer cards sit together in the middle of the screen. */
.qs-q.no-img { grid-template-rows: auto auto auto; align-content: center; gap: clamp(18px, 4vh, 44px); }
.qs-q.no-img .qs-tile { min-height: clamp(64px, 11vh, 120px); }
.qs-q.no-img .qs-timer { grid-column: 2; grid-row: 1; }
.qs-q.no-img .qs-img-gap { grid-column: 2; grid-row: 1; }
.qs-q.with-img .qs-tile { min-height: clamp(60px, 9vh, 110px); }
/* Event page: one tab per kind of activity */
.ev-activities { margin-top: 28px; display: grid; gap: 14px; }
.ev-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.ev-tabs button { flex-shrink: 0; }
.ev-count { margin-left: 4px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.ev-tabs [aria-selected="true"] .ev-count { background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--accent-text, var(--accent)); }
.ev-panel h2 { display: none; }
.ev-panel .row.wrap { justify-content: flex-end; }

.qz-q-head .btn.icon.sm, .qz-opt .btn.icon.sm { min-width: 36px; min-height: 36px; }
.auth-photo-tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.85); }

/* ---------- Organiser pages on phones: tabs instead of one long page ---------- */
.sub-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--surface-2); overflow-x: auto; scrollbar-width: none; }
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs button { flex: 1 0 auto; border: 0; background: none; padding: 9px 14px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.sub-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
@media (max-width: 980px) {
  /* The side panel (controller, big screen, share links) comes before the tabs. */
  .draw-grid > aside { order: -1; }
}
@media (max-width: 600px) {
  /* Tabs share the width (icon over label) so none is cut off. */
  .draw-grid .tabs { gap: 0; margin-bottom: 14px !important; }
  .draw-grid .tabs button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 8px 4px 9px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; }
  .draw-grid .tabs button .badge { font-size: 10.5px; padding: 0 5px; min-width: 0; line-height: 16px; }
  .sub-tabs button { flex: 1 1 0; padding: 8px 6px; font-size: 13px; white-space: normal; line-height: 1.2; }
  /* A shorter page head: title, then one row of compact buttons. */
  .page-head { padding: 16px 0 10px; gap: 8px; margin-bottom: 0; }
  .page-head h1 { font-size: 26px; margin-top: 4px !important; }
  .page-head > .btn { height: 38px; padding: 0 12px; font-size: 13.5px; }
  /* Pass and stats shrink to two short strips so the Run tab is near the top. */
  .pass-panel { margin: 6px 0 12px; padding: 8px 10px; gap: 8px 10px; flex-wrap: wrap; font-size: 13px; }
  /* Text beside the icon; when there are several buttons they drop to their own row instead of covering it. */
  .pass-panel > :nth-child(2) { flex: 1 1 160px; }
  .pass-panel .ticket-ico { width: 28px; height: 28px; border-radius: 8px; }
  .pass-panel > :nth-child(2) { min-width: 0; }
  /* Several buttons: their own row under the text, which keeps its width. */
  .pass-panel > .row { flex: 1 1 100%; justify-content: flex-end; }
  .pass-panel > :nth-child(2) > :not(:first-child) { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pass-panel > :nth-child(2) > .cap-line { display: flex; }
  .cap-bar { flex-basis: 80px; }
  .pass-panel .btn { height: 32px; padding: 0 10px; font-size: 12.5px; flex-shrink: 0; }
  /* Two tiles per row, every word readable (never four squeezed and cut off). */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px !important; }
  .stat { padding: 10px 12px 11px; border-radius: 12px; box-shadow: none; }
  .stat .k { font-size: 12.5px; gap: 5px; }
  .stat .v, .stat .v.sm { font-size: 18px; margin-top: 3px; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
  .stat .sub { display: none; }
  .draw-grid { padding-bottom: 40px; }
  .control-panel .qz-steps { display: none; }
  .control-panel h3 { font-size: 18px; }
}

/* ---------- First load: no flash of the search-engine text ---------- */
html.js-boot #app > .ssr { display: none; }
html.js-boot #app:has(> .ssr)::before { content: ''; position: fixed; left: 50%; top: 45%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }

/* Animation preview pop-up: the stage at projector size, scaled down to the dialog. */
.anim-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0d0f22; }
.anim-frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; }
@media (max-width: 600px) {
  dialog.modal.wide:has(.anim-screen) { width: calc(100vw - 16px); }
  dialog.modal.wide:has(.anim-screen) .modal-body { padding: 16px; }
}

/* Settings → On the big screen: a sample of what a winner looks like. */
.screen-display .select { max-width: 320px; }
@media (max-width: 600px) { .screen-display { flex-direction: column; align-items: stretch; } .screen-display .select { max-width: none; width: 100%; } }

/* ---------- Event join code (guests' event page, code box, big-screen slide, organiser card) ---------- */
.hub { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; min-height: 100vh; }
.hub-head { display: flex; align-items: center; gap: 12px; padding: 6px 2px 4px; }
.hub-head small { font-size: 12px; font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: .06em; }
.hub-head h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.hub h2 { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.hub-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); color: var(--text); text-decoration: none; min-height: 68px; }
.hub-item:hover { border-color: var(--border-strong); }
.hub-item small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.hub-item b { display: block; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.hub-item.live { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); min-height: 92px; box-shadow: var(--shadow); }
.hub-item.live small { color: var(--accent-text); }
.hub-item.live b { font-size: 20px; }
.hub-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.hub-item.live .hub-ico { width: 54px; height: 54px; border-radius: 14px; }
.hub-wait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 20px; }
.hub-foot { text-align: center; margin-top: auto; }
.hub-join { justify-content: center; align-items: stretch; }
.hub-brand { display: flex; align-items: center; gap: 10px; justify-content: center; font-weight: 800; font-size: 22px; color: var(--text); text-decoration: none; margin-bottom: 6px; }
.hub-card { text-align: center; }
.hub-card h1 { font-size: 26px; }
.hub-code-input { font-size: 34px; font-weight: 800; letter-spacing: .12em; text-align: center; height: 68px; font-variant-numeric: tabular-nums; }
/* Bar on guests' pages opened from the code */
.hub-bar { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); }
.hub-bar-back { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 13.5px; color: var(--text); text-decoration: none; }
.hub-bar-back b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hub-bar-back .muted { margin-left: auto; white-space: nowrap; }
.hub-offer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-size: 14px; font-weight: 600; }
/* Big-screen join slide */
.hub-screen { min-height: 100vh; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 6vw; padding: 6vh 7vw; background: #12142a; color: #fff; }
.hub-screen-text p { margin: 0; }
.hub-screen-event { font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; color: var(--gold, #ffc21a); margin-bottom: 4vh !important; }
.hub-screen-label { font-size: clamp(18px, 2vw, 30px); opacity: .7; margin-top: 2vh !important; }
.hub-screen-url { font-size: clamp(36px, 5.4vw, 92px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.hub-screen-code { font-size: clamp(64px, 10vw, 190px); font-weight: 800; letter-spacing: .06em; line-height: 1; font-variant-numeric: tabular-nums; }
.hub-screen-hint { font-size: clamp(16px, 1.6vw, 24px); opacity: .6; margin-top: 4vh !important; }
.hub-screen-qr { background: #fff; border-radius: 24px; padding: 3vh; aspect-ratio: 1; width: min(100%, 72vh); justify-self: center; }
.hub-screen-qr canvas, .hub-screen-qr img, .hub-screen-qr svg { width: 100% !important; height: 100% !important; }
@media (max-width: 760px) { .hub-screen { grid-template-columns: 1fr; text-align: center; } }
/* Organiser card on the event page */
.hub-admin { display: flex; gap: 22px; align-items: flex-start; margin: 4px 0 18px; }
.hub-qr { width: 132px; height: 132px; flex-shrink: 0; margin: 0; }
.hub-admin-code { font-size: 34px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 2px 0 4px; }
.hub-admin .select { max-width: 420px; }
@media (max-width: 600px) {
  /* Compact on phones: small QR beside the code, the explanation left out, so the activities stay near the top. */
  .hub-admin { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; padding: 14px !important; }
  .hub-admin > .stack { display: contents; }
  .hub-admin > .stack > :first-child { grid-column: 2; align-self: center; }
  .hub-admin > .stack > :first-child p { display: none; }
  .hub-admin > .stack > :not(:first-child) { grid-column: 1 / -1; }
  .hub-qr { width: 76px; height: 76px; }
  .hub-admin-code { font-size: 26px; }
  .hub-admin .select { max-width: none; }
  .hub-admin .field-hint { display: none; }
}



/* ---------- Rude-word filter setting (forum, poll and quiz settings) ---------- */
.profanity-setting { display: flex; flex-direction: column; gap: 10px; }
.profanity-setting .field { margin: 0; }
.profanity-setting .textarea { min-height: 72px; }
.profanity-setting .hint.over { color: var(--danger); }
@media (max-width: 600px) { .profanity-setting .setting { flex-wrap: wrap; } .profanity-setting .select { width: 100% !important; } }

/* ---------- Event team (owner + co-hosts) ---------- */
.team-card { margin: 0 0 18px; }
.team-card summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.team-card summary::-webkit-details-marker { display: none; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.team-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; flex-shrink: 0; }
.team-card form .input { max-width: 320px; }
@media (max-width: 600px) { .team-card form { flex-wrap: wrap; } .team-card form .input { max-width: none; flex: 1 1 100%; } }


/* ---------- Photo & greetings wall (wl-*: organiser, wg-*: guests' phones, pk-*: big screen) ---------- */
/* Organiser: moderation cards with the photo on top */
.wl-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--accent-softer); border: 1px solid var(--accent-line); border-radius: var(--radius); }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.wl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.wl-card.pinned { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wl-photo { display: block; background: var(--surface-2); aspect-ratio: 4 / 3; }
.wl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.wl-card .fo-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 14px; }
.wl-card .fo-meta b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wl-card .fo-meta span { color: var(--muted); font-size: 13px; }
.wl-card .fo-body { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.wl-card .fo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.wl-card .fo-actions .btn.sm:not(.icon) { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.wl-card .fo-actions .btn.icon { margin-left: auto; flex: none; }
.control-panel .wl-auto { padding: 12px 0 2px; border-top: 1px solid #383c63; }
.control-panel .wl-auto .s-text .d { color: #b8bad3; }

/* Guests' phone page */
.wg-compose .fo-text .textarea { min-height: 84px; }
.wg-fields { grid-template-columns: minmax(0, 1fr) !important; }
.wg-add { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; min-height: 96px; }
.wg-add:hover, .wg-add:focus-visible { border-color: var(--accent); color: var(--accent-text); }
.wg-add .spin { animation: spin .8s linear infinite; }
.wg-preview { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wg-preview img { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); }
.wg-section { display: flex; flex-direction: column; gap: 10px; }
.wg-section:empty { display: none; }
.wg-section h2 { font-size: 17px; font-weight: 700; margin: 6px 2px 0; }
.wg-mine, .wg-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.wg-mine { grid-template-columns: minmax(0, 1fr); }

/* Disposable camera (photo wall in camera mode) */
.dcam-body { display: flex; flex-direction: column; gap: 18px; }
.dcam-card { position: relative; overflow: hidden; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.dcam-count { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dcam-count b { font-size: 56px; line-height: 1; font-weight: 800; color: var(--accent-text, var(--accent)); font-variant-numeric: tabular-nums; }
.dcam-count span { font-size: 14px; color: var(--muted); font-weight: 600; }
.dcam-roll { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 320px; padding: 8px 10px; border-radius: 6px; background: #1d1a17; }
.dcam-roll i { width: 9px; height: 13px; border-radius: 2px; background: #f2e3c9; }
.dcam-roll i.used { background: #6b3f1f; }
.dcam-fields { width: 100%; max-width: 360px; }
.dcam-shoot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dcam-shutter { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--accent); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .12s; }
.dcam-shutter span { width: 62px; height: 62px; border-radius: 50%; background: var(--accent); }
.dcam-shutter:active { transform: scale(.94); }
.dcam-shutter:disabled { opacity: .4; cursor: not-allowed; }
.dcam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.dcam-flash.go { animation: dcam-flash .5s ease-out; }
@keyframes dcam-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.dcam-reveal { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); padding: 8px 12px; border-radius: 999px; background: var(--surface-2); }
.dcam-card .state-banner { width: 100%; text-align: left; }
.dcam-card .q-error:empty { display: none; }
.dcam-out .dcam-count b { color: var(--accent); }
.dcam-album { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .dcam-album { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dcam-photo { margin: 0; background: #fbf7f0; padding: 6px 6px 4px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.dcam-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; background: #ddd; }
.dcam-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 4px; font-size: 12.5px; color: #5a5148; min-width: 0; }
.dcam-photo figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcam-photo figcaption .btn { color: #5a5148; }
.dcam-opts { display: flex; flex-direction: column; gap: 14px; }
.dcam-opts .field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.dcam-radio { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 14px; }
.dcam-radio input { margin-top: 3px; accent-color: var(--accent); }
.dcam-opts input[type="datetime-local"] { max-width: 260px; }
.dcam-stage { gap: 10px; }
.dcam-stage-label { font-size: clamp(22px, 2.4vw, 40px); letter-spacing: .04em; }
.dcam-stage-num { font-size: clamp(90px, 13vw, 220px); line-height: 1; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.dcam-stage p { margin: 0; }
.dcam-stage-when { margin-top: 14px !important; padding: 10px 22px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--s-text, inherit); font-size: clamp(16px, 1.5vw, 26px); }
.wg-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.wg-mine .wg-tile { flex-direction: row; }
.wg-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-2); }
.wg-mine .wg-tile img { width: 92px; height: 92px; flex-shrink: 0; }
.wg-tile.text-only { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.wg-tile-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.wg-tile-body p { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.wg-tile-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--muted); }
.wg-tile-meta b { color: var(--text); font-weight: 600; }
@media (min-width: 560px) { .wg-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Big screen: header, the posts, and a corner card with the QR (right) */
.pk-stage { --rail: clamp(200px, 15vw, 300px); grid-template-rows: auto minmax(0, 1fr); }
.pk-stage .stage-top { padding-bottom: 8px; }
.pk-stage .stage-top .sub { font-size: clamp(14px, 1.15vw, 22px); }
.pk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 32px); min-height: 0; padding: 0 clamp(20px, 3vw, 48px) clamp(16px, 2.4vh, 36px); }
.pk-main { min-height: 0; min-width: 0; position: relative; display: flex; }
.pk-main > * { flex: 1; min-width: 0; }
.pk-corner { align-self: end; display: flex; flex-direction: column; gap: 12px; padding: clamp(12px, 1vw, 18px); border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid var(--s-line); backdrop-filter: blur(8px); }
.pk-corner .qr { width: 100%; height: auto; aspect-ratio: 1; margin: 0; padding: 8%; border: 0; border-radius: 14px; }
.pk-corner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-corner-text > span:first-child { font-size: clamp(14px, 1.05vw, 19px); font-weight: 700; color: var(--s-ink); }
.pk-post-at { font-size: clamp(12px, .8vw, 14px); color: var(--s-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.pk-addr { font-size: clamp(15px, 1.2vw, 23px); font-weight: 800; letter-spacing: -0.01em; color: var(--s-ink); overflow-wrap: anywhere; line-height: 1.15; }
.pk-closed { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--gold); font-size: 13px; font-weight: 600; }
.pk-closed.hidden { display: none; }

/* Slideshow: one post at a time, cross-fading */
.pk-slides { position: relative; }
.pk-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 56px); align-items: center;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .9, .25, 1); }
.pk-slide.entering { opacity: 0; transform: translateY(26px) scale(.985); }
.pk-slide.leaving { opacity: 0; transform: translateY(-14px) scale(1.01); pointer-events: none; }
.pk-photo { position: relative; height: 100%; max-height: 100%; border-radius: clamp(16px, 1.4vw, 28px); overflow: hidden; background: #000; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); }
.pk-photo img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; animation: pkDrift 14s ease-out both; }
.pk-photo-blur { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(36px) brightness(.6) saturate(1.2); }
@keyframes pkDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
.pk-words { display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 30px); min-width: 0; }
.pk-msg { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--s-ink); overflow-wrap: anywhere; text-wrap: balance; white-space: pre-wrap; }
.pk-msg.short { font-size: clamp(30px, 3.6vw, 76px); }
.pk-msg.mid { font-size: clamp(24px, 2.7vw, 56px); }
.pk-msg.long { font-size: clamp(20px, 2vw, 40px); line-height: 1.3; }
.pk-who { display: flex; align-items: center; gap: 14px; font-size: clamp(18px, 1.7vw, 32px); font-weight: 700; color: color-mix(in srgb, var(--accent) 55%, var(--s-ink)); }
.pk-dash { width: clamp(28px, 2.6vw, 54px); height: 4px; border-radius: 4px; background: var(--accent); flex-shrink: 0; }
.pk-pin-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: clamp(13px, 1vw, 17px); font-weight: 700; background: var(--accent); color: var(--on-accent); }
.pk-slide.text-only { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-content: center; padding: 0 clamp(16px, 6vw, 140px); }
.pk-slide.text-only .pk-words { align-items: center; max-width: 1300px; }
.pk-slide.text-only .pk-msg.short { font-size: clamp(38px, 5vw, 104px); }
.pk-slide.text-only .pk-msg.mid { font-size: clamp(30px, 3.8vw, 78px); }
.pk-slide.text-only .pk-msg.long { font-size: clamp(24px, 2.8vw, 56px); }
.pk-slide.text-only .pk-pin-tag { align-self: center; }
.pk-quote-mark { font-family: Georgia, 'Newsreader', serif; font-size: clamp(110px, 13vw, 260px); line-height: .7; height: .45em; color: var(--accent); opacity: .9; }

/* Wall: columns of tiles, the pinned post large on the left */
.pk-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.4vw, 28px); min-height: 0; overflow: hidden; }
.pk-wall.has-pin { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.pk-feature { display: none; position: relative; min-height: 0; }
.pk-wall.has-pin .pk-feature { display: block; }
.pk-feature .pk-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; gap: 18px; }
.pk-feature .pk-slide.text-only { grid-template-rows: auto; padding: 0 clamp(12px, 2vw, 40px); }
.pk-feature .pk-msg.short { font-size: clamp(26px, 2.6vw, 56px); }
.pk-feature .pk-msg.mid { font-size: clamp(22px, 2vw, 42px); }
.pk-feature .pk-msg.long { font-size: clamp(18px, 1.5vw, 30px); }
.pk-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(12px, 1.1vw, 22px); min-height: 0; overflow: hidden; align-items: start;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
.pk-col { display: flex; flex-direction: column; gap: clamp(12px, 1.1vw, 22px); min-width: 0; }
.pk-tile { border-radius: clamp(14px, 1vw, 20px); overflow: hidden; background: rgba(255, 255, 255, .07); border: 1px solid var(--s-line); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7); }
.pk-tile img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: cover; background: rgba(0, 0, 0, .3); }
.pk-tile-body { padding: clamp(10px, .9vw, 18px) clamp(12px, 1vw, 20px) clamp(12px, 1vw, 18px); display: flex; flex-direction: column; gap: 6px; }
.pk-tile-body p { margin: 0; font-weight: 600; line-height: 1.3; color: var(--s-ink); overflow-wrap: anywhere; white-space: pre-wrap; font-size: clamp(16px, 1.15vw, 24px); }
.pk-tile.text-only { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pk-tile.text-only .pk-tile-body { padding: clamp(16px, 1.4vw, 28px); }
.pk-tile.text-only p.short { font-size: clamp(22px, 1.7vw, 36px); font-weight: 700; letter-spacing: -0.01em; }
.pk-tile.text-only p.mid { font-size: clamp(18px, 1.35vw, 28px); }
.pk-tile-who { font-size: clamp(13px, .95vw, 18px); font-weight: 700; color: color-mix(in srgb, var(--accent) 50%, var(--s-ink)); }
.pk-tile.fly { animation: pkFly .9s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes pkFly { 0% { opacity: 0; transform: translateY(-60px) scale(.82) rotate(-2deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.pk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; color: var(--s-dim); font-size: clamp(20px, 2vw, 34px); font-weight: 600; }
.pk-empty-ico { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* Light screen colours */
.pk-stage[data-theme="light"] .pk-corner { background: #fff; box-shadow: 0 30px 60px -36px rgba(20, 26, 51, .35); }
.pk-stage[data-theme="light"] .pk-corner .qr { padding: 4%; }
.pk-stage[data-theme="light"] .pk-tile { background: #fff; box-shadow: 0 24px 50px -32px rgba(20, 26, 51, .35); }
.pk-stage[data-theme="light"] .pk-tile.text-only { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 20%, #fff), color-mix(in srgb, var(--accent) 6%, #fff)); }
.pk-stage[data-theme="light"] .pk-who, .pk-stage[data-theme="light"] .pk-tile-who { color: color-mix(in srgb, var(--accent) 80%, #000); }
.pk-stage[data-theme="light"] .pk-photo { box-shadow: 0 40px 80px -40px rgba(20, 26, 51, .45); }
.pk-stage[data-theme="light"] .pk-closed { color: color-mix(in srgb, var(--gold) 60%, #000); }

/* Smaller screens (laptops at 1366 × 768, and phones for testing) */
@media (max-height: 820px) { .pk-stage { --rail: clamp(180px, 15vw, 230px); } .pk-stage .stage-top { padding-top: 12px; } }
@media (max-width: 760px) {
  .pk-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pk-corner { flex-direction: row; align-items: center; }
  .pk-corner .qr { width: 72px; flex-shrink: 0; }
  .pk-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pk-wall.has-pin { grid-template-columns: minmax(0, 1fr); }
  .pk-wall.has-pin .pk-feature { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-slide, .pk-photo img, .pk-tile.fly { transition: none; animation: none; }
}


/* ---------- Guest check-in & table finder (organiser page, guests' phones, reception desk, welcome screen) ---------- */
/* Organiser page */
.ci-of { font-size: 18px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ci-progress { display: flex; flex-direction: column; gap: 12px; }
.ci-bar { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ci-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--success); transition: width .5s ease; }
.ci-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding: 16px 22px 20px; }
.ci-table { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ci-table:hover { border-color: var(--border-strong); }
.ci-table.full { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
.ci-table-no { font-weight: 800; font-size: 17px; line-height: 1.1; overflow-wrap: anywhere; }
.ci-table-n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ci-mini { display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ci-mini i { display: block; height: 100%; background: var(--success); }
.ci-latest { display: flex; flex-direction: column; }
.ci-latest-row { display: flex; align-items: center; gap: 12px; padding: 11px 22px; border-top: 1px solid var(--border); }
.ci-latest-row:first-child { border-top: 0; }
.ci-latest-row .grow { min-width: 0; }
.ci-latest-row b { overflow-wrap: anywhere; }
.ci-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.ci-list-head { flex-wrap: wrap; }
.ci-guests tr.ci-in td:first-child b { color: var(--success); }
.ci-actions { white-space: nowrap; text-align: right; }
.ci-guests { min-width: 620px; }
.ci-guests td.mono, .ci-guests td:nth-child(2) { white-space: nowrap; }
.ci-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ci-edit .field.wide { grid-column: 1 / -1; }
.ci-map { display: flex; flex-direction: column; gap: 8px; }
.ci-map-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ci-map-row .grow { min-width: 0; overflow-wrap: anywhere; }
.ci-map-row .select { width: 220px; flex-shrink: 0; }
@media (max-width: 760px) {
  .ci-contact { display: none; }
  .ci-guests { min-width: 540px; }
  .ci-list-head .input { max-width: none !important; width: 100%; }
  .ci-map-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .ci-map-row .select { width: 100%; }
  .ci-latest-row { padding: 11px 16px; }
  .ci-tables { padding: 14px 16px 18px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* Guests' phones */
.ci-wrap { max-width: 560px; margin: -44px auto 0; padding: 0 12px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.ci-card { box-shadow: var(--shadow-lg); gap: 12px; }
.ci-card h2 { font-size: 22px; letter-spacing: -0.02em; }
.ci-card .input.lg { text-align: left; font-size: 19px; }
.ci-back { align-self: flex-start; margin-left: -8px; }
.ci-label { font-weight: 700; font-size: 15px; }
.ci-matches { display: flex; flex-direction: column; gap: 8px; }
.ci-match { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ci-match:hover, .ci-match:focus-visible { border-color: var(--accent); }
.ci-match.busy { opacity: .6; pointer-events: none; }
.ci-match .grow { min-width: 0; }
.ci-match b { display: block; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.ci-match small { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.ci-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-text); }
.ci-none { color: var(--muted); text-align: center; padding: 8px 0; }
.ci-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; text-align: center; }
.ci-help:empty { display: none; }
.ci-welcome { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 30px 22px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ci-welcome.fresh { animation: ci-pop .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes ci-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.ci-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; margin-bottom: 4px; }
.ci-hello { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--success); }
.ci-name { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.ci-seat { margin: 14px 0 6px; padding: 16px 30px 18px; min-width: 200px; max-width: 100%; border-radius: 20px; background: var(--accent); color: var(--on-accent); display: flex; flex-direction: column; align-items: center; }
.ci-seat-k { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .9; }
.ci-seat-v { font-size: clamp(64px, 22vw, 104px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: center; }
.ci-seat-s { font-size: 16px; font-weight: 600; opacity: .92; margin-top: 4px; }
.ci-keep { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); margin-top: 8px; }
.ci-note { margin: 10px 0 4px; padding: 12px 18px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-weight: 700; font-size: 17px; }

/* Reception desk */
.cd-page { min-height: 100vh; background: var(--bg); }
.cd-head { display: flex; align-items: center; gap: 16px; padding: 16px clamp(16px, 3vw, 40px); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; }
.cd-head .grow { min-width: 0; }
.cd-head h1 { font-size: clamp(19px, 2.4vw, 26px); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cd-back { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--text); border: 1px solid var(--border); flex-shrink: 0; }
.cd-count { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 150px; }
.cd-count-n { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cd-count-of { font-size: 13px; color: var(--muted); font-weight: 600; }
.cd-count .ci-bar { width: 100%; height: 6px; }
.cd-banner { max-width: 880px; margin: 14px auto 0; }
.cd-main { max-width: 880px; margin: 0 auto; padding: 20px clamp(16px, 3vw, 24px) 64px; display: flex; flex-direction: column; gap: 14px; }
.cd-search { height: 64px; font-size: 22px; border-radius: 16px; padding: 0 20px; border-width: 2px; }
.cd-search:focus { border-color: var(--accent); }
.cd-done { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--success) 45%, transparent); animation: ci-pop .35s ease both; }
.cd-done > svg { color: var(--success); flex-shrink: 0; }
.cd-done .grow { min-width: 0; }
.cd-done .grow b { display: block; font-size: 20px; overflow-wrap: anywhere; }
.cd-done .grow span { font-size: 14px; color: var(--muted); }
.cd-done-table, .cd-table { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.cd-done-table small, .cd-table small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cd-done-table b { font-size: 40px; font-weight: 800; line-height: 1; color: var(--success); }
.cd-list { display: flex; flex-direction: column; gap: 8px; }
.cd-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); min-height: 72px; }
.cd-row .grow { min-width: 0; }
.cd-row.in { background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.cd-name { display: block; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.cd-meta { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.cd-table { min-width: 64px; }
.cd-table b { font-size: 24px; font-weight: 800; line-height: 1.05; }
.cd-in { height: 52px; padding: 0 22px; font-size: 16px; flex-shrink: 0; }
.cd-undo { flex-shrink: 0; }
.cd-hint { color: var(--muted); font-size: 14px; font-weight: 600; padding: 4px 2px; }
@media (max-width: 600px) {
  .cd-head { flex-wrap: wrap; gap: 10px 12px; }
  .cd-count { min-width: 0; width: 100%; flex-direction: row; align-items: center; gap: 10px; }
  .cd-count .ci-bar { flex: 1; }
  .cd-row { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .cd-row .grow { flex-basis: calc(100% - 90px); }
  .cd-in, .cd-undo { flex: 1; }
  .cd-search { height: 56px; font-size: 19px; }
  .cd-banner { margin: 12px 16px 0; }
}

/* Welcome screen (projector) */
.cs-main { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 32px); padding: 0 clamp(20px, 4vw, 64px); overflow: hidden; }
.cs-wall { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: clamp(8px, 1.4vh, 16px) clamp(10px, 1.4vw, 20px); overflow: hidden; min-height: 0; }
.cs-stage .stage-count span { display: block; font-size: 13px; color: var(--s-dim); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ci-welcome.fresh, .cd-done { animation: none; } }
@media (max-width: 760px) { .cs-stage .stage-rail { flex-direction: column; } .cs-stage .stage-join { border-left: 0; padding-left: 0; } }
/* ---------- end Guest check-in ---------- */

/* =========================================================================
   Event bingo (/app/bingos/:id, guests' card /b/:id, host /b/:id/host, big screen /b/:id/stage)
   ========================================================================= */
/* A small 5×5 picture of a pattern */
.bg-pat { --c: 7px; display: inline-grid; grid-template-columns: repeat(5, var(--c)); gap: 2px; flex-shrink: 0; }
.bg-pat i { width: var(--c); height: var(--c); border-radius: 2px; background: color-mix(in srgb, currentColor 18%, transparent); }
.bg-pat i.on { background: var(--accent); }
.bg-pat.big { --c: clamp(10px, 1.5vh, 20px); gap: 3px; }

/* ---- Organiser ---- */
.bg-pats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-2); }
.bg-pats > span { display: inline-flex; align-items: center; gap: 8px; }
.bg-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.bg-status.confirmed { background: color-mix(in srgb, #12825c 14%, var(--surface)); color: #12825c; }
.bg-status.pending { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: color-mix(in srgb, var(--gold) 45%, #000); }

/* ---- Guest's phone: the card ---- */
.bp { grid-template-rows: auto 1fr auto; }
.bp-body { padding: 4px 14px 14px; display: grid; gap: 12px; align-content: start; width: 100%; max-width: 520px; margin: 0 auto; box-sizing: border-box; }
.bp-body > .qp-card { margin-top: 6vh; }
.bp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.bp-latest { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.1); min-width: 0; min-height: 72px; box-sizing: border-box; }
.bp-latest.wait { justify-content: center; font-weight: 600; opacity: .8; text-align: center; }
.bp-ball { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; color: #1d1f3b;
  background: #fff; box-shadow: inset 0 -5px 0 rgba(0,0,0,.1), 0 0 0 5px var(--accent); }
.bp-ball small { font-size: 12px; font-weight: 800; color: var(--accent); }
.bp-ball b { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bp-tile { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 12px; background: #fff; color: #1d1f3b; font-weight: 800; font-size: 16px; line-height: 1.2; border-left: 6px solid var(--accent); overflow-wrap: anywhere; }
.bp-latest.pop .bp-ball, .bp-latest.pop .bp-tile { animation: bgPop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bgPop { from { transform: scale(.3) rotate(-90deg); opacity: 0; } }
.bp-latest-meta { display: grid; line-height: 1.2; white-space: nowrap; }
.bp-latest.custom .bp-latest-meta { display: none; }
.bp-latest-meta small, .bp-pattern small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; font-weight: 700; }
.bp-latest-meta b { font-size: 15px; }
.bp-pattern { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.1); color: #fff; }
.bp-pattern span { display: grid; line-height: 1.2; }
.bp-pattern b { font-size: 14px; white-space: nowrap; }
.bp-card { background: #fff; color: #1d1f3b; border-radius: 20px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); display: grid; gap: 6px; }
.bp-letters, .bp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bp-letters span { text-align: center; font-weight: 800; font-size: 22px; background: var(--accent); color: var(--on-accent, #fff); border-radius: 10px; padding: 2px 0; }
.bp-cell { all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1; border-radius: 12px; border: 2px solid #e3e5ef; background: #f6f7fb; display: grid; place-items: center; text-align: center; padding: 4px; position: relative; overflow: hidden;
  font-weight: 800; color: #1d1f3b; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.bp-card.numbers .bp-cell { font-size: clamp(20px, 6.6vw, 30px); font-variant-numeric: tabular-nums; }
.bp-card.custom .bp-cell { font-size: clamp(9.5px, 2.75vw, 13px); font-weight: 700; line-height: 1.12; }
.bp-card.custom .bp-cell span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: manual; }
.bp-cell span { position: relative; z-index: 1; }
.bp-cell::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .15s, transform .2s cubic-bezier(.2, 1.6, .4, 1); }
.bp-cell.on { border-color: var(--accent); color: var(--on-accent, #fff); }
.bp-card.custom .bp-cell::before { inset: 0; border-radius: 10px; }
.bp-cell.on::before { opacity: .92; transform: none; }
.bp-cell.free { background: color-mix(in srgb, var(--accent) 16%, #fff); font-size: 13px !important; text-transform: uppercase; letter-spacing: .04em; cursor: default; }
.bp-cell.free::before { opacity: 0; }
.bp-cell.free.on { color: color-mix(in srgb, var(--accent) 80%, #000); }
.bp-cell:active:not(.free) { transform: scale(.94); }
.bp-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bp-hint { text-align: center; font-size: 13.5px; opacity: .75; margin: 0; }
.bp-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #fff; color: #1d1f3b; font-size: 14px; }
.bp-note span { display: grid; gap: 2px; }
.bp-note b { font-size: 16px; }
.bp-note.pending { background: #fff6d6; }
.bp-note.good { background: #e3f6ec; color: #0e5c41; }
.bp-note.bad { background: #fde8e6; color: #8f1d14; }
.bp-winners { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13.5px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); }
.bp-winners small { width: 100%; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; opacity: .7; }
.bp-called { border-radius: 14px; background: rgba(255,255,255,.08); padding: 10px 12px; font-size: 13.5px; }
.bp-called summary { cursor: pointer; font-weight: 600; }
.bp-called div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bp-called div span { padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.14); }
.bp-called div span:first-child { background: var(--accent); color: var(--on-accent, #fff); font-weight: 700; }
.bp-foot { position: sticky; bottom: 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(14, 16, 40, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -12px 30px -18px rgba(0,0,0,.6); }
.bp-foot[hidden] { display: none; }
.bp-bingo { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 2px; width: 100%; max-width: 520px; margin: 0 auto; padding: 12px; border-radius: 20px; text-align: center;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.6); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); }
.bp-bingo b { font-size: 34px; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.bp-bingo small { font-size: 13px; font-weight: 600; }
.bp-bingo:disabled { cursor: not-allowed; }
.bp-bingo.live { background: #ffc21a; color: #1d1f3b; box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), 0 0 0 4px rgba(255, 194, 26, .35), 0 18px 40px -12px #ffc21a; animation: bgLive 1s ease-in-out infinite; }
.bp-bingo.live:active { transform: translateY(3px); }
.bp-bingo:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
@keyframes bgLive { 50% { transform: scale(1.03); } }
.bp canvas.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
@media (max-width: 360px), (max-height: 680px) {
  .bp-body { gap: 8px; }
  .bp-latest, .bp-pattern { min-height: 0; padding: 8px 10px; }
  .bp-ball { width: 46px; height: 46px; }
  .bp-ball b { font-size: 19px; }
  .bp-pattern .bg-pat { --c: 5px; }
  .bp-letters span { font-size: 18px; }
  .bp-card, .bp-grid, .bp-letters { gap: 4px; }
  .bp-bingo b { font-size: 28px; }
  .bp-bingo { padding: 9px; }
}

/* ---- Host controller ---- */
.bh-latest { font-size: clamp(30px, 8vw, 48px); }
.bh-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.bh-box h2 { display: flex; align-items: center; gap: 8px; }
.bh-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: #1d1f3b; font-size: 13px; text-align: center; }
.bh-patterns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bh-pattern { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 8px; padding: 12px 6px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; text-align: center; color: var(--text-2); }
.bh-pattern[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-softer, color-mix(in srgb, var(--accent) 8%, var(--surface))); color: var(--text); }
.bh-pattern:disabled { opacity: .5; cursor: not-allowed; }
.bh-pattern:focus-visible { outline: 3px solid var(--accent-line, var(--accent)); outline-offset: 2px; }
.bh-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bh-recent span { padding: 4px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.bh-recent span.last { background: var(--accent); color: var(--on-accent, #fff); }
/* A claim waiting for the host: a gold bar on the row. */
.bh-claims tr.dt-warn td:first-child { box-shadow: inset 4px 0 0 var(--gold); }
@media (max-width: 600px) { .bh-claims tr.dt-warn { box-shadow: inset 4px 0 0 var(--gold); } .bh-claims tr.dt-warn td:first-child { box-shadow: none; } }
.bh-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 60vh; overflow: auto; }
.bh-pick.custom { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bh-pick .btn { justify-content: center; text-align: center; white-space: normal; height: auto; min-height: 44px; padding: 6px 8px; font-weight: 700; }
.bh-pick.numbers .btn small { font-size: 11px; color: var(--muted); margin-right: 3px; }
@media (max-width: 420px) { .bh-patterns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Big screen ---- */
.bs-main { min-height: 0; overflow: hidden; padding: 0 clamp(20px, 3vw, 56px) clamp(18px, 3vh, 36px); display: grid; }
.bs-lobby .qs-join-text h2 { font-size: clamp(48px, 6.4vw, 124px); }
.bs-code { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.bs-code span { font-size: clamp(16px, 1.4vw, 24px); color: var(--s-dim); }
.bs-code b { font-size: clamp(40px, 4.4vw, 80px); font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1; }
.bs-pattern { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.6vw, 26px); border-radius: 22px; background: color-mix(in srgb, var(--s-ink) 6%, transparent); border: 1px solid var(--s-line); color: var(--s-ink); }
.bs-pattern span { display: grid; gap: 2px; }
.bs-pattern small { font-size: clamp(13px, 1.1vw, 18px); color: var(--s-dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.bs-pattern b { font-size: clamp(24px, 2.4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.bs-pattern.lobby { justify-self: start; }
.bs-play { display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); gap: clamp(20px, 2.6vw, 52px); min-height: 0; }
.bs-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(12px, 2vh, 24px); min-height: 0; }
.bs-call { display: grid; justify-items: center; align-content: center; gap: clamp(8px, 1.6vh, 18px); min-height: 0; text-align: center; }
.bs-call.empty { font-size: clamp(30px, 3vw, 56px); font-weight: 800; color: var(--s-dim); }
.bs-call-kicker { font-size: clamp(16px, 1.5vw, 26px); font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.bs-call-left { font-size: clamp(15px, 1.3vw, 22px); color: var(--s-dim); }
.bs-ball { --size: min(40vh, 24vw); width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; color: #1d1f3b;
  background: radial-gradient(circle at 50% 45%, var(--accent) 0 60%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 -18px 40px rgba(0,0,0,.25); }
.bs-ball > span { width: 64%; height: 64%; border-radius: 50%; background: #fff; display: grid; place-content: center; line-height: .95; box-shadow: inset 0 -8px 0 rgba(0,0,0,.08); }
.bs-ball small { font-size: calc(var(--size) * .12); font-weight: 800; color: var(--accent); }
.bs-ball b { font-size: calc(var(--size) * .3); font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bs-ball.drop { animation: bsDrop 1.1s cubic-bezier(.3, 1.35, .5, 1) both; }
@keyframes bsDrop { 0% { transform: translate(-60vw, -10vh) rotate(-540deg) scale(.5); } 70% { transform: translate(0, 0) rotate(8deg) scale(1.04); } 100% { transform: none; } }
.bs-tile { width: 100%; min-height: min(36vh, 380px); padding: clamp(18px, 2.4vw, 40px); border-radius: 28px; display: grid; place-items: center; background: #fff; color: #1d1f3b; border-bottom: 12px solid var(--accent);
  font-size: clamp(30px, 3.4vw, 66px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); overflow-wrap: anywhere; box-sizing: border-box; }
.bs-tile.long { font-size: clamp(24px, 2.4vw, 46px); }
.bs-tile.flip { animation: bsFlip .9s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes bsFlip { from { transform: perspective(1200px) rotateY(-100deg) scale(.7); opacity: 0; } }
.bs-right { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(10px, 1.6vh, 20px); min-height: 0; }
.bs-board { min-height: 0; }
.bs-board.numbers { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: clamp(6px, .8vh, 12px); max-height: 72vh; align-self: center; }
.bs-row { display: grid; grid-template-columns: 1.2fr repeat(15, minmax(0, 1fr)); gap: clamp(4px, .45vw, 9px); min-height: 0; align-items: center; }
.bs-letter { display: grid; place-items: center; height: 100%; border-radius: 14px; background: var(--accent); color: var(--on-accent, #fff); font-size: clamp(26px, 3vw, 58px); font-weight: 900; }
.bs-board span { display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--s-ink) 5%, transparent); color: color-mix(in srgb, var(--s-ink) 30%, transparent); font-weight: 800; min-height: 0; transition: background .4s, color .4s; }
.bs-board.numbers span { aspect-ratio: 1; max-height: 100%; font-size: clamp(16px, 1.6vw, 32px); font-variant-numeric: tabular-nums; border-radius: 50%; }
.bs-board span.on { background: color-mix(in srgb, var(--accent) 85%, #000); color: #fff; }
.bs-board span.last { background: var(--gold); color: #1d1f3b; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 40%, transparent), 0 0 30px var(--gold); animation: bsLast 1.4s ease-in-out infinite; }
@keyframes bsLast { 50% { transform: scale(1.12); } }
.bs-board.custom span.last { animation-name: bsLastTile; }
@keyframes bsLastTile { 50% { transform: scale(1.04); } }
.bs-board.custom { padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 13vw, 250px), 1fr)); grid-auto-rows: minmax(clamp(44px, 6.4vh, 76px), auto); gap: clamp(6px, .8vh, 12px); align-content: start; overflow: hidden; }
.bs-board.custom span { padding: 6px 12px; text-align: center; font-size: clamp(14px, 1.15vw, 21px); line-height: 1.15; overflow-wrap: anywhere; }
.bs-board.custom.some { grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 11vw, 210px), 1fr)); }
.bs-board.custom.many { grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 8.6vw, 170px), 1fr)); grid-auto-rows: minmax(34px, auto); }
.bs-board.custom.many span { font-size: clamp(11px, .85vw, 15px); padding: 4px 8px; }
.bs-claims { display: grid; gap: 10px; padding-right: clamp(240px, 19vw, 360px); min-height: clamp(110px, 14vh, 170px); align-content: center; }
.bs-checking, .bs-winners { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: clamp(16px, 1.4vw, 26px); }
.bs-checking { color: var(--gold); }
.bs-checking b { font-weight: 900; letter-spacing: .04em; }
.bs-checking em { font-style: normal; opacity: .8; }
.bs-winners span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 16px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.bs-winners small { font-size: .7em; color: var(--s-dim); margin-left: 6px; }
.bs-winners svg { color: var(--gold); }
.bs-corner { position: absolute; right: clamp(16px, 2vw, 40px); bottom: clamp(16px, 2.4vh, 36px); display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 20px; background: color-mix(in srgb, var(--s-bg) 80%, transparent); border: 1px solid var(--s-line); z-index: 3; max-width: 34vw; }
.bs-corner:empty { display: none; }
.bs-qr { width: clamp(96px, 12vh, 140px); height: clamp(96px, 12vh, 140px); background: #fff; border-radius: 12px; padding: 8px; flex-shrink: 0; box-sizing: border-box; }
.bs-qr canvas, .bs-qr img { width: 100% !important; height: 100% !important; }
.bs-corner > div:last-child { display: grid; gap: 2px; min-width: 0; }
.bs-corner small { font-size: clamp(13px, 1vw, 17px); color: var(--s-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.bs-corner b { font-size: clamp(18px, 1.5vw, 28px); font-weight: 800; overflow-wrap: anywhere; }
.bs-win { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--s-bg) 70%, transparent), color-mix(in srgb, var(--s-bg) 94%, transparent)); }
.bs-win[hidden] { display: none; }
.bs-win-box { display: grid; justify-items: center; gap: clamp(10px, 2vh, 24px); text-align: center; padding: 0 4vw; }
.bs-win-title { font-size: clamp(90px, 15vw, 300px); font-weight: 900; line-height: .9; letter-spacing: .02em; color: var(--gold); text-shadow: 0 10px 0 color-mix(in srgb, var(--gold) 40%, #000), 0 30px 80px rgba(0,0,0,.5); }
.bs-win-pattern { font-size: clamp(20px, 2vw, 36px); font-weight: 700; color: var(--s-dim); text-transform: uppercase; letter-spacing: .1em; }
.bs-win ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 40px); }
.bs-win li { display: grid; gap: 4px; }
.bs-win li b { font-size: clamp(40px, 5vw, 100px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.bs-win li span { font-size: clamp(18px, 1.8vw, 34px); color: var(--s-dim); }
.bs-win.in .bs-win-title { animation: bsWin .8s cubic-bezier(.2, 1.6, .4, 1) both; }
.bs-win.in li { animation: qsPop .6s .35s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes bsWin { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
.stage[data-theme="light"] .bs-tile { box-shadow: 0 30px 60px -30px rgba(20, 26, 51, .35); border: 1px solid rgba(20, 26, 51, .08); border-bottom: 12px solid var(--accent); }
.stage[data-theme="light"] .bs-call-kicker, .stage[data-theme="light"] .bs-checking { color: color-mix(in srgb, var(--accent) 85%, #000); }
.stage[data-theme="light"] .bs-win-title { color: var(--accent); text-shadow: 0 10px 0 color-mix(in srgb, var(--accent) 40%, #000); }
@media (max-width: 900px), (orientation: portrait) {
  .bs-play { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .bs-left { grid-template-rows: auto; grid-auto-flow: column; }
  .bs-ball { --size: min(24vh, 40vw); }
  .bs-claims { padding-right: 0; min-height: 0; }
  .bs-corner { display: none; }
}
/* "Spin the wheel" calling: the wheel of what is not called yet (wheel.js), the latest call under it. */
.bs-play.wheel { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.bs-play.wheel .bs-left { grid-template-rows: minmax(0, 1fr) auto auto; grid-auto-flow: row; }
.bs-wheel { min-height: 0; display: grid; place-items: center; container-type: size; }
.bs-wheel[hidden] { display: none; }
.bs-wheel .ft-rig { width: min(100cqw, 88cqh); margin: 0; filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .45)); }
.stage[data-theme="light"] .bs-wheel .ft-rig { filter: drop-shadow(0 22px 34px rgba(20, 26, 51, .25)); }
.bs-wheel-call { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.bs-wc-item { display: inline-flex; align-items: baseline; gap: .25em; max-width: 100%; font-size: clamp(30px, 3.6vw, 66px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--s-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bs-wc-item small { font-size: .55em; font-weight: 800; color: var(--accent); }
.bs-wc-item.long { font-size: clamp(22px, 2.2vw, 40px); }
.bs-wc-item.spin, .bs-wc-item.wait { color: var(--s-dim); }
/* The guest page is light: "Playing for" in ink on white (it was white on white). */
.bp-pattern { background: #fff; color: #1d1f3b; border: 1px solid rgba(29, 31, 59, .1); }
.bp-latest.spin { gap: 10px; }
.bp-latest.spin svg { flex: none; animation: spin 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bp-latest.spin svg { animation: none; } }
@media (max-width: 900px), (orientation: portrait) {
  .bs-play.wheel { grid-template-columns: minmax(0, 1fr); }
  .bs-play.wheel .bs-left { grid-template-rows: 34vh auto; }
  .bs-play.wheel .bs-pattern { display: none; }
}
/* ---------- /Event bingo ---------- */

/* ---------- Agenda & sessions ---------- */
.ag-time { font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.ag-track { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.ag-linked { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--accent-text); }
.ag-score, .ag-mine { font-size: 12.5px; font-weight: 700; color: var(--warning); white-space: nowrap; }
.ag-tag { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ag-tag.now { background: var(--accent); color: var(--accent-contrast, #fff); }
.ag-tag.next { background: var(--accent-soft); color: var(--accent-text); }
/* Guests' agenda */
.ag-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.ag-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "time arrow" "main arrow"; align-items: center; column-gap: 10px; row-gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--text); padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--border); cursor: pointer; }
.ag-row:hover { border-color: var(--border-strong); }
.ag-row > .ag-time { grid-area: time; }
.ag-row > .ag-main { grid-area: main; min-width: 0; }
.ag-row > svg { grid-area: arrow; color: var(--muted); }
.ag-row b { display: block; font-size: 16.5px; line-height: 1.25; overflow-wrap: anywhere; }
.ag-row small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ag-row.live { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.ag-row.done { opacity: .62; }
.ag-highlight { display: grid; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface-2); }
.ag-highlight h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.ag-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1.4s ease-in-out infinite; }
.ag-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ag-chips::-webkit-scrollbar { display: none; }
.ag-chips button { flex-shrink: 0; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ag-chips.small button { padding: 5px 12px; font-size: 13px; }
.ag-chips button[aria-selected="true"], .ag-chips button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.ag-sheet .modal-body { max-height: 82vh; overflow-y: auto; }
.ag-speakers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-speakers li { display: flex; align-items: center; gap: 10px; }
.ag-speakers small { display: block; color: var(--muted); font-size: 13px; }
.ag-desc { white-space: pre-line; line-height: 1.5; color: var(--text-2); }
.ag-later { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.ag-rate { gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.ag-stars { display: flex; gap: 4px; }
.ag-star { border: 0; background: none; font-size: 36px; line-height: 1; padding: 2px 4px; color: var(--surface-3); cursor: pointer; transition: transform .1s; }
.ag-star.on { color: var(--gold); }
.ag-star:active { transform: scale(.88); }
/* Guests' event page */
.hub-ag .hub-ag-line { display: flex; gap: 8px; align-items: baseline; font-size: 15px; font-weight: 600; line-height: 1.3; }
.hub-ag .hub-ag-line small { display: inline; flex-shrink: 0; min-width: 34px; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
/* Organiser */
.ag-admin-tools { gap: 6px; }
.ag-day { font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ag-admin-row { gap: 12px; padding: 12px 14px; }
.ag-admin-row .ag-time { min-width: 108px; }
.ag-title-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.ag-title-btn:hover { color: var(--accent-text); }
.ag-order { display: flex; flex-direction: column; }
.ag-order .btn { padding: 2px; min-height: 0; height: 22px; }
.ag-form { border: 0; padding: 0; margin: 0; min-width: 0; }
.ag-when { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; align-items: end; }
.ag-speaker-row .input { min-width: 0; }
.ag-links { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.ag-link-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ag-link-opt small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ag-fb { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.ag-fb summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.ag-fb summary::-webkit-details-marker { display: none; }
.ag-spread { display: grid; gap: 3px; max-width: 360px; }
.ag-spread-row { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ag-spread-row i { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ag-spread-row i b { display: block; height: 100%; background: var(--gold); }
@media (max-width: 560px) {
  .ag-admin-row { flex-wrap: wrap; row-gap: 4px; }
  .ag-admin-row .ag-time { min-width: 0; flex-basis: 100%; }
  .ag-when { grid-template-columns: 1fr 1fr; }
  .ag-when > :first-child { grid-column: 1 / -1; }
}
/* Lobby screen /e/:code/agenda */
.ag-lobby { min-height: 100vh; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto; gap: 3vh; padding: 4vh 4vw; background: radial-gradient(circle at 20% 0%, #232a55, #0f1124 60%); color: #f4f4fb; }
.ag-lobby-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; }
.ag-lobby-top small, .ag-lobby-label, .ag-lobby-room h2 { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #9fa3c9; }
.ag-lobby-top small { font-size: clamp(14px, 1.2vw, 24px); }
.ag-lobby-top h1 { font-size: clamp(32px, 3.6vw, 76px); line-height: 1.05; letter-spacing: -0.02em; }
.ag-lobby-clock { text-align: right; display: grid; }
.ag-admin .ag-lobby-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; padding: 4px 0 8px; }
.ag-lobby-clock b { font-size: clamp(40px, 4.4vw, 96px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ag-lobby-clock span { font-size: clamp(14px, 1.2vw, 24px); color: #9fa3c9; }
.ag-lobby-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 2vw; align-content: start; }
.ag-lobby-room { display: grid; gap: 1.4vh; align-content: start; }
.ag-lobby-room h2 { font-size: clamp(16px, 1.4vw, 28px); }
.ag-lobby-slot { display: grid; gap: .6vh; padding: 2.4vh 1.6vw; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ag-lobby-slot.live { background: linear-gradient(140deg, var(--accent, #e5412f), color-mix(in srgb, var(--accent, #e5412f) 60%, #000)); border-color: transparent; }
.ag-lobby-slot.live .ag-lobby-label { color: rgba(255, 255, 255, .85); }
.ag-lobby-label { font-size: clamp(13px, 1vw, 20px); }
.ag-lobby-slot b { font-size: clamp(24px, 2.4vw, 52px); line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ag-lobby-slot:not(.live) b { font-size: clamp(20px, 1.8vw, 38px); }
.ag-lobby-time { font-size: clamp(16px, 1.4vw, 28px); font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-lobby-speakers { font-size: clamp(15px, 1.2vw, 24px); opacity: .85; }
.ag-lobby-empty { display: grid; place-items: center; text-align: center; min-height: 40vh; font-size: clamp(24px, 2.4vw, 48px); }
.ag-lobby-foot { display: flex; align-items: center; gap: 1.6vw; }
.ag-lobby-qr { width: clamp(90px, 11vh, 150px); height: clamp(90px, 11vh, 150px); background: #fff; border-radius: 14px; padding: 8px; box-sizing: border-box; flex-shrink: 0; }
.ag-lobby-qr canvas, .ag-lobby-qr img { width: 100% !important; height: 100% !important; }
.ag-lobby-foot small { display: block; font-size: clamp(14px, 1.1vw, 22px); color: #9fa3c9; }
.ag-lobby-foot b { font-size: clamp(22px, 2vw, 40px); font-weight: 800; }
@media (orientation: portrait) { .ag-lobby-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- /Agenda & sessions ---------- */

/* ---------- Event leaderboard ---------- */
.lb-card .lb-actions { gap: 8px; }
.lb-seg { align-self: flex-start; }
.lb-rank { min-width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dt td.lb-why { font-size: 13px; color: var(--muted); }
.lb-delta { min-width: 56px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-delta.up { color: var(--c4); }
.lb-delta.down { color: var(--danger, #d93a2b); }
.lb-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.lb-rule { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.lb-num { width: 90px; flex-shrink: 0; text-align: right; }
/* Guests' phones */
.lb-guest { display: flex; flex-direction: column; gap: 12px; }
.lb-guest h2 { font-size: 18px; }
.lb-me { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.lb-me small { display: block; color: var(--muted); font-size: 12px; }
.lb-me b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-me-pts { text-align: right; }
.lb-me-pts b { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lb-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lb-top li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border); font-size: 15px; }
.lb-top li:first-child { border-top: 0; }
.lb-top li.me { font-weight: 700; background: var(--surface-2); border-radius: 8px; }
.lb-top li b { font-variant-numeric: tabular-nums; }
/* Big screen */
.lb-stage { overflow: hidden; }
.lb-stage.light { --s-bg: #f4f2ec; --s-ink: #1d1f3b; --s-dim: #5d6080; --s-line: rgba(29,31,59,.1); background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--s-bg) 60%); }
.lb-stage-empty { display: grid; place-items: center; font-size: clamp(22px, 2.4vw, 40px); color: var(--s-dim); text-align: center; padding: 4vw; }
.lb-stage-main { display: grid; grid-template-columns: 1.25fr 1fr 0.8fr; gap: clamp(16px, 3vw, 56px); padding: 1vh clamp(20px, 3vw, 56px) 4vh; min-height: 0; align-items: end; }
.lb-stage-main.solo { grid-template-columns: 1.3fr 1fr; }
.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: clamp(8px, 1vw, 20px); height: 100%; min-height: 0; }
.lb-step { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; min-width: 0; }
.lb-step-name { font-size: clamp(18px, 2vw, 36px); font-weight: 800; letter-spacing: -0.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-step-pts { color: var(--gold); font-weight: 700; font-size: clamp(15px, 1.4vw, 24px); margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.lb-block { width: 100%; border-radius: 16px 16px 0 0; display: grid; place-items: start center; padding-top: 2vh; font-size: clamp(36px, 5vw, 96px); font-weight: 900; color: #1d1f3b; }
.lb-step.p1 .lb-block { height: 42vh; background: linear-gradient(180deg, #ffd34d, #e0a400); }
.lb-step.p2 .lb-block { height: 30vh; background: linear-gradient(180deg, #e9ecf5, #b7bccd); }
.lb-step.p3 .lb-block { height: 22vh; background: linear-gradient(180deg, #f0b48a, #c47a45); }
.lb-step.empty { visibility: hidden; }
.lb-stage-list { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.lb-stage-list h2 { font-size: clamp(16px, 1.4vw, 24px); color: var(--s-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1vh; }
.lb-stage-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6vh; }
.lb-stage-list li { display: flex; align-items: center; gap: 14px; padding: 1vh 16px; border-radius: 12px; background: var(--s-line); font-size: clamp(16px, 1.6vw, 28px); font-weight: 600; min-width: 0; }
.lb-stage-list li .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-stage-list li b { font-variant-numeric: tabular-nums; }
.lb-stage-list .lb-rank { background: transparent; color: var(--s-dim); min-width: 2em; }
@media (max-width: 900px) {
  .lb-stage { overflow-y: auto; position: fixed; display: block; }
  .lb-stage-main, .lb-stage-main.solo { grid-template-columns: 1fr; }
  .lb-podium { height: 36vh; }
  .lb-step.p1 .lb-block { height: 20vh; } .lb-step.p2 .lb-block { height: 14vh; } .lb-step.p3 .lb-block { height: 10vh; }
}
@media (max-width: 560px) {
  .lb-rules { grid-template-columns: 1fr; }
  .lb-card .lb-actions .btn { flex: 1 1 auto; }
}
/* ---------- /Event leaderboard ---------- */

/* ---------- Event report & certificates ---------- */
.rp-page { max-width: 980px; }
.rp-tabs { margin-bottom: 18px; }
.rp-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.rp-cover { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 28px 28px 24px; background: #1d1f3b; color: #fff; border-bottom: 4px solid var(--accent); }
.rp-cover h1 { color: #fff; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; margin: 4px 0 6px; overflow-wrap: anywhere; }
.rp-cover p { color: #c9cbe0; margin: 0; }
.rp-cover > .grow { flex: 1 1 300px; min-width: 0; }
.rp-cover .btn:not(.primary) { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.rp-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff9b8f; }
.rp-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 28px 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 14px; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 22px 28px 4px; }
.rp-tile { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.rp-tile b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* A free trial event's report (event-report.js lockedView): blurred tiles under a card that says how to get it. */
.rp-locked .rp-locked-body { position: relative; padding-bottom: 28px; }
.rp-locked .rp-tiles { filter: blur(5px); opacity: .6; user-select: none; }
.rp-locked .rp-locked-card { position: relative; margin: -40px 28px 0; padding: 24px; display: grid; justify-items: center; gap: 10px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.rp-locked .rp-locked-card svg { color: var(--accent); }
.rp-locked .rp-locked-card h2 { margin: 0; font-size: 20px; }
.rp-locked .rp-locked-card p { margin: 0; max-width: 520px; color: var(--text-2); }
@media (max-width: 640px) { .rp-locked .rp-locked-card { margin: -30px 14px 0; padding: 18px; } }
.rp-tile span { font-size: 13px; color: var(--muted); }
.rp-section { padding: 22px 28px 8px; break-inside: auto; }
.rp-section + .rp-section { border-top: 1px solid var(--border); }
.rp-h2 { display: flex; gap: 8px; align-items: center; font-size: 19px; margin: 0 0 14px; }
.rp-h2 svg { color: var(--accent); }
.rp-block { margin-bottom: 18px; break-inside: avoid; }
.rp-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.rp-sub h3 { font-size: 16px; margin: 0; }
.rp-q { padding: 10px 0; border-top: 1px dashed var(--border); break-inside: avoid; }
.rp-q-head { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rp-bars { display: grid; gap: 6px; margin: 4px 0 10px; }
.rp-bar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.rp-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar-t { height: 12px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.rp-bar-t i { display: block; height: 100%; border-radius: 6px; background: #3d5cdb; min-width: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-bar-v { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-big-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 8px; }
.rp-big { font-size: 26px; font-weight: 800; color: #3d5cdb; font-variant-numeric: tabular-nums; }
.rp-big.gold { color: #b8860b; }
.rp-stars { display: inline-flex; gap: 4px; }
.rp-stars i { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(90deg, #e0a800 var(--f), var(--surface-3) var(--f)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-table td, .rp-table th { padding: 8px 10px; }
.rp-table td:first-child { min-width: 110px; overflow-wrap: break-word; }
.rp-table td.num:first-child { min-width: 0; width: 1%; white-space: nowrap; }
.rp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rp-cat { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; break-inside: avoid; }
.rp-cat .kicker { margin-bottom: 8px; display: block; }
.rp-place { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.rp-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); flex: none; }
.rp-place.r1 .rp-rank { background: var(--gold); color: var(--on-gold); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; max-width: 520px; margin: 0 auto 14px; text-align: center; }
.rp-step { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-step-block { margin-top: 6px; border-radius: 10px 10px 0 0; background: var(--surface-3); font-size: 22px; font-weight: 800; display: grid; place-items: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-step.s1 .rp-step-block { height: 92px; background: var(--gold); color: var(--on-gold); }
.rp-step.s2 .rp-step-block { height: 66px; }
.rp-step.s3 .rp-step-block { height: 48px; }
.rp-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; padding: 16px 28px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.rp-made { font-weight: 700; color: var(--accent); }
/* Certificates */
.cert-panel { gap: 16px; }
.cert-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cert-tpl { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; }
.cert-tpl:has(input:checked) { border-color: var(--accent); }
.cert-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.cert-tpl:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cert-tpl > span:last-child { display: flex; flex-direction: column; }
.cert-thumb { position: relative; aspect-ratio: 1.414; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--border); }
.cert-thumb i, .cert-thumb b, .cert-thumb u { position: absolute; display: block; }
.cert-thumb.classic { background: #fdfaf3; box-shadow: inset 0 0 0 5px #fdfaf3, inset 0 0 0 7px #b08c3d; }
.cert-thumb.classic b { left: 25%; right: 25%; top: 40%; height: 9%; background: #1d1f3b; border-radius: 2px; }
.cert-thumb.classic u { left: 44%; width: 12%; aspect-ratio: 1; bottom: 12%; border-radius: 50%; background: #b08c3d; }
.cert-thumb.modern i { left: 0; top: 0; bottom: 0; width: 30%; background: #1d1f3b; border-right: 3px solid #d93a2b; }
.cert-thumb.modern b { left: 38%; right: 12%; top: 38%; height: 10%; background: #1d1f3b; border-radius: 2px; }
.cert-thumb.modern u { left: 38%; width: 12%; top: 54%; height: 3%; background: #d93a2b; }
.cert-thumb.elegant { box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 8px #175445; }
.cert-thumb.elegant b { left: 22%; right: 22%; top: 42%; height: 9%; background: #175445; border-radius: 2px; }
.cert-thumb.elegant i { left: 4px; top: 4px; width: 14%; height: 20%; border-left: 3px solid #b8994f; border-top: 3px solid #b8994f; }
.cert-thumb.elegant u { right: 4px; bottom: 4px; width: 14%; height: 20%; border-right: 3px solid #b8994f; border-bottom: 3px solid #b8994f; }
.cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cert-checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.cert-checkline input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.cert-source { flex-wrap: wrap; height: auto; }
.cert-check { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); min-height: 44px; }
.cert-names { overflow-wrap: anywhere; }
.cert-warn { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid #e8c37a; background: rgba(255, 194, 26, .12); font-size: 13.5px; color: var(--text); }
.cert-warn p { margin: 0; }
.ci-cert-box { margin-top: 18px; width: 100%; max-width: 360px; margin-inline: auto; }
@media (max-width: 640px) {
  .rp-cover { padding: 22px 16px 18px; }
  .rp-note { margin: 14px 16px 0; }
  .rp-tiles { padding: 16px 16px 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-tile b { font-size: 22px; }
  .rp-section { padding: 18px 16px 6px; }
  .rp-foot { padding: 14px 16px; }
  .rp-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .rp-bar-l { grid-column: 1 / -1; white-space: normal; }
  .cert-grid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  .rp-page { max-width: none; }
  .rp-doc { border: 0; border-radius: 0; }
  .rp-cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 0; }
  .rp-tile, .rp-cat, .rp-step-block { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-section { padding: 14px 0 4px; }
  .rp-tiles, .rp-foot { padding-left: 0; padding-right: 0; }
  .rp-h2 { break-after: avoid; }
  .rp-sub { break-after: avoid; }
  .table-wrap { overflow: visible !important; max-height: none !important; }
}
/* ---------- /Event report & certificates ---------- */

/* ---------- Custom stage screen (paid add-on, public/js/stage-design.js) ----------
   applyStageDesign() puts .yp-custom-stage and --ycs-* tokens on a big-screen root; these
   rules map them onto the variables every stage already uses. Custom properties marked
   !important beat the inline ones the stage pages set on each refresh. The designers' own
   CSS (sanitised, scoped under .yp-custom-stage by the server) comes after this. */
.yp-custom-stage {
  --accent: var(--ycs-accent) !important; --on-accent: var(--ycs-on-accent) !important; --gold: var(--ycs-highlight) !important;
  --s-bg: var(--ycs-bg) !important; --s-bg-paint: var(--ycs-paint) !important; --s-ink: var(--ycs-text) !important;
  --s-dim: var(--ycs-dim) !important; --s-line: var(--ycs-line) !important; --s-font: var(--ycs-font-body) !important;
  --s-card: var(--ycs-card) !important; --s-card-2: color-mix(in srgb, var(--ycs-card) 70%, transparent) !important; --s-card-ink: var(--ycs-card-text) !important;
  --box-color: var(--ycs-card) !important;
  background: var(--ycs-paint) !important; color: var(--ycs-text) !important; font-family: var(--ycs-font-body) !important;
}
.yp-custom-stage h1, .yp-custom-stage h2, .yp-custom-stage h3, .yp-custom-stage .stage-name, .yp-custom-stage .cs-title, .yp-custom-stage .hub-screen-code,
.yp-custom-stage .stage-count b, .yp-custom-stage .ag-lobby-clock b { font-family: var(--ycs-font-head) !important; }
.yp-custom-stage[data-ycs-lights="off"] .stage-lights { display: none; }
/* Inside cards, text and dim text (ranks, departments) follow the card's text colour, so light cards stay readable. */
.yp-custom-stage :is(.cs-row, .stage-box, .stage-tile, .lb-stage-list, .ag-lobby-slot, .sp-card, .mx-cell) { --s-ink: var(--ycs-card-text); --s-dim: color-mix(in srgb, var(--ycs-card-text) 62%, transparent); }
.yp-custom-stage .stage-rail { background: color-mix(in srgb, var(--ycs-bg) 70%, transparent); }
.ycs-logo { position: absolute; z-index: 5; pointer-events: none; object-fit: contain; max-width: 22vw; }
.ycs-logo.small { height: clamp(28px, 5vh, 56px); }
.ycs-logo.medium { height: clamp(40px, 8vh, 96px); }
.ycs-logo.large { height: clamp(56px, 13vh, 150px); }
.ycs-logo.top-left { top: 2.4vh; left: 2vw; }
.ycs-logo.top-right { top: 2.4vh; right: 2vw; }
.ycs-logo.top-center { top: 2.4vh; left: 50%; transform: translateX(-50%); }
.ycs-logo.bottom-left { bottom: 2.4vh; left: 2vw; }
.ycs-logo.bottom-right { bottom: 2.4vh; right: 2vw; }
.yp-custom-stage:has(> .ycs-logo.top-left) .stage-top { padding-left: calc(2vw + 22vw * .55); }
.hub-screen.yp-custom-stage, .ag-lobby.yp-custom-stage, .present.yp-custom-stage { position: relative; }
.ycs-preview { position: fixed; z-index: 50; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center;
  padding: 8px 14px; border-radius: 999px; background: #1d1f3b; color: #fff; font: 600 13px/1.2 var(--font); box-shadow: 0 10px 30px -10px #000; }

/* The card on the event page and each activity's page, and the request page. */
.ycs-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin: 0 0 16px; border: 1px solid color-mix(in srgb, #9a4fd8 35%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, #9a4fd8 5%, var(--surface)); }
.ycs-card.compact { padding: 10px 14px; margin-top: -6px; }
.ycs-card .ycs-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, #9a4fd8 15%, var(--surface)); color: #9a4fd8; }
.ycs-card.compact .ycs-ico { width: 30px; height: 30px; }
.ycs-card .t { font-weight: 700; }
.ycs-card .grow { min-width: 200px; }
.ycs-status.review { background: color-mix(in srgb, var(--c4) 18%, var(--surface)); }
.ycs-status.approved { background: color-mix(in srgb, #119e72 18%, var(--surface)); }
.ycs-page section > h3 { font-size: 17px; }
.ycs-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; }
.ycs-steps li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text-2); padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.ycs-steps li.now { color: var(--text); font-weight: 700; outline: 2px solid var(--accent); }
.ycs-steps li.done { color: var(--text); }
.ycs-steps .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); font: 700 12px/1 var(--font-mono); }
.ycs-steps li.done .dot { background: #119e72; color: #fff; }
.ycs-swatches { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ycs-swatches span { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); }
.ycs-points { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ycs-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ycs-thread { display: grid; gap: 8px; }
.ycs-msg { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.ycs-msg.designer { background: color-mix(in srgb, #9a4fd8 9%, var(--surface)); }
.ycs-msg p { margin: 4px 0 0; }
.switch-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch-row input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.ycs-sample { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #12142a; color: #fff; display: grid; grid-template-rows: auto 1fr; font-size: 12px; }
.ycs-sample .stage-top { padding: 14px 18px; }
.ycs-sample .stage-top h1 { font-size: 20px; }
.ycs-sample-main { display: grid; gap: 12px; padding: 0 18px 18px; align-content: center; }
.ycs-sample .stage-box { min-height: 0; padding: 18px; text-align: center; border: 1.5px solid rgba(255,255,255,.16); }
.ycs-sample-name { font-size: clamp(22px, 4vw, 40px); font-weight: 800; font-family: var(--ycs-font-head, var(--font)); }
.ycs-sample-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ycs-sample .stage-tile { opacity: 1; transform: none; padding: 8px 10px; }
.ycs-sample .stage-tile b { font-size: 13px; }
.ycs-sample .ycs-logo { max-width: 26%; }
.ycs-sample .ycs-preview { display: none; }

/* Pricing page and landing page: the add-on offer. */
.ycs-offer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.ycs-offer .ycs-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #9a4fd8 15%, var(--surface)); color: #9a4fd8; }
.ycs-offer h3 { margin: 2px 0 6px; }
.ycs-offer .price b { font-size: 26px; }
@media (max-width: 640px) {
  .ycs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ycs-offer { grid-template-columns: minmax(0, 1fr); }
  .ycs-sample-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* Landing: standard big screen → the same screen in a custom design */
.ycs-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; margin: 8px 0 26px; }
.ycs-compare figure { margin: 0; display: grid; gap: 8px; }
.ycs-compare img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 50px -28px rgba(29, 31, 59, .5); }
.ycs-compare figcaption { text-align: center; font-size: 1.25em; }
.ycs-arrow { color: var(--accent); }
@media (max-width: 760px) { .ycs-compare { grid-template-columns: minmax(0, 1fr); } .ycs-arrow { justify-self: center; rotate: 90deg; } }

/* =========================================================================
   Main navigation (site-nav.js): the Product menu (services, event pages,
   free tools, guides), Pricing and Reviews; on phones and tablets a
   full-height menu panel.
   ========================================================================= */
/* The bar is a little wider than the page so long labels (German, Filipino) still fit on one line. */
.topbar .container { position: relative; max-width: 1280px; }
.mainnav { display: none; min-width: 0; margin-left: 8px; }
.mn-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mn-item { position: relative; }
.mn-item.wide { position: static; }
.mn-trigger, .mn-link {
  all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: 9px;
  color: var(--text-2); font-family: var(--font); font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none !important;
}
.mn-trigger:hover, .mn-link:hover, .mn-item.open > .mn-trigger { background: var(--surface-2); color: var(--text); }
.mn-trigger:focus-visible, .mn-link:focus-visible, .mn-card:focus-visible, .mm-head:focus-visible, .mm-link:focus-visible, .nav .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mn-trigger.here, .mn-link[aria-current="page"] { color: var(--text); }
.mn-trigger.here::after, .mn-link[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -13px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.mn-caret { color: var(--muted); transition: transform .18s ease; }
.mn-item.open > .mn-trigger .mn-caret { transform: rotate(180deg); }
.mn-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 45; width: max-content; max-width: calc(100vw - 32px);
  padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: mn-in .16s ease-out;
}
.mn-panel[hidden] { display: none; }
/* An invisible bridge so the pointer can travel from the trigger into the panel. */
.mn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.mn-panel.wide { left: 50%; translate: -50% 0; top: calc(100% - 2px); width: min(1080px, calc(100vw - 32px)); }
@keyframes mn-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mn-panel, .mm { animation: none; } .mn-caret, .mm-caret { transition: none; } }
.mn-grid { display: grid; gap: 2px; }
.mn-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The Product menu fits on one screen (founder, 29 Oct 2026): tighter cards, two lines of text at most,
   and it scrolls inside itself on a short screen instead of running off the bottom. */
.mn-panel.wide { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; }
.mn-panel.wide .mn-card { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 7px 10px; }
.mn-panel.wide .mn-ico { width: 30px; height: 30px; border-radius: 9px; }
.mn-panel.wide .mn-text b { font-size: 14px; }
.mn-panel.wide .mn-card.plain { grid-template-columns: minmax(0, 1fr); }
.mn-panel.wide .mn-text span { font-size: 12.5px; line-height: 1.3; }
.mn-panel.wide .mn-foot { padding-right: 96px; }
.mn-panel.wide .mn-sub h5 { margin: 4px 10px; }
.mn-card {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--text); text-decoration: none !important; min-width: 0;
}
.mn-card:hover, .mn-card:focus-visible { background: var(--surface-2); }
.mn-card[aria-current="page"] { background: var(--accent-softer); }
.mn-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-text); }
.mn-card:hover .mn-ico { background: var(--accent); color: var(--on-accent); }
.mn-text { display: grid; gap: 1px; min-width: 0; }
.mn-text b { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.mn-text span { font-size: 13px; line-height: 1.35; color: var(--muted); }
.mn-card.compact { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 7px 10px; }
.mn-card.compact .mn-ico { width: 28px; height: 28px; border-radius: 8px; }
.mn-card.compact .mn-text b { font-size: 14px; font-weight: 600; }
/* Product: the services take two columns, then the event pages, then the free tools in a tinted card. */
.mn-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mn-sub { display: grid; gap: 2px; align-content: start; min-width: 0; }
.mn-sub + .mn-sub:not(.mn-free) { padding-left: 14px; border-left: 1px solid var(--border); }
.nav-signup { position: relative; overflow: visible; }
.nav-signup .nav-free-tag { position: absolute; left: 50%; top: 0; translate: -50% -55%; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--accent-text); border: 1px solid var(--accent); font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.mn-more { display: grid; gap: 14px; align-items: start; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.mn-free { padding: 0 4px 12px; border-radius: 14px; background: var(--accent-softer); border: 1px solid var(--accent-soft); }
.mn-free .mn-card:hover, .mn-free .mn-card:focus-visible { background: var(--surface); }
.mn-free h5 { margin-top: 5px; }
.mn-free .mn-foot-link { margin: 6px 12px 0; font-size: 14px; }
.mn-card.plain { grid-template-columns: minmax(0, 1fr); }
.mn-sub h5, .mm-label { margin: 6px 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.mn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px -10px -10px; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 16px 16px; font-size: 14px; color: var(--text-2); }
.mn-foot-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-text); }

/* Menu button and the full-height phone panel. */
.nav .menu-btn { display: inline-flex; width: 44px; height: 44px; justify-content: center; padding: 0; color: var(--text); }
.mm { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 44; background: var(--surface); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--border); animation: mn-in .16s ease-out; }
.mm[hidden] { display: none; }
.mm-inner { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); display: grid; }
/* The page behind stays put; the blurred bar would be the containing block of the fixed panel, so drop the blur. */
/* Lock the root only: overflow on body as well makes body its own scroll container, and the
   sticky bar then sticks to the top of the page instead of the screen (it vanished, with the
   close button, when the menu was opened after scrolling). */
html.mm-open { overflow: hidden; }
html.mm-open .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
.mm-account { display: grid; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.mm-group { border-bottom: 1px solid var(--border); }
.mm-head { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 6px; font-family: var(--font); font-size: 18px; font-weight: 800; color: var(--text); cursor: pointer; }
.mm-head.here > span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.mm-caret { color: var(--muted); transition: transform .18s ease; flex: none; }
.mm-head[aria-expanded="true"] .mm-caret { transform: rotate(180deg); }
.mm-body { display: grid; gap: 2px; padding: 0 0 14px; }
.mm-body[hidden] { display: none; }
.mm-body .mm-label:not(:first-child) { margin-top: 14px; }
.mm-list { display: grid; gap: 2px; }
.mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mm .mn-card { min-height: 48px; padding: 8px; }
.mm .mn-card.compact { min-height: 44px; padding: 6px 8px; }
.mm .mn-text b { overflow-wrap: anywhere; }
.mm-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 14px; text-decoration: none !important; }
.mm-foot b { color: var(--accent-text); }
.mm-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 6px; font-size: 18px; font-weight: 800; color: var(--text); text-decoration: none !important; border-bottom: 1px solid var(--border); }
.mm-account .mm-link { min-height: 48px; font-size: 16px; font-weight: 700; border-bottom: 0; border-radius: 10px; padding: 0 10px; }
.mm-account .mm-link svg { color: var(--accent-text); }
.mm-link[aria-current="page"] { color: var(--accent-text); }
.mm-cta { display: grid; gap: 10px; padding-top: 20px; }
.mm-cta .btn { width: 100%; justify-content: center; }

/* Desktop: the dropdown bar replaces the menu button. When it does not fit on one line
   (long labels, or signed in on a narrower laptop) fitTopbar() adds .collapsed. */
@media (min-width: 1024px) {
  .topbar:not(.collapsed) .mainnav { display: block; }
  .topbar:not(.collapsed) .nav .menu-btn, .topbar:not(.collapsed) .mm { display: none; }
}
@media (min-width: 1024px) { .topbar.signed .container { gap: 12px; } }
/* Signed in with the menu button: Reports moves into the menu and Settings shows its icon only. */
@media (max-width: 1199px) {
  .mainnav { margin-left: 0; }
  .mn-trigger, .mn-link { padding-inline: 8px; }
  .mn-trigger.here::after, .mn-link[aria-current="page"]::after { left: 8px; right: 8px; }
}
@media (min-width: 1024px) {
  /* Signed in with the dropdowns showing: the Settings menu is its icon only, to leave room. */
}
@media (max-width: 600px) {
  /* Long hero words (German "Wähle einen Gewinner.") wrap instead of pushing the page sideways. */
  .lp-hero h1 .mark { white-space: normal; }
  .mm { top: 58px; }
  .nav a.navlink.hide-phone, .nav .theme-toggle { display: none; }
  .topbar:not(.signed) .nav .nav-login { display: none; }
  .topbar:not(.signed) .nav .menu-btn { display: inline-flex; }
  .nav .menu-btn { width: 40px; }
}

/* ---------- Guest list & members-only access ---------- */
.gl-warn { color: var(--danger); font-weight: 600; }
.gl-page { padding-bottom: 48px; display: grid; gap: 16px; }
.gl-page h3 { font-size: 17px; }
.gl-verify { display: grid; gap: 6px; }
.gl-verify-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.gl-verify-row .select.sm { width: auto; }
.gl-requests { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.gl-request { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); }
.gl-search { padding: 0 16px; }
.gl-actions { white-space: nowrap; text-align: right; }
.gl-actions .btn + .btn { margin-left: 6px; }
.gl-used { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }


/* Big screen passcode / private gate (public/js/screen-gate.js): readable across a hall. */
.screen-gate { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; align-content: center; gap: 28px; padding: 32px 16px; background: radial-gradient(circle at 50% 0%, #2a2d57, #12142b 70%); color: #fff; text-align: center; }
.screen-gate .sg-mark { width: clamp(44px, 6vw, 72px); height: auto; }
.sg-card { display: grid; gap: 16px; justify-items: center; width: min(640px, 100%); }
.sg-card h1 { margin: 0; font-size: clamp(32px, 6vw, 64px); line-height: 1.05; color: #fff; }
.sg-card p { margin: 0; font-size: clamp(16px, 2vw, 22px); line-height: 1.5; color: rgba(255,255,255,.82); max-width: 34em; }
.sg-card .sg-kicker { font-size: clamp(14px, 1.6vw, 18px); text-transform: uppercase; letter-spacing: .14em; color: #ffb4a9; font-weight: 700; }
.sg-card .sg-small { font-size: 15px; color: rgba(255,255,255,.6); }
.sg-form { display: grid; gap: 14px; justify-items: center; width: 100%; margin-top: 8px; }
.sg-code { width: min(420px, 100%); padding: 14px 18px; border-radius: 16px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: 700 clamp(36px, 6vw, 60px)/1.1 var(--font-mono); letter-spacing: .32em; text-align: center; text-indent: .32em; }
.sg-code:focus { outline: none; border-color: #ff8a7a; box-shadow: 0 0 0 4px rgba(255,138,122,.25); }
.sg-code::placeholder { color: rgba(255,255,255,.25); }
.sg-error { min-height: 1.5em; color: #ffb4a9 !important; font-weight: 600; }

/* Event page → Big screen access. */
.sa-code { font: 700 26px/1.1 var(--font-mono); letter-spacing: .12em; }

/* Door scanner (/c/:id/scan): phone or iPad at the ballroom entrance. */
.door { min-height: 100vh; min-height: 100dvh; background: #12142b; color: #fff; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 32px; }
.door h1, .door h2 { color: #fff; }
.door-head { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; align-items: flex-end; max-width: 980px; width: 100%; margin: 0 auto; }
.door-head h1 { font-size: clamp(20px, 4vw, 28px); margin: 2px 0 0; }
.door-kicker { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #ffb4a9; font-weight: 700; }
.door-who { display: grid; gap: 4px; justify-items: end; text-align: right; }
.door-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13.5px; font-weight: 600; }
.door-counts { font-size: 13.5px; color: rgba(255,255,255,.75); }
.door-stage { position: relative; width: 100%; max-width: 980px; margin: 0 auto; aspect-ratio: 4 / 3; max-height: 62vh; border-radius: 18px; overflow: hidden; background: #000; }
.door-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.door-frame { position: absolute; inset: 14% 22%; border: 3px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); pointer-events: none; }
.door-idle { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 14px; padding: 20px; text-align: center; background: radial-gradient(circle at 50% 30%, #2a2d57, #12142b 75%); }
.door-stage.idle .door-idle { display: grid; }
.door-stage.idle .door-frame { display: none; }
.btn.xl { font-size: 20px; padding: 18px 30px; border-radius: 16px; gap: 10px; }
.door-note { margin: 0; max-width: 30em; color: #ffd2cb; font-size: 15px; }
.door-result { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 8px; padding: 20px; text-align: center; color: #fff; animation: toastIn .15s ease-out; }
.door-result.ok { background: #0e8c5c; }
.door-result.already { background: #b8720a; }
.door-result.bad { background: #be281e; }
.door-result:not([hidden]) ~ .door-idle { visibility: hidden; }
.door-result-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.2); }
.door-result-title { font-size: clamp(26px, 6vw, 44px); font-weight: 800; line-height: 1.1; }
.door-result-line { font-size: clamp(16px, 3.4vw, 22px); line-height: 1.35; }
.door-name { display: block; font-size: clamp(24px, 5.4vw, 38px); }
.door-next { margin-top: 10px; background: rgba(255,255,255,.95); color: #12142b; border: 0; }
.door-search { width: 100%; max-width: 980px; margin: 4px auto 0; display: grid; gap: 10px; }
.door-search h2 { font-size: 17px; margin: 0; }
.door-search .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.door-found { display: grid; gap: 8px; }
.door-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); }
.door-row .muted { color: rgba(255,255,255,.65) !important; }
.door-row .badge { background: rgba(255,255,255,.14); color: #fff; white-space: normal; text-align: right; }
.door-blocked { margin: auto; display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 520px; padding: 24px; }
.door-blocked p { color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.55; }
@media (max-width: 600px) { .door-who { justify-items: start; text-align: left; } .door-stage { aspect-ratio: 3 / 4; max-height: 64vh; } .door-frame { inset: 20% 12%; } }

/* A guest's entry QR ticket (personal link) and the printable ticket sheet. */
.ci-ticket { text-align: center; align-items: center; }
.ci-ticket .ci-name { margin: 0; }
.ci-ticket-table { margin: 0; font-size: 18px; font-weight: 700; }
.ci-ticket-qr { width: min(300px, 78vw); height: min(300px, 78vw); margin: 6px auto; padding: 14px; background: #fff; border-radius: 16px; }
.ci-status { display: grid; gap: 2px; justify-items: start; }
.assist-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
.assist-row.off b { opacity: .55; }
.assist-row .tiny { color: var(--text-2); }
.ticket-sheet { display: none; }
@media print {
  body.printing-tickets > *:not(.ticket-sheet) { display: none !important; }
  body.printing-tickets .ticket-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; padding: 6mm; background: #fff; }
  .ticket-card { display: grid; justify-items: center; gap: 2mm; padding: 5mm; border: 1px dashed #999; border-radius: 3mm; break-inside: avoid; text-align: center; color: #000; font-size: 10pt; }
  .ticket-card .qr { width: 42mm; height: 42mm; }
  .ticket-card b { font-size: 12pt; }
  .ticket-card small { color: #555; }
}

/* Scrollbars everywhere: thin, rounded and in the theme's colours (no grey track). */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 40%, transparent); }

/* The navbar always fits (site-nav.js tighten()): icons only, then fewer items, then a shorter button. */
.topbar.tight-1 .prefs-lang, .topbar.tight-1 .prefs-cur { display: none; }
.topbar.signed.tight-2 .nav a.navlink { display: none; }
/* Desktop, bar too long: tighter dropdown labels (fitTopbar), and Dashboard / Reports / passes in the account menu. */
.topbar.tight-nav .mn-trigger, .topbar.tight-nav .mn-link { padding-inline: 6px; font-size: 13.5px; }
.topbar.tight-nav .mainnav { margin-left: 0; }
.topbar.tight-4 .theme-toggle { display: none; }
.topbar.tight-3 .nav > .btn { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; padding-left: 9px; padding-right: 9px; }
.topbar.tight-3 .container { gap: 4px; }
.topbar.tight-3 .nav { gap: 2px; }
/* Long words in other languages wrap instead of running off the screen. */
.eyebrow { overflow-wrap: anywhere; }
.review-cta .btn, .lp-final .btn, .cta .btn { white-space: normal; text-align: center; max-width: 100%; }
/* The event pass line ("Up to 1,000 guests, every feature · 19 h left (until …)") wraps on phones. */
.pass-panel .grow { min-width: 0; }
.pass-panel .small { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

/* Skeleton loading (lib.js skel / skelPage): soft shimmering shapes of the page. */
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%, var(--surface-2) 75%); background-size: 300% 100%; animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.skel-page { display: grid; gap: 14px; padding-top: 36px; padding-bottom: 60px; }
.skel-page.bare { max-width: 640px; margin: 0 auto; padding: 48px 20px; }
.skel-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 10px 0; }
.skel-card { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }

/* Page numbers under long lists */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); }
.pager-info { font-size: 13px; color: var(--muted); }
.pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-num { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.pager-num:hover:not(:disabled) { border-color: var(--border-strong); }
.pager-num[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pager-num:disabled { opacity: .4; cursor: default; }
.pager-gap { padding: 0 2px; color: var(--muted); }
@media (max-width: 520px) { .pager { justify-content: center; } }

/* Event page: the guest list button in the header */
.pager-size { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-left: auto; }
.pager-size .select { width: auto; min-width: 76px; height: 34px; padding-top: 0; padding-bottom: 0; line-height: 32px; font-size: 14px; }
.pager-btns + .pager-size { margin-left: 0; }
.gl-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.gl-mode > span { display: flex; flex-direction: column; gap: 2px; }
.gl-mode input { margin-top: 3px; }

/* Sections that open on a click (Team, Leaderboard, categories, the brief…): a chevron on the
   right says so, and turns when open. */
:is(.team-card, details.card, .bp-called, .ag-fb) > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; user-select: none; }
:is(.team-card, details.card, .bp-called, .ag-fb) > summary::-webkit-details-marker { display: none; }
:is(.team-card, details.card, .bp-called, .ag-fb) > summary::after {
  content: ''; flex-shrink: 0; margin-left: auto; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .18s ease;
}
:is(.team-card, details.card, .bp-called, .ag-fb)[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
:is(.team-card, details.card) > summary:hover::after { border-color: var(--text); }
.bp-called > summary::after { border-color: currentColor; }

/* "PNG, JPG or WebP · up to 1 MB" next to organisers' upload buttons */
.upload-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.upload-note svg { flex-shrink: 0; }
.s-text .upload-note { margin-top: 2px; }
.choice-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .choice-cards.two { grid-template-columns: 1fr; } }

/* Event page: the order of sections on guests' phones */
.hub-order { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; max-width: 420px; }
.hub-order li { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14px; }
.hub-order-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text-2); }

/* Landing: the real big screens */
/* The stage: a dark room, two light beams, the screen glowing with what it shows, a floor reflection. */
.ls-stage { position: relative; padding: 34px 3% 0; border-radius: 28px; background: radial-gradient(120% 90% at 50% 0%, #2a2d5c 0%, #12142a 55%, #0b0c1c 100%); overflow: hidden; perspective: 1400px; isolation: isolate; }
.ls-beam { position: absolute; top: -20%; width: 34%; height: 140%; background: linear-gradient(180deg, rgba(255, 236, 190, .22), rgba(255, 236, 190, 0) 70%); filter: blur(18px); transform-origin: top center; z-index: 0; pointer-events: none; }
.ls-beam.a { left: 6%; transform: rotate(18deg); animation: ls-sweep 9s ease-in-out infinite alternate; }
.ls-beam.b { right: 6%; transform: rotate(-18deg); animation: ls-sweep 11s ease-in-out infinite alternate-reverse; }
@keyframes ls-sweep { from { transform: rotate(22deg); opacity: .55; } to { transform: rotate(8deg); opacity: 1; } }
.ls-beam.b { animation-name: ls-sweep-b; }
@keyframes ls-sweep-b { from { transform: rotate(-22deg); opacity: .55; } to { transform: rotate(-8deg); opacity: 1; } }
.ls-glow { position: absolute; inset: 14% 10% 18%; background: center / cover no-repeat; filter: blur(60px) saturate(1.6); opacity: .65; z-index: 0; transition: background-image .8s ease; pointer-events: none; }
.ls-screen.ls-real { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 9; padding: 0; background: #12142a; border: 10px solid #1d1f3b; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  transform: rotateX(var(--rx, 4deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ls-frame:not(.live) .ls-screen.ls-real { transform: rotateX(14deg) scale(.94); opacity: .6; }
.ls-frame.live .ls-screen.ls-real { animation: ls-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ls-rise { from { transform: rotateX(14deg) scale(.94); opacity: .6; } }
.ls-real .ls-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.03); transition: opacity .7s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ls-real .ls-shot.on { opacity: 1; transform: none; }
/* A sheen that follows the pointer across the glass. */
.ls-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(60% 80% at var(--gx, 30%) -10%, rgba(255, 255, 255, .12), transparent 60%); }
.ls-floor { position: relative; z-index: 0; height: 46px; margin: 0 6%; background: radial-gradient(50% 100% at 50% 0%, rgba(120, 130, 255, .28), transparent 75%); filter: blur(6px); }
.ls-stage.still .ls-beam { animation: none; }
@media (prefers-reduced-motion: reduce) { .ls-beam, .ls-frame.live .ls-screen.ls-real { animation: none; } .ls-real .ls-shot { transition: none; transform: none; } }
.ls-caption { text-align: center; margin-top: 12px; }
@media (max-width: 720px) {
  .ls-screen.ls-real { aspect-ratio: 16 / 9; min-height: 0; border-width: 5px; border-radius: 12px; }
  .ls-stage { padding: 18px 3% 0; border-radius: 18px; }
  .ls-floor { height: 24px; }
  .ls-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; }
  .ls-tabs::-webkit-scrollbar { display: none; }
  .ls-tab { flex-shrink: 0; padding: 8px 14px; font-size: 13.5px; }
}

/* ---------- Check-in: the VIP welcome screen ---------- */
.vip-main { position: relative; display: grid; place-items: center; text-align: center; padding: 2vh 5vw 6vh; }
.vip-idle, .vip-spot { grid-area: 1 / 1; width: 100%; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.vip-headline { margin: 0 auto; max-width: 18ch; font-size: clamp(40px, 6.4vw, 104px); line-height: 1.05; letter-spacing: -.02em; color: var(--accent); text-wrap: balance; }
.vip-recent { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 5vh; max-width: 1200px; margin-inline: auto; }
.vip-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-size: clamp(14px, 1.3vw, 20px); }
.vip-chip small { color: var(--accent); font-weight: 600; font-size: .75em; }
.vip-spot { opacity: 0; transform: scale(.94); pointer-events: none; }
.vip-stage.vip-on .vip-idle { opacity: 0; transform: scale(1.04); }
.vip-stage.vip-on .vip-spot { opacity: 1; transform: none; }
.vip-card { display: grid; justify-items: center; gap: 1.6vh; }
.vip-kicker { font-size: clamp(20px, 2.4vw, 40px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.vip-name { font-size: clamp(48px, 7.6vw, 132px); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; text-shadow: 0 6px 40px rgba(0, 0, 0, .45); }
.vip-stage.vip-on .vip-name { animation: vip-in 1s cubic-bezier(.2, .7, .2, 1) both; }
.vip-title { font-size: clamp(20px, 2.2vw, 36px); color: rgba(255, 255, 255, .78); }
.vip-table { margin-top: 1vh; padding: .35em 1em; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-weight: 700; font-size: clamp(18px, 1.9vw, 30px); }
@keyframes vip-in { from { opacity: 0; transform: translateY(24px); letter-spacing: .04em; } }
.vip-stage .stage-count:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .vip-idle, .vip-spot { transition: none; } .vip-stage.vip-on .vip-name { animation: none; } }

/* Upgrading an event's pass: new price, less the current pass, = what is paid. */
.upgrade-sum { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--surface-2, var(--surface)); font-size: 14px; }
.upgrade-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.upgrade-sum > div > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.upgrade-sum .total { border-top: 1px solid var(--border); padding-top: 6px; font-weight: 700; }
/* "Have a promo code?" in the buy dialogs (public/js/promo.js). */
.promo-box { display: grid; gap: 8px; padding: 12px 14px; border: 1px dashed var(--accent-line); border-radius: var(--radius); background: var(--accent-softer); }
.promo-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.promo-row .btn { background: var(--surface); }
.promo-row { display: flex; gap: 8px; }
.promo-row .promo-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.promo-row .promo-input::placeholder { text-transform: none; letter-spacing: 0; }
.promo-note { margin: 0; min-height: 1.4em; color: var(--text-2); }
.promo-note.ok { color: var(--success); font-weight: 600; }
.promo-note.error { color: var(--danger); }
.price-col .btn[aria-disabled="true"] { opacity: .6; cursor: default; pointer-events: none; }
.price-col .btn.block.up, .price-col .btn[aria-disabled="true"] { white-space: normal; height: auto; min-height: 44px; padding-block: 8px; line-height: 1.25; text-align: center; }

/* Dev B: focus rings are blue, not the error red (UX #8). Red stays for aria-invalid only. */
:root, [data-theme-mode="light"] { --focus: #2563eb; --focus-soft: rgb(37 99 235 / .22); }
[data-theme-mode="dark"] { --focus: #7aa7ff; --focus-soft: rgb(122 167 255 / .28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme-mode="light"]) { --focus: #7aa7ff; --focus-soft: rgb(122 167 255 / .28); } }
.input:focus:not([aria-invalid="true"]), .select:focus:not([aria-invalid="true"]), .textarea:focus:not([aria-invalid="true"]) { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-soft); }
:focus-visible { outline-color: color-mix(in srgb, var(--focus) 70%, transparent); }

/* Dev B: dashboard events grouped, names never squeezed by the pass badge on phones (UX #7). */
.dash-past { margin-top: 26px; }

/* Dev A: lucky-draw controller — big screen and connection state (M2, UX #11) */
.dc-conn { display: flex; flex-direction: column; gap: 8px; }
.dc-conn:empty { display: none; }
.dc-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; line-height: 1.35; }
.dc-chip > span:not(.dc-spin) { flex: 1 1 180px; min-width: 0; }
.dc-chip .btn { min-height: 44px; }
.dc-chip.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); background: color-mix(in srgb, var(--success) 9%, var(--surface)); font-weight: 600; }
.dc-chip.amber { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); font-weight: 600; }
.dc-chip.warn { color: var(--text); border-color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.dc-chip.warn b { color: var(--warning); }
.dc-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.dc-dot.hollow { background: transparent; border: 2px solid currentColor; }
.dc-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; flex: none; animation: dcSpin 0.9s linear infinite; }
@keyframes dcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dc-spin { animation: none; border-right-color: currentColor; opacity: .6; } }
/* Header buttons: 44 px, and on phones an icon with a small label underneath. */
.dc-head-actions .btn.sm { min-height: 44px; }
@media (min-width: 481px) and (max-width: 1199px) {
  .dc-head-actions { width: 100%; flex-wrap: nowrap; }
  .dc-head-actions > * { flex: 1 1 0; }
  .dc-head-actions > .icon-only { flex: 0 0 44px; }
  .dc-head-actions > *, .dc-head-actions .btn.sm, .dc-head-actions .pm-button { width: 100%; min-width: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
  .dc-head-actions .pm-button .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
  .dc-head-actions { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .dc-head-actions .btn.sm { height: auto; min-height: 48px; padding: 4px 2px; flex-direction: column; gap: 2px; }
  .dc-head-actions .hide-xs-text { display: block; font-size: 11px; line-height: 1.15; font-weight: 600; white-space: normal; text-align: center; }
}
/* Big screen: "Reconnecting…" while the feed cannot reach the server (the last winner stays). */
.stage-reconnect { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: none; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(20, 16, 10, .78); color: #ffd98a; font-size: 15px; font-weight: 600; }
.stage-reconnect.on { display: inline-flex; }
.stage-waiting .stage-reconnect { position: static; transform: none; font-size: 22px; margin-bottom: 12px; }

/* Dev B: sentence case everywhere (UX #21). Labels keep their weight and colour, not capitals. */
.prefs-col h5, .footer-col h4, .stage-rail h4, .cs-timer-label, .section-title, .field-row.head span, .dc-title span, .dc-label, .ek-n, .set-group-title, .eg-type, .cs-join-kicker, .qp-kicker, .qs-kicker, .qs-ready span, .qh-answer h2, .hub-head small, .hub h2, .pk-post-at, .ci-hello, .ci-seat-k, .cd-done-table small, .cd-table small, .bp-latest-meta small, .bp-pattern small, .bp-winners small, .bs-pattern small, .bs-call-kicker, .bs-corner small, .bs-win-pattern, .ag-tag, .hub-ag .hub-ag-line small, .ag-day, .ag-lobby-top small, .ag-lobby-label, .ag-lobby-room h2, .lb-stage-list h2, .rp-kicker, .mn-sub h5, .mm-label, .sg-card .sg-kicker, .door-kicker, .vip-kicker { text-transform: none; letter-spacing: .01em; }
.prefs-col h5, .section-title, .field-row.head span, .dc-title span, .dc-label, .ek-n, .set-group-title, .mn-sub h5, .mm-label,
.hub-head small, .hub h2 { font-size: 13px; font-weight: 700; }
.footer-col h4 { font-size: 14px; font-weight: 700; }

/* Dev B: tap targets on touch screens (UX #12): 44 px icon buttons, taller links, delete apart from edit. */
@media (pointer: coarse) {
  .btn.icon.sm, .qz-q-head .btn.icon.sm, .qz-opt .btn.icon.sm { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .lp .more, .footer-col a, .footer-legal a, .footer-contact { display: inline-flex; align-items: center; min-height: 44px; }
  .pw-toggle { min-height: 40px; min-width: 52px; }
  /* Text links standing on their own (agenda session titles, report rows, "Made with Yaypick"). */
  .ag-title-btn { min-height: 32px; }
  .rps-row-t .t, .empty-row a, .made-with a { display: inline-flex; align-items: center; min-height: 32px; }
}
/* Dev A: draw log on the draw page (M5) */
.draw-log { margin-top: 8px; border-top: 1px solid var(--border); }
.draw-log > p { margin: 12px 22px; }
.draw-log > .dt { margin: 0 22px 22px; }
.draw-log-kind { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.draw-log-kind::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.draw-log-kind.k-draw::before { background: var(--success); }
.draw-log-kind.k-redraw::before { background: var(--gold, var(--warning)); }
.draw-log-kind.k-reset::before, .draw-log-kind.k-clear::before { background: var(--danger, #c0392b); }
.dt td.draw-log-names { min-width: 180px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .dt td.draw-log-names { min-width: 0; } }
@media (max-width: 480px) { .draw-log > p { margin: 12px 16px; } .draw-log > .dt { margin: 0 16px 16px; } }

/* Dev B: event page hierarchy (UX #4): one primary action, activities first, settings folded, quiet offer last. */
.ev-head { align-items: flex-end; }
.ev-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ev-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ev-start { margin: 4px 0 6px; }
.ev-start h2 { font-size: 20px; margin-bottom: 10px; }
.ev-start ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ev-start li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.ev-start li:first-child { border-top: 0; }
.ev-start li p { margin-top: 2px; }
.ev-start-n { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--surface-2); color: var(--text-2); }
.ev-start li:first-child .ev-start-n { background: var(--accent); color: var(--on-accent); }
.ev-activities { margin-top: 18px; margin-bottom: 26px; }
/* Every activity tab stays visible (long Malay labels wrap to a second row instead of hiding off the edge). */
.ev-tabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
.ev-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 18px !important; text-align: center; }
.ev-empty p { max-width: 440px; margin: 0 0 8px; }
.ev-empty-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.ev-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ev-add { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; min-height: 44px; }
.ev-add:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ev-add b { display: block; }
.ev-add small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; }
.ev-add-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
#ev-pass { margin: 0 0 18px; }
#ev-pass .pass-panel .btn.primary, .ev-offer .ycs-card .btn.primary { background: transparent; color: var(--accent-text); border-color: var(--accent); filter: none; }
.ev-offer { margin-top: 30px; }
.ev-offer .ycs-card { background: var(--surface); border-style: dashed; }
@media (max-width: 560px) {
  .ev-head-actions { justify-content: flex-start; width: 100%; }
  .ev-head-actions .btn.primary { order: -1; flex: 1 1 100%; }
  .ev-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; border-bottom: 0; }
  .ev-tabs button { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; min-height: 40px; }
  .ev-tabs [aria-selected="true"] { border-color: var(--accent); }
  .ev-add-grid { grid-template-columns: minmax(0, 1fr); }
  .ev-start li { flex-wrap: wrap; align-items: flex-start; }
  .ev-start li > .grow { flex: 1 1 calc(100% - 44px); min-width: 0; }
  .ev-start li > .btn { margin-left: 44px; }
  .ev-start li > .btn.primary { flex: 1 1 auto; }
}
/* Dev A: guests turned away at the pass limit (M6) */
.turned-away { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--danger, #c0392b) 45%, var(--border)); background: color-mix(in srgb, var(--danger, #c0392b) 8%, var(--surface)); color: var(--text); margin-bottom: 12px; }
.turned-away .grow { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.turned-away b { font-size: 15px; }
.turned-away .small { color: var(--text-2, var(--muted)); }
.turned-away .ta-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; color: var(--danger, #c0392b); background: color-mix(in srgb, var(--danger, #c0392b) 14%, var(--surface)); }
.turned-away .btn { min-height: 44px; }
.turned-away.compact { margin-bottom: 0; padding: 10px 14px; }
@media (max-width: 480px) { .turned-away .btn { width: 100%; justify-content: center; } }
/* Dev A: pass ends within 12 hours (M12) */
.ends-soon { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 11%, var(--surface)); color: var(--text); font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.ends-soon > svg { color: var(--warning); flex: none; margin-top: 2px; }
.ends-soon b { color: var(--warning); }

/* Event report: each lucky draw's log, folded under its winners. */
.rp-log { margin-top: 10px; }
.rp-log > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 0; }
.rp-log[open] > summary { margin-bottom: 6px; }
@media print { .rp-log { display: block; } .rp-log > summary { color: inherit; } }

/* Pricing: the "your night is covered" promise. Footer: the support address. Conference perks on the pass card. */
.state-banner.covered { border-color: color-mix(in srgb, var(--ok, #119e72) 35%, var(--border)); }
.state-banner.covered .icon, .state-banner.covered svg { color: var(--ok, #119e72); }
.footer-contact { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
/* A row of its own at the bottom right of the footer, just above the line. */
.footer-top > .footer-contact { grid-column: 1 / -1; justify-self: end; margin-bottom: -16px; font-size: 13px; }
.conf-perks { margin: 6px 0 0; display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }

/* Trademark sign after the Yaypick wordmark. */
.tm { font-size: 0.45em; font-weight: 600; letter-spacing: 0; margin-left: 1px; position: relative; top: -0.15em; vertical-align: super; line-height: 0; }
.brand .tm, .hub-brand .tm { margin-left: -8px; } /* both have a 10px gap between their children */

/* =========================================================================
   Free tools without sign-up (/tools, /tools/lucky-draw, /tools/spin-wheel)
   The stage is a dark show stage in both themes, like the product's big screens;
   big-screen mode fills the screen (or the window). The rest follows the site theme.
   ========================================================================= */

/* The stage: prize, the reveal, the buttons, under two spotlights. */
.ft-stage { --gold-1: #ffd75e; --gold-2: #f1b73a; --s-ink: #ffffff; --s-dim: #a3a6c6; --s-line: rgba(255, 255, 255, .1);
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px; min-height: 480px; overflow: hidden;
  color: var(--s-ink); border-radius: 20px; border: 1px solid #2b2e57; --row: 58px;
  background: radial-gradient(70% 55% at 50% 42%, rgba(255, 194, 26, .09), transparent 70%), radial-gradient(120% 85% at 50% 0%, #26295a 0%, #121433 55%, #0a0b1e 100%);
  box-shadow: 0 30px 60px -30px rgba(10, 11, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .07); }
/* Two soft beams from the top corners, and a glow on the floor. */
.ft-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6; transition: opacity .6s;
  background: conic-gradient(from 130deg at 12% -4%, transparent 0deg, rgba(255, 236, 190, .2) 13deg, transparent 26deg),
    conic-gradient(from 204deg at 88% -4%, transparent 0deg, rgba(255, 236, 190, .2) 13deg, transparent 26deg);
  -webkit-mask-image: linear-gradient(#000 30%, transparent 95%); mask-image: linear-gradient(#000 30%, transparent 95%); filter: blur(5px); }
.ft-stage::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -60px; height: 140px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(217, 58, 43, .28), transparent); }
.ft-prize .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; font-weight: 800; color: #ffe7a3;
  border: 1.5px solid rgba(255, 215, 94, .6); background: linear-gradient(180deg, rgba(255, 215, 94, .18), rgba(255, 215, 94, .06)); box-shadow: 0 0 24px -6px rgba(255, 194, 26, .5); overflow-wrap: anywhere; }

/* Waiting for the first draw: the names drift round a counter. */
/* A dark pool behind the counter, so drifting names never run through the words. */
.ft-idle::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(520px, 92%); height: 78%; translate: -50% -50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(12, 13, 34, .92) 45%, rgba(12, 13, 34, 0)); }
.ft-idle-ico { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; color: #2a1a00;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold-1) 45%, #c8891a 100%); box-shadow: 0 0 0 6px rgba(255, 215, 94, .12), 0 0 50px rgba(255, 194, 26, .45);
  animation: ft-breathe 2.6s ease-in-out infinite; }
.ft-drift span { position: absolute; max-width: 27%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; font-size: 15px; color: #c9cbf0;
  padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); opacity: 0;
  animation: ft-drift var(--t, 9s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ft-drift { 0% { opacity: 0; transform: translate(-12px, 14px) scale(.94); } 25%, 70% { opacity: .55; } 100% { opacity: 0; transform: translate(14px, -18px) scale(1); } }
@keyframes ft-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255, 215, 94, .08), 0 0 70px rgba(255, 194, 26, .6); } }

/* The reel: five rows, the middle one framed and lit (as on the lucky-draw stage). */
.ft-reel { position: relative; width: 100%; height: calc(var(--row) * 5); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.ft-reel-frame { position: absolute; left: 0; right: 0; top: calc(var(--row) * 2); height: var(--row); pointer-events: none;
  border-top: 2px solid rgba(255, 215, 94, .85); border-bottom: 2px solid rgba(255, 215, 94, .85);
  background: linear-gradient(90deg, transparent, rgba(255, 215, 94, .14) 25%, rgba(255, 215, 94, .14) 75%, transparent); box-shadow: 0 0 30px -6px rgba(255, 194, 26, .5); }
/* Arrows at both ends of the frame. */

/* The winner, spelled out in a pool of light. */
.ft-win { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; width: 100%; min-width: 0; padding: 20px 0; }
.ft-win > :not(.ft-rays) { position: relative; z-index: 1; }
.ft-rays { position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; translate: -50% -50%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 215, 94, .1) 0 8deg, transparent 8deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 72%); mask-image: radial-gradient(closest-side, #000 15%, transparent 72%);
  animation: ft-rays 24s linear infinite, ft-fade .8s ease-out; }
@keyframes ft-rays { to { rotate: 360deg; } }
@keyframes ft-fade { from { opacity: 0; } }
.ft-win-label { display: inline-block; font-weight: 800; font-size: 15px; color: #2a1a00; padding: 5px 16px; border-radius: 999px; overflow-wrap: anywhere; max-width: 100%;
  background: linear-gradient(180deg, #ffe58f, var(--gold-2)); box-shadow: 0 6px 20px -6px rgba(255, 194, 26, .8); }
.ft-name { font-weight: 800; font-size: clamp(36px, 5.6vw, 76px); line-height: 1.05; letter-spacing: -0.035em; display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; overflow-wrap: anywhere;
  color: #fff; text-shadow: 0 0 28px rgba(255, 194, 26, .55), 0 4px 0 rgba(0, 0, 0, .25); }
.ft-name .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotateX(80deg) scale(.7); filter: blur(8px);
  animation: letterIn .55s cubic-bezier(.2, 1.3, .35, 1) forwards; animation-delay: calc(var(--i) * var(--gap)); }
.ft-name.pop, .ft-wheel-win:not([hidden]) { animation: ft-pop .35s ease-out; }
@keyframes ft-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.ft-wheel-win:not([hidden]) { animation: ft-pop-centre .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ft-pop-centre { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* The wheel: a turning canvas under a fixed gold rim with bulbs, the hub, the flapper at the top, and a stand. */
.ft-rig { position: relative; width: min(100%, 480px); padding-bottom: 7%; margin: 4px auto 10px; }
.ft-stand { position: absolute; left: 50%; bottom: 0; width: 46%; height: 30%; translate: -50% 0; pointer-events: none; }
.ft-stand::before { content: ""; position: absolute; left: 30%; right: 30%; top: 0; bottom: 14%; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #4b3409, #d8ab48 35%, #fff0b8 48%, #b8862a 62%, #4b3409); }
.ft-stand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-radius: 50% / 70%;
  background: linear-gradient(180deg, #f0cd66, #8a6418 60%, #3d2a06); box-shadow: 0 14px 22px -6px rgba(0, 0, 0, .7); }
.ft-wheel { position: relative; width: 100%; aspect-ratio: 1; z-index: 1; }
.ft-wheel-canvas { display: block; width: 100%; height: 100%; }
.ft-bulbs { position: absolute; inset: 0; pointer-events: none; }
.ft-bulbs i { position: absolute; left: 50%; top: 50%; width: var(--bs, 12px); height: var(--bs, 12px); margin: calc(var(--bs, 12px) / -2); border-radius: 50%;
  transform: rotate(var(--a)) translateY(calc(var(--rb, 200px) * -1));
  background: radial-gradient(circle at 40% 35%, #ffffff, #fff1b0 30%, #ffc93c 62%, #d98b0b 100%);
  box-shadow: 0 0 calc(var(--bs, 12px) * .7) calc(var(--bs, 12px) * .15) rgba(255, 205, 80, .85);
  animation: ft-twinkle 1.4s steps(1, end) infinite; animation-delay: calc(var(--i) * -0.7s); }
@keyframes ft-twinkle { 0% { opacity: 1; } 50% { opacity: .22; } }
.ft-wheel.spinning .ft-bulbs i { animation: ft-chase .55s linear infinite; animation-delay: calc(var(--i) * -0.0229s); }
@keyframes ft-chase { 0%, 20% { opacity: 1; } 45%, 100% { opacity: .2; } }
.ft-wheel.stopped .ft-bulbs i { animation: ft-flash .32s steps(1, end) 7; }
@keyframes ft-flash { 0% { opacity: 1; } 50% { opacity: .15; } }
.ft-wheel-hub { position: absolute; left: 50%; top: 50%; width: 19%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fffaf0 0 52%, transparent 53%), conic-gradient(from -60deg, #8a6418, #f6dc86, #b6862a, #fff3c2, #9c7020, #f0cd66, #7c5713, #f6dc86, #8a6418);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 2px #3d2a06, inset 0 -6px 10px rgba(0, 0, 0, .25); }
.ft-wheel-hub::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .18), inset 0 -2px 3px rgba(255, 255, 255, .8);
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .7), transparent 50%); }
.ft-wheel-hub img { width: 44%; height: auto; position: relative; z-index: 0; }
/* The rim's metal on the hub too; an event logo fills more of it. */
.ft-wheel-hub.rim-silver { background: radial-gradient(circle at 50% 50%, #ffffff 0 52%, transparent 53%), conic-gradient(from -60deg, #5d6470, #f4f6f9, #9aa3b0, #ffffff, #6e7682, #e3e7ec, #4f5560, #f4f6f9, #5d6470);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 2px #2c3038, inset 0 -6px 10px rgba(0, 0, 0, .25); }
.ft-wheel-hub.rim-accent { background: radial-gradient(circle at 50% 50%, #ffffff 0 52%, transparent 53%), conic-gradient(from -60deg, color-mix(in srgb, var(--accent) 55%, #000), color-mix(in srgb, var(--accent) 55%, #fff), var(--accent), color-mix(in srgb, var(--accent) 30%, #fff), color-mix(in srgb, var(--accent) 55%, #000)); }
.ft-wheel-hub.rim-none { background: radial-gradient(circle at 50% 50%, #ffffff 0 60%, #15172e 61%); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
.ft-wheel-hub.logo img { width: 62%; max-height: 62%; object-fit: contain; }
.ft-wheel-hub.logo::after { display: none; }
.ft-pointer { position: absolute; left: 50%; top: -1.6%; width: 10%; aspect-ratio: 60 / 100; margin-left: -5%; z-index: 3; transform-origin: 50% 20%; pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); will-change: transform; }
.ft-pointer svg { display: block; width: 100%; height: 100%; }
.ft-wheel-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: min(86%, 420px); padding: 20px 22px 22px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff;
  background: radial-gradient(120% 100% at 50% 0%, rgba(52, 40, 110, .96), rgba(14, 15, 38, .96)); border: 2px solid var(--gold-1); border-radius: 20px;
  box-shadow: 0 0 0 6px rgba(255, 215, 94, .15), 0 0 60px rgba(255, 194, 26, .45), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.ft-wheel-win[hidden] { display: none; }
.ft-wheel-name { font-size: clamp(26px, 4.4vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; max-width: 100%; text-shadow: 0 0 24px rgba(255, 194, 26, .6); }

/* Big-screen mode: the whole screen (Fullscreen API), or the whole window when that is refused. */
html.ft-big-open, html.ft-big-open body { overflow: hidden; }
.ft-stage.big .ft-win-label { font-size: clamp(18px, 2vw, 30px); padding: .3em 1em; }
.ft-stage.big .ft-rig { width: min(66vh, 92vw); }
.ft-stage.big .ft-wheel-name { font-size: clamp(32px, 6vw, 96px); }

/* The names and options. */

/* Winners: a numbered list with gold medals. */
.ft-winners-list li::before { content: counter(ft-win); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13.5px; color: #3d2a06;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f0c653 55%, #c58b1d); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }

/* "Run the whole night with Yaypick", and links between the tools. */
.ft-cta { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; padding: clamp(24px, 3.4vw, 44px);
  border-radius: 24px; color: #fff; border: 1px solid #2b2e57;
  background: radial-gradient(60% 120% at 100% 0%, rgba(217, 58, 43, .45), transparent 60%), radial-gradient(50% 120% at 0% 100%, rgba(255, 194, 26, .2), transparent 60%), linear-gradient(135deg, #1b1e46, #0f1030); }

/* The tools page: each card opens with a small picture of its tool. */
.ft-hub-art { position: relative; height: 150px; margin: -8px -8px 6px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 40%, rgba(255, 194, 26, .12), transparent 70%), radial-gradient(120% 90% at 50% 0%, #26295a, #0e1030); }
.ft-hub-art .mini-wheel { width: 116px; aspect-ratio: 1; border-radius: 50%; border: 9px solid #e9bf55; position: relative; top: 8px;
  background: radial-gradient(circle, #fffaf0 0 13%, #b6862a 14% 18%, transparent 19%), conic-gradient(#e5412f 0 45deg, #2f6fe8 0 90deg, #bf8400 0 135deg, #119e72 0 180deg, #9a4fd8 0 225deg, #0aa5b8 0 270deg, #d94a8c 0 315deg, #6b7a2a 0);
  box-shadow: 0 0 0 2px #3d2a06, 0 0 0 4px rgba(255, 244, 200, .5), 0 10px 24px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 194, 26, .25); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }

/* The lucky-draw page's link to the free tool. */
.uc-tool-link { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.uc-tool-link a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; color: var(--accent-text); }

@media (max-width: 900px) {
  .ft-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "panel" "winners"; }
  .ft-hub-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ft-hero { padding: 28px 0 10px; }
  .ft-stage { padding: 16px 14px; min-height: 400px; --row: 46px; border-radius: 16px; }
  .ft-stage:not(.big) .ft-actions { width: 100%; }
  .ft-stage:not(.big) .ft-actions .btn { flex: 1 1 100%; justify-content: center; }
  .ft-sound { top: 10px; left: 10px; }
  .ft-name { font-size: clamp(30px, 10vw, 48px); }
  .ft-drift span { font-size: 12.5px; max-width: 30%; padding: 3px 9px; }
  .ft-drift span:nth-child(n+5):not(:nth-child(10)):not(:nth-child(11)) { display: none; }
  .ft-reel-list li { padding: 0 34px; }
  .ft-reel-frame::before, .ft-reel-frame::after { border-width: 8px; margin-top: -8px; }
  .ft-reel-frame::before { left: 4px; border-left-width: 12px; }
  .ft-reel-frame::after { right: 4px; border-right-width: 12px; }
  .ft-panel, .ft-winners { padding: 16px; }
  .ft-cta .btn { width: 100%; justify-content: center; }
  .ft-stage.big .ft-actions .btn { min-height: 54px; }
  /* Phones have no keyboard: the mark takes the hint's place. */
  .ft-stage.big .ft-keys { display: none; }
  .ft-stage.big { padding-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-name.pop, .ft-wheel-win:not([hidden]) { animation-duration: .01s; }
  .ft-bulbs i, .ft-wheel.spinning .ft-bulbs i, .ft-wheel.stopped .ft-bulbs i, .ft-idle-ico, .ft-rays { animation: none; }
  .ft-drift span { animation: none; opacity: .4; }
  .ft-hub-art .mini-wheel { transition: none; }
}


/* Prize wheel options (wheel.js): the pointer on an arm turned to the top or the right, bulb styles, text in the middle. */
.ft-pointer-arm { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ft-pointer.p-arrow, .ft-pointer.p-pin { width: 8%; margin-left: -4%; top: -3%; }
.ft-wheel.bulbs-twinkle.spinning .ft-bulbs i, .ft-wheel.bulbs-twinkle .ft-bulbs i { animation: ft-twinkle 1.1s steps(1, end) infinite; animation-delay: calc(var(--i) * -0.37s); }
.ft-wheel.bulbs-rainbow .ft-bulbs i { filter: hue-rotate(calc(var(--i) * 15deg)) saturate(1.6); }
.ft-wheel-hub.rim-rosegold { background: radial-gradient(circle at 50% 50%, #fff7f3 0 52%, transparent 53%), conic-gradient(from -60deg, #7a3f33, #f6c7b4, #b06a55, #ffe4d8, #8d4c3e, #eab29c, #6c362b, #f6c7b4, #7a3f33);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 2px #3b1a13, inset 0 -6px 10px rgba(0, 0, 0, .25); }
.ft-wheel-hub.rim-black { background: radial-gradient(circle at 50% 50%, #18181e 0 52%, transparent 53%), conic-gradient(from -60deg, #0c0c10, #3a3a44, #15151b, #55555f, #0c0c10);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55), inset 0 0 0 2px #c79a3a; }
.ft-wheel-hub.text::after { display: none; }
.ft-hub-text { position: relative; z-index: 1; font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: #1d1f3b; text-align: center;
  font-size: calc(var(--wh, 480px) * .2 / max(var(--len, 4), 2.6)); }
.ft-wheel-hub.rim-black .ft-hub-text { color: #f0cd66; }

/* ---- "Made with Yaypick" (lib.js madeWith): small, the logo mark first, wraps on small phones. ---- */
.made-with { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; padding: 16px 16px 24px; font-size: 11.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.made-with a { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-weight: 600; text-decoration: none; }
.made-with a:hover, .made-with a:focus-visible { color: var(--text-2); text-decoration: underline; }
.made-with img { width: 14px; height: 14px; flex: none; }
.made-with > span[aria-hidden] { opacity: .6; }
/* Poll builder: an option's or the cover's existing picture (no new picture addresses). */
.opt-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.opt-thumb.wide { width: 132px; }
/* ---- Reports page (pages/reports.js): event picker, whole-event card, one card per activity type ---- */
.rps-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.rps-pick .kicker { margin: 0; }
.rps-select { flex: 1 1 320px; max-width: 520px; font-weight: 600; }
.rps-whole { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rps-whole h2 { font-size: 17px; margin: 0 0 2px; }
.rps-whole p { margin: 0; }
.rps-whole .sw, .rps-card-h .sw { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.rps-upsell { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 20%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.rps-upsell p { margin: 0; }
.rps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: stretch; }
/* Cards side by side are the same height; overflow stays visible so the CSV menu can open. */
.rps-card { display: flex; flex-direction: column; }
.rps-card > .rps-rows { flex: 1; }
.rps-card-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rps-card-h h2 { font-size: 16px; margin: 0; flex: 1; }
.rps-card-h .sw { width: 32px; height: 32px; border-radius: 9px; }
.rps-rows { list-style: none; margin: 0; padding: 0; }
.rps-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.rps-row + .rps-row { border-top: 1px solid var(--border); }
.rps-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rps-row-t .t { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.rps-row-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rps-unused { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rps-unused li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--border); color: var(--muted); font-size: 13px; }
@media (max-width: 560px) {
  .rps-whole .rps-row-a { width: 100%; }
  .rps-whole .rps-row-a > * { flex: 1 1 auto; justify-content: center; }
  .rps-upsell { flex-wrap: wrap; }
}
@media print { .rps-page .rps-pick, .rps-page .btn, .rps-page .lock-tag { display: none !important; } }

/* ---------- Lucky draw organiser page (draw.js): header, prizes grid, Settings and Screen tabs ---------- */
.draw-page { padding-bottom: 64px; }
.draw-head { align-items: flex-end; }
.draw-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.draw-page .draw-stats { margin-bottom: 20px; }
.draw-page > .tabs { margin-bottom: 20px; }
/* The pass and custom-design notes: one line each, the action on the right. */
.draw-page .pass-slot > div { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.draw-page .pass-slot .pass-panel, .draw-page .pass-slot .ycs-card { margin: 0; padding: 8px 12px; gap: 10px; flex-wrap: nowrap; }
.draw-page .pass-slot .pass-panel .ticket-ico, .draw-page .pass-slot .ycs-card .ycs-ico { width: 28px; height: 28px; border-radius: 8px; }
.draw-page .pass-slot .pass-panel .grow, .draw-page .pass-slot .ycs-card .grow { display: flex; gap: 4px 10px; align-items: baseline; min-width: 0; flex: 1 1 auto; }
.draw-page .pass-slot .pass-panel .grow > *, .draw-page .pass-slot .ycs-card .grow > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.draw-page .pass-slot .pass-panel .grow > .t, .draw-page .pass-slot .ycs-card .grow > .t { flex-shrink: 0; max-width: 45%; }
.draw-page .pass-slot .btn { flex-shrink: 0; }
/* "More": a short menu under its button. */
.more-menu { position: relative; }
.more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.more-pop [role="menuitem"] { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); }
.more-pop [role="menuitem"]:hover, .more-pop [role="menuitem"]:focus-visible { background: var(--surface-2); }
.more-pop [role="menuitem"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
a.reports-link.small { display: inline-flex; gap: 6px; align-items: center; color: var(--text-2); font-weight: 600; white-space: nowrap; }
a.reports-link.small:hover { color: var(--accent-text); }
.card-foot { padding: 10px 22px 14px; gap: 10px; align-items: center; }
.card-foot:has(> div:empty) { padding-top: 12px; }
/* Prizes: compact cards, 4 / 3 / 2 / 1 across. */
.prize-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 480px) { .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .prize-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .prize-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prize-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; min-width: 0; }
.pc-pic { position: relative; aspect-ratio: 2 / 1; background: var(--surface-2); display: grid; place-items: center; }
.pc-pic img { width: 100%; height: 100%; object-fit: contain; }
.pc-pic .pc-pic2 { position: absolute; right: 8px; bottom: 8px; width: 34%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 2px var(--surface), 0 4px 10px rgba(0, 0, 0, .15); }
.pc-noimg { color: var(--muted); opacity: .6; }
.pc-ix { position: absolute; left: 8px; top: 8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
  background: color-mix(in srgb, var(--gold) 45%, var(--surface)); color: var(--text); }
.pc-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 4px; min-width: 0; }
.pc-name { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-qty { font-size: 13px; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 8px 10px 10px; margin-top: auto; }
/* Narrow cards (three across on a tablet, 44 px arrows on touch screens): the arrows wrap to a line of their own, on the right. */
.pc-actions > .spacer + .btn { margin-left: auto; }
.prize-add { all: unset; box-sizing: border-box; cursor: pointer; min-height: 140px; border: 1.5px dashed var(--border-strong); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--text-2); }
.prize-add:hover { border-color: var(--accent); color: var(--accent-text); }
.prize-add:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
/* Small phones: a picture on the left, the name and actions beside it. */
@media (max-width: 479px) {
  .prize-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .pc-pic { grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; }
  .pc-pic .pc-pic2 { display: none; }
  .pc-body { padding: 10px 10px 2px; }
  .pc-actions { padding: 4px 6px 8px 6px; }
  .prize-add { min-height: 64px; flex-direction: row; }
}
.prize-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1.5px dashed var(--border-strong); border-radius: 14px; }
.prize-empty b { color: var(--text); font-size: 15px; }
.prize-empty-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
/* Settings: how the draw works. */
.draw-page .settings-group { gap: 18px; }
.sub-settings { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); margin-top: -4px; }
.join-link { display: flex; gap: 14px; align-items: flex-start; }
.join-link:empty { display: none; }
.settings-foot { border-top: 1px solid var(--border); padding-top: 16px; gap: 10px; align-items: center; }
.unsaved { color: var(--warning); font-weight: 600; }
/* Screen: options on the left, the live big-screen preview on the right (on top on smaller screens). */
.screen-tab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); grid-template-areas: "opts preview"; gap: 24px; align-items: start; }
.screen-tab > .screen-opts { grid-area: opts; }
.screen-tab > .look-live { grid-area: preview; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.screen-opts { padding: 6px 22px 0; display: flex; flex-direction: column; }
.look-section { display: flex; flex-direction: column; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.look-section:last-of-type { border-bottom: 0; }
.look-section h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.screen-opts .setting { align-items: center; flex-wrap: wrap; }
.screen-opts .screen-display .select { max-width: 100%; }
.screen-save { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; align-items: center; margin: 0 -22px; padding: 12px 22px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.look-live .anim-screen { box-shadow: 0 18px 40px -24px rgba(13, 15, 34, .6); }
.sp-controls { display: flex; flex-direction: column; gap: 10px; }
.sp-sample { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sp-sample .field { margin: 0; }
.screen-tab .anim-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.screen-tab .anim-pick { padding: 11px 12px; }
@media (max-width: 1099px) {
  /* The preview on top; only the screen itself stays in view while scrolling the options. */
  .screen-tab { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .screen-tab > .look-live { display: contents; }
  .look-live .sp-sticky { position: sticky; top: var(--topbar-h); z-index: 3; padding: 8px 0; background: var(--bg); }
  .screen-tab > .screen-opts { margin-top: 4px; }
  .sp-controls { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .sp-controls > p { flex-basis: 100%; }
  .sp-sample { flex: 1 1 260px; }
}
@media (max-width: 600px) {
  .draw-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 6px; }
  .draw-actions .btn { padding: 0 10px; font-size: 14px; gap: 6px; justify-content: center; white-space: nowrap; }
  .draw-actions > .btn svg { display: none; }
  .screen-opts { padding: 0 16px; }
  .screen-save { margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .draw-page .pass-slot .pass-panel .grow > :not(.t), .draw-page .pass-slot .ycs-card .grow > :not(.t) { display: none; }
  .draw-page .pass-slot .pass-panel .grow > .t, .draw-page .pass-slot .ycs-card .grow > .t { max-width: none; flex-shrink: 1; }
  .pc-actions .btn.sm { padding-inline: 10px; }
  .screen-tab .anim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-tab .anim-pick { padding: 10px; }
  .screen-tab .anim-pick span { font-size: 12px; }
}

/* ---------- Voting contest organiser page (contest.js), controller (contest-control.js) and the guest page's footer ---------- */
.contest-page { padding-bottom: 64px; }
.contest-head { align-items: flex-end; }
.contest-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.contest-page > .tabs .badge { padding: 0 7px; font-size: 11.5px; line-height: 18px; }
/* Filter chips (category) above the candidates and results. */
.cg-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-filters[hidden] { display: none; }
.contest-page .chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--surface); }
.contest-page .chip span { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.contest-page .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.contest-page .chip[aria-pressed="true"] span { color: inherit; opacity: .7; }
.contest-page .chip:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.cg-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cg-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.cg-search { width: 220px; }
.cg-search[hidden] { display: none; }
/* Candidates: compact cards, 4 / 3 / 2 / 1 across. */
.cg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 480px) { .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .cg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cg-group-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.cg-group-head h3 { font-size: 16px; }
.cg-group-head .btn { margin-left: auto; }
.cg-card { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 6px 8px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); min-width: 0; }
.cg-card.pending { border: 1.5px dashed var(--warning); }
.cg-photo { all: unset; cursor: pointer; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: block; }
.cg-photo:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.cg-photo .avatar.fill { font-size: 20px; }
.cg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-name { font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; min-width: 0; }
.cg-chip { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-votes { font-size: 12px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.cg-actions { display: flex; flex-direction: column; gap: 2px; }
.cg-card.pending .cg-actions { gap: 6px; }
.cg-add { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 18px; border: 2px dashed var(--border-strong); border-radius: 14px; color: var(--text-2); font-weight: 600; font-size: 14px; }
.cg-add:hover { border-color: var(--accent); color: var(--accent-text); }
.cg-add:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.cg-pending h3 { display: flex; align-items: center; gap: 4px; }
/* "Add a category first" and other one-step empty states. */
.empty-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 20px; }
.empty-step p { max-width: 460px; margin: 0; }
.empty-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
/* Candidate dialog. */
.cand-form { display: flex; flex-direction: column; gap: 14px; }
.cand-form .q-error:empty { display: none; }
/* A dialog's picture field (lib.js picturePicker): one large click-or-drop area above the other fields. */
.pic-field { display: flex; flex-direction: column; gap: 8px; }
.pic-drop { position: relative; width: 100%; height: 190px; border: 2px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; cursor: pointer; overflow: hidden; font: inherit; text-align: center; transition: border-color .15s, background .15s; }
.pic-drop b { color: var(--text); font-size: 15px; }
.pic-drop-sub { font-size: 13px; }
.pic-drop:hover, .pic-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.pic-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pic-drop.has { border-style: solid; padding: 0; background: var(--surface-2); }
.pic-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pic-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pic-actions:empty, .pic-field .q-error:empty { display: none; }
.pic-field .q-error { margin: 0; }
@media (hover: none) { .pic-drop-sub { display: none; } }
@media (max-width: 480px) { .pic-drop { height: 160px; } }
/* Categories tab. */
.cat-new { display: flex; gap: 8px; }
.cat-new .input { flex: 1; min-width: 0; }
.cat-ideas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-item { display: flex; gap: 12px; align-items: center; padding: 10px 10px 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cat-text b { font-size: 15px; overflow-wrap: anywhere; }
.cat-desc-line { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-btns { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
@media (max-width: 600px) {
  .cat-item { flex-wrap: wrap; }
  .cat-text { flex-basis: calc(100% - 50px); }
  .cat-btns { width: 100%; justify-content: flex-end; }
  .cat-new { flex-direction: column; }
}
/* Results tab. */
.contest-page .cg-filters + .stack { margin-top: 14px; }
.dt td.res-bar-cell { width: 34%; min-width: 90px; }
@media (max-width: 600px) { .dt td.res-bar-cell { display: none; } }
/* Screen tab: options on the left, the live preview of the real big screen sticky on the right. */
.vs-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 24px; align-items: start; }
.vs-side { grid-column: 2; grid-row: 1; position: sticky; top: 80px; display: flex; flex-direction: column; gap: 10px; }
.vs-controls { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-box { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #12142a; box-shadow: 0 18px 40px -24px rgba(13, 15, 34, .6); }
.vs-frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; }
.vs-views { align-self: flex-start; }
.vs-views button { padding: 6px 10px; font-size: 12.5px; }
.vs-save { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -8px 24px -18px rgba(13, 15, 34, .5); }
.vs-save.dirty { border-color: var(--accent); }
.vs-save .btn[hidden] { display: none; }
.vs-controls [hidden] { display: none !important; }
.vs-controls .setting { align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  /* The preview on top, kept in view while the options scroll under it. */
  .vs-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vs-side { grid-column: 1; position: sticky; top: var(--topbar-h); z-index: 5; padding: 8px 0; background: var(--bg); gap: 6px; }
  .vs-controls { grid-row: 2; }
  .vs-side > .hint { display: none; }
}
@media (max-width: 600px) {
  .contest-actions { width: 100%; }
  .contest-actions > .btn { flex: 1 1 auto; justify-content: center; }
  .cg-tools { width: 100%; margin-left: 0; }
  .cg-tools > .btn { flex: 1 1 auto; justify-content: center; }
  .cg-search { width: 100%; }
  .vs-side { margin: 0 -16px; padding: 6px 16px; }
  .vs-save { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* Controller (reuses the lucky draw controller's frame: .dc, .dc-head, .dc-main). */
.cc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cc-empty { align-items: flex-start; }
.cc-cat-list { display: grid; gap: 8px; }
.cc-cat { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); min-height: 48px; }
.cc-cat[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: inset 4px 0 0 var(--accent); }
.cc-cat:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.cc-cat-name { font-weight: 700; overflow-wrap: anywhere; }
.cc-state { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.cc-state.open { color: var(--success); }
.cc-state.closed { color: var(--muted); }
.cc-timer { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cc-readout { font-size: 22px; font-variant-numeric: tabular-nums; }
.cc-readout.warn { color: var(--danger, #d93a2b); }
.cc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-btns .btn { flex: 1 1 auto; justify-content: center; }
.cc-way { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cc-way.on { border-color: var(--accent); }
.cc-stand table.data td { padding: 8px 10px; }
.cc-guests { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--border); padding-top: 14px; }
.cc-qr { width: 104px; height: 104px; flex-shrink: 0; background: #fff; padding: 6px; border-radius: 10px; border: 1px solid var(--border); }
.cc-qr canvas, .cc-qr img, .cc-qr svg { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 860px) { .cc .dc-main { grid-template-columns: minmax(0, 1fr); } }
/* Guest voting page: "Made with Yaypick", always, small, with the mark. */
.branding.made-with { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12px; padding: 16px 16px 28px; }
.branding.made-with img { width: 14px; height: 14px; }
@media (max-width: 600px) {
  /* Contest tabs: all five fit, icon above the label. */
  .contest-page > .tabs { gap: 0; }
  .contest-page > .tabs button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 8px 2px 9px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; position: relative; }
  .contest-page > .tabs button .badge { position: absolute; top: 2px; right: 4px; font-size: 10.5px; padding: 0 5px; line-height: 16px; }
  .contest-actions .more-menu { flex: 0 0 auto; }
}

/* ==========================================================================
   Spin the wheel (src/wheels.ts): the big screen (.wst), the phone controller (.wc)
   and the organiser's page (.wa). The wheel itself is wheel.js (.ft-rig / .ft-wheel).
   ========================================================================== */

/* ---- Big screen ---- */
.stage.wst { grid-template-rows: auto minmax(0, 1fr); --wh: min(calc(100vh - 250px), 86vw, 980px); }
/* The wheel fits the screen with its title and stand; with the result as a banner, the banner's room too. */
.stage.wst[data-result="banner"] { --wh: min(calc(100vh - 330px), 86vw, 900px); }
.stage.wst[data-bg="color"] { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--wst-bg) 82%, #fff) 0%, var(--wst-bg) 62%); }
.stage.wst[data-bg="image"] { background: linear-gradient(rgba(5, 6, 20, var(--wst-darken, .4)), rgba(5, 6, 20, var(--wst-darken, .4))), var(--wst-photo) center / cover no-repeat, #0d0f22; }
.stage.wst[data-bg="color"] .stage-lights, .stage.wst[data-bg="image"] .stage-lights { opacity: .55; }
.wst-head { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); padding: clamp(16px, 3.2vh, 40px) clamp(20px, 4vw, 64px) clamp(4px, 1vh, 12px); text-align: center; min-width: 0; }
.wst-logo { max-height: clamp(40px, 8vh, 96px); max-width: 22vw; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.wst-logo[hidden] { display: none; }
.wst-titles { min-width: 0; }
.wst-headline { margin: 0; font-size: clamp(26px, 3.4vw + 1vh, 76px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.wst-sub { margin: 6px 0 0; font-size: clamp(15px, 1.2vw + .6vh, 30px); color: var(--s-dim); font-weight: 600; text-wrap: balance; }
.wst-sub[hidden] { display: none; }
.wst-main { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 0 20px clamp(12px, 3vh, 36px); position: relative; }
.wst-wheel { position: relative; width: var(--wh); max-width: 100%; display: grid; place-items: center; }
/* A soft pool of light behind the wheel, in the brand colour. */
.wst-wheel::before { content: ""; position: absolute; inset: -12% -18%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%); opacity: .75; transition: opacity .6s; }
.stage.wst.spinning .wst-wheel::before { opacity: 1; }
.wst-wheel .ft-rig { width: 100%; margin: 0; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5)); }
.stage.wst[data-theme="light"] .wst-wheel .ft-rig { filter: drop-shadow(0 26px 40px rgba(20, 26, 51, .28)); }
/* The result: a card over a dimmed screen. */
.wst-result { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 4vh 4vw; background: radial-gradient(closest-side, rgba(5, 6, 20, .35), rgba(5, 6, 20, .72)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.wst-result[hidden] { display: none; }
.wst-result.in { animation: ws-fade .4s ease-out; }
.wst-card { position: relative; isolation: isolate; width: min(620px, 86vw); max-height: 92vh; padding: clamp(22px, 4vh, 44px) clamp(22px, 3vw, 48px) clamp(26px, 4.6vh, 52px); display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 24px); text-align: center;
  border-radius: 32px; color: #fff; background: linear-gradient(165deg, #2a2d5c 0%, #15173a 60%, #0f1130 100%);
  border: 1.5px solid rgba(255, 215, 94, .55); box-shadow: 0 0 0 6px rgba(255, 215, 94, .08), 0 40px 90px -20px rgba(0, 0, 0, .7), 0 0 90px -10px rgba(255, 194, 26, .45); }
.wst-result.in .wst-card { animation: ws-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
.wst-rays { position: absolute; left: 50%; top: 42%; width: 150%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 94, .16) 0 8deg, transparent 8deg 22deg); -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 75%); mask-image: radial-gradient(closest-side, #000 25%, transparent 75%); animation: ft-rays 30s linear infinite; }
.wst-kicker { display: inline-block; padding: 6px 18px; border-radius: 999px; font-weight: 800; font-size: clamp(13px, 1vw + .4vh, 20px); letter-spacing: .08em; text-transform: uppercase; color: #2a1a00;
  background: linear-gradient(180deg, #ffe58f, #f1b73a); box-shadow: 0 6px 20px -6px rgba(255, 194, 26, .8); }
.wst-card-pic { width: min(40vh, 340px, 70vw); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #f1c75a; box-shadow: 0 0 0 2px #7c5713, 0 20px 50px -14px rgba(0, 0, 0, .7); background: #15173a; }
.wst-card-label { font-size: clamp(34px, 4vw + 2vh, 96px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; overflow-wrap: anywhere; max-width: 100%; text-shadow: 0 0 34px rgba(255, 194, 26, .45); }
.wst-card.with-pic .wst-card-label { font-size: clamp(28px, 3vw + 1.6vh, 72px); }
.wst-card-label.long { font-size: clamp(24px, 2.4vw + 1.4vh, 56px); }
.wst-card-prize { font-size: clamp(16px, 1.2vw + 1vh, 30px); font-weight: 700; opacity: .85; overflow-wrap: anywhere; max-width: 100%; }
.stage.wst[data-theme="light"] .wst-result { background: radial-gradient(closest-side, rgba(238, 240, 246, .3), rgba(238, 240, 246, .75)); }
.stage.wst[data-theme="light"] .wst-card { color: #141a33; background: linear-gradient(165deg, #ffffff 0%, #f6f3ea 100%); border-color: rgba(191, 132, 0, .5); box-shadow: 0 0 0 6px rgba(191, 132, 0, .08), 0 40px 80px -24px rgba(20, 26, 51, .35); }
.stage.wst[data-theme="light"] .wst-card-label { text-shadow: none; }
/* The result as a banner under the wheel (the wheel stays in full view). */
.wst-banner { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; max-width: min(90vw, 900px); margin-top: -1vh; padding: 10px 28px 10px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe58f, #f1b73a); color: #2a1a00; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6), 0 0 40px -6px rgba(255, 194, 26, .6); }
.wst-banner:not(:has(img)) { padding-left: 28px; }
.wst-banner[hidden] { display: none; }
.wst-banner.in { animation: ws-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.wst-banner img { width: clamp(44px, 7vh, 80px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.wst-banner b { font-size: clamp(22px, 2vw + 1.4vh, 52px); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wst-reconnect { position: absolute; right: 16px; top: 16px; z-index: 7; display: none; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 600; }
.wst-reconnect.on { display: inline-flex; }
.wst-preview-tag { position: absolute; left: 16px; top: 16px; z-index: 7; display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 13px; font-weight: 700; }
.wst-empty { display: grid; place-items: center; height: 100%; font-size: 22px; color: var(--s-dim); grid-row: 1 / -1; }
@keyframes ws-fade { from { opacity: 0; } }
@keyframes ws-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (orientation: portrait) { .stage.wst { --wh: min(92vw, calc(100vh - 220px)); } .wst-logo { max-width: 30vw; } }
@media (prefers-reduced-motion: reduce) { .wst-rays, .wst-result.in, .wst-result.in .wst-card, .wst-banner.in { animation: none; } }

/* ---- Phone controller ---- */
.wc-conn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.wc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.wc-dot.on { background: var(--success, #119e72); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success, #119e72) 20%, transparent); }
.wc-last { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wc-last img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--gold); }
.wc-spin { min-height: 120px; }
.wc-spin span { display: inline-flex; align-items: center; gap: 12px; font-size: 34px; }
.wc-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.wc-box h3 { font-size: 17px; }

/* ---- Organiser page ---- */
.wa { padding-bottom: 96px; }
.wa-head { align-items: flex-end; }
.wa-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wa-tabs { margin-bottom: 20px; }
.wa-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
/* Segments: 4 / 3 / 2 across, a compact list on phones. */
@media (max-width: 560px) {
  .wa-actions { width: 100%; }
  .wa-actions > .btn { flex: 1 1 auto; justify-content: center; }
}
.wa-steps { margin: 0; }
.wa-empty b { display: block; color: var(--text); margin: 6px 0 2px; }
/* Save bar: only while there are unsaved changes. */
.wa-savebar { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 25; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.wa-savebar[hidden] { display: none; }
.wa-savebar-in { pointer-events: auto; width: min(680px, 100%); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: ws-pop .25s ease-out; }
.wa-savebar-in > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
/* Screen tab: options on the left, the live preview sticky on the right (on top on phones). */
.wa-screen-tab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "options preview"; gap: 22px; align-items: start; }
.wa-options { grid-area: options; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wa-preview { grid-area: preview; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wa-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0d0f22; box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); }
.wa-frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; }
.wa-preview-bar { display: flex; align-items: center; gap: 10px; }
.wa-group { gap: 18px; }
.wa-row { align-items: center; flex-wrap: wrap; }
.wa-row .segmented { flex: none; }
.wa-sub { padding: 12px; border-radius: 12px; background: var(--surface-2); }
.wa-sub[hidden] { display: none; }
.wa-range { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.wa-range input { flex: 1; accent-color: var(--accent); }
.wa-range-v { min-width: 44px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.wa-colour { width: 34px; height: 34px; padding: 0; border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); cursor: pointer; background: none; }
.wa-colour::-webkit-color-swatch-wrapper { padding: 0; }
.wa-colour::-webkit-color-swatch { border: 0; border-radius: 50%; }
.wa-colour::-moz-color-swatch { border: 0; border-radius: 50%; }
.wa-chip { position: relative; display: inline-flex; }
.wa-chip-x { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--text); color: var(--surface); cursor: pointer; }
.wa-rims { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-rim { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 13.5px var(--font); cursor: pointer; }
.wa-rim[aria-pressed="true"] { border-color: var(--text); color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.wa-rim-ring { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.wa-rim-ring.r-gold { background: conic-gradient(from -60deg, #8a6418, #f6dc86, #b6862a, #fff3c2, #9c7020, #f0cd66, #8a6418); }
.wa-rim-ring.r-silver { background: conic-gradient(from -60deg, #5d6470, #f4f6f9, #9aa3b0, #ffffff, #6e7682, #e3e7ec, #5d6470); }
.wa-rim-ring.r-rosegold { background: conic-gradient(from -60deg, #7a3f33, #f6c7b4, #b06a55, #ffe4d8, #8d4c3e, #eab29c, #7a3f33); }
.wa-rim-ring.r-black { background: conic-gradient(from -60deg, #0c0c10, #3a3a44, #c79a3a, #15151b, #55555f, #0c0c10); }
.wa-rim-ring.r-accent { background: conic-gradient(from -60deg, color-mix(in srgb, var(--accent) 55%, #000), color-mix(in srgb, var(--accent) 45%, #fff), var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.wa-rim-ring.r-none { background: var(--border-strong); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px); }
.wa-pic-slot { display: flex; align-items: center; gap: 12px; }
.wa-pic-slot > img, .wa-pic-empty { width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: var(--surface); border: 1px solid var(--border); flex: none; display: grid; place-items: center; color: var(--muted); }
@media (max-width: 900px) {
  .wa-screen-tab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "options"; gap: 14px; }
  /* The preview stays at the top of the screen while the options scroll under it. */
  .wa-preview { top: 64px; z-index: 4; margin: 0 -16px; padding: 10px 16px; background: color-mix(in srgb, var(--bg, var(--surface)) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
  .wa-preview-bar .btn.ghost { display: none; }
}
@media (max-width: 600px) { .wa-preview { top: 58px; } }

/* Event page: each kind of activity as cards in columns (4 / 3 / 2 / 1), with a dashed "New" card. */
.ev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1099px) { .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ev-grid { grid-template-columns: 1fr; } }
.ev-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-height: 132px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ev-card-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; }
.ev-card-top > .grow { min-width: 0; }
.ev-card.ev-card-locked { background: var(--surface-2, var(--surface)); border-style: dashed; }
.ev-card.ev-card-locked .ev-card-top { opacity: .45; filter: grayscale(1); pointer-events: none; user-select: none; }
.ev-card.ev-card-locked .ev-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); margin-right: auto; }
.ev-card.ev-card-add.ev-card-full { color: var(--muted); border-style: dashed; }
.ev-add.ev-add-full .ev-add-ico { opacity: .5; filter: grayscale(1); }
.ev-card-top .t { font-weight: 700; overflow-wrap: anywhere; }
.ev-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ev-card-actions > .btn:not(.icon) { flex: 1 1 auto; justify-content: center; }
.ev-card-add { align-items: center; justify-content: center; gap: 6px; border-style: dashed; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.ev-card-add:hover, .ev-card-add:focus-visible { color: var(--text); border-color: var(--border-strong); }
.more-pop [role="menuitem"].danger { color: var(--danger); }
.ev-card-top .sw { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; color: #fff; }
@media (max-width: 479px) { .ev-card { min-height: 0; } .ev-card-add { flex-direction: row; padding: 14px; } }

/* ==========================================================================
   Big screen themes (public/js/screen-themes.js): ready-made looks an organiser picks per
   event. applyStageDesign() puts a preset's tokens on like a custom design (.yp-custom-stage
   above) and marks the root with data-ycs-preset; each preset's extra look is here.
   ========================================================================== */

/* ---- Classic clean: warm white, near-black type, one red accent, hairlines instead of glows ---- */
.yp-custom-stage[data-ycs-preset="clean"] { --s-line: rgba(42, 36, 30, .12) !important; --ycs-line: rgba(42, 36, 30, .12); }
.yp-custom-stage[data-ycs-preset="clean"] :is(h1, h2, h3, .wst-headline, .stage-name, .stage-name.landed, .wst-card-label) { text-shadow: none; }
.yp-custom-stage[data-ycs-preset="clean"] .stage-box { border-color: rgba(42, 36, 30, .16); }
.yp-custom-stage[data-ycs-preset="clean"] .stage-name.idle { color: rgba(42, 36, 30, .2); }
.yp-custom-stage[data-ycs-preset="clean"] .stage-rail { background: #fff; border-top: 1px solid rgba(42, 36, 30, .1); }
.yp-custom-stage[data-ycs-preset="clean"] .stage-top { border-bottom: 1px solid rgba(42, 36, 30, .08); }
.yp-custom-stage[data-ycs-preset="clean"] .qs-tile { rotate: 0deg; border-radius: 12px; }
.yp-custom-stage[data-ycs-preset="clean"] .qs-timer { background: #fff; border: 2px solid var(--ycs-accent); border-radius: 50%; aspect-ratio: 1; box-shadow: none; }
.yp-custom-stage[data-ycs-preset="clean"] .qs-timer b { color: #2a241e; }
.yp-custom-stage[data-ycs-preset="clean"] .qs-q.low .qs-timer { background: #fff; border-color: #d4321f; }
.yp-custom-stage[data-ycs-preset="clean"] .qs-q.low .qs-timer b { color: #d4321f; }
.yp-custom-stage[data-ycs-preset="clean"] .ws-kicker, .yp-custom-stage[data-ycs-preset="clean"] .wst-kicker { background: none; box-shadow: none; color: var(--ycs-accent); }
.yp-custom-stage[data-ycs-preset="clean"] .ws-kicker .pill, .yp-custom-stage[data-ycs-preset="clean"] .wst-kicker .pill { background: #fff; color: #2a241e; border: 1px solid rgba(42, 36, 30, .16); }
.yp-custom-stage[data-ycs-preset="clean"] .wst-wheel::before, .yp-custom-stage[data-ycs-preset="clean"] .wst-rays { display: none; }
.yp-custom-stage[data-ycs-preset="clean"] .wst-wheel .ft-rig { filter: drop-shadow(0 24px 36px rgba(42, 36, 30, .16)); }
.yp-custom-stage[data-ycs-preset="clean"] .wst-result { background: rgba(255, 255, 255, .78); }
.yp-custom-stage[data-ycs-preset="clean"] .ws-card, .yp-custom-stage[data-ycs-preset="clean"] .wst-card { color: #2a241e; background: #fff; border: 1px solid rgba(42, 36, 30, .14); box-shadow: 0 40px 90px -40px rgba(42, 36, 30, .3); }
.yp-custom-stage[data-ycs-preset="clean"] .bar-track { background: #f1f2f4; }
.yp-custom-stage[data-ycs-preset="clean"] .cs-row.lead { border: 2px solid var(--ycs-accent); background: #fff; }
.yp-custom-stage[data-ycs-preset="clean"] :is(.ag-lobby-top small, .ag-lobby-label, .ag-lobby-room h2, .ag-lobby-clock span, .ag-lobby-foot small) { color: #5b6070; }
.yp-custom-stage[data-ycs-preset="clean"] .ag-lobby-slot.live { background: var(--ycs-accent); color: #fff; border-color: transparent; }
.yp-custom-stage[data-ycs-preset="clean"] .ag-lobby-slot.live .ag-lobby-label { color: rgba(255, 255, 255, .85); }
.yp-custom-stage[data-ycs-preset="clean"] .wst-banner { background: #fff; color: #2a241e; border: 1px solid rgba(42, 36, 30, .14); box-shadow: 0 20px 40px -24px rgba(42, 36, 30, .3); }

/* ---- Tech: a control room. Near-black, a moving perspective grid, cyan light, red for winners ---- */
.yp-custom-stage[data-ycs-preset="tech"] {
  --ft-cyan: #4fc3e8; --ft-violet: #e8505b; --ft-glass: rgba(10, 28, 38, .7); --ft-edge: rgba(79, 195, 232, .38);
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 50% 108%, rgba(79, 195, 232, .2), transparent 70%),
    radial-gradient(45% 45% at 88% -8%, rgba(232, 80, 91, .22), transparent 70%),
    radial-gradient(40% 40% at 6% 10%, rgba(79, 195, 232, .1), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #02070a 0%, #061118 55%, #0a1820 100%) !important;
}
/* The floor grid, drifting towards the audience. */
.yp-custom-stage[data-ycs-preset="tech"]::before { content: ""; position: absolute; left: -50%; right: -50%; bottom: 0; height: 46%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(79, 195, 232, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 195, 232, .2) 1px, transparent 1px);
  background-size: 72px 72px; transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%); mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  animation: ycs-ft-grid 5s linear infinite; }
@keyframes ycs-ft-grid { to { background-position: 0 72px, 0 0; } }
.yp-custom-stage[data-ycs-preset="tech"] :is(.stage-top h1, .wst-headline) { font-family: Rubik, system-ui, sans-serif !important; letter-spacing: .01em; }
.yp-custom-stage[data-ycs-preset="tech"] :is(.hub-screen-code, .ag-lobby-clock b) { text-shadow: 0 0 28px rgba(79, 195, 232, .55); }
.yp-custom-stage[data-ycs-preset="tech"] .stage-top { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(79, 195, 232, .55), rgba(232, 80, 91, .55), transparent) 1; }
.yp-custom-stage[data-ycs-preset="tech"] .stage-box { box-shadow: inset 0 0 60px -30px rgba(79, 195, 232, .6), 0 0 60px -18px rgba(79, 195, 232, .5), 0 0 120px -40px rgba(232, 80, 91, .6); }
.yp-custom-stage[data-ycs-preset="tech"] .stage-name.idle { color: rgba(232, 244, 255, .28); }
.yp-custom-stage[data-ycs-preset="tech"] :is(.stage-name.landed, .wst-card-label) { color: #fff; text-shadow: 0 0 14px rgba(79, 195, 232, .85), 0 0 46px rgba(79, 195, 232, .5), 0 0 90px rgba(232, 80, 91, .55); }
.yp-custom-stage[data-ycs-preset="tech"] .stage-rail { background: rgba(2, 7, 10, .75); border-top: 1px solid rgba(79, 195, 232, .25); }
.yp-custom-stage[data-ycs-preset="tech"] .qs-tile { rotate: 0deg; border-radius: 14px; }
.yp-custom-stage[data-ycs-preset="tech"] .qs-timer { background: linear-gradient(135deg, var(--ft-cyan), var(--ft-violet)); border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 40px -6px rgba(79, 195, 232, .7); }
.yp-custom-stage[data-ycs-preset="tech"] .qs-timer b { color: #02070a; }
.yp-custom-stage[data-ycs-preset="tech"] .qs-bar { background: var(--ft-cyan); box-shadow: 0 0 12px rgba(79, 195, 232, .8); }
.yp-custom-stage[data-ycs-preset="tech"] .present-side .qr, .yp-custom-stage[data-ycs-preset="tech"] .hub-screen-qr { box-shadow: 0 0 0 1px var(--ft-edge), 0 0 40px -8px rgba(79, 195, 232, .6); }
.yp-custom-stage[data-ycs-preset="tech"] .ws-kicker, .yp-custom-stage[data-ycs-preset="tech"] .wst-kicker { background: none; box-shadow: none; color: var(--ft-cyan); }
.yp-custom-stage[data-ycs-preset="tech"] .ws-kicker .pill, .yp-custom-stage[data-ycs-preset="tech"] .ws-card .ws-kicker, .yp-custom-stage[data-ycs-preset="tech"] .wst-kicker .pill, .yp-custom-stage[data-ycs-preset="tech"] .wst-card .wst-kicker { background: rgba(79, 195, 232, .1); color: var(--ft-cyan); border: 1px solid var(--ft-edge); box-shadow: 0 0 22px -6px rgba(79, 195, 232, .7); }
.yp-custom-stage[data-ycs-preset="tech"] .wst-wheel::before { background: radial-gradient(closest-side, rgba(79, 195, 232, .3), rgba(232, 80, 91, .14) 55%, transparent 74%); }
.yp-custom-stage[data-ycs-preset="tech"] .wst-rays { display: none; }
.yp-custom-stage[data-ycs-preset="tech"] .ws-card, .yp-custom-stage[data-ycs-preset="tech"] .wst-card { color: var(--ycs-text); background: linear-gradient(165deg, rgba(12, 32, 44, .94), rgba(4, 12, 18, .96)); border: 1px solid rgba(79, 195, 232, .55);
  box-shadow: 0 0 0 6px rgba(79, 195, 232, .06), 0 40px 90px -20px rgba(0, 0, 0, .7), 0 0 90px -10px rgba(79, 195, 232, .45); }
.yp-custom-stage[data-ycs-preset="tech"] .wst-banner { background: rgba(10, 28, 38, .88); color: #fff; border: 1px solid var(--ft-edge); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6), 0 0 40px -6px rgba(79, 195, 232, .6); }
.yp-custom-stage[data-ycs-preset="tech"] .cs-row.lead { border-color: rgba(232, 80, 91, .85); background: linear-gradient(90deg, rgba(232, 80, 91, .22), var(--ft-glass) 65%); box-shadow: 0 0 36px -8px rgba(232, 80, 91, .7); }
.yp-custom-stage[data-ycs-preset="tech"] .bar-track { background: rgba(79, 195, 232, .08); box-shadow: inset 0 0 0 1px rgba(79, 195, 232, .22); }
.yp-custom-stage[data-ycs-preset="tech"] :is(.ag-lobby-top small, .ag-lobby-label, .ag-lobby-room h2, .ag-lobby-clock span, .ag-lobby-foot small) { color: rgba(232, 244, 255, .66); }
.yp-custom-stage[data-ycs-preset="tech"] .ag-lobby-slot.live { background: linear-gradient(140deg, rgba(79, 195, 232, .26), rgba(232, 80, 91, .26)); border-color: rgba(79, 195, 232, .7); box-shadow: 0 0 40px -8px rgba(79, 195, 232, .6); }
.yp-custom-stage[data-ycs-preset="tech"] .ag-lobby-slot.live .ag-lobby-label { color: var(--ft-cyan); }
@media (prefers-reduced-motion: reduce) { .yp-custom-stage[data-ycs-preset="tech"]::before { animation: none; } }
.yp-custom-stage[data-ycs-preset="tech"] .ycs-sample-name { color: #fff; text-shadow: 0 0 12px rgba(79, 195, 232, .85), 0 0 36px rgba(232, 80, 91, .5); }

/* Every theme: the poll's side card (responses, join) wears the theme's card colours. */
.yp-custom-stage .present-side { background: var(--ycs-card); color: var(--ycs-card-text); border-color: var(--ycs-line); }

/* ---- Neon: frosted glass on deep navy, soft aurora drifting behind; one soft coral accent, low glow ---- */
.yp-custom-stage[data-ycs-preset="neon"] { --nn-coral: #ff8f8f; --nn-peri: #aab8ff; --nn-glass: rgba(200, 212, 255, .08); --nn-edge: rgba(170, 184, 255, .28);
  isolation: isolate; background: linear-gradient(180deg, #121a33 0%, #0b1022 55%, #070a14 100%) !important; }
.yp-custom-stage[data-ycs-preset="neon"]::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .55;
  background: radial-gradient(40% 18% at 30% 38%, rgba(59, 91, 219, .7), transparent 70%), radial-gradient(36% 14% at 66% 52%, rgba(47, 166, 160, .5), transparent 70%), radial-gradient(30% 12% at 50% 66%, rgba(255, 123, 123, .35), transparent 70%);
  animation: ycs-nn-aurora 26s ease-in-out infinite alternate; }
@keyframes ycs-nn-aurora { 0% { transform: translate3d(-4%, 0, 0) rotate(-3deg); } 50% { transform: translate3d(3%, -3%, 0) rotate(2deg); } 100% { transform: translate3d(-2%, 3%, 0) rotate(-1deg); } }
.yp-custom-stage[data-ycs-preset="neon"] .stage-top { border-bottom: 1px solid var(--nn-edge); }
.yp-custom-stage[data-ycs-preset="neon"] .stage-box, .yp-custom-stage[data-ycs-preset="neon"] :is(.ws-card, .wst-card, .wst-banner) { background: linear-gradient(160deg, rgba(210, 220, 255, .12), rgba(210, 220, 255, .04)); border: 1px solid var(--nn-edge); color: var(--ycs-text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 80px -30px rgba(0, 0, 0, .7); }
.yp-custom-stage[data-ycs-preset="neon"] .stage-name.idle { color: rgba(238, 241, 255, .3); }
.yp-custom-stage[data-ycs-preset="neon"] :is(.stage-name.landed, .wst-card-label) { color: #fff; text-shadow: 0 0 18px rgba(255, 143, 143, .45); }
.yp-custom-stage[data-ycs-preset="neon"] .stage-rail { background: rgba(7, 10, 20, .6); border-top: 1px solid var(--nn-edge); }
.yp-custom-stage[data-ycs-preset="neon"] .qs-tile { rotate: 0deg; border-radius: 18px; }
.yp-custom-stage[data-ycs-preset="neon"] .qs-timer { background: rgba(210, 220, 255, .1); border: 2px solid var(--nn-coral); border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 24px -6px rgba(255, 143, 143, .6); }
.yp-custom-stage[data-ycs-preset="neon"] .qs-timer b { color: #fff; }
.yp-custom-stage[data-ycs-preset="neon"] .qs-bar { background: var(--nn-coral); }
.yp-custom-stage[data-ycs-preset="neon"] :is(.ws-kicker, .wst-kicker) { background: none; box-shadow: none; color: var(--nn-coral); }
.yp-custom-stage[data-ycs-preset="neon"] .wst-rays { display: none; }
.yp-custom-stage[data-ycs-preset="neon"] .wst-wheel::before { background: radial-gradient(closest-side, rgba(170, 184, 255, .2), transparent 72%); }
.yp-custom-stage[data-ycs-preset="neon"] .bar-track { background: rgba(170, 184, 255, .08); box-shadow: inset 0 0 0 1px var(--nn-edge); }
.yp-custom-stage[data-ycs-preset="neon"] .cs-row.lead { border-color: var(--nn-coral); background: linear-gradient(90deg, rgba(255, 143, 143, .16), var(--nn-glass) 65%); }
.yp-custom-stage[data-ycs-preset="neon"] :is(.ag-lobby-top small, .ag-lobby-label, .ag-lobby-room h2, .ag-lobby-clock span, .ag-lobby-foot small) { color: rgba(238, 241, 255, .62); }
.yp-custom-stage[data-ycs-preset="neon"] .ag-lobby-slot.live { background: linear-gradient(140deg, rgba(255, 143, 143, .18), rgba(170, 184, 255, .12)); border-color: var(--nn-coral); }

/* ---- Cartoon: candy colours, puffy toy cards, clouds and balloons floating by ---- */
.yp-custom-stage[data-ycs-preset="cartoon"] { --ct-red: #ff5f5f; --ct-ink: #2b2a6b; isolation: isolate; background: linear-gradient(180deg, #ffd6c2 0%, #f3e3e8 45%, #cbe8ff 100%) !important; }
.yp-custom-stage[data-ycs-preset="cartoon"]::before { content: ""; position: absolute; inset: 0 -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(7% 4% at 10% 14%, #fff 60%, transparent 62%), radial-gradient(5% 3.4% at 14% 12%, #fff 60%, transparent 62%), radial-gradient(9% 5% at 46% 9%, #fff 60%, transparent 62%), radial-gradient(6% 3.6% at 51% 7%, #fff 60%, transparent 62%), radial-gradient(8% 4.4% at 82% 18%, #fff 60%, transparent 62%), radial-gradient(5% 3% at 86% 16%, #fff 60%, transparent 62%);
  opacity: .9; animation: ycs-ct-clouds 70s linear infinite; }
.yp-custom-stage[data-ycs-preset="cartoon"]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1.4% 2.2% at 6% 80%, #ff7a7a 92%, transparent 100%), radial-gradient(1.2% 1.9% at 93% 70%, #5fb0ff 92%, transparent 100%), radial-gradient(1.3% 2% at 88% 92%, #ffc35c 92%, transparent 100%), radial-gradient(1.1% 1.8% at 12% 96%, #ad8cf0 92%, transparent 100%), radial-gradient(1.2% 1.9% at 72% 104%, #5fd39b 92%, transparent 100%);
  animation: ycs-ct-balloons 18s linear infinite; }
@keyframes ycs-ct-clouds { to { transform: translateX(28%); } }
@keyframes ycs-ct-balloons { from { transform: translateY(20%); } to { transform: translateY(-110%); } }
.yp-custom-stage[data-ycs-preset="cartoon"] .stage-box, .yp-custom-stage[data-ycs-preset="cartoon"] :is(.ws-card, .wst-card, .wst-banner) { background: #fff; color: var(--ct-ink); border: 4px solid #fff; border-radius: 28px;
  box-shadow: 0 0 0 4px rgba(255, 95, 95, .9), 0 14px 0 4px rgba(43, 42, 107, .14), 0 30px 60px -20px rgba(43, 42, 107, .35); }
.yp-custom-stage[data-ycs-preset="cartoon"] :is(h1, h2, h3, .wst-headline, .stage-name, .stage-name.landed, .wst-card-label) { text-shadow: none; }
.yp-custom-stage[data-ycs-preset="cartoon"] .stage-name.idle { color: rgba(43, 42, 107, .25); }
.yp-custom-stage[data-ycs-preset="cartoon"] .stage-name.landed { animation: ycs-ct-pop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ycs-ct-pop { from { transform: scale(.6); } to { transform: scale(1); } }
.yp-custom-stage[data-ycs-preset="cartoon"] .stage-rail { background: rgba(255, 255, 255, .85); border-top: 3px solid #fff; }
.yp-custom-stage[data-ycs-preset="cartoon"] .qs-tile { border-radius: 24px; box-shadow: 0 8px 0 rgba(43, 42, 107, .18); }
.yp-custom-stage[data-ycs-preset="cartoon"] .qs-timer { background: #ffc35c; border: 4px solid #fff; border-radius: 50%; aspect-ratio: 1; box-shadow: 0 6px 0 rgba(43, 42, 107, .2); }
.yp-custom-stage[data-ycs-preset="cartoon"] .qs-timer b { color: var(--ct-ink); }
.yp-custom-stage[data-ycs-preset="cartoon"] .qs-bar { background: var(--ct-red); border-radius: 99px; }
.yp-custom-stage[data-ycs-preset="cartoon"] :is(.ws-kicker, .wst-kicker) { background: none; box-shadow: none; color: var(--ct-red); }
.yp-custom-stage[data-ycs-preset="cartoon"] .wst-rays { display: none; }
.yp-custom-stage[data-ycs-preset="cartoon"] .bar-track { background: #fff; border-radius: 99px; box-shadow: inset 0 0 0 3px rgba(43, 42, 107, .08); }
.yp-custom-stage[data-ycs-preset="cartoon"] .cs-row.lead { border: 3px solid var(--ct-red); background: #fff; }
.yp-custom-stage[data-ycs-preset="cartoon"] :is(.ag-lobby-top small, .ag-lobby-label, .ag-lobby-room h2, .ag-lobby-clock span, .ag-lobby-foot small) { color: rgba(43, 42, 107, .7); }
.yp-custom-stage[data-ycs-preset="cartoon"] .ag-lobby-slot.live { background: var(--ct-red); color: #fff; border-color: transparent; }

/* ---- Luxe: black, deep red and polished gold; gold dust drifting up ---- */
.yp-custom-stage[data-ycs-preset="luxe"] { --lx-gold: #e3bd6a; --lx-gold-2: #f6dfa0; isolation: isolate; background: radial-gradient(70% 60% at 50% 30%, #2a1d12 0%, #110b07 60%, #070504 100%) !important; }
.yp-custom-stage[data-ycs-preset="luxe"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: radial-gradient(1.5px 1.5px at 10% 20%, var(--lx-gold-2), transparent), radial-gradient(1px 1px at 30% 70%, var(--lx-gold), transparent), radial-gradient(1.5px 1.5px at 55% 40%, var(--lx-gold-2), transparent), radial-gradient(1px 1px at 75% 85%, var(--lx-gold), transparent), radial-gradient(1.5px 1.5px at 90% 30%, var(--lx-gold-2), transparent);
  background-size: 420px 420px; animation: ycs-lx-dust 30s linear infinite; }
@keyframes ycs-lx-dust { to { background-position: 0 -420px; } }
.yp-custom-stage[data-ycs-preset="luxe"] :is(.stage-top h1, .wst-headline) { color: var(--lx-gold-2); }
.yp-custom-stage[data-ycs-preset="luxe"] .stage-top { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(227, 189, 106, .6), transparent) 1; }
.yp-custom-stage[data-ycs-preset="luxe"] .stage-box, .yp-custom-stage[data-ycs-preset="luxe"] :is(.ws-card, .wst-card, .wst-banner) { background: linear-gradient(165deg, #1b130c, #0d0906); color: var(--ycs-text); border: 1px solid rgba(227, 189, 106, .7);
  box-shadow: 0 0 0 6px rgba(227, 189, 106, .06), 0 40px 90px -20px rgba(0, 0, 0, .8), 0 0 70px -20px rgba(227, 189, 106, .4); }
.yp-custom-stage[data-ycs-preset="luxe"] .stage-name.idle { color: rgba(246, 231, 196, .25); }
.yp-custom-stage[data-ycs-preset="luxe"] :is(.stage-name.landed, .wst-card-label) { color: var(--lx-gold-2); text-shadow: 0 0 22px rgba(227, 189, 106, .45); }
.yp-custom-stage[data-ycs-preset="luxe"] .stage-rail { background: rgba(7, 5, 4, .75); border-top: 1px solid rgba(227, 189, 106, .3); }
.yp-custom-stage[data-ycs-preset="luxe"] .qs-tile { rotate: 0deg; border-radius: 14px; }
.yp-custom-stage[data-ycs-preset="luxe"] .qs-timer { background: linear-gradient(135deg, var(--lx-gold-2), var(--lx-gold)); border-radius: 50%; aspect-ratio: 1; }
.yp-custom-stage[data-ycs-preset="luxe"] .qs-timer b { color: #1b130c; }
.yp-custom-stage[data-ycs-preset="luxe"] .qs-bar { background: var(--lx-gold); }
.yp-custom-stage[data-ycs-preset="luxe"] :is(.ws-kicker, .wst-kicker) { background: none; box-shadow: none; color: var(--lx-gold); }
.yp-custom-stage[data-ycs-preset="luxe"] .wst-rays { display: none; }
.yp-custom-stage[data-ycs-preset="luxe"] .bar-track { background: rgba(227, 189, 106, .08); box-shadow: inset 0 0 0 1px rgba(227, 189, 106, .25); }
.yp-custom-stage[data-ycs-preset="luxe"] .cs-row.lead { border-color: var(--lx-gold); background: linear-gradient(90deg, rgba(227, 189, 106, .18), transparent 65%); }
.yp-custom-stage[data-ycs-preset="luxe"] :is(.ag-lobby-top small, .ag-lobby-label, .ag-lobby-room h2, .ag-lobby-clock span, .ag-lobby-foot small) { color: rgba(246, 231, 196, .62); }
.yp-custom-stage[data-ycs-preset="luxe"] .ag-lobby-slot.live { background: linear-gradient(140deg, rgba(227, 189, 106, .22), rgba(198, 42, 32, .22)); border-color: var(--lx-gold); }
@media (prefers-reduced-motion: reduce) { .yp-custom-stage[data-ycs-preset]::before, .yp-custom-stage[data-ycs-preset]::after { animation: none !important; } }

/* ---- The 3D spin wheel (public/js/wheel3d.js) on the five themes: details on one half, the
   wheel on the other; for a spin the wheel comes to the centre and grows, then the winner pop-up
   with its countdown bar, then the wheel goes back and the winner joins the list. ---- */
.wst.w3d { overflow: hidden; }
.wst.w3d > :is(.stage-lights, .wst-head, .wst-main) { display: none !important; }
.w3d-canvas { position: absolute; inset: 0; z-index: 0; }
.w3d-canvas canvas { display: block; }
.w3d-panel { position: absolute; top: 0; bottom: 0; width: 44%; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.2vh, 38px); padding: 7vh 4.2vw; color: var(--ycs-text, #fff);
  transition: opacity .7s ease, transform .9s cubic-bezier(.65, 0, .35, 1); }
.w3d[data-side="left"] .w3d-panel { left: 0; }
.w3d[data-side="right"] .w3d-panel { right: 0; }
.w3d.focus .w3d-panel { opacity: 0; transform: translateX(-6%); pointer-events: none; }
.w3d[data-side="right"].focus .w3d-panel { transform: translateX(6%); }
.w3d-logo { position: absolute; top: 5vh; max-height: 6vh; max-width: 14vw; object-fit: contain; }
.w3d[data-side="left"] .w3d-logo { left: 4.2vw; } .w3d[data-side="right"] .w3d-logo { right: 4.2vw; }
.w3d-kicker { font: 600 clamp(11px, 1.2vh, 15px) / 1 "IBM Plex Mono", monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--ycs-accent); }
.w3d-title { margin: 1.4vh 0 0; font: 800 clamp(34px, 7vh, 84px) / 1.02 var(--ycs-font-head, Rubik); letter-spacing: -.01em; color: var(--ycs-text); }
.w3d-sub { margin: 1.2vh 0 0; font: 700 clamp(14px, 2vh, 22px) / 1.4 var(--ycs-font-body, Nunito); color: var(--ycs-dim); }
.w3d-stats { display: flex; gap: clamp(20px, 3vw, 48px); }
.w3d-stats b { display: block; font: 800 clamp(28px, 5vh, 56px) / 1 var(--ycs-font-head, Rubik); color: var(--ycs-text); }
.w3d-stats span { font: 700 clamp(12px, 1.6vh, 18px) / 1.3 var(--ycs-font-body, Nunito); color: var(--ycs-dim); }
.w3d-wins { display: grid; gap: 1.2vh; }
.w3d-win { display: flex; align-items: center; gap: 1.4vw; padding: 1.4vh 1.2vw; border-radius: var(--ycs-radius, 14px); background: color-mix(in srgb, var(--ycs-card) 82%, transparent); border: 1px solid var(--ycs-line); color: var(--ycs-card-text); }
.w3d-win img, .w3d-win .ph { width: clamp(36px, 6vh, 64px); height: clamp(36px, 6vh, 64px); border-radius: 50%; object-fit: cover; flex-shrink: 0; background: color-mix(in srgb, var(--ycs-accent) 25%, transparent); }
.w3d-win .ph { display: grid; place-items: center; font: 800 clamp(13px, 2vh, 22px) var(--ycs-font-head, Rubik); color: var(--ycs-card-text); }
.w3d-win.new .ph { background: rgba(255, 255, 255, .25); color: #fff; }
.w3d-card.no-pic { padding-top: clamp(40px, 6vh, 64px); }
.w3d-win b { display: block; font: 800 clamp(16px, 2.6vh, 30px) / 1.15 var(--ycs-font-head, Rubik); }
.w3d-win small { font: 700 clamp(11px, 1.5vh, 16px) / 1.3 var(--ycs-font-body, Nunito); opacity: .75; }
.w3d-win.new { background: var(--ycs-highlight); border-color: var(--ycs-highlight); color: #fff; animation: w3d-in .55s cubic-bezier(.2, 1.2, .4, 1); }
.w3d-win .tag { margin-left: auto; font: 700 12px "IBM Plex Mono", monospace; letter-spacing: .18em; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
@keyframes w3d-in { from { opacity: 0; transform: translateX(-60px); } }
.w3d[data-side="right"] .w3d-win.new { animation-name: w3d-in-r; }
@keyframes w3d-in-r { from { opacity: 0; transform: translateX(60px); } }
.w3d-for { position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; align-items: baseline; padding: 10px 22px; border-radius: 99px; background: color-mix(in srgb, var(--ycs-card) 85%, transparent); color: var(--ycs-card-text); font: 700 clamp(14px, 2vh, 22px) var(--ycs-font-body, Nunito); }
.w3d-for[hidden] { display: none; }
.w3d-pop { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: color-mix(in srgb, var(--ycs-bg) 55%, transparent); animation: ws-fade .35s ease-out; }
.w3d-pop[hidden] { display: none; }
.w3d-pop.out { animation: w3d-out .3s ease-in forwards; }
@keyframes w3d-out { to { opacity: 0; } }
.w3d-card { position: relative; width: min(680px, 80vw); padding: clamp(60px, 11vh, 120px) 48px 52px; border-radius: 32px; text-align: center; background: var(--ycs-card); color: var(--ycs-card-text); border: 1px solid var(--ycs-line); box-shadow: 0 40px 120px rgba(0, 0, 0, .45); animation: ws-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
.w3d-card .pic { position: absolute; left: 50%; top: 0; width: clamp(120px, 20vh, 200px); height: clamp(120px, 20vh, 200px); transform: translate(-50%, -55%); border-radius: 50%; object-fit: cover; border: 8px solid var(--ycs-highlight); background: #fff; }
.w3d-card .k { font: 600 clamp(12px, 1.6vh, 16px) "IBM Plex Mono", monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--ycs-accent); }
.w3d-card .nm { margin-top: 1.2vh; font: 900 clamp(36px, 7.4vh, 84px) / 1.05 var(--ycs-font-head, Rubik); overflow-wrap: anywhere; }
.w3d-card .for { margin-top: 1vh; font: 700 clamp(14px, 2.2vh, 24px) var(--ycs-font-body, Nunito); opacity: .75; }
.w3d-card .pz { margin-top: 1.4vh; font: 700 clamp(16px, 2.6vh, 30px) / 1.25 var(--ycs-font-body, Nunito); opacity: .85; overflow-wrap: anywhere; }
.w3d-card .cd { margin-top: 2.6vh; font: 700 clamp(12px, 1.6vh, 16px) var(--ycs-font-body, Nunito); opacity: .65; }
.w3d-card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 32px 32px; overflow: hidden; background: var(--ycs-line); }
.w3d-card .bar i { display: block; height: 100%; width: 0; background: var(--ycs-highlight); }
.yp-custom-stage[data-ycs-preset="tech"] .w3d-card { background: linear-gradient(165deg, rgba(12, 32, 44, .96), rgba(4, 12, 18, .98)); border-color: rgba(79, 195, 232, .5); }
.yp-custom-stage[data-ycs-preset="cartoon"] .w3d-card { border: 4px solid #fff; box-shadow: 0 0 0 4px #ff7a7a, 0 18px 0 4px rgba(43, 42, 107, .14), 0 40px 90px -20px rgba(43, 42, 107, .35); }
.yp-custom-stage[data-ycs-preset="luxe"] .w3d-card { border-color: rgba(227, 189, 106, .7); }
.yp-custom-stage[data-ycs-preset="neon"] .w3d-card { background: linear-gradient(160deg, rgba(40, 52, 96, .92), rgba(16, 22, 44, .96)); border-color: rgba(170, 184, 255, .3); }
@media (prefers-reduced-motion: reduce) { .w3d-panel { transition: none; } .w3d-win.new, .w3d-card { animation: none; } }

/* ---- The choice on the event page (Settings → Big screen theme) ---- */
.bst-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.bst-option { display: grid; gap: 10px; align-content: start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.bst-option:hover { border-color: var(--border-strong); }
.bst-option.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bst-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bst-option:has(input:disabled) { cursor: default; }
.bst-text { display: grid; gap: 2px; }
.bst-text small { font-size: 13px; line-height: 1.45; }
/* A miniature big screen in each theme: a title bar and a winner box. */
.bst-swatch { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.bst-swatch i { position: absolute; display: block; }
.bst-swatch .bar { left: 8%; top: 12%; width: 36%; height: 7%; border-radius: 2px; }
.bst-swatch .box { left: 26%; right: 26%; top: 32%; bottom: 14%; border-radius: 6px; display: grid; place-items: center; }
.bst-swatch .name { position: static; width: 60%; height: 16%; border-radius: 2px; }
.bst-swatch.clean { background: linear-gradient(160deg, #f6f1ea, #e8e1d7); box-shadow: inset 0 0 0 1px var(--border); }
.bst-swatch.clean .bar, .bst-swatch.clean .name { background: #2a241e; }
.bst-swatch.clean .box { background: #fff; border: 1px solid rgba(42, 36, 30, .14); }
.bst-swatch.clean .box::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 18%; height: 4%; background: #c8402f; border-radius: 2px; }
.bst-swatch.tech { background: radial-gradient(60% 60% at 50% 110%, rgba(79, 195, 232, .35), transparent 70%), #02070a; }
.bst-swatch.tech::before { content: ""; position: absolute; left: -40%; right: -40%; bottom: 0; height: 45%; background-image: linear-gradient(rgba(79, 195, 232, .45) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 195, 232, .35) 1px, transparent 1px); background-size: 12px 12px; transform: perspective(80px) rotateX(60deg); transform-origin: 50% 100%; }
.bst-swatch.tech .bar { background: #dff4fb; }
.bst-swatch.tech .box { background: rgba(10, 28, 38, .8); border: 1px solid rgba(79, 195, 232, .6); box-shadow: 0 0 14px -2px rgba(79, 195, 232, .7); }
.bst-swatch.tech .name { background: #fff; box-shadow: 0 0 8px rgba(232, 80, 91, .9); }
.bst-swatch.neon { background: radial-gradient(70% 40% at 30% 40%, rgba(59, 91, 219, .45), transparent 70%), radial-gradient(60% 30% at 70% 65%, rgba(255, 123, 123, .3), transparent 70%), #070a14; }
.bst-swatch.neon .bar { background: #eef1ff; }
.bst-swatch.neon .box { background: rgba(210, 220, 255, .12); border: 1px solid rgba(170, 184, 255, .4); backdrop-filter: blur(4px); }
.bst-swatch.neon .name { background: #ffb0a8; }
.bst-swatch.cartoon { background: radial-gradient(14% 10% at 18% 24%, #fff 60%, transparent 62%), radial-gradient(18% 11% at 80% 18%, #fff 60%, transparent 62%), linear-gradient(180deg, #ffd6c2, #cbe8ff); }
.bst-swatch.cartoon .bar { background: #2b2a6b; }
.bst-swatch.cartoon .box { background: #fff; border: 3px solid #ff7a7a; border-radius: 12px; }
.bst-swatch.cartoon .name { background: #ff5f5f; }
.bst-swatch.luxe { background: radial-gradient(60% 60% at 50% 40%, rgba(227, 189, 106, .25), transparent 70%), #070504; }
.bst-swatch.luxe .bar { background: #f6e7c4; }
.bst-swatch.luxe .box { background: #16100b; border: 1px solid #e3bd6a; box-shadow: 0 0 14px -2px rgba(227, 189, 106, .6); }
.bst-swatch.luxe .name { background: #e3bd6a; }
@media (max-width: 640px) {
  .bst-options { grid-template-columns: minmax(0, 1fr); }
  .bst-option { grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
}

/* =========================================================================
   Signed-in top bar (main.js accountBar): the logo, My Events and Reports on the left and the
   profile button on the right. Phones, and a bar too long for one line (.collapsed, see
   fitSigned in site-nav.js), show the menu button instead. Then the My Events page (dashboard.js).
   ========================================================================= */
.acct-nav { display: block; min-width: 0; margin-left: 8px; }
.topbar.signed .nav .menu-btn { display: none; }
.topbar.signed.collapsed .acct-nav, .topbar.signed.collapsed .nav > .pm { display: none; }
.topbar.signed.collapsed .nav .menu-btn { display: inline-flex; }
@media (max-width: 600px) {
  .topbar.signed .acct-nav, .topbar.signed .nav > .pm { display: none; }
  .topbar.signed .nav .menu-btn { display: inline-flex; }
}
/* The profile button and its pop-up. */
.pm { position: relative; }
.nav .pm-button { gap: 8px; }
.pm-button .mn-caret { transition: transform .18s ease; }
.nav .pm-button[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.pm-button[aria-expanded="true"] .mn-caret { transform: rotate(180deg); }
.pm-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pm-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 300px; display: grid; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: calc(100vh - 88px); overflow-y: auto; white-space: normal; animation: mn-in .16s ease-out; }
.pm-panel[hidden] { display: none; }
.pm-who { display: grid; gap: 2px; padding: 6px 10px 10px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.pm-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; font-size: 14.5px; }
.pm-who .muted { font-size: 12.5px; }
/* The plan, very small beside the name. */
.pm-tag { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 18px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.pm-tag.paid { background: color-mix(in srgb, var(--gold) 28%, var(--surface)); color: var(--text); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.pm-links { display: grid; gap: 1px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.pm-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.pm-item svg { color: var(--muted); flex: none; }
.pm-item:hover { background: var(--surface-2); }
.pm-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pm-prefs { display: grid; gap: 6px; padding: 6px 10px 10px; border-bottom: 1px solid var(--border); }
.pm-pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.pm-pref-label { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.pm-pref-label svg { color: var(--muted); flex: none; }
.pm-pref .select.sm { width: 150px; min-height: 34px; padding: 5px 30px 5px 10px; font-size: 13.5px; }
/* Language and the country tag share the row: the list shrinks so the menu never scrolls sideways. */
.pm-pref-label { flex: none; }
.pm-pref .lang-pick { flex: 0 1 auto; min-width: 0; }
.pm-pref .lang-pick .select.sm { width: auto; min-width: 0; max-width: 150px; }
.pm-pref .country-tag { flex: none; }
.pm-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); }
.pm-seg button { all: unset; box-sizing: border-box; padding: 4px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.pm-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
.pm-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pm-logout, .pm-logout svg { color: var(--danger); }
/* The same items in the phone menu, with room for a finger. */
.mm-profile { display: grid; gap: 4px; padding-top: 12px; }
.mm-profile .pm-who { padding: 4px 10px 12px; }
.mm-profile .pm-name { font-size: 17px; }
.mm-profile .pm-item { min-height: 48px; font-size: 16px; font-weight: 600; }
.mm-profile .pm-pref { min-height: 48px; font-size: 16px; font-weight: 600; }
.mm-profile .pm-pref .select.sm { min-height: 40px; font-size: 16px; }
.mm-profile .pm-seg button { padding: 8px 12px; font-size: 14px; }
/* My Events: the two buttons side by side, then the events as cards (3, 2 or 1 a row). */
.dash-wrap { max-width: 1120px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Yaypick Christmas on My Events: its button and its party cards (the module's own styles are in christmas.css). */
.dash-actions .btn.xm-btn { background: linear-gradient(180deg, #1f7a45, #145c34); border-color: rgba(245, 196, 81, .55); color: #fff; box-shadow: 0 6px 18px rgba(20, 92, 52, .35); }
.dash-actions .btn.xm-btn svg { color: #f5c451; }
.dash-actions .btn.xm-btn:hover { filter: brightness(1.1); }
.dash-card.xm-dash-card { border-color: rgba(245, 196, 81, .45); background: linear-gradient(160deg, rgba(31, 122, 69, .22), transparent 70%), var(--surface); }
.dash-card.xm-dash-card .sw { background: linear-gradient(180deg, #e23b4e, #c8102e); }
.wallet { margin: 0 0 28px; }
.wallet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.wallet-head .section-title { margin: 0; }
.wallet-actions { display: flex; align-items: center; gap: 16px; }
.wallet-link { font-size: 14px; font-weight: 600; color: var(--accent-text, var(--accent)); }
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* A ticket: main part and stub, a dashed tear line with a half-circle notch at its top and bottom. */
.ticket { --stub: 96px; --notch: 9px; position: relative; display: flex; min-height: 84px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ticket::before, .ticket::after { content: ''; position: absolute; right: calc(var(--stub) - var(--notch)); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--bg); border: 1px solid var(--border); }
.ticket::before { top: calc(var(--notch) * -1 - 1px); clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: calc(var(--notch) * -1 - 1px); clip-path: inset(0 0 50% 0); }
.ticket-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ticket-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ticket-txt { min-width: 0; display: grid; gap: 2px; }
.ticket-txt b { font-weight: 700; overflow-wrap: anywhere; color: var(--text); }
.ticket-txt span { font-size: 13px; color: var(--muted); }
.ticket-stub { flex: none; width: var(--stub); display: grid; place-content: center; justify-items: center; gap: 2px; border-left: 2px dashed var(--border-strong); border-radius: 0 13px 13px 0; background: var(--accent-softer); }
.ticket-stub strong { font-size: 26px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.ticket-stub span { font-size: 12px; font-weight: 600; color: var(--text-2, var(--muted)); }
.ticket-empty::before, .ticket-empty::after { display: none; }
/* Cards in a row are equally tall (the older two-column .dash-grid above aligned them to the top). */
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 959px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.dash-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 150px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.dash-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.dash-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-card-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.dash-card-top > .grow { min-width: 0; }
.dash-card .t { font-weight: 700; overflow-wrap: anywhere; }
.dash-card-top .sw { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.dash-card > .small { flex: 1; }
.dash-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.dash-card-foot > svg { margin-left: auto; color: var(--muted); }
@media (max-width: 600px) {
  .dash-actions { width: 100%; }
  .dash-actions .btn { flex: 1 1 0; justify-content: center; }
  .dash-card { min-height: 0; }
}

/* ==========================================================================
   Event page areas (public/js/pages/event.js): Activities, Guests, Agenda and Settings.
   A sidebar with a line on each area on a desktop; four tabs across on a phone. Guests and
   Settings are cards with headings in two columns, never long stacked accordions.
   ========================================================================== */
.ev-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; margin: 18px 0 48px; }
.ev-nav { display: grid; gap: 4px; position: sticky; top: 86px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ev-nav button { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: var(--radius); cursor: pointer; color: var(--text-2); }
.ev-nav button:hover { background: var(--surface-2); color: var(--text); }
.ev-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ev-nav button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.ev-nav-ico { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); color: var(--text-2); }
.ev-nav [aria-selected="true"] .ev-nav-ico { background: var(--accent); color: var(--on-accent); }
.ev-nav-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ev-nav-text b { font-size: 15px; font-weight: 700; color: var(--text); }
.ev-nav-text small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ev-nav .ev-count { margin: 6px 0 0 auto; }
.ev-nav [aria-selected="true"] .ev-count { background: var(--surface); color: var(--accent-text); }
.ev-main { display: grid; gap: 16px; min-width: 0; }
.ev-area-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 16px; }
.ev-area-head h2 { font-size: 22px; }
.ev-area-head p { margin-top: 2px; }
/* The sidebar already says what each area is for; the line returns under the heading on a phone. */
.ev-area-head p { display: none; }
.ev-main .ev-activities { margin: 0; }
.ev-main .ev-start { margin: 0; }
.ev-main .hub-admin { margin: 0; }
/* Cards in two columns: the Guests and Settings areas. */
.ev-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ev-block { display: grid; gap: 12px; align-content: start; padding: 20px; min-width: 0; }
.ev-block-head { display: flex; align-items: center; gap: 10px; }
.ev-block-head h3 { font-size: 16.5px; margin: 0; }
.ev-block-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); color: var(--text-2); }
.ev-block .pass-panel { margin: 0; }
/* The pass panel in a column: its buttons go under the text rather than squeezing it. */
.ev-block .pass-panel > .grow { flex: 1 1 calc(100% - 60px); min-width: 0; }
.ev-block .pass-panel > .row { margin-left: 52px; }
.ev-block .team-card { margin: 0; }
.ev-block .team-card form .input { max-width: none; flex: 1; }
.ev-block .hub-order { max-width: none; margin: 0; }
.ev-block > .btn { justify-self: start; }
.ev-main .hub-admin .select { max-width: 420px; }
.ev-roster-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; margin: 0; }
.ev-roster-count b { font-size: 20px; }
.ev-roster-req { background: var(--accent); color: var(--on-accent); }
.ev-main .ev-offer { margin: 6px 0 0; display: grid; gap: 8px; }
.ev-main .ev-offer:has(> .ycs-card[hidden]) { display: none; }
.ev-offer-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
.ev-main .ev-offer .ycs-card { margin: 0; }
/* Agenda: "Who can join" (for session ratings) as one compact setting row above the sessions. */
.ev-main .ag-access { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ev-main .ag-access .field { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; flex: 1 1 auto; }
.ev-main .ag-access .field label { margin: 0; font-size: 14px; }
.ev-main .ag-access .select { width: auto; min-width: 240px; max-width: 100%; }
.ev-main .ag-access .field .hint { flex-basis: 100%; margin: 0; }
.ev-main .ag-access > .hint { flex-basis: 100%; margin: 0; }
.ev-main .ag-admin > .row.wrap:first-child h2 { display: none; }
/* The area heading names it: the Session button sits at the end of the tools row instead. */
.ev-main .ag-admin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ev-main .ag-admin > * { grid-column: 1 / -1; }
.ev-main .ag-admin > .row.wrap:first-child { grid-column: 2; grid-row: 1; }
.ev-main .ag-admin > .ag-admin-tools { grid-column: 1; grid-row: 1; }
/* Activity cards: three a row beside the sidebar on smaller desktops. */
@media (max-width: 1279px) { .ev-main .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .ev-cols { grid-template-columns: 1fr; } }
@media (max-width: 899px) {
  .ev-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; }
  .ev-nav { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px; }
  .ev-nav:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ev-nav:has(> :nth-child(6):last-child), .ev-nav:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ev-nav button { flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; text-align: center; min-height: 56px; position: relative; }
  .ev-nav-ico { width: 28px; height: 28px; background: transparent; }
  .ev-nav [aria-selected="true"] .ev-nav-ico { background: transparent; color: var(--accent-text); }
  .ev-nav-text b { font-size: 13px; color: inherit; }
  .ev-nav-text small { display: none; }
  .ev-nav .ev-count { position: absolute; top: 4px; right: 6px; margin: 0; font-size: 11px; min-width: 18px; padding: 0 5px; }
  .ev-area-head p { display: block; }
  .ev-area-head h2 { font-size: 20px; }
  .ev-main .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ev-area-head .btn { flex: 1 1 100%; justify-content: center; }
  .ev-block { padding: 16px; }
  .ev-block .pass-panel > .row { margin-left: 0; }
  .ev-main .ag-access .select { min-width: 0; width: 100%; }
  .ev-main .ag-admin > .row.wrap:first-child, .ev-main .ag-admin > .ag-admin-tools { grid-column: 1 / -1; grid-row: auto; }
  .ev-main .ag-admin > .row.wrap:first-child .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 479px) { .ev-main .ev-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Big screen look per activity (public/js/screen-look.js): the theme cards reuse .bst-option
   and .bst-swatch above; the holding screen's uploader and its full-screen overlay on every big
   screen (stage-design.js applyHolding).
   --------------------------------------------------------------------------- */
.ysl { display: flex; flex-direction: column; }
.ysl.card { padding-top: 4px; padding-bottom: 4px; }
.ysl-media { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ysl-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0d0f22; border: 1px solid var(--border); display: grid; place-items: center; }
.ysl-thumb > span { display: inline-flex; gap: 6px; align-items: center; color: #c9cbe0; padding: 8px; text-align: center; }
.ysl-thumb img, .ysl-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ysl-thumb[data-fit="contain"] img, .ysl-thumb[data-fit="contain"] video { object-fit: contain; background: #000; }
.ysl-limits { display: flex; align-items: flex-start; margin: 0; }
.ysl-limits svg { margin-top: 3px; }
.ysl-progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ysl-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.ysl-holding-set .setting { align-items: center; }
.ysl-holding-set .setting .s-text { flex: 1 1 auto; min-width: 0; }
.ysl-holding-set .setting .segmented, .ysl-holding-set .setting .switch { flex-shrink: 0; }
.ysl-holding-set label.setting { flex-wrap: nowrap; }
/* On the controllers: one clear button above the main controls. */
.dc-col > .ysl-toggle { align-self: stretch; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; }
.dc-col > .ysl-toggle .t { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) {
  .ysl-media { grid-template-columns: minmax(0, 1fr); }
  .ysl-holding-set .setting { flex-wrap: wrap; }
}
/* The holding screen on a big screen: over everything, the live screen keeps running underneath. */
.ysl-holding { position: fixed; inset: 0; z-index: 2147483000; background: #000; cursor: none; }
/* A free trial event's big screen (stage-design.js wearTrialMark): a small mark in the bottom-left corner, over everything. */
.ysl-trial { position: fixed; left: 18px; bottom: 16px; z-index: 2147483001; display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 700 clamp(12px, 1vw, 16px)/1.2 "Nunito", system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; }
.ysl-trial span { font-weight: 600; opacity: .75; }
.ysl-holding img, .ysl-holding video { width: 100%; height: 100%; display: block; object-fit: cover; }
.ysl-holding[data-fit="contain"] img, .ysl-holding[data-fit="contain"] video { object-fit: contain; }

/* ---------------------------------------------------------------------------
   Guest list upload (guest-list.js): Upload → Check → Import, and the list table
   --------------------------------------------------------------------------- */
.gl-wizard { gap: 18px; }
.gl-page > *, .gl-wizard > * { min-width: 0; }
.gl-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; counter-reset: none; }
.gl-stepper li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 14px; }
.gl-stepper li.now { background: var(--accent-soft); color: var(--text); }
.gl-stepper li.done { color: var(--success); }
.gl-step-n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface); font-size: 12.5px; font-weight: 700; }
.gl-stepper li.now .gl-step-n { background: var(--accent); color: var(--on-accent); }
.gl-upload { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.gl-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 230px; padding: 24px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); transition: border-color .15s, background .15s; }
.gl-drop > svg { color: var(--accent); }
.gl-drop b { font-size: 17px; color: var(--text); }
.gl-drop .btn { margin-top: 6px; }
.gl-drop.over { border-color: var(--accent); background: var(--accent-softer); }
.gl-drop-error { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; color: var(--danger); font-weight: 600; font-size: 14px; text-align: left; }
.gl-drop-error svg { flex-shrink: 0; margin-top: 2px; }
.gl-needs { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.gl-needs h3 { margin: 0; }
.gl-need { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.gl-needs h3 + .gl-need { padding-top: 0; border-top: 0; }
.gl-need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gl-needs-note { margin: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.gl-needs-actions { gap: 8px; }
.gl-needs-actions .btn { border: 1px solid var(--border-strong, var(--border)); background: var(--surface); }
.gl-needs-actions .btn:hover { border-color: var(--text-2); }
.gl-pass-line { padding-top: 14px; border-top: 1px solid var(--border); }
.gl-need li b { display: block; font-size: 14.5px; }
.gl-need li span { display: block; font-size: 13px; color: var(--muted); }
.gl-need-tag { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); color: var(--text-2); }
.gl-need.req .gl-need-tag { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.gl-need.rec .gl-need-tag { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.gl-pass-line { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--text-2); }
.gl-pass-line svg { flex-shrink: 0; margin-top: 2px; }
.gl-check-head { gap: 12px; align-items: flex-start; }
.gl-check-head h3 { margin: 0 0 2px; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-chip { padding: 4px 12px; border-radius: 999px; font-size: 13.5px; background: var(--surface-2); color: var(--text-2); }
.gl-chip.ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.gl-chip.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.gl-chip.warn { color: var(--warning); background: color-mix(in srgb, var(--gold) 20%, var(--surface)); }
.gl-preview-foot { gap: 12px; align-items: center; }
.gl-wizard-actions { gap: 10px; align-items: center; padding-top: 4px; border-top: 1px solid var(--border); padding-top: 14px; }
.gl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.gl-stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); }
.gl-stat b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gl-stat span { color: var(--muted); font-size: 13.5px; }
.gl-stat.bad b { color: var(--danger); }
.gl-warn-soft { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--warning); }
.gl-warn-soft svg { flex-shrink: 0; margin-top: 2px; }
.gl-colmap { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gl-colmap li { padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; background: var(--surface); }
.gl-type { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.gl-type.t-name, .gl-type.t-id { color: var(--accent-text, var(--accent)); }
.gl-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gl-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.gl-tools { gap: 8px; align-items: center; }
.gl-menu { position: relative; }
.gl-menu > summary { list-style: none; }
.gl-menu > summary::-webkit-details-marker { display: none; }
.gl-menu-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 170px; display: grid; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); }
.gl-menu-list button { border: 0; background: none; padding: 9px 12px; border-radius: 8px; text-align: left; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.gl-menu-list button:hover, .gl-menu-list button:focus-visible { background: var(--surface-2); }
.gl-people-table { max-height: 70vh; overflow: auto; }
.gl-people-table td { white-space: nowrap; vertical-align: middle; }
.gl-done .t { margin-bottom: 2px; }
@media (max-width: 760px) {
  .gl-upload { grid-template-columns: 1fr; }
  .gl-drop { min-height: 180px; }
  .gl-wizard-actions .btn.primary { flex: 1 1 auto; justify-content: center; }
  .gl-check-head > .grow, .gl-preview-foot > .grow { flex: 1 1 100%; }
}

/* ==========================================================================
   Spin the wheel, types and designs (src/wheels.ts, public/js/wheel-templates.js):
   the type cards (.wk-*), the design cards (.wt-*), the organiser page's lists and
   autosave (.wa-*), the controller's steps and "Hand to a guest" (.wc-*), the big
   screen's "Spinning for" and each design's stage (.wst[data-template]), and the
   wheel's newer rims, bulbs and pointer (.ft-*).
   ========================================================================== */

/* ---- The three types: radio cards (the New wheel dialog and Settings) ---- */
.wk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wk-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wk-card:hover { border-color: var(--border-strong); }
.wk-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.wk-card input { position: absolute; opacity: 0; pointer-events: none; }
.wk-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--accent-text, var(--accent)); background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent)); }
.wk-text { display: grid; gap: 3px; min-width: 0; }
.wk-text b { font-size: 15px; }
.wk-text small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.wk-import[hidden] { display: none; }
@media (max-width: 700px) { .wk-cards { grid-template-columns: minmax(0, 1fr); } .wk-card { padding: 12px; } }

/* ---- Organiser page: tabs with the autosave note, what the segments show, the tools ---- */
.wa-tabs-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.wa-tabs-row .wa-tabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.wa-autosave { flex: none; white-space: nowrap; }
.wa-autosave:empty { display: none; }
.wa-display { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wa-display-opt { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wa-display-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.wa-display-opt.on { border-color: var(--text); color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.wa-display-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-display-ico { display: inline-flex; gap: 2px; color: var(--muted); }
/* A card: the picture on top, the name under it. Names only: just the name. */
.wa-import-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.wa-import-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wa-import-opt:has(input:disabled) { opacity: .55; cursor: default; }
.wa-import-opt input { margin-top: 3px; accent-color: var(--accent); }
.wa-import-opt > span { display: grid; gap: 2px; }
.wa-rim-ring.r-neon { background: conic-gradient(from -60deg, #22e4ff, #a855f7, #ff2e88, #22e4ff); box-shadow: 0 0 8px rgba(34, 228, 255, .7); }
.wa-rim-ring.r-soft { background: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px); mask: radial-gradient(circle, transparent 8px, #000 9px); }
.wa-options-look { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 560px) {
  .wa-tabs-row { flex-wrap: wrap; gap: 4px; }
  .wa-autosave { order: -1; margin-left: auto; }
}

/* ---- Designs: a card per design, its thumbnail the real wheel on the design's stage colour ---- */
.wt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wt-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 8px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.wt-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.wt-card.on { border-color: var(--accent-ui, var(--text)); box-shadow: 0 0 0 2px var(--text); }
.wt-card input { position: absolute; opacity: 0; pointer-events: none; }
.wt-card:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.wt-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; overflow: hidden; padding: 12%;
  background: radial-gradient(90% 80% at 50% 20%, color-mix(in srgb, var(--wt-bg) 78%, #fff) 0%, var(--wt-bg) 70%); }
.wt-thumb.light { box-shadow: inset 0 0 0 1px var(--border); }
.wt-thumb .ft-rig { width: 100%; padding: 0; margin: 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }
.wt-thumb .ft-wheel-hub img { width: 50%; }
.wt-text { display: grid; gap: 2px; padding: 0 2px; }
.wt-text b { font-size: 13.5px; }
.wt-text small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.wt-custom { display: flex; gap: 6px; align-items: center; margin: 0; }
.wt-custom[hidden] { display: none; }
@media (max-width: 1100px) { .wt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .wt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wt-text small { display: none; } }
@media (max-width: 560px) { .wt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Controller: the steps, the pairs, "Hand to a guest" (only the Spin button) ---- */
.wc-hand-bar { display: none; }
.wc.handed .wc-hand-bar { display: flex; align-items: center; gap: 10px; padding: 10px clamp(16px, 3vw, 32px); background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 600; }
.wc.handed .dc-head, .wc.handed .wc-side, .wc.handed .wc-conn, .wc.handed .ysl-toggle { display: none; }
.wc.handed .dc-main { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.wc.handed .wc-spin { min-height: min(46vh, 360px); border-radius: 28px; }
.wc.handed .wc-spin span { font-size: clamp(38px, 9vw, 56px); }

/* ---- Big screen: "Spinning for {name}", the guest card's next step, each design's stage ---- */
.wst-for { position: relative; z-index: 2; display: inline-flex; align-items: baseline; gap: 12px; max-width: min(90vw, 1000px); margin-bottom: -1vh; padding: 8px 26px; border-radius: 999px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ws-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.wst-for[hidden] { display: none; }
.wst-for span { font-size: clamp(14px, 1vw + .5vh, 22px); font-weight: 700; color: var(--s-dim); text-transform: uppercase; letter-spacing: .08em; }
.wst-for b { font-size: clamp(22px, 2.2vw + 1.2vh, 54px); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage.wst[data-theme="light"] .wst-for { background: rgba(255, 255, 255, .75); border-color: rgba(20, 26, 51, .12); }
/* The wheel is a little smaller with the "Spinning for" line above it. */
.stage.wst:has(.wst-for:not([hidden])) { --wh: min(calc(100vh - 320px), 86vw, 920px); }
.wst-card-next { font-size: clamp(14px, 1vw + .5vh, 22px); font-weight: 700; color: var(--s-dim); }
.wst-banner-k { font-size: clamp(12px, .8vw + .4vh, 18px); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.wst-banner-prize { font-size: clamp(13px, .8vw + .6vh, 20px); font-weight: 700; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage.wst[data-wfont="serif"] { --font: "Newsreader", var(--lang-serif, Georgia), Georgia, serif; }
.stage.wst[data-wfont="rounded"] { --font: "Nunito", "Rubik", var(--lang-sans, system-ui), system-ui, sans-serif; }
.stage.wst[data-wfont] :is(.wst-headline, .wst-card-label, .wst-banner b, .wst-for b) { font-family: var(--font); }
.stage.wst[data-wfont="serif"] .wst-headline { letter-spacing: -0.02em; font-weight: 700; }
/* Casino night: green baize with a spotlight, gold type. */
.stage.wst[data-template="casino"][data-bg="color"] { background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--wst-bg) 70%, #3a8a5f) 0%, var(--wst-bg) 55%, color-mix(in srgb, var(--wst-bg) 55%, #000) 100%); }
.stage.wst[data-template="casino"] .wst-headline, .stage.wst[data-template="midnight"] .wst-headline, .stage.wst[data-template="festive"] .wst-headline {
  background: linear-gradient(180deg, #fff3c2 0%, #f1c75a 45%, #b8862a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)); }
/* Neon: a dark floor with violet and cyan light; the rim's glow spills onto the stage. */
.stage.wst[data-template="neon"][data-bg="color"] { background: radial-gradient(50% 45% at 50% 52%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), radial-gradient(40% 40% at 85% 0%, rgba(168, 85, 247, .35), transparent 70%), radial-gradient(40% 40% at 10% 100%, rgba(255, 46, 136, .25), transparent 70%), var(--wst-bg); }
.stage.wst[data-template="neon"] .wst-headline { color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 50%, transparent); }
.stage.wst[data-template="neon"] .wst-card { border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent), 0 40px 90px -20px rgba(0, 0, 0, .7), 0 0 90px -10px var(--accent); background: linear-gradient(165deg, #12123a, #07071a); }
.stage.wst[data-template="neon"] .wst-kicker { background: var(--accent); color: #05050f; box-shadow: 0 0 24px var(--accent); }
.stage.wst[data-template="neon"] .wst-card-label { text-shadow: 0 0 14px var(--accent), 0 0 46px color-mix(in srgb, var(--accent) 60%, transparent); }
/* Pastel: a warm paper stage with confetti dots, soft cards. */
.stage.wst[data-template="pastel"][data-bg="color"] { background: radial-gradient(circle at 12% 18%, #ffd9e4 0 6px, transparent 7px) 0 0 / 160px 160px, radial-gradient(circle at 70% 64%, #cfe6ff 0 5px, transparent 6px) 0 0 / 200px 200px, radial-gradient(circle at 40% 85%, #fff0b8 0 4px, transparent 5px) 0 0 / 140px 140px, var(--wst-bg); }
.stage.wst[data-template="pastel"] .stage-lights { display: none; }
.stage.wst[data-template="pastel"] .wst-headline { color: #3a2f4a; text-shadow: none; }
.stage.wst[data-template="pastel"] .wst-card { border-radius: 40px; border-color: #f6c3d3; box-shadow: 0 30px 70px -30px rgba(120, 80, 120, .35); }
.stage.wst[data-template="pastel"] .wst-kicker { background: #ffd1df; color: #6b2a45; box-shadow: none; }
.stage.wst[data-template="pastel"] .wst-card-pic { border-color: #fff; box-shadow: 0 16px 40px -16px rgba(120, 80, 120, .45); }
/* Festive: ang pao red with a gold lattice. */
.stage.wst[data-template="festive"][data-bg="color"] { background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--wst-bg) 70%, #e0242f) 0%, transparent 70%), repeating-linear-gradient(45deg, rgba(242, 193, 78, .06) 0 2px, transparent 2px 28px), repeating-linear-gradient(-45deg, rgba(242, 193, 78, .06) 0 2px, transparent 2px 28px), var(--wst-bg); }
.stage.wst[data-template="festive"] .wst-card { background: linear-gradient(165deg, #a50f1f 0%, #6d0a14 100%); border-color: #f2c14e; }
/* Ocean: deep water light from above. */
.stage.wst[data-template="ocean"][data-bg="color"] { background: radial-gradient(80% 60% at 50% -10%, rgba(72, 202, 228, .35), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--wst-bg) 80%, #0a6e8a) 0%, var(--wst-bg) 60%, color-mix(in srgb, var(--wst-bg) 60%, #000) 100%); }
.stage.wst[data-template="ocean"] .wst-kicker { background: linear-gradient(180deg, #90e0ef, #00b4d8); color: #032539; }
/* Midnight luxe: near black, a gold glow, a thin gold frame on the card. */
.stage.wst[data-template="midnight"][data-bg="color"] { background: radial-gradient(55% 50% at 50% 48%, rgba(212, 175, 55, .16), transparent 70%), var(--wst-bg); }
.stage.wst[data-template="midnight"] .wst-card { background: linear-gradient(165deg, #17161a, #0a0a0c); border-color: rgba(212, 175, 55, .7); }
.stage.wst[data-template="midnight"] .stage-lights { opacity: .35; }

/* ---- The wheel (wheel.js): neon and soft rims, marquee bulbs, the round pointer, the stand per rim ---- */
.ft-wheel.rim-neon { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent, #22e4ff) 55%, transparent)); }
.ft-wheel-hub.rim-neon { background: radial-gradient(circle at 50% 50%, #0b0b22 0 54%, transparent 55%), conic-gradient(from -60deg, #0b0b22, #23234a, #0b0b22);
  box-shadow: 0 0 0 2px var(--accent, #22e4ff), 0 0 18px var(--accent, #22e4ff), inset 0 0 12px color-mix(in srgb, var(--accent, #22e4ff) 50%, transparent); }
.ft-wheel-hub.rim-neon::after { display: none; }
.ft-wheel-hub.rim-neon img { filter: brightness(1.2) drop-shadow(0 0 6px var(--accent, #22e4ff)); }
.ft-wheel-hub.rim-neon .ft-hub-text { color: #fff; text-shadow: 0 0 10px var(--accent, #22e4ff); }
.ft-wheel-hub.rim-soft { background: #fff; box-shadow: 0 6px 16px rgba(20, 26, 51, .18), inset 0 0 0 3px color-mix(in srgb, var(--accent, #ef6f9a) 35%, #fff); }
.ft-wheel-hub.rim-soft::after { display: none; }
.ft-pointer.p-round { width: 9%; margin-left: -4.5%; top: -3.5%; filter: drop-shadow(0 4px 6px rgba(20, 26, 51, .25)); }
/* Marquee: the bulbs chase all the time, every other one lit, faster while it spins. */
.ft-wheel.bulbs-marquee .ft-bulbs i { animation: ft-marquee .9s steps(1, end) infinite; animation-delay: 0s; }
.ft-wheel.bulbs-marquee .ft-bulbs i:nth-child(even) { animation-delay: -0.45s; }
.ft-wheel.bulbs-marquee.spinning .ft-bulbs i { animation: ft-chase .45s linear infinite; animation-delay: calc(var(--i) * -0.0188s); }
@keyframes ft-marquee { 0% { opacity: 1; } 50% { opacity: .18; } }
.ft-rig.rim-silver .ft-stand::before, .ft-rig.rim-neon .ft-stand::before { background: linear-gradient(90deg, #3a3f48, #c9ced6 35%, #ffffff 48%, #9aa3b0 62%, #3a3f48); }
.ft-rig.rim-silver .ft-stand::after { background: linear-gradient(180deg, #e3e7ec, #6e7682 60%, #2c3038); }
.ft-rig.rim-neon .ft-stand::after { background: linear-gradient(180deg, #23234a, #0b0b22 70%); box-shadow: 0 0 0 1px var(--accent, #22e4ff), 0 0 20px color-mix(in srgb, var(--accent, #22e4ff) 50%, transparent); }
.ft-rig.rim-rosegold .ft-stand::before { background: linear-gradient(90deg, #4a2219, #e3a48c 35%, #ffe4d8 48%, #b06a55 62%, #4a2219); }
.ft-rig.rim-soft .ft-stand::before { background: linear-gradient(90deg, #e9e4ee, #ffffff 45%, #e9e4ee); }
.ft-rig.rim-soft .ft-stand::after { background: linear-gradient(180deg, #ffffff, #ece7f1); box-shadow: 0 14px 22px -8px rgba(20, 26, 51, .25); }
@media (prefers-reduced-motion: reduce) { .ft-wheel.bulbs-marquee .ft-bulbs i, .wst-for { animation: none; } }
/* Names only: compact cards in rows, and a short "Add" card. */

/* Event page → Settings: one column of sections (heading + why), label / value rows, danger zone last. */
.set2-col { display: grid; gap: 16px; max-width: 820px; }
.set2 { padding: 0; overflow: hidden; }
.set2-head { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px 14px; }
.set2-head h3 { font-size: 16.5px; margin: 0; }
.set2-head p { margin: 4px 0 0; max-width: 560px; }
.set2-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--border); }
.set2-label { color: var(--muted); font-size: 14px; }
.set2-value { min-width: 0; overflow-wrap: anywhere; }
.set2-aside { display: flex; justify-content: flex-end; }
.set2-hint { display: block; margin: 6px 0 0; }
.set2-pass, .set2-list { padding: 0 22px 18px; }
.set2-list { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.set2-invite { display: flex; gap: 8px; padding: 0 22px 20px; }
.set2-invite .input { flex: 1; min-width: 0; }
/* The button as tall as the email box beside it (founder, 30 Oct 2026). */
.set2-invite > .btn, .ck-add > .btn { height: auto; min-height: 0; align-self: stretch; }
/* The pass: a plain row inside its section, not a box inside a box; its buttons side by side. */
.set2-pass .pass-panel { border: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
.set2-pass .pass-panel .row { flex-wrap: wrap; }
.set2-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.set2-danger .set2-row { border-top: 0; grid-template-columns: minmax(0, 1fr) auto; }
.set2-danger .set2-label { color: var(--text); }
.set2-danger .set2-value:empty { display: none; }
@media (max-width: 640px) {
  .set2-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .set2-aside { justify-content: flex-start; }
  .set2-head, .set2-row { padding-left: 16px; padding-right: 16px; }
  .set2-pass, .set2-list, .set2-invite { padding-left: 16px; padding-right: 16px; }
}
.set2-list .team-row { border-top: 0; padding-top: 0; }

/* Event page activity cards: roomier, one standard shape. Three a row beside the sidebar
   (two on tablets, one on phones); every card the same height, the action along the bottom. */
.ev-main .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ev-main .ev-card { min-height: 176px; padding: 20px; gap: 16px; border-radius: 14px; }
.ev-main .ev-card-top { gap: 14px; align-items: flex-start; }
.ev-main .ev-card-top .sw { width: 42px; height: 42px; border-radius: 12px; }
.ev-main .ev-card-top .t { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-main .ev-card-top .tiny { font-size: 13px; margin-top: 4px; }
.ev-main .ev-card-actions { margin-top: auto; }
.ev-main .ev-card-actions > .btn { min-height: 40px; }
.ev-main .ev-card-add { min-height: 176px; font-size: 15px; }
@media (max-width: 1099px) { .ev-main .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ev-main .ev-grid { grid-template-columns: 1fr; } .ev-main .ev-card, .ev-main .ev-card-add { min-height: 0; } }

/* Big screen look, preview first and save second (screen-look.js screenLookEditor): on pages without
   a Screen tab preview (quiz, Q&A, wall, bingo, poll), a compact live preview of the activity's big
   screen (1280 × 720, scaled) above the theme and holding screen, with a sticky Save / Discard bar. */
.ysl-editor { display: flex; flex-direction: column; gap: 14px; }
.ysl-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ysl-live { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 560px; }
.ysl-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: #12142a; box-shadow: 0 18px 40px -24px rgba(13, 15, 34, .6); }
.ysl-frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; }
.ysl-editor .ysl-save { margin: 0 -6px -6px; }
.screen-save .btn[hidden] { display: none; }
/* Phones: the save bar's note on its own line, Discard and Save under it (not a tall column of words). */
@media (max-width: 600px) {
  .vs-save > span.grow { flex: 1 1 100%; }
  .vs-save > .btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   Live chat with the Yaypick assistant (public/js/chat-launch.js, chat.js).
   Every class starts with .ypc- so nothing here touches the pages. The button
   sits bottom right above the safe area, lifted above save bars (--ypc-lift, set by
   chat-launch.js); the panel is a card on desktop and a
   full-screen sheet on phones. Hidden on guests' pages and big screens (html.ypc-off)
   and in the free tools' big-screen mode.
   ========================================================================= */
.ypc-launch, .ypc-panel { --ypc-accent: #d93a2b; --ypc-on-accent: #ffffff; font-family: inherit; }
html.ypc-off .ypc-launch, html.ypc-off .ypc-panel, html.ft-big-open .ypc-launch, html.ft-big-open .ypc-panel { display: none !important; }
.ypc-launch {
  position: fixed; z-index: 40; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--ypc-lift, 0px));
  width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--ypc-accent); color: var(--ypc-on-accent); box-shadow: 0 10px 26px -8px rgba(29, 31, 59, .45), 0 2px 6px rgba(29, 31, 59, .18);
  transition: transform .15s ease, box-shadow .15s ease, bottom .18s ease;
}
.ypc-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(29, 31, 59, .5), 0 2px 6px rgba(29, 31, 59, .2); }
/* The Yaypick mark is the button itself (founder, 30 Oct 2026): its own speech bubble, no circle behind it. */
.ypc-launch:has(.ypc-logo) { background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 14px rgba(29, 31, 59, .35)); }
.ypc-launch:has(.ypc-logo):hover { box-shadow: none; filter: drop-shadow(0 12px 18px rgba(29, 31, 59, .45)); }
.ypc-launch .ypc-logo { width: 100%; height: 100%; display: block; pointer-events: none; }
.ypc-launch:focus-visible { outline: 3px solid color-mix(in srgb, var(--ypc-accent) 55%, transparent); outline-offset: 3px; }
.ypc-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #2fbf71; border: 2px solid var(--ypc-accent); }
.ypc-dot[hidden] { display: none; }
.ypc-panel {
  position: fixed; z-index: 41; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px) + var(--ypc-lift, 0px));
  width: min(390px, calc(100vw - 36px)); height: min(620px, calc(100vh - 112px - var(--ypc-lift, 0px))); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow-lg);
  animation: ypc-in .16s ease-out;
}
.ypc-panel[hidden] { display: none; }
@keyframes ypc-in { from { opacity: 0; transform: translateY(8px); } }
.ypc-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ypc-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); }
.ypc-who { flex: 1; min-width: 0; }
.ypc-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.ypc-sub { margin: 2px 0 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ypc-online { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; flex: none; }
.ypc-end { flex: none; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.ypc-end:hover { border-color: var(--ypc-accent); color: var(--ypc-accent); }
.ypc-end[hidden] { display: none; }
.ypc-close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
.ypc-close:hover { background: var(--surface-2); color: var(--text); }
.ypc-mail { padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13px; display: grid; gap: 5px; }
.ypc-mail:empty { display: none; }
.ypc-mail-label { font-weight: 700; color: var(--text-2); }
.ypc-mail-row { display: flex; gap: 6px; }
.ypc-mail-input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; }
.ypc-mail-input:focus { outline: none; border-color: var(--ypc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ypc-accent) 18%, transparent); }
.ypc-mail-to { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--text-2); min-width: 0; }
.ypc-mail-to span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ypc-mini { flex: none; font: inherit; font-size: 13px; font-weight: 700; padding: 0 10px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.ypc-mail-to .ypc-mini { margin-left: auto; height: 26px; border: 0; background: transparent; color: var(--ypc-accent); padding: 0 4px; }
.ypc-log { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ypc-msg { max-width: 88%; display: grid; gap: 6px; }
.ypc-bubble { margin: 0; padding: 9px 13px; font-size: 14.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; border-radius: 16px; }
.ypc-bot { align-self: flex-start; }
.ypc-bot .ypc-bubble { background: var(--surface-2); border-bottom-left-radius: 5px; }
.ypc-user { align-self: flex-end; }
.ypc-user .ypc-bubble { background: var(--ypc-accent); color: var(--ypc-on-accent); border-bottom-right-radius: 5px; }
.ypc-system { align-self: center; max-width: 92%; text-align: center; }
.ypc-system .ypc-bubble { padding: 4px 8px; font-size: 12.5px; color: var(--muted); }
.ypc-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ypc-chip, .ypc-link {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: left;
  color: var(--ypc-accent); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ypc-accent) 40%, transparent); border-radius: 999px; cursor: pointer; text-decoration: none;
}
.ypc-chip:hover:not(:disabled), .ypc-link:hover { background: color-mix(in srgb, var(--ypc-accent) 9%, var(--surface)); }
.ypc-chip:disabled { opacity: .5; cursor: default; }
.ypc-chip.team { color: var(--text); border-color: var(--border-strong); }
.ypc-typing .ypc-bubble { display: flex; gap: 4px; padding: 12px 14px; }
.ypc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: ypc-dots 1s infinite ease-in-out; }
.ypc-typing i:nth-child(2) { animation-delay: .15s; }
.ypc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ypc-dots { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ypc-warn { margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border-top: 1px solid var(--border); }
.ypc-warn[hidden] { display: none; }
.ypc-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.ypc-form[hidden] { display: none; }
.ypc-input { resize: none; min-height: 42px; max-height: 120px; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.35; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; }
.ypc-input:focus { outline: none; border-color: var(--ypc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ypc-accent) 18%, transparent); }
.ypc-send { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ypc-accent); color: var(--ypc-on-accent); cursor: pointer; }
.ypc-send:disabled { opacity: .5; cursor: default; }
.ypc-count { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.ypc-count[hidden] { display: none; }
.ypc-restart { margin: 10px 12px; width: auto; }
.ypc-restart[hidden] { display: none; }
.ypc-note { margin: 0; padding: 0 14px 10px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.ypc-note a { color: inherit; }
.ypc-sheet { position: absolute; inset: 0; z-index: 2; display: grid; align-items: end; padding: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ypc-sheet[hidden] { display: none; }
.ypc-sheet-card { display: grid; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); max-height: 100%; overflow-y: auto; }
.ypc-sheet-card h3 { margin: 0; font-size: 17px; }
.ypc-sheet-card p { margin: 0; font-size: 14px; }
.ypc-sheet-card .stack { display: grid; gap: 8px; }
.ypc-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ypc-field { font-size: 13px; font-weight: 700; color: var(--text-2); }
.ypc-error { margin: 0; font-size: 13px; color: var(--danger); }
.ypc-error:empty { display: none; }
/* Below 1280 px the pages run edge to edge: the chat button sits in the top bar (main.js,
   chatBarButton) instead of floating over the page's own buttons, and the panel opens under the bar. */
.nav button.ypc-bar { display: none; position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; }
.ypc-bar .ypc-dot { top: 5px; right: 5px; width: 10px; height: 10px; border-color: var(--surface); }
html.ypc-off .ypc-bar { display: none !important; }
/* The chat is always the red button at the bottom right (founder, 21 Oct 2026), never in the top bar. */
@media (max-width: 640px) {
  .ypc-launch { width: 52px; height: 52px; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--ypc-lift, 0px)); }
  .ypc-panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; animation: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  html.ypc-open, html.ypc-open body { overflow: hidden; }
  /* 16px: iPhones do not zoom into the field. */
  .ypc-input, .ypc-mail-input, .ypc-sheet-card .input { font-size: 16px; }
}
@media print { .ypc-launch, .ypc-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ypc-launch, .ypc-panel, .ypc-typing i { transition: none; animation: none; } }

/* ---- Loaders: big screen previews (lib.js previewLoader) and busy areas (lib.js busyArea) ---- */
.pv-cover { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; color: #fff; pointer-events: none;
  background: color-mix(in srgb, #0d0f22 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.pv-cover .spin { animation: spin .8s linear infinite; opacity: .9; }
.pv-busy > .pv-cover { opacity: 1; visibility: visible; transition: opacity .12s ease, visibility 0s; }
/* While the frame's page itself loads (a blank or half-built page): fully covered. */
.pv-loading > .pv-cover { background: #0d0f22; }
:not(html).is-busy { position: relative; pointer-events: none; }
:not(html).is-busy > :not(.busy-cover) { opacity: .45; transition: opacity .15s; }
.busy-cover { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: var(--muted); }
.busy-cover .spin { animation: spin .8s linear infinite; }
/* A save, create or delete under way on an organiser's page (lib.js startWork): a thin bar along the top. */
.work-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; height: 3px; overflow: hidden; pointer-events: none; }
.work-bar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 0 3px 3px 0; background: var(--accent, #d93a2b); animation: work-bar 1.1s ease-in-out infinite; }
@keyframes work-bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .pv-cover, .pv-busy > .pv-cover { transition: none; }
  .work-bar::before { animation: none; width: 100%; opacity: .7; }
}
/* End of the loaders block. */

/* ---------------------------------------------------------------------------
   Agenda: event rating, ratings sent once, add to calendar (agenda-guest.js,
   agenda-admin.js, hub.js agenda card, event report). Start of the agenda block.
   --------------------------------------------------------------------------- */
.ag-event { display: grid; gap: 8px; }
.ag-event > p { margin: 0; }
.ag-event .ag-rate { padding-top: 0; border-top: 0; }
.ag-event h4 { margin: 0; font-size: 17px; }
/* Before the last session ends (or closed): shown, greyed out, nothing to tap. */
.ag-event-shut { background: var(--surface-2); box-shadow: none; }
.ag-event-shut h4 { color: var(--text-2); }
.ag-event-shut p { display: flex; align-items: center; gap: 6px; margin: 0; }
.ag-stars-ro .ag-star { cursor: default; font-size: 30px; padding: 0 2px; pointer-events: none; }
.ag-event-shut .ag-stars-ro .ag-star { opacity: .55; }
.ag-sent p { margin: 0; }
.ag-sent .small { display: flex; align-items: center; gap: 4px; }
.ag-sent-comment { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-rate .tiny.muted { margin: 0; }
.ag-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ag-cal small { font-size: 12.5px; }
.ag-fb-event { background: var(--surface-2); }
.ag-fb-event .ag-spread-row i { background: var(--surface); }
.ev-main .ag-ev-mode .field label { display: inline-flex; align-items: center; gap: 4px; }
.hub-ag .hub-ag-rate { align-items: center; gap: 6px; color: var(--warning); font-size: 14px; }
@media (max-width: 600px) {
  .ag-cal .btn { flex: 1 1 100%; justify-content: center; }
}
/* End of the agenda block. */

/* ---------------------------------------------------------------------------
   Guide steps (/guide, guide.js): every service's steps as a zigzag. Odd steps
   have the text on the left and the picture on the right, even steps the other
   way round; every picture sits in the same 4:3 frame (a click opens it full size). On phones the picture
   comes first, then the text. Start of the guide steps block.
   --------------------------------------------------------------------------- */
.gz-intro { display: grid; gap: 4px; }
.gz-intro p { margin: 0; }
.gz-night { scroll-margin-top: 80px; }
.gs-panel .gz-steps { margin: 6px 0 0; gap: clamp(40px, 6vw, 80px); }
.gz-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.gz-step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.gz-step:nth-child(even) .gz-shot { order: -1; }
.gz-text { min-width: 0; }
.gz-n { width: 40px; height: 40px; margin-bottom: 12px; }
.gz-text h3 { font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; }
.gz-text p { margin: 0; color: var(--text-2); font-size: 16.5px; line-height: 1.6; max-width: 54ch; }
.gz-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; max-width: 58ch; }
.gz-points li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.gz-points li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.gz-shot { margin: 0; min-width: 0; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 1.6vw, 20px);
  border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.gz-shot a { display: contents; cursor: zoom-in; }
.gz-shot img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: 0 20px 40px -28px rgba(20, 22, 50, .45); }
.gz-shot.k-phone img { border-radius: 26px; border: 7px solid #141626; }
@media (max-width: 820px) {
  .gz-step, .gz-step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .gz-shot, .gz-step:nth-child(even) .gz-shot { order: -1; aspect-ratio: auto; padding: 14px; }
  .gz-shot img { width: 100%; max-height: none; }
  .gz-shot.k-phone img { width: min(240px, 72%); }
  .gz-text p, .gz-points { max-width: none; }
}
@media (max-width: 600px) {
  .lp.guide .container { padding: 0 16px; }
  .gz-text p { font-size: 16px; }
  .gz-points li { font-size: 15px; }
}
/* End of the guide steps block. */

/* ---------------------------------------------------------------------------
   Landing: "What the big screen shows", every service in one showcase
   (landing-demo.js stageShowcase). Start of the screen showcase block.
   --------------------------------------------------------------------------- */
.ls-showcase { max-width: none; display: grid; gap: 16px; min-width: 0; }
.ls-showcase .ls-side, .ls-showcase .ls-view { min-width: 0; }
.ls-kicker { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--text-2); text-align: center; }
.ls-showcase .ls-tabs { margin-bottom: 0; }
.ls-showcase .ls-tab { gap: 8px; }
.ls-showcase .ls-tab svg { flex-shrink: 0; }
.ls-showcase .ls-tab.on svg { color: var(--accent); }
.ls-now { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.ls-now p { margin: 0; flex: 1 1 280px; min-width: 0; font-size: 15px; color: var(--text-2); }
.ls-now p b { color: var(--text); margin-right: 8px; }
.ls-theme { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ls-theme[hidden] { display: none; }
.ls-pause { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.ls-pause:hover { color: var(--text); border-color: var(--text-2); }
.ls-pause[hidden] { display: none; }
.ls-showcase .ls-now + .ls-caption { margin-top: 6px; text-align: left; }
.ls-showcase .ls-screen.ls-real { --rx: 2deg; }
/* Wide screens: the list of services on the left, the stage on the right. */
@media (min-width: 961px) {
  .ls-showcase { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
  .ls-kicker { text-align: left; padding-left: 4px; }
  .ls-showcase .ls-tabs { flex-direction: column; flex-wrap: nowrap; gap: 2px; justify-content: flex-start; }
  .ls-showcase .ls-tab { width: 100%; justify-content: flex-start; border-color: transparent; background: transparent; padding: 8px 14px; font-size: 15px; border-radius: 10px; transition: background .2s, border-color .2s, color .2s; }
  .ls-showcase .ls-tab:hover { color: var(--text); background: var(--surface); }
  .ls-showcase .ls-tab.on { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35); }
  .ls-showcase .ls-progress { left: 14px; right: 14px; bottom: 3px; border-radius: 2px; overflow: hidden; }
}
/* Phones: every service stays in sight as small chips (the breadth is the point), not a strip that scrolls. */
@media (max-width: 720px) {
  .ls-showcase .ls-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 8px; padding-bottom: 0; }
  .ls-showcase .ls-tab { flex-direction: column; justify-content: center; gap: 6px; min-height: 68px; padding: 10px 6px; font-size: 12.5px; line-height: 1.2; text-align: center; border-radius: 14px; }
  .ls-showcase .ls-tab svg { width: 20px; height: 20px; }
  .ls-showcase .ls-tab-name { overflow-wrap: anywhere; }
  .ls-showcase .ls-tab.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); color: var(--text); }
  .ls-showcase .ls-tab.on svg { color: var(--accent); }
  .ls-showcase .ls-progress { left: 10px; right: 10px; bottom: 2px; }
  .ls-showcase .ls-tab.on .ls-progress i { background: var(--accent); }
  .ls-now p { flex-basis: 100%; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ls-showcase .ls-tab { transition: none; } }
/* End of the screen showcase block. */

/* ===== Voting modes (live voting / pre-voting): run panel, locked boards, vote confirmation ===== */
/* Run panel: contest page and voting controller (public/js/contest-run.js). */
.contest-page > .crun { margin-bottom: 20px; }
.crun { display: flex; flex-direction: column; gap: 12px; }
.crun-head { display: flex; flex-direction: column; gap: 2px; }
.crun-head h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0; }
.crun-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crun-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); }
.crun-row.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.crun-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.crun-text b { overflow-wrap: anywhere; }
.crun-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.crun-left { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.crun-left.warn { color: var(--danger); animation: pulse-dot 1s ease-in-out infinite; }
.crun-pre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crun-pre .cc-state { font-size: 22px; }
.cc-state.draft { color: var(--muted); }
@media (max-width: 560px) {
  .crun-row { padding: 10px; }
  .crun-btns { margin-left: 0; width: 100%; }
  .crun-btns .btn { flex: 1 1 auto; justify-content: center; }
  .crun-left { margin-right: auto; }
}

/* Guests' phones: a board under a see-through cover (not open yet, closed, or voted). */
.cv-board { position: relative; }
.cv-board.locked .cand-grid { pointer-events: none; user-select: none; }
.cv-board.locked .cand { cursor: default; }
.cv-board.locked .cand:not(.on) { filter: saturate(.5); opacity: .5; }
.cv-cover { position: absolute; inset: -6px; z-index: 2; border-radius: 22px; display: flex; justify-content: center; align-items: flex-start; padding: 18px 12px;
  background: color-mix(in srgb, var(--surface) 35%, transparent); }
.cv-cover-card { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 340px; width: 100%;
  padding: 18px 16px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border); box-shadow: 0 18px 40px -20px rgba(20, 22, 50, .45); overflow: visible; }
.cv-cover-card > svg { color: var(--muted); }
.cv-cover-title { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.cv-cover-card > span { color: var(--text-2); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cv-cover-card .voted-photos .avatar { width: 64px; height: 64px; font-size: 22px; border: 3px solid var(--surface); box-shadow: var(--shadow); }
.cv-cover-card .btn { margin-top: 4px; }

/* The confirmation: the photo and name, big, before the vote is sent. */
dialog.modal.cv-dialog { width: min(440px, calc(100vw - 24px)); }
dialog.modal.cv-dialog .modal-actions { justify-content: stretch; }
dialog.modal.cv-dialog .modal-actions .btn { flex: 1 1 0; justify-content: center; }
.cv-confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cv-confirm > p { margin: 0; }
.cv-confirm-cat { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cv-confirm-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; width: 100%; }
.cv-confirm.one .cv-confirm-picks { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.cv-pick { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.cv-pick-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--surface-2); border: 3px solid var(--accent); }
.cv-confirm.one .cv-pick-photo { width: min(240px, 62vw); }
.cv-pick-photo .avatar.fill { font-size: clamp(40px, 12vw, 72px); }
.cv-pick figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-pick figcaption b { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.cv-confirm.one .cv-pick figcaption b { font-size: 24px; letter-spacing: -0.02em; }
.cv-pick figcaption span { color: var(--text-2); font-size: 14px; }
@media (max-height: 640px) { .cv-confirm.one .cv-pick-photo { width: min(170px, 45vw); } }
/* Big screen: live voting always shows its countdown. A large timer takes its own place in the
   header (beside the title, not over it, whatever the title's alignment). */
.cstage .stage-top:has(> .cs-timer.large:not(.hidden)) { display: flex; }
.cstage .stage-top:has(> .cs-timer.large:not(.hidden)) > div:has(> h1) { flex: 1 1 auto; min-width: 0; text-align: left; }
.cstage .stage-top > .cs-timer.large + .stage-count { margin-left: 24px; }
.cstage .stage-top > .cs-timer.large { position: static; transform: none; margin-left: auto; padding: 6px 24px 8px; }
.cstage .stage-top > .cs-timer.large b { font-size: clamp(40px, 4.2vw, 72px); }
/* End of the voting modes block. */

/* ---------------------------------------------------------------------------
   Row lists (item-rows.js): bingo items and teams, the wheel's guests and prizes.
   One bordered, numbered row per item; drag the number or use the arrows; Add under the rows.
   --------------------------------------------------------------------------- */
.ir { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ir-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ir-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ir-label { font-size: 15px; font-weight: 700; color: var(--text); }
.ir-count { font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; }
.ir-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ir-tools .btn[hidden] { display: none; }
.ir-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ir-list:empty { display: none; }
.ir-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px 8px 4px; border-left: 4px solid var(--seg, transparent); background: var(--surface); }
.ir-row:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.ir-row:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.ir-row + .ir-row { border-top: 1px solid var(--border); }
.ir-row:focus-within { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ir-handle { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 46px; height: 40px; border-radius: var(--radius-sm); color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ir-handle:hover { background: var(--surface-2); color: var(--text-2); }
.ir-n { min-width: 20px; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ir.locked .ir-handle { cursor: default; min-width: 32px; }
.ir.locked .ir-handle svg { display: none; }
.ir.locked .ir-handle:hover { background: none; }
.ir.locked .ir-field { background: var(--surface-2); border-color: transparent; color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; cursor: default; }
.ir-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ir-field { height: 40px; padding-block: 0; }
.ir-row.dup .ir-field { border-color: var(--warning); }
.ir-row.empty .ir-field { border-style: dashed; }
.ir-dup, .ir-empty-note { font-size: 12.5px; font-weight: 600; }
.ir-dup { color: var(--warning); }
.ir-dup[hidden] { display: none; }
.ir-empty-note { display: none; color: var(--muted); }
.ir-row.empty .ir-empty-note { display: block; }
.ir-acts { flex: none; display: flex; align-items: center; gap: 2px; min-height: 40px; }
.ir-move { display: inline-flex; gap: 2px; }
.ir-x:hover { color: var(--danger); }
.ir-row.lifted { position: relative; z-index: 2; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); outline: 2px solid var(--accent); }
.ir-row.lifted .ir-handle { cursor: grabbing; color: var(--accent-text, var(--accent)); }
.ir-list.dragging { user-select: none; -webkit-user-select: none; }
.ir-add { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border: 2px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-2); font-size: 15px; font-weight: 700; }
.ir-add:hover, .ir-add:focus-visible { border-color: var(--accent); color: var(--accent-text, var(--accent)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ir-add[hidden] { display: none; }
.ir-status { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ir-status:empty { display: none; }
.ir-bad { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-weight: 600; }
.ir-warn { color: var(--warning); font-weight: 600; }
.ir-paste { font-size: 14.5px; line-height: 1.5; resize: vertical; }
.ir-replace { display: flex; align-items: center; gap: 8px; }
.ir-replace input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.ir-toast { display: inline-flex; align-items: center; gap: 14px; }
.ir-toast-text { min-width: 0; max-width: min(52vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-undo { all: unset; cursor: pointer; font-weight: 700; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
/* The wheel's rows: the segment's colour on the left, its picture, its notes. */
.wa-thumb { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--seg, var(--accent)) 10%, var(--surface-2)); color: var(--muted); cursor: pointer; }
.wa-thumb:hover { color: var(--text); border-color: var(--text-2); }
.wa-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-thumb:has(img) { border-style: solid; border-color: var(--border); }
.wa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-thumb.need { border-color: var(--warning); color: var(--warning); }
.wa-thumb, .ir .wa-thumb { width: 48px; height: 48px; }
.ir-row:has(.wa-thumb) :is(.ir-handle, .ir-main, .ir-acts) { margin-top: 4px; }
.wa-row-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.wa-row-extra[hidden] { display: none; }
.wa-row-link { all: unset; cursor: pointer; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.wa-row-link:hover { color: var(--text); }
.wa-row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wa-row-tag { display: inline-flex; align-items: center; gap: 4px; }
.wa-row-need { color: var(--warning); font-weight: 600; }
.wa-row-off { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.ir-row.off .ir-field, .ir-row.off .wa-thumb { opacity: .6; }
.ir-row.off .wa-thumb img { filter: grayscale(.7); }
@media (pointer: coarse) { .ir-field, .ir-handle { height: 44px; } .ir-acts { min-height: 44px; } .ir-row:has(.wa-thumb) :is(.ir-handle, .ir-main, .ir-acts) { margin-top: 2px; } }
/* Phones: the number is the drag handle; up / down show under the row being edited. */
@media (max-width: 600px) {
  .ir-row { flex-wrap: wrap; gap: 8px; padding: 8px 6px 8px 2px; }
  .ir-handle { min-width: 34px; }
  .ir-handle svg { display: none; }
  .ir-acts { display: contents; }
  .ir-move { display: none; order: 10; flex-basis: 100%; justify-content: flex-end; gap: 6px; }
  .ir-row:focus-within .ir-move { display: flex; }
  .ir-head { align-items: flex-start; }
}
/* End of the row lists block. */

/* ==========================================================================
   Card deck (src/cards.ts, public/js/card-look.js, pages/card-*.js)
   The card (face, back, stack), the summon (lift, 3D spin, burst), the guest's phone,
   the host's controller, the organiser's rows and the big screen.
   ========================================================================== */
.ck-card { width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * .075); position: relative; overflow: hidden; flex: none; box-sizing: border-box; }
/* Sizes: on a card on its own, or on its container (a stack, the 3D card), whose cards take its size. */
.ck-play, .ck-stage, .ck-admin, .ck-host, .modal { --cw: 132px; }
.ck-sm { --cw: 132px; }
.ck-md { --cw: min(66vw, 272px, 38vh); }
.ck-lg { --cw: min(37vh, 25vw); }

/* The face: a dark card in the rarity's frame */
.ck-face { --rar: #a9b3c4; display: flex; flex-direction: column; gap: calc(var(--cw) * .045); padding: calc(var(--cw) * .085) calc(var(--cw) * .08) calc(var(--cw) * .07); color: #fff; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--rar) 34%, #191c3d) 0%, #12142e 62%), #12142e;
  box-shadow: 0 0 0 calc(var(--cw) * .012) color-mix(in srgb, var(--rar) 70%, #fff), 0 0 calc(var(--cw) * .12) color-mix(in srgb, var(--rar) 55%, transparent), 0 calc(var(--cw) * .1) calc(var(--cw) * .2) calc(var(--cw) * -.1) rgba(0, 0, 0, .5); }
.ck-frame { position: absolute; inset: calc(var(--cw) * .03); border-radius: calc(var(--cw) * .055); border: calc(var(--cw) * .01) solid color-mix(in srgb, var(--rar) 80%, transparent); pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rar) 22%, transparent) 0%, transparent 30%, transparent 70%, color-mix(in srgb, var(--rar) 22%, transparent) 100%); }
.ck-face[data-rarity="epic"] .ck-frame, .ck-face[data-rarity="legendary"] .ck-frame { border-width: calc(var(--cw) * .016); }
.ck-face[data-rarity="legendary"] { background: radial-gradient(120% 70% at 50% 0%, #5a4210 0%, #1f1830 58%, #120f22 100%); }
.ck-face[data-rarity="legendary"] .ck-frame { border-image: linear-gradient(135deg, #fff1b8, #ffbe2e 30%, #b8860b 55%, #ffe58a 80%, #fff1b8) 1; border-radius: 0; }
.ck-face > :not(.ck-frame) { position: relative; }
.ck-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: calc(var(--cw) * .08); }
.ck-tag { font-size: calc(var(--cw) * .052); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: calc(var(--cw) * .012) calc(var(--cw) * .04); border-radius: 999px; background: color-mix(in srgb, var(--rar) 30%, rgba(255, 255, 255, .08)); color: #fff; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-gems { display: inline-flex; gap: calc(var(--cw) * .016); }
.ck-gems i { width: calc(var(--cw) * .04); height: calc(var(--cw) * .04); transform: rotate(45deg); background: var(--rar); box-shadow: 0 0 calc(var(--cw) * .03) var(--rar); border-radius: 2px; }
.ck-pic { width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; border-radius: calc(var(--cw) * .04); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 50%, transparent); }
.ck-title { font-size: calc(var(--cw) * .1); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; overflow-wrap: anywhere; text-shadow: 0 0 calc(var(--cw) * .06) color-mix(in srgb, var(--rar) 70%, transparent); }
.ck-body { margin: auto 0; font-size: calc(var(--cw) * .072); line-height: 1.3; font-weight: 600; color: rgba(255, 255, 255, .92); overflow-wrap: anywhere; white-space: pre-line; }
.ck-face.long .ck-body { font-size: calc(var(--cw) * .058); }
.ck-face.with-pic .ck-body { margin: 0; font-size: calc(var(--cw) * .058); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ck-rarity { font-size: calc(var(--cw) * .044); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rar); }

/* The back: a pattern per design, the deck's logo in the middle */
.ck-back { --accent: #9a4fd8; display: grid; place-items: center; background: #1b1440; box-shadow: 0 0 0 calc(var(--cw) * .012) rgba(255, 255, 255, .55), 0 calc(var(--cw) * .06) calc(var(--cw) * .14) calc(var(--cw) * -.06) rgba(0, 0, 0, .55); }
.ck-back-art { position: absolute; inset: 0; background:
  radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 18%, transparent 19%),
  repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .07) 0 10deg, transparent 10deg 20deg),
  linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #fff) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 50%, #000) 100%); }
.ck-back-art::after { content: ""; position: absolute; inset: calc(var(--cw) * .05); border-radius: calc(var(--cw) * .05); border: calc(var(--cw) * .012) solid rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 calc(var(--cw) * .02) rgba(0, 0, 0, .12); }
.ck-back[data-back="crimson"] .ck-back-art { background: radial-gradient(circle at 50% 50%, rgba(255, 214, 102, .35) 0 18%, transparent 19%), repeating-linear-gradient(45deg, rgba(255, 214, 102, .14) 0 6px, transparent 6px 14px), linear-gradient(160deg, #c8102e, #8a0a1f); }
.ck-back[data-back="crimson"] .ck-back-art::after, .ck-back[data-back="gold"] .ck-back-art::after { border-color: #ffd666; }
.ck-back[data-back="midnight"] .ck-back-art { background: radial-gradient(circle at 50% 50%, rgba(130, 170, 255, .3) 0 18%, transparent 19%), radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(160deg, #1d2a6b, #0b1030); }
.ck-back[data-back="jade"] .ck-back-art { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .25) 0 18%, transparent 19%), repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08) 0 4px, transparent 4px 12px), linear-gradient(160deg, #18a57a, #0b5a43); }
.ck-back[data-back="gold"] .ck-back-art { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .45) 0 18%, transparent 19%), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0 8deg, transparent 8deg 16deg), linear-gradient(160deg, #ffe08a, #d4a017 50%, #8a6408); }
.ck-back-logo { position: relative; width: 30%; max-height: 30%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }

/* The deck: three backs, the top one glowing when it is someone's turn */
.ck-stack { position: relative; width: var(--cw); aspect-ratio: 5 / 7; flex: none; }
.ck-stack > .ck-card { position: absolute; inset: 0; }
.ck-stack > .ck-card:nth-child(2) { transform: translate(-4%, 3%) rotate(-5deg); filter: brightness(.7); }
.ck-stack > .ck-card:nth-child(3) { transform: translate(4%, 1.5%) rotate(4deg); filter: brightness(.85); }
.ck-stack-glow { position: absolute; inset: -18%; border-radius: 30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, #9a4fd8) 70%, transparent), transparent); opacity: .35; filter: blur(8px); }
.ck-stack.live .ck-stack-glow { animation: ck-glow 1.8s ease-in-out infinite; }
.ck-stack.live > .ck-card:last-child { animation: ck-bob 2.4s ease-in-out infinite; }
@keyframes ck-glow { 0%, 100% { opacity: .35; transform: scale(.95); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes ck-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }

/* The summon: a 3D card with its back and face, and the light around it */
.ck-summon { position: relative; width: var(--cw); aspect-ratio: 5 / 7; perspective: calc(var(--cw) * 5); transition: transform .25s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.ck-flip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ck-flip > .ck-card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ck-flip > .ck-side-face { transform: rotateY(180deg); }
.ck-summon.charged .ck-back { box-shadow: 0 0 0 calc(var(--cw) * .012) #fff, 0 0 calc(var(--cw) * .25) color-mix(in srgb, var(--accent, #9a4fd8) 85%, #fff); }
.ck-fx { position: absolute; inset: -60%; pointer-events: none; z-index: -1; }
.ck-aura { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rar, #fff) 80%, #fff) 0%, color-mix(in srgb, var(--rar, #fff) 45%, transparent) 45%, transparent 75%); opacity: 0; filter: blur(4px); }
.ck-flash { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, color-mix(in srgb, var(--rar, #fff) 70%, #fff) 35%, transparent 70%); z-index: 2; mix-blend-mode: screen; }
.ck-rays { position: absolute; inset: 10%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rar, #fff) 70%, transparent) 0 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%); opacity: 0; }
.ck-spark { position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * .045); aspect-ratio: 1; border-radius: 50%; z-index: 3; box-shadow: 0 0 calc(var(--cw) * .04) currentColor; }
.ck-summon[data-rarity="legendary"].shown .ck-side-face { animation: ck-legend 2.6s ease-in-out infinite; }
.ck-summon[data-rarity="epic"].shown .ck-side-face { animation: ck-epic 3s ease-in-out infinite; }
@keyframes ck-legend { 0%, 100% { box-shadow: 0 0 0 calc(var(--cw) * .012) #ffe58a, 0 0 calc(var(--cw) * .2) #ffbe2e; } 50% { box-shadow: 0 0 0 calc(var(--cw) * .012) #fff3c4, 0 0 calc(var(--cw) * .38) #ffbe2e; } }
@keyframes ck-epic { 0%, 100% { box-shadow: 0 0 0 calc(var(--cw) * .012) #d9a8ff, 0 0 calc(var(--cw) * .14) #b25cff; } 50% { box-shadow: 0 0 0 calc(var(--cw) * .012) #ecd4ff, 0 0 calc(var(--cw) * .26) #b25cff; } }

/* The guest's phone: a dark room for the cards */
.ck-play { background: radial-gradient(120% 70% at 50% 0%, #262a5c 0%, #0d0f22 70%); color: #fff; overflow-x: clip; }
.ck-play .qp-head { color: #fff; }
.ck-play canvas.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.ck-play .qp-card { color: #1d1f3b; }
.ck-play-body { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 16px 40px; width: 100%; max-width: 520px; margin: 0 auto; box-sizing: border-box; }
.ck-play-body > .qp-card { width: 100%; box-sizing: border-box; }
.ck-turn { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; }
.ck-turn-head { display: grid; gap: 6px; justify-items: center; }
.ck-turn-head h1 { margin: 0; font-size: clamp(24px, 7vw, 32px); line-height: 1.1; letter-spacing: -0.02em; }
.ck-turn-kicker { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.ck-turn.mine .ck-turn-kicker { animation: ck-pop .5s cubic-bezier(.2, 1.6, .4, 1) both, ck-glow-pill 1.6s 0.5s ease-in-out infinite; }
@keyframes ck-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ck-glow-pill { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
.ck-timer { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.ck-swipe-wrap { display: grid; gap: 16px; width: 100%; justify-items: center; }
.ck-swipe { position: relative; display: grid; place-items: center; padding: 40px 0 34px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.ck-swipe:active { cursor: grabbing; }
.ck-swipe .ck-slot { position: relative; z-index: 1; }
.ck-stack-under { position: absolute; top: 40px; left: 50%; width: var(--cw, 260px); transform: translateX(-50%); --cw: min(66vw, 272px, 38vh); aspect-ratio: 5 / 7; }
.ck-stack-under .ck-card { position: absolute; inset: 0; }
.ck-stack-under .ck-card:nth-child(1) { transform: translate(-5%, 3%) rotate(-6deg); filter: brightness(.6); }
.ck-stack-under .ck-card:nth-child(2) { transform: translate(5%, 2%) rotate(5deg); filter: brightness(.75); }
.ck-swipe.live .ck-slot .ck-back { animation: ck-ready 1.6s ease-in-out infinite; }
@keyframes ck-ready { 0%, 100% { box-shadow: 0 0 0 calc(var(--cw) * .012) #fff, 0 0 calc(var(--cw) * .1) color-mix(in srgb, var(--accent) 70%, transparent); } 50% { box-shadow: 0 0 0 calc(var(--cw) * .012) #fff, 0 0 calc(var(--cw) * .3) color-mix(in srgb, var(--accent) 95%, #fff); } }
.ck-swipe-hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: rgba(255, 255, 255, .85); white-space: nowrap; animation: ck-hint 1.4s ease-in-out infinite; }
.ck-swipe-hint[hidden] { display: none; }
@keyframes ck-hint { 0%, 100% { transform: translate(-50%, 0); opacity: .7; } 50% { transform: translate(-50%, -6px); opacity: 1; } }
.ck-draw-btn { max-width: 320px; }
.ck-shown { padding: 18px 0 6px; }
.ck-shown .ck-face { animation: ck-shine 3s ease-in-out infinite; }
@keyframes ck-shine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
.ck-hint { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .7); text-align: center; }
.ck-wait { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 28px; text-align: center; }
.ck-wait .ck-stack { --cw: min(52vw, 210px); }
.ck-wait-line { margin: 0; font-size: clamp(19px, 5.6vw, 24px); font-weight: 700; line-height: 1.3; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ck-dots { display: inline-flex; gap: 6px; }
.ck-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: ck-dot 1.2s ease-in-out infinite; }
.ck-dots i:nth-child(2) { animation-delay: .15s; }
.ck-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ck-dot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.ck-wait.other .ck-stack > .ck-card:last-child { animation: ck-shuffle 1.6s ease-in-out infinite; }
@keyframes ck-shuffle { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6%) rotate(-3deg); } 60% { transform: translateY(-2%) rotate(2deg); } }
.ck-mine { width: 100%; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); padding: 10px 14px; box-sizing: border-box; }
.ck-mine summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.ck-mine-list { display: flex; gap: 12px; overflow-x: auto; padding: 12px 2px 6px; }

/* The host's controller */
.ck-host-card { display: flex; justify-content: center; padding: 8px 0; }
.ck-host-card .ck-sm { --cw: 150px; }
/* The controller's guests and draws: long lists scroll inside their frame (the header stays). */
.ck-guests .table-wrap, .ck-draws .table-wrap { max-height: 420px; overflow-y: auto; }
.ck-rar-pip { width: 10px; height: 10px; flex: none; transform: rotate(45deg); border-radius: 2px; background: var(--rar); box-shadow: 0 0 6px var(--rar); }

/* The organiser's rows and history */
.ck-admin .ir-row { border-left-color: var(--seg); }
.ck-thumb { width: 52px; height: 72px; border-radius: 8px; }
.ck-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.ck-row-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ck-row-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; }
.ck-row-fields .input.sm { height: 36px; font-size: 14px; }
.ck-mini { display: grid; gap: 3px; min-width: 0; }
.ck-mini > span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ck-row-tools .wa-row-link { display: inline-flex; align-items: center; gap: 4px; }
.ck-row-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ck-rar-pick { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.ck-rar-opt { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ck-rar-opt i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--rar); }
.ck-rar-opt[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1.5px var(--rar), 0 1px 3px rgba(29, 31, 59, .15); }
.ck-rar-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-preview-modal { display: grid; place-items: center; padding: 18px; border-radius: 14px; background: radial-gradient(120% 70% at 50% 0%, #262a5c 0%, #0d0f22 70%); }
.ck-card-cell span.small { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dt td.ck-card-cell { min-width: 200px; }
@media (max-width: 600px) { .dt td.ck-card-cell { min-width: 0; text-align: left; } }
.ck-rar-badge { color: color-mix(in srgb, var(--rar) 70%, var(--text)); background: color-mix(in srgb, var(--rar) 16%, var(--surface)); }
.ck-backs { display: flex; flex-wrap: wrap; gap: 12px; }
.ck-back-opt { position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.ck-back-opt .ck-card { --cw: 64px; }
.ck-back-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ck-back-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ck-back-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-tpl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The big screen */
.ck-stage-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3vw; padding: 0 clamp(24px, 4vw, 72px) clamp(16px, 4vh, 48px); }
.ck-scene { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 96px); min-width: 0; }
.ck-scene .ck-stack, .ck-scene .ck-summon { --cw: min(37vh, 25vw); }
.ck-slot.lg { position: relative; }
.ck-stage[data-mode="reveal"] .ck-scene .ck-summon { --cw: min(46vh, 28vw); }
.ck-scene-text { display: flex; flex-direction: column; gap: 1.6vh; max-width: 44vw; min-width: 0; }
.ck-kicker { align-self: flex-start; padding: .5vh 1.4vw; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-weight: 800; font-size: clamp(16px, 1.5vw, 28px); letter-spacing: .02em; }
.ck-scene-name { font-size: clamp(44px, 6.2vw, 120px); line-height: 1; letter-spacing: -0.035em; font-weight: 800; overflow-wrap: anywhere; text-shadow: 0 6px 40px color-mix(in srgb, var(--accent) 60%, transparent); }
.ck-scene-big { font-size: clamp(26px, 2.8vw, 54px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance; }
.ck-scene-sub { font-size: clamp(16px, 1.4vw, 26px); color: var(--s-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-scene-rar { font-size: clamp(30px, 3.4vw, 64px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 30px currentColor; animation: ck-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ck-in { animation: ck-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ck-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ck-stage[data-mode="reveal"] .ck-scene-text { animation: ck-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.ck-stage-side { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; padding: 2.4vh 1.6vw; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid var(--s-line); text-align: center; }
.ck-stage-side[hidden] { display: none; }
.ck-side-k { font-weight: 800; font-size: clamp(16px, 1.4vw, 26px); }
.ck-qr { width: min(24vh, 15vw); height: min(24vh, 15vw); background: #fff; padding: 10px; border-radius: 14px; box-sizing: content-box; }
.ck-side-url { margin: 0; font-weight: 700; font-size: clamp(15px, 1.3vw, 24px); }
.ck-code b { font-size: clamp(30px, 3vw, 56px); }
.ck-here { margin: 0; display: flex; gap: 8px; align-items: baseline; color: var(--s-dim); font-weight: 600; font-size: clamp(14px, 1.1vw, 20px); }
.ck-here b { color: var(--s-ink); font-size: 1.5em; }
.stage.wst.ck-stage[data-theme="light"] .ck-stage-side { background: rgba(255, 255, 255, .7); border-color: rgba(20, 26, 51, .12); }
.stage.wst.ck-stage[data-theme="light"] .ck-qr { box-shadow: 0 0 0 1px rgba(20, 26, 51, .12); }

@media (max-width: 720px) {
  .ck-row-fields { grid-template-columns: minmax(0, 1fr); }
  .ck-tpl-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-stack.live .ck-stack-glow, .ck-stack.live > .ck-card:last-child, .ck-swipe.live .ck-slot .ck-back, .ck-swipe-hint, .ck-dots i, .ck-wait.other .ck-stack > .ck-card:last-child,
  .ck-summon.shown .ck-side-face, .ck-shown .ck-face, .ck-turn.mine .ck-turn-kicker, .ck-in, .ck-scene-rar, .ck-stage[data-mode="reveal"] .ck-scene-text { animation: none; }
}
/* End of the card deck block. */

/* Organiser pages: the slim footer (the © line, policies and credit; no marketing links). */
.footer.slim { margin-top: 48px; }
.footer.slim .footer-bottom { border-top: 0; padding-top: 22px; padding-bottom: 22px; align-items: center; }

/* Lists of records (lib.js dataTable): labelled columns and a divider under every row in a thin
   frame; on phones each row becomes a small card with the column names beside the values. */
.dt .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dt table.data th { padding: 9px 12px; }
.dt table.data td { padding: 10px 12px; vertical-align: middle; }
.dt table.data tbody tr:hover td { background: var(--surface-2); }
.dt table.data th.act, .dt table.data td.act { width: 1%; white-space: nowrap; text-align: right; }
.dt table.data th.lead, .dt table.data td.lead { width: 1%; white-space: nowrap; }
.dt table.data td.act .row { justify-content: flex-end; flex-wrap: nowrap; }
.dt table.data td.main b { font-weight: 650; }
.dt table.data td .tiny, .dt table.data td .small { display: block; }
.dt table.data td.nowrap, .dt table.data th.nowrap { white-space: nowrap; }
.dt table.data tr.dt-warn td { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.dt table.data tr.dt-off td, .dt table.data tr.dt-dim td { color: var(--muted); }
.dt table.data tr.dt-off td.main b { text-decoration: line-through; }
.dt .pager { border-top: 0; padding: 10px 2px 0; }
.dt-bar { display: inline-block; width: 100%; min-width: 60px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; vertical-align: middle; }
.dt-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.dt-rank { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.dt-first .dt-rank { color: var(--gold); }
.dt-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt-who > span { min-width: 0; }
.dt-pic { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
@media (max-width: 600px) {
  .dt table.data.dt-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dt table.data.dt-stack, .dt table.data.dt-stack tbody, .dt table.data.dt-stack tr, .dt table.data.dt-stack td { display: block; width: auto; }
  .dt table.data.dt-stack tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .dt table.data.dt-stack td { flex: 1 1 100%; }
  .dt table.data.dt-stack td.lead { flex: none; order: -2; padding-bottom: 5px; }
  .dt table.data.dt-stack td.lead::before { content: none; }
  .dt table.data.dt-stack td.main { flex: 1 1 0; min-width: 0; order: -1; }
  .dt table.data.dt-stack tr:last-child { border-bottom: 0; }
  .dt table.data.dt-stack tbody tr:hover td { background: none; }
  .dt table.data.dt-stack tr.dt-warn { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
  .dt table.data.dt-stack tr.dt-warn td { background: none; }
  .dt table.data.dt-stack td { border: 0; padding: 3px 0; max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; text-align: right; }
  .dt table.data.dt-stack td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .dt table.data.dt-stack td.main { display: block; text-align: left; padding-bottom: 5px; font-size: 15px; }
  .dt table.data.dt-stack td.main::before, .dt table.data.dt-stack td.act::before { content: none; }
  .dt table.data.dt-stack td.act { width: auto; flex: none; order: -1; align-self: center; justify-content: flex-end; padding: 0 0 5px; }
  .dt table.data.dt-stack td:empty { display: none; }
  .dt table.data.dt-stack td .dt-bar { max-width: 50%; align-self: center; }
}

/* Spreadsheet grid (sheet-grid.js): problems on a row and in a cell, and page numbers. */
.eg-label { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.eg-table td.eg-n { vertical-align: top; padding: 9px 4px 6px; }
.eg-note { display: block; text-align: left; }
.eg-note .gl-issue { white-space: normal; }
.eg-table tr.eg-row-bad td { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.eg-table tr.eg-row-warn td { background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.eg-table td.eg-bad { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 55%, transparent); }
.eg-table td.eg-warn { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent); }
.eg-table th.off .eg-label { color: var(--muted); text-decoration: line-through; }
.eg-table th .select.sm { min-width: 150px; width: 100%; margin-top: 6px; font-weight: 500; }
.eg-sheet > .pager { border-top: 1px solid var(--border); }
/* Guest list: the issues of a row under its number (Check), and the typed list (Upload). */
.gl-issue { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; }
.gl-issue.bad { color: var(--danger); }
.gl-issue.warn { color: var(--warning); }
.gl-check .eg-n, .qz-paste .eg-n { min-width: 96px; width: 96px; }
.gl-check .eg-wrap { max-height: min(62vh, 560px); }
.eg-table td.eg-off .eg-cell { color: var(--muted); text-decoration: line-through; }
.gl-typed { margin-top: 2px; }
@media (max-width: 600px) { .gl-check .eg-n, .qz-paste .eg-n { min-width: 76px; width: 76px; } .eg-table th .select.sm { min-width: 128px; } }
/* Quiz → "Paste from Excel": room for all seven columns on a laptop. */
dialog.modal.wide:has(.qz-paste) { width: min(1100px, calc(100vw - 32px)); }
.draw-winners { margin: 16px 22px 18px; }
@media (max-width: 480px) { .draw-winners { margin: 14px 16px 16px; } }
/* A card's title never shrinks under the buttons beside it: they wrap to the next line instead. */
.card-head > h3.grow { min-width: max-content; }

/* ---------- Honor Guest Pass (guest list, add-ons, pass page) ---------- */
/* Guest list: search and filters in one row, a bar for the selected guests, the people table. */
.gl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px; }
.gl-filters .gl-search { flex: 1 1 260px; padding: 0; }
.gl-filters .select.sm { width: auto; min-width: 150px; }
.gl-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 16px; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.gl-bulk-count { font-size: 14px; }
.gl-ptable { padding: 0; }
.gl-ptable table.data td { vertical-align: middle; white-space: nowrap; }
.gl-ptable table.data td.main { white-space: normal; min-width: 160px; }
.gl-ptable .gl-pick { width: 36px; padding-right: 0; }
.gl-ptable .gl-pick input { width: 18px; height: 18px; }
.gl-ptable tr.gl-sel td { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
/* A wide list scrolls sideways: the tick box and the name stay in view (phones stack each guest instead). */
@media (min-width: 601px) {
  .gl-ptable table.data :is(td, th):nth-child(-n+2) { position: sticky; z-index: 1; }
  .gl-ptable table.data :is(td, th):nth-child(1) { left: 0; }
  .gl-ptable table.data :is(td, th):nth-child(2) { left: 36px; box-shadow: inset -1px 0 0 var(--border); }
  .gl-ptable table.data thead th:nth-child(-n+2) { z-index: 2; }
  .gl-ptable :where(tbody td:nth-child(-n+2)) { background: var(--surface); }
}
.gl-ptable .gl-actions { display: table-cell; }
.gl-ptable .gl-actions .btn + .btn { margin-left: 4px; }
.gl-fix { display: inline-flex; gap: 6px; align-items: center; }
.gl-fix .input.sm { width: 220px; padding: 6px 10px; font-size: 13.5px; }
.badge.src { font-weight: 600; }
.badge.src-list { color: #2f6fe8; background: color-mix(in srgb, #2f6fe8 11%, var(--surface)); }
.badge.src-manual { color: #8a5a00; background: color-mix(in srgb, var(--gold) 20%, var(--surface)); }
.badge.src-walkin { color: #119e72; background: color-mix(in srgb, #119e72 12%, var(--surface)); }
.badge.src-request { color: var(--text-2); }
.gl-tab-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--danger); vertical-align: middle; }
.sub-tabs button svg { margin-left: 6px; vertical-align: -1px; }
.gl-check-row { gap: 10px; align-items: flex-start; }
.gl-check-row input { margin-top: 3px; flex: none; }
.gl-missing { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.gl-missing li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.gl-missing li:last-child { border-bottom: 0; }
/* Pass emails tab */
.gl-emails { display: grid; gap: 16px; }
.gl-emails-head { align-items: baseline; gap: 10px; }
.gl-emails-actions { gap: 8px; }
.gl-chips button.gl-chip { border: 0; font: inherit; font-size: 13.5px; cursor: pointer; }
.gl-chips button.gl-chip:disabled { opacity: .55; cursor: default; }
.gl-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.gl-form-grid .field { margin: 0; }
.gl-colour { width: 64px; height: 40px; padding: 4px; }
.gl-details-pick { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px 12px; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.gl-details-pick legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--text-2); }
.gl-preview-frame { width: 100%; height: min(70vh, 720px); border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f6f5f1; }
.gl-preview-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.gl-preview-meta dt { color: var(--muted); }
.gl-preview-meta dd { margin: 0; overflow-wrap: anywhere; }
.gl-offer-head { gap: 12px; align-items: flex-start; }
.gl-offer-head h3 { margin: 0 0 2px; }
.gl-offer-foot { gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); }
/* Add-ons: the event's Settings, the buy dialog */
.addon-cards { display: grid; gap: 10px; margin: 0 0 16px; }
.addon-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--radius); background: var(--surface); }
.addon-card.have { border-style: solid; }
.addon-card .t { font-weight: 700; }
.addon-card .grow { min-width: 200px; }
.addon-line { margin-top: 4px; color: var(--text-2); }
.addon-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-text, var(--accent)); }
.addon-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.addon-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.addon-points svg { color: var(--success); flex: none; margin-top: 3px; }
.addon-price { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.addon-price b { font-size: 26px; letter-spacing: -0.02em; }
.ev-access .access-setting { margin: 0; }
.rp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 760px) {
  .gl-form-grid { grid-template-columns: 1fr; }
  .gl-filters .select.sm { flex: 1 1 140px; min-width: 0; }
  .gl-bulk { margin: 0 12px; }
  .gl-bulk .grow { flex-basis: 100%; height: 0; }
}
@media (max-width: 600px) {
  .gl-ptable table.data td { white-space: normal; }
  .gl-ptable .gl-pick { width: auto; }
  .gl-ptable .gl-actions { display: flex; }
  .gl-fix { flex-wrap: wrap; justify-content: flex-end; }
  .gl-fix .input.sm { width: 100%; }
}

/* The guest's pass page (/gp/…): a bright card with the QR code, then their agenda. */
.gp { --gp-accent: #d93a2b; max-width: 480px; margin: 0 auto; padding: 18px 14px 40px; display: grid; gap: 14px; }
.gp-card { overflow: hidden; padding: 0; }
.gp-card.card-pad { padding: 20px; }
.gp-band { height: 6px; background: var(--gp-accent); }
.gp-head { padding: 18px 20px 6px; text-align: center; }
.gp-company { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gp-name { font-size: 26px; margin: 6px 0 2px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.gp-event { margin: 0; font-weight: 600; color: var(--text-2); }
.gp-when { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.gp-qr { margin: 10px 20px 4px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--border); text-align: center; }
.gp-qr img { display: block; width: min(280px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; image-rendering: pixelated; }
.gp-qr figcaption { margin-top: 8px; font-size: 13px; color: #555a75; }
.gp-details { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 12px 20px 0; border-top: 1px solid var(--border); }
.gp-details dt, .gp-details dd { padding: 9px 0; border-bottom: 1px solid var(--border); margin: 0; font-size: 14px; }
.gp-details dt { color: var(--muted); padding-right: 14px; }
.gp-details dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.gp-venue { display: flex; gap: 10px; align-items: center; margin: 12px 20px 0; font-size: 14px; }
.gp-join { margin: 16px 20px 20px; width: auto; }
.gp-card > :last-child:not(.gp-join) { margin-bottom: 20px; }
.gp-agenda { padding: 18px 20px; }
.gp-agenda h2 { font-size: 18px; margin: 0 0 10px; }
.gp-code { font-size: 26px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.gp-foot { text-align: center; display: flex; gap: 4px; justify-content: center; align-items: center; }

/* Language / currency / theme menu: as tall as the window allows (everything fits on a laptop);
   on short screens each list scrolls under its own heading, and scrolling never moves the page. */
.prefs-panel { max-height: min(calc(100vh - 88px), 640px); overscroll-behavior: contain; }
.prefs-col { overscroll-behavior: contain; scrollbar-width: thin; }
.prefs-col h5 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 4px 10px 6px; background: var(--surface); }
.prefs-cur-col { min-width: 250px; }
.prefs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 4px; }
@media (max-width: 720px) { .prefs-cur-col { min-width: 0; } }
.gl-details-pick .gl-check-row { align-items: center; }
.gl-details-pick .gl-check-row input { margin: 0; }
.gl-offer .addon-points { padding-left: 50px; }
@media (max-width: 600px) { .gl-offer .addon-points { padding-left: 0; } }
.gl-select-page { display: none; }
.gl-page .sub-tabs button { flex: 1 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
  .gl-filters { display: grid; grid-template-columns: 1fr 1fr; padding: 0 12px; }
  .gl-filters .gl-search { grid-column: 1 / -1; }
  .gl-filters .gl-filter:nth-of-type(3) { grid-column: 1 / -1; }
  .gl-filters .gl-filter .select.sm { width: 100%; }
  .gl-filters > .btn { grid-column: 1 / -1; justify-self: start; }
  .gl-select-page { display: flex; gap: 10px; align-items: center; grid-column: 1 / -1; font-size: 14px; }
  .gl-select-page input { width: 18px; height: 18px; margin: 0; }
  .gl-ptable .gl-actions { gap: 2px; }
  .gl-ptable .gl-actions .btn + .btn { margin-left: 0; }
  .gl-page .sub-tabs button { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .gl-ptable tr.gl-sel { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
  .gl-ptable tr.gl-sel td { background: none; }
}
.gp-locked-head { text-align: center; }
.gp-locked-head .gp-event { font-size: 20px; margin: 4px 0 0; color: var(--text); }
@media (max-width: 600px) { .gl-emails-actions .btn { flex: 1 1 auto; justify-content: center; } }
.gp-card .gp-join { width: calc(100% - 40px); }
.gp-foot { padding: 0 12px; }
.access-setting .segmented { display: flex; width: fit-content; }

/* Many currencies switched on (super admin, Settings, Currencies): a search box under the heading,
   pinned with it while the list scrolls; currencies that do not match are hidden. */
.prefs-col h5 .prefs-search { display: block; width: 100%; margin-top: 6px; min-height: 34px; padding: 6px 10px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.prefs-item[hidden], .prefs-cur-col > p[hidden] { display: none; }
@media (max-width: 720px) { .prefs-col h5 .prefs-search { min-height: 40px; font-size: 16px; } }

/* Honor Pass check-in kiosk (pages/kiosk.js): the door scanner's look, for iPads and phones,
   portrait or landscape. Results carry an icon and words as well as a colour; the warnings
   ("Already inside") and refusals are striped too. */
.kiosk { gap: 12px; }
.kiosk-head { max-width: 1280px; align-items: center; }
.kiosk-title h1 { margin: 2px 0 0; }
.kiosk-who { display: grid; gap: 6px; justify-items: end; text-align: right; }
.kiosk-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.kiosk-net { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.kiosk-net.on { background: rgba(53, 199, 132, .18); color: #a6f2cc; }
.kiosk-net.off { background: #ffcf5c; color: #2a1d00; }
.kiosk-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.kiosk .btn.kiosk-tool { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.kiosk .btn.ghost { color: rgba(255,255,255,.88); }
.kiosk-main { width: 100%; max-width: 1280px; margin: 0 auto; display: grid; gap: 14px; }
.kiosk .door-stage, .kiosk .door-search { max-width: none; margin: 0; }
@media (orientation: landscape) and (min-width: 820px) {
  .kiosk-main { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); align-items: start; }
  .kiosk .door-stage { aspect-ratio: 4 / 3; max-height: calc(100dvh - 120px); }
}
.door-result.again { background: #1f5fbf; }
.door-result.warn { background: #9a5800 repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 18px, transparent 18px 36px); }
.door-result.bad { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 18px, transparent 18px 36px); }
.kiosk-result { overflow-y: auto; }
.kiosk-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.kiosk-actions .door-next { margin-top: 0; }
.kiosk .btn.kiosk-refuse { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.9); }
.kiosk-source { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.2); font-weight: 700; font-size: 14px; }
.door-result-line.kiosk-why { max-width: 34em; font-size: clamp(15px, 2.6vw, 19px); }
.kiosk-offline-note { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.25); font-size: 14px; }
.kiosk-hint { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.65); }
.kiosk .door-row .btn { flex-shrink: 0; }
.kiosk-login { margin: auto; width: 100%; max-width: 440px; display: grid; gap: 14px; justify-items: center; padding: 24px 6px; text-align: center; }
.kiosk-login h1 { margin: 0; font-size: 28px; }
.kiosk-sub { margin: 0; color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.5; }
.kiosk-form { display: grid; gap: 12px; width: 100%; text-align: left; }
.kiosk-form[hidden] { display: none; }
.kiosk-form .btn { width: 100%; }
.kiosk-form .kiosk-links .btn { width: auto; }
.kiosk-label { display: grid; gap: 6px; font-weight: 600; font-size: 14.5px; }
.kiosk .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
.kiosk .input::placeholder { color: rgba(255,255,255,.45); }
.kiosk .input.lg { text-align: left; }
.kiosk .input.kiosk-code { text-align: center;  font-size: 28px; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.kiosk-msg { margin: 0; min-height: 1.4em; color: #ffd2cb; font-size: 15px; }
.kiosk-msg:empty { display: none; }
.kiosk-links { justify-content: center; gap: 6px; }
.kiosk-organiser { color: rgba(255,255,255,.8); }
@media (max-width: 600px) {
  .kiosk-head { align-items: flex-start; }
  .kiosk-who { justify-items: start; text-align: left; }
  .kiosk-chips, .kiosk-tools { justify-content: flex-start; }
}

/* The Check-in tab (public/js/checkin-panel.js) */
.ck-panel { gap: 16px; }
.ck-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ck-kiosk-body { display: flex; gap: 18px; align-items: flex-start; }
.ck-kiosk-link { flex: 1; min-width: 0; gap: 10px; }
.ck-kiosk-actions { gap: 8px; }
.ck-url { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 13.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-url code { background: none; padding: 0; font-size: inherit; }
.ck-qr-box { margin: 0; display: grid; gap: 6px; justify-items: center; flex-shrink: 0; }
.ck-qr { width: 132px; height: 132px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-sizing: content-box; }
.ck-qr img, .ck-qr canvas { display: block; width: 100%; height: 100%; }
.ck-toggle { align-items: flex-start; gap: 10px; }
.ck-toggle > span { display: grid; gap: 2px; }
.ck-add { display: flex; gap: 8px; padding: 0 22px; }
.ck-add .input { flex: 1; min-width: 0; }
.ck-assistants .dt { border-top: 1px solid var(--border); }
.ck-row-actions { gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.ck-live-head { gap: 10px; align-items: center; }
.ck-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ck-stat { text-align: left; font: inherit; color: inherit; box-shadow: none; }
.ck-stat-link { cursor: pointer; }
.ck-stat-link:hover, .ck-stat-link:focus-visible { border-color: var(--text-2); }
.ck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; margin-top: 6px; }
.ck-block { gap: 10px; min-width: 0; }
.ck-block h4 { margin: 0; font-size: 14.5px; }
.ck-chart-wrap { display: grid; gap: 6px; }
.ck-chart { height: 140px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--border); }
.ck-bar { flex: 1 1 0; min-width: 2px; max-width: 28px; background: #2f6fe8; border-radius: 3px 3px 0 0; }
.ck-bar.peak { background: #17389a; }
.ck-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-facts { margin: 0; border-top: 1px solid var(--border); }
.ck-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ck-facts dt { color: var(--muted); }
.ck-facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ck-result { gap: 6px; flex-wrap: wrap; }
.ck-empty { margin: 0; }
.badge.info { color: #1f5fbf; background: color-mix(in srgb, #2f6fe8 12%, var(--surface)); }
.gl-arrived { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-weight: 600; }
.gl-arrived .tiny { font-weight: 400; }
.rp-chart { margin: 4px 0 10px; }
@media (max-width: 860px) {
  .ck-pair, .ck-grid { grid-template-columns: 1fr; }
  .ck-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ck-kiosk-body { flex-direction: column; }
  .ck-qr-box { align-self: center; }
  .ck-add { padding: 0 16px; flex-wrap: wrap; }
  .ck-add .btn { width: 100%; }
  .ck-stat .v { font-size: 26px; }
}

/* Agenda binding (agenda-release.js): sessions on the guest pass and the guest agenda. Locked =
   greyed behind a translucent wall with its opening time; released = lit up with its action;
   ended = closed. Every card has the same frame and minimum height, so the list stays even. */
.rl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rl-card { --rl: var(--gp-accent, var(--accent)); position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 78px; padding: 14px 14px 14px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .25s, box-shadow .25s, background .25s; }
.rl-time { display: grid; gap: 1px; padding-top: 1px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.rl-time b { font-size: 15px; color: var(--rl); }
.rl-time small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rl-body { display: grid; gap: 4px; min-width: 0; }
.rl-title { display: grid; gap: 3px; }
.rl-title b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.rl-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rl-track { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; }
.rl-side { margin-left: auto; }
.rl-actions { display: grid; gap: 8px; margin-top: 8px; }
.rl-go { min-height: 46px; justify-content: center; gap: 8px; }
.rl-go small { font-weight: 500; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.rl-go.primary { background: var(--rl); border-color: var(--rl); }
/* Open now: the card lights up in the event's colour. */
.rl-released { border-color: color-mix(in srgb, var(--rl) 60%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--rl) 7%, var(--surface)), var(--surface) 70%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl) 13%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--rl) 70%, transparent); }
.rl-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--rl); }
.rl-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 color-mix(in srgb, var(--rl) 60%, transparent); animation: rl-pulse 1.8s ease-out infinite; }
@keyframes rl-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* Locked: the session stays readable behind a translucent, finely striped wall that takes every
   tap; its opening time sits on the wall, at the end of the time line. */
.rl-locked { background: var(--surface-2); border-style: dashed; user-select: none; }
/* Room below the times for the wall's "Opens at" pill, so it never sits on the room or the time. */
.rl-card.rl-locked { padding-bottom: 52px; }
.rl-locked > .rl-time, .rl-locked > .rl-body { filter: grayscale(1); opacity: .5; }
.rl-locked .rl-time b { color: var(--text-2); }
.rl-wall { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-end; padding: 11px 12px; border-radius: inherit; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--text) 4.5%, transparent) 9px 10px), color-mix(in srgb, var(--surface-2) 34%, transparent); }
.rl-wall-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--shadow); white-space: nowrap; }
.rl-wall-pill svg { color: var(--muted); }
/* Ended: quiet, with the result where there is one. */
.rl-ended .rl-time b { color: var(--muted); }
.rl-ended .rl-title b { color: var(--text-2); }
.rl-closed { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--muted); }
.rl-result { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--rl); text-decoration: none; }
.rl-result:hover { text-decoration: underline; }
.gp-agenda .rl-list { margin-top: 2px; }
@media (max-width: 420px) {
  .rl-card { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 12px 12px 12px 10px; }
  .rl-time b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rl-live i { animation: none; } .rl-card { transition: none; } }

/* The event's agenda (/482913/agenda) for a pass holder: the same three states on its rows. */
.ag-rl { --rl: var(--accent); position: relative; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .25s, box-shadow .25s; }
.ag-rl > .ag-row, .ag-rl > .ag-row.live { border: 0; background: transparent; }
.ag-rl-go { display: grid; gap: 8px; padding: 0 14px 14px; }
.ag-rl-closed { display: flex; margin: 0; padding: 0 14px 12px; font-size: 13px; }
.ag-rl.rl-released { border-color: color-mix(in srgb, var(--rl) 70%, var(--border)); background: color-mix(in srgb, var(--rl) 6%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl) 12%, transparent); }
.ag-rl.rl-locked { border-style: dashed; background: var(--surface-2); }
.ag-rl.rl-locked > .ag-row { filter: grayscale(1); opacity: .45; pointer-events: none; }
.ag-rl.rl-ended > .ag-row { opacity: .62; }

/* Organisers: Lock · Release · End (agenda tab and activity controllers). */
.rl-switch { flex: none; flex-wrap: nowrap; padding: 3px; }
.rl-switch button { padding: 5px 11px; font-size: 12.5px; gap: 5px; }
.rl-switch button:disabled { cursor: default; opacity: .6; }
.rl-switch button[data-v="released"][aria-pressed="true"] { background: var(--success); color: #fff; box-shadow: none; }
.rl-switch button[data-v="ended"][aria-pressed="true"] { color: var(--muted); }
.ag-admin-row .rl-admin { flex: none; display: flex; align-items: center; gap: 8px; }
.rl-auto { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) { .ag-admin-row { flex-wrap: wrap; row-gap: 8px; } .ag-admin-row .rl-admin { order: 10; flex-basis: 100%; } }
.rl-bar { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; }
.rl-bar[hidden] { display: none; }
.rl-bar-head { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 14px; }
.rl-bar-head svg { color: var(--muted); }
.rl-bar-row { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.rl-bar-what { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.rl-bar-what b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-bar-what small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rl-bar-hint { margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 480px) { .rl-bar-row { flex-wrap: wrap; } .rl-bar-row .rl-switch { width: 100%; } .rl-bar-row .rl-switch button { flex: 1 1 0; justify-content: center; } }

/* "This is for invited guests" (verify page, Honor Pass events). */
.vg-invited { text-align: center; justify-items: center; padding-top: 26px; padding-bottom: 24px; }
.vg-invited h2 { margin: 4px 0 0; font-size: 21px; }
.vg-invited p { margin: 0 auto; max-width: 34ch; text-align: center; }
.vg-seal { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }

/* Guest agenda (founder, 21 Oct 2026): a session row is information, not a link; nothing to tap but
   a released session's buttons and, once open, "Rate this session". */
.ag-row.ag-row-static { cursor: default; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time rate" "main rate"; }
.ag-row.ag-row-static:hover { border-color: var(--border); }
.ag-rl > .ag-row.ag-row-static:hover { border-color: transparent; }
.ag-row.ag-row-static.live:hover { border-color: var(--accent); }
.ag-row .ag-desc-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-row > .ag-rate-btn { grid-area: rate; align-self: center; white-space: nowrap; }
@media (max-width: 420px) {
  .ag-row.ag-row-static { grid-template-columns: minmax(0, 1fr); grid-template-areas: "time" "main" "rate"; }
  .ag-row > .ag-rate-btn { justify-self: start; margin-top: 8px; }
}

/* ---------- Walk-in registration (walkin-render.js, walkin-register.js, walkin-form.js, walkin-poster.js) ---------- */
/* The guests' page: the event on a dark band, the form in the card. */
.wf-band { padding-bottom: 84px; }
.wf-when { margin: 10px auto 0; color: rgba(255,255,255,.78); font-size: 15px; }
.wf-card { max-width: 560px; }
.wf-fields { display: flex; flex-direction: column; gap: 18px; }
fieldset.wf-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.wf-field > .wf-label { font-weight: 600; font-size: 14.5px; color: var(--text); padding: 0; }
legend.wf-label { margin-bottom: 6px; }
.wf-label .optional { color: var(--muted); font-weight: 400; }
.wf-label .required, .wf-consent .required { color: var(--danger); font-weight: 700; }
.wf-help { margin: -2px 0 2px; font-size: 13px; color: var(--muted); }
.wf-field .field-error:empty { display: none; }
.wf-phone { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.wf-options { display: grid; gap: 8px; }
.wf-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wf-option { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: 15px; transition: border-color .12s, background .12s; }
.wf-option input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.wf-option:has(input:checked) { border-color: var(--text); background: var(--surface-2); font-weight: 600; }
.wf-option:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-soft); }
.wf-field.has-error .wf-option { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.wf-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.wf-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.wf-privacy { padding-top: 14px; border-top: 1px solid var(--border); }
.wf-banner:empty { display: none; }
.wf-done { font-size: 15.5px; }
.wf-success { margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.wf-already { align-items: flex-start; }
.wf-already-body { gap: 10px; }
.wf-already-body .small:empty { display: none; }
.wf-reset { text-align: center; }
/* The kiosk: the same form, big enough for a touch screen at the door. */
.wf-kiosk .join-band { padding: 28px 20px 72px; }
.wf-kiosk .join-band h1 { font-size: clamp(34px, 5vw, 56px); max-width: 860px; }
.wf-kiosk .wf-card { max-width: 760px; }
.wf-kiosk .wf-field > .wf-label { font-size: 18px; }
.wf-kiosk .wf-body > .small, .wf-kiosk .wf-body .hint { font-size: 16px; }
.wf-kiosk .wf-help, .wf-kiosk .wf-consent { font-size: 16px; }
.wf-kiosk .input, .wf-kiosk .select, .wf-kiosk .textarea { font-size: 19px; padding: 14px 16px; }
.wf-kiosk .wf-option { min-height: 60px; font-size: 18px; }
.wf-kiosk .wf-option input, .wf-kiosk .wf-consent input { width: 24px; height: 24px; }
.wf-kiosk .wf-phone { grid-template-columns: 128px minmax(0, 1fr); }
.wf-kiosk .btn.lg { min-height: 64px; font-size: 20px; }
.wf-kiosk .wf-done { font-size: 20px; padding: 22px; }
.wf-kiosk .wf-done .t { font-size: 26px; }

/* The poster: A4 portrait when printed, a big card on screen. */
.wf-poster-page { min-height: 100vh; background: var(--surface-2); padding: 24px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wf-poster-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.wf-poster { width: min(100%, 680px); aspect-ratio: 210 / 297; background: #fff; color: #1d1f3b; border-radius: 6px; box-shadow: var(--shadow-lg); padding: 7% 8%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wf-poster-kicker { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #d93a2b; }
.wf-poster h1 { margin: 14px 0 6px; font-size: clamp(30px, 6vw, 50px); line-height: 1.08; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.wf-poster-when { margin: 0; font-size: 17px; color: #484b67; }
.wf-poster-lead { margin: 26px 0 0; font-size: clamp(17px, 2.6vw, 22px); font-weight: 600; max-width: 26ch; }
.wf-poster-qr { width: min(62%, 380px); height: auto; aspect-ratio: 1; margin: 24px 0 12px; image-rendering: pixelated; }
.wf-poster-url { margin: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.wf-poster-foot { margin: auto 0 0; padding-top: 16px; font-size: 14px; color: #777a92; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  .wf-poster-page { padding: 0; background: #fff; min-height: 0; }
  .wf-poster { width: 210mm; height: 297mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; padding: 22mm 18mm; }
  .wf-poster-qr { width: 120mm; }
}

/* The builder: the editor beside a live preview. */
.wf-builder { display: flex; flex-direction: column; gap: 16px; }
.wf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.wf-head h3 { margin: 0; }
.wf-head p { margin: 4px 0 0; }
.wf-head-title { gap: 10px; align-items: center; }
.wf-save { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.wf-save-state.warn { color: var(--warning); font-weight: 600; }
.wf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.wf-main { gap: 16px; min-width: 0; }
.wf-side { position: sticky; top: 76px; min-width: 0; }
.wf-card-head { align-items: center; gap: 10px; }
.wf-card-head h3 { margin: 0; }
.wf-share-row { display: flex; gap: 16px; align-items: flex-start; }
.wf-share-qr { width: 104px; height: 104px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; background: #fff; image-rendering: pixelated; }
.wf-share-main { gap: 12px; min-width: 0; }
/* The link with a plain copy icon inside its right edge (founder, 30 Oct 2026). */
.wf-link { position: relative; }
.wf-link .input { width: 100%; min-width: 0; font-size: 14px; padding-right: 46px; }
.wf-link .btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); }
.wf-share-actions { gap: 8px; }
.wf-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-row { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.wf-row.open { border-color: var(--border-strong); box-shadow: 0 8px 22px -14px rgba(29, 31, 59, .45); }
.wf-row.fixed { background: var(--surface-2); }
.wf-row.dragging { opacity: .45; }
.wf-row.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.wf-row.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.wf-row-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 8px 6px 10px; }
.wf-grip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 36px; color: var(--muted); cursor: grab; flex: none; touch-action: none; }
.wf-grip.fixed { cursor: default; }
.wf-type-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); flex: none; }
.wf-row.fixed .wf-type-ico { background: var(--surface); }
.wf-row-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; background: none; padding: 4px 2px; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.wf-row-label { font-weight: 600; font-size: 14.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-row-meta { font-size: 12.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-row-tools { display: flex; gap: 2px; flex: none; }
.wf-editor { border-top: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.wf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.wf-grid .wf-full { grid-column: 1 / -1; }
.wf-static { margin: 0; padding: 10px 0; font-size: 14px; color: var(--text-2); }
.wf-switches { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.wf-toggle { gap: 4px; flex: 1 1 240px; }
.wf-toggle .hint { margin: 0 0 0 52px; }
.wf-options-edit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wf-options-edit li { display: flex; gap: 6px; align-items: center; }
.wf-add-option { align-self: flex-start; }
.wf-add { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.wf-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.wf-add-btn { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.wf-add-btn svg { color: var(--text-2); flex: none; }
.wf-add-btn:hover:not(:disabled) { border-color: var(--accent); border-style: solid; }
.wf-add-btn:disabled { opacity: .5; cursor: default; }
/* The preview: the real page in a phone or a laptop. */
.wf-device-wrap { display: flex; justify-content: center; padding: 16px; border-radius: var(--radius); background: var(--surface-2); }
.wf-device { position: relative; overflow: hidden; background: var(--bg); }
.wf-device.phone { width: 100%; max-width: 340px; height: 620px; border: 10px solid #1d1f3b; border-radius: 34px; }
.wf-device.phone .wf-screen { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.wf-device.laptop { width: 100%; border: 8px solid #1d1f3b; border-bottom-width: 14px; border-radius: 10px; }
.wf-device.laptop .wf-screen { width: 1100px; height: 690px; transform-origin: top left; overflow-y: auto; }
.wf-screen .join-page { min-height: 100%; }
.wf-device.phone .join-band { padding: 26px 16px 64px; }
.wf-device.phone .join-band h1 { font-size: 28px; }
.wf-device.phone .card-pad { padding: 18px; }
.wf-verok-ph { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; }
.wf-verok-box { width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: 5px; }
@media (max-width: 1100px) {
  .wf-layout { grid-template-columns: minmax(0, 1fr); }
  .wf-side { position: static; }
}
@media (max-width: 600px) {
  .wf-grid { grid-template-columns: minmax(0, 1fr); }
  .wf-share-row { flex-direction: column; align-items: stretch; }
  .wf-share-qr { align-self: center; }
  .wf-save { width: 100%; justify-content: space-between; margin-left: 0; }
  .wf-row-head { padding-left: 6px; gap: 6px; }
  .wf-type-ico { display: none; }
  .wf-editor { padding: 14px 12px; }
  .wf-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-device-wrap { padding: 10px; }
  .wf-toggle .hint { margin-left: 0; }
}
/* A walk-in's answers in a drawer from the side (guest list). */
dialog.modal.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(440px, 100vw); border-radius: 0; animation: wf-drawer .18s ease-out; }
@keyframes wf-drawer { from { transform: translateX(24px); opacity: 0; } }
.gl-answers-meta { gap: 8px; align-items: center; }
.gl-answers-list { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 14.5px; }
.gl-answers-list dt { color: var(--muted); }
.gl-answers-list dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.gl-answers-consent { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.gl-walkin-only { align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) { .gl-answers-list { grid-template-columns: minmax(0, 1fr); gap: 2px; } .gl-answers-list dd { margin-bottom: 10px; } }

/* Agenda → Preview as guest: the guests' page in a phone-sized frame, read-only. */
.ag-preview-dlg { width: min(460px, calc(100vw - 24px)); }
.ag-preview-phone { width: 100%; max-width: 400px; margin: 0 auto; height: min(70vh, 720px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-strong); border-radius: 28px; background: var(--bg); box-shadow: inset 0 0 0 6px var(--surface-2); padding: 10px 0; }
.ag-preview-phone a, .ag-preview-phone button, .ag-preview-phone textarea, .ag-preview-phone input { pointer-events: none; }
.ag-preview-phone .hub { padding: 12px 14px 20px; }

/* Event → Pass detail */
.pd-dlg { width: min(560px, calc(100vw - 24px)); }
.pd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pd-plan { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.pd-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-nums > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pd-nums small { display: block; color: var(--muted); font-size: 12.5px; }
.pd-nums b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pd-nums b.pd-full { color: var(--danger); }
.pd-bar { margin-top: 10px; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pd-bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.pd-bar.full > span { background: var(--danger); }
.pd-table td.num, .pd-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-table .pd-total td { font-weight: 700; border-top: 1.5px solid var(--border-strong); }
.pd-warn { color: var(--danger); font-weight: 600; }
@media (max-width: 480px) { .pd-nums b { font-size: 18px; } .pd-nums > div { padding: 10px; } }
.gl-added { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* Photo wall big screen: 6–10 posts at a time, shuffled, each batch with an entrance animation. */
.pk-stagebox { position: relative; min-height: 0; height: 100%; }
.pk-batch { position: absolute; inset: 0 0 14px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 24px); perspective: 1400px; }
.pk-batch .pk-tile { display: flex; flex-direction: column; min-height: 0; animation: pk-in-fade .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms); will-change: transform, opacity; }
.pk-batch .pk-tile-photo { position: relative; flex: 1 1 auto; min-height: 0; background: rgba(0, 0, 0, .3); }
.pk-batch .pk-tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.pk-batch .pk-tile-body { flex: 0 0 auto; }
.pk-batch .pk-tile-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pk-batch .pk-tile:not(.text-only) .pk-tile-body p { -webkit-line-clamp: 2; }
.pk-batch .pk-tile.text-only { justify-content: center; position: relative; }
.pk-batch .pk-tile.text-only .pk-tile-body p { -webkit-line-clamp: 6; }
.pk-quote-mark.sm { position: absolute; top: 4px; left: 14px; font-size: clamp(48px, 4vw, 90px); line-height: 1; opacity: .35; }
/* Leaving: the whole batch fades and drifts up together; a post hidden by the organiser fades where it is. */
.pk-batch.leaving { animation: pk-out .6s ease both; pointer-events: none; }
.pk-batch .pk-tile.gone { animation: pk-out .5s ease both; }
@keyframes pk-out { to { opacity: 0; transform: translateY(-14px) scale(.98); filter: blur(4px); } }
/* Entrances */
@keyframes pk-in-fade { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
.fx-rise .pk-tile { animation-name: pk-in-rise; }
@keyframes pk-in-rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.fx-bubble .pk-tile { animation-name: pk-in-bubble; animation-duration: .9s; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pk-in-bubble { 0% { opacity: 0; transform: scale(.3); border-radius: 50%; } 60% { opacity: 1; border-radius: 30%; } 100% { opacity: 1; transform: none; } }
.fx-polaroid .pk-tile { animation-name: pk-in-polaroid; animation-duration: 1s; transform: rotate(var(--tilt)); }
.fx-polaroid .pk-tile:not(.text-only) { background: #fbfaf6; padding: clamp(8px, .7vw, 14px) clamp(8px, .7vw, 14px) 0; }
.fx-polaroid .pk-tile:not(.text-only) .pk-tile-body p, .fx-polaroid .pk-tile:not(.text-only) .pk-tile-who { color: #2a2a2a; }
@keyframes pk-in-polaroid { 0% { opacity: 0; transform: translateY(-70px) rotate(calc(var(--tilt) * 4)) scale(1.08); } 70% { opacity: 1; } 100% { opacity: 1; transform: rotate(var(--tilt)); } }
.fx-flip .pk-tile { animation-name: pk-in-flip; animation-duration: .9s; transform-origin: center; backface-visibility: hidden; }
@keyframes pk-in-flip { from { opacity: 0; transform: rotateY(-90deg); } to { opacity: 1; transform: none; } }
/* How long this batch stays */
.pk-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: var(--s-line); overflow: hidden; }
.pk-timer > span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
@keyframes pk-timer { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pk-batch .pk-tile { animation-name: pk-in-fade !important; animation-duration: .4s !important; } .pk-batch.mosaic .pk-tile { animation-name: pk-in-tile !important; } }
/* The mosaic (founder, 9 Nov 2026): up to 10 posts in tiles of mixed sizes that fill the screen, like a video
   wall; each new batch comes in as a wave from the left while the last one leaves the same way. */
.pk-batch.mosaic { inset: 0 0 14px; gap: clamp(6px, .5vw, 10px); }
.pk-batch.mosaic .pk-tile { position: relative; display: block; border-radius: clamp(6px, .45vw, 10px); border: 0; box-shadow: none; background: #0b0d18; animation-delay: calc(.45s + var(--i) * 90ms); }
.pk-batch.mosaic .pk-tile-photo { position: absolute; inset: 0; }
.pk-batch.mosaic .pk-tile:not(.text-only) .pk-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18% clamp(12px, 1vw, 22px) clamp(10px, .8vw, 18px); background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.pk-batch.mosaic .pk-tile:not(.text-only) .pk-tile-body p { color: #fff; -webkit-line-clamp: 2; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.pk-batch.mosaic .pk-tile:not(.text-only) .pk-tile-who { color: color-mix(in srgb, var(--accent) 45%, #fff); }
.pk-batch.mosaic .pk-tile.sz-1:not(.text-only) .pk-tile-body p { display: none; }
.pk-batch.mosaic .pk-tile.text-only { display: flex; flex-direction: column; justify-content: center; }
.pk-batch.mosaic .pk-tile.text-only .pk-quote-mark { position: absolute; top: 4%; left: 6%; }
.pk-batch.mosaic .pk-tile.text-only .pk-tile-body p { font-size: clamp(15px, 1.15vw, 24px); }
.pk-batch.mosaic .pk-tile.text-only.sz-1 .pk-tile-body p { -webkit-line-clamp: 4; font-size: clamp(13px, .85vw, 17px); }
.pk-batch.mosaic .pk-tile.text-only.sz-1 .pk-quote-mark { display: none; }
.pk-batch.mosaic .pk-tile.text-only.sz-3 .pk-tile-body p { font-size: clamp(20px, 1.7vw, 36px); -webkit-line-clamp: 7; }
.pk-batch.mosaic.leaving { animation: none; }
.pk-batch.mosaic.leaving .pk-tile { animation: pk-out-tile .45s ease both; animation-delay: calc(var(--i) * 90ms); }
/* No blur in the mosaic: blurring big photos makes the wave stutter. */
.pk-batch.mosaic.fx-fade .pk-tile { animation-name: pk-in-tile; }
@keyframes pk-out-tile { to { opacity: 0; transform: scale(.96); } }
@keyframes pk-in-tile { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.pk-batch.mosaic.fx-flip.leaving .pk-tile { animation-name: pk-out-flip; }
@keyframes pk-out-flip { to { opacity: 0; transform: rotateY(90deg); } }
.pk-stage[data-theme="light"] .pk-batch.mosaic .pk-tile:not(.text-only) { background: #e9e6df; }

/* Photo wall settings: the big screen preview on the right */

/* Photo wall: the Settings tab takes the page's full width (the lucky draw's Screen tab layout). */
.draw-grid.settings-wide { grid-template-columns: minmax(0, 1fr); }
.draw-grid.settings-wide > aside { display: none; }

/* A list of short texts as a small table (list-table.js): teams, accepted answers, filter words. */
.list-table { display: flex; flex-direction: column; gap: 8px; }
.list-table .lt-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lt { width: 100%; border-collapse: collapse; }
.lt td { padding: 3px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.lt tr:first-child td { border-top: 0; }
.lt .lt-n { width: 34px; text-align: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lt .lt-x { width: 40px; text-align: right; }
.lt .input { height: 36px; border-color: transparent; background: transparent; box-shadow: none; }
.lt .input:hover { border-color: var(--border); }
.lt .input:focus { border-color: var(--accent); background: var(--surface); }
.lt .lt-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }
/* "Add an activity": the services under their group (Stage engagement, Audience voice). */
.ev-add-group h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ev-add-group .ev-add-grid { margin-top: 10px; }
/* Event → Settings → Team: what each member may do, as small switches under their name. */
.team-perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.team-perm { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--muted); cursor: pointer; }
.team-perm input { margin: 0; accent-color: var(--accent); }
.team-perm.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.team-perm:has(input:disabled) { cursor: default; }
.ev-main .tvh { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.ev-main .tvh-col { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ev-main .tvh-col + .tvh-col { border-left: 1px solid var(--border); }
.ev-main .tvh-head { display: flex; gap: 10px; align-items: flex-start; }
.ev-main .tvh-head p { margin: 2px 0 0; }
.ev-main .tvh-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ev-main .tvh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ev-main .tvh-list li { display: flex; gap: 7px; align-items: flex-start; }
.ev-main .tvh-list li > svg { flex: none; margin-top: 3px; color: var(--accent); }
@media (max-width: 720px) {
  .ev-main .tvh { grid-template-columns: 1fr; }
  .ev-main .tvh-col + .tvh-col { border-left: 0; border-top: 1px solid var(--border); }
}
.as-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.as-tile { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.as-tile b { font-size: 20px; }
@media (max-width: 720px) { .as-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.as-job-select { min-width: 180px; max-width: 260px; }

/* Tab loader (lib.js): the old panel dims under a spinner until the new tab is drawn. */
.tab-loading { position: relative; pointer-events: none; min-height: 120px; }
.tab-loading > * { opacity: .35; transition: opacity .15s; }
.tab-loading::after { content: ''; position: absolute; left: 50%; top: min(50%, 160px); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: tab-spin .7s linear infinite; z-index: 5; }
@keyframes tab-spin { to { transform: rotate(360deg); } }

/* Confirmations that cannot be undone (lib.js confirmDialog): the button unlocks after a 3-second ring. */
@property --hold { syntax: '<number>'; inherits: false; initial-value: 0; }
.btn.holding { cursor: not-allowed; }
.hold-ring { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; --hold: 0;
  background: conic-gradient(currentColor calc(var(--hold) * 1%), color-mix(in srgb, currentColor 28%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 56%); mask: radial-gradient(circle, transparent 52%, #000 56%);
  animation: hold-ring 3s linear forwards; }
@keyframes hold-ring { to { --hold: 100; } }
@media (prefers-reduced-motion: reduce) { .tab-loading::after { animation-duration: 2s; } }

/* Guest list: the columns from the organiser's file, then the ones Yaypick keeps (tinted, with a divider). */
.gl-ptable .gl-groups th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 8px; padding-bottom: 6px; white-space: nowrap; }
.gl-ptable .gl-groups th svg { vertical-align: -2px; margin-right: 5px; }
.gl-ptable .gl-group-yp { color: var(--accent); }
.gl-ptable .yp-col { background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.gl-ptable .yp-first { border-left: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
@media (max-width: 760px) { .gl-ptable .gl-groups { display: none; } .gl-ptable .yp-col { background: none; } .gl-ptable .yp-first { border-left: 0; } }
/* The add-a-guest dialog's message: added, or why not. */
.gl-form-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.gl-form-note svg { flex: none; margin-top: 2px; }
.gl-form-note.ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); }
.gl-form-note.bad { background: color-mix(in srgb, var(--danger, #d93a2b) 9%, var(--surface)); color: var(--danger, #d93a2b); border: 1px solid color-mix(in srgb, var(--danger, #d93a2b) 30%, var(--border)); }

/* Assistant Helper (helper.js): sign in, then one card per job. */
.helper .hp-wrap { max-width: 640px; margin: 0 auto; padding: 22px 16px 48px; display: flex; flex-direction: column; gap: 14px; }
.hp-head { display: flex; align-items: center; gap: 12px; }
.hp-head h1 { font-size: 24px; margin: 0; }
.hp-who { color: var(--muted); margin: -6px 0 0; }
.hp-intro h2 { font-size: 18px; margin: 4px 0 2px; }
.hp-jobs { display: flex; flex-direction: column; gap: 10px; }
.hp-job { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); }
.hp-job.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.hp-job > .btn { grid-column: 1 / -1; }
.hp-job p { margin: 2px 0 0; }
.hp-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.hp-taken { color: var(--muted); }
.hp-foot { text-align: center; margin-top: 6px; }

/* "Waiting for your approval" (pending-bar.js): a pill floating over every organiser page. */
.pending-bar { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.pb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--accent); color: #fff; box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.pb-pill:focus-visible { outline: 3px solid var(--accent-line, #fff); outline-offset: 2px; }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pb-pulse 1.6s ease-in-out infinite; }
@keyframes pb-pulse { 50% { opacity: .35; } }
.pb-list { width: min(420px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px -18px rgba(13, 15, 34, .45); padding: 6px; display: flex; flex-direction: column; }
.pb-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.pb-item:hover, .pb-item:focus-visible { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.pb-item b { display: block; font-size: 14px; }
.pb-item small { display: block; color: var(--muted); font-size: 12.5px; }
.pb-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
@media (max-width: 600px) { .pending-bar { top: 64px; } .pb-pill { font-size: 13px; padding: 7px 12px; } }
@media (prefers-reduced-motion: reduce) { .pb-dot { animation: none; } }

/* Bank transfer / DuitNow QR checkout (billing.js showTransfer). */
.tr-pay { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.tr-pay.no-qr { grid-template-columns: minmax(0, 1fr); }
.tr-qr { margin: 0; text-align: center; }
.tr-qr img { width: 200px; height: 200px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.tr-step { display: flex; gap: 10px; align-items: flex-start; }
.tr-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.tr-amount { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.tr-ref { font-size: 17px; }
.vat-note { margin: 4px 0 0; display: flex; align-items: center; gap: 2px; color: var(--muted); }
.vat-note:empty { display: none; }
.vat-note.ok { color: var(--success); font-weight: 600; }
.tr-acc-title { font-size: 15px; font-weight: 600; margin: 0; }
.tr-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 10px 0 0; }
.tr-row { min-width: 0; }
.tr-row dt { font-size: 12px; color: var(--muted); margin: 0 0 2px; }
.tr-row dd { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; font-weight: 600; overflow-wrap: anywhere; }
.tr-row dd .btn.icon { flex: none; margin-top: -4px; }
.tr-bill { display: grid; gap: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.tr-bill > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; }
.tr-bill > div + div { border-top: 1px dashed var(--border); }
.tr-bill dt { color: var(--muted); font-size: 14px; }
.tr-bill dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.tr-bill > .tr-item { display: grid; gap: 6px; }
.tr-bill > .tr-item dd { text-align: left; font-weight: 400; }
.tr-item-body { display: grid; gap: 4px; font-size: 14px; }
.tr-item-body b { font-size: 16px; }
.tr-item-body ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; }
.tr-item-body li { display: flex; gap: 6px; align-items: center; }
@media (max-width: 560px) { .tr-rows { grid-template-columns: minmax(0, 1fr); } }
.tr-note:empty { display: none; }
.pending-head { display: flex; gap: 12px; align-items: center; }
.pending-head p { margin: 4px 0 0; }
.pending-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--warning); }
.pending-done p { margin: 0; }
.tr-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.tr-note.ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); }
@media (max-width: 560px) { .tr-pay { grid-template-columns: minmax(0, 1fr); } .tr-qr img { width: 220px; height: 220px; } }
.ev-area-actions { gap: 8px; }
.ev-sub-title { font-size: 17px; margin: 18px 0 0; }

/* Buy passes: the quantity stepper (− / + only) and the bundle discount hint. */
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.qty-label { display: grid; gap: 2px; min-width: 0; }
.qty-stepper { flex: none; display: inline-flex; align-items: center; border: 1.5px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.qty-btn { width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; font-weight: 600; line-height: 1; color: var(--text); cursor: pointer; }
.qty-btn:hover:not(:disabled) { background: var(--accent-softer); color: var(--accent); }
.qty-btn:disabled { color: var(--border-strong); cursor: not-allowed; }
.qty-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.qty-value { min-width: 36px; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; user-select: none; }
.bundle-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 14px; background: var(--accent-softer); color: var(--accent); border: 1px dashed var(--accent-line); }
.bundle-note.on { background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); font-weight: 600; }
.bundle-note[hidden] { display: none; }
.price .was { color: var(--muted); font-size: 16px; margin-right: 8px; font-weight: 500; }
@media (max-width: 480px) { .qty-row { flex-wrap: wrap; } }

/* The visitor's country (by IP) beside the language: "EN · MY". Prices follow it. */
.lang-pick { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lang-pick .select { flex: 1; min-width: 0; }
.country-tag { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 4px; border: 0; background: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-2, var(--muted)); cursor: help; }

/* Agenda session dialog: two columns on a desktop with a divider between; each scrolls on its own. */
dialog.modal.wide:has(.ag-split) { width: min(1040px, calc(100vw - 32px)); }
.ag-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 0; padding: 0; margin: 0; min-width: 0; }
.ag-split > .ag-col { align-content: start; min-width: 0; }
.ag-split > .ag-side { border-left: 1px solid var(--border); padding-left: 24px; margin-left: 24px; }
@media (min-width: 821px) {
  .ag-split > .ag-col { max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 4px; }
}
@media (max-width: 820px) {
  .ag-split { grid-template-columns: minmax(0, 1fr); }
  .ag-split > .ag-side { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
}

/* Brand colours: one swatch per colour, and the colours found in an image. */
.bc { display: grid; gap: 10px; }
.bc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bc-list:empty { display: none; }
.bc-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bc-pick { flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; overflow: hidden; cursor: pointer; background: none; }
.bc-pick::-webkit-color-swatch-wrapper { padding: 0; }
.bc-pick::-webkit-color-swatch { border: 0; border-radius: 50%; }
.bc-pick::-moz-color-swatch { border: 0; border-radius: 50%; }
.bc-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bc-name { font-weight: 600; font-size: 14px; }
.bc-hex { height: 28px; padding: 2px 8px; font-size: 13px; font-family: inherit; text-transform: lowercase; max-width: 110px; }
.bc-suggest { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-softer); border: 1px dashed var(--accent-line); }
.bc-suggest[hidden] { display: none; }
.bc-suggest-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bc-theme { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.bc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text); }
.bc-chip:hover:not(:disabled) { border-color: var(--accent); }
.bc-chip:disabled { opacity: .5; cursor: not-allowed; }
.bc-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.bc-chip-hex { font-weight: 400; color: var(--muted); font-size: 12px; }

/* Brand fonts: cards in columns, each written in its own font. */
.bf { display: grid; gap: 10px; }
.bf-status { margin: 0; }
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.bf-card { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; }
.bf-card:hover { border-color: var(--border-strong); }
.bf-card.on { border-color: var(--accent); background: var(--accent-softer); }
.bf-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bf-aa { font-size: 30px; line-height: 1.1; }
.bf-name { font-size: 17px; line-height: 1.2; }
.bf-sample { font-size: 14px; color: var(--muted); line-height: 1.3; }
.bf-meta { font-family: var(--font, inherit); font-size: 12px; color: var(--muted); }
.bf-meta b { color: var(--accent); }
.bf-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.bf-own { max-width: 420px; }

/* Stage design request: parts with a heading and a divider, files as cards. */
.sd-section { display: grid; gap: 16px; padding-top: 22px; margin-top: 6px; border-top: 1px solid var(--border); }
.sd-section-title { margin: 0; font-size: 16px; font-weight: 700; }
.sd-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sd-file { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.sd-file:hover { border-color: var(--accent); background: var(--accent-softer); }
.sd-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-file-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sd-file .btn { margin-top: 4px; pointer-events: none; }
.sd-file-names { display: grid; gap: 2px; font-size: 13px; color: var(--success); overflow-wrap: anywhere; }
.sd-file-names:empty { display: none; }
.sd-file-names span { display: inline-flex; gap: 4px; align-items: center; }
.sd-submit { padding-top: 18px; border-top: 1px solid var(--border); }
@media (max-width: 720px) { .sd-files { grid-template-columns: minmax(0, 1fr); } }

/* Phone: country code and number side by side. */
.phone-field { display: flex; gap: 8px; min-width: 0; }
.phone-field .phone-cc { flex: none; width: 112px; }
.phone-field .input { flex: 1; min-width: 0; }

/* Pricing: the Promotions tab (first, with a "Hot" badge) and its bundle cards. */
.pricing-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.pricing-tabs .hot { padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #ff7a18, #e5322b); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; animation: hot-pulse 1.8s ease-in-out infinite; }
.pricing-tabs button svg { color: #f05a1a; }
@keyframes hot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 90, 26, .45); } 50% { box-shadow: 0 0 0 5px rgba(240, 90, 26, 0); } }
@media (prefers-reduced-motion: reduce) { .pricing-tabs .hot { animation: none; } }
.promo-col { border-color: color-mix(in srgb, #f05a1a 45%, var(--border)); }
.price-col .promo-flag { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ff7a18, #e5322b); color: #fff; }
/* The launch offer above the plans: no code, taken off at checkout. */
.launch-offer { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, #ff7a18 45%, var(--border)); background: color-mix(in srgb, #ff7a18 10%, var(--surface)); font-size: 14.5px; }
.launch-offer > svg { flex-shrink: 0; margin-top: 2px; color: #ff7a18; }
.launch-offer .t { font-weight: 800; font-size: 16px; }
.launch-offer .small { color: var(--muted); margin-top: 2px; }
.promo-was { font-size: 14px; color: var(--muted); }
.promo-was s { font-weight: 600; }
.promo-save { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.promo-save span { font-weight: 500; color: var(--text-2, var(--muted)); }
.price-col .promo-was .promo-save { margin: 0 0 0 4px; padding: 2px 9px; font-size: 12.5px; vertical-align: middle; }
.bundle-next { display: block; font-weight: 500; font-size: 13px; color: var(--accent); margin-top: 2px; }

/* Sign-up / log-in: the photo side stays still while the form grows (errors, hints). */
@media (min-width: 981px) {
  .auth-side { position: sticky; top: 64px; height: calc(100vh - 64px); align-self: start; }
}
/* Labels sit on the field's border line. */
.auth-float .field { position: relative; }
.auth-float .field > label { position: absolute; top: -9px; left: 12px; z-index: 1; padding: 0 6px; line-height: 18px; font-size: 12.5px; font-weight: 600; color: var(--text-2, var(--muted)); background: linear-gradient(to bottom, var(--bg) 50%, var(--surface) 50%); border-radius: 4px; pointer-events: none; }
.auth-float .field:focus-within > label { color: var(--accent); }
.auth-float .field > .input, .auth-float .field > .pw-box { margin-top: 0; }
.auth-float .auth-names { gap: 12px; }
.auth-float .auth-type { border: 0; margin: 0; padding: 0; min-width: 0; }
.auth-float .auth-type legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.auth-float .auth-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-float .auth-type-opt { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.auth-float .auth-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.auth-float .auth-type-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: 0 0 0 1px var(--accent) inset; }
.auth-float .auth-type-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-float .auth-type-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2, var(--bg)); color: var(--accent-text, var(--accent)); }
.auth-float .auth-type-text { display: grid; gap: 2px; min-width: 0; }
.auth-float .auth-type-text b { font-size: 14.5px; }
.auth-float .auth-type-text small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.auth-float .auth-switch { margin: 6px 0 0; }
.auth-float .auth-switch .link-btn { background: none; border: 0; padding: 0; color: var(--accent-text, var(--accent)); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 420px) { .auth-float .auth-type-grid { grid-template-columns: 1fr; } }
/* Terms consent: a box that ticks with an animation once the window is agreed. */
.consent-check { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.consent-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--border-strong); border-radius: 6px; display: grid; place-items: center; background: var(--surface); transition: background .2s, border-color .2s; }
.consent-box svg { stroke-dasharray: 24; stroke-dashoffset: 24; color: #fff; }
.consent-check.on .consent-box { background: var(--success); border-color: var(--success); animation: consent-pop .35s ease-out; }
.consent-check.on .consent-box svg { animation: consent-tick .35s .1s ease-out forwards; }
@keyframes consent-tick { to { stroke-dashoffset: 0; } }
@keyframes consent-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .consent-check.on .consent-box, .consent-check.on .consent-box svg { animation: none; stroke-dashoffset: 0; } }
/* Masked until agreed. */
.btn.masked, .btn.masked:hover { opacity: .45; filter: grayscale(.6); cursor: not-allowed; pointer-events: none; }
/* The Terms and Privacy window: only its ✕ closes it; Agree opens at the end. */
dialog.consent-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; display: flex; flex-direction: column; }
dialog.consent-modal:not([open]) { display: none; }
.consent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.consent-head h3 { margin: 0; font-size: 18px; }
.consent-body { flex: 1; overflow-y: auto; padding: 18px 22px; min-height: 240px; max-height: calc(100vh - 220px); }
.consent-body h2 { font-size: 20px; margin: 4px 0 10px; }
.consent-body h3 { font-size: 15px; margin: 18px 0 6px; }
.consent-body p, .consent-body li { font-size: 14px; line-height: 1.6; color: var(--text-2, var(--text)); }
.consent-body hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.consent-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2, var(--surface)); }
.consent-hint { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.consent-hint.ok { color: var(--success); font-weight: 600; }
.consent-agree:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.consent-agree.ready { animation: consent-pop .35s ease-out; }

/* The step-by-step guide: dark everywhere but the part being explained, a bouncing arrow, a card. */
.tour { position: fixed; inset: 0; z-index: 2000; }
.tour-block { position: absolute; inset: 0; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 12, 28, .66), 0 0 0 3px var(--accent); transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; pointer-events: none; }
.tour-arrow { position: fixed; width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); animation: tour-bob 1s ease-in-out infinite; transition: top .3s ease, left .3s ease; }
.tour-arrow.up { transform: rotate(180deg); animation-name: tour-bob-up; }
@keyframes tour-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
@keyframes tour-bob-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.tour-card { position: fixed; display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.35); animation: tour-in .25s ease-out; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tour-count { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .03em; text-transform: uppercase; }
.tour-title { margin: 0; font-size: 18px; }
.tour-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2, var(--text)); }
.tour-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tour-foot .btn { min-width: 0; }
.tour-foot .btn[hidden] { display: none; }
@media (max-width: 640px) { .tour-foot .btn { flex: 1 1 0; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .tour-arrow, .tour-card { animation: none; } .tour-spot { transition: none; } }

/* Two / three fields side by side (stacked on a phone), with real space between them. */
.grid-2, .grid-3 { display: grid; gap: 16px; align-items: start; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2.tight, .grid-3.tight { gap: 16px 12px; }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
/* Labels on the border line need room above each field: never two labels touching. */
.auth-form form.auth-float { gap: 26px; }
.auth-float .auth-names { gap: 26px 12px; }
@media (max-width: 380px) { .auth-float .auth-names { grid-template-columns: minmax(0, 1fr); } }

/* Labels on the border line, done like an outlined field: the label only hides the border behind it
   (nothing painted above the line), its colour follows the field (grey, blue while typing, red on an
   error), and focus is a thicker border instead of an outer glow, so nothing runs behind the label. */
.auth-float .field > label { background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--surface) calc(50% - 1px)); border-radius: 0; color: var(--text-2, var(--muted)); }
.auth-float .field:focus-within > label { color: var(--focus); }
.auth-float .field:has([aria-invalid="true"]) > label { color: var(--danger); }
.auth-float .input:focus:not([aria-invalid="true"]) { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.auth-float .input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--danger); }

/* Consent: a spinning circle in the box while the window opens, and a centred loader inside it. */
.consent-check.loading { cursor: progress; }
.consent-check.loading .consent-box { border-color: transparent; background: none; position: relative; }
.consent-check.loading .consent-box::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: consent-spin .7s linear infinite; }
.consent-check.loading .consent-box svg { display: none; }
@keyframes consent-spin { to { transform: rotate(360deg); } }
.consent-check b { color: var(--text); font-weight: 700; }
.consent-loader { display: grid; place-items: center; min-height: 280px; }
.consent-loader .ring { width: 40px; height: 40px; border-radius: 50%; border: 3.5px solid var(--border); border-top-color: var(--accent); animation: consent-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .consent-check.loading .consent-box::after, .consent-loader .ring { animation-duration: 2s; } }

/* Two-step sign-in: the code step at login, and its card in Password & devices. */
.two-step { width: 100%; max-width: 400px; gap: 18px; }
.two-step-head { display: flex; align-items: center; gap: 14px; }
.two-step-head h1 { margin: 4px 0 0; font-size: 30px; letter-spacing: -0.02em; }
.two-step-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2, var(--surface)); color: var(--text-2, var(--muted)); border: 1px solid var(--border); }
.two-step-ic.on { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.two-step .two-step-code { font-size: 22px; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.two-step-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.two-step-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.two-step-scan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.two-step-qr { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 8px; box-sizing: content-box; }
.two-step-key { font-size: 15px; letter-spacing: .05em; word-break: break-all; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); }
.two-step-setup .two-step-code { max-width: 220px; font-size: 20px; letter-spacing: .2em; text-align: center; }
.recovery-codes { margin: 0; padding: 14px 14px 14px 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2, var(--surface)); }
.recovery-codes code { font-size: 15px; letter-spacing: .04em; }
@media (max-width: 560px) { .two-step-scan { grid-template-columns: minmax(0, 1fr); justify-items: center; } .recovery-codes { grid-template-columns: minmax(0, 1fr); } }
.ev-purge { margin: 0 0 18px; align-items: center; }
.helping-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none !important; }
.helping-strip:hover { border-color: var(--border-strong); }
.helping-strip b { color: var(--accent); }

/* =========================================================================
   Modals on phones: every modal (any dialog.modal, wide, drawer and the consent and terms
   ones too) slides up from the bottom like a phone app's sheet, full width with a grab bar;
   drag it down to close (lib.js; the consent and terms modals close only with their ✕).
   ========================================================================= */
@media (max-width: 640px) {
  html dialog.modal[open] { inset: auto 0 0 0 !important; margin: 0 !important; width: 100vw !important; max-width: 100vw !important; height: fit-content !important; min-height: 0 !important; max-height: 92dvh !important;
    border-radius: 22px 22px 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px); overflow: auto; overscroll-behavior: contain;
    animation: sheet-up .34s cubic-bezier(.2, .9, .3, 1) both !important; }
  html dialog.modal[open]::before { content: ""; position: sticky; top: 0; z-index: 2; display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--border-strong, rgba(0, 0, 0, .25)); }
  html dialog.modal[open]::backdrop { animation: sheet-fade .3s ease-out both; }
  html dialog.modal .modal-body { padding: 14px 18px 20px; }
  html dialog.modal .modal-actions { position: sticky; bottom: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }
  html dialog.modal.sheet-dragging { animation: none !important; transition: none !important; }
  html dialog.modal.sheet-leaving { animation: none !important; transition: transform .22s ease-in !important; transform: translateY(100%) !important; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-fade { from { opacity: 0; } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { html dialog.modal[open], html dialog.modal[open]::backdrop { animation: none !important; } }
/* Big screen themes on a free event: a lock note and a "Pass" tag on each theme. */
.bst-locked { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--accent-softer, rgba(217, 58, 43, .06)); border: 1px solid var(--accent-line, rgba(217, 58, 43, .35)); color: var(--text); font-size: 14px; line-height: 1.45; }
.bst-locked svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.bst-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: 2px; font-size: 11px; }

/* =========================================================================
   3D big screens (public/js/stage3d.js): the scene fills the screen behind the page's header;
   the page's own 2D content hides while 3D is on. Sizes follow the screen's height (--px).
   ========================================================================= */
.s3d { isolation: isolate; }
.s3d > :not(.s3d-layer):not(.stage-top):not(.wst-head):not(.bulk-layer):not(.ysl-holding):not([class*="reconnect"]):not(.cs-sound):not([class*="preview-tag"]):not(.confetti):not(.bs-roll):not(.bs-dock):not(.bs-win):not(.yj) { visibility: hidden !important; }
/* Bingo "A guest rolls": the cage and the rolled ball show over the 3D screen too. */
.s3d > .bs-roll { z-index: 7; }
.s3d > .stage-top, .s3d > .wst-head { position: relative; z-index: 3; background: transparent !important; border: 0 !important; }
.s3d > [class*="reconnect"] { z-index: 6; }
.s3d-layer { --px: 1px; position: absolute; inset: 0; z-index: 1; overflow: hidden; color: var(--ycs-text, #fff); font-family: Nunito, var(--font); }
.s3d-canvas, .s3d-canvas canvas, .s3d-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.s3d-fx { pointer-events: none; z-index: 4; }
.s3d-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 44%; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: calc(26 * var(--px)); padding: calc(150 * var(--px)) calc(80 * var(--px)) calc(80 * var(--px)); transition: none; }
.s3d-kick { font: 600 calc(15 * var(--px)) / 1.3 'IBM Plex Mono', monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--ycs-accent); }
.s3d-title { font: 800 calc(58 * var(--px)) / 1.05 Rubik, var(--font); letter-spacing: -.01em; color: var(--ycs-text); overflow-wrap: anywhere; }
.s3d-sub { font: 700 calc(21 * var(--px)) / 1.4 Nunito, var(--font); color: var(--ycs-dim); }
.s3d-stats { display: flex; gap: calc(44 * var(--px)); }
.s3d-stats b { display: block; font: 800 calc(44 * var(--px)) / 1 Rubik, var(--font); color: var(--ycs-text); font-variant-numeric: tabular-nums; }
.s3d-stats span { font: 700 calc(16 * var(--px)) / 1.3 Nunito, var(--font); color: var(--ycs-dim); }
.s3d-rows { display: grid; gap: calc(10 * var(--px)); }
.s3d-row { display: flex; align-items: center; gap: calc(14 * var(--px)); padding: calc(13 * var(--px)) calc(18 * var(--px)); border-radius: calc(14 * var(--px)); background: color-mix(in srgb, var(--ycs-card) 85%, transparent); border: 1px solid var(--ycs-line); color: var(--ycs-card-text); font: 800 calc(22 * var(--px)) / 1.2 Rubik, var(--font); min-width: 0; }
.s3d-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3d-row small { font: 700 calc(14 * var(--px)) Nunito, var(--font); opacity: .75; white-space: nowrap; }
.s3d-row .lead { opacity: .6; font-size: calc(17 * var(--px)); width: calc(22 * var(--px)); flex-shrink: 0; }
.s3d-row .tag { margin-left: auto; flex-shrink: 0; font: 700 calc(12 * var(--px)) 'IBM Plex Mono', monospace; letter-spacing: .14em; padding: calc(5 * var(--px)) calc(10 * var(--px)); border-radius: 99px; background: color-mix(in srgb, var(--ycs-text) 12%, transparent); }
.s3d-row.hot { background: var(--ycs-highlight); border-color: var(--ycs-highlight); color: #fff; }
.s3d-row.hot .tag { background: rgba(255, 255, 255, .22); }
.s3d-head { position: absolute; left: 0; right: 0; top: calc(56 * var(--px)); z-index: 3; text-align: center; pointer-events: none; opacity: 0; transition: opacity .4s ease; color: var(--ycs-text); padding: 0 6%; }
.s3d-head.on { opacity: 1; }
.s3d-hkick { font: 700 calc(18 * var(--px)) 'IBM Plex Mono', monospace; letter-spacing: .3em; color: var(--ycs-accent); text-transform: uppercase; }
.s3d-hbig { font: 900 calc(58 * var(--px)) / 1.1 Rubik, var(--font); margin-top: calc(8 * var(--px)); overflow-wrap: anywhere; }
.s3d-hsmall { font: 700 calc(22 * var(--px)) Nunito, var(--font); color: var(--ycs-dim); margin-top: calc(6 * var(--px)); }
.s3d .s3d-head { top: calc(140 * var(--px)); }
.s3d-pic { width: 100%; max-width: calc(520 * var(--px)); aspect-ratio: 16 / 10; border-radius: calc(20 * var(--px)); overflow: hidden; box-shadow: 0 0 0 1px var(--ycs-line); }
.s3d-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
:not(.s3d) > .s3d-layer { display: none; }
.present.s3d { position: relative; height: 100vh; overflow: hidden; padding: 0; }
.s3d-join { display: flex; align-items: center; gap: calc(26 * var(--px)); }
.s3d-qr { width: calc(190 * var(--px)); height: calc(190 * var(--px)); flex-shrink: 0; padding: calc(12 * var(--px)); background: #fff; border-radius: calc(18 * var(--px)); }
.s3d-qr svg, .s3d-qr canvas, .s3d-qr img { width: 100%; height: 100%; display: block; }
.s3d-join b { display: block; font: 800 calc(44 * var(--px)) / 1 Rubik, var(--font); color: var(--ycs-text); font-variant-numeric: tabular-nums; }
.s3d-join span { display: block; font: 700 calc(16 * var(--px)) / 1.3 Nunito, var(--font); color: var(--ycs-dim); }
.s3d-join small { display: block; margin-top: calc(10 * var(--px)); font: 600 calc(15 * var(--px)) 'IBM Plex Mono', monospace; color: var(--ycs-accent); overflow-wrap: anywhere; }
.s3d:has(> .wst-head) .s3d-head { top: calc(178 * var(--px)); }
.ag-lobby.s3d, .lb-stage.s3d { position: relative; height: 100vh; overflow: hidden; }
.s3d-clock { font: 800 calc(110 * var(--px)) / 1 Rubik, var(--font); color: var(--ycs-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------------- Guest phones, controllers and staff pages wear the activity's look ----------------
   main.js wearPhoneLook sets a few colours (--pl-bg, --pl-bg2, --pl-card, --pl-text, --pl-accent, --pl-radius,
   the fonts) from the screen theme or the event's custom design; every other colour is built from them here,
   so any palette works. !important: the look wins over an activity's own accent and mode. Classic clean keeps
   the activity's own colours (no look). */
html[data-phone-look], html[data-phone-look] [data-theme-mode], html[data-phone-look] [style*="--accent"] {
  --bg: var(--pl-bg) !important;
  --surface: var(--pl-card) !important;
  --surface-2: color-mix(in srgb, var(--pl-card) 90%, var(--pl-text)) !important;
  --surface-3: color-mix(in srgb, var(--pl-card) 82%, var(--pl-text)) !important;
  --border: color-mix(in srgb, var(--pl-card) 78%, var(--pl-accent)) !important;
  --border-strong: color-mix(in srgb, var(--pl-card) 55%, var(--pl-accent)) !important;
  --text: var(--pl-text) !important;
  --text-2: color-mix(in srgb, var(--pl-text) 78%, var(--pl-bg)) !important;
  --muted: color-mix(in srgb, var(--pl-text) 58%, var(--pl-bg)) !important;
  --accent: var(--pl-accent) !important;
  --on-accent: var(--pl-on-accent) !important;
  --dot: color-mix(in srgb, var(--pl-text) 13%, transparent) !important;
  --grid: color-mix(in srgb, var(--pl-text) 6%, transparent) !important;
  --radius-sm: calc(var(--pl-radius) * .6) !important;
  --radius: var(--pl-radius) !important;
  --radius-lg: calc(var(--pl-radius) * 1.4) !important;
  --font-display: var(--pl-font-head, "Rubik", var(--lang-sans), system-ui, sans-serif) !important;
  --font: var(--pl-font-body, var(--lang-sans), system-ui, sans-serif) !important;
}
html[data-phone-scheme="dark"], html[data-phone-scheme="dark"] [data-theme-mode], html[data-phone-scheme="dark"] [style*="--accent"] {
  --danger: #ff7a7f !important; --success: #4fd1a1 !important; --warning: #f2b544 !important; color-scheme: dark;
}
html[data-phone-scheme="light"], html[data-phone-scheme="light"] [data-theme-mode], html[data-phone-scheme="light"] [style*="--accent"] {
  --danger: #d23a2e !important; --success: #12825c !important; --warning: #a86800 !important; color-scheme: light;
}
html[data-phone-look] body {
  background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--pl-accent) 16%, var(--pl-bg2)) 0%, var(--pl-bg) 62%) fixed, var(--pl-bg);
  color: var(--text);
}
/* Tech keeps its faint blueprint grid behind the page. */
html[data-phone-look="tech"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(color-mix(in srgb, var(--pl-accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pl-accent) 7%, transparent) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(180deg, transparent, #000 40%, #000); }
html[data-phone-look] #app { position: relative; z-index: 1; }
/* The game pages on guests' phones (quiz, bingo, stamp rally, card deck: .qp) in the screen theme. */
html[data-phone-look] .qp { background: transparent; color: var(--text); }
html[data-phone-look] .qp-head, html[data-phone-look] .ck-play .qp-head { color: var(--text); }
html[data-phone-look] .qp-foot { background: var(--surface-2); color: var(--text); border-top: 1px solid var(--border); }
html[data-phone-look] .qp-card, html[data-phone-look] .ck-play .qp-card { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 24px 48px -28px rgba(0, 0, 0, .6); }
html[data-phone-look] .qp-big-ico { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
html[data-phone-look] .qp-pill { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-text); }
html[data-phone-look] .qp-q > .qp-meta, html[data-phone-look] .qp-standing { color: var(--text-2); }
html[data-phone-look] .qp-tile { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
html[data-phone-look] .qp-tile.on { background: color-mix(in srgb, var(--ink) 20%, var(--surface)); }
html[data-phone-look] .qp-result.good .qp-big-ico { background: color-mix(in srgb, var(--success) 18%, var(--surface)); color: var(--success); }
html[data-phone-look] .qp-result.bad .qp-big-ico { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); color: var(--danger); }
html[data-phone-look] .qp-points { color: var(--success); }
html[data-phone-look] .ck-play { background: transparent; color: var(--text); }
html[data-phone-look] .bp-tile, html[data-phone-look] .bp-card, html[data-phone-look] .bp-note { background: var(--surface); color: var(--text); }
html[data-phone-look] .bp-pattern { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html[data-phone-look] .bp-cell { border-color: var(--border); background: var(--surface-2); color: var(--text); }
html[data-phone-look] .bp-cell.free { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
html[data-phone-look] .bp-cell.free.on { color: var(--accent-text); }
html[data-phone-look] .bp-note.pending { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); }
html[data-phone-look] .bp-note.good { background: color-mix(in srgb, var(--success) 18%, var(--surface)); color: var(--text); }
html[data-phone-look] .bp-note.bad { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); color: var(--text); }
/* The coloured band at the top of a guest page: the theme's own surface with an accent glow and line, not a block of accent. */
html[data-phone-look] .vote-band { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--surface); color: var(--text); border-bottom: 1px solid var(--accent-line); }
html[data-phone-look] .vote-band .kicker { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent-line); opacity: 1; }
html[data-phone-look] .vote-band p { color: var(--text-2); opacity: 1; }
/* Pricing: why the price follows the guest list, and why not build it yourself */
.why-us { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; padding: 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.why-us-head, .why-us-diy { display: grid; gap: 10px; align-content: start; }
.why-us-head h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; }
.why-us-diy h3 { margin: 0; font-size: 20px; }
.why-us p { margin: 0; color: var(--text-2); }
.why-us-diy { padding: 18px 20px; border-radius: var(--radius); background: var(--surface-2); border-left: 4px solid var(--accent); }
.why-us-list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.why-us-list li { display: flex; gap: 12px; align-items: flex-start; }
.why-us-list b { display: block; margin-bottom: 2px; }
.why-us-list p { font-size: 14px; }
.why-us-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 820px) { .why-us { grid-template-columns: 1fr; padding: 20px 16px; } .why-us-list { grid-template-columns: 1fr; } }
/* Guide steps: whose view the picture is, beside the step number. */
.gz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gz-head .gz-n { margin-bottom: 0; }
.gz-view { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.gz-view.v-phone { background: color-mix(in srgb, #2f6fe8 10%, var(--surface)); color: #2456b8; border-color: color-mix(in srgb, #2f6fe8 30%, transparent); }
.gz-view.v-controller, .gz-view.v-staff { background: color-mix(in srgb, #bf8400 12%, var(--surface)); color: #8a5f00; border-color: color-mix(in srgb, #bf8400 30%, transparent); }
.gz-view.v-screen { background: color-mix(in srgb, #0aa5b8 12%, var(--surface)); color: #07798a; border-color: color-mix(in srgb, #0aa5b8 30%, transparent); }
/* Add-on cards: icon, text and button in the same place on every card (top-aligned; the button at the bottom). */
.addon-card { align-items: flex-start; align-content: flex-start; }
.addon-cards:has(> .addon-card:nth-child(2)) .addon-card { flex-direction: column; flex-wrap: nowrap; height: 100%; }
.addon-cards:has(> .addon-card:nth-child(2)) .addon-card > .grow { flex: 1; min-width: 0; }
/* Prize pictures: every one the same frame, whatever size was uploaded (cropped to fill). */
.pc-pic img { object-fit: cover; }
.pc-pic { overflow: hidden; }
.pc-pic > img:not(.pc-pic2) { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A small count beside a tab's name (like the Hot tag on pricing, calmer colour). */
.count-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #2f6fe8 14%, var(--surface)); color: #2456b8; font-size: 11px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; vertical-align: middle; }
.gz-view.v-guest { background: color-mix(in srgb, #2f6fe8 10%, var(--surface)); color: #2456b8; border-color: color-mix(in srgb, #2f6fe8 30%, transparent); }
/* Controller steps: a Phone / Computer switch above the picture. */
.gz-ctl-wrap { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.gz-ctl-tabs { justify-self: center; }
.gz-ctl-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.gz-ctl { width: 100%; display: grid; justify-items: center; }
/* While data loads: a see-through mask over the page takes every click (lib.js busy). */
.busy-mask { position: fixed; inset: 0; z-index: 9999; background: color-mix(in srgb, var(--bg, #f6f5f1) 45%, transparent); backdrop-filter: saturate(.8); cursor: progress; animation: busy-in .2s ease-out; }
@keyframes busy-in { from { opacity: 0; } to { opacity: 1; } }
html.is-busy #app { pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .busy-mask { animation: none; } }
/* Anything that cannot be used (an ended event, a locked setting): the no-entry cursor, everywhere. */
button:disabled, button[aria-disabled="true"], input:disabled, select:disabled, textarea:disabled, [role="radio"][aria-disabled="true"], fieldset:disabled *, .segmented button:disabled, label:has(> input:disabled) { cursor: not-allowed !important; }
.segmented button:disabled:not([aria-pressed="true"]) { opacity: .55; }
.ended-banner { margin-bottom: 16px; }
/* Controls of an ended event (ended-lock.js): they look unavailable and show the no-entry cursor. */
.ended-locked { cursor: not-allowed !important; opacity: .55; }
.ended-locked * { cursor: not-allowed !important; }
input.ended-locked, textarea.ended-locked, select.ended-locked { opacity: .75; background: var(--surface-2); }
/* Winners screen as a carousel: one prize per view, up to 35 names in a grid, a new view every 6 s. */
.wscreen .ws-list { columns: auto; display: grid; gap: clamp(12px, 1.6vh, 20px); align-content: start; }
.ws-view { border-radius: 24px; padding: clamp(18px, 2.2vh, 30px) clamp(20px, 2vw, 34px); color: var(--card-ink, var(--s-ink));
  background: linear-gradient(180deg, color-mix(in srgb, var(--box-color, #fff) 12%, transparent), color-mix(in srgb, var(--box-color, #fff) 5%, transparent)); border: 1.5px solid rgba(255,255,255,.14); }
.ws-view[data-box="solid"] { background: var(--box-color, color-mix(in srgb, var(--accent) 22%, #0b0c1c)); }
.ws-view[data-box="outline"] { background: none; border: 2px solid var(--box-color, color-mix(in srgb, var(--gold) 70%, transparent)); }
.ws-view[data-box="none"] { background: none; border-color: transparent; }
.ws-view.in { animation: wsView .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes wsView { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ws-view-head { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 24px); margin-bottom: clamp(14px, 2vh, 24px); }
.ws-view-pic { width: clamp(64px, 6vw, 108px); height: clamp(64px, 6vw, 108px); border-radius: 18px; object-fit: cover; flex-shrink: 0; }
.ws-view-pic.none { display: grid; place-items: center; background: color-mix(in srgb, currentColor 8%, transparent); }
.ws-view-title { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ws-view-title b { font-size: clamp(24px, 2.4vw, 44px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.ws-view-title span { font-size: clamp(14px, 1.1vw, 19px); font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.ws-view-part { flex-shrink: 0; padding: 6px 14px; border-radius: 999px; font: 700 clamp(13px, 1vw, 17px) var(--font-mono); background: color-mix(in srgb, currentColor 10%, transparent); }
/* Always 5 columns of 20%, also with one winner (founder, 24 Oct 2026). */
.ws-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; gap: clamp(6px, .9vh, 10px) clamp(8px, .8vw, 14px); }
.ws-grid li { display: grid; gap: 2px; padding: clamp(6px, .9vh, 10px) clamp(10px, .8vw, 14px); border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); min-width: 0; }
.ws-grid li b { font-size: clamp(17px, 1.55vw, 30px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-grid li span { font-family: var(--font-mono); font-size: clamp(13px, 1.1vw, 20px); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-grid li.new { animation: wsNew 1.6s ease-out; }
.ws-dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ws-dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s, width .3s; }
.ws-dots i.on { opacity: .9; width: 22px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .ws-view.in { animation: none; } }
/* Lucky draw: a bulk draw's winners over the stage, as a carousel (stage.js bulkCarousel). */
.bulk-layer { position: absolute; inset: clamp(110px, 15vh, 160px) clamp(20px, 4vw, 70px) clamp(20px, 4vh, 50px); z-index: 5; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(12px, 2vh, 22px); padding: clamp(18px, 2.4vh, 32px) clamp(20px, 2.2vw, 36px); border-radius: 26px;
  background: color-mix(in srgb, var(--ycs-card, #0b0f1c) 86%, transparent); border: 1.5px solid color-mix(in srgb, var(--ycs-accent, var(--accent)) 40%, transparent); color: var(--ycs-card-text, var(--s-ink, #fff)); backdrop-filter: blur(10px); animation: wsView .6s cubic-bezier(.2, .8, .2, 1); }
.bulk-kick { font: 700 clamp(12px, .9vw, 16px) var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ycs-accent, var(--accent)); opacity: 1 !important; }
.bulk-body { min-height: 0; overflow: hidden; }
.ws-grid.in { animation: wsView .5s ease-out; }
.stage.bulk-on .stage-box, .stage.bulk-on .s3d-head { visibility: hidden; }
.s3d .s3d-panel { padding-top: calc(230 * var(--px)); }
/* Agenda on a guest's phone: their own lucky draw result (YayPass). */
.ag-results { display: grid; gap: 8px; margin-top: 10px; }
.ag-result { border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.ag-result.won { background: color-mix(in srgb, #ffc21a 16%, var(--surface)); border: 1.5px solid color-mix(in srgb, #ffc21a 60%, transparent); }
.ag-result.lost { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); color: var(--text-2); }
.ag-result.lost b { display: block; color: var(--text); }
.ag-result.lost span { font-size: 13.5px; }
.ag-result-kick { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, #b07f00 80%, var(--text)); }
.ag-result-prize { display: flex; align-items: center; gap: 12px; }
.ag-result-prize img, .ag-result-noimg { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); }
.ag-result-prize b { font-size: 17px; line-height: 1.25; }
.ag-result-note { font-size: 12.5px; color: var(--text-2); }
/* "Pick your event": a carousel of the big screens of the services it uses. */
.ek-pic { position: sticky; top: 90px; display: grid; gap: 12px; }
.ek-frame { aspect-ratio: 16 / 9; overflow: hidden; }
.ek-frame img { width: 100%; height: 100%; object-fit: cover; display: block; animation: ekIn .5s ease-out; }
@keyframes ekIn { from { opacity: 0; } to { opacity: 1; } }
.ek-caption { display: flex; align-items: center; gap: 10px; justify-content: center; }
.ek-caption b { font-size: 16px; }
.ek-cap-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, #0aa5b8 12%, var(--surface)); color: #07798a; }
.ek-dots { display: flex; justify-content: center; gap: 8px; }
.ek-dots button { all: unset; cursor: pointer; width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); transition: width .25s, background .25s; }
.ek-dots button.on { width: 24px; background: var(--accent); }
.ek-dots button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }
.ek-tools li.on b { color: var(--accent-text); }
@media (max-width: 860px) { .ek-pic { position: static; } }
@media (prefers-reduced-motion: reduce) { .ek-frame img { animation: none; } }
/* Pack price: the saving as one tag, the price per event beside it (wraps under it as a whole, never inside the tag). */
.promo-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.promo-save-row .promo-save { margin-top: 0; flex-wrap: nowrap; white-space: nowrap; }
.promo-per { font-size: 13.5px; font-weight: 600; color: var(--text-2, var(--muted)); white-space: nowrap; }
/* Pricing tabs that turn by themselves: a line under the active tab fills until it switches. */
.pricing-tabs button { position: relative; }
.tab-progress { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; overflow: hidden; background: transparent; pointer-events: none; }
.pricing-tabs [aria-pressed="true"] .tab-progress { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tab-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .1s linear; }
/* Long words in other languages (founder, 23 Oct 2026): nothing spills out of its box. */
.lp-hero h1 .mark { padding-right: .12em; }
.ek-tools li { grid-template-columns: minmax(78px, max-content) minmax(0, 1fr); }
.ek-n { max-width: 120px; overflow-wrap: anywhere; }
.strip-item .grow { min-width: 0; }
.strip-item h4, .spec h4 { overflow-wrap: anywhere; }
@media (max-width: 520px) { .strip-item { flex-wrap: wrap; } .strip-item .grow { flex-basis: 100%; } }
h1, h2, h3, h4 { overflow-wrap: break-word; }
/* Activity tabs in their two groups: Stage engagement, then Audience voice. */
.ev-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 28px; border-bottom: 1px solid var(--border); }
.ev-tab-group { display: grid; gap: 2px; min-width: 0; }
.ev-tab-group + .ev-tab-group { padding-left: 24px; border-left: 1px solid var(--border); }
.ev-tab-group-name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text); padding: 10px 0 4px 12px; }
.ev-tab-row { display: flex; flex-wrap: wrap; gap: 2px; }
.ev-tabs .ev-tab-row button { border-bottom-width: 2px; margin-bottom: -1px; }
@media (max-width: 760px) { .ev-tab-group + .ev-tab-group { padding-left: 0; border-left: 0; } }
.ev-tabs { display: grid; gap: 6px; }
.ev-tab-group + .ev-tab-group { padding-left: 0; border-left: 0; }

/* Screen tabs: settings the 3D themes ignore (screen-look.js sets data-look-3d while the look is 3D) */
[data-look-3d] .look-2d-only { display: none !important; }
:root:not([data-look-3d]) .look-3d-setting { display: none !important; }
.look-3d-only { display: none; }
[data-look-3d] .look-3d-only { display: flex; }
.bst-3d-note { margin: 0; display: flex; gap: 6px; align-items: flex-start; color: var(--muted); }

/* Each activity's title size (Screen tab, applyStageDesign sets --title-scale; Medium is a bit bigger than before) */
.stage-top h1 { font-size: calc(clamp(20px, 2vw, 32px) * var(--title-scale, 1.15)); }
.stage-top .sub { font-size: calc(15px * var(--title-scale, 1.15)); }
.cstage .stage-top h1 { font-size: calc(clamp(24px, 2.6vw, 42px) * var(--title-scale, 1.15)); }
.pk-stage .stage-top .sub { font-size: calc(clamp(14px, 1.15vw, 22px) * var(--title-scale, 1.15)); }
.wst-headline { font-size: calc(clamp(26px, 3.4vw + 1vh, 76px) * var(--title-scale, 1.15)); }
.wst-sub { font-size: calc(clamp(15px, 1.2vw + .6vh, 30px) * var(--title-scale, 1.15)); }
.ag-lobby-top h1 { font-size: calc(clamp(32px, 3.6vw, 76px) * var(--title-scale, 1.15)); }

/* =========================================================================
   Phones: one button layout everywhere (page heads of every activity, modal actions, toolbars
   marked .m-actions). The red (main) button takes the full width, on top; the others go two
   per row, and an odd one out takes the full width: 1 → 100%, 2 → 50 / 50, 3 → 50 / 50 + 100%.
   ========================================================================= */
@media (max-width: 640px) {
  .page-head, dialog.modal .modal-actions, .m-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px; align-items: stretch; }
  .page-head > [class*="-actions"] { display: contents !important; }
  .page-head > :not(.btn, .more-menu, [class*="-actions"]), .page-head > [class*="-actions"] > :not(.btn, .more-menu),
  .m-actions > :not(.btn, .more-menu) { grid-column: 1 / -1; }
  :is(.page-head, .page-head > [class*="-actions"], dialog.modal .modal-actions, .m-actions) > :is(.btn, .more-menu) { min-width: 0; width: 100%; margin: 0; flex: none; }
  :is(.page-head, .page-head > [class*="-actions"], dialog.modal .modal-actions, .m-actions) > .btn,
  :is(.page-head, .page-head > [class*="-actions"], dialog.modal .modal-actions, .m-actions) > .more-menu > .btn { width: 100%; justify-content: center; height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :is(.page-head, .page-head > [class*="-actions"], dialog.modal .modal-actions, .m-actions) > :is(.btn.primary, .btn.danger.solid) { grid-column: 1 / -1; order: -1; }
  :is(.page-head, .page-head > [class*="-actions"], dialog.modal .modal-actions, .m-actions) > :is(.btn, .more-menu):not(.primary, .danger.solid, [hidden]):nth-last-child(1 of :is(.btn, .more-menu):not(.primary, .danger.solid, [hidden])):nth-child(odd of :is(.btn, .more-menu):not(.primary, .danger.solid, [hidden])) { grid-column: 1 / -1; }
  .more-menu .more-pop { min-width: max(100%, 220px); max-width: calc(100vw - 32px); }
}

/* Drop-down lists (select-pop.js): directly under the box, the box's width, in the app's look. */
.sel-pop { position: fixed; z-index: 10000; overflow-y: auto; overscroll-behavior: contain; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 10px); box-shadow: var(--shadow-lg); animation: sel-in .12s ease-out; }
.sel-pop .sel-opt { all: unset; box-sizing: border-box; display: block; padding: 11px 12px; border-radius: 8px; font-size: 15px; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.sel-pop .sel-opt:hover, .sel-pop .sel-opt:focus-visible { background: var(--surface-2); }
.sel-pop .sel-opt.on { background: var(--accent-soft, rgba(217, 58, 43, .12)); color: var(--accent-text, var(--accent)); font-weight: 600; }
.sel-pop .sel-opt:disabled { opacity: .45; cursor: default; }
.sel-pop .sel-group { padding: 8px 12px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@keyframes sel-in { from { opacity: 0; transform: translateY(-4px); } }

/* Accordions (accordion.js): a title bar per part; one open at a time in its group. */
.acc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: clip; }
.acc + .acc { margin-top: 10px; }
.acc-head { all: unset; box-sizing: border-box; width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; color: var(--text); font-weight: 700; font-size: 16px; }
.acc-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.acc-title { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
.acc-meta { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.acc-chev { flex: none; color: var(--muted); transition: transform .2s ease; }
.acc.open .acc-chev { transform: rotate(180deg); color: var(--accent-text, var(--accent)); }
.acc-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.acc-body[hidden] { display: none; }
/* A card inside an accordion is the accordion itself: no second frame around it. */
.acc-body > .card, .acc-body > section.card, .acc-body > .set2 { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; }
.acc-body > .set2 > .set2-head h3 { display: none; }
.acc-body > .set2 > .set2-head:not(:has(p, .btn)) { display: none; }
.acc-body > .set2 :is(.set2-head, .set2-row, .set2-pass, .set2-list, .set2-invite) { padding-left: 0; padding-right: 0; }
.acc-body > .set2 > .set2-head { padding-top: 0; }
.acc-body > .set2 > .set2-head p { margin-top: 0; }
.acc-body > .set2 > .set2-invite { padding-bottom: 0; }
@media (max-width: 640px) {
  .acc-head { padding: 14px 16px; }
  .acc-body { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .acc-chev { transition: none; } }
/* Computers: a part that fits the screen is a plain open section, without the arrow (accordion.js). */
.acc.flat > .acc-head { cursor: default; }
.acc.flat > .acc-head .acc-chev { display: none; }
/* The helpers' cards inside their accordions: the accordion's title replaces the card's own. */
.acc-body > .card > h3:first-child, .acc-body > .card > .card-head:first-child { display: none; }
.acc-body > .card .card-pad-x { padding-left: 0; padding-right: 0; }

/* Event Team: on a phone each person is a tidy block (name and email, their switches, then the
   status and Send again under them), never squeezed into one row with the button cut off. */
@media (max-width: 640px) {
  .team-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "av main x" ". tag tag" ". act act"; align-items: start; column-gap: 10px; row-gap: 8px; }
  .team-row > .team-avatar { grid-area: av; }
  .team-row > .grow { grid-area: main; }
  .team-row > .grow b, .team-row > .grow .muted { overflow-wrap: anywhere; }
  .team-row > .badge { grid-area: tag; justify-self: start; }
  .team-row > .btn:not(.icon) { grid-area: act; width: 100%; justify-content: center; height: 44px; }
  .team-row > .btn.icon { grid-area: x; }
  .set2-invite { flex-direction: column; }
  .set2-invite .btn { width: 100%; justify-content: center; height: 44px; }
}

/* Walk-in preview on a phone: the phone is the frame. No device border, no grey surround and no
   inner side margins, so the form shows as wide as guests see it on their own 360 px phones. */
@media (max-width: 640px) {
  .wf-preview.card-pad { padding-left: 0; padding-right: 0; padding-bottom: 0; overflow: hidden; }
  .wf-preview > .wf-card-head, .wf-preview > .hint { padding-left: 16px; padding-right: 16px; }
  .wf-preview > .hint { padding-bottom: 16px; }
  .wf-device-wrap { padding: 0; background: none; border-radius: 0; }
  .wf-device.phone { max-width: none; height: 640px; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; }
  .wf-device.phone .join-band { padding: 24px 12px 56px; }
  .wf-device.phone .join-card { width: calc(100% - 16px); }
  .wf-device.phone .card-pad { padding: 16px 14px; }
}
/* Guests' sign-up and verify cards on small phones: nearly edge to edge, so the fields are wide. */
@media (max-width: 420px) {
  .join-card { width: calc(100% - 16px); }
  .join-card.card-pad, .join-card .card-pad { padding: 18px 14px; }
}
/* A row of buttons (phones: the shared button layout above). */
.m-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Agenda: room between the buttons and the accordions under them. */
.ag-admin .ag-admin-tools { margin: 4px 0 14px; gap: 8px; }
.ag-folds { display: flex; flex-direction: column; }
.ag-folds .acc-body .ag-access { margin: 0; }
/* Customize Design: what the add-on covers, one line each. */
.ycs-includes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ycs-includes li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.ycs-includes li svg { flex: none; margin-top: 2px; color: var(--success, #1a9e6a); }
.ycs-includes li.muted svg { color: var(--muted); }
/* Inside an accordion the accordion's title names the part: the card's own title row goes. */
.acc-body > .card > .wf-card-head > h3, .acc-body > .card > .ev-block-head > .ev-block-ico, .acc-body > .card > .ev-block-head > h3 { display: none; }
.acc-body > .card > .ev-block-head:not(:has(> :not(.ev-block-ico, h3))) { display: none; }
.wf-folds { display: flex; flex-direction: column; margin-top: 12px; }

/* Category filters: chips on a computer, one drop-down on a phone (never rows of wrapped chips). */
.cg-filter-pick { display: none; margin: 0; }
@media (max-width: 640px) {
  .cg-filters:not([hidden]) { display: block; }
  .cg-filters > .chip { display: none; }
  .cg-filter-pick { display: block; }
  .cg-filter-pick .select { width: 100%; }
}

/* ---- Phone polish, round 2 (founder, 26 Oct 2026) ---- */
/* Nothing in an area may push the page wider than the phone. */
.ev-main { grid-template-columns: minmax(0, 1fr); }
.ev-main > *, .acc, .acc-body, .acc-body > *, .wf-folds > *, .wf-builder > * { min-width: 0; max-width: 100%; }
/* Page heads: the title first, then the buttons (the red one leads the buttons, never the title). */
@media (max-width: 640px) {
  .page-head > .grow, .page-head > [class*="-actions"] > .grow { order: -2; }
}
/* Back: a clear button, not a small red word. */
.page-head .grow > a[data-link].small:first-child, .page-head > a[data-link].small:first-child {
  display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; margin-bottom: 6px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text) !important;
  font-size: 14px; font-weight: 700; text-decoration: none !important; }
.page-head .grow > a[data-link].small:first-child svg, .page-head > a[data-link].small:first-child svg { width: 16px; height: 16px; color: var(--accent); }
.page-head .grow > a[data-link].small:first-child:hover { border-color: var(--accent); }
/* "Things wait for your approval": a see-through glass pill, so the page under it still shows. */
.pb-pill { background: color-mix(in srgb, var(--accent) 62%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .5); }
/* Your passes: the title and Plan & passes on one line, the buy button under them, full width. */
@media (max-width: 640px) {
  .wallet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .wallet-head .wallet-actions { display: contents; }
  .wallet-head .wallet-link { justify-self: end; }
  .wallet-head .wallet-actions .btn { grid-column: 1 / -1; width: 100%; justify-content: center; height: 44px; }
}
/* An area's heading on a phone: title and line first, each button under it, full width. */
@media (max-width: 640px) {
  .ev-area-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ev-area-head > .ev-area-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ev-area-head .btn { width: 100%; height: 44px; justify-content: center; }
}
/* Activity tabs on a phone: two equal tiles a row (icon, name, count), the group name above. */
@media (max-width: 640px) {
  .ev-tabs { gap: 14px; }
  .ev-tab-group-name { padding: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: .01em; color: var(--muted); }
  .ev-tab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ev-tabs .ev-tab-row button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; }
  .ev-tabs .ev-tab-row button .ev-count { margin-left: auto; }
  .ev-tabs .ev-tab-row button[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-text, var(--accent)); }
}
/* Automatic accordions on organiser cards: every card on phones, cards taller than the screen on computers (accordion.js watchFolds). */
@media all {
  .afold > .afold-head { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .afold > .afold-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
  .afold > .afold-head > :is(h2, h3) { flex: 1 1 auto; min-width: 0; }
  .afold-chev { flex: none; margin-left: auto; color: var(--muted); transition: transform .2s ease; }
  .afold.open .afold-chev { transform: rotate(180deg); color: var(--accent-text, var(--accent)); }
  .afold:not(.open) > :not(.afold-head) { display: none !important; }
  .afold:not(.open) > .afold-head { margin-bottom: 0 !important; }
  .afold:not(.open) > .afold-head > :not(h2, h3, .grow, .afold-chev) { display: none; }
  .afold:not(.open) > .afold-head .grow > :not(h2, h3) { display: none; }
  .afold.card:not(.card-pad):not(.open) > .afold-head { padding-top: 16px; padding-bottom: 16px; }
  .afold + .afold { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .afold-chev { transition: none; } }
/* Approvals: on every screen a bell with its count in the top bar, left of the menu or profile
   button (pending-bar.js sets --pb-top / --pb-right), never a pill over the page. */
html.pb-on .topbar .nav > .pm, html.pb-on .topbar .nav .menu-btn { margin-left: 44px; }
@media all {
  .pending-bar { top: var(--pb-top, 9px); left: auto; right: var(--pb-right, 64px); transform: none; align-items: flex-end; z-index: 40; max-width: calc(100vw - 24px); }
  .pb-pill { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; background: transparent; border: 0; box-shadow: none; color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pb-pill .pb-text, .pb-pill .pb-chev, .pb-pill .pb-dot { display: none; }
  .pb-pill svg { width: 22px; height: 22px; }
  .pb-count { display: grid; place-items: center; position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; border: 2px solid var(--surface); }
  .pb-list { width: min(360px, calc(100vw - 24px)); margin-right: calc(12px - var(--pb-right, 64px)); }
}
/* Phone list cards: a row with three or more action buttons puts them on their own line under the
   name, so the name keeps the full width (never squeezed into one letter a line). */
@media (max-width: 640px) {
  .dt table.data.dt-stack td.main { min-width: 60%; }
  .dt table.data.dt-stack td.act:has(> :nth-child(3)), .dt table.data.dt-stack td.act:has(> * > :nth-child(3)) { flex: 1 1 100%; order: -1; justify-content: flex-start; padding: 2px 0 8px; margin-top: 2px; border-top: 1px solid var(--border); }
  .dt table.data.dt-stack td.act:has(> * > :nth-child(3)) > * { width: 100%; display: flex; justify-content: space-between; }
}
/* Sub-tabs on a phone (guest list and others): every tab visible, two equal tiles a row, readable
   size, never a strip that runs off the screen. */
@media (max-width: 640px) {
  .sub-tabs, .gl-page .sub-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; overflow: visible; }
  .sub-tabs:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-tabs button, .gl-page .sub-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 10px; font-size: 14.5px; font-weight: 700; line-height: 1.25; white-space: normal; text-align: center; color: var(--text-2, var(--muted)); }
  .sub-tabs button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sub-tabs button[aria-selected="true"] { color: var(--accent-text, var(--accent)); box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--surface); }
}
.gl-used-table td { vertical-align: middle; }
.gl-used-table td b { overflow-wrap: anywhere; }
@media (max-width: 640px) { .gl-used-table th, .gl-used-table td { padding: 10px 8px; } .gl-used-table .btn { white-space: nowrap; } }
/* Settings: a thin line between one setting and the next, so each reads as its own part. */
.setting + .setting { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 2px; }
/* Phones: a setting's name and line first, its choice under it at full width, choices equal. */
@media (max-width: 640px) {
  .setting:has(> .segmented) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
  .setting > .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .setting > .segmented:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setting > .segmented > button { justify-content: center; text-align: center; min-height: 42px; white-space: nowrap; }
}
/* Phones: an accordion's title row keeps its title and arrow on one line; a search box, buttons or
   tags in that row go under it, full width. */
@media all {
  .afold > .afold-head { flex-wrap: wrap; row-gap: 10px; }
  .afold > .afold-head > :is(h2, h3, .grow) { order: 0; flex: 1 1 0; }
  .afold > .afold-head > .afold-chev { order: 1; }
  .afold > .afold-head > :not(h2, h3, .grow, .afold-chev) { order: 2; flex: 1 1 100%; max-width: 100%; }
  .afold > .afold-head > .btn { justify-content: center; height: 44px; }
  .afold > .afold-head > .badge { flex: 0 1 auto; }
}
/* The Guide button (page-guide.js): above the live chat button, on organisers' pages. */
.pg-guide { position: fixed; z-index: 40; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px) + var(--ypc-lift, 0px));
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -10px rgba(13, 15, 34, .45); }
.pg-guide svg { color: var(--accent); }
.pg-guide:hover { border-color: var(--accent); }
.pg-guide:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
html.ypc-off .pg-guide, body.touring .pg-guide { display: none; }
@media (max-width: 640px) { .pg-guide { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px) + var(--ypc-lift, 0px)); } }
@media print { .pg-guide { display: none !important; } }

/* Plans: "How do you want to pay?" — one clear row of equal choices. */
.pricing-picker { display: grid; gap: 10px; }
.pricing-picker .pricing-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; width: 100%; max-width: 560px; }
.pricing-picker .pricing-tabs button { justify-content: center; min-height: 46px; padding: 8px 10px; font-size: 14.5px; font-weight: 700; white-space: nowrap; border-radius: 10px; }
.pricing-picker .pricing-tabs button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pricing-picker .pricing-tabs .hot { font-size: 10px; padding: 1px 6px; }
.tab-progress { display: none !important; }
@media (max-width: 420px) {
  .pricing-picker .pricing-tabs button { font-size: 13.5px; padding: 8px 6px; gap: 4px; flex-direction: column; min-height: 54px; }
  .pricing-picker .pricing-tabs button svg { display: none; }
}

/* 3D carousel (carousel3d.js). Wide screens: the cards side by side as before. */
.c3d:not(.on) .c3d-stage, .c3d:not(.on) .c3d-track { display: contents; }
.c3d:not(.on) .c3d-nav, .c3d:not(.on) .c3d-dots { display: none; }
.c3d.on { display: block !important; }
.c3d.on .c3d-stage { position: relative; isolation: isolate; padding: 18px 0 8px; overflow: hidden; margin: 0 -16px; }
.c3d.on .c3d-track { display: grid; grid-template-areas: "card"; justify-items: center; align-items: stretch; touch-action: pan-y; user-select: none; }
.c3d.on .c3d-track > * { grid-area: card; width: min(82%, 380px); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
.c3d.on.dragging .c3d-track > * { will-change: transform; }
.c3d.on.dragging .c3d-track > * { transition: none; }
.c3d.on .c3d-track > [aria-hidden="true"] { cursor: pointer; box-shadow: none; }
.c3d-nav { position: absolute; top: 50%; z-index: 120; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); border: 1px solid var(--border-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow); }
.c3d-nav.prev { left: 10px; } .c3d-nav.next { right: 10px; }
.c3d-nav:disabled { opacity: 0; pointer-events: none; }
.c3d-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.c3d-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: width .25s ease, background .25s ease; }
.c3d-dots button.on { width: 24px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .c3d.on .c3d-track > * { transition: none; } }
/* Walk-in form builder on a phone: every box and row shrinks to the phone's width (a text box's
   own default width or a row of buttons never pushes the page sideways). */
@media (max-width: 640px) {
  .wf-builder, .wf-builder .acc, .wf-builder .card, .wf-folds { max-width: 100%; min-width: 0; overflow-x: clip; }
  .wf-builder :is(input, select, textarea, .input, .select) { min-width: 0; max-width: 100%; width: 100%; }
  .wf-builder :is(input[type=checkbox], input[type=radio]) { width: auto; }
  .wf-builder :is(.field, .wf-grid > *, .wf-switches > *, .wf-share-main, .wf-row-head > *, li) { min-width: 0; }
  .wf-options-edit li > :is(.input, input) { flex: 1 1 0; }
  .wf-switches { gap: 12px; }
  .wf-toggle { flex: 1 1 100%; }
  .wf-toggle .hint { margin-left: 0; }
  .wf-share-row { flex-direction: column; align-items: stretch; }

  .wf-head { display: grid; grid-template-columns: minmax(0, 1fr); }
  .wf-head .wf-save { margin-left: 0; width: 100%; }
  .wf-head .wf-save .btn { flex: 1 1 auto; justify-content: center; height: 44px; }
}
/* Phones: the page itself never scrolls sideways. */
@media (max-width: 640px) { html, body { overflow-x: clip; } }
/* Ultra: every add-on listed with what it does. */
.all-addons { padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.all-addons-title { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 8px; color: var(--accent-text, var(--accent)); }
.all-addons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.all-addons li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--text-2, var(--text)); }
.all-addons li svg { flex: none; margin-top: 2px; color: var(--accent); }
.price-col .plan-access { display: grid; gap: 8px; }
.price-col .plan-access ul, .strip-item .plan-access ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-access li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.plan-access li svg { flex: none; margin-top: 2px; }
.plan-access .plan-can li svg { color: var(--good, #1f8a4c); }
.plan-access .plan-cannot li { color: var(--muted); }
.plan-access .plan-cannot li svg { color: var(--muted); }
.plan-access .plan-cannot .plan-out { color: var(--text); font-weight: 700; }
.strip-item .plan-access { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 20px; margin-top: 10px; }
.all-addons li b { color: var(--text); }
.addon-incl { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--success, #1a9e6a); }
/* Expos & conventions card. */
.expo-points { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.expo-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--text-2, var(--text)); }
.expo-points li svg { flex: none; margin-top: 2px; color: var(--accent); }
@media (max-width: 640px) { .expo-points { grid-template-columns: minmax(0, 1fr); } .enterprise.expo { flex-direction: column; align-items: stretch; } }

/* Event bundles (bundles.js): "What's your event?" on the pricing page and the kit card on the event page. */
.bundles { display: grid; gap: 14px; }
.bundles-head h2 { font-size: clamp(24px, 3vw, 34px); margin: 4px 0 6px; }
.bundles-head p { margin: 0; max-width: 640px; }
.bundle-groups { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; max-width: 560px; }
.bundle-groups button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.bundle-groups button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.bundle-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--accent-text, var(--accent)); margin-bottom: 8px; }
.bundle-inside { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.bundle-inside ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.bundle-inside li { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.bundle-inside li svg { flex: none; margin-top: 2px; color: var(--accent); }
.bundle-sub { font-size: 12.5px; color: var(--muted); text-transform: none; }
.bundles-or { margin: 4px 0 0; }
@media (max-width: 420px) { .bundle-groups button { font-size: 13px; padding: 6px 4px; } .bundle-groups button svg { display: none; } }
.kit-card { display: grid; gap: 14px; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.kit-head { display: flex; gap: 12px; align-items: flex-start; }
.kit-head .bundle-ico { margin: 0; flex: none; }
.kit-head h3 { margin: 0 0 4px; }
.kit-head p { margin: 0; }
.kit-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.kit-acts li { display: flex; gap: 7px; align-items: flex-start; font-size: 14px; }
.kit-acts li svg { flex: none; margin-top: 3px; color: var(--accent); }
@media (max-width: 640px) { .kit-acts { grid-template-columns: minmax(0, 1fr); } }
/* A choice the event's plan does not open yet (free trial animations, 3D below 500 guests). */
.anim-pick.is-locked, .segmented button.is-locked { opacity: .55; cursor: not-allowed; }
.anim-pick.is-locked b svg, .segmented button.is-locked svg { margin-right: 4px; vertical-align: -1px; color: var(--muted); }

/* Big screens: pictures and panels at the left and right are big enough to see from the back of the
   room (founder, 26 Oct 2026). Lucky draw: each prize picture gets a wide column and fills it. */
@media (min-width: 901px) and (orientation: landscape) {
  .stage-arena:not([data-layout="wide"]) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 2fr) minmax(0, 1.35fr); }
  .stage-pic img { width: 100%; max-height: 72vh; object-fit: contain; }
}
.qs-mid { grid-template-columns: minmax(180px, 1.3fr) minmax(0, 2.6fr) minmax(180px, 1.3fr); }
.qs-answered, .qs-stat { transform: scale(1.25); transform-origin: center; }
.pk-stage { --rail: clamp(260px, 21vw, 420px); }
@media (max-height: 820px) { .pk-stage { --rail: clamp(220px, 19vw, 320px); } }
.ck-stage-side, .rs-side { min-width: clamp(240px, 22vw, 420px); }
.ck-stage-side img, .ck-stage-side canvas, .ck-stage-side svg.qr, .rs-side img, .rs-side canvas { width: 100%; height: auto; max-width: 360px; }
.all-addons li span { color: var(--text); font-weight: 600; }
.ycs-remark { margin: 10px 0 0; line-height: 1.45; }
.ycs-remark b { color: var(--text-2); }
.nav .nav-login { background: transparent; }
@media (max-width: 420px) {
  .topbar:not(.signed) .nav .btn.sm { padding-inline: 9px; font-size: 13px; min-height: 34px; }
  .topbar:not(.signed) .nav { gap: 6px; }
}

/* Everything starts below the sticky top bar (founder, 26 Oct 2026): jumps to a part of a page,
   and the parts that stay in view while scrolling, never sit under it. */
:root { --topbar-h: 65px; }
@media (max-width: 600px) { :root { --topbar-h: 59px; } }
html { scroll-padding-top: calc(var(--topbar-h) + 12px); }

/* Phones: every folded card is the same compact row, like the event page's accordions: the title
   on the left, the arrow on the right, 16px above and below (founder, 26 Oct 2026). */
@media all {
  .afold > .afold-head { flex-direction: row !important; flex-wrap: nowrap; justify-content: flex-start !important; text-align: left; box-sizing: border-box; min-height: 56px; margin: 0 !important; }
  .afold.open > .afold-head:has(> :not(h2, h3, .grow, .afold-chev)) { flex-wrap: wrap; }
  .afold > .afold-head :is(h2, h3) { margin: 0 !important; font-size: 16px; line-height: 1.3; justify-content: flex-start; text-align: left; }
  .afold.afold-padded { padding: 0 18px 18px !important; }
  .afold.afold-padded > .afold-head { padding: 14px 0 !important; }
  .afold.afold-padded:not(.open) { padding-bottom: 0 !important; }
  .afold.afold-flush > .afold-head { padding: 14px 18px !important; }
  .afold.open > .afold-head { margin-bottom: 4px !important; }
}

/* Guests' phones: bars pinned to the bottom are solid, not blurred glass. A blur over scrolling
   content is redrawn on every frame and keeps the phone's graphics chip working (heat). */
@media (max-width: 640px) {
  .vote-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .bp-foot { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(14, 16, 40); }
}

/* Phones: a row of action buttons is the full width of its card. */
@media (max-width: 640px) {
  .m-actions { width: 100%; }
  .manage-head .titlerow > .m-actions { flex: 1 1 100%; }
  .rps-row:has(> .rps-row-a.m-actions) { flex-wrap: wrap; }
}
.poll-save { margin-top: 16px; }
@media (max-width: 900px) { .stats > .stat-wide { grid-column: 1 / -1; } }
/* Wheel: "Show on the wheel" choices one under the other on a phone, each the full width. */
@media (max-width: 640px) {
  .wa-display { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .wa-display-opt { border-radius: 12px; padding: 11px 14px; font-size: 14.5px; }
}
/* Wheel type cards: the radio is the card itself (selected = red border); the dot never shows. */
.wk-card > input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }

/* Phones: a folded card's head is a grid: the title on the left, the arrow always at the far right
   of the first line, anything else (a live tag, buttons, a search) on its own line under them. */
@media all {
  .afold > .afold-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 10px; align-items: center; }
  .afold > .afold-head > * { grid-column: 1 / -1; order: 0 !important; }
  .afold > .afold-head > :is(h2, h3, .grow) { grid-column: 1; grid-row: 1; }
  .afold > .afold-head > .afold-chev { grid-column: 2; grid-row: 1; margin: 0; }
  .afold > .afold-head > :is(.ev-block-ico, .sw, .acc-ico) { display: none; }
}

/* Quiz question card on a phone (founder, 26 Oct 2026): number, type and time on one line, points
   under them, move / copy / delete together on the right; the question and answers full width. */
.qz-q-tools { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
  .qz-q-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 92px; gap: 8px; align-items: center; }
  .qz-q-head > .select { width: 100%; }
  .qz-q-head > .qz-points { grid-column: 1 / -1; }
  .qz-q-head > .grow { display: none; }
  .qz-q-head > .qz-q-tools { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 6px; }
  .qz-q-body { flex-direction: column; align-items: stretch; gap: 12px; }
  .qz-q-body > .grow { width: 100%; }
  .qz-pic-wrap { justify-items: start; grid-auto-flow: column; align-items: end; justify-content: start; gap: 10px; }
  .qz-pic { width: 120px; }
}
/* Lucky draw big screen while waiting (idle): the prize pictures take the screen half and half, as
   big as the TV allows; with one picture, it shares the screen 50/50 with the title (founder, 26 Oct 2026). */
@media (min-width: 901px) and (orientation: landscape) {
  .stage.idle .stage-arena[data-pics="lr"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  .stage.idle .stage-arena[data-pics="lr"] .stage-pic.right { grid-column: 2; }
  .stage.idle .stage-arena[data-pics="lr"] .stage-box { display: none; }
  .stage.idle .stage-arena:is([data-pics="l"], [data-pics="r"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  .stage.idle .stage-arena[data-pics="l"] .stage-box, .stage.idle .stage-arena[data-pics="r"] .stage-pic.right { grid-column: 2; }
  .stage.idle .stage-arena[data-pics="r"] .stage-box { grid-column: 1; }
  .stage.idle .stage-arena[data-pics="l"] .stage-pic.right, .stage.idle .stage-arena[data-pics="r"] .stage-pic.left { display: none; }
  .stage.idle .stage-arena .stage-pic img { width: 100%; max-height: 80vh; }
}
/* A loader alone in a box sits in its middle (founder, 26 Oct 2026). */
:is(.card, .settings-group, .acc-body, .stack) > .spinner:only-child { display: block; margin: 18px auto; }
/* "Download in Reports" under a list: on a phone, its own line, at the left. */
@media (max-width: 640px) {
  .card-foot:has(> .reports-link) > .spacer { display: none; }
  .card-foot > .reports-link { flex: 1 1 100%; justify-content: center; }
}
/* Lucky draw list columns: one small card per column. */
.field-row.col-row { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.col-row-head { display: flex; align-items: center; gap: 2px; }
.col-row-n { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.col-row-del { color: var(--danger); }
.col-row-sel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.col-row-sel .field { display: grid; gap: 4px; margin: 0; }
.col-row > .input, .col-row-sel .select { width: 100%; }

/* Prize cards on a phone: Edit and Remove share the bottom half and half; the order arrows sit
   together at the top right, pointing up and down (the list runs down the page). */
.pc-move { display: inline-flex; gap: 2px; margin-left: auto; }
@media (max-width: 640px) {
  .prize-card { position: relative; }
  .pc-body { padding-right: 84px; }
  .pc-move { position: absolute; top: 6px; right: 6px; }
  .pc-move svg { transform: rotate(90deg); }
  .pc-move .btn.icon.sm { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .pc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px 10px; }
  .pc-actions > .spacer { display: none; }
  .pc-actions > .btn { justify-content: center; height: 40px; }
}

/* Phones: a row made only of buttons (save bars, Delete + Save, Edit + Remove…) follows the one
   rule (founder, 26 Oct 2026): a single button takes the full width; two or more go half and half,
   the red one across the top; an odd one left over takes the full width. */
@media (max-width: 640px) {
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%;
  }
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) > :is(.spacer, .grow) { display: none; }
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) > :is(.btn, .more-menu) { width: 100%; min-width: 0; margin: 0; justify-content: center; }
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) > .more-menu > .btn { width: 100%; justify-content: center; }
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) > .btn.primary { grid-column: 1 / -1; order: -1; }
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) > :is(.btn, .more-menu):not(.primary, [hidden]):nth-last-child(1 of :is(.btn, .more-menu):not(.primary, [hidden])):nth-child(odd of :is(.btn, .more-menu):not(.primary, [hidden])) { grid-column: 1 / -1; }
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) > .btn { white-space: normal; height: auto; min-height: 44px; padding: 8px 12px; line-height: 1.2; text-align: center; }
  :is(.row, .vs-save, .screen-save, .card-foot):not(.page-head *, .page-head, table *, .more-pop *):has(> .btn):not(:has(> .btn.icon, > :not(.btn, .spacer, .grow, span.grow, .more-menu, .unsaved, [hidden]))) > .btn > svg { flex-shrink: 0; }
}
@media (max-width: 640px) {
  :is(.row, .vs-save, .screen-save):not(.page-head *, .page-head):has(> .btn) > .unsaved:not([hidden]) { grid-column: 1 / -1; }
}
/* Join screens on a big TV (founder, 26 Oct 2026): half the screen for the words, half for the QR
   code, as big as the screen allows, so it scans from the back of the room. */
@media (min-width: 901px) and (orientation: landscape) {
  .qs-lobby, .cs-join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: stretch; }
  .qs-lobby > .qs-qr, .cs-join > .cs-join-qr { justify-self: center; width: min(78vh, 44vw); height: min(78vh, 44vw); }
  .qs-join-text h2, .cs-join h2 { font-size: clamp(64px, 7vw, 170px); }
  .qs-url, .cs-join-url { font-size: clamp(20px, 1.9vw, 36px); }
  .qs-kicker, .cs-join-kicker { font-size: clamp(20px, 1.8vw, 32px); }
}
/* 3D big screens: the join QR in the side panel is twice as big, its words under it. */
.s3d-join { flex-direction: column; align-items: flex-start; }
.s3d-qr { width: calc(300 * var(--px)); height: calc(300 * var(--px)); }
.s3d-join b { font-size: calc(56 * var(--px)); }
.s3d-join span { font-size: calc(22 * var(--px)); }
.s3d-join small { font-size: calc(20 * var(--px)); }
@media (min-width: 901px) and (orientation: landscape) { .stage-join .qr { width: 150px; height: 150px; } .stage-join b { font-size: 26px; } .stage-join span { font-size: 15px; } }

.qz-points { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; min-width: 0; }
.qz-points .select { width: 100%; }
.qz-detail-shown { margin: 12px 0 0; font-size: clamp(18px, 1.6vw, 30px); line-height: 1.4; color: var(--s-dim, var(--text-2)); max-width: 60ch; }
.qp .qz-detail-shown { font-size: 15px; color: var(--text-2); }
/* Phones: the Customize Design card is the icon and title on one line, its button the full width
   under them; and no input is held to a narrow width (founder, 26 Oct 2026). */
@media (max-width: 640px) {
  .ycs-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 12px; }
  .ycs-card .grow { min-width: 0; }
  .ycs-card > .btn { grid-column: 1 / -1; width: 100%; justify-content: center; height: 44px; }
  .field > .input, .field > .select, .stack > .input { max-width: none !important; }
}
/* Guest list tools on a phone: Replace list across the top, Export and Delete list half and half. */
@media (max-width: 640px) {
  .gl-tools { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gl-tools > .btn.primary { grid-column: 1 / -1; }
  .gl-tools > .btn, .gl-tools > .gl-menu > summary.btn { width: 100%; justify-content: center; height: 44px; margin: 0; }
  .gl-tools > .gl-menu { position: relative; min-width: 0; }
  .gl-tools .btn.ghost { border: 1px solid var(--border-strong); }
}
/* Every tab bar on a phone looks like the guest list's (founder, 26 Oct 2026): tiles two or three
   a row on a soft panel, every tab in sight, and the open one outlined in red. Choices
   sub-tabs mark the picked one the same way, on every screen size. */
@media (max-width: 640px) {
  .tabs:has(> button) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; margin-bottom: 14px !important; border: 0; border-radius: 12px; background: var(--surface-2); overflow: visible; }
  .tabs:has(> button:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs:has(> button) > button { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 6px !important; min-width: 0; min-height: 46px; margin: 0 !important; padding: 8px 6px !important; border: 0 !important; border-radius: 9px; font-size: 13.5px !important; font-weight: 700; line-height: 1.2; white-space: normal; text-align: center; color: var(--text-2, var(--muted)); background: transparent; }
  .tabs:has(> button) > button svg { flex: none; width: 15px; height: 15px; }
  .tabs:has(> button) > button[aria-selected="true"] { color: var(--accent-text, var(--accent)); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .tabs:has(> button:nth-child(5)) > button:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .tabs:has(> button:nth-child(5)) > button:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .tabs:not(:has(> button:nth-child(5))) > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sub-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-text, var(--accent)); }
.gl-ptable td.gl-more { display: none; }
@media (max-width: 640px) {
  .gl-ptable table.data.dt-stack td.gl-more { display: block; order: 3; padding: 0; }
  .gl-ptable table.data.dt-stack td.gl-more::before { content: none; }
  .gl-more-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 2px; font-weight: 700; font-size: 14px; color: var(--text-2); cursor: pointer; border-top: 1px solid var(--border); }
  .gl-ptable tr.open .gl-more-btn .acc-chev { transform: rotate(180deg); }
  .gl-ptable table.data.dt-stack tr > td:not(.lead, .main, .act, .gl-more) { order: 2; }
  /* Closed: the first two details show, fading out, so the guest's row says there is more to open. */
  .gl-ptable table.data.dt-stack tr:not(.open) > td:not(.lead, .main, .act, .gl-more):nth-child(n+5) { display: none; }
  .gl-ptable table.data.dt-stack tr:not(.open) > td:nth-child(3):not(.act, .gl-more) { opacity: .75; }
  .gl-ptable table.data.dt-stack tr:not(.open) > td:nth-child(4):not(.act, .gl-more) { opacity: .5; filter: blur(.6px); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
  .gl-ptable table.data.dt-stack tr:not(.open) > td.gl-more .gl-more-btn { border-top: 0; margin-top: -4px; }
}
.gl-added-ok { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 8px 0; }
.gl-added-ok p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.gl-added-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--success, #1a9e6a) 16%, transparent); color: var(--success, #1a9e6a); }
/* Bingo big screen, "A guest rolls": who is rolling, then the ball they rolled, huge. */
.bs-roll { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--s-bg, #0d0f22) 72%, transparent), color-mix(in srgb, var(--s-bg, #0d0f22) 95%, transparent)); }
.bs-roll[hidden] { display: none; }
.bs-roll-box { display: grid; justify-items: center; gap: clamp(12px, 2.2vh, 28px); text-align: center; padding: 0 4vw; }
/* The guest's bingo cage on the big screen (bingo-roll.js), turning with each swipe on their phone. */
.bs-cage3d { width: min(72vh, 46vw); aspect-ratio: 4 / 3; }
.bs-cage3d canvas { display: block; }
.bs-roll-kick { font-size: clamp(22px, 2.4vw, 44px); font-weight: 800; color: var(--gold, #ffc21a); text-transform: uppercase; letter-spacing: .08em; }
.bs-roll-name { font-size: clamp(56px, 8vw, 160px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.bs-roll-sub { font-size: clamp(20px, 2vw, 36px); color: var(--s-dim, #b8bad3); }
.bs-bigball { width: min(62vh, 40vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #1d1f3b;
  background: radial-gradient(circle at 34% 28%, #fff 0 18%, #fff4cf 36%, #ffc21a 70%, #c98a00 100%); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .7), inset 0 -18px 40px rgba(0, 0, 0, .18); }
.bs-bigball > span { width: 64%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 clamp(4px, .6vw, 10px) color-mix(in srgb, var(--accent, #e5412f) 85%, #000); }
.bs-bigball small { font-size: clamp(28px, 4vh, 64px); font-weight: 900; color: var(--accent, #e5412f); line-height: 1; }
.bs-bigball b { font-size: clamp(90px, 22vh, 260px); font-weight: 900; line-height: .9; letter-spacing: -0.04em; }
.bs-bigball.text b { font-size: clamp(28px, 4.4vh, 64px); line-height: 1.1; letter-spacing: -0.01em; padding: 0 8%; overflow-wrap: anywhere; }
.bs-roll.in .bs-bigball { animation: bsBallIn .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bsBallIn { from { transform: translateY(-60vh) rotate(-200deg) scale(.6); } to { transform: none; } }
.bs-cage { position: relative; width: min(30vh, 22vw); aspect-ratio: 1; border-radius: 50%; animation: bsCage 1.1s linear infinite; }
.bs-cage i { position: absolute; inset: 0; border: clamp(3px, .4vw, 6px) solid var(--gold, #ffc21a); border-radius: 50%; }
.bs-cage i:nth-child(2) { transform: rotateY(60deg); } .bs-cage i:nth-child(3) { transform: rotateY(120deg); }
.bs-cage b { position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1; margin: -9% 0 0 -9%; border-radius: 50%; background: #ffc21a; box-shadow: 0 0 0 3px #fff8; }
@keyframes bsCage { to { transform: rotate(360deg); } }
.bs-win ul.many li b { font-size: clamp(28px, 3.2vw, 64px); }
@media (prefers-reduced-motion: reduce) { .bs-cage, .bs-roll.in .bs-bigball { animation: none; } }
/* A guest's phone, "A guest rolls": the bingo cage to swipe, then the ball they rolled. */
.br { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 6px 0 18px; }
.br h1 { margin: 0; font-size: 26px; }
.br-stage { width: 100%; height: min(58vh, 440px); border-radius: 20px; background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), color-mix(in srgb, var(--surface) 70%, #000); touch-action: none; overflow: hidden; }
.br-stage canvas { display: block; }
.br-dots { display: flex; gap: 8px; }
.br-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--border-strong); transition: background .2s, transform .2s; }
.br-dots i.on { background: var(--gold, #ffc21a); transform: scale(1.15); }
.br-hint { margin: 0; color: var(--text-2); font-size: 15px; font-weight: 600; }
.br-ball { width: min(62vw, 260px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #fff 0 16%, #fff4cf 34%, #ffc21a 70%, #c98a00 100%); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); animation: bsBallIn .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.br-ball > span { width: 66%; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #1d1f3b; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 6px var(--accent); padding: 6%; }
.br-ball small { font-size: 26px; font-weight: 900; color: var(--accent); line-height: 1; }
.br-ball b { font-size: 64px; font-weight: 900; line-height: .95; overflow-wrap: anywhere; }
.br-ball b:not(:only-child) { font-size: 72px; }
.bp.rolling .bp-foot { display: none; }

/* Agenda on guests' phones (founder, 26 Oct 2026): an activity's buttons take the card's full width
   on a phone (beside the time on a bigger screen); an ended session is greyed with "Ended" in its
   middle, its results button and a lucky draw result above the mask. */
.rl-card > .rl-actions { grid-column: 2; margin-top: 0; }
@media (max-width: 640px) { .rl-card > .rl-actions { grid-column: 1 / -1; } .ag-rl-go { padding: 0 14px 14px; } }
.rl-card.rl-ended > :is(.rl-time, .rl-body), .ag-rl-masked > .ag-row { filter: grayscale(1); opacity: .4; }
.ag-rl-masked { position: relative; border-radius: 14px; }
.rl-card:has(> .rl-over) > .rl-wall-ended { bottom: 62px; }
.rl-wall.rl-wall-ended { align-items: center; justify-content: center; cursor: default; background: color-mix(in srgb, var(--surface) 35%, transparent); }
.rl-wall-ended .rl-wall-pill { font-size: 14px; padding: 6px 16px; letter-spacing: .02em; }
.rl-over, .ag-rl.rl-ended > .ag-results { position: relative; z-index: 2; }
/* A guest's activity that is not open: covered under the "My pass" bar (main.js gateCover). */
.gate-cover { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 24px 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gate-box { display: grid; justify-items: center; gap: 10px; width: min(360px, 100%); padding: 26px 22px; text-align: center; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.gate-box svg { color: var(--muted); }
.gate-box b { font-size: 22px; }
.gate-box p { margin: 0 0 6px; color: var(--text-2); }
/* Guests' game pages (quiz, bingo, card deck, stamp rally) wear the site's theme (founder, 26 Oct
   2026: a dark theme is never a white page): the page, cards and footer take the theme's colours. */
.qp { background: var(--bg) radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1.1px, transparent 1.5px) 0 0 / 22px 22px; color: var(--text); }
.qp-card { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 24px 48px -28px rgba(0, 0, 0, .5); }
.qp-foot { background: var(--surface-2); color: var(--text); border-top: 1px solid var(--border); }
.qp-pill { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-text, var(--accent)); }
.ck-play { background: var(--bg); color: var(--text); }
/* Guests' pages under the "My pass" bar: the page fills the screen below the bar, not a bar's height
   more (no empty space to scroll at the bottom), and a card taller than the screen starts at its top. */
#app:has(> .hub-bar) > :is(.qp, .vote-page, .fo-guest, .wl-guest, .hub) { min-height: calc(100dvh - 41px); }
.qp-body { align-content: safe center; }
/* The pass page's last line: the lock with the words, centred as one short paragraph. */
.gp-foot { display: block !important; max-width: 36ch; margin: 4px auto 24px !important; padding: 0 12px; text-align: center; line-height: 1.5; }
.gp-foot svg { vertical-align: -2px; margin-right: 2px; }
/* The pass page's last line: the lock with the words, centred as one short paragraph. */
.gp-foot { display: block !important; max-width: 36ch; margin: 4px auto 24px !important; padding: 0 12px; text-align: center; line-height: 1.5; }
.gp-foot svg { vertical-align: -2px; margin-right: 2px; }
/* The browser never shifts a page by itself when something is added above what is on screen. */
html, body { overflow-anchor: none; }
/* Guest row open: "Detail" right under the last detail, no extra line or gap above it. */
@media (max-width: 640px) {
  .gl-ptable table.data.dt-stack tr.open > td.gl-more { padding-top: 0; margin-top: -4px; }
  .gl-ptable table.data.dt-stack tr.open > td.gl-more .gl-more-btn { border-top: 0; min-height: 36px; }
  .gl-ptable table.data.dt-stack tr.open > td:not(.lead, .main, .act, .gl-more):empty { display: none; }
}
/* Guest row closed: the two preview lines under a white frosted veil, brighter towards "Detail", so
   it is plain there is more to open (founder, 26 Oct 2026). */
@media (max-width: 640px) {
  .gl-ptable table.data.dt-stack tr:not(.open) > td:nth-child(3):not(.act, .gl-more),
  .gl-ptable table.data.dt-stack tr:not(.open) > td:nth-child(4):not(.act, .gl-more) { opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; }
  .gl-ptable table.data.dt-stack tr:not(.open) > td.gl-more { position: relative; }
  .gl-ptable table.data.dt-stack tr:not(.open) > td.gl-more::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 100%; height: 62px; pointer-events: none; border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .22)); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
}
/* Organiser's agenda row on a phone (founder, 26 Oct 2026): the time with Edit on the first line,
   the session under it, then Lock · Release · End across the full width. */
@media (max-width: 640px) {
  .list-row.ag-admin-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time edit" "main main" "rl rl" "order order"; gap: 8px 10px; align-items: center; }
  .ag-admin-row > .ag-time { grid-area: time; }
  .ag-admin-row > .ag-edit { grid-area: edit; }
  .ag-admin-row > .grow { grid-area: main; }
  .ag-admin-row > .rl-admin { grid-area: rl; display: grid; gap: 6px; }
  .ag-admin-row > .rl-admin .rl-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ag-admin-row > .rl-admin .rl-switch button { justify-content: center; min-height: 40px; font-size: 13.5px; }
  .ag-admin-row > .ag-order { grid-area: order; justify-self: end; }
  .ag-admin-row > .ag-order:empty { display: none; }
}
/* Quiz pictures: one to four, side by side (founder, 26 Oct 2026: spot the difference). */
.qz-pics { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.qs-imgs { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(10px, 1.2vw, 24px); align-items: center; justify-items: center; min-height: 0; height: 100%; width: 100%; }
.qs-imgs > .qs-img { grid-column: auto; width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.qs-imgs.n4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
.qs-imgs.n4 > .qs-img { height: auto; max-height: 100%; }
.qs-q.with-img .qs-mid:has(.qs-imgs:not(.n1)) { grid-template-columns: minmax(140px, .7fr) minmax(0, 4fr) minmax(140px, .7fr); }
@media (max-width: 760px), (orientation: portrait) { .qs-imgs { grid-column: 1 / -1; grid-row: 2; max-height: 26vh; } }
.qp-imgs { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qp-imgs.n1 { grid-template-columns: minmax(0, 1fr); }
.qp-imgs.n3 > .qp-img:last-child { grid-column: 1 / -1; }
.qp-imgs .qp-img { max-height: 22vh; }

/* ---------------------------------------------------------------------------
   Prize Rain (rain-*.js). Start of the Prize Rain block: every rule under rn- or its own pages.
   --------------------------------------------------------------------------- */
/* Guest's phone */
.rn-play .rn-body { display: grid; gap: 14px; align-content: start; width: 100%; max-width: 520px; margin: 0 auto; padding: 8px 16px 40px; box-sizing: border-box; }
.rn-wait { gap: 12px; }
.rn-wait-ico, .rn-box { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.rn-box { animation: rn-shake .9s ease-in-out infinite; }
@keyframes rn-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.04); } 75% { transform: rotate(8deg) scale(1.04); } }
.rn-prize-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rn-prize-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; max-width: 100%; }
.rn-prize-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.rn-prize-chip svg { margin-left: 6px; color: var(--accent); }
.rn-count { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.rn-count span { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text, var(--accent)); }
.rn-count-n { font-size: 34vw; line-height: 1; font-weight: 900; animation: rn-pop .9s ease-out infinite; }
.rn-count p { margin: 0; color: var(--text-2); }
@keyframes rn-pop { from { transform: scale(1.25); opacity: .4; } 30% { transform: scale(1); opacity: 1; } }
.qp.rn-play.raining { touch-action: none; overscroll-behavior: none; }
.rn-rain { position: relative; height: calc(100dvh - 120px); min-height: 380px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--surface); border: 1px solid var(--border); }
.rn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.rn-hud { position: absolute; inset: 0 0 auto 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; pointer-events: none; }
.rn-hud > span:first-child { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.rn-hud svg { align-self: center; color: var(--accent); }
.rn-caught { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rn-hud small { color: var(--text-2); font-weight: 700; }
.rn-left { padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-weight: 800; font-variant-numeric: tabular-nums; }
.rn-full { position: absolute; inset: auto 12px 14px; z-index: 1; margin: 0; padding: 12px; border-radius: 14px; text-align: center; font-weight: 700; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--accent); }
.rn-full[hidden] { display: none; }
.rn-result.won .qp-big-ico { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #f59e0b; }
.rn-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.rn-wins li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.rn-wins li.done { opacity: .7; }
.rn-wins li img, .rn-win-ico { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface); color: var(--accent); }
.rn-wins li b { display: block; }
.rn-wins li small { color: var(--muted); }
.rn-wins.big li img, .rn-wins.big .rn-win-ico { width: 56px; height: 56px; }
.rn-mine h2 { margin: 0; font-size: 19px; }
.rn-how { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 14px; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.rn-how > svg { color: var(--accent); margin-top: 2px; }
.rn-how b { display: block; }
.rn-how span { font-size: 14px; color: var(--text-2); }
.rn-how > .btn, .rn-how > .rn-claim-qr, .rn-how > .rn-claim-code { grid-column: 1 / -1; justify-self: center; }
.rn-claim-qr { width: min(220px, 60vw); height: min(220px, 60vw); margin: 4px auto 0; padding: 10px; background: #fff; border-radius: 14px; }
.rn-claim-code { font: 800 20px var(--font-mono, monospace); letter-spacing: .14em; }

/* Big screen */
.stage.rn-stage { overflow: hidden; }
.rn-result-box .rn-wins li { color: var(--text); }
.wa-row .input.rn-num { width: 110px; flex: none; }
.rn-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.rn-stage > header, .rn-stage-main { position: relative; z-index: 2; }
.rn-stage-main { display: grid; place-items: center; min-height: 0; padding: 0 clamp(24px, 5vw, 96px) clamp(16px, 3vh, 40px); }
.rn-lobby { width: 100%; }
.rn-stage-prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(8px, 1vw, 16px); margin-top: clamp(6px, 1vh, 14px); }
.rn-stage-prize { display: grid; justify-items: center; gap: 4px; padding: clamp(8px, 1.2vh, 14px); border-radius: 16px; background: color-mix(in srgb, var(--s-ink, #fff) 6%, transparent); text-align: center; }
.rn-stage-prize img, .rn-stage-pico { width: clamp(56px, 8vh, 96px); height: clamp(56px, 8vh, 96px); border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.rn-stage-prize small { font-size: clamp(12px, 1.2vw, 16px); color: var(--gold, #ffc21a); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.rn-stage-prize b { font-size: clamp(14px, 1.4vw, 22px); line-height: 1.2; }
.rn-stage-center { display: grid; justify-items: center; gap: clamp(8px, 2vh, 20px); text-align: center; }
.rn-stage-kick { font-size: clamp(20px, 2.2vw, 40px); font-weight: 800; color: var(--gold, #ffc21a); text-transform: uppercase; letter-spacing: .08em; }
.rn-stage-count { font-size: clamp(160px, 42vh, 460px); line-height: 1; font-weight: 900; animation: rn-pop .9s ease-out infinite; }
.rn-stage-center p { margin: 0; font-size: clamp(20px, 2.2vw, 40px); color: var(--s-dim, #b8bad3); }
.rn-stage-box { color: var(--accent); animation: rn-shake .9s ease-in-out infinite; }
.rn-stage-big { font-size: clamp(48px, 7vw, 130px); font-weight: 900; letter-spacing: -0.03em; }
.rn-stage-hud { align-self: start; display: grid; justify-items: center; gap: 6px; padding: 14px 32px; border-radius: 24px; background: color-mix(in srgb, var(--s-bg, #0d0f22) 70%, transparent); }
.rn-stage-hud span { font-size: clamp(22px, 2.4vw, 44px); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--gold, #ffc21a); }
.rn-stage-left { font-size: clamp(60px, 9vh, 120px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.rn-stage-hud small { font-size: clamp(16px, 1.6vw, 28px); color: var(--s-dim, #b8bad3); }
.rn-stage-results { display: grid; justify-items: center; gap: clamp(8px, 1.6vh, 18px); width: 100%; text-align: center; }
.rn-stage-results h2 { margin: 0; font-size: clamp(44px, 6vw, 110px); font-weight: 900; letter-spacing: -0.03em; }
.rn-stage-sum { margin: 0; font-size: clamp(18px, 1.8vw, 32px); color: var(--s-dim, #b8bad3); }
.rn-stage-winners { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 22vw, 420px), 1fr)); gap: clamp(8px, 1vw, 16px); }
.rn-stage-winners li { display: flex; align-items: center; gap: 14px; padding: clamp(8px, 1.2vh, 14px) 16px; border-radius: 16px; background: color-mix(in srgb, var(--s-ink, #fff) 7%, transparent); text-align: left; animation: rn-in .5s ease-out both; }
.rn-stage-winners li img, .rn-stage-winners li .rn-stage-pico { width: clamp(48px, 6vh, 72px); height: clamp(48px, 6vh, 72px); flex: none; }
.rn-stage-winners b { display: block; font-size: clamp(18px, 1.8vw, 32px); }
.rn-stage-winners small { font-size: clamp(14px, 1.2vw, 20px); color: var(--s-dim, #b8bad3); }
.rn-stage-winners.many b { font-size: clamp(15px, 1.3vw, 22px); }
@keyframes rn-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .rn-box, .rn-stage-box, .rn-count-n, .rn-stage-count, .rn-stage-winners li { animation: none; } }

/* Organiser: prizes, looks, the counter PIN */
.rn-prizes-list { display: grid; gap: 10px; }
.rn-prize { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.rn-prize-head { display: flex; align-items: center; gap: 6px; }
.rn-rank { font-size: 14px; color: var(--accent-text, var(--accent)); }
.rn-prize-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.rn-thumb { width: 52px; height: 52px; }
.rn-prize-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rn-field { display: grid; gap: 4px; margin: 0; }
.rn-num { width: 100%; }
.rn-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.rn-total > span { flex: 1 1 200px; }
.rn-prize .input.rn-num.invalid { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
/* Winners: the table on wide screens, one card per winner on phones. */
.rn-win-cards { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 640px) {
  .rn-admin .rn-win-table { display: none; }
  .rn-win-cards { display: grid; gap: 10px; }
  .rn-win-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .rn-wc-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
  .rn-wc-top > img, .rn-wc-top > .rn-win-ico { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
  .rn-wc-text { display: grid; gap: 2px; min-width: 0; }
  .rn-wc-text b { font-size: 15px; }
  .rn-wc-text span { font-size: 14px; color: var(--text-2, var(--text)); }
  .rn-wc-text small, .rn-wc-by { font-size: 12.5px; color: var(--muted); }
  .rn-wc-top .badge { white-space: nowrap; }
}
.rn-total.bad { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.rn-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.rn-look { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: center; font-size: 13px; font-weight: 600; }
.rn-look.on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rn-look input { position: absolute; opacity: 0; pointer-events: none; }
.rn-look canvas { border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.rn-pin { display: grid; gap: 8px; margin: 0; }
.rn-pin span { font-size: 13px; color: var(--muted); }
.rn-pin b { font: 800 30px var(--font-mono, monospace); letter-spacing: .2em; }
@media (max-width: 640px) {
  .rn-prize-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-prize-fields > .rn-field:last-child { grid-column: 1 / -1; }
  .rn-total > .btn { flex: 1 1 100%; justify-content: center; }
}
/* End of the Prize Rain block. */

/* Articles and idea pages (pages/article.js): one reading column; every rule under .art-page. */
.art-page .art { padding-top: 40px; padding-bottom: 72px; }
.art-page .art-crumbs { margin: 0 0 18px; font-size: 14px; }
.art-page .art-crumbs a { color: var(--muted); }
.art-page .art h1 { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin: 6px 0 14px; }
.art-page .art .lead { font-size: 19px; line-height: 1.55; color: var(--text-2); margin: 0 0 12px; }
.art-page .art-meta { margin: 0 0 24px; }
.art-page .art-cover { margin: 0 0 32px; }
.art-page .art-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.art-page .art-credit { margin-top: 6px; font-size: 12px; color: var(--text-2); }
.art-page .art-credit a { color: inherit; text-decoration: underline; }
.art-page .art-prose { font-size: 17px; line-height: 1.7; color: var(--text); }
.art-page .art-prose h2 { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; margin: 40px 0 12px; }
.art-page .art-prose h3 { font-size: 19px; margin: 28px 0 8px; }
.art-page .art-prose p { margin: 0 0 16px; }
.art-page .art-prose :is(ul, ol) { margin: 0 0 20px; padding-left: 24px; }
.art-page .art-prose li { margin: 0 0 8px; }
.art-page .art-prose a { color: var(--accent-text, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
.art-page .art-tip { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0; padding: 16px 18px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.art-page .art-tip svg { flex: none; margin-top: 4px; color: var(--accent); }
.art-page .art-tip p { margin: 0; font-weight: 600; }
.art-page .art-related { margin: 48px 0 0; padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.art-page .art-related h2 { font-size: 18px; margin: 0 0 10px; }
.art-page .art-related + .art-related { margin-top: 16px; }
.art-page .art-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.art-page .art-related a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.art-page .art-try { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 24px 0 0; padding: 24px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.art-page .art-try h2 { font-size: 20px; margin: 0 0 4px; }
.art-page .art-try p { margin: 0; color: var(--muted); }
.art-page .art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.art-page .art-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--text); text-decoration: none !important; }
.art-page .art-card:hover { border-color: var(--border-strong); }
.art-page .art-card-pic { height: 200px; overflow: hidden; }
/* Every card picture the same 200 px band, cropped to fit (idea pages' photos come wrapped in their own figure). */
.art-page .art-card-pic > *, .art-page .art-card-pic picture, .art-page .art-card-pic figure { display: block; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.art-page .art-card-pic img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 35%; }
.art-page .art-card-text { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.art-page .art-card-text b { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; }
.art-page .art-card-text p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-page .art-card-text .more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-text, var(--accent)); }
@media (max-width: 640px) {
  .art-page .art { padding-top: 24px; padding-bottom: 48px; }
  .art-page .art .lead { font-size: 17px; }
  .art-page .art-prose { font-size: 16px; }
  .art-page .art-prose h2 { font-size: 24px; margin-top: 32px; }
  .art-page .art-try .btn { width: 100%; justify-content: center; }
}

/* My rewards (pages/rewards.js), the dashboard's reward banner and Profile → Birthday & emails */
.rw-items { display: grid; gap: 8px; }
.rw-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.rw-item > svg { flex-shrink: 0; color: var(--accent-text); }
.rw-item .grow { min-width: 180px; }
.rw-code { font: 600 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--border); }
.rw-card.done { opacity: .7; }
.rw-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.rw-banner > svg { color: var(--accent-text); flex-shrink: 0; }
.rw-banner .grow { min-width: 160px; }

/* Theme switch (main.js switchTheme): a circle spreading from the button, else a colour fade; never a re-render. */
.theme-swap::view-transition-old(root), .theme-swap::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-swap::view-transition-new(root) { z-index: 2; }
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important; }

/* Brand logo image (spadmin upload): the dark-background one in the dark theme, the light one otherwise. */
.brand .site-logo { display: block; height: 30px; width: auto; max-width: 180px; object-fit: contain; }
.brand .site-logo.for-dark { display: none; }
[data-theme-mode="dark"] .brand .site-logo.for-dark { display: block; }
[data-theme-mode="dark"] .brand .site-logo.for-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode="light"]) .brand .site-logo.for-dark { display: block; }
  :root:not([data-theme-mode="light"]) .brand .site-logo.for-light { display: none; }
}

/* A faint Yaypick mark (no name) as a design touch (founder, 28 Oct 2026): large and half off the right
   edge of each plan card, and one centred mark behind the site and organiser pages (not big screens or guests). */
:root, [data-theme-mode="light"] { --ghost-mark: url(/img/mark-ghost-light.svg); }
[data-theme-mode="dark"] { --ghost-mark: url(/img/mark-ghost-dark.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme-mode="light"]) { --ghost-mark: url(/img/mark-ghost-dark.svg); } }
.price-col { background-image: var(--ghost-mark); background-repeat: no-repeat; background-size: 90% auto; background-position: 550% 68%; }
/* One faint Y in the centre of the page, never several small ones (founder, 29 Oct 2026). */
html.site-chrome body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ghost-mark) no-repeat center / min(56vw, 520px) auto;
}
@media print { html.site-chrome body::before { display: none; } }
/* Controllers (founder, 29 Oct 2026): no site header or footer; the profile menu (language, theme, log out) sits in the controller bar; the one faint Y shows through. */
html.site-chrome .dc { background: transparent; }
.dc-head-actions .pm-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; }
.dc-head-actions .pm-button[aria-expanded="true"] { background: var(--surface-2); }
@media (max-width: 760px) { .dc-head-actions .pm .user-name, .dc-head-actions .pm .mn-caret { display: none; } }
@media (max-width: 1024px) {
  .dc-main section.dc-fold > [data-fold] { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 0; }
  .dc-main section.dc-fold > [data-fold] > .acc-chev { margin-left: auto; }
  .dc-main section.dc-fold.open > [data-fold] { margin-bottom: 10px; }
  .dc-main section.dc-fold.open > [data-fold] > .acc-chev { transform: rotate(180deg); color: var(--accent-text, var(--accent)); }
  .dc-main section.dc-fold:not(.open) > :not([data-fold]) { display: none !important; }
}
@media (min-width: 1025px) { .dc-main [data-fold] > .acc-chev { display: none; } }
@media (max-width: 480px) {
  .dc-head-actions .pm { position: static; display: grid; }
  .dc-head-actions .pm-button { justify-content: center; min-height: 48px; padding: 4px 2px; }
  .dc-head-actions .pm-panel { right: 12px; top: 100%; }
}
/* Log in and sign up (founder, 28 Oct 2026): no small marks, one big Y centred behind the form. */
html:has(.auth-wrap) body::before { display: none; }
.auth-wrap .auth-form { background: var(--ghost-mark) no-repeat center / min(85%, 560px) auto; }

/* Profile menu (founder, 28 Oct 2026: a sideways scrollbar again): never scroll sideways; the language
   and theme rows shrink, and wrap under their label when the panel is too narrow for one line. */
.pm-panel { width: 320px; max-width: calc(100vw - 24px); overflow-x: hidden; }
.pm-panel .pm-pref { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.pm-panel .pm-pref > :last-child { margin-left: auto; min-width: 0; }
.pm-panel .pm-pref .lang-pick { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.pm-panel .pm-pref .lang-pick .select.sm { max-width: 140px; }
.pm-panel .pm-seg { flex: none; max-width: 100%; }
.pm-panel .pm-seg button { padding: 4px 9px; }

/* ---------- My Events stage (dashboard.js myEventsStage) ---------- */
/* Behind the whole page: spotlights sweeping like a show over one big Y, nearly invisible in the page's own colour.
   Only on My Events (it replaces the faint marks there); phones: no beams, no movement. */
html:has(.me-stage) body::before { display: none; }
.me-stage { --beam: rgba(255, 255, 255, .045); --beam-red: rgba(217, 58, 43, .1); --beam-gold: rgba(255, 194, 26, .07); --beam-violet: rgba(124, 92, 255, .09);
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 110%, rgba(217, 58, 43, .08), transparent 60%), radial-gradient(80% 50% at 50% -10%, rgba(124, 92, 255, .06), transparent 60%), var(--bg); }
[data-theme-mode="light"] .me-stage, :root:not([data-theme-mode]) .me-stage { --beam: rgba(29, 31, 59, .025); --beam-red: rgba(217, 58, 43, .05); --beam-gold: rgba(230, 160, 0, .05); --beam-violet: rgba(124, 92, 255, .04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme-mode="light"]) .me-stage { --beam: rgba(255, 255, 255, .045); --beam-red: rgba(217, 58, 43, .1); --beam-gold: rgba(255, 194, 26, .07); --beam-violet: rgba(124, 92, 255, .09); } }
.me-beam { position: absolute; top: -12vh; width: 34vw; height: 135vh; transform-origin: 50% 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.me-beam.b1 { left: -6vw; background: linear-gradient(to bottom, var(--beam-red), transparent 78%); animation: me-sweep 11s ease-in-out infinite alternate; }
.me-beam.b2 { left: 22vw; background: linear-gradient(to bottom, var(--beam-gold), transparent 74%); animation: me-sweep 9s ease-in-out -3s infinite alternate-reverse; }
.me-beam.b3 { left: 46vw; background: linear-gradient(to bottom, var(--beam-violet), transparent 76%); animation: me-sweep 12s ease-in-out -6s infinite alternate; }
.me-beam.b4 { left: 72vw; background: linear-gradient(to bottom, var(--beam), transparent 72%); animation: me-sweep 10s ease-in-out -2s infinite alternate-reverse; }
.me-floor { position: absolute; left: 50%; bottom: -18vh; width: 90vw; height: 40vh; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--beam-red), transparent); animation: me-glow 6s ease-in-out infinite alternate; }
@keyframes me-sweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes me-glow { from { opacity: .55; } to { opacity: 1; } }
/* Phones: no beams, the Y smaller. */
@media (max-width: 640px) { .me-beam, .me-floor { display: none; } .me-mark { width: 180px; } }
/* The hidden mark: the page's text colour at a few percent, cut to the logo's shape (the Y open), so it
   reads as part of the background; the spotlights pass over it. */
.me-mark { position: absolute; left: 50%; top: 52%; width: clamp(260px, 34vw, 480px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: var(--text); opacity: .06; -webkit-mask: url(/img/mark-mask.svg) center / contain no-repeat; mask: url(/img/mark-mask.svg) center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .me-stage * { animation: none !important; } }
/* Homepage: lights and the Y sit on the page's own paper, under its sections; the bands below keep a
   background of their own, so they slide over the fixed Y like layers. */
.lp .stage-show, .lp #stage-design { background: var(--surface); border-block: 1px solid var(--border); }
/* Pricing: the band ends just under "Every plan includes"; the free trial and example below stay see-through. */
.lp #pricing { isolation: isolate; overflow: clip; }
.lp #pricing .included { position: relative; box-shadow: none; }
.lp #pricing .included::before { content: ""; position: absolute; inset: -10000px -10000px -12px; background: var(--surface); z-index: -1; pointer-events: none; }
.lp #pricing .strip-item, .lp #pricing .example-card { background: transparent; box-shadow: none; }
.lp:has(> .me-stage) { isolation: isolate; }
.lp > .me-stage { background: radial-gradient(120% 70% at 50% 110%, rgba(217, 58, 43, .06), transparent 60%), radial-gradient(80% 50% at 50% -10%, rgba(124, 92, 255, .05), transparent 60%); }

/* Certified ballot: organiser tab, public check page, big screen seal */
.cb-card { display: flex; flex-direction: column; gap: 14px; }
.cb-card .card-head { padding: 0; border: 0; }
.cb-card .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cb-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: 14px; }
.cb-witnesses { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cb-witness { display: flex; gap: 6px; align-items: center; width: 100%; max-width: 480px; }
.cb-witness .input { flex: 1; }
.cb-warn { color: var(--warn, #b7791f); display: flex; align-items: center; gap: 6px; margin: 0; }
.cb-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.cb-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: center; }
.cb-k { color: var(--muted); font-size: 13px; font-weight: 600; }
.cb-v { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; flex-wrap: wrap; }
.cb-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
@media (max-width: 640px) { .cb-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.cb-page { min-height: 100vh; background: var(--bg); }
.cb-wrap { max-width: 860px; margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.cb-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cb-head h1 { font-size: clamp(24px, 3vw, 34px); margin: 0; }
.cb-head p { margin: 0; }
.cb-wrap .card h2 { font-size: 18px; margin: 0 0 12px; }
.cb-wrap .card { display: flex; flex-direction: column; gap: 10px; }
.cb-wrap .card > .btn { align-self: flex-start; }
.cb-checks { display: flex; flex-direction: column; gap: 6px; }
.cb-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.cb-check.ok { background: color-mix(in srgb, #1f9d55 12%, transparent); color: var(--text); }
.cb-check.ok svg { color: #1f9d55; flex: none; margin-top: 2px; }
.cb-check.bad { background: color-mix(in srgb, #d93a2b 12%, transparent); }
.cb-check.bad svg { color: #d93a2b; flex: none; margin-top: 2px; }
.cb-round { padding: 10px 0; border-top: 1px solid var(--border); }
.cb-round-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cb-round ol { margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.cb-list-rows { display: flex; flex-direction: column; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.cb-list-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 12px; font-size: 14px; border-bottom: 1px solid var(--border); }
.cb-list-row:last-child { border-bottom: 0; }
.cb-list-row b { min-width: 56px; font-variant-numeric: tabular-nums; }
.cb-how { line-height: 1.5; }
.stage-seal { position: absolute; left: clamp(20px, 3vw, 48px); bottom: 18px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: clamp(12px, 1vw, 16px); backdrop-filter: blur(6px); }
.stage-seal b { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.stage-seal-url { opacity: .7; }

/* Gala night: the guest's phone (gala-guest.js) */
.gn-play { --accent: #c8a24a; grid-template-rows: auto 1fr; }
.gn-play .gn-body { display: grid; align-content: start; gap: 16px; padding: 4px 16px calc(84px + env(safe-area-inset-bottom, 0px)); max-width: 640px; width: 100%; margin: 0 auto; }
.gn-play .gn-paddle-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 14px; white-space: nowrap; }
.gn-play .gn-join .field { display: grid; gap: 6px; }
.gn-play .gn-sec { display: grid; gap: 10px; }
.gn-play .gn-sec h2 { margin: 6px 0 0; font-size: 19px; }
.gn-play .gn-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff; font-size: 14px; box-shadow: 0 1px 0 #e3dfd5; }
.gn-play .gn-lots { display: grid; gap: 10px; }
.gn-play .gn-lot { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 #e3dfd5, 0 14px 30px -24px rgba(29, 31, 59, .5); }
.gn-play .gn-lot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gn-play .gn-lot > img, .gn-play .gn-lot-ph { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
.gn-play .gn-lot-ph { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, #fff); color: color-mix(in srgb, var(--accent) 70%, #000); }
.gn-play .gn-lot-text { display: grid; gap: 3px; min-width: 0; }
.gn-play .gn-lot-text b { font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gn-play .gn-lot-text > small { color: #6b6f85; font-size: 12.5px; }
.gn-play .gn-lot-bid { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.gn-play .gn-lot-bid small { font-weight: 500; color: #6b6f85; font-size: 13px; }
.gn-play .gn-lot-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gn-play .gn-st, .gn-play .gn-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f0eee8; color: #4b4f66; }
.gn-play .gn-st.open { background: color-mix(in srgb, var(--accent) 18%, #fff); color: color-mix(in srgb, var(--accent) 60%, #000); }
.gn-play .gn-st.live { background: #e5412f; color: #fff; }
.gn-play .gn-st.sold { background: #1d1f3b; color: #fff; }
.gn-play .gn-tag.lead, .gn-play .gn-tag.won { background: #dff5ea; color: #0b7a55; }
.gn-play .gn-tag.out { background: #fde4e1; color: #b3261e; }
.gn-play .gn-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: #1d1f3b; }
.gn-play .gn-tabs button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; color: #c9cadb; font-size: 12.5px; font-weight: 700; text-align: center; }
.gn-play .gn-tabs button small { font-size: 11px; font-weight: 600; opacity: .85; }
.gn-play .gn-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.gn-play .gn-pledge { border: 2px solid var(--accent); }
.gn-play .gn-pledge h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.gn-play .gn-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-play .gn-quick .btn { flex: 1 1 30%; justify-content: center; font-weight: 800; }
.gn-play .gn-bid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.gn-play .gn-amount { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gn-play .gn-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.gn-play .gn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gn-play .gn-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.gn-play .gn-owe-total { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gn-play .gn-pay h3, .gn-play .gn-pledged h3 { margin: 0; font-size: 17px; }
.gn-play .gn-pay-rows { display: grid; gap: 6px; }
.gn-play .gn-pay-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; border-bottom: 1px dashed #e3dfd5; padding-bottom: 6px; }
.gn-play .gn-pay-row span { color: #6b6f85; }
.gn-play .gn-pay-row b { text-align: right; overflow-wrap: anywhere; }
.gn-play .gn-pay-qr { width: min(240px, 100%); justify-self: center; border-radius: 12px; }
.gn-lot-sheet { display: grid; gap: 12px; }
.gn-lot-sheet .gn-sheet-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; }
.gn-lot-sheet .gn-st, .gn-lot-sheet .gn-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.gn-lot-sheet .gn-st.live { background: #e5412f; color: #fff; }
.gn-lot-sheet .gn-tag.lead, .gn-lot-sheet .gn-tag.won { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }
.gn-lot-sheet .gn-tag.out { background: color-mix(in srgb, var(--danger, #d93a2b) 13%, var(--surface)); color: var(--danger, #d93a2b); }
.gn-lot-sheet .gn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.gn-lot-sheet .gn-facts > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.gn-lot-sheet .gn-facts small { color: var(--muted); font-size: 12px; }
.gn-lot-sheet .gn-facts b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gn-lot-sheet .gn-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-lot-sheet .gn-quick .btn { flex: 1 1 30%; justify-content: center; font-weight: 800; }
.gn-lot-sheet .gn-bid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.gn-lot-sheet .gn-amount { font-size: 18px; font-weight: 700; }
.gn-lot-sheet .gn-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }

/* Gala night: the big screen (gala-stage.js) */
.gn-stage { --accent: #c8a24a; }
.gn-stage .gn-stage-main { min-height: 0; display: grid; padding: 0 clamp(20px, 3vw, 56px) clamp(16px, 3vh, 40px); }
.gn-stage .gn-stage-kick { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 800; font-size: clamp(16px, 1.4vw, 26px); text-transform: uppercase; letter-spacing: .08em; }
.gn-stage .gn-stage-auction, .gn-stage .gn-stage-pledge { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 380px); gap: clamp(16px, 2vw, 36px); min-height: 0; }
.gn-stage .gn-stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 19vw, 340px), 1fr)); grid-auto-rows: min-content; gap: clamp(10px, 1.2vw, 20px); align-content: start; overflow: hidden; }
.gn-stage .gn-stage-lot { display: grid; grid-template-columns: clamp(64px, 6vw, 110px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid var(--s-line); }
.gn-stage .gn-stage-lot.closed { opacity: .6; }
.gn-stage .gn-stage-lot > img, .gn-stage .gn-stage-ph { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.gn-stage .gn-stage-ph { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.gn-stage .gn-stage-lot-text { display: grid; gap: 4px; min-width: 0; }
.gn-stage .gn-stage-lot-text b { font-size: clamp(15px, 1.2vw, 22px); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-stage .gn-stage-bid { font-size: clamp(20px, 1.8vw, 34px); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.gn-stage .gn-stage-lot-text small { color: var(--s-dim); font-size: clamp(12px, .9vw, 16px); }
.gn-stage .gn-stage-side { display: flex; flex-direction: column; gap: 18px; align-items: stretch; justify-content: center; min-width: 0; }
.gn-stage .gn-stage-join { display: grid; justify-items: center; gap: 8px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid var(--s-line); text-align: center; }
.gn-stage .gn-stage-qr { width: 100%; max-width: 260px; aspect-ratio: 1; background: #fff; border-radius: 14px; padding: 10px; }
.gn-stage .gn-stage-qr canvas, .gn-stage .gn-stage-qr img, .gn-stage .gn-stage-qr svg { width: 100%; height: 100%; }
.gn-stage .gn-stage-join b { font-size: clamp(16px, 1.3vw, 24px); }
.gn-stage .gn-stage-join span { color: var(--s-dim); }
.gn-stage .gn-stage-raised { display: grid; gap: 2px; text-align: center; }
.gn-stage .gn-stage-raised span { color: var(--s-dim); font-weight: 600; }
.gn-stage .gn-stage-raised b { font-size: clamp(28px, 2.6vw, 52px); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.gn-stage .gn-stage-empty { color: var(--s-dim); font-size: 22px; }
.gn-stage .gn-stage-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 64px); align-items: center; min-height: 0; }
.gn-stage .gn-stage-pic { display: grid; place-items: center; min-height: 0; height: 100%; }
.gn-stage .gn-stage-pic img { max-width: 100%; max-height: 62vh; border-radius: 24px; object-fit: contain; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); }
.gn-stage .gn-stage-ph.big { width: min(40vw, 54vh); }
.gn-stage .gn-stage-live-text { display: grid; gap: clamp(8px, 1.4vh, 18px); align-content: center; min-width: 0; }
.gn-stage .gn-stage-live-text h2 { margin: 0; font-size: clamp(30px, 3.6vw, 76px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.gn-stage .gn-stage-donor { margin: 0; color: var(--s-dim); font-size: clamp(16px, 1.4vw, 26px); }
.gn-stage .gn-stage-now { display: grid; gap: 2px; padding: clamp(14px, 2vh, 26px) clamp(18px, 2vw, 32px); border-radius: 24px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 2px solid var(--accent); justify-self: start; }
.gn-stage .gn-stage-now span { color: var(--s-dim); font-weight: 700; font-size: clamp(14px, 1.2vw, 22px); }
.gn-stage .gn-stage-now b { font-size: clamp(48px, 6vw, 130px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gn-stage .gn-stage-now small { font-size: clamp(18px, 1.8vw, 34px); font-weight: 700; color: var(--accent); }
.gn-stage .gn-stage-now.sold { background: var(--accent); color: var(--on-accent); }
.gn-stage .gn-stage-now.sold span, .gn-stage .gn-stage-now.sold small { color: var(--on-accent); }
.gn-stage .gn-stage-now.sold span { font-size: clamp(28px, 3vw, 60px); text-transform: uppercase; letter-spacing: .06em; }
.gn-stage .gn-stage-history { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; color: var(--s-dim); font-size: clamp(14px, 1.1vw, 20px); font-variant-numeric: tabular-nums; }
.gn-stage .gn-stage-pledge-main { display: grid; gap: clamp(10px, 2vh, 26px); align-content: center; min-width: 0; }
.gn-stage .gn-stage-pledge-main h2 { margin: 0; font-size: clamp(32px, 4vw, 84px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.gn-stage .gn-stage-at { margin: 0; color: var(--accent); font-weight: 800; font-size: clamp(18px, 1.6vw, 30px); }
.gn-stage .gn-stage-total { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.gn-stage .gn-stage-total b { font-size: clamp(54px, 7vw, 150px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gn-stage .gn-stage-total span { color: var(--s-dim); font-size: clamp(18px, 2vw, 38px); font-weight: 700; }
.gn-stage .gn-bar { position: relative; height: clamp(26px, 4vh, 48px); border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.gn-stage .gn-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.gn-stage .gn-bar span { position: relative; display: grid; place-items: center; height: 100%; font-weight: 800; font-size: clamp(14px, 1.3vw, 24px); }
.gn-stage .gn-stage-donors { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gn-stage .gn-stage-donors li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: clamp(14px, 1.15vw, 22px); }
.gn-stage .gn-stage-donors li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-stage .gn-stage-donors li span { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.gn-stage .gn-stage-grand { display: grid; justify-items: center; align-content: center; gap: clamp(10px, 2vh, 24px); text-align: center; }
.gn-stage .gn-stage-grand > b { font-size: clamp(64px, 10vw, 220px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.gn-stage .gn-stage-grand p { margin: 0; color: var(--s-dim); font-size: clamp(18px, 1.8vw, 34px); font-weight: 700; }
.gn-stage .gn-stage-grand .gn-stage-thanks { color: var(--s-ink); }
.gn-stage[data-theme="light"] .gn-stage-lot, .gn-stage[data-theme="light"] .gn-stage-join, .gn-stage[data-theme="light"] .gn-stage-donors li { background: #fff; }
.gn-stage[data-theme="light"] .gn-bar { background: rgba(20, 26, 51, .08); }

/* Gala night: the controller (gala-host.js) */
.gn-host .gn-host-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gn-host .gn-host-totals > div { min-width: 0; }
.gn-host .gn-host-totals b { overflow-wrap: anywhere; }
.gn-host .gn-host-totals > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.gn-host .gn-host-totals small { color: var(--muted); font-size: 12.5px; }
.gn-host .gn-host-totals b { font-size: 19px; font-variant-numeric: tabular-nums; }
.gn-host .gn-views { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gn-host .gn-views .btn { justify-content: center; }
.gn-host .gn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gn-host .gn-row > .select, .gn-host .gn-row > .input { flex: 1 1 140px; min-width: 0; }
.gn-host .gn-row > .gn-paddle-in { flex: 0 1 110px; }
.gn-host .gn-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.gn-host .gn-live-box { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.gn-host .gn-live-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.gn-host .gn-live-now small { color: var(--muted); width: 100%; }
.gn-host .gn-live-now b { font-size: 34px; font-variant-numeric: tabular-nums; }
.gn-host .gn-live-now span { font-weight: 700; }
.gn-host .gn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gn-host .gn-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.gn-host .gn-list li span { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-host .gn-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
@media (max-width: 480px) {
  .gn-host .gn-host-totals { gap: 6px; }
  .gn-host .gn-host-totals > div { padding: 10px; }
  .gn-host .gn-host-totals b { font-size: 15px; }
  .gn-host .gn-row > .btn { flex: 1 1 100%; justify-content: center; }
  .gn-host .gn-quick > .btn { flex: 1 1 0; justify-content: center; }
}

/* Gala night: the organiser's page (gala-admin.js) */
.gn-admin .gn-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.gn-admin .gn-tile { display: grid; gap: 2px; padding: 14px 16px; }
.gn-admin .gn-tile small { color: var(--muted); font-size: 12.5px; }
.gn-admin .gn-tile b { font-size: 22px; font-variant-numeric: tabular-nums; }
.gn-admin .gn-lot-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gn-admin .gn-lot-edit { min-width: 0; }
.gn-admin .gn-lot-edit .rn-rank { white-space: nowrap; }
.gn-admin .gn-lot-edit .rn-prize-head > .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-admin .gn-lot-edit .rn-prize-head > .btn { flex: none; }
.gn-admin .gn-lot-kind { margin: 2px 0; }
.gn-admin .gn-lot-fields { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); align-items: start; }
.gn-admin .gn-lot-fields > .rn-field { min-width: 0; align-content: start; }
.gn-admin .gn-lot-fields .input { width: 100%; min-width: 0; box-sizing: border-box; }
.gn-admin .gn-amounts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gn-admin .gn-amount-field { display: inline-flex; align-items: center; gap: 2px; }
.gn-admin .gn-amount-field .input { width: 120px; }
.gn-admin .gn-pay-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
@media (max-width: 760px) {
  .gn-admin .gn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gn-stage .gn-stage-auction, .gn-stage .gn-stage-pledge, .gn-stage .gn-stage-live { grid-template-columns: minmax(0, 1fr); }
}

/* Guide parts (/guide): each guide's steps under Set up, The big screen, On the night, After the event, then Common problems. */
.gs-panel .gz-parts { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: 6px; }
.gs-panel .gz-part.acc.flat > .acc-head { pointer-events: none; padding: 0 0 10px; border-bottom: 1px solid var(--border); margin-bottom: clamp(20px, 3vw, 36px); }
.gs-panel .gz-part.acc.flat { border: 0; border-radius: 0; background: none; overflow: visible; }
.gs-panel .gz-part.acc.flat > .acc-body { padding: 0; }
.gs-panel .gz-part.acc + .gz-part.acc { margin-top: 0; }
.gs-panel .gz-part .acc-title { font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: -0.01em; }
.gs-panel .gz-part .gz-steps { margin: 0; }
.gs-panel .gs-faq-list { display: grid; gap: 6px; margin: 0; max-width: 72ch; }
.gs-panel .gs-faq-list dt { font-weight: 650; margin-top: 12px; }
.gs-panel .gs-faq-list dt:first-child { margin-top: 0; }
.gs-panel .gs-faq-list dd { margin: 0; color: var(--text-2); line-height: 1.6; }
@media (max-width: 1024px) { .gs-panel .gz-parts { gap: 10px; } }

/* Auction lot cards: Silent / Live as a clear switch on the grey card, the chosen one bordered (founder, 30 Oct 2026). */
.gn-admin .gn-lot-kind .segmented { background: var(--surface); border: 1px solid var(--border); }
.gn-admin .gn-lot-kind .segmented button { border: 1px solid transparent; }
.gn-admin .gn-lot-kind .segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text, var(--accent)); border-color: var(--accent); box-shadow: none; }
.pf .pf-hero { padding-bottom: 8px; }
.pf .pf-hero .lead { max-width: 720px; }
.pf .pf-one { display: flex; gap: 10px; align-items: flex-start; max-width: 720px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.pf .pf-one svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.pf .pf-mask { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.pf .pf-work + .pf-work { margin-top: 72px; }
.pf .pf-work-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.pf .pf-work-head h2 { font-size: 24px; margin: 0; }
.pf .pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf .pf-tab { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: background .15s ease-out, color .15s ease-out; }
.pf .pf-tab[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.pf .pf-views { display: flex; align-items: flex-end; gap: 4%; }
.pf .pf-view { display: flex; flex-direction: column; gap: 8px; }
.pf .pf-v-screen { flex: 1; min-width: 0; }
.pf .pf-v-phone { width: 21%; flex: none; }
.pf .pf-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.pf .pf-more { margin-top: 16px; }
@media (max-width: 760px) { .pf .pf-views { gap: 12px; } .pf .pf-v-phone { width: 26%; } .pf .pf-work-head h2 { font-size: 20px; } }
.pfx-screen, .pfx-phone { position: relative; overflow: hidden; }
.pfx-screen { aspect-ratio: 16 / 9; border-radius: 4px; box-shadow: 0 18px 40px -24px #0008; }
.pfx-phone { aspect-ratio: 390 / 844; border-radius: 13% / 6%; border: 5px solid #141414; box-shadow: 0 18px 40px -24px #0008; }
.pfx-cv { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--body); font-variation-settings: "wdth" var(--wdth); line-height: 1.3; }
.pfx-phone .pfx-cv { width: 390px; height: 844px; padding: 54px 20px 24px; display: flex; flex-direction: column; }
.pfx-cv .pfx-mz, .pfx-cv .pfx-px { display: block; }
.pfx-cv .pfx-h { font-family: var(--head); font-weight: var(--hw); letter-spacing: var(--tr); text-transform: var(--case); line-height: 1.06; }
.pfx-screen .pfx-cv.deco-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; background: var(--primary); }
.pfx-screen .pfx-cv.deco-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(90deg, var(--primary) 0 60%, var(--accent) 60%); }
.pfx-screen .pfx-cv.deco-glow::before { content: ""; position: absolute; right: -300px; top: -400px; width: 1100px; height: 1100px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 22%, transparent), transparent); }
.pfx-cv .pfx-frame { position: absolute; inset: 40px; border: 1px solid var(--line); pointer-events: none; }
.pfx-cv .pfx-frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.pfx-cv .pfx-top { position: absolute; left: 96px; right: 96px; top: 72px; display: flex; justify-content: space-between; align-items: center; font-size: 28px; color: var(--dim); }
.pfx-cv .pfx-foot { position: absolute; left: 96px; right: 96px; bottom: 56px; display: flex; justify-content: space-between; font-size: 28px; color: var(--dim); }
.pfx-cv .pfx-foot b { color: var(--text); font-weight: 700; }
.pfx-screen .pfx-cv.deco-foot .pfx-foot { left: 0; right: 0; bottom: 0; height: 112px; padding: 0 96px; align-items: center; background: var(--surface); }
.pfx-cv .pfx-main { position: absolute; left: 96px; right: 96px; top: 196px; bottom: 184px; display: flex; flex-direction: column; }
.pfx-cv .pfx-k { font-size: 28px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pfx-cv.light .pfx-k { color: var(--primary); }
.pfx-cv .pfx-small { font-size: 28px; color: var(--dim); }
.pfx-cv .pfx-sub { font-size: 34px; color: var(--dim); margin-top: 20px; }
.pfx-cv .pfx-row { display: flex; justify-content: space-between; align-items: flex-start; }
.pfx-cv .pfx-h0 { font-size: 150px; }
.pfx-cv .pfx-h1 { font-size: 96px; margin-top: 12px; }
.pfx-cv .pfx-h2 { font-size: 76px; margin-top: 16px; }
.pfx-cv .pfx-q { font-size: 72px; margin-top: 24px; max-width: 1500px; }
.pfx-cv .pfx-draw { flex-direction: row; gap: 96px; }
.pfx-cv .pfx-draw > .pfx-px { flex: none; border-radius: var(--r); }
.pfx-cv .pfx-draw-r { display: flex; flex-direction: column; justify-content: center; }
.pfx-cv .pfx-prize { font-family: var(--head); font-weight: var(--hw); text-transform: var(--case); letter-spacing: var(--tr); font-size: 54px; line-height: 1.15; margin-top: 20px; }
.pfx-cv .pfx-rule { width: 120px; height: 3px; background: var(--primary); margin: 48px 0 36px; }
.pfx-cv .pfx-draw-r .pfx-small { margin-bottom: 16px; }
.pfx-cv .pfx-live { display: flex; align-items: center; gap: 14px; font-size: 30px; font-weight: 600; color: var(--dim); margin-top: 8px; }
.pfx-cv .pfx-live i { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); }
.pfx-cv .pfx-cands { margin-top: auto; display: grid; grid-template-columns: repeat(3, 540px); justify-content: space-between; }
.pfx-cv .pfx-cl { font-size: 34px; font-weight: 600; height: 40px; }
.pfx-cv .pfx-cand .pfx-px { border-radius: var(--r); margin-bottom: 20px; }
.pfx-cv .pfx-track { height: 12px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 18px; }
.pfx-cv .pfx-track i { display: block; height: 100%; background: var(--dim); border-radius: inherit; }
.pfx-cv .win .pfx-track i { background: var(--primary); }
.pfx-cv .pfx-pct { font-family: var(--head); font-weight: var(--hw); font-size: 48px; margin-top: 10px; }
.pfx-cv .win .pfx-pct { color: var(--primary); }
.pfx-cv .pfx-timer { width: 132px; height: 132px; border-radius: 50%; border: 8px solid var(--primary); display: grid; place-items: center; font-size: 52px; font-weight: 700; }
.pfx-cv .pfx-ans { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pfx-cv .pfx-ans div { display: flex; align-items: center; gap: 28px; padding: 30px 36px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); font-size: 44px; font-weight: 500; }
.pfx-cv .pfx-ans b { font-family: var(--head); color: var(--primary); font-size: 48px; width: 40px; }
.pfx-cv .pfx-bars { margin-top: auto; display: grid; gap: 28px; }
.pfx-cv .pfx-bar { display: grid; grid-template-columns: 560px 1fr 150px; align-items: center; gap: 40px; font-size: 38px; }
.pfx-cv .pfx-bar .pfx-track { height: 34px; margin: 0; border-radius: calc(var(--r) / 2); }
.pfx-cv .pfx-bar b { font-family: var(--head); font-weight: var(--hw); font-size: 60px; text-align: right; }
.pfx-cv .pfx-bar.win b { color: var(--primary); }
.pfx-cv .pfx-rally { flex-direction: row; gap: 96px; }
.pfx-cv .pfx-rally > div:first-child { flex: 1; display: flex; flex-direction: column; }
.pfx-cv .pfx-booths { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pfx-cv .pfx-booths div { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; padding: 22px 24px; background: var(--card); border-radius: var(--r); font-size: 30px; }
.pfx-cv .pfx-booths b { font-family: var(--head); color: var(--primary); font-size: 36px; }
.pfx-cv .pfx-booths em { font-style: normal; color: var(--dim); font-size: 28px; }
.pfx-cv .pfx-fin { width: 440px; flex: none; padding-left: 64px; border-left: 2px solid var(--line); display: flex; flex-direction: column; }
.pfx-cv .pfx-big { font-family: var(--head); font-weight: var(--hw); font-size: 180px; line-height: 1; color: var(--primary); background: var(--num); -webkit-background-clip: text; background-clip: text; }
.pfx-cv.deco-glow .pfx-big, .pfx-cv.deco-glow .pfx-count { color: transparent; }
.pfx-cv .pfx-fin .pfx-sub { margin-top: 8px; }
.pfx-cv .pfx-first { margin-top: auto; display: grid; gap: 18px; }
.pfx-cv .pfx-first > div:not(.pfx-small) { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 16px; font-size: 28px; color: var(--dim); }
.pfx-cv .pfx-first b { color: var(--primary); font-size: 30px; }
.pfx-cv .pfx-rain, .pfx-cv .pfx-prain { position: absolute; inset: 0; }
.pfx-cv .pfx-drop { position: absolute; display: grid; place-items: center; border-radius: var(--r); z-index: 0; }
.pfx-cv .pfx-drop .pfx-gift { width: 62%; height: 62%; }
.pfx-cv .pfx-drop.d0 { background: var(--primary); color: var(--on-primary); }
.pfx-cv .pfx-drop.d1 { background: var(--accent); color: var(--bg); opacity: .85; }
.pfx-cv .pfx-drop.d2 { background: var(--card); color: var(--primary); border: 2px solid var(--line); }
.pfx-cv .pfx-gift { display: block; }
.pfx-cv .pfx-rain-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); text-align: center; padding: 64px 96px; background: var(--bg); border-radius: var(--r); box-shadow: 0 0 0 2px var(--line); }
.pfx-cv .pfx-rain-c .pfx-h0 { margin: 16px 0 8px; }
.pfx-cv .pfx-count { font-family: var(--head); font-weight: var(--hw); font-size: 120px; line-height: 1; color: var(--primary); background: var(--num); -webkit-background-clip: text; background-clip: text; }
.pfx-phone .pfx-cv .pfx-ptop { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--dim); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pfx-phone .pfx-cv .pfx-pk { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 22px; }
.pfx-phone .pfx-cv.light .pfx-pk { color: var(--primary); }
.pfx-phone .pfx-cv .pfx-ph2 { font-size: 30px; margin-top: 8px; }
.pfx-phone .pfx-cv .pfx-ph3 { font-size: 23px; line-height: 1.2; margin-top: 8px; }
.pfx-phone .pfx-cv .pfx-ticket { margin-top: 24px; padding: 22px; text-align: center; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); }
.pfx-phone .pfx-cv .pfx-ticket small { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.pfx-phone .pfx-cv .pfx-ticket b { display: block; font-family: var(--head); font-weight: var(--hw); font-size: 60px; line-height: 1.1; color: var(--primary); }
.pfx-phone .pfx-cv .pfx-plist { margin-top: 18px; display: grid; gap: 10px; }
.pfx-phone .pfx-cv .pfx-plist div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; font-size: 15px; font-weight: 600; }
.pfx-phone .pfx-cv .pfx-plist .pfx-px { border-radius: calc(var(--r) / 2); }
.pfx-phone .pfx-cv .pfx-plist small { display: block; font-size: 11px; font-weight: 500; color: var(--dim); }
.pfx-phone .pfx-cv .pfx-pvote { margin-top: 18px; display: grid; gap: 10px; }
.pfx-phone .pfx-cv .pfx-pvote div { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 12px; padding: 8px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); font-size: 14px; font-weight: 600; }
.pfx-phone .pfx-cv .pfx-pvote .pfx-px { border-radius: calc(var(--r) / 2); }
.pfx-phone .pfx-cv .pfx-pvote em { font-style: normal; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; border: 1.5px solid var(--line); }
.pfx-phone .pfx-cv .pfx-pvote .on { border-color: var(--primary); }
.pfx-phone .pfx-cv .pfx-pvote .on em { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pfx-phone .pfx-cv .pfx-popts { margin-top: 20px; display: grid; gap: 10px; }
.pfx-phone .pfx-cv .pfx-popts div { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); font-size: 16px; font-weight: 500; }
.pfx-phone .pfx-cv .pfx-popts b { font-family: var(--head); color: var(--primary); }
.pfx-phone .pfx-cv .pfx-popts .on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pfx-phone .pfx-cv .pfx-popts .on b { color: var(--on-primary); }
.pfx-phone .pfx-cv .pfx-popts.radio i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dim); flex: none; }
.pfx-phone .pfx-cv .pfx-popts.radio .on { background: var(--card); color: var(--text); border: 2px solid var(--primary); }
.pfx-phone .pfx-cv .pfx-popts.radio .on i { border: 6px solid var(--primary); }
.pfx-phone .pfx-cv .pfx-pbtn { margin-top: auto; padding: 16px; text-align: center; font-weight: 700; font-size: 16px; border-radius: var(--r); background: var(--primary); color: var(--on-primary); }
.pfx-phone .pfx-cv .pfx-pnote { margin-top: auto; font-size: 13px; color: var(--dim); text-align: center; }
.pfx-phone .pfx-cv .pfx-stamps { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pfx-phone .pfx-cv .pfx-stamps div { aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: 6px; font-size: 12px; font-weight: 600; border: 1.5px dashed var(--line); border-radius: var(--r); color: var(--dim); }
.pfx-phone .pfx-cv .pfx-stamps .on { border: 0; background: var(--primary); color: var(--on-primary); }
.pfx-phone .pfx-cv .pfx-prain { position: relative; flex: 1; inset: auto; margin: 14px -20px 0; overflow: hidden; }
.pfx-phone .pfx-cv .pfx-score { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line); font-size: 15px; }
.pfx-phone .pfx-cv .pfx-score b { font-family: var(--head); font-size: 32px; color: var(--primary); }
.pf .pf-cap { margin-top: 12px; }
.pf .pf-cap b { display: block; font-size: 17px; }
.pf .pf-more { margin-top: 16px; }
@media (max-width: 760px) { .pf .pf-grid { grid-template-columns: 1fr; } }

.pfx-cv .pfx-ylogo { display: inline-flex; align-items: center; gap: .35em; font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.pfx-cv .pfx-ylogo img { height: 100%; width: auto; }
.pfx-cv .pfx-qa { flex-direction: row; gap: 96px; }
.pfx-cv .pfx-qa > div:first-child { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pfx-cv .pfx-qq { font-size: 76px; line-height: 1.15; margin-top: 24px; }
.pfx-cv .pfx-queue { width: 560px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.pfx-cv .pfx-queue > div:not(.pfx-small) { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 26px 28px; background: var(--card); border-radius: var(--r); font-size: 32px; line-height: 1.3; }
.pfx-cv .pfx-queue b { color: var(--accent); font-size: 36px; }
.pfx-phone .pfx-cv .pfx-ask { margin-top: 18px; height: 96px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); font-size: 15px; color: var(--dim); }
.pfx-phone .pfx-cv .pfx-pbtn-in { margin-top: 10px; }
.pfx-phone .pfx-cv .pfx-pvq { margin-top: 18px; display: grid; gap: 8px; }
.pfx-phone .pfx-cv .pfx-pvq div { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--card); font-size: 14px; line-height: 1.35; }
.pfx-phone .pfx-cv .pfx-pvq em { font-style: normal; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--line); }
.pfx-phone .pfx-cv .pfx-pvq em.on { border-color: var(--accent); color: var(--accent); }
.pfx-feature { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 4%; }
.pfx-feature .pfx-langs { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.pfx-feature .pfx-f-screen { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pfx-feature .pfx-f-phone { width: 22%; flex: none; display: flex; flex-direction: column; gap: 8px; }
.pfx-feature .pf-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.lp-hero-feature { margin: 0; }
.ycs-compare .pfx-screen { width: 100%; }
.hall-live .hall-cap { position: static; transform: none; display: block; margin: 14px auto 0; }
.lp-why { max-width: 820px; margin: 32px auto 0; }
/* ---- Showcase layout systems (public/js/portfolio.js LAYOUTS) ---- */
.pfx-screen .pfx-cv[class*=" L-"].deco-bar::before, .pfx-screen .pfx-cv[class*=" L-"].deco-band::before, .pfx-screen .pfx-cv[class*=" L-"].deco-glow::before { display: none; }
.pfx-cv[class*=" L-"] small { font-size: 26px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: block; }
.pfx-cv.light[class*=" L-"] small { color: var(--primary); }
.pfx-cv .pfx-qr svg { display: block; }
.pfx-cv .pfx-join { display: flex; align-items: center; gap: 24px; }
.pfx-cv .pfx-join small { color: var(--dim) !important; letter-spacing: 0; text-transform: none; font-size: 24px; }
.pfx-cv .pfx-join b { font-size: 30px; }
/* split (bank) */
.L-split .sp-l { position: absolute; left: 0; top: 0; bottom: 0; width: 700px; background: var(--surface); padding: 80px 72px; display: flex; flex-direction: column; gap: 48px; }
.L-split .sp-lc { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.L-split .sp-t { font-size: 64px; line-height: 1.12; }
.L-split .sp-lc p { font-size: 30px; color: var(--dim); }
.L-split .sp-big { font-family: var(--head); font-weight: 700; font-size: 150px; line-height: 1; color: var(--primary); }
.L-split .sp-timer { height: 14px; background: var(--line); border-radius: 99px; position: relative; margin-top: 20px; }
.L-split .sp-timer i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.L-split .sp-timer span { position: absolute; right: 0; top: 26px; font-size: 28px; color: var(--dim); }
.L-split .sp-r { position: absolute; left: 700px; right: 0; top: 0; bottom: 0; padding: 96px 96px; display: flex; flex-direction: column; justify-content: center; }
.L-split .sp-win { text-align: left; }
.L-split .sp-win p { font-size: 36px; color: var(--dim); margin: 24px 0 64px; }
.L-split .sp-prize { display: flex; gap: 32px; align-items: center; padding-top: 40px; border-top: 2px solid var(--line); }
.L-split .sp-prize b { display: block; font-size: 40px; margin-top: 8px; }
.L-split .sp-rows { display: grid; gap: 22px; }
.L-split .sp-row { display: grid; grid-template-columns: auto 1fr 160px; gap: 36px; align-items: center; padding: 22px 28px; background: var(--card); border-radius: var(--r); border-left: 8px solid transparent; }
.L-split .sp-rows.bars .sp-row { grid-template-columns: 1fr 160px; }
.L-split .sp-row.win { border-left-color: var(--primary); }
.L-split .sp-rn b { font-size: 36px; display: block; margin-bottom: 14px; }
.L-split .sp-row em { font-style: normal; font-size: 60px; font-weight: 700; text-align: right; }
.L-split .sp-row.win em { color: var(--primary); }
.L-split .sp-ans { display: grid; gap: 22px; }
.L-split .sp-ans div { display: flex; align-items: center; gap: 36px; padding: 30px 36px; border: 2px solid var(--line); border-radius: var(--r); font-size: 46px; }
.L-split .sp-ans b { width: 76px; height: 76px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: 38px; flex: none; }
.L-split .sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.L-split .sp-grid div { padding: 36px 32px; background: var(--card); border-radius: var(--r); display: grid; gap: 10px; }
.L-split .sp-grid b { color: var(--primary); font-size: 30px; }
.L-split .sp-grid span { font-size: 36px; font-weight: 600; }
.L-split .sp-grid em { font-style: normal; color: var(--dim); font-size: 28px; }
.L-split .sp-grid .top { outline: 3px solid var(--primary); outline-offset: -3px; }
.L-split .sp-rain { position: absolute; inset: 0; }
/* diag (energy) */
.L-diag .dg-cut { position: absolute; right: -200px; top: -100px; width: 980px; height: 1400px; background: var(--primary); transform: rotate(18deg); }
.L-diag .dg-logo { position: absolute; left: 96px; top: 72px; }
.L-diag .dg-foot { position: absolute; left: 96px; bottom: 60px; display: flex; gap: 20px; font-size: 30px; font-weight: 800; letter-spacing: .06em; }
.L-diag .dg-foot span { background: var(--primary); color: var(--on-primary); padding: 4px 14px; transform: skewX(-12deg); }
.L-diag small { color: var(--primary) !important; font-weight: 800 !important; }
.L-diag .dg-t { font-size: 104px; line-height: .92; }
.L-diag .dg-ghost { position: absolute; left: 60px; top: 150px; font: 800 340px/1 var(--head); font-variation-settings: "wdth" 75; color: transparent; -webkit-text-stroke: 3px var(--line); letter-spacing: -.02em; }
.L-diag .dg-photo { position: absolute; right: 0; top: 160px; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.L-diag .dg-main { position: absolute; left: 96px; top: 420px; width: 900px; display: grid; gap: 24px; }
.L-diag .dg-name { background: var(--primary); padding: 14px 18px; width: max-content; transform: skewX(-10deg); }
.L-diag .dg-main p { font-size: 34px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.L-diag .dg-head { position: absolute; left: 96px; top: 180px; width: 1100px; display: grid; gap: 16px; }
.L-diag .dg-head.dg-c { left: 0; right: 0; width: auto; top: 280px; text-align: center; justify-items: center; }
.L-diag .dg-q { font-size: 76px; line-height: 1; }
.L-diag .dg-cards { position: absolute; left: 96px; right: 96px; bottom: 150px; display: flex; gap: 28px; }
.L-diag .dg-card { position: relative; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.L-diag .dg-num { position: absolute; left: 60px; bottom: 70px; font: 800 150px/1 var(--head); font-variation-settings: "wdth" 75; color: #fff; text-shadow: 0 4px 30px #000c; }
.L-diag .dg-card.win .dg-num { color: var(--primary); }
.L-diag .dg-num sup { font-size: 60px; }
.L-diag .dg-nm { position: absolute; left: 60px; bottom: 30px; font-size: 26px; font-weight: 700; }
.L-diag .dg-tiles { position: absolute; left: 96px; right: 96px; bottom: 170px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.L-diag .dg-tiles div { transform: skewX(-12deg); border: 4px solid var(--primary); background: var(--bg); padding: 36px 30px; font-size: 40px; font-weight: 800; text-transform: uppercase; display: grid; gap: 10px; }
.L-diag .dg-tiles b { color: var(--primary); font-size: 54px; }
.L-diag .dg-clock { position: absolute; right: 140px; top: 170px; font: 800 220px/1 var(--head); font-variation-settings: "wdth" 75; color: var(--bg); }
.L-diag .dg-clock.big { position: static; color: var(--primary); font-size: 260px; }
.L-diag .dg-eq { position: absolute; left: 96px; right: 860px; bottom: 150px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: end; height: 520px; }
.L-diag .dg-eq div { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; text-transform: uppercase; }
.L-diag .dg-eq b { font: 800 72px/1 var(--head); font-variation-settings: "wdth" 75; margin-bottom: 12px; }
.L-diag .dg-eq i { background: #ffffff38; }
.L-diag .dg-eq .win i { background: var(--primary); }
.L-diag .dg-eq span { font-size: 24px; font-weight: 700; margin-top: 14px; }
.L-diag .dg-board { position: absolute; left: 96px; top: 420px; width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.L-diag .dg-board div { display: grid; grid-template-columns: 50px 1fr auto; gap: 18px; font-size: 32px; font-weight: 800; text-transform: uppercase; padding: 14px 0; border-bottom: 2px solid var(--line); }
.L-diag .dg-board b, .L-diag .dg-board .win span { color: var(--primary); }
.L-diag .dg-board em { font-style: normal; }
.L-diag .dg-fin { position: absolute; right: 150px; top: 420px; text-align: right; color: var(--bg); }
.L-diag .dg-fin b { display: block; font: 800 300px/1 var(--head); font-variation-settings: "wdth" 75; }
.L-diag .dg-fin span { font-size: 30px; font-weight: 800; }
.L-diag .dg-rain { position: absolute; inset: 0; }
/* classic (airline) */
.L-classic .cl-top { position: absolute; left: 0; right: 0; top: 76px; display: flex; justify-content: center; }
.L-classic .cl-foot { position: absolute; left: 0; right: 0; bottom: 70px; text-align: center; font-size: 26px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.L-classic .cl-c { position: absolute; left: 0; right: 0; top: 180px; bottom: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; }
.L-classic .cl-arch { border-radius: 400px 400px 0 0; overflow: hidden; border: 2px solid var(--primary); padding: 10px; border-bottom-width: 2px; }
.L-classic .cl-arch .pfx-px { border-radius: 400px 400px 0 0; }
.L-classic .cl-p { font-size: 52px; max-width: 1100px; }
.L-classic .cl-t { font-size: 84px; }
.L-classic .cl-q { font-size: 70px; max-width: 1400px; line-height: 1.15; }
.L-classic .cl-orn { display: flex; align-items: center; gap: 18px; }
.L-classic .cl-orn i { width: 160px; height: 2px; background: var(--primary); }
.L-classic .cl-orn b { width: 16px; height: 16px; background: var(--primary); transform: rotate(45deg); }
.L-classic .cl-c p { font-size: 32px; color: var(--dim); }
.L-classic .cl-arches { display: flex; gap: 64px; align-items: flex-end; }
.L-classic .cl-arches > div { display: grid; justify-items: center; gap: 14px; }
.L-classic .cl-arches .win .cl-arch { border-width: 4px; }
.L-classic .cl-n { font-size: 60px; }
.L-classic .cl-arches .win .cl-n { color: var(--primary); }
.L-classic .cl-menu { display: grid; gap: 18px; width: 900px; }
.L-classic .cl-menu div { display: grid; grid-template-columns: 90px 1fr; text-align: left; font-size: 42px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.L-classic .cl-menu b { font-family: var(--head); color: var(--primary); font-weight: 500; }
.L-classic .cl-lead { display: grid; gap: 22px; width: 1100px; }
.L-classic .cl-lead div { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: end; font-size: 42px; }
.L-classic .cl-lead i { border-bottom: 3px dotted var(--line); margin-bottom: 12px; }
.L-classic .cl-lead b { font-family: var(--head); font-weight: 500; color: var(--primary); font-size: 52px; }
.L-classic .cl-stamps { display: grid; grid-template-columns: repeat(9, 1fr); gap: 18px; }
.L-classic .cl-stamps div { width: 150px; height: 150px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-content: center; gap: 4px; }
.L-classic .cl-stamps div.on { border: 3px solid var(--primary); }
.L-classic .cl-stamps b { font-family: var(--head); font-size: 40px; font-weight: 500; }
.L-classic .cl-stamps span { font-size: 16px; color: var(--dim); }
.L-classic .cl-ring { width: 340px; height: 340px; border-radius: 50%; border: 3px solid var(--primary); display: grid; place-items: center; font: 500 100px var(--head); background: var(--bg); box-shadow: 0 0 0 16px var(--bg), 0 0 0 18px var(--line); }
.L-classic .cl-rain { position: absolute; inset: 0; opacity: .7; }
/* data (pharma) */
.L-data .dt-band { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(90deg, var(--primary) 0 60%, var(--accent) 60%); }
.L-data .dt-top { position: absolute; left: 96px; right: 96px; top: 64px; display: flex; justify-content: space-between; align-items: center; font-size: 26px; color: var(--dim); padding-bottom: 22px; border-bottom: 2px solid var(--line); }
.L-data .dt-foot { position: absolute; left: 96px; right: 96px; bottom: 50px; display: flex; justify-content: space-between; font-size: 26px; color: var(--dim); padding-top: 18px; border-top: 2px solid var(--line); }
.L-data .dt-foot b { color: var(--text); }
.L-data .dt-h { position: absolute; left: 96px; top: 190px; width: 1500px; font-size: 60px; line-height: 1.15; }
.L-data .dt-hc { top: 200px; left: 0; right: 0; width: auto; text-align: center; }
.L-data .dt-draw { position: absolute; left: 96px; right: 96px; top: 200px; bottom: 150px; display: grid; grid-template-columns: 760px 1fr; gap: 80px; align-items: center; }
.L-data .dt-fig small { color: var(--dim) !important; letter-spacing: 0; text-transform: none; margin-top: 14px; }
.L-data .dt-card { display: grid; gap: 18px; }
.L-data .dt-card p { font-size: 32px; color: var(--dim); }
.L-data .dt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.L-data .dt-stats div { padding: 26px; background: var(--surface); border-radius: var(--r); }
.L-data .dt-stats b { display: block; font-size: 64px; color: var(--primary); }
.L-data .dt-stats span { font-size: 26px; color: var(--dim); }
.L-data .dt-chart { position: absolute; left: 96px; right: 96px; top: 340px; bottom: 150px; }
.L-data .dt-grid { position: absolute; inset: 0 0 200px 0; display: flex; flex-direction: column; justify-content: space-between; }
.L-data .dt-grid div { border-top: 1px solid var(--line); position: relative; }
.L-data .dt-grid span { position: absolute; left: 0; top: -16px; font-size: 22px; color: var(--dim); background: var(--bg); padding-right: 10px; }
.L-data .dt-cols { position: absolute; left: 140px; right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 120px; }
.L-data .dt-cols > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 0; }
.L-data .dt-cols b { font-size: 48px; margin-bottom: 10px; }
.L-data .dt-cols i { width: 160px; background: #a9c4c9; max-height: calc(100% - 270px); }
.L-data .dt-cols .win i { background: var(--primary); }
.L-data .dt-cols .win b { color: var(--primary); }
.L-data .dt-cols .pfx-px { margin-top: 20px; border-radius: 6px; }
.L-data .dt-cols span { font-size: 26px; margin-top: 10px; height: 34px; }
.L-data .dt-table { position: absolute; left: 96px; right: 96px; top: 400px; display: grid; }
.L-data .dt-table.zones { top: 320px; }
.L-data .dt-tr { display: grid; grid-template-columns: 90px 1fr 160px; gap: 30px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 40px; }
.L-data .zones .dt-tr { grid-template-columns: 70px 420px 1fr 140px; padding: 12px 0; font-size: 32px; }
.L-data .dt-tr.th { font-size: 24px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; padding: 12px 0; }
.L-data .dt-tr b { color: var(--primary); }
.L-data .dt-tr em { font-style: normal; color: var(--dim); text-align: right; }
.L-data .zones .pfx-track { margin: 0; height: 16px; }
.L-data .zones .pfx-track i { background: var(--primary); }
.L-data .dt-chart.bars { display: grid; gap: 34px; align-content: end; padding-bottom: 20px; }
.L-data .dt-axis { display: grid; grid-template-columns: repeat(4, 1fr) 0; margin-left: 520px; font-size: 22px; color: var(--dim); order: 9; }
.L-data .dt-bar { display: grid; grid-template-columns: 500px 1fr; gap: 20px; align-items: center; font-size: 36px; }
.L-data .dt-bt { position: relative; height: 56px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%); }
.L-data .dt-bt i { display: block; height: 100%; background: #a9c4c9; }
.L-data .dt-bar.win .dt-bt i { background: var(--primary); }
.L-data .dt-bt b { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 16px; font-size: 40px; }
.L-data .dt-bt i + b { left: auto; }
.L-data .dt-bar .dt-bt { display: flex; align-items: center; }
.L-data .dt-bar .dt-bt b { position: static; transform: none; }
.L-data .dt-rain { position: absolute; left: 96px; right: 96px; top: 330px; height: 640px; overflow: hidden; opacity: .55; }
.L-data .dt-kpis { position: absolute; left: 300px; right: 300px; top: 470px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.L-data .dt-kpis div { background: var(--bg); border: 2px solid var(--line); border-radius: var(--r); padding: 40px; text-align: center; }
.L-data .dt-kpis b { display: block; font-size: 96px; color: var(--primary); }
.L-data .dt-kpis span { font-size: 28px; color: var(--dim); }
/* editorial (fashion retail) */
.L-editorial .ed-mast { position: absolute; left: 96px; right: 96px; top: 60px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 3px solid var(--text); font-size: 26px; letter-spacing: .2em; text-transform: uppercase; z-index: 2; }
.L-editorial .ed-foot { position: absolute; left: 96px; bottom: 50px; font-size: 26px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); z-index: 2; }
.L-editorial .ed-big { font-size: 170px; line-height: .88; letter-spacing: -.02em; }
.L-editorial .ed-big em { color: var(--primary); }
.L-editorial .ed-bleed { position: absolute; right: 0; top: 0; }
.L-editorial .ed-copy { position: absolute; left: 96px; top: 230px; width: 900px; display: grid; gap: 28px; z-index: 1; }
.L-editorial .ed-copy p { font-size: 32px; color: var(--dim); }
.L-editorial .ed-over { position: absolute; left: 96px; top: 170px; width: 1300px; z-index: 2; mix-blend-mode: normal; }
.L-editorial .ed-collage { position: absolute; inset: 0; }
.L-editorial .ed-pic { position: absolute; }
.L-editorial .ed-pic.p0 { right: 140px; top: 150px; transform: rotate(3deg); }
.L-editorial .ed-pic.p1 { right: 720px; top: 420px; transform: rotate(-4deg); }
.L-editorial .ed-pic.p2 { left: 120px; top: 520px; transform: rotate(2deg); }
.L-editorial .ed-pic .pfx-px { box-shadow: 0 30px 60px -20px #000c; outline: 14px solid #fff; }
.L-editorial .ed-sticker { position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font: 400 52px var(--head); transform: rotate(-8deg); }
.L-editorial .ed-pic > span, .L-editorial .ed-pic > .pfx-mz { position: absolute; left: 0; bottom: -60px; font-size: 26px; }
.L-editorial .ed-qn { position: absolute; right: 60px; top: 40px; font: 400 900px/1 var(--head); color: var(--primary); opacity: .18; }
.L-editorial .ed-q { position: absolute; left: 96px; top: 200px; width: 1400px; font-size: 104px; line-height: 1; }
.L-editorial .ed-tags { position: absolute; left: 96px; right: 96px; bottom: 140px; display: flex; flex-wrap: wrap; gap: 26px; }
.L-editorial .ed-tags div { display: flex; align-items: center; gap: 18px; padding: 24px 44px 24px 30px; background: #fff; color: #1e1a2b; font-size: 40px; border-radius: 60px 14px 14px 60px; }
.L-editorial .ed-tags i { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.L-editorial .ed-tags b { color: var(--primary); }
.L-editorial .ed-index { position: absolute; left: 96px; right: 96px; bottom: 130px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.L-editorial .ed-index div { border-top: 3px solid var(--text); padding-top: 20px; }
.L-editorial .ed-index b { display: block; font: 400 200px/1 var(--head); }
.L-editorial .ed-index .win b { color: var(--primary); }
.L-editorial .ed-index span { font-size: 34px; }
.L-editorial .ed-list { position: absolute; left: 96px; top: 500px; width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 60px; }
.L-editorial .ed-list div { display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: center; font-size: 36px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.L-editorial .ed-list i { width: 30px; height: 30px; border: 2px solid var(--dim); border-radius: 6px; }
.L-editorial .ed-list .on i { background: var(--primary); border-color: var(--primary); }
.L-editorial .ed-list .on span { text-decoration: line-through; color: var(--dim); }
.L-editorial .ed-list em { font-style: normal; color: var(--dim); font-size: 28px; }
.L-editorial .ed-side { position: absolute; right: 96px; top: 480px; text-align: right; }
.L-editorial .ed-side b { display: block; font: 400 280px/1 var(--head); color: var(--primary); }
.L-editorial .ed-side span { font-size: 32px; }
.L-editorial .ed-rain { position: absolute; inset: 0; }
.L-editorial .ed-center { position: absolute; left: 0; right: 0; top: 340px; text-align: center; font-size: 150px; z-index: 1; }
.L-editorial .ed-time { position: absolute; left: 0; right: 0; top: 560px; text-align: center; font: 400 200px var(--head); z-index: 1; }
/* report (consulting) */
.L-report .rp-top { position: absolute; left: 96px; right: 96px; top: 64px; display: flex; justify-content: space-between; align-items: center; font-size: 24px; color: var(--dim); }
.L-report .rp-ex { position: absolute; left: 96px; right: 96px; top: 170px; display: flex; gap: 30px; align-items: baseline; padding-bottom: 20px; border-bottom: 3px solid var(--text); }
.L-report .rp-ex b { font-size: 28px; color: var(--primary); text-transform: uppercase; letter-spacing: .1em; }
.L-report .rp-ex span { font: 500 44px var(--head); }
.L-report .rp-src { position: absolute; left: 96px; right: 96px; bottom: 50px; display: flex; justify-content: space-between; font-size: 22px; color: var(--dim); padding-top: 14px; border-top: 1px solid var(--line); }
.L-report .rp-cols { position: absolute; left: 96px; right: 96px; top: 310px; bottom: 140px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; }
.L-report .rp-col { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.L-report .rp-col.win { border-top: 4px solid var(--primary); }
.L-report .rp-col p { font-size: 28px; color: var(--dim); }
.L-report .rp-num { font: 500 140px/1 var(--head); }
.L-report .rp-col.win .rp-num { color: var(--primary); }
.L-report .rp-rule { height: 1px; background: var(--line); }
.L-report .rp-fig { font-size: 48px; line-height: 1.15; }
.L-report .rp-q { position: absolute; left: 96px; top: 300px; width: 1400px; font-size: 76px; line-height: 1.12; }
.L-report .rp-opts { position: absolute; left: 96px; right: 96px; bottom: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
.L-report .rp-opts div { display: flex; gap: 24px; font-size: 44px; padding: 22px 0; border-top: 1px solid var(--line); }
.L-report .rp-opts b { color: var(--primary); }
.L-report .rp-kpis { position: absolute; left: 96px; right: 96px; bottom: 150px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; }
.L-report .rp-kpis .pfx-track { height: 8px; margin: 16px 0; border-radius: 0; }
.L-report .rp-kpis .pfx-track i { background: var(--text); border-radius: 0; }
.L-report .rp-kpis .win .pfx-track i { background: var(--primary); }
.L-report .rp-kpis .rp-num { font-size: 120px; }
.L-report .rp-kpis .win .rp-num { color: var(--primary); }
.L-report .rp-kpis p { font-size: 30px; }
.L-report .rp-table { position: absolute; left: 96px; right: 96px; top: 290px; display: grid; }
.L-report .rp-tr { display: grid; grid-template-columns: 80px 1fr 260px 200px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 32px; }
.L-report .rp-tr.th { font-size: 22px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); border-bottom: 2px solid var(--text); }
.L-report .rp-tr > span:nth-child(n+3) { text-align: right; }
.L-report .rp-rain { position: absolute; left: 96px; right: 96px; top: 300px; height: 560px; overflow: hidden; opacity: .25; }
/* spot (hotel gala) */
.L-spot .st-arcs { position: absolute; left: 50%; top: 560px; transform: translate(-50%, -50%); }
.L-spot .st-arcs i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 2px solid; transform: translate(-50%, -50%); }
.L-spot .st-arcs i:nth-child(1) { width: 900px; height: 900px; border-color: #f6c44533; }
.L-spot .st-arcs i:nth-child(2) { width: 1160px; height: 1160px; border-color: #f08a4b26; }
.L-spot .st-arcs i:nth-child(3) { width: 1420px; height: 1420px; border-color: #c86fa61f; }
.L-spot .st-logo { position: absolute; left: 0; right: 0; top: 60px; display: flex; justify-content: center; }
.L-spot .st-foot { position: absolute; left: 0; right: 0; bottom: 50px; text-align: center; font-size: 28px; color: var(--dim); letter-spacing: .1em; }
.L-spot .st-ring { position: absolute; left: 50%; top: 560px; transform: translate(-50%, -50%); width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(closest-side, #f08a4b22, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 80px; }
.L-spot .st-ring.sm { width: 640px; height: 640px; }
.L-spot .st-ring p { font-size: 30px; color: var(--dim); }
.L-spot .st-t { font-size: 60px; line-height: 1.1; }
.L-spot .st-q { font-size: 50px; line-height: 1.15; }
.L-spot .st-big { font-size: 180px; line-height: 1; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; }
.L-spot .st-orb { position: absolute; left: 200px; top: 380px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px var(--bg), 0 0 0 12px var(--accent); }
.L-spot .st-head { position: absolute; left: 0; right: 0; top: 180px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.L-spot .st-circles { position: absolute; left: 0; right: 0; top: 380px; display: flex; justify-content: center; align-items: center; gap: 80px; }
.L-spot .st-c { display: grid; justify-items: center; gap: 16px; }
.L-spot .st-c .pfx-px { border-radius: 50%; }
.L-spot .st-c.c0 { order: 2; }
.L-spot .st-c.c0 .pfx-px { box-shadow: 0 0 0 8px var(--bg), 0 0 0 11px var(--accent); }
.L-spot .st-c.c1 { order: 1; } .L-spot .st-c.c2 { order: 3; }
.L-spot .st-pct { font: 400 64px var(--head); background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; }
.L-spot .st-time { width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--accent); display: grid; place-items: center; font-size: 44px; font-weight: 700; }
.L-spot .st-pills .pl { position: absolute; padding: 28px 44px; border-radius: 99px; background: var(--card); border: 2px solid var(--line); font-size: 38px; display: flex; gap: 20px; }
.L-spot .st-pills b { color: var(--accent); }
.L-spot .st-pills .p0 { left: 140px; top: 300px; } .L-spot .st-pills .p1 { right: 140px; top: 300px; } .L-spot .st-pills .p2 { left: 140px; top: 720px; } .L-spot .st-pills .p3 { right: 140px; top: 720px; }
.L-spot .st-donut { position: absolute; left: 180px; top: 230px; width: 660px; height: 660px; }
.L-spot .st-donut i { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 67%); mask: radial-gradient(closest-side, transparent 66%, #000 67%); }
.L-spot .st-dc { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.L-spot .st-dc b { font: 400 120px/1 var(--head); }
.L-spot .st-dc span { font-size: 28px; color: var(--dim); }
.L-spot .st-legend { position: absolute; left: 960px; right: 140px; top: 260px; display: grid; gap: 26px; }
.L-spot .st-legend > div:not(.st-q) { display: grid; grid-template-columns: 30px 1fr auto; gap: 20px; align-items: center; font-size: 36px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.L-spot .st-legend i { width: 26px; height: 26px; border-radius: 50%; }
.L-spot .st-wheel .st-n { position: absolute; width: 200px; height: 110px; border-radius: 60px; border: 2px dashed var(--line); display: grid; place-items: center; font-size: 26px; text-align: center; padding: 0 16px; }
.L-spot .st-wheel .st-n.on { border: 2px solid var(--accent); background: #f6c44514; }
.L-spot .st-rain { position: absolute; inset: 0; opacity: .7; }
/* dash (software) */
.L-dash .ds-bar { position: absolute; left: 0; right: 0; top: 0; height: 120px; padding: 0 64px; display: flex; align-items: center; gap: 48px; background: var(--surface); border-bottom: 1px solid var(--line); }
.L-dash .ds-tabs { display: flex; gap: 8px; }
.L-dash .ds-tabs span { padding: 12px 26px; border-radius: 99px; font-size: 26px; color: var(--dim); }
.L-dash .ds-tabs .on { background: var(--card); color: var(--text); }
.L-dash .ds-chip { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 600; padding: 10px 22px; border-radius: 99px; border: 1px solid var(--line); margin-left: auto; }
.L-dash .ds-chip i { width: 14px; height: 14px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 6px #2ecc7133; }
.L-dash .ds-url { font-size: 26px; color: var(--dim); }
.L-dash .ds-body { position: absolute; left: 64px; right: 64px; top: 170px; bottom: 64px; display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
.L-dash .ds-card { background: var(--card); border-radius: calc(var(--r) * 2); border: 1px solid var(--line); overflow: hidden; position: relative; }
.L-dash .ds-hero { display: grid; grid-template-columns: 640px 1fr; align-items: center; }
.L-dash .ds-hc { padding: 60px; display: grid; gap: 22px; }
.L-dash .ds-hc p { font-size: 30px; color: var(--dim); }
.L-dash .ds-badge { justify-self: start; padding: 14px 26px; border-radius: 99px; background: #3aa0ff22; color: var(--primary); font-size: 28px; font-weight: 700; }
.L-dash .ds-col { display: grid; gap: 32px; align-content: start; }
.L-dash .ds-tile { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--r) * 2); padding: 34px; display: grid; gap: 8px; }
.L-dash .ds-tile small { color: var(--dim) !important; letter-spacing: .04em; font-size: 22px; }
.L-dash .ds-tile b { font-size: 60px; letter-spacing: -.02em; }
.L-dash .ds-tile span { font-size: 24px; color: var(--dim); }
.L-dash .ds-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-content: center; }
.L-dash .ds-cards .ds-card.win { border-color: var(--primary); box-shadow: 0 0 0 3px #3aa0ff44; }
.L-dash .ds-cards .pfx-px { width: 100% !important; height: auto !important; aspect-ratio: 500 / 320; }
.L-dash .ds-cb { padding: 26px 28px; display: grid; gap: 16px; }
.L-dash .ds-cb b { font-size: 30px; }
.L-dash .ds-meter { height: 12px; border-radius: 99px; background: var(--line); }
.L-dash .ds-meter i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.L-dash .ds-row { display: flex; justify-content: space-between; font-size: 40px; font-weight: 800; }
.L-dash .ds-row em { font-style: normal; font-size: 22px; color: var(--accent); align-self: center; }
.L-dash .ds-qc { padding: 64px; display: flex; flex-direction: column; gap: 30px; }
.L-dash .ds-q { font-size: 66px; line-height: 1.08; }
.L-dash .ds-keys { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.L-dash .ds-keys div { display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: 38px; }
.L-dash kbd { font: 800 30px var(--body); width: 60px; height: 60px; display: grid; place-items: center; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); border-bottom-width: 5px; color: var(--primary); }
.L-dash .ds-stack { margin-top: auto; height: 70px; border-radius: 14px; overflow: hidden; display: flex; }
.L-dash .ds-stack i { height: 100%; }
.L-dash .s0 { background: var(--primary); } .L-dash .s1 { background: var(--accent); } .L-dash .s2 { background: #7c5cff; } .L-dash .s3 { background: #5b6472; }
.L-dash .ds-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.L-dash .ds-legend div { display: grid; grid-template-columns: 22px 1fr auto; gap: 16px; align-items: center; font-size: 32px; }
.L-dash .ds-legend i { width: 22px; height: 22px; border-radius: 6px; }
.L-dash .ds-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.L-dash .ds-badges div { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--r) * 2); padding: 26px; display: grid; grid-template-columns: 70px 1fr; gap: 4px 20px; align-items: center; opacity: .55; }
.L-dash .ds-badges .on { opacity: 1; }
.L-dash .ds-badges i { grid-row: span 2; width: 70px; height: 70px; border-radius: 18px; background: var(--surface); border: 2px dashed var(--line); }
.L-dash .ds-badges .on i { background: linear-gradient(135deg, var(--primary), #7c5cff); border: 0; }
.L-dash .ds-badges b { font-size: 30px; }
.L-dash .ds-badges span { font-size: 24px; color: var(--dim); }
.L-dash .ds-game { min-height: 0; }
.L-dash .ds-hud { position: absolute; left: 40px; top: 30px; display: flex; gap: 24px; align-items: baseline; padding: 16px 28px; border-radius: 16px; background: #0e1116cc; }
.L-dash .ds-hud b { font-size: 64px; }
.L-dash .ds-hud span { font-size: 30px; color: var(--dim); }

.pfx-cv .dg-head, .pfx-cv .ed-center, .pfx-cv .ed-time, .pfx-cv .cl-medal, .pfx-cv .st-ring, .pfx-cv .dt-kpis, .pfx-cv .dt-hc, .pfx-cv .rp-cols, .pfx-cv .ds-hud, .pfx-cv .sp-l { z-index: 2; }
.pfx-cv .dg-rain .pfx-drop, .pfx-cv .ed-rain .pfx-drop, .pfx-cv .st-rain .pfx-drop, .pfx-cv .cl-rain .pfx-drop { opacity: .55; }
.L-diag .dg-board { width: 860px; }
.L-data .dt-chart.bars { display: flex; flex-direction: column; justify-content: flex-end; gap: 30px; }
.L-data .dt-bar { display: grid; grid-template-columns: 480px 1fr 140px; gap: 30px; align-items: center; font-size: 38px; }
.L-data .dt-bar .dt-bt { display: block; height: 56px; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 25%); }
.L-data .dt-bar .dt-bt b { display: none; }
.L-data .dt-bar::after { content: attr(data-v); font-size: 44px; font-weight: 600; text-align: right; }
.L-data .dt-bar.win::after { color: var(--primary); }
.L-data .dt-axis { margin-left: 510px; margin-right: 170px; display: flex; justify-content: space-between; }
.L-data .dt-chart.bars > * { flex: none; }
.L-data .dt-bar .dt-bt { align-self: center; }
.L-diag .dg-head .dg-clock.big { margin-top: 10px; }
.L-data .dt-hbars { position: absolute; left: 96px; right: 96px; bottom: 160px; display: grid; gap: 34px; }
.L-data .dt-hb { display: grid; grid-template-columns: 480px 1fr 150px; gap: 30px; align-items: center; font-size: 38px; }
.L-data .dt-ht { height: 60px; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 25%), var(--surface); }
.L-data .dt-ht i { display: block; height: 100%; background: #a9c4c9; }
.L-data .dt-hb.win .dt-ht i { background: var(--primary); }
.L-data .dt-hb b { font-size: 48px; text-align: right; }
.L-data .dt-hb.win b { color: var(--primary); }
.L-data .dt-hx { margin-top: -20px; }
.L-data .dt-hscale { display: flex; justify-content: space-between; font-size: 22px; color: var(--dim); }
.L-data .dt-hscale em { font-style: normal; }
/* Guest phones per layout system */
.pfx-phone .L-split .pfx-ptop { margin: -54px -20px 0; padding: 56px 20px 16px; background: var(--surface); border: 0; }
.pfx-phone .L-split .pfx-popts div, .pfx-phone .L-split .pfx-pvote div, .pfx-phone .L-split .pfx-ticket { border-left: 5px solid var(--primary); border-radius: 6px; }
.pfx-phone .L-diag .pfx-cv, .pfx-phone .pfx-cv.L-diag { background: linear-gradient(160deg, var(--bg) 0 62%, var(--primary) 62%); }
.pfx-phone .L-diag .pfx-ph2, .pfx-phone .L-diag .pfx-ph3 { font-size: 30px; line-height: .95; }
.pfx-phone .L-diag .pfx-popts div, .pfx-phone .L-diag .pfx-pvote div, .pfx-phone .L-diag .pfx-score, .pfx-phone .L-diag .pfx-ticket { transform: skewX(-8deg); border: 2px solid var(--primary); border-radius: 0; text-transform: uppercase; font-weight: 800; }
.pfx-phone .L-diag .pfx-pbtn { transform: skewX(-8deg); border-radius: 0; text-transform: uppercase; background: var(--bg); color: var(--primary); }
.pfx-phone .L-classic .pfx-cv, .pfx-phone .pfx-cv.L-classic { text-align: center; box-shadow: inset 0 0 0 12px var(--bg), inset 0 0 0 13px var(--line); }
.pfx-phone .L-classic .pfx-ptop { justify-content: center; border-bottom: 0; }
.pfx-phone .L-classic .pfx-popts div, .pfx-phone .L-classic .pfx-pvote div { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; justify-content: center; }
.pfx-phone .L-classic .pfx-popts .on { background: none; color: var(--primary); border-bottom: 2px solid var(--primary); }
.pfx-phone .L-classic .pfx-ticket { border-radius: 200px 200px 0 0; border-color: var(--primary); }
.pfx-phone .L-classic .pfx-pbtn { background: none; border: 1.5px solid var(--primary); color: var(--primary); border-radius: 0; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
.pfx-phone .L-data .pfx-popts div, .pfx-phone .L-data .pfx-pvote div { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px; }
.pfx-phone .L-data .pfx-popts .on { background: var(--surface); color: var(--text); border-left: 4px solid var(--primary); }
.pfx-phone .L-data .pfx-popts .on b { color: var(--primary); }
.pfx-phone .L-data .pfx-ptop { border-top: 5px solid var(--primary); margin: -54px -20px 0; padding: 54px 20px 14px; }
.pfx-phone .L-editorial .pfx-ph2, .pfx-phone .L-editorial .pfx-ph3 { font-size: 34px; line-height: 1; }
.pfx-phone .L-editorial .pfx-popts { grid-template-columns: 1fr 1fr; }
.pfx-phone .L-editorial .pfx-popts div { border-radius: 40px 8px 8px 40px; background: #fff; color: #1e1a2b; border: 0; }
.pfx-phone .L-editorial .pfx-popts .on { background: var(--primary); color: #fff; }
.pfx-phone .L-editorial .pfx-pvote div { border: 0; background: none; grid-template-columns: 1fr auto; padding: 0; }
.pfx-phone .L-editorial .pfx-pvote .pfx-px { grid-row: span 2; width: 100% !important; height: auto !important; aspect-ratio: 112 / 96; outline: 6px solid #fff; }
.pfx-phone .L-report .pfx-ptop { border-bottom: 2px solid var(--text); }
.pfx-phone .L-report .pfx-popts div, .pfx-phone .L-report .pfx-pvote div, .pfx-phone .L-report .pfx-ticket, .pfx-phone .L-report .pfx-score { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0; }
.pfx-phone .L-report .pfx-popts .on { color: var(--primary); background: none; font-weight: 700; }
.pfx-phone .L-report .pfx-pbtn { border-radius: 0; }
.pfx-phone .L-spot .pfx-cv, .pfx-phone .pfx-cv.L-spot { text-align: center; background: radial-gradient(circle at 50% 38%, #f08a4b2e, transparent 60%), var(--bg); }
.pfx-phone .L-spot .pfx-ptop { justify-content: center; border: 0; }
.pfx-phone .L-spot .pfx-popts div, .pfx-phone .L-spot .pfx-pvote div, .pfx-phone .L-spot .pfx-score { border-radius: 99px; justify-content: center; }
.pfx-phone .L-spot .pfx-ticket { border-radius: 50%; aspect-ratio: 1; width: 220px; margin: 24px auto 0; display: grid; place-content: center; border-color: var(--accent); }
.pfx-phone .L-spot .pfx-pbtn { border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--primary)); }
.pfx-phone .L-dash .pfx-ptop { margin: -54px -20px 0; padding: 54px 16px 12px; background: var(--surface); }
.pfx-phone .L-dash .pfx-popts div, .pfx-phone .L-dash .pfx-pvote div, .pfx-phone .L-dash .pfx-ticket, .pfx-phone .L-dash .pfx-score { border-radius: 16px; }
.pfx-phone .L-dash .pfx-popts b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); border-bottom-width: 3px; font-size: 13px; }
.pfx-phone .L-dash .pfx-pk::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; margin-right: 8px; }
.pfx-phone .L-classic .pfx-popts .on b, .pfx-phone .L-report .pfx-popts .on b { color: var(--primary); }
.pfx-phone .L-dash .pfx-popts .on b { background: #fff; color: var(--primary); }
.pf .pf-privacy { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ycs-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ycs-privacy-note { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); font-size: 14px; text-align: left; }
.ycs-privacy-note svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.why-us-diy .why-us-pts { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; }
.why-us-diy .why-us-pts li { display: flex; gap: 10px; align-items: flex-start; }
.why-us-diy .why-us-pts svg { flex: none; margin-top: 4px; color: var(--success, #16a34a); }

.lp-why { margin-bottom: 32px; }
@media (max-width: 760px) { .lp-why { margin-top: 24px; } .why-us-diy { padding: 16px; } .why-us-diy h3 { font-size: 18px; } }
.why-us-diy p { margin: 0; color: var(--text-2); }
.pricing-faq-h { margin: 40px 0 8px; font-size: 24px; }
.lp-faq.pricing-faq summary { font-family: var(--font); font-size: 17px; padding: 16px 2px; }
.lp-faq.pricing-faq details p, .lp-faq.pricing-faq .pricing-faq-a { padding: 0 2px 18px; color: var(--text-2); font-size: 15px; max-width: 760px; }
@media (max-width: 760px) { .lp-faq.pricing-faq summary { font-size: 16px; } }
@media (max-width: 1024px) {
  .nav-signup:has(.nav-free-tag) { margin-top: 8px; padding-top: 14px; padding-bottom: 7px; line-height: 1.1; overflow: visible !important; }
  .nav-signup .nav-free-tag { font-size: 10px; padding: 0 7px; left: 50%; right: auto; translate: -50% -55%; }
}
.lp-why-sec { padding-top: 56px; padding-bottom: 24px; }
@media (max-width: 760px) { .lp-why-sec { padding-top: 36px; padding-bottom: 12px; } }
.lp-why-sec .lp-why { margin: 0 auto; }
.why-us-more { display: none; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--text); justify-self: start; }
@media (max-width: 760px) {
  .why-us-diy.fold:not(.open) .why-us-pts li:nth-child(n+3), .why-us-diy.fold:not(.open) .why-us-end { display: none; }
  .why-us-diy.fold .why-us-more { display: inline-flex; align-items: center; gap: 6px; }
}
.uc-why { margin-top: 14px; font-size: 15px; color: var(--text-2); }
.uc-why a { white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
#why { scroll-margin-top: 80px; }

/* ---- Responsive type (founder, 2 Nov 2026): one scale for every site page on phones and tablets.
   Body text 14px on phones (anything already smaller stays), headings on a 1.2 scale. Big screens
   (bare pages without .site-chrome) and the showcase canvases (.pfx-cv) keep their own sizes. */
@media (max-width: 760px) {
  html.site-chrome body { font-size: 14px; line-height: 1.55; }
  html.site-chrome main :is(p, li, dd, blockquote, summary + p, .lead, .lp-faq details p):not(.small, .tiny, .mono, .kicker, .eyebrow, .muted.small, .lp-hero-note, .hand, .pfx-cv *, .pfx-cv) { font-size: 14px !important; line-height: 1.6; }
  html.site-chrome main h1:not(.pfx-cv *) { font-size: clamp(26px, 7.6vw, 30px) !important; line-height: 1.12 !important; }
  html.site-chrome main h2:not(.pfx-cv *) { font-size: clamp(20px, 6vw, 23px) !important; line-height: 1.18 !important; }
  html.site-chrome main h3:not(.pfx-cv *) { font-size: 17px !important; line-height: 1.25 !important; }
  html.site-chrome main h4:not(.pfx-cv *) { font-size: 15px !important; }
  html.site-chrome main :is(.lp-faq summary, .pricing-faq summary) { font-size: 15px !important; padding: 14px 2px; }
  html.site-chrome main .btn.lg { font-size: 15px; padding: 12px 18px; }
  html.site-chrome main .lp-hero-note .hand, html.site-chrome main .uc-why { font-size: 13px !important; }
  html.site-chrome main .price b { font-size: 28px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  html.site-chrome main :is(p, li, dd, .lead):not(.small, .tiny, .mono, .kicker, .eyebrow, .hand, .pfx-cv *, .pfx-cv) { font-size: 15px !important; }
  html.site-chrome main h1:not(.pfx-cv *) { font-size: clamp(32px, 4.6vw, 40px) !important; }
  html.site-chrome main h2:not(.pfx-cv *) { font-size: clamp(24px, 3.2vw, 28px) !important; }
  html.site-chrome main h3:not(.pfx-cv *) { font-size: 19px !important; }
  html.site-chrome main :is(.lp-faq summary, .pricing-faq summary) { font-size: 16px !important; }
}
.lp-why.lp-why-top { margin: 8px 0 28px; max-width: none; }
/* Footer categories (founder, 2 Nov 2026): the heading reads as the label of the links under it. */
.footer .footer-col { gap: 2px; }
.footer .footer-col h4 { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 0; text-transform: none; margin: 0 0 12px; padding-bottom: 10px; position: relative; }
.footer .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--accent); }
.footer .footer-col a { font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,.66); }
.footer .footer-col a:hover { color: #fff; }
@media (pointer: coarse) { .footer .footer-col a { min-height: 36px; } }
@media (max-width: 760px) { .footer .footer-col { margin-bottom: 18px; } }

.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.footer .footer-social a { width: 38px; height: 38px; min-height: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: rgba(255,255,255,.82); transition: background .15s ease-out, color .15s ease-out; }
.footer .footer-social a:hover { background: var(--accent); color: #fff; }
/* Pricing blocks under the plans (founder, 2 Nov 2026): not one card repeated. Each sits on the page
   like the landing sections do (transparent), with its own shape. */
.included { background: color-mix(in srgb, var(--surface) 45%, transparent); border: 1px solid var(--border); border-radius: 22px; box-shadow: none; padding: 22px 24px; }
.plan-strip .strip-item { background: color-mix(in srgb, var(--accent) 5%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: none; }
.example-card { background: transparent; border: 0; border-left: 3px solid var(--gold); border-radius: 0; padding: 6px 0 6px 18px; }
.example-card .price b { color: var(--gold); }
/* Pricing questions in categories (founder, 2 Nov 2026). */
.pf-faq { margin-top: 48px; }
.pf-faq-h { font-size: 28px; margin: 0 0 20px; }
.pf-faq-groups { display: grid; gap: 28px; }
.pf-faq-cat { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pf-faq-cat h3 { margin: 0; font-size: 19px; font-weight: 800; }
.pf-faq-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); flex: none; }
.pf-faq-n { font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); }
.pf-faq .lp-faq.pricing-faq { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.pf-faq .lp-faq.pricing-faq details { border-bottom: 1px solid var(--border); padding: 0 18px; }
.pf-faq .lp-faq.pricing-faq details:last-child { border-bottom: 0; }
.pf-faq .lp-faq.pricing-faq summary { font-family: var(--font); font-size: 17px; font-weight: 700; padding: 18px 0; }
.pf-faq .lp-faq.pricing-faq details[open] summary { color: var(--accent-text); }
.pf-faq .lp-faq.pricing-faq details p, .pf-faq .lp-faq.pricing-faq .pricing-faq-a { padding: 0 0 18px; font-size: 15px; }
@media (min-width: 1025px) { .pf-faq-groups { display: block; columns: 2; column-gap: 28px; } .pf-faq-group { break-inside: avoid; margin-bottom: 28px; } }
@media (max-width: 760px) {
  .pf-faq-h { font-size: 22px !important; }
  .pf-faq-cat h3 { font-size: 17px !important; }
  html.site-chrome main .pf-faq .lp-faq.pricing-faq summary { font-size: 15.5px !important; padding: 15px 0; }
  .pf-faq .lp-faq.pricing-faq details { padding: 0 14px; }
  .included-grid { grid-template-columns: 1fr 1fr !important; gap: 12px 14px !important; }
  .included-grid > div > div > span { display: none; }
  .included-grid b { font-size: 13.5px; line-height: 1.3; }
}
.ypc-launch .ypc-ico { display: grid; place-items: center; pointer-events: none; }
.ypc-launch .ypc-ico svg { stroke-width: 2.2; }
/* Guide steps (founder, 2 Nov 2026): a ticket-style perforated line between steps, so each picture
   and its text read as one step on phones, tablets and desktops. */
.guide-steps { --step-gap: clamp(48px, 7vw, 96px); gap: var(--step-gap); }
.gs-panel .gz-steps { --step-gap: clamp(40px, 6vw, 80px); }
/* Only where the steps stack (picture above text, 820px and below); side by side needs no line. */
@media (max-width: 820px) {
.guide-steps > li { position: relative; }
.guide-steps > li + li::before { content: ""; position: absolute; left: 10px; right: 10px; top: calc(var(--step-gap) / -2); height: 0; border-top: 2px dashed var(--border-strong); opacity: .9; pointer-events: none; }
.guide-steps > li + li::after { content: ""; position: absolute; left: -2px; right: -2px; top: calc(var(--step-gap) / -2 - 8px); height: 16px; pointer-events: none;
  background: radial-gradient(circle at 8px 8px, var(--bg) 6px, var(--border-strong) 6.5px, var(--border-strong) 7.5px, transparent 8px) left / 16px 16px no-repeat,
              radial-gradient(circle at 8px 8px, var(--bg) 6px, var(--border-strong) 6.5px, var(--border-strong) 7.5px, transparent 8px) right / 16px 16px no-repeat; }
}
.why-us-diy .why-us-end, .why-us-diy .why-us-end b { color: var(--text); }
.ycs-showcase { display: flex; justify-content: center; margin: 8px 0 24px; }
.pf .pf-work-head { justify-content: flex-start; }
.pf .pf-work-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.pf .pf-work-n { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.pf .pf-work + .pf-work { margin-top: 0; padding-top: 44px; border-top: 2px dashed var(--border-strong); }
.pf .pf-work { padding-bottom: 44px; }
@media (max-width: 760px) { .pf .pf-work + .pf-work { padding-top: 32px; } .pf .pf-work { padding-bottom: 32px; } }

/* Yaypick Christmas on the home page (in season only, home.js). */
.lp-xmas { padding: 0 0 8px; }
.lp-xmas-in { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; text-decoration: none; color: #fff8ec; background: linear-gradient(120deg, #0d2a1d, #145c34 60%, #1f7a45); border: 1px solid rgba(245, 196, 81, .45); box-shadow: 0 14px 30px -14px rgba(20, 92, 52, .7); }
.lp-xmas-in b { display: block; font-size: 17px; color: #fff; }
.lp-xmas-in .grow > span { font-size: 14px; color: rgba(255, 248, 236, .8); }
.lp-xmas-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #e23b4e, #c8102e); color: #fff; }
.lp-xmas-btn { background: #f5c451; color: #2a1a12; border-color: transparent; }
@media (max-width: 560px) { .lp-xmas-btn { display: none; } }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* No big screen needed (founder, 9 Nov 2026): activities that work on guests' phones alone say so. */
.tool-phone-only { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0 !important; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px !important; font-weight: 700; }
.gs-head .gs-phone-only { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 15px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.gs-head .gs-phone-only svg { flex: none; margin-top: 3px; }

/* Bingo "A guest rolls" (founder, 9 Nov 2026): results on the left, the cage on the right; when a guest rolls,
   the cage comes to the centre, big, over a dimmed screen, then goes back. Same in 2D and 3D. */
.bs-play.guest { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.bs-play.guest .bs-left { grid-template-rows: auto minmax(0, 1fr) auto; }
.bs-play.guest .bs-guest-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 1.6vw, 28px); min-height: 0; }
.bs-play.guest .bs-guest-top .bs-call { min-height: 0; }
.bs-dock { position: absolute; z-index: 6; top: 14vh; right: 2.5vw; width: 40vw; height: 72vh; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; pointer-events: none; transform-origin: 50% 50%; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.bs-dock.big { transform: translate(-27.5vw, -2vh) scale(1.22); }
.bs-dock-cage { width: 100%; height: 100%; min-height: 0; }
.bs-dock-cage canvas { display: block; }
.bs-dock-label { display: grid; justify-items: center; gap: .4vh; text-align: center; min-height: 0; }
.bs-dock-label .bs-roll-kick { font-size: clamp(14px, 1.2vw, 26px); }
.bs-dock-label .bs-roll-name { font-size: clamp(26px, 3vw, 64px); line-height: 1.05; }
.bs-dock-label .bs-roll-sub { font-size: clamp(13px, 1vw, 22px); }
.bs.bs-guest-roll::after { content: ""; position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--s-bg, #0d0f22) 82%, transparent); opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.bs.bs-guest-roll:has(.bs-dock.big)::after { opacity: 1; }
.s3d > .bs-dock { z-index: 7; }
.bs > canvas.confetti { z-index: 10; }
.s3d .bs-recent { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.s3d .bs-recent span { padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor; opacity: .75; font-weight: 700; font-size: calc(22 * var(--px, 1px)); }
@media (prefers-reduced-motion: reduce) { .bs-dock { transition: none; } }

/* The guest's bingo cage stands on the page itself: no panel behind it. */
.br-stage { background: none !important; border: 0 !important; box-shadow: none !important; }

/* Bingo 3D results panel (founder, 9 Nov 2026: premium): glossy balls in their column's colour. */
.b3p { display: grid; gap: calc(30 * var(--px)); color: var(--ycs-text); }
.b3p-top { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--px)) calc(24 * var(--px)); }
.b3p-kick { font: 600 calc(16 * var(--px)) / 1.3 'IBM Plex Mono', monospace; letter-spacing: .26em; text-transform: uppercase; color: var(--ycs-accent); }
.b3p-pat { display: inline-flex; align-items: center; gap: calc(12 * var(--px)); padding: calc(8 * var(--px)) calc(16 * var(--px)) calc(8 * var(--px)) calc(10 * var(--px)); border-radius: 999px; border: 1px solid var(--ycs-line); background: color-mix(in srgb, var(--ycs-card) 70%, transparent); backdrop-filter: blur(8px); }
.b3p-pat .bg-pat { --c: calc(7 * var(--px)); gap: calc(2 * var(--px)); flex: none; }
.b3p-pat > span { display: grid; line-height: 1.15; }
.b3p-pat small { font-size: calc(14 * var(--px)); color: var(--ycs-dim); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.b3p-pat b { font-size: calc(24 * var(--px)); white-space: nowrap; }
.b3p-hero { display: flex; align-items: center; animation: b3pIn .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.b3p-wait { font: 800 calc(64 * var(--px)) / 1 Rubik, var(--font); color: var(--ycs-text); }
@keyframes b3pIn { from { transform: translateY(18px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.b3p-ball { --c: #e8413a; position: relative; width: calc(64 * var(--px)); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 30% 26%, #fff 0 9%, color-mix(in srgb, var(--c) 55%, #fff) 22%, var(--c) 52%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: 0 calc(10 * var(--px)) calc(26 * var(--px)) calc(-6 * var(--px)) rgba(0, 0, 0, .55), inset 0 -6px 14px rgba(0, 0, 0, .25); }
.b3p-ball > span { width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #eef0f4); display: grid; place-content: center; text-align: center; color: #15172a; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .12); line-height: 1; }
.b3p-ball i { font: 800 calc(10 * var(--px)) / 1 Rubik, var(--font); font-style: normal; color: var(--c); }
.b3p-ball b { font: 900 calc(20 * var(--px)) / 1 Rubik, var(--font); letter-spacing: -.02em; }
.b3p-ball.big { width: calc(190 * var(--px)); box-shadow: 0 calc(30 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, .55), 0 0 calc(80 * var(--px)) color-mix(in srgb, var(--c) 45%, transparent), inset 0 -18px 40px rgba(0, 0, 0, .28); }
.b3p-ball.big i { font-size: calc(28 * var(--px)); }
.b3p-ball.big b { font-size: calc(72 * var(--px)); }
.b3p-ball.c0 { --c: #e8413a; } .b3p-ball.c1 { --c: #2f7de1; } .b3p-ball.c2 { --c: #f2b21b; } .b3p-ball.c3 { --c: #2fae63; } .b3p-ball.c4 { --c: #8e4fd6; }
.b3p-word { padding: calc(10 * var(--px)) calc(18 * var(--px)); border-radius: calc(14 * var(--px)); background: var(--ycs-card); border: 1px solid var(--ycs-line); font-weight: 700; font-size: calc(16 * var(--px)); }
.b3p-word.big { padding: calc(28 * var(--px)) calc(34 * var(--px)); font: 800 calc(48 * var(--px)) / 1.1 Rubik, var(--font); border-color: var(--ycs-accent); box-shadow: 0 0 calc(50 * var(--px)) color-mix(in srgb, var(--ycs-accent) 30%, transparent); }
.b3p-progress { display: grid; gap: calc(10 * var(--px)); max-width: calc(560 * var(--px)); }
.b3p-bar { height: calc(8 * var(--px)); border-radius: 999px; background: var(--ycs-line); overflow: hidden; }
.b3p-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ycs-accent), var(--ycs-highlight, var(--ycs-accent))); transition: width .8s ease; }
.b3p-nums { display: flex; justify-content: space-between; font-size: calc(18 * var(--px)); color: var(--ycs-dim); }
.b3p-nums b { color: var(--ycs-text); font-size: calc(24 * var(--px)); }
.b3p-recent { display: flex; flex-wrap: wrap; gap: calc(12 * var(--px)); }
/* The guest's "You rolled" result: in the middle of the phone. */
.br.br-done { min-height: calc(100dvh - 140px); align-content: center; }

/* The full board on the 3D results panel: called numbers lit in their column's colour, the rest dark. */
.b3p { gap: calc(24 * var(--px)); }
.b3p-board { display: grid; gap: calc(8 * var(--px)); }
.b3p-row { --c: #e8413a; display: grid; grid-template-columns: calc(34 * var(--px)) repeat(15, calc(34 * var(--px))); gap: calc(6 * var(--px)); align-items: center; }
.b3p-row.c1 { --c: #2f7de1; } .b3p-row.c2 { --c: #f2b21b; } .b3p-row.c3 { --c: #2fae63; } .b3p-row.c4 { --c: #8e4fd6; }
.b3p-row > b { font: 900 calc(22 * var(--px)) / 1 Rubik, var(--font); color: var(--c); text-align: center; }
.b3p-row > span { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 800 calc(13 * var(--px)) / 1 Rubik, var(--font); color: color-mix(in srgb, var(--ycs-text) 28%, transparent); background: color-mix(in srgb, var(--ycs-text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ycs-text) 8%, transparent); }
.b3p-row > span.on { color: #15172a; border-color: transparent; background: radial-gradient(circle at 32% 28%, #fff 0 10%, color-mix(in srgb, var(--c) 45%, #fff) 26%, var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000) 100%); box-shadow: 0 calc(4 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, .45); }
.b3p-row > span.on { text-shadow: 0 0 6px rgba(255, 255, 255, .85); }
.b3p-row > span.last { outline: calc(3 * var(--px)) solid #fff; outline-offset: calc(2 * var(--px)); box-shadow: 0 0 calc(18 * var(--px)) var(--c); }

/* Bingo winner card (founder, 9 Nov 2026): over everything, 2D and 3D; the cage steps aside. */
.bs > .bs-win:not([hidden]) { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: color-mix(in srgb, var(--s-bg, #05070c) 70%, transparent); backdrop-filter: blur(6px); }
.s3d > .bs-win { visibility: visible !important; }
.bs.bs-winning .bs-dock { opacity: 0; transition: opacity .3s; }
.bs-wcard { --ycs-card: #11152a; --ycs-card-text: #fff; --ycs-accent: var(--accent); --ycs-line: rgba(255, 255, 255, .14); --ycs-highlight: var(--accent); width: min(820px, 86vw); }
.s3d .bs-wcard { --ycs-card: var(--ycs-card); }
.bs-wcard .nm { font-size: clamp(48px, 10vh, 120px); letter-spacing: .02em; }
.bs-wlist { list-style: none; margin: 3vh 0 0; padding: 0; display: grid; gap: 1.4vh; }
.bs-wlist li { display: grid; gap: .3vh; }
.bs-wlist b { font: 800 clamp(24px, 4.4vh, 52px) / 1.1 var(--ycs-font-head, Rubik); overflow-wrap: anywhere; }
.bs-wlist span { font: 700 clamp(14px, 2.2vh, 26px) / 1.2 var(--ycs-font-body, Nunito); opacity: .7; }
.bs-wlist.many { grid-template-columns: 1fr 1fr; }
.bs-wlist.many b { font-size: clamp(18px, 3vh, 34px); }
/* Bingo 3D panel: from the top (room for winners below), a bigger board. */
.s3d .s3d-panel:has(.b3p) { justify-content: flex-start; padding-top: calc(150 * var(--px)); width: 46%; }
.b3p-row { grid-template-columns: calc(42 * var(--px)) repeat(15, calc(42 * var(--px))); gap: calc(7 * var(--px)); }
.b3p-row > b { font-size: calc(28 * var(--px)); }
.b3p-row > span { font-size: calc(17 * var(--px)); }
.b3p-board { gap: calc(9 * var(--px)); }
.bh-screen { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bh-screen .segmented button { display: inline-flex; align-items: center; gap: 6px; }

/* The swipe hint on the guest's cage: a soft up-and-down arrow, fading in and out every 3 s. */
.br-stage { position: relative; }
.br-swipe { position: absolute; right: 6%; top: 14%; bottom: 14%; width: 28px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; pointer-events: none; z-index: 2; animation: brSwipe 3s ease-in-out infinite; color: var(--accent); }
.br-swipe span { width: 3px; border-radius: 3px; background: linear-gradient(currentColor, transparent 45%, transparent 55%, currentColor); opacity: .7; }
.br-swipe i { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; opacity: .8; }
.br-swipe i.up { border-bottom: 14px solid currentColor; }
.br-swipe i.down { border-top: 14px solid currentColor; }
@keyframes brSwipe { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
.bp.rolling .br-stage.swiped .br-swipe { display: none; }
@media (prefers-reduced-motion: reduce) { .br-swipe { animation: none; opacity: .45; } }
/* Controllers on phones: a row of buttons under the big button is half and half, equal widths. */
@media (max-width: 640px) {
  .dc .dc-row:has(> .btn) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc .dc-row > .btn { width: 100%; justify-content: center; white-space: normal; height: auto; min-height: 44px; text-align: center; }
  .dc .dc-row > .btn:only-child, .dc .dc-row > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bh-screen .segmented { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .bh-screen .segmented button { justify-content: center; }
}

/* The QR join screen of a big screen (public/js/join-screen.js): a full screen of its own. */
.yj { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: clamp(24px, 5vw, 96px); background: var(--s-bg, #0d0f22); color: var(--s-ink, #fff); font-family: "Nunito", "Rubik", var(--lang-sans), system-ui, sans-serif; }
.yj[hidden] { display: none; }
.yj-in { width: 100%; max-width: 1700px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 100px); align-items: center; }
.yj-text { display: grid; gap: clamp(10px, 1.6vh, 18px); min-width: 0; align-content: center; }
.yj-kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(18px, 1.6vw, 30px); color: var(--accent, #ffc21a); text-transform: uppercase; letter-spacing: .06em; }
.yj-text h2 { font-size: clamp(52px, 6.6vw, 140px); font-weight: 800; line-height: .98; letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere; }
.yj-url { font-family: var(--font-mono); font-size: clamp(16px, 1.7vw, 32px); color: var(--s-dim, #9496b3); margin: 0; overflow-wrap: anywhere; }
.yj-code { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.yj-code span, .yj-count span { font-size: clamp(16px, 1.4vw, 26px); color: var(--s-dim, #9496b3); }
.yj-code b { font-size: clamp(40px, 4.4vw, 84px); font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1; }
.yj-count { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.yj-count b { font-size: clamp(36px, 4vw, 68px); font-weight: 800; font-variant-numeric: tabular-nums; }
.yj .yj-qr { width: min(66vh, 42vw); height: min(66vh, 42vw); padding: clamp(14px, 1.6vw, 26px); margin: 0; background: #fff; border-radius: 28px; border: 0; box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); }
.yj .yj-qr :is(svg, canvas, img) { width: 100%; height: 100%; display: block; }
@media (max-aspect-ratio: 1/1) {
  .yj-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .yj-code, .yj-count { justify-content: center; }
  .yj .yj-qr { width: min(74vw, 42vh); height: min(74vw, 42vh); }
}
.yj-on { overflow: hidden; }
.stage-count .pk-closed { margin: 0 16px 0 0; }
/* The organiser's "Big screen shows" switch (join-screen.js screenRow). */
.yj-row { display: grid; gap: 6px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.yj-row .bh-screen { margin-bottom: 0; }
.yj-row .hint { margin: 0; font-size: 13px; color: var(--muted); }
.dc .yj-row { margin-top: 0; border: 0; padding: 0; background: none; }
.yj-head { position: absolute; top: clamp(18px, 3vh, 40px); left: clamp(24px, 5vw, 96px); right: clamp(24px, 5vw, 96px); font-size: clamp(20px, 1.8vw, 34px); font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bingo guest: pressing BINGO! shows the word big for a moment (bingo-play.js shout). */
.bp-shout { position: fixed; inset: 0; z-index: 55; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: color-mix(in srgb, #05070c 72%, transparent); backdrop-filter: blur(4px); animation: bpShoutIn .35s ease both; }
.bp-shout b { font-size: clamp(64px, 20vw, 120px); font-weight: 900; line-height: .9; letter-spacing: .03em; color: #ffc21a; text-shadow: 0 8px 0 color-mix(in srgb, #ffc21a 40%, #000), 0 24px 60px rgba(0,0,0,.5); animation: bsWin .8s cubic-bezier(.2, 1.6, .4, 1) both; }
.bp-shout span { max-width: 300px; font-size: 16px; font-weight: 600; color: #fff; }
.bp-shout.out { opacity: 0; transition: opacity .45s ease; }
@keyframes bpShoutIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bp-shout, .bp-shout b { animation: none; } }
.br-ball b.word, .br-ball b.long { overflow-wrap: normal; word-break: normal; hyphens: manual; line-height: 1.05; }
.br-ball b.word { font-size: 30px; }
.br-ball b.long { font-size: 24px; }
/* The Christmas strip at the top of the landing page (home.js), in season. */
.lp-xmas.top .lp-xmas-in { color: #fff8ec; background: radial-gradient(600px 160px at 10% 0%, rgba(226, 59, 78, .35), transparent 70%), radial-gradient(500px 160px at 95% 100%, rgba(245, 196, 81, .16), transparent 70%), linear-gradient(120deg, #2e060c, #5c0d18 55%, #8f1a29); border-color: rgba(245, 196, 81, .55); box-shadow: 0 14px 30px -14px rgba(92, 13, 24, .8); }
.lp-xmas.top .lp-xmas-in:hover { box-shadow: 0 18px 34px -14px rgba(143, 26, 41, .9); }
.lp-xmas.top .lp-xmas-ic { background: linear-gradient(180deg, #fff8ec, #f3e6cf); box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .6); }
.lp-xmas.top .lp-xmas-btn { position: relative; overflow: hidden; font-weight: 800; background: linear-gradient(180deg, #ffd36a, #f5c451); color: #2a1a12; box-shadow: 0 0 0 0 rgba(245, 196, 81, .6); animation: lpXmasPulse 2.4s ease-in-out infinite; }
.lp-xmas.top .lp-xmas-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); animation: lpXmasShine 3.2s ease-in-out infinite; }
@keyframes lpXmasPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 196, 81, .55); } 50% { box-shadow: 0 0 0 8px rgba(245, 196, 81, 0); } }
@keyframes lpXmasShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .lp-xmas.top .lp-xmas-btn, .lp-xmas.top .lp-xmas-btn::after { animation: none; } }
.lp-xmas.top { position: relative; z-index: 2; padding: 14px 0 0; }
.lp-xmas.top .lp-xmas-in { padding: 12px 16px; transition: transform .2s ease, box-shadow .2s ease; }
.lp-xmas.top .lp-xmas-in:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(20, 92, 52, .8); }
.lp-xmas.top .lp-xmas-ic { width: 40px; height: 40px; border-radius: 12px; }
@media (max-width: 560px) {
  .lp-xmas.top { padding: 12px 16px 0; }
  .lp-xmas.top .lp-xmas-in { gap: 12px; padding: 10px 12px; border-radius: 14px; }
  .lp-xmas.top .lp-xmas-in b { font-size: 15px; line-height: 1.25; }
  .lp-xmas.top .lp-xmas-in .grow > span { display: block; font-size: 12.5px; line-height: 1.35; }
  .lp-xmas.top .lp-xmas-ic { width: 34px; height: 34px; border-radius: 10px; }
}
@media (max-width: 560px) {
  .lp-xmas.top .lp-xmas-in { flex-wrap: wrap; }
  .lp-xmas.top .lp-xmas-in .grow { flex: 1 1 0; min-width: 0; }
  .lp-xmas.top .lp-xmas-btn { display: inline-flex; justify-content: center; flex: 1 1 100%; }
  .lp-xmas.top .lp-xmas-ic svg { width: 26px; height: 26px; }
}
/* Christmas: choose who gets an email again (christmas-panel.js pickGuests). */
.xm-pick { max-height: min(60vh, 520px); overflow: auto; }
.xm-pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; }
.xm-pick-row.all { background: var(--surface-2, rgba(0,0,0,.03)); }
.xm-pick-row input { width: 18px; height: 18px; flex: none; }
.xm-pick-row .grow { display: grid; min-width: 0; }
.xm-pick-row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-xmas.top .lp-xmas-ic { background: none; box-shadow: none; width: auto; height: auto; }
.lp-xmas.top .lp-xmas-ic svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
@media (max-width: 560px) { .lp-xmas.top .lp-xmas-ic svg { width: 30px; height: 30px; } }

/* Date and time boxes never grow wider than their column (iPhone Safari gives them a built-in minimum
   width, so a time box beside a date box ran past the dialog's edge, founder 11 Nov 2026). */
.input:is([type="date"], [type="time"], [type="datetime-local"]) { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
@supports (-webkit-touch-callout: none) {
  .input:is([type="date"], [type="time"], [type="datetime-local"]) { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
  .input:is([type="date"], [type="time"], [type="datetime-local"])::-webkit-date-and-time-value { text-align: left; margin: 0; }
}

/* Built-in lockup image (mark + name in one image) outside the topbar/footer brand, e.g. guest hub headers. */
.hub-brand .site-logo { display: block; height: 34px; width: auto; }
.hub-brand .site-logo.for-dark { display: none; }
[data-theme-mode="dark"] .hub-brand .site-logo.for-dark { display: block; }
[data-theme-mode="dark"] .hub-brand .site-logo.for-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode="light"]) .hub-brand .site-logo.for-dark { display: block; }
  :root:not([data-theme-mode="light"]) .hub-brand .site-logo.for-light { display: none; }
}
/* The footer is always dark: its single white lockup shows in every theme. */
.footer .brand .site-logo { display: block; }

/* "More activities": after the tab groups, never a tab itself. */
.ev-tabs .ev-more { align-self: flex-end; margin-left: auto; white-space: nowrap; }

/* Pricing: "How many guests?" finder above the passes. */
.guest-finder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 20px; }
.guest-finder .input { width: 140px; }
.guest-finder .gf-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 260px; }
.price-col.gf-pick { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color .3s; }


/* Pricing: the long explanations fold away; the finder's footnote. */
.pf-more { margin: 28px 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.pf-more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 700; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more[open] > summary svg { transform: rotate(180deg); }
.pf-more > :not(summary) { padding: 0 20px 20px; }
.guest-finder .gf-foot { flex-basis: 100%; margin: 0; }

/* Big screens: the full-screen tip, bottom corner, until the screen is full. */
.bs-fs-tip { position: fixed; right: 14px; bottom: 14px; z-index: 9000; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 600 13px/1.2 system-ui, sans-serif; cursor: pointer; opacity: .8; }
.bs-fs-tip:hover { opacity: 1; }
.bs-fs-tip[hidden] { display: none; }
.remote-hint { margin: 10px 12px; }

/* Rehearse: big screen and a guest phone side by side. */
.rh-grid { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
.rh-grid figure { margin: 0; display: grid; gap: 6px; }
.rh-grid figcaption { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; color: var(--text-2); }
.rh-screen { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 10px; background: #000; }
.rh-phone { width: 100%; aspect-ratio: 9 / 18; border: 8px solid #111; border-radius: 26px; background: #fff; }
@media (max-width: 760px) { .rh-grid { grid-template-columns: 1fr; } .rh-phone { max-width: 240px; justify-self: center; } }

/* Event page: the words, in plain lines. */
.ev-start .ev-words { margin-top: 10px; display: inline-flex; gap: 6px; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--text-2); }
.ev-words-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.ev-words-list dt { font-weight: 700; }
.ev-words-list dd { margin: 0; color: var(--text-2); }
@media (max-width: 520px) { .ev-words-list { grid-template-columns: 1fr; } .ev-words-list dd { margin-bottom: 6px; } }

/* My Events: the client of an agency's event, and the client filter. */
.dash-client { display: inline-flex; gap: 4px; align-items: center; color: var(--text-2); font-weight: 600; }
.dash-filter { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.dash-filter .select { min-width: 180px; }
.ws-view-title .ws-fair { display: block; font-size: clamp(11px, .8vw, 14px); opacity: .65; letter-spacing: .02em; margin-top: .3em; }
.emcee-list { padding-left: 20px; display: grid; gap: 12px; margin: 8px 0 0; }
.emcee-list p { margin: 2px 0 0; }

/* Home, Nov 2026 redesign: three numbered steps, one row of facts, "What will your event run?". */
.lp-how { padding: 72px 0 56px; border-top: 1px solid var(--border); }
.lp-how-h { margin: 0 0 12px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.02em; color: var(--text); }
.lp-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: none; }
.lp-how-steps li { display: grid; gap: 10px; align-content: start; }
.lp-how-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 20px; font-weight: 800; line-height: 1; }
.lp-how-steps b { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; color: var(--text); }
.lp-how-steps p { margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.55; }
.lp-how-cta { margin: 32px 0 0; }
.lp-how-lead { margin: 0 0 40px; color: var(--text-2); font-size: 20px; line-height: 1.5; max-width: 640px; }
.lp-how-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.lp-how-steps p { font-size: 17px; }
@media (max-width: 1100px) { .lp-how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
.lp-numbers-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.lp-numbers-row div { display: flex; flex-direction: row; align-items: baseline; gap: 10px; }
.lp-numbers-row b { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.lp-numbers-row span { font-size: 15px; line-height: 1.35; color: var(--muted); }
.ek-tabs { align-items: center; }
.ek-more { appearance: none; cursor: pointer; padding: 9px 34px 9px 16px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font: 600 15px/1.2 inherit; color: var(--text-2); }
.ek-more.on { background-color: var(--text); color: var(--bg); border-color: var(--text); }
.ek-more option { color: #111; }
.ek-body { align-items: center; }
.ek-tools li { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 12px; border-radius: 12px; border-top: 0; border-bottom: 0 !important; transition: background .2s ease-out; cursor: default; }
.ek-tools li.on { background: var(--surface); }
.ek-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text, var(--accent)); }
.ek-tools b { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 4px; }
.ek-tools p { margin: 0; color: var(--text-2); font-size: 17px; }
.ek-main { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.ek-watch { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--text-2); }
.ek-watch:hover { color: var(--text); border-color: var(--text); }
@media (max-width: 860px) {
  .lp-how { padding: 48px 0 40px; }
  .lp-how-steps { grid-template-columns: 1fr; gap: 24px; }
  .lp-numbers-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .lp-numbers-row div { flex-direction: column; gap: 4px; }
}
.lp-hero .lead { font-size: clamp(19px, 1.6vw, 22px); }
.lp-hero-note, .lp-cta-note { font-size: 17px; }

/* Home, Nov 2026: a stage that plays the activity on its screen, the activities as one row of chips under it. */
.ls-showcase.ls-theatre { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; max-width: 1180px; margin: 0 auto; }
.ls-theatre .ls-stage { padding: clamp(28px, 4vw, 56px) clamp(4%, 6vw, 9%) 0; border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.ls-theatre .ls-screen.ls-real { --rx: 0deg; border: 12px solid #0d0e1f; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.ls-theatre .ls-now { justify-content: center; text-align: center; margin-top: 16px; }
.ls-theatre .ls-now p { flex: 0 1 auto; font-size: 17px; }
.ls-theatre .ls-now p b { font-size: 19px; }
.ls-theatre .ls-tabs { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center; gap: 8px !important; }
.ls-theatre .ls-tab { width: auto !important; flex-direction: row !important; min-height: 0 !important; padding: 10px 16px !important; border-radius: 999px !important; border: 1.5px solid var(--border-strong) !important; background: transparent !important; font-size: 15px !important; color: var(--text-2); box-shadow: none !important; }
.ls-theatre .ls-tab:hover { color: var(--text); border-color: var(--text) !important; }
.ls-theatre .ls-tab.on { background: var(--text) !important; border-color: var(--text) !important; color: var(--bg) !important; }
.ls-theatre .ls-tab.on svg { color: var(--bg) !important; }
.ls-theatre .ls-progress { left: 16px !important; right: 16px !important; bottom: 4px !important; }
@media (max-width: 720px) {
  .ls-theatre .ls-tabs { flex-wrap: nowrap !important; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .ls-theatre .ls-tabs::-webkit-scrollbar { display: none; }
  .ls-theatre .ls-tab { flex-shrink: 0; padding: 8px 14px !important; font-size: 14px !important; }
  .ls-theatre .ls-stage { padding: 18px 4% 0; border-radius: 18px; }
  .ls-theatre .ls-screen.ls-real { border-width: 6px; }
}
.lp-free { padding: 56px 0; border-top: 1px solid var(--border); }
.lp-free-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.lp-free-pts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.lp-free-pts svg { color: var(--accent); margin-top: 4px; }
.lp-free-pts b { display: block; font-size: clamp(20px, 2vw, 24px); color: var(--text); margin-bottom: 6px; }
.lp-free-pts p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 860px) { .lp-free-pts { grid-template-columns: 1fr; gap: 24px; } }
.lp-xmas-under { padding: 8px 0 32px; }

/* Home: "Try it now". A real vote from the visitor's phone, live on a stage-like screen. */
@media (max-width: 860px) {
}
/* /try on the visitor's phone. */

.lp-head h2.stage-show-h { max-width: none; width: 100%; }
.stage-show-h span { display: block; }
.ls-showcase.ls-theatre .ls-side { order: -1; }
.ls-showcase.ls-theatre { max-width: 1040px; gap: 18px; }
.ls-theatre .ls-stage { padding-top: clamp(18px, 2.6vw, 36px); }
@media (max-width: 760px) {
  .ls-theatre .ls-tabs { flex-wrap: nowrap !important; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .ls-theatre .ls-tabs::-webkit-scrollbar { display: none; }
  .ls-theatre .ls-tab { flex: 0 0 auto; }
}
/* Guide steps (founder, 12 Nov 2026): every step the same, text left and picture right, no zigzag. */
@media (min-width: 821px) {
  .gz-step, .gz-step:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .gz-step .gz-text, .gz-step:nth-child(even) .gz-text { order: 0; }
  .gz-step .gz-shot, .gz-step:nth-child(even) .gz-shot { order: 1; }
}
/* How it works (founder, 12 Nov 2026): steps 1-3 on the first row, 4-5 centred on the second. */
.lp-how .lp-how-steps { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; column-gap: 40px !important; row-gap: 48px !important; }
.lp-how .lp-how-steps li { grid-column: span 2; }
.lp-how .lp-how-steps li:nth-child(4) { grid-column: 2 / span 2; }
.lp-how .lp-how-steps li:nth-child(5) { grid-column: 4 / span 2; }
.lp-how .lp-how-steps p { font-size: 18px; }
@media (max-width: 900px) {
  .lp-how .lp-how-steps { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; }
  .lp-how .lp-how-steps li, .lp-how .lp-how-steps li:nth-child(4), .lp-how .lp-how-steps li:nth-child(5) { grid-column: 1; }
}
/* Christmas strip under the hero (founder, 12 Nov 2026): a calm dark card so the one red button stands out. */
.lp-xmas.lp-xmas-under .lp-xmas-in { background: var(--surface); border: 1px solid rgba(245, 196, 81, .45); box-shadow: none; color: var(--text); padding: 16px 20px; gap: 16px; }
.lp-xmas.lp-xmas-under .lp-xmas-in:hover { transform: none; box-shadow: none; border-color: rgba(245, 196, 81, .8); }
.lp-xmas.lp-xmas-under .lp-xmas-in b { color: var(--text); font-size: 18px; }
.lp-xmas.lp-xmas-under .lp-xmas-in .grow > span { color: var(--text-2); font-size: 15px; }
.lp-xmas.lp-xmas-under .lp-xmas-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(245, 196, 81, .12); box-shadow: none; }
.lp-xmas.lp-xmas-under .btn { flex: none; }
@media (max-width: 560px) { .lp-xmas.lp-xmas-under .btn { display: none; } }
/* Gala guest lots (12 Nov 2026): the white card keeps dark text in dark mode too. */
.gn-play .gn-lot { color: #1d1f3b; }
.gn-play .gn-lot .gn-lot-text b, .gn-play .gn-lot .gn-lot-bid { color: #1d1f3b; }
/* Home hero on phones (founder, 12 Nov 2026): a big headline, one full-width main button with the
   second one under it at the same size, and a quiet note. */
@media (max-width: 760px) {
  html.site-chrome main .lp-hero h1 { font-size: clamp(40px, 11.5vw, 50px) !important; line-height: 1.02 !important; letter-spacing: -0.03em; margin-bottom: 16px; }
  html.site-chrome main .lp-hero p.lead.lead.lead { font-size: 16px !important; line-height: 1.55; margin: 0 0 24px; }
  .lp-hero .cta { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; }
  html.site-chrome main .lp-hero .cta .btn.lg { width: 100%; height: 52px; padding: 0 20px; font-size: 16px; justify-content: center; }
  .lp-hero .cta .btn.ghost-link { border: 1.5px solid var(--border-strong); border-radius: var(--radius-btn); text-decoration: none; padding-left: 20px !important; padding-right: 20px !important; justify-content: center !important; }
  .lp-hero-note { align-items: center; text-align: center; margin-top: 12px; }
  html.site-chrome main .lp-hero-note .hand { color: var(--text-2); font-size: 14px !important; }
  .lp-hero-photo { margin-top: 8px; }
}
/* Home hero on tablets (founder, 12 Nov 2026): a headline with real weight, readable lead, quiet note. */
@media (min-width: 761px) and (max-width: 1024px) {
  html.site-chrome main .lp-hero h1 { font-size: clamp(54px, 7.4vw, 68px) !important; line-height: 1 !important; letter-spacing: -0.035em; margin-bottom: 20px; }
  html.site-chrome main .lp-hero p.lead.lead.lead { font-size: 18px !important; line-height: 1.55; max-width: 620px; }
  html.site-chrome main .lp-hero-note .hand { color: var(--text-2); font-size: 15px !important; }
}
.lp-hero-note .hand { color: var(--text-2); }
/* Hero video on phones and tablets: a dark frame like the rest of the page, not a white card. */
@media (max-width: 1024px) {
  .lp-hero-photo .frame { background: var(--surface); padding: 6px; border: 1px solid var(--border); border-radius: 14px; box-shadow: none; transform: none; }
  .lp-hero-photo .frame img, .lp-hero-photo .frame video { border-radius: 10px; }
  .lp-hero-photo figcaption { background: transparent !important; color: var(--text-2); text-align: center !important; padding: 10px 0 0 !important; }
}
/* Phones (founder, 12 Nov 2026): the event-type chips and the showcase tabs become one full-width dropdown. */
.ek-pick, .ls-pick { display: none; }
@media (max-width: 760px) {
  .ek-tabs .ek-tab, .ek-tabs .ek-more, .ls-theatre .ls-tabs .ls-tab { display: none !important; }
  .ek-tabs { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; overflow: visible !important; }
  .ek-pick, .ls-pick { display: block; width: 100%; height: 52px; appearance: none; -webkit-appearance: none; cursor: pointer; padding: 0 44px 0 16px; border-radius: 14px; border: 1.5px solid var(--border-strong); color: var(--text); font: 600 16px/1.2 inherit; font-family: inherit;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; }
  .ek-pick:focus-visible, .ls-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ek-pick option, .ls-pick option { color: #111; }
  .ls-theatre .ls-tabs { overflow: visible !important; padding: 0 !important; }
}
/* How it works: the heading, the line under it and the button centred, matching the 3 + 2 steps. */
@media (min-width: 901px) {
  .lp-how .lp-how-h, .lp-how .lp-how-lead { text-align: center; margin-left: auto; margin-right: auto; }
  .lp-how .lp-how-cta { display: flex; justify-content: center; margin-top: 48px; }
}
/* Hero second button (founder, 12 Nov 2026): an outlined button the same size as Start free, never bare text. */
.lp-hero .cta .btn.ghost-link { border: 1.5px solid var(--border-strong); border-radius: var(--radius-btn); text-decoration: none; padding-left: 28px; padding-right: 28px; color: var(--text); }
.lp-hero .cta .btn.ghost-link:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); text-decoration: none; }
/* Christmas strip spacing (founder, 12 Nov 2026): no line above it, the card lines up with the content
   below, and the same space above and below. */
.lp-hero:has(+ .lp-xmas-under) { border-bottom: 0; padding-bottom: 40px; }
.lp-xmas.lp-xmas-under { padding: 0; }
.lp-xmas.lp-xmas-under .lp-xmas-in { display: flex; width: 100%; box-sizing: border-box; }
.lp-xmas-under + .lp-evening { padding-top: 56px; }
@media (max-width: 760px) { .lp-hero:has(+ .lp-xmas-under) { padding-bottom: 28px; } .lp-xmas-under + .lp-evening { padding-top: 40px; } }
/* Home on phones (founder, 12 Nov 2026): one even rhythm between sections. */
@media (max-width: 760px) {
  .lp .stage-show { padding: 40px 0 32px; }
  .lp .stage-show .lp-head { margin-bottom: 20px; }
  .lp-evening { padding: 40px 0 32px; }
  .lp-how { padding: 40px 0 36px; }
  .lp-voices { padding: 40px 0; }
  .lp-final { padding: 56px 0; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .lp .stage-show { padding: 64px 0 40px; }
}
/* How it works centred everywhere (founder, 12 Nov 2026): heading, line, each step and the button. */
.lp-how .lp-how-h, .lp-how .lp-how-lead { text-align: center; margin-left: auto; margin-right: auto; }
.lp-how .lp-how-steps li { justify-items: center; text-align: center; }
.lp-how .lp-how-steps p { max-width: 34ch; }
.lp-how .lp-how-cta { display: flex; justify-content: center; }
@media (max-width: 900px) { .lp-how .lp-how-cta { margin-top: 32px; } .lp-how .lp-how-lead { margin-bottom: 28px; } }
/* Footer on phones (founder, 12 Nov 2026): the support email sits on the left with the rest, no lonely gap. */
@media (max-width: 760px) {
  .footer-top > .footer-contact { justify-self: start; margin: -8px 0 0; font-size: 14px; }
}
/* Reviews heading on phones: the heading and All reviews on one tidy line. */
@media (max-width: 760px) {
  .lp-voices .lp-head { align-items: center; }
}
/* Buttons further down the home page on phones (founder, 12 Nov 2026): one normal size, not oversized. */
@media (max-width: 760px) {
  html.site-chrome main .lp-final .btn, html.site-chrome main .lp-how-cta .btn { height: 46px; min-height: 0; padding: 0 22px; font-size: 15px; border-radius: var(--radius-btn); }
}
/* Home on phones (founder, 12 Nov 2026): every section the same 32px top and bottom, so the gap between
   any two sections is always 64px; the closing call to action a little more. */
@media (max-width: 760px) {
  .lp > section:not(.lp-hero):not(.lp-xmas):not(.lp-final), .lp section.lp-evening, .lp section.stage-show, .lp section.lp-how, .lp section.lp-voices, .lp section.lp-faq-wrap { padding-top: 32px !important; padding-bottom: 32px !important; }
  .lp .lp-xmas-under + .lp-evening { padding-top: 32px !important; }
  .lp section .lp-head { margin-bottom: 20px; }
  .lp section h2 { margin-top: 0; }
  .lp .lp-final { padding: 48px 0 !important; }
}
/* Pricing block on the home page: centred like How it works, so sections don't flip left and right. */
#pricing .lp-head { flex-direction: column; align-items: center; text-align: center; }
#pricing .lp-head p { flex-basis: auto; }
#pricing .lp-how-cta { display: flex; justify-content: center; margin-top: 24px; }
#pricing .lp-how-cta .btn { height: 46px; padding: 0 22px; }
#faq .lp-head { justify-content: center; text-align: center; }