/* Chore Champs world: the app's own bright, game-like look. Soft paper, white cards, berry and gold,
   Baloo 2 for big friendly lettering, Atkinson Hyperlegible so every kid can read it. */
body.world-chore {
  --ink: #f2f5fb; --night: #e9eef8; --plate: #ffffff; --plate-2: #f7f9fd;
  --line: #dde3f0; --line-2: #cbd3e6;
  --paper: #1b2340; --dim: #5a6383; --mute: #8a92ad; --ivory: #1b2340;
  --accent: #e8467c; --accent-hi: #f5b301; --brass: #f5b301; --brass-hi: #ffc533; --brass-lo: #b07d00;
  --gold: #f5b301; --gold-deep: #b07d00; --berry: #e8467c; --go: #1f9d55; --sky: #2f6fed; --wait: #ffb020;
  --serif: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "Baloo 2", system-ui, sans-serif;
  --radius: 22px;
  color-scheme: light;
  background:
    radial-gradient(circle at 10% 20%, rgba(245, 179, 1, .12) 0 120px, transparent 121px),
    radial-gradient(circle at 92% 60%, rgba(232, 70, 124, .1) 0 160px, transparent 161px),
    #f2f5fb;
}
.world-chore ::selection { background: #f5b301; color: #1b2340; }
.world-chore .display { font-weight: 800; letter-spacing: -.02em; line-height: .95; font-size: clamp(46px, 8vw, 116px); }
.world-chore .h2 { font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.world-chore em { font-style: normal; color: var(--berry); }
.world-chore .h3, .world-chore .shot h3, .world-chore .chron h3 { font-family: "Baloo 2", sans-serif; font-weight: 700; letter-spacing: 0; font-size: 22px; }
.world-chore .eyebrow { font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--berry); }
.world-chore .eyebrow::before { content: "\2605"; width: auto; height: auto; background: none; color: var(--gold); font-size: 15px; opacity: 1; }
.world-chore .btn { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 18px; border-radius: 18px; }
.world-chore .btn-key { color: #fff; background: linear-gradient(180deg, #ff6b98, #e8467c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 5px 0 #a8204f, 0 14px 26px -10px rgba(232, 70, 124, .7); }
.world-chore .btn-key:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 1px 0 #a8204f; }
.world-chore .btn-key::after { background: radial-gradient(120px 80px at var(--bx) var(--by), rgba(255, 255, 255, .35), transparent 70%); }
.world-chore .btn-glass { color: #1b2340; background: #fff; border: 2px solid #dde3f0; box-shadow: 0 4px 0 #dde3f0; backdrop-filter: none; }
.world-chore .card, .world-chore .shot { background: #fff; border: 2px solid #dde3f0; box-shadow: 0 1px 0 rgba(27, 35, 64, .06), 0 6px 18px rgba(27, 35, 64, .07); }
.world-chore .shot:hover { border-color: #f5b301; box-shadow: 0 6px 0 #f5b301, 0 24px 40px -20px rgba(245, 179, 1, .6); }
.world-chore .shot .tag { color: var(--go); font-family: "Baloo 2", sans-serif; font-weight: 800; }
.world-chore .shot .fr, .world-chore .dev, .world-chore .reel figure .fr { background: linear-gradient(160deg, #2e3655, #141a30 60%); }
.world-chore .chip { background: #fff; border: 2px solid #dde3f0; color: #1b2340; font-weight: 700; }
.world-chore .chip .dot { background: var(--go); box-shadow: 0 0 8px var(--go); }
.world-chore .brand, .world-chore .nav, .world-chore .menu-btn { background: rgba(255, 255, 255, .9); border: 2px solid #dde3f0; color: #1b2340; }
.world-chore .nav a:hover, .world-chore .nav a[aria-current="page"] { background: #fff4d6; color: #1b2340; }
.world-chore .nav .cta { color: #fff; background: #e8467c; }
.world-chore .brand svg polygon:first-child { fill: #1b2340; }
.world-chore .calm-toggle .pip { background: #dde3f0; }
.world-chore .hero { --paper: #ffffff; --dim: rgba(255, 255, 255, .85); color: #fff; }
.world-chore .hero .lede { color: rgba(255, 255, 255, .9); }
.world-chore .hero .chip { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.world-chore .hero em { color: #ffc533; }
.world-chore .hero .display { text-shadow: 0 4px 0 rgba(27, 35, 64, .35); }
.world-chore .hero::after { background: linear-gradient(180deg, rgba(17, 22, 42, .45) 0%, transparent 30%, rgba(17, 22, 42, .3) 60%, rgba(17, 22, 42, .9) 100%), linear-gradient(90deg, rgba(17, 22, 42, .65) 0%, transparent 60%); }
.world-chore .scroll-cue { color: rgba(255, 255, 255, .75); }
.world-chore .site-foot { background: #1b2340; }
.world-chore .grain { display: none; }
/* Game layer: an XP bar that fills as you scroll, and coins for stages. */
.world-chore .xp { position: fixed; left: 0; right: 0; top: 0; height: 6px; z-index: 60; background: rgba(27, 35, 64, .08); }
.world-chore .xp i { display: block; height: 100%; width: calc(var(--xp, 0) * 100%); background: linear-gradient(90deg, #f5b301, #e8467c); border-radius: 0 6px 6px 0; box-shadow: 0 0 12px rgba(245, 179, 1, .7); }
.world-chore .chron::before { width: 6px; left: 21px; border-radius: 6px; background: #dde3f0; }
.world-chore .chron::after { width: 6px; left: 21px; border-radius: 6px; background: linear-gradient(#f5b301, #e8467c); box-shadow: none; }
.world-chore .chron .node { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 16px; background: #fff; border: 3px solid #dde3f0; color: #8a92ad; }
.world-chore .chron li.lit .node { background: radial-gradient(circle at 35% 30%, #ffe08a, #f5b301 55%, #b07d00); border-color: #b07d00; color: #fff; text-shadow: 0 1px 0 #b07d00; box-shadow: 0 4px 0 #b07d00, 0 0 0 6px rgba(245, 179, 1, .18); }
.world-chore .chron .stage { color: var(--berry); font-family: "Baloo 2", sans-serif; font-weight: 800; }
.world-chore .cta-band { background: linear-gradient(135deg, #fff4d6, #ffe3ee); border: 2px solid #f5d79a; color: #1b2340; }
.world-chore .next-app { border-color: #dde3f0; }
.world-chore .legal { color: #5a6383; }
.world-chore .xp-lvl { position: absolute; right: 18px; top: 66px; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 13px; color: #1b2340; background: #fff; border: 2px solid #f5b301; border-radius: 999px; padding: 0 10px; box-shadow: 0 3px 0 #b07d00; }
.world-chore .xp-lvl b { color: #e8467c; }
.world-chore .xp-lvl.pop { animation: lvlpop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes lvlpop { 40% { transform: scale(1.35) rotate(-6deg); } }
.world-chore .quest { display: inline-flex; align-items: center; gap: 8px; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; color: #fff; background: #1f9d55; border-radius: 999px; padding: 4px 14px 4px 6px; box-shadow: 0 4px 0 #136b39; }
.world-chore .quest::before { content: "\2605"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #f5b301 60%, #b07d00); color: #fff; font-size: 13px; }
.world-chore .loot { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; }
.world-chore .loot li { background: #fff; border: 2px solid #dde3f0; border-radius: 16px; padding: 8px 14px; box-shadow: 0 4px 0 #dde3f0; font-weight: 700; color: #5a6383; }
.world-chore .loot b { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 20px; color: #e8467c; margin-right: 4px; }
.world-chore .toast { position: fixed; left: 50%; bottom: 96px; z-index: 70; translate: -50% 30px; opacity: 0; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px; background: #1b2340; color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 17px; box-shadow: 0 6px 0 #0d1226, 0 20px 40px -14px rgba(27,35,64,.6); transition: opacity .35s, translate .5s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.world-chore .toast.on { opacity: 1; translate: -50% 0; }
.world-chore .toast i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; background: radial-gradient(circle at 35% 30%, #ffe08a, #f5b301 60%, #b07d00); }
.world-chore .demo .h2 em { color: var(--berry); }
@media (min-width: 901px) { .world-chore .toast { bottom: 34px; } }