:root { font-family: system-ui, sans-serif; color: #3b291a; background: #e8f5d8; }
* { box-sizing: border-box; }
body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 20px; }
.game { width: min(100%, 580px); text-align: center; background: #fff9e7; padding: 24px; border-radius: 22px; box-shadow: 0 14px 40px #24430d2a; }
h1 { color: #cc6040; margin: 0 0 8px; }
.intro { margin: 0 0 16px; }
.status { display: flex; justify-content: center; gap: 26px; font-size: 1.2rem; font-weight: 600; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 28px 0; }
.hole { display: grid; place-items: center; border: 0; position: relative; min-width: 0; aspect-ratio: 1.25; border-radius: 50%; background: radial-gradient(ellipse at center, #2c1609 0 40%, #74441c 42% 53%, #8a6334 55% 66%, #75a740 68%); overflow: hidden; cursor: default; touch-action: manipulation; }
.mole { font-size: clamp(38px, 10vw, 76px); transform: translateY(110%); transition: transform 130ms ease-out; user-select: none; pointer-events: none; }
.hole.active { cursor: pointer; }
.hole.active .mole { transform: translateY(0); }
.start { border: 0; border-radius: 12px; color: white; background: #3e843f; padding: 12px 28px; font-size: 1.05rem; font-weight: bold; cursor: pointer; }
.start:hover:not(:disabled) { background: #2d6530; }
.start:disabled { opacity: .55; cursor: default; }
.message { min-height: 1.5em; font-weight: 600; }