/* Konzept "Spielplatz": ein Bildschirm, Nacht-Blau. Kuntis 11 Punkte platzen heraus, werden zu Blasen mit Physik
   und sind die Navigation. Jede Blase oeffnet ihre Seite als Farbkreis, der sich aus der Blase heraus aufzieht. */
:root{
  --night:#06163f; --night-2:#0c2a6b; --lime:#c8d724; --paper:#fffdf7; --magenta:#c8105c; --orange:#e8571a; --green:#74ae1f;
  --display:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--paper);font-family:var(--body);font-size:1.0625rem;line-height:1.55;overflow:hidden;overscroll-behavior:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:12px}
button{font:inherit;color:inherit;cursor:pointer}

.stage{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background:
    radial-gradient(55% 50% at 28% 100%,#1a4fc255,transparent 70%),
    radial-gradient(40% 40% at 90% 0%,#c8105c33,transparent 70%),
    radial-gradient(35% 35% at 6% 8%,#e8571a22,transparent 70%),
    var(--night)}
.stage::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(circle,#ffffff1c 1.2px,transparent 1.6px) 0 0/34px 34px}

/* Kopfbereich: Wortmarke links, Hinweis/Knopf rechts (nie ueber dem Boden-Haufen) */
.top{position:absolute;z-index:6;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:max(16px,env(safe-area-inset-top)) clamp(16px,3vw,44px) 0;pointer-events:none}
.top>*{pointer-events:auto}
.wm{margin:0;width:clamp(190px,26vw,340px);line-height:0;animation:wm-in 1s cubic-bezier(.2,1.4,.4,1) both}
.wm svg{width:100%;height:auto;display:block}
.wm #navy{fill:var(--paper)}
@keyframes wm-in{from{opacity:0;transform:translateY(-24px) rotate(-3deg)}to{opacity:1;transform:none}}
.hud{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;text-align:right;min-width:0}
.hint{margin:0;font-weight:800;letter-spacing:.02em;color:var(--lime);font-size:clamp(.9rem,1.5vw,1.15rem);line-height:1.35;transition:opacity .6s}
.hint.gone{opacity:0;position:absolute;pointer-events:none}
.again{border:2px solid var(--lime);background:#06163fcc;color:var(--lime);font-weight:800;font-size:.95rem;
  padding:.5rem 1rem;border-radius:99px;backdrop-filter:blur(6px);transition:background .2s,color .2s,transform .2s}
.again[hidden]{display:none}
.again:hover{background:var(--lime);color:var(--night);transform:rotate(-2deg) scale(1.04)}
@media(max-aspect-ratio:1/1){.top{flex-direction:column}.wm{width:min(62vw,300px)}.hud{align-items:flex-start;text-align:left}}

/* Kunti */
.kunti{position:absolute;z-index:1;border:0;background:none;padding:0;left:clamp(8px,12vw,200px);bottom:clamp(40px,8dvh,90px);
  width:min(64vw,calc((100dvh - 230px)*1.2444),760px);transform-origin:50% 100%;-webkit-tap-highlight-color:transparent;
  animation:breathe 4.2s ease-in-out infinite;filter:drop-shadow(0 16px 30px #0007)}
.kunti svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.988)}}
.kunti.hop{animation:hop .9s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{0%{transform:scale(1.08,.86)}22%{transform:translateY(-9%) scale(.94,1.1)}55%{transform:translateY(0) scale(1.1,.88)}78%{transform:scale(.98,1.03)}100%{transform:scale(1)}}
.eye{transform-box:fill-box;transform-origin:center;transition:transform .07s}
.blink .eye{transform:scaleY(.08)}
.pupil{transition:transform .12s ease-out}
@media(max-aspect-ratio:1/1){.kunti{left:0;right:0;margin-inline:auto;bottom:max(130px,24dvh);width:min(94vw,calc((100dvh - 330px)*1.2444))}}

/* Boden */
.floor{position:absolute;z-index:2;left:0;right:0;bottom:0;height:calc(14px + env(safe-area-inset-bottom,0px));background:#0a2457;border-top:3px solid var(--lime);
  box-shadow:0 -1px 0 #0003}
.floor::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--lime) 2px,transparent 2.4px) 0 50%/20px 100% repeat-x;opacity:.5}


/* Blasen */
.bubbles{position:absolute;inset:0;z-index:5;pointer-events:none}
.b{position:absolute;left:0;top:0;width:calc(var(--R)*2);height:calc(var(--R)*2);margin:0;padding:0;border:0;border-radius:50%;
  background:var(--c);color:var(--ink);box-shadow:0 0 0 calc(var(--R)*.1) var(--lime),0 calc(var(--R)*.3) calc(var(--R)*.6) #0006;
  display:grid;place-items:center;text-align:center;will-change:transform;pointer-events:auto;touch-action:none;cursor:grab}
.b.home{pointer-events:none}
.b.drag{cursor:grabbing;z-index:2}
.b span{font-family:var(--display);font-size:var(--f);line-height:1;padding:0 .2em;transition:opacity .2s;pointer-events:none}
.b.home span,.b.small span{opacity:0}
/* Glanzpunkt wie auf einem Gummiball */
.b::after{content:"";position:absolute;left:18%;top:14%;width:26%;height:16%;border-radius:50%;background:#fff;opacity:.28;transform:rotate(-30deg);pointer-events:none}

/* Panel: Farbkreis aus der Blase */
.panel{position:fixed;inset:0;z-index:20;background:var(--pc);color:var(--pi);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.panel[hidden]{display:none}
.giant{position:fixed;right:-2vw;bottom:-6vw;font-family:var(--display);font-size:clamp(14rem,48vw,42rem);line-height:.8;color:var(--pi);opacity:.13;pointer-events:none;white-space:nowrap}
.close{position:fixed;z-index:3;top:max(16px,env(safe-area-inset-top));right:clamp(16px,3vw,44px);display:flex;align-items:center;gap:.6rem;border:3px solid var(--pi);background:transparent;color:var(--pi);
  border-radius:99px;padding:.5rem 1.1rem;font-weight:800;transition:transform .2s,background .2s,color .2s}
.close b{font-weight:800}
.close:hover{background:var(--pi);color:var(--pc);transform:rotate(3deg)}
.p-inner{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  padding:clamp(5.5rem,12vh,8rem) clamp(1.2rem,7vw,7rem) clamp(3rem,8vh,6rem);max-width:1200px}
.p-inner>*{opacity:0;transform:translateY(34px)}
.panel.open .p-inner>*{animation:up .8s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(.35s + var(--i)*.09s)}
@keyframes up{to{opacity:1;transform:none}}
.eyebrow{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;opacity:.85}
.p-inner h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(3rem,10vw,8.5rem);line-height:.95;text-wrap:balance;letter-spacing:.005em}
.p-inner p{margin:0;max-width:42ch;font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:500}
.p-inner p.big{font-weight:800}
.acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.act{display:inline-block;text-decoration:none;font-weight:800;font-size:1.1rem;padding:.9rem 1.5rem;border-radius:99px;border:3px solid var(--pi);background:var(--pi);color:var(--pc);transition:transform .2s;min-width:0;overflow-wrap:anywhere}
.act.ghost{background:transparent;color:var(--pi)}
.act:hover{transform:translateY(-3px) rotate(-1.5deg)}
.mail{font-family:var(--display);font-size:clamp(1.3rem,4vw,2.6rem);overflow-wrap:anywhere;line-height:1.1}

.noscript{position:absolute;inset:auto 1rem 5rem;z-index:9;background:var(--paper);color:var(--night);padding:1.2rem;border-radius:1rem;max-width:560px}

@media(prefers-reduced-motion:reduce){
  .kunti,.wm{animation:none!important}
  .panel.open .p-inner>*{animation:none;opacity:1;transform:none}
  .pupil,.eye{transition:none}
}