:root{
  --bg:#faf8ef;
  --panel:#fff;
  --dark:#3e3a37;
  --muted:#7a726c;
  --accent:#4CAF50;
  --accent-2:#8f7a66;
  --ground:#e9e5dc;
  --mole:#7b4f2e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--dark);
  overscroll-behavior:none; user-select:none;
}

.wrap{ max-width:min(92vw, 720px); margin:24px auto 40px; padding:0 12px; }

.header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
h1{ margin:0; line-height:1.15; font-size:clamp(20px,5vw,32px); font-weight:800; }

.scores{ display:flex; gap:10px; flex-wrap:wrap }
.score-box{
  background:var(--accent-2); color:#fff; padding:8px 12px; border-radius:8px; text-align:center; min-width:90px;
}
.score-box .lbl{ display:block; font-size:12px; opacity:.9 }
.score-box span:last-child{ display:block; font-weight:700; font-size:18px }

.controls{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:14px 0 10px;
}
.select select{
  appearance:none; padding:8px 10px; border:1px solid #ddd; border-radius:8px; background:#fff;
}
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:8px; padding:10px 14px; cursor:pointer; font-weight:700;
}
.btn:hover{ filter:brightness(.95) }
.hint{ font-size:12px; color:var(--muted); }

.board{
  background:var(--panel);
  border-radius:12px; padding:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
  display:grid; gap:10px;
  grid-template-columns: repeat(3, 1fr);
  width:100%; aspect-ratio:1/1; /* مربع و رسپانسیو */
  touch-action:none;
}

/* سوراخ‌ها */
.hole{
  position:relative; background:linear-gradient(180deg,#d8d2c8,var(--ground));
  border-radius:18px; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  box-shadow:inset 0 6px 18px rgba(0,0,0,.18);
}

/* چمنک‌های بالایی برای حس عمق */
.hole::before{
  content:""; position:absolute; left:0; right:0; top:0; height:22%;
  background:linear-gradient(180deg,rgba(0,0,0,.12), rgba(0,0,0,0));
  pointer-events:none;
}

.mole{
  position:absolute; bottom:-60%; width:70%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #9d6a3b 0%, var(--mole) 60%);
  border:3px solid rgba(0,0,0,.25);
  box-shadow:0 10px 16px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:clamp(14px, 4vw, 22px);
  user-select:none; cursor:pointer;
  transform:translateY(0); transition: transform .18s ease;
}
.mole.up{ transform:translateY(-60%); }      /* بالا آمدن */
.mole.hit{ transform:translateY(20%); }       /* بعد از ضربه */

.mole::after{
  content:""; position:absolute; bottom:-6%; left:10%; right:10%; height:12%;
  background:rgba(0,0,0,.25); filter:blur(6px); border-radius:50%; pointer-events:none;
}

/* اورلی پایان */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:10; }
.hidden{ display:none }
.modal{
  background:#fff; color:#333; padding:22px 18px; border-radius:12px; width:min(92vw, 420px);
  text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.2)
}
.modal h2{ margin:8px 0 6px }
.modal p{ margin:0 0 12px }