/* Shared look for all Naela games: night sky, top bar with Pip, planet picker, rocket track, buttons, effects, motion. */
:root{
  --space:#141a3d;
  --window:#1d2456;
  --glass:rgba(255,255,255,.08);
  --glass-2:rgba(255,255,255,.18);
  --text:#ffffff;
  --muted:#aab1e0;
  --card:#f7f8ff;
  --ink:#1c2147;
  --hover:#e4e8ff;
  --heard:#c9f2db;
  --syl-a:#1f5bd8;
  --syl-b:#d6322e;
  --yes:#26a463;
  --yes-dark:#18774a;
  --silly:#8b5cf6;
  --silly-dark:#6435c9;
  --sun:#ffc94a;
  --sun-dark:#c98f12;
  --sun-soft:#ffe9ad;
  --de-a:#ffd77a; --de-b:#f08a3c;
  --fr-a:#7fe3d0; --fr-b:#2f8fb8;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --read:"Andika","Comic Sans MS",system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--space);color:var(--text);font-family:var(--display);margin:0;overflow-x:hidden}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.app{position:relative;z-index:1;min-height:100%;max-width:1100px;margin:0 auto;padding-inline:16px;box-sizing:border-box;display:flex;flex-direction:column}
button{font-family:var(--display)}
button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* Top bar with Pip */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:10px}
.left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 420px}
.right{display:flex;align-items:center;gap:10px}
.round{width:46px;height:46px;flex:none;border-radius:50%;border:0;background:var(--glass);color:var(--text);font-size:22px;cursor:pointer;display:grid;place-items:center}
.round:hover{background:var(--glass-2)}
.pip{width:78px;height:86px;flex:none;background:none;border:0;padding:0;cursor:pointer}
.pip svg{width:100%;height:100%;overflow:visible;display:block}
.pip.cheer svg{animation:jump .5s ease-out 2}
.pip.oops svg{animation:tilt .7s ease-in-out}
.bubble{position:relative;background:#fff;color:var(--ink);font-size:clamp(16px,1.9vw,21px);font-weight:500;line-height:1.3;padding:10px 16px;border-radius:18px;max-width:440px;min-width:0;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.22)}
.bubble::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-10px;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #fff transparent transparent}
.bubble.pop{animation:bubblepop .4s cubic-bezier(.3,1.6,.5,1)}

main{flex:1;display:flex}
.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding-block:6px 32px;text-align:center}

/* Start */
h1{font-size:clamp(38px,6.4vw,68px);font-weight:700;line-height:1.05;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:var(--sun)}
.sub{margin:-10px 0 0;font-size:clamp(18px,2.4vw,24px);color:var(--muted);font-weight:500}
.planets{display:flex;gap:clamp(24px,7vw,80px);flex-wrap:wrap;justify-content:center}
.planet{background:none;border:0;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:28px}
.orb{width:clamp(130px,19vw,186px);max-width:100%;aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1);animation:float 3s ease-in-out infinite alternate}
.planet.fr .orb{animation-delay:-1.5s}
.orb svg{width:62%;height:62%;overflow:visible}
.planet.de .orb{background:radial-gradient(circle at 34% 30%,var(--de-a),var(--de-b) 72%);box-shadow:inset -16px -14px 0 rgba(0,0,0,.16),0 0 48px rgba(240,138,60,.35)}
.planet.fr .orb{background:radial-gradient(circle at 34% 30%,var(--fr-a),var(--fr-b) 72%);box-shadow:inset -16px -14px 0 rgba(0,0,0,.16),0 0 48px rgba(47,143,184,.4)}
.planet:hover .orb{transform:scale(1.08) rotate(-6deg)}
.pname{font-size:30px;font-weight:600}
.flag{display:inline-flex;gap:3px;vertical-align:middle;margin-right:8px}
.flag i{display:block;width:8px;height:18px;border-radius:2px}
.opts{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.pill{text-decoration:none;background:var(--glass);color:var(--text);border:0;border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer}
.pill:hover{background:var(--glass-2)}

/* Rocket track */
.track{position:relative;width:min(420px,100%);height:44px;flex:none}
.track .line{position:absolute;left:18px;right:18px;top:50%;border-top:3px dashed var(--glass-2)}
.stops{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}
.stop{width:22px;height:22px;margin-inline:7px;border-radius:50%;background:var(--window);border:3px solid var(--glass-2);box-sizing:border-box;transition:background .4s,border-color .4s}
.stop.done{background:var(--sun);border-color:var(--sun)}
.trocket{position:absolute;top:50%;width:60px;height:40px;margin:-20px 0 0 -30px;transition:left .9s cubic-bezier(.5,0,.3,1)}
.trocket svg{width:100%;height:100%;overflow:visible}

.big{font-size:clamp(22px,2.8vw,30px);font-weight:700;border:0;border-radius:999px;padding:16px 36px;cursor:pointer;color:#fff;box-shadow:0 6px 0 var(--shade);transition:transform .1s,box-shadow .1s}
.big:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--shade)}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--shade)}
.next{background:var(--sun);color:var(--ink);--shade:var(--sun-dark)}
.next.go{animation:beckon 1.2s ease-in-out infinite}
.ghost{background:var(--glass-2);--shade:rgba(0,0,0,.3)}
.shake{animation:shake .45s}

h2{font-size:clamp(36px,5.6vw,60px);margin:0;color:var(--sun);text-wrap:balance}

.row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}

/* Effects */
.hand{position:fixed;z-index:70;font-size:52px;line-height:1;margin-left:-20px;pointer-events:none;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35));animation:tap .8s ease-in-out infinite}
.confetti{position:fixed;width:10px;height:14px;border-radius:3px;z-index:50;pointer-events:none;animation:confetti 1.3s cubic-bezier(.2,.7,.4,1) forwards}

/* Illustration motion. Animated groups never carry a transform attribute. */
.mv-fly,.bob,.wobble,.flame,.mv-ride,.bumpy,.wheel,.mv-eat,.mouth,.munch,.ear-l,.ear-r,.sway,.tail,.popin,.zz,.breathe,.spin-slow,.page,.twinkle,.blink,.mouth-talk,.glow,.arm-r,.qmark{transform-box:fill-box;transform-origin:center}
.mv-fly{animation:fly 2.6s ease-in-out forwards}
.bob{animation:bob 1s ease-in-out infinite alternate}
.wobble{animation:wobble .6s ease-in-out infinite alternate}
.flame{transform-origin:50% 0 !important;animation:flicker .14s linear infinite alternate}
.mv-ride{animation:ride 3.6s linear infinite}
.bumpy{animation:bumpy .3s ease-in-out infinite alternate}
.wheel{animation:spin .6s linear infinite}
.mv-eat{animation:eatstar 2s ease-in forwards}
.mouth{animation:chomp .2s ease-in-out 1.1s 8 alternate}
.munch{transform-origin:50% 100% !important;animation:munch .25s ease-in-out 1.35s 6 alternate}
.ear-l{transform-origin:50% 100% !important;animation:earL .45s ease-in-out infinite alternate}
.ear-r{transform-origin:50% 100% !important;animation:earR .45s ease-in-out infinite alternate}
.sway{transform-origin:50% 100% !important;animation:sway 1.3s ease-in-out infinite alternate}
.tail{transform-origin:0% 100% !important;animation:sway .8s ease-in-out infinite alternate}
.popin{transform-origin:20% 100% !important;animation:popin .5s cubic-bezier(.3,1.6,.5,1) .4s backwards}
.zz{opacity:0;animation:zz 2.4s ease-in infinite}
.breathe{transform-origin:50% 100% !important;animation:breathe 1.6s ease-in-out infinite alternate}
.spin-slow{animation:spin 9s linear infinite}
.page{transform-origin:0% 50% !important;animation:flip 2s ease-in-out infinite}
.twinkle{animation:twinkle 1.2s ease-in-out infinite alternate}
.blink{animation:blink 4s ease-in-out infinite}
.glow{animation:glowpulse 1.4s ease-in-out infinite alternate}
.pip.talking .mouth-talk{animation:talk .16s ease-in-out infinite alternate}
.pip.wave .arm-r,.pip.cheer .arm-r{transform-origin:0% 100% !important;animation:wave .35s ease-in-out infinite alternate}
.qmark{animation:qpulse 1.6s ease-in-out infinite alternate}

@keyframes pop{0%{transform:scale(.2)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes drop{from{transform:translateY(-40px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px) rotate(-3deg)}}
@keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-12px) scale(1.12)}}
@keyframes float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@keyframes bubblepop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes picpop{from{transform:scale(.2) translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes picout{to{transform:scale(.4) translateY(20px);opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,50,46,.6)}50%{box-shadow:0 0 0 14px rgba(214,50,46,0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) scale(1.05)}75%{transform:rotate(8deg) scale(1.05)}}
@keyframes beckon{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes launch{0%{transform:translateY(0)}20%{transform:translateY(8px)}100%{transform:translateY(-120vh)}}
@keyframes glowslot{0%,100%{box-shadow:0 0 0 0 rgba(255,201,74,.0)}50%{box-shadow:0 0 0 6px rgba(255,201,74,.35)}}
@keyframes iris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(80% at 50% 50%)}}
@keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes confetti{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}75%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));opacity:0}}
@keyframes hopin{from{transform:translateY(-120px) scale(.3)}to{transform:none}}
@keyframes bob2{from{translate:0 0}to{translate:0 -10px}}
@keyframes fly{0%{transform:translate(0,0)}55%{transform:translate(110px,-75px)}100%{transform:translate(185px,-68px)}}
@keyframes bob{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
@keyframes wobble{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes flicker{from{transform:scaleY(.75)}to{transform:scaleY(1.2)}}
@keyframes ride{from{transform:translateX(-300px)}to{transform:translateX(300px)}}
@keyframes bumpy{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes eatstar{0%{transform:translate(0,0) scale(1) rotate(0)}60%{transform:translate(-165px,40px) scale(.6) rotate(-200deg)}72%,100%{transform:translate(-170px,42px) scale(0)}}
@keyframes chomp{from{transform:scale(1,1)}to{transform:scale(1.8,3.2)}}
@keyframes munch{to{transform:scale(1.05,.95)}}
@keyframes earL{from{transform:rotate(-18deg)}to{transform:rotate(8deg)}}
@keyframes earR{from{transform:rotate(18deg)}to{transform:rotate(-8deg)}}
@keyframes sway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes zz{0%{opacity:0;transform:translate(0,0) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-64px) scale(1.3)}}
@keyframes breathe{to{transform:scale(1.04,.96)}}
@keyframes flip{0%,30%{transform:scaleX(1)}70%,100%{transform:scaleX(-1)}}
@keyframes twinkle{from{transform:scale(.4);opacity:.4}to{transform:scale(1.1);opacity:1}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes talk{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
@keyframes glowpulse{from{opacity:.65}to{opacity:1}}
@keyframes wave{from{transform:rotate(10deg)}to{transform:rotate(-25deg)}}
@keyframes qpulse{from{transform:scale(.92);opacity:.6}to{transform:scale(1.08);opacity:1}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}