:root {
  --ink: #2B1F17;
  --paper: #FFF8EC;
  --card: #FFFFFF;
  --sun: #F5C518;
  --sun-soft: #FFF1C9;
  --red: #E0352B;
  --green: #2E9E4A;
  --blue: #2D6FD9;
  --earth: #C9A06B;
  --muted: #6B5A4C;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

svg { display: block; width: 100%; height: auto; }

h1, h2, p { margin: 0; }

button { font: inherit; color: inherit; touch-action: manipulation; }

button:focus-visible, input:focus-visible { outline: 4px solid var(--blue); outline-offset: 2px; }

/* ---------- top bar: points, language, and the course route with its stops ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 10px;
  background: var(--ink);
}

.bar-row { display: flex; align-items: center; gap: 8px; }

.bar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: #4A3A2E;
  color: #fff;
  cursor: pointer;
}

.tops {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 40px;
  padding: 0 10px 0 6px;
  border-radius: 12px;
  background: #4A3A2E;
  color: var(--sun);
  font-weight: 900;
}

.tops .top { width: 26px; }

.route {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 420px;
  margin: 10px auto 2px;
}

.route::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  background: var(--sun);
}

.stop {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 3px solid var(--sun);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.stop.done { background: var(--sun); color: var(--ink); }

.stop.current { background: #fff; color: var(--ink); transform: scale(1.2); }

.lang {
  display: flex;
  flex: none;
  padding: 3px;
  border: 0;
  border-radius: 12px;
  background: #4A3A2E;
  cursor: pointer;
}

.lang span {
  padding: 6px 7px;
  border-radius: 9px;
  color: #D9CBBE;
  font-size: 13px;
  font-weight: 800;
}

.lang span.on { background: var(--sun); color: var(--ink); }

.toast {
  position: fixed;
  top: 54px;
  right: 16px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 8px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  font-size: 1.3rem;
  font-weight: 900;
  pointer-events: none;
  animation: toast 1.3s ease-out forwards;
}

.toast .top { width: 34px; }

/* ---------- layout ---------- */
.main {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.prompt {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 20px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--ink);
  background: var(--card);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}

.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.btn:disabled { opacity: .4; pointer-events: none; }

.btn.primary { background: var(--sun); }

.btn.yes { background: var(--green); color: #fff; }

.btn.no { background: var(--red); color: #fff; }

.btn.big { min-height: 60px; padding: 12px 24px; font-size: 1.2rem; }

.answers .btn { padding: 10px 12px; line-height: 1.2; }

.ico { width: 1.3em; height: 1.3em; flex: none; }

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.nav-row.wrap { flex-wrap: wrap; justify-content: center; }

.dots { display: flex; gap: 7px; }

.dots i { width: 10px; height: 10px; border-radius: 50%; background: #D9CBBE; }

.dots i.on { background: var(--ink); }

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: #fff;
}

.badge.ok { background: var(--green); }

.badge.bad { background: var(--red); }

.badge .ico { width: 100%; height: 100%; }

/* ---------- home ---------- */
.home { text-align: center; }

.hero {
  position: relative;
  height: 220px;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
}

.scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.hero-jua {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 128px;
  margin-left: -64px;
  animation: bob 2.4s ease-in-out infinite;
}

.logo {
  margin-top: 14px;
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.01em;
}

.logo span, .cert-top span { color: var(--red); }

.tag { margin: 6px auto 18px; max-width: 30ch; font-size: 1.15rem; font-weight: 700; color: var(--muted); }

.list-title { margin: 30px 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.me {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  margin-top: 16px;
  font-weight: 800;
}

.me .top { width: 30px; }

.me b { font-size: 1.3rem; }

.rank {
  margin-left: 8px;
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
}

.course-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.course {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px 12px 12px;
  border: 2.5px solid var(--ink);
  border-left: 12px solid var(--c);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
  background: var(--card);
  text-align: left;
  cursor: pointer;
}

.course:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.course-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
}

.course-num .medal { width: 44px; }

.course-num:has(.medal) { border: 0; background: none; }

.course-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.course-kind { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

.course-title { font-size: 1.25rem; line-height: 1.2; font-weight: 900; }

.course-desc { margin-top: 2px; font-size: .95rem; line-height: 1.3; }

.course-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.mini-bar { flex: 1; height: 10px; overflow: hidden; border: 2px solid var(--ink); border-radius: 6px; background: #fff; }

.mini-bar i { display: block; height: 100%; background: var(--green); }

.stars { display: inline-flex; gap: 2px; }

.stars .star { width: 20px; }

.stars-big .star { width: 48px; }

.stars-big { display: flex; justify-content: center; margin: 10px 0; }

/* ---------- sign in ---------- */
.auth { display: flex; flex-direction: column; align-items: center; max-width: 420px; margin: 0 auto; }

.tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  margin-top: 14px;
  padding: 4px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}

.tab { min-height: 46px; padding: 6px 8px; border: 0; border-radius: 11px; background: none; font-weight: 800; line-height: 1.2; cursor: pointer; }

.tab.on { background: var(--sun); }

#auth-form { display: flex; flex-direction: column; width: 100%; margin-top: 8px; }

#auth-form label { margin: 12px 0 4px; font-weight: 800; }

#auth-form input, #auth-form select {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
}

.pw { display: flex; gap: 8px; }

.pw input { flex: 1; min-width: 0; }

.pw .btn { flex: none; min-height: 52px; padding: 8px 12px; box-shadow: none; font-size: .95rem; }

#auth-form .hint { margin-top: 8px; text-align: left; }

.auth-err { min-height: 1.5em; margin: 4px 0 10px; color: #B3261E; font-weight: 800; }

.who { margin-bottom: 12px; font-size: 1.05rem; }

.link-btn { margin-left: 6px; padding: 4px 6px; border: 0; background: none; color: var(--blue); font-weight: 800; text-decoration: underline; cursor: pointer; }

.country-pick { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-weight: 800; }

.country-pick select {
  min-height: 40px;
  padding: 4px 10px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.country-btns { display: grid; gap: 12px; width: 100%; max-width: 320px; margin-top: 18px; }

#auth-form select:disabled { opacity: .5; }

/* ---------- quiz ---------- */
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-weight: 800; }

.quiz-dots { display: flex; gap: 6px; }

.quiz-dots i { width: 14px; height: 14px; border: 2px solid #B9A794; border-radius: 50%; background: #fff; }

.quiz-dots i.now { border-color: var(--ink); background: var(--sun); }

.quiz-dots i.ok { border-color: var(--ink); background: var(--green); }

.quiz-dots i.bad { border-color: var(--ink); background: var(--red); }

.quiz-q { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

.quiz-jua { flex: none; width: 84px; }

.say {
  position: relative;
  flex: 1;
  padding: 14px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  background: #fff;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 800;
}

.quiz-opts { display: grid; gap: 12px; margin-top: 16px; }

.btn.opt { justify-content: flex-start; min-height: 58px; text-align: left; line-height: 1.3; }

.btn.opt:disabled { opacity: 1; }

.btn.opt.right { background: var(--green); color: #fff; }

.btn.opt.wrong { background: var(--red); color: #fff; }

.btn.opt.dim { opacity: .45; }

.quiz-why {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--sun-soft);
  font-size: 1.05rem;
}

.quiz-why.ok b { color: #1F7A37; }

.quiz-why.bad b { color: #B3261E; }

.quiz-end, .finish { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }

.finish { position: relative; overflow: hidden; padding-top: 10px; }

.medal-big { width: 150px; animation: pop .5s ease-out; }

.finish-badge { font-size: 1.2rem; }

.finish-badge b { display: block; font-size: 1.6rem; font-weight: 900; color: var(--red); }

.confetti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.confetti i {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  animation: fall 2.2s ease-in forwards;
}

.hint { min-height: 1.5em; text-align: center; color: var(--muted); font-size: .95rem; }

/* ---------- story ---------- */
.illo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  min-height: 230px;
  padding: 16px 12px 18px;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: linear-gradient(#BFE6F7 0, #E6F4EC 70%, var(--earth) 70%, var(--earth) 100%);
}

.illo-bg { opacity: .95; }

.piece { position: relative; flex: 0 1 auto; min-width: 0; }

.piece.xl { width: 150px; }
.piece.lg { width: 116px; }
.piece.md { width: 84px; }
.piece.sm { width: 54px; }
.piece.car { width: min(46%, 220px); }

.bubble {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  align-self: center;
  max-width: 62%;
  padding: 10px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  background: #fff;
}

.pile {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 190px;
}

.pile .piece:nth-child(odd) { transform: rotate(-8deg); }
.pile .piece:nth-child(even) { transform: rotate(9deg); }

.qmark { font-size: 2.6rem; line-height: 1; font-weight: 900; color: var(--red); }

.arrow { align-self: center; font-size: 2.4rem; font-weight: 900; }

.mini-btns { display: flex; gap: 8px; align-items: center; }

.mini-btns.col { flex-direction: column; align-self: center; }

.mini-btns .badge { position: static; width: 38px; height: 38px; padding: 8px; }

.story-text { margin-top: 18px; }

.story-text h1 { font-size: 1.7rem; line-height: 1.2; font-weight: 900; }

.story-text p, .points { margin-top: 10px; max-width: 60ch; font-size: 1.2rem; line-height: 1.5; }

.points { padding-left: 1.2em; }

.points li { margin-bottom: 8px; }

.points li::marker { color: var(--red); font-weight: 900; }

/* ---------- train ---------- */
.train-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.card-wrap { width: 210px; height: 236px; }

.wide .card-wrap { width: min(330px, 72%); height: 216px; }

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--ink);
  background: var(--card);
  transition: transform .22s ease-in, opacity .22s ease-in;
}

.card .item { width: 150px; }

.card-name { margin-top: 6px; font-size: 1.3rem; font-weight: 800; }

.card.fly-yes { transform: translate(70%, 10%) scale(.2) rotate(18deg); opacity: 0; }

.card.fly-no { transform: translate(-70%, 30%) scale(.2) rotate(-18deg); opacity: 0; }

.pop { animation: pop .22s ease-out; }

.learner { flex: none; width: 96px; }

.learner.bump, .bin.bump { animation: bump .25s ease-out; }

.answers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  max-width: 460px;
  margin: 20px auto 16px;
}

.progress { max-width: 460px; margin: 0 auto; text-align: center; }

.meter {
  height: 18px;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: #fff;
}

.meter div { width: 0; height: 100%; background: var(--green); transition: width .25s; }

.seen { margin-top: 6px; font-weight: 800; }

#try { display: flex; margin: 8px auto 0; }

/* ---------- run ---------- */
.sorter {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: end;
  gap: 8px;
  max-width: 620px;
  margin: 18px auto 0;
}

.bin { text-align: center; }

.bin-art { width: min(112px, 100%); margin: 0 auto; }

.bin-label { font-size: .95rem; line-height: 1.2; font-weight: 900; }

.bin-label.yes { color: var(--green); }

.bin-label.no { color: var(--red); }

.bin-count { font-size: 1.7rem; line-height: 1.2; font-weight: 900; }

.scan { text-align: center; }

.scan-jua { width: 84px; margin: 0 auto; }

.slot { display: flex; align-items: center; justify-content: center; height: 124px; }

.slot-item {
  position: relative;
  width: 108px;
  transition: transform .36s ease-in, opacity .36s ease-in;
}

.wide .slot-item { width: min(190px, 100%); }

.slot-item.go-yes { transform: translateX(120%) scale(.3); opacity: 0; }

.slot-item.go-no { transform: translateX(-120%) scale(.3); opacity: 0; }

.beam {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  height: 5px;
  border-radius: 3px;
  background: #19D3C5;
  box-shadow: 0 0 10px 3px rgba(25, 211, 197, .6);
  animation: scan .6s linear;
}

.queue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  margin: 18px 0;
}

.q-item { width: 40px; opacity: .85; }

.wide .q-item { width: 62px; }

#skip { display: flex; margin: 0 auto; }

/* ---------- results ---------- */
.results h1 { font-size: 1.7rem; font-weight: 900; text-align: center; }

.score { margin-top: 4px; font-size: 1.25rem; font-weight: 800; text-align: center; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

.col {
  padding: 10px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
}

.col h2 { font-size: .95rem; line-height: 1.25; font-weight: 900; }

.col.yes h2 { color: #1F7A37; }

.col.no h2 { color: #B3261E; }

.col h2 b {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-align: center;
}

.grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 60px; }

.thumb {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 5px;
  border: 2.5px solid transparent;
  border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
}

.wide .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

.wide .thumb { width: 100%; height: auto; }

.thumb.sel { border-color: var(--ink); background: var(--sun-soft); }

.thumb .badge { top: -5px; right: -5px; width: 20px; height: 20px; padding: 3px; border-width: 1.5px; }

.why {
  min-height: 3.4em;
  margin-top: 12px;
  padding: 10px 14px;
  border: 2.5px dashed #B9A794;
  border-radius: 16px;
  color: var(--muted);
  font-weight: 700;
}

.why.on { border: 2.5px solid var(--ink); background: var(--sun-soft); color: var(--ink); }

.insights {
  margin-top: 12px;
  padding: 12px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
}

.insights h2 { font-size: 1.15rem; font-weight: 900; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.chip {
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  font-weight: 800;
}

.tip { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

.tip-jua { flex: none; width: 66px; }

.tip p { font-size: 1.1rem; font-weight: 700; }

/* ---------- choose a word ---------- */
.pick-top { display: flex; align-items: center; justify-content: center; gap: 12px; }

.pick-jua { flex: none; width: 80px; }

.words { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; margin: 22px auto 0; }

.btn.word { min-height: 72px; font-size: 1.3rem; }

.w-red { background: var(--red); color: #fff; }
.w-blue { background: var(--blue); color: #fff; }
.w-green { background: var(--green); color: #fff; }
.w-yellow { background: var(--sun); }

/* ---------- certificate ---------- */
.cert-form { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

.cert-form input {
  width: min(100%, 360px);
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
}

.cert {
  padding: 26px 18px;
  border: 10px solid var(--sun);
  outline: 3px solid var(--ink);
  outline-offset: -16px;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}

.cert-top { font-size: 1.3rem; font-weight: 900; }

.cert h1 { margin: 4px 0 12px; font-size: 2.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }

.cert p { font-size: 1.15rem; }

.cert-name {
  display: inline-block;
  min-width: 60%;
  margin: 10px 0 12px;
  padding: 0 16px 4px;
  border-bottom: 3px solid var(--ink);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.cert-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; text-align: left; }

.cert-jua { width: 92px; }

.cert-role { font-size: 1.3rem; font-weight: 900; color: var(--red); }

.cert-date { color: var(--muted); font-weight: 700; }

.cert-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 14px 0 4px; }

.cert-badge { display: flex; flex-direction: column; align-items: center; width: 104px; font-size: .9rem; line-height: 1.2; font-weight: 800; }

.cert-badge .medal { width: 62px; margin-bottom: 4px; }

/* ---------- course 1: Mama's price piles ---------- */
.rule-note { max-width: 46ch; margin: 6px auto 0; color: var(--muted); font-size: .95rem; font-weight: 700; text-align: center; }

.btn.price { font-size: 1.35rem; font-weight: 900; }

.btn.price.lo { background: #F3E2C3; }

.btn.price.hi { background: var(--sun); }

.bin-art .sign { width: 70%; margin: 0 auto -6px; }

.price-pile { display: flex; flex-direction: column; align-items: center; align-self: center; }

.price-pile .pile { max-width: 170px; }

.piece.sign-sm { width: 76px; }

.why-art { display: inline-block; width: 64px; margin-left: 6px; vertical-align: middle; }

/* ---------- course 2: groups, map and odd one out ---------- */
.sub { margin: 6px auto 0; max-width: 46ch; text-align: center; color: var(--muted); font-weight: 700; }

.btn.center { display: flex; margin: 18px auto 0; }

.tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  margin-top: 14px;
  padding: 8px;
  border: 2.5px dashed #B9A794;
  border-radius: 18px;
}

.topbtn { display: block; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }

.topbtn.in { width: 42px; height: 42px; }

.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }

.groups.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.group {
  min-height: 120px;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}

.group.active { box-shadow: 0 0 0 4px var(--c); }

.group-name { padding: 4px 6px; background: var(--c); color: #fff; font-weight: 900; text-align: center; }

.group-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 6px 2px; }

.map-wrap { max-width: 560px; margin: 12px auto 0; overflow: hidden; border: 2.5px solid var(--ink); border-radius: 16px; }

.map { cursor: crosshair; touch-action: manipulation; }

.scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

.score-chip { padding: 4px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 800; }

.score-chip.jua { background: var(--sun); }

.odd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 14px auto 0; }

.odd-cell {
  position: relative;
  padding: 8px 4px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.odd-cell.found { background: #D8F2DE; box-shadow: 0 0 0 4px var(--green); }

.odd-cell.wrong { background: #FBD9D6; animation: shake .25s; }

.count {
  position: absolute;
  top: -9px;
  right: -7px;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  font-size: .85rem;
  line-height: 20px;
  font-weight: 900;
}

.count.hi { background: var(--green); color: #fff; }

.pile.wide { max-width: 250px; }

.pile.wide .piece { transform: none !important; }

/* ---------- course 3: the path game ---------- */
.grid-world {
  position: relative;
  display: grid;
  max-width: 440px;
  margin: 12px auto 0;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #EAD7AE;
}

.grid-world.small { max-width: 300px; }

.cell { position: relative; padding-bottom: 100%; box-shadow: inset 0 0 0 1px rgba(58, 42, 30, .14); }

.cell > svg { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; }

.cell .arr { position: absolute; top: 24%; left: 24%; width: 52%; height: 52%; color: var(--blue); }

.arr svg { width: 100%; height: 100%; }

.cell.on-path { background: rgba(46, 158, 74, .38); }

.grid-world.editing .cell { cursor: pointer; }

.agent { position: absolute; padding: 1%; transition: left .1s linear, top .1s linear; pointer-events: none; }

.agent svg { width: auto; height: 100%; margin: 0 auto; }

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 66px);
  grid-template-rows: 56px 56px;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.btn.dir { min-height: 0; padding: 0; }

.dir.up { grid-column: 2; grid-row: 1; }
.dir.left { grid-column: 1; grid-row: 2; }
.dir.down { grid-column: 2; grid-row: 2; }
.dir.right { grid-column: 3; grid-row: 2; }

.dir .arrow-ico { width: 30px; height: 30px; }

.tries-row { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }

.tries-row .btn { min-height: 46px; padding: 8px 12px; font-size: 1rem; }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 58px;
  max-width: 440px;
  margin: 12px auto 0;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
}

.chart i { flex: 1; min-width: 2px; border-radius: 2px; }

.chart i.ok { background: var(--green); }

.chart i.bad { background: #F0A9A4; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }

.duo-name { font-size: 1rem; line-height: 1.2; font-weight: 900; text-align: center; }

.duo .grid-world { margin-top: 6px; }

.qmark.plus { align-self: center; font-size: 1.7rem; color: #1F7A37; }

/* ---------- course 3: clear instructions ---------- */
.task {
  max-width: 560px;
  margin: 12px auto 0;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}

.task summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 1.05rem; }

.task-count { padding: 2px 10px; border-radius: 999px; background: var(--sun-soft); font-size: .85rem; font-weight: 800; }

.task-count.all { background: #D8F2DE; color: #1F7A37; }

.task ol { margin: 0; padding: 0 14px 12px; list-style: none; counter-reset: step; }

.task li { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid #EFE4D6; counter-increment: step; line-height: 1.35; }

.task li .tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: #fff;
  font-size: .85rem;
  font-weight: 900;
}

.task li .tick:empty::before { content: counter(step); color: var(--ink); }

.task li.done .tick { background: var(--green); }

.task li.done > span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(43, 31, 23, .35); }

.task li.extra .tick { border-style: dashed; }

.task li .ico { width: 16px; height: 16px; }

.map-key, .rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; max-width: 560px; margin: 10px auto 0; font-size: .85rem; font-weight: 700; }

.key-item { display: inline-flex; align-items: center; gap: 4px; }

.key-ico { display: inline-block; width: 26px; height: 26px; }

.rewards { align-items: center; gap: 6px; }

.rewards .chip { padding: 2px 10px; font-size: .85rem; }

.rewards .chip.plus { background: #D8F2DE; }

.rewards .chip.minus { background: #FBD9D6; }

.btn.guess { flex-direction: column; min-height: 72px; line-height: 1.2; }

.btn.guess small { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; opacity: .8; }

/* ---------- course 4: pixels and neurons ---------- */
.pad {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  max-width: 320px;
  margin: 14px auto 0;
  padding: 4px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}

.pad i {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 2px;
  background: #fff;
  color: #9A8A7C;
  font-size: 0;
  font-style: normal;
  font-weight: 700;
}

@supports not (aspect-ratio: 1) {
  .pad i { min-height: 30px; }
  .pad.mini i { min-height: 8px; }
}

.pad i.on { background: var(--blue); }

.pad.jua i { background: #fff; font-size: .95rem; }

.pad.jua i.on { color: var(--ink); font-weight: 900; }

.pad.static { touch-action: auto; cursor: default; }

.pad.mini { width: 84px; max-width: 100%; gap: 1px; margin: 0; padding: 2px; border-width: 2px; border-radius: 8px; }

.pad.mini.jua i { overflow: hidden; font-size: 6px; }

.piece.dot { flex: none; width: 54px; align-self: center; }

.read-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 320px; margin: 14px auto 0; }

.read-opt {
  display: flex;
  justify-content: center;
  padding: 8px 4px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  background: #fff;
  cursor: pointer;
}

.read-opt.right { background: #D8F2DE; box-shadow: 0 0 0 4px var(--green); }

.read-opt.wrong { background: #FBD9D6; animation: shake .25s; }

.like { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-weight: 400; }

.piece.net { width: min(60%, 260px); align-self: center; }

.weights { display: grid; gap: 8px; max-width: 460px; margin: 12px auto 0; }

.w-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
}

.w-ico { flex: none; width: 40px; }

.w-name { flex: 1; min-width: 0; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }

.w-name small { display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

.stepper { display: flex; align-items: center; gap: 4px; flex: none; }

.stepper button {
  width: 42px;
  height: 42px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--sun);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.stepper b { min-width: 36px; font-size: 1.35rem; text-align: center; }

.stepper b.neg { color: #B3261E; }

.stepper b.pos { color: #1F7A37; }

.rule { margin-top: 12px; font-weight: 800; text-align: center; }

.truth { width: 100%; max-width: 460px; margin: 6px auto 0; border-collapse: separate; border-spacing: 0 6px; text-align: center; }

.truth th { padding: 0 2px; color: var(--muted); font-size: .78rem; font-weight: 800; }

.truth th .item { width: 34px; margin: 0 auto; }

.truth td { padding: 5px 2px; border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }

.truth td:first-child { border-left: 2.5px solid var(--ink); border-radius: 12px 0 0 12px; }

.truth td:last-child { border-right: 2.5px solid var(--ink); border-radius: 0 12px 12px 0; }

.truth tr.ok td { background: #D8F2DE; }

.truth tr.bad td { background: #FBD9D6; }

.truth td .ico { width: 22px; height: 22px; margin: 0 auto; }

.truth td.off { color: #B9A794; }

.truth td.yes { color: var(--ink); }

.truth .tot { font-size: 1.25rem; font-weight: 900; }

.truth .badge { position: static; display: inline-flex; width: 26px; height: 26px; }

/* ---------- course 5: words ---------- */
.sentence {
  min-height: 3.2em;
  margin-top: 14px;
  padding: 14px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sentence.small { min-height: 0; font-size: 1.2rem; }

.blank {
  display: inline-block;
  min-width: 3.2em;
  padding: 0 10px;
  border-bottom: 4px solid var(--ink);
  color: var(--red);
  text-align: center;
}

.blank.filled { border-color: var(--green); color: #1F7A37; }

.caret { display: inline-block; width: 3px; height: 1.1em; margin-left: 4px; background: var(--ink); vertical-align: -0.15em; animation: blink 1s steps(1) infinite; }

.quiz-opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.quiz-opts.three .btn.opt { justify-content: center; padding: 10px 6px; text-align: center; overflow-wrap: anywhere; }

.bars-title { margin-top: 8px; font-size: .95rem; }

.bars { display: grid; gap: 6px; margin-top: 8px; }

.prob-row { display: grid; grid-template-columns: minmax(64px, 30%) 1fr 44px; align-items: center; gap: 8px; }

.bar-word { font-weight: 800; overflow-wrap: anywhere; }

.bar-track { height: 14px; overflow: hidden; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }

.bar-track i { display: block; height: 100%; background: var(--blue); }

.bar-pct { font-size: .9rem; font-weight: 800; text-align: right; }

.sugg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }

.btn.sug { justify-content: space-between; overflow-wrap: anywhere; }

.btn.sug small { flex: none; color: var(--muted); font-size: .85rem; }

.chips.center { justify-content: center; margin-top: 12px; }

.chip.pickable { background: #fff; font: inherit; font-weight: 800; cursor: pointer; }

.text-in {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 14px auto 0;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
}

.say small { display: block; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

.chat-col { display: flex; flex-direction: column; gap: 8px; align-self: center; width: 130px; }

.chat { display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 10px 12px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; }

.chat.me { align-self: flex-end; background: var(--sun); }

.chat i { width: 16px; height: 8px; border-radius: 4px; background: var(--ink); opacity: .55; }

.chat b { color: var(--red); font-size: 1.4rem; line-height: .8; }

/* ---------- course 6: the language lab ---------- */
.prompt.small { margin-top: 18px; font-size: 1.2rem; }

.chip.pickable.on { background: var(--sun); }

.chip.pickable:disabled { opacity: .5; }

.pair { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 10px; }

.pair label { display: flex; flex-direction: column; flex: 1; max-width: 220px; font-weight: 800; }

.pair .arrow { font-size: 1.6rem; }

.lab-form { display: flex; flex-direction: column; max-width: 560px; margin: 14px auto 0; }

.lab-form label { margin: 10px 0 4px; font-weight: 800; }

.lab-form input, .pair select {
  width: 100%;
  min-height: 50px;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
}

.lab-form .chips { margin-top: 0; }

.lab-form > .btn { margin-top: 6px; }

.auth-err.ok { color: #1F7A37; }

.hint.left { text-align: left; }

.lab-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }

.lab-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  overflow-wrap: anywhere;
}

.lab-item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.lab-item .by { color: var(--muted); font-size: .85rem; font-weight: 700; }

.tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: .78rem;
  font-weight: 800;
}

.tag.starter { background: #E8F1FB; }
.tag.pending { background: #FFF1C9; }
.tag.local { background: #F3E8FB; }

.lab-card {
  margin-top: 12px;
  padding: 12px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}

.lab-line { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; font-size: 1.15rem; overflow-wrap: anywhere; }

.lab-line .tag { flex: none; }

.answers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lab-card .answers { margin: 10px 0 4px; max-width: none; }

.lab-card.use .answers.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); }

.check-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 14px; font-weight: 700; text-align: left; }

.check-row input { width: 22px; height: 22px; flex: none; }

.prob-row.match { grid-template-columns: minmax(0, 1.4fr) minmax(40px, 1fr) auto; }

.lab .prob-row { grid-template-columns: minmax(92px, 34%) 1fr 34px; }

.lab .bar-word { overflow-wrap: normal; word-break: normal; }

.bar-pct.wide { white-space: nowrap; }

.tok { display: inline-block; }

.tok.unknown, .chip.unknown { color: #B3261E; font-weight: 900; }

.lab-item.test { border-left-width: 10px; }
.grade-right { border-left-color: var(--green); }
.grade-order { border-left-color: var(--blue); }
.grade-close { border-left-color: var(--sun); }
.grade-wrong { border-left-color: var(--red); }
.chip.grade-right { background: #D8F2DE; }
.chip.grade-order { background: #DDE8FA; }
.chip.grade-close { background: #FFF1C9; }
.chip.grade-wrong { background: #FBD9D6; }

.lang-bars { display: grid; gap: 6px; align-self: center; width: min(66%, 280px); }

.lang-bars .prob-row { grid-template-columns: 84px 1fr; }

.lang-bars .bar-word { font-size: .9rem; overflow-wrap: normal; }

.chat-col .chat { font-weight: 800; }

.data-card {
  margin-top: 14px;
  padding: 16px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}

.dc-head { display: flex; align-items: center; gap: 12px; }

.dc-head h2 { font-size: 1.25rem; line-height: 1.2; font-weight: 900; }

.dc-jua { flex: none; width: 60px; }

.data-card dl { margin: 12px 0 0; }

.dc-row { padding: 8px 0; border-top: 1.5px solid #E6DACB; }

.dc-row dt { color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

.dc-row dd { margin: 2px 0 0; font-weight: 700; }

.dc-row ul { margin: 0; padding-left: 1.2em; }

.dc-foot { margin-top: 10px; padding-top: 10px; border-top: 1.5px solid #E6DACB; font-weight: 700; }

/* ---------- your robot car (every course) ---------- */
.robot-head { display: flex; align-items: center; gap: 12px; }

.robot-car { flex: none; width: 120px; }

.prompt.left { text-align: left; }

.robot-head p { margin-top: 6px; font-size: 1.05rem; }

.robot-box { margin-top: 12px; padding: 12px 14px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; }

.robot-box h2 { font-size: 1.1rem; font-weight: 900; }

.robot-box ol { margin: 8px 0 0; padding-left: 1.3em; }

.robot-box ol.plain { list-style: disc; }

.robot-box li { margin-bottom: 6px; line-height: 1.4; }

.robot-box.talk { background: var(--sun-soft); }

.ports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }

.ports label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 800; }

.ports select {
  min-height: 42px;
  margin-top: 2px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
}

.code-tabs { margin-top: 16px; }

.code {
  max-height: 420px;
  margin: 8px 0 0;
  padding: 12px;
  overflow: auto;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: #1E2328;
  color: #F2F2F2;
  font: 13px/1.45 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  white-space: pre;
  tab-size: 4;
}

.code .cm { color: #9FD38A; }

.code.blocks { background: #FFF6DD; color: var(--ink); font-weight: 700; white-space: pre-wrap; }

@media (min-width: 620px) { .ports { grid-template-columns: repeat(4, minmax(0, 1fr)); } .robot-car { width: 170px; } }

@media (max-width: 619px) {
  .robot-head { flex-direction: column; align-items: stretch; }
  .robot-car { width: 150px; margin: 0 auto; }
  .robot-head .prompt.left { text-align: center; }
}

/* ---------- motion ---------- */
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bump { 50% { transform: scale(1.12); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes scan { from { top: 0; } to { top: 100%; } }
@keyframes toast { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 20% { transform: none; opacity: 1; } 75% { transform: none; opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
@keyframes fall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

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

/* ---------- bigger screens ---------- */
@media (min-width: 620px) {
  .main { padding: 24px 24px 48px; }
  .hero { height: 280px; }
  .hero-jua { width: 160px; margin-left: -80px; }
  .logo { font-size: 3.8rem; }
  .course-list { grid-template-columns: 1fr 1fr; }
  .quiz-jua { width: 120px; }
  .say { font-size: 1.5rem; }
  .illo { min-height: 300px; gap: 20px; }
  .piece.xl { width: 200px; }
  .piece.lg { width: 160px; }
  .piece.md { width: 110px; }
  .piece.sm { width: 72px; }
  .pile { max-width: 260px; }
  .prompt { font-size: 1.8rem; }
  .learner { width: 130px; }
  .words { grid-template-columns: 1fr 1fr 1fr; }
  .thumb { width: 72px; height: 72px; }
  .cert { padding: 40px 30px; }
}

@media (max-width: 520px) {
  .results.wide .cols { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .stop { width: 24px; height: 24px; font-size: 12px; border-width: 2px; }
  .w-row { gap: 6px; padding: 6px; }
  .w-ico { width: 30px; }
  .stepper button { width: 36px; height: 36px; }
  .stepper b { min-width: 30px; }
  .card-wrap { width: 180px; }
  .learner { width: 80px; }
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .main { max-width: none; padding: 0; }
  .cert { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}