/* =========================================================================
 * Whack-a-Leak — game-specific styles
 *
 * Loaded after shared/brand.css. Everything in here is specific to the
 * board, pipes, leak animations, puddle, and special pipe types.
 * ========================================================================= */

/* ---------- Grid of holes ---------- */
#board {
  position: absolute;
  left: 60px; right: 60px;
  top: 320px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 36px;
  height: 1260px;
}

/* Hole = a ceramic/drain looking ellipse. */
.hole {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 35%, #121230 0%, #1a1a44 55%, #24245a 100%);
  border-radius: 50% / 36%;
  box-shadow:
    inset 0 30px 48px rgba(0,0,0,0.7),
    inset 0 -8px 16px rgba(255,255,255,0.06),
    0 10px 0 rgba(0,0,0,0.35);
  border: 6px solid var(--navy-deep);
}
/* Leaking hole floats above neighbors so its jets can overflow. */
.hole.leaking { z-index: 2; }
/* Metal drain ring around the rim for a "bathroom fixture" feel. */
.hole::before {
  content: '';
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 40%;
  border-radius: 50% / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* ---------- The pipe ---------- */
.pipe {
  position: absolute;
  left: 18%; right: 18%;
  bottom: 8%;
  height: 92%;
  background:
    linear-gradient(90deg,
      #1f1f36 0%,
      #3a3a54 6%,
      #6a6a86 16%,
      #b0b0cc 32%,
      #ececf8 46%,
      #ffffff 50%,
      #ececf8 54%,
      #b0b0cc 68%,
      #6a6a86 84%,
      #3a3a54 94%,
      #1f1f36 100%);
  border: 6px solid #14142a;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-shadow:
    inset 0 -30px 50px rgba(0,0,0,0.45),
    inset 0 12px 20px rgba(255,255,255,0.25);
}

/* Flange cap — thick bolted ring at the top of the shaft. */
.flange {
  position: absolute;
  left: -18%; right: -18%;
  top: -28px;
  height: 54px;
  background:
    radial-gradient(circle at 8%  52%, #0e0e24 5px, #4a4a66 6px, transparent 7px),
    radial-gradient(circle at 24% 52%, #0e0e24 5px, #4a4a66 6px, transparent 7px),
    radial-gradient(circle at 40% 52%, #0e0e24 5px, #4a4a66 6px, transparent 7px),
    radial-gradient(circle at 56% 52%, #0e0e24 5px, #4a4a66 6px, transparent 7px),
    radial-gradient(circle at 72% 52%, #0e0e24 5px, #4a4a66 6px, transparent 7px),
    radial-gradient(circle at 88% 52%, #0e0e24 5px, #4a4a66 6px, transparent 7px),
    linear-gradient(180deg, #a8a8c4 0%, #ececf8 30%, #ffffff 50%, #b4b4d0 80%, #5e5e7a 100%);
  border: 6px solid #14142a;
  border-radius: 10px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.5);
}

/* Coupling band — a threaded ring partway down the shaft. */
.coupling {
  position: absolute;
  left: -8%; right: -8%;
  top: 46%;
  height: 62px;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0.35) 0 2px,
      rgba(255,255,255,0.15) 2px 6px),
    linear-gradient(90deg,
      #1f1f36 0%,
      #5a5a76 12%,
      #b8b8d2 34%,
      #f4f4ff 50%,
      #b8b8d2 66%,
      #5a5a76 88%,
      #1f1f36 100%);
  border: 5px solid #14142a;
  border-radius: 8px;
  box-shadow:
    0 6px 10px rgba(0,0,0,0.45),
    inset 0 3px 0 rgba(255,255,255,0.4),
    inset 0 -3px 0 rgba(0,0,0,0.4);
}

/* ---------- Leak effect ---------- */
.leak {
  position: absolute;
  left: 50%; top: -18px;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 3;
}
.jet {
  position: absolute;
  left: -26px; top: -150px;
  width: 52px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 75%,
    rgba(255,255,255,0.98) 0%,
    rgba(210,238,255,0.92) 18%,
    rgba(130,205,255,0.85) 42%,
    rgba(70,160,220,0.65) 72%,
    rgba(30,100,165,0.0)  100%);
  filter: blur(3px);
  box-shadow:
    0 0 40px rgba(140,210,255,0.75),
    0 0 90px rgba(110,198,255,0.4);
  opacity: 0;
  transform-origin: 50% 100%;
}
.hole.stage4 .jet { animation: squirt 520ms linear infinite; }
.jet.j1  { --dx: -380px; --dy: -220px; --rot: -62deg; animation-delay:   0ms; }
.jet.j2  { --dx: -280px; --dy: -340px; --rot: -42deg; animation-delay:  40ms; }
.jet.j3  { --dx: -180px; --dy: -440px; --rot: -24deg; animation-delay:  80ms; }
.jet.j4  { --dx:  -80px; --dy: -520px; --rot:  -8deg; animation-delay: 120ms; }
.jet.j5  { --dx:   20px; --dy: -560px; --rot:   4deg; animation-delay: 160ms; }
.jet.j6  { --dx:  120px; --dy: -520px; --rot:  18deg; animation-delay: 200ms; }
.jet.j7  { --dx:  220px; --dy: -440px; --rot:  32deg; animation-delay: 240ms; }
.jet.j8  { --dx:  320px; --dy: -340px; --rot:  48deg; animation-delay: 280ms; }
.jet.j9  { --dx:  400px; --dy: -220px; --rot:  64deg; animation-delay: 320ms; }
.jet.j10 { --dx:    0px; --dy: -600px; --rot:   0deg; animation-delay:  20ms; }
.jet.j11 { --dx: -140px; --dy: -480px; --rot: -16deg; animation-delay: 180ms; }
.jet.j12 { --dx:  160px; --dy: -480px; --rot:  20deg; animation-delay: 100ms; }
@keyframes squirt {
  0%   { opacity: 0;    transform: translate(0, 40px) rotate(var(--rot)) scaleY(0.2); }
  8%   { opacity: 1;    transform: translate(calc(var(--dx) * 0.1), calc(var(--dy) * 0.2)) rotate(var(--rot)) scaleY(1.2); }
  40%  { opacity: 1;    transform: translate(calc(var(--dx) * 0.6), var(--dy)) rotate(calc(var(--rot) * 0.5)) scaleY(1.3); }
  75%  { opacity: 0.95; transform: translate(var(--dx), calc(var(--dy) * 0.35)) rotate(calc(var(--rot) * 0.15)) scaleY(1); }
  100% { opacity: 0;    transform: translate(calc(var(--dx) * 1.25), calc(var(--dy) * -0.5 + 160px)) rotate(calc(var(--rot) * -0.25)) scaleY(0.7); }
}

/* High-pressure shudder — only when the pipe is at stage 3 or exploding. */
.hole.stage3 .pipe,
.hole.stage4 .pipe { animation: shudder 90ms linear infinite; }
@keyframes shudder {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2px, 1px); }
  50%      { transform: translate(2px, -1px); }
  75%      { transform: translate(-1px, -1px); }
}

/* ---------- Drips (stages 1–3) ---------- */
.drip {
  position: absolute;
  left: -14px; top: -10px;
  width: 28px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 30%,
    rgba(255,255,255,0.95) 0%,
    rgba(195,232,255,0.92) 25%,
    rgba(120,200,255,0.85) 60%,
    rgba(55,140,205,0.6)  100%);
  filter: blur(1.5px);
  box-shadow: 0 0 16px rgba(140,210,255,0.65);
  opacity: 0;
  transform-origin: 50% 0%;
}
.drip.d1 { --ox: -80px; }
.drip.d2 { --ox:   0px; }
.drip.d3 { --ox:  80px; }
@keyframes dripFall {
  0%   { opacity: 0; transform: translate(var(--ox), -8px) scale(0.2, 0.2); }
  18%  { opacity: 1; transform: translate(var(--ox), 0)    scale(1, 0.85); }
  35%  { opacity: 1; transform: translate(var(--ox), 18px) scale(0.95, 1.25); }
  65%  { opacity: 1; transform: translate(var(--ox), 140px) scale(0.78, 1.55); }
  100% { opacity: 0; transform: translate(var(--ox), 320px) scale(0.55, 1.3); }
}
.hole.stage1 .drip.d2 { animation: dripFall 1300ms ease-in infinite; }
.hole.stage2 .drip.d1 { animation: dripFall 1200ms ease-in infinite; }
.hole.stage2 .drip.d3 { animation: dripFall 1200ms ease-in infinite; animation-delay: 400ms; }
.hole.stage3 .drip.d1 { animation: dripFall 1000ms ease-in infinite; }
.hole.stage3 .drip.d2 { animation: dripFall 1000ms ease-in infinite; animation-delay: 250ms; }
.hole.stage3 .drip.d3 { animation: dripFall 1000ms ease-in infinite; animation-delay: 500ms; }

.hole.leaking {
  box-shadow:
    inset 0 0 0 8px rgba(240,200,100,0.85),
    inset 0 30px 48px rgba(0,0,0,0.7),
    inset 0 -8px 16px rgba(255,255,255,0.06),
    0 0 40px rgba(240,200,100,0.5),
    0 10px 0 rgba(0,0,0,0.35);
}
.hole.fixed { animation: flash 260ms ease-out; }
@keyframes flash {
  0%   { box-shadow: inset 0 0 0 14px var(--hit), inset 0 30px 48px rgba(0,0,0,0.7), 0 10px 0 rgba(0,0,0,0.35); }
  100% { box-shadow: inset 0 30px 48px rgba(0,0,0,0.7), 0 10px 0 rgba(0,0,0,0.35); }
}
.hole.missed { animation: missFlash 460ms ease-out; }
@keyframes missFlash {
  0%   { box-shadow: inset 0 0 0 14px var(--miss), inset 0 30px 48px rgba(0,0,0,0.7), 0 10px 0 rgba(0,0,0,0.35); }
  100% { box-shadow: inset 0 30px 48px rgba(0,0,0,0.7), 0 10px 0 rgba(0,0,0,0.35); }
}

/* ---------- Puddle at the bottom (grows on each miss) ---------- */
#puddle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(180deg,
    rgba(130,205,255,0.55) 0%,
    rgba(55,140,205,0.85)  60%,
    rgba(30,100,160,0.95) 100%);
  pointer-events: none;
  transition: height 500ms cubic-bezier(.2,1.4,.5,1);
  z-index: 4;
}
#puddle::before {
  content: '';
  position: absolute;
  left: -40px; right: -40px; top: -18px;
  height: 28px;
  background:
    radial-gradient(ellipse 100px 20px at 10% 100%, rgba(210,240,255,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 100px 20px at 30% 100%, rgba(180,225,255,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 100px 20px at 55% 100%, rgba(210,240,255,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 100px 20px at 78% 100%, rgba(180,225,255,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 100px 20px at 96% 100%, rgba(210,240,255,0.9) 0%, transparent 70%);
  animation: waveBob 2400ms ease-in-out infinite;
  filter: blur(1px);
}
@keyframes waveBob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-40px); }
}

/* ---------- Tagline ---------- */
#tagline {
  position: absolute;
  bottom: 60px; left: 60px;
  font-family: "Luckiest Guy", "Fredoka", sans-serif;
  font-size: 34px;
  color: var(--honey-lt);
  letter-spacing: 2px;
  text-shadow: 0 4px 0 var(--navy-deep);
  opacity: 0.85;
  z-index: 6;
  max-width: 520px;
  line-height: 1.15;
}

/* ---------- Special pipe types ---------- */
/* Golden pipe (+50) — honey-tinted shaft, flange, coupling + glow */
.hole.type-golden .pipe {
  background: linear-gradient(90deg,
    #4a3a00 0%,
    #8a6a10 10%,
    #d6a830 25%,
    #ffe380 45%,
    #fff6c0 50%,
    #ffe380 55%,
    #d6a830 75%,
    #8a6a10 90%,
    #4a3a00 100%);
  border-color: #2a1800;
}
.hole.type-golden .flange {
  background:
    radial-gradient(circle at 8%  52%, #3a2800 5px, #6a4d10 6px, transparent 7px),
    radial-gradient(circle at 24% 52%, #3a2800 5px, #6a4d10 6px, transparent 7px),
    radial-gradient(circle at 40% 52%, #3a2800 5px, #6a4d10 6px, transparent 7px),
    radial-gradient(circle at 56% 52%, #3a2800 5px, #6a4d10 6px, transparent 7px),
    radial-gradient(circle at 72% 52%, #3a2800 5px, #6a4d10 6px, transparent 7px),
    radial-gradient(circle at 88% 52%, #3a2800 5px, #6a4d10 6px, transparent 7px),
    linear-gradient(180deg, #d6a830 0%, #ffe380 30%, #fff6c0 50%, #ffcf55 80%, #8a6a10 100%);
  border-color: #2a1800;
  box-shadow: 0 8px 0 rgba(0,0,0,0.4), 0 0 30px rgba(255,200,80,0.9), inset 0 2px 0 rgba(255,255,255,0.5);
}
.hole.type-golden .coupling {
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0.35) 0 2px,
      rgba(255,220,120,0.3) 2px 6px),
    linear-gradient(90deg, #3a2800 0%, #8a6a10 18%, #f0c060 50%, #8a6a10 82%, #3a2800 100%);
  border-color: #2a1800;
}
.hole.type-golden {
  box-shadow:
    inset 0 30px 48px rgba(0,0,0,0.7),
    inset 0 -8px 16px rgba(255,255,255,0.06),
    0 0 55px rgba(255,200,80,0.6),
    0 10px 0 rgba(0,0,0,0.35);
}

/* Double-leak pipe — hazard stripes on the coupling, needs 2 taps */
.hole.type-double .coupling {
  background:
    repeating-linear-gradient(45deg,
      rgba(230,60,60,0.9)  0 16px,
      rgba(30,20,20,0.9)  16px 28px);
  border-color: #4a0c0c;
}
.hole.type-double.cracked .coupling {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,120,120,0.95) 0 16px,
      rgba(30,20,20,0.9)    16px 28px);
  box-shadow:
    0 6px 10px rgba(0,0,0,0.45),
    inset 0 3px 0 rgba(255,255,255,0.4),
    inset 0 -3px 0 rgba(0,0,0,0.4),
    0 0 30px rgba(230,60,60,0.8);
}