:root {
  --ink: #342352;
  --cream: #fff9e9;
  --grass: #8edb79;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Nunito", sans-serif;
  background: var(--cream);
  overflow-x: hidden;
}

.game-shell { position: relative; width: min(92vw, 720px); margin: 0 auto; padding: 44px 20px 42px; text-align: center; }
.decor { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.decor-one { width: 22px; height: 22px; top: 13%; left: 3%; background: #f28aa5; }
.decor-two { width: 14px; height: 14px; top: 31%; right: 1%; background: #70c8e5; }
.decor-three { width: 34px; height: 34px; bottom: 16%; left: -7%; border: 7px solid #f6d35d; }
.decor-four { width: 18px; height: 18px; bottom: 7%; right: 4%; background: #82d29c; }
.decor-five { width: 116px; height: 116px; top: -44px; left: -70px; background: #f8c7d0; opacity: .72; }
.decor-six { width: 142px; height: 142px; right: -85px; bottom: -48px; background: #c7b4e8; opacity: .62; }
.game-header { position: relative; width: 100%; }
.mascot { position: absolute; z-index: 2; left: calc(50% - clamp(225px, 19vw, 265px)); bottom: 0; width: clamp(76px, 15vw, 106px); aspect-ratio: .9; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 35% 38%, #2d2030 0 7%, transparent 8%), radial-gradient(circle at 65% 38%, #2d2030 0 7%, transparent 8%), radial-gradient(ellipse at 50% 59%, #f39a9a 0 7%, transparent 8%), #9a604e; box-shadow: inset 0 7px 0 rgba(255,255,255,.16), -10px 13px 11px rgba(45,25,37,.62); transform: rotate(-8deg); opacity: 0; animation: mascot-pop .45s cubic-bezier(.2, 1.5, .4, 1) .75s forwards; }
@keyframes mascot-pop { from { opacity: 0; transform: rotate(-8deg) translateY(28px) scale(.4); } to { opacity: 1; transform: rotate(-8deg) translateY(0) scale(1); } }
.title-mole { display: inline-block; transform: translateX(18px); }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #527344; }
.sparkle { color: #ff9b44; margin: 0 8px; }
h1 { margin: 3px 0 0; font-family: "Bangers", "Baloo 2", cursive; font-size: clamp(72px, 17vw, 128px); line-height: .82; letter-spacing: 2px; color: #fffdf1; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 #d76c76, 0 8px 0 rgba(102, 66, 91, .28); }
.title-part { display: inline-block; opacity: 0; animation: title-pop .42s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.title-part:nth-of-type(1) { animation-delay: .05s; }
.title-part:nth-of-type(2) { animation-delay: .2s; }
.title-part:nth-of-type(3) { animation-delay: .35s; }
.title-part:nth-of-type(4) { animation-delay: .5s; }
@keyframes title-pop { from { opacity: 0; transform: translateY(25px) scale(.45); } to { opacity: 1; transform: translateY(0) scale(1); } }
.subtitle { margin: 12px 0 21px; font-size: 16px; font-weight: 800; color: #47613d; }
.stats-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; margin-bottom: 18px; }
.timer-card, .score-card { display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 8px 18px; border: 4px solid var(--ink); border-radius: 22px; background: var(--cream); box-shadow: 0 5px 0 var(--ink); }
.score-label { font-size: 14px; font-weight: 900; letter-spacing: 2px; } .score-card strong { min-width: 42px; font-family: "Baloo 2", cursive; font-size: 35px; line-height: 1; }
.timer-card strong { min-width: 42px; font-family: "Baloo 2", cursive; font-size: 35px; line-height: 1; } .timer-card small { font-family: "Nunito", sans-serif; font-size: 15px; }
.start-button { border: 0; padding: 7px 4px; color: var(--ink); background: transparent; font: 900 18px "Nunito", sans-serif; cursor: pointer; }
.start-button:hover { color: #d76c76; }
.game-over { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(82%, 450px); padding: 34px 24px 30px; border: 5px solid var(--ink); border-radius: 30px; background: var(--cream); box-shadow: 0 10px 0 var(--ink); transform: translate(-50%, -50%); }
.game-over p { margin: 0 0 3px; font-size: 19px; font-weight: 900; color: #d76c76; }
.game-over h2 { margin: 0 0 20px; font-family: "Bangers", "Baloo 2", cursive; font-size: clamp(58px, 12vw, 88px); line-height: .9; letter-spacing: 2px; color: #fffdf1; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 #d76c76; }
.game-over button { border: 3px solid var(--ink); border-radius: 15px; padding: 10px 25px; color: var(--cream); background: #82d29c; box-shadow: 0 4px 0 var(--ink); font: 900 16px "Nunito", sans-serif; cursor: pointer; }
.game-over button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.combo-message { position: absolute; z-index: 4; top: 54%; left: 50%; color: #f6d35d; font: 900 clamp(36px, 8vw, 64px) "Bangers", cursive; letter-spacing: 2px; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 #d76c76; transform: translate(-50%, -50%); animation: combo-pop .7s ease-out forwards; pointer-events: none; }
.red-countdown { position: absolute; z-index: 4; top: 54%; left: 50%; color: #f6d35d; font: 900 clamp(36px, 8vw, 64px) "Bangers", cursive; letter-spacing: 2px; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 #d76c76; transform: translate(-50%, -50%); pointer-events: none; }
.mole-legend { display: flex; width: max-content; max-width: 100%; justify-content: center; align-items: center; gap: clamp(24px, 8vw, 58px); margin: 24px auto 0; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-mole { position: relative; display: inline-block; width: 28px; height: 24px; border-radius: 50% 50% 44% 44%; box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 3px 3px rgba(45,25,37,.3); }
.legend-mole::before { content: ""; position: absolute; left: 7px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #2d2030; box-shadow: 10px 0 #2d2030; }
.legend-normal { background: #9a604e; } .legend-golden { background: #e9ae35; } .legend-red { background: #d94757; }
.legend-text { max-width: 170px; font-size: 12px; font-weight: 800; line-height: 1.1; text-align: left; white-space: nowrap; }
@keyframes combo-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -65%) scale(1); } }
.playfield { position: relative; padding: clamp(25px, 5vw, 42px); border: 5px solid var(--ink); border-radius: 38px; background: #f6bf79; box-shadow: 0 10px 0 #533c58, inset 0 0 0 8px rgba(255,255,255,.17); }
.playfield::before { content: ""; position: absolute; inset: 13px; border: 3px dashed rgba(255,255,255,.5); border-radius: 27px; pointer-events: none; }
.grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3.5vw, 27px); z-index: 1; }
.hole { position: relative; aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 12px 0 rgba(255,255,255,.25), inset 0 -10px 0 rgba(78,45,67,.12), 0 7px 0 rgba(87,56,64,.25); }
.hole::after { content: ""; position: absolute; inset: 20% 14%; border-radius: 50%; background: #6a4359; box-shadow: inset 0 8px 12px rgba(26, 18, 35, .4); }
.hole.mole::before { content: ""; position: absolute; z-index: 2; left: 26%; top: 20%; width: 48%; aspect-ratio: .9; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 35% 38%, #2d2030 0 7%, transparent 8%), radial-gradient(circle at 65% 38%, #2d2030 0 7%, transparent 8%), radial-gradient(ellipse at 50% 59%, #f39a9a 0 7%, transparent 8%), #9a604e; box-shadow: inset 0 6px 0 rgba(255,255,255,.16), 0 4px 3px rgba(45,25,37,.3); animation: mole-pop .18s ease-out; }
.hole.mole.golden::before { background: radial-gradient(circle at 35% 38%, #4a3216 0 7%, transparent 8%), radial-gradient(circle at 65% 38%, #4a3216 0 7%, transparent 8%), radial-gradient(ellipse at 50% 59%, #fff0a1 0 7%, transparent 8%), #e9ae35; box-shadow: inset 0 6px 0 rgba(255,255,255,.38), 0 4px 6px rgba(117,72,15,.42); }
.hole.mole.red::before { background: radial-gradient(circle at 35% 38%, #351b25 0 7%, transparent 8%), radial-gradient(circle at 65% 38%, #351b25 0 7%, transparent 8%), radial-gradient(ellipse at 50% 59%, #ffb0a0 0 7%, transparent 8%), #d94757; box-shadow: inset 0 6px 0 rgba(255,255,255,.25), 0 4px 6px rgba(126,25,38,.5); }
.hole.mole.explode::before { animation: explode .45s ease-out forwards; }
@keyframes explode { to { opacity: 0; transform: scale(1.65); filter: brightness(1.8); } }
.hole.mole { overflow: hidden; }
@keyframes mole-pop { from { transform: translateY(35%); } to { transform: translateY(0); } }
.hole-pink { background: #f28aa5; } .hole-yellow { background: #f6d35d; } .hole-blue { background: #70c8e5; } .hole-green { background: #82d29c; } .hole-orange { background: #f49c61; } .hole-purple { background: #b99be0; }
.hint { margin: 26px 0 0; font-size: 15px; font-weight: 800; color: #46663c; } .hint span { color: #eb8b3e; margin: 0 7px; }
@media (max-width: 500px) { .game-shell { padding-top: 30px; } .playfield { border-radius: 28px; } .hole::after { inset: 22% 12%; } }