.whack-area { max-width:520px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.stats { display:flex; gap:18px; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.stats b { color:var(--ink); font-size:18px; }
.actions { display:flex; gap:8px; }
.board { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:420px; margin:0 auto; }
.hole { aspect-ratio:1/1; position:relative; border-radius:50%; background:var(--rule); cursor:pointer; overflow:hidden; }
.hole::before { content:""; position:absolute; inset:22%; border-radius:50%; background:var(--paper); }
.hole .mole { position:absolute; left:12%; right:12%; bottom:16%; height:52%; background:var(--orange); border-radius:50% 50% 42% 42%; display:flex; align-items:center; justify-content:center; font-size:24px; transition:transform .12s; z-index:1; }
.hole .mole .eyes { position:absolute; top:26%; left:0; right:0; display:flex; justify-content:space-around; }
.hole .mole .eyes i { width:7px; height:9px; background:#2a1e05; border-radius:50%; }
.hole .mole.hit { background:var(--cyan); }
.over-panel { max-width:380px; margin:18px auto 0; padding:24px; text-align:center; }
.over-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.record-msg { color:var(--orange); font-weight:700; margin:0 0 6px; }
.over-panel p { color:var(--muted); font-size:14px; margin:0; }
.over-stats { display:flex; justify-content:center; gap:28px; margin:16px 0; }
.over-stats b { display:block; font-size:26px; }
.over-stats span { color:var(--muted); font-size:12px; }
@media (max-width:780px) { .controls { flex-direction:column; align-items:stretch; } .stats { justify-content:space-between; } .actions { justify-content:center; } }