/* Gemeinsame Grundlagen der Vorschläge A und B: Schriften, Figuren, Himmel, Wellen */
@font-face{font-family:Komika;src:url(../assets/fonts/KOMIKAH_.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Komika;src:url(../assets/fonts/KOMIKAHB.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Sunflower;src:url(../assets/fonts/Sunflower-Medium.ttf);font-weight:400 500;font-display:swap}
@font-face{font-family:Sunflower;src:url(../assets/fonts/Sunflower-Bold.ttf);font-weight:700;font-display:swap}

/* ---------- Figur (engine.js: Figure) ----------
   Zustandsklassen der Figur: down (gedrueckt), crazy, nope, locked - auf der Seite
   nicht als Klassennamen anderer Elemente verwenden (sonst greifen deren Regeln). */
.fg{position:relative;aspect-ratio:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;outline:none}
.fg:focus-visible{outline:4px dashed rgba(255,255,255,.9);outline-offset:6px;border-radius:30%}
.fg-bob{position:absolute;inset:0;animation:fgbob 5.6s ease-in-out infinite;transform-origin:50% 80%;animation-delay:var(--bob-delay,0s)}
.fg-sq{position:absolute;inset:0;transform-origin:50% 92%;transition:transform .09s ease-out}
.fg.down .fg-sq{transform:scale(1.05,.93)}
.fg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;display:block}
.fg .fg-on{opacity:0}
.fg.down .fg-on{opacity:1}
.fg.down .fg-off{opacity:0}
.fg canvas{position:absolute;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none;display:none}
.fg.crazy canvas{display:block}
.fg.crazy .fg-sq{visibility:hidden}
.fg.crazy .fg-bob{animation:none}
.fg.nope .fg-sq{animation:fgnope .55s ease-in-out}
@keyframes fgbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-2.4%) rotate(2deg)}}
@keyframes fgnope{20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}

/* ---------- Himmel (engine.js: Scene) ---------- */
.sc-host{position:relative;overflow:hidden;background:linear-gradient(#5ccbea,#36aedd 60%,#8fd3ee)}
.sc{position:absolute;left:0;top:0;width:2048px;height:922px;transform-origin:0 0}
.sc.in{animation:scin .6s ease-out}
@keyframes scin{from{opacity:0}}
.sc img{position:absolute;display:block;max-width:none;pointer-events:none}

/* ---------- Wasser (engine.js: water) ---------- */
.wl{position:absolute;left:0;right:0;bottom:0;height:var(--line);background:linear-gradient(var(--wc),var(--wc2));pointer-events:none}
.wl .crest{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:var(--amp);animation:wv linear infinite}
.wv{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:wv linear infinite;pointer-events:none}
@keyframes wv{to{transform:translateX(-50%)}}

/* ---------- Schmuck (engine.js: decoField) ---------- */
.deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.deco > span{position:absolute;display:block;transform:rotate(var(--r,0deg));animation:floaty var(--d,7s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.deco svg{display:block;width:100%;height:100%}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ---------- Store-Knöpfe ---------- */
.store{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:Komika,Sunflower,sans-serif;font-weight:700;color:#fff;
  background:#0b3a5b;border-radius:16px;padding:8px 15px 8px 12px;line-height:1.05;border:3px solid #fff;
  box-shadow:0 4px 0 rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.18);transition:transform .12s}
.store.play{background:#0f6b47}
.store:hover{transform:translateY(-2px) rotate(-1.5deg)}
.store:active{transform:translateY(2px)}
.store svg{width:26px;height:26px;flex:none}
.store small{display:block;font:500 11px Sunflower,sans-serif;opacity:.85;letter-spacing:.04em}
.store b{display:block;font-size:17px}
.store b,.store small{white-space:nowrap}
.store.big{padding:12px 22px 12px 17px;border-radius:20px}
.store.big svg{width:36px;height:36px}
.store.big b{font-size:23px}
.store.big small{font-size:13px}

@media(prefers-reduced-motion:reduce){
  .fg-bob,.wv,.wl .crest,.deco > span{animation:none!important}
  *{scroll-behavior:auto!important}
}