/* Layout: un seul écran centré — titre, tableau de bord, grille 3x2 de terriers */
:root{
  --bg:#fff8e1; --ink:#4a3423; --coral:#ff6f61; --dirt:#6b4423; --dirt-dark:#3e2714;
  --chip:#ffe3cf; --mole:#2f2a33; --belly:#b9b4bd;
  --font:"Fredoka", "Trebuchet MS", system-ui, sans-serif;
  color-scheme:light;
}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
  padding:16px;margin:0;box-sizing:border-box;display:flex;justify-content:center;user-select:none;-webkit-user-select:none}
.wrap{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:14px}
h1{color:var(--coral);font-size:clamp(2rem,7vw,2.8rem);font-weight:600;margin:4px 0 0;text-wrap:balance}
.hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:500}
.chip b{background:var(--chip);border-radius:8px;padding:2px 14px;min-width:2.2em;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
button#start{font-family:var(--font);font-size:1.15rem;font-weight:600;background:var(--coral);color:#fff;border:0;border-radius:999px;padding:10px 28px;cursor:pointer;box-shadow:0 4px 0 #c94d41}
button#start:active{transform:translateY(3px);box-shadow:0 1px 0 #c94d41}
button#start:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.msg{min-height:1.4em;font-size:1.05rem;text-align:center}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,3vw,22px);width:100%;margin-top:10px;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='17' y='14' width='6' height='24' rx='2' fill='%23a0682f'/%3E%3Crect x='5' y='3' width='30' height='14' rx='4' fill='%23555'/%3E%3C/svg%3E") 20 10,pointer}
.hole{position:relative;aspect-ratio:1/1;max-width:100%;overflow:hidden}
.mole{position:absolute;left:12%;width:76%;bottom:12%;transform:translateY(105%);transition:transform .18s ease-out;touch-action:manipulation}
.hole.up .mole{transform:translateY(8%)}
.hole.hit .mole{transform:translateY(105%) ;transition:transform .25s ease-in}
.hole.hit .mole svg{filter:brightness(1.3)}
.mound{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none}
.pow{position:absolute;left:50%;top:20%;transform:translate(-50%,0) scale(.4);color:var(--coral);font-weight:700;font-size:1.4rem;opacity:0;pointer-events:none}
.hole.hit .pow{animation:pow .45s ease-out}
@keyframes pow{0%{opacity:1;transform:translate(-50%,0) scale(.5)}100%{opacity:0;transform:translate(-50%,-40px) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.mole,.hole.hit .mole{transition:none}.hole.hit .pow{animation:none}}

.board{width:100%;max-width:360px;margin-top:18px;background:var(--chip);border-radius:12px;padding:12px 18px;box-sizing:border-box}
.board h2{margin:0 0 8px;font-size:1.2rem;color:var(--coral);text-align:center}
.board ol{margin:0;padding-left:1.6em;font-variant-numeric:tabular-nums}
.board li{display:flex;justify-content:space-between;padding:2px 0}
.save{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.save input{font-family:var(--font);font-size:1rem;padding:8px 12px;border:2px solid var(--dirt);border-radius:999px;width:170px}
.save button{font-family:var(--font);font-size:1rem;font-weight:600;background:var(--dirt);color:#fff;border:0;border-radius:999px;padding:8px 18px;cursor:pointer}