/* The app's look, loaded last so it wins over the shared rules by coming later.
   Direction: fresh green and warm orange on pale mint, soft white cards, pill shapes, buttons with a darker lip
   that press down, a scenery band at the top of each screen and a tab bar at the bottom. */

body { background: var(--bg); }
h1, h2, h3, .display { letter-spacing: 0; }

/* Buttons: a flat face on a darker lip. Pressing pushes the face down onto the lip. */
.btn {
  --btn-bg: var(--white); --btn-lip: var(--line); --btn-ink: var(--ink);
  background: var(--btn-bg); color: var(--btn-ink); text-shadow: none;
  border: 2px solid var(--btn-lip); border-radius: 16px; box-shadow: 0 4px 0 var(--btn-lip);
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-lip); }
.btn[disabled] { filter: grayscale(0.5); }
.btn.go { --btn-bg: var(--go); --btn-lip: var(--go-dark); --btn-ink: var(--white); }
.btn.gem { --btn-bg: var(--gem); --btn-lip: var(--gem-dark); --btn-ink: var(--white); }
.btn.gold { --btn-bg: #ffc233; --btn-lip: #e0a01a; }
.btn.wood { --btn-bg: var(--accent); --btn-lip: var(--accent-dark); --btn-ink: var(--white); }
.btn.danger { --btn-bg: #f0595a; --btn-lip: #c93d3f; --btn-ink: var(--white); }
.btn.big { border-radius: 18px; }
.btn.small { border-radius: 14px; box-shadow: 0 3px 0 var(--btn-lip); }
.btn.small:active { box-shadow: 0 1px 0 var(--btn-lip); transform: translateY(2px); }
.btn.ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--ink-soft); text-decoration: none; }
.btn.ghost:active { transform: none; box-shadow: none; }

/* Cards. */
.panel { border-radius: 24px; }
.panel > h2 { font-size: var(--text-lg); }
.pill { border: 0; box-shadow: 0 2px 8px rgb(36 50 57 / 0.10); color: var(--ink); }
.input { border: 2px solid var(--line); border-radius: 14px; box-shadow: none; }
.input:focus-visible { border-color: var(--go); outline: 3px solid var(--go-soft); }
.form-error { border-radius: 14px; }
.seg button { border: 2px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--line); transition: transform var(--fast) var(--ease); }
.seg button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--go); color: var(--white); border-color: var(--go-dark); box-shadow: 0 3px 0 var(--go-dark); }
.toast { border-radius: 999px; }
.veil { background: rgb(27 45 38 / 0.5); }
.meter { height: 12px; border: 0; background: #e3ede7; }
.meter > span { background: var(--go); border-radius: 999px; transition: transform var(--normal) var(--ease); }
.stars .off { opacity: 0.3; }
.kid-photo { border: 3px solid var(--white); box-shadow: 0 2px 8px rgb(36 50 57 / 0.16); }

/* Header band: the world's sky and scenery, with the screen's heading on it. The next card overlaps its lower edge. */
.hero {
  margin: calc(-1 * max(var(--s-3), env(safe-area-inset-top))) calc(-1 * max(var(--s-4), env(safe-area-inset-right))) 0 calc(-1 * max(var(--s-4), env(safe-area-inset-left)));
  padding: max(var(--s-3), env(safe-area-inset-top)) max(var(--s-4), env(safe-area-inset-right)) 84px max(var(--s-4), env(safe-area-inset-left));
  background: var(--scene) left bottom / 400px 120px repeat-x, linear-gradient(to bottom, var(--hero-1), var(--hero-2));
  border-radius: 0 0 32px 32px; color: var(--hero-ink);
}
.hero + * { margin-top: -64px; position: relative; }
.hero h1 { font-size: 1.75rem; text-shadow: none; }
.hero p { font-weight: 600; opacity: 0.85; }
.hero .pill p, .hero .pill { opacity: 1; }
.topbar .who { color: inherit; }
.topbar .who svg { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 2px 8px rgb(36 50 57 / 0.14); padding: 3px; }
.topbar .who .kid-photo { width: 44px; }
.topbar .btn.small { min-width: 40px; border: 0; border-radius: 999px; box-shadow: 0 2px 8px rgb(36 50 57 / 0.10); background: var(--white); color: var(--ink); }
.topbar .btn.small:active { transform: scale(0.94); box-shadow: 0 1px 4px rgb(36 50 57 / 0.10); }
.hero .back { --btn-bg: rgb(255 255 255 / 0.9); border: 0; border-radius: 999px; box-shadow: 0 2px 8px rgb(36 50 57 / 0.10); }
.hub-hello svg { width: 104px; filter: drop-shadow(0 4px 6px rgb(36 50 57 / 0.14)); }
.shop-me svg { width: 104px; filter: drop-shadow(0 4px 6px rgb(36 50 57 / 0.14)); }
.mine-head h1 { text-shadow: none; }
.hero-title { display: grid; gap: var(--s-1); padding-top: var(--s-2); }

/* Tab bar. */
.tabbar { border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgb(36 50 57 / 0.10); }
.tab { transition: color var(--fast), background-color var(--fast); }
.tab.current { color: var(--go-dark); background: var(--go-soft); }

/* Home. */
.world { border-radius: 24px; }
.world-glyph { border: 0; border-radius: 18px; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.14); }
.quest-block { border: 0; border-radius: 10px; background: #e3ede7; box-shadow: none; }
.quest-block.done { background: var(--go); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.12); }
.streak-dot { background: #eef4f0; }
.who-title, .welcome-title { text-shadow: none; }
.who-card { border-radius: 28px; }
.welcome-points li { background: var(--white); box-shadow: var(--drop); }
.welcome-kicker { color: var(--go-dark); }

/* Topic map, shop, rewards. */
.tile { border-radius: 24px; padding: var(--s-4) var(--s-3); }
.tile.mastered { background: #fff8de; border-color: #ffd66b; }
.item { border-radius: 24px; }
.item.wearing { background: var(--go-soft); border-color: var(--go); }
.item-swatch { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.6), 0 2px 8px rgb(36 50 57 / 0.12); }
.reward-icon { border-radius: 18px; background: var(--paper-2); border: 0; }

/* A round. Calm ground, one clear card, big friendly answers. */
.depth-block { height: 12px; border: 0; border-radius: 999px; background: #dfe9e3; }
.depth-block.current { background: var(--white); box-shadow: 0 0 0 2px var(--accent); }
.depth-block.gem { background: var(--go); }
.depth-block.ok { background: #ffc233; }
.depth-block.miss { background: #f3a5a6; }
.question { border-radius: 28px; }
.choice { border-radius: 20px; }
.choice.right { --btn-bg: var(--go-soft); --btn-lip: var(--go); opacity: 1; }
.choice.wrong { --btn-bg: var(--bad-bg); --btn-lip: #f0595a; opacity: 0.85; }
.pad-display { border: 2px solid var(--line); border-radius: 18px; box-shadow: none; }
.feedback { border: 2px solid var(--line); border-radius: 20px; }
.feedback.good { border-color: var(--go); }
.feedback.hint { border-color: #9cc1f5; }
.listen { border: 0; border-radius: 999px; box-shadow: none; --btn-bg: var(--go-soft); --btn-ink: var(--go-dark); }
.listen:active { transform: scale(0.96); box-shadow: none; }
.write-box { border-radius: 24px; }
.write-slot { border-radius: 14px; }
.scratch-dot { border-color: var(--line); }

/* Parent zone. */
.stat { border: 0; border-radius: 16px; background: var(--paper-2); }

/* Tighter cards on the home screen. */
.hero { padding-bottom: 104px; }
.hero + * { margin-top: -52px; }
.streak { gap: var(--s-2); padding: var(--s-4); }
.streak-count { font-size: 1.35rem; }
.streak-head > svg { width: 40px; height: 40px; }
.quest { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-4); }
.quest h2 { font-size: 1.15rem; margin-bottom: 2px; }
.quest > .grow { grid-column: 1; }
.quest-blocks { grid-column: 1; }
.quest > svg { grid-column: 2; grid-row: 1 / span 2; width: 56px; }
.pick-card { border-radius: 24px; }
.badges-card { border-radius: 24px; }
.world-name { font-size: 1.15rem; }

/* Screens whose header is followed by tabs, not by a card: no overlap, and a shorter band. */
.mine .hero, .shop .hero { padding-bottom: 76px; }
.mine .hero + *, .shop .hero + * { margin-top: 0; }

/* Round details. */
.play-bar .btn.wood { --btn-bg: var(--white); --btn-lip: var(--line); --btn-ink: var(--ink); }
.choice[disabled], .choices.locked .choice { filter: none; opacity: 1; }
.choice.wrong { opacity: 1; }
.choices.locked .choice:not(.right):not(.wrong) { opacity: 0.55; }
.pad-key { font-family: var(--font-display); font-weight: 800; }

.btn.go, .btn.gem, .btn.gold, .btn.wood, .btn.danger { background: var(--btn-bg); color: var(--btn-ink); text-shadow: none; }
.btn.ghost { background: transparent; }

/* Welcome: the cast stands on the meadow. */
.welcome-hero {
  padding: var(--s-5); border-radius: 28px; overflow: hidden;
  background: var(--scene) left bottom / 400px 120px repeat-x, linear-gradient(to bottom, var(--hero-1), var(--hero-2));
}
.welcome-cast { justify-content: center; margin-top: var(--s-4); padding-bottom: 34px; }
.welcome-lead { opacity: 0.9; }
@media (min-width: 860px) { .welcome-hero { padding-top: var(--s-6); } }

/* The illustrated child. Its picture frame has the child (or child and pet) in the middle, so slots simply centre it. */
.hub-hello svg, .shop-me svg { width: 150px; margin: -6px -14px; filter: none; }
.item-art { width: 100%; height: 124px; overflow: hidden; }
.item-art svg { width: auto; height: 124px; max-width: 100%; }
.who-card svg.avatar { width: 170px; margin-inline: -12px; }
.kid-head > svg { width: 98px; margin: 0 -10px; }
.kid-thumb svg { width: 52px; height: 52px; border-radius: 50%; background: var(--go-soft); }
.topbar .who svg { padding: 0; background: var(--go-soft); border: 3px solid var(--white); }
.photo-now svg { width: 106px; margin-inline: -8px; }
.welcome-cast svg, .welcome-cast svg:nth-child(2) { width: clamp(122px, 34vw, 186px); margin-inline: clamp(-30px, -5vw, -14px); }