*{box-sizing:border-box}body{margin:0;color:#173f36;font-family:Arial,sans-serif;font-size:18px}.clap-wrap{max-width:1100px;margin:auto;padding:16px}header,.heading,footer{display:flex;align-items:center;justify-content:space-between;gap:16px}header{margin-bottom:16px}header .back{flex-shrink:0}h1{font-size:clamp(25px,4vw,42px);margin:4px 0 18px}.eyebrow{font-size:14px;letter-spacing:.05em;margin-bottom:5px}.back,a{color:#174e72}button,.back{font:inherit;font-weight:700;min-height:52px;padding:12px 18px;border:2px solid #b7cbbc;border-radius:17px;background:#fffdf6;color:#214c41;cursor:pointer;text-decoration:none}button:focus-visible,a:focus-visible{outline:4px solid #286ac2;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.primary{background:#285f93;border-color:#285f93;color:white}button[aria-pressed=true]{background:#dcebc9;border-color:#4c7446;box-shadow:0 3px 0 #4c7446}.modes{display:flex;gap:12px}.modes button{flex:1}.modes span{display:inline-block;color:#a66b12}.progress{display:flex;justify-content:center;gap:10px;margin:20px 0}.progress span{width:15px;height:15px;border:2px solid #597457;border-radius:50%;background:#fff}.progress .done{background:#6c9d68}.progress .current{background:#efbb54;outline:2px solid #efbb54;outline-offset:3px}.guide{display:flex;align-items:center;justify-content:center;gap:20px;max-width:760px;margin:auto}.funke{position:relative;border:0;padding:0;background:transparent;flex:0 0 155px;min-height:155px}.funke>img:first-child{display:block;width:100%;height:auto}.funke-hands{position:absolute;width:75px;height:75px;right:-16px;bottom:-7px;filter:drop-shadow(0 2px 0 #fff)}.bubble{position:relative;background:#fffefa;border:3px solid #577462;border-radius:46% 54% 48% 52% / 25% 35% 28% 37%;padding:20px 28px;min-height:100px;min-width:0;flex:1}.bubble p{margin:0;line-height:1.5}.dots{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;min-height:40px;margin:12px 0}.dot{display:inline-block;flex:0 0 25px;height:25px;border-radius:47% 53% 49% 51%;border:2px solid #0002;background:var(--dot,#4886bc)}.welcome{text-align:center;padding:22px 0}.welcome button,.welcome a{display:inline-block;margin:8px}.board{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;margin:16px 0}.picture-paper{text-align:center}.picture-paper img{display:block;width:min(100%,300px);height:auto;margin:auto;object-fit:contain}.your-turn{text-align:center}.clap-hand{display:inline-flex;align-items:center;flex-direction:column;background:#fff7d9;border:3px dashed #c18b39;border-radius:44% 46% 35% 38%;padding:10px 25px}.clap-hand img{width:clamp(110px,18vw,190px);height:auto}.clap-hand span{font-size:18px}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}#result{font-weight:700;line-height:1.5;min-height:28px}#sound{font-size:14px;padding:8px;min-width:80px}.error{background:#fff0d7;padding:14px;border:2px solid #a66b12;border-radius:15px}details{font-size:15px;line-height:1.6;border-top:1px solid #cbd7c2;padding-top:16px}summary{cursor:pointer;min-height:44px}footer{font-size:14px;padding:24px 0}.beat{animation:clap-beat .22s ease-out}.speaking{filter:drop-shadow(0 0 7px #f9c65d)}@keyframes clap-beat{0%{transform:scale(.86) rotate(-4deg)}55%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1)}}[hidden]{display:none!important}@media(max-width:600px){.clap-wrap{padding:10px}header{gap:6px}header .back{font-size:14px;padding:10px 7px}.heading{gap:5px}h1{font-size:26px}.modes{gap:7px}.modes button{padding:10px 7px;font-size:15px}.guide{gap:10px}.funke{flex-basis:120px;min-height:120px}.bubble{padding:16px;font-size:17px}.board{gap:10px;grid-template-columns:1fr 1fr}.picture-paper img{width:100%;max-width:240px}.clap-hand{padding:6px 10px}.clap-hand img{width:110px}.clap-hand span{font-size:15px}.actions button{padding:10px 12px}.dots{gap:8px}.dot{flex-basis:21px;height:21px}.funke-hands{width:64px;height:64px}.progress{margin:15px 0}footer{gap:10px}}@media(min-width:1400px){.clap-wrap{max-width:1350px}body{font-size:24px}.funke{flex-basis:220px}.guide{max-width:940px}.picture-paper img{width:340px;max-width:100%}.clap-hand img{width:230px}button{min-height:64px}h1{font-size:48px}}@media(prefers-reduced-motion:reduce){.beat{animation:none}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
button.picture-paper{border:0;padding:8px;background:transparent;min-width:0;border-radius:24px;touch-action:manipulation}
button.picture-paper:active{transform:scale(.98)}
#check{font-size:34px;min-width:72px;min-height:64px;padding:4px 18px}
#next,#retry,#undo{font-size:29px;min-width:60px;min-height:60px}
.model-button{display:inline-flex;align-items:center;gap:4px;margin:8px 0 0;padding:4px 9px;min-height:48px;background:#f7f2de}
.model-button img{object-fit:contain}
.board{gap:12px;max-width:780px;margin:12px auto}
@media(max-width:600px){.board{gap:5px}.clap-hand img{width:clamp(85px,27vw,145px)}.picture-paper img{max-height:230px;object-fit:contain}.actions{gap:5px}#check,#next,#retry,#undo{min-width:48px;min-height:52px;padding:3px 12px}.model-button img{width:30px;height:30px}.dots{margin:8px 0}}
/* Keep the complete child task visible in laptop/tablet landscape windows. */
@media screen and (min-width:800px) and (min-height:540px){
 .clap-wrap{width:100%;max-width:1320px;height:100svh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:8px 14px}
 .clap-wrap>header{margin:0;min-height:60px}
 .clap-wrap>header a.site-logo{width:180px;flex:0 1 180px}
 header .back{min-height:44px;padding:8px 14px;font-size:15px}
 .clap-wrap>main{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,2fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:6px 16px;min-height:0;padding:10px 14px}
 .heading{grid-column:1/-1;grid-row:1;gap:10px}
 .heading h1{font-size:28px;line-height:1.1;margin:1px 0 0}
 .heading .eyebrow{font-size:11px;line-height:1.2;margin:0}
 #sound{min-height:44px;padding:6px 10px}
 .modes{grid-column:1/-1;grid-row:2;gap:10px}
 .modes button{min-height:44px;padding:6px 12px;font-size:16px}
 .progress{grid-column:1/-1;grid-row:3;margin:2px 0;min-height:16px;align-items:center}
 .progress span{width:12px;height:12px}
 #error{grid-column:1/-1;grid-row:4;margin:0;padding:6px 10px;font-size:14px}
 .guide{grid-column:1;grid-row:5;flex-direction:column;justify-content:center;gap:8px;width:100%;min-width:0;align-self:center;margin:0}
 .funke{flex:none;width:clamp(95px,18svh,170px);min-height:0}
 .funke-hands{width:55px;height:55px;right:-8px}
 .bubble{width:100%;min-height:70px;flex:none;padding:12px 15px;font-size:17px}
 .bubble p{line-height:1.35}
 #demo{min-height:26px;margin:6px 0 0;gap:7px}
 #demo .dot{flex-basis:19px;height:19px}
 #board,#welcome,#finish{grid-column:2;grid-row:5;align-self:center;min-width:0;width:100%;margin:0;padding:0}
 #board{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:none}
 button.picture-paper{padding:4px}
 .picture-paper img{width:100%;max-width:360px;height:clamp(180px,calc(100svh - 320px),440px);max-height:none;object-fit:contain}
 .your-turn{display:grid;grid-template-columns:minmax(0,1fr) 54px;grid-template-areas:'hand model' 'answer answer' 'actions actions' 'result retry';align-items:center;gap:5px 7px;min-width:0}
 .clap-hand{grid-area:hand;justify-self:center;padding:6px 12px;min-height:48px;max-width:100%}
 .clap-hand img{width:clamp(88px,18svh,155px);max-width:100%;height:auto}
 .model-button{grid-area:model;flex-direction:column;gap:0;margin:0;padding:3px;min-width:48px;min-height:48px;justify-self:center;font-size:14px;line-height:1.1}
 .model-button img{width:25px;height:25px}
 #answer{grid-area:answer;min-height:28px;margin:0;gap:8px}
 #answer .dot{flex-basis:22px;height:22px}
 .actions{grid-area:actions;gap:7px;flex-wrap:nowrap}
 #check,#next,#undo,#retry{min-width:48px;min-height:48px;padding:3px 12px;font-size:29px}
 #retry{grid-area:retry;justify-self:center}
 #result{grid-area:result;min-height:22px;margin:0;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
 .clap-wrap>main>details{grid-column:1/-1;grid-row:6;margin:0;padding:0;font-size:13px}
 .clap-wrap>main>details>summary{min-height:26px;padding:2px 0}
 .clap-wrap>footer{padding:2px 0;font-size:12px;min-height:20px}
 body:has(details[open]) .clap-wrap{height:auto}
 body:has(details[open]) .clap-wrap>main{grid-template-rows:auto auto auto auto auto auto}
}
@media screen and (min-width:1400px) and (min-height:850px){
 .clap-wrap>header a.site-logo{width:230px;flex-basis:230px}
 .heading h1{font-size:36px}.modes button{min-height:54px;font-size:20px}
 .bubble{font-size:22px}#check,#next,#undo,#retry{min-width:64px;min-height:64px;font-size:36px}
 .your-turn{grid-template-columns:minmax(0,1fr) 70px}.model-button{min-width:64px;min-height:64px}
 .model-button img{width:32px;height:32px}#result{font-size:19px}
}
@media screen and (max-width:799px){
 .clap-wrap{padding:8px 10px}header{margin-bottom:8px}header a.site-logo{width:min(48vw,220px);flex-basis:min(48vw,220px)}
 .heading h1{font-size:25px;margin:2px 0 8px}.eyebrow{font-size:11px;margin:0}.progress{margin:10px 0}
 .guide{gap:8px}.funke{flex-basis:85px;min-height:85px}.bubble{padding:12px 15px;min-height:65px;font-size:16px}
 .picture-paper img{max-height:190px;object-fit:contain}.board{margin:8px auto}.clap-hand img{width:clamp(85px,25vw,125px)}
 #result{font-size:15px;margin:6px 0;line-height:1.35}footer{padding:12px 0}
}
@media screen and (min-width:800px) and (min-height:540px) and (max-height:650px){
 .clap-wrap>header{min-height:52px}.clap-wrap>header a.site-logo{width:156px;flex-basis:156px}
 .heading .eyebrow{display:none}.heading h1{font-size:25px}
 .clap-hand img{width:88px}.funke{width:95px}.bubble{font-size:16px;padding:10px 12px}
}

/* The child sees only the sound control above the round dots, in every game state. */
.heading{justify-content:flex-end}
/* Reuse the irregular, twice-drawn outline from Klassenfunke's speech bubbles. */
.bubble{background:transparent url('klatsch-sprechblase-v1.svg') center/100% 100% no-repeat;border:0;border-radius:0;padding:24px 30px 24px 38px;min-height:100px}
@media screen and (min-width:800px) and (min-height:540px){
 .clap-wrap>main{grid-template-rows:auto auto auto minmax(0,1fr)}
 .progress{grid-row:2}
 #error{grid-row:3}
 .guide,#board,#welcome,#finish{grid-row:4}
 .clap-wrap>main>details{grid-row:5}
 .bubble{padding:20px 24px 20px 30px;min-height:90px}
 body:has(details[open]) .clap-wrap>main{grid-template-rows:auto auto auto auto auto}
}
@media screen and (max-width:799px){.bubble{padding:20px 20px 20px 29px;min-height:90px}}

#result:empty{display:none}