/* ==========================================================================
   Worlds: seven bold scenes shared by the start page and My dashboard.
   Each theme paints the sky (body), a glowing orb, two layers of drifting particles
   and a horizon. Tiles stay light paper so the words are always easy to read.
   ========================================================================== */
html:root[data-world] body::before { opacity: 0 !important; }
html:root[data-world] body { background-attachment: fixed !important; transition: background-color .6s ease; }
.start-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.start-scene span { position: absolute; display: block; }
.sc-orb { width: 46vmin; height: 46vmin; border-radius: 50%; right: 6vw; top: 8vh; filter: blur(.5px); animation: sc-float 9s ease-in-out infinite; }
.sc-far, .sc-near { inset: -50% 0 0 0; background-repeat: repeat; }
.sc-far { animation: sc-drift 60s linear infinite; opacity: .8; }
.sc-near { animation: sc-drift 32s linear infinite; }
.sc-ground { left: 0; right: 0; bottom: 0; height: 30vh; }
@keyframes sc-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.03); } }
@keyframes sc-drift { from { transform: translateY(0); } to { transform: translateY(33.333%); } }
@keyframes sc-rise { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
@keyframes sc-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Shared: dark scenes get light headings, glassy pills and the light logo */
:root[data-world="ocean"], :root[data-world="meadow"], :root[data-world="dusk"], :root[data-world="canyon"] { --logo-light: none; --logo-dark: inline-block; }
:root:is([data-world="ocean"], [data-world="meadow"], [data-world="dusk"], [data-world="canyon"]) .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
:root:is([data-world="ocean"], [data-world="meadow"], [data-world="dusk"], [data-world="canyon"]) :is(.start-themes, .start-small) { background: rgba(10, 8, 30, .55) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root:is([data-world="ocean"], [data-world="meadow"], [data-world="dusk"], [data-world="canyon"]) .start-themes legend { color: #fff !important; }
:root:is([data-world="ocean"], [data-world="meadow"], [data-world="dusk"], [data-world="canyon"]) .start-small a { color: #ffe08a !important; }
.start-theme-name { font-weight: 900; }
.start-choice { box-shadow: 0 0 0 3px var(--tile-ring, transparent), 0 24px 48px -20px var(--tile-shadow, rgba(70, 45, 20, .55)); }
.start-choice:hover, .start-choice:focus-visible { box-shadow: 0 0 0 4px var(--tile-ring, #a3865c), 0 0 40px -4px var(--tile-glow, transparent), 0 30px 54px -20px var(--tile-shadow, rgba(70, 45, 20, .6)); }
.choice-go { color: var(--tile-go, #0a5b49); }
.start-swatch > span { width: 28px; height: 28px; }
.start-swatch { width: 38px; height: 38px; }

/* 1. Golden sunrise (light): blazing sun, warm sky, floating petals */
html:root[data-world="sunrise"] body { background: linear-gradient(180deg, #ffcf5c 0%, #ff9a5a 45%, #ff6f8a 100%) !important; }
:root[data-world="sunrise"] .sc-orb { background: radial-gradient(circle, #fff6c2 0 38%, #ffe066 52%, rgba(255, 210, 80, 0) 70%); box-shadow: 0 0 120px 40px rgba(255, 220, 110, .55); }
:root[data-world="sunrise"] .sc-near { background-image: radial-gradient(6px 10px at 20px 30px, rgba(255, 255, 255, .8) 50%, transparent 52%), radial-gradient(5px 8px at 140px 110px, rgba(255, 236, 160, .9) 50%, transparent 52%); background-size: 220px 200px; }
:root[data-world="sunrise"] .sc-ground { background: radial-gradient(120% 100% at 30% 100%, #e8556d 0 40%, transparent 41%), radial-gradient(120% 100% at 85% 100%, #d9415f 0 45%, transparent 46%); }
:root[data-world="sunrise"] { --tile-ring: rgba(255, 255, 255, .7); --tile-glow: rgba(255, 210, 90, .9); --tile-shadow: rgba(160, 40, 40, .55); --tile-go: #a8321c; }

/* 2. Deep sea (dark): ocean depths, light rays, rising bubbles */
html:root[data-world="ocean"] body { background: linear-gradient(180deg, #0a5f86 0%, #053a5e 40%, #021a33 100%) !important; }
:root[data-world="ocean"] .sc-orb { right: 50%; top: -20vmin; width: 90vmin; height: 70vmin; background: conic-gradient(from 160deg at 50% 0%, transparent 0 8deg, rgba(160, 240, 255, .18) 10deg 14deg, transparent 16deg 24deg, rgba(160, 240, 255, .14) 26deg 31deg, transparent 33deg 40deg); border-radius: 0; transform-origin: top; animation: sc-sway 12s ease-in-out infinite; }
@keyframes sc-sway { 0%, 100% { transform: translateX(50%) rotate(-4deg); } 50% { transform: translateX(50%) rotate(4deg); } }
:root[data-world="ocean"] .sc-far, :root[data-world="ocean"] .sc-near { inset: 0 0 -50% 0; }
:root[data-world="ocean"] .sc-far { background-image: radial-gradient(circle at 40px 60px, rgba(190, 245, 255, .35) 0 4px, transparent 5px), radial-gradient(circle at 160px 180px, rgba(190, 245, 255, .3) 0 3px, transparent 4px); background-size: 220px 240px; animation: sc-rise 40s linear infinite; }
:root[data-world="ocean"] .sc-near { background-image: radial-gradient(circle at 60px 90px, transparent 0 7px, rgba(220, 250, 255, .7) 8px 9px, transparent 10px), radial-gradient(circle at 200px 260px, transparent 0 5px, rgba(220, 250, 255, .6) 6px 7px, transparent 8px); background-size: 300px 320px; animation: sc-rise 22s linear infinite; }
:root[data-world="ocean"] .sc-ground { height: 22vh; background: radial-gradient(60% 120% at 15% 100%, #0c7a6b 0 40%, transparent 41%), radial-gradient(50% 140% at 80% 100%, #0f8f7a 0 35%, transparent 36%), linear-gradient(0deg, #01121f, transparent); }
:root[data-world="ocean"] { --tile-ring: rgba(120, 230, 255, .55); --tile-glow: rgba(80, 220, 255, .8); --tile-shadow: rgba(0, 0, 0, .7); --tile-go: #0b6e8a; }

/* 3. Enchanted forest (dark): moonlit pines and glowing fireflies */
html:root[data-world="meadow"] body { background: linear-gradient(180deg, #123a2c 0%, #0b2a1f 55%, #06150f 100%) !important; }
:root[data-world="meadow"] .sc-orb { background: radial-gradient(circle, #f4ffd9 0 30%, rgba(220, 255, 180, .35) 45%, transparent 68%); width: 30vmin; height: 30vmin; }
:root[data-world="meadow"] .sc-far, :root[data-world="meadow"] .sc-near { inset: 0; animation: sc-twinkle 3.2s ease-in-out infinite; }
:root[data-world="meadow"] .sc-far { background-image: radial-gradient(circle at 50px 80px, #e9ff7a 0 2px, rgba(233, 255, 122, .35) 4px, transparent 9px), radial-gradient(circle at 180px 30px, #e9ff7a 0 2px, rgba(233, 255, 122, .3) 4px, transparent 9px); background-size: 260px 220px; }
:root[data-world="meadow"] .sc-near { background-image: radial-gradient(circle at 120px 150px, #fff59a 0 3px, rgba(255, 245, 154, .4) 6px, transparent 13px); background-size: 340px 300px; animation-delay: 1.4s; }
:root[data-world="meadow"] .sc-ground { height: 42vh; background: linear-gradient(0deg, #041009, transparent 60%), conic-gradient(from 150deg at 8% 0%, transparent 0 60deg, #0a2418 60deg 120deg, transparent 120deg) 0 0 / 160px 100% repeat-x, conic-gradient(from 150deg at 50% 10%, transparent 0 60deg, #071a11 60deg 120deg, transparent 120deg) 60px 30px / 220px 100% repeat-x; }
:root[data-world="meadow"] { --tile-ring: rgba(200, 255, 120, .55); --tile-glow: rgba(220, 255, 120, .7); --tile-shadow: rgba(0, 0, 0, .75); --tile-go: #2e6b1f; }

/* 4. Galaxy (dark): deep space, a ringed planet, twinkling stars */
html:root[data-world="dusk"] body { background: radial-gradient(70% 60% at 20% 20%, rgba(170, 70, 255, .45), transparent 60%), radial-gradient(60% 60% at 85% 80%, rgba(255, 70, 190, .35), transparent 60%), linear-gradient(180deg, #120531, #070119) !important; }
:root[data-world="dusk"] .sc-orb { width: 26vmin; height: 26vmin; background: radial-gradient(circle at 35% 30%, #ffd0f5, #b55cff 55%, #4a1b8f); box-shadow: 0 0 60px 10px rgba(181, 92, 255, .5); }
:root[data-world="dusk"] .sc-orb::after { content: ""; position: absolute; inset: 38% -38%; border-radius: 50%; border: 5px solid rgba(255, 210, 255, .7); transform: rotate(-18deg); }
:root[data-world="dusk"] .sc-far, :root[data-world="dusk"] .sc-near { inset: 0; }
:root[data-world="dusk"] .sc-far { background-image: radial-gradient(1.5px 1.5px at 30px 40px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 120px 150px, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 200px 80px, #ffe 50%, transparent 51%); background-size: 240px 200px; animation: sc-twinkle 4s ease-in-out infinite; }
:root[data-world="dusk"] .sc-near { background-image: radial-gradient(2.5px 2.5px at 80px 100px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 260px 30px, #cfe8ff 50%, transparent 51%); background-size: 360px 300px; animation: sc-twinkle 2.6s ease-in-out infinite 1s; }
:root[data-world="dusk"] .sc-ground { display: none; }
:root[data-world="dusk"] { --tile-ring: rgba(210, 150, 255, .6); --tile-glow: rgba(200, 120, 255, .85); --tile-shadow: rgba(0, 0, 0, .75); --tile-go: #6a2bb8; }

/* 5. Desert canyon (warm, dark ground): sunset bands, mesas, drifting dust */
html:root[data-world="canyon"] body { background: linear-gradient(180deg, #2b1d4f 0%, #a6395b 35%, #f07b3f 60%, #ffc15e 78%) !important; }
:root[data-world="canyon"] .sc-orb { top: 34vh; right: 18vw; width: 34vmin; height: 34vmin; background: radial-gradient(circle, #fff1b8 0 45%, #ffb347 60%, transparent 70%); animation: none; }
:root[data-world="canyon"] .sc-far { background-image: radial-gradient(2px 2px at 30px 30px, rgba(255, 230, 190, .6) 50%, transparent 51%); background-size: 120px 140px; animation: sc-drift 50s linear infinite; }
:root[data-world="canyon"] .sc-near { display: none; }
:root[data-world="canyon"] .sc-ground { height: 40vh; background: linear-gradient(0deg, #3d1810 0 40%, transparent 40%), linear-gradient(0deg, #6e2a17 0 100%) 8vw 6vh / 26vw 100% no-repeat, linear-gradient(0deg, #8a3a1c 0 100%) 64vw 12vh / 22vw 100% no-repeat, linear-gradient(0deg, #5a2213 0 100%) 36vw 16vh / 14vw 100% no-repeat; }
:root[data-world="canyon"] { --tile-ring: rgba(255, 200, 120, .7); --tile-glow: rgba(255, 170, 80, .85); --tile-shadow: rgba(60, 15, 5, .75); --tile-go: #a8321c; }

/* 6. Candy pop (light): bubblegum stripes, sprinkles, a big pop of color */
html:root[data-world="berry"] body { background: repeating-linear-gradient(-45deg, #ff7ac2 0 46px, #ff9fd4 46px 92px), #ff7ac2 !important; }
:root[data-world="berry"] .sc-orb { width: 40vmin; height: 40vmin; background: radial-gradient(circle at 35% 30%, #fff, #7afcff 45%, #2bc4ff); box-shadow: 0 0 0 14px rgba(255, 255, 255, .5); }
:root[data-world="berry"] .sc-near { background-image: linear-gradient(35deg, transparent 46%, #fff36b 46% 54%, transparent 54%), linear-gradient(-35deg, transparent 46%, #7afcff 46% 54%, transparent 54%), linear-gradient(80deg, transparent 46%, #b98bff 46% 54%, transparent 54%); background-size: 26px 26px, 22px 22px, 24px 24px; background-position: 30px 40px, 150px 120px, 90px 200px; mask: radial-gradient(circle at 30px 40px, #000 12px, transparent 13px) 0 0 / 210px 230px, radial-gradient(circle at 150px 120px, #000 11px, transparent 12px) 0 0 / 210px 230px, radial-gradient(circle at 90px 200px, #000 12px, transparent 13px) 0 0 / 210px 230px; }
:root[data-world="berry"] .sc-ground { height: 14vh; background: radial-gradient(circle at 50% 0, #fff 0 60%, transparent 61%) 0 0 / 80px 80px repeat-x; opacity: .85; }
:root[data-world="berry"] { --tile-ring: rgba(255, 255, 255, .85); --tile-glow: rgba(122, 252, 255, .9); --tile-shadow: rgba(150, 20, 90, .55); --tile-go: #b0126a; }

/* Swatches preview the scenes */
.sw-sunrise { --sw: linear-gradient(135deg, #ffcf5c, #ff6f8a); } .sw-ocean { --sw: linear-gradient(135deg, #0a5f86, #021a33); } .sw-meadow { --sw: radial-gradient(circle at 60% 40%, #e9ff7a 0 12%, #123a2c 30%); } .sw-dusk { --sw: radial-gradient(circle at 30% 30%, #b55cff, #120531 70%); } .sw-canyon { --sw: linear-gradient(180deg, #a6395b, #f07b3f 60%, #6e2a17 61%); } .sw-berry { --sw: repeating-linear-gradient(-45deg, #ff7ac2 0 5px, #fff 5px 8px); }

/* Calm options: no motion, and Simple view / High contrast drop the scene entirely */
@media (prefers-reduced-motion: reduce) { .start-scene span { animation: none !important; } }
:root[data-motion="reduce"] .start-scene span { animation: none !important; }
:root[data-look="simple"] .start-scene, :root[data-contrast="high"] .start-scene { display: none; }
html:root[data-look="simple"][data-world] body, html:root[data-contrast="high"][data-world] body { background: var(--bg, #fffaf0) !important; }
:root:is([data-look="simple"], [data-contrast="high"]) .start-welcome h1 { color: var(--ink) !important; text-shadow: none !important; }
:root:is([data-look="simple"], [data-contrast="high"]) { --logo-light: inline-block; --logo-dark: none; }
/* The logo follows the header it sits on, not the world: a world that prefers the light logo still shows the
   dark-header logo when the Colors setting (or the device) makes the header dark, and the other way round.
   Draft 10, screenshot 03. (The three-state Colors control is site.js prefs.theme → data-theme.) */
:root[data-theme="dark"][data-world]:not([data-look="simple"], [data-contrast="high"]) { --logo-light: none; --logo-dark: inline-block; }
:root[data-theme="light"][data-world]:not([data-look="simple"], [data-contrast="high"]) { --logo-light: inline-block; --logo-dark: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-world]:not([data-look="simple"], [data-contrast="high"]) { --logo-light: none; --logo-dark: inline-block; } }
@media print { .start-scene { display: none; } }
/* Light scenes stay dark-on-light even when the device is in dark mode */
:root:is([data-world="calm"], [data-world="sunrise"], [data-world="berry"]) { --logo-light: inline-block; --logo-dark: none; }
:root:is([data-world="calm"], [data-world="sunrise"], [data-world="berry"]) .start-welcome h1 { color: #23180f !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
:root:is([data-world="calm"], [data-world="sunrise"], [data-world="berry"]) :is(.start-themes, .start-small) { background: rgba(255, 253, 247, .9) !important; color: #23180f !important; }
:root:is([data-world="calm"], [data-world="sunrise"], [data-world="berry"]) .start-themes legend { color: #23180f !important; }
:root:is([data-world="calm"], [data-world="sunrise"], [data-world="berry"]) .start-small a { color: #1b5ca2 !important; }
:root[data-world="berry"] .sc-orb { right: auto; left: -8vmin; top: auto; bottom: 6vh; width: 34vmin; height: 34vmin; }
:root[data-world="dusk"] .sc-orb { top: 4vh; right: 4vw; }
.start-themes { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px); border-radius: 22px; }
@media (max-width: 520px) { .start-themes legend { float: none; width: 100%; justify-content: center; margin: 0 0 .2rem; } .start-swatch { width: 34px; height: 34px; } }

/* 7. Haunted moon (dark, cozy-spooky): a huge pale moon, drifting fog, glowing lanterns on the hills */
html:root[data-world="moon"] body { background: radial-gradient(60% 50% at 80% 15%, rgba(255, 190, 120, .18), transparent 60%), linear-gradient(180deg, #2a1640 0%, #160f1f 60%, #0b0710 100%) !important; }
:root[data-world="moon"] .sc-orb { width: 38vmin; height: 38vmin; background: radial-gradient(circle at 38% 40%, rgba(0,0,0,.08) 0 7%, transparent 8%), radial-gradient(circle at 62% 62%, rgba(0,0,0,.07) 0 10%, transparent 11%), radial-gradient(circle at 55% 30%, rgba(0,0,0,.06) 0 5%, transparent 6%), radial-gradient(circle, #fff8e1 0 60%, #f6e3b4 70%); box-shadow: 0 0 90px 30px rgba(255, 236, 190, .35); }
:root[data-world="moon"] .sc-far { inset: 0; background: linear-gradient(90deg, transparent, rgba(220, 210, 255, .12) 30%, transparent 60%) 0 62vh / 140vw 12vh no-repeat, linear-gradient(90deg, transparent, rgba(220, 210, 255, .1) 40%, transparent 70%) 0 74vh / 160vw 10vh no-repeat; animation: sc-fog 26s ease-in-out infinite alternate; }
@keyframes sc-fog { from { transform: translateX(-12vw); } to { transform: translateX(8vw); } }
:root[data-world="moon"] .sc-near { inset: 0; background-image: radial-gradient(circle at 60px 50px, #ffb347 0 2px, rgba(255, 179, 71, .35) 5px, transparent 10px); background-size: 300px 260px; animation: sc-twinkle 3s ease-in-out infinite; opacity: .7; }
:root[data-world="moon"] .sc-ground { height: 28vh; background: radial-gradient(8px 8px at 22% 30%, #ff9a3c 50%, transparent 55%), radial-gradient(7px 7px at 71% 42%, #ff9a3c 50%, transparent 55%), radial-gradient(70% 100% at 25% 100%, #0d0814 0 60%, transparent 61%), radial-gradient(60% 120% at 85% 100%, #120b1c 0 55%, transparent 56%); }
:root[data-world="moon"] { --logo-light: none; --logo-dark: inline-block; --tile-ring: rgba(255, 179, 71, .55); --tile-glow: rgba(255, 160, 60, .75); --tile-shadow: rgba(0, 0, 0, .8); --tile-go: #b45309; }
:root[data-world="moon"] .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
:root[data-world="moon"] :is(.start-themes, .start-small) { background: rgba(10, 8, 30, .55) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-world="moon"] .start-themes legend { color: #fff !important; } :root[data-world="moon"] .start-small a { color: #ffe08a !important; }
.sw-moon { --sw: radial-gradient(circle at 65% 35%, #fff8e1 0 22%, #2a1640 26%); }


/* ---------- Draft 9: eight more worlds, earned with stars ---------- */
/* 8. Snowy cabin (light): pale blue sky, a soft low sun, falling snow */
html:root[data-world="snow"] body { background: linear-gradient(180deg, #dfeefc 0%, #bcd7f2 55%, #a7c6e8 100%) !important; }
:root[data-world="snow"] .sc-orb { width: 30vmin; height: 30vmin; top: 10vh; right: 12vw; background: radial-gradient(circle, #fffdf2 0 40%, rgba(255, 250, 230, .5) 55%, transparent 70%); box-shadow: 0 0 90px 30px rgba(255, 255, 240, .5); }
:root[data-world="snow"] .sc-far { background-image: radial-gradient(3px 3px at 30px 40px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 120px 110px, #fff 50%, transparent 52%), radial-gradient(2.5px 2.5px at 200px 20px, #fff 50%, transparent 52%); background-size: 260px 200px; animation-duration: 40s; }
:root[data-world="snow"] .sc-near { background-image: radial-gradient(4px 4px at 60px 80px, #fff 50%, transparent 52%), radial-gradient(3px 3px at 180px 160px, #fff 50%, transparent 52%), radial-gradient(5px 5px at 240px 40px, rgba(255,255,255,.85) 50%, transparent 52%); background-size: 300px 240px; animation-duration: 22s; }
:root[data-world="snow"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(255, 255, 255, .9); --tile-glow: rgba(170, 210, 255, .9); --tile-shadow: rgba(40, 70, 110, .45); --tile-go: #1b5ca2; }
:root[data-world="snow"] .start-welcome h1 { color: #1f3745 !important; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
:root[data-world="snow"] :is(.start-themes, .start-small) { background: rgba(255, 255, 255, .85) !important; color: #1f3745 !important; }
.sw-snow { --sw: linear-gradient(180deg, #dfeefc, #a7c6e8); }

/* 9. Autumn orchard (light): a golden sky, a warm sun, drifting leaves */
html:root[data-world="autumn"] body { background: linear-gradient(180deg, #ffe3a3 0%, #f7c77a 50%, #e8a35b 100%) !important; }
:root[data-world="autumn"] .sc-orb { width: 36vmin; height: 36vmin; background: radial-gradient(circle, #fff3c4 0 36%, #ffd27a 50%, rgba(255, 200, 100, 0) 70%); box-shadow: 0 0 110px 40px rgba(255, 210, 120, .5); }
:root[data-world="autumn"] .sc-far { background-image: radial-gradient(7px 4px at 30px 40px, #e07b1f 50%, transparent 55%), radial-gradient(6px 4px at 150px 120px, #c92a2a 50%, transparent 55%); background-size: 240px 200px; animation-duration: 36s; }
:root[data-world="autumn"] .sc-near { background-image: radial-gradient(9px 5px at 60px 80px, #f0b429 50%, transparent 55%), radial-gradient(8px 5px at 200px 150px, #e07b1f 50%, transparent 55%); background-size: 320px 260px; animation-duration: 20s; }
:root[data-world="autumn"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(255, 255, 255, .8); --tile-glow: rgba(255, 180, 60, .9); --tile-shadow: rgba(120, 60, 10, .5); --tile-go: #9a3412; }
:root[data-world="autumn"] .start-welcome h1 { color: #4a2a12 !important; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
:root[data-world="autumn"] :is(.start-themes, .start-small) { background: rgba(255, 250, 240, .9) !important; color: #4a2a12 !important; }
.sw-autumn { --sw: linear-gradient(180deg, #ffe3a3, #e07b1f); }

/* 10. Tropical island (light): bright sky, big sun, sea sparkle */
html:root[data-world="island"] body { background: linear-gradient(180deg, #8fe3ff 0%, #5ccfff 55%, #1aa9c9 100%) !important; }
:root[data-world="island"] .sc-orb { width: 34vmin; height: 34vmin; top: 6vh; right: 10vw; background: radial-gradient(circle, #fffbe0 0 38%, #ffe066 52%, rgba(255, 224, 102, 0) 70%); box-shadow: 0 0 120px 40px rgba(255, 230, 120, .5); }
:root[data-world="island"] .sc-far { background-image: radial-gradient(2px 2px at 30px 40px, rgba(255,255,255,.9) 50%, transparent 52%), radial-gradient(2px 2px at 150px 120px, rgba(255,255,255,.7) 50%, transparent 52%); background-size: 220px 180px; animation-duration: 50s; opacity: .6; }
:root[data-world="island"] .sc-near { background-image: radial-gradient(10px 6px at 60px 80px, rgba(255,255,255,.55) 50%, transparent 55%); background-size: 340px 280px; animation-duration: 30s; }
:root[data-world="island"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(255, 255, 255, .9); --tile-glow: rgba(120, 230, 255, .9); --tile-shadow: rgba(0, 80, 110, .45); --tile-go: #0e7490; }
:root[data-world="island"] .start-welcome h1 { color: #053a5e !important; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
:root[data-world="island"] :is(.start-themes, .start-small) { background: rgba(255, 255, 255, .85) !important; color: #053a5e !important; }
.sw-island { --sw: linear-gradient(180deg, #8fe3ff 55%, #f6dca3 56%); }

/* 11. Rainy city (dark): a blue night, rain streaks, lit windows */
html:root[data-world="city"] body { background: linear-gradient(180deg, #1c2140 0%, #2b3350 55%, #1a1d33 100%) !important; }
:root[data-world="city"] .sc-orb { width: 26vmin; height: 26vmin; top: 8vh; right: 14vw; background: radial-gradient(circle, #fff6d6 0 44%, rgba(255, 246, 214, .3) 60%, transparent 72%); box-shadow: 0 0 80px 20px rgba(255, 240, 200, .25); }
:root[data-world="city"] .sc-far { background-image: linear-gradient(170deg, transparent 48%, rgba(200, 220, 255, .22) 50%, transparent 52%); background-size: 60px 160px; animation: sc-rain 1.4s linear infinite; opacity: .7; }
:root[data-world="city"] .sc-near { background-image: linear-gradient(170deg, transparent 48%, rgba(220, 235, 255, .35) 50%, transparent 52%); background-size: 90px 220px; animation: sc-rain .9s linear infinite; }
@keyframes sc-rain { from { transform: translateY(0); } to { transform: translateY(33.333%); } }
:root[data-world="city"] { --logo-light: none; --logo-dark: inline-block; --tile-ring: rgba(255, 220, 140, .55); --tile-glow: rgba(255, 210, 120, .75); --tile-shadow: rgba(0, 0, 0, .75); --tile-go: #b45309; }
:root[data-world="city"] .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
:root[data-world="city"] :is(.start-themes, .start-small) { background: rgba(10, 12, 30, .6) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-world="city"] .start-themes legend { color: #fff !important; } :root[data-world="city"] .start-small a { color: #ffe08a !important; }
.sw-city { --sw: linear-gradient(180deg, #2b3350, #1a1d33 60%, #ffd27a 61%, #1a1d33 64%); }

/* 12. Cloud kingdom (light): pastel sky, a soft sun, drifting puffs */
html:root[data-world="cloud"] body { background: linear-gradient(180deg, #d9ecff 0%, #bfe3ff 50%, #ffe9f4 100%) !important; }
:root[data-world="cloud"] .sc-orb { width: 32vmin; height: 32vmin; top: 6vh; right: 8vw; background: radial-gradient(circle, #fffdf0 0 40%, #ffeab0 54%, transparent 70%); box-shadow: 0 0 100px 30px rgba(255, 240, 200, .6); }
:root[data-world="cloud"] .sc-far { background-image: radial-gradient(40px 18px at 60px 50px, rgba(255,255,255,.75) 50%, transparent 55%), radial-gradient(60px 24px at 220px 150px, rgba(255,255,255,.6) 50%, transparent 55%); background-size: 400px 300px; animation: sc-sideways 70s linear infinite; }
:root[data-world="cloud"] .sc-near { background-image: radial-gradient(70px 30px at 120px 100px, rgba(255,255,255,.9) 50%, transparent 55%); background-size: 520px 360px; animation: sc-sideways 40s linear infinite; }
@keyframes sc-sideways { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
:root[data-world="cloud"] .sc-far, :root[data-world="cloud"] .sc-near { inset: 0 -50% 0 0; }
:root[data-world="cloud"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(255, 255, 255, .9); --tile-glow: rgba(255, 160, 200, .8); --tile-shadow: rgba(90, 70, 140, .4); --tile-go: #7a5cc4; }
:root[data-world="cloud"] .start-welcome h1 { color: #4a3a7a !important; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
:root[data-world="cloud"] :is(.start-themes, .start-small) { background: rgba(255, 255, 255, .85) !important; color: #4a3a7a !important; }
.sw-cloud { --sw: radial-gradient(circle at 30% 70%, #fff 0 22%, transparent 24%), linear-gradient(180deg, #bfe3ff, #ffe9f4); }

/* 13. Treehouse jungle (light-dark): leafy green, dapples of sun, fireflies at dusk */
html:root[data-world="jungle"] body { background: linear-gradient(180deg, #bde98c 0%, #8fd36b 45%, #3f8f4a 100%) !important; }
:root[data-world="jungle"] .sc-orb { width: 30vmin; height: 30vmin; top: 4vh; right: 18vw; background: radial-gradient(circle, #fffde0 0 36%, rgba(255, 250, 200, .4) 55%, transparent 70%); box-shadow: 0 0 100px 30px rgba(255, 255, 200, .4); }
:root[data-world="jungle"] .sc-far { background-image: radial-gradient(30px 30px at 60px 60px, rgba(255,255,220,.25) 50%, transparent 55%); background-size: 260px 220px; animation-duration: 60s; }
:root[data-world="jungle"] .sc-near { background-image: radial-gradient(3px 3px at 60px 80px, #ffe066 50%, rgba(255,224,102,.3) 70%, transparent 80%), radial-gradient(2px 2px at 200px 160px, #fff59a 50%, transparent 70%); background-size: 300px 240px; animation: sc-rise 26s linear infinite; }
:root[data-world="jungle"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(255, 255, 255, .85); --tile-glow: rgba(200, 255, 120, .9); --tile-shadow: rgba(20, 60, 20, .5); --tile-go: #2f6f1f; }
:root[data-world="jungle"] .start-welcome h1 { color: #14361c !important; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
:root[data-world="jungle"] :is(.start-themes, .start-small) { background: rgba(255, 255, 245, .88) !important; color: #14361c !important; }
.sw-jungle { --sw: linear-gradient(180deg, #bde98c, #1c5c32); }

/* 14. Space station (dark): deep space, stars, a far planet */
html:root[data-world="space"] body { background: radial-gradient(60% 50% at 80% 90%, rgba(120, 80, 255, .25), transparent 60%), linear-gradient(180deg, #05030f 0%, #0b0620 60%, #120a2a 100%) !important; }
:root[data-world="space"] .sc-orb { width: 20vmin; height: 20vmin; top: 10vh; right: 12vw; background: radial-gradient(circle at 35% 30%, #ffe9b0, #ff9a5a 60%, #b23a6f 100%); box-shadow: 0 0 60px 10px rgba(255, 160, 90, .35); }
:root[data-world="space"] .sc-far { inset: 0; background-image: radial-gradient(1.5px 1.5px at 30px 40px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 120px 110px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 200px 20px, #9ad7ff 50%, transparent 52%); background-size: 240px 200px; animation: sc-twinkle 4s ease-in-out infinite; }
:root[data-world="space"] .sc-near { inset: 0; background-image: radial-gradient(2.5px 2.5px at 60px 80px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 180px 160px, #ffd56b 50%, transparent 52%); background-size: 320px 260px; animation: sc-twinkle 6s ease-in-out infinite reverse; }
:root[data-world="space"] { --logo-light: none; --logo-dark: inline-block; --tile-ring: rgba(120, 230, 255, .55); --tile-glow: rgba(120, 200, 255, .8); --tile-shadow: rgba(0, 0, 0, .8); --tile-go: #0e7490; }
:root[data-world="space"] .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
:root[data-world="space"] :is(.start-themes, .start-small) { background: rgba(10, 8, 30, .6) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-world="space"] .start-themes legend { color: #fff !important; } :root[data-world="space"] .start-small a { color: #ffe08a !important; }
.sw-space { --sw: radial-gradient(circle at 70% 30%, #ff9a5a 0 14%, transparent 16%), linear-gradient(180deg, #05030f, #2b1a66); }

/* 15. Retro arcade (dark): neon grid floor, glowing haze */
html:root[data-world="arcade"] body { background: radial-gradient(50% 40% at 50% 100%, rgba(255, 79, 216, .25), transparent 70%), linear-gradient(180deg, #0b0620 0%, #1a0b40 60%, #120a2a 100%) !important; }
:root[data-world="arcade"] .sc-orb { width: 24vmin; height: 24vmin; top: 8vh; right: 10vw; background: radial-gradient(circle, #ff4fd8 0 30%, rgba(255, 79, 216, .25) 55%, transparent 70%); box-shadow: 0 0 80px 20px rgba(255, 79, 216, .35); }
:root[data-world="arcade"] .sc-far { inset: 0; background-image: linear-gradient(90deg, rgba(34, 230, 255, .12) 1px, transparent 1px), linear-gradient(0deg, rgba(34, 230, 255, .12) 1px, transparent 1px); background-size: 60px 60px; animation: none; }
:root[data-world="arcade"] .sc-near { inset: 0; background-image: radial-gradient(2px 2px at 60px 80px, #ffd56b 50%, transparent 52%), radial-gradient(2px 2px at 180px 160px, #22e6ff 50%, transparent 52%), radial-gradient(2.5px 2.5px at 260px 40px, #ff4fd8 50%, transparent 52%); background-size: 320px 260px; animation: sc-twinkle 2.4s steps(2) infinite; }
:root[data-world="arcade"] { --logo-light: none; --logo-dark: inline-block; --tile-ring: rgba(34, 230, 255, .6); --tile-glow: rgba(255, 79, 216, .8); --tile-shadow: rgba(0, 0, 0, .8); --tile-go: #be185d; }
:root[data-world="arcade"] .start-welcome h1 { color: #fff; text-shadow: 0 0 18px rgba(255, 79, 216, .8); }
:root[data-world="arcade"] :is(.start-themes, .start-small) { background: rgba(10, 8, 30, .6) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-world="arcade"] .start-themes legend { color: #fff !important; } :root[data-world="arcade"] .start-small a { color: #ffe08a !important; }
.sw-arcade { --sw: linear-gradient(135deg, #ff4fd8, #22e6ff); }

/* A touch of wonder in every world: a slow shooting star on the dark ones, and a soft vignette */
html:root[data-world] .start-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, .28)); }
:root:is([data-world="ocean"], [data-world="meadow"], [data-world="dusk"], [data-world="moon"]) .start-scene::before { content: ""; position: absolute; top: 12vh; left: -20vw; width: 18vw; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); opacity: 0; transform: rotate(-18deg); animation: sc-shoot 14s ease-in 4s infinite; }
@keyframes sc-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-18deg); } 3% { opacity: 1; } 9% { opacity: 0; transform: translate(80vw, 26vh) rotate(-18deg); } 100% { opacity: 0; transform: translate(80vw, 26vh) rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .start-scene::before { display: none; } }
:root[data-motion="reduce"] .start-scene::before { display: none; }

/* ---------- The same worlds inside My dashboard ---------- */
html:root[data-drawer-mood][data-world] body { background-size: auto !important; }
html:root[data-drawer-mood][data-world="dusk"] body, html:root[data-drawer-mood][data-world="ocean"] body { background-size: auto !important; }
:root[data-drawer-mood][data-world] .m-panel, :root[data-drawer-mood][data-world] .m-card, :root[data-drawer-mood][data-world] .m-sheet { border-top-color: var(--m-accent); }
:root[data-drawer-mood][data-world] .m-tabs { background-color: rgba(255, 253, 247, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-drawer-mood][data-world] .m-panel:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 30px -6px var(--tile-glow, transparent), 0 20px 40px -24px rgba(0,0,0,.7); }
:root[data-drawer-mood][data-world] .start-scene .sc-orb { opacity: .9; }

/* ---------- Landscapes and little creatures: the site turns into each world ---------- */
.sc-ground { height: 34vh !important; min-height: 180px; background-repeat: no-repeat !important; background-position: center bottom !important; background-size: cover !important; }
.sc-critter { width: 120px; height: 50px; top: 22vh; left: -160px; background: center / contain no-repeat; opacity: 0; animation: sc-fly 38s linear 6s infinite; }
@keyframes sc-fly { 0% { transform: translate(0, 0); opacity: 0; } 2% { opacity: .9; } 25% { transform: translate(60vw, -4vh); } 50% { transform: translate(120vw, 3vh); opacity: .9; } 51%, 100% { transform: translate(120vw, 3vh); opacity: 0; } }
:root[data-world="sunrise"] .sc-ground { background-image: url(../img/worlds/sunrise-land.svg) !important; }
:root[data-world="sunrise"] .sc-critter { background-image: url(../img/worlds/sunrise-critter.svg); }
:root[data-world="ocean"] .sc-ground { background-image: url(../img/worlds/ocean-land.svg) !important; }
:root[data-world="ocean"] .sc-critter { background-image: url(../img/worlds/ocean-critter.svg); }
:root[data-world="meadow"] .sc-ground { background-image: url(../img/worlds/meadow-land.svg) !important; }
:root[data-world="meadow"] .sc-critter { background-image: url(../img/worlds/meadow-critter.svg); }
:root[data-world="dusk"] .sc-ground { background-image: url(../img/worlds/dusk-land.svg) !important; }
:root[data-world="dusk"] .sc-critter { background-image: url(../img/worlds/dusk-critter.svg); }
:root[data-world="canyon"] .sc-ground { background-image: url(../img/worlds/canyon-land.svg) !important; }
:root[data-world="canyon"] .sc-critter { background-image: url(../img/worlds/canyon-critter.svg); }
:root[data-world="berry"] .sc-ground { background-image: url(../img/worlds/berry-land.svg) !important; }
:root[data-world="berry"] .sc-critter { background-image: url(../img/worlds/berry-critter.svg); }
:root[data-world="moon"] .sc-ground { background-image: url(../img/worlds/moon-land.svg) !important; }
:root[data-world="moon"] .sc-critter { background-image: url(../img/worlds/moon-critter.svg); }
:root[data-world="ocean"] .sc-critter { top: 48vh; animation-duration: 30s; }
:root[data-world="meadow"] .sc-critter { width: 60px; height: 40px; top: 50vh; animation: sc-flutter 22s ease-in-out 3s infinite; }
@keyframes sc-flutter { 0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: .9; } 25% { transform: translate(30vw, -8vh); } 50% { transform: translate(60vw, 4vh); } 75% { transform: translate(90vw, -6vh); opacity: .9; } 80%, 100% { transform: translate(120vw, 0); opacity: 0; } }
:root[data-world="dusk"] .sc-critter { top: 30vh; animation-duration: 24s; }
:root[data-world="canyon"] .sc-critter { width: 56px; height: 56px; top: auto; bottom: 9vh; animation: sc-roll 20s linear 4s infinite; }
@keyframes sc-roll { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 3% { opacity: .9; } 60% { transform: translate(120vw, 0) rotate(1080deg); opacity: .9; } 61%, 100% { opacity: 0; transform: translate(120vw, 0) rotate(1080deg); } }
:root[data-world="berry"] .sc-critter { width: 50px; height: 92px; top: auto; bottom: -100px; left: 18vw; animation: sc-float-up 26s ease-in 3s infinite; }
@keyframes sc-float-up { 0% { transform: translate(0, 0); opacity: 0; } 4% { opacity: 1; } 60% { transform: translate(8vw, -120vh); opacity: 1; } 61%, 100% { opacity: 0; transform: translate(8vw, -120vh); } }
:root[data-world="moon"] .sc-critter { top: 16vh; animation-duration: 26s; }
:root[data-world="snow"] .sc-ground { background-image: url(../img/worlds/snow-land.svg) !important; }
:root[data-world="snow"] .sc-critter { background-image: url(../img/worlds/snow-critter.svg); }
:root[data-world="autumn"] .sc-ground { background-image: url(../img/worlds/autumn-land.svg) !important; }
:root[data-world="autumn"] .sc-critter { background-image: url(../img/worlds/autumn-critter.svg); }
:root[data-world="island"] .sc-ground { background-image: url(../img/worlds/island-land.svg) !important; }
:root[data-world="island"] .sc-critter { background-image: url(../img/worlds/island-critter.svg); }
:root[data-world="city"] .sc-ground { background-image: url(../img/worlds/city-land.svg) !important; }
:root[data-world="city"] .sc-critter { background-image: url(../img/worlds/city-critter.svg); }
:root[data-world="cloud"] .sc-ground { background-image: url(../img/worlds/cloud-land.svg) !important; }
:root[data-world="cloud"] .sc-critter { background-image: url(../img/worlds/cloud-critter.svg); }
:root[data-world="jungle"] .sc-ground { background-image: url(../img/worlds/jungle-land.svg) !important; }
:root[data-world="jungle"] .sc-critter { background-image: url(../img/worlds/jungle-critter.svg); }
:root[data-world="space"] .sc-ground { background-image: url(../img/worlds/space-land.svg) !important; }
:root[data-world="space"] .sc-critter { background-image: url(../img/worlds/space-critter.svg); }
:root[data-world="arcade"] .sc-ground { background-image: url(../img/worlds/arcade-land.svg) !important; }
:root[data-world="arcade"] .sc-critter { background-image: url(../img/worlds/arcade-critter.svg); }
:root[data-world="snow"] .sc-critter { width: 80px; height: 50px; top: 18vh; animation-duration: 30s; }
:root[data-world="autumn"] .sc-critter { width: 100px; height: 50px; top: auto; bottom: 26vh; animation-duration: 20s; }
:root[data-world="island"] .sc-critter { width: 100px; height: 60px; top: 14vh; animation-duration: 26s; }
:root[data-world="city"] .sc-critter { width: 80px; height: 60px; top: 20vh; animation: sc-float-up 30s ease-in 4s infinite; left: 70vw; bottom: auto; }
:root[data-world="cloud"] .sc-critter { width: 70px; height: 90px; top: 12vh; animation: sc-flutter 30s ease-in-out 3s infinite; }
:root[data-world="jungle"] .sc-critter { width: 110px; height: 60px; top: 24vh; animation-duration: 24s; }
:root[data-world="space"] .sc-critter { width: 120px; height: 50px; top: 16vh; animation-duration: 44s; }
:root[data-world="arcade"] .sc-critter { width: 60px; height: 60px; top: 30vh; animation: sc-flutter 18s steps(24) 2s infinite; }
:root:is([data-world="city"], [data-world="space"], [data-world="arcade"]) .start-scene::before { content: ""; position: absolute; top: 12vh; left: -20vw; width: 18vw; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); opacity: 0; transform: rotate(-18deg); animation: sc-shoot 23s linear 9s infinite; }

/* ==========================================================================
   Draft 10 (Batch 4): five more worlds, in grey, white, red, black and purple
   ========================================================================== */
/* 17. Foggy harbor (light grey): a pale sun behind fog, fog banks drifting sideways, a fine drizzle */
html:root[data-world="harbor"] body { background: linear-gradient(180deg, #d3d9dc 0%, #b8c2c8 55%, #9aa7ae 100%) !important; }
:root[data-world="harbor"] .sc-orb { width: 30vmin; height: 30vmin; top: 10vh; right: 16vw; background: radial-gradient(circle, rgba(255, 252, 240, .95) 0 40%, rgba(255, 250, 230, .35) 55%, transparent 70%); box-shadow: 0 0 90px 30px rgba(255, 250, 235, .35); filter: blur(2px); }
:root[data-world="harbor"] .sc-far, :root[data-world="harbor"] .sc-near { inset: 0 -50% 0 0; }
:root[data-world="harbor"] .sc-far { background-image: radial-gradient(260px 70px at 200px 240px, rgba(235, 240, 242, .55) 40%, transparent 70%), radial-gradient(320px 60px at 700px 420px, rgba(235, 240, 242, .5) 40%, transparent 70%); background-size: 1000px 600px; animation: sc-sideways 90s linear infinite; }
:root[data-world="harbor"] .sc-near { background-image: radial-gradient(420px 90px at 300px 520px, rgba(245, 248, 250, .6) 40%, transparent 70%), linear-gradient(170deg, transparent 49%, rgba(255, 255, 255, .18) 50%, transparent 51%); background-size: 1200px 700px, 70px 180px; animation: sc-sideways 55s linear infinite; }
:root[data-world="harbor"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(255, 255, 255, .85); --tile-glow: rgba(200, 85, 61, .55); --tile-shadow: rgba(40, 55, 65, .45); --tile-go: #3f5564; }
:root[data-world="harbor"] .start-welcome h1 { color: #2f3f47 !important; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
:root[data-world="harbor"] :is(.start-themes, .start-small) { background: rgba(255, 255, 255, .85) !important; color: #2f3f47 !important; }
.sw-harbor { --sw: linear-gradient(180deg, #d3d9dc, #b8c2c8 55%, #6f7d84 56%, #8e9aa1); }

/* 18. Swan lake (white): pearl light, a soft white sun, feathers and petals drifting down */
html:root[data-world="swan"] body { background: linear-gradient(180deg, #ffffff 0%, #f3f1ec 50%, #e2e4e3 100%) !important; }
:root[data-world="swan"] .sc-orb { width: 34vmin; height: 34vmin; top: 6vh; right: 10vw; background: radial-gradient(circle, #fff 0 36%, #fbf5df 50%, transparent 70%); box-shadow: 0 0 120px 40px rgba(255, 245, 210, .55); }
:root[data-world="swan"] .sc-far { background-image: radial-gradient(5px 9px at 40px 50px, rgba(255, 255, 255, .95) 50%, transparent 55%), radial-gradient(4px 7px at 180px 160px, rgba(240, 238, 230, .9) 50%, transparent 55%); background-size: 260px 220px; animation-duration: 70s; }
:root[data-world="swan"] .sc-near { background-image: radial-gradient(7px 12px at 90px 120px, #fff 50%, transparent 55%), radial-gradient(6px 10px at 240px 40px, #f7f3e8 50%, transparent 55%); background-size: 340px 300px; animation-duration: 42s; }
:root[data-world="swan"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(201, 162, 39, .6); --tile-glow: rgba(255, 240, 180, .9); --tile-shadow: rgba(95, 107, 122, .35); --tile-go: #5f6b7a; }
:root[data-world="swan"] .start-welcome h1 { color: #3a4350 !important; text-shadow: 0 1px 0 rgba(255,255,255,.9); }
:root[data-world="swan"] :is(.start-themes, .start-small) { background: rgba(255, 255, 255, .9) !important; color: #3a4350 !important; box-shadow: 0 0 0 1px rgba(95, 107, 122, .25); }
.sw-swan { --sw: linear-gradient(180deg, #fff, #f3f1ec 55%, #d9d6cd 56%, #e9ebea); }

/* 19. Red rooftops (dark red): a red night sky, a low red sun, embers rising, a thin rain */
html:root[data-world="rooftop"] body { background: linear-gradient(180deg, #1a0608 0%, #5a0f16 55%, #a31b24 100%) !important; }
:root[data-world="rooftop"] .sc-orb { width: 36vmin; height: 36vmin; top: 26vh; right: 10vw; background: radial-gradient(circle, #ff5a4a 0 44%, rgba(255, 90, 74, .35) 56%, transparent 70%); box-shadow: 0 0 120px 30px rgba(255, 60, 60, .35); animation: none; }
:root[data-world="rooftop"] .sc-far { background-image: radial-gradient(2px 2px at 30px 40px, #ffb86b 50%, transparent 52%), radial-gradient(1.5px 1.5px at 150px 120px, #ff6b6b 50%, transparent 52%); background-size: 240px 200px; animation: sc-rise 40s linear infinite; opacity: .8; }
:root[data-world="rooftop"] .sc-near { background-image: radial-gradient(3px 3px at 80px 90px, #ffd36b 50%, transparent 52%), linear-gradient(170deg, transparent 49%, rgba(255, 120, 120, .18) 50%, transparent 51%); background-size: 320px 260px, 90px 220px; animation: sc-rise 22s linear infinite; }
:root[data-world="rooftop"] { --logo-light: none; --logo-dark: inline-block; --tile-ring: rgba(255, 120, 100, .6); --tile-glow: rgba(255, 60, 60, .8); --tile-shadow: rgba(0, 0, 0, .75); --tile-go: #b91c1c; }
:root[data-world="rooftop"] .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
:root[data-world="rooftop"] :is(.start-themes, .start-small) { background: rgba(30, 6, 10, .6) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-world="rooftop"] .start-themes legend { color: #fff !important; } :root[data-world="rooftop"] .start-small a { color: #ffe08a !important; }
.sw-rooftop { --sw: radial-gradient(circle at 70% 40%, #ff5a4a 0 12%, transparent 14%), linear-gradient(180deg, #1a0608, #a31b24 60%, #1a0608 61%); }

/* 20. Midnight black: a black sky, a thin gold moon, gold stars, a faint gold haze on the horizon */
html:root[data-world="midnight"] body { background: linear-gradient(180deg, #000 0%, #0a0a0d 60%, #1a1608 100%) !important; }
:root[data-world="midnight"] .sc-orb { width: 22vmin; height: 22vmin; top: 8vh; right: 14vw; background: radial-gradient(circle at 64% 42%, #000 0 35%, transparent 36%), radial-gradient(circle at 50% 50%, #e9c84a 0 40%, transparent 41%); box-shadow: none; filter: drop-shadow(0 0 16px rgba(233, 200, 74, .6)); animation: none; }
:root[data-world="midnight"] .sc-far, :root[data-world="midnight"] .sc-near { inset: 0; }
:root[data-world="midnight"] .sc-far { background-image: radial-gradient(1.5px 1.5px at 30px 40px, #e9c84a 50%, transparent 52%), radial-gradient(1px 1px at 120px 150px, #fff1b8 50%, transparent 52%), radial-gradient(1.2px 1.2px at 200px 80px, #e9c84a 50%, transparent 52%); background-size: 240px 200px; animation: sc-twinkle 5s ease-in-out infinite; }
:root[data-world="midnight"] .sc-near { background-image: radial-gradient(2.5px 2.5px at 80px 100px, #fff1b8 50%, transparent 52%), radial-gradient(2px 2px at 260px 30px, #e9c84a 50%, transparent 52%); background-size: 360px 300px; animation: sc-twinkle 3.4s ease-in-out infinite 1s; }
:root[data-world="midnight"] { --logo-light: none; --logo-dark: inline-block; --tile-ring: rgba(233, 200, 74, .55); --tile-glow: rgba(233, 200, 74, .7); --tile-shadow: rgba(0, 0, 0, .9); --tile-go: #8a6914; }
:root[data-world="midnight"] .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
:root[data-world="midnight"] :is(.start-themes, .start-small) { background: rgba(10, 10, 12, .7) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(233, 200, 74, .35); }
:root[data-world="midnight"] .start-themes legend { color: #fff !important; } :root[data-world="midnight"] .start-small a { color: #ffe08a !important; }
.sw-midnight { --sw: radial-gradient(circle at 70% 32%, transparent 0 9%, #e9c84a 10% 15%, transparent 16%), linear-gradient(180deg, #000, #0a0a0d 60%, #c9a227 61%, #0b0b0e 62%); }

/* 21. Aurora night (purple): northern lights that slowly ripple, stars, falling snow */
html:root[data-world="aurora"] body { background: linear-gradient(180deg, #0b0620 0%, #2a1660 50%, #4a2a84 100%) !important; }
:root[data-world="aurora"] .sc-orb { width: 16vmin; height: 16vmin; top: 8vh; right: 10vw; background: radial-gradient(circle at 40% 35%, #fff, #d9ccff 55%, #8f7ad1); box-shadow: 0 0 60px 10px rgba(200, 180, 255, .35); }
:root[data-world="aurora"] .sc-far { inset: 0; background-image: radial-gradient(1.5px 1.5px at 30px 40px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 120px 110px, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 200px 20px, #cfe8ff 50%, transparent 52%); background-size: 240px 200px; animation: sc-twinkle 4s ease-in-out infinite; }
:root[data-world="aurora"] .sc-near { background-image: radial-gradient(2.5px 2.5px at 60px 80px, rgba(255,255,255,.9) 50%, transparent 55%), radial-gradient(2px 2px at 200px 180px, rgba(255,255,255,.7) 50%, transparent 55%); background-size: 300px 260px; animation: sc-drift 36s linear infinite; }
html:root[data-world="aurora"] .start-scene::after { content: ""; position: absolute; inset: -20% -25% auto -25%; height: 78vh; pointer-events: none; background: repeating-linear-gradient(100deg, transparent 0 40px, rgba(141, 255, 192, .55) 50px 90px, transparent 100px 150px, rgba(125, 249, 255, .5) 160px 200px, transparent 210px 280px, rgba(255, 143, 216, .42) 290px 330px, transparent 340px 420px, rgba(170, 120, 255, .5) 430px 480px, transparent 490px 560px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 55%, transparent 100%); filter: blur(12px); transform: skewX(-14deg); animation: sc-aurora 26s ease-in-out infinite alternate; }
@keyframes sc-aurora { 0% { transform: skewX(-14deg) translateX(0); opacity: .8; } 50% { opacity: 1; } 100% { transform: skewX(-6deg) translateX(-180px); opacity: .85; } }
:root[data-world="aurora"] { --logo-light: none; --logo-dark: inline-block; --tile-ring: rgba(125, 249, 255, .55); --tile-glow: rgba(170, 120, 255, .85); --tile-shadow: rgba(0, 0, 0, .75); --tile-go: #6a2bb8; }
:root[data-world="aurora"] .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
:root[data-world="aurora"] :is(.start-themes, .start-small) { background: rgba(14, 8, 36, .62) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-world="aurora"] .start-themes legend { color: #fff !important; } :root[data-world="aurora"] .start-small a { color: #ffe08a !important; }
.sw-aurora { --sw: linear-gradient(100deg, transparent 0 30%, rgba(125, 249, 255, .5) 35% 45%, transparent 50% 60%, rgba(255, 143, 216, .5) 65% 75%, transparent 80%), linear-gradient(180deg, #0b0620, #4a2a84); }

/* Their landscapes and animals: the gull and the hawk fly, the swan glides on the water, the panther and the wolf cross the shore */
:root[data-world="harbor"] .sc-ground { background-image: url(../img/worlds/harbor-land.svg) !important; }
:root[data-world="harbor"] .sc-critter { background-image: url(../img/worlds/harbor-critter.svg); width: 100px; height: 44px; top: 16vh; animation-duration: 34s; }
:root[data-world="swan"] .sc-ground { background-image: url(../img/worlds/swan-land.svg) !important; }
:root[data-world="swan"] .sc-critter { background-image: url(../img/worlds/swan-critter.svg); width: 110px; height: 60px; top: auto; bottom: 7vh; animation: sc-glide 44s linear 3s infinite; }
:root[data-world="rooftop"] .sc-ground { background-image: url(../img/worlds/rooftop-land.svg) !important; }
:root[data-world="rooftop"] .sc-critter { background-image: url(../img/worlds/rooftop-critter.svg); width: 140px; height: 50px; top: 12vh; animation-duration: 40s; }
:root[data-world="midnight"] .sc-ground { background-image: url(../img/worlds/midnight-land.svg) !important; }
:root[data-world="midnight"] .sc-critter { background-image: url(../img/worlds/midnight-critter.svg); width: 120px; height: 50px; top: auto; bottom: 5vh; animation: sc-glide 36s linear 5s infinite; }
:root[data-world="aurora"] .sc-ground { background-image: url(../img/worlds/aurora-land.svg) !important; }
:root[data-world="aurora"] .sc-critter { background-image: url(../img/worlds/aurora-critter.svg); width: 130px; height: 50px; top: auto; bottom: 10vh; animation: sc-glide 26s linear 4s infinite; }
@keyframes sc-glide { 0% { transform: translate(0, 0); opacity: 0; } 3% { opacity: .95; } 25% { transform: translate(30vw, -1vh); } 50% { transform: translate(60vw, 1vh); } 60% { transform: translate(120vw, 0); opacity: .95; } 61%, 100% { transform: translate(120vw, 0); opacity: 0; } }
:root[data-world="custom"][data-cw-critter="swan"] .sc-critter, :root[data-world="custom"][data-cw-critter="midnight"] .sc-critter, :root[data-world="custom"][data-cw-critter="aurora"] .sc-critter { top: auto; bottom: 8vh; animation: sc-glide 36s linear infinite; }
:root:is([data-world="harbor"], [data-world="rooftop"], [data-world="midnight"], [data-world="aurora"]) .start-scene::before { content: ""; position: absolute; top: 14vh; left: -20vw; width: 18vw; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); opacity: 0; transform: rotate(-18deg); animation: sc-shoot 23s linear 9s infinite; }
:root[data-world="aurora"] .sc-ground { z-index: 1; }
/* Turning into a new world: a soft circle opens from the middle of the screen */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: w-open .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes w-open { from { clip-path: circle(0% at 50% 45%); } to { clip-path: circle(150% at 50% 45%); } }
@media (prefers-reduced-motion: reduce) { .sc-critter { display: none; } ::view-transition-new(root) { animation: none; } }
:root[data-motion="reduce"] .sc-critter { display: none; }
:root[data-look="simple"] .start-scene, :root[data-contrast="high"] .start-scene { display: none !important; }
@media print { .start-scene { display: none !important; } }
:root[data-world="dusk"] .sc-ground { display: block !important; }

/* ==========================================================================
   16. My own world: built from parts, painted with variables set by worldbuilder.mjs
   ========================================================================== */
html:root[data-world="custom"] body { background: linear-gradient(180deg, var(--cw-sky1, #8ed0ff) 0%, var(--cw-sky2, #4da3f5) 55%, var(--cw-sky3, #2f6fd1) 100%) !important; }
:root[data-world="custom"] .sc-orb { width: var(--cw-orb-size, 40vmin); height: var(--cw-orb-size, 40vmin); background: radial-gradient(circle, #fff 0 34%, var(--cw-orb, #ffe066) 50%, transparent 70%); box-shadow: 0 0 120px 40px var(--cw-orb-glow, transparent); }
:root[data-world="custom"] .sc-ground { background-image: var(--cw-land) !important; background-size: auto 100%; background-position: bottom center; background-repeat: repeat-x; filter: hue-rotate(var(--cw-land-hue, 0deg)); }
:root[data-world="custom"] .sc-critter { background-image: var(--cw-critter); width: 90px; height: 60px; top: 16vh; animation: sc-fly 34s linear infinite; }
:root[data-world="custom"][data-cw-critter="none"] .sc-critter { display: none; }
:root[data-world="custom"][data-cw-critter="ocean"] .sc-critter, :root[data-world="custom"][data-cw-critter="cloud"] .sc-critter { animation: sc-float-up 40s linear infinite; }
:root[data-world="custom"][data-cw-critter="city"] .sc-critter, :root[data-world="custom"][data-cw-critter="autumn"] .sc-critter, :root[data-world="custom"][data-cw-critter="canyon"] .sc-critter { top: auto; bottom: 8vh; animation: sc-roll 28s linear infinite; }
/* weather */
:root[data-world="custom"] .sc-far, :root[data-world="custom"] .sc-near { background-image: none; }
:root[data-world="custom"][data-cw-weather="stars"] .sc-far { background-image: radial-gradient(2px 2px at 30px 40px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 120px 110px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 200px 20px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 260px 150px, #fff 50%, transparent 52%); background-size: 300px 220px; animation: sc-twinkle 4s ease-in-out infinite; }
:root[data-world="custom"][data-cw-weather="stars"] .sc-near { background-image: radial-gradient(3px 3px at 60px 80px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 180px 160px, #fffbd0 50%, transparent 52%); background-size: 320px 260px; animation: sc-twinkle 6s ease-in-out infinite reverse; }
:root[data-world="custom"][data-cw-weather="snow"] .sc-far { background-image: radial-gradient(3px 3px at 30px 40px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 120px 110px, #fff 50%, transparent 52%), radial-gradient(2.5px 2.5px at 200px 20px, #fff 50%, transparent 52%); background-size: 260px 200px; animation: sc-drift 60s linear infinite; }
:root[data-world="custom"][data-cw-weather="snow"] .sc-near { background-image: radial-gradient(4px 4px at 60px 80px, #fff 50%, transparent 52%), radial-gradient(3px 3px at 180px 160px, #fff 50%, transparent 52%), radial-gradient(5px 5px at 240px 40px, rgba(255,255,255,.9) 50%, transparent 52%); background-size: 300px 240px; animation: sc-drift 30s linear infinite; }
:root[data-world="custom"][data-cw-weather="rain"] .sc-far { background-image: linear-gradient(170deg, transparent 48%, rgba(200, 220, 255, .25) 49% 51%, transparent 52%); background-size: 60px 90px; animation: sc-rain 1.4s linear infinite; }
:root[data-world="custom"][data-cw-weather="rain"] .sc-near { background-image: linear-gradient(170deg, transparent 48%, rgba(220, 235, 255, .45) 49% 51%, transparent 52%); background-size: 40px 70px; animation: sc-rain .9s linear infinite; }
:root[data-world="custom"][data-cw-weather="petals"] .sc-near { background-image: radial-gradient(6px 10px at 20px 30px, rgba(255, 182, 193, .9) 50%, transparent 52%), radial-gradient(5px 8px at 140px 110px, rgba(255, 236, 160, .9) 50%, transparent 52%), radial-gradient(5px 9px at 220px 60px, rgba(255, 150, 180, .85) 50%, transparent 52%); background-size: 260px 220px; animation: sc-drift 38s linear infinite; }
:root[data-world="custom"][data-cw-weather="bubbles"] .sc-near { background-image: radial-gradient(10px 10px at 40px 60px, rgba(255,255,255,0) 60%, rgba(255,255,255,.7) 64% 70%, transparent 74%), radial-gradient(6px 6px at 160px 140px, rgba(255,255,255,0) 60%, rgba(255,255,255,.7) 64% 70%, transparent 74%), radial-gradient(14px 14px at 240px 30px, rgba(255,255,255,0) 60%, rgba(255,255,255,.6) 64% 70%, transparent 74%); background-size: 300px 240px; animation: sc-rise 36s linear infinite; }
:root[data-world="custom"][data-cw-weather="fireflies"] .sc-near { background-image: radial-gradient(3px 3px at 40px 60px, #fff7a0 50%, transparent 52%), radial-gradient(2.5px 2.5px at 160px 140px, #e8ff8a 50%, transparent 52%), radial-gradient(3px 3px at 240px 30px, #fff7a0 50%, transparent 52%); background-size: 300px 240px; animation: sc-rise 50s linear infinite, sc-twinkle 3s ease-in-out infinite; }
:root[data-world="custom"][data-cw-weather="clouds"] .sc-far { background-image: radial-gradient(40px 18px at 60px 50px, rgba(255,255,255,.75) 50%, transparent 52%), radial-gradient(60px 22px at 220px 130px, rgba(255,255,255,.7) 50%, transparent 52%); background-size: 340px 240px; animation: sc-sideways 80s linear infinite; }
:root[data-world="custom"][data-cw-weather="clouds"] .sc-near { background-image: radial-gradient(70px 30px at 120px 100px, rgba(255,255,255,.9) 50%, transparent 52%); background-size: 420px 300px; animation: sc-sideways 50s linear infinite; }
:root[data-world="custom"][data-cw-weather="sparkles"] .sc-near { background-image: radial-gradient(2px 2px at 40px 60px, #fff 50%, transparent 52%), radial-gradient(3px 3px at 160px 140px, #ffe9a0 50%, transparent 52%), radial-gradient(2px 2px at 240px 30px, #c8f3ff 50%, transparent 52%), radial-gradient(2.5px 2.5px at 90px 200px, #ffd1f0 50%, transparent 52%); background-size: 280px 240px; animation: sc-rise 30s linear infinite, sc-twinkle 2.6s ease-in-out infinite; }
/* text and tiles follow the brightness of the sky */
:root[data-world="custom"] { --tile-ring: rgba(255, 255, 255, .8); --tile-glow: var(--cw-orb-glow, rgba(255, 255, 255, .6)); --tile-shadow: rgba(30, 30, 60, .45); --tile-go: #1b4f8a; --logo-light: inline-block; --logo-dark: none; }
:root[data-world="custom"][data-cw-dark="yes"] { --logo-light: none; --logo-dark: inline-block; }
:root[data-world="custom"][data-cw-dark="yes"] .start-welcome h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
:root[data-world="custom"][data-cw-dark="yes"] :is(.start-themes, .start-small) { background: rgba(10, 8, 30, .55) !important; color: #fff !important; }
:root[data-world="custom"][data-cw-dark="no"] .start-welcome h1 { color: #1f2a44 !important; text-shadow: 0 1px 0 rgba(255,255,255,.8); }

/* A little picture of a custom world */
.cw-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, var(--s1), var(--s2) 55%, var(--s3)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.cw-thumb i { position: absolute; display: block; }
.cw-thumb .cw-orb { width: var(--orb-size, 30px); height: var(--orb-size, 30px); right: 12%; top: 12%; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, var(--orb) 50%, transparent 72%); filter: drop-shadow(0 0 8px var(--orb)); }
.cw-thumb .cw-land { left: 0; right: 0; bottom: 0; height: 42%; background: var(--land) bottom center / auto 100% repeat-x; filter: hue-rotate(var(--hue, 0deg)); }
.cw-thumb .cw-critter { width: 26%; height: 30%; left: 10%; top: 24%; background: var(--critter) center / contain no-repeat; animation: cw-bob 3s ease-in-out infinite; }
.cw-thumb .cw-sky { inset: 0; background-repeat: repeat; opacity: .9; }
.cw-thumb[data-weather="stars"] .cw-sky, .cw-thumb[data-weather="sparkles"] .cw-sky { background-image: radial-gradient(1.5px 1.5px at 20px 14px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 60px 40px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 100px 10px, #fff 50%, transparent 52%); background-size: 120px 70px; }
.cw-thumb[data-weather="snow"] .cw-sky { background-image: radial-gradient(2px 2px at 20px 14px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 60px 44px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 100px 24px, #fff 50%, transparent 52%); background-size: 120px 70px; }
.cw-thumb[data-weather="rain"] .cw-sky { background-image: linear-gradient(170deg, transparent 48%, rgba(220, 235, 255, .5) 49% 51%, transparent 52%); background-size: 18px 30px; }
.cw-thumb[data-weather="petals"] .cw-sky { background-image: radial-gradient(3px 5px at 20px 14px, rgba(255, 182, 193, .95) 50%, transparent 52%), radial-gradient(2.5px 4px at 70px 44px, rgba(255, 236, 160, .95) 50%, transparent 52%); background-size: 110px 70px; }
.cw-thumb[data-weather="bubbles"] .cw-sky { background-image: radial-gradient(6px 6px at 24px 30px, transparent 58%, rgba(255,255,255,.8) 62% 70%, transparent 74%), radial-gradient(4px 4px at 80px 50px, transparent 58%, rgba(255,255,255,.8) 62% 70%, transparent 74%); background-size: 120px 80px; }
.cw-thumb[data-weather="fireflies"] .cw-sky { background-image: radial-gradient(2px 2px at 24px 30px, #fff7a0 50%, transparent 52%), radial-gradient(1.5px 1.5px at 80px 50px, #e8ff8a 50%, transparent 52%); background-size: 120px 80px; }
.cw-thumb[data-weather="clouds"] .cw-sky { background-image: radial-gradient(22px 9px at 30px 18px, rgba(255,255,255,.85) 50%, transparent 52%), radial-gradient(30px 11px at 110px 40px, rgba(255,255,255,.8) 50%, transparent 52%); background-size: 160px 80px; }
@keyframes cw-bob { 50% { transform: translateY(-6%); } }
.ws-custom .cw-thumb { position: absolute; inset: 0; border-radius: 13px; aspect-ratio: auto; box-shadow: none; }
.ws-custom .m-world-card { position: relative; overflow: hidden; }
.ws-custom .m-world-card > b, .ws-custom .m-world-card > small, .ws-custom .m-world-card > .mw-song, .ws-custom .ws-check, .ws-custom .ws-lock { position: relative; z-index: 1; }
/* the builder */
.cw-builder { display: grid; gap: 12px; }
.cw-preview-wrap { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 14px; align-items: center; }
@media (max-width: 560px) { .cw-preview-wrap { grid-template-columns: 1fr; } }
.cw-preview-wrap .cw-thumb { border: 3px solid #23180f; box-shadow: 0 4px 0 #23180f; }
.cw-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.cw-group > legend { font-weight: 900; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-pick { position: relative; }
.cw-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cw-pick > span { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 6px 8px; font-size: 12px; font-weight: 800; color: #23180f; cursor: pointer; }
.cw-pick > span > i { display: block; width: 52px; height: 36px; border-radius: 8px; border: 2px solid rgba(0, 0, 0, .25); }
.cw-sky-pick > span > i { background: linear-gradient(180deg, var(--s1), var(--s2) 55%, var(--s3)); }
.cw-orb-pick > span > i { background: radial-gradient(circle at 50% 50%, #fff 0 22%, var(--orb) 40%, transparent 68%), #1b2a5e; }
.cw-land-pick > span > i { background: var(--land) bottom center / auto 100% repeat-x, linear-gradient(#bfe3ff, #e8f4ff); }
.cw-critter-pick > span > i { background: var(--critter) center / contain no-repeat, #e8f4ff; }
.cw-critter-pick > span > i.is-none { display: grid; place-items: center; background: #eee; }
.cw-pick input:checked + span { outline: 3px solid #23180f; outline-offset: -3px; border-radius: 12px; background: #fff3b0; }
.cw-pick input:focus-visible + span { outline: 3px solid var(--focus, #29298e); outline-offset: 2px; }
.cw-more { margin-top: 6px; } .cw-more summary { cursor: pointer; font-weight: 700; }
.cw-colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 0; }
.cw-colors label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
/* a drawn color well: the real color input sits on top, invisible, so every browser shows the same swatch */
.cw-color-well { position: relative; display: inline-block; width: 44px; height: 32px; }
.cw-color-well i { position: absolute; inset: 0; border: 3px solid #23180f; border-radius: 10px; background: var(--sw, #fff); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 3px 0 #23180f; pointer-events: none; }
.cw-color-well input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.cw-color-well input[type="color"]:focus-visible + i, .cw-color-well:has(input:focus-visible) i { outline: 3px solid var(--focus, #29298e); outline-offset: 3px; }
.cw-hue { margin-top: 8px; }
.cw-lands > .cw-pick > span, .cw-critters > .cw-pick > span { min-width: 76px; }

/* ==========================================================================
   0. Quiet space (the default): a wide, calm room that goes on and on.
   Soft greige light, a gentle horizon and a faint floor give it depth. Nothing moves.
   ========================================================================== */
html:root[data-world="calm"] body { background:
  radial-gradient(70% 34% at 50% 61%, rgba(255, 253, 248, .95), rgba(255, 253, 248, 0) 72%),
  radial-gradient(140% 110% at 50% 42%, transparent 52%, rgba(74, 58, 42, .17) 100%),
  linear-gradient(180deg, #d9d2c6 0%, #e6e0d6 34%, #f0ebe3 60.5%, #e7e0d5 62%, #d8cfc2 80%, #cbc0b1 100%) !important; }
:root[data-world="calm"] .start-scene span { animation: none !important; }
:root[data-world="calm"] .sc-orb { left: -15vw; right: -15vw; top: -38vh; width: auto; height: 70vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); box-shadow: none; filter: blur(6px); }
:root[data-world="calm"] :is(.sc-far, .sc-near, .sc-critter) { display: none !important; }
:root[data-world="calm"] .sc-ground { top: 61.5vh; height: auto !important; min-height: 0; background-image: url(../img/worlds/calm-floor.svg) !important; background-size: 100% 100% !important; }
:root[data-world="calm"] { --logo-light: inline-block; --logo-dark: none; --tile-ring: rgba(255, 255, 255, .85); --tile-glow: rgba(255, 250, 238, .95); --tile-shadow: rgba(80, 62, 44, .38); --tile-go: #5b4330; }
:root[data-world="calm"] .start-welcome h1 { color: #2b2219 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
:root[data-world="calm"] :is(.start-themes, .start-small) { background: rgba(255, 253, 248, .88) !important; color: #2b2219 !important; box-shadow: 0 0 0 1px rgba(120, 100, 80, .18), 0 10px 24px -16px rgba(60, 45, 30, .45); }
:root[data-world="calm"] .start-themes legend { color: #2b2219 !important; }
:root[data-world="calm"] .start-small a { color: #1b5ca2 !important; }
.sw-calm { --sw: linear-gradient(180deg, #e6e0d6 0 55%, #f3efe8 56%, #cbc0b1); }
.mood-w-calm { background: radial-gradient(60% 30% at 50% 58%, rgba(255,253,248,.95), transparent 70%), linear-gradient(180deg, #d9d2c6, #f0ebe3 57%, #e2dacd 58%, #cbc0b1) !important; }
/* Inside My dashboard: soft paper, quiet edges */
:root[data-drawer-mood][data-world="calm"] { --w-tint: #fbf9f5; --tile-glow: rgba(255, 248, 232, .9); }
:root[data-drawer-mood][data-world="calm"] :is(.m-panel, .m-card) { border-top-color: #b9a88f !important; box-shadow: 0 0 0 1px rgba(120, 100, 80, .16), 0 20px 38px -24px rgba(60, 45, 30, .5) !important; }
:root[data-world="calm"] .shelf-unit { --sh-back: #ebe5dc; --sh-back2: #e0d8cc; --sh-side: #bfae95; --sh-side2: #8f7d65; --pk-top: #ddd0bb; --pk-front: #bfae95; --pk-edge: #8f7d65; }