*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#ffddea;color:#231a28;touch-action:none}button,input{font:inherit}.hidden{display:none!important}
.overlayScreen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 20% 10%,#fff7a8 0 9%,transparent 26%),linear-gradient(145deg,#ff88b8,#83ddff)}.startCard,.scoreCard{width:min(560px,100%);background:#fff;border:4px solid #231a28;border-radius:28px;padding:24px;text-align:center;box-shadow:9px 9px 0 #231a28}.logo{font-size:3.7rem}.startCard h1{font-size:clamp(2.2rem,10vw,4.2rem);line-height:.95;margin:3px 0 10px}.startCard p{font-weight:800}.startCard input{width:100%;padding:15px;border:3px solid #231a28;border-radius:15px;font-size:1.1rem}.primary,.secondary{border:3px solid #231a28;border-radius:16px;padding:13px 16px;font-weight:950;box-shadow:4px 4px 0 #231a28;cursor:pointer}.primary{display:block;width:100%;background:#ffe258;margin-top:11px}.secondary{display:block;width:100%;background:#fff;margin-top:11px}.closeBtn{float:right;border:0;background:none;font-size:1.5rem;font-weight:900}.scoreCard{max-height:85vh;overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:9px;border-bottom:2px solid #eee;text-align:left}
.game{position:fixed;inset:0;background:linear-gradient(#dff7ff 0 20%,#fff4dc 62%,#efc0a7);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.hud{height:50px;flex:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;padding:5px 7px;z-index:15}.hudItem,.timer{background:#fff;border:3px solid #231a28;border-radius:14px;padding:5px 9px;font-weight:950;box-shadow:2px 2px 0 #231a28}.timer{position:relative;text-align:center;overflow:hidden;min-width:104px;padding:4px}.timer strong{position:relative;z-index:2;font-size:1.08rem}.timerTrack{position:absolute;inset:0;background:#efefef}.timerBar{height:100%;width:100%;background:#65e2a5;transition:width .1s linear}.timer.danger .timerBar{background:#ff796f}.timer.danger{animation:pulse .5s infinite alternate}@keyframes pulse{to{transform:scale(1.04)}}
.stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}.prompt{position:absolute;z-index:22;top:2px;left:50%;transform:translateX(-50%);background:#231a28;color:#fff;border-radius:999px;padding:5px 13px;font-weight:1000;font-size:clamp(.78rem,3.4vw,1rem);pointer-events:none;white-space:nowrap;max-width:86%;overflow:hidden;text-overflow:ellipsis}.bubble{position:absolute;z-index:13;top:36px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.91);border:2px solid #231a28;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:800;max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.flash{position:absolute;left:50%;top:18%;transform:translate(-50%,-50%);z-index:80;font-weight:1000;font-size:clamp(1.8rem,8vw,3.8rem);text-shadow:3px 3px 0 #fff;pointer-events:none;opacity:0}.flash.pop{animation:flash .65s ease-out}@keyframes flash{0%{opacity:1;transform:translate(-50%,-50%) scale(.5) rotate(-8deg)}60%{opacity:1;transform:translate(-50%,-70%) scale(1.15) rotate(3deg)}100%{opacity:0;transform:translate(-50%,-100%) scale(1)}}
.customer{position:absolute;left:50%;bottom:-5%;transform:translateX(-50%);width:min(97vw,540px);height:min(82vh,760px);--accent:#55cfe8}.head{--skin:#efb98f;--hair:#6e351e;position:absolute;z-index:4;left:50%;top:15%;transform:translateX(-50%);width:min(67vw,350px);aspect-ratio:.82;background:var(--skin);border:4px solid #231a28;border-radius:45% 45% 48% 48%;box-shadow:inset 0 -15px 0 rgba(140,70,50,.08)}.neck{position:absolute;z-index:2;width:20%;height:20%;left:40%;top:56%;background:var(--skin,#efb98f);border:4px solid #231a28}.cape{position:absolute;z-index:2;bottom:0;left:50%;transform:translateX(-50%);width:90%;height:39%;background:var(--accent);border:4px solid #231a28;border-radius:45% 45% 12% 12%;display:flex;align-items:center;justify-content:center;font-size:clamp(.9rem,4vw,1.35rem);font-weight:1000}
.hairBack{position:absolute;z-index:1;left:-8%;top:-13%;width:116%;height:61%;border:4px solid #231a28;border-radius:50% 50% 30% 30%;background:var(--hair)}.hairZone{position:absolute;z-index:6;background:var(--hair);border:3px solid #231a28;transition:height .15s,transform .15s,opacity .2s}.hairTop{left:4%;top:-15%;width:92%;height:35%;border-radius:55% 55% 30% 30%}.bangs{left:12%;top:8%;width:76%;height:24%;border-radius:22% 25% 50% 45%;clip-path:polygon(0 0,100% 0,93% 65%,82% 45%,73% 84%,60% 48%,50% 91%,39% 49%,27% 82%,17% 47%,5% 73%)}.side{top:8%;width:25%;height:49%;border-radius:45%}.sideL{left:-8%}.sideR{right:-8%}.hairZone.cutShort{height:13%!important}.side.cutShort{height:24%!important}.hairZone.shaved{height:4%!important;opacity:.38}.hairZone.catStyled{transform:rotate(-8deg) scale(1.03)}.hairZone.wet,.hairBack.wet{filter:brightness(.68) saturate(.85)}
.head[data-hair="mohawk"] .hairTop{left:30%;width:40%;height:44%;border-radius:60% 60% 20% 20%}.head[data-hair="cloud"] .hairTop{top:-20%;height:45%;border-radius:60%}.head[data-hair="cloud"] .side{width:32%;height:55%}.head[data-hair="bob"] .side{height:62%;width:29%}.head[data-hair="wild"] .hairTop{clip-path:polygon(0 70%,8% 15%,20% 48%,31% 0,42% 48%,56% 5%,67% 48%,82% 4%,91% 50%,100% 18%,100% 100%,0 100%)}.head[data-hair="flat"] .hairTop{height:20%;border-radius:25%}.head[data-hair="flat"] .bangs{height:13%}
.ear{position:absolute;z-index:3;top:40%;font-size:clamp(2rem,8vw,3.4rem);filter:drop-shadow(1px 2px 0 #231a28)}.earL{left:-16%}.earR{right:-16%}.ear.gone{opacity:0}.face{position:absolute;z-index:4;left:15%;right:15%;top:39%;text-align:center;font-weight:900}.eyes{font-size:clamp(1.3rem,6vw,2rem)}.nose{font-size:1.4rem}.mouth{font-size:2rem}.wetOverlay{position:absolute;z-index:8;inset:-14%;pointer-events:none;opacity:0;background:radial-gradient(circle at 28% 18%,rgba(63,174,255,.8) 0 2%,transparent 3%),radial-gradient(circle at 70% 45%,rgba(63,174,255,.8) 0 2%,transparent 3%),linear-gradient(rgba(69,174,255,.06),rgba(69,174,255,.22));transition:opacity .2s}.wetOverlay.wet{opacity:1}
.tuftLayer{position:absolute;z-index:7;inset:-18%;pointer-events:none}.tuft{position:absolute;width:10px;height:34px;background:var(--hair);border:2px solid #231a28;border-radius:60%;transform-origin:50% 100%}.tuft[data-zone="top"]{left:calc(25% + var(--i)*5.5%);top:5%}.tuft[data-zone="bangs"]{left:calc(27% + var(--i)*5.3%);top:24%;height:27px}.tuft[data-zone="left"]{left:11%;top:calc(23% + var(--i)*4.1%);transform:rotate(-35deg)}.tuft[data-zone="right"]{right:11%;top:calc(23% + var(--i)*4.1%);transform:rotate(35deg)}.tuft.gone{animation:fly .65s ease-out forwards}@keyframes fly{to{transform:translate(var(--flyx),var(--flyy)) rotate(560deg) scale(.2);opacity:0}}
.toolCursor{position:fixed;z-index:100;font-size:clamp(3.2rem,14vw,6rem);transform:translate(-42%,-42%);pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(35,26,40,.35));will-change:left,top}.toolCursor.katana,.toolCursor.cat{font-size:clamp(4rem,17vw,7rem)}.splashLayer,.bonusLayer{position:absolute;inset:0;pointer-events:none;z-index:35}.particle{position:absolute;font-size:1.3rem;animation:particle .65s ease-out forwards}@keyframes particle{to{transform:translate(var(--dx),var(--dy)) scale(.25) rotate(180deg);opacity:0}}.timeBonus{position:absolute;top:-52px;pointer-events:auto;background:#ffe258;border:3px solid #231a28;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;font-size:.9rem;font-weight:1000;box-shadow:3px 3px 0 #231a28;animation:fall 3.2s linear forwards}@keyframes fall{to{transform:translateY(calc(100vh - 135px)) rotate(320deg)}}.timeBonus.caught{animation:none;opacity:0}
.bottomPanel{flex:none;z-index:30;background:rgba(255,255,255,.96);border-top:4px solid #231a28;padding:6px 8px max(7px,env(safe-area-inset-bottom));min-height:83px}.toolTray{display:flex;gap:7px;justify-content:center;overflow-x:auto}.toolBtn{flex:0 0 auto;min-width:72px;border:3px solid #231a28;background:#fff;border-radius:14px;padding:4px 7px;font-weight:950;box-shadow:2px 2px 0 #231a28}.toolBtn span{display:block;font-size:1.75rem;line-height:1}.toolBtn small{font-size:.67rem}.toolBtn.selected{background:#ffe258;transform:translate(1px,1px);box-shadow:1px 1px 0 #231a28}
.roundResult{position:fixed;inset:0;z-index:45;background:rgba(35,26,40,.82);display:grid;place-items:center;padding:18px}.ratingCard{background:#fff;width:min(470px,100%);border:4px solid #231a28;border-radius:27px;padding:22px;text-align:center;box-shadow:8px 8px 0 #231a28}.ratingFace{font-size:4rem}.ratingCard h2{font-size:2.5rem;margin:2px}.stars{font-size:1.7rem;min-height:40px}.finalRating{font-size:3.7rem;font-weight:1000}.shake{animation:shake .22s}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
@media(max-height:680px){.hud{height:44px}.prompt{top:0}.bubble{display:none}.customer{height:78vh;bottom:-10%}.head{top:10%;width:min(53vw,280px)}.bottomPanel{min-height:70px;padding:4px 6px}.toolBtn span{font-size:1.45rem}.toolBtn{min-width:64px;padding:3px 5px}.cape{height:34%}}
@media(max-width:420px){.hudItem{padding:4px 6px;font-size:.8rem}.timer{min-width:88px}.customer{width:100vw}.head{width:min(75vw,325px)}.bubble{top:33px}.timeBonus{width:46px;height:46px}}
@media(min-width:760px) and (orientation:landscape){.customer{height:min(82vh,700px);width:min(52vw,520px)}.head{width:min(32vw,310px);top:10%}.bottomPanel{min-height:76px}}
.countdownOverlay{position:absolute;inset:0;z-index:120;display:grid;place-content:center;justify-items:center;gap:4px;background:rgba(35,26,40,.28);pointer-events:none;backdrop-filter:blur(1px)}
.countdownNext{background:#fff;border:4px solid #231a28;border-radius:999px;padding:7px 16px;font-weight:1000;box-shadow:4px 4px 0 #231a28;font-size:clamp(.9rem,4vw,1.25rem)}
.countdownNumber{font-size:clamp(5rem,25vw,10rem);line-height:1;font-weight:1000;color:#ffe258;text-shadow:5px 5px 0 #231a28,-2px -2px 0 #231a28;animation:countPop .7s ease-out infinite}
@keyframes countPop{0%{transform:scale(.65);opacity:.25}35%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
.fallItem{position:absolute;top:-58px;pointer-events:auto;display:grid;place-items:center;animation:fall 3.5s linear forwards;z-index:2}
.fallItem.timeBonus{background:#ffe258;border:3px solid #231a28;border-radius:50%;width:52px;height:52px;font-size:.9rem;font-weight:1000;box-shadow:3px 3px 0 #231a28}
.fallItem.hazard{width:58px;height:58px;font-size:2.8rem;filter:drop-shadow(2px 3px 0 #fff) drop-shadow(3px 4px 0 #231a28)}
.fallItem.caught{animation:none;opacity:0}
@media(max-width:420px){.fallItem.hazard{width:50px;height:50px;font-size:2.35rem}.fallItem.timeBonus{width:44px;height:44px}}

/* v5: längere Touch-Runden, Körperpannen, neue Frisuren */
.cape.soaked{background:linear-gradient(180deg,var(--accent),#3f8fbd);filter:saturate(.8) brightness(.88);overflow:visible}
.cape.soaked::after{content:'💧 💧 💧';position:absolute;left:10%;right:10%;bottom:-28px;font-size:1.6rem;letter-spacing:1.4rem;animation:dripClothes .8s infinite alternate;pointer-events:none}
@keyframes dripClothes{to{transform:translateY(14px);opacity:.35}}
.cape.dropped{animation:clothesDrop .75s cubic-bezier(.55,.05,.8,.2) forwards;pointer-events:none}
@keyframes clothesDrop{0%{transform:translateX(-50%) translateY(0) rotate(0) scale(1)}35%{transform:translateX(-50%) translateY(9%) rotate(-7deg) scale(1.03)}100%{transform:translateX(-50%) translateY(145%) rotate(18deg) scale(.72);opacity:0}}
.censor{position:absolute;z-index:3;left:50%;bottom:4%;transform:translateX(-50%);width:64%;height:31%;border:4px solid #231a28;border-radius:44% 44% 15% 15%;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(45deg,#231a28 0 15px,#ff6ba8 15px 30px);color:#fff;font-weight:1000;font-size:clamp(1rem,5vw,1.8rem);text-shadow:2px 2px 0 #231a28}
.angryFace .eyes{transform:scaleX(1.08)}.angryFace .mouth{font-size:2.45rem;font-weight:1000}.happyFace{filter:brightness(1.04)}
.customer.shockZoom{animation:shockZoom .65s ease-out}.customer.happyGlow{animation:happyGlow .7s ease-out}
@keyframes shockZoom{0%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) scale(1.18)}100%{transform:translateX(-50%) scale(1)}}
@keyframes happyGlow{45%{filter:drop-shadow(0 0 22px #ffe258);transform:translateX(-50%) scale(1.04)}}
.flyingEar{position:fixed;z-index:150;font-size:clamp(2.8rem,12vw,5rem);transform:translate(-50%,-50%);pointer-events:none;animation:earLaunch .85s cubic-bezier(.1,.7,.2,1) forwards;filter:drop-shadow(3px 4px 0 #231a28)}
@keyframes earLaunch{0%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}28%{transform:translate(calc(-50% + var(--earX)*.35),calc(-50% + var(--earY)*.35)) rotate(480deg) scale(1.8);opacity:1}58%{transform:translate(calc(-50% + var(--earX)*.78),calc(-50% + var(--earY)*.78)) rotate(900deg) scale(3.4);opacity:1}100%{transform:translate(calc(-50% + var(--earX)),calc(-50% + var(--earY))) rotate(1440deg) scale(13);opacity:0}}
.hairZone.bald{background:var(--skin)!important;opacity:1!important;filter:none!important;border-color:rgba(35,26,40,.16)!important}.hairZone.bald::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.3),transparent 35%)}.head.fullyBald .hairBack{opacity:0!important}

/* Mehr einzelne Haarbüschel */
.tuft[data-zone="top"]{left:calc(18% + var(--i)*4.8%)}
.tuft[data-zone="bangs"]{left:calc(20% + var(--i)*4.55%)}
.tuft[data-zone="left"]{top:calc(18% + var(--i)*2.9%)}
.tuft[data-zone="right"]{top:calc(18% + var(--i)*2.9%)}

.hairZone{transition:filter .18s,background .18s,opacity .18s,height .18s}.hairZone.wet{filter:brightness(calc(.68 + var(--dry,0)*.32)) saturate(calc(.85 + var(--dry,0)*.15))}.flash.mega{opacity:1!important;animation:megaFlash 1s ease-out forwards!important;font-size:clamp(3rem,15vw,8rem)!important;color:#ffe258;text-align:center;width:95%;top:42%}@keyframes megaFlash{0%{transform:translate(-50%,-50%) scale(.25) rotate(-8deg)}30%{transform:translate(-50%,-50%) scale(1.25) rotate(4deg)}70%{transform:translate(-50%,-50%) scale(1.05) rotate(-2deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}.megaShake{animation:megaShake .55s linear 2}@keyframes megaShake{0%,100%{transform:translate(0)}20%{transform:translate(-10px,7px) rotate(-1deg)}40%{transform:translate(12px,-7px) rotate(1deg)}60%{transform:translate(-8px,-5px) rotate(-.7deg)}80%{transform:translate(9px,6px) rotate(.7deg)}}

/* v7 gameplay polish */
.flash.pop{animation:flashLong 1.65s ease-out forwards}
@keyframes flashLong{0%{opacity:1;transform:translate(-50%,-50%) scale(.5) rotate(-8deg)}22%{opacity:1;transform:translate(-50%,-70%) scale(1.15) rotate(3deg)}72%{opacity:1;transform:translate(-50%,-70%) scale(1.05) rotate(-1deg)}100%{opacity:0;transform:translate(-50%,-100%) scale(1)}}
.flash.mega{animation:megaFlashLong 2s ease-out forwards!important}
@keyframes megaFlashLong{0%{opacity:1;transform:translate(-50%,-50%) scale(.25) rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(4deg)}75%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
.bangs.eyesFree{height:9%!important;top:2%!important;clip-path:polygon(0 0,100% 0,96% 72%,4% 72%)!important}
.bodySkin{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);width:86%;height:38%;background:var(--skin);border:4px solid #231a28;border-radius:46% 46% 12% 12%;box-shadow:inset 0 -18px 0 rgba(120,70,50,.08)}
.flyingEar{font-size:clamp(3.4rem,14vw,6rem);animation:earLaunchV7 1.35s cubic-bezier(.08,.72,.18,1) forwards!important;transform-origin:center center}
@keyframes earLaunchV7{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.55)}35%{opacity:1;transform:translate(calc(-50% + var(--earX)*.55),calc(-50% + var(--earY)*.55)) rotate(720deg) scale(1.4)}72%{opacity:1;transform:translate(calc(-50% + var(--earX)),calc(-50% + var(--earY))) rotate(1280deg) scale(3.2)}100%{opacity:0;transform:translate(calc(-50% + var(--earX)),calc(-50% + var(--earY))) rotate(1850deg) scale(13)}}
.finalQuoteOverlay{position:fixed;inset:0;z-index:230;display:grid;place-items:center;pointer-events:none;background:rgba(35,26,40,.12);padding:5vw}
.finalQuoteText{max-width:1000px;text-align:center;font-weight:1000;font-size:clamp(2.4rem,11vw,7.5rem);line-height:.92;color:#fff;text-shadow:5px 5px 0 #231a28,-3px -3px 0 #ff6ba8;transform:scale(.2) rotate(-8deg)}
.finalQuoteOverlay.slam .finalQuoteText{animation:quoteSlam 2s cubic-bezier(.12,.9,.18,1) forwards}
@keyframes quoteSlam{0%{opacity:0;transform:scale(.18) rotate(-10deg)}12%{opacity:1;transform:scale(1.24) rotate(3deg)}30%{transform:scale(.96) rotate(-1deg)}82%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.35)}}
.quoteShake{animation:quoteShake .12s linear 5}
@keyframes quoteShake{0%,100%{transform:translate(0)}25%{transform:translate(-9px,5px) rotate(-.5deg)}50%{transform:translate(8px,-6px) rotate(.5deg)}75%{transform:translate(-5px,-3px)}}
.confettiLayer{position:fixed;inset:0;z-index:220;pointer-events:none;overflow:hidden}
.confettiBit{position:absolute;font-style:normal;font-size:clamp(1.3rem,5vw,3rem);animation:confettiBlast 1.8s cubic-bezier(.08,.65,.23,1) forwards}
@keyframes confettiBlast{0%{opacity:1;transform:translate(-50%,-50%) scale(.3) rotate(0)}75%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.1) rotate(var(--rot))}100%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy) + 220px)) scale(.8) rotate(var(--rot))}}