:root {
  --bg: #0d1117;
  --panel: #161b22;
  --brand: #58a6ff;
  --ok: #3fb950;
  --bad: #f85149;
  --text: #e6edf3;
  --gold: #ffd166;
  --slow: #7dd3fc;
  --freeze: #93c5fd;
}

*{box-sizing:border-box}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 20px;
}

.wrap {
  max-width: 520px;
  width: 100%;
  background: var(--panel);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

header {
  text-align: center;
  margin-bottom: 16px;
}
.brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 24px; font-weight: 800; color: var(--brand);
}
.brand .logo { width: 28px; height: 28px; }
.brand svg { fill: var(--brand); width: 100%; height: 100%; }
.desc { font-size: 14px; color: #8b949e; margin-top: 4px; }

.topbar { display:flex; flex-direction:column; gap:10px; }
.scoreboard {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 4px; font-weight: 800; font-size: 16px;
}
.controls-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
select{ background:#0c1220; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 10px; }
.toggle{ background:#0c1220; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 10px; cursor:pointer }
.toggle[aria-pressed="false"]{ opacity:.65 }

.timerbar{ width:100%; height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; margin:6px 0 10px }
.timerbar > #timerFill{ height:100%; width:0%; background:linear-gradient(90deg, #58a6ff, #3fb950); transition:width .2s linear }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hole {
  background: #0c0f14;
  border-radius: 12px;
  height: 120px;
  position: relative;
  overflow: hidden;
  outline: none;
  border:1px solid rgba(255,255,255,.06);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.hole:focus{ box-shadow:0 0 0 2px var(--brand); }
.hole.active {
  box-shadow:0 0 18px rgba(88,166,255,.45);
  border-color: rgba(88,166,255,.4);
}

.mole {
  width: 76px; height: 76px;
  background: #8b8b8b;
  border-radius: 50%;
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  animation: idleBob 2s ease-in-out infinite;
}
@keyframes idleBob{
  0%{ transform:translateX(-50%) translateY(0) }
  50%{ transform:translateX(-50%) translateY(2px) }
  100%{ transform:translateX(-50%) translateY(0) }
}

/* telinga */
.mole::before,
.mole::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 20px;
  height: 20px;
  background: #a3a3a3;
  border-radius: 50%;
}
.mole::before { left: 5px; }
.mole::after  { right: 5px; }

/* mata */
.mole .eye {
  width: 8px; height: 8px; background: #000; border-radius: 50%; margin: 0 5px;
}
/* hidung */
.mole .nose {
  width: 10px; height: 10px; background: #ff5c5c; border-radius: 50%;
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
}

/* ring pulse target */
.mole .ring{
  position:absolute; width:100px; height:100px; border-radius:50%;
  border:2px dashed rgba(255,255,255,.25); filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
  opacity:0; transform:translate(-12px, -6px) scale(.6);
}
.hole.active .mole .ring{
  animation: ringPulse 1.2s ease-out infinite;
  opacity:1;
}
@keyframes ringPulse{
  0%{ transform:translate(-12px,-6px) scale(.6); opacity:.7 }
  80%{ transform:translate(-12px,-6px) scale(1); opacity:0 }
  100%{ opacity:0 }
}

/* variasi power-ups */
.mole.golden{ background: linear-gradient(180deg, #ffe98a, #e9b949); }
.hole.active .mole.golden{ box-shadow:0 0 20px rgba(255,209,102,.55) }
.mole.power-star{ border:3px solid var(--gold) }
.mole.power-freeze{ border:3px solid var(--freeze) }
.mole.power-slow{ border:3px solid var(--slow) }

/* states & animasi */
.mole.show{ animation:bounceUp .28s ease-out forwards; }
@keyframes bounceUp{
  0%{ bottom:-80px }
  60%{ bottom:24px }
  80%{ bottom:8px }
  100%{ bottom:14px }
}

.mole.hit{ animation:hitSquash .22s ease-out; }
@keyframes hitSquash{
  0%{ transform:translateX(-50%) scale(1) }
  40%{ transform:translateX(-50%) scale(.72, .6) }
  100%{ transform:translateX(-50%) scale(1) }
}

.float-text {
  position:absolute; font-weight:900; color:var(--ok); text-shadow:0 0 6px #000;
  animation:floatScore .85s ease-out forwards;
  left:50%; top:24%; transform:translateX(-50%); pointer-events:none;
}
@keyframes floatScore{
  0%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) }
  100%{ opacity:0; transform:translateX(-50%) translateY(-40px) scale(1.2) }
}

.pow {
  position:absolute; font-weight:900; font-size:20px; color:var(--bad);
  text-shadow:0 0 8px #000; left:50%; top:14%; transform:translateX(-50%);
  animation:powEffect .5s ease-out forwards; pointer-events:none;
}
@keyframes powEffect{
  0%{ transform:translateX(-50%) scale(0) rotate(-10deg); opacity:1 }
  50%{ transform:translateX(-50%) scale(1.2) rotate(8deg); opacity:1 }
  100%{ transform:translateX(-50%) scale(1) rotate(0deg); opacity:0 }
}

.controls{
  display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap;
}
button{
  padding:10px; border:none; background:var(--brand); color:#fff; font-size:16px;
  border-radius:10px; font-weight:700; cursor:pointer;
}
button.secondary{ background:#243142 }
button:disabled{ opacity:.6; cursor:not-allowed }
a.homeBtn{ display:inline-block; padding:10px 12px; border-radius:10px; background:#243142; color:#fff; text-decoration:none }

#gameOverMsg {
  text-align: center; font-size: 18px; font-weight: 800; margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--panel);
}
.hidden { display:none; }

/* confetti star */
.confetti{ position:fixed; pointer-events:none; z-index:50; width:10px; height:10px; opacity:.95; will-change:transform,opacity; }
.confetti::before{ content:"✨"; font-size:14px; display:block; }

/* aksesibilitas */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ===== Strike FX (glow biru + petir + bintang) ===== */

/* pastikan wrap bisa jadi anchor overlay */
.wrap{ position:relative; }

/* glow pulse saat strike */
.wrap.strike .grid{
  box-shadow: 0 0 26px 8px rgba(50,209,255,.55), inset 0 0 24px rgba(50,209,255,.28);
  animation: pulseElectric .35s ease-out;
  border-radius: 14px;
}
@keyframes pulseElectric{
  0%{ filter: drop-shadow(0 0 0 #32d1ff); }
  50%{ filter: drop-shadow(0 0 16px #32d1ff); }
  100%{ filter: drop-shadow(0 0 4px #32d1ff); }
}

/* overlay efek */
.fx-overlay{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5;
}

/* petir */
.bolt{
  position:absolute; top:-10%;
  width: 10px; height: 40%;
  background: linear-gradient(180deg, #b4ecff 0%, #56d0ff 40%, #14b8ff 100%);
  filter: drop-shadow(0 0 12px rgba(50,209,255,.75)) drop-shadow(0 0 4px rgba(180,236,255,.9));
  transform: translateX(-50%) skewX(-10deg);
  clip-path: polygon(50% 0%, 60% 10%, 45% 20%, 58% 30%, 42% 42%, 56% 54%, 46% 66%, 60% 78%, 50% 100%, 40% 86%, 52% 72%, 38% 60%, 50% 48%, 36% 36%, 48% 24%, 35% 12%);
  animation: boltFlash .22s ease-out forwards, boltFall .45s ease-out forwards;
}
@keyframes boltFlash{
  0%{ opacity:0; transform: translateX(-50%) scaleY(.6) skewX(-10deg); }
  50%{ opacity:1; transform: translateX(-50%) scaleY(1.05) skewX(-10deg); }
  100%{ opacity:.85; }
}
@keyframes boltFall{
  0%{ top:-10%; }
  100%{ top:60%; opacity:0; }
}

/* bintang */
.star{
  position:absolute; font-weight:900; color:#bfe9ff; text-shadow:0 0 6px #3fd2ff;
  will-change: transform, opacity;
  animation: starFly .8s ease-out forwards;
}
.star::before{ content:'✦'; font-size:18px; }
@keyframes starFly{
  0%{ opacity:1; transform: translate(0,0) scale(.9) rotate(0deg); }
  100%{ opacity:0; transform: translate(var(--tx, 40px), var(--ty,-60px)) scale(1.2) rotate(15deg); }
}