/* The bath (member requests, Ethan: Nintendogs' wash for your Bii: shampoo, rinse, it shakes itself off). bath.js.
   Opened from the tamagotchi's moves menu, so its chrome is that toy's LCD: the dark open-menu green (#2c3a22) for the
   bar, the pale screen (#c3cea9 / #c9d4b0) for the steps and the line of what to do, ink #26311d. The one bold thing is
   the scene on the canvas: white bathroom tiles, a clear plastic box with a fluffy pink mat floor, your muddy Bii in it. */
.bath {
  position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h); z-index: 28;
  display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto;
  background: #f3f7f8; color: #26311d; font-family: var(--pz-rounded, var(--font));
  opacity: 0; transition: opacity .18s;
}
body.tabs-on .bath { top: calc(var(--app-top, 0px) + var(--tabs-y, 0px)); height: calc(var(--app-h) - var(--tabs-y, 0px)); max-width: 760px; }
.bath.in { opacity: 1; }
.bt-top { flex: none; display: flex; align-items: stretch; gap: 8px; padding: 8px 8px 8px; background: #2c3a22; }
body:not(.tabs-on) .bt-top { padding-top: calc(8px + env(safe-area-inset-top)); }
.bt-close { flex: none; height: 44px; margin: 0; padding: 0 13px; border: 0; background: #c3cea9; color: #26311d;
  font: 800 15px/1 var(--pz-rounded, var(--font)); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 0 0 1.5px #7f8c6a; }
.bt-close:active { background: #26311d; color: #c3cea9; }
.bt-close:focus-visible, .bt-done:focus-visible { outline: 3px solid #c3cea9; outline-offset: 2px; }
/* the two steps, in order: pale LCD cells, the one you're on lit, a fill along its foot as you go */
.bt-steps { flex: 1 1 auto; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.bt-steps li { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #7f8c6a; color: #2c3a22; font: 800 13.5px/1 var(--pz-rounded, var(--font)); overflow: hidden; }
.bt-steps li b { flex: none; display: grid; place-items: center; width: 17px; height: 17px; background: #2c3a22; color: #9aa784;
  font: 800 11px/1 var(--pz-rounded, var(--font)); }
.bt-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-steps li.on { background: #c3cea9; color: #26311d; }
.bt-steps li.on b { background: #26311d; color: #c3cea9; }
.bt-steps li.done { background: #a9b68f; color: #26311d; }
.bt-steps li.done b { background: #3fbf6a; color: #fff; font-size: 0; }
.bt-steps li.done b::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.bt-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #26311d22; }
.bt-fill::after { content: ""; display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: #3fbf6a; transition: width .15s; }
.bt-steps li:not(.on) .bt-fill { display: none; }
@media (max-width: 370px) { .bt-steps li:not(.done) b { display: none; } .bt-steps li { font-size: 12.5px; } }
/* what to do now, on the toy's screen */
.bt-say { flex: none; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; box-sizing: border-box;
  background: #c9d4b0; border-bottom: 2px solid #7f8c6a; }
.bt-say p { flex: 1 1 auto; margin: 0; font: 800 15.5px/1.25 var(--pz-rounded, var(--font)); }
.bt-done { flex: none; height: 38px; margin: 0; padding: 0 20px; border: 0; background: #26311d; color: #c9d4b0;
  font: 800 15px/1 var(--pz-rounded, var(--font)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bt-done[hidden] { display: none; }
/* the water (Rinse): a tank drawn on the LCD, ten segments that run down while the shower's on (blinking when low),
   and the tap: ink when off, a lit, pressed-in screen cell while the water runs */
.bt-tank { flex: none; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 7px 0 6px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1.5px #7f8c6a; }
.bt-tank::before { content: ""; flex: none; width: 9px; height: 9px; margin: 3px 5px 0 0; background: #26311d;
  border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.bt-tank i { width: 4px; height: 15px; background: #26311d; }
.bt-tank i.off { background: #26311d1f; }
.bt-tank.low i:not(.off), .bt-tank.low::before { animation: bt-blink .8s steps(1) infinite; }
@keyframes bt-blink { 50% { opacity: .2; } }
.bt-tap { flex: none; min-width: 84px; height: 38px; margin: 0; padding: 0 12px; border: 0; background: #26311d; color: #c9d4b0;
  font: 800 15px/1 var(--pz-rounded, var(--font)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bt-tap[aria-pressed="true"] { background: #e8f0d6; color: #26311d; box-shadow: inset 0 0 0 2px #26311d, inset 0 3px 0 2px #26311d33; }
.bt-tap:focus-visible { outline: 3px solid #26311d; outline-offset: 2px; }
.bt-tank[hidden], .bt-tap[hidden] { display: none; }
@media (max-width: 420px) { .bath.rinse .bt-say { gap: 7px; padding: 6px 8px; } .bath.rinse .bt-say p { font-size: 14px; }
  .bt-tank i { width: 3px; } .bt-tap { min-width: 74px; padding: 0 9px; } }
.bath.clean .bt-say p { font-size: 19px; animation: bt-yay .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes bt-yay { 0% { transform: scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bt-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bt-stage canvas { position: absolute; left: 0; top: 0; display: block; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; cursor: grab; }
.bt-stage canvas:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .bath { transition: none; } .bath.clean .bt-say p, .bt-tank.low i, .bt-tank.low::before { animation: none; } }