@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap');
/* Jigglyzoo TV anime layer: golden-hour (light) and night-sky (dark) palettes,
   a twilight sky, Hoshi and Pico, and pointer-driven 3D depth. Loads after style.css. */

/* ---------- palette ---------- */
:root[data-theme="light"]{--bg:#e6f2ff;--surface:rgba(255,255,255,.8);--surface2:#fff;--surface3:#f2f6ff;--line:rgba(110,130,200,.2);--line2:rgba(110,130,200,.36);--text:#2b3562;--text2:#434f7d;--muted:#6a739c;--dim:#9aa2c6;--glass:rgba(255,255,255,.6);--shadow:0 20px 48px rgba(100,120,200,.2);--shadow-sm:0 12px 28px rgba(100,120,200,.2);--grad-ink:#2b3562}
:root[data-accent="cotton"]{--a1:#a9cdff;--a2:#ffb8d2;--a3:#d2c2ff;--a1-rgb:169,205,255;--a2-rgb:255,184,210;--a3-rgb:210,194,255}
:root[data-theme="light"][data-accent="cotton"]{--t1:#3f7be8;--t2:#ea5f8f;--t3:#7f63ea;--tx:#4a68d8;--tx-rgb:74,104,216}
:root[data-theme="dark"]{--bg:#070a1f;--surface:#121837;--surface2:#171f45;--surface3:#1d2656;--line:#29336a;--line2:#3a4687;--text:#eef0ff;--text2:#c9cdee;--muted:#9ba3d2;--dim:#6d76a8;--glass:rgba(16,21,50,.62);--shadow:0 20px 50px rgba(0,0,20,.45);--shadow-sm:0 12px 30px rgba(0,0,20,.4)}

/* ---------- type ---------- */
h1,h2,h3,.splash-name,.stat b{font-family:'Zen Maru Gothic',system-ui,sans-serif}
h1{letter-spacing:-.8px;font-weight:900}

/* ---------- retire the old backdrop and planet ---------- */
body::before,.bg-canvas,.bubbles,.cursor-glow,.planet,.orbit{display:none!important}

/* ---------- twilight sky ---------- */
.sky{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#8fc8ff 0%,#c4e4ff 36%,#f8e6f4 68%,#ffd5c2 100%);transition:background .6s}
:root[data-theme="dark"] .sky{background:linear-gradient(180deg,#040720 0%,#0c1440 42%,#262063 74%,#56357a 100%)}
.sky i{position:absolute;display:block}
.cloud{height:60px;border-radius:999px;background:rgba(255,255,255,.8);filter:blur(9px);box-shadow:70px 12px 0 -6px rgba(255,255,255,.75),-54px 16px 0 -8px rgba(255,255,255,.7);animation:drift var(--t,90s) linear infinite;animation-delay:var(--o,0s)}
.c0{width:300px;top:10%;left:0;--t:110s;--o:-40s}
.c1{width:220px;top:28%;left:0;--t:80s;--o:-10s}
.c2{width:340px;top:46%;left:0;--t:130s;--o:-70s}
.c3{width:180px;top:6%;left:0;--t:70s;--o:-30s;opacity:.7}
:root[data-theme="dark"] .cloud{background:rgba(140,130,230,.16);box-shadow:70px 12px 0 -6px rgba(140,130,230,.14),-54px 16px 0 -8px rgba(140,130,230,.12)}
@keyframes drift{from{transform:translateX(-45vw)}to{transform:translateX(115vw)}}
.star{display:none;background:#fff;border-radius:50%;width:var(--s);height:var(--s);box-shadow:0 0 6px #fff;animation:twinkle var(--d) ease-in-out var(--o) infinite}
.city{display:none;width:5px;height:5px;border-radius:50%;background:#ffd98a;box-shadow:0 0 8px 2px rgba(255,205,120,.6);animation:twinkle var(--d) ease-in-out var(--o) infinite}
:root[data-theme="dark"] .star,:root[data-theme="dark"] .city{display:block}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:1}}
.glit{bottom:-40px;color:#fff;font-size:var(--sz,12px);line-height:1;text-shadow:0 0 10px var(--a2);opacity:0;animation:rise var(--d,14s) linear var(--o,0s) infinite}
:root[data-theme="dark"] .glit{color:#ffeab0;text-shadow:0 0 10px #ffd27a}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.9}85%{opacity:.7}100%{transform:translateY(-118vh) rotate(160deg);opacity:0}}
.comet{top:4%;left:0;width:200px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 75%,#fff4cf);box-shadow:0 0 14px 2px rgba(255,236,190,.8);transform:rotate(20deg);opacity:0;animation:comet 10s linear infinite 4s}
@keyframes comet{0%{opacity:0;translate:-25vw -8vh}4%{opacity:1}13%{opacity:0;translate:115vw 30vh}100%{opacity:0;translate:115vw 30vh}}

/* ---------- hero: Hoshi and Pico ---------- */
.hero-art{width:300px;height:300px;flex:0 0 300px;margin-right:0;animation:none}
.hoshi-stage{position:absolute;inset:0;z-index:2}
.hero-art .float-pill{z-index:4}
.hoshi-stage.hop{animation:hop .7s var(--spring)}
.hoshi-stage::after{content:"";position:absolute;left:78px;top:284px;width:150px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,50,120,.3),transparent);animation:shadowPulse 4.6s ease-in-out infinite}
.hoshi-bob{position:absolute;left:30px;top:0;width:240px;height:290px;perspective:800px;animation:bob 4.6s ease-in-out infinite}
.hoshi{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.hl{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.l-body{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.l-back{transform:translateZ(-22px)}.l-body{transform:translateZ(0)}.l-head{transform:translateZ(8px)}.l-front{transform:translateZ(28px)}.l-tv{transform:translateZ(44px)}
.eye-track{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .2s ease-out}
.blink,.pblink{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
.ahoge{transform-box:fill-box;transform-origin:0% 100%;animation:sway 3.4s ease-in-out infinite}
.clip{transform-box:fill-box;transform-origin:center;animation:clip 2.6s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,214,107,.9))}
.pico{position:absolute;left:0;top:24px;width:80px;height:80px;z-index:3;animation:picoFloat 4s ease-in-out infinite}
.pico svg{width:100%;height:100%;overflow:visible}
.heart{position:absolute;color:#ff7aa8;font-size:18px;pointer-events:none;animation:heartUp 1.4s ease-out forwards}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes shadowPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.82);opacity:.55}}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-22px) rotate(-2deg)}60%{transform:translateY(0) rotate(1.5deg)}80%{transform:translateY(-4px)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes sway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
@keyframes clip{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.14)}}
@keyframes picoFloat{0%,100%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(6px,-14px) rotate(4deg)}}
@keyframes heartUp{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0px),-90px) scale(1.2)}}

/* ---------- channel cards: glass with real depth ---------- */
.channel{border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.8));box-shadow:0 10px 26px rgba(100,120,200,.16);transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
:root[data-theme="dark"] .channel{background:linear-gradient(160deg,rgba(32,40,92,.92),rgba(18,24,62,.9))}
.channel:hover{box-shadow:0 18px 36px rgba(100,120,200,.26)}
.channel .logo{transform:translateZ(16px)}

/* ---------- trail sparkles on pointer move ---------- */
.trail{position:fixed;z-index:70;pointer-events:none;font-size:11px;color:#fff;text-shadow:0 0 8px var(--a1),0 0 3px var(--a2);translate:-50% -50%;animation:trail .9s ease-out forwards}
@keyframes trail{to{opacity:0;scale:.3;rotate:90deg;translate:-50% -90%}}

/* ---------- phones: show the mascot above the copy ---------- */
@media(max-width:640px){
  .hero{flex-direction:column;align-items:flex-start}
  .hero-art{display:block;order:-1;width:250px;height:250px;flex-basis:250px;margin:0 0 -30px -8px}
  .hoshi-stage{zoom:.8}
  .top-actions{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .top-actions::-webkit-scrollbar{display:none}
}

/* ---------- animation levels and reduced motion ---------- */
:root[data-fx="off"] .sky *,:root[data-fx="off"] .hoshi-stage,:root[data-fx="off"] .hoshi-stage *,:root[data-fx="off"] .pico,:root[data-fx="off"] .pico *{animation:none!important}
:root[data-fx="calm"] .comet,:root[data-fx="calm"] .glit{display:none}
@media(prefers-reduced-motion:reduce){
  .sky *,.hoshi-stage,.hoshi-stage *,.pico,.pico *,.heart,.trail{animation:none!important}
  .comet,.glit{display:none}
  .hoshi{transition:none}
}