/* Platty, das Schnabeltier: komplett aus CSS-Formen (CC.shapes.platypus in js/shapes.js).
   Die Figur ist auf einer Fläche von 400 x 250 px entworfen und wird über --k auf die gewünschte Größe skaliert.
   Stimmung: ohne Klasse = neugierig, .happy = glücklich (Level geschafft), .sad = krank (Spiel verloren). */
.platy { position: relative; flex: none; pointer-events: none; }
.p-fig { position: absolute; left: 0; top: 0; width: 400px; height: 250px; transform-origin: 0 0; scale: var(--k, 1); }
.p-bob { position: absolute; inset: 0; transform-origin: 50% 70%; animation: pBob 5.2s ease-in-out infinite; }
.platy i, .platy b { position: absolute; }

/* Biberschwanz mit Schuppenmuster */
.p-tail {
  left: 0; top: 106px; width: 128px; height: 54px; rotate: -7deg; transform-origin: 100% 50%;
  border-radius: 54% 44% 42% 56% / 62% 52% 48% 58%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .22) 0 2px, transparent 2.6px) 0 0 / 14px 11px,
    linear-gradient(180deg, #6a4731, #4a3121);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .1);
  animation: pTail 3.6s ease-in-out infinite;
}

/* Schwimmfüße mit Schwimmhaut */
.p-foot {
  width: 54px; height: 28px; border-radius: 55% 55% 40% 40% / 90% 90% 36% 36%;
  background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(110, 60, 15, .45) 11px 13px), linear-gradient(180deg, #f2ab55, #d17e32);
  transform-origin: 30% 0;
}
.p-foot.b { left: 84px; top: 170px; animation: pFoot 2.4s ease-in-out infinite -.8s; }
.p-foot.f { left: 218px; top: 172px; animation: pFoot 2.4s ease-in-out infinite; }

/* Körper mit hellem Bauch und Fell-Strichen */
.p-body {
  left: 62px; top: 66px; width: 226px; height: 118px; overflow: hidden;
  border-radius: 48% 52% 50% 50% / 56% 56% 44% 44%;
  background: radial-gradient(ellipse at 34% 22%, rgba(255, 255, 255, .2), transparent 52%),
    repeating-linear-gradient(105deg, rgba(0, 0, 0, .07) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #86603f 0%, #6e4a32 58%, #5b3d29 100%);
  box-shadow: inset 0 -16px 22px rgba(0, 0, 0, .16);
}
.p-body::after {
  content: ''; position: absolute; left: -6%; right: -6%; top: 56%; bottom: -30%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(236, 214, 174, 0), rgba(236, 214, 174, .92) 70%);
}

/* Kopf, Schnabel, Auge */
.p-head {
  left: 238px; top: 68px; width: 100px; height: 94px; border-radius: 50% 50% 48% 52% / 52% 52% 48% 48%;
  background: radial-gradient(ellipse at 40% 24%, rgba(255, 255, 255, .2), transparent 56%),
    repeating-linear-gradient(105deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #86603f, #6e4a32 72%, #8c6c4e);
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .14);
}
.p-bill {
  left: 304px; top: 108px; width: 94px; height: 48px; border-radius: 46% 62% 56% 46% / 54% 62% 62% 54%;
  background: linear-gradient(180deg, #6a727e 0%, #454b56 55%, #323740 100%);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .16), inset 0 -4px 0 rgba(0, 0, 0, .18);
}
.p-bill::before { content: ''; position: absolute; right: 16px; top: 9px; width: 8px; height: 5px; border-radius: 50%; background: #181b20; }
.p-bill::after { content: ''; position: absolute; left: 12px; right: 12px; top: 28px; height: 3px; border-radius: 3px; background: rgba(0, 0, 0, .34); }
.p-ear { left: 256px; top: 104px; width: 20px; height: 6px; rotate: -14deg; border-radius: 50%; background: rgba(30, 16, 8, .38); }
.p-cheek { left: 266px; top: 126px; width: 28px; height: 16px; border-radius: 50%; background: rgba(255, 130, 130, .42); filter: blur(1.5px); }
.p-eye {
  left: 284px; top: 90px; width: 20px; height: 22px; border-radius: 50%; transform-origin: 50% 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 15%, transparent 17%), radial-gradient(circle at 70% 74%, rgba(255, 255, 255, .85) 0 7%, transparent 9%), #1b1410;
  animation: pBlink 5.6s infinite;
}
.p-brow { left: 278px; top: 82px; width: 28px; height: 5px; border-radius: 4px; background: #2a1a10; rotate: -20deg; display: none; }
.p-tear { left: 292px; top: 114px; width: 9px; height: 12px; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: linear-gradient(180deg, #bfe8ff, #5ab4f0); display: none; }

/* Wasser: Platty paddelt an der Oberfläche */
.p-water {
  left: -20px; top: 148px; width: 440px; height: 100px; border-radius: 50% 50% 0 0 / 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(120, 205, 255, .5), rgba(42, 120, 205, .3));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5);
  -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 0, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 100% at 50% 0, #000 72%, transparent 100%);
}
.p-rip { left: 352px; top: 142px; width: 62px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); opacity: 0; animation: pRipple 3.4s ease-out infinite; }
.p-rip.r2 { left: 22px; top: 150px; animation-delay: -1.7s; }
.p-bub { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .22); left: 386px; top: 140px; opacity: 0; animation: pBubble 3.2s ease-out infinite; }
.p-bub.b2 { left: 372px; width: 7px; height: 7px; animation-delay: -1.1s; }
.p-bub.b3 { left: 394px; width: 6px; height: 6px; animation-delay: -2.1s; }

/* Glitzer (nur .happy) */
.p-spark { display: none; background: #ffe27a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pSpark 1.8s ease-in-out infinite; }
.p-spark.s1 { left: 262px; top: 26px; width: 26px; height: 26px; }
.p-spark.s2 { left: 336px; top: 52px; width: 18px; height: 18px; animation-delay: -.6s; }
.p-spark.s3 { left: 196px; top: 34px; width: 16px; height: 16px; animation-delay: -1.2s; }

.platy.happy .p-spark { display: block; }
.platy.happy .p-eye { top: 98px; height: 11px; background: none; border-top: 5px solid #1b1410; border-radius: 50% 50% 0 0 / 100% 100% 0 0; animation: none; }
.platy.happy .p-cheek { background: rgba(255, 110, 120, .6); }
.platy.happy .p-bob { animation-duration: 3.4s; }

.platy.sad .p-fig { filter: saturate(.7) brightness(.93); }
.platy.sad .p-bob { animation-duration: 7.5s; }
.platy.sad .p-brow, .platy.sad .p-tear { display: block; }
.platy.sad .p-tear { animation: pTear 2.6s ease-in infinite; }
.platy.sad .p-tail, .platy.sad .p-foot { animation-duration: 6s; }
.platy.sad .p-bub { display: none; }

@keyframes pBob { 0%, 100% { translate: 0 -3px; rotate: -.8deg; } 50% { translate: 0 4px; rotate: 1deg; } }
@keyframes pTail { 0%, 100% { rotate: -11deg; } 50% { rotate: 1deg; } }
@keyframes pFoot { 0%, 100% { rotate: 14deg; } 50% { rotate: -14deg; } }
@keyframes pBlink { 0%, 93%, 100% { scale: 1 1; } 96% { scale: 1 .1; } }
@keyframes pRipple { 0% { scale: .4 .4; opacity: 0; } 25% { opacity: .85; } 100% { scale: 1.5 1.5; opacity: 0; } }
@keyframes pBubble { 0% { translate: 0 0; opacity: 0; } 20% { opacity: .9; } 100% { translate: 8px -34px; opacity: 0; } }
@keyframes pSpark { 0%, 100% { scale: .5; rotate: 0deg; opacity: .6; } 50% { scale: 1.1; rotate: 40deg; opacity: 1; } }
@keyframes pTear { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: 2px 34px; opacity: 0; } }