/* =====================================================================
   Torch — design system (SPEC §2 / §2a / §3) + participant app views.
   Mobile-first, Olympic visual language, WCAG AA. host.css reuses these
   tokens — never redefine :root there.
   ===================================================================== */

:root{
  /* Olympic ring colors */
  --oly-blue:#0085C7;
  --oly-yellow:#F4C300;
  --oly-black:#101820;
  --oly-green:#009F3D;
  --oly-red:#DF0024;
  /* brand */
  --brand:var(--oly-blue);
  --brand-ink:#005a8c;          /* darker blue for text-on-white / gradients */
  --gold:#C8A24B;               /* gold accent for medal fills / borders (decorative) */
  --gold-ink:#8A6A1E;           /* darker gold for numeric text on white — WCAG AA (~4.7:1) */
  /* neutrals */
  --bg:#F5F8FC;
  --surface:#FFFFFF;
  --ink:#0B1220;
  --muted:#5B6573;
  --line:#E6EBF2;
  /* shape */
  --r:16px; --r-sm:10px; --r-pill:999px;
  --shadow:0 6px 24px rgba(11,18,32,.08);
  --shadow-lg:0 16px 48px rgba(11,18,32,.16);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  overscroll-behavior-y:none;
}
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; color:inherit; }
input,textarea,button{ font-size:16px; } /* avoid iOS zoom-on-focus */
[hidden]{ display:none !important; }
.points{ font-variant-numeric:tabular-nums; color:var(--gold-ink); font-weight:800; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:6px; }

.noscript{
  margin:var(--space-5); padding:var(--space-4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); color:var(--ink);
}

/* ---------------------------------------------------- ring / torch motif */
.rings-motif{ width:132px; height:78px; display:block; }
.rings-motif--sm{ width:48px; height:28px; }
.rings-motif--lg{ width:180px; height:106px; }

/* ============================================================== buttons */
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  border-radius:var(--r-pill); padding:14px 20px; font-weight:700;
  font-size:1rem; line-height:1; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  touch-action:manipulation;
}
.btn--block{ width:100%; }
.btn--primary{
  background:linear-gradient(135deg,var(--oly-blue),var(--brand-ink));
  color:#fff; box-shadow:var(--shadow);
}
.btn--primary:hover{ box-shadow:var(--shadow-lg); }
.btn--primary:active{ transform:translateY(1px) scale(.995); }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn--ghost{
  background:var(--surface); border-color:var(--line); color:var(--ink);
}
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand-ink); }

/* ============================================================== fields */
.field{ display:block; margin-bottom:var(--space-5); }
.field__label{
  display:block; font-size:.82rem; font-weight:700; letter-spacing:.01em;
  color:var(--muted); margin-bottom:var(--space-2); text-transform:uppercase;
}
.field__error{
  color:var(--oly-red); font-size:.88rem; font-weight:600; margin-top:var(--space-2);
}
.field__hint{
  color:var(--muted); font-size:.85rem; line-height:1.4; margin-top:var(--space-2);
}
.input,.textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:13px 14px; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(0,133,199,.15);
}
.input::placeholder,.textarea::placeholder{ color:#6b7785; }
.textarea{ resize:vertical; min-height:84px; line-height:1.45; }
.textarea__count{
  display:block; text-align:right; font-size:.78rem; color:var(--muted);
  margin-top:var(--space-1); font-variant-numeric:tabular-nums;
}
.textarea__count.is-near{ color:var(--oly-red); font-weight:700; }

/* ============================================================== avatar */
.avatar{
  --av-size:40px;
  width:var(--av-size); height:var(--av-size); flex:0 0 auto;
  border-radius:var(--r-pill); background:var(--brand);
  color:#fff; font-weight:800; font-size:calc(var(--av-size) * .38);
  display:inline-flex; align-items:center; justify-content:center;
  letter-spacing:.01em; line-height:1; user-select:none;
  text-transform:uppercase; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
}
.avatar--sm{ --av-size:30px; }
.avatar--lg{ --av-size:52px; }

/* ============================================================ medal-chip */
.medal-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 9px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:700; line-height:1.1;
  background:var(--_cat-tint,#eef3f8); color:var(--_cat-ink,var(--ink));
  border:1.5px solid var(--_cat-color,var(--line));
  white-space:nowrap;
}
.medal-chip__emoji{ font-size:1rem; line-height:1; }
.medal-chip__label{ font-variant-numeric:normal; }

/* Category accent mapping (§3). Each maps a ring color + readable tint/ink.
   Contrast rule: never yellow/light text on white. */
[data-cat=torch]{      --_cat-color:var(--oly-blue);  --_cat-ink:var(--brand-ink);  --_cat-tint:#e4f2fa; }
[data-cat=gold]{       --_cat-color:var(--gold);      --_cat-ink:#7a5e1f;           --_cat-tint:#f7f0dd; }
[data-cat=relay]{      --_cat-color:var(--oly-green); --_cat-ink:#0a6b2c;           --_cat-tint:#e2f4e8; }
[data-cat=bravestop]{  --_cat-color:var(--oly-red);   --_cat-ink:#b2001d;           --_cat-tint:#fce4e6; }
[data-cat=brightspot]{ --_cat-color:var(--oly-yellow);--_cat-ink:#7a5e00;           --_cat-tint:#fbf3d0; }
[data-cat=envelope]{   --_cat-color:var(--brand-ink); --_cat-ink:#004a73;           --_cat-tint:#e1eef6; }

/* ====================================================================
   VIEW SCAFFOLD
   ==================================================================== */
.view{
  padding:var(--space-4) var(--space-4) calc(var(--space-6) + 80px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto; animation:viewIn .22s ease both;
}
@keyframes viewIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.view-h{ font-size:1.35rem; font-weight:800; letter-spacing:-.01em; margin-bottom:var(--space-4); }
.view-sub{ color:var(--muted); margin:calc(var(--space-3) * -1) 0 var(--space-4); font-weight:600; }
.empty-state{
  text-align:center; color:var(--muted); padding:var(--space-6) var(--space-4);
  font-weight:500;
}

/* ====================================================================
   JOIN VIEW
   ==================================================================== */
.view--join{ padding:0; max-width:none; }
.join-hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:var(--space-2);
  padding:var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--bg) 60%),
    linear-gradient(180deg,#ffffff,var(--bg));
}
.brandmark{ margin-bottom:var(--space-4); animation:ringPop .6s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes ringPop{ from{ opacity:0; transform:scale(.7);} to{ opacity:1; transform:none; } }
.join-kicker{
  font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand-ink); font-size:.8rem;
}
.join-title{ font-size:2rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.join-tagline{ color:var(--muted); font-size:1.02rem; margin-bottom:var(--space-5); max-width:24ch; }
.join-form{ width:100%; max-width:340px; text-align:left; }
.join-form .field{ margin-bottom:var(--space-3); }
.join-context{
  position:fixed; left:0; right:0; bottom:0;
  padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  color:var(--muted); font-size:.78rem; letter-spacing:.02em;
}

/* ====================================================================
   APP BAR (header) + GIVE METER
   ==================================================================== */
.app{ min-height:100svh; }
.appbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + var(--space-3)) var(--space-4) var(--space-3);
}
.appbar__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.appbar__brand{ display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.appbar__titles{ display:flex; flex-direction:column; min-width:0; }
.appbar__name{ font-weight:800; font-size:1.02rem; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appbar__sub{ font-size:.74rem; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }

.medals-pill{
  appearance:none; cursor:pointer; border:1.5px solid var(--line);
  background:var(--surface); border-radius:var(--r-pill);
  padding:7px 13px; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; transition:border-color .15s ease, transform .08s ease, box-shadow .15s;
  box-shadow:var(--shadow);
}
.medals-pill:hover{ border-color:var(--gold); }
.medals-pill:active{ transform:translateY(1px); }
.medals-pill__emoji{ font-size:1.05rem; }
.medals-pill__label{ font-size:.82rem; font-weight:700; color:var(--muted); }
.medals-pill__value{ font-size:1rem; }

.give-meter{ margin-top:var(--space-3); }
.give-meter__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.give-meter__label{ font-size:.82rem; font-weight:700; color:var(--muted); }
.give-meter__count{ font-size:.95rem; }
.give-meter__sep{ color:var(--muted); margin:0 2px; font-weight:600; }
.give-meter__total{ color:var(--muted); font-weight:700; }
.give-meter__track{
  height:12px; border-radius:var(--r-pill); background:#e2e9f1;
  overflow:hidden; box-shadow:inset 0 1px 2px rgba(11,18,32,.08);
}
.give-meter__fill{
  height:100%; width:0%;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--oly-yellow),var(--gold) 45%,var(--oly-blue));
  transition:width .5s cubic-bezier(.3,.9,.3,1);
}

/* ====================================================================
   SEND FORM — recipient picker, categories, stepper
   ==================================================================== */
.send-form{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--space-5) var(--space-4);
  box-shadow:var(--shadow); }

/* recipient picker */
.recip{ position:relative; }
.recip__trigger{
  appearance:none; width:100%; cursor:pointer; text-align:left;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:11px 14px; min-height:50px; display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-2);
  transition:border-color .15s ease, box-shadow .15s;
}
.recip__trigger[aria-expanded=true]{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,133,199,.15); }
.recip__chosen{ display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.recip__placeholder{ color:#6b7785; }
.recip__name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recip__caret{ color:var(--muted); flex:0 0 auto; }
.recip__panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:var(--space-3);
  animation:viewIn .14s ease both;
}
.recip__search{ margin-bottom:var(--space-2); }
.recip__list{ list-style:none; margin:0; padding:0; max-height:46vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; }
.recip__opt{
  display:flex; align-items:center; gap:var(--space-3); width:100%;
  padding:9px 8px; border:none; background:none; cursor:pointer;
  border-radius:var(--r-sm); text-align:left; min-height:48px;
}
.recip__opt:hover,.recip__opt.is-active{ background:#eef4fa; }
.recip__opt[aria-pressed=true]{ background:#e4f2fa; }
.recip__opt-name{ font-weight:600; }
.recip__empty{ color:var(--muted); padding:var(--space-3); text-align:center; }

/* category grid */
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.cat-card{
  appearance:none; cursor:pointer; text-align:left;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:11px 12px; display:flex; flex-direction:column; gap:3px; min-height:64px;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
.cat-card:active{ transform:scale(.98); }
.cat-card__top{ display:flex; align-items:center; gap:7px; }
.cat-card__emoji{ font-size:1.15rem; line-height:1; }
.cat-card__label{ font-weight:700; font-size:.92rem; }
.cat-card__blurb{ font-size:.74rem; color:var(--muted); line-height:1.3; }
.cat-card[aria-checked=true]{
  border-color:var(--_cat-color,var(--brand)); background:var(--_cat-tint,#eef4fa);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--_cat-color,var(--brand)) 22%, transparent);
}
.cat-card[aria-checked=true] .cat-card__label{ color:var(--_cat-ink,var(--brand-ink)); }

/* amount stepper */
.stepper{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.stepper__btn{
  appearance:none; cursor:pointer; width:48px; height:48px; flex:0 0 auto;
  border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface);
  font-size:1.5rem; font-weight:700; line-height:1; color:var(--brand-ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s, transform .08s;
}
.stepper__btn:hover:not(:disabled){ border-color:var(--brand); }
.stepper__btn:active:not(:disabled){ transform:scale(.94); }
.stepper__btn:disabled{ opacity:.4; cursor:not-allowed; }
.stepper__value{
  width:74px; height:48px; text-align:center; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); font-size:1.25rem;
  -moz-appearance:textfield;
}
.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper__value:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,133,199,.15); }
.stepper__hint{ font-size:.82rem; color:var(--muted); font-weight:600; }

/* ====================================================================
   FEED — .feed-card (shared with host)
   ==================================================================== */
.feed-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.feed-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--space-4); box-shadow:var(--shadow);
  border-left:4px solid var(--_cat-color,var(--brand));
}
.feed-card.is-new{ animation:cardIn .4s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(-10px) scale(.98);} to{ opacity:1; transform:none; } }
.feed-card__route{
  display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3);
  font-weight:700; flex-wrap:wrap;
}
.feed-card__route .avatar{ --av-size:32px; }
.feed-card__from,.feed-card__to{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.feed-card__pname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
.feed-card__arrow{ color:var(--muted); flex:0 0 auto; }
.feed-card__msg{ font-size:1.02rem; line-height:1.5; margin-bottom:var(--space-3); overflow-wrap:anywhere; }
.feed-card__meta{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  justify-content:space-between;
}
.feed-card__meta-left{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.feed-card__amount{ font-size:.95rem; }
.feed-card__amount .points{ font-size:1rem; }
.feed-card__time{ font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.feed-card__cheer{
  appearance:none; cursor:pointer; border:1.5px solid var(--line);
  background:var(--surface); border-radius:var(--r-pill);
  padding:7px 13px; display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:.9rem; min-height:44px; color:var(--ink);
  transition:border-color .15s, background .15s, transform .08s;
}
.feed-card__cheer:hover{ border-color:var(--gold); }
.feed-card__cheer:active{ transform:scale(.95); }
.feed-card__cheer[aria-pressed=true]{
  background:#fbf3d0; border-color:var(--gold); color:#7a5e00;
}
.feed-card__cheer-emoji{ font-size:1rem; line-height:1; transition:transform .2s; }
.feed-card__cheer[aria-pressed=true] .feed-card__cheer-emoji{ animation:clap .35s ease; }
@keyframes clap{ 0%{transform:scale(1);} 40%{transform:scale(1.4) rotate(-8deg);} 100%{transform:scale(1);} }
.feed-card__cheer-count{ font-variant-numeric:tabular-nums; }

/* ====================================================================
   LEADERBOARD — .lb-row / tabs
   ==================================================================== */
.tabs{ display:flex; gap:var(--space-1); background:#e8eef5; border-radius:var(--r-pill);
  padding:4px; margin-bottom:var(--space-4); }
.tab{
  appearance:none; cursor:pointer; flex:1; border:none; background:none;
  border-radius:var(--r-pill); padding:9px 8px; font-weight:700; font-size:.84rem;
  color:var(--muted); min-height:44px; transition:background .15s, color .15s;
}
.tab.is-active{ background:var(--surface); color:var(--brand-ink); box-shadow:var(--shadow); }

.lb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.lb-row{
  display:flex; align-items:center; gap:var(--space-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--space-3) var(--space-4); box-shadow:var(--shadow);
}
.lb-row.is-me{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(0,133,199,.15), var(--shadow); }
.lb-rank{
  flex:0 0 auto; width:34px; text-align:center; font-weight:800; font-size:1.05rem;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.lb-rank--medal{ font-size:1.4rem; }
.lb-name{ flex:1 1 auto; font-weight:700; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-name .you-tag{ font-size:.72rem; font-weight:700; color:var(--brand-ink);
  background:#e4f2fa; border-radius:var(--r-pill); padding:2px 7px; margin-left:6px; }
.lb-value{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:800;
  color:var(--gold-ink); font-size:1.05rem; }
.lb-value small{ color:var(--muted); font-weight:600; font-size:.72rem; margin-left:3px; }

/* ====================================================================
   REWARDS
   ==================================================================== */
.reward-balance{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#fff,#f3f7fb);
  border:1px solid var(--line); border-radius:var(--r);
  padding:var(--space-4); box-shadow:var(--shadow); margin-bottom:var(--space-4);
}
.reward-balance__label{ font-weight:700; color:var(--muted); }
.reward-balance__value{ font-size:1.7rem; }
.rewards-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-3); }
@media (min-width:480px){ .rewards-grid{ grid-template-columns:1fr 1fr; } }
.reward-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--space-4); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:var(--space-2);
}
.reward-card__emoji{ font-size:1.9rem; line-height:1; }
.reward-card__label{ font-weight:800; font-size:1.02rem; letter-spacing:-.01em; }
.reward-card__blurb{ color:var(--muted); font-size:.88rem; line-height:1.4; flex:1 1 auto; }
.reward-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  margin-top:var(--space-2); }
.reward-card__cost{ font-size:1.15rem; }
.reward-card__cost small{ color:var(--muted); font-weight:600; font-size:.72rem; }
.reward-card .btn{ padding:10px 16px; min-height:42px; }
.reward-card.is-locked{ opacity:.72; }

/* ====================================================================
   BOTTOM TAB BAR
   ==================================================================== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar__btn{
  appearance:none; cursor:pointer; flex:1; border:none; background:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 4px; min-height:56px; color:var(--muted);
  transition:color .15s;
}
.tabbar__icon{ display:inline-flex; }
.tabbar__icon svg{ width:23px; height:23px; }
.tabbar__label{ font-size:.6rem; font-weight:700; letter-spacing:.003em; white-space:nowrap; }
.tabbar__btn.is-active{ color:var(--brand); }
.tabbar__btn.is-active .tabbar__icon{ transform:translateY(-1px); }

/* ====================================================================
   QUIZ
   ==================================================================== */
.quiz-sub{ color:var(--muted); font-size:.9rem; line-height:1.4; margin:0 0 var(--space-4); }
.quiz-summary{
  display:flex; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--space-3) var(--space-4); box-shadow:var(--shadow);
}
.quiz-summary__item{ font-size:.9rem; color:var(--muted); font-weight:600; }
.quiz-summary__num{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--ink); }
.quiz-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.quiz-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--space-4); box-shadow:var(--shadow);
  transition:opacity .25s ease, border-color .2s ease;
}
.quiz-card[data-status=correct]{ border-color:rgba(0,159,61,.45); }
.quiz-card[data-status=wrong]{ opacity:.62; background:#fbfcfe; }
.quiz-card[data-status=wrong] .quiz-card__q{ color:var(--muted); }
.quiz-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); }
.quiz-tag{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:var(--r-pill); }
.quiz-tag--manifesto,.quiz-tag--principles{ background:#e3f0f9; color:var(--brand-ink); }
.quiz-tag--olympics{ background:#eaf1ec; color:#2f5a3a; }
.quiz-card__pts{ white-space:nowrap; }
.quiz-card__pts-label{ color:var(--muted); font-size:.76rem; font-weight:600; }
.quiz-card__q{ font-size:1rem; font-weight:700; line-height:1.35; color:var(--ink); margin:0 0 var(--space-3); letter-spacing:-.01em; }
.quiz-options{ display:grid; gap:var(--space-2); }
@media (min-width:480px){ .quiz-options{ grid-template-columns:1fr 1fr; } }
.quiz-opt{
  display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:48px; text-align:left;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:11px 14px; font:inherit; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .07s ease;
}
.quiz-opt:hover:not(:disabled){ border-color:var(--brand); background:#f3f9fd; }
.quiz-opt:active:not(:disabled){ transform:scale(.99); }
.quiz-opt:disabled{ cursor:default; }
.quiz-opt__text{ flex:1 1 auto; }
.quiz-opt.is-correct{ border-color:var(--oly-green); background:#e8f7ee; color:#0a5a2a; }
.quiz-opt.is-correct::after{ content:'✓'; margin-left:auto; font-weight:800; color:var(--oly-green); }
.quiz-opt.is-wrong{ border-color:var(--oly-red); background:#fdeaec; color:#9a1020; }
.quiz-opt.is-wrong::after{ content:'✗'; margin-left:auto; font-weight:800; color:var(--oly-red); }
.quiz-card__result{ display:flex; flex-direction:column; gap:3px; margin-top:var(--space-3); padding-top:var(--space-2); border-top:1px dashed var(--line); }
.quiz-card__verdict{ font-weight:800; font-size:.9rem; }
.quiz-card[data-status=correct] .quiz-card__verdict{ color:#0a6b2c; }
.quiz-card[data-status=wrong] .quiz-card__verdict{ color:var(--oly-red); }
.quiz-card__why{ color:var(--muted); font-size:.86rem; line-height:1.45; }
.quiz-loading{ color:var(--muted); font-size:.9rem; }

/* ====================================================================
   TOASTS
   ==================================================================== */
.toast-region{
  position:fixed; left:0; right:0; z-index:60;
  bottom:calc(64px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  padding:0 var(--space-4); pointer-events:none;
}
.toast{
  pointer-events:auto; max-width:520px; width:100%;
  background:var(--oly-black); color:#fff; border-radius:var(--r);
  padding:13px 16px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:var(--space-3); font-weight:600;
  animation:toastIn .25s cubic-bezier(.2,.9,.3,1.1) both;
}
.toast.is-out{ animation:toastOut .25s ease forwards; }
.toast--ok{ background:linear-gradient(135deg,#0a6b2c,#009F3D); }
.toast--err{ background:linear-gradient(135deg,#b2001d,#DF0024); }
.toast__emoji{ font-size:1.2rem; flex:0 0 auto; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(16px) scale(.96);} to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px); } }

/* ====================================================================
   CELEBRATION (confetti / medal pop)
   ==================================================================== */
.celebrate{
  position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden;
}
.confetti{
  position:absolute; top:-14px; width:9px; height:14px; border-radius:2px;
  will-change:transform, opacity;
  animation:confettiFall var(--dur,1.6s) cubic-bezier(.2,.6,.4,1) forwards;
  animation-delay:var(--delay,0s);
}
@keyframes confettiFall{
  0%{ opacity:0; transform:translateY(0) rotate(0); }
  10%{ opacity:1; }
  100%{ opacity:0; transform:translateY(110vh) rotate(var(--spin,540deg)); }
}
.medal-pop{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  font-size:5rem; filter:drop-shadow(0 8px 24px rgba(11,18,32,.3));
  animation:medalPop 1.1s cubic-bezier(.2,.9,.3,1.3) forwards;
}
@keyframes medalPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-20deg); }
  30%{ opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(6deg); }
  60%{ transform:translate(-50%,-50%) scale(1) rotate(0); }
  100%{ opacity:0; transform:translate(-50%,-58%) scale(1.05); }
}

/* ====================================================================
   SPLASH
   ==================================================================== */
.splash{
  position:fixed; inset:0; z-index:70; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .35s ease;
}
.splash.is-hidden{ opacity:0; pointer-events:none; }
.splash .rings-motif{ animation:splashPulse 1.4s ease-in-out infinite; }
@keyframes splashPulse{ 0%,100%{ opacity:.5; transform:scale(.96);} 50%{ opacity:1; transform:scale(1);} }

/* ====================================================================
   MOTION-REDUCE
   ==================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .splash .rings-motif{ animation:none; opacity:1; }
}