/* Takkar app, iOS-inspired glass design (PRD UX-02 to UX-07).
   Rules: at most 3 blurred surfaces per screen; long text on near-opaque panels;
   cobalt = you, saffron = rival; right/wrong always have an icon and a word. */

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-weight: 400; font-display: swap; src: url(../fonts/hind-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+221A, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-weight: 500; font-display: swap; src: url(../fonts/hind-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+221A, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-weight: 600; font-display: swap; src: url(../fonts/hind-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+221A, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-weight: 400 800; font-display: swap; src: url(../fonts/hind-devanagari-600-normal.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
  --ink: #0D1130;
  --ink-soft: #3F4670;
  --mist: #ECEFF8;
  --arena: #0A0D28;
  --cobalt: #2A3BE8;
  --cobalt-light: #4B5DFF;
  --cobalt-text: #B8C1FF;
  --saffron: #FF6A00;
  --saffron-text: #FF9A57;
  --burnt: #B84700;
  --right: #5FD6B5;
  --right-ink: #0B6B50;
  --wrong: #FF8F86;
  --wrong-ink: #B3261E;
  --white: #FFFFFF;
  --label-dark: #D7DBF5;
  --display: 'Bricolage Grotesque', 'Hind', system-ui, sans-serif;
  --body: 'Hind', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
}
input, textarea { user-select: text; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }

#app { min-height: 100%; }
/* Dark until the opening animation covers the screen, so there is no light flash after the splash. */
html.booting, html.booting body { background: var(--arena); }
html.booting body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Ccircle cx='14' cy='16' r='11' fill='%234B5DFF'/%3E%3Ccircle cx='26' cy='16' r='11' fill='%23FF6A00'/%3E%3Cpath d='M20 6.78 A11 11 0 0 0 20 25.22 A11 11 0 0 0 20 6.78 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center / 120px 96px no-repeat, radial-gradient(120% 80% at 50% 45%, #1A2170 0%, var(--arena) 62%); }
html.booting #app { visibility: hidden; }

/* ---------- Screens ---------- */

.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
.screen--lobby { background: var(--mist); color: var(--ink); }
.screen--arena { background: var(--arena); color: var(--white); }
.screen__body {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 22px) 18px calc(var(--safe-bottom) + var(--tabbar-h) + 36px);
}
.screen__body--full { padding-bottom: calc(var(--safe-bottom) + 24px); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Soft colour fields. Radial gradients, not filter: blur, to keep cheap phones smooth (UX-04). */
.blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.blob--cobalt { background: radial-gradient(circle closest-side, rgba(42, 59, 232, 0.5), rgba(42, 59, 232, 0)); }
.blob--saffron { background: radial-gradient(circle closest-side, rgba(255, 106, 0, 0.42), rgba(255, 106, 0, 0)); }
.blob--a { width: 520px; height: 520px; left: -220px; top: -200px; }
.blob--b { width: 480px; height: 480px; right: -240px; top: 320px; }
.blob--c { width: 420px; height: 420px; left: -180px; bottom: -160px; }
.screen--arena .blob--cobalt { background: radial-gradient(circle closest-side, rgba(42, 59, 232, 0.75), rgba(42, 59, 232, 0)); }
.screen--arena .blob--saffron { background: radial-gradient(circle closest-side, rgba(255, 106, 0, 0.45), rgba(255, 106, 0, 0)); }

/* ---------- Glass ---------- */

.glass {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 30px rgba(13, 17, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
.tint { background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(255, 255, 255, 0.85); }
.glass-dark {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
.reading { background: rgba(14, 18, 52, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.92); }
  .glass-dark { background: #1A1F4A; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .tint { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-dark { background: #1A1F4A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .reading { background: #0E1234; }
}
/* UX-05: light mode. The app starts here, so the first screen paints fast on any
   phone, and switches to full glass only after it measures smooth frames.
   Same layout, solid tinted panels, no blur, lighter shadows. */
.lite .glass { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 10px rgba(13, 17, 48, 0.06); }
.lite .glass-dark { background: #1A1F4A; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .tabbar { background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 16px rgba(13, 17, 48, 0.14); }
.lite .feature, .lite .qpanel, .lite .btn--cobalt { box-shadow: none; }
.lite .reading { background: #0E1234; }

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

/* ---------- Type and bits ---------- */

.eyebrow { font-weight: 600; font-size: 15px; color: var(--ink-soft); }
.screen--arena .eyebrow { color: var(--label-dark); }
.title { font-size: 40px; line-height: 1.02; letter-spacing: -0.04em; }
.title--sm { font-size: 30px; }
.muted { color: var(--ink-soft); }
.screen--arena .muted { color: var(--label-dark); }
.small { font-size: 14px; }
.center { text-align: center; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-auto { margin-top: auto; }
.hidden { display: none !important; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand__word { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; line-height: 1; }
.brand__hi { font-weight: 600; font-size: 15px; color: var(--ink-soft); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
}
.pill__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cobalt); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 14px;
}
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-weight: 600; font-size: 13px;
  background: rgba(42, 59, 232, 0.12); color: var(--cobalt);
}
.tag--saffron { background: rgba(255, 106, 0, 0.14); color: var(--burnt); }
.tag--dark { background: rgba(255, 255, 255, 0.14); color: var(--white); }

/* ---------- Buttons ---------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 14px 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15;
  text-decoration: none; text-align: center;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--cobalt { background: var(--cobalt); color: var(--white); box-shadow: 0 10px 30px rgba(42, 59, 232, 0.35); }
.btn--saffron { background: var(--saffron); color: var(--ink); }
.btn--glass { background: rgba(255, 255, 255, 0.6); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.85); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--ghost-dark { background: rgba(255, 255, 255, 0.1); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.22); }
.btn--line { background: transparent; color: var(--ink); border: 1.5px solid rgba(13, 17, 48, 0.2); }
.btn--danger { background: var(--wrong-ink); color: var(--white); }
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: 16px; width: auto; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.link-btn { background: none; border: 0; padding: 10px 0; min-height: 44px; font-weight: 600; color: var(--cobalt); cursor: pointer; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: transparent;
}
.icon { width: 24px; height: 24px; flex: none; }

/* ---------- Cards ---------- */

.card { border-radius: 26px; padding: 16px 18px; }
.card--lg { border-radius: 30px; padding: 22px; }
.card-link { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; }
.card-link.row { display: flex; }
.card__title { font-family: var(--display); font-weight: 800; font-size: 18px; }

.feature {
  position: relative; overflow: hidden; border-radius: 30px; padding: 22px;
  background: var(--ink); color: var(--white);
  box-shadow: 0 20px 40px rgba(13, 17, 48, 0.3);
}
.feature__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.feature__glow--a { right: -80px; top: -90px; width: 280px; height: 280px; background: radial-gradient(circle closest-side, rgba(42, 59, 232, 0.9), rgba(42, 59, 232, 0)); }
.feature__glow--b { right: 10px; top: 30px; width: 200px; height: 200px; background: radial-gradient(circle closest-side, rgba(255, 106, 0, 0.6), rgba(255, 106, 0, 0)); }
.feature > *:not(.feature__glow) { position: relative; }
.feature__title { font-size: 30px; line-height: 1.02; letter-spacing: -0.03em; max-width: 260px; }

.segmented {
  display: flex; padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18);
}
.segmented button {
  flex: 1; min-height: 40px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--white); font-weight: 600; font-size: 15px;
}
.segmented button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.segmented--light { background: rgba(13, 17, 48, 0.06); border-color: rgba(13, 17, 48, 0.06); }
.segmented--light button { color: var(--ink-soft); }
.segmented--light button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(13, 17, 48, 0.1); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white); font-weight: 600; font-size: 14px;
}

.progress { height: 10px; border-radius: 999px; background: rgba(13, 17, 48, 0.1); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 999px; background: var(--cobalt); }
.progress--dark { background: rgba(255, 255, 255, 0.14); }
.progress--dark .progress__bar { background: var(--white); }

.stats { display: flex; gap: 10px; }
.stat { flex: 1; padding: 12px 14px; border-radius: 22px; }
.stat__label { font-size: 13px; color: var(--ink-soft); }
.stat__value { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.15; }

.list { border-radius: 26px; overflow: hidden; }
.list__item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 18px; border: 0; background: transparent;
  text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: none;
}
.list__item + .list__item { border-top: 1px solid rgba(13, 17, 48, 0.08); }
.list__item--static { cursor: default; }
.list__item--danger { color: var(--wrong-ink); font-weight: 600; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--cobalt); color: var(--white);
  font-family: var(--display); font-weight: 800; font-size: 15px;
}
.avatar--saffron { background: var(--saffron); color: var(--ink); }
.avatar--ink { background: var(--ink); }
.avatar--lg { width: 56px; height: 56px; font-size: 22px; }

/* ---------- Form ---------- */

.field { padding: 14px 18px 12px; }
.field label { display: block; font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.field input {
  width: 100%; height: 40px; padding: 0; border: 0; background: transparent;
  font-family: var(--body); font-size: 19px; color: var(--ink); outline-offset: 4px;
}
.field input::placeholder { color: #7A80A3; }
.field__error { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--wrong-ink); min-height: 20px; }
.divider { height: 1px; margin-left: 18px; background: rgba(13, 17, 48, 0.1); }
.check { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; cursor: pointer; font-size: 18px; font-weight: 500; }
.check input { width: 26px; height: 26px; margin: 0; accent-color: var(--cobalt); flex: none; }
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 999px; background: rgba(13, 17, 48, 0.18); transition: background 0.15s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--white); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.switch input:checked + span { background: var(--cobalt); }
.switch input:checked + span::after { transform: translateX(20px); }

.code-input {
  width: 100%; height: 56px; padding: 0 18px; border-radius: 18px;
  border: 1.5px solid rgba(13, 17, 48, 0.15); background: var(--white);
  font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; color: var(--ink);
  text-transform: uppercase;
}

/* ---------- Tab bar ---------- */

.tabbar {
  position: fixed; z-index: 20;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + 14px);
  width: calc(100% - 28px); max-width: 480px; height: var(--tabbar-h);
  padding: 6px; display: flex; gap: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 40px rgba(13, 17, 48, 0.18);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.tabbar button {
  flex: 1; min-width: 0; border: 0; border-radius: 999px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 12px;
}
.tabbar button[aria-current="page"] { background: rgba(42, 59, 232, 0.14); color: var(--cobalt); }

/* ---------- Duel ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 4px 4px; border-radius: 999px;
}
.timer {
  min-width: 56px; text-align: center; padding: 5px 12px; border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums;
}
.timer--low { background: var(--saffron); }
.timer--locked { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.scorecard { border-radius: 28px; padding: 14px 18px; }
.score-label { font-size: 14px; color: var(--label-dark); }
.score { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.score--you { color: var(--cobalt-text); }
.score--rival { color: var(--saffron-text); }
.collision { position: relative; height: 14px; border-radius: 999px; background: var(--saffron); }
.collision__you { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px 0 0 999px; background: var(--cobalt-light); transition: width 0.4s ease; }
.collision__dot { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--white); border: 5px solid var(--arena); transition: left 0.4s ease; }
.dots { display: flex; gap: 3px; flex: none; }
.dot { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.dot--right { background: rgba(95, 214, 181, 0.22); border-color: var(--right); color: var(--right); }
.dot--wrong { background: rgba(255, 143, 134, 0.22); border-color: var(--wrong); color: var(--wrong); }
.dot--skip { background: rgba(255, 255, 255, 0.1); color: var(--label-dark); }
.dot--now { border-color: var(--white); border-width: 2px; }

.qpanel { flex: 1; display: flex; flex-direction: column; border-radius: 30px; padding: 20px 18px 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.question { margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.options { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 56px; padding: 8px 14px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white); text-align: left; font-size: 18px;
  transition: background 0.12s ease, transform 0.12s ease;
}
.option:active { transform: scale(0.99); background: rgba(255, 255, 255, 0.12); }
.option__key {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  border: 2px solid var(--cobalt-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 15px;
}
.option__text { flex: 1; min-width: 0; }
.option__mark { font-family: var(--display); font-weight: 800; font-size: 14px; white-space: nowrap; }
.option--correct { background: rgba(95, 214, 181, 0.16); border: 2px solid var(--right); }
.option--correct .option__key { background: var(--right); border-color: var(--right); color: var(--arena); }
.option--correct .option__mark { color: var(--right); }
.option--wrong { background: rgba(255, 143, 134, 0.14); border: 2px solid var(--wrong); }
.option--wrong .option__key { background: var(--wrong); border-color: var(--wrong); color: var(--arena); }
.option--wrong .option__mark { color: var(--wrong); }
.option--faded { opacity: 0.55; }
.option[disabled] { cursor: default; }
.skip {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 14px;
  border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.3); background: transparent;
  color: var(--label-dark); font-weight: 600; font-size: 16px; cursor: pointer; width: 100%;
}
.explain { margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.explain__head { font-family: var(--display); font-weight: 800; font-size: 17px; }
.explain__head--right { color: var(--right); }
.explain__head--wrong { color: var(--wrong); }
.explain ol { margin: 8px 0 0; padding-left: 20px; font-size: 16px; }
.explain li + li { margin-top: 4px; }
.flag-btn { background: none; border: 0; color: var(--label-dark); font-weight: 600; font-size: 14px; min-height: 44px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Result and review ---------- */

.verdict { font-size: 52px; line-height: 0.95; letter-spacing: -0.045em; }
.review { border-radius: 22px; padding: 14px 16px; }
.review + .review { margin-top: 10px; }
.review__q { font-weight: 600; }
.review__a { margin-top: 6px; font-size: 15px; }
.code-box {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 8px 8px 8px 16px; border-radius: 18px; background: rgba(13, 17, 48, 0.06);
}
.code-box__code { flex: 1; min-width: 0; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; word-break: break-all; }

/* ---------- Ranks ---------- */

.podium { display: flex; align-items: flex-end; gap: 10px; }
.podium__col { flex: 1; text-align: center; }
.podium__block { margin-top: 8px; border-radius: 20px 20px 10px 10px; padding: 10px 6px; }
.podium__name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__score { font-family: var(--display); font-weight: 800; font-size: 20px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 52px; }
.rank-row + .rank-row { border-top: 1px solid rgba(13, 17, 48, 0.08); }
.rank-row__n { width: 28px; font-family: var(--display); font-weight: 800; color: var(--ink-soft); }
.rank-row__score { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-row--you { background: rgba(42, 59, 232, 0.1); }
.rank-row--you .rank-row__n { color: var(--cobalt); }

/* ---------- Sheet, dialog and toast ---------- */

.scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background: rgba(7, 10, 31, 0.5); display: flex; align-items: flex-end; justify-content: center; animation: fade-in 0.15s ease; }
.sheet {
  width: 100%; max-width: 520px; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  padding: 10px 20px calc(var(--safe-bottom) + 22px);
  border-radius: 28px 28px 0 0; background: #F7F8FD; color: var(--ink);
  animation: slide-up 0.2s ease;
}
.sheet__handle { width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: rgba(13, 17, 48, 0.18); }
.sheet__title { font-size: 24px; }
.sheet h3 { font-size: 16px; margin-top: 18px; color: var(--ink-soft); font-family: var(--body); font-weight: 600; letter-spacing: 0; }
.toast {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + var(--tabbar-h) + 30px);
  max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--white); font-weight: 600; font-size: 15px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); animation: fade-in 0.15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }

.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.option-grid button {
  min-height: 64px; padding: 8px; border-radius: 18px; cursor: pointer;
  background: var(--white); border: 1.5px solid rgba(13, 17, 48, 0.1);
  font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink);
}
.option-grid button small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.option-grid button[aria-pressed="true"] { border-color: var(--cobalt); background: rgba(42, 59, 232, 0.08); color: var(--cobalt); }
.option-grid--2 { grid-template-columns: repeat(2, 1fr); }

.badges { display: flex; gap: 10px; }
.badge { flex: 1; padding: 12px 8px; border-radius: 20px; text-align: center; font-size: 13px; font-weight: 600; }
.badge__icon { width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; color: var(--white); background: var(--cobalt); }
.badge--locked { opacity: 0.45; }
.badge--locked .badge__icon { background: rgba(13, 17, 48, 0.25); }

.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row + .bar-row { margin-top: 10px; }
.bar-row__label { width: 96px; font-weight: 600; font-size: 15px; }
.bar-row__val { width: 48px; text-align: right; font-family: var(--display); font-weight: 800; }

.notice { padding: 12px 14px; border-radius: 18px; background: rgba(255, 106, 0, 0.1); color: var(--burnt); font-size: 14px; font-weight: 600; }
.notice--dark { background: rgba(255, 255, 255, 0.08); color: var(--label-dark); }

/* ---------- Opening animation (intro.js): tak + kar collide into the logo ---------- */

.intro {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(120% 80% at 50% 45%, #1A2170 0%, var(--arena) 62%);
  color: var(--white); transition: opacity 0.26s ease;
}
.intro--out { opacity: 0; }
.intro__stage { position: relative; width: 120px; height: 96px; }
.intro__word {
  position: absolute; top: 50%; font-family: var(--display); font-weight: 800; font-size: 60px;
  letter-spacing: -0.04em; line-height: 1; transform: translateY(-50%); white-space: nowrap; opacity: 0; text-shadow: 0 0 24px currentColor;
}
.intro__word--tak { right: 50%; color: var(--cobalt-light); }
.intro__word--kar { left: 50%; color: var(--saffron); }
.intro__ball, .intro__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; opacity: 0; }
.intro__ball { width: 66px; height: 66px; margin: -33px 0 0 -33px; }
.intro__ball--you { background: var(--cobalt-light); }
.intro__ball--rival { background: var(--saffron); mix-blend-mode: normal; }
.intro__ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(255, 255, 255, 0.9); }
.intro__logo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; overflow: visible; }
.intro__lens { opacity: 0; }
.intro__name {
  font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; line-height: 1;
  display: flex; align-items: baseline; gap: 10px; opacity: 0;
}
.intro__name span { font-family: var(--body); font-weight: 600; font-size: 18px; color: var(--label-dark); letter-spacing: 0; }

/* Full: words fly in (0-0.55 s), collide, turn into two balls that slam into the logo. */
.intro--full .intro__stage { animation: intro-shake 0.32s 0.55s ease-out; }
.intro--full .intro__word--tak { animation: intro-tak 0.62s cubic-bezier(0.4, 0, 0.85, 0.6) forwards; }
.intro--full .intro__word--kar { animation: intro-kar 0.62s cubic-bezier(0.4, 0, 0.85, 0.6) forwards; }
.intro--full .intro__ring { animation: intro-ring 0.6s 0.56s ease-out forwards; }
.intro--full .intro__ball--you { animation: intro-ball-you 0.5s 0.56s cubic-bezier(0.3, 1.5, 0.6, 1) forwards; }
.intro--full .intro__ball--rival { animation: intro-ball-rival 0.5s 0.56s cubic-bezier(0.3, 1.5, 0.6, 1) forwards; }
.intro--full .intro__logo { animation: intro-logo 0.5s 0.92s ease-out forwards; }
.intro--full .intro__lens { animation: intro-lens 0.35s 1.1s ease-out forwards; }
.intro--full .intro__name { animation: intro-name 0.5s 1.25s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }

/* Short (every later open): the balls slam together and the name rises. */
.intro--short .intro__ball--you { animation: intro-ball-you 0.45s 0.05s cubic-bezier(0.3, 1.5, 0.6, 1) forwards; }
.intro--short .intro__ball--rival { animation: intro-ball-rival 0.45s 0.05s cubic-bezier(0.3, 1.5, 0.6, 1) forwards; }
.intro--short .intro__ring { animation: intro-ring 0.5s 0.12s ease-out forwards; }
.intro--short .intro__logo { animation: intro-logo 0.4s 0.45s ease-out forwards; }
.intro--short .intro__lens { animation: intro-lens 0.3s 0.5s ease-out forwards; }
.intro--short .intro__name { animation: intro-name 0.45s 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }

/* Reduce motion: the logo and name, still. */
.intro--still .intro__logo, .intro--still .intro__lens, .intro--still .intro__name { opacity: 1; }

@keyframes intro-tak {
  0% { opacity: 1; transform: translate(-42vw, -50%); }
  88% { opacity: 1; transform: translate(-2px, -50%); }
  100% { opacity: 0; transform: translate(8px, -50%) scaleX(0.6); }
}
@keyframes intro-kar {
  0% { opacity: 1; transform: translate(42vw, -50%); }
  88% { opacity: 1; transform: translate(2px, -50%); }
  100% { opacity: 0; transform: translate(-8px, -50%) scaleX(0.6); }
}
@keyframes intro-ring {
  0% { opacity: 1; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(6); }
}
@keyframes intro-ball-you {
  0% { opacity: 1; transform: translateX(-70px) scale(0.5); }
  70% { opacity: 1; transform: translateX(-18px) scale(1.08); }
  100% { opacity: 1; transform: translateX(-18px) scale(1); }
}
@keyframes intro-ball-rival {
  0% { opacity: 1; transform: translateX(70px) scale(0.5); }
  70% { opacity: 1; transform: translateX(18px) scale(1.08); }
  100% { opacity: 1; transform: translateX(18px) scale(1); }
}
@keyframes intro-logo {
  0% { opacity: 1; transform: scale(1.06); }
  45% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes intro-lens { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-name {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes intro-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 2px); }
  45% { transform: translate(5px, -2px); }
  70% { transform: translate(-3px, 1px); }
}

/* ---------- Sign-in, banners, report form (beta 0.2) ---------- */

.mb-12 { margin-bottom: 12px; }
.btn--icon { display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn--white.btn--icon { border: 1px solid rgba(13, 17, 48, 0.12); box-shadow: 0 6px 18px rgba(13, 17, 48, 0.08); }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: rgba(13, 17, 48, 0.14); }

.phone-row { display: flex; align-items: center; gap: 10px; }
.phone-row__cc { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink-soft); }
.phone-row input { flex: 1; min-width: 0; }
.otp-input { letter-spacing: 0.4em; font-family: var(--display); font-weight: 800; font-size: 28px !important; }

.banner {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 12px 12px 16px; border-radius: 18px;
  border: 0; text-align: left; font: inherit; font-size: 15px; line-height: 1.35; cursor: pointer;
  background: rgba(42, 59, 232, 0.1); color: var(--ink);
}
.banner--update { background: rgba(255, 106, 0, 0.12); color: var(--burnt); }
.icon-btn--sm { width: 36px; height: 36px; min-height: 36px; background: transparent; box-shadow: none; flex: none; }

.choice-list { display: grid; gap: 8px; margin-top: 8px; }
.choice-list button {
  min-height: 48px; padding: 10px 14px; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--white); border: 1.5px solid rgba(13, 17, 48, 0.1); font-weight: 600; font-size: 15px; color: var(--ink);
}
.choice-list button[aria-pressed="true"] { border-color: var(--cobalt); background: rgba(42, 59, 232, 0.08); color: var(--cobalt); }
.text-input {
  display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 16px; resize: vertical;
  border: 1.5px solid rgba(13, 17, 48, 0.14); background: var(--white); color: var(--ink); font: inherit; font-size: 16px;
}
.text-input:focus { outline: none; border-color: var(--cobalt); }

/* Toasts never block a tap, and sit at the top on screens without a tab bar. */
.toast { pointer-events: none; }
.toast--top { bottom: auto; top: calc(var(--safe-top) + 16px); }

/* ---------- Text fields: a quiet highlight instead of the orange focus ring ---------- */

input[type="text"]:focus, input[type="tel"]:focus, input:not([type]):focus, textarea:focus { outline: none; }
.field { transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.field:focus-within { background: rgba(42, 59, 232, 0.05); box-shadow: inset 0 -2px 0 var(--cobalt); }
.field:focus-within label { color: var(--cobalt); }
.code-input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(42, 59, 232, 0.15); }
.text-input:focus { box-shadow: 0 0 0 3px rgba(42, 59, 232, 0.15); }

/* ---------- Swipe between tabs (main.js) ---------- */

.screen--tab .screen__body { touch-action: pan-y; }
.screen__body.is-dragging { will-change: transform; }
.screen__body.is-settling { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease; }
.screen__body.enter-from-right { animation: tab-in-right 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.screen__body.enter-from-left { animation: tab-in-left 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes tab-in-right { from { transform: translateX(28%); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes tab-in-left { from { transform: translateX(-28%); opacity: 0.3; } to { transform: none; opacity: 1; } }
.tabbar button { transition: background-color 0.2s ease, color 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  .screen__body.enter-from-right, .screen__body.enter-from-left { animation: none; }
  .screen__body.is-settling { transition: none; }
}

/* Small-screen polish (360 px phones) */
.one-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-row .btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.row--wrap { flex-wrap: wrap; }
.nick-line { overflow-wrap: anywhere; line-height: 1.1; }
.league-code { white-space: nowrap; }
/* Narrow phones (320-359 px): buttons drop below the text instead of squeezing it. */
@media (max-width: 359px) {
  .btn { font-size: 17px; padding-left: 16px; padding-right: 16px; }
  .league-code { flex-basis: 100%; }
  .profile-card .grow { flex-basis: calc(100% - 66px); }
  .profile-card > .btn { flex-basis: 100%; }
}

/* =====================================================================
   Tablets and computers. Phones (under 600 px) are not affected.
   600 px+: wider single column.  900 px+: two-column pages, centred
   dialogs, side-by-side duel.  1024 px+: sidebar instead of the tab bar.
   ===================================================================== */

.tabbar__brand { display: none; }
.dgrid { display: block; }

@media (min-width: 600px) {
  .screen__body { max-width: 680px; padding-left: 28px; padding-right: 28px; }
  .title { font-size: 46px; }
  .screen__body--full { max-width: 560px; }
  .tabbar { max-width: 560px; }
}

@media (min-width: 900px) {
  .screen__body { max-width: 1040px; }
  .title { font-size: 52px; }

  /* Two-column pages. Children keep their phone order in the HTML; the grid places them. */
  .dgrid { display: grid; gap: 18px; align-items: start; margin-top: 18px; }
  .dgrid > * { margin-top: 0 !important; min-width: 0; }
  .ga-a { grid-area: a; } .ga-b { grid-area: b; } .ga-c { grid-area: c; } .ga-d { grid-area: d; }
  .ga-e { grid-area: e; } .ga-f { grid-area: f; } .ga-g { grid-area: g; }
  .dgrid--home { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "a b" "a c" "a d" "e e"; }
  .dgrid--home .feature { min-height: 100%; padding: 32px; }
  .dgrid--home .feature__title { font-size: 40px; max-width: 420px; }
  .dgrid--league { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a c" "b c" "d c" "e c" "f f"; }
  .dgrid--squad { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "a c" "b c" "e d" "f f"; }
  .dgrid--ranks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "d b" "c c"; }
  .dgrid--ranks .podium { padding-top: 24px; }
  /* The last left-hand row takes any extra height, so a long right column never opens gaps on the left. */
  .dgrid--ranks { grid-template-rows: auto 1fr auto; }
  .dgrid--result { grid-template-rows: auto auto auto auto 1fr; }
  .dgrid--league { grid-template-rows: auto auto auto 1fr auto; }
  .dgrid--squad { grid-template-rows: auto 1fr auto auto; }
  .dgrid--profile { grid-template-rows: auto auto auto 1fr; }
  .dgrid .league-code { flex-basis: 100%; }
  .duel-body .scorecard .row:last-child { flex-wrap: wrap; row-gap: 8px; }
  .duel-body #rival-status { flex-basis: 100%; }
  .dgrid--profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a e" "b e" "c f" "d g"; }
  .dgrid--result { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "a e" "b e" "c e" "d e" "f e"; }
  .dgrid--result .ga-e > h2:first-child { margin-top: 0 !important; }

  /* Sheets become centred dialogs. */
  .scrim { align-items: center; padding: 24px; }
  .sheet { border-radius: 28px; max-width: 560px; padding-bottom: 26px; animation: dialog-in 0.18s ease; }
  .sheet__handle { display: none; }
  @keyframes dialog-in { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

  /* Single-task screens (nickname, phone, challenge code, Plus) sit in a card in the middle. */
  .screen--lobby .screen__body--full:not(.welcome) {
    min-height: 0; max-width: 560px; margin: 48px auto; padding: 36px 40px 40px;
    border-radius: 32px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 30px 80px rgba(13, 17, 48, 0.12);
  }
  .screen--lobby .screen__body--full:not(.welcome) .mt-auto { margin-top: 8px; }
  .screen--arena .screen__body--full:not(.duel-body):not(.mock-body) { max-width: 640px; min-height: 100vh; min-height: 100dvh; }

  /* Welcome: the pitch on the left, the sign-in buttons in a card on the right. */
  .welcome { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); gap: 56px; align-items: center; padding: 48px 40px; }
  .welcome .title { font-size: clamp(56px, 6vw, 84px); margin-top: 40px !important; }
  .welcome__panel { margin-top: 0; padding: 32px !important; border-radius: 32px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 30px 80px rgba(13, 17, 48, 0.12); }

  /* Duel: score on the left, the question on the right; options in two columns. */
  .duel-body { max-width: 1080px; display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px !important; align-items: start; padding: 28px 32px; }
  .duel-body .topbar { grid-column: 1 / -1; }
  .duel-body .scorecard { position: sticky; top: 24px; padding: 22px; }
  .duel-body .qpanel { padding: 28px 28px 24px; min-height: 0; }
  .duel-body .question { font-size: 30px; }
  .duel-body .options { display: grid; grid-template-columns: 1fr 1fr; }
  .duel-body .option { min-height: 72px; }
  .duel-body .dots { flex-wrap: wrap; }
}

@media (min-width: 1024px) {
  /* The tab bar becomes a sidebar on the left. */
  .tabbar {
    left: 24px; top: 24px; bottom: 24px; transform: none;
    width: 228px; max-width: none; height: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    padding: 20px 12px; border-radius: 28px;
  }
  .tabbar__brand { display: flex; align-items: center; gap: 10px; padding: 4px 12px 22px; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--ink); }
  .tabbar button { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; height: 52px; padding: 0 16px; font-size: 16px; border-radius: 16px; }
  .tabbar button:hover { background: rgba(42, 59, 232, 0.07); }
  .screen--tab .screen__body { max-width: none; margin: 0; padding: 40px 48px 56px calc(228px + 24px + 48px); }
  /* Content is centred in the space beside the sidebar. */
  .screen--tab .screen__body > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
  .screen--tab .screen__body > .row, .screen--tab .screen__body > .eyebrow, .screen--tab .screen__body > .title, .screen--tab .screen__body > p { max-width: 1100px; }
  .screen--tab .screen__body > .eyebrow { display: block; }
  .welcome__intro .muted { font-size: 21px !important; max-width: 520px; }
  .toast { bottom: 40px; left: calc(50% + 126px); }
  .toast--top { bottom: auto; left: 50%; }
}

@media (min-width: 1440px) {
  .screen--tab .screen__body { padding-left: calc(228px + 24px + 72px); padding-right: 72px; }
  .screen--tab .screen__body > *, .screen--tab .screen__body > .row, .screen--tab .screen__body > .eyebrow, .screen--tab .screen__body > .title, .screen--tab .screen__body > p { max-width: 1180px; }
  .dgrid { gap: 22px; }
}

/* Follow buttons (Instagram, Facebook): brand-coloured round icons. */
.social__icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.social__icon .icon { width: 17px; height: 17px; }
.social--ig .social__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social--fb .social__icon { background: #1877F2; }
.social--chip { display: inline-flex; flex: none; }

/* Sidebar card (desktop); hidden in the phone tab bar. */
.tabbar__follow { display: none; }
@media (min-width: 1024px) {
  .tabbar .tabbar__follow {
    display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 14px 12px 12px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 106, 0, 0.1), rgba(42, 59, 232, 0.1));
  }
  .tabbar__follow > span { padding: 0 4px 2px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
  .tabbar .tabbar__follow .social {
    flex: none; height: 46px; padding: 0 14px 0 8px; gap: 10px; justify-content: flex-start;
    border-radius: 999px; background: #fff; border: 1px solid rgba(13, 17, 48, 0.08);
    color: var(--ink); font-size: 15px; font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .tabbar .tabbar__follow .social:hover { transform: translateY(-1px); background: #fff; }
  .tabbar .tabbar__follow .social--ig:hover { box-shadow: 0 8px 22px rgba(221, 42, 123, 0.25); }
  .tabbar .tabbar__follow .social--fb:hover { box-shadow: 0 8px 22px rgba(24, 119, 242, 0.3); }
}

/* League intro (educators): selling points with icons, and a live preview of the league. */
.league-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.league-points li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.4; color: var(--ink-soft); }
.league-points strong { color: var(--ink); }
.league-points__icon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 106, 0, 0.12); color: var(--burnt); }
.league-points__icon .icon { width: 20px; height: 20px; }
.league-preview { display: none; }
.lp-code { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 0.08em; color: var(--white); }
.lp-table { display: grid; gap: 6px; }
.lp-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: var(--white); font-weight: 600; font-size: 15px; }
.lp-rank { width: 16px; color: #D7DBF5; font-family: var(--display); font-weight: 800; }
@media (min-width: 600px) {
  .league-preview { display: block; margin-top: 24px; }
}
@media (min-width: 900px) {
  .dgrid--league-intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "a b"; gap: 32px; }
  .dgrid--league-intro .title { font-size: clamp(44px, 4.2vw, 60px); }
  .league-preview { position: sticky; top: 32px; }
  .league-preview .feature { padding: 26px; }
}

/* ---------- Exam-first onboarding (screens/exam.js) ---------- */
.exam-flow .steps { display: flex; gap: 6px; margin-top: 18px; }
.exam-flow .steps i { flex: 1; height: 5px; border-radius: 999px; background: rgba(13, 17, 48, 0.12); }
.exam-flow .steps i.on { background: var(--cobalt); }
.exam-list { display: grid; gap: 10px; }
.exam-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
  border-radius: 22px; border: 2px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.72); color: var(--ink); font: inherit;
  box-shadow: 0 8px 24px rgba(13, 17, 48, 0.06); transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.exam-card:active { transform: scale(0.99); }
.exam-card.is-on { border-color: var(--cobalt); background: rgba(42, 59, 232, 0.07); }
.exam-card__badge { flex: none; width: 46px; height: 46px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; }
.exam-card__name { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.exam-card__meta { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-soft); }
.exam-card__tick { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid rgba(13, 17, 48, 0.15); color: transparent; }
.exam-card__tick .icon { width: 16px; height: 16px; }
.exam-card.is-on .exam-card__tick { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.month-grid button, .month-none {
  min-height: 52px; border-radius: 16px; border: 1.5px solid rgba(13, 17, 48, 0.1); background: rgba(255, 255, 255, 0.75);
  font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer;
}
.month-none { width: 100%; }
.month-grid button.is-on, .month-none.is-on { border-color: var(--cobalt); background: rgba(42, 59, 232, 0.08); color: var(--cobalt); }
.rules { border-radius: 24px; padding: 6px 18px; }
.rules__row { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 17px; color: #D7DBF5; }
.rules__row + .rules__row { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rules__row strong { font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff; }
.rules__right { color: var(--right) !important; }
.rules__wrong { color: var(--wrong) !important; }
.exam-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(42, 59, 232, 0.08); font-weight: 600; font-size: 14px; color: var(--cobalt); }
.exam-chip b { width: 26px; height: 26px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-size: 11px; }
.countdown { width: 100%; text-align: left; border: 0; font: inherit; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 24px; color: #fff; background: linear-gradient(140deg, #FF7A1A, #B84700); box-shadow: 0 14px 36px rgba(184, 71, 0, 0.3); }
.countdown__days { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; }
.countdown__label { font-size: 13px; font-weight: 600; opacity: 0.92; }

/* ---------- Practice tab and mini mock ---------- */
.topic-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.topic-row + .topic-row { border-top: 1px solid rgba(13, 17, 48, 0.08); }
.topic-row__name { display: block; font-weight: 600; font-size: 16px; }
.topic-row .progress { display: block; height: 6px; }
.topic-row .progress__bar { display: block; }
.topic-row__acc { flex: none; min-width: 44px; text-align: right; font-family: var(--display); font-weight: 800; }
.mt-4 { margin-top: 4px; }
.mock-tabs { display: flex; gap: 8px; }
.mock-tab { flex: 1; min-height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: #D7DBF5; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.mock-tab.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.mock-tab[disabled] { opacity: 0.4; cursor: not-allowed; }
.option--chosen { background: var(--cobalt); border-color: var(--cobalt-light); }
.option--chosen .option__key { background: #fff; color: var(--cobalt); border-color: #fff; }
.palette { border-radius: 24px; padding: 14px; }
.palette__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; }
.pal { display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; min-height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.pal--seen { background: rgba(255, 143, 134, 0.22); border-color: var(--wrong); }
.pal--answered { background: var(--right); border-color: var(--right); color: var(--arena); }
.pal--marked { background: #8B6CFF; border-color: #8B6CFF; }
.pal--answered-marked { background: var(--right); border: 3px solid #8B6CFF; color: var(--arena); }
.pal--now { outline: 3px solid #fff; outline-offset: 2px; }
.palette__key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: #D7DBF5; }
.palette__key span { display: inline-flex; align-items: center; gap: 6px; }
.palette__key .pal { width: 14px; height: 14px; min-height: 0; border-radius: 4px; aspect-ratio: auto; }
@media (min-width: 900px) {
  .dgrid--practice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "c b"; grid-template-rows: auto 1fr; }
  .dgrid--practice .ga-b h2, .dgrid--practice .ga-c h2 { margin-top: 0; }
  .screen__body.mock-body { width: 100%; max-width: 1080px; display: grid !important; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "top top" "tabs pal" "q pal"; grid-template-rows: auto auto 1fr; align-content: start; align-items: start; padding: 28px 32px; }
  .mock-body .topbar { grid-area: top; }
  .mock-body .mock-tabs { grid-area: tabs; }
  .mock-body .qpanel { grid-area: q; padding: 28px; }
  .mock-body .question { font-size: 28px; }
  .mock-body .options { display: grid; grid-template-columns: 1fr 1fr; }
  .mock-body .palette { grid-area: pal; position: sticky; top: 24px; }
}

/* League | Ranks switch on light screens */
.segmented--light { display: flex; max-width: 360px; padding: 4px; border-radius: 999px; background: rgba(13, 17, 48, 0.06); }
.segmented--light button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink-soft); cursor: pointer; }
.segmented--light button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(13, 17, 48, 0.1); }
.ga-b2 { grid-area: b2; }
@media (min-width: 900px) {
  .dgrid--profile { grid-template-areas: "a e" "b2 e" "b e" "c f" "d g"; grid-template-rows: auto auto auto auto 1fr; }
}

.nowrap { white-space: nowrap; }

/* ---------- Audit fixes (Oct 2026): screen readers, goal, tips ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Headings get focus when a screen opens (for keyboards and screen readers); no ring for that. */
h1[tabindex="-1"]:focus { outline: none; }
.goal-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: rgba(42, 59, 232, 0.08); color: var(--ink); font-size: 14px; }
.goal-line__text { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.goal-line__text .icon { width: 16px; height: 16px; color: #0B6B50; }
.goal-line__bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(13, 17, 48, 0.1); overflow: hidden; }
.goal-line__bar span { display: block; height: 100%; border-radius: 999px; background: var(--cobalt); }
.tip { padding: 10px 12px; border-radius: 14px; background: rgba(255, 178, 122, 0.14); color: #FFD9BD; font-size: 14px; line-height: 1.45; }

/* ---------- Home on wide screens (Oct 2026): duel + "your day" panel, then three even tiles ---------- */
.home-side > :first-child { margin-top: 0; }
.goal-line--set { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.goal-line--set .goal-line__text { font-weight: 700; }
.goal-line__hint { flex: 1; color: var(--ink-soft); font-size: 13px; }
.goal-line--set .icon { width: 18px; height: 18px; flex: none; }
@media (min-width: 900px) {
  .dgrid--home {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: "a a a a s s" "b b c c d d" "e e e e e e";
    align-items: stretch;
  }
  .dgrid--home .ga-s { grid-area: s; display: flex; flex-direction: column; gap: 14px; }
  .dgrid--home .ga-s > * { margin-top: 0 !important; }
  .dgrid--home .ga-a { grid-area: a; }
  .dgrid--home .ga-b { grid-area: b; }
  .dgrid--home .ga-c { grid-area: c; }
  .dgrid--home .ga-d { grid-area: d; }
  .dgrid--home .ga-e { grid-area: e; }
  .dgrid--home .feature__title { max-width: none; font-size: clamp(34px, 3vw, 44px); }
  /* Side panel: the countdown becomes a compact tile, the goal a small card. */
  .dgrid--home .countdown { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; position: relative; }
  .dgrid--home .countdown > .icon { position: absolute; top: 18px; right: 16px; }
  .dgrid--home .countdown__days { font-size: 30px; line-height: 1.05; }
  .dgrid--home .goal-line { flex-wrap: wrap; padding: 16px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 10px 30px rgba(13, 17, 48, 0.06); }
  .dgrid--home .goal-line__bar { flex-basis: 100%; height: 8px; }
  .dgrid--home .banner { margin-top: 0; font-size: 14px; }
  /* Three tiles of the same height. */
  .dgrid--home .ga-b, .dgrid--home .ga-c, .dgrid--home .ga-d { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 20px 22px; }
  .dgrid--home .ga-b { flex-direction: row; align-items: center; }
  .dgrid--home .ga-d .progress { margin-top: auto; }
  .dgrid--home .ga-c .card__title, .dgrid--home .ga-d .card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 900px) {
  /* The stats sit under "your day", beside the duel card; the three tiles close the page. */
  .dgrid--home { grid-template-areas: "a a a a s s" "a a a a e e" "b b c c d d"; grid-template-rows: auto 1fr auto; }
  .dgrid--home .ga-e { align-self: end; gap: 10px; }
  .dgrid--home .ga-e .stat { padding: 12px 14px; }
  .dgrid--home .ga-e .stat__value { font-size: 24px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* Medium screens: the duel card gets the full width; "your day" and stats share the next row. */
  .dgrid--home { grid-template-areas: "a a a a a a" "s s s e e e" "b b b b b b" "c c c d d d"; grid-template-rows: auto auto auto auto; }
  .dgrid--home .ga-e { align-self: start; }
  .dgrid--home .ga-b { min-height: 0; }
}
@media (min-width: 900px) {
  /* League | Ranks: a compact switch, not a full-width bar. */
  .screen--tab .screen__body > .segmented--light { max-width: 360px; margin-left: 0; }
  /* Squad: the two small links sit together under the button. */
  .dgrid--squad .ga-f { justify-content: flex-start; gap: 24px; }
  /* Ranks: the sample note sits under "Play to climb", no empty corner. */
  .dgrid--ranks { grid-template-areas: "a b" "d b" "c b"; grid-template-rows: auto auto 1fr; }
  .dgrid--ranks .ga-c { align-self: start; }
}
/* The guest note sits under the duel card (phones) or under "your day" (wide screens). */
@media (min-width: 900px) {
  .dgrid--home { grid-template-areas: "a a a a s s" "a a a a n n" "a a a a e e" "b b c c d d"; grid-template-rows: auto auto 1fr auto; }
  .dgrid--home .ga-n { grid-area: n; }
  .dgrid--home .ga-n .banner { margin-top: 0; font-size: 14px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .dgrid--home { grid-template-areas: "a a a a a a" "s s s e e e" "n n n n n n" "b b b b b b" "c c c d d d"; grid-template-rows: auto auto auto auto auto; }
}
/* Short phone screens: a slimmer countdown, so "Start duel" stays in view. */
@media (max-width: 899px) and (max-height: 760px) {
  .countdown { padding: 12px 16px; }
  .countdown__label { font-size: 12px; }
  .countdown__days { font-size: 24px !important; }
  .goal-line { padding: 8px 14px; }
}
/* Short phone screens (360 × 640–760): a more compact Home, so the main button is in view. */
@media (max-width: 899px) and (max-height: 760px) {
  .screen--tab .screen__body > .title { font-size: 34px; margin-top: 2px; }
  .dgrid--home .feature { padding: 18px 18px 16px; }
  .dgrid--home .feature__title { font-size: 24px; }
  .dgrid--home .feature .small { font-size: 13px; }
  .dgrid--home .segmented { margin-top: 10px; }
  .dgrid--home .segmented button { min-height: 40px; }
  .dgrid--home .chips { margin-top: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dgrid--home .chips::-webkit-scrollbar { display: none; }
  .dgrid--home .chip { flex: none; font-size: 13px; padding: 6px 12px; min-height: 34px; }
  .dgrid--home .feature .btn { margin-top: 12px; min-height: 50px; }
}
/* Very short screens (about 360 × 640): the big "Today" heading gives its room to the duel card
   (it stays for screen readers). */
@media (max-width: 899px) and (max-height: 680px) {
  .title--today { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Telegram, next to Instagram and Facebook. */
.social--tg .social__icon { background: #229ED9; }
.tabbar .tabbar__follow .social--tg:hover { box-shadow: 0 8px 22px rgba(34, 158, 217, 0.3); }
/* You: the exam card's three buttons share the row on any phone width. */
.ga-b2 .btn-row { flex-wrap: wrap; gap: 8px; }
.ga-b2 .btn-row .btn { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
@media (min-width: 900px) {
  /* Home: stats sit right under "your day" (no gap when there is no countdown). */
  .dgrid--home .ga-e { align-self: start; }
}
/* Questions in parts (statement, conclusions, two equations) keep their line breaks. */
.question, .review__q, .warmup__q { white-space: pre-line; }