/* ============================================================
   Jugnu Jar — layout: screens, grids, activity surfaces
   ============================================================ */

#app {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- top bar ---------- */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  z-index: 20;
}
.topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: clamp(15px, 2.6vw, 22px);
  text-shadow: 0 2px 0 rgba(45, 33, 80, .3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- screen container ---------- */

.screen-root {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px 28px;
}

.screen {
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* The home grid gets a little more room than a reading column would want, so
   four tiles across a desktop are generous rather than cramped. */
.screen.home { max-width: 1120px; }

.screen-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

/* ============================================================
   Shared bits
   ============================================================ */

.home-progress {
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 15px;
  opacity: .9;
}

.bar {
  height: 14px;
  border-radius: var(--r-pill);
  background: rgba(45, 33, 80, .12);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-good), #7ee08a);
  transition: width .5s ease;
}

/* ============================================================
   Home — one grid of subject tiles
   ============================================================ */

.subject-grid {
  /* Column counts are set per breakpoint rather than left to auto-fit alone.
     Auto-fit happily produced three columns on a tablet, which left the fourth
     subject sitting alone beside a large empty gap. Balanced rows matter more
     here than fitting the maximum number of tiles. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding-top: 4px;
}

.subject-card {
  border: none;
  border-radius: var(--r-lg);
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--c-ink);
  box-shadow: var(--shadow-2);
  transition: transform .15s ease;
  text-align: center;
  /* Comfortably above the 44px minimum touch target at every width. */
  min-height: 150px;
  /* Grid items default to min-width:auto, so the nowrap meta row below would
     set a floor the tile could not shrink past — on a 320px phone that pushed
     the second column off-screen, silently clipped by the scroller's
     overflow-x:hidden rather than visibly overflowing. */
  min-width: 0;
}
.subject-card:active { transform: scale(.96); }

/* Picture and name centre themselves in whatever height the tile ends up,
   so tiles with a script line sit level with those without one. */
.subject-card .tile-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.subject-card .emoji { font-size: clamp(40px, 11vw, 60px); line-height: 1.05; }
.subject-card .name { font-size: clamp(17px, 4.4vw, 24px); font-weight: 900; line-height: 1.15; }
.subject-card .native { font-family: var(--font-indic); font-size: clamp(14px, 3.4vw, 19px); font-weight: 700; opacity: .82; line-height: 1.2; }
.subject-card .blurb {
  font-size: 12px;
  font-weight: 700;
  opacity: .78;
  line-height: 1.25;
}
.subject-card .meta {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 6px;
  /* One line, always. A tile whose meta wrapped sat its progress bar higher
     than its neighbours, so a row of tiles looked misaligned for the sake of
     one extra digit in "0/261". */
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: 100%;
  /* If it truly cannot fit, clip inside the tile rather than widening it. */
  overflow: hidden;
}
.subject-card .bar { width: 100%; margin-top: auto; }

.subject-card.telugu { background: linear-gradient(150deg, var(--c-telugu-2), var(--c-telugu)); }
.subject-card.hindi  { background: linear-gradient(150deg, var(--c-hindi-2), var(--c-hindi)); }
.subject-card.maths  { background: linear-gradient(150deg, var(--c-maths-2), var(--c-maths)); color: #fff; }
.subject-card.maths .age-badge { background: rgba(255,255,255,.28); color: #fff; }
.subject-card.code   { background: linear-gradient(150deg, var(--c-code-2), var(--c-code)); color: #fff; }
.subject-card.code .age-badge { background: rgba(255,255,255,.28); color: #fff; }

/* Breakpoints come after the base rules, or they would be overridden by them —
   these selectors carry the same specificity, so source order decides. */

/* Phones: two tiles fit only if the wordier bits stand down. The emoji, name
   and native script carry the meaning; the English blurb does not.

   The age badge goes too. Sharing one line with the star count needed ~150px
   and a phone tile offers ~116–143px, so the badge was being clipped mid-word
   ("5-9 yrs" became "-9 yrs"). Letting it wrap instead was worse: only the
   longer labels wrapped, so progress bars stopped lining up across a row.
   The age range is still on the filter chips above and in each tile's
   aria-label; the stars are the part a child looks for. */
@media (max-width: 519px) {
  .subject-grid { gap: 10px; }
  .subject-card { padding: 12px 8px 10px; min-height: 132px; }
  .subject-card .blurb { display: none; }
  .subject-card .age-badge { display: none; }
  .subject-card .meta { font-size: 12px; gap: 5px; }
}

/* Tablets: still two across, but tiles big enough to feel like doors into a
   subject rather than buttons. */
@media (min-width: 600px) {
  .subject-grid { gap: 18px; }
  .subject-card { min-height: 230px; padding: 22px 16px 16px; }
  .subject-card .emoji { font-size: 68px; }
}

/* Wide screens: four across, so the whole app is one glance and one tap. */
@media (min-width: 1000px) {
  .subject-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Topics inside a subject
   ============================================================ */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  padding: 6px 0;
}

.topic-card {
  border-radius: var(--r-lg);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #fff;
  box-shadow: var(--shadow-2);
  transition: transform .15s ease;
  text-align: center;
}
.topic-card:active { transform: scale(.96); }
.topic-card .emoji { font-size: clamp(38px, 7vw, 52px); line-height: 1; }
.topic-card .title { font-size: clamp(19px, 3.5vw, 26px); font-weight: 900; }
.topic-card .native { font-family: var(--font-indic); font-size: clamp(15px, 3vw, 20px); font-weight: 700; color: var(--c-ink-soft); }
.topic-card .blurb { font-size: 13px; font-weight: 700; color: var(--c-ink-soft); }
.topic-card .count { font-size: 13px; font-weight: 800; color: var(--c-ink-soft); }
.topic-card .bar { width: 100%; margin-top: 8px; }

.act-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 6px; }
.act-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: #f1edff;
  color: #6b5bb5;
}
.act-pill.learn  { background: #e2f0ff; color: #1e6fbd; }
.act-pill.match  { background: #ffe6f4; color: #c1417f; }
.act-pill.listen { background: #fff2d9; color: #a86b00; }
.act-pill.trace  { background: #e6f8de; color: #3f8a26; }
.act-pill.solve  { background: #efe4ff; color: #7038d1; }

/* ============================================================
   Levels — the map
   ============================================================ */

.level-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;
}

.level-card {
  flex: 0 0 auto;
  width: clamp(132px, 22vw, 168px);
  border-radius: var(--r-md);
  padding: 14px 8px 12px;
  background: #fff;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 140px;
  transition: transform .15s ease;
}
.level-card:active { transform: scale(.95); }
.level-card .num { font-size: 14px; font-weight: 800; color: var(--c-ink-soft); }
.level-card .peek {
  font-family: var(--font-indic);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}
.level-card .peek.compact {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--c-ink-soft);
  word-break: normal;
}
.level-card.done { background: linear-gradient(160deg, #ffffff, #e6ffef); }

/* ============================================================
   Activity picker
   ============================================================ */

.act-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  padding: 8px 0;
}

.act-card {
  border-radius: var(--r-lg);
  padding: 22px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
  box-shadow: var(--shadow-2);
  transition: transform .15s ease;
}
.act-card:active { transform: scale(.95); }
.act-card .emoji { font-size: clamp(40px, 8vw, 56px); line-height: 1; }
.act-card .title { font-size: clamp(17px, 3vw, 23px); font-weight: 900; }
.act-card .hint { font-size: 13px; font-weight: 700; opacity: .9; }
.act-card.learn  { background: linear-gradient(150deg, #7bc4ff, var(--c-learn)); }
.act-card.match  { background: linear-gradient(150deg, #ffa8d8, var(--c-match)); }
.act-card.listen { background: linear-gradient(150deg, #ffd07a, var(--c-listen)); }
.act-card.trace  { background: linear-gradient(150deg, #aeea8f, var(--c-trace)); }
.act-card.solve  { background: linear-gradient(150deg, #c9a3ff, var(--c-solve)); }

.level-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 6px 0 14px;
}
.level-letters .chip {
  font-family: var(--font-indic);
  background: rgba(255,255,255,.9);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  font-size: 24px;
  font-weight: 700;
  box-shadow: var(--shadow-1);
}
.level-letters .chip:not(.indic) {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 800;
  padding: 8px 14px;
}

/* ============================================================
   Learn — flashcards
   ============================================================ */

.flash-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.flash-card {
  width: min(430px, 92vw);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.flash-letter {
  font-family: var(--font-indic);
  font-size: clamp(96px, 26vw, 168px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-ink);
  background: none;
  padding: 0 16px;
  border-radius: var(--r-md);
  transition: transform .15s ease;
}
.flash-letter:active { transform: scale(.93); }

.flash-roman {
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 900;
  color: var(--c-learn);
  letter-spacing: 1px;
}
.flash-say { font-size: 16px; font-weight: 700; color: var(--c-ink-soft); }

.flash-word {
  margin-top: 10px;
  padding: 12px 8px 4px;
  border-top: 3px dashed #e5e1f2;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--r-md);
  transition: transform .12s ease, background .2s ease;
}
.flash-word:active { transform: scale(.97); background: #f6f3ff; }
.flash-word .emoji { font-size: clamp(40px, 9vw, 58px); line-height: 1; }
.flash-word .txt { text-align: left; }
.flash-word .w-native { font-family: var(--font-indic); font-size: clamp(24px, 5vw, 34px); font-weight: 700; }
.flash-word .w-roman { font-size: 16px; font-weight: 800; color: var(--c-ink-soft); }
.flash-word .w-en { font-size: 15px; font-weight: 700; color: var(--c-good-dark); }

.flash-controls { display: flex; align-items: center; gap: 14px; }
.round-btn {
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  font-size: 30px;
  background: #fff;
  box-shadow: var(--shadow-1);
  display: grid; place-items: center;
  transition: transform .12s ease;
}
.round-btn:active { transform: scale(.9); }
.round-btn[disabled] { opacity: .3; pointer-events: none; }
.round-btn.speak { background: var(--c-listen); color: #fff; width: 82px; height: 82px; font-size: 38px; }

.dots { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; padding-top: 4px; }
.dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.45);
}
.dots i.on { background: #fff; transform: scale(1.35); }
.dots i.seen { background: rgba(255,255,255,.8); }

/* ============================================================
   Match
   ============================================================ */

.match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}
.match-col { display: flex; flex-direction: column; gap: 12px; }

.match-tile {
  min-height: var(--tap);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-1);
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 8px;
  transition: transform .12s ease, background .2s ease, opacity .3s ease;
}
.match-tile.glyph { font-family: var(--font-indic); font-size: clamp(34px, 7vw, 48px); }
.match-tile.roman { font-size: clamp(20px, 4vw, 28px); color: var(--c-match); }
.match-tile:active { transform: scale(.95); }
.match-tile.picked { background: var(--c-warn); transform: scale(1.04); }
.match-tile.done { background: var(--c-good); color: #fff; opacity: .45; pointer-events: none; }
.match-tile.done.roman { color: #fff; }
.match-tile.pictorial { padding: 6px; }
.match-board.has-pictures .match-tile { min-height: 100px; }
.match-tile.pictorial .vis { padding: 0; }
.match-tile.pictorial .vis-queue .q-item { font-size: 17px; }
.match-tile.pictorial .vis-coins .money.coin { width: 36px; height: 36px; font-size: 12px; }
.match-tile.pictorial .vis-coins .money.note { height: 30px; padding: 0 9px; font-size: 12px; }

/* ============================================================
   Listen & pick
   ============================================================ */

.listen-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.listen-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: min(520px, 94vw);
}
.opt-tile {
  aspect-ratio: 1 / 1;
  min-height: 96px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-2);
  font-family: var(--font-indic);
  font-size: clamp(44px, 12vw, 76px);
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: transform .12s ease, background .2s ease;
}
.opt-tile:active { transform: scale(.95); }
.opt-tile.right { background: var(--c-good); color: #fff; }
.opt-tile.wrong { background: var(--c-oops); color: #fff; }

.progress-pips { display: flex; gap: 6px; }
.progress-pips i {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.progress-pips i.hit { background: var(--c-good); }
.progress-pips i.miss { background: var(--c-oops); }

/* ============================================================
   Trace
   ============================================================ */

.trace-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.trace-frame {
  position: relative;
  width: min(420px, 88vw);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.trace-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
#trace-ink { cursor: crosshair; }

.trace-meter {
  width: min(420px, 88vw);
}
.trace-controls { display: flex; gap: 14px; align-items: center; }

/* ============================================================
   Result overlay
   ============================================================ */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 33, 80, .55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 55;
  padding: 20px;
}
.result-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 26px 26px 22px;
  text-align: center;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.result-card .big-emoji { font-size: 72px; line-height: 1; }
.result-card h2 { font-size: 30px; }
.result-card .stars { font-size: 46px; gap: 6px; }
.result-card .msg { font-size: 17px; font-weight: 700; color: var(--c-ink-soft); }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.result-actions .big-btn { padding: 12px 22px; font-size: 18px; min-height: 60px; }

/* ============================================================
   Settings (grown-ups)
   ============================================================ */

.settings-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 22px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-weight: 800; font-size: 15px; }
.field select, .field input[type="range"] {
  font-family: inherit;
  font-size: 16px;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 3px solid #e5e1f2;
  background: #fff;
  width: 100%;
}
.field .note { font-size: 13px; color: var(--c-ink-soft); font-weight: 600; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.switch input { width: 26px; height: 26px; }
.danger { background: var(--c-oops); color: #fff; }

/* ============================================================
   Solve — written question, four answers
   ============================================================ */

.solve-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

.solve-question {
  width: min(460px, 94vw);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.solve-prompt {
  font-size: clamp(28px, 7.5vw, 48px);
  font-weight: 900;
  color: var(--c-ink);
  text-align: center;
  line-height: 1.15;
}
.solve-prompt.indic { font-family: var(--font-indic); }
.solve-hint { font-size: 14px; font-weight: 800; color: var(--c-ink-soft); text-align: center; }

.solve-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(460px, 94vw);
}
.solve-tile {
  min-height: 76px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-2);
  font-size: clamp(21px, 5vw, 31px);
  font-weight: 900;
  color: var(--c-solve);
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  transition: transform .12s ease, background .2s ease;
}
.solve-tile.indic { font-family: var(--font-indic); }
.solve-tile:active { transform: scale(.95); }
.solve-tile.right { background: var(--c-good); color: #fff; }
.solve-tile.wrong { background: var(--c-oops); color: #fff; }

/* ============================================================
   Visuals — something concrete to count
   ============================================================ */

.vis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 2px;
}

.flash-visual { width: 100%; display: flex; justify-content: center; }

/* counters */
.vis-counters { gap: 10px; }
.ctr-group { display: flex; flex-wrap: wrap; gap: 5px; max-width: 168px; justify-content: center; }
.ctr {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff;
}
.ctr.one { background: var(--c-telugu); }
.ctr.two { background: var(--c-learn); }
.ctr.gone { background: #cfc8e6; color: #7a72a0; }
.ctr-op { font-size: 26px; font-weight: 900; color: var(--c-ink-soft); }

/* tens & ones */
.vis-tensones { gap: 18px; align-items: flex-end; }
.to-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.to-group { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: flex-end; max-width: 152px; min-height: 46px; }
.to-ten {
  width: 22px; height: 46px;
  border-radius: 6px;
  background: var(--c-maths); color: #fff;
  font-size: 11px; font-weight: 900;
  display: grid; place-items: center;
}
.to-one { width: 18px; height: 18px; border-radius: 4px; background: var(--c-listen); }
.to-cap { font-size: 12px; font-weight: 800; color: var(--c-ink-soft); }

/* clock */
.vis-clockwrap { padding: 2px; }
.vis-clock { display: block; }

/* money */
.vis-coins { gap: 8px; }
.money {
  font-weight: 900;
  display: grid; place-items: center;
  box-shadow: var(--shadow-1);
  color: #4a3a12;
}
.money.coin { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(150deg, #f6e3ac, #d6b34e); font-size: 16px; }
.money.note { height: 42px; padding: 0 15px; border-radius: 6px; font-size: 17px; color: #fff; }
.money.note-sm { background: linear-gradient(150deg, #8fd6a3, #3f9e5e); }
.money.note-lg { background: linear-gradient(150deg, #f0a3b8, #c94f76); }

/* queue, for ordinals */
.vis-queue { gap: 2px; flex-wrap: nowrap; max-width: 100%; overflow: hidden; }
.q-item { font-size: clamp(15px, 5.2vw, 26px); opacity: .5; transition: transform .2s ease; }
.q-item.on { opacity: 1; transform: scale(1.35); filter: drop-shadow(0 3px 4px rgba(45, 33, 80, .35)); }
.q-start { font-size: .74em; order: -1; margin-right: 3px; }

/* number strip */
.vis-numberline { gap: 5px; }
.nl-cell {
  min-width: 30px;
  padding: 5px 6px;
  border-radius: 8px;
  background: #efecf9;
  color: var(--c-ink-soft);
  font-size: 14px; font-weight: 800;
  text-align: center;
}
.nl-cell.on { background: var(--c-maths); color: #fff; }
.nl-cell.missing { background: var(--c-warn); color: var(--c-ink); }

/* ---------- small screens ---------- */

@media (max-height: 620px) {
  .flash-letter { font-size: clamp(70px, 18vw, 110px); }
  .screen-title { font-size: 22px; }
  .screen-subtitle { margin-bottom: 8px; }
}