@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#252116;background:#ffe66c;--ink:#252116;--red:#ed4b30}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,.stage:focus-visible{outline:3px solid #ad361b;outline-offset:5px}.game{max-width:1200px;margin:auto;padding:28px 54px 20px;min-height:100svh;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between}.wordmark{font-family:'Space Grotesk',Arial,sans-serif;font-size:24px;letter-spacing:-1px;font-weight:700;color:var(--ink);text-decoration:none}.wordmark span{color:var(--red)}.sound{border:1.5px solid var(--ink);background:transparent;border-radius:28px;padding:10px 16px;font-weight:700;font-size:15px;display:flex;gap:8px;align-items:center}.sound[aria-pressed=false]{opacity:.65}.topline{display:flex;justify-content:space-between;align-items:flex-start;margin-top:46px;z-index:2;pointer-events:none}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.7px}h1{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:clamp(40px,5.4vw,76px);line-height:.98;letter-spacing:-4px;margin:15px 0 0}h1 em{font-style:normal;color:#aa491c}.score{text-align:right;padding-top:20px;display:flex;flex-direction:column}.score>span:first-child{font-family:'Space Grotesk',Arial,sans-serif;font-size:84px;font-weight:600;line-height:.9;letter-spacing:-5px}.score>span:last-child{font-weight:700;font-size:12px;letter-spacing:2px;margin-top:16px}.stage{position:relative;min-height:390px;flex:1;margin-top:-48px;touch-action:none;user-select:none;outline:none;cursor:none}.halo{position:absolute;width:min(470px,70%);aspect-ratio:1;border-radius:50%;background:#ffef97;left:50%;top:48%;transform:translate(-50%,-50%)}.floor{position:absolute;width:340px;height:35px;background:radial-gradient(ellipse,rgba(120,57,12,.2),transparent 65%);left:50%;bottom:31px;transform:translateX(-50%)}.cat-wrap{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:460px;height:460px;max-width:82%;max-height:100%;transition:filter .1s}.cat{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 10px rgba(105,56,13,.1))}.angry{opacity:0}.stage.is-angry .calm{opacity:0}.stage.is-angry .angry{opacity:1;animation:turn .21s ease-out}.stage.is-angry .cat-wrap{animation:shake .17s 4}.stage.is-angry .halo{background:#ffba6f}.cat-label{position:absolute;right:7%;top:38%;border:1.5px solid var(--ink);border-radius:20px;padding:11px 16px;background:#fff4a9;font-size:14px;font-weight:600;transform:rotate(5deg)}.brush{position:absolute;left:48%;top:57%;width:108px;height:120px;pointer-events:none;transform:translate(-50%,-20%) rotate(-28deg);z-index:5;filter:drop-shadow(3px 5px 2px #54351333);transition:opacity .15s}.brush-head{height:57px;width:96px;border-radius:14px 14px 7px 7px;background:repeating-linear-gradient(90deg,#262422 0 4px,#aaa39b 4px 6px);border:5px solid #262422;position:relative}.brush-head:after{content:'';position:absolute;left:-5px;bottom:-13px;width:96px;height:16px;background:repeating-linear-gradient(90deg,#262422 0 3px,transparent 3px 6px)}.brush-handle{background:#262422;width:25px;height:65px;border-radius:0 0 14px 14px;margin-left:36px}.hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:14px;white-space:nowrap;font-weight:600;display:flex;gap:9px;align-items:center;opacity:.8}.hand{font-size:25px}.shout{position:absolute;left:50%;top:11%;transform:translate(-50%,-50%) rotate(-8deg) scale(.4);opacity:0;font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:clamp(42px,7.5vw,100px);line-height:.82;letter-spacing:-4px;color:var(--red);text-shadow:3px 3px #fff2a8;z-index:4;pointer-events:none;white-space:nowrap}.shout span{display:block;margin-left:36px}.stage.is-angry .shout{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1);transition:transform .18s cubic-bezier(.2,1.7,.5,1)}.stage.is-angry .brush{opacity:.5}.bottom{border-top:1.5px solid #25211635;padding-top:22px;display:flex;gap:40px;align-items:center;margin-top:26px}.patience{width:360px;max-width:60%}.meter-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:12px;font-weight:800;letter-spacing:1.5px}.meter-label strong{letter-spacing:0;font-size:14px}.meter{height:10px;border-radius:8px;background:#25211618;overflow:hidden}.meter>div{height:100%;width:100%;background:var(--ink);transition:background .15s}.patience p{font-size:13px;margin:10px 0 0;line-height:1.4}.outbursts{display:flex;flex-direction:column;text-align:center}.outbursts>span:first-child{font-size:30px;font-family:'Space Grotesk',Arial,sans-serif;font-weight:700}.outbursts>span:last-child{font-size:12px;font-weight:700;letter-spacing:1px}.reset{margin-left:auto;display:flex;align-items:center;gap:8px;border:0;background:transparent;font-size:25px}.reset span{font-size:14px;font-weight:700}footer{margin-top:24px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#584921}.volume{display:flex;align-items:center;gap:12px;font-size:12px}.volume input{width:100px;accent-color:var(--ink)}.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;width:13px;height:2px;background:#fffbdb;border-radius:50%;animation:fur .7s ease-out forwards}.pop{position:absolute;font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:23px;animation:pop .65s ease-out forwards;color:#673514}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes fur{to{transform:translate(var(--x),var(--y)) rotate(90deg);opacity:0}}@keyframes pop{to{transform:translateY(-65px);opacity:0}}@keyframes turn{from{transform:scaleX(.85)}to{transform:scaleX(1)}}@keyframes shake{0%,100%{translate:0}25%{translate:-7px}75%{translate:7px}}
@media(min-height:850px) and (min-width:700px){.stage{min-height:480px}.cat-wrap{width:520px;height:520px}.game{padding-top:36px;padding-bottom:28px}.bottom{margin-top:35px}}
@media(max-width:700px){.game{padding:20px 22px 18px;min-height:100svh}.wordmark{font-size:21px}.sound{padding:8px 12px;font-size:14px}.topline{margin-top:30px}.eyebrow{font-size:10px;letter-spacing:1px}h1{font-size:46px;letter-spacing:-2.5px;margin-top:12px}.score{padding-top:24px}.score>span:first-child{font-size:62px;letter-spacing:-3px}.score>span:last-child{font-size:10px;letter-spacing:1px;margin-top:12px}.stage{margin-top:0;min-height:335px}.cat-wrap{width:370px;height:370px;max-width:100%;bottom:20px}.halo{width:86%;top:47%}.floor{width:260px;bottom:22px}.cat-label{right:-4px;top:19%;font-size:12px;padding:8px 10px}.hint{font-size:12px}.shout{top:20%;font-size:62px;letter-spacing:-3px}.brush{scale:.82}.bottom{gap:16px;margin-top:18px;padding-top:17px;align-items:flex-start}.patience{max-width:none;width:auto;flex:1}.outbursts{min-width:55px}.outbursts>span:last-child{font-size:9px;letter-spacing:.5px}.reset{margin-top:3px}.reset span{display:none}.patience p{font-size:12px;margin-top:8px;min-height:34px}.meter-label{font-size:10px}.meter-label strong{font-size:12px}footer{margin-top:18px;font-size:10px;align-items:center}.volume{font-size:10px;gap:7px}.volume input{width:67px}}
@media(max-height:740px) and (max-width:700px){.topline{margin-top:22px}h1{font-size:39px}.stage{min-height:280px}.cat-wrap{width:310px;height:310px}.cat-label{top:12%}.shout{font-size:53px}.bottom{margin-top:12px}footer{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.shout{left:25%;top:28%;font-size:clamp(42px,5vw,68px)}@media(max-width:700px){.shout{left:28%;top:16%;font-size:44px;letter-spacing:-2px}}
/* Every outburst permanently darkens the fur for this round. */
.cat:not(.shooter){filter:grayscale(var(--fur-gray,0)) brightness(var(--fur-light,1)) drop-shadow(0 12px 10px #69380d1a);transition:filter .45s ease}
.shooter{opacity:0}
.stage.is-aiming .calm,.stage.is-aiming .angry{opacity:0}
.stage.is-aiming .shooter{opacity:1;animation:turn .22s ease-out}
.stage.is-aiming .brush,.stage.is-dead .brush{opacity:0}
.stage.is-aiming .shout{opacity:0}
.stage.is-aiming .cat-label{background:#252116;color:#ffe66c}
.flying-heads{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20;perspective:600px}
.flying-head{position:absolute;width:clamp(170px,24vw,340px);height:auto;transform-origin:center;filter:grayscale(var(--fur-gray,0)) brightness(var(--fur-light,1));animation:head-flight 1.65s cubic-bezier(.5,.04,.8,.5) both;animation-delay:var(--delay)}
@keyframes head-flight{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(var(--spin))}18%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--drift)),-50%) scale(3.8) rotate(calc(var(--spin) * -1))}}
.shot-flash{position:fixed;inset:0;background:#fff2c1;opacity:0;pointer-events:none;z-index:25}
.shot-flash.fire{animation:shot .28s ease-out}
@keyframes shot{0%{opacity:.85}100%{opacity:0}}
#gameOver{border:0;border-radius:24px;background:#252116;color:#ffe66c;text-align:center;width:min(520px,calc(100% - 36px));padding:42px 25px;box-shadow:0 25px 100px #0005}
#gameOver::backdrop{background:#18150fd9}
#gameOver .eyebrow{font-size:10px;letter-spacing:1px}
#gameOver h2{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(34px,7vw,62px);letter-spacing:-2px;margin:20px 0}
#gameOver p{font-size:15px;line-height:1.5;color:#ffed9d}
#gameOver button{border:0;border-radius:50px;padding:16px 25px;background:#ffe66c;color:#252116;font-weight:800;margin-top:16px}
@media(max-width:700px){footer{align-items:flex-start;gap:12px}footer span:last-child{text-align:right;max-width:145px}.flying-head{width:220px}}
@media(prefers-reduced-motion:reduce){.flying-head{animation:head-still 1.65s ease-out both!important;animation-delay:var(--delay)!important}.shot-flash.fire{animation:none!important}@keyframes head-still{0%{opacity:0}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0}}}
