/* ===== Immersive child WORLD + co-regulation studio ===== */
.world{position:relative;flex:1;min-height:100vh;overflow:hidden;background:linear-gradient(180deg,var(--w-top) 0%,var(--w-mid) 52%,var(--w-low) 100%)}
.world .sky-aurora{position:absolute;left:-10%;right:-10%;top:6%;height:34%;
  background:radial-gradient(60% 100% at 30% 50%,rgba(127,181,168,.20),transparent 70%),radial-gradient(60% 100% at 75% 40%,rgba(160,120,200,.18),transparent 70%);
  filter:blur(8px);animation:auroraDrift 26s ease-in-out infinite alternate}
@keyframes auroraDrift{from{transform:translateX(-3%)}to{transform:translateX(4%)}}
.world .moon{position:absolute;top:4%;left:6%;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fdf3da,#f3dca8);box-shadow:0 0 20px 4px rgba(255,240,200,.14);opacity:.8}
.world .stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.0;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
.world .hills{position:absolute;left:0;right:0;bottom:0;height:46%}
.world .hill{position:absolute;left:-5%;right:-5%;bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0}
.world .h1{height:52%;background:#34416b;filter:blur(.4px)}
.world .h2{height:40%;background:#2f5d54;left:-20%;right:30%}
.world .h3{height:34%;background:#274a44;left:35%;right:-20%}
.world .firefly{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--firefly);
  box-shadow:0 0 12px 3px rgba(255,227,154,.7);pointer-events:none;will-change:transform,opacity}
.world .ground{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,transparent,#1c2a26 70%)}

/* greeting + chrome */
.w-greet{position:absolute;top:7%;left:0;right:0;text-align:center;color:var(--cream);z-index:6;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.w-greet .os{font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.65;font-weight:700}
.w-greet h1{font-family:var(--disp);font-weight:500;font-size:34px;margin-top:6px}
.w-greet h1 em{color:#ffd9a0}
.w-grownup{position:absolute;top:18px;right:16px;z-index:8;background:rgba(20,14,34,.4);color:var(--cream);
  border:1px solid rgba(251,243,230,.22);padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;backdrop-filter:blur(6px)}
.w-brand{position:absolute;left:16px;bottom:14px;color:var(--cream);opacity:.5;font-size:11px;letter-spacing:1.2px;z-index:6;pointer-events:none}

/* interactive spots */
.spot{position:absolute;z-index:7;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--cream);
  background:none;transition:transform .25s var(--ease)}
.spot:hover,.spot:focus-visible{transform:translateY(-4px) scale(1.04)}
.spot .orb{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.32),rgba(255,255,255,.06));
  border:1.5px solid rgba(255,255,255,.28);box-shadow:0 8px 30px rgba(0,0,0,.3),inset 0 0 26px rgba(255,255,255,.12);backdrop-filter:blur(3px)}
.spot.pond .orb{background:radial-gradient(circle at 40% 35%,#bfe8e0,#3f7d8f);animation:bob 5s ease-in-out infinite}
.spot.help .orb{background:radial-gradient(circle at 40% 35%,#ffd9a0,#e07a45);box-shadow:0 0 34px 6px rgba(240,150,90,.5)}
.spot .cap{font-family:var(--disp);font-style:italic;font-size:16px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.companion{position:absolute;z-index:7;width:120px;height:120px;animation:bob 6s ease-in-out infinite}

/* ===== co-regulation studio ===== */
.studio{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 1s ease;
  background:radial-gradient(120% 120% at 50% 38%,#3a2c5c 0%,#160f28 72%)}
.studio.on{opacity:1;pointer-events:auto}
.studio .halo{position:absolute;top:33%;left:50%;width:44vmin;height:44vmin;margin:-22vmin 0 0 -22vmin;border-radius:50%;will-change:transform;
  background:radial-gradient(circle at 50% 45%,#ffe6b0 0%,#ffbf7d 28%,rgba(214,123,160,.5) 58%,rgba(126,95,176,0) 76%);filter:blur(2px)}
.studio .ring{position:absolute;top:33%;left:50%;width:44vmin;height:44vmin;margin:-22vmin 0 0 -22vmin;border-radius:50%;border:1.5px solid rgba(255,225,170,.45);will-change:transform,opacity}
.studio .core{position:absolute;top:33%;left:50%;width:9vmin;height:9vmin;margin:-4.5vmin 0 0 -4.5vmin;border-radius:50%;background:#fff8e8;will-change:transform;box-shadow:0 0 16vmin 6vmin rgba(255,221,150,.34)}
.studio .word{position:absolute;top:56%;left:0;right:0;text-align:center;font-family:var(--disp);font-style:italic;color:#fdeccb;font-size:clamp(26px,5.4vw,40px);text-shadow:0 2px 22px rgba(0,0,0,.4);transition:opacity .7s}
.studio .ctrls{position:absolute;top:18px;right:16px;display:flex;gap:9px}
.studio .gp{border:1.4px solid rgba(253,236,203,.4);background:rgba(20,14,34,.35);color:#fdeccb;font-weight:700;font-size:13.5px;
  padding:10px 16px;border-radius:999px;backdrop-filter:blur(6px);transition:.2s}
.studio .gp:hover{background:rgba(253,236,203,.16)} .studio .gp.on{background:rgba(253,236,203,.9);color:#5a3d2a}
.studio .ready{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);background:rgba(253,236,203,.94);color:#5a3d2a;
  font-weight:800;font-size:16px;padding:15px 30px;border-radius:999px;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .9s ease 1.3s}
.studio.on .ready{opacity:1}
.studio .pick{position:absolute;bottom:15%;left:0;right:0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 16px}
.studio .pk{border:1.4px solid rgba(253,236,203,.35);background:rgba(20,14,34,.3);color:#fdeccb;font-weight:700;font-size:13px;padding:9px 15px;border-radius:999px;transition:.2s}
.studio .pk.on{background:rgba(253,236,203,.86);color:#5a3d2a;border-color:transparent}

/* worry-to-the-moon */
.worrysky{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.worrybubble{background:rgba(251,243,230,.14);border:1px solid rgba(251,243,230,.28);color:var(--cream);padding:13px 20px;border-radius:99px;font-size:16px;animation:floatUp 5.5s ease-in forwards}
@keyframes floatUp{0%{transform:translateY(40px) scale(1);opacity:1}100%{transform:translateY(-90px) scale(.35);opacity:.15}}

/* visual (Time-Timer style) countdown */
.vtimer{width:148px;height:148px;border-radius:50%;border:3px solid rgba(251,243,230,.22);background:conic-gradient(#F0A25E 360deg, rgba(251,243,230,.12) 0);display:flex;align-items:center;justify-content:center;margin:10px auto;box-shadow:0 10px 34px rgba(0,0,0,.28)}
.vtimer span{background:rgba(20,14,34,.5);border-radius:99px;padding:7px 14px;color:var(--cream);font-weight:800;font-size:18px;backdrop-filter:blur(4px)}