@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');

:root { --ink:#263b35; --muted:#6c7a70; --paper:#fffdf7; --leaf:#34805a; --leaf-deep:#14543d; --leaf-pale:#dff0d6; --sun:#ffc34b; --clay:#bd7045; --soil:#644235; --soil-dark:#332424; --mole:#a87b60; --mole-shade:#7d5746; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100svh; margin:0; overflow:hidden; color:var(--ink); font-family:'Nunito',sans-serif; background:#9fd0dc; }
body::before { content:''; position:fixed; z-index:-3; inset:0; background:linear-gradient(180deg,#a9dce6 0%,#c4e1c8 48%,#83b76a 48.2%,#619658 100%); }
body::after { content:''; position:fixed; z-index:-2; right:-10%; bottom:-16%; left:-10%; height:55%; border-radius:48% 52% 0 0 / 20% 20% 0 0; opacity:.8; background:linear-gradient(118deg,transparent 0 24%,rgba(26,90,53,.15) 24.2% 45%,transparent 45.2% 62%,rgba(26,90,53,.11) 62.2% 79%,transparent 79.2%); filter:blur(2px); }
.game-shell { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(8px,1.6vh,17px); width:min(940px,100%); height:100svh; margin:auto; padding:clamp(19px,2.8vh,31px) clamp(14px,3.3vw,34px) clamp(10px,1.7vh,18px); }
.sky-cloud { position:absolute; z-index:-1; width:110px; height:24px; border-radius:100px; opacity:.42; background:rgba(255,255,255,.78); filter:blur(.2px); }.sky-cloud::before,.sky-cloud::after { content:''; position:absolute; border-radius:50%; background:inherit; }.sky-cloud::before { bottom:3px; left:18px; width:40px; height:40px; }.sky-cloud::after { right:14px; bottom:0; width:52px; height:52px; }.cloud-one { top:8%; left:-1%; transform:scale(.75); }.cloud-two { top:25%; right:1%; transform:scale(.5); }
.audio-toggle { position:fixed; z-index:12; right:18px; bottom:18px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.62); border-radius:14px; color:#fff; background:rgba(24,87,57,.88); box-shadow:0 8px 18px rgba(19,67,42,.24); font:900 21px 'Nunito',sans-serif; cursor:pointer; backdrop-filter:blur(8px); transition:transform .14s ease,filter .14s ease,background .14s ease; }.audio-toggle:hover { filter:brightness(1.08); transform:translateY(-2px); }.audio-toggle:focus-visible { outline:4px solid var(--sun); outline-offset:4px; }.sound-off { display:none; }.audio-toggle.is-muted { background:rgba(91,101,93,.86); }.audio-toggle.is-muted .sound-on { display:none; }.audio-toggle.is-muted .sound-off { display:block; }

.game-header { display:flex; align-items:center; gap:10px; }.brand-lockup { display:flex; align-items:center; gap:11px; min-width:0; }.brand-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(20,84,61,.2); border-radius:13px; color:var(--leaf-deep); background:rgba(255,255,255,.56); box-shadow:0 5px 14px rgba(24,77,48,.1); font-size:28px; font-weight:900; transform:rotate(-18deg); }.eyebrow,.round-label,.score-label,.timer-label { margin:0; font-size:9px; font-weight:900; letter-spacing:1.8px; }.eyebrow { color:#39825a; } h1,h2 { margin:0; font-family:'Baloo 2',cursive; font-weight:800; line-height:.86; } h1 { white-space:nowrap; color:var(--ink); font-size:clamp(25px,4.2vw,35px); } h1 span { color:var(--leaf); }
.score-card,.best-card,.timer-card { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:5px; min-width:72px; padding:7px 11px; border:1px solid rgba(255,255,255,.38); border-radius:15px; color:#fff; box-shadow:0 8px 18px rgba(30,79,48,.16); backdrop-filter:blur(6px); }.score-card { margin-left:auto; background:linear-gradient(135deg,#24704e,#14543d); }.best-card { background:linear-gradient(135deg,#528d58,#35744a); }.timer-card { background:linear-gradient(135deg,#e88d4a,#cc6239); }.score-label,.best-label,.timer-label { grid-column:1 / -1; color:rgba(255,255,255,.68); text-align:left; font-size:9px; font-weight:900; letter-spacing:1.8px; }.score-card strong,.best-card strong,.timer-card strong { font-family:'Baloo 2',cursive; font-size:clamp(24px,3.9vw,31px); line-height:.75; }.timer-unit { align-self:end; padding-bottom:1px; font-size:11px; font-weight:900; opacity:.82; }.timer-progress { grid-column:1 / -1; display:block; width:100%; height:3px; margin-top:6px; overflow:hidden; border-radius:99px; background:rgba(93,37,23,.27); }.timer-progress i { display:block; width:100%; height:100%; border-radius:inherit; background:#fff0c9; box-shadow:0 0 8px rgba(255,255,255,.42); transition:width .25s linear; }
.score-card.score-bump { animation:score-bump 300ms cubic-bezier(.18,.9,.3,1.4); }.score-card.score-penalty { animation:score-penalty 360ms ease-in-out; }.timer-card.urgent { animation:timer-urgent 850ms ease-in-out infinite; }.timer-card.urgent .timer-progress i { background:#fff8df; }
@keyframes score-bump { 50% { transform:translateY(-4px) scale(1.07); } } @keyframes score-penalty { 20%,60% { transform:translateX(-4px) rotate(-2deg); } 40%,80% { transform:translateX(4px) rotate(2deg); } } @keyframes timer-urgent { 50% { box-shadow:0 8px 24px rgba(183,65,35,.48); filter:brightness(1.08); } }
.quick-play { padding:10px 14px; border:1px solid rgba(255,255,255,.5); border-radius:13px; color:#fff; background:linear-gradient(135deg,#459a68,#23724d); box-shadow:0 7px 15px rgba(20,84,51,.2); font:900 13px 'Nunito',sans-serif; cursor:pointer; transition:transform .14s ease,filter .14s ease; }.quick-play:hover { filter:brightness(1.07); transform:translateY(-2px); }.quick-play:focus-visible { outline:4px solid var(--sun); outline-offset:4px; }

.game-card { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; overflow:hidden; border:1px solid rgba(255,255,255,.88); border-radius:28px; background:rgba(255,253,247,.92); box-shadow:0 20px 45px rgba(35,75,43,.18),0 3px 0 rgba(28,70,45,.08); }.card-heading { padding:clamp(12px,2.2vh,21px) 18px clamp(10px,1.6vh,15px); text-align:center; }.round-label { color:var(--clay); } h2 { margin-top:3px; color:var(--ink); font-size:clamp(36px,6.2vw,55px); letter-spacing:-1px; }.instructions { margin:4px 0 0; color:var(--muted); font-size:clamp(11px,1.6vw,14px); font-weight:800; }
.meadow { position:relative; display:grid; min-height:0; place-items:center; padding:clamp(18px,3.7vh,36px) clamp(29px,9vw,90px); overflow:hidden; border-top:1px solid rgba(19,80,54,.1); border-bottom:1px solid rgba(19,80,54,.1); background:linear-gradient(145deg,#82bb65 0%,#61a85c 47%,#4f9d5b 100%); }.meadow::before { content:''; position:absolute; inset:0; opacity:.45; background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 24% 70%,rgba(19,83,49,.1)); }.meadow::after { content:''; position:absolute; width:120%; height:50%; bottom:-35%; left:-10%; border-radius:50%; background:rgba(20,90,45,.15); filter:blur(19px); }.hole-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,4.2vh,38px) clamp(20px,5.9vw,55px); width:min(600px,100%); }.hole { position:relative; display:block; aspect-ratio:1.58/1; overflow:visible; padding:0; border:0; border-radius:50%; cursor:default; background:radial-gradient(ellipse at 50% 52%,#251b1c 0 39%,#3c2928 40% 57%,#624031 58% 73%,#955d43 74% 100%); box-shadow:inset 0 5px 0 rgba(255,224,177,.11),inset 0 -7px 12px rgba(29,17,18,.24),0 7px 0 rgba(34,99,46,.16),0 11px 15px rgba(20,68,35,.14); }.hole::after { content:''; position:absolute; z-index:3; right:17%; bottom:13%; left:17%; height:12%; border-radius:50%; background:rgba(24,14,17,.37); filter:blur(3px); }.hole-lip { display:none; }
.mole { position:absolute; z-index:1; bottom:20%; left:50%; width:55%; height:122%; opacity:0; transform:translate(-50%,76%) scale(.82); transform-origin:bottom center; transition:transform 280ms cubic-bezier(.16,.92,.28,1.14),opacity 120ms ease-out; pointer-events:none; }.mole-face { position:absolute; z-index:2; inset:14% 2% 0; display:block; overflow:hidden; border:3px solid var(--mole-shade); border-radius:48% 48% 40% 40%; background:linear-gradient(122deg,#c19673 0 24%,var(--mole) 25% 70%,#8e644e 100%); box-shadow:inset 7px 0 0 rgba(255,235,204,.14),0 2px 4px rgba(48,31,27,.17); }.ear { position:absolute; top:16%; z-index:1; width:39%; height:36%; border:3px solid var(--mole-shade); border-radius:50%; background:#bd906e; }.ear-left { left:-8%; transform:rotate(-26deg); }.ear-right { right:-8%; transform:rotate(26deg); }.eye { position:absolute; top:35%; width:14%; height:18%; border-radius:50%; background:#2b2020; box-shadow:inset 2px 2px 0 rgba(255,255,255,.5); }.eye-left { left:25%; }.eye-right { right:25%; }.nose { position:absolute; top:51%; left:50%; width:27%; height:19%; border-radius:50% 50% 55% 55%; background:#edaaa0; box-shadow:0 2px 0 #77454c; transform:translateX(-50%); }.smile { position:absolute; top:69%; left:50%; width:34%; height:14%; border-bottom:3px solid #553737; border-radius:0 0 50% 50%; transform:translateX(-50%); }.mole-up .mole { opacity:1; transform:translate(-50%,0) scale(1); }.mole-up { cursor:crosshair; }.mole-up:hover .mole { filter:brightness(1.06); }.hole.mole-up:active .mole { transform:translate(-50%,14%) scale(.91); transition-duration:70ms; }.hit-normal .mole { animation:mole-hit 260ms cubic-bezier(.2,.8,.25,1) forwards; }.hit-villain .mole { animation:villain-hit 260ms cubic-bezier(.2,.8,.25,1) forwards; }.hit-normal .eye,.hit-villain .eye { background:transparent; box-shadow:none; }.hit-normal .eye::before,.hit-normal .eye::after,.hit-villain .eye::before,.hit-villain .eye::after { content:''; position:absolute; top:43%; left:-18%; width:136%; height:3px; border-radius:3px; background:#332426; }.hit-normal .eye::before,.hit-villain .eye::before { transform:rotate(45deg); }.hit-normal .eye::after,.hit-villain .eye::after { transform:rotate(-45deg); }.hole[data-feedback]::before { content:attr(data-feedback); position:absolute; z-index:6; top:-30%; left:50%; padding:4px 8px; border-radius:9px; color:#fff; background:#737c74; box-shadow:0 5px 10px rgba(28,59,39,.17); font:900 12px 'Nunito',sans-serif; opacity:0; transform:translate(-50%,10px) scale(.86); pointer-events:none; animation:feedback-rise 380ms ease-out forwards; }.hole.hit-normal[data-feedback]::before { background:#29885a; }.hole.hit-villain[data-feedback]::before { background:#c9554d; }.hole.miss { animation:miss-wobble 340ms ease-in-out; }.hole.miss[data-feedback]::before { background:#8a776d; }.hole:focus-visible { outline:4px solid var(--sun); outline-offset:5px; }
.villain-mole .mole-face::before { content:''; position:absolute; z-index:4; top:23%; left:-10%; width:120%; height:12%; border-top:2px solid #842d31; border-bottom:2px solid #842d31; background:linear-gradient(#e55d58,#bd363b); box-shadow:0 2px 0 rgba(75,28,30,.2); transform:rotate(-4deg); }.villain-mole .mole-face::after { content:''; position:absolute; z-index:3; top:21%; right:-13%; width:20%; height:19%; border:3px solid #842d31; border-radius:4px 50% 50% 4px; background:#d84949; transform:rotate(22deg); }.villain-mole .eye-left { transform:rotate(-9deg); }.villain-mole .eye-right { transform:rotate(9deg); }.villain-mole .smile { width:29%; border-radius:0 0 42% 42%; }.villain-mole.mole-up .mole { animation:villain-alert 760ms ease-in-out infinite alternate; }.villain-mole.hit-villain .mole { animation:villain-hit 260ms cubic-bezier(.2,.8,.25,1) forwards; }.villain-mole .mole-face { box-shadow:inset 7px 0 0 rgba(255,235,204,.14),0 0 0 4px rgba(194,57,55,.12),0 2px 4px rgba(48,31,27,.17); }
@keyframes mole-hit { 0% { opacity:1; transform:translate(-50%,0) scale(1); } 38% { opacity:1; transform:translate(-50%,-7%) scale(1.13,.79); } 100% { opacity:0; transform:translate(-50%,65%) scale(.76); } }
@keyframes villain-hit { 0% { opacity:1; transform:translate(-50%,0) scale(1); } 23% { transform:translate(-61%,-3%) scale(1.04) rotate(-7deg); } 47% { transform:translate(-41%,1%) scale(1.02) rotate(6deg); } 100% { opacity:0; transform:translate(-50%,66%) scale(.76) rotate(2deg); } } @keyframes feedback-rise { 18% { opacity:1; transform:translate(-50%,0) scale(1.04); } 100% { opacity:0; transform:translate(-50%,-20px) scale(1); } } @keyframes miss-wobble { 25% { transform:translateX(-4px) rotate(-2deg); } 55% { transform:translateX(4px) rotate(2deg); } 100% { transform:translateX(0); } }
@keyframes villain-alert { to { transform:translate(-50%,-4%) scale(1.03) rotate(-1deg); } }
.tnt-mole .mole::before { content:'TNT'; position:absolute; z-index:5; bottom:-2%; left:50%; width:118%; padding:12% 0 13%; border:3px solid #86282d; border-radius:10px; color:#fff4d7; background:repeating-linear-gradient(90deg,#d23e3e 0 19%,#eb5c52 20% 39%); box-shadow:0 5px 0 #8d2b2e,0 9px 12px rgba(53,28,24,.26); font:900 12px/1 'Nunito',sans-serif; letter-spacing:1.5px; text-align:center; transform:translateX(-50%) rotate(-2deg); }.tnt-mole .mole::after { content:''; position:absolute; z-index:6; bottom:35%; left:50%; width:4px; height:26%; border-radius:5px; background:#4a3322; box-shadow:0 -5px 0 #f8b83f,0 -9px 9px rgba(249,166,43,.85); transform:translateX(-50%) rotate(-13deg); }.tnt-mole.mole-up .mole { animation:tnt-alert 530ms ease-in-out infinite alternate; }.tnt-mole .mole-face { box-shadow:inset 7px 0 0 rgba(255,235,204,.14),0 0 0 4px rgba(233,76,63,.16),0 2px 4px rgba(48,31,27,.17); }.tnt-mole.tnt-exploding .mole { animation:tnt-blast 1.2s ease-out forwards; }.hole.tnt-exploding::before { content:''; position:absolute; z-index:8; top:50%; left:50%; width:30%; aspect-ratio:1; border-radius:50%; background:#fff8bb; box-shadow:0 0 0 15px #ffcc42,0 0 0 33px #ef713f,0 0 48px 30px rgba(249,103,43,.84); transform:translate(-50%,-50%) scale(.1); animation:explosion-flash 1.2s ease-out forwards; pointer-events:none; }.hole.tnt-exploding::after { z-index:7; top:50%; right:auto; bottom:auto; left:50%; width:16%; height:auto; aspect-ratio:1; background:transparent; border:5px solid rgba(255,205,80,.85); filter:none; transform:translate(-50%,-50%) scale(.2); animation:explosion-shockwave 1.2s ease-out forwards; }
@keyframes tnt-alert { to { transform:translate(-50%,-3%) scale(1.04); filter:brightness(1.1); } } @keyframes tnt-blast { 0% { opacity:1; transform:translate(-50%,0) scale(1); } 26% { opacity:1; transform:translate(-50%,-9%) scale(1.24) rotate(-3deg); } 100% { opacity:0; transform:translate(-50%,-42%) scale(1.85) rotate(8deg); } } @keyframes explosion-flash { 12% { opacity:1; transform:translate(-50%,-50%) scale(1.9); } 52% { opacity:.92; transform:translate(-50%,-50%) scale(3.1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(4.4); } } @keyframes explosion-shockwave { 14% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(7); } }
.grass-tuft { position:absolute; z-index:2; color:rgba(37,121,57,.5); font-size:42px; font-weight:900; }.tuft-left { bottom:2%; left:2%; transform:rotate(90deg); }.tuft-right { top:2%; right:2%; transform:rotate(-90deg); }.status-row { display:flex; align-items:center; justify-content:center; gap:8px; min-height:35px; padding:8px 14px; color:#778077; font-size:12px; font-weight:900; }.status-dot { width:8px; height:8px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 4px #fff0c9; }.game-footer { display:flex; align-items:center; justify-content:center; gap:10px; min-height:17px; color:rgba(29,96,51,.8); font-size:11px; font-weight:900; }.footer-sun { color:#e7a72d; font-size:14px; }

.start-screen { position:fixed; z-index:9; inset:0; display:grid; place-items:center; padding:clamp(14px,3vh,28px); background:rgba(19,59,42,.42); backdrop-filter:blur(8px); }.start-screen[hidden] { display:none; }.start-card { position:relative; display:grid; justify-items:center; width:min(455px,100%); padding:clamp(24px,4.5vh,42px) clamp(22px,5vw,43px) clamp(22px,3.5vh,34px); overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:30px; background:linear-gradient(145deg,#fffefb,#f5f2e6); box-shadow:0 26px 65px rgba(11,45,29,.3); text-align:center; }.start-card::before { content:''; position:absolute; top:-94px; left:-70px; width:210px; height:210px; border-radius:50%; background:rgba(91,164,88,.11); }.start-badge { position:relative; display:grid; place-items:center; width:52px; height:52px; margin-bottom:11px; border-radius:17px; color:#fff; background:linear-gradient(145deg,#65ad69,#2d7952); box-shadow:0 8px 17px rgba(38,110,65,.23); font-size:25px; transform:rotate(-7deg); }.start-card h2 { font-size:clamp(42px,8vw,57px); }.start-copy { max-width:330px; margin:13px 0 18px; color:#718077; font-size:14px; font-weight:800; line-height:1.45; }.start-rules { display:grid; width:100%; gap:7px; padding:10px; border:1px solid rgba(39,96,59,.09); border-radius:17px; background:rgba(223,240,214,.42); text-align:left; }.start-rules p { display:flex; align-items:center; gap:10px; margin:0; color:#778178; font-size:11px; font-weight:700; }.start-rules strong { display:block; color:var(--ink); font-size:12px; }.rule-icon { display:grid; flex:0 0 auto; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff; font-size:12px; font-weight:900; }.rule-good { background:#3b9b62; }.rule-villain { background:#d36749; }.rule-miss { background:#8b948c; }.start-footer { display:flex; justify-content:space-between; width:100%; margin:15px 0; color:#768077; font-size:11px; font-weight:800; }.start-best strong { color:var(--leaf-deep); font-size:15px; }.round-time { color:#b1683b; }.start-game { width:100%; padding:14px 23px; border:1px solid rgba(255,255,255,.45); border-radius:14px; color:#fff; background:linear-gradient(135deg,#459a68,#23724d); box-shadow:0 8px 17px rgba(20,84,51,.25); font:900 17px 'Nunito',sans-serif; cursor:pointer; transition:transform .14s ease,box-shadow .14s ease,filter .14s ease; }.start-game:hover { filter:brightness(1.07); transform:translateY(-2px); }.start-game:active { box-shadow:0 2px 6px rgba(20,84,51,.2); transform:translateY(2px); }.start-game:focus-visible { outline:4px solid var(--sun); outline-offset:4px; }
.final-screen { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:clamp(14px,3vh,28px); background:rgba(19,59,42,.54); backdrop-filter:blur(10px); }.final-screen[hidden] { display:none; }.results-card { position:relative; display:grid; justify-items:center; width:min(440px,100%); padding:clamp(25px,5vh,48px) clamp(22px,5vw,45px) clamp(21px,4vh,37px); overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:30px; background:linear-gradient(145deg,#fffef9,#f5f1e4); box-shadow:0 25px 60px rgba(13,39,26,.32); text-align:center; }.results-card::before { content:''; position:absolute; top:-80px; right:-60px; width:210px; height:210px; border-radius:50%; background:rgba(255,195,75,.13); }.trophy { position:relative; display:grid; place-items:center; width:clamp(50px,8vh,68px); height:clamp(50px,8vh,68px); margin-bottom:10px; border:1px solid rgba(172,112,24,.3); border-radius:21px; color:#fff; background:linear-gradient(145deg,#ffcf5b,#eea72e); box-shadow:0 8px 17px rgba(205,139,35,.26); font-size:clamp(30px,5vh,40px); transform:rotate(7deg); }.tnt-cat { display:none; position:relative; width:clamp(120px,23vw,175px); aspect-ratio:1.35; margin:-2px 0 10px; border:4px solid #fff; border-radius:17px; object-fit:cover; box-shadow:0 10px 20px rgba(97,38,31,.22); transform:rotate(-3deg); }.new-record-banner { margin:8px 0 -4px; padding:5px 11px; border-radius:99px; color:#8a5a16; background:#fff0c6; box-shadow:0 3px 8px rgba(209,149,37,.18); font-size:11px; font-weight:900; letter-spacing:1px; }.final-screen.new-record .new-record-banner { animation:record-pop 500ms cubic-bezier(.18,.9,.3,1.35) both; }.final-screen.new-record .trophy { animation:trophy-celebrate 850ms ease-in-out infinite alternate; }.final-screen h2 { font-size:clamp(42px,8vw,58px); }.final-copy { margin:clamp(10px,2vh,18px) 0 -6px; color:#7d7d72; font-size:15px; font-weight:900; }.final-score { display:flex; align-items:baseline; gap:9px; margin:0; color:var(--leaf-deep); font-family:'Baloo 2',cursive; font-size:clamp(65px,10vh,85px); font-weight:800; line-height:1; }.final-score small { color:#7d7d72; font-family:'Nunito',sans-serif; font-size:16px; }.final-best { margin:1px 0 0; color:#7b837a; font-size:12px; font-weight:800; }.final-best strong { margin-left:4px; color:var(--leaf-deep); font-size:15px; }.play-again { margin-top:clamp(8px,1.7vh,15px); padding:13px 27px; border:1px solid rgba(255,255,255,.4); border-radius:14px; color:#fff; background:linear-gradient(135deg,#419767,#25754f); box-shadow:0 8px 16px rgba(20,84,51,.25); font:900 17px 'Nunito',sans-serif; cursor:pointer; transition:transform .14s ease,box-shadow .14s ease,filter .14s ease; }.play-again:hover { filter:brightness(1.07); transform:translateY(-2px); }.play-again:active { box-shadow:0 2px 6px rgba(20,84,51,.2); transform:translateY(2px); }.play-again:focus-visible { outline:4px solid var(--sun); outline-offset:4px; }.tip { margin:clamp(12px,2vh,19px) 0 0; color:#9b9385; font-size:12px; font-weight:800; }.confetti { position:absolute; width:10px; height:23px; border-radius:4px; background:var(--sun); }.confetti-one { top:21%; left:9%; background:#ec8061; transform:rotate(30deg); }.confetti-two { right:10%; bottom:22%; background:var(--leaf); transform:rotate(-25deg); }.confetti-three { top:14%; right:13%; width:17px; height:9px; background:#978bd0; transform:rotate(19deg); }.final-screen.new-record .confetti { animation:confetti-drift 1.15s ease-in-out infinite alternate; }
@keyframes record-pop { 0% { opacity:0; transform:translateY(8px) scale(.78); } 100% { opacity:1; transform:translateY(0) scale(1); } } @keyframes trophy-celebrate { to { transform:rotate(-7deg) translateY(-4px); } } @keyframes confetti-drift { to { translate:0 10px; rotate:12deg; } }
.final-screen.tnt-loss .trophy { display:none; }.final-screen.tnt-loss .tnt-cat { display:block; animation:cat-laugh 430ms cubic-bezier(.18,.9,.3,1.25) both; }.final-screen.tnt-loss h2 { color:#af3c3f; }.final-screen.tnt-loss .results-card::before { background:rgba(238,91,75,.14); }
@keyframes cat-laugh { 0% { opacity:0; transform:translateY(10px) scale(.78) rotate(4deg); } 100% { opacity:1; transform:translateY(0) scale(1) rotate(-3deg); } }

@media (max-width:560px) { .game-shell { padding-right:12px; padding-left:12px; }.brand-icon,.eyebrow { display:none; }.brand-lockup { gap:0; }.score-card,.best-card,.timer-card { min-width:57px; padding-right:6px; padding-left:6px; }.score-card strong,.best-card strong,.timer-card strong { font-size:22px; }.meadow { padding-right:9%; padding-left:9%; }.hole-grid { column-gap:7vw; }.grass-tuft { display:none; } }
@media (max-height:650px) { .game-shell { gap:6px; padding-top:8px; padding-bottom:7px; }.card-heading { padding-top:7px; padding-bottom:7px; }.instructions,.game-footer { display:none; }.meadow { padding-top:14px; padding-bottom:14px; }.status-row { min-height:27px; padding:5px; }.results-card,.start-card { padding-top:18px; padding-bottom:18px; }.start-copy { margin-top:8px; margin-bottom:10px; }.start-footer { margin-top:10px; margin-bottom:10px; }.tip { margin-top:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }