/* =====================================================================
   CITYICON — Design system
   Audience: 14+ / adults. Mature, professional, educational, competitive.
   No cartoon or nursery styling anywhere in this sheet.
   ===================================================================== */

:root {
  /* Core palette */
  --ci-ink:          #0b1220;
  --ci-chrome:       #0b1220;   /* always-dark chrome: banner, footer, sidebar */
  --ci-navy:         #101d33;
  --ci-navy-soft:    #1a2b48;
  --ci-primary:      #2563eb;
  --ci-primary-dark: #1d4ed8;
  --ci-primary-soft: #eff4ff;
  --ci-accent:       #f59e0b;
  --ci-accent-dark:  #b45309;

  /* Semantic */
  --ci-success:      #15803d;
  --ci-success-soft: #ecfdf3;
  --ci-danger:       #b91c1c;
  --ci-danger-soft:  #fef2f2;
  --ci-warning:      #b45309;
  --ci-warning-soft: #fffbeb;
  --ci-info:         #0369a1;
  --ci-info-soft:    #f0f9ff;

  /* Neutrals */
  --ci-body:         #f6f7fb;
  --ci-surface:      #ffffff;
  --ci-border:       #e3e8f0;
  --ci-border-strong:#cbd5e1;
  --ci-text:         #1e293b;
  --ci-muted:        #586778;
  /* A quiet fill that sits ON a card — chips, pills, muted rows. Distinct
     from --ci-chrome, which is the always-dark footer/sidebar colour and is
     not a light surface at all. */
  --ci-subtle:       #f1f5f9;
  --ci-surface-2:    #f6f8fc;   /* one step off --ci-surface */
  --ci-accent-soft:  #fff7ed;
  /* Text that sits ON a filled --ci-primary. */
  --ci-on-primary:   #ffffff;
  --ci-on-success:   #ffffff;

  --ci-radius:       12px;
  --ci-radius-sm:    8px;
  --ci-shadow-sm:    0 1px 2px rgba(15, 23, 42, .06);
  --ci-shadow:       0 4px 16px rgba(15, 23, 42, .08);
  --ci-shadow-lg:    0 12px 32px rgba(15, 23, 42, .12);

  --ci-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
body {
  font-family: var(--ci-font);
  background: var(--ci-body);
  color: var(--ci-text);
  font-size: .95rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--ci-ink); letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

a { color: var(--ci-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ci-primary-dark); }

.text-muted { color: var(--ci-muted) !important; }
.fw-medium  { font-weight: 500; }

/* Focus visibility — accessibility baseline */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 2px;
}

.section        { padding: 4.5rem 0; }
.section-tight  { padding: 3rem 0; }
.section-title  { margin-bottom: .5rem; }
.section-lead   { color: var(--ci-muted); max-width: 640px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ci-primary);
  margin-bottom: .6rem;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  font-weight: 600;
  border-radius: var(--ci-radius-sm);
  padding: .6rem 1.25rem;
  transition: all .15s ease;
}
.btn-lg { padding: .8rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: .35rem .8rem; font-size: .82rem; }

.btn-primary {
  background: var(--ci-primary);
  border-color: var(--ci-primary);
  box-shadow: var(--ci-shadow-sm);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ci-primary-dark);
  border-color: var(--ci-primary-dark);
  transform: translateY(-1px);
}
.btn-accent {
  background: var(--ci-accent);
  border-color: var(--ci-accent);
  color: #26170a;
}
.btn-accent:hover { background: #e08c07; border-color: #e08c07; color: #26170a; }

.btn-outline-light-strong {
  border: 1.5px solid rgba(255, 255, 255, .5);
  color: #fff;
}
.btn-outline-light-strong:hover { background: #fff; color: var(--ci-navy); }

/* ------------------------------------------------------------------ */
/* Navbar                                                              */
/* ------------------------------------------------------------------ */
.ci-navbar {
  background: var(--ci-surface);
  border-bottom: 1px solid var(--ci-border);
  box-shadow: var(--ci-shadow-sm);
  padding: .6rem 0;
}
.ci-navbar .navbar-brand {
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ci-ink);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.ci-brand-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-navy) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 800;
  flex: 0 0 auto;
}
.ci-navbar .nav-link {
  color: var(--ci-text);
  font-weight: 500;
  padding: .5rem .85rem !important;
  border-radius: 6px;
}
.ci-navbar .nav-link:hover { color: var(--ci-primary); background: var(--ci-primary-soft); }
.ci-navbar .nav-link.active { color: var(--ci-primary); font-weight: 600; }

.ci-notif-dot {
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ci-danger); border: 2px solid #fff;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.ci-hero {
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(37, 99, 235, .35), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(245, 158, 11, .18), transparent 55%),
    linear-gradient(150deg, var(--ci-chrome) 0%, var(--ci-navy) 55%, #16305c 100%);
  color: #fff;
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.ci-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}
.ci-hero > .container { position: relative; z-index: 2; }
.ci-hero h1 { color: #fff; line-height: 1.15; }
.ci-hero .lead { color: rgba(255, 255, 255, .82); font-size: 1.08rem; max-width: 560px; }

.ci-hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  margin-bottom: 1.25rem;
}

.ci-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.ci-hero-stat .num { font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; }
.ci-hero-stat .lbl { font-size: .78rem; color: rgba(255,255,255,.66); text-transform: uppercase; letter-spacing: .07em; margin-top: .35rem; }

/* Page banner for interior pages */
.ci-page-head {
  background: linear-gradient(135deg, var(--ci-chrome) 0%, var(--ci-navy) 100%);
  color: #fff;
  padding: 3rem 0 2.75rem;
}
.ci-page-head h1 { color: #fff; margin-bottom: .35rem; }
.ci-page-head p  { color: rgba(255,255,255,.75); margin-bottom: 0; }
.ci-page-head .breadcrumb { margin-bottom: .75rem; }
.ci-page-head .breadcrumb-item, .ci-page-head .breadcrumb-item a { color: rgba(255,255,255,.7); font-size: .85rem; }
.ci-page-head .breadcrumb-item.active { color: var(--ci-accent); }
.ci-page-head .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */
.ci-card {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.ci-card-hover:hover {
  box-shadow: var(--ci-shadow);
  transform: translateY(-3px);
  border-color: var(--ci-border-strong);
}
.ci-card-body { padding: 1.35rem; }

/* Quiz card */
.ci-quiz-card { display: flex; flex-direction: column; height: 100%; }
.ci-quiz-card .ci-card-body { display: flex; flex-direction: column; flex: 1; }
.ci-quiz-card .quiz-title {
  font-size: 1.05rem; font-weight: 700; color: var(--ci-ink);
  margin: .55rem 0 .5rem; line-height: 1.35;
}
.ci-quiz-card .quiz-title a { color: inherit; }
.ci-quiz-card .quiz-title a:hover { color: var(--ci-primary); }
.ci-quiz-meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  font-size: .82rem; color: var(--ci-muted);
  padding: .7rem 0; margin-top: auto;
  border-top: 1px dashed var(--ci-border);
}
.ci-quiz-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* Category tile */
.ci-cat-tile {
  display: block; height: 100%;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: all .18s ease;
}
.ci-cat-tile:hover {
  border-color: var(--ci-primary);
  box-shadow: var(--ci-shadow);
  transform: translateY(-3px);
}
.ci-cat-icon {
  width: 52px; height: 52px; margin: 0 auto .85rem;
  border-radius: 12px;
  background: var(--ci-primary-soft);
  color: var(--ci-primary);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.ci-cat-tile:hover .ci-cat-icon { background: var(--ci-primary); color: var(--ci-on-primary); }
.ci-cat-name { font-weight: 700; color: var(--ci-ink); font-size: .98rem; margin-bottom: .2rem; }
.ci-cat-count { font-size: .8rem; color: var(--ci-muted); }

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */
.ci-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700;
  padding: .28rem .6rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.badge-easy    { background: var(--ci-success-soft); color: var(--ci-success); }
.badge-medium  { background: var(--ci-warning-soft); color: var(--ci-warning); }
.badge-hard    { background: var(--ci-danger-soft);  color: var(--ci-danger); }
.badge-free    { background: #eef2ff; color: #4338ca; }
.badge-premium { background: linear-gradient(135deg, var(--ci-accent), var(--ci-accent-dark)); color: #fff; }
.badge-cat     { background: var(--ci-primary-soft); color: var(--ci-primary); }
.badge-soft-success { background: var(--ci-success-soft); color: var(--ci-success); }
.badge-soft-danger  { background: var(--ci-danger-soft);  color: var(--ci-danger); }
.badge-soft-warning { background: var(--ci-warning-soft); color: var(--ci-warning); }
.badge-soft-info    { background: var(--ci-info-soft);    color: var(--ci-info); }
.badge-soft-muted   { background: var(--ci-subtle); color: var(--ci-muted); }

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */
.form-label { font-weight: 600; font-size: .87rem; color: var(--ci-text); margin-bottom: .35rem; }
.form-control, .form-select {
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  padding: .6rem .85rem;
  font-size: .92rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ci-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.form-text { font-size: .8rem; }
.input-group-text { background: #f8fafc; border: 1.5px solid var(--ci-border); }

.ci-auth-wrap { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 2.5rem 1rem; }
.ci-auth-card {
  width: 100%; max-width: 470px;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: 16px;
  box-shadow: var(--ci-shadow-lg);
  padding: 2.25rem;
}
.ci-auth-card.wide { max-width: 620px; }

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */
.ci-table-wrap {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  overflow: hidden;
}
.ci-table { margin-bottom: 0; font-size: .88rem; }
.ci-table > thead {
  background: #f8fafc;
  border-bottom: 2px solid var(--ci-border);
}
.ci-table > thead th {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ci-muted);
  padding: .8rem 1rem;
  white-space: nowrap;
}
.ci-table > tbody > tr > td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--ci-border); }
.ci-table > tbody > tr:hover { background: #fafbfe; }

.ci-empty { text-align: center; padding: 3.5rem 1.5rem; color: var(--ci-muted); }
.ci-empty i { font-size: 2.75rem; color: var(--ci-border-strong); display: block; margin-bottom: .75rem; }

/* ------------------------------------------------------------------ */
/* Stat tiles                                                          */
/* ------------------------------------------------------------------ */
.ci-stat {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  padding: 1.15rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  height: 100%;
  box-shadow: var(--ci-shadow-sm);
}
.ci-stat-icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.25rem;
}
.ci-stat-value { font-size: 1.55rem; font-weight: 800; color: var(--ci-ink); line-height: 1.1; }
.ci-stat-label { font-size: .78rem; color: var(--ci-muted); text-transform: uppercase; letter-spacing: .05em; }
.tone-blue   { background: #eff6ff; color: #1d4ed8; }
.tone-green  { background: #ecfdf5; color: #15803d; }
.tone-amber  { background: #fffbeb; color: #b45309; }
.tone-red    { background: #fef2f2; color: #b91c1c; }
.tone-purple { background: #f5f3ff; color: #6d28d9; }
.tone-slate  { background: var(--ci-subtle); color: var(--ci-muted); }

/* ------------------------------------------------------------------ */
/* Quiz engine screen                                                  */
/* ------------------------------------------------------------------ */
.ci-quiz-shell { background: var(--ci-body); min-height: 100vh; padding-bottom: 3rem; }

.ci-quiz-bar {
  position: sticky; top: 0; z-index: 1030;
  background: var(--ci-surface);
  border-bottom: 1px solid var(--ci-border);
  box-shadow: var(--ci-shadow-sm);
  padding: .75rem 0;
}
.ci-timer {
  display: inline-flex; align-items: center; gap: .5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 1.15rem;
  background: var(--ci-primary-soft);
  color: var(--ci-primary-dark);
  padding: .4rem .95rem;
  border-radius: 9px;
  border: 1.5px solid rgba(37, 99, 235, .2);
}
.ci-timer.warning { background: var(--ci-warning-soft); color: var(--ci-warning); border-color: rgba(180, 83, 9, .25); }
.ci-timer.danger  { background: var(--ci-danger-soft);  color: var(--ci-danger);  border-color: rgba(185, 28, 28, .3); animation: ci-pulse 1s infinite; }
@keyframes ci-pulse { 0%,100% { opacity: 1 } 50% { opacity: .6 } }

.ci-question-card {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-sm);
  padding: 1.75rem;
}
.ci-question-num {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ci-primary);
}
.ci-question-text {
  font-size: 1.12rem; font-weight: 600; color: var(--ci-ink);
  line-height: 1.55; margin: .55rem 0 1.5rem;
}

.ci-option {
  display: flex; align-items: flex-start; gap: .85rem;
  border: 1.5px solid var(--ci-border);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
  cursor: pointer;
  transition: all .13s ease;
  background: var(--ci-surface);
}
.ci-option:hover { border-color: var(--ci-primary); background: var(--ci-primary-soft); }
.ci-option.selected { border-color: var(--ci-primary); background: var(--ci-primary-soft); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.ci-option input { margin-top: .28rem; flex: 0 0 auto; cursor: pointer; }
.ci-option-key {
  flex: 0 0 26px; height: 26px;
  border-radius: 6px; background: var(--ci-subtle); color: var(--ci-muted);
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
}
.ci-option.selected .ci-option-key { background: var(--ci-primary); color: var(--ci-on-primary); }
.ci-option-text { flex: 1; line-height: 1.5; }

/* Question navigator palette */
.ci-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: .5rem;
}
.ci-palette-btn {
  aspect-ratio: 1;
  border: 1.5px solid var(--ci-border);
  background: var(--ci-surface);
  border-radius: 8px;
  font-weight: 700; font-size: .85rem;
  color: var(--ci-muted);
  display: grid; place-items: center;
  transition: all .13s ease;
  cursor: pointer;
}
.ci-palette-btn:hover { border-color: var(--ci-primary); color: var(--ci-primary); }
.ci-palette-btn.answered { background: var(--ci-success); border-color: var(--ci-success); color: #fff; }
.ci-palette-btn.current  { box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); border-color: var(--ci-primary); color: var(--ci-primary); }
.ci-palette-btn.answered.current { color: #fff; }

.ci-legend { display: flex; flex-wrap: wrap; gap: .85rem; font-size: .78rem; color: var(--ci-muted); }
.ci-legend i { font-size: .65rem; margin-right: .3rem; }

/* ------------------------------------------------------------------ */
/* Result screen                                                       */
/* ------------------------------------------------------------------ */
.ci-score-ring {
  --pct: 0;
  width: 168px; height: 168px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--ring-color, var(--ci-primary)) calc(var(--pct) * 1%), #e8edf5 0);
  margin: 0 auto;
  position: relative;
}
.ci-score-ring::before {
  content: ""; position: absolute; inset: 12px;
  background: var(--ci-surface); border-radius: 50%;
}
.ci-score-ring-inner { position: relative; text-align: center; }
.ci-score-ring-inner .val { font-size: 2.15rem; font-weight: 800; color: var(--ci-ink); line-height: 1; }
.ci-score-ring-inner .lbl { font-size: .74rem; color: var(--ci-muted); text-transform: uppercase; letter-spacing: .07em; }

.ci-result-banner {
  border-radius: var(--ci-radius);
  padding: 1.1rem 1.35rem;
  display: flex; align-items: center; gap: .9rem;
  font-weight: 600;
}
.ci-result-banner.pass { background: var(--ci-success-soft); color: var(--ci-success); border: 1px solid rgba(21, 128, 61, .2); }
.ci-result-banner.fail { background: var(--ci-danger-soft);  color: var(--ci-danger);  border: 1px solid rgba(185, 28, 28, .2); }
.ci-result-banner i { font-size: 1.6rem; }

.ci-review-item {
  border: 1px solid var(--ci-border);
  border-left: 4px solid var(--ci-border-strong);
  border-radius: var(--ci-radius-sm);
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: var(--ci-surface);
}
.ci-review-item.correct     { border-left-color: var(--ci-success); }
.ci-review-item.incorrect   { border-left-color: var(--ci-danger); }
.ci-review-item.unattempted { border-left-color: var(--ci-border-strong); }
.ci-review-option {
  padding: .55rem .8rem; border-radius: 7px; margin-bottom: .35rem;
  font-size: .9rem; border: 1px solid transparent; display: flex; gap: .6rem; align-items: flex-start;
}
.ci-review-option.is-correct { background: var(--ci-success-soft); border-color: rgba(21,128,61,.25); color: #14532d; font-weight: 600; }
.ci-review-option.is-chosen-wrong { background: var(--ci-danger-soft); border-color: rgba(185,28,28,.25); color: #7f1d1d; font-weight: 600; }
.ci-explanation {
  background: var(--ci-info-soft);
  border-left: 3px solid var(--ci-info);
  padding: .75rem .95rem;
  border-radius: 0 7px 7px 0;
  font-size: .88rem;
  margin-top: .85rem;
  color: #0c4a6e;
}

/* ------------------------------------------------------------------ */
/* Pricing                                                             */
/* ------------------------------------------------------------------ */
.ci-plan {
  background: var(--ci-surface);
  border: 1.5px solid var(--ci-border);
  border-radius: 16px;
  padding: 1.9rem 1.6rem;
  height: 100%;
  display: flex; flex-direction: column;
  position: relative;
  transition: all .18s ease;
}
.ci-plan:hover { box-shadow: var(--ci-shadow); transform: translateY(-3px); }
.ci-plan.popular { border-color: var(--ci-primary); box-shadow: 0 8px 28px rgba(37,99,235,.14); }
.ci-plan-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ci-primary); color: var(--ci-on-primary);
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: 999px; white-space: nowrap;
}
.ci-plan-name  { font-size: 1.05rem; font-weight: 700; color: var(--ci-ink); }
.ci-plan-price { font-size: 2.3rem; font-weight: 800; color: var(--ci-ink); line-height: 1.1; margin: .5rem 0 .1rem; }
.ci-plan-price small { font-size: .85rem; font-weight: 500; color: var(--ci-muted); }
.ci-plan-features { list-style: none; padding: 0; margin: 1.25rem 0; flex: 1; }
.ci-plan-features li {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .42rem 0; font-size: .88rem; color: var(--ci-text);
}
.ci-plan-features i { color: var(--ci-success); margin-top: .18rem; flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* Leaderboard                                                         */
/* ------------------------------------------------------------------ */
.ci-rank {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font-weight: 800; font-size: .85rem;
  background: var(--ci-subtle); color: var(--ci-muted);
}
.ci-rank.gold   { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; }
.ci-rank.silver { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; }
.ci-rank.bronze { background: linear-gradient(135deg, #d8a07a, #b45309); color: #fff; }

.ci-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ci-navy); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .8rem; flex: 0 0 auto;
}
.ci-avatar-lg { width: 66px; height: 66px; font-size: 1.35rem; }

.ci-me-row { background: var(--ci-primary-soft) !important; }


/* ------------------------------------------------------------------ */
/* CTA band                                                            */
/* ------------------------------------------------------------------ */
.ci-cta-band {
  background: linear-gradient(135deg, var(--ci-navy) 0%, #1e3a8a 100%);
  border-radius: 18px;
  color: #fff;
  padding: 2.75rem 2.25rem;
}
.ci-cta-band h2 { color: #fff; }
.ci-cta-band p  { color: rgba(255,255,255,.8); margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.ci-footer {
  background: var(--ci-chrome);
  color: rgba(255, 255, 255, .68);
  padding: 3.5rem 0 0;
  font-size: .88rem;
}
.ci-footer h6 {
  color: #fff; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1rem;
}
.ci-footer a { color: rgba(255, 255, 255, .68); }
.ci-footer a:hover { color: var(--ci-accent); }
.ci-footer ul { list-style: none; padding: 0; margin: 0; }
.ci-footer li { margin-bottom: .5rem; }
.ci-footer-brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: .9rem; }
.ci-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2.5rem; padding: 1.25rem 0;
  font-size: .82rem; color: rgba(255, 255, 255, .5);
}
.ci-footer-credit {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: .85rem 0 1.2rem;
  font-size: .8rem; color: rgba(255, 255, 255, .45);
}
.ci-footer-credit a { color: rgba(255, 255, 255, .72); font-weight: 600; }
.ci-footer-credit a:hover { color: var(--ci-accent); }
.ci-social a {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  display: inline-grid; place-items: center;
  margin-right: .45rem; color: #fff;
}
.ci-social a:hover { background: var(--ci-primary); color: var(--ci-on-primary); }

/* ------------------------------------------------------------------ */
/* Dashboard layout (user + admin share the shell)                     */
/* ------------------------------------------------------------------ */
.ci-shell { display: flex; min-height: 100vh; }

.ci-sidebar {
  width: 258px; flex: 0 0 258px;
  background: var(--ci-chrome);
  color: rgba(255, 255, 255, .75);
  padding: 1.25rem 0;
  position: fixed; top: 0; bottom: 0; left: 0;
  overflow-y: auto;
  z-index: 1040;
  transition: transform .22s ease;
}
.ci-sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; font-weight: 800; font-size: 1.15rem;
  padding: .35rem 1.35rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  margin-bottom: .85rem;
}
.ci-sidebar-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .11em;
  color: rgba(255,255,255,.35); font-weight: 700;
  padding: 1rem 1.35rem .45rem;
}
.ci-sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .62rem 1.35rem;
  color: rgba(255, 255, 255, .72);
  font-size: .89rem; font-weight: 500;
  border-left: 3px solid transparent;
}
.ci-sidebar-link i { font-size: 1.02rem; width: 20px; text-align: center; flex: 0 0 auto; }
.ci-sidebar-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ci-sidebar-link.active {
  background: rgba(37, 99, 235, .18);
  border-left-color: var(--ci-primary);
  color: #fff; font-weight: 600;
}
.ci-sidebar-link .badge { margin-left: auto; }

.ci-main { flex: 1; min-width: 0; margin-left: 258px; background: var(--ci-body); }

.ci-topbar {
  background: var(--ci-surface);
  border-bottom: 1px solid var(--ci-border);
  padding: .8rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
}
.ci-topbar h1 { font-size: 1.15rem; margin: 0; }
.ci-content { padding: 1.5rem; }

.ci-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11, 18, 32, .5);
  z-index: 1035;
}

@media (max-width: 991.98px) {
  .ci-sidebar { transform: translateX(-100%); }
  .ci-sidebar.open { transform: translateX(0); }
  .ci-main { margin-left: 0; }
  .ci-sidebar-backdrop.show { display: block; }
}

/* ------------------------------------------------------------------ */
/* Alerts                                                              */
/* ------------------------------------------------------------------ */
.alert { border: none; border-radius: var(--ci-radius-sm); border-left: 4px solid; font-size: .9rem; }
.alert-success { background: var(--ci-success-soft); border-left-color: var(--ci-success); color: #14532d; }
.alert-danger  { background: var(--ci-danger-soft);  border-left-color: var(--ci-danger);  color: #7f1d1d; }
.alert-warning { background: var(--ci-warning-soft); border-left-color: var(--ci-warning); color: #78350f; }
.alert-info    { background: var(--ci-info-soft);    border-left-color: var(--ci-info);    color: #0c4a6e; }

/* ------------------------------------------------------------------ */
/* Legal pages                                                         */
/* ------------------------------------------------------------------ */
.ci-legal-body h2 { color: var(--ci-ink); border-bottom: 1px solid var(--ci-border); padding-bottom: .45rem; }
.ci-legal-body h2:first-child { margin-top: 0 !important; }
.ci-legal-body p  { color: var(--ci-text); margin-bottom: 1rem; }
.ci-legal-body ul, .ci-legal-body ol { padding-left: 1.35rem; color: var(--ci-text); }
.ci-legal-body li { margin-bottom: .45rem; }

/* ------------------------------------------------------------------ */
/* Utilities                                                           */
/* ------------------------------------------------------------------ */
.ci-divider { height: 1px; background: var(--ci-border); margin: 1.5rem 0; }
.ci-progress { height: 7px; border-radius: 99px; background: #e8edf5; overflow: hidden; }
.ci-progress-bar { height: 100%; border-radius: 99px; background: var(--ci-primary); transition: width .4s ease; }
.ci-filter-bar {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  padding: 1rem 1.15rem;
}
.text-tabular { font-variant-numeric: tabular-nums; }
.ci-sticky-side { position: sticky; top: 84px; }
.object-fit-cover { object-fit: cover; }

@media print {
  .ci-navbar, .ci-footer, .ci-sidebar, .ci-topbar, .no-print, .btn { display: none !important; }
  .ci-main { margin-left: 0; }
  body { background: #fff; }
}

@media (max-width: 575.98px) {
  .section { padding: 3rem 0; }
  .ci-hero { padding: 3.5rem 0 3rem; }
  .ci-auth-card { padding: 1.6rem; }
  .ci-question-card { padding: 1.25rem; }
  .ci-content { padding: 1rem; }
}

/* =====================================================================
   Depth & polish pass
   Richer surfaces and clearer hierarchy — achieved with light and spacing
   rather than motion, so nothing here can flicker.
   ===================================================================== */

.ci-card {
  position: relative;                    /* contains any injected overlay */
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.14);
}
.ci-card-hover:hover {
  box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 18px 40px -16px rgba(15,23,42,.24);
  border-color: #d6ddea;
}

.ci-stat {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -14px rgba(15,23,42,.18);
}

/* Accent rail that appears on hover — gives tiles a sense of material. */
.ci-stat::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--ci-primary);
  opacity: 0;
  transition: opacity .25s ease;
}
.ci-stat:hover::before { opacity: 1; }

.ci-cat-tile {
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* Section rhythm */
.eyebrow { display: inline-block; }
.section-title { letter-spacing: -.02em; }
.ci-card-body { padding: 1.45rem; }

/* Headings sit closer to their eyebrow, further from the body copy. */
.section-lead { line-height: 1.65; }

/* Hero copy needs more air against the particle field behind it. */
/* Two-layer shadow: a tight one for edge definition against light patches of
   the photograph, and a wide soft one to lift the text off the image. */
.ci-hero h1 {
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 3px 28px rgba(0,0,0,.45);
}
.ci-hero .lead,
.ci-hero-stat .num,
.ci-hero-stat .lbl {
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.4);
}
.ci-hero-pill { backdrop-filter: blur(6px); }

/* Buttons: crisper edges, clearer affordance. */
.btn-primary  { box-shadow: 0 1px 2px rgba(37,99,235,.3), 0 8px 18px -10px rgba(37,99,235,.55); }
.btn-accent   { box-shadow: 0 1px 2px rgba(245,158,11,.3), 0 8px 18px -10px rgba(245,158,11,.55); }
.btn-outline-secondary { border-color: var(--ci-border-strong); }
.btn-outline-secondary:hover { background: var(--ci-navy); border-color: var(--ci-navy); color: #fff; }

/* Tables: stronger header, quieter body, clearer zebra on hover. */
.ci-table > thead th { background: var(--ci-subtle); color: #475569; }
.ci-table > tbody > tr:hover { background: #f7faff; }

/* Plans */
.ci-plan { background: linear-gradient(180deg, #fff 0%, #fcfdff 100%); }

/* Footer link columns breathe a little more. */
.ci-footer h6 { color: #fff; opacity: .95; }
.ci-footer li { margin-bottom: .55rem; }

/* Focus states stay obvious against the new surfaces. */
a:focus-visible, .btn:focus-visible { outline-color: rgba(37,99,235,.55); }

/* Inline SVG illustrations ------------------------------------------- */
.ci-illustration { display: block; width: 100%; height: auto; max-width: 480px; }
.ci-illustration-sm { max-width: 300px; }
.ci-decor-blob {
  position: absolute; width: 420px; height: 420px;
  pointer-events: none; z-index: 0;
}
.ci-decor-tr { top: -140px; right: -120px; }
.ci-decor-bl { bottom: -160px; left: -140px; }
.ci-relative { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   Bootstrap 5.3 gives .h1–.h6 `color: var(--bs-heading-color)`, which
   defaults to `inherit`. That class selector outranks our element-level
   heading rule, so a `<h2 class="h5">` inside a white card placed within a
   dark section (the hero panel) inherited white text and vanished.
   Matching the specificity fixes it; the dark-section overrides below use
   descendant selectors and still win.
   --------------------------------------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ci-ink); }
.ci-hero h1, .ci-hero .h1,
.ci-page-head h1, .ci-page-head .h1,
.ci-cta-band h2, .ci-cta-band .h2,
.ci-footer h6, .ci-footer .h6 { color: #fff; }

/* Photographs ---------------------------------------------------------
   Fixed aspect ratio reserves the space before the image loads, so nothing
   on the page shifts as photos arrive.
   --------------------------------------------------------------------- */
.ci-photo {
  position: relative;
  margin: 0;
  border-radius: var(--ci-photo-radius, 16px);
  overflow: hidden;
  background: #eef2f8;
  aspect-ratio: var(--ci-photo-ratio, 4 / 3);
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 18px 40px -20px rgba(15,23,42,.32);
}
.ci-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ci-ease-out, ease);
}
.ci-photo-zoom:hover img { transform: scale(1.045); }

/* Tinted overlay so white text stays readable on a photo */
.ci-photo-tint::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,.12) 0%, rgba(11,18,32,.68) 100%);
}
.ci-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.25rem;
  color: #fff;
  z-index: 2;
}
.ci-photo-caption .t { font-weight: 700; font-size: 1rem; }
.ci-photo-caption .s { font-size: .82rem; opacity: .85; }

/* Small accent badge floated over a photo */
.ci-photo-badge {
  position: absolute; z-index: 2;
  background: #fff;
  border-radius: 12px;
  padding: .6rem .85rem;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,.35);
  display: flex; align-items: center; gap: .6rem;
}
.ci-photo-badge.tl { top: 1rem; left: 1rem; }
.ci-photo-badge.br { bottom: 1rem; right: 1rem; }
.ci-photo-badge .n { font-weight: 800; line-height: 1; }
.ci-photo-badge .l { font-size: .7rem; color: var(--ci-muted); text-transform: uppercase; letter-spacing: .06em; }

/* =====================================================================
   Cursive accent
   One word per heading, never body copy. Self-hosted (SIL Open Font
   License) so there is no CDN dependency.
   ===================================================================== */
@font-face {
  font-family: "Cityicon Script";
  src: url("../fonts/dancing-script.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.ci-script {
  font-family: "Cityicon Script", "Segoe Script", cursive;
  font-weight: 700;
  font-size: 1.18em;      /* script faces read smaller at the same size */
  line-height: 1.1;
  padding-right: .06em;   /* the tail needs a little room */
  color: var(--ci-accent);
}
.ci-hero .ci-script,
.ci-page-head .ci-script,
.ci-cta-band .ci-script { color: var(--ci-accent); }

/* =====================================================================
   DARK THEME
   Every colour in the design system is a variable, so the whole site —
   public pages, user dashboard, admin panel and the quiz engine — flips
   by reassigning them here. No per-page dark rules needed.
   ===================================================================== */
:root[data-theme="dark"] {
  --ci-ink:          #e8edf6;
  --ci-chrome:       #070d1a;   /* stays dark in dark mode too */
  --ci-navy:         #0f1729;
  --ci-navy-soft:    #16203a;
  --ci-primary:      #5b8def;
  --ci-primary-dark: #7aa5f5;
  --ci-primary-soft: #16233d;
  --ci-accent:       #fbbf24;
  --ci-accent-dark:  #d97706;

  --ci-success:      #4ade80;
  --ci-success-soft: #10241a;
  --ci-danger:       #f87171;
  --ci-danger-soft:  #2a1517;
  --ci-warning:      #fbbf24;
  --ci-warning-soft: #2a2010;
  --ci-info:         #38bdf8;
  --ci-info-soft:    #0c1f2e;

  --ci-body:         #0a1020;
  --ci-surface:      #111a2e;
  --ci-border:       #22304d;
  --ci-border-strong:#33456b;
  --ci-text:         #cbd5e6;
  --ci-muted:        #8fa0bd;
  --ci-subtle:       #1a2540;
  --ci-surface-2:    #16203a;
  --ci-accent-soft:  #2a2010;
  --ci-on-primary:   #0b1220;
  --ci-on-success:   #052e16;

  --ci-shadow-sm:    0 1px 2px rgba(0, 0, 0, .4);
  --ci-shadow:       0 4px 16px rgba(0, 0, 0, .5);
  --ci-shadow-lg:    0 12px 32px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* Bootstrap keeps its own set; map them so components follow along. */
:root[data-theme="dark"] {
  --bs-body-bg: var(--ci-body);
  --bs-body-color: var(--ci-text);
  --bs-border-color: var(--ci-border);
  --bs-emphasis-color: var(--ci-ink);
  --bs-secondary-color: var(--ci-muted);
  --bs-tertiary-bg: var(--ci-surface);
}

[data-theme="dark"] body { background: var(--ci-body); color: var(--ci-text); }

/* Surfaces */
[data-theme="dark"] .ci-card,
[data-theme="dark"] .ci-stat,
[data-theme="dark"] .ci-plan,
[data-theme="dark"] .ci-cat-tile,
[data-theme="dark"] .ci-table-wrap,
[data-theme="dark"] .ci-filter-bar,
[data-theme="dark"] .ci-question-card,
[data-theme="dark"] .ci-auth-card,
[data-theme="dark"] .ci-review-item,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .ci-option,
[data-theme="dark"] .ci-palette-btn {
  background: var(--ci-surface);
  border-color: var(--ci-border);
  color: var(--ci-text);
}
[data-theme="dark"] .ci-stat,
[data-theme="dark"] .ci-plan,
[data-theme="dark"] .ci-cat-tile { background: linear-gradient(180deg, #131d33 0%, #111a2e 100%); }

[data-theme="dark"] .bg-white { background: var(--ci-surface) !important; }
[data-theme="dark"] .ci-navbar { background: rgba(13, 20, 36, .92); border-bottom-color: var(--ci-border); }
[data-theme="dark"] .ci-topbar { background: var(--ci-surface); border-bottom-color: var(--ci-border); }
[data-theme="dark"] .ci-content { background: var(--ci-body); }
[data-theme="dark"] .ci-main { background: var(--ci-body); }
[data-theme="dark"] .ci-quiz-shell { background: var(--ci-body); }
[data-theme="dark"] .ci-quiz-bar { background: var(--ci-surface); border-bottom-color: var(--ci-border); }

/* Type */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3,
[data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: var(--ci-ink); }
[data-theme="dark"] .text-muted { color: var(--ci-muted) !important; }
[data-theme="dark"] .text-dark { color: var(--ci-ink) !important; }
[data-theme="dark"] .ci-navbar .nav-link { color: var(--ci-text); }
[data-theme="dark"] .ci-navbar .navbar-brand { color: var(--ci-ink); }

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #0d1526; border-color: var(--ci-border); color: var(--ci-text);
}
[data-theme="dark"] .form-control::placeholder { color: #6b7d9c; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: #0d1526; border-color: var(--ci-primary); color: var(--ci-text);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, .2);
}
[data-theme="dark"] .input-group-text { background: #16203a; border-color: var(--ci-border); color: var(--ci-muted); }
[data-theme="dark"] .form-label { color: var(--ci-text); }

/* Tables */
[data-theme="dark"] .ci-table { color: var(--ci-text); }
[data-theme="dark"] .ci-table > thead { background: #16203a; border-bottom-color: var(--ci-border); }
[data-theme="dark"] .ci-table > thead th { color: var(--ci-muted); background: #16203a; }
[data-theme="dark"] .ci-table > tbody > tr > td { border-color: var(--ci-border); }
[data-theme="dark"] .ci-table > tbody > tr:hover { background: #16203a; }
[data-theme="dark"] .table { --bs-table-color: var(--ci-text); --bs-table-bg: transparent; }

/* Buttons + misc components */
[data-theme="dark"] .btn-outline-secondary { color: var(--ci-text); border-color: var(--ci-border-strong); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--ci-primary); border-color: var(--ci-primary); color: #08101f; }
[data-theme="dark"] .btn-primary { color: #08101f; }
[data-theme="dark"] .dropdown-menu { background: var(--ci-surface); border-color: var(--ci-border); }
[data-theme="dark"] .dropdown-item { color: var(--ci-text); }
[data-theme="dark"] .dropdown-item:hover { background: #16203a; color: var(--ci-ink); }
[data-theme="dark"] .accordion-button { background: var(--ci-surface); color: var(--ci-ink); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background: #16203a; color: var(--ci-primary); }
[data-theme="dark"] .accordion-body { background: var(--ci-surface); color: var(--ci-muted); }
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--ci-border); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--ci-muted); }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--ci-surface); border-color: var(--ci-border) var(--ci-border) var(--ci-surface); color: var(--ci-ink); }
[data-theme="dark"] .page-link { background: var(--ci-surface); border-color: var(--ci-border); color: var(--ci-text); }
[data-theme="dark"] .page-item.active .page-link { background: var(--ci-primary); border-color: var(--ci-primary); color: #08101f; }
[data-theme="dark"] .border, [data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--ci-border) !important; }
[data-theme="dark"] .ci-divider { background: var(--ci-border); }
[data-theme="dark"] .ci-progress { background: #1b263f; }
[data-theme="dark"] .ci-empty i { color: var(--ci-border-strong); }
[data-theme="dark"] .ci-review-option { color: var(--ci-text); }
[data-theme="dark"] .ci-review-option.is-correct { background: #10241a; border-color: #1d5236; color: #86efac; }
[data-theme="dark"] .ci-review-option.is-chosen-wrong { background: #2a1517; border-color: #6b2528; color: #fca5a5; }
[data-theme="dark"] .ci-explanation { background: #0c1f2e; color: #bae6fd; border-left-color: var(--ci-info); }
[data-theme="dark"] .ci-option:hover { background: #16233d; }
[data-theme="dark"] .ci-option.selected { background: #16233d; }
[data-theme="dark"] .ci-me-row { background: #16233d !important; }
[data-theme="dark"] .ci-photo { background: #16203a; }
[data-theme="dark"] .ci-photo-badge { background: var(--ci-surface); }
[data-theme="dark"] .ci-skeleton { background: linear-gradient(90deg, #16203a 25%, #1d2a45 50%, #16203a 75%); }
[data-theme="dark"] .ci-illustration { filter: saturate(.9) brightness(.95); }
[data-theme="dark"] .alert-success { background: #10241a; color: #86efac; }
[data-theme="dark"] .alert-danger  { background: #2a1517; color: #fca5a5; }
[data-theme="dark"] .alert-warning { background: #2a2010; color: #fcd34d; }
[data-theme="dark"] .alert-info    { background: #0c1f2e; color: #bae6fd; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Theme switch button */
.ci-theme-toggle {
  border: 1px solid var(--ci-border);
  background: transparent;
  color: var(--ci-text);
  width: 38px; height: 38px;
  border-radius: 9px;
  display: inline-grid; place-items: center;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
  flex: 0 0 auto;
}
.ci-theme-toggle:hover { background: var(--ci-primary-soft); color: var(--ci-primary); transform: translateY(-1px); }
.ci-theme-toggle .bi-sun-fill { display: none; }
[data-theme="dark"] .ci-theme-toggle .bi-sun-fill  { display: inline-block; }
[data-theme="dark"] .ci-theme-toggle .bi-moon-stars { display: none; }
.ci-sidebar .ci-theme-toggle { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.18); }
.ci-sidebar .ci-theme-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }

/* =====================================================================
   Hero — photographic background
   The photo carries the mood; a dark scrim plus the existing gradient keeps
   the headline at full contrast in both themes.
   ===================================================================== */
.ci-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ci-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* City skylines and lakefronts read better slightly lower in frame than
     the portrait crop the previous photographs needed. */
  object-position: center 42%;
  filter: saturate(1.08) contrast(1.05) brightness(.95);
}
.ci-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  /* Dense behind the headline, clearing to almost nothing on the right so the
     photograph is genuinely visible. Left stop keeps text well above the
     WCAG AA contrast threshold. */
  background:
    linear-gradient(90deg, rgba(8,14,28,.88) 0%, rgba(8,14,28,.70) 34%,
                           rgba(8,14,28,.26) 62%, rgba(8,14,28,.06) 100%),
    linear-gradient(180deg, rgba(8,14,28,.26) 0%, rgba(8,14,28,.02) 38%,
                            rgba(8,14,28,.58) 100%);
}
[data-theme="dark"] .ci-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(4,8,18,.92) 0%, rgba(4,8,18,.78) 34%,
                           rgba(4,8,18,.42) 62%, rgba(4,8,18,.20) 100%),
    linear-gradient(180deg, rgba(4,8,18,.34) 0%, rgba(4,8,18,.10) 38%,
                            rgba(4,8,18,.70) 100%);
}

@media (max-width: 991.98px) {
  .ci-hero-bg img { object-position: center 30%; }
}

/* =====================================================================
   CITY COMPETITION UI
   Cityicon is a local competition platform, not an exam portal. These
   components carry that: cities, challenges, prizes and city pride.
   ===================================================================== */

/* ---- City card ---------------------------------------------------- */
.ci-city-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  min-height: 230px;
  background: var(--ci-chrome);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform .35s var(--ci-ease-out), box-shadow .35s ease;
  box-shadow: 0 2px 6px rgba(15,23,42,.08), 0 18px 40px -22px rgba(15,23,42,.5);
}
.ci-city-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(15,23,42,.14), 0 30px 60px -28px rgba(15,23,42,.7); color:#fff; }
.ci-city-card__img { position: absolute; inset: 0; z-index: -2; }
.ci-city-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ci-ease-out); }
.ci-city-card:hover .ci-city-card__img img { transform: scale(1.07); }
.ci-city-card__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,14,28,.25) 0%, rgba(8,14,28,.72) 62%, rgba(8,14,28,.94) 100%);
}
.ci-city-card__body { position: relative; padding: 1.25rem; display: flex; flex-direction: column; height: 100%; min-height: 230px; }
.ci-city-card__state {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; opacity: .8;
}
.ci-city-card__name { font-size: 1.45rem; font-weight: 800; line-height: 1.1; margin: .15rem 0 .2rem; }
.ci-city-card__tag  { font-size: .84rem; opacity: .82; }
.ci-city-card__meta { margin-top: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: 1rem; }
.ci-city-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  padding: .22rem .55rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.ci-city-card__glow {
  position: absolute; inset: auto -30% -50% -30%; height: 60%;
  background: radial-gradient(circle, var(--city-glow, rgba(37,99,235,.7)), transparent 68%);
  opacity: 0; transition: opacity .4s ease; z-index: -1;
}
.ci-city-card:hover .ci-city-card__glow { opacity: .55; }

/* ---- Challenge card ------------------------------------------------ */
.ci-challenge {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--ci-border);
  background: var(--ci-surface);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ci-ease-out), box-shadow .3s ease, border-color .3s ease;
}
.ci-challenge:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -20px rgba(15,23,42,.45); border-color: var(--ci-border-strong); }
.ci-challenge__top { padding: 1.1rem 1.25rem; color: #fff; position: relative; }
.ci-challenge__top::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,.42));
}
.ci-challenge__top > * { position: relative; z-index: 1; }
.ci-challenge__city { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .9; }
.ci-challenge__title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin-top: .15rem; }
.ci-challenge__body { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.ci-challenge__facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--ci-muted); }
.ci-challenge__facts span { display: inline-flex; align-items: center; gap: .32rem; }
.ci-challenge__prize {
  margin-top: .85rem; padding: .6rem .8rem; border-radius: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,.13), rgba(245,158,11,.05));
  border: 1px solid rgba(245,158,11,.28);
  display: flex; align-items: center; gap: .55rem; font-size: .84rem;
}
.ci-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ci-status-dot.live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: ciLivePulse 2s ease-in-out infinite; }
@keyframes ciLivePulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25);} 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0);} }

/* ---- Prize card ---------------------------------------------------- */
.ci-prize {
  position: relative; border-radius: 18px; padding: 1.6rem 1.25rem 1.4rem;
  text-align: center; height: 100%;
  background: linear-gradient(180deg, var(--ci-surface) 0%, #fbfcff 100%);
  border: 1px solid var(--ci-border);
  overflow: hidden;
  transition: transform .35s var(--ci-ease-out), box-shadow .35s ease;
}
.ci-prize:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -24px rgba(15,23,42,.5); }
/* First place gets an animated gold ring.
   This used to be a z-index:-1 pseudo-element sitting behind the card. That
   only works while the card creates no stacking context — and .ci-prize
   carries data-tilt, which applies a transform on hover and does create one.
   The ring then painted OVER the card's white background, turning the whole
   panel gold and leaving the dark text unreadable on it.
   Two-layer background-clip needs no pseudo-element and no z-index, so the
   ring stays a ring whatever the stacking context does. */
.ci-prize--1 {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, var(--ci-surface) 0%, #fbfcff 100%) padding-box,
    linear-gradient(130deg, #f59e0b, #b45309, #f59e0b) border-box;
  background-size: auto, 250% 250%;
  animation: ciGradient 6s ease infinite;
}
[data-theme="dark"] .ci-prize--1 {
  background:
    linear-gradient(180deg, var(--ci-surface) 0%, rgba(148,163,184,.06) 100%) padding-box,
    linear-gradient(130deg, #f59e0b, #b45309, #f59e0b) border-box;
  background-size: auto, 250% 250%;
}
.ci-prize__medal {
  width: 66px; height: 66px; margin: 0 auto .8rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, #94a3b8, #64748b);
  box-shadow: 0 8px 18px -6px rgba(15,23,42,.5);
}
.ci-prize--1 .ci-prize__medal { background: linear-gradient(145deg, #fbbf24, #d97706); }
.ci-prize--2 .ci-prize__medal { background: linear-gradient(145deg, #cbd5e1, #94a3b8); }
.ci-prize--3 .ci-prize__medal { background: linear-gradient(145deg, #d8a07a, #b45309); }
.ci-prize__value { font-size: 1.9rem; font-weight: 800; color: var(--ci-ink); line-height: 1.1; }
.ci-prize__title { font-size: .95rem; font-weight: 700; color: var(--ci-ink); margin-top: .2rem; }
.ci-prize__desc  { font-size: .82rem; color: var(--ci-muted); margin-top: .45rem; }
.ci-prize__img { width: 100%; height: 120px; object-fit: contain; margin-bottom: .6rem; }

/* ---- City Icons strip: glass + shifting colour --------------------- */
.ci-icons-strip {
  position: relative; overflow: hidden;
  padding: 1.4rem 0;
  /* Was a dark navy band directly under the hero, which read as a second
     header. A pale tinted strip separates hero from content without another
     block of black. */
  background: linear-gradient(135deg, #eef3fb, #f7f9fd);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ci-icons-track { display: flex; gap: 1rem; width: max-content; animation: ciMarquee 44s linear infinite; }
.ci-icons-strip:hover .ci-icons-track { animation-play-state: paused; }
.ci-icon-name {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 2px 8px -4px rgba(15,23,42,.18);
  backdrop-filter: blur(10px);
  font-weight: 800; font-size: 1.05rem;
  white-space: nowrap;
  animation: ciNameHue 9s linear infinite;
}
.ci-icon-name small { font-size: .68rem; font-weight: 600; color: var(--ci-muted); }
/* Deeper hues now that the strip is pale — the light-theme versions of the
   same four colours, so the names stay legible against white. */
@keyframes ciNameHue {
  0%   { color: #1d4ed8; }
  25%  { color: #b45309; }
  50%  { color: #047857; }
  75%  { color: #be185d; }
  100% { color: #1d4ed8; }
}
.ci-icons-track .ci-icon-name:nth-child(3n)   { animation-delay: -3s; }
.ci-icons-track .ci-icon-name:nth-child(3n+1) { animation-delay: -6s; }

/* ---- Testimonial card ---------------------------------------------- */
.ci-voice {
  border-radius: 16px; padding: 1.4rem;
  background: var(--ci-surface); border: 1px solid var(--ci-border);
  height: 100%; display: flex; flex-direction: column;
  transition: transform .3s var(--ci-ease-out), box-shadow .3s ease;
}
.ci-voice:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -22px rgba(15,23,42,.45); }
.ci-voice__quote { font-size: .93rem; color: var(--ci-text); line-height: 1.6; flex: 1; }
.ci-voice__who { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--ci-border); }
.ci-voice__mark { font-family: Georgia, serif; font-size: 2.6rem; line-height: 1; color: var(--ci-primary); opacity: .22; }

/* ---- WhatsApp community -------------------------------------------- */
.ci-wa {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1.1rem; border-radius: 14px;
  background: var(--ci-surface); border: 1px solid var(--ci-border);
  text-decoration: none; height: 100%;
  transition: transform .25s var(--ci-ease-out), border-color .25s ease, box-shadow .25s ease;
}
.ci-wa:hover { transform: translateY(-3px); border-color: #0f7a52; box-shadow: 0 14px 30px -18px rgba(37,211,102,.8); }
.ci-wa__icon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: rgba(37,211,102,.12); color: #128c4a;
}
[data-theme="dark"] .ci-city-card, [data-theme="dark"] .ci-challenge,
[data-theme="dark"] .ci-prize, [data-theme="dark"] .ci-voice, [data-theme="dark"] .ci-wa {
  background: var(--ci-surface); border-color: var(--ci-border);
}
[data-theme="dark"] .ci-prize { background: linear-gradient(180deg, #131d33 0%, #111a2e 100%); }

/* City card without a photograph -------------------------------------
   Falls back to a themed gradient plus a large landmark watermark, so a
   city reads as designed rather than unfinished before artwork is added.
   -------------------------------------------------------------------- */
.ci-city-card--noimg {
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--city-glow) 55%, transparent) 0%, transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--city-glow) 42%, #0b1220) 0%, #0b1220 72%);
}
.ci-city-card__mark {
  position: absolute; right: -12px; bottom: -18px;
  font-size: 7.5rem; line-height: 1;
  color: #fff; opacity: .09;
  transform: rotate(-8deg);
  pointer-events: none; z-index: -1;
  transition: transform .5s var(--ci-ease-out), opacity .4s ease;
}
.ci-city-card:hover .ci-city-card__mark { transform: rotate(-4deg) scale(1.08); opacity: .16; }
.ci-city-card--noimg .ci-city-card__veil {
  background: linear-gradient(180deg, transparent 0%, rgba(8,14,28,.35) 60%, rgba(8,14,28,.82) 100%);
}

/* Older browsers without color-mix still get a solid themed panel. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ci-city-card--noimg { background: linear-gradient(160deg, var(--city-glow), #0b1220 72%); }
}

/* Language picker ----------------------------------------------------- */
.ci-lang__menu { max-height: 340px; overflow-y: auto; min-width: 230px; }
.ci-lang__native { font-weight: 600; }
.ci-lang .dropdown-item.active { background: var(--ci-primary-soft); color: var(--ci-primary); }
[dir="rtl"] .ci-lang__menu { text-align: right; }
[dir="rtl"] body { text-align: right; }

/* ============================================================
   CHALLENGE CARD — layered 3D
   ------------------------------------------------------------
   The old card was a flat coloured strip over a white box. This
   version builds real depth: a raised inner plate, a gradient
   header with a light mesh behind it, a medallion that breaks the
   header/body seam, and a CTA with a lit top edge and a solid
   base so it reads as a physical key rather than a rectangle.

   --ch is the accent, set inline from the city's theme colour.
   ============================================================ */
.ci-ch {
  --ch: #2563eb;
  position: relative;
  height: 100%;
  perspective: 1100px;
  isolation: isolate;
}

/* The cast shadow lives on a pseudo-element so it can scale on hover
   without dragging the card's own filter/paint work with it. */
.ci-ch::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: -14px; height: 26px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ch) 42%, transparent), transparent 72%);
  filter: blur(14px);
  opacity: .5;
  transform: scaleY(.7);
  transition: opacity .45s ease, transform .45s ease;
  z-index: -1;
}
.ci-ch:hover::after { opacity: .85; transform: scaleY(1) translateY(3px); }

.ci-ch__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 28px -18px rgba(15,23,42,.5);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease, border-color .3s ease;
  will-change: transform;
}
.ci-ch:hover .ci-ch__inner {
  transform: translateY(-8px) rotateX(4deg) scale(1.014);
  border-color: color-mix(in srgb, var(--ch) 45%, var(--ci-border));
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 26px 50px -22px color-mix(in srgb, var(--ch) 55%, rgba(15,23,42,.6));
}

/* ---------- header ---------- */
.ci-ch__top {
  position: relative;
  padding: 1.15rem 1.25rem 1.6rem;
  color: #fff;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--ch) 92%, #fff) 0%,
      var(--ch) 45%,
      color-mix(in srgb, var(--ch) 68%, #000) 100%);
  transform: translateZ(18px);
}
/* Soft light source, top-left — what makes the panel read as curved. */
.ci-ch__mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,.42), transparent 55%),
    radial-gradient(80% 70% at 108% 115%, rgba(0,0,0,.34), transparent 60%);
  pointer-events: none;
}
/* Faint blueprint grid — texture without noise. */
.ci-ch__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
  pointer-events: none;
}
.ci-ch__top > *:not(.ci-ch__mesh):not(.ci-ch__grid) { position: relative; z-index: 2; }

/* The header's bottom edge curves into the body. */
.ci-ch__top::after {
  content: '';
  position: absolute; left: -5%; right: -5%; bottom: -1px; height: 26px;
  background: var(--ci-surface);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 3;
}

.ci-ch__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.ci-ch__place {
  display: inline-flex; align-items: center; gap: .34rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ci-ch__state {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 999px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.2);
}
.ci-ch__pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ci-ch__state--live  { color: #a7f3d0; }
.ci-ch__state--soon  { color: #fde68a; }
.ci-ch__state--done  { color: #cbd5e1; }
.ci-ch__state--live .ci-ch__pulse { animation: chPulse 2s ease-in-out infinite; }
@keyframes chPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167,243,208,.7); }
  50%      { box-shadow: 0 0 0 6px rgba(167,243,208,0); }
}

.ci-ch__title {
  font-size: 1.12rem; font-weight: 800; line-height: 1.24;
  margin: .65rem 0 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.ci-ch__sub { font-size: .82rem; margin: .3rem 0 0; opacity: .88; line-height: 1.4; }

/* ---------- prize medallion, straddling the seam ---------- */
.ci-ch__medal {
  position: relative;
  z-index: 4;
  margin: -1.05rem 1.25rem 0 auto;
  width: max-content;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem .55rem .7rem;
  border-radius: 14px;
  background: linear-gradient(145deg, #fffdf5, #fdf0d0);
  border: 1px solid #f0d79a;
  box-shadow:
    0 1px 0 #fff inset,
    0 10px 22px -12px rgba(180,120,20,.65);
  transform: translateZ(34px);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ci-ch:hover .ci-ch__medal { transform: translateZ(34px) translateY(-2px) rotate(-1.2deg); }
.ci-ch__medal > .bi {
  font-size: 1.2rem;
  color: #d99a12;
  filter: drop-shadow(0 2px 3px rgba(180,120,20,.4));
}
.ci-ch__medal-txt { display: flex; flex-direction: column; gap: .1rem; line-height: 1.25; }
.ci-ch__medal-txt small {
  font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #8a6212;
}
.ci-ch__medal-txt strong { font-size: .95rem; line-height: 1.2; color: #5c3f05; }

/* ---------- body ---------- */
.ci-ch__body {
  padding: .9rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; flex: 1;
  transform: translateZ(12px);
}
.ci-ch__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ci-ch__chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: var(--ci-muted);
  padding: .32rem .6rem;
  border-radius: 9px;
  background: var(--ci-surface-2);
  border: 1px solid var(--ci-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.ci-ch__chip b { color: var(--ci-ink); font-weight: 800; }
.ci-ch__chip .bi { color: color-mix(in srgb, var(--ch) 75%, var(--ci-muted)); }

.ci-ch__foot {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px dashed var(--ci-border);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.ci-ch__price { display: flex; flex-direction: column; line-height: 1.15; }
.ci-ch__amt { font-size: 1.15rem; font-weight: 800; color: var(--ci-ink); }
.ci-ch__amt--free { color: #047857; }
.ci-ch__cap { font-size: .68rem; color: var(--ci-muted); }

/* CTA: lit top edge + darker base = a key you can press. */
.ci-ch__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.05rem;
  border-radius: 12px;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  color: #fff; white-space: nowrap;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ch) 88%, #fff) 0%,
    var(--ch) 55%,
    color-mix(in srgb, var(--ch) 80%, #000) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -2px 0 color-mix(in srgb, var(--ch) 60%, #000) inset,
    0 8px 18px -8px color-mix(in srgb, var(--ch) 70%, transparent);
  transform: translateZ(26px);
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  overflow: hidden;
}
.ci-ch__cta::before {                       /* travelling sheen */
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.ci-ch__cta:hover { color: #fff; filter: brightness(1.06); transform: translateZ(26px) translateY(-2px); }
.ci-ch__cta:hover::before { left: 115%; }
.ci-ch__cta:active { transform: translateZ(26px) translateY(1px); box-shadow: 0 2px 6px -2px rgba(0,0,0,.4) inset; }
.ci-ch__cta .bi { transition: transform .28s ease; }
.ci-ch__cta:hover .bi { transform: translateX(3px); }

/* ---------- dark theme ---------- */
[data-theme="dark"] .ci-ch__inner {
  background: var(--ci-surface);
  border-color: rgba(148,163,184,.2);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 30px -20px rgba(0,0,0,.85);
}
[data-theme="dark"] .ci-ch__top::after { background: var(--ci-surface); }
[data-theme="dark"] .ci-ch__chip { background: rgba(148,163,184,.09); box-shadow: none; }
[data-theme="dark"] .ci-ch__medal {
  background: linear-gradient(145deg, #3a3016, #2a2210);
  border-color: rgba(217,154,18,.45);
}
[data-theme="dark"] .ci-ch__medal-txt strong { color: #fde68a; }
[data-theme="dark"] .ci-ch__medal-txt small  { color: #f0c96e; }

/* Motion is decorative here — honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .ci-ch__inner, .ci-ch__medal, .ci-ch__cta, .ci-ch::after { transition: none; }
  .ci-ch:hover .ci-ch__inner { transform: translateY(-3px); }
  .ci-ch__state--live .ci-ch__pulse { animation: none; }
  .ci-ch__cta::before { display: none; }
}

/* ---------- Admin → Translations ---------- */
.ci-lang-pill {
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 148px; padding: .55rem .7rem;
  border: 1px solid var(--ci-border); border-radius: 12px;
  background: var(--ci-surface); text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ci-lang-pill:hover { transform: translateY(-2px); border-color: var(--ci-border-strong); color: inherit;
                      box-shadow: 0 8px 18px -12px rgba(15,23,42,.4); }
.ci-lang-pill.is-on { border-color: var(--ci-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.ci-lang-pill__name { font-weight: 700; font-size: .95rem; }
.ci-lang-pill__meta { font-size: .68rem; color: var(--ci-muted); }
.ci-lang-pill__bar  { display: block; height: 4px; border-radius: 999px; background: var(--ci-surface-2); margin-top: .35rem; overflow: hidden; }
.ci-lang-pill__bar i{ display: block; height: 100%; background: var(--ci-primary); border-radius: 999px; transition: width .4s ease; }
.ci-lang-pill__pct  { font-size: .62rem; color: var(--ci-muted); align-self: flex-end; }

.ci-tr-src { font-size: .84rem; color: var(--ci-ink); }
.ci-tr-src--block {
  background: var(--ci-surface-2); border: 1px solid var(--ci-border);
  border-radius: 8px; padding: .45rem .6rem; line-height: 1.45;
  max-height: 8.5rem; overflow: auto;
}
.ci-sticky-save {
  position: sticky; bottom: 0; z-index: 20;
  padding: .75rem 1rem; margin-top: .5rem;
  background: color-mix(in srgb, var(--ci-surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ci-border); border-radius: 14px;
  box-shadow: 0 -6px 20px -14px rgba(15,23,42,.5);
}

/* ---------- Admin question images ---------- */
.ci-qn-thumb {
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--ci-border); background: var(--ci-surface-2);
}
.ci-qn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-qn-listimg {
  max-width: 220px; max-height: 140px; border-radius: 10px;
  border: 1px solid var(--ci-border); display: block; object-fit: cover;
}

/* ============================================================
   TEXT ON COLOURED SURFACES
   ------------------------------------------------------------
   Global element rules set a colour directly:
       h1,h2,h3,h4,h5,h6 { color: var(--ci-ink) }
   A directly-matched rule always beats an inherited value, so a
   heading inside a coloured panel ignores the panel's white and
   renders near-black — dark ink on a blue, red or pink header.

   These rules re-assert the readable colour for every element
   that sits on a coloured surface. Light surfaces are left alone
   so dark ink keeps working where it already reads well.
   ============================================================ */
.ci-ch__top,
.ci-ch__top h1, .ci-ch__top h2, .ci-ch__top h3,
.ci-ch__top h4, .ci-ch__top h5, .ci-ch__top h6,
.ci-ch__top p,  .ci-ch__top span, .ci-ch__top a,
.ci-ch__top strong, .ci-ch__top small {
  color: #fff;
}
.ci-ch__sub { color: rgba(255,255,255,.90); }
.ci-ch__state--live { color: #a7f3d0; }
.ci-ch__state--soon { color: #fde68a; }
.ci-ch__state--done { color: #cbd5e1; }

/* The CTA is a coloured key — its label and icon stay white in both themes. */
.ci-ch__cta, .ci-ch__cta span, .ci-ch__cta .bi,
.ci-ch__cta:hover, .ci-ch__cta:focus { color: #fff; }

/* The medallion is a light gold plate, so it keeps dark text. */
.ci-ch__medal .ci-ch__medal-txt strong { color: #6b4a06; }
.ci-ch__medal .ci-ch__medal-txt small  { color: #a8791b; }

/* Same rule for the other coloured panels on the site. */
.ci-cta-band, .ci-cta-band h1, .ci-cta-band h2, .ci-cta-band h3,
.ci-cta-band h4, .ci-cta-band h5, .ci-cta-band h6, .ci-cta-band p {
  color: #fff;
}
.ci-city-card__body, .ci-city-card__body span,
.ci-city-card__name, .ci-city-card__state, .ci-city-card__tag { color: #fff; }

/* ---------- Participant panel: challenge rows ---------- */
.ci-entry-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 0;
  border-top: 1px solid var(--ci-border);
}
.ci-entry-row:first-of-type { border-top: 0; }
.ci-entry-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.ci-mini-challenge {
  --ch: #2563eb;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem;
  border: 1px solid var(--ci-border); border-radius: 12px;
  background: var(--ci-surface);
  text-decoration: none; color: inherit; height: 100%;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ci-mini-challenge:hover {
  color: inherit; transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ch) 45%, var(--ci-border));
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--ch) 70%, rgba(15,23,42,.6));
}
.ci-mini-challenge__bar {
  width: 4px; align-self: stretch; border-radius: 999px; flex: 0 0 auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ch) 85%, #fff), var(--ch));
}
.ci-mini-challenge__city  { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em;
                            text-transform: uppercase; color: var(--ci-muted); }
.ci-mini-challenge__title { display: block; font-weight: 700; font-size: .9rem;
                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-mini-challenge__meta  { display: block; font-size: .74rem; color: var(--ci-muted); }
.ci-mini-challenge > .bi  { color: var(--ch); transition: transform .2s ease; }
.ci-mini-challenge:hover > .bi { transform: translateX(3px); }

/* Rank pill — gold, silver, bronze, then neutral. */
.ci-rank {
  display: inline-block; min-width: 2.4rem; text-align: center;
  padding: .12rem .45rem; border-radius: 8px;
  font-weight: 800; font-size: .82rem;
  background: var(--ci-surface-2); color: var(--ci-ink);
  border: 1px solid var(--ci-border);
}
.ci-rank--1 { background: linear-gradient(145deg,#fde68a,#f59e0b); color: #5b3d05; border-color: #e0a020; }
.ci-rank--2 { background: linear-gradient(145deg,#e5e7eb,#9ca3af); color: #333a45; border-color: #9aa3af; }
.ci-rank--3 { background: linear-gradient(145deg,#e7c3a6,#b45309); color: #4a2a05; border-color: #b0762f; }

.ci-city-panel { overflow: hidden; }
.ci-city-panel__img { height: 128px; overflow: hidden; }
.ci-city-panel__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   REWARDS — grand prize showcase + prize slider
   ============================================================ */
.ci-rewards { position: relative; }

/* ---------------- grand prize ---------------- */
.ci-grand {
  display: grid;
  /* The photographs are the selling point, so they take the larger share. */
  grid-template-columns: 1.35fr .85fr;
  gap: 0;
  border-radius: 26px;
  overflow: hidden;
  margin-bottom: 3rem;
  /* Light, not navy. The depth now comes from a soft tint, a real border and
     a lifted shadow rather than from darkness — the panel reads as premium
     without turning the middle of the page into a black band. */
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(150deg, #ffffff 0%, #f6f9ff 55%, #eef3fb 100%);
  border: 1px solid var(--ci-border);
  box-shadow: 0 24px 60px -38px rgba(15, 23, 42, .38);
  isolation: isolate;
}
@media (max-width: 1100px) { .ci-grand { grid-template-columns: 1.1fr 1fr; } }
@media (max-width: 900px)  {
  .ci-grand { grid-template-columns: 1fr; }
  .ci-grand__media { min-height: 340px; }
}

.ci-grand__media { position: relative; min-height: 520px; }
.ci-grand__stage { position: absolute; inset: 0; overflow: hidden; }
.ci-grand__shot {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 6s linear;
}
.ci-grand__shot.is-on { opacity: 1; transform: scale(1); }
.ci-grand__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Blend the photo into the panel so there is no hard seam. */
.ci-grand__glow {
  position: absolute; inset: 0;
  /* Fade the photograph into the panel on its inner edge only. */
  background: linear-gradient(90deg, transparent 58%, #f6f9ff 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .ci-grand__glow { background: linear-gradient(180deg, transparent 55%, #f6f9ff 100%); }
}

.ci-grand__dots {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 2;
  display: flex; gap: .4rem;
}
.ci-grand__dots button {
  width: 34px; height: 5px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(15,23,42,.22); cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.ci-grand__dots button.is-on { background: #d97706; width: 54px; }

.ci-grand__body { padding: 2.4rem 2.2rem; color: var(--ci-ink); }
@media (max-width: 600px) { .ci-grand__body { padding: 1.6rem 1.25rem; } }

.ci-grand__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .34rem .7rem; border-radius: 999px; margin-bottom: .9rem;
  color: #92660a;
  background: rgba(251,191,36,.18);
  border: 1px solid rgba(245,158,11,.42);
}
.ci-grand__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ci-ink); margin: 0 0 .6rem; line-height: 1.15; }
.ci-grand__title .ci-script { color: #d97706; }
.ci-grand__lead { color: var(--ci-muted); font-size: .95rem; line-height: 1.6; margin-bottom: 1.2rem; }

.ci-grand__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .55rem; }
.ci-grand__list li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--ci-ink);
}
.ci-grand__list .bi { color: #d97706; flex: 0 0 auto; }
.ci-grand__note { font-size: .74rem; color: var(--ci-muted); margin: 1rem 0 0; line-height: 1.5; }

/* ---------------- slider ---------------- */
.ci-slider { position: relative; }
.ci-slider__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.ci-slider__nav { display: flex; gap: .4rem; }
.ci-slider__btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--ci-border); background: var(--ci-surface);
  color: var(--ci-ink); cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.ci-slider__btn:hover:not(:disabled) {
  background: var(--ci-primary); border-color: var(--ci-primary); color: var(--ci-on-primary); transform: translateY(-2px);
}
.ci-slider__btn:disabled { opacity: .32; cursor: default; }

/* Scroll-snap does the work — it keeps working with JS disabled,
   and on touch it is just a native swipe. */
.ci-slider__track {
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem .25rem 1rem;
  margin: -.5rem -.25rem 0;
  scrollbar-width: none;
}
.ci-slider__track::-webkit-scrollbar { display: none; }
.ci-slider__track:focus-visible { outline: 2px solid var(--ci-primary); outline-offset: 4px; border-radius: 16px; }
.ci-slider__track > * { scroll-snap-align: start; flex: 0 0 clamp(240px, 26vw, 300px); }

.ci-slider__rail {
  height: 4px; border-radius: 999px; background: var(--ci-surface-2);
  overflow: hidden; margin-top: .25rem;
}
.ci-slider__rail span {
  display: block; height: 100%; width: 30%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ci-primary), #fbbf24);
  transition: transform .18s linear, width .25s ease;
  transform-origin: left center;
}

/* ---------------- prize card ---------------- */
.ci-pz {
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; height: 100%;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  box-shadow: 0 10px 26px -20px rgba(15,23,42,.5);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.ci-pz:hover {
  transform: translateY(-8px);
  border-color: var(--ci-border-strong);
  box-shadow: 0 26px 46px -26px rgba(15,23,42,.6);
}

.ci-pz__top { position: relative; height: 132px; overflow: hidden; background: var(--ci-surface-2); }
.ci-pz__img { width: 100%; height: 100%; object-fit: cover; display: block;
              transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.ci-pz:hover .ci-pz__img { transform: scale(1.08); }
.ci-pz__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,38,.15) 0%, rgba(8,20,38,.62) 100%);
}
.ci-pz__medal {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; color: #fff;
  background: linear-gradient(145deg, #94a3b8, #64748b);
  border: 3px solid var(--ci-surface);
  box-shadow: 0 8px 18px -6px rgba(15,23,42,.6);
  z-index: 2;
}
.ci-pz--1 .ci-pz__medal { background: linear-gradient(145deg, #fbbf24, #d97706); }
.ci-pz--2 .ci-pz__medal { background: linear-gradient(145deg, #e2e8f0, #94a3b8); color: #334155; }
.ci-pz--3 .ci-pz__medal { background: linear-gradient(145deg, #e0a678, #b45309); }

.ci-pz__ribbon {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
  color: #4a3105; background: linear-gradient(145deg, #fde68a, #f59e0b);
  box-shadow: 0 4px 12px -4px rgba(180,120,20,.7);
}
/* First place keeps an animated gold edge — drawn with background-clip so it
   cannot escape over the card the way a z-index pseudo-element can. */
.ci-pz--1 {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--ci-surface), var(--ci-surface)) padding-box,
    linear-gradient(130deg, #f59e0b, #b45309, #f59e0b) border-box;
  background-size: auto, 250% 250%;
  animation: ciGradient 6s ease infinite;
}

.ci-pz__body { padding: 2rem 1.1rem 1.2rem; text-align: center; flex: 1;
               display: flex; flex-direction: column; }
.ci-pz__value { font-size: 1.45rem; font-weight: 800; color: var(--ci-ink); line-height: 1.15; }
.ci-pz__title { font-size: .9rem; font-weight: 700; color: var(--ci-ink); margin-top: .15rem; }
.ci-pz__desc  { font-size: .8rem; color: var(--ci-muted); margin: .5rem 0 0; line-height: 1.5; }
.ci-pz__where {
  margin-top: auto; padding-top: .8rem;
  font-size: .74rem; color: var(--ci-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
}
.ci-pz__where .bi { color: var(--ci-primary); }

[data-theme="dark"] .ci-pz { background: var(--ci-surface); border-color: rgba(148,163,184,.2); }
[data-theme="dark"] .ci-pz--1 {
  background:
    linear-gradient(var(--ci-surface), var(--ci-surface)) padding-box,
    linear-gradient(130deg, #f59e0b, #b45309, #f59e0b) border-box;
  background-size: auto, 250% 250%;
}
[data-theme="dark"] .ci-pz__medal { border-color: var(--ci-surface); }

@media (prefers-reduced-motion: reduce) {
  .ci-grand__shot { transition: opacity .3s ease; transform: none; }
  .ci-pz, .ci-pz__img, .ci-slider__rail span { transition: none; }
  .ci-pz--1 { animation: none; }
  .ci-slider__track { scroll-behavior: auto; }
}

/* ---------- Leaderboard: city + time ---------- */
.ci-lb-city {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600;
  padding: .18rem .5rem; border-radius: 8px;
  background: color-mix(in srgb, var(--ch) 12%, transparent);
  color: color-mix(in srgb, var(--ch) 78%, var(--ci-ink));
  border: 1px solid color-mix(in srgb, var(--ch) 28%, transparent);
}
.ci-lb-time {
  display: inline-flex; align-items: center; gap: .3rem;
  font-variant-numeric: tabular-nums; font-size: .84rem; color: var(--ci-muted);
}
/* When the board is sorted by speed, the time column is the answer — say so. */
.ci-lb-time.is-key {
  font-weight: 800; color: var(--ci-ink);
  background: color-mix(in srgb, var(--ci-primary) 12%, transparent);
  padding: .18rem .5rem; border-radius: 8px;
}
.ci-lb-time .bi { color: var(--ci-primary); }

/* Curved prize imagery — the photo gets its own rounded frame inside the card
   rather than sitting square against the edges. */
.ci-pz__top {
  border-radius: 16px 16px 22px 22px;
  margin: .55rem .55rem 0;
  height: 148px;
  overflow: hidden;
}
.ci-pz__img { border-radius: inherit; }
.ci-pz__scrim { border-radius: inherit; }

/* The grand-prize photographs get a deep curve on the inner edge so they
   flow into the copy panel instead of butting against it. */
.ci-grand__stage { border-radius: 26px 0 0 26px; }
@media (max-width: 900px) { .ci-grand__stage { border-radius: 26px 26px 0 0; } }
.ci-grand__shot img { border-radius: inherit; }

/* prizes.php / city.php keep the grid, so give the cards a floor height */
.ci-prize-grid .ci-pz { height: 100%; }

/* Per-question timer badge (replaced the old marks label) */
.ci-qtimer { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.ci-qtimer.is-warn   { background: rgba(245,158,11,.16); color: #b45309; border-color: rgba(245,158,11,.4); }
.ci-qtimer.is-danger { background: rgba(239,68,68,.16);  color: #b91c1c; border-color: rgba(239,68,68,.45);
                       animation: ciQtimerPulse 1s ease-in-out infinite; }
@keyframes ciQtimerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
[data-theme="dark"] .ci-qtimer.is-warn   { color: #fcd34d; }
[data-theme="dark"] .ci-qtimer.is-danger { color: #fca5a5; }
@media (prefers-reduced-motion: reduce) { .ci-qtimer.is-danger { animation: none; } }

/* ============================================================
   REWARD SHOWCASE — text sits on the image, not under it
   ============================================================ */
.ci-showcase__track > * { flex: 0 0 clamp(260px, 30vw, 360px); }

.ci-shw {
  position: relative;
  height: 340px;
  border-radius: 22px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  isolation: isolate;
  box-shadow: 0 16px 36px -22px rgba(15,23,42,.65);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
.ci-shw:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -26px rgba(15,23,42,.7); }
.ci-shw__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 1s cubic-bezier(.2,.7,.3,1);
}
.ci-shw:hover .ci-shw__img { transform: scale(1.09); }
/* A gradient, not a flat wash — the photo stays visible at the top while the
   text sits on solid colour at the bottom. */
.ci-shw__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(8,20,38,.05) 0%, rgba(8,20,38,.35) 45%, rgba(8,20,38,.88) 100%);
}
.ci-shw__cat {
  position: absolute; top: 1rem; left: 1rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: 999px;
  color: #0b1c30; background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.ci-shw__body { padding: 1.3rem 1.2rem; width: 100%; }
.ci-shw__title {
  color: #fff; font-size: 1.18rem; font-weight: 800; margin: 0; line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.ci-shw__sub { color: rgba(255,255,255,.85); font-size: .84rem; margin: .35rem 0 0; line-height: 1.45; }

/* ============================================================
   WINNERS WALL
   ============================================================ */
.ci-win {
  --ch: #2563eb;
  display: flex; flex-direction: column; height: 100%;
  border-radius: 18px; overflow: hidden;
  background: var(--ci-surface); border: 1px solid var(--ci-border);
  box-shadow: 0 12px 28px -22px rgba(15,23,42,.5);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.ci-win:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--ch) 45%, var(--ci-border));
  box-shadow: 0 26px 46px -26px color-mix(in srgb, var(--ch) 55%, rgba(15,23,42,.6));
}
.ci-win__top { position: relative; height: 210px; overflow: hidden; background: var(--ci-surface-2); }
.ci-win__photo { width: 100%; height: 100%; object-fit: cover; display: block;
                 transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.ci-win:hover .ci-win__photo { transform: scale(1.07); }
.ci-win__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,38,.05), rgba(8,20,38,.55));
}
.ci-win__rank {
  position: absolute; top: .7rem; left: .7rem;
  min-width: 40px; padding: .22rem .55rem; border-radius: 10px;
  font-weight: 800; font-size: .9rem; text-align: center;
  background: linear-gradient(145deg,#e2e8f0,#94a3b8); color: #334155;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.55);
}
.ci-win--1 .ci-win__rank { background: linear-gradient(145deg,#fde68a,#f59e0b); color: #4a3105; }
.ci-win--2 .ci-win__rank { background: linear-gradient(145deg,#e5e7eb,#9ca3af); color: #333a45; }
.ci-win--3 .ci-win__rank { background: linear-gradient(145deg,#e0a678,#b45309); color: #fff; }
.ci-win__season {
  position: absolute; top: .7rem; right: .7rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 999px;
  background: rgba(255,255,255,.9); color: #0b1c30;
}
.ci-win__body { padding: .95rem 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.ci-win__name { font-size: 1.02rem; font-weight: 800; margin: 0; }
.ci-win__city { font-size: .78rem; color: var(--ci-muted); display: flex; align-items: center; gap: .3rem; margin-top: .1rem; }
.ci-win__city .bi { color: var(--ch); }
.ci-win__comp { font-size: .76rem; color: var(--ci-muted); margin-top: .3rem; }
.ci-win__prize {
  margin-top: .6rem; font-size: .8rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .55rem; border-radius: 9px;
  background: rgba(245,158,11,.14); color: #a8791b;
  border: 1px solid rgba(245,158,11,.3);
}
[data-theme="dark"] .ci-win__prize { color: #fcd34d; }
.ci-win__score { margin-top: auto; padding-top: .6rem; font-size: .78rem; color: var(--ci-muted); }

/* ============================================================
   YOUTUBE
   ============================================================ */
.ci-tube__player {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden; cursor: pointer;
  background: #000;
  box-shadow: 0 20px 44px -26px rgba(15,23,42,.7);
}
.ci-tube__poster { width: 100%; height: 100%; object-fit: cover; display: block;
                   transition: transform .7s ease, filter .4s ease; }
.ci-tube__player:hover .ci-tube__poster { transform: scale(1.03); filter: brightness(.85); }
.ci-tube__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ci-tube__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  font-size: 2.1rem; color: #fff;
  background: rgba(220,38,38,.94);
  box-shadow: 0 10px 30px -8px rgba(220,38,38,.8);
  transition: transform .3s ease, background .3s ease;
}
.ci-tube__player:hover .ci-tube__play { transform: translate(-50%,-50%) scale(1.09); background: #dc2626; }

.ci-tube__list { display: flex; flex-direction: column; gap: .6rem; }
.ci-tube__item {
  display: flex; gap: .7rem; align-items: center; text-align: left;
  padding: .5rem; border-radius: 12px; cursor: pointer;
  background: var(--ci-surface); border: 1px solid var(--ci-border);
  transition: border-color .2s ease, transform .2s ease;
}
.ci-tube__item:hover { transform: translateX(3px); border-color: var(--ci-border-strong); }
.ci-tube__item img { width: 108px; height: 61px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.ci-tube__item-title {
  display: block; font-size: .84rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ci-tube__item-cta { display: inline-flex; align-items: center; gap: .25rem;
                     font-size: .72rem; color: #dc2626; margin-top: .2rem; }

@media (prefers-reduced-motion: reduce) {
  .ci-shw, .ci-shw__img, .ci-win, .ci-win__photo,
  .ci-tube__poster, .ci-tube__play, .ci-tube__item { transition: none; }
}

/* ============================================================
   PRICING — one card, used on every page that shows a price
   ------------------------------------------------------------
   Deliberately not a SaaS pricing table: the price is the hero,
   the card has real depth, and the featured plan is lifted with
   a lit edge rather than a coloured header strip.
   ============================================================ */
.ci-plan2 {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 1.6rem 1.35rem 1.35rem;
  border-radius: 20px;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  box-shadow: 0 12px 30px -24px rgba(15,23,42,.55);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, border-color .3s ease;
}
.ci-plan2:hover {
  transform: translateY(-6px);
  border-color: var(--ci-border-strong);
  box-shadow: 0 28px 50px -28px rgba(15,23,42,.6);
}
.ci-plan2.is-compact { padding: 1.2rem 1.1rem; }

/* Featured: a gold-into-blue border drawn with background-clip, so no
   pseudo-element can escape over the content the way a z-index layer can. */
.ci-plan2.is-featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--ci-surface), var(--ci-surface)) padding-box,
    linear-gradient(140deg, #2563eb, #7c3aed 45%, #f59e0b) border-box;
  box-shadow: 0 20px 44px -26px rgba(37,99,235,.6);
}
.ci-plan2.is-featured:hover { box-shadow: 0 30px 58px -28px rgba(37,99,235,.7); }

.ci-plan2__flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px; white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 8px 18px -8px rgba(37,99,235,.8);
}
.ci-plan2__flag .bi { color: #fde68a; }

.ci-plan2__head { margin-bottom: .9rem; }
.ci-plan2__name { font-size: 1.06rem; font-weight: 800; margin: 0; }
.ci-plan2__tag  { font-size: .8rem; color: var(--ci-muted); margin: .2rem 0 0; line-height: 1.45; }

.ci-plan2__pricing {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  padding: .9rem 0; margin-bottom: .9rem;
  border-top: 1px dashed var(--ci-border);
  border-bottom: 1px dashed var(--ci-border);
}
.ci-plan2__amount {
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  color: var(--ci-ink); letter-spacing: -.02em;
}
.ci-plan2__amount--free { color: #047857; }
.ci-plan2__was { font-size: .95rem; color: var(--ci-muted); text-decoration: line-through; }
.ci-plan2__save {
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 6px;
  color: #047857; background: rgba(5,150,105,.14); border: 1px solid rgba(5,150,105,.3);
}
.ci-plan2__period { width: 100%; font-size: .74rem; color: var(--ci-muted); }

.ci-plan2__list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.ci-plan2__list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .84rem; line-height: 1.45; }
.ci-plan2__list .bi {
  flex: 0 0 auto; margin-top: .12rem;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem;
  color: #047857; background: rgba(5,150,105,.14);
}

.ci-plan2__foot { margin-top: auto; }
.ci-plan2__cta {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; padding: .72rem 1rem;
  border: 0; border-radius: 12px;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,
              0 -2px 0 rgba(0,0,0,.18) inset,
              0 10px 22px -10px rgba(37,99,235,.75);
  transition: transform .25s ease, filter .25s ease;
}
.ci-plan2__cta:hover { color: #fff; filter: brightness(1.07); transform: translateY(-2px); }
.ci-plan2__cta:active { transform: translateY(1px); }
.ci-plan2__cta .bi { transition: transform .25s ease; }
.ci-plan2__cta:hover .bi { transform: translateX(3px); }
.ci-plan2.is-featured .ci-plan2__cta {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,
              0 -2px 0 rgba(0,0,0,.2) inset,
              0 10px 22px -10px rgba(217,119,6,.8);
}
.ci-plan2__cta.is-owned {
  background: var(--ci-surface-2); color: var(--ci-muted);
  box-shadow: none; cursor: default;
}
.ci-plan2__note { font-size: .7rem; color: var(--ci-muted); text-align: center; margin: .55rem 0 0; }

[data-theme="dark"] .ci-plan2 { border-color: rgba(148,163,184,.2); }
[data-theme="dark"] .ci-plan2.is-featured {
  background:
    linear-gradient(var(--ci-surface), var(--ci-surface)) padding-box,
    linear-gradient(140deg, #2563eb, #7c3aed 45%, #f59e0b) border-box;
}
[data-theme="dark"] .ci-plan2__cta.is-owned { background: rgba(148,163,184,.12); }

@media (prefers-reduced-motion: reduce) {
  .ci-plan2, .ci-plan2__cta, .ci-plan2__cta .bi { transition: none; }
}

/* ---------- Entry-fee panel (challenge pages) ---------- */
.ci-entrybox {
  --ch: #2563eb;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--ci-border);
  background: var(--ci-surface);
  box-shadow: 0 14px 32px -24px rgba(15,23,42,.55);
}
.ci-entrybox__top {
  padding: 1rem 1.2rem;
  color: #fff;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--ch) 90%, #fff), var(--ch) 55%,
    color-mix(in srgb, var(--ch) 72%, #000));
}
.ci-entrybox__top, .ci-entrybox__top h1, .ci-entrybox__top h2, .ci-entrybox__top h3,
.ci-entrybox__top p, .ci-entrybox__top span, .ci-entrybox__top small { color: #fff; }
.ci-entrybox__eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.ci-entrybox__title { font-size: 1.05rem; font-weight: 800; margin: .15rem 0 0; }
.ci-entrybox__body { padding: 1.1rem 1.2rem 1.2rem; }
.ci-entrybox__fee { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .9rem; }
.ci-entrybox__amt { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ci-ink); }
.ci-entrybox__amt--free { color: #047857; }
.ci-entrybox__cap { font-size: .74rem; color: var(--ci-muted); }
.ci-entrybox__list { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .45rem; }
.ci-entrybox__list li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ci-muted); }
.ci-entrybox__list .bi { color: #047857; }

/* ---------- Admin: side-by-side English / Hindi editing ---------- */
.ci-bi-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ci-muted); margin-bottom: .4rem;
}
.ci-bi-head span { padding-bottom: .3rem; border-bottom: 2px solid var(--ci-border); }
.ci-bi-head span:last-child { border-bottom-color: color-mix(in srgb, var(--ci-primary) 45%, var(--ci-border)); }
.ci-bi-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
/* One column on a phone: two side-by-side text boxes are unusable at that width. */
@media (max-width: 767px) {
  .ci-bi-head { display: none; }
  .ci-bi-row  { grid-template-columns: 1fr; gap: .5rem; }
  .ci-bi-row > div:last-child .form-label::before { content: '🌐 '; }
}

/* ============================================================
   RESULT — achievement, not report card
   ============================================================ */
.ci-resulthero {
  --ch: #2563eb;
  position: relative; overflow: hidden;
  padding: 3rem 0 2.6rem;
  color: #fff;
  background: linear-gradient(150deg, #0f2744 0%, #14304f 45%, #0b1c30 100%);
}
.ci-resulthero.is-podium {
  background: linear-gradient(150deg, #3b2606 0%, #1f2a44 55%, #0b1c30 100%);
}
.ci-resulthero.is-dq { background: linear-gradient(150deg, #3a1216 0%, #1d1f2e 55%, #0b1220 100%); }

.ci-resulthero__glow {
  position: absolute; left: 50%; top: -40%;
  width: 760px; height: 760px; transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--ch) 40%, transparent), transparent 62%);
  pointer-events: none;
}
.ci-resulthero.is-podium .ci-resulthero__glow {
  background: radial-gradient(circle, rgba(251,191,36,.34), transparent 62%);
  animation: ciResultGlow 4s ease-in-out infinite;
}
@keyframes ciResultGlow { 0%,100% { opacity:.7; } 50% { opacity:1; } }

.ci-resulthero .container { position: relative; z-index: 1; }
.ci-resulthero__head { text-align: center; margin-bottom: 2rem; }
.ci-resulthero__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .34rem .8rem; border-radius: 999px; margin-bottom: .8rem;
  color: #a7f3d0; background: rgba(16,185,129,.16); border: 1px solid rgba(16,185,129,.35);
}
.ci-resulthero__tag.is-gold { color: #fde68a; background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.4); }
.ci-resulthero__tag.is-bad  { color: #fca5a5; background: rgba(239,68,68,.16);  border-color: rgba(239,68,68,.4); }

.ci-resulthero__title {
  color: #fff; font-size: clamp(1.7rem, 4vw, 2.7rem); margin: 0; line-height: 1.12;
}
.ci-resulthero.is-podium .ci-resulthero__title .ci-script { color: #fbbf24; }
.ci-resulthero__where {
  color: #9fb6d4; font-size: .9rem; margin: .5rem 0 0;
  display: inline-flex; align-items: center; gap: .35rem;
}

/* three headline numbers */
.ci-resultgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  max-width: 820px; margin: 0 auto;
}
@media (max-width: 700px) { .ci-resultgrid { grid-template-columns: 1fr; } }

.ci-rcard {
  padding: 1.3rem 1.2rem;
  border-radius: 18px; text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ci-rcard__label {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #9fb6d4; margin-bottom: .4rem;
}
.ci-rcard__value {
  font-size: 2.5rem; font-weight: 800; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ci-rcard__value small { font-size: 1.1rem; opacity: .7; margin-left: .1rem; }
.ci-rcard__value--sm { font-size: 1.8rem; }
.ci-rcard__sub {
  font-size: .76rem; color: #b9cade; margin-top: .35rem;
  display: inline-flex; align-items: center; gap: .3rem;
}
.ci-rcard__bar {
  height: 5px; border-radius: 999px; margin-top: .8rem; overflow: hidden;
  background: rgba(255,255,255,.14);
}
.ci-rcard__bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #34d399);
  animation: ciResultFill 1.1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes ciResultFill { from { width: 0 !important; } }

.ci-rcard--rank.is-podium {
  background: linear-gradient(160deg, rgba(251,191,36,.22), rgba(217,119,6,.10));
  border-color: rgba(251,191,36,.45);
}
.ci-rcard--rank.is-podium .ci-rcard__value { color: #fde68a; }

.ci-resultnote {
  max-width: 820px; margin: 1.4rem auto 0;
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .9rem 1.1rem; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.ci-resultnote > .bi { font-size: 1.4rem; flex: 0 0 auto; }
.ci-resultnote strong { color: #fff; }
.ci-resultnote .small { color: #b9cade; }
.ci-resultnote.is-prize { background: rgba(251,191,36,.13); border-color: rgba(251,191,36,.35); }
.ci-resultnote.is-prize > .bi { color: #fbbf24; }
.ci-resultnote.is-bad   { background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.35); }
.ci-resultnote.is-bad > .bi { color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
  .ci-resulthero.is-podium .ci-resulthero__glow { animation: none; }
  .ci-rcard__bar i { animation: none; }
}

/* ---------- Pricing slider: every card the same size ---------- */
/* The track is a flex row, so a fixed basis plus stretch gives identical
   width AND identical height regardless of how many features each plan lists. */
.ci-priceslider .ci-slider__track { align-items: stretch; padding-top: 1.1rem; }
.ci-priceslider__cell {
  flex: 0 0 clamp(280px, 32%, 360px);
  display: flex;
}
.ci-priceslider__cell > .ci-plan2 { width: 100%; }

/* The "Most Popular" flag sits above the card edge, so the track needs
   headroom or it gets clipped by the scroll container. */
.ci-priceslider .ci-slider__track { overflow-y: visible; }

@media (max-width: 575px) {
  .ci-priceslider__cell { flex-basis: 86%; }
}

/* Showcase cards: identical height too, so the row never looks ragged. */
.ci-showcase__track { align-items: stretch; }
.ci-showcase__track > * { height: auto; }
.ci-showcase__track .ci-shw { height: 340px; width: 100%; }

/* ============================================================
   PRIZE ROWS — challenge page
   A four-across grid squeezes the photo to a thumbnail and wraps
   the title over three lines inside a two-thirds column. Rows give
   the image real width and keep every tier legible.
   ============================================================ */
.ci-prizerows { display: grid; gap: .75rem; }

.ci-prow {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  align-items: center;
  padding: .7rem;
  border-radius: 16px;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  box-shadow: 0 8px 22px -18px rgba(15,23,42,.5);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .3s ease;
}
.ci-prow:hover {
  transform: translateX(4px);
  border-color: var(--ci-border-strong);
  box-shadow: 0 16px 32px -20px rgba(15,23,42,.55);
}
@media (max-width: 575px) {
  .ci-prow { grid-template-columns: 104px 1fr; gap: .75rem; }
}

.ci-prow__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ci-surface-2);
}
.ci-prow__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.ci-prow:hover .ci-prow__media img { transform: scale(1.07); }

.ci-prow__badge {
  position: absolute; left: .4rem; bottom: .4rem;
  min-width: 34px; text-align: center;
  font-size: .72rem; font-weight: 800; line-height: 1;
  padding: .26rem .45rem; border-radius: 8px;
  background: linear-gradient(145deg, #e2e8f0, #94a3b8); color: #334155;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.55);
}
.ci-prow--1 .ci-prow__badge { background: linear-gradient(145deg,#fde68a,#f59e0b); color: #4a3105; }
.ci-prow--2 .ci-prow__badge { background: linear-gradient(145deg,#e5e7eb,#9ca3af); color: #333a45; }
.ci-prow--3 .ci-prow__badge { background: linear-gradient(145deg,#e0a678,#b45309); color: #fff; }
.ci-prow--4 .ci-prow__badge { background: linear-gradient(145deg,#bfdbfe,#60a5fa); color: #12325e; }

.ci-prow__body { min-width: 0; padding-right: .4rem; }
.ci-prow__value {
  font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--ci-ink);
  letter-spacing: -.01em;
}
@media (max-width: 575px) { .ci-prow__value { font-size: 1.1rem; } }
.ci-prow__title { font-size: .85rem; font-weight: 700; color: var(--ci-ink); margin-top: .1rem; }
.ci-prow__desc  { font-size: .78rem; color: var(--ci-muted); margin: .3rem 0 0; line-height: 1.45; }

/* First place gets an animated gold edge, drawn with background-clip so no
   layer can escape over the card. */
.ci-prow--1 {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--ci-surface), var(--ci-surface)) padding-box,
    linear-gradient(130deg, #f59e0b, #b45309, #f59e0b) border-box;
  background-size: auto, 250% 250%;
  animation: ciGradient 6s ease infinite;
}
.ci-prow__flag {
  position: absolute; top: -9px; right: 12px;
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px;
  color: #4a3105; background: linear-gradient(145deg,#fde68a,#f59e0b);
  box-shadow: 0 4px 12px -4px rgba(180,120,20,.8);
}

[data-theme="dark"] .ci-prow { border-color: rgba(148,163,184,.2); }
[data-theme="dark"] .ci-prow--1 {
  background:
    linear-gradient(var(--ci-surface), var(--ci-surface)) padding-box,
    linear-gradient(130deg, #f59e0b, #b45309, #f59e0b) border-box;
  background-size: auto, 250% 250%;
}
@media (prefers-reduced-motion: reduce) {
  .ci-prow, .ci-prow__media img { transition: none; }
  .ci-prow--1 { animation: none; }
}

/* ---------- About: the step-by-step explainer ---------- */
.ci-explain { list-style: none; counter-reset: none; padding: 0; margin: 0; }
.ci-explain > li {
  position: relative;
  padding: 0 0 1.6rem 1.6rem;
  border-left: 2px solid var(--ci-border);
}
.ci-explain > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ci-explain > li::before {
  content: '';
  position: absolute; left: -7px; top: .45rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ci-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ci-primary) 18%, transparent);
}
.ci-explain h3 { font-size: 1.02rem; font-weight: 800; margin: 0 0 .4rem; }
.ci-explain p  { font-size: .9rem; color: var(--ci-muted); line-height: 1.62; margin: 0 0 .6rem; }
.ci-explain p:last-child { margin-bottom: 0; }
.ci-explain strong { color: var(--ci-ink); }

/* An aside is context, not instruction — visually secondary. */
.ci-explain__aside {
  padding: .55rem .8rem;
  border-radius: 10px;
  background: var(--ci-surface-2);
  border-left: 3px solid color-mix(in srgb, var(--ci-primary) 45%, transparent);
  font-size: .84rem !important;
}

.ci-explain__rule { list-style: none; padding: 0; margin: 0 0 .7rem; display: grid; gap: .45rem; }
.ci-explain__rule li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--ci-ink);
  padding: .5rem .7rem; border-radius: 10px;
  background: var(--ci-surface-2); border: 1px solid var(--ci-border);
}
.ci-explain__rule .n {
  flex: 0 0 auto; min-width: 40px; text-align: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .4rem; border-radius: 7px; color: #fff;
}
.ci-explain__rule .n--1 { background: #d97706; }
.ci-explain__rule .n--2 { background: #dc2626; }
.ci-explain__rule .n--3 { background: #7f1d1d; }

/* ---------- Sliders: centre the row when it does not overflow ----------
   With only two plans (or one video) a left-aligned flex row leaves a big
   gap on the right. `safe center` centres the content while guaranteeing
   that, once the row DOES overflow, the first item stays reachable —
   plain `center` can push the start of an overflowing flex row out of the
   scrollable area in some browsers. */
.ci-slider__track { justify-content: safe center; }

/* Wide screens with few cards: stop a single card stretching oddly. */
.ci-priceslider .ci-slider__head { justify-content: space-between; }

/* ---------- City voices: three across, sliding as a row ----------
   The cell basis accounts for the 1rem track gap, so three cards sit
   exactly across the container instead of the third being clipped. */
.ci-voiceslider .ci-slider__track { align-items: stretch; }
.ci-voiceslider__cell {
  flex: 0 0 calc((100% - 2rem) / 3);
  display: flex;
  padding: .25rem 0;
}
.ci-voiceslider__cell > .ci-voice {
  width: 100%;
  padding: 1.5rem 1.4rem;
}
.ci-voiceslider .ci-voice__quote { font-size: .95rem; line-height: 1.6; }

@media (max-width: 991px) {
  .ci-voiceslider__cell { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width: 575px) {
  .ci-voiceslider__cell { flex-basis: 88%; }
  .ci-voiceslider__cell > .ci-voice { padding: 1.3rem 1.2rem; }
}

/* ---------- Language switcher on the quiz screen ---------- */
.ci-quiz-lang__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .7rem; border-radius: 10px;
  font-size: .82rem; font-weight: 600;
  color: var(--ci-ink);
  background: var(--ci-surface-2);
  border: 1px solid var(--ci-border);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.ci-quiz-lang__btn:hover { border-color: var(--ci-border-strong); background: var(--ci-surface); }
.ci-quiz-lang .dropdown-menu { max-height: 60vh; overflow-y: auto; }


/* The grand-prize panel is light by default; dark theme restores depth. */
[data-theme="dark"] .ci-grand {
  background: linear-gradient(150deg, #16233a 0%, #14304f 55%, #0f1d31 100%);
  border-color: rgba(148,163,184,.18);
}
[data-theme="dark"] .ci-grand__glow { background: linear-gradient(90deg, transparent 58%, #14263f 100%); }
[data-theme="dark"] .ci-grand__body,
[data-theme="dark"] .ci-grand__title,
[data-theme="dark"] .ci-grand__list li { color: #e8eef7; }
[data-theme="dark"] .ci-grand__lead,
[data-theme="dark"] .ci-grand__note { color: #9fb6d4; }
[data-theme="dark"] .ci-grand__tag  { color: #fde68a; background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.35); }
[data-theme="dark"] .ci-grand__title .ci-script,
[data-theme="dark"] .ci-grand__list .bi { color: #fbbf24; }
@media (max-width: 900px) {
  [data-theme="dark"] .ci-grand__glow { background: linear-gradient(180deg, transparent 55%, #14263f 100%); }
}


/* Dark theme keeps the original dark strip. */
[data-theme="dark"] .ci-icons-strip {
  background: linear-gradient(135deg, var(--ci-chrome), var(--ci-navy));
}
[data-theme="dark"] .ci-icon-name {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
[data-theme="dark"] .ci-icon-name small { color: rgba(255,255,255,.6); }
[data-theme="dark"] .ci-icon-name { animation-name: ciNameHueDark; }
@keyframes ciNameHueDark {
  0%   { color: #93c5fd; }
  25%  { color: #fbbf24; }
  50%  { color: #86efac; }
  75%  { color: #f9a8d4; }
  100% { color: #93c5fd; }
}

/* ============================================================
   SHARE YOUR SCORE — result page
   ============================================================ */
.ci-share {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  padding: 1.2rem 1.25rem 1rem;
  border-radius: 16px;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  box-shadow: 0 10px 26px -20px rgba(15,23,42,.5);
  text-align: center;
}
.ci-share__head {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ci-muted); margin-bottom: .9rem;
}
.ci-share__head .bi { color: var(--ci-primary); }

.ci-share__row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ci-share__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem;
  border: 1px solid var(--ci-border); border-radius: 11px;
  background: var(--ci-surface-2);
  font-size: .84rem; font-weight: 600; color: var(--ci-ink);
  text-decoration: none; cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.ci-share__btn:hover { transform: translateY(-2px); }
/* Each network keeps its own colour on hover — recognisable at a glance
   without painting the whole row in brand colours. */
.ci-share__btn--wa:hover     { background:#0f7a52; border-color:#0f7a52; color:#fff; }
.ci-share__btn--x:hover      { background:#0f1419; border-color:#0f1419; color:#fff; }
.ci-share__btn--fb:hover     { background:#0b5ed7; border-color:#0b5ed7; color:#fff; }
.ci-share__btn--native:hover,
.ci-share__btn--copy:hover   { background: var(--ci-primary); border-color: var(--ci-primary); color: var(--ci-on-primary); }
.ci-share__btn.is-done       { background:#047857; border-color:#047857; color:#fff; }

.ci-share__preview {
  margin: .9rem 0 0;
  font-size: .78rem; font-style: italic; line-height: 1.5;
  color: var(--ci-muted);
}
[data-theme="dark"] .ci-share      { border-color: rgba(148,163,184,.2); }
[data-theme="dark"] .ci-share__btn { background: rgba(148,163,184,.1); }
@media (prefers-reduced-motion: reduce) { .ci-share__btn { transition: none; } }

/* ------------------------------------------------------------------ */
/* Reward vouchers                                                     */
/* ------------------------------------------------------------------ */

/* Identifiers are read aloud at a counter and typed in by hand, so they are
   set in a mono face with generous tracking — 0/O and 1/I must not blur. */
.ci-voucher-uid {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em; font-weight: 700; color: var(--ci-ink);
  background: rgba(37, 99, 235, .07); border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 6px; padding: .1rem .4rem; font-size: .82rem; white-space: nowrap;
}
.ci-voucher-uid--lg { font-size: 1.02rem; padding: .3rem .6rem; display: inline-block; }
.ci-voucher-search {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .05em; text-transform: uppercase;
}

.ci-voucher-swatch {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}

.ci-rankband {
  display: inline-flex; align-items: baseline; gap: .15rem;
  font-weight: 800; font-size: .95rem; color: var(--ci-ink);
  background: var(--ci-primary-soft); border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 8px; padding: .25rem .55rem; font-variant-numeric: tabular-nums;
}
.ci-rankband span { opacity: .5; font-weight: 600; }

/* -------------------------------------------------------- the card
   Only shop, discount, title, status and expiry. Conditions live one tap
   away — a card crowded with terms is a card nobody reads. */
.ci-voucher-card {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.15rem 1.15rem 1.15rem 1.5rem;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border); border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.ci-voucher-card:hover { transform: translateY(-3px); box-shadow: var(--ci-shadow); border-color: var(--vc, var(--ci-primary)); }
.ci-voucher-card__edge {
  position: absolute; inset: 0 auto 0 0; width: 6px;
  background: var(--vc, var(--ci-primary));
}
.ci-voucher-card.is-spent { opacity: .68; }
.ci-voucher-card.is-spent:hover { transform: none; }

.ci-voucher-card__head { display: flex; align-items: center; gap: .65rem; }
.ci-voucher-card__logo {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px;
  object-fit: cover; background: var(--ci-subtle); border: 1px solid var(--ci-border);
}
.ci-voucher-card__logo--text {
  display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; color: var(--vc, var(--ci-primary));
}
.ci-voucher-card__shop {
  margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-voucher-card__badge {
  display: inline-block; margin-top: .15rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--vc, var(--ci-primary));
}
.ci-voucher-card__deal {
  font-size: 1.85rem; font-weight: 800; line-height: 1.1;
  color: var(--ci-ink); letter-spacing: -.02em; margin-top: .35rem;
}
.ci-voucher-card__title {
  margin: 0; font-size: .84rem; color: var(--ci-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-voucher-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-top: auto; padding-top: .85rem;
  border-top: 1px dashed var(--ci-border);
}
.ci-voucher-card__expiry { font-size: .74rem; color: var(--ci-muted); }
.ci-voucher-card__expiry.is-soon { color: var(--ci-danger); font-weight: 600; }
.ci-voucher-card__cta {
  margin-left: auto; font-size: .8rem; font-weight: 700;
  color: var(--vc, var(--ci-primary)); text-decoration: none; white-space: nowrap;
}
.ci-voucher-card__cta .bi { transition: transform .15s ease; }
.ci-voucher-card__cta:hover .bi { transform: translateX(3px); }

/* ------------------------------------------------- the details hero */
.ci-voucher-hero {
  position: relative; overflow: hidden;
  border-radius: var(--ci-radius); border: 1px solid var(--ci-border);
  background: var(--ci-surface); box-shadow: var(--ci-shadow-sm);
  padding: 1.35rem; margin-bottom: 1rem;
}
.ci-voucher-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--vc, var(--ci-primary));
}
.ci-voucher-hero.is-spent { opacity: .8; }
.ci-voucher-hero__head { display: flex; align-items: center; gap: .8rem; margin: .35rem 0 1rem; }
.ci-voucher-hero__logo {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px;
  object-fit: cover; background: var(--ci-subtle); border: 1px solid var(--ci-border);
}
.ci-voucher-hero__logo--text {
  display: grid; place-items: center; font-weight: 800; color: var(--vc, var(--ci-primary));
}
.ci-voucher-hero__shop { margin: 0; font-size: 1.2rem; font-weight: 800; }
.ci-voucher-hero__meta { font-size: .82rem; color: var(--ci-muted); }
.ci-voucher-hero__deal { margin-bottom: 1.1rem; }
.ci-voucher-hero__deal span {
  display: block; font-size: 2.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--ci-ink);
}
.ci-voucher-hero__deal p { margin-top: .3rem; font-size: .92rem; color: var(--ci-muted); }
.ci-voucher-hero__ids {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  padding: .9rem 1rem; border-radius: var(--ci-radius-sm);
  background: rgba(15, 23, 42, .035); border: 1px dashed var(--ci-border);
}
.ci-voucher-hero__label {
  display: block; font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ci-muted);
  margin-bottom: .3rem;
}
.ci-voucher-hero__note {
  margin-top: .9rem; font-size: .82rem; color: var(--ci-muted);
}

/* --------------------------------------------------- terms and steps */
.ci-voucher-terms { list-style: none; padding: 0; margin: 0; }
.ci-voucher-terms li {
  display: flex; gap: .35rem; align-items: flex-start;
  font-size: .87rem; color: var(--ci-text); padding: .3rem 0;
  border-bottom: 1px solid var(--ci-border);
}
.ci-voucher-terms li:last-child { border-bottom: 0; }
.ci-voucher-terms .bi { color: var(--ci-primary); font-size: 1.1rem; line-height: 1.2; }

.ci-voucher-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.ci-voucher-steps li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .87rem; color: var(--ci-text); padding: .35rem 0;
}
.ci-voucher-steps__n {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ci-primary-soft); color: var(--ci-primary);
  font-size: .72rem; font-weight: 800;
}

/* ------------------------------------------------------------ the QR */
.ci-qr-frame {
  display: inline-block; padding: 10px; border-radius: 12px;
  background: #ffffff; border: 1px solid var(--ci-border);
  line-height: 0;   /* an inline SVG would otherwise sit on a text baseline */
}
.ci-qr-frame svg { display: block; }

/* -------------------------------------------------------- the verdict
   The one thing a person at a till needs to see from arm's length. */
.ci-verify-verdict {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.1rem 1.25rem; border-radius: var(--ci-radius);
  border: 1px solid; margin-bottom: .25rem;
}
.ci-verify-verdict .bi { font-size: 1.9rem; line-height: 1; }
.ci-verify-verdict__head { font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.ci-verify-verdict.is-good {
  background: var(--ci-success-soft); border-color: rgba(21, 128, 61, .28); color: var(--ci-success);
}
.ci-verify-verdict.is-bad {
  background: var(--ci-danger-soft); border-color: rgba(185, 28, 28, .28); color: var(--ci-danger);
}
.ci-verify-verdict p { color: var(--ci-text); }

/* --------------------------------------------------- key/value tables */
.ci-kv th {
  font-weight: 600; color: var(--ci-muted); font-size: .84rem;
  background: transparent;
}
.ci-kv td { font-weight: 600; color: var(--ci-ink); font-size: .88rem; }

/* ---------------------------------------------------- report meter bar */
.ci-meter {
  display: block; height: 7px; border-radius: 999px;
  background: rgba(15, 23, 42, .08); overflow: hidden; min-width: 60px;
}
.ci-meter i { display: block; height: 100%; border-radius: 999px; background: var(--ci-primary); }

/* ------------------------------------------------------------- dark */
[data-theme="dark"] .ci-voucher-card,
[data-theme="dark"] .ci-voucher-hero { border-color: rgba(148, 163, 184, .2); }
[data-theme="dark"] .ci-voucher-card__logo,
[data-theme="dark"] .ci-voucher-hero__logo { background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .2); }
[data-theme="dark"] .ci-voucher-card__foot { border-top-color: rgba(148, 163, 184, .22); }
[data-theme="dark"] .ci-voucher-hero__ids { background: rgba(148, 163, 184, .09); border-color: rgba(148, 163, 184, .25); }
[data-theme="dark"] .ci-voucher-uid { background: rgba(96, 165, 250, .13); border-color: rgba(96, 165, 250, .28); }
[data-theme="dark"] .ci-voucher-terms li { border-bottom-color: rgba(148, 163, 184, .18); }
[data-theme="dark"] .ci-meter { background: rgba(148, 163, 184, .18); }
[data-theme="dark"] .ci-verify-verdict.is-good { background: rgba(21, 128, 61, .16); }
[data-theme="dark"] .ci-verify-verdict.is-bad  { background: rgba(185, 28, 28, .16); }
/* The QR frame stays white in both themes: a dark-on-dark code will not scan. */

@media (prefers-reduced-motion: reduce) {
  .ci-voucher-card, .ci-voucher-card__cta .bi { transition: none; }
  .ci-voucher-card:hover { transform: none; }
}

/* Migration log — plain text output from the database runner. */
.ci-migration-log {
  margin: 0; padding: 1rem;
  max-height: 460px; overflow: auto;
  /* Always dark — this is a console. --ci-ink flips light in dark
     mode, which made the log unreadable there. */
  background: #0b1220; color: #cbd5e1;
  border-radius: var(--ci-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}

/* Voucher artwork — the offer's own image, when an admin has uploaded one. */
.ci-voucher-card__art {
  margin: -1.15rem -1.15rem .85rem -1.5rem;
  height: 128px; overflow: hidden; background: #eef2f7;
}
.ci-voucher-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ci-voucher-hero__art {
  margin: -1.35rem -1.35rem 1rem;
  height: 180px; overflow: hidden; background: #eef2f7;
}
.ci-voucher-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

[data-theme="dark"] .ci-voucher-card__art,
[data-theme="dark"] .ci-voucher-hero__art { background: rgba(148,163,184,.14); }

/* Validity line on a reward card — people misjudge how long they have. */
.ci-pz__valid {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .5rem; padding: .2rem .5rem;
  font-size: .74rem; font-weight: 600;
  color: var(--ci-warning); background: var(--ci-warning-soft);
  border-radius: 999px;
}
[data-theme="dark"] .ci-pz__valid { background: rgba(180,83,9,.18); }

/* =====================================================================
   SCHEDULED COMPETITIONS
   Countdown, upcoming-challenge cards, participant watermark and the
   connection banner. Everything below is additive — no existing selector
   is redefined, so the current design is untouched.
   ===================================================================== */

/* ---------------------------------------------------------- countdown */
.ci-countdown {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.ci-countdown > span {
  display: flex; flex-direction: column; align-items: center;
  min-width: 62px; padding: .5rem .35rem;
  background: var(--ci-primary-soft); border: 1px solid var(--ci-border);
  border-radius: 12px;
}
.ci-countdown > span b {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: var(--ci-primary); font-variant-numeric: tabular-nums;
}
.ci-countdown > span small {
  margin-top: .2rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ci-muted);
}
[data-theme="dark"] .ci-countdown > span { background: rgba(37,99,235,.16); }

.ci-countdown--sm > span { min-width: 44px; padding: .3rem .25rem; }
.ci-countdown--sm > span b { font-size: 1rem; }

/* One-line variant for cards: "2 days 04h 23m". */
.ci-cd-brief {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ci-primary);
}

/* ------------------------------------------------------- start gate */
.ci-startgate {
  padding: 1.25rem; border: 1px solid var(--ci-border);
  border-radius: 14px; background: var(--ci-subtle); text-align: center;
}
.ci-startgate__live {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem; font-size: 1.05rem;
}

/* --------------------------------------------------- upcoming board */
.ci-upfilters {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between; margin-bottom: 1.25rem;
}
.ci-uptabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ci-uptab {
  padding: .4rem .9rem; border: 1px solid var(--ci-border);
  border-radius: 999px; background: transparent;
  font-size: .82rem; font-weight: 600; color: var(--ci-muted);
  cursor: pointer; transition: all .15s ease;
}
.ci-uptab:hover { border-color: var(--ci-primary); color: var(--ci-primary); }
.ci-uptab.is-on {
  background: var(--ci-primary); border-color: var(--ci-primary); color: var(--ci-on-primary);
}

/* Upcoming challenge card. Shares the visual language of .ci-ch but leads
   with the date and the countdown, because for a scheduled event those are
   the two things a visitor is actually deciding on. */
.ci-up {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--ci-border); border-radius: 16px;
  background: var(--ci-surface); color: var(--ci-text); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ci-up:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.ci-up__top {
  position: relative; padding: 1rem 1.1rem .9rem; color: #fff;
  background: linear-gradient(135deg, var(--ch, #2563eb) 0%, rgba(15,23,42,.92) 130%);
}
.ci-up__top img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .18; z-index: 0;
}
.ci-up__top > * { position: relative; z-index: 2; }
.ci-up__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .5rem;
}
.ci-up__place {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ci-up__state {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: 999px;
  background: rgba(255,255,255,.18); font-size: .68rem; font-weight: 700;
}
.ci-up__title { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }

/* Re-assert white for everything sitting on the coloured header. Headings
   need naming explicitly — see the note above .ci-ch__top for why. */
.ci-up__top,
.ci-up__top h1, .ci-up__top h2, .ci-up__top h3,
.ci-up__top h4, .ci-up__top h5, .ci-up__top h6,
.ci-up__top p, .ci-up__top span, .ci-up__top strong, .ci-up__top small {
  color: #fff;
}
/* The header sits on a photograph, so the type carries its own shadow
   rather than trusting the image behind it to stay dark. */
.ci-up__title { text-shadow: 0 1px 6px rgba(2,6,18,.55); }
.ci-up__place { text-shadow: 0 1px 4px rgba(2,6,18,.5); }
.ci-up__top p { color: rgba(255,255,255,.92); text-shadow: 0 1px 5px rgba(2,6,18,.5); }

/* A darker scrim under the text end of the gradient: at 0.22 opacity a pale
   monument photograph still lifted the header enough to soften white type. */
.ci-up__top::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,6,18,.10) 0%, rgba(2,6,18,.55) 100%);
  pointer-events: none;
}

.ci-up__when {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--ci-border);
  background: var(--ci-primary-soft);
}
[data-theme="dark"] .ci-up__when { background: rgba(37,99,235,.12); }
.ci-up__date { display: flex; flex-direction: column; line-height: 1.15; }
.ci-up__date b { font-size: 1rem; font-weight: 800; }
.ci-up__date small { font-size: .72rem; color: var(--ci-muted); }

.ci-up__body { display: flex; flex-direction: column; gap: .6rem; padding: .9rem 1.1rem 1.1rem; flex: 1; }
.ci-up__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ci-up__chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--ci-subtle); font-size: .72rem; color: var(--ci-muted);
}
[data-theme="dark"] .ci-up__chip { background: rgba(148,163,184,.14); }
.ci-up__prize {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--ci-accent-dark);
}
.ci-up__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: auto; padding-top: .5rem;
}
.ci-up__fee { display: flex; flex-direction: column; line-height: 1.1; }
.ci-up__fee b { font-size: 1.15rem; font-weight: 800; }
.ci-up__fee small { font-size: .68rem; color: var(--ci-muted); text-transform: uppercase; letter-spacing: .05em; }
.ci-up__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--ci-accent); color: #26170a; font-weight: 700; font-size: .85rem;
}
.ci-up__cta:hover { background: #e08c07; color: #26170a; }
.ci-up__cta--muted { background: var(--ci-border-strong); color: var(--ci-text); }

/* ------------------------------------------------- free quiz card */
.ci-fq {
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  padding: 1.1rem; border: 1px solid var(--ci-border); border-radius: 16px;
  background: var(--ci-surface); color: var(--ci-text);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ci-fq__title { color: var(--ci-text); }
.ci-fq:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.ci-fq__badge {
  align-self: flex-start; padding: .15rem .55rem; border-radius: 999px;
  background: var(--ci-success-soft); color: var(--ci-success);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
[data-theme="dark"] .ci-fq__badge { background: rgba(21,128,61,.2); }
.ci-fq__title { font-size: 1rem; font-weight: 700; margin: 0; }
.ci-fq__meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .76rem; color: var(--ci-muted); }
.ci-fq__cta { margin-top: auto; }

/* ------------------------------------------------------- watermark */
/* Traceability, not prevention: it cannot stop a screenshot, only make one
   attributable. Kept faint and non-interactive so it never obstructs a
   question or intercepts a tap. */
.ci-watermark {
  position: fixed; inset: -12%; z-index: 3;
  pointer-events: none; user-select: none;
  display: flex; flex-direction: column; justify-content: space-around;
  transform: translate3d(0,0,0); transition: transform 3.5s ease-in-out;
  overflow: hidden;
}
.ci-watermark__row {
  display: flex; justify-content: space-around;
  transform: rotate(-24deg); white-space: nowrap;
}
.ci-watermark__row span {
  font-size: clamp(.7rem, 1.6vw, 1rem); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(15,23,42,.09);
}
[data-theme="dark"] .ci-watermark__row span { color: rgba(226,232,240,.10); }

/* The quiz content has to sit above the watermark, or the mark lands on top
   of the answer options and makes them harder to read. */
.ci-challenge-shell .ci-quiz-bar,
.ci-challenge-shell #quizEngine { position: relative; z-index: 4; }

/* Copy deterrence, applied only when the organiser switched it on. Inputs
   and labels keep normal selection so the page stays usable. */
/* Copy protection. Images are covered as well as text — a question that
 * cannot be selected but can be long-pressed and saved is not protected.
 * -webkit-touch-callout suppresses the iOS "Copy / Share" sheet, which is
 * the route a phone actually takes. */
.ci-noselect .ci-question-text,
.ci-noselect .ci-option-text,
.ci-noselect .ci-qimage,
.ci-noselect .ci-qimage img {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.ci-noselect .ci-qimage img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* Printing is the one capture route a page can win — quiz.js adds this class
 * for the duration of the print dialog, so the questions are not on the sheet. */
.ci-capture-block #quizEngine { visibility: hidden !important; }
.ci-watermark--quiz { pointer-events: none; }

/* ------------------------------------------------- connection banner */
.ci-netbar {
  position: fixed; left: 50%; bottom: 1rem; z-index: 60;
  display: none; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: 999px;
  background: #f59e0b; color: #26170a;
  font-size: .85rem; font-weight: 700; box-shadow: 0 8px 24px rgba(15,23,42,.25);
  transform: translateX(-50%);
}
.ci-netbar.is-on { display: flex; }

/* ------------------------------------------------------- admin bits */
.ci-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--ci-border); }
.ci-cal__head {
  padding: .5rem; background: var(--ci-subtle); text-align: center;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--ci-muted);
}
.ci-cal__day {
  min-height: 96px; padding: .4rem; background: var(--ci-surface);
  display: flex; flex-direction: column; gap: .25rem;
}
.ci-cal__day.is-out { background: var(--ci-subtle); opacity: .55; }
.ci-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--ci-primary); }
.ci-cal__num { font-size: .75rem; font-weight: 700; color: var(--ci-muted); }
.ci-cal__ev {
  display: block; padding: .2rem .4rem; border-radius: 6px;
  background: var(--ci-primary-soft); color: var(--ci-primary);
  font-size: .7rem; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-cal__ev.is-live { background: var(--ci-success-soft); color: var(--ci-success); }
.ci-cal__ev.is-done { background: var(--ci-subtle); color: var(--ci-muted); }
[data-theme="dark"] .ci-cal__ev { background: rgba(37,99,235,.18); }

@media (max-width: 640px) {
  .ci-cal__day { min-height: 62px; }
  .ci-cal__ev  { font-size: .62rem; }
  .ci-countdown > span { min-width: 52px; }
  .ci-countdown > span b { font-size: 1.2rem; }
}

/* =====================================================================
   IN-QUIZ LANGUAGE TOGGLE
   Both languages sit in the DOM; this decides which one is visible. That
   is what lets a participant switch without the page navigating — and
   therefore without the question, the answer or the timer resetting.
   ===================================================================== */
/* One span per language is written into the page and exactly one is shown.
 *
 * Which one is decided by a class the script sets, NOT by a selector naming
 * the language. A per-language rule (body[data-qlang="hi"] .ci-lg[...]) only
 * covers the languages someone remembered to write a rule for — pick any
 * other one and no rule matches, so every span stays display:none and the
 * question renders blank. */
.ci-lg { display: none; }
.ci-lg.is-active { display: inline; }
/* Single-language questions render one span that is always shown. */
.ci-lg[data-lang="both"] { display: inline; }

.ci-langswitch {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--ci-subtle);
  border: 1px solid var(--ci-border); border-radius: 999px;

  /* THE CAUSE OF "the quiz gets smaller on mobile".
   *
   * Every language the admin enables adds a pill to this row, and there are
   * now thirteen. An inline-flex has no maximum width and will not wrap, so
   * its intrinsic width — around 700px — became the width of the sticky bar,
   * and therefore of the document. On a 390px phone that is a page nearly
   * twice as wide as the screen, and Android Chrome's response to a page
   * wider than the viewport is to zoom out until it fits: the questions, the
   * options and the buttons all render at roughly half size, in a column down
   * the left with the background showing through beside it.
   *
   * Nothing was resizing DURING the quiz, which is why it was hard to place —
   * the whole screen had been shrunk from the first paint.
   *
   * min-width:0 lets it shrink as a flex item (auto would floor it at its
   * content width, which is the whole problem), max-width keeps it inside the
   * bar, and the row scrolls on its own instead of widening the page. The
   * scrollbar is hidden because this is a pill row on a phone, not a
   * document — it is swiped, and a bar across it would only cover the
   * language names. */
  min-width: 0; max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Keep the pills tap-scrollable without the row itself being a drag target
     for the page's own horizontal panning. */
  overscroll-behavior-x: contain;
}
.ci-langswitch::-webkit-scrollbar { display: none; }
.ci-langswitch__btn { flex: 0 0 auto; white-space: nowrap; }
[data-theme="dark"] .ci-langswitch { background: rgba(148,163,184,.14); }
.ci-langswitch__btn {
  padding: .25rem .7rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--ci-muted);
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ci-langswitch__btn:hover { color: var(--ci-primary); }
.ci-langswitch__btn.is-on {
  background: var(--ci-primary); color: var(--ci-on-primary);
}

/* The reassurance toast after a switch. */
.ci-langnote {
  position: fixed; left: 50%; bottom: 5.25rem; z-index: 60;
  display: none; align-items: flex-start; gap: .6rem;
  max-width: min(420px, 92vw); padding: .75rem 1rem;
  border: 1px solid var(--ci-border); border-radius: 12px;
  background: var(--ci-surface); color: var(--ci-text);
  box-shadow: 0 12px 32px rgba(15,23,42,.22);
  transform: translateX(-50%);
}
.ci-langnote.is-on { display: flex; }
.ci-langnote i { color: var(--ci-primary); font-size: 1.1rem; margin-top: .1rem; }

/* =====================================================================
   QUIZ PALETTE — dark mode legibility
   Answered and unanswered used to differ only by a faint border, which in
   dark mode read as identical. Each state now differs in FILL as well as
   border, so the distinction survives low contrast and small screens.
   ===================================================================== */
.ci-palette-btn {
  position: relative;
  border: 1.5px solid var(--ci-border-strong);
  background: var(--ci-surface); color: var(--ci-muted); font-weight: 700;
}
.ci-palette-btn.answered {
  background: var(--ci-success); border-color: var(--ci-success); color: #fff;
}
.ci-palette-btn.current {
  border-color: var(--ci-primary); color: var(--ci-primary);
  box-shadow: 0 0 0 3px var(--ci-primary-soft);
}
.ci-palette-btn.answered.current {
  color: #fff; box-shadow: 0 0 0 3px var(--ci-primary-soft);
}
[data-theme="dark"] .ci-palette-btn {
  background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.4);
  color: #cbd5e1;
}
[data-theme="dark"] .ci-palette-btn.answered {
  background: #15803d; border-color: #22c55e; color: #fff;
}
[data-theme="dark"] .ci-palette-btn.current {
  border-color: #60a5fa; color: #93c5fd; box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}
[data-theme="dark"] .ci-palette-btn.answered.current { color: #fff; }

/* The answered / remaining counter under the palette and in the footer bar. */
.ci-qcount {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .8rem; font-weight: 600;
}
.ci-qcount__pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
}
.ci-qcount__pill--done { background: var(--ci-success-soft); color: var(--ci-success); }
.ci-qcount__pill--todo { background: var(--ci-subtle); color: var(--ci-muted); }
[data-theme="dark"] .ci-qcount__pill--done { background: rgba(21,128,61,.24); color: #86efac; }
[data-theme="dark"] .ci-qcount__pill--todo { background: rgba(148,163,184,.16); color: #cbd5e1; }

/* =====================================================================
   MOBILE QUIZ ACTION BAR
   The Next button used to sit at the natural end of the document, which on
   a phone lands in the browser's own gesture strip — so people kept hitting
   Back instead of Next. It is now a sticky bar that respects the safe area.
   ===================================================================== */
@media (max-width: 991.98px) {
  .ci-quiz-actions {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: .5rem;
    margin: 1rem -12px 0; padding: .6rem 12px;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--ci-surface);
    border-top: 1px solid var(--ci-border);
    box-shadow: 0 -6px 18px rgba(15,23,42,.10);
  }
  .ci-quiz-actions .btn { flex: 1; padding-top: .7rem; padding-bottom: .7rem; }
  .ci-quiz-actions .ci-qcount { width: 100%; justify-content: center; order: -1; }
  /* Room to scroll past the sticky bar. */
  .ci-quiz-shell #quizEngine { padding-bottom: 5.5rem; }
}
[data-theme="dark"] .ci-quiz-actions { background: #0f172a; border-color: rgba(148,163,184,.24); }

/* =====================================================================
   ACCOUNT BUTTON
   A lone initial in a circle did not read as a menu — people did not know
   it was clickable. Giving it a border, a name and a chevron makes it look
   like the control it is, in both themes.
   ===================================================================== */
.ci-accountbtn {
  display: inline-flex !important; align-items: center; gap: .5rem;
  padding: .28rem .7rem .28rem .32rem !important;
  border: 1px solid var(--ci-border-strong); border-radius: 999px;
  background: var(--ci-surface);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ci-accountbtn:hover,
.ci-accountbtn:focus-visible {
  border-color: var(--ci-primary);
  box-shadow: 0 0 0 3px var(--ci-primary-soft);
}
.ci-accountbtn__initials,
.ci-accountbtn__img {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ci-primary); color: var(--ci-on-primary);
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  object-fit: cover;
}
.ci-accountbtn__name { font-weight: 600; font-size: .88rem; }
.ci-accountbtn.dropdown-toggle::after { margin-left: .1rem; opacity: .65; }

[data-theme="dark"] .ci-accountbtn {
  background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.42);
}
[data-theme="dark"] .ci-accountbtn:hover,
[data-theme="dark"] .ci-accountbtn:focus-visible {
  border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(37,99,235,.3);
}

/* On a transparent hero header the button needs its own contrast rather
   than borrowing the header's. */
.ci-nav-transparent .ci-accountbtn {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff;
}

/* =====================================================================
   NOTIFICATIONS
   The unread state used Bootstrap's .bg-light, which is a hard white — in
   dark mode that produced a white card with near-white text on it. Unread
   is now a tinted panel with a coloured spine, which works in both themes
   and survives being read at a glance.
   ===================================================================== */
.ci-note {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-left: 3px solid transparent;
  background: var(--ci-surface); color: var(--ci-text);
  transition: background .15s ease;
}
.ci-note + .ci-note { border-top: 1px solid var(--ci-border); }
.ci-note:hover { background: var(--ci-subtle); }
.ci-note.is-unread {
  border-left-color: var(--ci-primary);
  background: var(--ci-primary-soft);
}
[data-theme="dark"] .ci-note        { background: transparent; }
[data-theme="dark"] .ci-note:hover  { background: rgba(148,163,184,.10); }
[data-theme="dark"] .ci-note.is-unread { background: rgba(37,99,235,.14); }

.ci-note__icon { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.6; }
.ci-note__body { flex: 1 1 auto; min-width: 0; }
.ci-note__title { font-weight: 650; color: var(--ci-text); }
.ci-note__text  { font-size: .875rem; color: var(--ci-muted); margin-top: .15rem; }
.ci-note__time  { font-size: .74rem; color: var(--ci-muted); opacity: .8; margin-top: .3rem; }
.ci-note__go {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
  font-size: .82rem; font-weight: 650; color: var(--ci-primary);
}
.ci-note__new {
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--ci-primary); color: var(--ci-on-primary);
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ci-note__actions { flex: 0 0 auto; display: flex; gap: .35rem; }
/* Muted outlines rather than solid red/white blocks, so the row's own
   message stays the loudest thing in it. */
.ci-note__actions .btn {
  --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .78rem;
}

/* Bootstrap's .text-dark is a fixed near-black, so it vanishes on a dark
   background. .ci-strong means "the strongest text colour in the CURRENT
   theme", which is what those call sites actually wanted. */
.ci-strong { color: var(--ci-text) !important; font-weight: 700; }

/* =====================================================================
   CITY REWARD BOARD
   One card per city, each showing that city's OWN state and its OWN
   reward — or an honest "coming soon" / "no live quiz" when it has none.
   The previous design repeated a single prize beside every city, which
   advertised rewards that city was not running.
   ===================================================================== */
.ci-cityreward {
  display: flex; flex-direction: column; gap: .75rem; height: 100%;
  padding: 1.1rem; border: 1px solid var(--ci-border); border-radius: 16px;
  background: var(--ci-surface); color: var(--ci-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ci-cityreward:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.ci-cityreward--live { border-color: var(--ci-success); }
.ci-cityreward--none { opacity: .82; }

.ci-cityreward__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.ci-cityreward__city { font-size: 1.05rem; font-weight: 800; }
.ci-cityreward__state {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.ci-cityreward__state--live     { background: var(--ci-success-soft); color: var(--ci-success); }
.ci-cityreward__state--upcoming { background: var(--ci-primary-soft); color: var(--ci-primary); }
.ci-cityreward__state--free     { background: var(--ci-success-soft); color: var(--ci-success); }
.ci-cityreward__state--none     { background: var(--ci-subtle); color: var(--ci-muted); }
[data-theme="dark"] .ci-cityreward__state--live,
[data-theme="dark"] .ci-cityreward__state--free     { background: rgba(21,128,61,.24); color: #86efac; }
[data-theme="dark"] .ci-cityreward__state--upcoming { background: rgba(37,99,235,.22); color: #93c5fd; }
[data-theme="dark"] .ci-cityreward__state--none     { background: rgba(148,163,184,.16); color: #cbd5e1; }

.ci-cityreward__prize {
  display: flex; gap: .7rem; align-items: center;
  padding: .7rem; border-radius: 12px;
  background: var(--ci-accent-soft);
  border: 1px dashed var(--ci-accent);
}
[data-theme="dark"] .ci-cityreward__prize { background: rgba(180,83,9,.18); }
.ci-cityreward__prize img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.ci-cityreward__amount { font-size: 1.05rem; font-weight: 800; color: var(--ci-accent-dark); }
[data-theme="dark"] .ci-cityreward__amount { color: #fbbf24; }
.ci-cityreward__note { font-size: .82rem; color: var(--ci-muted); }
.ci-cityreward__foot { margin-top: auto; }

/* =====================================================================
   REWARD POP-UP
   Blue is the brand; the discount is the loudest thing in the card; the
   voucher ID gets its own bordered monospace block because that is the
   string somebody actually reads out at a till. Status is the only place
   another colour is allowed, and it means one specific thing each time.
   ===================================================================== */
.ci-vmodal__close {
  position: absolute; top: .75rem; right: .75rem; z-index: 3;
  padding: .5rem; border-radius: 50%; background: rgba(255,255,255,.85);
}
.ci-vmodal__top {
  position: relative; padding: 1.5rem 1.35rem 1.25rem; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-primary-dark) 60%, #0f172a 130%);
}
.ci-vmodal__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.ci-vmodal__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.15), rgba(15,23,42,.55)); }
.ci-vmodal__topbody { position: relative; }
.ci-vmodal__status {
  display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .6rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.2);
}
.ci-vmodal__status--available,
.ci-vmodal__status--claimed  { background: #15803d; }
.ci-vmodal__status--redeemed { background: rgba(148,163,184,.9); color: #0f172a; }
.ci-vmodal__status--expired,
.ci-vmodal__status--cancelled{ background: #b91c1c; }
.ci-vmodal__shop { font-size: .95rem; font-weight: 700; opacity: .92; }
.ci-vmodal__discount { font-size: 2.4rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.ci-vmodal__title { font-size: .95rem; opacity: .92; margin-top: .15rem; }

.ci-vmodal__body { padding: 1.25rem 1.35rem 1.5rem; }

.ci-vmodal__idbox {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: .75rem; padding: .7rem .85rem;
  border: 2px dashed var(--ci-primary); border-radius: 12px;
  background: var(--ci-primary-soft);
}
.ci-vmodal__idbox--alt { border-style: solid; border-color: var(--ci-border-strong); background: transparent; }
[data-theme="dark"] .ci-vmodal__idbox { background: rgba(37,99,235,.16); }
.ci-vmodal__idlabel {
  font-size: .64rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ci-muted);
}
.ci-vmodal__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .06em; color: var(--ci-text);
  word-break: break-all;
}

.ci-vmodal__qr { text-align: center; margin: 1rem 0; }
.ci-vmodal__qr svg { width: 148px; height: 148px; border: 8px solid #fff; border-radius: 10px; background: #fff; }

.ci-vmodal__facts { display: grid; gap: .1rem; margin: 1rem 0; }
.ci-vmodal__fact {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--ci-border); font-size: .875rem;
}
.ci-vmodal__fact:last-child { border-bottom: 0; }
.ci-vmodal__fact span { color: var(--ci-muted); }
.ci-vmodal__h {
  margin: 1.1rem 0 .5rem; font-size: .74rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ci-muted);
}
.ci-vmodal__list { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ci-muted); }
.ci-vmodal__list li { margin-bottom: .35rem; }

@media (max-width: 575.98px) {
  .ci-vmodal__discount { font-size: 1.9rem; }
}

/* Plan card: the commitment and the city rule, said on the card rather than
   left for the buyer to infer from the price. */
.ci-plan2__terms { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .85rem; }
.ci-plan2__chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--ci-subtle); color: var(--ci-muted);
  font-size: .72rem; font-weight: 650;
}
.ci-plan2__chip--once { background: var(--ci-success-soft); color: var(--ci-success); }
[data-theme="dark"] .ci-plan2__chip       { background: rgba(148,163,184,.16); color: #cbd5e1; }
[data-theme="dark"] .ci-plan2__chip--once { background: rgba(21,128,61,.24); color: #86efac; }
.ci-plan2__reward {
  display: flex; align-items: flex-start; gap: .4rem; margin-bottom: .85rem;
  font-size: .78rem; color: var(--ci-accent-dark);
}
[data-theme="dark"] .ci-plan2__reward { color: #fbbf24; }

/* =====================================================================
   GOOGLE SIGN-IN
   Google's brand guidelines: their mark, our neutral surface, no recolour.
   ===================================================================== */
.ci-orsplit {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0; color: var(--ci-muted); font-size: .8rem;
}
.ci-orsplit::before, .ci-orsplit::after {
  content: ""; flex: 1; height: 1px; background: var(--ci-border);
}
.ci-googlebtn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .7rem 1rem;
  border: 1px solid var(--ci-border-strong); border-radius: 10px;
  background: var(--ci-surface); color: var(--ci-text);
  font-weight: 650; font-size: .92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ci-googlebtn:hover {
  color: var(--ci-text); border-color: var(--ci-primary);
  box-shadow: 0 0 0 3px var(--ci-primary-soft);
}
[data-theme="dark"] .ci-googlebtn {
  background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.42); color: #e2e8f0;
}

/* =====================================================================
   HERO — contrast and mobile layout
   ---------------------------------------------------------------------
   Two problems being fixed here.

   1. The three-line strip above the headline (the pill, the headline and
      the lead) sat on a photographic backdrop with no scrim of its own. On
      a light photo, or in dark mode where the gradient lightens, the white
      text lost its background and became unreadable. The fix is a scrim
      behind the TEXT COLUMN rather than making everything brighter white —
      white-on-white was the original problem.

   2. The mobile hero was the desktop hero scaled down: the visual column
      squeezed the copy, the CTAs wrapped mid-word and the stat grid
      overflowed. Below 992px it becomes a single column with its own
      order, sizes and spacing.
   ===================================================================== */

/* --- 1. legibility of the text column ------------------------------- */
.ci-hero .col-lg-7 { position: relative; z-index: 2; }

/* A soft scrim that follows the text rather than covering the whole hero,
   so the photograph is still visible either side of it. */
.ci-hero .col-lg-7::before {
  content: ""; position: absolute; z-index: -1;
  inset: -1.5rem -2rem -1.5rem -2rem;
  background: radial-gradient(120% 100% at 20% 40%, rgba(8, 15, 33, .72) 0%,
                              rgba(8, 15, 33, .45) 55%, rgba(8, 15, 33, 0) 100%);
  border-radius: 28px; pointer-events: none;
}
[data-theme="dark"] .ci-hero .col-lg-7::before {
  background: radial-gradient(120% 100% at 20% 40%, rgba(2, 6, 18, .82) 0%,
                              rgba(2, 6, 18, .55) 55%, rgba(2, 6, 18, 0) 100%);
}

/* The pill, the headline and the lead each get their own floor of contrast
   instead of relying on the backdrop being dark enough. */
.ci-hero-pill {
  background: rgba(8, 15, 33, .55);
  border-color: rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.ci-hero h1 { text-shadow: 0 2px 14px rgba(2, 6, 18, .55); }
.ci-hero .lead {
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 8px rgba(2, 6, 18, .5);
}
.ci-hero-stat .num { text-shadow: 0 2px 10px rgba(2, 6, 18, .5); }
.ci-hero-stat .lbl { color: rgba(255, 255, 255, .82); }

/* --- 2. the mobile hero, laid out on its own terms ------------------- */
@media (max-width: 991.98px) {
  .ci-hero {
    padding: 2.5rem 0 2.25rem;
    /* Never taller than the viewport: the CTA has to be reachable without
       scrolling past the headline on a small phone. */
    min-height: auto;
  }
  .ci-hero .row { flex-direction: column; }

  /* Copy first, decoration second — the visual is not what sells it. */
  .ci-hero .col-lg-7 { order: 1; }
  .ci-hero .col-lg-5 { order: 2; margin-top: 1.75rem; }

  .ci-hero .col-lg-7::before { inset: -1rem -1rem -1rem -1rem; border-radius: 20px; }

  .ci-hero-pill {
    font-size: .72rem; padding: .3rem .7rem; margin-bottom: .9rem;
    /* Long on a narrow screen; allow it to wrap rather than overflow. */
    white-space: normal; text-align: center; line-height: 1.4;
  }
  .ci-hero h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem);
    line-height: 1.18;
    /* Long city names must break rather than push the layout sideways. */
    overflow-wrap: anywhere;
  }
  .ci-hero .lead { font-size: .98rem; margin-bottom: 1.25rem; }

  /* Full-width, thumb-sized CTAs stacked rather than wrapped mid-row. */
  .ci-hero .d-flex.flex-wrap.gap-3 { flex-direction: column; gap: .6rem !important; }
  .ci-hero .d-flex.flex-wrap.gap-3 .btn { width: 100%; padding: .8rem 1rem; }

  /* Two columns of stats, not four squeezed ones. */
  .ci-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; }
  .ci-hero-stat .num { font-size: 1.5rem; }
  .ci-hero-stat .lbl { font-size: .7rem; }

  /* The rotating visual is decoration; cap it so it never owns the screen. */
  .ci-heroshow { max-width: 340px; margin-inline: auto; }
}

@media (max-width: 575.98px) {
  .ci-hero { padding: 2rem 0 1.75rem; }
  .ci-heroshow { max-width: 280px; }
  /* Hide the floating shapes on the smallest screens — at this size they
     overlap the headline rather than framing it. */
  .ci-hero-shapes { display: none; }
}

/* A free quiz's reward line — only rendered when one is configured. */
.ci-fq__reward {
  display: flex; align-items: flex-start; gap: .4rem;
  padding: .45rem .6rem; border-radius: 8px;
  background: var(--ci-accent-soft); color: var(--ci-accent-dark);
  font-size: .78rem;
}
[data-theme="dark"] .ci-fq__reward { background: rgba(180,83,9,.2); color: #fbbf24; }

/* =====================================================================
   QUIZ BOTTOM NAVIGATION
   One bar for both quiz screens. Every control shares a height, radius,
   font size and icon size — the phone layout previously had a large amber
   "Skip Question" block beside a small "Next", which read as an instruction
   to skip.
   ===================================================================== */
.ci-qnav {
  display: flex; flex-direction: column; gap: .6rem;
  margin-top: 1.25rem; padding-top: .9rem;
  border-top: 1px solid var(--ci-border);
}
.ci-qnav__status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600;
}
.ci-qnav__pos { margin-left: auto; color: var(--ci-muted); font-variant-numeric: tabular-nums; }

.ci-qnav__row { display: flex; align-items: stretch; gap: .5rem; }

/* The shared control. Nothing below overrides size — only colour — so the
   three buttons can never drift apart again. */
.ci-qnav__btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px;                 /* comfortable tap target */
  padding: .7rem .9rem;
  border: 1px solid var(--ci-border-strong); border-radius: 12px;
  background: var(--ci-surface); color: var(--ci-text);
  font-size: .92rem; font-weight: 650; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ci-qnav__btn i { font-size: 1rem; }
.ci-qnav__btn:disabled { opacity: .45; cursor: not-allowed; }

.ci-qnav__btn--primary {
  background: var(--ci-primary); border-color: var(--ci-primary); color: var(--ci-on-primary);
  flex-grow: 1.3;                   /* the expected action, still same height */
}
.ci-qnav__btn--primary:hover { background: var(--ci-primary-dark); border-color: var(--ci-primary-dark); }
.ci-qnav__btn--finish {
  background: var(--ci-success); border-color: var(--ci-success);
  color: var(--ci-on-success); flex-grow: 1.3;
}
.ci-qnav__btn--quiet { background: transparent; color: var(--ci-muted); flex-grow: .8; }
.ci-qnav__btn--quiet:hover { color: var(--ci-text); border-color: var(--ci-muted); }
.ci-qnav__btn--ghost  { background: transparent; }
.ci-qnav__btn--ghost:hover { border-color: var(--ci-primary); color: var(--ci-primary); }

/* Forward-only bar: two controls, so Next takes the space Previous used to
   and stays the obvious primary action rather than the smallest thing there. */
.ci-qnav__row--fwd .ci-qnav__btn--primary { flex-grow: 1.6; }
.ci-qnav__row--fwd .ci-qnav__btn--quiet   { flex-grow: 1; }

/* Skipped / timed-out. Neither is an answer and neither is still available,
   so it reads as its own fact rather than being folded into "remaining". */
.ci-qcount__pill--past {
  background: var(--ci-surface-2);
  color: var(--ci-muted);
  border: 1px solid var(--ci-border);
}

/* A question that has ended.
   The server refuses answers for it regardless, but a card that still looks
   answerable invites a tap that silently does nothing — so it is visibly
   closed, and its options stop responding. */
.ci-question-card.is-locked { opacity: .62; position: relative; }
.ci-question-card.is-locked .ci-option {
  pointer-events: none;
  background: var(--ci-surface-2);
  border-color: var(--ci-border);
}
.ci-question-card.is-locked::after {
  content: attr(data-locked);
  position: absolute; top: .75rem; right: .75rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--ci-surface-2); color: var(--ci-muted);
  border: 1px solid var(--ci-border);
}

/* The palette is a progress map now, not a jump menu — a question already
   left cannot be re-entered, so it must not look clickable. */
.ci-palette-btn.is-past,
.ci-palette-btn:disabled { opacity: .5; cursor: default; pointer-events: none; }

@media (max-width: 767.98px) {
  /* Sticky, and padded past the browser's own gesture strip. */
  .ci-qnav {
    position: sticky; bottom: 0; z-index: 20;
    margin: 1rem -12px 0; padding: .6rem 12px;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--ci-surface);
    border-top: 1px solid var(--ci-border);
    box-shadow: 0 -6px 18px rgba(15,23,42,.12);
  }
  .ci-qnav__status { justify-content: center; font-size: .76rem; }
  .ci-qnav__pos    { margin-left: 0; width: 100%; text-align: center; }
  .ci-qnav__btn    { font-size: .86rem; padding: .7rem .5rem; }
  .ci-qnav__btn span { overflow: hidden; text-overflow: ellipsis; }
}
[data-theme="dark"] .ci-qnav { box-shadow: 0 -6px 18px rgba(0,0,0,.4); }

/* Room to scroll past the sticky bar. */
@media (max-width: 767.98px) {
  .ci-quiz-shell #quizEngine { padding-bottom: 6rem; }
}

/* =====================================================================
   PER-QUESTION COUNTDOWN
   Prominent enough to act on, quiet enough not to panic anyone. Turns
   amber under ten seconds and red under five.
   ===================================================================== */
.ci-qclock {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--ci-primary-soft); color: var(--ci-primary);
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem;
}
.ci-qclock.is-warn   { background: var(--ci-warning-soft); color: var(--ci-warning); }
.ci-qclock.is-danger { background: var(--ci-danger-soft);  color: var(--ci-danger); }
.ci-qclock__bar {
  height: 3px; border-radius: 999px; background: var(--ci-border);
  overflow: hidden; margin-top: .45rem;
}
.ci-qclock__bar > i {
  display: block; height: 100%; width: 100%;
  background: var(--ci-primary); transition: width 1s linear;
}
.ci-qclock__bar > i.is-warn   { background: var(--ci-warning); }
.ci-qclock__bar > i.is-danger { background: var(--ci-danger); }

/* =====================================================================
   QUIZ DATE
   The single fact a participant wants from a schedule. It replaced a
   five-row table of registration/competition/timezone detail, which is
   still available to a Super Admin behind a setting.
   ===================================================================== */
.ci-quizdate {
  padding: 1rem 1.15rem; border-radius: 14px;
  background: var(--ci-primary-soft); border: 1px solid var(--ci-border);
  text-align: center;
}
.ci-quizdate__label {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ci-muted);
}
.ci-quizdate__value {
  margin-top: .2rem; font-size: 1.5rem; font-weight: 800;
  line-height: 1.15; color: var(--ci-text);
}
.ci-quizdate__time {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
  font-size: .95rem; font-weight: 650; color: var(--ci-primary);
}
@media (max-width: 575.98px) {
  .ci-quizdate__value { font-size: 1.3rem; }
}

/* =====================================================================
   STAT TILES — never truncate a number
   The value was in a .text-truncate box sized for a label, so "40.30"
   rendered as "40…". A number is the whole point of the tile: it wraps
   the LABEL instead, and shrinks the figure only as far as it must.
   ===================================================================== */
.ci-stat-value {
  /* Overrides the .text-truncate these carry in the markup. */
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
  line-height: 1.15;
}
.ci-stat { min-width: 0; }
.ci-stat > div { min-width: 0; }
.ci-stat-label {
  white-space: normal;          /* the label wraps, the number does not */
  overflow-wrap: anywhere;
  line-height: 1.25;
}
@media (max-width: 575.98px) {
  /* Two tiles per row on a phone rather than four squeezed ones. */
  .ci-stat { padding: .8rem; gap: .6rem; }
  .ci-stat-icon { width: 38px; height: 38px; flex: 0 0 38px; }
  .ci-stat-value { font-size: clamp(1rem, 5.5vw, 1.35rem); }
  .ci-stat-label { font-size: .68rem; }
}

/* =====================================================================
   MOBILE NAVIGATION
   ===================================================================== */

/* --- the hamburger -------------------------------------------------
   Bootstrap's default toggler is a dark SVG on a transparent background,
   which disappears against the hero. It gets a real surface, a border and
   a proper touch target, and its icon is drawn from currentColor so it
   follows the theme instead of being baked into the image. */
.navbar-toggler {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;          /* comfortable tap target */
  border: 1.5px solid var(--ci-border-strong) !important;
  border-radius: 10px;
  background: var(--ci-surface);
  color: var(--ci-text);
  transition: border-color .15s ease, background .15s ease;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--ci-primary-soft); }
.navbar-toggler:hover { border-color: var(--ci-primary) !important; color: var(--ci-primary); }
.navbar-toggler .navbar-toggler-icon {
  width: 22px; height: 22px; background-image: none; position: relative;
}
/* Three bars drawn in currentColor, so contrast follows the theme. */
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after,
.navbar-toggler .navbar-toggler-icon > i {
  content: ""; position: absolute; left: 2px; right: 2px; height: 2px;
  border-radius: 2px; background: currentColor;
}
.navbar-toggler .navbar-toggler-icon::before { top: 5px; }
.navbar-toggler .navbar-toggler-icon::after  { bottom: 5px; }
.navbar-toggler .navbar-toggler-icon > i     { top: 50%; margin-top: -1px; }

[data-theme="dark"] .navbar-toggler {
  background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.5) !important; color: #e2e8f0;
}
/* On the transparent hero header it needs its own contrast. */
.ci-nav-transparent .navbar-toggler {
  background: rgba(8,15,33,.55); border-color: rgba(255,255,255,.45) !important; color: #fff;
}

/* --- the open panel -------------------------------------------------
   A FIXED OVERLAY covering everything below the header, rather than a
   block that pushes the page down.

   That shape is what makes the scroll lock work with a sticky header. The
   alternative — pinning the body with position:fixed — moves the sticky
   containing block, so the header scrolls out of view the moment the menu
   opens. With the panel fixed there is nothing behind it to touch, the
   header stays where it is, and the document simply stops scrolling.
   ------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ci-navbar .navbar-collapse {
    position: fixed;
    top: var(--ci-navh, 62px);     /* measured by mobile-nav.js */
    left: 0; right: 0; bottom: 0;
    z-index: 1035;

    /* The panel scrolls; the page behind it does not. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    margin: 0;
    padding: .75rem 1rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    background: var(--ci-surface);
    border-top: 1px solid var(--ci-border);
    box-shadow: 0 12px 28px rgba(15,23,42,.18);
  }

  /* Bootstrap animates height on .collapsing, which fights a panel pinned
     to bottom:0 and produces a stutter. It fades instead. */
  .ci-navbar .navbar-collapse.collapsing {
    height: auto !important;
    transition: opacity .18s ease;
    opacity: 0;
  }
  .ci-navbar .navbar-collapse.show { opacity: 1; }

  /* Compact, evenly spaced rows rather than tall gaps. */
  .ci-navbar .navbar-nav .nav-link {
    padding: .7rem .25rem; font-size: 1rem; font-weight: 600;
    border-bottom: 1px solid var(--ci-border);
  }
  .ci-navbar .navbar-nav .nav-link.active { color: var(--ci-primary); }
  .ci-navbar .navbar-nav:last-child .nav-link { border-bottom: 0; }

  /* The controls row: language, theme, notifications, account — one strip
     of equal-sized buttons instead of four loose, differently sized ones. */
  .ci-navbar .navbar-nav.align-items-lg-center {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .5rem; margin-top: .85rem; padding-top: .85rem;
    border-top: 1px solid var(--ci-border);
  }
  .ci-navbar .navbar-nav.align-items-lg-center > .nav-item { margin: 0; }
  .ci-navbar .navbar-nav.align-items-lg-center > .nav-item > .nav-link,
  .ci-navbar .navbar-nav.align-items-lg-center .ci-theme-toggle,
  .ci-navbar .navbar-nav.align-items-lg-center .ci-lang-pill {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 46px; margin: 0; padding: .4rem;
    border: 1px solid var(--ci-border); border-radius: 10px;
    background: var(--ci-subtle);
  }
  /* The account block spans the row and names itself, so a lone "N" is
     never the only clue that this is your account. */
  .ci-navbar .navbar-nav.align-items-lg-center > .nav-item.dropdown {
    grid-column: 1 / -1;
  }
  .ci-navbar .ci-accountbtn {
    width: 100%; justify-content: flex-start; gap: .6rem;
    min-height: 52px; padding: .5rem .75rem !important;
  }
  .ci-navbar .ci-accountbtn__name { display: inline !important; font-size: .95rem; }
  .ci-navbar .ci-accountbtn::after { margin-left: auto; }

  /* The account dropdown becomes part of the panel rather than a floating
     layer that can be clipped by the panel's own scroll box — which is what
     pushed Logout half off the bottom of the screen. */
  .ci-navbar .navbar-nav .dropdown-menu {
    position: static !important; transform: none !important; float: none;
    width: 100%; margin: .5rem 0 0; padding: .35rem;
    border: 1px solid var(--ci-border); border-radius: 10px;
    box-shadow: none; background: var(--ci-subtle);
  }
  .ci-navbar .dropdown-item {
    display: flex; align-items: center; gap: .1rem;
    min-height: 48px; padding: .7rem .85rem;
    border-radius: 8px; font-size: .95rem; white-space: normal;
  }
  .ci-navbar .dropdown-item:hover,
  .ci-navbar .dropdown-item:focus { background: var(--ci-surface); }
  .ci-navbar .dropdown-divider { margin: .35rem .25rem; }
  /* Logout is the last item and the destructive one: it gets its own
     separation and keeps its colour on tap rather than inverting. */
  .ci-navbar .dropdown-item.text-danger {
    margin-top: .15rem; font-weight: 650;
  }
  .ci-navbar .dropdown-item.text-danger:hover,
  .ci-navbar .dropdown-item.text-danger:focus {
    background: var(--ci-danger-soft); color: var(--ci-danger) !important;
  }
}

/* --- the unread dot -------------------------------------------------
   It is anchored to the bell. In the collapsed menu the nav-link stretches
   to the full row width, so `right: 2px` threw the dot to the far edge of
   the screen — the "random floating dot". Anchoring it to the icon keeps it
   on the bell at every width. */
.ci-notif-dot {
  position: absolute; top: 50%; left: 50%;
  margin: -12px 0 0 2px;                /* just off the bell glyph */
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ci-danger); border: 2px solid var(--ci-surface);
}
[data-theme="dark"] .ci-notif-dot { border-color: var(--ci-surface); }

/* Nothing behind the open menu may scroll.
   Applied to BOTH elements: some engines honour it only on <html>, others
   only on <body>. The panel above is fixed, so this cannot move the page. */
html.ci-nav-open, body.ci-nav-open {
  overflow: hidden;
  touch-action: none;
}

/* ...but overflow:hidden makes the document a scroll container, and a sticky
   header inside a scroll container sticks to THAT, not to the viewport. Open
   the menu after scrolling down and the header would be left behind at the
   top of the document, off screen, with the panel hanging under nothing.

   While the menu is open the header is therefore pinned outright. The panel
   already starts at --ci-navh, so the two never overlap. */
@media (max-width: 991.98px) {
  html.ci-nav-open .ci-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1040;                 /* above the panel's 1035 */
  }
}

/* The panel itself must still scroll. */
html.ci-nav-open .ci-navbar .navbar-collapse { touch-action: pan-y; }

/* =====================================================================
   MOBILE HERO — laid out on its own terms
   ---------------------------------------------------------------------
   Replaces the earlier pass, which only shrank the desktop composition.
   Below 992px the hero becomes a single column with its own order, sizes
   and spacing; the rotating visual is capped so it decorates rather than
   dominates; and the whole thing is measured in dvh so the phone's URL bar
   cannot push the call to action off-screen.

   Nothing here touches the desktop layout — every rule is inside a
   max-width query.
   ===================================================================== */
@media (max-width: 991.98px) {
  .ci-hero {
    padding: 1.75rem 0 2rem;
    /* Never taller than the visible viewport. 100dvh excludes the browser
       chrome that 100vh wrongly includes, which is what pushed the buttons
       under the address bar on iOS. */
    min-height: auto;
  }
  .ci-hero .row { flex-direction: column; }
  .ci-hero .col-lg-7 { order: 1; }
  .ci-hero .col-lg-5 { order: 2; margin-top: 1.5rem; }

  /* The pill reads as a caption, not a banner. */
  .ci-hero-pill {
    display: inline-flex; max-width: 100%;
    font-size: .7rem; line-height: 1.35; padding: .35rem .75rem;
    margin-bottom: .85rem; white-space: normal; text-align: left;
  }

  .ci-hero h1 {
    font-size: clamp(1.6rem, 8vw, 2.35rem);
    line-height: 1.16; margin-bottom: .6rem;
    overflow-wrap: anywhere;          /* long city names must break, not overflow */
  }
  .ci-hero .lead {
    font-size: .95rem; line-height: 1.5; margin-bottom: 1.1rem;
    max-width: 34ch;                  /* a readable measure, not the full width */
  }

  /* Full-width, thumb-sized, stacked — never wrapped mid-row. */
  .ci-hero .d-flex.flex-wrap.gap-3 { flex-direction: column; gap: .55rem !important; }
  .ci-hero .d-flex.flex-wrap.gap-3 .btn {
    width: 100%; min-height: 50px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Two columns of stats instead of four squeezed into one row. */
  .ci-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem; margin-top: 1.35rem;
  }
  .ci-hero-stat { padding: .6rem .5rem; }
  .ci-hero-stat .num { font-size: 1.4rem; }
  .ci-hero-stat .lbl { font-size: .66rem; }

  /* The rotating visual: capped, centred, and never the reason the copy
     gets pushed off the first screen. */
  .ci-heroshow { max-width: 320px; margin-inline: auto; }
  .ci-heroshow__dots { margin-top: .6rem; }
}

@media (max-width: 575.98px) {
  .ci-hero { padding: 1.5rem 0 1.75rem; }
  .ci-hero h1 { font-size: clamp(1.5rem, 8.5vw, 2rem); }
  .ci-heroshow { max-width: 260px; }
  /* At this width the floating shapes overlap the headline rather than
     framing it. */
  .ci-hero-shapes { display: none; }
  .ci-hero-stats { gap: .5rem; }
}

/* The narrowest phones still in use — 320px. Everything must fit without
   a horizontal scrollbar. */
@media (max-width: 359.98px) {
  .ci-hero h1 { font-size: 1.45rem; }
  .ci-hero .lead { font-size: .9rem; }
  .ci-hero-pill { font-size: .66rem; }
  .ci-heroshow { max-width: 220px; }
  .ci-hero-stat .num { font-size: 1.2rem; }
}

/* Nothing on the site may scroll sideways on a phone.
 *
 * `clip`, NOT `hidden`. Setting overflow-x:hidden on html/body makes the
 * other axis compute to `auto`, which turns the document into a scroll
 * container — and `position: sticky` then sticks to THAT container instead
 * of the viewport, so .sticky-top quietly stops working. Because this block
 * is inside a max-width query, the header stayed pinned on desktop and
 * scrolled away on a phone, which is exactly how it was reported.
 *
 * `clip` does the same visual job without establishing a scroll container,
 * so the sticky header survives.
 *
 * Scoped to <body> and not <html>: the root element's overflow propagates to
 * the viewport, so leaving html alone keeps the viewport the plain scrolling
 * box that .sticky-top resolves against. */
@media (max-width: 991.98px) {
  body { overflow-x: clip; }
  .ci-hero, .ci-hero .container { max-width: 100%; }
}

/* Engines without overflow:clip (pre-2022 Safari/Firefox) get no sideways
 * clipping rather than a broken sticky header — the lesser of the two
 * faults, and the wide element should be fixed at source anyway. */
@supports not (overflow: clip) {
  @media (max-width: 991.98px) {
    body { overflow-x: visible; }
  }
}

/* =====================================================================
   MOBILE VIEWPORT — the quiz screen
   100vh includes the browser chrome on iOS, so a full-height quiz screen
   put its own controls underneath the address bar. dvh tracks the visible
   area; the vh line stays first as a fallback for engines without it.
   ===================================================================== */
@media (max-width: 767.98px) {
  .ci-quiz-shell { min-height: 100vh; min-height: 100dvh; }
  .ci-question-card { padding: 1.1rem; }
  /* Answer options: a real tap target, and a selected state you can see at
     arm's length rather than a one-pixel border change. */
  .ci-option { padding: .85rem .9rem; min-height: 54px; align-items: center; }
  .ci-option-text { font-size: .95rem; line-height: 1.35; }
  .ci-option.selected {
    border-color: var(--ci-primary);
    background: var(--ci-primary-soft);
    box-shadow: inset 0 0 0 1px var(--ci-primary);
  }
  .ci-quiz-bar { padding-top: .5rem; padding-bottom: .5rem; }
  .ci-quiz-bar .ci-brand-mark { display: none; }
}

/* =====================================================================
   MOBILE HERO BACKDROP — stop the photograph being cropped to a sliver
   ---------------------------------------------------------------------
   The hero photographs are landscape (roughly 1.5:1). The mobile hero box
   is portrait (roughly 0.75:1). object-fit: cover therefore has to zoom in
   until only about HALF the image width survives, so a wide cityscape is
   reduced to its middle band and the landmark at either edge is cut off
   entirely — which is what "the background looks cropped" is.

   Fixing object-position cannot solve that; the box is simply the wrong
   shape. So on mobile the backdrop stops being a full-bleed fill and
   becomes a TOP BAND at a landscape-ish ratio, dissolving into the hero's
   own gradient underneath. The box goes from ~0.75:1 to ~1.3:1, which
   takes the visible width from about 50% to about 87%.

   As a side effect the copy below sits on the hero gradient rather than on
   a photograph, so it reads more cleanly too.
   ===================================================================== */
@media (max-width: 991.98px) {
  .ci-hero-bg {
    /* A band anchored to the top, not the whole hero. */
    inset: 0 0 auto 0;
    height: clamp(240px, 40vh, 340px);
  }

  .ci-hero-bg img {
    /* Cityscapes carry their interest just above the middle: the skyline,
       the domes, the lake edge. Anchoring a little above centre keeps that
       rather than the empty foreground. */
    object-position: center 34%;
    /* Dissolve into the section instead of ending on a hard horizontal
       line. Masked rather than overlaid so the hero's own gradient shows
       through underneath, whatever the theme. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  }

  /* The scrim was built for a wide hero: dense on the left, clearing to the
     right, because the copy sat left of the visual. In one mobile column
     that reads as a diagonal smear, so it becomes a simple vertical wash. */
  .ci-hero-bg::after {
    background: linear-gradient(180deg,
      rgba(8,14,28,.34) 0%,
      rgba(8,14,28,.20) 45%,
      rgba(8,14,28,.00) 100%);
  }
  [data-theme="dark"] .ci-hero-bg::after {
    background: linear-gradient(180deg,
      rgba(4,8,18,.52) 0%,
      rgba(4,8,18,.32) 45%,
      rgba(4,8,18,.00) 100%);
  }

  /* With the photo now a band above the copy, the text column no longer
     needs its own dark plate — it would read as a grey box on the gradient. */
  .ci-hero .col-lg-7::before { display: none; }
  /* The headline keeps a shadow: the band still sits behind the top of it. */
  .ci-hero h1, .ci-hero .lead, .ci-hero-pill { text-shadow: 0 1px 10px rgba(2,6,18,.55); }
}

@media (max-width: 575.98px) {
  .ci-hero-bg { height: clamp(210px, 34vh, 280px); }
}

/* =====================================================================
   QUIZ ADVERTISING
   ---------------------------------------------------------------------
   Two strips on the quiz screen, both fed from Admin → Quiz Adverts:

     .ci-ad--slider   under the question that is on screen
     .ci-ad--logos    a continuously scrolling partner run under the quiz

   The rule both obey: an advert may never change the size of anything
   around it. Each strip is a fixed height at every breakpoint, so an
   advert taller than the last one letterboxes inside its own box instead
   of pushing the question, the options or the navigation buttons around —
   which on a phone reads as the whole quiz resizing.
   ===================================================================== */
.ci-ad {
  position: relative;
  margin-top: 1rem;
  padding: .75rem .85rem .85rem;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-sm);
  /* Never a scrollbar and never a source of horizontal page scroll. */
  overflow: hidden;
}

/* Paid placement beside an exam paper has to say what it is. */
.ci-ad__tag {
  display: block;
  font-size: .62rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ci-muted);
  margin-bottom: .5rem;
}
/* The link that wraps a clickable advert.
   It has to FILL whatever box it is dropped into rather than being sized by
   the image inside it. An auto-height wrapper gives the image no definite
   parent to resolve `max-height: 100%` against, so a linked advert ignored
   the fixed strip height entirely, overflowed its box and covered both the
   "Advertisement" label above it and the quiz navigation below. */
.ci-ad__link {
  display: flex;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  line-height: 0;
}

/* ------------------------------------------------- the question slider */
.ci-ad-slider__track {
  position: relative;
  /* The fixed height that keeps every question the same size. */
  height: 96px;
}
.ci-ad-slide {
  position: absolute; inset: 0;
  /* Grid rather than flex column: a `1fr` row is a DEFINITE size, which is
     what lets the image (or the link wrapping it) resolve `max-height: 100%`
     and letterbox inside the strip instead of setting its own height. The
     second row is the caption, which takes only what it needs. */
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center; justify-items: center;
  gap: .3rem;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease;
  /* Last line of defence: an advert can never paint outside its own slide. */
  overflow: hidden;
}
.ci-ad-slide.is-on { opacity: 1; visibility: visible; }
.ci-ad-slide__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  min-width: 0; min-height: 0;
  object-fit: contain;
}
.ci-ad-slide__caption {
  font-size: .74rem; color: var(--ci-muted); text-align: center;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-ad-dots {
  display: flex; justify-content: center; gap: .35rem;
  margin-top: .6rem;
}
.ci-ad-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--ci-border-strong);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ci-ad-dot.is-on { background: var(--ci-primary); transform: scale(1.25); }

/* ------------------------------------------------- the partner run */
.ci-adlogo__viewport { overflow: hidden; }
.ci-adlogo__track {
  display: flex; width: max-content;
  animation: ci-adlogo-scroll 38s linear infinite;
}
/* Two identical runs side by side, shifted by exactly one run's width, so
   the loop has no seam and nothing has to be measured in JavaScript. */
.ci-adlogo__run { display: flex; align-items: center; }
@keyframes ci-adlogo-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ci-ad--logos:hover .ci-adlogo__track { animation-play-state: paused; }

.ci-adlogo {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 132px; height: 56px;
  padding: 0 .5rem;
}
.ci-adlogo__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  /* Partner logos arrive in every colour and weight. Draining them to a
     single grey keeps the run reading as one strip rather than as a row of
     competing badges beside a question. Full colour on hover. */
  filter: grayscale(1); opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.ci-adlogo:hover .ci-adlogo__img { filter: none; opacity: 1; }
[data-theme="dark"] .ci-adlogo__img { opacity: .82; }

/* Motion beside a timed question is the one place a preference for less of
   it is not cosmetic. Both strips stand still. */
@media (prefers-reduced-motion: reduce) {
  .ci-adlogo__track { animation: none; }
  .ci-ad-slide      { transition: none; }
}

@media (max-width: 767.98px) {
  .ci-ad { margin-top: .85rem; padding: .6rem .7rem .7rem; }
  .ci-ad-slider__track { height: 74px; }
  .ci-adlogo { width: 104px; height: 46px; }
  /* A shorter run has less to cross, so it would otherwise race. */
  .ci-adlogo__track { animation-duration: 26s; }
}

/* =====================================================================
   QUIZ LAYOUT STABILITY  (mobile)
   ---------------------------------------------------------------------
   The complaint this answers: on a phone the quiz "gets smaller and
   bigger" while you answer. Four separate things were moving, and each
   one is pinned here rather than papered over with a redesign.

   1  QUESTION HEIGHT.  One question card is visible at a time and they are
      not the same length — a one-line question with four short options is
      half the height of a three-line question with an image. Moving from
      one to the next therefore resized the whole page, and on a phone the
      sticky bar at the bottom moved with it. The card now has a floor, so
      short questions letterbox instead of collapsing.

   2  THE VIEWPORT UNIT.  100vh on a phone means "the window with the
      address bar hidden", so the shell was taller than the visible area
      until the bar scrolled away and then shifted when it came back.
      100svh is the SMALL viewport — the size with the browser chrome
      showing — and it does not change as you scroll, which is exactly the
      property wanted here.

   3  REFLOW IN THE BARS.  The counts, the countdown and the answered
      tally all change while a question runs. "20s" becoming "9s" and
      "1 / 22" becoming "10 / 22" changed their own width, which re-wrapped
      the flex rows they live in and changed the height of the bar. Tabular
      figures and a reserved width stop the digits from resizing anything.

   4  HORIZONTAL OVERFLOW.  A long unbroken string in a question or an
      option could push the page wider than the screen, which shows up as
      the quiz sliding sideways under your thumb. Long words now break.
   ===================================================================== */
@media (max-width: 767.98px) {
  /* (2) The shell tracks the visible area and stops moving with the URL bar.
     The vh line stays first for engines without svh. */
  .ci-quiz-shell { min-height: 100vh; min-height: 100svh; }

  /* (1) A floor for the question card. Deliberately a min-height and not a
     fixed height: a long question must still be free to grow, it is the
     shrinking between questions that was the problem. */
  .ci-question-card { min-height: 48svh; }
}

/* (1) The same floor at every size, so a desktop window does not jump either
   when a short question follows a long one. */
@media (min-width: 768px) {
  .ci-question-card { min-height: 340px; }
}

/* (4) Long words and pasted URLs wrap instead of widening the page. */
.ci-question-text,
.ci-option-text,
.ci-ad-slide__caption { overflow-wrap: anywhere; }

/* (4) The question image can never be wider than its card. */
.ci-qimage img { max-width: 100%; height: auto; }

/* (3) Digits that change every second must not change width. */
.ci-qclock,
.ci-qtimer,
.ci-qnav__pos,
.ci-qcount__pill { font-variant-numeric: tabular-nums; }

/* (3) Enough room for the widest value each counter will ever hold, so the
   row it sits in cannot re-wrap as the number changes. */
.ci-qclock [id="qClockText"],
.ci-qtimer [data-qtimer-text] {
  display: inline-block; min-width: 2.6em; text-align: right;
}

/* (3) The bottom bar keeps one height. Its status row was wrapping to a
   second line as the counts grew, which moved the buttons under the
   participant's thumb mid-question. */
.ci-qnav__status { min-height: 1.6rem; }

@media (max-width: 767.98px) {
  /* The pills stay on one line and scroll if they genuinely cannot fit,
     rather than wrapping and making the bar taller. */
  .ci-qnav__status {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ci-qnav__status::-webkit-scrollbar { display: none; }
  .ci-qnav__pos { margin-left: auto; width: auto; flex: 0 0 auto; }
  .ci-qcount__pill { flex: 0 0 auto; white-space: nowrap; }

  /* Room to scroll past the sticky bar AND the advert strips below the
     question, which is what the previous 6rem no longer covered. */
  .ci-quiz-shell #quizEngine { padding-bottom: 7rem; }
}

/* The quiz column clips sideways rather than letting a stray wide element
   scroll the whole document.

   `clip` specifically, with no `hidden` fallback: overflow-x:hidden would
   make this a scroll container, and the question navigator beside it is
   position:sticky — it would then stick to this box instead of the viewport
   and stop following the page. An engine too old for `clip` simply keeps the
   behaviour it had before, which is the safe direction to fail in. */
#quizEngine { overflow-x: clip; }

/* =====================================================================
   COPY PROTECTION — the paper, not the page
   The selection block already covered the question text, the option text
   and the image. It is widened to the whole card so the question number,
   the option letters and anything added to a card later are covered too —
   while the controls inside it stay completely normal, because a radio you
   cannot focus is a quiz you cannot answer.
   ===================================================================== */
.ci-noselect .ci-question-card {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.ci-noselect .ci-question-card input,
.ci-noselect .ci-question-card button,
.ci-noselect .ci-question-card select,
.ci-noselect .ci-question-card textarea {
  -webkit-user-select: auto; user-select: auto;
}
/* The adverts are not part of the paper: an advertiser's own text stays
   selectable so a participant can act on it. */
.ci-noselect .ci-ad { -webkit-user-select: text; user-select: text; }

/* =====================================================================
   THE RANK 4-50 CATEGORY CHOICE
   Four cards, one decision. Each is a single large target rather than a
   radio plus a submit button, because the choice is final and goes
   straight to a confirmation — an in-between "picked but not sent" state
   would only invite a half-made decision.
   ===================================================================== */
/* The column is the card plus its terms disclosure, so the four stay level
   with each other however much detail each offer carries. */
.ci-choice-wrap {
  display: flex; flex-direction: column;
  height: 100%;
}
.ci-choice {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  width: 100%;
  /* Grows to fill the column so a card whose offer has fewer lines still
     matches the tallest one beside it. */
  flex: 1 1 auto;
  padding: 1.4rem 1rem 1.1rem;
  background: var(--ci-surface);
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-sm);
  text-align: center; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ci-choice:hover,
.ci-choice:focus-visible {
  border-color: var(--ci-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
}
.ci-choice__art {
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--ci-primary-soft); color: var(--ci-primary-dark);
  font-size: 1.6rem; overflow: hidden;
}
.ci-choice__art img { width: 100%; height: 100%; object-fit: cover; }
.ci-choice__name  { font-weight: 700; font-size: 1.02rem; color: var(--ci-ink); }
.ci-choice__offer {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ci-success);
}
.ci-choice__desc  { font-size: .82rem; color: var(--ci-muted); line-height: 1.4; }

/* Which brand is actually honouring it, and where. */
.ci-choice__shop {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .25rem .4rem;
  font-size: .84rem; font-weight: 600; color: var(--ci-ink);
}
.ci-choice__area {
  font-size: .72rem; font-weight: 500; color: var(--ci-muted);
}
.ci-choice__validity {
  font-size: .76rem; color: var(--ci-muted);
}

.ci-choice__cta {
  margin-top: auto; padding-top: .7rem;
  font-size: .82rem; font-weight: 650; color: var(--ci-primary);
}
[data-theme="dark"] .ci-choice { background: var(--ci-surface); }

/* ------------------------------------------------- the terms disclosure */
.ci-choice-terms {
  margin-top: .4rem;
  font-size: .78rem;
  color: var(--ci-muted);
}
.ci-choice-terms > summary {
  cursor: pointer;
  padding: .4rem .2rem;
  text-align: center;
  font-weight: 600;
  color: var(--ci-primary);
  list-style: none;
}
.ci-choice-terms > summary::-webkit-details-marker { display: none; }
.ci-choice-terms > summary::after {
  content: " \25BE";
}
.ci-choice-terms[open] > summary::after {
  content: " \25B4";
}
.ci-choice-terms ul {
  margin: 0; padding: .1rem 0 .5rem 1.1rem;
  line-height: 1.45;
  /* A long set of conditions must not push the four cards out of line, so it
     scrolls inside its own box once it gets past a few lines. */
  max-height: 11rem; overflow-y: auto;
}
.ci-choice-terms li + li { margin-top: .25rem; }

/* =====================================================================
   RANK 4-50 — THE CLAIM NOTICE ON THE DASHBOARD
   ---------------------------------------------------------------------
   A read-only preview of the four options beside the call to action. It
   scrolls sideways on a phone rather than stacking, so the notice stays
   one screen-height whatever number of categories an organiser has
   configured — the dashboard below it is the thing people came for.
   ===================================================================== */
.ci-claim { border-color: var(--ci-warning, #f59e0b); }

.ci-claim__options {
  display: flex; gap: .6rem;
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--ci-border);
  overflow-x: auto;
  /* Room for the focus ring, which the overflow would otherwise clip. */
  padding-bottom: .35rem;
  scrollbar-width: thin;
}
.ci-claim__opt {
  flex: 1 1 0; min-width: 150px;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .65rem;
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius-sm, .5rem);
  background: var(--ci-surface);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.ci-claim__opt:hover,
.ci-claim__opt:focus-visible {
  border-color: var(--ci-primary);
  background: var(--ci-primary-soft);
}
.ci-claim__art {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ci-primary-soft); color: var(--ci-primary-dark);
  font-size: 1.05rem; overflow: hidden;
}
.ci-claim__art img { width: 100%; height: 100%; object-fit: cover; }
.ci-claim__label { min-width: 0; display: flex; flex-direction: column; }
.ci-claim__name {
  font-weight: 650; font-size: .88rem; color: var(--ci-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-claim__offer {
  font-size: .74rem; font-weight: 700; color: var(--ci-success);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 575.98px) {
  /* Below this the cards would be too narrow to read, so they become a
     swipeable run of fixed-width tiles instead of shrinking further. */
  .ci-claim__opt { flex: 0 0 auto; min-width: 46vw; }
}