:root{
  --bg:#f7fbe7;
  --card:#fff;
  --green:#66d32e;
  --brown:#8b5a2b;
  --yellow:#ffd54f;
  --accent:#ff6b6b;
  --shadow: rgba(0,0,0,0.12);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);}
.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px}
.title{font-size:2.4rem;margin:0 0 8px;color:var(--green);text-align:center}
.hud{display:flex;gap:16px;margin-bottom:18px;font-weight:700}
.hud .score,.hud .time{background:var(--card);padding:8px 12px;border-radius:10px;box-shadow:0 6px 18px var(--shadow);font-size:1.1rem}
.board{display:grid;grid-template-columns:repeat(3,140px);grid-gap:14px;margin:8px}
.hole{width:140px;height:140px;background:linear-gradient(180deg,#d7bfa9,var(--brown));border-radius:50%;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;box-shadow:inset 0 -10px 30px rgba(0,0,0,0.2)}
.mole{width:84px;height:84px;background:transparent;border-radius:0;transform:translateY(120%);transition:transform .18s ease-out;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.mole svg{width:84px;height:84px;display:block}
.mole.show{transform:translateY(0%);}
.controls{margin-top:16px;display:flex;gap:10px}
.btn{background:linear-gradient(90deg,var(--green),var(--yellow));border:0;padding:10px 16px;border-radius:10px;font-weight:800;cursor:pointer;box-shadow:0 10px 30px rgba(102,211,46,0.15)}
.btn.ghost{background:transparent;border:2px solid rgba(0,0,0,0.06)}
.hint{margin-top:14px;color:#6b6b6b}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:50}
.overlay.hidden{display:none}
.overlay-box{background:#fff;padding:22px;border-radius:12px;min-width:260px;text-align:center}
.overlay-box h2{margin:0 0 8px;color:var(--accent)}
.overlay-box p{font-size:1.25rem;margin:8px 0}
/* Responsive */
@media(max-width:520px){
  .board{grid-template-columns:repeat(3,92px)}
  .hole{width:92px;height:92px}
  .mole{width:56px;height:56px}
  .mole svg{width:56px;height:56px}
}