/* ============================================================
   WATER GAME — 3D Faucet, Glass Bottle & Water (CSS art)
   ============================================================ */

/* ---------- SCENE ---------- */
.wg-scene {
  position: relative;
  width: 100%;
  height: 360px;
  flex: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(130% 80% at 50% 8%, oklch(0.26 0.05 210 / 0.55) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.135 0.03 226) 0%, oklch(0.105 0.028 230) 100%);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05), inset 0 -30px 60px -30px black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.wg-scene.shake { animation: wg-shake 0.4s ease-in-out; }

/* radar grid */
.wg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, oklch(0.82 0.13 202 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.82 0.13 202 / 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 30%, black 30%, transparent 80%);
  pointer-events: none;
}
.wg-glow-floor {
  position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
  width: 280px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.82 0.13 202 / 0.35), transparent);
  filter: blur(6px); opacity: 0; transition: opacity .4s; pointer-events: none;
}
.wg-scene.flowing .wg-glow-floor { opacity: 1; }
.wg-scene.crashed .wg-glow-floor { background: radial-gradient(closest-side, oklch(0.66 0.21 24 / 0.4), transparent); opacity: 1; }

/* big multiplier readout */
.wg-mult {
  position: absolute; top: 104px; left: 0; right: 0;
  text-align: center; z-index: 20;
  font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1;
  color: var(--text);
  text-shadow: 0 0 30px oklch(0.82 0.13 202 / 0.45);
  transition: color .2s, transform .2s;
}
.wg-mult.t2 { color: var(--aqua-bright); }
.wg-mult.t10 { color: oklch(0.78 0.16 300); text-shadow: 0 0 30px oklch(0.78 0.16 300 / 0.5); }
.wg-mult.t50 { color: var(--gold); text-shadow: 0 0 34px oklch(0.84 0.13 85 / 0.55); }
.wg-mult.crashed { color: var(--red-bright); text-shadow: 0 0 30px oklch(0.66 0.21 24 / 0.6); }
.wg-mult-label { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--muted-2); margin-top: 4px; text-transform: uppercase; }

/* ============================================================
   FAUCET (chrome, 3D, rotating valve)
   ============================================================ */
.wg-faucet {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 14; width: 120px;
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 8px 10px oklch(0 0 0 / 0.55));
}

/* wall flange the pipe comes out of (top) */
.wg-faucet-flange {
  width: 52px; height: 14px; border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg,#3a3f47,#7f8893 22%,#e8edf2 48%,#ffffff 52%,#b9c1ca 70%,#41464f);
  box-shadow: inset 0 -2px 3px oklch(0 0 0 / 0.4);
}

/* vertical chrome stem */
.wg-faucet-stem {
  width: 30px; height: 30px; margin-top: -1px;
  background: linear-gradient(90deg,#2f343b 0%,#6b7280 16%,#aeb6bf 34%,#f6f9fc 49%,#ffffff 53%,#c4ccd5 66%,#7a828c 84%,#2c3037 100%);
  border-radius: 3px;
}

/* the round valve handle (the "llave") that turns */
.wg-valve {
  position: absolute; top: 6px; left: 50%;
  width: 62px; height: 62px; margin-left: -31px;
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
  z-index: 16;
}
.wg-valve-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffffff 0%, #cfd6de 18%, #8b939d 46%, #565d66 70%, #2f343b 100%);
  box-shadow: 0 4px 10px oklch(0 0 0 / 0.5), inset 0 2px 3px oklch(1 0 0 / 0.5), inset 0 -4px 8px oklch(0 0 0 / 0.45);
}
.wg-valve-ring::after { /* inner cut */
  content: ""; position: absolute; inset: 13px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #11141a, #05070a);
  box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.8);
}
.wg-valve-spoke {
  position: absolute; top: 50%; left: 50%; width: 62px; height: 10px;
  margin: -5px 0 0 -31px; border-radius: 6px;
  background: linear-gradient(180deg,#f3f6f9,#aeb6bf 40%,#5a6068 100%);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.5);
}
.wg-valve-spoke.b { transform: rotate(60deg); }
.wg-valve-spoke.c { transform: rotate(120deg); }
.wg-valve-hub {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #aeb6bf 45%, #4a505a);
  box-shadow: inset 0 -2px 3px oklch(0 0 0 / 0.5); z-index: 2;
}
.wg-scene.flowing .wg-valve { animation: wg-valve-turn 2.4s linear infinite; }

/* collar + downward spout */
.wg-faucet-collar {
  width: 40px; height: 12px; border-radius: 4px; margin-top: 2px;
  background: linear-gradient(90deg,#2f343b,#7f8893 24%,#f1f4f7 50%,#c4ccd5 68%,#2c3037);
  box-shadow: inset 0 -2px 2px oklch(0 0 0 / 0.45);
}
.wg-faucet-spout {
  width: 22px; height: 20px; border-radius: 0 0 7px 7px;
  background: linear-gradient(90deg,#2a2e35,#6b7280 18%,#dfe5eb 48%,#ffffff 52%,#aeb6bf 70%,#2a2e35);
  box-shadow: inset 0 -3px 4px oklch(0 0 0 / 0.5);
}
.wg-faucet-tip {
  width: 26px; height: 6px; border-radius: 3px; margin-top: -1px;
  background: linear-gradient(90deg,#1f2228,#8b939d 50%,#1f2228);
}

/* ---------- WATER STREAM ---------- */
.wg-stream {
  position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 0; z-index: 12; opacity: 0;
  border-radius: 4px;
  background: linear-gradient(180deg,
    oklch(0.95 0.06 200 / 0.95) 0%,
    oklch(0.85 0.12 205 / 0.9) 35%,
    oklch(0.72 0.14 220 / 0.85) 100%);
  box-shadow: 0 0 12px oklch(0.85 0.13 205 / 0.6);
  background-size: 100% 24px;
  transition: opacity .15s;
}
.wg-scene.flowing .wg-stream { opacity: 1; animation: wg-stream-flow .4s linear infinite, wg-stream-wob 0.3s ease-in-out infinite alternate; }

/* ============================================================
   GLASS BOTTLE (3D cylinder)
   ============================================================ */
.wg-bottle-wrap {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center;
  transition: transform .3s;
}
.wg-scene.crashed .wg-bottle-wrap { animation: wg-burst-jolt .4s ease-in-out; }

/* open neck / rim */
.wg-bottle-neck {
  position: relative; width: 38px; height: 22px; z-index: 3;
  background: linear-gradient(90deg,
    oklch(0.55 0.03 220 / 0.35), oklch(0.92 0.02 210 / 0.5) 45%, oklch(0.99 0.01 200 / 0.6) 52%, oklch(0.6 0.03 220 / 0.35));
  border-radius: 4px 4px 0 0;
  border: 1px solid oklch(0.9 0.03 205 / 0.4); border-bottom: none;
}
.wg-bottle-rim {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 11px; border-radius: 50%;
  background: linear-gradient(90deg, oklch(0.6 0.03 220 / 0.5), oklch(0.99 0.02 200 / 0.8) 50%, oklch(0.6 0.03 220 / 0.5));
  border: 1px solid oklch(0.95 0.03 205 / 0.6);
  box-shadow: inset 0 2px 3px oklch(0 0 0 / 0.4);
}

/* body cylinder */
.wg-bottle-body {
  position: relative; width: 100px; height: 150px;
  border-radius: 14px 14px 22px 22px;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      oklch(0.4 0.03 222 / 0.30) 0%,
      oklch(0.7 0.04 210 / 0.16) 16%,
      oklch(0.96 0.02 200 / 0.10) 44%,
      oklch(0.99 0.01 200 / 0.16) 52%,
      oklch(0.7 0.04 210 / 0.12) 74%,
      oklch(0.42 0.03 222 / 0.28) 100%);
  border: 1.5px solid oklch(0.9 0.03 205 / 0.30);
  box-shadow:
    inset 0 2px 6px oklch(1 0 0 / 0.10),
    inset 0 -10px 24px oklch(0 0 0 / 0.35),
    0 14px 30px -10px oklch(0 0 0 / 0.6);
  backdrop-filter: blur(1px);
}
.wg-scene.crashed .wg-bottle-body { border-color: oklch(0.66 0.21 24 / 0.7); }

/* water fluid */
.wg-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg,
    oklch(0.86 0.12 200) 0%,
    oklch(0.72 0.15 215) 45%,
    oklch(0.55 0.15 235) 100%);
  box-shadow: inset 0 0 24px oklch(0.5 0.12 230 / 0.6);
  transition: height .09s linear;
  overflow: hidden;
}
.wg-water-surface {
  position: absolute; top: -7px; left: 0; right: 0; height: 14px;
  border-radius: 50%;
  background: linear-gradient(90deg, oklch(0.8 0.1 205 / 0.7), oklch(0.95 0.07 195) 50%, oklch(0.8 0.1 205 / 0.7));
  box-shadow: 0 0 14px oklch(0.9 0.12 200 / 0.7);
  animation: wg-surface-bob 1.4s ease-in-out infinite;
}
.wg-water-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, oklch(1 0 0 / 0.22) 48%, transparent 56%);
  mix-blend-mode: screen;
}
.wg-bubble {
  position: absolute; bottom: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(1 0 0 / 0.95), oklch(0.9 0.06 200 / 0.25) 70%, transparent);
  opacity: 0; animation: wg-bubble-rise linear infinite;
}

/* glass gloss highlight on top of everything */
.wg-bottle-gloss {
  position: absolute; top: 8px; left: 14px; width: 15px; height: 120px;
  border-radius: 10px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.5), oklch(1 0 0 / 0.06) 60%, transparent);
  filter: blur(1px);
}
.wg-bottle-gloss.r { left: auto; right: 18px; width: 7px; opacity: 0.5; }

/* label band */
.wg-bottle-label {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%);
  z-index: 5; text-align: center; pointer-events: none;
  font-weight: 700; letter-spacing: 1px; color: oklch(1 0 0 / 0.85);
  text-shadow: 0 1px 4px oklch(0 0 0 / 0.5);
}
.wg-bottle-label .lg { font-size: 13px; }
.wg-bottle-label .sm { font-size: 8px; letter-spacing: 2px; color: oklch(1 0 0 / 0.6); margin-top: 2px; }

/* ---------- 3D scene (Three.js) ---------- */
.wg-scene3d { position: absolute; inset: 0; z-index: 6; }
.wg-scene3d canvas { width: 100% !important; height: 100% !important; display: block; }
/* flash blanco/rojo al reventar */
.wg-flash {
  position: absolute; inset: 0; z-index: 16; pointer-events: none;
  background: #ffd5d0; opacity: 0; mix-blend-mode: screen;
}
/* salpicaduras pegadas al "vidrio" de la pantalla */
.wg-lens { position: absolute; inset: 0; z-index: 17; pointer-events: none; overflow: hidden; }
.wg-lens-drop { will-change: transform, opacity; }

/* ---------- KEYFRAMES ---------- */
@keyframes wg-valve-turn { to { transform: rotate(360deg); } }
@keyframes wg-stream-flow { to { background-position-y: 24px; } }
@keyframes wg-stream-wob { from { transform: translateX(-50%) scaleX(0.8); } to { transform: translateX(-50%) scaleX(1.25); } }
@keyframes wg-surface-bob { 0%,100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(0.7) translateY(1px); } }
@keyframes wg-bubble-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateY(-150px) scale(1); opacity: 0; }
}
@keyframes wg-burst-jolt {
  0% { transform: translateX(-50%) rotate(0); }
  25% { transform: translateX(-50%) rotate(-6deg) translateY(-4px); }
  60% { transform: translateX(-50%) rotate(5deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
@keyframes wg-drop-fly {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-60px)) scale(0.4); }
}