/* ==========================================================================
   SagaSphere sky (2026-10-07): the grown-up garden follows the real weather and time.
   body.sky-day | sky-rain | sky-night | sky-storm  (+ sky-dark for night and storm)
   set by the server from weather.js; sky.js keeps it current. Preview: add ?sky=night
   ========================================================================== */

/* ---------- backgrounds ---------- */
html body.sky-rain:not(.kids-body)::before{background:url(/static/css/art/garden-rain.svg) center bottom/cover no-repeat,#cfd6dc}
html body.sky-night:not(.kids-body)::before{background:url(/static/css/art/garden-night.svg?v=2) center bottom/cover no-repeat,#0b1230}
html body.sky-storm:not(.kids-body)::before{background:url(/static/css/art/garden-storm.svg?v=2) center bottom/cover no-repeat,#0a0f1f}
html body.sky-rain:not(.kids-body)::after{filter:saturate(.7) brightness(.95)}
html body.sky-dark:not(.kids-body)::after{
  background:url(/static/css/art/glow-left.svg?v=2) left bottom/auto 100% no-repeat,url(/static/css/art/glow-right.svg?v=2) right bottom/auto 100% no-repeat}
html body.sky-storm:not(.kids-body)::after{opacity:.7}
html body:not(.kids-body){transition:background-color 1s}

/* ---------- moving layer: petals by day, fireflies at night, rain when it rains ---------- */
body.sky-night .fireflies i{width:5px;height:5px;border-radius:50%;background:#eaff9a;box-shadow:0 0 10px 4px rgba(214,255,140,.55);
  top:auto;bottom:-2%;animation:firefly-up 16s ease-in-out infinite}
body.sky-night .fireflies i:nth-child(3n){background:#9ff7ea;box-shadow:0 0 10px 4px rgba(127,246,230,.5)}
body.sky-night .fireflies i:nth-child(4n){background:#ffb3df;box-shadow:0 0 10px 4px rgba(255,154,213,.45)}
@keyframes firefly-up{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}35%{transform:translate(30px,-22vh)}60%{opacity:.5;transform:translate(-25px,-40vh)}
  80%{opacity:.85}100%{opacity:0;transform:translate(15px,-60vh)}}
body.sky-rain .fireflies i,body.sky-storm .fireflies i{display:none}
body.sky-rain .fireflies::before,body.sky-storm .fireflies::before{content:"";position:absolute;inset:-20% -10%;
  background-image:
    repeating-linear-gradient(103deg,transparent 0 22px,rgba(255,255,255,.0) 22px 23px,transparent 23px 61px),
    linear-gradient(transparent,transparent);
  background:
    repeating-linear-gradient(100deg,transparent 0 37px,rgba(170,190,210,.35) 37px 38px,transparent 38px 79px),
    repeating-linear-gradient(100deg,transparent 0 53px,rgba(170,190,210,.25) 53px 54px,transparent 54px 121px);
  background-size:100% 140px,100% 220px;animation:rain .55s linear infinite}
body.sky-storm .fireflies::before{
  background:
    repeating-linear-gradient(98deg,transparent 0 31px,rgba(190,210,235,.28) 31px 32px,transparent 32px 70px),
    repeating-linear-gradient(98deg,transparent 0 47px,rgba(190,210,235,.18) 47px 48px,transparent 48px 109px);
  background-size:100% 120px,100% 200px;animation:rain .42s linear infinite}
@keyframes rain{from{background-position:0 0,0 0}to{background-position:-24px 140px,-36px 220px}}
/* gentle, occasional lightning: a soft glow in the sky, never a strobe */
body.sky-storm .fireflies::after{content:"";position:absolute;inset:0 0 45% 0;
  background:radial-gradient(60% 80% at 70% 10%,rgba(210,225,255,.55),transparent 70%);opacity:0;animation:lightning 17s ease-out infinite}
@keyframes lightning{0%,86%,100%{opacity:0}87%{opacity:.75}88.5%{opacity:.15}90%{opacity:.5}93%{opacity:0}}
@media (prefers-reduced-motion:reduce){body .fireflies::before,body .fireflies::after{animation:none}body.sky-storm .fireflies::after{display:none}}

/* ---------- rainy day: cooler, softer light ---------- */
html body.sky-rain:not(.kids-body) .card,html body.sky-rain:not(.kids-body) .home-tiles a{background:rgba(250,251,252,.74)}
html body.sky-rain:not(.kids-body) .top{background:rgba(246,248,250,.78)}

/* ---------- night + storm: dark glass, moonlit text ---------- */
html body.sky-dark:not(.kids-body){--ink:#e9eef5;--mut:#aab6c6;--line:rgba(190,210,235,.16);color:var(--ink)}
html body.sky-dark:not(.kids-body) .top{background:rgba(12,18,40,.62);border-bottom-color:rgba(190,210,235,.12);box-shadow:none}
html body.sky-dark:not(.kids-body) .navlink{color:#c9d3e2}
html body.sky-dark:not(.kids-body) .navlink.on,html body.sky-dark:not(.kids-body) .navlink:hover,
html body.sky-dark:not(.kids-body) .nav-kids:hover{background:rgba(127,246,230,.14);color:#fff}
html body.sky-dark:not(.kids-body) .nav-kids{color:#c9d3e2}
html body.sky-dark:not(.kids-body) .card,html body.sky-dark:not(.kids-body) .login-card,html body.sky-dark:not(.kids-body) .home-tiles a{
  background:rgba(14,20,42,.6);border-color:rgba(190,210,235,.14);color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.35)}
html body.sky-dark:not(.kids-body) .home-tiles a{color:#e9eef5 !important}
html body.sky-dark:not(.kids-body) .home-tiles .ht-i{background:rgba(127,246,230,.12) !important}
html body.sky-dark:not(.kids-body) h1,html body.sky-dark:not(.kids-body) h2,html body.sky-dark:not(.kids-body) h3{color:#eef3fa}
html body.sky-dark:not(.kids-body) .sub{color:var(--mut)}
html body.sky-dark:not(.kids-body) a:not(.btn):not(.navlink):not(.brand):not(.chip){color:#9ff0e2}
html body.sky-dark:not(.kids-body) .btn{background:#6fbfb0;color:#06201c;box-shadow:0 0 18px rgba(111,191,176,.25)}
html body.sky-dark:not(.kids-body) .btn:hover{background:#86d3c4}
html body.sky-dark:not(.kids-body) .btn.ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(190,210,235,.22)}
html body.sky-dark:not(.kids-body) input,html body.sky-dark:not(.kids-body) select,html body.sky-dark:not(.kids-body) textarea,
html body.sky-dark:not(.kids-body) .deny-note{background:rgba(6,10,24,.55);color:var(--ink);border-color:rgba(190,210,235,.2)}
html body.sky-dark:not(.kids-body) .chip{background:rgba(255,255,255,.07);color:#c9d3e2}
html body.sky-dark:not(.kids-body) .chip.ok{background:rgba(127,246,230,.12);color:#9ff0e2}
html body.sky-dark:not(.kids-body) .chip.wait{background:rgba(255,224,138,.12);color:#ffe08a}
html body.sky-dark:not(.kids-body) .chip.no{background:rgba(255,154,213,.12);color:#ffb3df}
html body.sky-dark:not(.kids-body) .sch,html body.sky-dark:not(.kids-body) .mday,html body.sky-dark:not(.kids-body) .meal-chip,
html body.sky-dark:not(.kids-body) .dow-pick label,html body.sky-dark:not(.kids-body) .rcard img,html body.sky-dark:not(.kids-body) .rph{background:rgba(255,255,255,.05)}
html body.sky-dark:not(.kids-body) .sch-t{color:#aab6c6}
html body.sky-dark:not(.kids-body) .sch.ev,html body.sky-dark:not(.kids-body) .allday{background:rgba(255,154,213,.1);border-color:rgba(255,154,213,.28);color:#ffd3ea}
html body.sky-dark:not(.kids-body) .who{background:rgba(127,246,230,.12);color:#9ff0e2}
html body.sky-dark:not(.kids-body) .bar{background:rgba(255,255,255,.08)}
html body.sky-dark:not(.kids-body) .mslot,html body.sky-dark:not(.kids-body) .ing li{border-color:rgba(190,210,235,.12)}
html body.sky-dark:not(.kids-body) .foot{color:#9aa6b8}
html body.sky-dark:not(.kids-body) .db-time{color:#f3f6fb;text-shadow:0 0 18px rgba(159,240,226,.25)}
html body.sky-dark:not(.kids-body) .db-hi,html body.sky-dark:not(.kids-body) .db-date{color:#c3cede}
html body.sky-dark:not(.kids-body) .db-temp{color:#f3f6fb}
html body.sky-dark:not(.kids-body) .db-more{color:#aab6c6}
html body.sky-dark:not(.kids-body) .db-more b{color:#ffb3df}
html body.sky-dark:not(.kids-body) .verse{background:linear-gradient(180deg,rgba(20,28,58,.75),rgba(14,20,42,.62)) !important}
html body.sky-dark:not(.kids-body) .verse::before{background:radial-gradient(90% 70% at 50% -10%,rgba(159,240,226,.14),transparent 65%)}
html body.sky-dark:not(.kids-body) .verse-t{color:#f1f4f9}
html body.sky-dark:not(.kids-body) .verse-k{color:#9aa6b8}
html body.sky-dark:not(.kids-body) .verse-r{color:#ffb3df}
html body.sky-dark:not(.kids-body) .lofi{background:rgba(12,18,40,.75);color:#d6deea;border-color:rgba(190,210,235,.18)}
html body.sky-dark:not(.kids-body) .lofi .eq b{background:#9ff0e2}
html body.sky-dark:not(.kids-body) .lofi.on .eq b:nth-child(2){background:#ffb3df}
.lofi .lofi-s{opacity:.7;font-weight:500}

/* ==========================================================================
   Glass everywhere (2026-10-07): no more white slabs. Panels are see-through
   frosted glass that follows the sky; text keeps a soft glow so it stays readable.
   ========================================================================== */
/* ---------- grown-up pages at night / in a storm ---------- */
html body.sky-dark:not(.kids-body){--card2:rgba(255,255,255,.05)}
html body.sky-dark:not(.kids-body) .cal td{background:rgba(255,255,255,.045);border-color:rgba(190,210,235,.12)}
html body.sky-dark:not(.kids-body) .cal td.blank{background:transparent;border-color:transparent}
html body.sky-dark:not(.kids-body) .cal td.today{background:rgba(127,246,230,.08);border-color:rgba(127,246,230,.35)}
html body.sky-dark:not(.kids-body) .cal .dnum{color:#c9d3e2}
html body.sky-dark:not(.kids-body) .cal th{color:#aab6c6}
html body.sky-dark:not(.kids-body) .cal .chip.wait{background:rgba(255,224,138,.16);color:#ffe7a8}
html body.sky-dark:not(.kids-body) .cal .chip.ok{background:rgba(127,246,230,.16);color:#b4fff1}
html body.sky-dark:not(.kids-body) .cal .chip.no{background:rgba(255,154,213,.14);color:#ffc2e4}
html body.sky-dark:not(.kids-body) .pend{background:rgba(255,255,255,.05);border-color:rgba(190,210,235,.14)}
html body.sky-dark:not(.kids-body) .pend-t{color:#eef3fa}
html body.sky-dark:not(.kids-body) .pend-when{color:#aab6c6}
html body.sky-dark:not(.kids-body) .pend input{background:rgba(6,10,24,.5);color:#e9eef5;border:1px solid rgba(190,210,235,.22)}
html body.sky-dark:not(.kids-body) .pend input::placeholder{color:#8794a8}
html body.sky-dark:not(.kids-body) .ep{background:rgba(255,255,255,.045);border-color:rgba(190,210,235,.12);box-shadow:none}
html body.sky-dark:not(.kids-body) .ep:hover{background:rgba(127,246,230,.09);border-color:rgba(127,246,230,.35)}
html body.sky-dark:not(.kids-body) .ep .ep-title{color:#e9eef5}
html body.sky-dark:not(.kids-body) .ep .ep-num{color:#9ff0e2}
html body.sky-dark:not(.kids-body) .ep .ep-play{color:#9ff0e2}
html body.sky-dark:not(.kids-body) .season-h,html body.sky-dark:not(.kids-body) .eps-h{color:#eef3fa;background:transparent}

/* ---------- Kids World: frosted glass that lets the painting through ---------- */
html body.kids-body{--g-bg:rgba(16,22,44,.40);--g-bg2:rgba(16,22,44,.30);--g-hi:rgba(255,248,230,.14);--g-line:rgba(255,248,230,.24);
  --g-ink:#fffaf0;--g-mut:#e9dfc8;--g-glow:0 0 6px rgba(10,15,30,.85),0 1px 2px rgba(0,0,0,.8)}
html body.kids-body.sky-day,html body.kids-body.sky-rain{--g-bg:rgba(40,46,60,.30);--g-bg2:rgba(40,46,60,.22);--g-hi:rgba(255,250,236,.18);--g-line:rgba(255,250,236,.45)}
html body.kids-body .show-head,html body.kids-body .lock-note,html body.kids-body .parent-unlock,html body.kids-body .season-h,
html body.kids-body .ep,html body.kids-body .juke-songs,html body.kids-body .track{
  background:var(--g-bg);border:1px solid var(--g-line);color:var(--g-ink);box-shadow:0 8px 24px rgba(10,15,30,.18);
  -webkit-backdrop-filter:blur(9px) saturate(1.15);backdrop-filter:blur(9px) saturate(1.15)}
html body.kids-body .ep,html body.kids-body .track{background:var(--g-bg2);box-shadow:none}
html body.kids-body .show-head *,html body.kids-body .lock-note,html body.kids-body .parent-unlock,html body.kids-body .season-h,
html body.kids-body .ep *,html body.kids-body .juke-songs *,html body.kids-body .eps-h{color:var(--g-ink);text-shadow:var(--g-glow)}
html body.kids-body .show-head .show-meta,html body.kids-body .show-head .sub,html body.kids-body .juke-songs small,
html body.kids-body .ep .ep-num,html body.kids-body .tr-n{color:var(--g-mut)}
html body.kids-body .ep:hover,html body.kids-body .ep:focus,html body.kids-body .ep.ss-focus,html body.kids-body .track:hover{background:var(--g-hi);border-color:#ffe7a8}
html body.kids-body .ep.up-next{background:var(--g-hi);border:2px solid #7dff9b;box-shadow:0 0 14px rgba(125,255,155,.35)}
html body.kids-body .ep.seen{background:var(--g-bg2)}
html body.kids-body .ep.locked{background:rgba(16,22,44,.18);opacity:.7}
html body.kids-body .ep-next{color:#0b2a12 !important;text-shadow:none !important;background:#7dff9b}
html body.kids-body .ep-done{color:#0b2a12 !important;text-shadow:none !important}
html body.kids-body .ep-play{color:#ffe7a8}
/* buttons inside the glass: soft glass pills, the main play button keeps its warm gold */
html body.kids-body .show-head .btn.ghost,html body.kids-body .parent-unlock .btn,html body.kids-body .parent-unlock button,
html body.kids-body .juke-songs .btn.ghost,html body.kids-body .juke-songs button:not(.track):not([data-q]){
  background:rgba(255,248,230,.12);border:1px solid var(--g-line);color:var(--g-ink);box-shadow:none;text-shadow:var(--g-glow)}
html body.kids-body .show-head .btn:not(.ghost),html body.kids-body .juke-songs .btn[data-q]:not(.ghost){color:#3a2a1a;text-shadow:none}
html body.kids-body .show-head .btn:not(.ghost) *{color:#3a2a1a;text-shadow:none}
html body.kids-body .juke-songs [data-q]:not(.track):not(.btn){background:rgba(255,248,230,.14);border:1px solid var(--g-line);color:var(--g-ink)}
html body.kids-body .show-poster{box-shadow:0 8px 22px rgba(10,15,30,.4)}
/* little pills: Big kids only / back to the door / all shows */
html body.kids-body .kids-back,html body.kids-body .door-smooth{background:rgba(16,22,44,.30) !important;border:1px solid var(--g-line) !important;
  color:#fffaf0 !important;text-shadow:var(--g-glow) !important;box-shadow:none !important;outline:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* calendar badge: soft gold like the "waiting" chips, and it's a link to the approvals box */
html body:not(.kids-body) .badge{background:#f2c46d;color:#3a2a10 !important;text-decoration:none;box-shadow:0 0 10px rgba(242,196,109,.45);text-shadow:none}
html body:not(.kids-body) .badge:hover{background:#ffd88a}
#say-so{scroll-margin-top:90px}

/* golden notification bell (replaces the number badge) */
html body .top .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  margin-left:.25rem;flex:0 0 auto;text-decoration:none;transition:transform .2s}
html body .top .bell svg{width:26px;height:26px;fill:url(#none);fill:#e9b949;filter:drop-shadow(0 0 4px rgba(233,185,73,.55)) drop-shadow(0 1px 1px rgba(90,60,10,.5))}
html body .top .bell:not(.has) svg{opacity:.55;filter:none}
html body .top .bell.has svg{animation:bell-ring 6s ease-in-out infinite;transform-origin:50% 12%}
html body .top .bell:hover{transform:scale(1.08)}
html body .top .bell b{position:absolute;top:2px;right:1px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#fff3d0;color:#5a3c0a;
  font:800 .72rem/18px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #e9b949,0 0 8px rgba(233,185,73,.6)}
@keyframes bell-ring{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(14deg)}92%{transform:rotate(-12deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-5deg)}98%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){html body .top .bell.has svg{animation:none}}

/* night accents (2026-10-07): jewel tones instead of mint and salmon */
html body.sky-dark:not(.kids-body) .btn:not(.ghost){background:linear-gradient(135deg,#6d4dff,#2f86ff);color:#fff;border:0;
  box-shadow:0 0 16px rgba(109,77,255,.35);text-shadow:0 1px 1px rgba(0,0,0,.25)}
html body.sky-dark:not(.kids-body) .btn:not(.ghost):hover{background:linear-gradient(135deg,#8063ff,#4a98ff)}
html body.sky-dark:not(.kids-body) .bar-fill{background:linear-gradient(90deg,#14c6e0,#7a5cff 55%,#d93aa0)}
html body.sky-dark:not(.kids-body) .bar-fill.over{background:linear-gradient(90deg,#d93aa0,#ee4a66)}
html body.sky-dark:not(.kids-body) .verse-r{color:#ffcf5a}
html body.sky-dark:not(.kids-body) .db-more b{color:#5fd8ff}
html body.sky-dark:not(.kids-body) .bud-left{color:#7fe8c8}
html body.sky-dark:not(.kids-body) .navlink.on{background:rgba(122,92,255,.22)}
html body.sky-dark:not(.kids-body) a:not(.btn):not(.navlink):not(.brand):not(.chip):not(.bell){color:#9fc4ff}

/* night: the painted enchanted meadow (2026-10-07) replaces the flat drawing */
html body.sky-night:not(.kids-body)::before{background:url(/static/css/art/garden-night.jpg?v=1) center bottom/cover no-repeat,#0b0f2e}
html body.sky-night:not(.kids-body)::after{background:none}

/* ==========================================================================
   Living scene (2026-10-07): photo-real backdrop per sky + gentle motion (public/js/alive.js)
   ========================================================================== */
html body.has-scene:not(.kids-body)::before,html body.has-scene:not(.kids-body)::after{display:none}
html body.has-scene .fireflies{display:none}
#scene{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:#0b0f2e}
body.sky-day #scene,body.sky-rain #scene{background:#cfd8de}
#scene .scene-img{position:absolute;inset:-3%;background:center bottom/cover no-repeat;transform-origin:50% 70%;
  animation:scene-drift 90s ease-in-out infinite alternate;transition:background-image 1.2s}
#scene canvas{position:absolute;inset:0;animation:scene-drift 90s ease-in-out infinite alternate;transform-origin:50% 70%}
@keyframes scene-drift{0%{transform:scale(1.02) translate(0,0)}50%{transform:scale(1.06) translate(-.6%,-.4%)}100%{transform:scale(1.04) translate(.6%,-.2%)}}
#scene .scene-aurora{position:absolute;left:-10%;right:-10%;top:0;height:48%;opacity:0;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(40% 60% at 30% 40%,rgba(80,255,190,.16),transparent 70%),radial-gradient(35% 55% at 70% 30%,rgba(170,110,255,.14),transparent 70%);
  filter:blur(18px)}
body.sky-night #scene .scene-aurora{opacity:1;animation:aurora 24s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translateX(-3%) scaleY(1);opacity:.55}50%{transform:translateX(2%) scaleY(1.12);opacity:1}100%{transform:translateX(4%) scaleY(.95);opacity:.7}}
#scene .scene-flash{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(70% 55% at 60% 12%,rgba(215,228,255,.55),rgba(215,228,255,.12) 55%,transparent 80%)}
#scene .scene-flash.go{animation:bolt 1.6s ease-out}
@keyframes bolt{0%{opacity:0}6%{opacity:.85}12%{opacity:.15}20%{opacity:.6}45%{opacity:.1}100%{opacity:0}}
/* a soft dark wash at the very top keeps the menu readable on bright skies */
#scene::after{content:"";position:absolute;inset:0 0 auto 0;height:140px;background:linear-gradient(rgba(10,14,30,.35),transparent)}
body.sky-day #scene::after,body.sky-rain #scene::after{background:linear-gradient(rgba(255,255,255,.25),transparent)}
body.scene-still #scene .scene-img,body.scene-still #scene canvas{animation:none}
@media (prefers-reduced-motion:reduce){#scene .scene-img,#scene canvas,#scene .scene-aurora{animation:none}}

/* sign-in card: the same glowing galaxy wordmark as the header, bigger */
html body .login-card .login-brand{display:flex;justify-content:center;white-space:nowrap;font-size:clamp(1.6rem,6vw,2.2rem);margin:.2rem 0 .6rem;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;filter:drop-shadow(0 0 10px rgba(140,110,255,.7)) drop-shadow(0 0 22px rgba(33,212,253,.25)) drop-shadow(0 1px 0 rgba(0,0,0,.35))}
html body .foot .foot-brand{display:inline-flex;font-size:1.05rem;letter-spacing:.6px;font-family:"Segoe UI",system-ui,sans-serif;
  filter:drop-shadow(0 0 8px rgba(140,110,255,.65)) drop-shadow(0 0 18px rgba(33,212,253,.2))}

/* Kids World living scene: the painted storybook meadow, same motion layers */
html body.kids-body.has-scene::before,html body.kids-body.has-scene::after{display:none}
body.kids-body #scene{background:#cfe0c4}
body.kids-body.sky-dark #scene{background:#13203d}
body.kids-body #scene::after{display:none}

/* living photo on the GPU: the WebGL canvas sits over the still picture and fades in once loaded */
#scene .scene-gl{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
body.scene-gl-on #scene .scene-img,body.scene-gl-on #scene canvas{animation:none}
body.scene-gl-on #scene .scene-aurora{display:none}

/* lightning strike: "Semancik Powered" crackles with electricity */
html body .foot .foot-brand.zap{animation:zap 1.6s ease-out}
@keyframes zap{
  0%{filter:drop-shadow(0 0 8px rgba(140,110,255,.65))}
  5%{filter:brightness(2.6) drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px #9fd8ff) drop-shadow(0 0 34px #7a5cff);transform:translate(1px,-1px)}
  9%{filter:brightness(1.2) drop-shadow(0 0 4px #9fd8ff);transform:translate(-1px,1px)}
  14%{filter:brightness(2.9) drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px #bfe6ff) drop-shadow(0 0 44px #8a6cff);transform:translate(1px,0)}
  20%{filter:brightness(1.5) drop-shadow(0 0 10px #9fd8ff) drop-shadow(0 0 24px #7a5cff);transform:none}
  28%{filter:brightness(2.2) drop-shadow(0 0 6px #fff) drop-shadow(0 0 20px #9fd8ff)}
  100%{filter:drop-shadow(0 0 8px rgba(140,110,255,.65)) drop-shadow(0 0 18px rgba(33,212,253,.2))}}
@media (prefers-reduced-motion:reduce){html body .foot .foot-brand.zap{animation-duration:.8s}}

/* lofi volume slider (next to the lofi button) */
.lofi-vol{position:fixed;left:14px;bottom:58px;z-index:40;width:118px;height:22px;accent-color:#8a6cff;opacity:.55;transition:opacity .3s;cursor:pointer;
  background:transparent}
.lofi-vol:hover,.lofi-vol:focus{opacity:1}
body:has(.tv) .lofi-vol,body:has(#tvvid) .lofi-vol{display:none}

/* ==========================================================================
   Clearer glass (2026-10-07): grown-up pages always use the see-through dark glass
   (day too), much lighter tint and blur so the living scene shows through; text glows.
   ========================================================================== */
html body.sky-dark:not(.kids-body) .top{background:rgba(12,18,40,.30);-webkit-backdrop-filter:blur(5px) saturate(1.2);backdrop-filter:blur(5px) saturate(1.2)}
html body.sky-dark:not(.kids-body) .card,html body.sky-dark:not(.kids-body) .login-card,html body.sky-dark:not(.kids-body) .home-tiles a{
  background:rgba(14,20,42,.32);border-color:rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(5px) saturate(1.2);backdrop-filter:blur(5px) saturate(1.2)}
html body.sky-day.sky-dark:not(.kids-body) .card,html body.sky-day.sky-dark:not(.kids-body) .home-tiles a,
html body.sky-rain.sky-dark:not(.kids-body) .card,html body.sky-rain.sky-dark:not(.kids-body) .home-tiles a{background:rgba(24,30,52,.28)}
html body.sky-dark:not(.kids-body) .verse{background:rgba(14,20,42,.34) !important}
html body.sky-dark:not(.kids-body) .card,html body.sky-dark:not(.kids-body) .home-tiles a,html body.sky-dark:not(.kids-body) .top .navlink,
html body.sky-dark:not(.kids-body) .verse{text-shadow:0 0 6px rgba(5,8,20,.85),0 1px 2px rgba(0,0,0,.7)}
html body.sky-dark:not(.kids-body) .navlink{color:#f1f4fa}
html body.sky-dark:not(.kids-body) .lofi{background:rgba(12,18,40,.45)}

/* ==========================================================================
   Crystal glass (2026-10-07b): barely tinted, almost no blur, so the living scene
   (rain ripples in the puddles, fireflies, aurora) stays visible behind every panel.
   ========================================================================== */
html body.sky-dark:not(.kids-body) .top{background:rgba(10,14,32,.16);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
html body.sky-dark:not(.kids-body) .card,html body.sky-dark:not(.kids-body) .login-card,html body.sky-dark:not(.kids-body) .home-tiles a,
html body.sky-day.sky-dark:not(.kids-body) .card,html body.sky-day.sky-dark:not(.kids-body) .home-tiles a,
html body.sky-rain.sky-dark:not(.kids-body) .card,html body.sky-rain.sky-dark:not(.kids-body) .home-tiles a{
  background:rgba(10,14,32,.14);border-color:rgba(255,255,255,.22);box-shadow:none;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
html body.sky-dark:not(.kids-body) .verse{background:rgba(10,14,32,.16) !important}
html body.sky-dark:not(.kids-body) .cal td,html body.sky-dark:not(.kids-body) .pend,html body.sky-dark:not(.kids-body) .ep{background:rgba(10,14,32,.10)}
html body.sky-dark:not(.kids-body) .card *,html body.sky-dark:not(.kids-body) .home-tiles a *,html body.sky-dark:not(.kids-body) .top .navlink,
html body.sky-dark:not(.kids-body) .verse *{text-shadow:0 0 4px rgba(0,0,0,.95),0 0 10px rgba(5,8,20,.8),0 1px 2px rgba(0,0,0,.9)}
/* Kids World: same crystal glass */
html body.kids-body{--g-bg:rgba(10,14,32,.18);--g-bg2:rgba(10,14,32,.12)}
html body.kids-body.sky-day,html body.kids-body.sky-rain{--g-bg:rgba(20,26,44,.16);--g-bg2:rgba(20,26,44,.10)}
html body.kids-body .show-head,html body.kids-body .lock-note,html body.kids-body .parent-unlock,html body.kids-body .season-h,
html body.kids-body .ep,html body.kids-body .juke-songs,html body.kids-body .track,html body.kids-body .kids-back,html body.kids-body .door-smooth{
  -webkit-backdrop-filter:blur(1.5px) !important;backdrop-filter:blur(1.5px) !important}
/* Jukebox: open show panel is crystal glass; songs are bright, clearly tappable glass buttons (never look "locked") */
html body.kids-body .juke-show[open]{background:rgba(10,14,32,.22);border:1px solid rgba(255,248,230,.3);box-shadow:none;
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
html body.kids-body .juke-show[open] .juke-songs{background:none;border:0;box-shadow:none}
html body.kids-body .juke-songs-h h2,html body.kids-body .album-h{color:#fffaf0;text-shadow:0 0 4px rgba(0,0,0,.95),0 0 10px rgba(5,8,20,.8)}
html body.kids-body .track{background:rgba(255,248,230,.16);border:1px solid rgba(255,248,230,.45);color:#fffaf0;opacity:1;cursor:pointer}
html body.kids-body .track .tr-t{color:#fffaf0;text-shadow:0 0 4px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.9)}
html body.kids-body .track .tr-n{color:#ffe7a8}
html body.kids-body .track .tr-p{color:#3a2a10;background:#ffd23f;border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;text-shadow:none;flex:none}
html body.kids-body .track:hover,html body.kids-body .track.ss-focus{background:rgba(255,231,168,.35);border-color:#ffe7a8}
html body.kids-body .track.playing{background:#ffd23f;border-color:#ffd23f}
html body.kids-body .track.playing .tr-t,html body.kids-body .track.playing .tr-n{color:#2a1d08;text-shadow:none}
/* Lofi / radio dock: the button and its volume slider sit side by side in one bar (no more overlapping on phones) */
.lofi-dock{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 28px)}
.lofi-dock .lofi,.lofi-dock .lofi-vol{position:static !important;left:auto !important;bottom:auto !important}
.lofi-dock .lofi{min-width:0;max-width:62vw}
.lofi-dock .lofi .lofi-l{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lofi-dock .lofi-vol{width:96px;flex:none;opacity:.7}
.lofi-rx{flex:none;border:1px solid rgba(190,210,235,.3);background:rgba(12,18,40,.55);color:#e6ecf5;border-radius:999px;padding:.32rem .7rem;font:inherit;font-size:.8rem;cursor:pointer;backdrop-filter:blur(4px)}
body:not(.sky-dark) .lofi-rx{background:rgba(255,255,255,.75);color:#3a3a3a;border-color:rgba(0,0,0,.12)}
body.has-mp .lofi-dock{bottom:calc(96px + env(safe-area-inset-bottom))}
body:has(.tv) .lofi-dock,body:has(#tvvid) .lofi-dock{display:none}
@media (max-width:600px){.lofi-dock{left:10px;gap:6px}.lofi-dock .lofi-vol{width:70px}.lofi-dock .lofi{max-width:52vw}}
body:not(.kids-body) main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
/* Zen space palette for the grown-up pages (Grecia: calmer, fewer colors): jade, sage and soft teal accents */
html body:not(.kids-body) .btn:not(.ghost),html body.sky-dark:not(.kids-body) .btn:not(.ghost){background:linear-gradient(135deg,#3f9f86,#2b7f86) !important;color:#f2fff9 !important;box-shadow:0 0 16px rgba(80,190,160,.25) !important;border:0}
html body:not(.kids-body) .btn:not(.ghost):hover,html body.sky-dark:not(.kids-body) .btn:not(.ghost):hover{background:linear-gradient(135deg,#4cb397,#33939a) !important}
html body.sky-dark:not(.kids-body) a:not(.btn):not(.navlink):not(.brand):not(.chip):not(.bell){color:#9fe8cf}
html body:not(.kids-body) .top .brand,html body .foot .foot-brand{background:linear-gradient(100deg,#bff5dc 0%,#6fd3b0 35%,#3aa6a0 65%,#c9f7e6 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;filter:drop-shadow(0 0 8px rgba(90,210,170,.45)) !important}
html body:not(.kids-body) .navlink.on{background:rgba(110,210,175,.22) !important;color:#e9fff6 !important}
html body:not(.kids-body) .bell.has b{background:#3f9f86}

/* speed (2026-10-13): the living scene (alive.js) paints the background, so don't also download the CSS fallback picture */
html.js-scene body.kids-body::before,html.js-scene body:not(.kids-body)::before{background-image:none !important}

/* the family TV's other apps on the SagaSphere home screen (only shown inside the TV app) */
.home-apps{margin:1.2rem auto 0;max-width:1100px}
.home-apps-h{margin:.2rem 0 .7rem;font-size:1.05rem;color:#e6f3ec}
.home-apps-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}
.home-apps .tvapp{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.55rem;border-radius:14px;cursor:pointer;
  background:rgba(10,20,24,.45);border:1px solid rgba(220,255,240,.25);color:#f3fbf7;font:inherit;font-size:.9rem}
.home-apps .tvapp img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:9px;background:rgba(0,0,0,.25)}
.home-apps .tvapp img.icon{padding:12px}
.home-apps .tvapp-i{width:100%;aspect-ratio:16/9;display:grid;place-items:center;font-size:2.2rem;border-radius:9px;background:rgba(0,0,0,.25)}
.home-apps .tvapp-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}