@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/baloo2.woff2) format('woff2')}
/* Nunos Spielewelt - Gestaltung. Eine feste, helle Kinderwelt (bewusst ohne Dunkelmodus). */
:root{--ink:#26355D;--ink2:#5B6B94;--cream:#FFF8E7;--teal:#2EC4B6;--teal-d:#1B8F86;--sun:#FFC93C;--sun-d:#E0A100;--coral:#FF6B5E;--green:#5BC16A;--green-d:#3E9142;--violet:#8E6CE0;--white:#fff;
  --font:'Baloo 2','Nunito','Trebuchet MS','Segoe UI',system-ui,sans-serif}
html,body{height:100%;margin:0;overflow:hidden;background:#7CC8F5;color:var(--ink);font-family:var(--font);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font-family:inherit;color:inherit;cursor:pointer;touch-action:none}
button:focus-visible{outline:5px solid var(--ink);outline-offset:4px}
#app{position:fixed;inset:0;overflow:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:50% 50%;transform:translate(-50%,-50%)}
.screen{position:absolute;inset:0;transition:opacity .3s ease,transform .3s ease}
.screen.entering{opacity:0;transform:scale(1.05)}
.screen.leaving{opacity:0;transform:scale(.96);pointer-events:none}
.layer{position:absolute;inset:0;pointer-events:none}.layer>*{pointer-events:auto}
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:2000}

/* ---------- Hintergruende ---------- */
.bg{position:absolute;inset:0;transition:background .4s}
.bg-hills,.bg-cloud{display:none;position:absolute}
.bg-hills{left:0;bottom:0;width:100%;height:40%}
.bg-cloud{width:22vmin;opacity:.95;animation:drift 40s ease-in-out infinite alternate}
.bg-cloud.c1{left:8%;top:9%}.bg-cloud.c2{left:58%;top:5%;width:16vmin;animation-duration:55s}.bg-cloud.c3{left:82%;top:22%;width:19vmin;animation-duration:48s}
.bg-meadow{background:linear-gradient(#6EC1F2,#CDEBFB 62%,#8BD47A 62%)}
.bg-picnic{background:linear-gradient(#8FD3F7,#DDF3FD 58%,#8BD47A 58%)}
.bg-meadow .bg-hills,.bg-picnic .bg-hills,.bg-meadow .bg-cloud,.bg-picnic .bg-cloud{display:block}
.bg-sky{background:linear-gradient(#4FAEF0,#A9DDFA 70%,#E6F6FF)}
.bg-wood{background:radial-gradient(circle at 50% 30%,#FFF1D6,#FFD9A0)}
.bg-violet{background:radial-gradient(circle at 50% 35%,#C9B8FA,#8E6CE0)}
.bg-rose{background:radial-gradient(circle at 50% 35%,#FFE3EC,#FFB3C7)}
.bg-album{background:radial-gradient(circle at 50% 30%,#FFF1B8,#FFC93C)}
.bg-paper{background:#EEF2FA}
.bg-party{background:repeating-conic-gradient(from 0deg at 50% 46%,#8E6CE0 0 12deg,#9C7DEA 12deg 24deg)}
.bg-night{background:radial-gradient(4px 4px at 12% 18%,#fff,transparent 60%),radial-gradient(5px 5px at 30% 40%,#fff,transparent 60%),radial-gradient(4px 4px at 48% 12%,#fff,transparent 60%),radial-gradient(6px 6px at 66% 30%,#fff,transparent 60%),radial-gradient(4px 4px at 84% 16%,#fff,transparent 60%),radial-gradient(5px 5px at 92% 48%,#fff,transparent 60%),radial-gradient(5px 5px at 6% 60%,#fff,transparent 60%),linear-gradient(#1B1E4B,#3A2C7A)}
@keyframes drift{to{transform:translateX(9vw)}}

#rotate-hint{display:none;position:absolute;left:0;right:0;bottom:9%;justify-content:center;align-items:center;gap:14px;font-weight:700;font-size:20px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);padding:0 16px;text-align:center}
#rotate-hint svg{width:54px;height:54px;animation:rot 2.4s ease-in-out infinite}
body.portrait #rotate-hint{display:flex}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

/* ---------- Objekte auf der Buehne ---------- */
.obj{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);padding:0;border:0;background:none;will-change:transform}
.obj.anim{transition:transform .42s cubic-bezier(.3,1.35,.5,1)}
.obj>svg{width:100%;height:100%;display:block;overflow:visible}
.grab{cursor:grab}.dragging{cursor:grabbing;z-index:999!important}
.piece>svg,.fruit>svg{filter:drop-shadow(0 5px 3px rgba(40,20,0,.22));transition:filter .15s}
.dragging>svg{filter:drop-shadow(0 18px 10px rgba(40,20,0,.25))}
.nope>svg{animation:shake .45s}
.landed>svg{animation:squash .4s}
@keyframes shake{20%{transform:translateX(-9px) rotate(-5deg)}40%{transform:translateX(9px) rotate(5deg)}60%{transform:translateX(-6px) rotate(-3deg)}80%{transform:translateX(5px)}}
@keyframes squash{30%{transform:scale(1.18,.82)}60%{transform:scale(.92,1.1)}}

/* ---------- Knoepfe ---------- */
.rbtn{width:84px;height:84px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;box-shadow:0 7px 0 rgba(38,53,93,.28),0 12px 18px rgba(38,53,93,.18);transition:transform .08s,box-shadow .08s}
.rbtn svg{width:56%;height:56%}
.rbtn.pressed,.pressed.card,.play-btn.pressed,.ct-bell.pressed{transform:translateY(5px) scale(.97);box-shadow:0 2px 0 rgba(38,53,93,.28)}
.rbtn.small{width:62px;height:62px;opacity:.9}
.rbtn.big{width:118px;height:118px}
.rbtn.green{background:var(--green);color:#fff;box-shadow:0 7px 0 var(--green-d),0 12px 18px rgba(38,53,93,.18)}
.rbtn.yellow{background:var(--sun);box-shadow:0 7px 0 var(--sun-d),0 12px 18px rgba(38,53,93,.18)}

/* ---------- Nuno ---------- */
.nuno{width:100%;height:100%}.nuno svg{width:100%;height:100%;overflow:visible;display:block}
.nuno .eyes-closed,.nuno .mouth-open{display:none}
.nuno .eyes-open{transform-origin:100px 106px;animation:blink 4.2s infinite}
.nuno .nuno-body{transform-origin:100px 236px;animation:bob 2.6s ease-in-out infinite}
.nuno .sprout{transform-origin:100px 46px;animation:sway 3s ease-in-out infinite}
.nuno .arm-r{transform-origin:164px 140px}.nuno .arm-l{transform-origin:36px 140px}
.pose-wave .arm-r{animation:wave .55s ease-in-out infinite alternate}
.pose-cheer .arm-r{transform:rotate(-140deg)}.pose-cheer .arm-l{transform:rotate(140deg)}
.pose-cheer .nuno-body{animation:jump .7s ease-in-out infinite}
.pose-sleep .eyes-open{display:none}.pose-sleep .eyes-closed{display:block}.pose-sleep .nuno-body{animation-duration:4.5s}
body.talking .nuno:not(.pose-sleep) .mouth-open{display:block;animation:talkA .3s steps(1) infinite}
body.talking .nuno:not(.pose-sleep) .mouth-closed{animation:talkB .3s steps(1) infinite}
@keyframes talkA{0%{opacity:1}50%{opacity:0}}@keyframes talkB{0%{opacity:0}50%{opacity:1}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes bob{50%{transform:scale(1.015,.975)}}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes wave{from{transform:rotate(-118deg)}to{transform:rotate(-152deg)}}
@keyframes jump{0%,100%{transform:translateY(0) scale(1.03,.95)}45%{transform:translateY(-34px) scale(.97,1.04)}}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-26px) scale(.97,1.05)}60%{transform:translateY(0) scale(1.06,.93)}}
@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- Logo ---------- */
.logo{position:absolute;left:44px;top:26px;display:flex;flex-direction:column;line-height:.86;font-weight:800;transform:rotate(-3deg)}
.logo .l1{font-size:66px;color:#fff;text-shadow:0 5px 0 var(--teal-d),0 9px 14px rgba(0,0,0,.15);letter-spacing:1px}
.logo .l2{font-size:44px;color:var(--sun);text-shadow:0 4px 0 #B27700,0 8px 12px rgba(0,0,0,.15);margin-left:34px}
.logo.big{left:0;right:0;top:40px;align-items:center;transform:rotate(-2deg)}
.logo.big .l1{font-size:128px}.logo.big .l2{font-size:86px;margin-left:120px}

/* ---------- Startbild ---------- */
.splash-nuno{position:absolute;left:300px;top:268px;width:320px;height:400px}
.play-btn{position:absolute;left:720px;top:350px;width:230px;height:230px;border-radius:50%;border:10px solid #fff;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 12px 0 var(--green-d),0 22px 30px rgba(0,0,0,.2);animation:pulse 1.5s ease-in-out infinite}
.play-btn svg{width:58%;height:58%;margin-left:6%}
@keyframes pulse{50%{transform:scale(1.07)}}

/* ---------- Startwelt ---------- */
.home-nuno{position:absolute;left:34px;top:262px;width:284px;height:355px;cursor:pointer}
.home-nuno.jump{animation:hop .6s}
.parent-btn{position:absolute;right:24px;top:18px}
.exit-btn{position:absolute;right:104px;top:14px;width:70px;height:70px;animation:popIn .45s cubic-bezier(.3,1.4,.5,1)}
.exit-btn.on-splash{right:24px;top:18px}
.cards{position:absolute;left:344px;top:96px;width:900px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;height:270px;border-radius:44px;border:7px solid #fff;padding:0;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 10px 0 rgba(38,53,93,.22),0 18px 26px rgba(38,53,93,.2);overflow:hidden;
  animation:popIn .5s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i)*70ms + 100ms);transition:transform .1s,box-shadow .1s}
.card::before{content:"";position:absolute;left:-20%;top:-60%;width:140%;height:100%;border-radius:50%;background:rgba(255,255,255,.2)}
.card.chosen{transform:scale(1.08);z-index:5}
.card-illo{position:absolute;left:3%;top:5%;width:94%;height:66%;filter:drop-shadow(0 6px 4px rgba(0,0,0,.18))}
.card-title{position:absolute;left:24px;bottom:12px;font-size:36px;font-weight:800;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.card-level{position:absolute;right:20px;bottom:28px;display:flex;gap:5px}
.card-level i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.4)}.card-level i.on{background:#fff}
.album-card .card-title{color:var(--ink);text-shadow:0 3px 0 rgba(255,255,255,.5)}
.album-peek{position:absolute;inset:8% 6% 30% 6%}
.peek{position:absolute;width:42%;height:100%;top:0;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 5px 3px rgba(0,0,0,.2))}
.peek svg{width:100%;height:100%}
.peek.p0{left:0;transform:rotate(-12deg)}.peek.p1{left:29%;top:-6%;transform:rotate(4deg);z-index:2}.peek.p2{left:58%;transform:rotate(13deg)}
.peek.ghost svg{filter:brightness(0) invert(1);opacity:.45}
.album-count{position:absolute;right:16px;top:14px;z-index:3;box-shadow:0 4px 0 rgba(178,119,0,.3);background:#fff;border-radius:30px;padding:2px 16px;font-size:26px;font-weight:800;color:var(--ink)}

/* ---------- Kopfzeile im Spiel ---------- */
.hud{position:absolute;left:0;top:0;width:100%;height:104px;pointer-events:none;z-index:1500}
.hud>*{pointer-events:auto}
.hud-home{position:absolute;left:22px;top:14px}
.hud-progress{position:absolute;left:50%;top:20px;transform:translateX(-50%);display:flex;gap:6px;background:rgba(255,255,255,.75);border-radius:40px;padding:8px 18px;box-shadow:0 4px 0 rgba(38,53,93,.12)}
.pstar{width:48px;height:48px;color:#CBD3E6;display:block}.pstar svg{width:100%;height:100%;display:block}
.hud-progress:has(.pstar:nth-child(8)) .pstar{width:36px;height:36px}
.pstar.on{color:var(--sun);animation:starOn .6s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(0 2px 0 var(--sun-d))}
@keyframes starOn{0%{transform:scale(.3) rotate(-90deg)}60%{transform:scale(1.5) rotate(10deg)}100%{transform:none}}
.hud-nuno{position:absolute;right:20px;top:4px;width:92px;height:115px;border:0;background:none;padding:0}
.hud-nuno.bump .nuno{animation:hop .5s}.hud-nuno.cheer .nuno{animation:hop .55s 2}
.hud-nuno-badge{position:absolute;left:-14px;bottom:4px;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(38,53,93,.25)}
.hud-nuno-badge svg{width:62%;height:62%}

/* ---------- Effekte ---------- */
.confetto,.rainfetto{position:absolute;width:16px;height:22px;border-radius:4px;margin:-11px 0 0 -8px}
.confetto.round,.rainfetto.round{border-radius:50%;height:16px}
.confetto{animation:burst .95s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes burst{to{transform:translate(var(--dx),calc(var(--dy) + 190px)) rotate(var(--rot));opacity:0}}
.rainfetto{top:-30px;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translate(var(--sway),800px) rotate(var(--rot))}}
.sparkle{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;color:var(--sun);animation:spark .8s ease-out forwards}
.sparkle svg{width:100%;height:100%}
@keyframes spark{0%{transform:scale(.2);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(140deg);opacity:0}}
.hint-hand{position:absolute;left:0;top:0;width:96px;height:96px;margin:-10px 0 0 -30px;z-index:1800;pointer-events:none;filter:drop-shadow(0 6px 5px rgba(0,0,0,.3))}
.hint-hand svg{width:100%;height:100%}

/* ---------- Eltern-Sperre / Dialog ---------- */
.modal{position:absolute;inset:0;z-index:3000;background:rgba(27,30,75,.55);display:grid;place-items:center;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
.modal-card{position:relative;background:#fff;border-radius:40px;padding:34px 54px 40px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3);min-width:520px}
.modal-card.shake{animation:shake .45s}
.modal-card h2{margin:0;font-size:40px;line-height:1.1}.modal-card p{margin:6px 0 0;font-size:26px;color:var(--ink2)}
.gate-code{font-weight:800;color:var(--ink)!important;font-size:34px!important;letter-spacing:.5px}
.gate-close{position:absolute;right:-18px;top:-18px}
.gate-dots{display:flex;gap:14px;justify-content:center;margin:16px 0}
.gate-dots i{width:20px;height:20px;border-radius:50%;background:#DDE3F0}.gate-dots i.on{background:var(--green)}
.gate-pad{display:grid;grid-template-columns:repeat(3,96px);gap:12px;justify-content:center}
.gate-pad button{height:72px;border-radius:22px;border:0;background:#EEF2FA;font-size:36px;font-weight:800;box-shadow:0 5px 0 #CBD3E6}
.gate-pad button.pressed{transform:translateY(4px);box-shadow:0 1px 0 #CBD3E6}

/* ---------- Belohnung ---------- */
.reward-stars{position:absolute;left:0;right:0;top:28px;display:flex;justify-content:center;gap:26px}
.bigstar{width:140px;height:140px;color:rgba(255,255,255,.28);animation:popIn .6s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i)*350ms + 400ms)}
.bigstar:nth-child(2){transform:translateY(-16px)}
.bigstar svg{width:100%;height:100%}
.bigstar.on{color:var(--sun);filter:drop-shadow(0 6px 0 var(--sun-d)) drop-shadow(0 10px 12px rgba(0,0,0,.25))}
.reward-nuno{position:absolute;left:90px;top:226px;width:330px;height:412px}
.gift-wrap{position:absolute;left:640px;top:200px;width:330px;height:330px}
.gift{width:100%;height:100%;border:0;background:none;padding:0;animation:giftIn .7s cubic-bezier(.3,1.4,.5,1) 1.2s backwards,wobble 1.6s ease-in-out 2.2s infinite}
.gift svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 6px rgba(0,0,0,.25))}
.gift .lid{transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .4s .15s;transform-origin:100px 80px}
.gift.open{animation:none;transition:opacity .4s .35s,transform .4s .35s;opacity:0;transform:scale(.7);pointer-events:none}
.gift.open .lid{transform:translateY(-90px) rotate(-22deg);opacity:0}
@keyframes giftIn{0%{transform:translateY(-700px)}100%{transform:none}}
@keyframes wobble{0%,100%{transform:rotate(0)}10%{transform:rotate(-5deg)}20%{transform:rotate(5deg)}30%{transform:rotate(-3deg)}40%{transform:rotate(0)}}
.new-sticker{position:absolute;inset:-10px;animation:stickerIn .8s cubic-bezier(.3,1.5,.5,1)}
.new-sticker svg{width:100%;height:100%;filter:drop-shadow(0 0 0 #fff) drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 10px 10px rgba(0,0,0,.3))}
@keyframes stickerIn{0%{transform:scale(0) rotate(-200deg)}100%{transform:none}}
.reward-actions{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:44px;animation:riseIn .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes riseIn{from{transform:translateY(160px)}}

/* ---------- Pause ---------- */
.pause-moon{position:absolute;right:150px;top:60px;width:170px;height:170px;transform:rotate(-20deg);filter:drop-shadow(0 0 30px rgba(255,233,168,.6))}
.pause-nuno{position:absolute;left:480px;top:210px;width:320px;height:400px}
.zzz{position:absolute;left:790px;top:180px;color:#fff;font-weight:800}
.zzz span{display:inline-block;font-size:44px;animation:zz 3s ease-in-out infinite;opacity:0}
.zzz span:nth-child(2){font-size:60px;animation-delay:.6s}.zzz span:nth-child(3){font-size:80px;animation-delay:1.2s}
@keyframes zz{0%{opacity:0;transform:translateY(20px)}40%{opacity:1}100%{opacity:0;transform:translateY(-50px)}}
.pause-text{position:absolute;left:0;right:0;bottom:34px;text-align:center;margin:0;color:#fff;font-size:34px;font-weight:700}

/* ---------- Stickeralbum ---------- */
.album-head{position:absolute;left:130px;right:130px;top:18px;display:flex;justify-content:space-between;align-items:center}
.album-title{font-size:50px;font-weight:800;color:#fff;text-shadow:0 4px 0 #B27700}
.album-total{display:flex;align-items:center;gap:8px;background:#fff;border-radius:40px;padding:4px 24px 4px 12px;font-size:32px;box-shadow:0 5px 0 rgba(178,119,0,.35)}
.album-total svg{width:44px;height:44px;color:var(--sun)}
.album-book{position:absolute;left:130px;top:104px;width:1020px;height:596px;background:var(--cream);border-radius:44px;border:8px solid #fff;box-shadow:0 12px 0 rgba(178,119,0,.35),0 22px 30px rgba(0,0,0,.15);padding:22px 28px}
.album-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:14px 18px;height:100%}
.slot{position:relative;border:0;padding:6px;background:#fff;border-radius:34px;box-shadow:inset 0 0 0 4px #F3E7C6;animation:popIn .4s backwards;animation-delay:calc(var(--i)*25ms)}
.slot svg{width:100%;height:100%;display:block}
.slot.has svg{filter:drop-shadow(0 4px 3px rgba(0,0,0,.2))}
.slot.empty{background:#F8EED3}.slot.empty svg{filter:brightness(0);opacity:.1}
.slot.empty b{position:absolute;inset:0;display:grid;place-items:center;font-size:70px;color:#D9C48F}
.slot.pop svg{animation:hop .55s}.slot.wiggle{animation:shake .45s}
.slot.fresh{box-shadow:inset 0 0 0 6px var(--sun),0 0 0 8px rgba(255,201,60,.45)}
.album-prev,.album-next{position:absolute;top:360px}.album-prev{left:24px}.album-next{right:24px}

/* ---------- Elternbereich ---------- */
.parents{position:absolute;inset:16px 30px;background:#fff;border-radius:40px;padding:16px 40px 14px;box-shadow:0 14px 40px rgba(38,53,93,.18);display:flex;flex-direction:column;-webkit-user-select:text;user-select:text}
.parents header{display:flex;justify-content:space-between;align-items:center}
.parents h1{margin:0;font-size:44px}.parents h2{margin:14px 0 8px;font-size:24px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink2)}
.p-cols{display:grid;grid-template-columns:430px 1fr;gap:44px;flex:1;min-height:0}
.toggle{display:flex;align-items:center;gap:16px;width:100%;border:0;background:#F3F6FC;border-radius:24px;padding:9px 18px;margin-bottom:9px;font-size:27px;font-weight:700;text-align:left}
.t-ico{width:38px;height:38px}.t-ico svg{width:100%;height:100%}.t-label{flex:1}
.t-knob{width:74px;height:40px;border-radius:20px;background:#CBD3E6;position:relative;transition:background .2s}
.t-knob i{position:absolute;left:4px;top:4px;width:32px;height:32px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 3px rgba(0,0,0,.2)}
.toggle.on .t-knob{background:var(--green)}.toggle.on .t-knob i{transform:translateX(34px)}
.seg{display:flex;gap:8px}.seg button{flex:1;border:0;border-radius:18px;background:#F3F6FC;font-size:23px;font-weight:700;padding:9px 0}
.seg button.on{background:var(--ink);color:#fff}
.p-note{font-size:19px;line-height:1.28;color:var(--ink2);margin:10px 0 0;font-weight:500}
.p-note.safe{background:#E9F8EC;color:#23633A;border-radius:18px;padding:10px 16px}
.p-reset{margin-top:14px;border:3px solid #F2C4C0;background:#fff;color:#C0392B;border-radius:18px;font-size:21px;font-weight:700;padding:7px 18px}
.p-reset.armed{background:#C0392B;color:#fff;border-color:#C0392B}
.pg-row{display:flex;align-items:center;gap:16px;padding:5px 0;border-bottom:2px solid #EEF2FA}
.pg-dot{width:22px;height:22px;border-radius:50%;flex:none}
.pg-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}.pg-main b{font-size:25px}.pg-main small{font-size:17px;color:var(--ink2);font-weight:500}
.pg-level{width:170px;font-size:18px;font-weight:700}.pg-bar{height:12px;border-radius:6px;background:#EEF2FA;overflow:hidden;margin-top:3px}.pg-bar i{display:block;height:100%;border-radius:6px}
.pg-rounds{width:70px;text-align:center;line-height:1;font-variant-numeric:tabular-nums}.pg-rounds b{font-size:28px;display:block}.pg-rounds small{font-size:15px;color:var(--ink2)}
.p-ver{margin:8px 0 0;font-size:16px;color:#9AA6C4;text-align:right}

/* ---------- Spiel 1: Formen ---------- */
.sh-tray{position:absolute;left:36px;top:118px;width:548px;height:584px;border-radius:44px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 5px rgba(255,255,255,.7)}
.sh-board{position:absolute;left:616px;top:118px;width:628px;height:584px;border-radius:44px;border:12px solid #A86D36;box-shadow:0 10px 0 #7A4E2A,0 20px 26px rgba(80,40,0,.25);
  background:repeating-linear-gradient(90deg,rgba(122,78,42,.0) 0 150px,rgba(122,78,42,.22) 150px 153px),linear-gradient(#D49A5E,#C98B4E)}

/* ---------- Spiel 2: Zaehlen ---------- */
.ct-friend{position:absolute;left:44px;top:212px;width:236px;height:346px}
.ct-friend svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 5px rgba(0,0,0,.15))}
.ct-friend.happy{animation:hop .5s 3}
.ct-target{position:absolute;left:50%;top:108px;transform:translateX(-50%);display:flex;align-items:center;gap:26px;background:#fff;border-radius:40px;padding:0 40px;height:118px;box-shadow:0 7px 0 rgba(38,53,93,.18)}
.ct-target.pop{animation:tpop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes tpop{0%{transform:translateX(-50%) scale(.4)}100%{transform:translateX(-50%) scale(1)}}
.ct-num{font-size:120px;font-weight:800;line-height:1;color:var(--ink);transform:translateY(9px)}
.ct-basket{position:absolute;left:380px;top:236px;width:560px;height:250px}
.ct-basket svg{width:100%;height:100%;overflow:visible}
.ct-shelf{position:absolute;left:50px;top:566px;width:1180px;height:128px;border-radius:44px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 5px rgba(255,255,255,.75)}
.ct-bell{position:absolute;right:48px;top:320px;width:156px;height:156px;border-radius:50%;border:8px solid #fff;background:var(--sun);color:var(--ink);display:grid;place-items:center;box-shadow:0 9px 0 var(--sun-d),0 16px 22px rgba(0,0,0,.18);padding:0;z-index:50}
.ct-bell svg{width:60%;height:60%}.ct-bell.ring svg{animation:ring .6s}
@keyframes ring{20%{transform:rotate(-22deg)}40%{transform:rotate(18deg)}60%{transform:rotate(-12deg)}80%{transform:rotate(7deg)}}
.obj.anim.eaten{transition:transform .5s ease-in,opacity .3s .3s;opacity:0}

/* ---------- Spiel 3: Memo ---------- */
.mcard{perspective:900px;cursor:pointer}
.mc-in{position:absolute;inset:0;transition:transform .45s cubic-bezier(.4,1.3,.5,1);transform-style:preserve-3d;animation:popIn .4s backwards;animation-delay:calc(var(--i)*35ms)}
.mcard.up .mc-in{transform:rotateY(180deg)}
.mc-back,.mc-face{position:absolute;inset:0;border-radius:17%;border:6px solid #fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 7px 0 rgba(38,20,90,.3);display:grid;place-items:center;overflow:hidden}
.mc-back{background:var(--back)}.mc-back svg{width:100%;height:100%}
.mc-face{background:#fff;transform:rotateY(180deg)}.mc-face svg{width:88%;height:88%}
.mcard.pressed .mc-in{transition-duration:.45s}
.mcard.matched{animation:none}.mcard.matched .mc-face{border-color:var(--sun);box-shadow:0 7px 0 var(--sun-d),0 0 0 5px rgba(255,201,60,.5)}
.mcard.matched .mc-face svg{animation:hop .6s}

/* ---------- Spiel 4: Ballons ---------- */
.bl-clouds{position:absolute;inset:0;animation:drift 50s ease-in-out infinite alternate}.bl-clouds svg{width:100%;height:100%}
.balloon{height:calc(var(--s)*1.5);margin-top:calc(var(--s)*-.75);cursor:pointer}
.balloon>svg{filter:drop-shadow(0 8px 6px rgba(0,40,90,.18))}
.balloon.popped>svg{animation:popOut .18s ease-out forwards}
@keyframes popOut{to{transform:scale(1.5);opacity:0}}
.bl-target{position:absolute;left:126px;top:12px;height:88px;display:flex;align-items:center;gap:14px;background:#fff;border-radius:44px;padding:0 24px 0 14px;box-shadow:0 6px 0 rgba(38,53,93,.2);z-index:1500}
.bl-target.pop{animation:popIn .5s cubic-bezier(.3,1.5,.5,1)}
.bl-sample{width:54px;height:80px;display:block}.bl-sample svg{width:100%;height:100%}
.bl-pips{display:flex;gap:7px}.bl-pips i{width:20px;height:20px;border-radius:50%;background:#DDE3F0;transition:background .2s,transform .2s}.bl-pips i.on{background:var(--green);transform:scale(1.2)}

/* ---------- Spiel 5: Puzzle ---------- */
.pz-board{position:absolute;left:48px;top:136px;width:744px;height:564px;padding:12px;background:#fff;border-radius:26px;box-shadow:0 9px 0 rgba(194,86,122,.35),0 18px 24px rgba(120,30,60,.18)}
.pz-ghost{width:720px;height:540px;display:block;border-radius:12px}
.pz-tray{position:absolute;left:806px;top:112px;width:452px;height:596px;border-radius:40px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 5px rgba(255,255,255,.7)}
.pz-piece{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2)}
.layer>.pz-piece{pointer-events:none}.pz-piece svg *{pointer-events:auto}.pz-piece.set svg *{pointer-events:none}
.pz-piece>svg{filter:drop-shadow(0 5px 4px rgba(90,20,50,.3))}
.pz-piece.set>svg{filter:none}
.pz-edge{transition:opacity .6s}.pz-complete .pz-edge{opacity:0}

@media (prefers-reduced-motion:reduce){.bg-cloud,.bl-clouds,.play-btn,.nuno .nuno-body,.nuno .sprout{animation:none}}