*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#171414;font-family:Arial,"Noto Sans KR",sans-serif;color:#261a18;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #b66c58;outline-offset:4px}
[hidden]{display:none!important}

.app{--top:116px;--bottom:86px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);width:min(480px,100vw);height:100vh;height:100dvh;margin:auto;background:#f3e6de;position:relative;overflow:hidden}
.layer{position:absolute;inset:0;background:#f3e6de;overflow:hidden;isolation:isolate}
.layer.ad{animation:adIn .32s ease-out}
.layer.leave{animation:adOut .28s ease-in forwards;pointer-events:none}
@keyframes adIn{from{transform:translateY(100%)}}
@keyframes adOut{to{transform:translateY(100%)}}

/* ── 상단 ── */
.top{height:calc(var(--top) + var(--sat));padding:calc(13px + var(--sat)) 18px 10px;background:#fff8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;z-index:20;border-bottom:1px solid #8b62532b}
.layer.ad .top{background:#fff5;border-bottom-color:#2c211e40}
.meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.kicker{font-size:10px;letter-spacing:2px;color:#8b6253;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta-right{display:flex;align-items:center;gap:6px;flex:none}
.ad-badge{font-size:10px;font-weight:900;letter-spacing:1px;background:#2c211e;color:#f0d4c8;border-radius:5px;padding:3px 6px}
.score{font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;color:#5f4039;background:#fff9;border:1px solid #8b625330;border-radius:20px;padding:3px 9px;white-space:nowrap}.score:before{content:"SCORE ";font-size:8px;letter-spacing:1px;color:#8b6253}.score.gain{animation:gain .3s ease-out}.score.reached{background:#2c211e;color:#f0d4c8}@keyframes gain{40%{transform:scale(1.15)}}
.toggle{border:1px solid #8b625330;background:#7c4b4212;border-radius:20px;font-size:11px;line-height:1;padding:4px 7px}.toggle.off{opacity:.35;filter:grayscale(1)}
.title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px}.title h1{font-size:23px;margin:0;letter-spacing:-.7px}.timer{font-size:25px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}.timer small{font-size:10px;color:#8b6253;margin-left:3px}.timer.urgent{color:#ac3c32}
.details{display:flex;justify-content:space-between;align-items:center;margin-top:7px;gap:8px;font-size:11px;color:#87675f}.count{font-weight:900;font-size:15px;color:#5f4039}.count small{font-size:9px;font-weight:700;letter-spacing:.4px}.info{font-size:10px}
.progress{height:5px;background:#c9aaa0;margin-top:7px;border-radius:9px;overflow:hidden}.fill{height:100%;width:0;background:#7c4b42;transition:width .18s}

/* ── 피부 (색은 skin.js가 라운드마다 바꿉니다) ── */
.skinWrap{--skin-1:#e5b4a1;--skin-2:#d99c8d;--skin-3:#e9bca8;--skin-dot:#c98e7f;--bump:#c87870;--pore:#9e675d;--lip:#b9746a;position:absolute;inset:calc(var(--top) + var(--sat)) 0 calc(var(--bottom) + var(--sab));overflow:hidden;
 background:radial-gradient(circle at 18% 18%,var(--skin-dot) 0 2px,transparent 3px),radial-gradient(circle at 73% 29%,var(--skin-dot) 0 2px,transparent 3px),radial-gradient(circle at 45% 65%,var(--skin-dot) 0 1.5px,transparent 2.5px),linear-gradient(135deg,var(--skin-1),var(--skin-2) 55%,var(--skin-3))}
.skinWrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,transparent 0 45%,#8e5e5020 100%)}
.skinWrap.scalp{background:radial-gradient(var(--pore) 0 .8px,transparent 1.4px) 0 0/19px 23px,radial-gradient(var(--skin-dot) 0 .9px,transparent 1.5px) 7px 11px/29px 31px,linear-gradient(160deg,var(--skin-3),var(--skin-1) 50%,var(--skin-2))}
.skinWrap.face:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 75% at 50% 12%,transparent 62%,#5a2f2526 100%)}
.skinWrap>svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none}

/* ── INGROWN ── */
.bump{fill:var(--bump);opacity:.36;transition:opacity .3s}.pore{fill:var(--pore);opacity:.36}.under{fill:none;stroke:#49312d;stroke-width:5.2;stroke-linecap:round;opacity:.86;pointer-events:none}.tip{fill:#342421;pointer-events:none}.hair{fill:none;stroke:#382824;stroke-width:5;stroke-linecap:round;filter:drop-shadow(1px 2px 1px #0003);pointer-events:none}.hair.grab{stroke-width:6.5}.root{fill:#6d453c;opacity:0;pointer-events:none}.root.show{opacity:.9}
.hair-hit{fill:none;stroke:transparent;stroke-width:23;stroke-linecap:round;pointer-events:stroke;cursor:grab}.hair-hit:active{cursor:grabbing}.tip-hit{fill:transparent;pointer-events:all;cursor:pointer}
.ring{fill:none;stroke:#fff;stroke-width:2.5;opacity:.85;pointer-events:none;animation:ring 1.2s infinite}@keyframes ring{50%{r:17;opacity:.2}}
.double-badge{font-size:10px;fill:#6c4139;font-weight:800;pointer-events:none;opacity:.7}
.residue{cursor:pointer;touch-action:none}.residue-hit{fill:transparent;pointer-events:all}.residue-dot{fill:#30231f;stroke:#60453e;stroke-width:1.5}.squeeze-track{fill:none;stroke:#7c4b4230;stroke-width:3}.squeeze-fill{fill:none;stroke:#fff4e8;stroke-width:3.5;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}.residue-label{font-size:9px;fill:#6c4139;font-weight:800;pointer-events:none}.squeeze-mark{fill:none;stroke:#a46152;stroke-width:2;opacity:0;pointer-events:none}.residue.pressing .squeeze-mark{opacity:.7}.residue.pressing .residue-dot{transform-box:fill-box;transform-origin:center;transform:scale(.75,1.2)}
.expelled{fill:#4c352a;pointer-events:none;animation:expel .32s ease-out forwards}@keyframes expel{to{transform:translateY(-38px) scale(.4);opacity:0}}

/* ── GRAY OUT (새치) ── */
.strand{pointer-events:none}
.strand-line,.strand-outline{fill:none;stroke-linecap:round}
.strand-line{stroke-width:3}
.strand.black .strand-line{stroke:#241916}
.strand.white .strand-line{stroke:#f8f5ef}
.strand-outline{stroke:#3a221c59;stroke-width:5}
.strand.grab .strand-line{stroke-width:4.4}.strand.grab .strand-outline{stroke-width:6.4}
.strand.grab{filter:drop-shadow(0 2px 2px #0005)}
.strand-bulb{fill:#efe4d6;stroke:#6d453c;stroke-width:1;opacity:0}.strand-bulb.show{opacity:1}

/* ── ZAP BEARD (레이저) ── */
.mouth{pointer-events:none}.lip{fill:var(--lip);opacity:.85}.lip.lower{opacity:.75}.lip-line{fill:none;stroke:#00000033;stroke-width:2}
.whisker{pointer-events:none}.whisker-line{fill:none;stroke:#2c201c;stroke-width:2.6;stroke-linecap:round}.whisker-root{fill:#2c201c}
.whisker.tough .whisker-line{stroke:#1d1411;stroke-width:3.8}
.whisker.singed .whisker-line{stroke:#6e4c3e;stroke-dasharray:4 3}
.whisker.zapped{transform-box:fill-box;transform-origin:center;animation:zapped .4s ease-out forwards}@keyframes zapped{40%{opacity:.9}to{opacity:0;transform:scale(.4)}}
.mole{fill:#5b3a2c;stroke:#4a2e22;stroke-width:1}.mole-hi{fill:#ffffff30}
.burn{fill:#c2412f;opacity:.42;stroke:#8c2a1d;stroke-width:1.5;stroke-opacity:.5;pointer-events:none}
.beam{stroke:#ff4d6d;stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 4px #ff4d6d);animation:beam .2s ease-out forwards;pointer-events:none}@keyframes beam{to{opacity:0;stroke-width:1}}
.flash{fill:#fff;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:flash .26s ease-out forwards}@keyframes flash{from{opacity:.95;transform:scale(.4)}to{opacity:0;transform:scale(2.4)}}
.smoke{fill:#8a7a74;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:smoke .6s ease-out forwards}@keyframes smoke{from{opacity:.5}to{opacity:0;transform:translateY(-26px) scale(2.2)}}
.reticle{pointer-events:none}.reticle .r-ring{fill:#ff4d6d14;stroke:#ff4d6d;stroke-width:1.6}.reticle .r-cross{stroke:#ff4d6d;stroke-width:1.4}.reticle .r-dot{fill:#ff4d6d}.reticle.charging{opacity:.4}

/* ── BROW FIX (눈썹) ── */
.eye{pointer-events:none}.eyelid{fill:none;stroke:#4a302a;stroke-width:3.2;stroke-linecap:round;opacity:.75}.eyelid-crease{fill:none;stroke:var(--skin-dot);stroke-width:2.2;opacity:.8}.lash{fill:none;stroke:#2b1d19;stroke-width:1.8;stroke-linecap:round;opacity:.85}
.brow-shadow{fill:none;stroke:#3b2a22;stroke-linecap:round;pointer-events:none}
.brow-hair{pointer-events:none}.brow-shape{fill:#3a2a22;opacity:.92}.brow-hair.stray .brow-shape{fill:#2c1f19;opacity:1}
.brow-tent{fill:var(--bump);opacity:0}
.brow-hair.grab{filter:drop-shadow(0 2px 2px #0006)}.brow-hair.grab .brow-shape{fill:#1d1410}
.brow-hair.broken .brow-shape{fill:#4d372d}

/* ── UNTIE (고무줄) ── */
.tie-hair{pointer-events:none}.tie-strand{fill:none;stroke:var(--hair);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.tie-strand.light{stroke:#ffffff;opacity:.16;stroke-width:3}
.band{cursor:pointer}.band ellipse{fill:none}.band-edge{stroke:#00000059;stroke-width:10}.band-body{stroke:var(--band);stroke-width:7}.band-shine{stroke:#ffffff70;stroke-width:1.6}
.band.buried{filter:brightness(.72) saturate(.7)}
.band.untie ellipse{transition:stroke-dashoffset .48s ease-in,opacity .5s ease-in;opacity:0}
.band.jiggle{animation:jiggle .25s}.band.nudge{animation:nudge .35s}
@keyframes jiggle{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes nudge{50%{filter:brightness(1.35) drop-shadow(0 0 4px #fff)}}

/* ── CUTICLE CUT (큐티클) ── */
.finger{fill:var(--skin-2);stroke:var(--skin-dot);stroke-width:2;pointer-events:none}
.nail{fill:#f6d9d3;stroke:#d8aaa1;stroke-width:2;pointer-events:none}.lunula{fill:#fff4f0;opacity:.75;pointer-events:none}
.nail-shine{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:.55;pointer-events:none}
.nail-fold{fill:none;stroke:var(--bump);stroke-width:7;stroke-linecap:round;opacity:.55;pointer-events:none}
.flap{pointer-events:none}.flap-shape{fill:#f8ebe2;stroke:#c3a090;stroke-width:1.2;transition:transform .08s;transform-box:fill-box;transform-origin:center}
.flap.big .flap-shape{fill:#f3e2d6}.flap.squish .flap-shape{transform:scale(.82,.92)}
.flap.cut{transition:opacity .25s;opacity:0}
.flap-piece{fill:#f4e3d8;stroke:#c3a090;stroke-width:.8;pointer-events:none;animation:piece .5s ease-out forwards}
@keyframes piece{to{transform:translate(var(--fx),var(--fy)) rotate(160deg);opacity:0}}
.nick{fill:#c2412f;opacity:.75;pointer-events:none}
.nipper{pointer-events:none;filter:drop-shadow(1px 3px 2px #0005)}.nipper-jaw{fill:#cfd3da;stroke:#4a4e55;stroke-width:1.4}.nipper-handle{fill:none;stroke:#4a4e55;stroke-width:7;stroke-linecap:round}.nipper-pivot{fill:#9aa0a8;stroke:#4a4e55;stroke-width:1.4}

/* ── SMOOTH TIP (지문) ── */
.skinWrap.fingertip{background:radial-gradient(ellipse 70% 60% at 50% 48%,var(--skin-1),var(--skin-2))}
.fp-zoom{transform-box:view-box;transform-origin:240px 325px;animation:zoomIn .7s cubic-bezier(.2,.8,.2,1)}
@keyframes zoomIn{from{transform:scale(.32);opacity:.2}}
.fp-pad{fill:var(--skin-3);stroke:var(--skin-dot);stroke-width:3}.fp-rim{fill:none;stroke:#00000014;stroke-width:22;pointer-events:none}
.fp-whorl path{fill:none;stroke:var(--skin-dot);stroke-width:4;opacity:.35;pointer-events:none}.fp-line{cursor:pointer}.fp-ridge{fill:none;stroke:var(--pore);stroke-linecap:round;stroke-linejoin:round;opacity:.78}.fp-arrow{fill:var(--pore);opacity:.95}
.fp-line.leaving{opacity:.75}
.fp-line.hit{animation:fpHit .3s}@keyframes fpHit{50%{opacity:.4}}

/* ── PIN PARK (머리핀) ── */
.pin-hair{pointer-events:none}.pin-hair-strand{fill:none;stroke:var(--hair);stroke-width:8;stroke-linecap:round;opacity:.6}.pin-hair-strand.light{stroke:#fff;opacity:.12;stroke-width:3}
.pin-tuft path{fill:none;stroke:var(--hair);stroke-width:4;stroke-linecap:round;opacity:.7;pointer-events:none}
.pin{cursor:pointer;filter:drop-shadow(1px 3px 2px #0006)}
.pin-metal{fill:none;stroke:#d8c68f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.pin-metal-edge{fill:none;stroke:#2f2b30;stroke-width:5.6;stroke-linecap:round;stroke-linejoin:round}
.pin-pearl{fill:#f4efe6;stroke:#b9ae9c;stroke-width:1.2}
.pin-clip{fill:var(--clip);stroke:#00000040;stroke-width:1.5}.pin-clip-slot{fill:#00000030}.pin-hinge{fill:#ffffffa0}
.pin-arrow{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.pin.lifted{filter:drop-shadow(2px 6px 4px #0007)}
.pin.hit{animation:pinHit .3s}@keyframes pinHit{50%{filter:drop-shadow(0 0 6px #fff) brightness(1.3)}}

/* ── 공통 피드백 ── */
.hint{position:absolute;z-index:12;left:50%;bottom:12px;transform:translateX(-50%);background:#2c211edc;color:#fff;padding:9px 13px;border-radius:22px;font-size:11px;font-weight:700;max-width:94%;text-align:center;pointer-events:none;white-space:nowrap}
.tool{position:absolute;z-index:13;pointer-events:none;font-size:28px;transform:translate(-5px,-4px) rotate(-35deg);display:none}.tool.svg-tool{font-size:0;line-height:0;transform:translate(-3px,-3px);filter:drop-shadow(1px 3px 2px #0005)}.feedback{position:absolute;z-index:30;left:50%;top:44%;transform:translate(-50%,-50%);font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 8px #5d302f;pointer-events:none;opacity:0;white-space:nowrap}.pop{animation:pop .5s ease-out}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}35%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}

/* ── 하단 ── */
.bottom{position:absolute;z-index:20;bottom:0;left:0;right:0;height:calc(var(--bottom) + var(--sab));background:#fff9;border-top:1px solid #8b62532b;padding:12px 16px calc(12px + var(--sab));display:flex;align-items:center;gap:10px}.status{flex:1;min-width:0}.status b{display:block;font-size:13px}.status span{display:block;font-size:10px;color:#87675f;margin-top:4px;line-height:1.4}.reset{border:1px solid #a77b70;background:#fff8;border-radius:12px;padding:11px 13px;color:#5f4039;font-weight:800;font-size:11px;flex:none}

/* ── 오버레이 ── */
.overlay{position:absolute;z-index:100;inset:0;background:#261b19e8;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.overlay-inner{width:100%;max-width:340px}.overlay .eyebrow{font-size:10px;letter-spacing:2px;color:#d0a796;font-weight:800}.overlay h2{font-size:36px;margin:10px 0;letter-spacing:-1px}.overlay p{font-size:13px;color:#d5c2bc;line-height:1.75;margin:12px 0 20px}.overlay p.small{font-size:12px;color:#bfa79f}.overlay p.ad-name{font-size:12px;font-weight:800;letter-spacing:1px;color:#f0d4c8;margin:0 0 8px}.overlay .big{font-size:48px;margin-bottom:14px}
.actions{display:flex;flex-direction:column;align-items:center;gap:10px}.actions:empty{display:none}
.overlay button{border:0;border-radius:13px;background:#f0d4c8;padding:14px 25px;color:#432e29;font-weight:900;font-size:15px;min-width:200px}.overlay button:disabled{background:#ffffff14;color:#af9287;cursor:default}.round-stats b.ok{color:#9fe0b5}
.overlay button.secondary{background:transparent;border:1px solid #f0d4c855;color:#f0d4c8;font-size:13px;padding:11px 20px}
.round-stats{display:flex;justify-content:center;gap:22px;margin:24px 0;color:#f0d4c8}.round-stats b{font-size:25px;display:block}.round-stats span{font-size:10px;display:block;margin-top:5px;color:#c3a79d}.overlay .fine{font-size:10px;color:#af9287;margin:16px 0}.transition-line{width:110px;height:3px;border-radius:4px;background:#ffffff20;margin:22px auto 0;overflow:hidden}.transition-line:after{content:"";display:block;height:100%;background:#f0d4c8;animation:wait 1.35s linear forwards}@keyframes wait{from{width:0}to{width:100%}}

.shake{animation:shake .13s}@keyframes shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@media(max-height:650px){.app{--top:104px;--bottom:74px}.top{padding-top:calc(9px + var(--sat))}.title h1{font-size:20px}.timer{font-size:22px}.bottom{padding-top:8px;padding-bottom:calc(8px + var(--sab))}.overlay h2{font-size:30px}.round-stats{margin:15px 0}.overlay p{font-size:12px}.hint{bottom:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.feedback.pop{opacity:1}.transition-line:after{width:100%}}