/* ================================================================
   water-puzzle.css
   ----------------------------------------------------------------
   CSS of water.html, moved into the Water Puzzle skill popup.
   Rules are copied from water.html; the only changes are:
     - every selector is prefixed with #waterStage so it cannot
       collide with the rest of the site (water.html's generic names
       like .card, .wpz-action, .modal, .wpz-water are global there)
     - water.html's own narrow-screen (max-width:768px) layout is
       used as the base, because the popup is narrow: jars on top,
       ocean + tap side by side below
     - keyframe names are prefixed water- (they are global)
     - the jar water gradient is set inline (jars are generated per
       puzzle, so each needs its own gradient id)
   The popup itself (.quiz-overlay / .quiz-modal / .card / .bq-*) is
   styled by the shared quiz-popup-theme.css, not here.
   ================================================================ */

#waterStage{
  --orange:#FF6B35;--bg:#F4F9FF;--blue:#3A86FF;--green:#00E676;
  --purple:#8338EC;--navy:#172554;--ink:#24324a;--muted:#718096;
  --shadow:0 14px 35px rgba(38,72,130,.12);
  font-family:Nunito,system-ui,sans-serif;
  color:var(--ink);
  max-width:820px;
  margin:0 auto;
  text-align:left;
}
#waterStage *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#waterStage button{font:inherit;border:0;cursor:pointer;touch-action:manipulation}

/* Interaction Stage Grid (water.html desktop layout: ocean | jars | tap) */
#waterStage .wpz-interaction-stage{
  display:grid;
  grid-template-columns:170px minmax(300px, 1fr) 180px;
  gap:16px;
  align-items:flex-end;
  margin-top:6px;
  position:relative;
}

/* Standalone Ocean Directly on Ground */
#waterStage .wpz-ocean-side{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  padding:10px 4px;
  position:relative;
}
#waterStage .wpz-ocean-zone{
  height:120px;
  width:140px;
  border-radius:62% 38% 58% 42% / 45% 58% 42% 55%;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  background:radial-gradient(circle at 30% 30%, #44ccff 0%, #1282db 70%, #095db3 100%);
  border:3px solid #73d6fc;
  box-shadow:inset 0 6px 16px rgba(255,255,255,.35), inset 0 -6px 14px rgba(0,50,120,.35), 0 8px 18px rgba(18,130,219,.28);
  touch-action:none;
  transition:all 0.25s ease;
  cursor:pointer;
}
#waterStage .wpz-ocean-zone:before,
#waterStage .wpz-ocean-zone:after{
  content:"";
  position:absolute;
  left:-8%;
  width:116%;
  height:16px;
  border-radius:50%;
  border-top:3px solid rgba(255,255,255,.75);
  opacity:.8;
  animation:water-wave 2.8s ease-in-out infinite;
}
#waterStage .wpz-ocean-zone:before{top:32px}
#waterStage .wpz-ocean-zone:after{top:68px;animation-delay:-1.2s}
@keyframes water-wave{50%{transform:translateX(10px)}}
#waterStage .wpz-ocean-content{position:relative;z-index:2;text-align:center;color:#fff;font-weight:900;text-shadow:0 1px 3px rgba(0,40,90,.5)}
#waterStage .wpz-ocean-content .wpz-ocean-icon{font-size:26px;display:block;margin-bottom:1px}
#waterStage .wpz-ocean-label{margin-top:8px;font-size:13px;font-weight:900;color:#3b526f;text-align:center}
#waterStage .wpz-ocean-sublabel{font-size:11px;color:#70849e;margin-top:1px;text-align:center}
#waterStage .wpz-ocean-zone.wpz-over{border-color:#1878ed;box-shadow:0 0 0 4px rgba(58,134,255,.3), inset 0 -20px 35px rgba(18,130,219,.4);transform:scale(1.06)}

/* Realistic Water Tap */
#waterStage .wpz-tap-zone{
  height:100%;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding-top:20px;
  position:relative;
  touch-action:none;
  background:linear-gradient(180deg,#f8fbff,#eef7ff);
  border-radius:22px;
  border:2px solid #e1ecfa;
}
#waterStage .wpz-tap{width:160px;height:120px;position:relative;touch-action:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12))}
#waterStage .wpz-tap svg{width:100%;height:100%;overflow:visible}
#waterStage .wpz-water-stream{
  position:absolute;
  left:110px;
  top:92px;
  width:12px;
  height:90px;
  border-radius:20px;
  background:linear-gradient(#8bd2ff,#1878ed);
  transform-origin:top;
  animation:water-flow .45s linear infinite;
  display:none;
  box-shadow:0 0 8px rgba(58,134,255,.5);
}
#waterStage .wpz-tap-zone.wpz-active .wpz-water-stream{display:block}
#waterStage .wpz-tap-zone.wpz-active:after{
  content:'Tap Active';
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  background:#eaf4ff;
  color:#1764b2;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
@keyframes water-flow{50%{opacity:.6;transform:scaleY(.88)}}

/* Containers Area */
#waterStage .wpz-containers-column{min-width:0;display:flex;flex-direction:column;justify-content:space-between}
#waterStage .wpz-jar-area-label{text-align:center;color:#60748f;font-weight:900;font-size:13px;margin-bottom:6px}
#waterStage .wpz-containers{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:16px;
  padding:8px 4px 4px;
  min-height:270px;
  position:relative;
}
#waterStage .wpz-station{
  width:min(190px, 48%);
  text-align:center;
  position:relative;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  transition:transform 0.4s ease, opacity 0.2s ease;
  z-index:10;
}
#waterStage .wpz-station.wpz-dragging{
  z-index:30;
  filter:drop-shadow(0 16px 14px rgba(58,134,255,.3));
  opacity:0.92;
  transition:none;
}

/* Dynamic Pour Animation Over Target */
#waterStage .wpz-station.wpz-pouring{
  z-index:25;
  animation:waterJarPour 0.9s ease-in-out forwards;
}
@keyframes waterJarPour{
  0%{transform:translate(var(--tx, 0px), var(--ty, 0px)) rotate(0deg);}
  35%{transform:translate(var(--tx, 0px), var(--ty, 0px)) rotate(-25deg);}
  75%{transform:translate(var(--tx, 0px), var(--ty, 0px)) rotate(-45deg);}
  100%{transform:translate(0px, 0px) rotate(0deg);}
}
#waterStage .wpz-station.wpz-pouring .wpz-vessel{filter:drop-shadow(0 8px 10px rgba(24,120,237,.22))}

/* Vessel Styling */
#waterStage .wpz-vessel{height:190px;position:relative;touch-action:none}
#waterStage .wpz-vessel svg{width:100%;height:100%;overflow:visible}
#waterStage .wpz-glass-body{fill:rgba(255,255,255,.28);stroke:#6a9cd0;stroke-width:3.5}
#waterStage .wpz-water{transition:y .35s,height .35s}
#waterStage .wpz-water-shine{fill:rgba(255,255,255,.3)}
#waterStage .wpz-mark{stroke:#678bb3;stroke-width:2}
#waterStage .wpz-marktext{font-size:12px;fill:#426188;font-weight:900}
#waterStage .wpz-vessel-label{font-size:15px;font-weight:900;color:var(--navy);margin-top:2px}
#waterStage .wpz-amount{display:inline-block;margin-top:3px;background:#eaf4ff;color:var(--blue);border-radius:999px;padding:3px 12px;font-weight:900;font-size:15px;min-width:65px}
#waterStage .wpz-drop-hint{font-size:11px;color:#7d8da6;margin-top:3px;font-weight:700;line-height:1.2}
#waterStage .wpz-station.wpz-over{transform:scale(1.03)}
#waterStage .wpz-station.wpz-over .wpz-vessel{filter:drop-shadow(0 0 12px rgba(58,134,255,.55))}

#waterStage .wpz-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
#waterStage .wpz-action{
  padding:12px 20px;
  border-radius:14px;
  font-weight:900;
  font-size:14px;
  box-shadow:0 6px 14px rgba(38,72,130,.1);
  background:#fff;
  color:var(--navy);
  border:1px solid #e2eaf5;
  min-height:44px;
}
#waterStage .wpz-action.wpz-primary{background:var(--orange);color:#fff;border:0}
#waterStage .wpz-action.wpz-hint{background:#eee8ff;color:#6430b6;border:0}

#waterStage .wpz-status{font-weight:800;color:#60748f;line-height:1.4;font-size:13px;min-height:42px;margin-top:8px;text-align:center}
#waterStage .wpz-moves{display:flex;align-items:center;justify-content:space-between;background:#f5f8ff;border-radius:12px;padding:10px 12px;font-weight:900;font-size:14px;margin-top:12px}
#waterStage .wpz-moves span{color:var(--blue);font-size:20px}
#waterStage .wpz-hint-box{display:none;background:#f4efff;color:#59309f;border-radius:12px;padding:10px;font-weight:800;font-size:13px;margin-top:8px}
#waterStage .wpz-hint-box.wpz-show{display:block}

/* confetti (from water.html) */
#waterConfetti{position:fixed;inset:0;pointer-events:none;z-index:100000;overflow:hidden}
#waterConfetti .wpz-confetti-piece{position:absolute;width:8px;height:14px;top:-20px;animation:water-fall 2.3s ease-in forwards}
@keyframes water-fall{to{transform:translate3d(var(--x),110vh,0) rotate(720deg);opacity:0}}

/* popup feedback + summary stars */
#waterQuizCard .bq-feedback.is-correct{color:#0d7a53}
#waterSummaryCard .bq-star{font-size:28px;color:#d1d5db;margin:0 2px}
#waterSummaryCard .bq-star.filled{color:#f5b942}

/* water.html's max-width:768px layout (phones): jars on top, ocean left + tap right below */
@media (max-width: 768px) {
  #waterStage .wpz-interaction-stage{grid-template-columns:1fr 1fr;gap:12px}
  #waterStage .wpz-containers-column{grid-column:1 / -1;order:1}
  #waterStage .wpz-ocean-side{order:2;padding:8px}
  #waterStage .wpz-tap-zone{order:3;min-height:160px;padding-top:10px}
  #waterStage .wpz-vessel{height:170px}
  #waterStage .wpz-containers{min-height:230px;gap:12px}
  #waterStage .wpz-ocean-zone{width:120px;height:100px}
  #waterStage .wpz-tap{width:130px;height:95px}
  #waterStage .wpz-water-stream{left:90px;top:74px;height:60px}
}

/* water.html's max-width:380px rules */
@media (max-width: 380px) {
  #waterStage .wpz-vessel{height:150px}
  #waterStage .wpz-containers{min-height:210px}
  #waterStage .wpz-vessel-label{font-size:13px}
  #waterStage .wpz-amount{font-size:13px;padding:2px 8px}
}

/* Next Puzzle / See my stars: always visible, even when the popup scrolls */
#waterQuizCard .bq-next-btn{position:sticky;bottom:10px;z-index:12}