/* Fill the Buckets — Water Mill mini-game (JG-040). Shares the Chop Shop
   overlay (chop.css: top bar, sign, answers, end card); this adds the 3D
   yard, the blue sign, the bucket-picture answers and the tags. */

.water {
  background: #bfe6f7;
}
.water__3d {
  position: absolute;
  inset: 0;
}
.water3d__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.water .chop__cargo {
  background: #e1f5fe;
}
/* debug: the level chip */
.water .water__lv {
  background: #fce4ec;
  font-size: 0.95rem;
}
.water .water__lv[hidden] {
  display: none;
}
/* on a phone the debug chip takes the title's spot, so ✕ stays on screen */
@media (max-width: 560px) {
  .water .chop__top:has(.water__lv:not([hidden])) .chop__title {
    display: none;
  }
}

/* the sign: a blue board with a short line to read over a big sum ("½ + ? = 1") */
.water__sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 94vw;
  box-sizing: border-box;
  padding: 0.25rem 1.7rem 0.4rem; /* room for the sign's bolts each side */
  white-space: nowrap;
  background: linear-gradient(180deg, #4fc3f7, #0288d1);
  box-shadow:
    inset 0 -6px 0 rgba(1, 87, 155, 0.35),
    0 6px 0 rgba(38, 50, 56, 0.3);
}
.water__sign::before,
.water__sign::after {
  background: #ffd54f;
}
/* plain white text with a soft drop shadow (the chunky outline from chop.css
   goes jaggy on fractions and small text) */
.water__sign {
  color: #fff;
  text-shadow: 0 2px 0 rgba(1, 60, 110, 0.55);
}
.water__sign.is-golden {
  background: linear-gradient(180deg, #ffe082, #ffb300);
  color: #3e2723;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.water__ask {
  font-size: clamp(1rem, 4.2vw, 1.4rem);
  line-height: 1.1;
}
.water__ask:empty {
  display: none;
}
.water__sum {
  font-size: clamp(1.7rem, 7.6vw, 3.2rem);
  line-height: 1.15;
}
.water__sum.is-long {
  font-size: clamp(1.15rem, 5.2vw, 3.2rem); /* 4–5 parts still fit a phone */
}
.water__sum:empty::before {
  content: "\00a0";
}
/* the ? is a little box to fill, like a blank on a worksheet */
.water__q {
  display: inline-block;
  min-width: 1.15em;
  padding: 0 0.12em;
  margin: 0 0.04em;
  border-radius: 0.22em;
  background: rgba(255, 255, 255, 0.25);
  border: 0.08em dashed #fff8e1;
  text-align: center;
}
.water__sign.is-golden .water__q.is-solved {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.water__q.is-solved {
  background: #66bb6a;
  border: 0.08em solid #263238;
  animation: water-tag 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.water__hint {
  position: absolute;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + clamp(86px, 25vw, 132px) + 16px);
  transform: translateX(-50%);
  margin: 0;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: #fff;
  border: 3px solid #263238;
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
  z-index: 2;
}
.water__hint:empty {
  display: none;
}

/* answers: rounded water-blue tiles with bucket pictures over the amount */
.water__answers {
  gap: clamp(7px, 2.2vw, 20px);
}
.water__ans {
  flex-shrink: 0;
  width: clamp(72px, 21vw, 118px);
  height: clamp(86px, 25vw, 132px);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px 4px;
  background: linear-gradient(180deg, #ffffff, #e1f5fe);
  box-shadow:
    inset 0 0 0 5px #81d4fa,
    0 7px 0 #263238;
  font-size: clamp(1.5rem, 6.5vw, 2.3rem);
  line-height: 1;
}
.water__ans:active:not(:disabled) {
  box-shadow:
    inset 0 0 0 5px #81d4fa,
    0 2px 0 #263238;
}
.water__ans.is-right {
  background: linear-gradient(180deg, #e8f5e9, #a5d6a7);
}
.water__ans.is-picked {
  box-shadow:
    inset 0 0 0 5px #ffb300,
    0 7px 0 #263238,
    0 0 0 5px rgba(255, 213, 79, 0.7);
  opacity: 1 !important;
}
.water__pics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1px;
  max-width: 100%;
  min-height: 42%;
}
.water__mini {
  width: clamp(20px, 6vw, 32px);
  height: auto;
}
.water__pics.is-many .water__mini {
  width: clamp(14px, 4.2vw, 22px);
}
.water__amt {
  white-space: nowrap;
}

/* little tags over the buckets: how full they start, and "1" when full */
.water__tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.water__tag {
  position: absolute;
  min-width: 3.3rem;
  height: 3.3rem;
  padding: 0 0.6rem;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  transform: translate(-50%, -100%);
  border-radius: 999px;
  background: #fff;
  border: 4px solid #263238;
  box-shadow: 0 4px 0 #263238;
  font-weight: 800;
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  white-space: nowrap;
  animation: water-tag 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.water__tag.is-start {
  background: #e1f5fe;
}
.water__tag.is-empty {
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
}
.water__tag.is-full {
  background: #ffd54f;
}
@keyframes water-tag {
  0% { transform: translate(-50%, -60%) scale(0.3); opacity: 0; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .water__sign {
    max-width: 66vw;
    padding: 0.1rem 1.5rem 0.2rem;
  }
  .water__ask {
    font-size: 0.95rem;
  }
  .water__sum,
  .water__sum.is-long {
    font-size: 1.6rem;
  }
  .water__tag {
    min-width: 2.7rem;
    height: 2.7rem;
    font-size: 1.6rem;
  }
  .water .chop__answers {
    left: 0;
    right: 0;
    bottom: 8px;
    justify-content: center;
  }
  .water__ans {
    width: 82px;
    height: 74px;
    font-size: 1.4rem;
    border-radius: 18px;
  }
  .water__mini {
    width: 20px;
  }
  .water__pics.is-many .water__mini {
    width: 14px;
  }
  .water__hint {
    bottom: 92px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .water__tag {
    animation: none;
  }
}