/* Generated artwork is kept intact; each quarter is framed as an independent layer. */
.film{background:radial-gradient(circle at 8% 10%,#ffc66a66 0,transparent 9%),radial-gradient(circle at 90% 17%,#f9ce7666 0,transparent 7%),radial-gradient(ellipse at 50% 48%,#64815a,#294c36 65%,#153a2e);width:min(100%,440px)}
.bunting{position:absolute;top:65px;left:-4%;width:108%;height:40px;display:flex;justify-content:space-around;transform:rotate(-5deg);border-top:2px solid #e1c19b80;pointer-events:none}.bunting i{width:38px;height:44px;background:#d48b95;clip-path:polygon(0 0,100% 0,50% 100%)}.bunting i:nth-child(2n){background:#e8be5d}.bunting i:nth-child(3){background:#618db0}.intro{padding-top:28px}h1{font-size:40px}.stage{min-height:255px}.halo{inset:7% 7% 0%;background:radial-gradient(ellipse,#d7d49118,transparent 65%)}
#family{inset:auto -2% 3%;height:auto;aspect-ratio:1672/941;display:flex;align-items:stretch;gap:0;transition:transform 1s;z-index:2}
.person,.person[data-person=older],.person[data-person=younger],.person[data-person=son]{height:100%;width:25%;flex-shrink:0;--pos:0%;--mx:57%;--my:20%;--mouth:.15}
.person[data-person=older]{--pos:33.333333%;--mx:52%;--my:26%}.person[data-person=younger]{--pos:66.666667%;--mx:48%;--my:29.5%}.person[data-person=son]{--pos:100%;--mx:42%;--my:37%}
.clay-body,.clay-jaw{position:absolute;inset:0;background-image:url('assets/familie-knetfiguren.png');background-size:400% 100%;background-position:var(--pos) 50%;background-repeat:no-repeat}
.clay-jaw{clip-path:ellipse(9% 1.5% at var(--mx) var(--my));transform-origin:var(--mx) var(--my);transform:scaleY(calc(1 + var(--mouth)*.4));pointer-events:none}
.table{height:8%;background:linear-gradient(#c49b67,#966842);box-shadow:0 -4px 0 #dfba85;z-index:1}
#cake{width:90%;left:5%;bottom:-8%;height:auto;aspect-ratio:3/2;filter:drop-shadow(0 12px 14px #12261866)}
.flame{transition-delay:var(--delay,0ms);filter:drop-shadow(0 0 2px #ffb64f)}
.film[data-scene=blow] #family,.film[data-scene=cheer] #family,.film[data-scene=end] #family{transform:translateY(-30%) scale(.87)}
.film[data-scene=speech] .person[data-person=older]{transform:translateY(3%) scale(1.19);z-index:4}
.film[data-scene=sing] .person{animation:sway 1.3s infinite alternate ease-in-out}.controls{min-height:170px;padding-top:24px}.note{font-size:9px}#continueQuiz{margin-bottom:8px}
#quizPanel,#finalePanel{position:absolute;inset:22% 6% 8%;background:#214538f5;border:1px solid #d6c29666;border-radius:22px;z-index:12;padding:24px;overflow:auto;text-align:center;box-shadow:0 20px 50px #0006}#quizQuestion{font-size:24px;line-height:1.25;font-weight:normal}#quizFeedback{font:14px/1.5 Arial,sans-serif}#quizNext{margin-top:15px}.clown{font-size:90px;animation:sway .8s infinite alternate}#travelReveal{white-space:pre-line;font-size:20px;line-height:1.5}.in-quiz .controls,.in-finale .controls{visibility:hidden}
@media(max-width:760px){.film{width:min(100%,480px);min-height:0;height:auto;aspect-ratio:9/16}.intro{padding-top:25px}h1{font-size:clamp(27px,8vw,40px);margin:12px 0}.stage{min-height:0}header{padding:20px 24px}.controls{min-height:155px;padding:20px 22px 0}footer{padding:14px 22px}.bunting{top:55px;height:30px}.bunting i{height:30px;width:30px}#caption{font-size:12px;min-height:28px}#instruction{font-size:12px;margin-bottom:10px}button{padding:13px 15px}.production{font-size:12px}}
@media(prefers-reduced-motion:reduce){.clay-jaw{transform:none}.person,.clown{animation:none!important}}

.production audio{width:100%;margin:5px 0 14px}.production summary{cursor:pointer;color:#efd5a1}