/* Whack-a-Toupeira v1.1.3 */
#wt-wrap{font-family:'Segoe UI',Arial,sans-serif;background:#1a3a0a;color:#e8f5e0;box-sizing:border-box;user-select:none;padding:16px;min-height:60vh}
#wt-setup{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wt-title{font-size:2rem;font-weight:800;color:#a3e635;text-align:center;margin-bottom:28px;text-shadow:0 0 20px rgba(163,230,53,.4)}
.wt-setup-box{display:flex;flex-direction:column;align-items:center;gap:20px}
.wt-label{color:#86a46a;font-size:.85rem;margin:0;text-transform:uppercase;letter-spacing:.1em}
.wt-diff-row{display:flex;gap:12px}
.wt-diff-btn{padding:12px 22px;background:#122808;border:2px solid #2d5a1a;border-radius:10px;color:#a3e635;font-size:1rem;font-weight:700;cursor:pointer}
.wt-diff-btn.wt-diff-active,.wt-diff-btn:hover{border-color:#a3e635;background:#1e4a0f}
.wt-btn{border:none;border-radius:10px;padding:10px 22px;font-size:1rem;font-weight:700;cursor:pointer;transition:filter .15s}
.wt-btn:hover{filter:brightness(1.15)}
.wt-btn-primary{background:linear-gradient(135deg,#a3e635,#65a30d);color:#1a2e00;padding:12px 36px;font-size:1.05rem}
.wt-btn-secondary{background:#1e293b;border:1px solid #334155;color:#94a3b8}
.wt-hud{display:flex;align-items:center;justify-content:center;gap:20px;padding:8px 0 16px;font-size:1.1rem;font-weight:700}
.wt-hud-item{display:flex;align-items:center;gap:4px;background:#122808;padding:6px 14px;border-radius:20px}
#wt-game{display:flex;flex-direction:column;align-items:center;cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij48cmVjdCB4PSIwIiB5PSIxIiB3aWR0aD0iMjIiIGhlaWdodD0iMTMiIHJ4PSIzIiBmaWxsPSIjNGE0YTRhIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTEgNykiLz48cmVjdCB4PSIxIiB5PSIyIiB3aWR0aD0iMTgiIGhlaWdodD0iNSIgcng9IjIiIGZpbGw9IiM3YTdhN2EiIHRyYW5zZm9ybT0icm90YXRlKC00NSAxMCA0KSIvPjxyZWN0IHg9IjkiIHk9IjciIHdpZHRoPSI3IiBoZWlnaHQ9IjI2IiByeD0iMyIgZmlsbD0iIzdhNDAxMCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDEzIDIwKSIvPjxyZWN0IHg9IjExIiB5PSI4IiB3aWR0aD0iMyIgaGVpZ2h0PSIyNCIgcng9IjEiIGZpbGw9IiM5YjU1MjAiIHRyYW5zZm9ybT0icm90YXRlKC00NSAxMyAyMCkiLz48L3N2Zz4=") 4 4, crosshair}
#wt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:440px;width:100%}

/* ---- Hole cells ---- */
/* DOM order = paint order: dirt -> hole-back -> mole -> hole-front */
/* NO z-index anywhere -- later in DOM = in front */
.wt-cell{position:relative;width:100%;aspect-ratio:1;background:radial-gradient(ellipse at 50% 75%,#4caf20,#2d6b0a);border-radius:12px;overflow:hidden}

/* 1st child: dirt mound behind everything */
.wt-dirt{position:absolute;bottom:12%;left:5%;width:90%;height:55%;background:radial-gradient(ellipse at 45% 36%,#b87a44,#7d4e28);border-radius:50%;box-shadow:0 6px 14px rgba(0,0,0,0.35)}

/* 2nd child: dark hole - behind mole */
.wt-hole-back{position:absolute;bottom:20%;left:17.5%;width:65%;height:32%;background:radial-gradient(ellipse at 50% 35%,#1a0500,#060100);border-radius:50%;box-shadow:inset 0 4px 18px rgba(0,0,0,0.9)}

/* 3rd child: mole SVG - hidden by default, slides up */
.wt-mole{position:absolute;bottom:-70%;left:17.5%;width:65%;transition:bottom .15s ease-out;pointer-events:none}
.wt-mole svg{width:100%;height:auto;display:block}
.wt-cell.wt-active .wt-mole{bottom:5%}
.wt-cell.wt-hit .wt-mole{bottom:-70%;transition:bottom .09s ease-in}

/* 4th child: front rim - LAST IN DOM = on top of mole */
/* Covers from hole centre down to cell bottom, hiding mole body */
.wt-hole-front{position:absolute;bottom:0;left:14%;width:72%;height:36%;background:linear-gradient(to bottom,#a87040 0%,#8b5530 50%,#7a4a24 100%);border-radius:50% 50% 0 0/60% 60% 0 0;box-shadow:0 -3px 10px rgba(0,0,0,0.3)}

/* +1 hit effect */
.wt-hit-fx{position:absolute;top:5%;left:50%;transform:translateX(-50%);font-size:1.4rem;font-weight:900;color:#fbbf24;text-shadow:0 0 8px rgba(251,191,36,.8);animation:wt-pop .45s ease-out forwards;pointer-events:none}
@keyframes wt-pop{0%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.7) translateY(-26px)}}

/* End overlay */
#wt-end{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;z-index:9999}
.wt-end-box{background:#0b1e38;border:2px solid #a3e635;border-radius:18px;padding:40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:360px;width:90%;box-shadow:0 0 40px rgba(163,230,53,.25)}
.wt-end-icon{font-size:4rem}
.wt-end-title{font-size:1.8rem;font-weight:800;color:#a3e635}
.wt-end-stats{color:#7fb3d3;font-size:1rem;line-height:1.8}
.wt-end-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}