/* The app's 16 background worlds as section grounds, plus a live world switcher.
   <section class="db-world" data-world="dino" id="make-it-theirs"> ... </section>
   <div class="db-world-switcher" data-db="worlds" data-target="#make-it-theirs" [data-worlds="fireflies,sky,dino"]></div>
   Each world = its app SVG tile (assets/textures/worlds.css, repeating at natural size) over its two gradient stops.
   Light worlds flip the ink exactly like the app (js adds .db-light; CSS covers the no-JS case). */
.db-world,.db-world__layer,.db-world-swatch{
  --w-angle:180deg;--w-pat:none;--w-tile:auto;
  background-color:var(--w-b);
  background-image:var(--w-pat),linear-gradient(var(--w-angle),var(--w-a),var(--w-b));
  background-repeat:repeat,no-repeat;background-size:var(--w-tile),100% 100%}
.db-world{position:relative;isolation:isolate;color:var(--db-ink);transition:color calc(var(--m-dur-slow) * 1.5) var(--m-ease)}
.db-world__layer{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  transition:opacity calc(var(--m-dur-slow) * 1.5) var(--m-ease)}
.db-world__layer.is-fading{opacity:0}

/* ---- the sixteen (ids follow the token names) ---- */
[data-world="fireflies"]{--w-a:var(--db-world-fireflies-a);--w-b:var(--db-world-fireflies-b);
  --w-pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='260'%3E%3Cg fill='%23ffce5c'%3E%3Ccircle cx='40' cy='52' r='7' opacity='.10'/%3E%3Ccircle cx='40' cy='52' r='1.8' opacity='.75'/%3E%3Ccircle cx='212' cy='30' r='7' opacity='.10'/%3E%3Ccircle cx='212' cy='30' r='1.8' opacity='.75'/%3E%3Ccircle cx='148' cy='128' r='7' opacity='.10'/%3E%3Ccircle cx='148' cy='128' r='1.8' opacity='.75'/%3E%3Ccircle cx='286' cy='168' r='7' opacity='.10'/%3E%3Ccircle cx='286' cy='168' r='1.8' opacity='.75'/%3E%3Ccircle cx='72' cy='210' r='7' opacity='.10'/%3E%3Ccircle cx='72' cy='210' r='1.8' opacity='.75'/%3E%3Ccircle cx='250' cy='236' r='7' opacity='.10'/%3E%3Ccircle cx='250' cy='236' r='1.8' opacity='.75'/%3E%3C/g%3E%3C/svg%3E");--w-tile:320px 260px}
/* the app's soft top-right glow for Fireflies */
.db-world[data-world="fireflies"]{background-image:var(--w-pat),radial-gradient(circle 240px at calc(100% - 80px) 60px,color-mix(in srgb,var(--db-gold) 14%,transparent),transparent 70%),linear-gradient(var(--w-angle),var(--w-a),var(--w-b));background-repeat:repeat,no-repeat,no-repeat;background-size:var(--w-tile),auto,100% 100%}
[data-world="sky"]{--w-a:var(--db-world-sky-a);--w-b:var(--db-world-sky-b);--w-pat:var(--pat-sky);--w-tile:480px 300px}
[data-world="lagoon"]{--w-a:var(--db-world-lagoon-a);--w-b:var(--db-world-lagoon-b);--w-pat:var(--pat-lagoon);--w-tile:340px 340px}
[data-world="polka"]{--w-a:var(--db-world-polka-a);--w-b:var(--db-world-polka-b);--w-pat:var(--pat-polka);--w-tile:300px 300px}
[data-world="blossom"]{--w-a:var(--db-world-blossom-a);--w-b:var(--db-world-blossom-b);--w-pat:var(--pat-blossom);--w-tile:320px 320px;--w-angle:160deg}
[data-world="mint"]{--w-a:var(--db-world-mint-a);--w-b:var(--db-world-mint-b);--w-pat:var(--pat-mint);--w-tile:360px 360px}
[data-world="coral"]{--w-a:var(--db-world-coral-a);--w-b:var(--db-world-coral-b);
  --w-pat:radial-gradient(circle at 84% 10%,rgba(255,255,255,.4) 0 52px,rgba(255,255,255,.18) 53px 78px,transparent 79px),
    radial-gradient(120% 46% at 18% 108%,rgba(255,255,255,.22),transparent 70%)}
[data-world="star"]{--w-a:var(--db-world-star-a);--w-b:var(--db-world-star-b);--w-pat:var(--pat-star);--w-tile:360px 360px}
[data-world="shelf"]{--w-a:var(--db-world-shelf-a);--w-b:var(--db-world-shelf-b);--w-pat:var(--pat-shelf);--w-tile:300px 170px}
[data-world="dino"]{--w-a:var(--db-world-dino-a);--w-b:var(--db-world-dino-b);--w-pat:var(--pat-dino);--w-tile:360px 210px}
[data-world="storm"]{--w-a:var(--db-world-storm-a);--w-b:var(--db-world-storm-b);--w-pat:var(--pat-storm);--w-tile:340px 200px}
[data-world="space"]{--w-a:var(--db-world-space-a);--w-b:var(--db-world-space-b);--w-pat:var(--pat-space);--w-tile:320px 260px}
[data-world="reef"]{--w-a:var(--db-world-reef-a);--w-b:var(--db-world-reef-b);--w-pat:var(--pat-reef);--w-tile:340px 230px}
[data-world="jungle"]{--w-a:var(--db-world-jungle-a);--w-b:var(--db-world-jungle-b);--w-pat:var(--pat-jungle);--w-tile:340px 220px}
[data-world="castle"]{--w-a:var(--db-world-castle-a);--w-b:var(--db-world-castle-b);--w-pat:var(--pat-castle);--w-tile:330px 200px;--w-angle:170deg}
[data-world="snow"]{--w-a:var(--db-world-snow-a);--w-b:var(--db-world-snow-b);--w-pat:var(--pat-snow);--w-tile:330px 210px}

/* light worlds: ink flips (no-JS path; js also adds .db-light so every .db-light rule in the kit applies) */
.db-world:is([data-world="sky"],[data-world="lagoon"],[data-world="polka"],[data-world="blossom"],[data-world="mint"],
  [data-world="coral"],[data-world="shelf"],[data-world="dino"],[data-world="jungle"],[data-world="castle"]){
  color:var(--db-ink-light);--fg:var(--db-ink-light);--fg-muted:var(--db-muted-light);--border:rgba(27,36,64,.14)}

/* ---- switcher ---- */
.db-world-switcher{display:flex;flex-wrap:wrap;align-items:center;gap:var(--db-s3) var(--db-s4)}
.db-world-switcher__list{display:flex;flex-wrap:wrap;gap:var(--db-s2);padding:var(--db-s2);margin:0;
  border-radius:var(--db-r-xl);background:rgba(4,6,20,.28);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;backdrop-filter:blur(6px)}
.db-light .db-world-switcher__list,.db-world-switcher--light .db-world-switcher__list{background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(27,36,64,.12) inset}
.db-world-swatch{position:relative;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:50%;cursor:pointer;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.35) inset,0 2px 6px rgba(4,6,20,.3);
  transition:transform var(--m-dur-fast) var(--m-ease),box-shadow var(--m-dur) var(--m-ease);-webkit-tap-highlight-color:transparent}
.db-world-swatch[data-world]{background-size:150% auto,100% 100%;background-position:30% 30%,0 0}
.db-world-swatch[data-world="coral"]{background-size:100% 100%,100% 100%}
.db-world-swatch[data-world="coral"]{--w-pat:radial-gradient(circle at 78% 22%,rgba(255,255,255,.45) 0 7px,rgba(255,255,255,.2) 8px 11px,transparent 12px)}
.db-world-swatch:hover{transform:translateY(-2px)}
.db-world-swatch[aria-checked="true"]{box-shadow:0 0 0 3px var(--db-gold),0 0 14px 2px color-mix(in srgb,var(--db-gold) 40%,transparent)}
.db-world-swatch:focus-visible{outline:3px solid var(--db-focus);outline-offset:3px}
.db-world-switcher__name{min-width:9ch;font-weight:700;font-size:var(--db-fs-small);color:var(--fg)}
.db-world-switcher__name span{color:var(--fg-muted);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .db-world,.db-world__layer,.db-world-swatch{transition:none}
}