:root { --ink:#352b39; --cream:#fff5d9; --grass:#7ebd5d; --dirt:#7d442f; --dirt-dark:#552b2c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Nunito,sans-serif; background:#aee3ed; overflow-x:hidden; overflow-y:auto; }
.sky { position:fixed; inset:0; background:linear-gradient(#9edce8 0 49%, #84c95e 49% 100%); z-index:-2; }
.sky:before,.sky:after { content:""; position:absolute; width:185px; height:45px; border-radius:50%; background:#d8f3f2; opacity:.8; top:10%; left:8%; box-shadow:38px 13px 0 8px #d8f3f2, 78px 2px 0 2px #d8f3f2; }
.sky:after { top:23%; left:auto; right:8%; transform:scale(.75); }
.game { width:min(92vw,670px); min-height:100vh; margin:auto; padding:clamp(22px,5vh,48px) 0 28px; display:flex; flex-direction:column; align-items:center; }
.topbar { width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.score,.timer { background:var(--cream); border:4px solid var(--ink); border-radius:18px; padding:8px 18px 10px; box-shadow:0 5px 0 var(--ink); text-align:center; }
.score { transform:rotate(-2deg); }.timer { transform:rotate(2deg); }
.score small,.timer small { display:block; font-size:12px; letter-spacing:2px; text-transform:uppercase; }
#score,#time { font-size:34px; line-height:32px; }
h1 { margin:3px 0 0; font-family:'Baloo 2',sans-serif; font-size:clamp(42px,8vw,64px); line-height:.92; letter-spacing:1px; text-align:right; text-shadow:3px 4px 0 var(--cream); transform:rotate(2deg); }
.subtitle { margin:10px 0 25px; font-size:14px; font-weight:900; letter-spacing:1px; opacity:.78; }
.bonus-status { display:inline-block; margin-left:8px; padding:3px 8px; border:2px solid var(--ink); border-radius:10px; background:#ffe45e; color:#a92035; animation:bonus-pulse .45s ease-in-out infinite alternate; }
.bonus-status[hidden] { display:none; }
@keyframes bonus-pulse { to { transform:scale(1.1) rotate(2deg); } }
body.frenzy-bonus:after { content:""; position:fixed; inset:8px; z-index:18; border:8px solid #ff2b74; border-radius:24px; pointer-events:none; box-shadow:inset 0 0 22px #20f7ff,0 0 16px #fff43b,0 0 36px #9a46ff; animation:neon-frame .45s linear infinite; }
body.frenzy-bonus .board { animation:neon-board .6s linear infinite alternate; }
body.frenzy-bonus .hole { animation:neon-hole .55s linear infinite; }
@keyframes neon-frame { 0% { filter:hue-rotate(0deg); } 50% { border-color:#21f6ff; } 100% { filter:hue-rotate(360deg); } }
@keyframes neon-board { from { box-shadow:0 10px 0 rgba(53,43,57,.28),0 0 18px #ff2b74; } to { box-shadow:0 10px 0 rgba(53,43,57,.28),0 0 28px #20f7ff,0 0 45px #fff43b; } }
@keyframes neon-hole { 0% { box-shadow:inset 0 7px rgba(255,199,104,.23),0 5px #5d382e,0 0 7px 5px #ff2b74; } 33% { box-shadow:inset 0 7px rgba(255,199,104,.23),0 5px #5d382e,0 0 9px 6px #20f7ff; } 66% { box-shadow:inset 0 7px rgba(255,199,104,.23),0 5px #5d382e,0 0 9px 6px #fff43b; } 100% { box-shadow:inset 0 7px rgba(255,199,104,.23),0 5px #5d382e,0 0 7px 5px #9a46ff; } }
.board { width:100%; padding:30px clamp(18px,5vw,38px) 36px; border:5px solid var(--ink); border-radius:30px; background:#91d36a; box-shadow:0 10px 0 rgba(53,43,57,.28), inset 0 4px 0 rgba(255,255,255,.3); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,4vw,31px); }
.hole { position:relative; aspect-ratio:1.15; border:0; border-radius:50%; background:radial-gradient(ellipse at center,#3d2226 0 43%,#5b2d2c 45% 64%,#9a5636 66% 100%); box-shadow:inset 0 7px 0 rgba(255,199,104,.23), 0 5px 0 #5d382e; cursor:pointer; transition:transform .12s; }
.hole:hover { transform:scale(1.04); }
.hole:active { transform:scale(.94); }
.mole { position:absolute; left:50%; bottom:-12%; width:48%; height:82%; transform:translateX(-50%); border-radius:50% 50% 43% 43%; background:linear-gradient(110deg,#8c4a32,#cd7a49 68%); opacity:0; pointer-events:none; transition:bottom .25s ease-in, opacity .15s; }
.mole:before { content:""; position:absolute; top:34%; left:0; width:100%; height:11%; background:radial-gradient(ellipse at 28% 50%,var(--ink) 0 14%,transparent 16%),radial-gradient(ellipse at 72% 50%,var(--ink) 0 14%,transparent 16%); }
.mole:after { content:""; position:absolute; top:57%; left:32%; width:37%; height:16%; border-radius:50%; background:#f09d87; box-shadow:inset 0 -3px 0 #9d554f; }
.hole.active .mole { bottom:35%; opacity:1; transition:bottom .22s cubic-bezier(.16,.85,.37,1.35), opacity .1s; }
.hole.dropping .mole { bottom:-12%; opacity:0; transition:none; }
.jewel { position:absolute; left:50%; bottom:-12%; display:none; width:35%; height:58%; place-items:center; transform:translateX(-50%) rotate(45deg); border:4px solid var(--ink); border-radius:7px; color:white; font-size:clamp(28px,5vw,42px); line-height:1; text-shadow:0 2px 0 rgba(0,0,0,.35); box-shadow:inset 5px 4px rgba(255,255,255,.55),0 5px 0 rgba(53,43,57,.45),0 0 15px currentColor; z-index:2; }
.jewel.blue { background:linear-gradient(135deg,#d8fbff,#2bd8ff 42%,#286bff); color:#62edff; }.jewel.red { background:linear-gradient(135deg,#ffe2df,#ff5265 42%,#a7164a); color:#ff5265; }.jewel.orange { background:linear-gradient(135deg,#fff0b0,#ff9b24 42%,#eb4f1d); color:#ffb72f; }
.hole.jewel-visible .jewel { display:grid; animation:jewel-pop .24s cubic-bezier(.16,.85,.37,1.3), jewel-float 1s ease-in-out .24s infinite alternate; }
.hole.jewel-visible .jewel.blue { display:grid; }.hole.jewel-visible .jewel.red { display:none; }.hole.jewel-visible .jewel.orange { display:none; }
.hole.jewel-blue .jewel.blue,.hole.jewel-red .jewel.red,.hole.jewel-orange .jewel.orange { display:grid; }
@keyframes jewel-pop { from { opacity:0; bottom:-12%; transform:translateX(-50%) rotate(15deg) scale(.4); } to { opacity:1; bottom:35%; transform:translateX(-50%) rotate(45deg) scale(1); } }
@keyframes jewel-float { to { bottom:39%; } }
.stars { position:absolute; top:-34%; left:50%; width:150%; color:#ffe45e; font-size:18px; letter-spacing:2px; line-height:1; opacity:0; text-shadow:1px 2px 0 #a84c35; transform:translateX(-50%); }
.hole.dizzy .stars { opacity:1; animation:orbit-stars .7s linear infinite; }
.hole.dizzy .mole:before { height:12%; top:37%; background:linear-gradient(12deg,transparent 38%,var(--ink) 42% 55%,transparent 59%) 17% 0/28% 100% no-repeat,linear-gradient(-12deg,transparent 38%,var(--ink) 42% 55%,transparent 59%) 55% 0/28% 100% no-repeat; }
.hole:not(.dizzy) .mole:before { height:16%; top:32%; background:radial-gradient(circle at 28% 50%,var(--ink) 0 8%,transparent 10%),radial-gradient(circle at 72% 50%,var(--ink) 0 8%,transparent 10%); }
@keyframes orbit-stars { from { transform:translateX(-50%) rotate(0deg); } to { transform:translateX(-50%) rotate(360deg); } }
.hammer-wrap { --hammer-x:0px; --hammer-y:0px; position:fixed; left:50%; bottom:-12px; width:310px; height:205px; margin:0; pointer-events:none; transform:translate(calc(-50% + var(--hammer-x)),var(--hammer-y)) rotate(-8deg); transform-origin:center bottom; transition:transform .16s cubic-bezier(.12,.8,.22,1); z-index:10; }
.hammer-wrap.returning { transition:transform .65s cubic-bezier(.22,.8,.35,1); }
.hammer-wrap.smack { transform:translate(calc(-50% + var(--hammer-x)),var(--hammer-y)) rotate(22deg); }
.hammer { position:absolute; top:66px; left:137px; width:40px; height:164px; border:5px solid var(--ink); border-radius:22px; background:linear-gradient(90deg,#6d351f 0 13%,#bd6538 14% 48%,#ed9c58 49% 68%,#8a4327 69%); box-shadow:inset 6px 0 rgba(255,232,170,.25); z-index:2; }
.head { position:absolute; top:7px; left:33px; width:245px; height:88px; border:6px solid var(--ink); border-radius:23px 23px 34px 34px; background:linear-gradient(#f75e52 0 15%,#d9333c 16% 74%,#a92035 75%); box-shadow:inset 0 8px rgba(255,215,165,.4), 0 7px 0 #7f2633; z-index:4; }
.head:before,.head:after { content:""; position:absolute; top:20px; width:21px; height:32px; border-radius:8px; background:#ffb85a; border:4px solid var(--ink); }
.head:before { left:20px; }.head:after { right:20px; }
.head span { position:absolute; left:64px; top:26px; width:105px; height:19px; border-radius:20px; background:#ffdd7b; opacity:.72; }
.collar { position:absolute; top:80px; left:119px; width:76px; height:33px; border:5px solid var(--ink); border-radius:10px; background:linear-gradient(#c7d5d5,#71878f); z-index:3; }
.combo-frenzy { position:fixed; inset:0; z-index:30; display:grid; place-items:center; overflow:hidden; opacity:0; pointer-events:none; background:linear-gradient(125deg,#ff3d68,#ffdb3a,#38e8c6,#775cff,#ff3d68); background-size:400% 400%; transition:opacity .15s; }
.combo-frenzy.visible { opacity:1; pointer-events:auto; animation:frenzy-colors 1.2s linear infinite; }
.combo-frenzy:before,.combo-frenzy:after { content:""; position:absolute; width:140vmax; height:140vmax; background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.34) 0 8deg,transparent 8deg 18deg); animation:frenzy-spin 5s linear infinite; }
.combo-frenzy:after { width:85vmax; height:85vmax; animation-direction:reverse; animation-duration:3s; }
.frenzy-burst { position:relative; z-index:1; text-align:center; color:white; filter:drop-shadow(0 7px 0 #52275d); animation:frenzy-pop .55s ease-in-out infinite alternate; }
.frenzy-burst p { margin:0 0 4px; font-size:clamp(17px,4vw,27px); font-weight:900; letter-spacing:6px; }.frenzy-burst h2 { margin:0; font-family:'Baloo 2',sans-serif; font-size:clamp(70px,16vw,150px); line-height:.7; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; }.frenzy-burst strong { display:block; min-height:80px; margin-top:32px; font-size:clamp(42px,10vw,82px); line-height:1; color:#fff36a; -webkit-text-stroke:4px var(--ink); paint-order:stroke fill; }
@keyframes frenzy-colors { 0% { background-position:0 50%; } 100% { background-position:100% 50%; } }
@keyframes frenzy-spin { to { transform:rotate(360deg); } }
@keyframes frenzy-pop { to { transform:scale(1.07) rotate(-1deg); } }
.game-over { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:rgba(47,37,53,.56); opacity:0; pointer-events:none; transition:opacity .2s; }
.game-over.visible { opacity:1; pointer-events:auto; }
.special-frenzy { --frenzy-a:#2176ff; --frenzy-b:#7deaff; }.special-frenzy:before { content:""; position:fixed; inset:0; z-index:16; pointer-events:none; border:10px solid var(--frenzy-a); box-shadow:inset 0 0 30px var(--frenzy-b),0 0 30px var(--frenzy-b); animation:special-pulse .55s ease-in-out infinite alternate; }.special-frenzy .game { filter:drop-shadow(0 0 12px var(--frenzy-b)); }.special-frenzy .board { box-shadow:0 10px 0 rgba(53,43,57,.28),0 0 25px var(--frenzy-b); }
.special-frenzy .combo-frenzy { background:linear-gradient(125deg,#071a75,#178dff,#8ceeff,#1644be,#071a75); }.red-frenzy .combo-frenzy { background:linear-gradient(125deg,#5d071c,#ef204d,#ffb1aa,#9c0d32,#5d071c); }.orange-frenzy .combo-frenzy { background:linear-gradient(125deg,#8f2508,#ff711e,#ffe47a,#d8450a,#8f2508); }
body.red-frenzy { --frenzy-a:#f0224f; --frenzy-b:#ff9d89; }.red-frenzy .timer,.red-frenzy .score { background:#ffd9df; } body.orange-frenzy { --frenzy-a:#ff741f; --frenzy-b:#ffe86b; }.orange-frenzy .timer,.orange-frenzy .score { background:#ffe6aa; }
@keyframes special-pulse { from { filter:brightness(1) hue-rotate(0deg); } to { filter:brightness(1.4) hue-rotate(25deg); } }
.result-card { width:min(92vw,390px); padding:28px 28px 25px; border:5px solid var(--ink); border-radius:28px; background:var(--cream); box-shadow:0 10px 0 var(--ink); text-align:center; }
.result-kicker { margin:0; color:#b14338; font-size:13px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }.result-card h2 { margin:0; font-family:'Baloo 2',sans-serif; font-size:50px; line-height:1; }.final-score { margin:14px 0 22px; font-size:20px; }.final-score strong { display:block; font-size:45px; line-height:1; }
.action-button,.link-button { width:100%; border:4px solid var(--ink); border-radius:14px; padding:11px 16px; font:900 19px Nunito,sans-serif; cursor:pointer; }.action-button { background:#f25a4d; color:white; box-shadow:0 4px 0 #8e2a35; }.link-button { margin-top:14px; background:#ffe28b; color:var(--ink); box-shadow:0 4px 0 #b78345; }.action-button:active,.link-button:active { transform:translateY(3px); box-shadow:none; }
.leaderboard-card ol { margin:17px 0 22px; padding:0; list-style:none; counter-reset:score-rank; }.leaderboard-card li { counter-increment:score-rank; display:flex; justify-content:space-between; padding:7px 10px; border-bottom:2px dashed #dfbf85; font-size:18px; }.leaderboard-card li:before { content:counter(score-rank) "."; margin-right:auto; }.leaderboard-card li span { font-weight:900; }.leaderboard-card .empty-score { justify-content:center; color:#806f62; font-size:15px; }
@media (min-width:501px) { .game { padding-top:clamp(14px,3vh,28px); padding-bottom:8px; } .subtitle { margin-top:6px; margin-bottom:14px; } .board { padding:20px 30px 24px; gap:15px 24px; } .hole { aspect-ratio:1.6; } .hammer-wrap { position:relative; left:auto; bottom:auto; width:310px; height:140px; margin-top:12px; flex:none; transform:translate(var(--hammer-x),var(--hammer-y)) scale(.72) rotate(-8deg); } .hammer-wrap.smack { transform:translate(var(--hammer-x),var(--hammer-y)) scale(.72) rotate(22deg); } }
@media (max-width:500px) { .board { border-width:4px; padding-top:23px; padding-bottom:27px; } .subtitle { margin-bottom:18px; } h1 { font-size:42px; } .score,.timer { padding:7px 11px 9px; } #score,#time { font-size:28px; } .hammer-wrap { bottom:-42px; transform:translate(calc(-50% + var(--hammer-x)),var(--hammer-y)) scale(.72) rotate(-8deg); } .hammer-wrap.smack { transform:translate(calc(-50% + var(--hammer-x)),var(--hammer-y)) scale(.72) rotate(22deg); } }