html, body {margin:0; padding:0; height:100%; overflow:auto;}
body {font-family:sans-serif; text-align:center; background:#001f3f; color:#fff; position:relative; padding-bottom:60px;}
#header-logo {max-width:400px; margin:20px auto; display:block; z-index:1;}
/* removed fireworks canvas background */
/* body canvas { position:fixed!important; top:0; left:0; width:100%!important; height:100%!important; z-index:-1!important;} */

h1 {margin:0.5rem 0; color:#ff851b; z-index:1;} /* a friendlier pumpkin orange */
#taps {font-size:1.2rem; color:#FFDC00; margin-bottom:1rem; z-index:1;}

#game-board {display:grid; grid-template-columns:repeat(3,150px); grid-gap:1rem; justify-content:center; margin:1rem auto; z-index:1;}
.hole {width:150px; height:150px; background:transparent; border:4px solid #fff; border-radius:12px; position:relative; overflow:hidden;}
.mole {width:100%; height:100%; cursor:pointer; transition:transform .1s; z-index:1;}
.mole:active {transform:scale(1.1);}

.celebration {position:absolute; inset:0; font-size:3rem; display:flex; align-items:center; justify-content:center; z-index:2;}

.hidden {display:none!important;}
#result {margin-top:2rem; color:#2ECC40; z-index:1;}
.btn, #skip {display:inline-block; margin:1rem auto; padding:.75rem 1.5rem; background:#FF4136; color:#fff; text-decoration:none; border-radius:4px; z-index:1;}
footer {position:static; bottom:0; width:100%; padding:20px 0; font-size:1em; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; align-items:center; background:rgba(0,0,0,0.3); z-index:1;}
footer a {display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:#fff; opacity:.9; transition:opacity .2s;}
footer a:hover {opacity:1;}

/* Pumpkin burst */
.burst {position:absolute; inset:0; pointer-events:none; z-index:3;}
.pumpkin {
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  font-size: 24px;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.35));
  animation: pumpkin-fly 700ms ease-out forwards, pumpkin-fade 700ms ease-out forwards;
}

@keyframes pumpkin-fly {
  0%   { transform: translate(-50%,-50%) scale(0.6) rotate(0deg); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--scale)) rotate(var(--rot)); }
}
@keyframes pumpkin-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}