:root{
  --bg: #fffbd6;
  --fg: #111827;
  --btn: #111827;
  --btn-fg: #ffffff;
  --accent: #f59e0b;
}

/* Halloween mode overrides */
body.halloween {
  background:
    radial-gradient(circle at center, #2b0000 0%, #000 80%);
  color: #ff9900;
  transition: background 1s ease, color 1s ease;
  font-family: "Creepster", "Segoe UI", cursive;
}

body.halloween::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 102, 0, 0.05) 0 40px, transparent 40px 80px);
  mix-blend-mode: screen;
  animation: fog 10s infinite linear;
  pointer-events: none;
}

@keyframes fog {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--fg);
  background:
    radial-gradient(circle at 50% 40%, #ffe98a 0 160px, #ffd24f 160px 300px, transparent 300px),
    radial-gradient(circle at 45% 38%, #000 0 10px, transparent 11px),
    radial-gradient(circle at 55% 38%, #000 0 10px, transparent 11px),
    radial-gradient(50% 30% at 50% 56%, #000 0 25px, transparent 26px),
    linear-gradient(#fef9c3, #fffbd6);
  background-size: cover;
  transition: background 1s ease;
}

/* Floating stage for the face */
.stage{
  position:fixed;
  inset:0;
  pointer-events:none;
}
#face{
  position:absolute;
  font-size:clamp(48px, 10vw, 120px);
  line-height:1;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.15));
  transform: translate(20vw, 30vh) rotate(0deg);
  transition: transform .9s ease-in-out, opacity 0.8s ease;
  will-change: transform, opacity;
  opacity: 0; /* hidden until 300 clicks */
}
#face.visible { opacity: 1; }

.roll{ animation: roll 1.1s linear; }
.grow{ animation: grow .6s ease-in-out; }
.flash{ animation: flash .5s ease-in-out; }

@keyframes roll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes grow { 0% {transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)} }
@keyframes flash {
  0%{ filter: drop-shadow(0 0 0 rgba(245,158,11,0)); }
  50%{ filter: drop-shadow(0 0 24px rgba(245,158,11,.9)); }
  100%{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.15)); }
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:1rem;
  padding:2rem;
  text-align:center;
}
h1{font-size:clamp(2rem,5vw,3rem);margin:0.5rem 0}
.counter{
  font-size:clamp(1.25rem,4vw,2rem);
  margin:0.25rem 0 1rem;
  transition: transform 0.15s ease, text-shadow 0.15s ease;
}
.counter.bump{ transform: scale(1.3); text-shadow: 0 0 15px var(--accent); }

.btn{
  font-size:clamp(1rem,3.2vw,1.25rem);
  padding:1rem 1.5rem;
  border-radius:1rem;
  border:none;
  background:var(--btn);
  color:var(--btn-fg);
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active{ transform: scale(0.95) rotate(-1deg); box-shadow:0 0 15px var(--accent); }
.btn:focus{ outline: 3px solid #f59e0b; outline-offset: 3px }
/* ===== GAME OVER overlay ===== */
.overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.overlay.show{ display: flex; }
.overlay-card{
  background: #111827; color: #fff; text-align: center;
  padding: 2rem; border-radius: 1rem; width: min(90vw, 520px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.overlay-title{
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 2px; margin-bottom: .5rem;
}
.overlay p{ margin: .25rem 0 1.25rem }
.overlay .btn{ font-size: 1rem; }
.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0;
  overflow: hidden;
}