/* ============ TOKENS ============ */
:root {
  --bg: #101013;
  --bg-card: #17171b;
  --border: #26262c;
  --text: #f2f2f4;
  --text-muted: #9a9aa5;
  --blue-grad: linear-gradient(160deg, #5f74ad 0%, #93a5d6 45%, #e9edf8 100%);
  --blue-grad-soft: linear-gradient(160deg, #7d90c4 0%, #b9c6e8 55%, #eef1fa 100%);
  --dark-grad: linear-gradient(160deg, #3c4560 0%, #23262f 60%, #17181d 100%);
  --cream-grad: linear-gradient(160deg, #efe5c4 0%, #fbf7ea 100%);
  --cream: #efe5c4;
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  background: rgba(16, 16, 19, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.nav-logo {
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}

.nav-links { display: flex; gap: 36px; }

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream-grad);
  flex-shrink: 0;
}

.breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  display: flex; gap: 8px; align-items: center;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb strong { color: var(--text); font-weight: 600; }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 110px 64px 70px;
  max-width: 1360px;
  margin: 0 auto;
}

.hero-card-main {
  background: var(--blue-grad);
  border-radius: var(--radius-lg);
  padding: 56px 52px 48px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #14161d;
  box-shadow: 0 24px 80px -20px rgba(95, 116, 173, 0.35);
}

.hero-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: 0.65;
  margin-bottom: 16px;
}

.hero-card-main h1 {
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.hero-sub { font-size: 17px; line-height: 1.6; max-width: 460px; opacity: 0.78; font-weight: 500; }

.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.pill {
  background: rgba(20, 22, 29, 0.85);
  color: #eef1fa;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero-card-row { display: flex; gap: 18px; margin-top: 26px; }

.hero-card-cta {
  background: var(--cream-grad);
  color: #1c1a12;
  border-radius: var(--radius-md);
  padding: 22px 36px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.hero-card-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -12px rgba(239, 229, 196, 0.35); }
.hero-card-cta.small { flex: 0 0 auto; opacity: 0.92; }
.hero-card-cta span { transition: transform 0.25s; }
.hero-card-cta:hover span { transform: translateX(4px); }

.hero-stats {
  display: flex;
  gap: 64px;
  margin-top: 36px;
}

.stat { display: flex; flex-direction: column; gap: 5px; }
.stat-num { font-size: 34px; font-weight: 800; }
.stat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.hero-right { position: relative; display: flex; justify-content: center; }

.hero-glow {
  position: absolute;
  inset: -8% -12%;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(46, 110, 235, 0.28) 0%, rgba(46, 110, 235, 0.08) 45%, transparent 70%);
  pointer-events: none;
}

.hero-robots { position: relative; width: min(100%, 600px); height: auto; filter: drop-shadow(0 30px 60px rgba(30, 90, 220, 0.25)); }

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-arrow { animation: cue-bounce 1.6s ease-in-out infinite; }

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============ BATTLEGROUND ============ */
.battleground {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg-inner { text-align: center; width: 100%; padding: 40px 24px 20px; }

.bg-title {
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cream);
  background: var(--cream-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-sub { color: var(--text-muted); font-size: 16px; margin-top: 10px; }

.card-fan {
  position: relative;
  height: 380px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subject-card {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  background: var(--blue-grad-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.7);
  will-change: transform;
  cursor: default;
}

/* Gradient tiers: centre dark, adjacent light, outermost lightest */
.card-fan .subject-card:nth-child(2),
.card-fan .subject-card:nth-child(4) {
  background: linear-gradient(160deg, #7288bf 0%, #a9b8e2 55%, #e9edf8 100%);
}
.card-fan .subject-card:nth-child(1),
.card-fan .subject-card:nth-child(5) {
  background: linear-gradient(160deg, #aab9e1 0%, #d3dcf1 55%, #f5f7fc 100%);
}

.subject-card span {
  font-size: 24px;
  font-weight: 800;
  color: #171a24;
  letter-spacing: -0.01em;
}

.subject-card.center {
  background: var(--dark-grad);
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.subject-card.center span { color: var(--text); }
.subject-card.center em {
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.subject-card.center:hover { box-shadow: 0 0 0 2px rgba(147,165,214,0.5), 0 30px 70px -25px rgba(0,0,0,0.8); }

/* ============ PRICING ============ */
.pricing {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 0;
  overflow: hidden;
}

.pricing-title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #f2f2f4 20%, #efe5c4 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 56px;
}

.pricing-cards {
  display: flex;
  gap: 40px;
  z-index: 2;
}

.price-card {
  width: 300px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 32px 30px 36px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s, border-color 0.3s;
}
.price-card:hover { transform: translateY(-6px); border-color: rgba(239,229,196,0.35); }

.plan-name { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.plan-price { font-size: 44px; font-weight: 800; }
.plan-price span { font-size: 18px; color: var(--text-muted); font-weight: 600; }

.plan-list { list-style: none; margin: 24px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.plan-list li { font-size: 14px; color: var(--text-muted); padding-left: 20px; position: relative; }
.plan-list li::before { content: '✓'; position: absolute; left: 0; color: var(--cream); font-weight: 700; }

.plan-btn {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.plan-btn:hover { background: var(--cream-grad); color: #1c1a12; border-color: transparent; }

.pricing-robot {
  width: min(48vw, 520px);
  margin-top: -40px;
  z-index: 1;
  filter: drop-shadow(0 -10px 60px rgba(30, 90, 220, 0.3));
}

/* ============ MATHS PAGE ============ */
.maths-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 130px 64px 80px;
  min-height: 100vh;
}

.maths-title { font-size: clamp(44px, 5vw, 64px); font-weight: 900; letter-spacing: 0.01em; }
.maths-sub { color: var(--text-muted); font-size: 14px; margin-top: 6px; }
.maths-sublink { color: #93a5d6; text-decoration: none; }
.maths-sublink:hover { text-decoration: underline; }

.stat-chips { display: flex; gap: 16px; margin-top: 28px; }

.chip {
  border-radius: 16px;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}
.chip-num { font-size: 20px; font-weight: 800; }
.chip-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }

.chip-blue { background: var(--blue-grad); color: #14161d; }
.chip-blue .chip-label { color: rgba(20,22,29,0.65); }
.chip-cream { background: var(--cream-grad); color: #1c1a12; }
.chip-cream .chip-label { color: rgba(28,26,18,0.6); }
.chip-dark { background: transparent; border: 1px solid var(--border); }
.chip-dark .chip-label { color: var(--text-muted); }

.chapter-list { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }

.chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-radius: 14px;
  border: none;
  background: var(--blue-grad-soft);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: #171a24;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chapter-row:hover { transform: translateX(6px); box-shadow: -6px 0 0 0 rgba(239,229,196,0.5); }

.chapter-row.active-row { background: var(--dark-grad); color: var(--text); }

/* Stepped gradient down the list: each chapter one shade lighter than the last */
.chapter-list .chapter-row:nth-child(2) {
  background: linear-gradient(160deg, #414d6e 0%, #5f6f9c 60%, #7c8cb8 100%);
  color: var(--text);
}
.chapter-list .chapter-row:nth-child(3) {
  background: linear-gradient(160deg, #55648e 0%, #7887b3 60%, #97a5cd 100%);
  color: var(--text);
}
.chapter-list .chapter-row:nth-child(4) {
  background: linear-gradient(160deg, #6d7ea8 0%, #92a1c9 60%, #b3bfdd 100%);
}
.chapter-list .chapter-row:nth-child(5) {
  background: linear-gradient(160deg, #8291bb 0%, #a9b6d8 60%, #c9d2e9 100%);
}
.chapter-list .chapter-row:nth-child(6) {
  background: linear-gradient(160deg, #97a5cc 0%, #bfc9e3 60%, #dbe1f1 100%);
}
.chapter-list .chapter-row:nth-child(7) {
  background: linear-gradient(160deg, #adb9d9 0%, #d2daee 60%, #e9edf7 100%);
}
.chapter-list .chapter-row:nth-child(8) {
  background: linear-gradient(160deg, #c3cde6 0%, #e2e7f5 60%, #f4f6fc 100%);
}

.ch-info { display: flex; flex-direction: column; gap: 3px; }
.ch-info strong { font-size: 15px; font-weight: 700; }
.ch-info small { font-size: 12px; opacity: 0.65; }

.ch-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ch-acc strong { font-size: 16px; font-weight: 800; }
.ch-acc small { font-size: 11px; opacity: 0.65; }
.ch-acc.muted { font-size: 12px; font-weight: 600; opacity: 0.55; }

.maths-right {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: sticky;
  top: 100px;
  height: calc(100vh - 140px);
}
.maths-robot { width: min(100%, 380px); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5)); }

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 8, 10, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.open { opacity: 1; }

.modal {
  width: min(720px, 100%);
  background: #141418;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px 36px 36px;
  position: relative;
  transform: translateY(24px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9);
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 22px; right: 24px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--text); }

.modal h3 { font-size: 20px; font-weight: 800; }
.modal-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; margin-bottom: 24px; }

.modal-options { display: flex; flex-direction: column; gap: 12px; }
.modal-options[hidden], .modal-sub[hidden] { display: none; }

.mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.mode-option:hover:not(.disabled):not(.selected) { background: rgba(255,255,255,0.09); }
.mode-option:hover:not(.disabled) { transform: translateX(4px); }

.mode-option.selected { background: var(--blue-grad); color: #14161d; border-color: transparent; }
.mode-option.selected .mode-meta, .mode-option.selected .mode-dot { color: rgba(20,22,29,0.6); }
.mode-option.selected .mode-arrow { color: #14161d; }

.mode-name { font-weight: 700; }
.mode-dot { color: var(--text-muted); }
.mode-meta { color: var(--text-muted); font-size: 13px; }
.mode-arrow { margin-left: auto; color: var(--text-muted); }

.mode-option.disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Topic list inside the chapter modal ---- */
/* The whole-chapter row is the primary action, so it keeps the full pill
   padding. Topic rows are tighter and squarer so a list of five or six of them
   reads as a list rather than as six equally-weighted buttons. */
.topic-heading {
  margin: 18px 0 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e79;
}
.topic-heading[hidden] { display: none; }

.topic-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }

.mode-option.topic-option { padding: 12px 16px; border-radius: 14px; font-size: 14px; }
.topic-num { font-size: 11px; color: var(--text-muted); min-width: 30px; }
.topic-name { flex: 1; font-weight: 500; text-align: left; }
.topic-count { font-size: 12px; }
.mode-option.topic-option.selected .topic-num { color: rgba(20,22,29,0.6); }

/* ---- Start-practice view inside the modal ---- */
.modal-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 6px;
  animation: start-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-start[hidden] { display: none; }

@keyframes start-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.start-robot {
  width: 190px;
  filter: drop-shadow(0 18px 40px rgba(30, 90, 220, 0.25));
}

.start-callout { font-size: 22px; font-weight: 800; margin-top: 4px; }
.start-callout em { font-style: normal; color: var(--cream); }

.start-mode { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

.start-btn {
  margin-top: 20px;
  padding: 16px 42px;
  border: none;
  border-radius: 999px;
  background: var(--cream-grad);
  color: #1d3461;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.start-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(239, 229, 196, 0.45); }

/* ============ PRACTICE PAGE ============ */
/* minmax(0, 1fr) on the middle column, not auto: `auto` sizes to content, so a
   162-question track pushed the nav wider than the page. This caps the column
   at the space actually available and lets the segments shrink inside it. */
/* Equal side columns, so the track column is centred on the page rather than
   just "whatever is left between the logo and the meta block" — the logo is
   narrow and the meta block is wide, which pushed the track towards the logo.
   minmax(0, …) on every column: plain `fr` has min-width auto, so a long track
   would still push the nav wider than the page. */
.practice-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.progress-track {
  display: flex;
  gap: 8px;   /* overridden per-set by segGap() in practice.js */
  width: 100%;
  min-width: 0;
  padding-top: 6px;
}

/* One segment per question, however many there are: they divide the track
   equally (flex 1 1 0) and shrink as the count grows, capped at the original
   44px so a 3-question topic doesn't render three enormous slabs. */
.seg {
  flex: 1 1 0;
  min-width: 0;
  max-width: 44px;
  height: 8px;
  border-radius: 999px;
  background: #d9d0b2;
  opacity: 0.85;
}
.seg.done { background: var(--blue-grad); opacity: 1; }
.seg.current { background: #f5efdc; box-shadow: 0 0 10px rgba(239, 229, 196, 0.5); }

.practice-meta {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.streak { font-weight: 800; font-size: 15px; color: var(--text); }
.chapter-tag { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.practice-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 140px 32px 120px;
}

.question-row { display: flex; gap: 18px; align-items: flex-start; padding: 0 8px; }
.q-mark { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.3; }
.q-text { font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; line-height: 1.35; max-width: 860px; }
.q-text p { margin: 0; }

/* Board questions that bundle parts — "(a) … (b) … (c) …" — are broken out of
   the paragraph into a list so each part reads on its own line. The label keeps
   its original "(a)" form rather than being renumbered by the browser, so the
   question still matches the printed paper exactly. */
.q-parts { list-style: none; margin: 14px 0 0; padding: 0; }
.q-parts li {
  display: flex;
  gap: 12px;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.45;
  padding: 7px 0;
}
.q-parts li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.q-parts .part-label { flex: none; color: var(--ember, #ff7a4d); font-weight: 800; }
.q-parts .part-text { flex: 1; }

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 56px;
  margin-top: 44px;
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 32px 30px;
  min-height: 130px;
  border-radius: 34px;
  background: linear-gradient(160deg, rgba(70, 74, 88, 0.55) 0%, rgba(38, 40, 50, 0.65) 100%);
  border: 1px solid rgba(190, 200, 235, 0.32);
  box-shadow: 0 0 24px rgba(150, 165, 220, 0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  text-align: left;
}
.option-card:hover:not(.tried) { transform: translateY(-2px); border-color: rgba(210, 220, 250, 0.55); }

.option-card.selected {
  border-color: rgba(239, 229, 196, 0.9);
  box-shadow: 0 0 30px rgba(239, 229, 196, 0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}

.option-card.tried { cursor: not-allowed; opacity: 0.75; }

.opt-letter { font-size: 14px; color: var(--text-muted); font-weight: 600; }
.opt-value { font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; line-height: 1.4; color: var(--cream); }

/* Options for a board short/long answer question are whole statements, not the
   one-or-two words an MCQ usually offers. At 32px each one would fill the
   screen, so a set with any long option drops to a single readable column.
   The class is set in practice.js from the longest option's length. */
.options-grid.options-prose { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
.options-grid.options-prose .option-card { padding: 20px 24px; }
.options-grid.options-prose .opt-value {
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 600;
  line-height: 1.5;
  display: block;
  margin-top: 6px;
}

.answer-badge {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.badge-correct { background: rgba(56, 170, 100, 0.18); color: #4ade80; border: 1.5px solid #4ade80; }
.badge-wrong { background: rgba(220, 70, 70, 0.15); color: #f87171; border: 1.5px solid #f87171; }

@keyframes badge-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.hint-panel, .solution-panel {
  margin-top: 34px;
  padding: 20px 26px;
  border-radius: 18px;
  border: 1px solid rgba(239, 229, 196, 0.35);
  background: rgba(239, 229, 196, 0.05);
  font-size: 15px;
  line-height: 1.6;
}
.hint-panel strong, .solution-panel strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 8px;
}
.hint-panel p, .solution-panel p { color: var(--text-muted); }
.solution-panel em { font-style: normal; font-weight: 800; color: var(--text); }

.practice-actions {
  display: flex;
  gap: 22px;
  margin-top: 44px;
  padding: 0 8px;
}

.hint-btn {
  padding: 18px 30px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.hint-btn:hover:not(:disabled) { background: rgba(255,255,255,0.09); }
.hint-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.check-btn {
  padding: 18px 36px;
  border-radius: 16px;
  border: none;
  background: var(--cream-grad);
  color: #1d3461;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.check-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 34px -12px rgba(239, 229, 196, 0.4); }
.check-btn:disabled { cursor: default; }
.check-btn.nudge { animation: nudge 0.35s; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
}

.practice-robot {
  position: fixed;
  right: 36px;
  bottom: 24px;
  width: 230px;
  pointer-events: none;
  filter: drop-shadow(0 16px 30px rgba(30, 90, 220, 0.25));
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .nav { padding: 14px 20px; }
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; padding: 110px 24px 40px; text-align: left; }
  .hero-right { order: -1; }
  .hero-robots { width: min(70vw, 380px); }
  .hero-stats { gap: 32px; }
  .card-fan { height: 380px; }
  .subject-card { width: 200px; height: 200px; }
  .pricing-cards { flex-direction: column; }
  .maths-main { grid-template-columns: 1fr; padding: 110px 24px 60px; }
  .maths-right { display: none; }
  .stat-chips { flex-wrap: wrap; }
  .progress-track { display: none; }
  .options-grid { grid-template-columns: 1fr; gap: 18px; }
  .practice-main { padding: 120px 20px 140px; }
  .practice-robot { width: 100px; right: 16px; bottom: 12px; }
}

/* ============ QUESTION-BANK ENGINE ADDITIONS ============ */
.subject-card[href] { cursor: pointer; }
.subject-card em { font-style: normal; font-size: 13px; font-weight: 600; color: rgba(23, 26, 36, 0.55); }
.subject-card.center em { color: var(--text-muted); }
.subject-card[href]:hover { box-shadow: 0 0 0 2px rgba(239, 229, 196, 0.4), 0 30px 70px -25px rgba(0,0,0,0.8); }

/* Locked chapters (no content yet) */
.chapter-row.locked { opacity: 0.45; cursor: not-allowed; }
.chapter-row.locked:hover { transform: none; box-shadow: none; }

/* XP tag in the practice nav */
.xp-tag { font-size: 12px; font-weight: 700; color: var(--cream); }

/* End-of-set summary */
.summary-view {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 32px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.summary-view[hidden] { display: none; }
.practice-main[hidden] { display: none; }
.summary-robot { width: 250px; filter: drop-shadow(0 -6px 40px rgba(30, 90, 220, 0.3)); }
.summary-title { font-size: clamp(34px, 4vw, 52px); font-weight: 900; margin-top: 6px; }
.summary-sub { color: var(--text-muted); margin-top: 10px; font-size: 15px; }
.summary-stats { display: flex; gap: 16px; margin-top: 28px; }
.summary-actions { display: flex; gap: 18px; margin-top: 36px; }

/* ============ VARIANT CHOOSER + SA/LA MODE ============ */
.variant-row { text-decoration: none; padding: 26px 28px; }
.variant-row .ch-info strong { font-size: 18px; }
.variant-row .ch-acc strong { font-size: 22px; }

.q-block { flex: 1; }
.q-meta {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.85;
}
.q-meta[hidden] { display: none; }

.self-mark { margin-top: 34px; }
.self-mark[hidden] { display: none; }
.self-mark-label { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.self-mark-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.mark-btn {
  padding: 16px 26px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.mark-btn span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mark-btn:hover { transform: translateY(-2px); }
.mark-got:hover { border-color: #4ade80; }
.mark-partial:hover { border-color: var(--cream); }
.mark-missed:hover { border-color: #f87171; }

/* ============ REVENGE ROUND ============ */
:root { --ember: #ff7a4d; --ember-dim: #e8c9b8; }

/* ---- Banner on the subject page ---- */
.revenge-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0 4px;
  padding: 20px 24px;
  border-radius: 20px;
  text-decoration: none;
  background: linear-gradient(150deg, #2b1d17 0%, #1a1519 62%);
  border: 1px solid rgba(255, 122, 77, 0.32);
  transition: transform 0.2s, border-color 0.2s;
}
.revenge-banner:hover { transform: translateY(-2px); border-color: rgba(255, 122, 77, 0.6); }

.revenge-copy { flex: 1; min-width: 0; }
.revenge-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--ember);
}
.kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); display: inline-block; }
.revenge-count { font-size: 22px; font-weight: 800; color: var(--text); margin-top: 7px; }
.revenge-sub { font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.revenge-pills { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.revenge-pill {
  font-size: 11px; font-weight: 600; color: var(--ember-dim);
  background: rgba(255, 122, 77, 0.12);
  border: 1px solid rgba(255, 122, 77, 0.22);
  padding: 4px 10px; border-radius: 999px;
}
.revenge-cta {
  flex-shrink: 0;
  background: var(--cream-grad); color: #1d3461;
  font-size: 14px; font-weight: 800;
  padding: 15px 24px; border-radius: 14px; white-space: nowrap;
}

/* ---- Arena page ---- */
.revenge-page {
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 40px 40px;
}
.arena { max-width: 1080px; margin: 0 auto; padding: 130px 48px 90px; }
.arena-head { display: flex; gap: 28px; align-items: stretch; }
.arena-intro { flex: 1; min-width: 0; }
.arena-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: var(--ember);
}
.arena-title {
  font-size: clamp(40px, 5vw, 60px); font-weight: 900;
  color: var(--text); margin-top: 10px; line-height: 1; letter-spacing: 0.01em;
}
.arena-sub { font-size: 14px; color: var(--text-muted); margin-top: 10px; max-width: 520px; line-height: 1.55; }

.campaign { margin-top: 26px; max-width: 560px; }
.campaign-head { display: flex; justify-content: space-between; align-items: baseline; }
.campaign-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-muted); }
.campaign-count { font-size: 12px; font-weight: 700; color: var(--cream); }
.campaign-bar { display: flex; gap: 4px; margin-top: 9px; }
.camp-seg { flex: 1; height: 8px; border-radius: 2px; background: #2a2a31; }
.camp-seg.camp-done { background: var(--cream); }
.camp-seg.camp-active { background: var(--ember); }

.fighter {
  flex-shrink: 0; width: 190px;
  border-radius: 20px; border: 1px solid #2f3550;
  background: linear-gradient(170deg, #1b2136 0%, #131318 75%);
  padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.fighter-label { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: #8fa3d6; }
.fighter-robot { width: 108px; margin: 6px 0 4px; filter: drop-shadow(0 10px 24px rgba(30, 90, 220, 0.35)); }
.fighter-tier { font-size: 17px; font-weight: 900; color: var(--text); letter-spacing: 0.05em; }
.fighter-xp { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.fighter-streak { margin-top: 11px; padding-top: 11px; border-top: 1px solid #2a2a31; width: 100%; font-size: 12px; font-weight: 700; color: var(--cream); }

.target-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; margin-top: 30px;
}

.target-card {
  position: relative; padding: 18px 20px;
  border-radius: 16px; background: #15151a; border: 1px solid var(--border);
}
.target-card.target-hot { border-color: rgba(255, 122, 77, 0.3); }
.bracket { position: absolute; width: 14px; height: 14px; border-radius: 0; border-color: #6c7590; }
.bracket-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.bracket-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.target-hot .bracket { border-color: var(--ember); }
.target-dead .bracket { border-color: #4ade80; }

.target-top { display: flex; justify-content: space-between; align-items: center; }
.threat { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--text-muted); }
.target-hot .threat { color: var(--ember); }
.threat-dead { color: #4ade80; }
.bounty { font-size: 12px; font-weight: 800; color: var(--cream); }
.bounty-dead { color: #4ade80; font-size: 15px; }

.target-q { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.45; margin-top: 11px; }
.target-q-dead { color: #71717a; text-decoration: line-through; }

.plates { display: flex; gap: 5px; margin-top: 13px; }
.plate { flex: 1; height: 7px; border-radius: 2px; background: #2a2a31; }
.plate.plate-full { background: var(--ember); }
.target-card:not(.target-hot) .plate.plate-full { background: var(--cream); }
.plate.plate-dead { background: #1f2b23; }

.target-foot { display: flex; justify-content: space-between; margin-top: 9px; }
.target-chapter { font-size: 11px; color: var(--text-muted); }
.target-status { font-size: 11px; font-weight: 700; color: var(--cream); }
.target-hot .target-status { color: var(--ember); }
.status-dead { color: #4ade80; }
.target-dead { background: #111114; border-color: #24352a; opacity: 0.6; }

.arena-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid #24242b;
}
.arena-actions[hidden] { display: none; }
.arena-actions-left { display: flex; align-items: center; gap: 16px; }
.arena-cta { letter-spacing: 0.04em; font-weight: 900; }
.arena-cta:disabled { opacity: 0.5; }
.arena-note { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.bonus-label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--ember); text-align: right; }
.bonus-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; text-align: right; }

.arena-empty { text-align: center; padding: 60px 20px; }
.arena-empty[hidden] { display: none; }
.empty-title { font-size: 26px; font-weight: 800; color: var(--text); }
.empty-sub { font-size: 14px; color: var(--text-muted); margin: 10px auto 24px; max-width: 420px; line-height: 1.6; }
.arena-empty .check-btn { display: inline-flex; text-decoration: none; }

/* ---- Plate-break flash on the practice page ---- */
.plate-flash {
  margin-top: 26px; padding: 14px 20px;
  border-radius: 14px; border: 1px solid rgba(255, 122, 77, 0.4);
  background: rgba(255, 122, 77, 0.1);
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--ember);
}
.plate-flash[hidden] { display: none; }
.plate-flash.flash-in { animation: flash-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes flash-pop {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 900px) {
  .arena { padding: 110px 20px 70px; }
  .arena-head { flex-direction: column; }
  .fighter { width: 100%; flex-direction: row; justify-content: center; gap: 18px; }
  .fighter-robot { width: 70px; margin: 0; }
  .fighter-streak { border-top: none; border-left: 1px solid #2a2a31; padding: 0 0 0 16px; margin: 0; width: auto; }
  .revenge-banner { flex-direction: column; align-items: flex-start; }
  .arena-actions { flex-direction: column; align-items: flex-start; }
}

/* ---- Sector (chapter) list inside the arena ---- */
.sector-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--text-muted); margin-top: 32px; }
.sector-label[hidden] { display: none; }
.sector-list { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }

.sector-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 16px;
  background: #15151a; border: 1px solid var(--border);
  text-decoration: none; transition: transform 0.2s, border-color 0.2s;
}
a.sector-row:hover { transform: translateX(4px); border-color: rgba(255, 122, 77, 0.55); }
.sector-row.sector-hot { border-color: rgba(255, 122, 77, 0.3); }

.sector-chevron { font-size: 22px; font-weight: 800; color: #6c7590; line-height: 1; }
.sector-hot .sector-chevron { color: var(--ember); }
.cleared-tick { color: #4ade80; font-size: 18px; }

.sector-info { flex: 1; min-width: 0; }
.sector-name { font-size: 16px; font-weight: 800; color: var(--text); }
.sector-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.sector-threat { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--text-muted); white-space: nowrap; }
.sector-hot .sector-threat { color: var(--ember); }
.threat-cleared { color: #4ade80; }

.sector-open {
  flex-shrink: 0; font-size: 12px; font-weight: 800; white-space: nowrap;
  color: #ffb08c; background: rgba(255, 122, 77, 0.12);
  border: 1px solid rgba(255, 122, 77, 0.3);
  padding: 9px 16px; border-radius: 10px;
}
.sector-row:not(.sector-hot) .sector-open { color: var(--text-muted); background: rgba(255,255,255,0.04); border-color: var(--border); }
.sector-cleared { background: #111114; border-color: #24352a; opacity: 0.62; }

/* ---- Chapter view ---- */
.back-link {
  display: inline-block; font-size: 12px; font-weight: 700;
  color: var(--text-muted); text-decoration: none; margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.back-link:hover { color: var(--text); }
.chapter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.chapter-threat { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--ember); white-space: nowrap; padding-top: 8px; }

.target-retry {
  font-size: 11.5px; font-weight: 800; text-decoration: none;
  background: var(--cream-grad); color: #1d3461;
  padding: 8px 15px; border-radius: 10px;
  transition: transform 0.2s;
}
.target-retry:hover { transform: translateY(-1px); }
.target-foot { align-items: center; }

@media (max-width: 900px) {
  .sector-row { flex-wrap: wrap; gap: 10px; }
  .sector-threat, .sector-open { font-size: 11px; }
  .chapter-head { flex-direction: column; }
}

/* Breadcrumbs get long on the revenge pages — drop them on narrow screens,
   where the in-page back link already covers navigation */
@media (max-width: 820px) {
  .breadcrumb { display: none; }
}

/* ---- Past-paper question clips (original print kept as an image) ---- */
.q-text.has-clip { font-size: 0; }
.q-clip {
  display: block;
  background: #f7f7f4;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  max-width: 860px;
}
.q-clip img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* ---- Figure that a question depends on (cropped from the original book) ---- */
.q-figure {
  margin-top: 16px;
  background: #f7f7f4;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 560px;
}
.q-figure[hidden] { display: none; }
.q-figure img { display: block; width: 100%; height: auto; }

/* Diagrams we drew are built for the dark theme, so they keep the page's own
   surface. Only the cropped bitmaps from the books need the light card. */
.q-figure.q-figure-drawn {
  background: var(--bg-card);
  max-width: 380px;
  padding: 18px 20px;
}
.q-figure.q-figure-drawn svg { display: block; width: 100%; height: auto; }

/* ============ DISCUSS ============ */
/* Standalone board: filter rail on the left, helpers and badges on the right.
   Uses the same tokens as every other page so it reads as one app. */

/* A `display` rule on an element beats the `hidden` attribute, so panels that
   are flex when open (the composer, the reply boxes) would ignore `hidden`
   entirely. This puts the attribute back in charge. */
[hidden] { display: none !important; }
.d-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 104px 28px 72px;
}
.d-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.d-topbar .maths-title { margin: 0; }

.d-btn {
  background: var(--cream-grad); color: #101013;
  border: none; border-radius: var(--radius-md);
  padding: 11px 18px; font: 600 14px/1 'Inter', system-ui, sans-serif;
  cursor: pointer; white-space: nowrap;
}
.d-btn.sm { padding: 8px 13px; font-size: 13px; }
.d-btn:hover { filter: brightness(1.06); }
.d-linkbtn {
  background: none; border: none; color: var(--text-muted);
  font: 500 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; padding: 4px 0;
}
.d-linkbtn:hover { color: var(--text); }

.d-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 10px; }
.d-filters select, .d-filters input {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 12px; font: 400 13px/1 'Inter', system-ui, sans-serif;
}
.d-filters select { cursor: pointer; }
.d-filters select:disabled { color: var(--text-muted); cursor: not-allowed; }
.d-filters input { flex: 1; min-width: 180px; }
.d-filters select:focus, .d-filters input:focus { outline: 2px solid #5f74ad; outline-offset: 1px; }

.d-sorts { display: flex; align-items: center; gap: 4px; margin-bottom: 18px; }
.d-sorts button {
  background: none; border: none; color: var(--text-muted);
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  padding: 6px 12px; border-radius: 12px; cursor: pointer;
}
.d-sorts button.on { background: #93a5d6; color: #101013; }
.d-count { margin-left: auto; color: var(--text-muted); font-size: 12px; }

.d-ask {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.d-ask-row { display: flex; gap: 8px; flex-wrap: wrap; }
.d-ask select, .d-ask input, .d-ask textarea {
  background: #101013; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; font: 400 13px/1.5 'Inter', system-ui, sans-serif;
  width: 100%; resize: vertical;
}
.d-ask-row select { flex: 1; min-width: 150px; width: auto; }
.d-ask-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.d-err { color: #e58b8b; font-size: 12px; min-height: 14px; margin: 0; }

.d-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 15px 17px; margin-bottom: 11px;
  cursor: pointer;
}
.d-card:hover { border-color: #3a3a44; }
.d-card.d-thread { cursor: default; }
.d-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.d-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--dark-grad); color: #e9edf8;
  font: 600 10px/26px 'Inter', system-ui, sans-serif; text-align: center; flex: none;
}
.d-avatar.sm { width: 22px; height: 22px; font-size: 9px; line-height: 22px; }
.d-author { color: var(--text); font-size: 13px; font-weight: 500; }
.d-time { color: var(--text-muted); font-size: 12px; margin-left: auto; }

.d-badge { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 11px; }
.d-badge-cream { background: var(--cream); color: #101013; }
.d-badge-blue  { background: #93a5d6; color: #101013; }
.d-badge-dark  { background: var(--border); color: var(--cream); }

.d-title { color: var(--text); font-size: 15px; font-weight: 600; margin: 0 0 5px; }
.d-thread-title { color: var(--text); font-size: 19px; font-weight: 700; margin: 4px 0 8px; }
.d-body { color: var(--text-muted); font-size: 13px; line-height: 1.65; margin: 0; white-space: pre-wrap; }
.d-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; }
.d-tags { color: #93a5d6; font-size: 12px; }
.d-metric { color: var(--text-muted); font-size: 12px; }
.d-foot .d-metric { margin-left: auto; }
.d-solved { background: #1d3a2e; color: #9fe1cb; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 11px; }

.d-like {
  background: none; border: none; color: var(--text-muted);
  font: 500 12px/1 'Inter', system-ui, sans-serif; cursor: pointer; padding: 2px 0;
}
.d-like.on, .d-like:hover { color: #93a5d6; }

.d-back { display: inline-block; margin-bottom: 12px; }
.d-answers { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.d-answer { border-left: 2px solid var(--border); padding: 0 0 0 13px; margin-bottom: 16px; }
.d-answer.is-solved { border-left-color: #9fe1cb; }
.d-answer.d-reply { margin-left: 22px; }
.d-answer-foot { display: flex; align-items: center; gap: 15px; margin-top: 8px; }
.d-replybox { margin-top: 9px; display: flex; gap: 8px; align-items: flex-start; }
.d-replybox textarea {
  flex: 1; background: #101013; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px;
  font: 400 13px/1.5 'Inter', system-ui, sans-serif; resize: vertical;
}
.d-composer { margin-top: 18px; display: flex; gap: 9px; align-items: flex-start; }
.d-composer textarea {
  flex: 1; background: #101013; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  font: 400 13px/1.5 'Inter', system-ui, sans-serif; resize: vertical;
}

.d-empty { color: var(--text-muted); font-size: 13px; padding: 26px 0; text-align: center; }
.d-empty.sm { padding: 12px 0; text-align: left; }

.d-right { display: flex; flex-direction: column; gap: 14px; }
.d-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px 16px; }
.d-panel-title { color: var(--text); font-size: 13px; font-weight: 600; margin: 0 0 11px; }
.d-leaders { list-style: none; margin: 0; padding: 0; }
.d-leaders li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.d-rank { color: var(--text-muted); font-size: 12px; width: 13px; flex: none; }
.d-leaders .d-metric { margin-left: auto; }
.d-hint { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin: 0; }
.d-badgerow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.d-note { color: var(--text-muted); font-size: 11px; line-height: 1.6; margin: 0; opacity: .75; }

@media (max-width: 900px) {
  .d-main { grid-template-columns: minmax(0, 1fr); padding: 92px 16px 56px; }
  /* The rail stays BELOW the feed on a phone. Floated above, the leaderboard
     fills the whole first screen and you scroll past five names to reach the
     first doubt — which is the thing the page is for. */
  .d-right { margin-top: 26px; }
  .d-topbar { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ============ DUEL ============ */
/* A duel has to read as a game, not a form. Three things carry that: motion on
   every state change, a clock you can feel draining, and scores that move
   rather than blink. The rest is the same dark surface as everywhere else — a
   game skin bolted onto a study app looks like a different product. */

.duel-page { min-height: 100vh; }
.duel-main { max-width: 720px; margin: 0 auto; padding: 104px 20px 64px; }
.duel-screen { animation: duel-in .32s cubic-bezier(.2,.8,.3,1) both; }
@keyframes duel-in { from { opacity: 0; transform: translateY(14px); } }

.duel-h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
.duel-warn { color: #d9b26a; font-size: 13px; margin: 10px 0 0; line-height: 1.6; }

.duel-go {
  background: var(--cream-grad); color: #101013; border: none;
  border-radius: var(--radius-md); padding: 15px 22px; width: 100%;
  font: 700 15px/1 'Inter', system-ui, sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, filter .12s ease;
}
.duel-go:hover { filter: brightness(1.07); transform: translateY(-1px); }
.duel-go:active { transform: scale(.985); }
.duel-go:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.duel-ghost {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius-md); padding: 15px 22px; width: 100%;
  font: 600 15px/1 'Inter', system-ui, sans-serif; cursor: pointer;
}
.duel-ghost:hover { color: var(--text); border-color: #3a3a44; }
.duel-linkbtn {
  background: none; border: none; color: var(--text-muted);
  font: 500 13px/1 'Inter', system-ui, sans-serif; cursor: pointer;
  padding: 8px 0; display: block; margin: 6px auto 0;
}
.duel-linkbtn:hover { color: var(--text); }

/* ---- tier strip ---- */
.duel-tierstrip {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.tier-badge {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 800 18px/1 'Inter', system-ui, sans-serif; color: #101013;
  background: var(--cream); transition: background .4s ease;
}
.tier-meta { flex: 1; min-width: 0; }
.tier-name { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.tier-bar { height: 6px; background: #26262c; border-radius: 3px; overflow: hidden; }
.tier-bar i { display: block; height: 100%; width: 0; background: var(--cream); border-radius: 3px; }
.tier-sub { font-size: 11px; color: var(--text-muted); margin: 6px 0 0; }
.tier-rating { text-align: right; }
.tier-rating span { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tier-rating small { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- arena cards ---- */
.arena-grid { display: grid; gap: 10px; margin-bottom: 18px; }
.arena-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; cursor: pointer; text-align: left; width: 100%; color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.arena-card:hover { border-color: #3a3a44; transform: translateY(-2px); }
.arena-card.on { border-color: var(--cream); background: #1c1a14; }
.arena-card.locked { opacity: .45; cursor: not-allowed; transform: none; }
.arena-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.arena-card p { font-size: 13px; color: var(--text-muted); margin: 0; }
.arena-card .pool { font-size: 11px; color: var(--text-muted); margin-top: 8px; display: block; }

.arena-config {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.cfg-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cfg-row label { font-size: 13px; color: var(--text-muted); width: 68px; flex-shrink: 0; }
.cfg-row select {
  flex: 1; background: #101013; color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; font: 500 14px 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.len-pills { display: flex; gap: 6px; flex: 1; }
.len-pills button {
  flex: 1; background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 12px; padding: 10px 4px; font: 600 13px 'Inter', system-ui, sans-serif;
  cursor: pointer; transition: all .14s ease;
}
.len-pills button.on { background: var(--blue-grad); color: #171a24; border-color: transparent; }

/* ---- lobby ---- */
.lobby-arena { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.lobby-hint { font-size: 13px; color: var(--text-muted); text-align: center; margin: 22px 0 10px; }
.lobby-orbit { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; gap: 76px; }
.orbit-ring {
  position: absolute; width: 118px; height: 118px; border-radius: 50%;
  border: 1px dashed #3a3a44; animation: orbit-spin 9s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orbit-you, .orbit-them {
  width: 62px; height: 62px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 17px; z-index: 1;
}
.orbit-you { background: var(--blue-grad); color: #171a24; }
.orbit-them { background: #1c1c22; border: 1px dashed #3a3a44; color: var(--text-muted); animation: orbit-wait 1.5s ease-in-out infinite; }
@keyframes orbit-wait { 50% { opacity: .35; } }
.lobby-link { display: flex; gap: 8px; }
.lobby-link input {
  flex: 1; background: #101013; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 12px; padding: 11px 13px; font: 400 12px 'Inter', system-ui, sans-serif;
}
.lobby-link button {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 11px 16px; font: 600 13px 'Inter', system-ui, sans-serif; cursor: pointer;
}

/* ---- duel HUD ---- */
.duel-hud { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.hud-arena { font-size: 12px; color: var(--text-muted); }
.hud-round { font-size: 17px; font-weight: 700; margin-top: 2px; }
.hud-timer { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.timer-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: #26262c; stroke-width: 5; }
/* 2 * pi * 27 = 169.6. Emptying the ring is a stroke-dashoffset animation, which
   the browser can run on the compositor — a width transition cannot. */
.ring-fill {
  fill: none; stroke: var(--cream); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 169.6; stroke-dashoffset: 0; transition: stroke .3s ease;
}
.hud-timer.urgent .ring-fill { stroke: #d98a8a; }
.hud-timer.urgent { animation: t-pulse .7s ease-in-out infinite; }
@keyframes t-pulse { 50% { transform: scale(1.07); } }
.hud-timer span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---- roster ---- */
.roster { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ros-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  position: relative; overflow: hidden;
}
.ros-row.me { border-color: #3a3a44; }
.ros-rank { font-size: 12px; color: var(--text-muted); width: 12px; }
.ros-av {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; background: var(--dark-grad); color: #e9edf8;
}
.ros-row.me .ros-av { background: var(--blue-grad); color: #171a24; }
.ros-name { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ros-state { font-size: 11px; color: var(--text-muted); }
.ros-state.in { color: #7fb894; }
.ros-score { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
/* Points earned fly out of the row they belong to, so at five players you can
   still tell who just scored. */
.ros-pop {
  position: absolute; right: 12px; font-size: 13px; font-weight: 800;
  pointer-events: none; opacity: 0;
}

/* ---- question ---- */
.q-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.q-text { font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.q-text .q-parts { list-style: none; margin-top: 8px; }
.q-text .q-parts li { display: flex; gap: 8px; margin-top: 5px; }
.q-figure { margin-bottom: 14px; display: flex; justify-content: center; }
.q-figure svg { max-width: 100%; height: auto; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt {
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 14px; padding: 13px 15px; text-align: left; cursor: pointer;
  font: 500 14px/1.45 'Inter', system-ui, sans-serif;
  transition: border-color .14s ease, background .14s ease, transform .1s ease;
}
.opt:hover:not(:disabled) { border-color: #3a3a44; background: #1c1c22; }
.opt:active:not(:disabled) { transform: scale(.985); }
.opt:disabled { cursor: default; }
.opt.picked { border-color: var(--cream); background: #1c1a14; color: var(--cream); }
.opt.right { border-color: #4c8a63; background: #16251c; color: #a8dcbd; }
.opt.wrong { border-color: #8a4c4c; background: #251616; color: #dca8a8; }
.q-status { font-size: 12px; color: var(--text-muted); margin-top: 12px; min-height: 17px; }
.q-status .hint-out { color: var(--cream); }
@keyframes q-shake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.q-card.shake { animation: q-shake .4s ease; }

/* ---- result ---- */
.res-verdict { font-size: 32px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 16px; }
.res-verdict.win { color: var(--cream); }
.res-verdict.lose { color: var(--text-muted); }
.res-board { display: flex; flex-direction: column; gap: 6px; }
.res-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
}
.res-row.top { border-color: var(--cream); background: #1c1a14; }
.res-stat { font-size: 11px; color: var(--text-muted); width: 66px; }
.res-delta { font-size: 11px; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.res-delta.up { color: #7fb894; }
.res-delta.down { color: #d98a8a; }
.res-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }
.res-tier {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px; margin-top: 16px;
}
.res-tier-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; font-size: 14px; }
.res-tier-head span:last-child { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.res-actions { display: flex; gap: 8px; margin-top: 18px; }

/* ---- full-screen moments ---- */
/* position: fixed rather than absolute so the countdown covers the page even if
   the question card has pushed the document taller than the viewport. */
.duel-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(16,16,19,.93);
  display: flex; align-items: center; justify-content: center;
}
.ov-count { font-size: 110px; font-weight: 900; letter-spacing: -.04em; color: var(--cream); }
.ov-vs { display: flex; align-items: center; gap: 26px; }
.vs-side { text-align: center; }
.vs-side span {
  width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 24px; font-weight: 800; margin: 0 auto 10px;
}
.vs-a span { background: var(--blue-grad); color: #171a24; }
.vs-b span { background: var(--dark-grad); color: #e9edf8; }
.vs-side p { font-size: 15px; font-weight: 700; }
.vs-side small { font-size: 11px; color: var(--text-muted); }
.vs-mark { font-size: 34px; font-weight: 900; color: var(--cream); letter-spacing: -.02em; }

@media (max-width: 640px) {
  .duel-main { padding: 92px 16px 56px; }
  .duel-h1 { font-size: 25px; }
  .opt-grid { grid-template-columns: minmax(0, 1fr); }
  .cfg-row { flex-wrap: wrap; }
  .ov-vs { gap: 14px; }
  .vs-side span { width: 62px; height: 62px; font-size: 20px; }
  .ov-count { font-size: 86px; }
  .res-stat { display: none; }
}