/* Awin. One column (max 520px). Every colour comes from the tokens below, so the
   theme is changed in one place. */
:root {
  --bg: #0E1116;
  --surface: #171B22;
  --surface-2: #1F242D;
  --tint-1: rgba(255, 255, 255, .035);
  --tint-2: rgba(255, 255, 255, .06);
  --tint-3: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .08);
  --ink: #F2F4F7;
  --ink-soft: #A0A8B6;
  --ink-faint: #6B7280;

  --hero-bg: #1F242D;
  --hero-ink: #FFFFFF;
  --hero-soft: rgba(255, 255, 255, .72);
  --hero-tint: rgba(255, 255, 255, .06);
  --hero-line: rgba(255, 255, 255, .1);

  --accent: #F5B700;       /* brand colour: chips, step numbers, progress */
  --accent-ink: #1A1300;   /* text on --accent */
  --accent-soft: rgba(245, 183, 0, .14);
  --accent-text: #F5B700;  /* accent-coloured text on surfaces */
  --score: #F5B700;        /* points on cards */
  --hero-score: #F5B700;   /* big numbers on the hero */
  --cta-bg: #F5B700;
  --cta-ink: #1A1300;
  --cta-depth: #B38600;    /* the "3D" edge under buttons */
  --depth: rgba(0, 0, 0, .5);
  --accent-depth: #B38600;

  --appbar-bg: #0E1116;
  --appbar-ink: #F2F4F7;
  --appbar-line: rgba(255, 255, 255, .08);

  --ok: #22C55E;
  --ok-ink: #04210F;
  --ok-soft: rgba(34, 197, 94, .14);
  --bad: #EF4444;
  --bad-soft: rgba(239, 68, 68, .14);
  --bad-text: #FCA5A5;
  --wa: #1FAF5B;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);

  --f-display: "Baloo 2", "Mukta", system-ui, sans-serif;
  --f-body: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* timer and links only */
  --f-num: "Baloo 2", "Mukta", system-ui, sans-serif;
  --f-label: var(--f-body);
  --track: .06em; /* label tracking; off for scripts where it breaks up letters */
  --case: uppercase;
  color-scheme: dark;
}
/* Light theme: white cards, indigo hero, yellow call to action. Follows the phone's
   setting unless the player picked one in the menu (data-theme on <html>). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F3F4F8; --surface: #FFFFFF; --surface-2: #F3F4F8;
    --tint-1: rgba(17, 20, 45, .03); --tint-2: rgba(17, 20, 45, .05); --tint-3: rgba(17, 20, 45, .12); --line: #E3E5EE;
    --ink: #12142B; --ink-soft: #5A5F78; --ink-faint: #8A8FA6;
    --hero-bg: #4338CA; --hero-ink: #FFFFFF; --hero-soft: rgba(255, 255, 255, .82); --hero-tint: rgba(255, 255, 255, .13); --hero-line: transparent;
    --accent: #4338CA; --accent-ink: #FFFFFF; --accent-soft: rgba(67, 56, 202, .1); --accent-text: #4338CA;
    --score: #C2410C; --hero-score: #FFC83D; --cta-bg: #FFC83D; --cta-ink: #2A1700; --cta-depth: #D49A0F; --depth: #D3D6E2; --accent-depth: #2F27A8;
    --appbar-bg: #FFFFFF; --appbar-ink: #12142B; --appbar-line: #E3E5EE;
    --ok: #16A34A; --ok-ink: #FFFFFF; --ok-soft: rgba(22, 163, 74, .1); --bad: #DC2626; --bad-soft: rgba(220, 38, 38, .08); --bad-text: #DC2626;
    --shadow: 0 1px 2px rgba(17, 20, 45, .05), 0 10px 24px -18px rgba(17, 20, 45, .25);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F3F4F8; --surface: #FFFFFF; --surface-2: #F3F4F8;
  --tint-1: rgba(17, 20, 45, .03); --tint-2: rgba(17, 20, 45, .05); --tint-3: rgba(17, 20, 45, .12); --line: #E3E5EE;
  --ink: #12142B; --ink-soft: #5A5F78; --ink-faint: #8A8FA6;
  --hero-bg: #4338CA; --hero-ink: #FFFFFF; --hero-soft: rgba(255, 255, 255, .82); --hero-tint: rgba(255, 255, 255, .13); --hero-line: transparent;
  --accent: #4338CA; --accent-ink: #FFFFFF; --accent-soft: rgba(67, 56, 202, .1); --accent-text: #4338CA;
  --score: #C2410C; --hero-score: #FFC83D; --cta-bg: #FFC83D; --cta-ink: #2A1700; --cta-depth: #D49A0F; --depth: #D3D6E2; --accent-depth: #2F27A8;
  --appbar-bg: #FFFFFF; --appbar-ink: #12142B; --appbar-line: #E3E5EE;
  --ok: #16A34A; --ok-ink: #FFFFFF; --ok-soft: rgba(22, 163, 74, .1); --bad: #DC2626; --bad-soft: rgba(220, 38, 38, .08); --bad-text: #DC2626;
  --shadow: 0 1px 2px rgba(17, 20, 45, .05), 0 10px 24px -18px rgba(17, 20, 45, .25);
  color-scheme: light;
}

html[lang="hi"], html[lang="bn"], html[lang="ar"], html[lang="ur"] { --track: 0; --case: none; }
html[lang="bn"] {
  --f-body: "Hind Siliguri", "Mukta", system-ui, sans-serif;
  --f-display: "Baloo Da 2", "Hind Siliguri", sans-serif;
}
html[lang="ar"] {
  --f-body: "Noto Naskh Arabic", "Mukta", system-ui, sans-serif;
  --f-display: "Baloo Bhaijaan 2", "Noto Naskh Arabic", sans-serif;
}
html[lang="ur"] {
  --f-body: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --f-display: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 17px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bsheet:focus { outline: none; }
h1, h2, p, ol, ul, dl, dd { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}

/* ---------- app bar and menu ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--appbar-bg); color: var(--appbar-ink);
  border-bottom: 1px solid var(--appbar-line);
  padding-top: env(safe-area-inset-top, 0px);
}
.appbar-in {
  max-width: 520px; height: 62px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--appbar-ink); text-decoration: none; font: 800 26px/1 var(--f-display); letter-spacing: -.02em; }
.brand span { padding-top: 3px; }
.brand span::after { content: "."; color: var(--accent); }
html:is([lang="ar"], [lang="ur"]) .brand { font-family: "Baloo 2", "Mukta", sans-serif; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.appbar-tools { display: flex; align-items: center; gap: 6px; }
/* Winnings waiting: a strip under the app bar */
.claim-strip {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 16px;
  border: 0; border-top: 1px solid var(--appbar-line); background: var(--accent-soft); color: var(--ink);
  font: 600 15px/1.3 var(--f-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: strip-in .3s ease-out;
}
.claim-strip b { flex: none; padding: 6px 14px; border-radius: 999px; background: var(--cta-bg); color: var(--cta-ink); font: 800 14px/1 var(--f-body); box-shadow: 0 2px 0 var(--cta-depth); }
.claim-strip:active b { transform: translateY(2px); box-shadow: none; }
@keyframes strip-in { from { opacity: 0; transform: translateY(-8px); } }

/* Wallet balance in the app bar */
.pill-wallet {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px;
  border: 1px solid var(--accent-soft); border-radius: 999px; background: var(--accent-soft); color: var(--score);
  font: 800 16px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill-wallet::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5V7a2 2 0 0 1 2-2h10v2.5'/%3E%3Crect x='4' y='7.5' width='16' height='11.5' rx='2.5'/%3E%3Cpath d='M15.5 13.2h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5V7a2 2 0 0 1 2-2h10v2.5'/%3E%3Crect x='4' y='7.5' width='16' height='11.5' rx='2.5'/%3E%3Cpath d='M15.5 13.2h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A dot on the wallet icon while winnings wait to be claimed (inside the chip: its edge is clipped) */
.pill-wallet.waiting::after { content: ""; position: absolute; top: 6px; inset-inline-start: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--appbar-bg); }
.pill-wallet.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
.menu-btn, .menu-close {
  width: 42px; height: 42px; border: 1px solid var(--appbar-line); border-radius: 12px; background: transparent; color: var(--appbar-ink);
  display: grid; place-items: center;
}
.menu-close { border: 0; color: var(--ink); }
.menu-btn:hover, .menu-btn[aria-expanded="true"], .menu-close:hover { background: var(--tint-2); }
.menu-btn svg, .menu-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .5); animation: fade .2s ease-out; }
.menu {
  /* Full screen, opening down from the app bar as if it grew */
  position: fixed; inset: 0; z-index: 31; overflow-y: auto;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--appbar-bg); color: var(--appbar-ink);
  display: flex; flex-direction: column; gap: 4px;
  animation: menu-down .32s cubic-bezier(.2, .8, .3, 1);
}
.menu > * { width: 100%; max-width: 488px; margin-inline: auto; }
.menu.closing { animation: menu-up .22s ease-in forwards; }
@keyframes menu-down { from { clip-path: inset(0 0 calc(100% - 62px - env(safe-area-inset-top, 0px)) 0); } to { clip-path: inset(0); } }
@keyframes menu-up { from { clip-path: inset(0); } to { clip-path: inset(0 0 calc(100% - 62px - env(safe-area-inset-top, 0px)) 0); } }
.menu > :not(.menu-head) { animation: rise .3s ease-out both; }
.menu > :nth-child(3) { animation-delay: .03s; } .menu > :nth-child(4) { animation-delay: .06s; } .menu > :nth-child(5) { animation-delay: .09s; }
.menu > :nth-child(6) { animation-delay: .12s; } .menu > :nth-child(7) { animation-delay: .15s; } .menu > :nth-child(n + 8) { animation-delay: .18s; }
@keyframes fade { from { opacity: 0; } }
body.menu-open { overflow: hidden; }
.menu-head { display: flex; align-items: center; justify-content: space-between; flex: none; height: 62px; margin-bottom: 10px; border-bottom: 1px solid var(--appbar-line); }
.menu-head .brand { pointer-events: none; }
.menu-head .menu-close { margin-inline-end: -8px; }
.menu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 12px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  font: 600 17px/1.2 var(--f-body); text-align: start; text-decoration: none; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--tint-2); }
.menu-item > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-item > span { flex: 1; }
.menu-item.small { min-height: 42px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.menu hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--line); }
/* Language: the current one and an arrow, like a settings row */
.menu-val { color: var(--ink-soft); font: 600 16px/1.3 "Mukta", "Noto Naskh Arabic", "Hind Siliguri", system-ui, sans-serif; }
.menu-item > svg.chev { width: 18px; height: 18px; margin-inline-start: -6px; stroke-width: 2.2; }
[dir="rtl"] .menu-item > svg.chev { transform: scaleX(-1); }
.switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--tint-3); transition: background .15s ease; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
[aria-pressed="true"] > .switch { background: var(--ok); }
[aria-pressed="true"] > .switch::after { transform: translateX(18px); }
[dir="rtl"] [aria-pressed="true"] > .switch::after { transform: translateX(-18px); }

/* ---------- touch feedback ---------- */
/* Everything that can be tapped presses in, and app.js adds a ripple from the finger. */
.tap, .btn, .opt, .quiz-earn, .lang-opt, .claim-strip, .menu-item, .menu-btn, .menu-close, .link-btn, .rules summary, .invite-head {
  position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.tap, .menu-item, .menu-btn, .menu-close, .link-btn, .rules summary, .invite-head { transition: transform .1s ease, background-color .15s ease; }
:is(.tap, .menu-btn, .menu-close, .link-btn):active { transform: scale(.94); }
:is(.menu-item, .rules summary, .invite-head):active { transform: scale(.98); background: var(--tint-2); }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: ripple .55s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- surfaces ---------- */
.card {
  position: relative;
  margin-top: 16px; padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.card h2 { font: 800 22px/1.25 var(--f-display); letter-spacing: -.005em; }
.card > h2 { margin-bottom: 12px; }
.note { font: 500 14px/1.4 var(--f-label); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sub { margin: -4px 0 14px; color: var(--ink-soft); }
.empty { padding: 14px; margin-bottom: 14px; border-radius: 14px; background: var(--tint-1); color: var(--ink-soft); text-align: center; }

.hero {
  position: relative; overflow: hidden;
  padding: 22px 20px 20px;
  background: var(--hero-bg); color: var(--hero-ink);
  border: 1px solid var(--hero-line); border-radius: 24px;
  box-shadow: var(--shadow);
}
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--hero-tint); color: var(--hero-ink);
  font: 700 13px/1 var(--f-label); letter-spacing: var(--track); text-transform: var(--case); white-space: nowrap;
}
.chip.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.display { margin-top: 18px; font: 800 46px/1.05 var(--f-display); letter-spacing: -.02em; text-wrap: balance; color: var(--hero-ink); }
.lede { margin-top: 8px; color: var(--hero-soft); font-size: 18px; }

.prize {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 14px 16px;
  border-radius: 18px; background: var(--hero-tint); border: 1px solid var(--hero-line);
}
.prize > div { display: grid; gap: 2px; min-width: 0; }
.prize-label { font: 700 12px/1.3 var(--f-label); letter-spacing: var(--track); text-transform: var(--case); color: var(--hero-soft); }
.prize-amt { font: 800 44px/1.05 var(--f-num); color: var(--hero-score); font-variant-numeric: tabular-nums; }
.prize-txt { color: var(--hero-soft); font-weight: 500; line-height: 1.35; }
.prize-gift { width: 66px; height: 66px; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.no-prize { margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: var(--hero-tint); color: var(--hero-soft); }
.alert-line { margin-top: 12px; color: var(--bad-text); font-weight: 600; }

/* ---------- buttons ---------- */
/* Buttons and answer options sit on a solid edge and press down into it. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 16px;
  font: 700 18px/1.2 var(--f-body); text-decoration: none; text-align: center;
  box-shadow: 0 4px 0 var(--depth);
  transition: transform .08s ease, box-shadow .08s ease, opacity .12s ease, filter .15s ease;
}
.btn:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--depth); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.btn.big { min-height: 60px; font-size: 20px; margin-top: 18px; }
.cta { background: var(--cta-bg); color: var(--cta-ink); box-shadow: 0 4px 0 var(--cta-depth); }
.cta:active:not([disabled]) { box-shadow: 0 1px 0 var(--cta-depth); }
.cta:hover { filter: brightness(1.05); }
.secondary { background: var(--tint-2); border-color: var(--line); color: var(--ink); }
:is(.hero, .wallet-top) .secondary { background: var(--hero-tint); border-color: var(--hero-line); color: var(--hero-ink); }
.wa { background: var(--wa); color: #fff; box-shadow: 0 4px 0 #137A3F; }
.wa:active:not([disabled]) { box-shadow: 0 1px 0 #137A3F; }
.btn.small { width: auto; min-height: 40px; padding: 0 16px; font-size: 16px; border-radius: 12px; box-shadow: 0 3px 0 var(--depth); }
.btn.small.cta { box-shadow: 0 3px 0 var(--cta-depth); }
.btn.small.wa { box-shadow: 0 3px 0 #137A3F; }
.btn.small:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--depth); }
.btn + .btn { margin-top: 12px; }
[dir="rtl"] #start-btn svg { transform: scaleX(-1); }

/* Small text button, e.g. "See which were right" */
.link-btn {
  display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; margin-inline-start: -10px; padding: 8px 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--accent-text);
  font: 700 15px/1.3 var(--f-body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.hero .link-btn { color: var(--hero-score); }
.link-btn:hover { background: var(--tint-2); }
.hero .link-btn:hover { background: var(--hero-tint); }
.link-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .link-btn svg { transform: scaleX(-1); }

/* ---------- how it works, rules ---------- */
.steps { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; counter-increment: step; }
.steps li::before {
  content: counter(step);
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; font: 800 16px/1 var(--f-num);
}
.rules summary { margin: -8px; padding: 8px; border-radius: 12px; cursor: pointer; font: 800 20px/1.3 var(--f-display); list-style-position: inside; }
.rules ul { margin-top: 12px; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--ink-soft); font-size: 16px; }
.rules li::marker { color: var(--accent-text); }

/* ---------- winners and friends ---------- */
.winners { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 14px; }
.winners li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 16px; background: var(--tint-1);
  animation: rise .3s ease-out both;
}
.winners li:nth-child(2) { animation-delay: .04s; }
.winners li:nth-child(3) { animation-delay: .08s; }
.winners li:nth-child(4) { animation-delay: .12s; }
.winners li:nth-child(5) { animation-delay: .16s; }
.av {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); font: 800 18px/1 var(--f-display);
}
.who { min-width: 0; }
.who b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { display: block; color: var(--ink-faint); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc { text-align: end; font: 800 18px/1.2 var(--f-num); font-variant-numeric: tabular-nums; color: var(--score); white-space: nowrap; }
.friends .sc { font: 700 14px/1.3 var(--f-body); color: var(--ink-faint); white-space: normal; max-width: 12em; }
.friends li.joined .sc { color: var(--ok); }
.friends li.joined .av { background: var(--ok-soft); color: var(--ok); }
.friends-h { margin: 20px 0 10px; font: 800 18px/1.3 var(--f-display); }
/* Invite funnel: sent → opened → played → verified */
.funnel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 8px; }
.funnel > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--tint-1); }
.funnel .f-ic { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-2); color: var(--ink-soft); }
.funnel .f-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.funnel b { font: 800 22px/1.1 var(--f-num); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel b + span { color: var(--ink-soft); font: 600 13px/1.25 var(--f-label); }
.funnel .f-ok .f-ic { background: var(--ok-soft); color: var(--ok); }
.funnel .f-ok b { color: var(--ok); }
/* What the friends earned the player, across the top */
.funnel .f-earn { grid-column: 1 / -1; padding: 12px 14px; background: var(--ok-soft); }
.funnel .f-earn .f-ic { background: var(--ok); color: var(--ok-ink); }
.funnel .f-earn b { color: var(--ok); font-size: 26px; }
.funnel .f-earn b + span { color: var(--ink); }
.funnel-note { color: var(--ink-faint); font-size: 13px; }
.friends li.verified .sc { font-weight: 800; }

/* ---------- quiz ---------- */
.quiz { margin-top: 0; }
.quiz-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.qcount { font: 700 14px/1 var(--f-label); color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timer { min-width: 64px; padding: 6px 10px; border-radius: 10px; background: var(--tint-2); text-align: center; font: 600 20px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--bad); background: var(--bad-soft); animation: beat 1s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.12); } }
.timebar { height: 6px; margin: 14px 0 18px; border-radius: 3px; background: var(--tint-2); overflow: hidden; }
.timebar span { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: left center; }
.timebar span.low { background: var(--bad); }
[dir="rtl"] .timebar span { transform-origin: right center; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--tint-3); }
.hero .dots i { background: var(--hero-tint); }
.dots i.now { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dots i.done { background: var(--accent); }
.hero .dots i.ok { background: var(--ok); }
.hero .dots i.bad { background: var(--bad); }

.question { margin: 12px 0 18px; font: 700 25px/1.35 var(--f-display); text-wrap: pretty; outline: none; }
.options { list-style: none; padding: 0; display: grid; gap: 12px; }
.opt {
  width: 100%; min-height: 60px; padding: 10px 14px;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
  box-shadow: 0 3px 0 var(--depth);
  text-align: start; font-size: 18px; font-weight: 600; line-height: 1.3;
  transition: border-color .15s ease, background-color .15s ease, transform .08s ease, box-shadow .08s ease, opacity .2s ease;
}
.opt:hover:not([disabled]) { border-color: var(--accent); }
.opt:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--depth); }
.opt[disabled] { cursor: default; }
.bubble {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: var(--tint-2); color: var(--ink-soft);
  display: grid; place-items: center; font: 800 16px/1 var(--f-num);
}
.opt.picked {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 0 var(--accent-depth);
  animation: pick .34s cubic-bezier(.3, 1.6, .5, 1);
}
.opt.picked .bubble { background: var(--accent); color: var(--accent-ink); animation: bubble .34s cubic-bezier(.3, 1.8, .5, 1); }
.opt.dim { opacity: .4; transform: scale(.98); }
@keyframes pick { 0% { transform: scale(.95); } 60% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes bubble { 0% { transform: scale(.6) rotate(-12deg); } 100% { transform: none; } }
/* Answer being saved, then locked in */
.opt.wait .bubble { position: relative; color: transparent; }
.opt.wait .bubble::after { content: ""; position: absolute; inset: 9px; border: 3px solid var(--accent-ink); border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.opt.locked .bubble { animation: bubble .3s cubic-bezier(.3, 1.8, .5, 1); }
/* Each question slides in */
.slide-in { animation: slide-q .26s cubic-bezier(.2, .8, .3, 1); }
[dir="rtl"] .slide-in { animation-name: slide-q-rtl; }
@keyframes slide-q { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-q-rtl { from { opacity: 0; transform: translateX(-28px); } }
.alert { margin-top: 14px; padding: 14px; display: grid; gap: 12px; border: 1px solid var(--bad); border-radius: 16px; background: var(--bad-soft); }
.alert-actions { display: grid; gap: 8px; }
.alert-actions .btn + .btn { margin-top: 0; }

/* What each right answer earns, above the question; opens the wallet */
.quiz-earn {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px; padding: 10px 12px 10px 14px;
  border-radius: 16px; background: var(--hero-bg); color: var(--hero-ink); border: 1px solid var(--hero-line);
  box-shadow: 0 4px 0 var(--depth); text-align: start; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.quiz-earn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--depth); }
.quiz-earn > svg:first-child { width: 38px; height: 38px; flex: none; animation: bob 3s ease-in-out infinite; }
.qe-text { flex: 1; display: grid; min-width: 0; }
.qe-text b { font: 800 18px/1.25 var(--f-display); color: var(--hero-ink); }
.qe-text b em { font: 800 26px/1 var(--f-num); font-style: normal; color: var(--hero-score); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.qe-text span { color: var(--hero-soft); font-size: 14px; }
.qe-arrow { width: 28px; height: 28px; flex: none; padding: 4px; border-radius: 50%; background: var(--hero-tint); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .qe-arrow { transform: scaleX(-1); }
.see-winners { margin-top: 14px; }
.see-winners svg, .menu-item svg { fill: none; }
.see-winners svg { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- result ---------- */
.won { margin-top: 16px; font: 800 34px/1.3 var(--f-display); color: var(--hero-ink); text-wrap: balance; outline: none; animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
/* The amount as a gold money ticket, with a shine passing over it */
.won b {
  position: relative; overflow: hidden; display: inline-block; unicode-bidi: isolate; vertical-align: middle;
  margin: 2px 4px 8px; padding: 6px 16px 4px; border-radius: 16px;
  background: var(--cta-bg); color: var(--cta-ink); box-shadow: 0 5px 0 var(--cta-depth), 0 12px 28px -10px rgba(0, 0, 0, .45);
  outline: 2px dashed rgba(0, 0, 0, .18); outline-offset: -7px;
  font: 800 1.5em/1.1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap;
  transform: rotate(-2deg);
}
.won b::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: shine 2.8s ease-in-out 1s infinite;
}
.won b.landed { animation: landed .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes landed { 0% { transform: rotate(-2deg) scale(1.28); } 100% { transform: rotate(-2deg) scale(1); } }
@keyframes shine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
/* Gift box above the amount, with sparkles */
.won-gift { position: relative; width: 84px; height: 84px; margin: 14px auto -4px; }
.won-gift svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3)); animation: bob 3s ease-in-out .7s infinite; }
.won-gift.open svg { animation: gift-in .7s cubic-bezier(.3, 1.6, .5, 1), bob 3s ease-in-out .7s infinite; }
@keyframes gift-in { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.15) rotate(8deg); opacity: 1; } 100% { transform: none; } }
.spark { position: absolute; width: 14px; height: 14px; background: #FFD84D; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.6s ease-in-out infinite; }
.spark.s1 { top: 4px; left: -22px; }
.spark.s2 { top: -10px; right: -16px; width: 18px; height: 18px; background: #FF8FB1; animation-delay: .3s; }
.spark.s3 { bottom: 10px; right: -28px; width: 11px; height: 11px; animation-delay: .7s; }
.spark.s4 { bottom: -2px; left: -30px; width: 10px; height: 10px; background: #5EE29A; animation-delay: 1s; }
.spark.s5 { top: 30px; right: -42px; width: 8px; height: 8px; background: #FFFFFF; animation-delay: .5s; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.result:has(.won-gift:not([hidden])) .won, .result:has(.won-gift:not([hidden])) .right-line { text-align: center; justify-content: center; }
.result:has(.won-gift:not([hidden])) .link-btn { display: flex; margin: 6px auto 0; width: max-content; }
.won.plain { font-size: 30px; }
@keyframes bump { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.right-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--hero-soft); font-weight: 600; }
.right-line .dots { justify-content: flex-start; }
.right-line .dots i { width: 14px; height: 14px; }
.r-note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--hero-tint); color: var(--hero-soft); }
.r-note.err { color: var(--bad-text); }
.r-actions { margin-top: 16px; }
.r-actions .btn.big { margin-top: 0; }
/* "Continue" stays locked until the winnings are claimed */
.btn.locked { background: var(--tint-2); color: var(--ink-faint); box-shadow: none; opacity: 1; cursor: not-allowed; }
.hero .btn.locked { background: var(--hero-tint); color: var(--hero-soft); }
.btn.locked:active { transform: none; }
.locked-hint { margin-top: 10px; text-align: center; color: var(--hero-score); font-weight: 700; }
.pop-in { animation: pop .3s ease-out; }
.btn.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* The invite button keeps asking for attention while winnings wait to be claimed */
.claim:not(.joined) .btn.wa { animation: nudge 3s ease-in-out infinite, ring 3s ease-out infinite; }
.claim:not(.joined) .btn.wa:active { animation: none; }
.claim .btn.wa.attn { animation: attn .5s cubic-bezier(.3, 1.6, .5, 1) 2, ring 1s ease-out 2; }
#start-btn.attn { animation: attn .5s cubic-bezier(.3, 1.6, .5, 1) 3; }
@keyframes nudge { 0%, 64%, 84%, 100% { transform: none; } 68% { transform: scale(1.03) rotate(-1.5deg); } 72% { transform: scale(1.03) rotate(1.5deg); } 76% { transform: scale(1.03) rotate(-1deg); } 80% { transform: scale(1.02); } }
@keyframes ring { 0%, 55% { outline: 0 solid rgba(31, 175, 91, .7); outline-offset: 0; } 100% { outline: 12px solid rgba(31, 175, 91, 0); outline-offset: 3px; } }
@keyframes attn { 0%, 100% { transform: none; } 35% { transform: scale(1.08); } 70% { transform: scale(.97); } }
.wd-locked { margin-top: 16px; }
.btn.big.wd-open { margin-top: 14px; }
.to-account { margin-top: 14px; }
.btn svg.line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .btn svg.next { transform: scaleX(-1); }
#home-claim .claim { margin: 0; padding: 0; background: none; border: 0; }
.confetti { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

/* Sharing to add winnings to the wallet: 3 segments fill up, one per share */
.claim { margin-top: 18px; padding: 16px; border-radius: 18px; background: var(--tint-1); border: 1px solid var(--line); }
:is(.hero, .wallet-top) .claim { background: var(--hero-tint); border-color: var(--hero-line); }
.claim-title { font: 700 17px/1.4 var(--f-body); }
.segs { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 6px; margin: 14px 0 8px; }
.segs i { height: 10px; border-radius: 5px; background: var(--tint-3); }
:is(.hero, .wallet-top) .segs i { background: var(--hero-tint); }
.segs i.on, :is(.hero, .wallet-top) .segs i.on { background: var(--ok); }
.segs i.new { animation: seg .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes seg { from { transform: scaleX(.2); } }
.claim-count { margin-bottom: 14px; color: var(--ink-soft); font: 600 14px/1.3 var(--f-label); font-variant-numeric: tabular-nums; }
:is(.hero, .wallet-top) .claim-count { color: var(--hero-soft); }
.claim.loading { min-height: 150px; background: linear-gradient(90deg, var(--hero-tint), transparent, var(--hero-tint)) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.claimed { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: var(--ok-soft); font-weight: 700; }
:is(.hero, .wallet-top) .claimed { background: var(--hero-tint); }
.claimed .tick { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: var(--ok-ink); font-size: 18px; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
.claim.joined { margin-top: 12px; }

/* ---------- wallet ---------- */
.wallet-top { padding: 18px; border-radius: 20px; background: var(--hero-bg); color: var(--hero-ink); border: 1px solid var(--hero-line); }
.wallet-top .label, .dash .label { display: block; font: 700 13px/1.3 var(--f-label); letter-spacing: var(--track); text-transform: var(--case); color: var(--hero-soft); }
.wallet-amt { display: block; margin-top: 2px; font: 800 48px/1.05 var(--f-num); color: var(--hero-score); font-variant-numeric: tabular-nums; }
.wallet-top .claim { margin-top: 14px; }
.wallet-empty { margin-top: 12px; color: var(--hero-soft); }
.bsheet-body .card { margin-top: 14px; padding: 16px; box-shadow: none; }

.tasks { list-style: none; padding: 0; display: grid; gap: 10px; }
/* Ways to earn: a heading and the task cards, with no card around them so each task gets
   the full width */
.earn-more { margin-top: 28px; }
.earn-more > h2 { margin: 0 4px 12px; font: 800 22px/1.25 var(--f-display); letter-spacing: -.005em; }
.earn-more .task { padding: 14px; background: var(--surface); box-shadow: var(--shadow); }
.bsheet .earn-more { margin-top: 22px; }
/* Account page: each way to earn is a card of its own, like the cards around it */
.tasks-solo .tasks { gap: 16px; margin-top: 16px; }
.tasks-solo .task { padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.bsheet .earn-more .task { background: var(--tint-1); box-shadow: none; }
.task {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
  padding: 12px; border-radius: 16px; background: var(--tint-1); border: 1px solid var(--line);
}
.task-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.task-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.task-t { min-width: 0; }
.task-t b { display: block; font-weight: 700; line-height: 1.3; }
.task-t span { display: block; margin-top: 1px; color: var(--ink-soft); font-size: 14px; line-height: 1.35; }
.soon { padding: 2px 9px; border-radius: 999px; background: var(--tint-2); color: var(--ink-soft); font: 700 13px/1.4 var(--f-label); white-space: nowrap; }
.task.done .task-ic { background: var(--ok-soft); color: var(--ok); }
.task.stacked { grid-template-columns: 42px minmax(0, 1fr); align-items: start; }
.task.stacked .task-ic { margin-top: 2px; }
.task.stacked.short { align-items: center; }
.task.stacked.short .task-ic { margin-top: 0; }
.task.stacked > :last-child { grid-column: 2; justify-self: start; margin-top: 4px; }
.task.stacked > .btn.small { grid-column: 1 / -1; justify-self: stretch; width: 100%; min-height: 44px; }
.task.done .task-t b { color: var(--ink-soft); }
.done-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 800; white-space: nowrap; }
/* Steps of a task, in its bottom sheet */
.tsteps li { align-items: start; }
.tsteps li > div { display: grid; gap: 10px; min-width: 0; padding-top: 6px; }
.tsteps .btn.small { justify-self: start; }
.tsteps .inline-form .btn.small { justify-self: auto; }
.tsteps li.done::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
/* The Status screenshot: a button that opens the phone's pictures */
.file-btn { position: relative; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-btn.locked input { pointer-events: none; }
.file-btn.busy { opacity: .6; pointer-events: none; }
.inline-form { display: flex; gap: 8px; min-width: 0; }
.inline-form .field { flex: 1 1 0; width: 0; }
.field {
  flex: 1 1 10em; min-width: 0; min-height: 46px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 16px;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inline-form .btn.small { min-height: 46px; box-shadow: none; }

.checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.ck { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--tint-3); color: transparent; font: 800 14px/1 var(--f-body); }
.checks li.ok .ck { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.checks li.ok > span { color: var(--ink-soft); }
.checks li > span { font-weight: 600; }
.meter { grid-column: 2; height: 8px; border-radius: 4px; background: var(--tint-2); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--score); }
.wd-form { display: grid; gap: 8px; margin-top: 16px; }
.wd-form label { font-weight: 600; }
.wd-list { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 14px; }
.wd-list li { padding: 10px 12px; border-radius: 12px; background: var(--tint-1); font-weight: 600; }
.wd-list li.paid { color: var(--ok); }
.form-error { margin-top: 10px; color: var(--bad-text); font-weight: 600; }
.form-error:empty { display: none; }

/* ---------- account ---------- */
.dash-head { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 48px; height: 48px; border-radius: 16px; flex: none;
  display: grid; place-items: center; background: var(--cta-bg); color: var(--cta-ink);
  font: 800 22px/1 var(--f-display);
}
.dash-who { min-width: 0; display: grid; }
.dash-who b { font: 800 20px/1.2 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-who span { color: var(--hero-soft); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .label { margin-top: 18px; }
.dash-total { display: block; font: 800 56px/1.05 var(--f-num); color: var(--hero-score); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.invite { border-color: var(--accent); }
/* The invite card folds down to its heading */
.invite-head { display: flex; align-items: center; gap: 12px; margin: -6px; padding: 6px; border-radius: 14px; cursor: pointer; list-style: none; }
.invite-head::-webkit-details-marker { display: none; }
.invite[open] > .invite-head { margin-bottom: 8px; }
.invite-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); }
.invite-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invite-ttl { flex: 1; min-width: 0; display: grid; gap: 2px; }
.invite-rw { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font: 800 14px/1.5 var(--f-label); }
.invite-head .chev { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint-1); color: var(--ink-soft); transition: transform .2s ease; }
.invite-head .chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.invite[open] > .invite-head .chev { transform: rotate(180deg); }
.link-box { display: flex; gap: 8px; margin-bottom: 12px; }
.link-box input { flex: 1 1 12em; min-width: 0; min-height: 46px; padding: 0 12px; background: var(--tint-1); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font: 500 14px/1 var(--f-mono); }
.link-box .btn.small { min-height: 46px; }

/* ---------- bottom sheets ---------- */
.bsheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); animation: fade .2s ease-out; }
.bsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 560px; max-height: 90vh; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: sheet-up .3s cubic-bezier(.2, .9, .3, 1);
  touch-action: pan-y;
}
.bsheet.closing { animation: sheet-down .22s ease-in forwards; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
.bsheet-grab { display: grid; place-items: center; height: 22px; cursor: grab; flex: none; }
.bsheet-grab i { width: 44px; height: 5px; border-radius: 3px; background: var(--tint-3); }
.bsheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 16px 12px 20px; border-bottom: 1px solid var(--line); flex: none; }
.bsheet-head h2 { font: 800 22px/1.25 var(--f-display); }
.bsheet-head > h2 { padding-top: 4px; }
.bsheet-body, .bsheet .review { overflow-y: auto; padding: 14px 16px 20px; overscroll-behavior: contain; }
body.sheet-open { overflow: hidden; }

.review { list-style: none; margin: 0; display: grid; gap: 12px; }
.rv { padding: 14px; border-radius: 18px; background: var(--tint-1); border: 1px solid var(--line); }
.rv-top { display: flex; align-items: center; gap: 8px; }
.rv-n { padding: 3px 9px; border-radius: 999px; background: var(--tint-2); color: var(--ink-soft); font: 800 13px/1.3 var(--f-num); }
.rv-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--f-body); color: #fff; background: var(--bad); }
.rv.ok .rv-mark { background: var(--ok); }
.rv-pts { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font: 800 14px/1.3 var(--f-num); }
.rv-q { margin-top: 10px; font: 700 17px/1.4 var(--f-body); }
.rv-ans { display: grid; gap: 6px; margin-top: 10px; }
.rv-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.rv-chip b { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 800 13px/1 var(--f-num); color: #fff; }
.rv-chip.mine { background: var(--bad-soft); color: var(--bad-text); }
.rv-chip.mine b { background: var(--bad); }
.rv.ok .rv-chip.mine { background: var(--ok-soft); color: var(--ok); }
.rv.ok .rv-chip.mine b, .rv-chip.right b { background: var(--ok); }
.rv-chip.right { background: var(--ok-soft); color: var(--ok); }
.rv-x { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 15px; }
.rv-x::before { content: "💡 "; }

/* What the quiz pays (sheet from the quiz card) */
.info-top { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--hero-bg); color: var(--hero-ink); }
.info-top svg { width: 56px; height: 56px; flex: none; animation: bob 3s ease-in-out infinite; }
.info-top div { display: grid; gap: 2px; }
.info-top b { font: 800 20px/1.25 var(--f-display); }
.info-top b em { font: 800 30px/1 var(--f-num); font-style: normal; color: var(--hero-score); unicode-bidi: isolate; }
.info-top span { color: var(--hero-soft); }
.info-h { margin: 20px 0 8px; font: 800 18px/1.3 var(--f-display); }
.info-p { color: var(--ink-soft); }
#info-body .steps { margin-top: 16px; }
#info-body .btn { margin-top: 16px; }
#info-body .btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Our "Continue with Google" button */
.btn.g-signin { gap: 12px; }
.btn.g-signin .g-logo { width: 22px; height: 22px; }

/* Withdraw: one requirement at a time */
.step-of { margin-bottom: 10px; color: var(--ink-faint); font: 700 12px/1.3 var(--f-label); letter-spacing: var(--track); text-transform: var(--case); }
.checks li.now { padding: 12px; border-radius: 16px; background: var(--accent-soft); border: 1px solid var(--accent); }
.checks li.now .ck { border-color: var(--accent); }
.checks li.now > :nth-child(n + 3) { grid-column: 1 / -1; margin-top: 8px; }
.checks li.now > .meter { grid-column: 2; }
.checks li.now > .btn { width: 100%; }
.checks li.now > .soon { justify-self: start; }
.checks li.now > .note { margin-bottom: -2px; }

/* Account card: who is signed in, and a small "More" button */
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.more-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font: 600 14px/1 var(--f-body); }
.more-btn svg { width: 18px; height: 18px; fill: currentColor; }
.acct-status { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; overflow-wrap: anywhere; }
.acct-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-faint); }
.acct-status.google::before { background: var(--ok); }
.more-note { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; }
.btn.danger-text { color: var(--bad-text); margin-top: 16px; }
#more-body .btn + .more-note + .btn { margin-top: 16px; }

/* Reward history: a quiet link, and the list in a sheet */
.link-btn.hist-link { display: flex; width: max-content; margin: 10px auto 0; padding: 6px 10px; font-size: 13px; font-weight: 600; text-decoration: none; opacity: .8; }
:is(.hero, .wallet-top) .link-btn.hist-link { color: var(--hero-soft); }
.hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.hist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--tint-1); }
.hist li.sk { height: 58px; background: linear-gradient(90deg, var(--tint-1), var(--tint-3), var(--tint-1)) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.h-amt { font: 800 16px/1.2 var(--f-num); color: var(--ok); white-space: nowrap; unicode-bidi: isolate; }
.h-amt.out { color: var(--ink-soft); }
.h-amt.wait { color: var(--ink-faint); }

/* Wallet sheet: the balance opens the account page */
.wt-bal { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: -6px; padding: 6px; border: 0; border-radius: 14px; background: transparent; color: inherit; text-align: start; box-sizing: content-box; }
.wt-bal > span { display: grid; }
.wt-go { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hero-tint); color: var(--hero-ink); }
.wt-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .wt-go svg { transform: scaleX(-1); }

/* Account: sign in, log out, delete */
.acct .sub { margin-top: -4px; }
.link-btn.danger { margin: 14px 0 0; color: var(--bad-text); }
.btn.danger { background: var(--bad); color: #fff; box-shadow: 0 4px 0 #9B1C1C; }
.btn.danger:active:not([disabled]) { box-shadow: 0 1px 0 #9B1C1C; }
.del-note { color: var(--ink-soft); margin-bottom: 16px; }

/* Home: the next step for a player who has played */
.next-card { border-color: var(--accent); }
/* On home the claim box is the card itself, not a box inside it */
.next-card > .claim { margin: 0; padding: 0; border: 0; background: none; }
.next-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.next-head .step-of { margin: 0; }
.next-bal { color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
.next-bal b { color: var(--score); font: 800 26px/1.1 var(--f-num); }
.next-card .meter { display: block; margin-bottom: 14px; }
.next-now { font-weight: 700; margin-bottom: 10px; }
.next-card .btn.big.wd-open { margin-top: 0; }

/* "Play now" at the bottom of the home screen */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 12px max(16px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  animation: dock-up .25s ease-out;
}
.dock .btn { max-width: 488px; margin: 0 auto; min-height: 56px; font-size: 19px; }
@keyframes dock-up { from { transform: translateY(100%); } }
[dir="rtl"] .dock svg { transform: scaleX(-1); }
body.dock-on .foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* The result's "Continue": what a locked tap says goes above the button */
/* A solid bar: nothing on the page shows through it or the locked button */
.r-dock { background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .12); }
.r-dock .btn.locked { background: var(--surface-2); border-color: var(--line); }
.r-dock .r-actions { display: flex; flex-direction: column; max-width: 488px; margin: 0 auto; }
.r-dock .btn.big { width: 100%; }
.r-dock .locked-hint { order: -1; margin: 0 0 8px; color: var(--accent-text); }
body.dock-on:has(.r-dock .locked-hint:not([hidden])) .foot { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
/* Short screens: a tighter result so the invite button stays above the Continue bar */
@media (max-height: 720px) {
  .result { padding-top: 14px; }
  .result .won-gift { width: 56px; height: 56px; margin-top: 2px; }
  .result .won { margin-top: 8px; font-size: 28px; }
  .result .right-line { margin-top: 8px; }
  .result .claim { margin-top: 12px; padding: 12px 14px; }
  .result .segs { margin: 10px 0 6px; }
  .result .claim-count { margin-bottom: 10px; }
}
/* "Play again" where the result's chip was: small, not the main button */
.again-chip { border: 1px solid var(--hero-line); cursor: pointer; font-size: 14px; height: 34px; }
.again-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.home-login { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; margin: 10px 0 0; text-decoration: none; font-weight: 600; color: var(--hero-soft) !important; }
.home-login b { color: var(--hero-score); text-decoration: underline; text-underline-offset: 4px; }
.won-today { margin-top: 12px; text-align: center; color: var(--hero-soft); font-weight: 700; }
.btn svg.line { fill: none; }
#joined-body .winners { margin-bottom: 12px; }
#joined-body .btn { margin-top: 14px; }

/* Language picker */
.bsheet[data-sticky] .bsheet-grab i { visibility: hidden; } /* cannot be dragged away */
.langs { display: grid; gap: 10px; }
.lang-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 16px;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink);
  text-align: start;
  transition: transform .08s ease, border-color .15s ease, background-color .15s ease;
}
.lang-opt:active { transform: scale(.98); }
.lo-t { display: grid; flex: 1; min-width: 0; }
.lo-t b { font: 700 19px/1.35 var(--f-body); }
.lo-t span { color: var(--ink-faint); font-size: 14px; line-height: 1.3; }
.lang-opt .radio { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--tint-3); transition: border-width .15s ease; }
.lang-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.lang-opt.on .radio { border: 7px solid var(--accent); }
.lang-opt.wait .radio { border: 3px solid var(--accent); border-right-color: transparent; animation: spin .6s linear infinite; }
.langs.more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lang-chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint-1); color: var(--ink-soft); font: 600 15px/1 var(--f-body); }
.lang-chip.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

/* Short message at the bottom of the screen */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: max-content; max-width: calc(100% - 32px); padding: 12px 18px;
  border-radius: 14px; background: var(--ink); color: var(--bg);
  font-weight: 600; text-align: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
  transform: translateX(-50%); animation: toast-in .25s cubic-bezier(.2, .9, .3, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- footer, docs ---------- */
.foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-faint); }
.foot-links { margin-top: 6px; }
/* "Delete data on this device": a button that reads like the links next to it */
.foot-btn { padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot a, .doc-links a { color: var(--ink-soft); text-underline-offset: 3px; }
.sheet { position: relative; margin-top: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font: 700 13px/1.4 var(--f-label); letter-spacing: var(--track); text-transform: var(--case); color: var(--accent-text); }
.doc h1 { font: 800 32px/1.15 var(--f-display); margin-bottom: 10px; }
.doc h2 { font: 800 20px/1.3 var(--f-display); margin: 22px 0 6px; }
.doc p, .doc ul { color: var(--ink-soft); font-size: 16px; }
.doc ul { padding-inline-start: 20px; display: grid; gap: 6px; }
.doc li::marker { color: var(--accent-text); }
.doc-links { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }

.screen.enter { animation: rise .3s ease-out; }
/* Any address but home: no screen until app.js has opened the right one (a reloaded
   /play or /result also waits for the round from the server) */
html.resuming .screen { visibility: hidden; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Negative tracking would crowd conjuncts and break Arabic joins. */
html:is([lang="hi"], [lang="bn"], [lang="ar"], [lang="ur"]) :is(.display, .card h2, .earn-more > h2, .question, .brand, .won) { letter-spacing: 0; }
/* Nastaliq needs room above and below each line. */
html[lang="ur"] body { line-height: 2; }
html[lang="ur"] :is(.display, .question, .card h2, .earn-more > h2, .rules summary, .opt, .dash-who b, .won, .claim-title) { line-height: 1.9; }

@media (max-width: 380px) {
  .display { font-size: 38px; }
  .question { font-size: 22px; }
  .won { font-size: 30px; }
  .dash-total, .wallet-amt { font-size: 44px; }
  .prize-gift { width: 52px; height: 52px; }
  .task { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .task-ic { width: 38px; height: 38px; }
  .claim .btn.wa { padding: 0 12px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}