/* arena-chapter0.css — a playable "quest log" skin for ARENA Chapter 0.
   Visual language borrowed from a mobile-game quest dialog:
   meadow backdrop, pink-headed white card, glossy candy buttons,
   stitched orange rewards band, and a mascot speech bubble. */

:root {
  --sky-1: #cdeffb;
  --sky-2: #bfe6f5;
  --grass-1: #a6e06a;
  --grass-2: #7cc63f;
  --grass-3: #62b031;

  --pink-1: #ff9cbb;
  --pink-2: #ff7ba1;
  --pink-edge: #ef5e8a;

  --go-1: #93e23f;
  --go-2: #5fb500;
  --go-edge: #468700;
  --teal-1: #3fc8d6;
  --teal-2: #18a6b6;
  --teal-edge: #11808d;

  --amber-1: #ffcf5c;
  --amber-2: #ffb12c;
  --amber-edge: #f09a16;

  --panel: #ffffff;
  --hairline: #e7e7ee;
  --badge-bg: #eef0f3;
  --ink: #4b5563;
  --ink-soft: #8a93a3;
  --bubble-ink: #2f6fb0;

  --done-fill: #eafbe4;
  --done-edge: #84cf5c;
  --done-ink: #3f8f2f;

  --ui: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;
}

/* the bespoke "pony" display face, built from fonts/custom/pony/*.svg.
   Display-only (titles); never body/small text. */
@font-face {
  font-family: 'PonyDisplay';
  src: url('fonts/custom/PonyDisplay.woff2') format('woff2'),
       url('fonts/custom/PonyDisplay.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Journal — a flowing handwritten script for the friendship-report letters. */
@font-face {
  font-family: 'Journal';
  src: url('fonts/custom/Journal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--ui);
  color: var(--ink);
  background: linear-gradient(var(--sky-1) 0%, var(--sky-2) 30%,
                              #c9eecb 44%, var(--grass-1) 52%,
                              var(--grass-2) 74%, var(--grass-3) 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- soft, out-of-focus Canterlot backdrop ---- */
.scene {
  position: fixed;
  inset: -80px;
  z-index: -1;
  background:
    linear-gradient(rgba(205,239,251,0.30), rgba(160,210,120,0.26)),
    url('textures/canterlot-background.jpg') center / cover no-repeat;
  filter: blur(12px);
  pointer-events: none;
}
/* the photo backdrop replaces the drawn meadow; only the rainbow arc remains */
.scene .rainbow {
  position: absolute;
  left: -12%;
  bottom: -30%;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      transparent 60%,
      rgba(255,138,160,0.55) 60% 62.4%,
      rgba(255,196,90,0.55)  62.4% 64.8%,
      rgba(255,240,150,0.55) 64.8% 67.2%,
      rgba(150,220,150,0.55) 67.2% 69.6%,
      rgba(120,190,255,0.55) 69.6% 72%,
      rgba(190,150,235,0.5)  72% 74.4%,
      transparent 74.4%);
}

/* ---- top HUD: coin + gem counters ---- */
.hud {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-right: 22px;
  pointer-events: none;
}
.hud-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  background: linear-gradient(#ffffff, #f1f4f8);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(40,60,90,0.18),
              inset 0 1px 0 rgba(255,255,255,0.9);
}
.hud-icon { width: 26px; height: 26px; display: inline-flex; }
.hud-icon svg, .hud-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hud-val {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 17px;
  color: #5b6472;
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hud-plus {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(#c79bff, #9a63f0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              0 2px 4px rgba(90,40,160,0.35);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.hud-plus:hover { filter: brightness(1.06); }
.hud-plus:active { transform: translateY(1px) scale(0.96); }

/* ---- layout: mascot column + quest dialog, centred as a group ---- */
.quest-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 50px 16px 24px;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 100vh;
}

/* ---- mascot + speech bubble ---- */
.mascot-col {
  position: relative;
  align-self: start;
  margin-top: 40px;
  margin-left: -28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bubble {
  position: relative;
  z-index: 2;   /* keep the bubble + its tail in front of the character badge */
  width: 100%;
  min-height: 162px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid #d6e5f3;
  border-radius: 18px;
  padding: 16px 18px;
  color: var(--bubble-ink);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 20px rgba(40,80,130,0.18);
}
/* a little downward tail (a rotated square sharing the bubble's fill + border)
   so it reads as Celestia talking — she's below it. Pure CSS, no SVG/bg image. */
.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-right: 2px solid #d6e5f3;
  border-bottom: 2px solid #d6e5f3;
  border-bottom-right-radius: 3px;
  transform: translate(-50%, calc(50% - 1px)) rotate(45deg);
}
.mascot-badge {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffd6ea, #ff9ec6 70%, #f178ad);
  border: 5px solid #ffffff;
  box-shadow: 0 10px 22px rgba(150,40,110,0.3);
  overflow: hidden;
}
.mascot-badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* ---- quest dialog ---- */
.quest {
  background: var(--panel);
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(30,50,80,0.28);
  overflow: hidden;
}
.quest-head {
  position: relative;
  background: linear-gradient(var(--pink-1), var(--pink-2));
  border-bottom: 2px solid var(--pink-edge);
  padding: 12px 24px;
  text-align: center;
}
.quest-title {
  margin: 0;
  font-family: 'PonyDisplay', var(--ui);
  font-weight: 600;
  font-size: clamp(24px, 3.8vw, 33px);
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(210,70,120,0.45);
}
.quest-close {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.quest-close svg { width: 20px; height: 20px; }
.quest-close:hover { background: rgba(255,255,255,0.22); transform: translateY(-50%) scale(1.08); }

.quest-body { padding: 20px 22px 8px; }

/* ---- chapter picker (the "books" above the track) ---- */
.chapter-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 2px 18px;
}
.chapter-tab {
  --ct-accent: #ff7ba1;
  flex: 1 1 0;
  min-width: 138px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 13px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chapter-tab:hover { transform: translateY(-1px); border-color: var(--ct-accent); box-shadow: 0 5px 12px rgba(40,60,90,0.12); }
.chapter-tab:active { transform: translateY(1px) scale(0.99); }
.ct-badge {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-family: 'PonyDisplay', var(--mono);
  font-weight: 700; font-size: 16px;
  color: var(--ct-accent);
  background: var(--ct-tint);
  border: 1.5px solid var(--ct-tintb);
}
.ct-text { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.ct-name {
  font-family: var(--ui);
  font-weight: 600; font-size: 13px;
  color: #3b4250;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-prog { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-soft); margin-top: 1px; }
.ct-check {
  position: absolute; top: -7px; right: -6px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #5cc23a; border: 2px solid #fff;
  display: none; place-items: center;
  box-shadow: 0 2px 4px rgba(40,90,20,0.35);
}
.ct-check svg { width: 11px; height: 11px; }
.chapter-tab.is-cleared .ct-check { display: grid; }
/* active chapter: paint the whole tab in its accent — uniform edges, no half-paint */
.chapter-tab.is-active {
  background: var(--ct-accent);
  border-color: var(--ct-edge);
  box-shadow: 0 5px 14px var(--ct-shadow);
}
.chapter-tab.is-active .ct-badge { background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.55); color: var(--ct-accent); }
.chapter-tab.is-active .ct-name { color: #fff; }
.chapter-tab.is-active .ct-prog { color: rgba(255,255,255,0.88); }

/* ---- progress track ---- */
.track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 6px 4px 18px;
}
.track::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 26px;
  right: 26px;
  height: 8px;
  background: #e9ebef;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.track-fill {
  position: absolute;
  top: 22px;
  left: 26px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd06b, #ff9bb6);
  transition: width 0.4s ease;
}
.node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  width: 60px;
}
.node-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(#fff, #eef0f3);
  border: 2px solid #dfe2e8;
  box-shadow: 0 3px 6px rgba(40,60,90,0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.node-icon svg { width: 30px; height: 30px; }
.node-icon .node-book { width: 30px; height: 34px; object-fit: contain; }
.node:hover .node-icon { transform: translateY(-2px); }
.node.is-active .node-icon {
  border-color: var(--pink-2);
  box-shadow: 0 0 0 4px rgba(255,123,161,0.35), 0 4px 8px rgba(40,60,90,0.2);
}
.node.is-done .node-icon {
  background: linear-gradient(#eafbe4, #d4f3c5);
  border-color: var(--done-edge);
}
.node-check {
  position: absolute;
  top: -6px;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #5cc23a;
  border: 2px solid #fff;
  display: none;
  place-items: center;
  box-shadow: 0 2px 4px rgba(40,90,20,0.4);
}
.node-check svg { width: 13px; height: 13px; }
.node.is-done .node-check { display: grid; }
.node-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
}
.node.is-active .node-label { color: var(--pink-edge); font-weight: 700; }
.node-here {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--pink-edge);
  font-weight: 700;
  height: 12px;
}

/* the reward portrait that caps the track */
.node-reward { cursor: default; width: 64px; }
.node-reward .node-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff0b8, #ffcf5c 72%, #f0a81e);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(180,120,10,0.4);
  overflow: hidden;
}
.node-reward .node-icon svg { width: 34px; height: 34px; }
.node-reward .node-icon .reward-pony { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.node-reward.is-done .node-icon {
  box-shadow: 0 0 0 4px rgba(255,200,60,0.5), 0 4px 10px rgba(180,120,10,0.5);
}

/* ---- section heading row ---- */
.section-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 12px;
}
.section-tag {
  font-family: 'PonyDisplay', var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--pink-2);
  padding: 3px 11px 1px;
  border-radius: 8px;
}
/* the PonyDisplay "." is a decorative glyph; render the separator as a plain
   dot in the mono face instead */
.tag-dot {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0.5px;
}
.section-name {
  font-weight: 600;
  font-size: 19px;
  color: #3b4250;
  flex: 1;
}
.section-prog {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---- task rows (card surfaces — uniform borders only) ---- */
.tasks { display: flex; flex-direction: column; gap: 9px; }
.task {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(40,60,90,0.07);
}
.task.is-done {
  background: var(--done-fill);
  border-color: var(--done-edge);
}
.task-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.task-thumb svg { width: 26px; height: 26px; }
.task-text { flex: 1; min-width: 0; }
.task-title {
  font-weight: 600;
  font-size: 16px;
  color: #3b4250;
  line-height: 1.2;
}
.task.is-done .task-title { color: var(--done-ink); }
/* match the icon tile to the green done card (overrides the inline accent tint) */
.task.is-done .task-thumb {
  background: rgba(132, 207, 92, 0.22) !important;
  color: var(--done-ink) !important;
}
.task-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.3;
  margin-top: 2px;
}
.task-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 116px;
}
.task-badge {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  color: #7b8494;
  background: linear-gradient(#f6f7f9, #e7eaee);
  border-radius: 8px;
  padding: 5px 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.task.is-done .task-badge {
  color: #fff;
  background: linear-gradient(#7ed957, #54bf32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ---- candy buttons ---- */
.btn {
  border: none;
  cursor: pointer;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.6px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 8px 0;
  border-radius: 10px;
  transition: transform 0.12s ease, filter 0.12s ease;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.btn:active { transform: translateY(2px) scale(0.98); }
.btn-go {
  background: linear-gradient(var(--go-1), var(--go-2));
  border-bottom: 3px solid var(--go-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-go:hover { filter: brightness(1.05); }
.btn-done {
  background: linear-gradient(var(--teal-1), var(--teal-2));
  border-bottom: 3px solid var(--teal-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-done:hover { filter: brightness(1.05); }
.task.is-done .btn-done {
  background: linear-gradient(#cfd6df, #aab4c1);
  border-bottom-color: #8f9aa8;
}

/* tutorial arrow pointing at the next recommended task (glossy block arrow) */
.task.is-next .task-side { position: relative; }
.tut-arrow {
  position: absolute;
  left: -56px;
  top: 50%;
  width: 50px;
  height: 38px;
  transform: translateY(-50%);
  filter: drop-shadow(0 3px 3px rgba(20,80,150,0.35));
  animation: nudge 1s ease-in-out infinite;
  pointer-events: none;
}
.tut-arrow svg { width: 100%; height: 100%; display: block; }
@keyframes nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-7px); }
}

/* ---- stitched rewards band ---- */
.rewards {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 24px;
  background: linear-gradient(var(--pink-1), var(--pink-2));
  border-top: 3px solid var(--pink-edge);
}
.rewards-label {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 1px 1px 0 #d24c79, 2px 2px 0 rgba(170,40,90,0.5);
}
.reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(170,40,90,0.45);
}
.reward svg, .reward img { width: 26px; height: 26px; object-fit: contain; }
.rewards-claim {
  margin-left: auto;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  background: #5cc23a;
  border: 2px solid #fff;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(40,120,20,0.4);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rewards.is-claimed .rewards-claim { opacity: 1; transform: scale(1); }

/* the per-module crystal reward sits right beside the coin reward */

/* floating "+100" coin pop when a task is cleared */
.coin-pop {
  position: fixed;
  z-index: 50;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  color: #ffb12c;
  text-shadow: 0 1px 2px rgba(120,70,0,0.6);
  pointer-events: none;
  animation: pop-up 0.9s ease-out forwards;
}
@keyframes pop-up {
  0% { opacity: 0; transform: translateY(6px) scale(0.8); }
  20% { opacity: 1; transform: translateY(-2px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-44px) scale(1); }
}

/* ---- prerequisites knowledge-check quiz ---- */
.btn-test {
  background: linear-gradient(#c79bff, #9a63f0);
  border-bottom: 3px solid #7a45d8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-test:hover { filter: brightness(1.05); }

body.quiz-open { overflow: hidden; }

.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(45,32,68,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.quiz-overlay.is-open { display: flex; }
.quiz {
  width: min(560px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(20,20,50,0.45);
  animation: quiz-in 0.25s ease;
}
@keyframes quiz-in {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.quiz-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 48px;
  background: linear-gradient(var(--pink-1), var(--pink-2));
  border-bottom: 2px solid var(--pink-edge);
}
.quiz-title {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: clamp(16px, 4vw, 20px);
  text-shadow: 0 2px 0 rgba(210,70,120,0.45);
}
.quiz-count {
  position: absolute;
  left: 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  opacity: 0.92;
}
.quiz-close {
  position: absolute;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.quiz-close svg { width: 18px; height: 18px; }
.quiz-close:hover { background: rgba(255,255,255,0.22); }
.quiz-body { padding: 18px 22px 20px; overflow-y: auto; }

.quiz-bar {
  height: 7px;
  border-radius: 999px;
  background: #eef0f3;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 16px;
}
.quiz-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd06b, #ff9bb6);
  transition: width 0.3s ease;
}
.quiz-theme {
  display: inline-block;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.quiz-q {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: #3b4250;
  margin-bottom: 16px;
}
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: #3b4250;
  background: #fff;
  border: 2px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 40px 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.quiz-opt:hover { border-color: #c9cfdb; }
.quiz-opt:active { transform: scale(0.99); }
.quiz-opts.is-locked .quiz-opt { cursor: default; }
.quiz-opt.is-correct { background: var(--done-fill); border-color: var(--done-edge); color: var(--done-ink); font-weight: 600; }
.quiz-opt.is-wrong { background: #ffe9ec; border-color: #ff8aa0; color: #c0344f; }
.quiz-opt .tick {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  display: inline-flex;
}
.quiz-opt .tick svg { width: 100%; height: 100%; }
.quiz-expl {
  margin-top: 14px;
  padding: 11px 13px;
  background: #f3f7ff;
  border: 1px solid #d6e4fb;
  border-radius: 10px;
  color: #3a5d8f;
  font-size: 14px;
  line-height: 1.4;
}
.quiz-expl b { color: #28456e; }
.quiz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.quiz-score { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.quiz-next { min-width: 118px; padding-left: 22px; padding-right: 22px; }
.quiz-next:disabled { filter: grayscale(0.6) opacity(0.55); cursor: default; pointer-events: none; }

.quiz-result { text-align: center; padding: 4px 4px 2px; }
.quiz-pony {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 0 auto -6px;
  filter: drop-shadow(0 4px 6px rgba(120,60,20,0.28));
  animation: quiz-in 0.4s ease;
}
.quiz-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 6px auto 14px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ring-col, #7ed957) var(--ring, 0%), #eef0f3 0);
}
.quiz-ring span {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  color: #3b4250;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.quiz-verdict { font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.quiz-verdict.pass { color: #3f8f2f; }
.quiz-verdict.fail { color: #d0743a; }
.quiz-msg { color: var(--ink-soft); font-size: 15px; line-height: 1.4; margin: 0 auto 16px; max-width: 390px; }
.quiz-reward-row { display: inline-flex; gap: 18px; margin-bottom: 18px; }
.quiz-result .quiz-foot { justify-content: center; gap: 16px; margin-top: 22px; }
/* result buttons (RETAKE/CLOSE, GO AGAIN/CLOSE) need their own side padding —
   the base .btn has none, so the labels would otherwise hug the rounded edges */
.quiz-result .quiz-foot .btn { min-width: 130px; padding-left: 24px; padding-right: 24px; }

.quiz-review { margin: 0 auto 18px; max-width: 380px; text-align: left; }
.quiz-review-title {
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c0344f;
  margin-bottom: 8px;
  text-align: center;
}
.quiz-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quiz-themes li {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff5f7;
  border: 1px solid #ffd9e2;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 14px;
  color: #3b4250;
}
.qt-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.qt-name { flex: 1; font-weight: 500; }
.qt-score { font-family: var(--mono); font-weight: 700; color: #c0344f; }
.quiz-review.all-good {
  color: #3f8f2f;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  background: #eafbe4;
  border: 1px solid #bfe9ab;
  border-radius: 12px;
  padding: 11px 14px;
}

/* ---- in-page materials reader ---- */
body.reader-open { overflow: hidden; }

.reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(45,32,68,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.reader-overlay.is-open { display: flex; }
.reader {
  width: min(880px, 100%);
  height: min(92vh, 1000px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(20,20,50,0.45);
  animation: quiz-in 0.25s ease;
}
.reader-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 50px 14px 18px;
  background: linear-gradient(var(--pink-1), var(--pink-2));
  border-bottom: 2px solid var(--pink-edge);
  flex: none;
}
.reader-tag {
  font-family: 'PonyDisplay', var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--pink-edge);
  background: #fff;
  padding: 3px 11px 1px;
  border-radius: 8px;
}
.reader-name {
  margin: 0;
  color: #fff;
  font-family: 'PonyDisplay', var(--ui);
  font-weight: 600;
  font-size: clamp(19px, 4vw, 25px);
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(210,70,120,0.45);
}
.reader-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.reader-close svg { width: 20px; height: 20px; }
.reader-close:hover { background: rgba(255,255,255,0.22); }
.reader-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 30px 30px;
  background: #fff;
}
.reader-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 16px;
}

/* ---- chunked-reader navigation ---- */
.reader-nav {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: #faf6ff; border-bottom: 1px solid var(--hairline);
}
.reader-toc-btn {
  font: inherit; font-weight: 600; font-size: 12.5px; color: #7a45d8;
  background: #efe7ff; border: 1.5px solid #d9c9f7; border-radius: 999px;
  padding: 4px 13px; cursor: pointer; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.reader-toc-btn:hover { border-color: #c0a9ef; }
.reader-toc-btn.is-on { color: #fff; background: linear-gradient(#c79bff, #9a63f0); border-color: #7a45d8; }
.reader-prog { flex: 1; height: 8px; background: #ece6f7; border-radius: 999px; overflow: hidden; }
.reader-prog-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink-1), var(--pink-2)); border-radius: inherit; transition: width 0.25s ease; }
.reader-count { font-family: var(--mono); font-weight: 700; font-size: 12px; color: #8a6fc7; white-space: nowrap; min-width: 46px; text-align: right; }

.reader-toc { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; background: #fff; }
.reader.toc-open .reader-toc { display: block; }
.reader.toc-open .reader-body { display: none; }
.reader.toc-open .reader-pager { display: none; }
.toc-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
  background: none; border: none; border-radius: 10px; padding: 9px 10px;
  transition: background 0.12s ease;
}
.toc-item:hover { background: #f3eefc; }
.toc-item.is-cur { background: #ffe4ef; color: #b5306b; font-weight: 600; }
.toc-item.lvl-2 { padding-left: 30px; font-size: 13px; color: var(--ink-soft); }
.toc-item.lvl-3 { padding-left: 50px; font-size: 12.5px; color: var(--ink-soft); }
.toc-num { font-family: var(--mono); font-weight: 700; font-size: 11px; color: #9a63f0; min-width: 22px; text-align: right; }
.toc-item.lvl-2 .toc-num, .toc-item.lvl-3 .toc-num { opacity: 0.6; }
.toc-item.is-cur .toc-num { color: #b5306b; }
.toc-title { flex: 1; }

.reader-pager {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #f6f4fb; border-top: 1px solid var(--hairline);
}
.reader-here {
  flex: 1; text-align: center; font-family: var(--ui); font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-prev, .reader-next { flex: none; min-width: 116px; padding: 9px 16px; }
.reader-prev { background: linear-gradient(#efeaf8, #ddd2f0); border-bottom: 3px solid #c3b4e4; color: #6b5aa6; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.reader-prev:hover { filter: brightness(1.03); }
.reader-next { background: linear-gradient(#c79bff, #9a63f0); border-bottom: 3px solid #7a45d8; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.reader-next:hover { filter: brightness(1.05); }
.reader-next.is-done { background: linear-gradient(var(--go-1), var(--go-2)); border-bottom-color: var(--go-edge); }
.reader-prev:disabled, .reader-next:disabled { opacity: 0.4; cursor: default; box-shadow: none; filter: none; }

.reader-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  background: #f6f4fb;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.reader-foot b { color: #6b5aa6; }
.reader-ext { color: #9a63f0; font-weight: 600; text-decoration: none; white-space: nowrap; }
.reader-ext:hover { text-decoration: underline; }

/* ---- bonus "drill everything" card on Prerequisites ---- */
.task-drill { background: linear-gradient(#f6f1ff, #efe6fe); border: 2px solid #d9c9f7; }
.btn-drill { color: #fff; background: linear-gradient(#c79bff, #9a63f0); border-bottom: 2px solid #7a45d8; }
.btn-drill:hover { filter: brightness(1.05); }

/* ---- per-page comprehension check block ---- */
.check { margin: 30px 0 6px; padding: 16px 18px; border-radius: 16px; border: 2px solid #e3d7ff; background: linear-gradient(#faf7ff, #f2ecff); }
.check-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #7a45d8; }
.check-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #9a63f0; color: #fff; }
.check-ic svg { width: 13px; height: 13px; }
.check-q { margin: 0 0 18px; }
.check-q:last-child { margin-bottom: 0; }
.cq-q { margin: 0 0 9px; font-weight: 600; font-size: 15px; color: var(--ink); }
.cq-opts { display: flex; flex-direction: column; gap: 7px; }
.cq-opt { text-align: left; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 2px solid #e3dcf3; border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.cq-opt:hover:not(:disabled) { border-color: #c0a9ef; }
.cq-opt:disabled { cursor: default; }
.cq-opt.correct { border-color: var(--done-edge); background: var(--done-fill); color: var(--done-ink); font-weight: 600; }
.cq-opt.wrong { border-color: #f3a3b6; background: #ffe7ee; color: #b5306b; }
.cq-expl { margin-top: 9px; padding: 10px 12px; border-radius: 9px; background: #fff; border: 1px dashed #d4c4f4; font-size: 13.5px; color: #5b5470; }
.cq-expl b { color: #7a45d8; }
.review-intro { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 4px; }

/* ---- rendered markdown typography ---- */
.md {
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: #2f3744;
}
/* the reader wraps each cached chunk in a .reader-chunk host div, so reset the
   top margin of the chunk's first element too (not just .md's direct child) */
.md > :first-child,
.md > .reader-chunk > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  font-family: var(--ui);
  color: #2b3140;
  line-height: 1.25;
  margin: 1.5em 0 0.5em;
}
.md h1 { font-size: 1.7em; }
.md h2 { font-size: 1.42em; padding-bottom: 0.24em; border-bottom: 2px solid #f0eef6; }
.md h3 { font-size: 1.2em; }
.md h4 { font-size: 1.05em; }
/* themed unit-number badge replacing the OS keycap emoji (see prettifyHeadings) */
.md .has-num { color: #5a3fa0; }
.h-num {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  border-radius: 0.4em;
  background: linear-gradient(#c79bff, #9a63f0);
  color: #fff;
  font-family: 'PonyDisplay', var(--ui);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 5px rgba(120,70,200,0.35);
  vertical-align: 0.04em;
  /* the pony numerals ride high in their line box; push down to centre */
  padding-top: 0.15em;
}
.md p { margin: 0.7em 0; }
.md a { color: #2f8f9e; text-decoration: none; font-weight: 500; }
.md a:hover { text-decoration: underline; }
.md strong { color: #1f2733; font-weight: 700; }
.md ul, .md ol { margin: 0.6em 0; padding-left: 1.5em; }
.md li { margin: 0.3em 0; }
.md img { max-width: 100%; height: auto; display: block; margin: 1em auto; border-radius: 8px; }
.md hr { border: none; border-top: 2px dashed #e2dff0; margin: 2em 0; }

.md blockquote {
  margin: 1.1em 0;
  padding: 12px 16px;
  background: #f3f0fc;
  border: 1px solid #e0d8f5;
  border-radius: 12px;
  color: #43405a;
}
.md blockquote > :first-child { margin-top: 0; }
.md blockquote > :last-child { margin-bottom: 0; }
.md blockquote h5 { margin: 0 0 0.4em; font-size: 0.92em; letter-spacing: 0.04em; text-transform: uppercase; color: #7a5fc4; }

.md code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: #ffe4ef;
  color: #b5306b;
  padding: 1px 6px;
  border-radius: 6px;
}
.md pre {
  background: #fff0f6;
  border: 1px solid #ffcfe0;
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 1em 0;
  line-height: 1.5;
}
.md pre code {
  font-size: 13px;
  background: none;
  color: #7a1f47;
  padding: 0;
  white-space: pre;
}
/* difficulty/importance ratings rendered as gold/grey stars (see starifyRatings) */
.rate-star {
  font-size: 1.5em;
  line-height: 1;
  margin-right: 2px;
  vertical-align: -0.12em;
  color: #e4d9be;
  -webkit-text-stroke: 0.7px #cdbf9d;
}
.rate-star.is-on {
  color: #ffc83d;
  -webkit-text-stroke: 0.6px #e0962a;
  text-shadow: 0 1px 1px rgba(150,90,20,0.30);
}

.md details {
  margin: 0.9em 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fafafe;
  overflow: hidden;
}
.md details summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: #4b4170;
  background: #f3f0fc;
  list-style: none;
}
.md details summary::-webkit-details-marker { display: none; }
.md details summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; transition: transform 0.15s ease; color: #9a63f0; }
.md details[open] summary::before { transform: rotate(90deg); }
.md details > :not(summary) { margin-left: 14px; margin-right: 14px; }
.md details > :last-child { margin-bottom: 12px; }

.md table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
  font-size: 0.94em;
  display: block;
  overflow-x: auto;
}
.md th, .md td { border: 1px solid #e3e1ec; padding: 7px 11px; text-align: left; }
.md th { background: #f3f0fc; font-weight: 600; }
.md math { font-size: 1.04em; }
.md math[display="block"] { display: block; overflow-x: auto; overflow-y: hidden; margin: 0.9em 0; }

/* ---- pony stable: equipped-guide portrait ---- */
.mascot-badge.has-pony { background: radial-gradient(circle at 50% 38%, #eaf6ff, #cdeafe 72%, #a9d6f5); }
.mascot-badge .guide-pony {
  object-fit: contain;
  object-position: center 78%;
  padding: 7px 6px 4px;
}

.pony-edit-btn {
  margin-top: 12px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(#c79bff, #9a63f0);
  border: none;
  border-bottom: 3px solid #7a45d8;
  border-radius: 10px;
  padding: 8px 15px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 8px rgba(90,40,160,0.25);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.pony-edit-btn:hover { filter: brightness(1.05); }
.pony-edit-btn:active { transform: translateY(2px); }

.editor-overlay {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(45,32,68,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.editor-overlay.is-open { display: flex; }
.editor {
  width: min(820px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(20,20,50,0.45); animation: quiz-in 0.25s ease;
}
.editor-head {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 50px 14px 20px;
  background: linear-gradient(var(--pink-1), var(--pink-2)); border-bottom: 2px solid var(--pink-edge);
}
.editor-title { margin: 0; color: #fff; font-weight: 600; font-size: 20px; text-shadow: 0 2px 0 rgba(210,70,120,0.45); }
.editor-bal { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 700; font-size: 15px; color: #fff; background: rgba(255,255,255,0.22); padding: 4px 11px; border-radius: 999px; }
.editor-bal .hud-icon { width: 20px; height: 20px; }
.editor-bal .hud-icon img, .editor-bal .hud-icon svg { width: 100%; height: 100%; object-fit: contain; }
.editor-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; color: #fff; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.editor-close svg { width: 20px; height: 20px; }
.editor-close:hover { background: rgba(255,255,255,0.22); }

.pony-edit-btn--alt { background: linear-gradient(#9be0ff, #4aa3e6); border-bottom-color: #2f7fbf; margin-top: 8px; }
.pony-return { background: linear-gradient(var(--pink-1), var(--pink-2)); border-bottom-color: var(--pink-edge); margin-top: 8px; }

/* ---- "Dear Princess Celestia" friendship-report letter ---- */
.letter { margin-top: 8px; }
.letter-paper {
  position: relative;
  background: linear-gradient(160deg, #fffdf4, #fff6e1);
  border: 1px solid #ecd9a6;
  border-radius: 14px;
  padding: 22px 24px 24px;
  box-shadow: 0 10px 26px rgba(150,120,40,0.16), inset 0 0 0 1px rgba(255,255,255,0.6);
  color: #5b4a28;
  font-family: var(--ui);
  line-height: 1.6;
  font-size: 16px;
}
.letter-paper p { margin: 0 0 10px; }
.letter-greet { font-weight: 700; color: #b5781f; font-size: 22px; margin-bottom: 12px !important; }
/* scoped under .letter-paper so it beats the generic `.md img` rule
   (which would otherwise force border-radius:8px and height:auto) */
.letter-paper .letter-seal {
  float: right; width: 116px; height: 116px; margin: -10px -12px 8px 16px;
  object-fit: contain; object-position: center top;
}
.letter-sign-line { margin-bottom: 2px !important; font-style: italic; color: #7a6433; }
.letter-blank {
  font: inherit; font-weight: 600; color: #2f6fb0;
  border: none; border-bottom: 2px solid #d8bd6a;
  background: rgba(255,255,255,0.55);
  padding: 1px 7px; margin: 0 1px; border-radius: 6px 6px 0 0;
  min-width: 56px; text-align: center; outline: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.letter-blank::placeholder { color: #c2ad7a; font-weight: 500; font-style: italic; }
.letter-blank:focus { border-bottom-color: var(--pink-2); background: #fff; }
.letter-blank.is-free { color: #7a5fc4; font-weight: 500; text-align: left; min-width: 200px; }
.letter-blank.is-correct { color: #2f8f2f; border-bottom-color: #5fbf3f; background: #ecfbe4; }
.letter-blank.is-wrong { color: #c0562b; border-bottom-color: #e8a13f; background: #fff3e0; }
.letter-sign { display: inline-block; margin-top: 4px; color: #b5781f; font-style: italic; text-align: left; min-width: 160px; }
.letter-ans { color: #2f8f2f; font-size: 12.5px; font-weight: 700; margin: 0 2px; white-space: nowrap; }
.letter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.letter-send { padding: 9px 24px; border-radius: 999px; }
.letter-tip { color: var(--ink-soft); font-size: 12.5px; }
.letter-reply {
  margin-top: 14px; padding: 13px 16px; border-radius: 12px;
  background: linear-gradient(#fff0f7, #ffe2ee); border: 1px solid #ffc2db; color: #8a2a55;
  animation: quiz-in 0.25s ease;
}
.letter-reply .reply-from { font-weight: 700; color: #d05a86; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.letter-reply p { margin: 0; line-height: 1.6; }
.letter.is-perfect .letter-reply { background: linear-gradient(#ecfbe4, #d6f5c9); border-color: #98d878; color: #357a2b; }
.letter.is-perfect .letter-reply .reply-from { color: #4a9e2c; }
/* the .editor shell (overlay/head/title/bal/close) is reused; below is the
   collection grid that fills its body */
.editor.stable { width: min(960px, 100%); }
.stable-owned {
  margin-left: 4px;
  font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: #fff;
  background: rgba(255,255,255,0.22); padding: 4px 11px; border-radius: 999px;
}
.stable-note {
  margin: 0; padding: 11px 20px; font-size: 13.5px; font-weight: 500; color: #7a5fc4;
  background: #f6f2ff; border-bottom: 1px solid var(--hairline);
  transition: color 0.15s ease, background 0.15s ease;
}
.stable-note.warn { color: #d0344f; background: #ffe9ee; animation: nudge2 0.4s ease; }
@keyframes nudge2 { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.stable-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 12px; padding: 16px 20px 20px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.pony-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; text-align: center; cursor: pointer;
  background: #faf8ff; border: 2px solid #e9e3f6; border-radius: 14px; padding: 10px 8px 9px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.pony-card:hover { border-color: #cbbdec; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(90,60,150,0.14); }
.pony-card:active { transform: translateY(0) scale(0.98); }

.pc-art {
  width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  border-radius: 11px; background: radial-gradient(circle at 50% 38%, #eef6ff, #dcecfb 72%, #c7e0f6);
}
.pc-art img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pony-card.is-broke .pc-art img { filter: grayscale(0.85) opacity(0.6); }

.pc-rar {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--ui); font-weight: 700; font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #fff; padding: 2px 6px; border-radius: 999px;
}
.tier-common .pc-rar { background: #9aa7b4; }
.tier-rare .pc-rar { background: linear-gradient(#5aa9ff, #3f7ed6); }
.tier-legendary .pc-rar { background: linear-gradient(#ffcf5c, #ff9b2c); color: #6a3a00; }

.pc-name {
  font-weight: 600; font-size: 12px; line-height: 1.2; color: #4b5563; min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-foot { min-height: 22px; display: flex; align-items: center; justify-content: center; }

.price { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #b07a16; background: #fff5d8; border-radius: 7px; padding: 2px 7px; }
.price svg, .price img { width: 14px; height: 14px; object-fit: contain; }
.price.gem { color: #c0348b; background: #ffe0f1; }

.pc-act { font-family: var(--ui); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; color: #7a45d8; background: #efe7ff; border-radius: 7px; padding: 3px 9px; }
.pc-act.confirm { color: #b5306b; background: #ffe4ef; }
.pc-act.is-on { color: #fff; background: linear-gradient(#7ed957, #54bf32); }

.pony-card.is-owned { border-color: #d7cdf2; background: #fff; }
.pony-card.is-equipped { border-color: #54bf32; box-shadow: 0 0 0 2px rgba(84,191,50,0.3); }
.pony-card.is-confirming { border-color: var(--pink-2); box-shadow: 0 0 0 2px rgba(255,123,161,0.3); }

.pc-tick { position: absolute; top: 7px; right: 7px; width: 19px; height: 19px; display: grid; place-items: center; background: #54bf32; border-radius: 50%; box-shadow: 0 2px 5px rgba(40,120,20,0.4); }
.pc-tick svg { width: 13px; height: 13px; }

.pony-card.just-adopted { animation: adopt-pop 0.5s ease; }
@keyframes adopt-pop {
  0% { transform: scale(0.85); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* The corner cat (z-index 9999) otherwise lands on the notebook / reader /
   quiz footer controls — tuck it away while one of those overlays is open. */
body.nb-open .cat-nav,
body.reader-open .cat-nav,
body.quiz-open .cat-nav { display: none; }

/* ---- responsive: stack the mascot above the dialog ---- */
@media (max-width: 720px) {
  .quest-wrap {
    grid-template-columns: 1fr;
    padding-top: 70px;
    padding-bottom: 92px;   /* clearance so the notebook FAB never sits on the rewards band */
  }
  .mascot-col {
    flex-direction: row;
    flex-wrap: wrap;        /* the stable/return button drops to its own centred row */
    gap: 12px 14px;
    justify-content: center;
    margin-left: 0;
    margin-bottom: 6px;
  }
  .bubble { order: 2; text-align: left; flex: 1; width: auto; min-width: 180px; max-width: 360px; display: flex; min-height: 0; }
  /* bubble sits to Celestia's right on mobile → tail points left at her */
  .bubble::after {
    left: 0; right: auto; top: 50%; bottom: auto;
    border-right: none; border-left: 2px solid #d6e5f3;
    border-bottom-right-radius: 0; border-bottom-left-radius: 3px;
    transform: translate(calc(-50% + 1px), -50%) rotate(45deg);
  }
  .mascot-badge { order: 1; width: 92px; height: 92px; flex: none; }
  .mascot-col .pony-edit-btn { order: 3; flex: 0 0 100%; max-width: 260px; margin: 0 auto; }
  /* fatter touch targets for the per-task action buttons */
  .task-side { width: 108px; }
  .task-side .btn { padding: 11px 6px; }
  .task-desc { display: none; }
  /* HUD: bigger plus/account hit areas on touch */
  .hud-plus { width: 32px; height: 32px; font-size: 20px; }
  .hud-account { padding: 8px 16px; }
  .tut-arrow { width: 38px; height: 28px; left: -42px; }
  .reader { height: 94vh; }
  .reader-body { padding: 18px 16px 24px; }
  .reader-prev, .reader-next { min-width: 96px; padding: 11px 12px; }
  .reader-here { display: none; }
  /* code blocks wrap instead of forcing a long sideways scroll on phones */
  .md pre { font-size: 12px; padding: 12px 13px; }
  .md pre code { font-size: 12px; white-space: pre-wrap; overflow-wrap: break-word; }
  /* letter fill-in blanks: taller, easier to tap */
  .letter-blank { padding: 5px 8px; min-width: 72px; line-height: 1.5; }
  .letter-blank.is-free { min-width: 150px; }
  /* modal action buttons reach a ~40px touch target */
  .quiz-close, .editor-close { width: 38px; height: 38px; }
  .quiz-next { min-width: 116px; padding-top: 11px; padding-bottom: 11px; }
  .stable-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
}

@media (max-width: 460px) {
  .track { margin-bottom: 24px; }
  .node { width: 46px; }
  .node-icon { width: 42px; height: 42px; }
  .node-icon svg { width: 24px; height: 24px; }
  .rewards-label { font-size: 18px; }
  .mascot-badge { width: 76px; height: 76px; }
  /* two chapter tabs per row on phones */
  .chapter-picker { gap: 7px; margin-bottom: 14px; }
  .chapter-tab { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 7px 9px; }
  .ct-name { font-size: 12px; }
}

/* numbers, tags & counters in the pony display face for a more on-theme look */
.hud-val, .section-tag, .section-prog, .task-badge,
.reward, .coin-pop, .reader-tag, .reader-count, .toc-num,
.node-label, .node-here, .h-num,
.price, .editor-bal, .stable-owned,
.qt-score, .quiz-count, .quiz-score, .quiz-ring span {
  font-family: 'PonyDisplay', var(--ui);
}
/* section & modal titles join the quest/reader titles in the pony face */
.section-name, .quiz-title, .editor-title {
  font-family: 'PonyDisplay', var(--ui);
}

/* ---- account / login button + sign-in modal ---- */
.hud-account {
  position: fixed;
  top: 14px;
  left: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 46vw;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'PonyDisplay', var(--ui);
  font-size: 15px;
  color: #7a45d8;
  background: linear-gradient(#ffffff, #f1f4f8);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 12px rgba(40,60,90,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.hud-account:hover { filter: brightness(1.04); }
.hud-account:active { transform: translateY(1px); }

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(40,30,70,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.auth-overlay.is-open { opacity: 1; pointer-events: auto; }
.auth-card {
  position: relative;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 22px 50px rgba(30,50,80,0.3);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
}
.auth-overlay.is-open .auth-card { transform: none; }
.auth-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  color: #b6a6d6; display: grid; place-items: center; border-radius: 50%;
}
.auth-close svg { width: 18px; height: 18px; }
.auth-close:hover { background: #f3eefc; }
.auth-title { margin: 0; font-family: 'PonyDisplay', var(--ui); font-size: 24px; color: #5a3fa0; }
.auth-sub { margin: 0 0 6px; font-size: 14px; color: #7c768c; line-height: 1.4; }
.auth-input {
  font-family: var(--ui); font-size: 15px;
  padding: 10px 13px; border-radius: 11px;
  border: 2px solid #e7e0f6; background: #faf8ff; color: #3a3350; outline: none;
}
.auth-input:focus { border-color: #b08bf0; }
.auth-row { display: flex; gap: 8px; }
.auth-row .btn { flex: 1; }
.auth-login {
  background: linear-gradient(var(--pink-1), var(--pink-2));
  border-bottom: 3px solid var(--pink-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.auth-register {
  background: linear-gradient(#c79bff, #9a63f0);
  border-bottom: 3px solid #7a45d8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.auth-or { display: flex; align-items: center; gap: 10px; color: #b6a6d6; font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #ece6f7; }
.auth-google {
  padding: 10px; border-radius: 11px; cursor: pointer;
  font-family: var(--ui); font-size: 14px; font-weight: 600; color: #4b5563;
  background: #fff; border: 2px solid #e7e0f6;
}
.auth-google:hover { background: #faf8ff; }
.auth-msg { min-height: 18px; font-size: 13px; color: #7c768c; text-align: center; }
.auth-msg.is-err { color: #c0344f; }
.auth-msg.is-ok { color: #3f8f2f; }