/* Nunito (SIL Open Font License, see /assets/fonts/nunito.LICENSE.txt), served from this site. One variable file per script range.
   Chinese text falls through to the device's own Chinese font. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/assets/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: 200 1000; font-display: swap;
  src: url("/assets/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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Design tokens. The default is the general look: fresh green and warm orange on a pale mint ground, soft white cards,
   rounded type, gem teal as the reward colour. */
:root {
  --sky-1: #bfe7ff;
  --sky-2: #eaf8ff;
  --grass: #5fb346;
  --grass-dark: #3f8a2e;
  --dirt: #8a5a3b;
  --dirt-dark: #6b432a;
  --stone: #9aa1ab;
  --stone-dark: #6b727c;
  --stone-light: #eef4f0;
  --wood: #c08a50;
  --wood-dark: #8f6233;
  --ink: #243239;
  --ink-soft: #63737a;
  --paper: #ffffff;
  --paper-2: #f1f7f3;
  --line: #dce8e1;
  --go: #3fb768;
  --go-dark: #2c9852;
  --go-soft: #e4f6ea;
  --accent: #ff9f43;
  --accent-dark: #e8842a;
  --bg: #f2faf5;
  --hero-1: var(--sky-1);
  --hero-2: var(--sky-2);
  --hero-ink: var(--ink);
  --white: #ffffff;
  --gem: #19b8ab;
  --gem-dark: #0e8279;
  --gem-light: #b8fff6;
  --gold: #f6c33b;
  --gold-dark: #b98510;
  --good: #2c9852;
  --good-bg: #e4f6ea;
  --bad: #e5484d;
  --bad-bg: #ffe9e7;
  --hint: #2f6fd0;
  --hint-bg: #e2eeff;

  --font-display: "Nunito", ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  --text-hero: clamp(2.1rem, 1.4rem + 4vw, 3.6rem);
  --text-question: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  --text-expr: clamp(2rem, 1.4rem + 3.6vw, 3.25rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --px: 3px;                 /* how far a button moves when pressed */
  --edge: 1.5px solid var(--line);
  --drop: 0 1px 0 rgb(36 50 57 / 0.04), 0 10px 24px rgb(42 96 70 / 0.08);
  --radius: 20px;
  --btn-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.10), 0 2px 6px rgb(40 60 110 / 0.14);
  --btn-shadow-active: inset 0 -1px 0 rgb(0 0 0 / 0.10);
  --backdrop: linear-gradient(to bottom, var(--sky-1), var(--sky-2) var(--sky-stop, 60%));

  --fast: 120ms;
  --normal: 240ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --page: 68rem;
}

/* World themes (cosmetic, chosen in the shop). Only the backdrop changes. */
[data-theme="theme.desert"] { --sky-1: #ffd98a; --sky-2: #fff1cf; --grass: #e6c26a; --grass-dark: #c29a3e; --dirt: #c98f4e; --dirt-dark: #a06c33; }
[data-theme="theme.snow"] { --sky-1: #b9dcf5; --sky-2: #eef8ff; --grass: #f4fbff; --grass-dark: #c3dcea; --dirt: #8fa4b5; --dirt-dark: #6f8496; }
[data-theme="theme.cave"] { --sky-1: #7d8794; --sky-2: #b3bcc7; --grass: #7a828d; --grass-dark: #5b626c; --dirt: #4a4f58; --dirt-dark: #363a41; }
/* Dark skies stay behind the top bar only, so the text below is always on a light ground. */
[data-theme="theme.night"] { --sky-1: #2b3a67; --sky-2: #d5dcf5; --sky-stop: 104px; --grass: #3d7a4a; --grass-dark: #2a5a36; --dirt: #5a3f30; --dirt-dark: #432d21; }
[data-theme="theme.ocean"] { --sky-1: #7fd0e8; --sky-2: #e2f8ff; --grass: #3fa7a0; --grass-dark: #2b7f79; --dirt: #e8d29a; --dirt-dark: #c9ad6a; }
[data-theme="theme.sunset"] { --sky-1: #ffb48a; --sky-2: #ffe9d6; --grass: #7a9a3a; --grass-dark: #58752a; --dirt: #8a5a3b; --dirt-dark: #6b432a; }
[data-theme="theme.candy"] { --sky-1: #ffc7e3; --sky-2: #fff3fa; --grass: #b792f0; --grass-dark: #8a63d0; --dirt: #ff9fbf; --dirt-dark: #e0789d; }
[data-theme="theme.space"] { --sky-1: #1b2145; --sky-2: #dcd9f7; --sky-stop: 104px; --grass: #6a5fd0; --grass-dark: #4a3fa8; --dirt: #2a2f55; --dirt-dark: #1b1f3d; }

/* Scenery of each world in the general look: a soft strip along the bottom of the screen. */
[data-theme="theme.meadow"] { --sky-1: #bfe7ff; --sky-2: #eaf8ff; --grass: #5fb346; --dirt: #8a5a3b; }
:root, [data-theme="theme.meadow"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Cpath d='M0 78 Q100 44 200 78 T400 78 V120 H0Z' fill='%23a5dfb1'/%3E%3Cpath d='M0 87 Q100 109 200 87 T400 87 V120 H0Z' fill='%236fca88'/%3E%3Ccircle cx='40' cy='104' r='3' fill='%23ffd166'/%3E%3Ccircle cx='150' cy='110' r='3' fill='%23ffd166'/%3E%3Ccircle cx='260' cy='102' r='3' fill='%23ffd166'/%3E%3Ccircle cx='350' cy='108' r='3' fill='%23ffd166'/%3E%3Ccircle cx='90' cy='108' r='3' fill='%23ff9fc0'/%3E%3Ccircle cx='210' cy='106' r='3' fill='%23ff9fc0'/%3E%3Ccircle cx='310' cy='112' r='3' fill='%23ff9fc0'/%3E%3Ccircle cx='40' cy='104' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='110' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='260' cy='102' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='350' cy='108' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='90' cy='108' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='210' cy='106' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='310' cy='112' r='1.2' fill='%23ffffff'/%3E%3C/svg%3E"); }
[data-theme="theme.desert"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Ccircle cx='80' cy='44' r='16' fill='%23ffd27a'/%3E%3Cpath d='M0 84 Q100 44 200 84 T400 84 V120 H0Z' fill='%23f6d695'/%3E%3Cpath d='M0 90 Q100 114 200 90 T400 90 V120 H0Z' fill='%23efc473'/%3E%3Cg fill='%2386c27f'%3E%3Crect x='296' y='52' width='10' height='44' rx='5'/%3E%3Crect x='284' y='64' width='7' height='18' rx='3.5'/%3E%3Crect x='284' y='76' width='16' height='6' rx='3'/%3E%3Crect x='311' y='58' width='7' height='18' rx='3.5'/%3E%3Crect x='302' y='70' width='16' height='6' rx='3'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="theme.ocean"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Cg%3E%3Cpath d='M196 30 V64 H172Z' fill='%23ffffff'/%3E%3Cpath d='M200 36 V64 H220Z' fill='%23ff9f8a'/%3E%3Cpath d='M166 66 H228 L218 78 H176Z' fill='%23c98a5b'/%3E%3C/g%3E%3Cpath d='M-50 76 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 V120 H-50Z' fill='%23a6e0f2'/%3E%3Cpath d='M-25 90 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 V120 H-25Z' fill='%2384cfe9'/%3E%3Cpath d='M-50 104 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 q25 -14 50 0 V120 H-50Z' fill='%236bc0df'/%3E%3C/svg%3E"); }
[data-theme="theme.snow"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Cpath d='M0 80 Q100 46 200 80 T400 80 V120 H0Z' fill='%23e3edf9'/%3E%3Cpath d='M70 54 l12 18 h-7 l9 14 h-28 l9 -14 h-7Z' fill='%23a9cfc0'/%3E%3Crect x='68' y='84' width='4' height='6' fill='%23b89c84'/%3E%3Cpath d='M300 44 l12 18 h-7 l9 14 h-28 l9 -14 h-7Z' fill='%23a9cfc0'/%3E%3Crect x='298' y='74' width='4' height='6' fill='%23b89c84'/%3E%3Cpath d='M330 52 l12 18 h-7 l9 14 h-28 l9 -14 h-7Z' fill='%23a9cfc0'/%3E%3Crect x='328' y='82' width='4' height='6' fill='%23b89c84'/%3E%3Cpath d='M0 89 Q100 111 200 89 T400 89 V120 H0Z' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff'/%3E%3Ccircle cx='120' cy='18' r='2' fill='%23ffffff'/%3E%3Ccircle cx='200' cy='40' r='2' fill='%23ffffff'/%3E%3Ccircle cx='260' cy='14' r='2' fill='%23ffffff'/%3E%3Ccircle cx='360' cy='34' r='2' fill='%23ffffff'/%3E%3Ccircle cx='160' cy='60' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); }
[data-theme="theme.sunset"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Ccircle cx='200' cy='78' r='30' fill='%23ff9e6b'/%3E%3Cpath d='M0 84 Q100 50 200 84 T400 84 V120 H0Z' fill='%23c79acb'/%3E%3Cpath d='M0 91 Q100 113 200 91 T400 91 V120 H0Z' fill='%23a97bb8'/%3E%3C/svg%3E"); }
[data-theme="theme.candy"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Cpath d='M0 82 Q100 48 200 82 T400 82 V120 H0Z' fill='%23ffc0dc'/%3E%3Crect x='88.5' y='60' width='3' height='30' fill='%23ffffff'/%3E%3Ccircle cx='90' cy='60' r='11' fill='%23b792f0'/%3E%3Ccircle cx='90' cy='60' r='5.5' fill='%23ffffff' fill-opacity='0.6'/%3E%3Crect x='308.5' y='56' width='3' height='30' fill='%23ffffff'/%3E%3Ccircle cx='310' cy='56' r='11' fill='%237fd6c8'/%3E%3Ccircle cx='310' cy='56' r='5.5' fill='%23ffffff' fill-opacity='0.6'/%3E%3Cpath d='M0 91 Q100 113 200 91 T400 91 V120 H0Z' fill='%23dcc6f8'/%3E%3Ccircle cx='40' cy='108' r='3' fill='%23ffffff'/%3E%3Ccircle cx='170' cy='112' r='3' fill='%23ffffff'/%3E%3Ccircle cx='250' cy='106' r='3' fill='%23ffffff'/%3E%3Ccircle cx='360' cy='110' r='3' fill='%23ffffff'/%3E%3C/svg%3E"); }
[data-theme="theme.cave"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Cpath d='M0 80 L40 52 L80 78 L130 44 L180 80 L230 56 L280 82 L330 48 L370 74 L400 80 V120 H0Z' fill='%23bcc3d0'/%3E%3Cpath d='M96 96 l8 -30 l8 30Z' fill='%237fe0d6'/%3E%3Cpath d='M108 98 l6 -20 l6 20Z' fill='%23b9a0f2'/%3E%3Cpath d='M296 98 l9 -34 l9 34Z' fill='%23b9a0f2'/%3E%3Cpath d='M310 100 l6 -22 l6 22Z' fill='%237fe0d6'/%3E%3Cpath d='M0 100 Q100 88 200 100 T400 100 V120 H0Z' fill='%23a3abba'/%3E%3C/svg%3E"); }
[data-theme="theme.night"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Ccircle cx='310' cy='36' r='14' fill='%23ffe9a8'/%3E%3Ccircle cx='316' cy='31' r='12' fill='%23d5dcf5'/%3E%3Ccircle cx='40' cy='24' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='110' cy='44' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='180' cy='18' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='240' cy='48' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='370' cy='20' r='1.8' fill='%23ffffff'/%3E%3Cpath d='M0 84 Q100 48 200 84 T400 84 V120 H0Z' fill='%239aa5d6'/%3E%3Cpath d='M0 91 Q100 113 200 91 T400 91 V120 H0Z' fill='%237c88c2'/%3E%3C/svg%3E"); }
[data-theme="theme.space"] { --scene: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 120%22 width=%22400%22 height=%22120%22%3E%3Ccircle cx='90' cy='44' r='16' fill='%23f0a6c8'/%3E%3Cellipse cx='90' cy='44' rx='27' ry='6' fill='none' stroke='%23b7a6f0' stroke-width='3'/%3E%3Ccircle cx='320' cy='30' r='9' fill='%23b7a6f0'/%3E%3Ccircle cx='170' cy='22' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='230' cy='50' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='370' cy='56' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='70' r='1.8' fill='%23ffffff'/%3E%3Cpath d='M0 96 Q100 76 200 96 T400 96 V120 H0Z' fill='%23c9c3ee'/%3E%3Cellipse cx='70' cy='106' rx='14' ry='4' fill='%23b3abe3'/%3E%3Cellipse cx='250' cy='110' rx='18' ry='4' fill='%23b3abe3'/%3E%3Cellipse cx='350' cy='102' rx='10' ry='3' fill='%23b3abe3'/%3E%3C/svg%3E"); }

/* Dark worlds: the header band of the general look is properly dark there, with light text on it. */
[data-theme="theme.night"] { --hero-1: #243260; --hero-2: #4f5f9a; --hero-ink: #ffffff; }
[data-theme="theme.space"] { --hero-1: #1b2145; --hero-2: #41458a; --hero-ink: #ffffff; }
[data-theme="theme.cave"] { --hero-1: #65707e; --hero-2: #9aa4b1; --hero-ink: #ffffff; }