@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap";:root{font-family:Noto Sans KR,sans-serif;color:#f5f5ee;background:#000;font-synthesis:none}*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0}body{overflow:hidden}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#stage{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;background:#000;touch-action:none}#playfield{position:absolute;inset:0;overflow:hidden}#stage{--sky: #a9d9e8;--sun: #fff1b2;--glow: #fff1b276;--cloud: #f6f5e8;--hill-back: #a1bf83;--hill-middle: #80ac69;--field: #679b58;--field-line: #a9c976;--grass: #3e7f4a;--flower: #f7e8d0;--flower-center: #efb756;--sway-time: 4s;background:var(--sky);transition:background-color .7s}#stage[data-horse-state="1"]{--sky: #b4d7d5;--sun: #ffedaa;--glow: #ffe2a27a;--cloud: #f3eee0;--hill-back: #a8bc7b;--hill-middle: #87a866;--field: #6d9954;--field-line: #b8c773;--grass: #477b40;--flower: #f4e4cb;--sway-time: 3.3s}#stage[data-horse-state="2"]{--sky: #d9c9ae;--sun: #ffe1a0;--glow: #ffbb867a;--cloud: #f0dfc8;--hill-back: #b2ad70;--hill-middle: #969d59;--field: #788b48;--field-line: #c1b568;--grass: #66783b;--flower: #efd5bb;--sway-time: 2.5s}#stage[data-horse-state="3"]{--sky: #e2ad8f;--sun: #ffd28d;--glow: #ff9e7488;--cloud: #e8c9b5;--hill-back: #ae9866;--hill-middle: #96844e;--field: #797740;--field-line: #b1a05a;--grass: #686a35;--flower: #ebc8ae;--sway-time: 1.8s}#landscape{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#landscape .sky{fill:var(--sky)}#landscape .sun{fill:var(--sun)}#landscape .sun-glow{fill:var(--glow)}#landscape .cloud{fill:var(--cloud);animation:cloud-drift 9s ease-in-out infinite alternate}#landscape .cloud-two{animation-delay:-4s}#landscape .hill-back{fill:var(--hill-back)}#landscape .hill-middle{fill:var(--hill-middle)}#landscape .field{fill:var(--field)}#landscape .field-line{fill:none;stroke:var(--field-line);stroke-width:8;stroke-linecap:round;opacity:.65}#landscape .grass{fill:none;stroke:var(--grass);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;animation:grass-sway var(--sway-time) ease-in-out infinite alternate;transform-origin:50% 100%}#landscape .flowers{fill:var(--flower);stroke:var(--grass);stroke-width:2}#landscape .flowers path{fill:none}#landscape .flower-center{fill:var(--flower-center);stroke:none}#landscape .sky,#landscape .sun,#landscape .sun-glow,#landscape .cloud,#landscape .hill-back,#landscape .hill-middle,#landscape .field,#landscape .field-line,#landscape .grass,#landscape .flowers{transition:fill .7s,stroke .7s}@keyframes cloud-drift{to{transform:translate(22px)}}@keyframes grass-sway{to{transform:skew(1.4deg)}}#horse{position:absolute;left:var(--hb-left, 0px);top:var(--hb-top, 0px);width:var(--hb-size, 100vmin);height:var(--hb-size, 100vmin);transform-origin:50% 76%;will-change:transform}#horse svg,#horse img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 65%;will-change:transform}#mosquitoes{position:absolute;inset:0;z-index:4;pointer-events:none}.mosquito{position:absolute;width:calc(var(--hb-size, 100vmin) * .112);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;pointer-events:none}.mosquito svg{transition:transform .12s}.mosquito[data-phase=WAITING] svg{animation:buzz .18s linear infinite alternate}.mosquito[data-phase=SQUASHED] svg{animation:squash .52s ease-out forwards}@keyframes buzz{to{transform:rotate(6deg) translateY(-2%)}}@keyframes squash{0%{transform:scale(1.3,.25);opacity:1}70%{transform:scale(1.45,.15);opacity:1}to{transform:scale(1.45,.1);opacity:0}}.mosquito svg{width:100%;height:100%;overflow:visible}#slap-effects{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}.slap-impact{position:absolute;width:0;height:0;pointer-events:none;animation:slap-life .75s both}.slap-impact>span{position:absolute;display:block;left:0;top:0}.slap-flash{width:clamp(105px,22vmin,210px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.25);background:#fff6c3;clip-path:polygon(50% 0%,60% 33%,84% 11%,73% 40%,100% 49%,72% 58%,88% 84%,59% 69%,50% 100%,40% 68%,13% 87%,28% 58%,0% 49%,28% 40%,14% 13%,40% 32%);filter:drop-shadow(0 0 10px #fff);animation:slap-flash .36s ease-out both}.slap-ring{width:clamp(72px,15vmin,140px);aspect-ratio:1;border:7px solid #fff9da;border-radius:50%;box-shadow:0 0 0 4px #ab3627,0 0 18px #fff4a8;transform:translate(-50%,-50%) scale(.22);animation:slap-ring .43s ease-out both}.slap-rays{width:clamp(180px,34vmin,300px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 5deg,transparent 0deg 15deg,#ffe88d 17deg 20deg,#fff9df 22deg 24deg,transparent 27deg 40deg);-webkit-mask:radial-gradient(circle,transparent 0 28%,#000 31% 60%,transparent 70%);mask:radial-gradient(circle,transparent 0 28%,#000 31% 60%,transparent 70%);transform:translate(-50%,-50%) scale(.4) rotate(-12deg);animation:slap-rays .55s ease-out both}.slap-word{white-space:nowrap;color:#fff9d1;font-size:clamp(32px,8vmin,67px);font-weight:900;letter-spacing:-.09em;line-height:1;-webkit-text-stroke:clamp(1.5px,.27vw,3px) #84301e;paint-order:stroke fill;text-shadow:3px 4px 0 #bd4a24,6px 8px 0 #4c271b,0 0 18px #fff5c9;transform:translate(-50%,-45%) rotate(var(--slap-tilt)) scale(.2);animation:slap-word .65s cubic-bezier(.17,1.7,.4,1) both}.slap-mark{color:#ff8b45;font-size:1.25em;margin-left:.04em}.slap-spark{color:#fff9d0;font-size:clamp(25px,6vmin,48px);text-shadow:2px 3px 0 #b54324,0 0 12px #fff;animation:slap-spark .58s ease-out both}.slap-spark-one{--spark-x: -112px;--spark-y: -82px;--spark-rotation: -26deg}.slap-spark-two{--spark-x: 103px;--spark-y: -91px;--spark-rotation: 18deg;animation-delay:35ms}.slap-spark-three{--spark-x: 80px;--spark-y: 67px;--spark-rotation: 40deg;animation-delay:.06s}@keyframes slap-life{0%,72%{opacity:1}to{opacity:0}}@keyframes slap-flash{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:1}35%{transform:translate(-50%,-50%) scale(1.12) rotate(8deg);opacity:1}to{transform:translate(-50%,-50%) scale(1.35) rotate(16deg);opacity:0}}@keyframes slap-ring{0%{transform:translate(-50%,-50%) scale(.18);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}@keyframes slap-rays{0%{transform:translate(-50%,-50%) scale(.25) rotate(-18deg);opacity:1}45%{opacity:1}to{transform:translate(-50%,-50%) scale(1.25) rotate(18deg);opacity:0}}@keyframes slap-word{0%{transform:translate(-50%,-45%) rotate(var(--slap-tilt)) scale(.2);opacity:0}16%{opacity:1}38%{transform:translate(-50%,-115%) rotate(var(--slap-tilt)) scale(1.19);opacity:1}72%{transform:translate(-50%,-137%) rotate(var(--slap-tilt)) scale(1);opacity:1}to{transform:translate(-50%,-155%) rotate(var(--slap-tilt)) scale(.9);opacity:0}}@keyframes slap-spark{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{opacity:1}to{transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(var(--spark-rotation)) scale(1.3);opacity:0}}#hand{--hand-angle: 0deg;--hand-flip: 1;position:absolute;transform:translate(-50%,-50%) rotate(var(--hand-angle)) scaleX(var(--hand-flip));font-size:clamp(90px,22vh,230px);z-index:5;pointer-events:none;filter:drop-shadow(0 2px 2px #0008)}#debug{position:absolute;bottom:20px;left:20px;background:#182018df;color:#d5f9b5;font:11px/1.5 monospace;padding:12px;z-index:6;pointer-events:none}#debug-areas{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}#hud{position:absolute;z-index:10;top:12px;left:50%;transform:translate(-50%);display:flex;gap:8px}.hud-item{padding:6px 12px;border-radius:20px;background:#202020bf;font-size:clamp(13px,2.2vh,20px);white-space:nowrap}.hud-item b{font-weight:700}#stage[data-horse-state="2"] #anger,#stage[data-horse-state="3"] #anger{background:#9b2d1ccc}#hint{position:absolute;z-index:10;bottom:16%;left:50%;transform:translate(-50%);padding:8px 16px;border-radius:20px;background:#202020d9;font-size:14px;white-space:nowrap}.overlay{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:#10140fb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay h1,.overlay h2{margin:0;font-size:clamp(34px,6vh,60px);font-weight:900;letter-spacing:-.04em;color:#fff9d1;-webkit-text-stroke:1.5px #84301e;paint-order:stroke fill;text-shadow:3px 4px 0 #bd4a24}.overlay p{margin:0}.overlay .rule{font-size:clamp(17px,2.8vh,24px);font-weight:700;line-height:1.5}.overlay .sub{font-size:13px;color:#d8d8cf;max-width:32em}.overlay .big{font-size:clamp(20px,3.4vh,30px)}.overlay .big b{font-size:1.6em;color:#ffe07a}#new-record{color:#ffe07a;font-weight:700;font-size:20px;animation:pop .6s ease-out}.buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}.overlay button{min-height:44px;padding:10px 18px;border:1px solid #666;border-radius:10px;background:#202020d9;color:#fff;font-size:15px}.overlay button.primary{background:#f1eee4;border-color:#f1eee4;color:#161616;font-weight:700}#tracking-status{font-size:12px;color:#d8d8cf;min-height:1em}#kick{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle,#fff8 0,#fff0 60%);animation:kick-flash .9s ease-out both}#kick span{font-size:clamp(80px,18vh,180px);font-weight:900;color:#fff9d1;-webkit-text-stroke:3px #84301e;paint-order:stroke fill;text-shadow:6px 8px 0 #bd4a24,12px 16px 0 #4c271b;animation:kick-word .8s cubic-bezier(.17,1.7,.4,1) both}#stage.kicked #playfield{animation:screen-shake .5s linear}@keyframes kick-flash{0%{background-color:#fff}25%{background-color:#fff0}}@keyframes kick-word{0%{transform:scale(.2) rotate(-20deg);opacity:0}40%{transform:scale(1.25) rotate(-8deg);opacity:1}to{transform:scale(1) rotate(-6deg);opacity:1}}@keyframes screen-shake{0%,to{transform:none}20%{transform:translate(-1.5vmin,1vmin)}40%{transform:translate(1.5vmin,-1vmin)}60%{transform:translate(-1vmin,.5vmin)}80%{transform:translate(.5vmin,-.5vmin)}}@keyframes pop{0%{transform:scale(.3)}60%{transform:scale(1.2)}to{transform:scale(1)}}.slap-whiff .slap-word,.slap-bite .slap-word{color:#ffd3c4}.slap-kick .slap-word,#video{display:none}body.cam #video{display:block;position:absolute;z-index:9;right:2vmin;bottom:2vmin;width:clamp(120px,20vw,300px);aspect-ratio:4 / 3;object-fit:cover;transform:scaleX(-1);border:3px solid #f1eee4;border-radius:12px;box-shadow:0 8px 24px #000a;background:#000}@media(max-width:650px){#hand{font-size:clamp(80px,19vh,200px)}}