/* ——— The open look (js/theme.js setOpen) ———
   Before a world is picked ("Who's playing?", "Make your player", the Castle
   Key) the page belongs to neither world: a sunny sky and a rainbow, with
   nothing in it that's pink or blue on purpose. It sets every color the worlds
   change, so it looks the same whichever world the last player was in; picking
   a world on "Make your player" turns it off and the page becomes that world.
   Loaded after town.css so it wins over html[data-theme="town"]. */

html[data-stage='open'] {
  --ink: #4a2a5c;
  --ink-soft: #82639a;
  --outline: #5b3a6e;
  --pink: #ff8a3d;
  --pink-deep: #e86a1a;
  --pink-soft: #ffe8d4;
  --lilac: #a07cf5;
  --lilac-deep: #7d58d6;
  --lilac-soft: #efe6ff;
  --mint: #3ccaa2;
  --mint-deep: #22a37f;
  --sky: #6fbfff;
  --shadow: 0 12px 30px rgba(110, 90, 150, 0.16);
}
html[data-stage='open'] body { background: #fff6d6; }
html[data-stage='open'] .sky { background: linear-gradient(180deg, #fff3cc 0%, #e4f4ff 50%, #e2f7e7 100%); }
html[data-stage='open'] .sky-rainbow { display: block; }
html[data-stage='open'] .cloud { filter: drop-shadow(0 6px 0 rgba(140, 180, 215, 0.3)); }
html[data-stage='open'] .floater { opacity: 0.4; }

/* The few pinks on "Make your player" that are colors, not the --pink variable. */
html[data-stage='open'] .name-input:focus { box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.18); }
html[data-stage='open'] .avatar-choice { box-shadow: 0 4px 0 #e6e0ee; }