/* ECD Learning design system (shell: gallery, chapter lists, top bar, zoo,
   grown-ups). Loaded after style.css, which keeps the Math games' own
   component styles. Calm and clear: one rounded typeface, light background,
   white cards with soft shadows, drawn SVG icons, generous white space. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ui-font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --ui-bg: #f5f7fb;
  --ui-surface: #ffffff;
  --ui-ink: #3b4360;
  --ui-muted: #8b92a8;
  --ui-line: #e7eaf2;
  --ui-sun: #ffd84a;
  --ui-sun-soft: #fff4c7;
  --ui-coral: #ef6f5e;
  --ui-sky: #dff0fa;
  --ui-shadow: 0 1px 2px rgba(40, 50, 90, .06), 0 8px 24px rgba(40, 50, 90, .08);
  --ui-shadow-lift: 0 2px 4px rgba(40, 50, 90, .08), 0 14px 32px rgba(40, 50, 90, .12);
  --ui-radius: 24px;
  --ui-gap: clamp(12px, 2.2vw, 28px);
}

html, body {
  font-family: var(--ui-font);
  background: var(--ui-bg);
  color: var(--ui-ink);
}
.screen { background: var(--ui-bg); }
/* Math games: their stage keeps a soft paper tone so the game boards read */
.stage { background: #fbfaf6; }
.screen-overlay .stage { background: transparent; }

/* ---------- Top bar ---------- */
.ui-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
  flex: 0 0 auto;
  z-index: 5;
}
.ui-bar-left, .ui-bar-right { display: flex; align-items: center; gap: 10px; }
.ui-bar-right { justify-content: flex-end; }
.ui-title {
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ui-ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.ui-iconbtn {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-iconbtn:active { transform: scale(.94); }
.ui-iconbtn .ico, .ico { display: grid; place-items: center; }
.ui-iconbtn .ico svg { width: 26px; height: 26px; }
.ui-iconbtn.is-zoo { background: var(--ui-sun); color: #6b4f00; }
.ui-iconbtn.go { background: #e2f6ec; color: #2f8a5f; }

/* language switch (shared by the top bar and the scene overlay bar) */
.lang-pill {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.lang-btn {
  font-family: var(--ui-font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .5px;
  min-width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}
.lang-btn.on { background: var(--ui-sun); color: #5a4a00; }
.overlay-bar .lang-pill { box-shadow: 0 2px 10px #0001; background: #ffffffd9; }
.overlay-bar .lang-btn { height: 40px; min-width: 40px; font-size: 14px; }

/* ---------- Gallery: topic covers ---------- */
.ui-gallery {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.5vh, 36px);
  padding: 0 var(--ui-gap) clamp(16px, 4vh, 40px);
  position: relative;
}
.ui-hello {
  margin: 0;
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 900;
  letter-spacing: .3px;
  color: var(--ui-ink);
}
.ui-covers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-gap);
  width: min(1180px, 100%);
}
@media (max-width: 760px) { .ui-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-cover {
  background: var(--ui-surface);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-cover:active { transform: scale(.97); box-shadow: var(--ui-shadow-lift); }
.ui-cover img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; pointer-events: none; }
.ui-cover-label {
  padding: clamp(10px, 1.6vh, 16px) 14px clamp(12px, 2vh, 18px);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  text-align: center;
}

/* ---------- Topic home: chapter cards ---------- */
.ui-topic {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 20px);
  padding: clamp(4px, 1vh, 12px) var(--ui-gap) clamp(14px, 3vh, 28px);
  overflow: hidden;
}
.ui-chapters {
  flex: 1;
  min-height: 0;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(10px, 1.8vw, 22px);
}
.ui-chapter {
  position: relative;
  background: var(--ui-surface);
  border-radius: 20px;
  box-shadow: var(--ui-shadow);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-chapter:active { transform: scale(.97); }
.ui-chapter img { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block; pointer-events: none; }
.ui-chapter-label {
  flex: 0 0 auto;
  padding: 8px 10px 10px;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 700;
  text-align: center;
  color: var(--ui-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: #ffffffe6;
  color: var(--ui-ink);
  font-size: 15px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(40, 50, 90, .12);
}
.ui-done { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.ui-done svg { width: 100%; height: 100%; }
@media (max-height: 520px) {
  .ui-chapter-label { display: none; }
  .ui-chip { top: 4px; left: 4px; height: 24px; min-width: 24px; font-size: 13px; }
  .ui-done { width: 24px; height: 24px; }
}

/* the daily adventure (Math) */
.ui-quest {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1180px, 100%);
  padding: 12px 18px;
  border-radius: 20px;
  background: linear-gradient(100deg, var(--ui-sun-soft), #ffe9a8);
  box-shadow: var(--ui-shadow);
  cursor: pointer;
  border: 0;
  font-family: var(--ui-font);
  color: var(--ui-ink);
  text-align: left;
}
.ui-quest .ico { width: 44px; height: 44px; border-radius: 999px; background: var(--ui-sun); color: #fff; }
.ui-quest .ico svg { width: 28px; height: 28px; }
.ui-quest-title { font-size: clamp(16px, 2vw, 20px); font-weight: 800; }
.ui-quest-sub { font-size: clamp(13px, 1.5vw, 15px); font-weight: 600; color: #8a6d12; }
.ui-quest .ui-go { margin-left: auto; width: 40px; height: 40px; border-radius: 999px; background: #fff; color: #c79a00; }
.ui-quest .ui-go svg { width: 22px; height: 22px; }

/* ---------- Grown-ups corner (long press) ---------- */
.ui-parent {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
  opacity: .7;
  touch-action: none;
  -webkit-touch-callout: none;
}
.ui-parent svg { width: 26px; height: 26px; }
.ui-parent .hold-ring {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 3px solid var(--ui-coral); opacity: 0; transform: scale(.6); pointer-events: none;
}
.ui-parent.holding { opacity: 1; }
.ui-parent.holding .hold-ring { opacity: 1; transform: scale(1.15); transition: transform 1.5s linear, opacity .2s ease; }

/* ---------- Zoo and grown-ups pages ---------- */
.zoo, .grownups { font-family: var(--ui-font); }
.zoo h2, .grownups h2 {
  color: var(--ui-ink);
  text-shadow: none;
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
}
.zoo-canvas { background: var(--ui-surface); border: 0; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.zoo-hint, .zoo-count, .zoo-empty, .grownups-sub { color: var(--ui-muted); font-weight: 700; }
.zoo-tidy { border: 0; box-shadow: var(--ui-shadow); background: var(--ui-surface); }
.grownups-row { border: 0; border-radius: 16px; box-shadow: var(--ui-shadow); }
.grownups-name { color: var(--ui-ink); }
.parent-section h3 { color: var(--ui-ink); font-weight: 800; }
.parent-line { color: var(--ui-muted); }
.grownups .lang-pill-lg .lang-btn { min-width: 60px; height: 50px; font-size: 18px; }

/* quest progress pill (shown over Math games) */
.quest-pill { border: 0; box-shadow: var(--ui-shadow); font-family: var(--ui-font); }

/* small screens (phone landscape) */
@media (max-height: 520px), (max-width: 760px) {
  .ui-bar { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 4px; gap: 8px; }
  .ui-iconbtn { width: 44px; height: 44px; }
  .ui-iconbtn .ico svg { width: 22px; height: 22px; }
  .lang-btn { height: 36px; min-width: 36px; font-size: 13px; }
  .ui-bar-left, .ui-bar-right { gap: 6px; }
}