/* The general look. Loaded last. Every rule only applies when Block World is off, and adds no weight to the
   selectors before it, so it simply 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. */

:where(:root:not([data-style="blocks"])) body { background: var(--bg); }
:where(:root:not([data-style="blocks"])) h1, :where(:root:not([data-style="blocks"])) h2, :where(:root:not([data-style="blocks"])) h3, :where(:root:not([data-style="blocks"])) .display { letter-spacing: 0; }

/* Buttons: a flat face on a darker lip. Pressing pushes the face down onto the lip. */
:where(:root:not([data-style="blocks"])) .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);
}
:where(:root:not([data-style="blocks"])) .btn:hover { filter: brightness(1.03); }
:where(:root:not([data-style="blocks"])) .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-lip); }
:where(:root:not([data-style="blocks"])) .btn[disabled] { filter: grayscale(0.5); }
:where(:root:not([data-style="blocks"])) .btn.go { --btn-bg: var(--go); --btn-lip: var(--go-dark); --btn-ink: var(--white); }
:where(:root:not([data-style="blocks"])) .btn.gem { --btn-bg: var(--gem); --btn-lip: var(--gem-dark); --btn-ink: var(--white); }
:where(:root:not([data-style="blocks"])) .btn.gold { --btn-bg: #ffc233; --btn-lip: #e0a01a; }
:where(:root:not([data-style="blocks"])) .btn.wood { --btn-bg: var(--accent); --btn-lip: var(--accent-dark); --btn-ink: var(--white); }
:where(:root:not([data-style="blocks"])) .btn.danger { --btn-bg: #f0595a; --btn-lip: #c93d3f; --btn-ink: var(--white); }
:where(:root:not([data-style="blocks"])) .btn.big { border-radius: 18px; }
:where(:root:not([data-style="blocks"])) .btn.small { border-radius: 14px; box-shadow: 0 3px 0 var(--btn-lip); }
:where(:root:not([data-style="blocks"])) .btn.small:active { box-shadow: 0 1px 0 var(--btn-lip); transform: translateY(2px); }
:where(:root:not([data-style="blocks"])) .btn.ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--ink-soft); text-decoration: none; }
:where(:root:not([data-style="blocks"])) .btn.ghost:active { transform: none; box-shadow: none; }

/* Cards. */
:where(:root:not([data-style="blocks"])) .panel { border-radius: 24px; }
:where(:root:not([data-style="blocks"])) .panel > h2 { font-size: var(--text-lg); }
:where(:root:not([data-style="blocks"])) .pill { border: 0; box-shadow: 0 2px 8px rgb(36 50 57 / 0.10); color: var(--ink); }
:where(:root:not([data-style="blocks"])) .input { border: 2px solid var(--line); border-radius: 14px; box-shadow: none; }
:where(:root:not([data-style="blocks"])) .input:focus-visible { border-color: var(--go); outline: 3px solid var(--go-soft); }
:where(:root:not([data-style="blocks"])) .form-error { border-radius: 14px; }
:where(:root:not([data-style="blocks"])) .seg button { border: 2px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--line); transition: transform var(--fast) var(--ease); }
:where(:root:not([data-style="blocks"])) .seg button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
:where(:root:not([data-style="blocks"])) .seg button[aria-pressed="true"], :where(:root:not([data-style="blocks"])) .seg button[aria-selected="true"] { background: var(--go); color: var(--white); border-color: var(--go-dark); box-shadow: 0 3px 0 var(--go-dark); }
:where(:root:not([data-style="blocks"])) .toast { border-radius: 999px; }
:where(:root:not([data-style="blocks"])) .veil { background: rgb(27 45 38 / 0.5); }
:where(:root:not([data-style="blocks"])) .meter { height: 12px; border: 0; background: #e3ede7; }
:where(:root:not([data-style="blocks"])) .meter > span { background: var(--go); border-radius: 999px; transition: transform var(--normal) var(--ease); }
:where(:root:not([data-style="blocks"])) .stars .off { opacity: 0.3; }
:where(:root:not([data-style="blocks"])) .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. */
:where(:root:not([data-style="blocks"])) .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);
}
:where(:root:not([data-style="blocks"])) .hero + * { margin-top: -64px; position: relative; }
:where(:root:not([data-style="blocks"])) .hero h1 { font-size: 1.75rem; text-shadow: none; }
:where(:root:not([data-style="blocks"])) .hero p { font-weight: 600; opacity: 0.85; }
:where(:root:not([data-style="blocks"])) .hero .pill p, :where(:root:not([data-style="blocks"])) .hero .pill { opacity: 1; }
:where(:root:not([data-style="blocks"])) .topbar .who { color: inherit; }
:where(:root:not([data-style="blocks"])) .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; }
:where(:root:not([data-style="blocks"])) .topbar .who .kid-photo { width: 44px; }
:where(:root:not([data-style="blocks"])) .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); }
:where(:root:not([data-style="blocks"])) .topbar .btn.small:active { transform: scale(0.94); box-shadow: 0 1px 4px rgb(36 50 57 / 0.10); }
:where(:root:not([data-style="blocks"])) .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); }
:where(:root:not([data-style="blocks"])) .hub-hello svg { width: 104px; filter: drop-shadow(0 4px 6px rgb(36 50 57 / 0.14)); }
:where(:root:not([data-style="blocks"])) .shop-me svg { width: 104px; filter: drop-shadow(0 4px 6px rgb(36 50 57 / 0.14)); }
:where(:root:not([data-style="blocks"])) .mine-head h1 { text-shadow: none; }
:where(:root:not([data-style="blocks"])) .hero-title { display: grid; gap: var(--s-1); padding-top: var(--s-2); }

/* Tab bar. */
:where(:root:not([data-style="blocks"])) .tabbar { border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgb(36 50 57 / 0.10); }
:where(:root:not([data-style="blocks"])) .tab { transition: color var(--fast), background-color var(--fast); }
:where(:root:not([data-style="blocks"])) .tab.current { color: var(--go-dark); background: var(--go-soft); }

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

/* Topic map, shop, rewards. */
:where(:root:not([data-style="blocks"])) .tile { border-radius: 24px; padding: var(--s-4) var(--s-3); }
:where(:root:not([data-style="blocks"])) .tile.mastered { background: #fff8de; border-color: #ffd66b; }
:where(:root:not([data-style="blocks"])) .item { border-radius: 24px; }
:where(:root:not([data-style="blocks"])) .item.wearing { background: var(--go-soft); border-color: var(--go); }
:where(:root:not([data-style="blocks"])) .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); }
:where(:root:not([data-style="blocks"])) .reward-icon { border-radius: 18px; background: var(--paper-2); border: 0; }

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

/* Parent zone. */
:where(:root:not([data-style="blocks"])) .stat { border: 0; border-radius: 16px; background: var(--paper-2); }

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

/* Screens whose header is followed by tabs, not by a card: no overlap, and a shorter band. */
:where(:root:not([data-style="blocks"])) .mine .hero, :where(:root:not([data-style="blocks"])) .shop .hero { padding-bottom: 76px; }
:where(:root:not([data-style="blocks"])) .mine .hero + *, :where(:root:not([data-style="blocks"])) .shop .hero + * { margin-top: 0; }

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

:where(:root:not([data-style="blocks"])) .btn.go, :where(:root:not([data-style="blocks"])) .btn.gem, :where(:root:not([data-style="blocks"])) .btn.gold, :where(:root:not([data-style="blocks"])) .btn.wood, :where(:root:not([data-style="blocks"])) .btn.danger { background: var(--btn-bg); color: var(--btn-ink); text-shadow: none; }
:where(:root:not([data-style="blocks"])) .btn.ghost { background: transparent; }

/* Welcome: the cast stands on the meadow. */
:where(:root:not([data-style="blocks"])) .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));
}
:where(:root:not([data-style="blocks"])) .welcome-cast { justify-content: center; margin-top: var(--s-4); padding-bottom: 34px; }
:where(:root:not([data-style="blocks"])) .welcome-lead { opacity: 0.9; }
@media (min-width: 860px) { :where(:root:not([data-style="blocks"])) .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. */
:where(:root:not([data-style="blocks"])) .hub-hello svg, :where(:root:not([data-style="blocks"])) .shop-me svg { width: 150px; margin: -6px -14px; filter: none; }
:where(:root:not([data-style="blocks"])) .item-art { width: 100%; height: 124px; overflow: hidden; }
:where(:root:not([data-style="blocks"])) .item-art svg { width: auto; height: 124px; max-width: 100%; }
:where(:root:not([data-style="blocks"])) .who-card svg.avatar { width: 170px; margin-inline: -12px; }
:where(:root:not([data-style="blocks"])) .kid-head > svg { width: 98px; margin: 0 -10px; }
:where(:root:not([data-style="blocks"])) .kid-thumb svg { width: 52px; height: 52px; border-radius: 50%; background: var(--go-soft); }
:where(:root:not([data-style="blocks"])) .topbar .who svg { padding: 0; background: var(--go-soft); border: 3px solid var(--white); }
:where(:root:not([data-style="blocks"])) .photo-now svg { width: 106px; margin-inline: -8px; }
:where(:root:not([data-style="blocks"])) .welcome-cast svg, :where(:root:not([data-style="blocks"])) .welcome-cast svg:nth-child(2) { width: clamp(122px, 34vw, 186px); margin-inline: clamp(-30px, -5vw, -14px); }