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;}
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:#ff4136; z-index:1;}
#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; width:100%; height:100%; font-size:3rem; display:flex; align-items:center; justify-content:center; z-index:1;}
.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;}