/* Mission: Ready for School! on talentjr.in — scoped under .tjmr (generated from the standalone game.css). */
/* ==========================================================================
   Mission: Ready for School! — STYLES
   Uses the TalentJR Design System v1 tokens (see /var/www/design-system/tokens.css).
   Mobile-first: the layout starts at phone width and grows up to desktop.
   ========================================================================== */

/* ---------- 1. Design tokens ------------------------------------------- */
.tjmr {
  /* root of the game inside the TalentJR page */
  display: block;
  /* TalentJR brand (design system v1) */
  --tj-brand-50: #FFF4EC;
  --tj-brand-100: #FFE4D1;
  --tj-brand-500: #F26A1B;   /* logo orange: illustrations/brand surfaces only */
  --tj-action: #C2410C;      /* buttons, focus ring (white text 4.78:1) */
  --tj-action-hover: #9A3412;
  --tj-ink: #1F2A44;
  --tj-ink-muted: #5B6478;
  --tj-line: #E8E2DC;
  --tj-surface: #FFF8F3;
  --tj-card: #FFFFFF;
  --tj-success: #15803D;
  --tj-info: #1D4ED8;
  --tj-info-bg: #EEF5FF;
  --tj-success-bg: #ECFDF3;

  /* Game-only accents, taken from the illustrations */
  --tj-sky: #E6F5FF;
  --tj-sky-deep: #BFE4FA;
  --tj-star: #F5B700;

  --tj-radius-sm: 8px;
  --tj-radius-btn: 12px;
  --tj-radius-card: 16px;
  --tj-shadow-card: 0 1px 2px rgba(31, 42, 68, .06), 0 4px 16px rgba(31, 42, 68, .08);

  --tj-font-body: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --tj-font-heading: 'Poppins', 'Noto Sans Devanagari', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- 2. Base ----------------------------------------------------- */
.tjmr *,
.tjmr *::before,
.tjmr *::after { box-sizing: border-box; }

.tjmr {
  margin: 0;
  /* Explicit background (also the dark-mode-safe colour). Soft sky at the top, warm surface below. */
  background: linear-gradient(180deg, var(--tj-sky) 0, var(--tj-surface) 420px) var(--tj-surface);
  color: var(--tj-ink);
  font: 400 16px/1.5 var(--tj-font-body);
  overflow-x: hidden;               /* no sideways scroll on phones */
}

.tjmr img { max-width: 100%; height: auto; display: block; }
.tjmr img[hidden] { display: none; }
.tjmr [hidden] { display: none !important; }

.tjmr h1, .tjmr h2, .tjmr h3, .tjmr h4 {
  font-family: var(--tj-font-heading);
  line-height: 1.2;
  color: var(--tj-ink);
  margin: 0 0 8px;
}
.tjmr h1 { font-size: 26px; }
.tjmr h2 { font-size: 22px; }
.tjmr h3 { font-size: 19px; }
.tjmr h4 { font-size: 15px; color: var(--tj-action-hover); margin-bottom: 4px; }

.tjmr p { margin: 0 0 12px; }
.tjmr ol, .tjmr ul { margin: 0; padding: 0; }

.tjmr :focus-visible {
  outline: 3px solid var(--tj-action);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Hidden but read by screen readers */
.tjmr .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link: appears only when focused by keyboard */
.tjmr .skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 10;
  background: var(--tj-card);
  color: var(--tj-ink);
  padding: 10px 14px;
  border-radius: var(--tj-radius-btn);
  box-shadow: var(--tj-shadow-card);
  text-decoration: none;
  font-weight: 600;
}
.tjmr .skip-link:focus { top: 12px; }

/* ---------- 3. Top bar + layout ---------------------------------------- */

.tjmr .wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px 40px;     /* 16px side gutter on phones */
  outline: none;
}

.tjmr .screen { animation: tj-fade .25s ease-out; }
@keyframes tj-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tjmr .card {
  background: var(--tj-card);
  border: 1px solid var(--tj-line);
  border-radius: var(--tj-radius-card);
  box-shadow: var(--tj-shadow-card);
  padding: 16px;
  margin-bottom: 16px;
}

.tjmr section { margin-bottom: 24px; }
.tjmr section > h2 { margin-bottom: 12px; }

.tjmr .lead { font-size: 17px; color: var(--tj-ink); }
.tjmr .note { font-size: 14px; color: var(--tj-ink-muted); }
.tjmr .fine { font-size: 13px; color: var(--tj-ink-muted); text-align: center; margin: 24px 0 0; }

.tjmr .error { color: var(--tj-ink); border-left: 4px solid var(--tj-action); }

/* ---------- 4. Buttons -------------------------------------------------- */
.tjmr .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--tj-radius-btn);
  border: 1px solid transparent;
  font: 600 16px/1 var(--tj-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tjmr .btn--primary { background: var(--tj-action); color: #fff; }
.tjmr .btn--primary:hover { background: var(--tj-action-hover); }
.tjmr .btn--secondary { background: var(--tj-card); color: var(--tj-ink); border-color: var(--tj-line); }
.tjmr .btn--secondary:hover { background: var(--tj-brand-50); }

/* Image buttons: the picture from the asset pack is the button face. */
.tjmr .img-btn {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.tjmr .img-btn img { width: 100%; height: auto; }
.tjmr .img-btn:hover { transform: translateY(-2px); }
.tjmr .img-btn:active { transform: translateY(1px); }
.tjmr .img-btn--start { width: min(270px, 100%); }
.tjmr .img-btn--home { width: 150px; }
.tjmr .img-btn--retry { width: 150px; }

.tjmr .link-btn {
  background: none;
  border: 0;
  padding: 8px;
  color: var(--tj-action-hover);
  font: 600 14px var(--tj-font-body);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

/* ---------- 5. Home ----------------------------------------------------- */
.tjmr .hero { text-align: center; padding: 20px 16px 24px; }
.tjmr .hero__banner { width: min(480px, 100%); margin: 0 auto 12px; object-fit: contain; }
.tjmr .hero .lead { max-width: 60ch; margin: 0 auto 16px; }
.tjmr .hero .img-btn--start { margin: 0 auto; }

.tjmr .stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}
.tjmr .stat {
  text-align: center;
  background: var(--tj-brand-50);
  border-radius: var(--tj-radius-btn);
  padding: 12px 6px;
}
.tjmr .stat__value {
  display: block;
  font: 700 26px/1.1 var(--tj-font-heading);
  color: var(--tj-action-hover);
}
.tjmr .stat__label { font-size: 13px; color: var(--tj-ink-muted); }

.tjmr .daily {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--tj-brand-50) 100%);
}
.tjmr .daily__img { width: 96px; height: auto; object-fit: contain; flex: 0 0 auto; }
.tjmr .daily__body { flex: 1; min-width: 0; }
.tjmr .daily__body p { color: var(--tj-ink); }

/* Mission cards */
.tjmr .mission-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.tjmr .mission-card { margin: 0; }
.tjmr .mission-card__btn {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas:
    "img no"
    "img title"
    "img done";
  column-gap: 12px;
  align-items: center;
  text-align: left;
  background: var(--tj-card);
  border: 2px solid var(--tj-line);
  border-radius: var(--tj-radius-card);
  box-shadow: var(--tj-shadow-card);
  padding: 10px;
  font: inherit;
  color: var(--tj-ink);
  cursor: pointer;
  min-height: 56px;
  transition: border-color .15s, transform .12s;
}
.tjmr .mission-card__btn:hover { border-color: var(--tj-brand-500); transform: translateY(-2px); }
.tjmr .mission-card__img {
  grid-area: img;
  width: 96px;
  height: 72px;
  object-fit: contain;
  background: var(--tj-sky);
  border-radius: 10px;
}
.tjmr .mission-card__no { grid-area: no; font-size: 12px; font-weight: 600; color: var(--tj-ink-muted); }
.tjmr .mission-card__title { grid-area: title; font: 600 16px/1.25 var(--tj-font-heading); color: var(--tj-ink); }
.tjmr .mission-card__done { grid-area: done; font-size: 13px; font-weight: 600; color: var(--tj-success); }
.tjmr .mission-card__done--new { color: var(--tj-action-hover); }
.tjmr .mission-card__stars { display: none; }
.tjmr .mission-card__stars .star { width: 18px; height: 18px; display: inline-block; }

/* Tips */
.tjmr .tips { list-style: none; display: grid; gap: 12px; grid-template-columns: 1fr; }
.tjmr .tip { display: flex; gap: 12px; align-items: center; margin: 0; padding: 12px; }
.tjmr .tip__img { width: 110px; height: 80px; object-fit: contain; flex: 0 0 auto; background: var(--tj-sky); border-radius: 10px; }
.tjmr .tip__body h3 { font-size: 16px; margin-bottom: 2px; }
.tjmr .tip__body p { font-size: 14px; color: var(--tj-ink-muted); margin: 0; }

/* Badges */
.tjmr .badges {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}
.tjmr .badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F4F4F6;
  border: 1px dashed #C9CDD8;
  border-radius: var(--tj-radius-btn);
  color: var(--tj-ink-muted);
}
.tjmr .badge--earned {
  background: var(--tj-card);
  border: 1px solid var(--tj-brand-100);
  border-left: 4px solid var(--tj-star);
  color: var(--tj-ink);
  box-shadow: var(--tj-shadow-card);
}
.tjmr .badge__img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.tjmr .badge__icon { font-size: 22px; line-height: 1; width: 40px; text-align: center; color: var(--tj-star); flex: 0 0 auto; }
.tjmr .badge__text { display: flex; flex-direction: column; font-size: 14px; }
.tjmr .badge__text strong { font: 600 15px var(--tj-font-heading); color: inherit; }

/* How to play */
.tjmr .how__list { padding-left: 22px; }
.tjmr .how__list li { margin-bottom: 6px; }

/* Stars (used on mission, home cards, completion) */
.tjmr .stars { display: flex; gap: 6px; align-items: center; margin: 4px 0 12px; }
.tjmr .star { width: 40px; height: 40px; object-fit: contain; }
.tjmr .star--off { filter: grayscale(1); opacity: .3; }

/* ---------- 6. Mission screen ------------------------------------------ */
.tjmr .mission-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.tjmr .pill {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--tj-brand-50);
  color: var(--tj-action-hover);
  font: 600 14px/1.4 var(--tj-font-body);
}

.tjmr .dots {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}
.tjmr .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tj-line);
}
.tjmr .dot--done { background: var(--tj-success); }
.tjmr .dot--now { background: var(--tj-card); box-shadow: 0 0 0 3px var(--tj-action); }

.tjmr .mission { padding: 18px 16px 22px; }
.tjmr .mission__title { font-size: 22px; margin-bottom: 12px; }
.tjmr .mission__img {
  width: 100%;
  max-width: 320px;
  height: 220px;
  margin: 0 auto 12px;
  object-fit: contain;
  background: var(--tj-card);      /* most illustrations have a white margin: blend with it */
  border-radius: var(--tj-radius-card);
}
.tjmr .scenario { font-size: 17px; color: var(--tj-ink); margin-bottom: 14px; }
.tjmr .question {
  font-size: 19px;
  color: var(--tj-action-hover);
  margin-bottom: 12px;
}

/* Answer buttons: big tap targets, 3 choices */
.tjmr .options { display: grid; gap: 10px; }
.tjmr .answer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  text-align: left;
  background: var(--tj-card);
  border: 2px solid var(--tj-line);
  border-radius: var(--tj-radius-btn);
  box-shadow: 0 1px 2px rgba(31, 42, 68, .05);
  font: 500 17px/1.35 var(--tj-font-body);
  color: var(--tj-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s;
}
.tjmr .answer:hover:not(:disabled) { border-color: var(--tj-brand-500); background: var(--tj-brand-50); }
.tjmr .answer__key {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tj-brand-100);
  color: var(--tj-action-hover);
  font: 700 14px var(--tj-font-body);
}
.tjmr .answer__text { flex: 1; min-width: 0; }
.tjmr .answer--tried {
  background: #F4F4F6;
  color: var(--tj-ink-muted);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: not-allowed;
}
.tjmr .answer--correct {
  background: var(--tj-success-bg);
  border-color: var(--tj-success);
  color: var(--tj-ink);
  font-weight: 600;
}
.tjmr .answer--correct .answer__key { background: var(--tj-success); color: #fff; }
.tjmr .answer:disabled:not(.answer--tried):not(.answer--correct) { opacity: .6; }

/* Gentle hint after a wrong choice (blue, never red) */
.tjmr .hint {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  background: var(--tj-info-bg);
  border-left: 4px solid var(--tj-info);
  border-radius: var(--tj-radius-btn);
}
.tjmr .hint__text { font-size: 16px; margin: 0; color: var(--tj-ink); }
.tjmr .hint__tip { width: 100%; max-width: 240px; height: auto; margin: 0 auto; object-fit: contain; }
.tjmr .hint .img-btn { justify-self: start; }

/* Feedback after the right answer */
.tjmr .feedback { text-align: center; padding: 18px 16px 20px; border-top: 4px solid var(--tj-success); }
.tjmr .feedback__banner { width: min(300px, 100%); height: auto; margin: 0 auto 4px; object-fit: contain; }
.tjmr .feedback__title { font-size: 22px; color: var(--tj-success); margin: 0 0 4px; }
.tjmr .feedback .stars { justify-content: center; }
.tjmr .explanation { text-align: left; font-size: 16px; }

.tjmr .support { margin: 0 0 12px; }
.tjmr .support img { width: min(260px, 100%); height: auto; margin: 0 auto; object-fit: contain; border-radius: var(--tj-radius-btn); }

.tjmr .fun, .tjmr .real {
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--tj-radius-btn);
  margin-bottom: 10px;
}
.tjmr .fun { background: #FFF9E6; }
.tjmr .fun p { margin: 0; }
.tjmr .fun__img { width: min(340px, 100%); height: auto; margin: 6px auto 0; object-fit: contain; }
.tjmr .real { background: var(--tj-success-bg); }
.tjmr .real p { margin: 0; }

.tjmr .habit {
  width: min(200px, 60%);
  height: auto;
  margin: 4px auto 12px;
  object-fit: contain;
}

.tjmr .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.tjmr .actions .btn { flex: 1 1 200px; }
.tjmr .actions--stack { flex-direction: column; align-items: center; }
.tjmr .actions--stack .btn { flex: 0 0 auto; min-width: 220px; }

/* ---------- 7. Complete screen ----------------------------------------- */
.tjmr .complete { text-align: center; padding: 22px 16px; }
.tjmr .complete__trophy { width: min(260px, 80%); height: auto; margin: 0 auto 8px; object-fit: contain; }
.tjmr .complete__title { font-size: 28px; color: var(--tj-action-hover); }
.tjmr .complete__score { font-weight: 600; color: var(--tj-ink); }
.tjmr .complete .badges { text-align: left; margin: 16px 0; }

/* ---------- 8. Toast --------------------------------------------------- */
.tjmr .toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--tj-ink);
  color: #fff;
  font: 600 15px/1.3 var(--tj-font-body);
  text-align: center;
  box-shadow: var(--tj-shadow-card);
}

/* ---------- 9. Footer -------------------------------------------------- */

/* Missing image: keep layout with a soft placeholder instead of a broken icon */
.tjmr img.is-missing {
  visibility: hidden;
  background: var(--tj-sky);
  min-height: 60px;
}

/* ---------- 10. Responsive --------------------------------------------- */
@media (min-width: 560px) {
  .tjmr .wrap { padding: 20px 20px 48px; }
  .tjmr .mission-grid { grid-template-columns: repeat(2, 1fr); }
  .tjmr .tips { grid-template-columns: 1fr 1fr; }
  .tjmr .badges { grid-template-columns: repeat(2, 1fr); }
  .tjmr .mission { padding: 22px 24px 26px; }
  .tjmr .mission__img { height: 240px; }
  .tjmr .hint { grid-template-columns: auto 1fr; }
  .tjmr .hint .img-btn { justify-self: auto; }
  .tjmr .hint__text { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .tjmr h1 { font-size: 32px; }
  .tjmr h2 { font-size: 24px; }
  .tjmr .mission-grid { grid-template-columns: repeat(3, 1fr); }
  .tjmr .mission-card__btn { grid-template-columns: 110px 1fr; min-height: 72px; }
  .tjmr .mission-card__img { width: 110px; height: 84px; }
  .tjmr .mission-card__stars { display: block; }
  .tjmr .mission-card__stars .star { width: 20px; height: 20px; }
  .tjmr .mission { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 24px; align-items: start; }
  .tjmr .mission__title, .tjmr .scenario, .tjmr .question, .tjmr .options, .tjmr .hint { grid-column: 2; }
  .tjmr .mission__img { grid-column: 1; grid-row: 2 / span 6; max-width: none; height: 100%; min-height: 320px; margin: 0; }
  .tjmr .mission__title { grid-row: 1; }
  .tjmr .mission { grid-template-rows: auto; }
  .tjmr .options { gap: 12px; }
  .tjmr .stats { gap: 12px; }
  .tjmr .stat__value { font-size: 30px; }
}

/* ---------- 11. Accessibility: reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tjmr *,
  .tjmr *::before,
  .tjmr *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .tjmr .img-btn:hover,
  .tjmr .mission-card__btn:hover { transform: none; }
}

/* Larger text if the child (or grown-up) asks the browser for it */
@media (min-width: 0px) and (prefers-contrast: more) {
  .tjmr .answer, .tjmr .btn { border-width: 2px; }
}