/* חיים בבועה · 💧 תזכורת מים (Oct 23 2026) */
.hb-water{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 12px;padding:12px 14px 10px;border:3px solid #fff;border-radius:26px;background:linear-gradient(160deg,#e6f6ff 0%,#bfe6ff 55%,#8fd0ff 100%);color:#0d2a55;box-shadow:0 8px 0 rgba(20,90,170,.28),0 14px 26px rgba(13,42,85,.22);text-align:right;overflow:hidden}
.hb-water.pop{animation:hbh2opop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes hbh2opop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.hbh2o-glass{position:relative;width:62px;height:84px}
.hbh2o-cup{position:absolute;inset:0;border:3px solid #fff;border-top-width:2px;border-radius:6px 6px 18px 18px;background:rgba(255,255,255,.45);overflow:hidden;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);box-shadow:inset 0 0 0 2px rgba(30,100,200,.25)}
.hbh2o-fill{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg,#5ab8ff,#1E64C8);transform:translateY(100%);transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.hbh2o-fill svg{position:absolute;top:-9px;left:0;width:200%;height:10px;fill:#5ab8ff;animation:hbh2owave 2.2s linear infinite}
@keyframes hbh2owave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hbh2o-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;color:#0d2a55;text-shadow:0 0 4px #fff,0 0 8px #fff;direction:ltr}
.hbh2o-num b{font-size:1.5rem}
.hbh2o-body{min-width:0}
.hbh2o-body h3{margin:0;font-size:1.3rem;line-height:1.15;color:#0d3d8a}
.hbh2o-sub{margin:2px 0 4px;font-size:.88rem;color:#2a4f86}
.hbh2o-dots{display:flex;gap:4px;margin:0 0 7px}
.hbh2o-dots i{width:12px;height:15px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(255,255,255,.75);border:1.5px solid #5aaaf0}
.hbh2o-dots i.on{background:#1E64C8;border-color:#1E64C8}
.hbh2o-add{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:0;border-radius:999px;background:#1E64C8;color:#fff;font:inherit;font-size:1rem;font-weight:800;box-shadow:0 4px 0 #0f3b7d;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s,box-shadow .1s}
.hbh2o-add:active{transform:translateY(3px);box-shadow:0 1px 0 #0f3b7d}
.hbh2o-haim{width:70px;height:auto;align-self:end;margin-bottom:-12px;filter:drop-shadow(0 4px 6px rgba(13,42,85,.25))}
.hbh2o-note{grid-column:1/-1;margin:2px 0 0;font-size:.78rem;color:#2a4f86;text-align:center}
.hbh2o-drop{position:absolute;left:50%;top:10px;width:10px;height:13px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#1E64C8;opacity:0;animation:hbh2odrop .9s ease-out var(--dd) forwards;pointer-events:none}
@keyframes hbh2odrop{0%{opacity:1;transform:translate(-50%,0) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-46px) scale(1)}}
.hbh2o-pop{position:fixed;top:calc(8px + env(safe-area-inset-top));gap:8px;left:50%;z-index:2147483000;display:flex;align-items:center;gap:10px;width:min(360px,calc(100vw - 20px));box-sizing:border-box;padding:8px 10px 10px 8px;border:3px solid #fff;border-radius:22px;background:linear-gradient(135deg,#dff3ff,#9ad6ff);color:#0d2a55;box-shadow:0 10px 28px rgba(13,42,85,.35);direction:rtl;text-align:right;font-family:Rubik,system-ui,Arial,sans-serif;transform:translate(-50%,-140%);transition:transform .45s cubic-bezier(.2,1.3,.4,1);overflow:hidden}
.hbh2o-pop.on{transform:translate(-50%,0)}
.hbh2o-pop img{flex:none;width:52px;height:auto;margin:-2px 0 -12px;animation:hbh2obob 1.4s ease-in-out infinite}
@keyframes hbh2obob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
.hbh2o-t{display:flex;flex-direction:column;min-width:0;flex:1}
.hbh2o-t b{font-size:1.12rem;line-height:1.2;color:#0d3d8a}
.hbh2o-t span{font-size:.9rem;color:#2a4f86}
.hbh2o-yes{flex:none;min-height:42px;padding:0 12px;border:0;border-radius:999px;background:#22b35e;color:#fff;font:inherit;font-size:.98rem;font-weight:800;box-shadow:0 3px 0 #15803d;cursor:pointer}
.hbh2o-pop.ok .hbh2o-yes{display:none}
.hbh2o-x{flex:none;align-self:flex-start;width:26px;height:26px;margin:-2px -2px 0 0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.7);color:#174fa3;font-size:.75rem;cursor:pointer}
.hbh2o-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#1E64C8;transform-origin:left;animation:hbh2obar var(--hbh2o-ms,15000ms) linear forwards}
.hbh2o-pop.ok .hbh2o-bar{display:none}
@keyframes hbh2obar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
html.a11y-contrast .hb-water,html.a11y-contrast .hbh2o-pop{background:#000;color:#fff}
html.a11y-contrast .hbh2o-body h3,html.a11y-contrast .hbh2o-sub,html.a11y-contrast .hbh2o-note,html.a11y-contrast .hbh2o-t b,html.a11y-contrast .hbh2o-t span{color:#fff}
@media (prefers-reduced-motion:reduce){.hbh2o-fill svg,.hbh2o-pop img,.hbh2o-bar,.hb-water.pop{animation:none}.hbh2o-pop{transition:none}}
@media print{.hb-water,.hbh2o-pop{display:none!important}}

/* v3 (Oct 23): 8 cups = the day is full; the 8th cup = Haim's good word */
.hb-water.full{background:linear-gradient(160deg,#fff6d6 0%,#bfe6ff 55%,#7cc6ff 100%)}
.hb-water.full .hbh2o-sub{font-weight:800;color:#0b3f86}
.hbh2o-cel{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;direction:rtl;cursor:pointer;
  background:radial-gradient(ellipse at 50% 42%,rgba(120,200,255,.55) 0%,rgba(20,60,140,.72) 60%,rgba(10,25,70,.82) 100%);opacity:0;transition:opacity .35s ease;-webkit-tap-highlight-color:transparent}
.hbh2o-cel.on{opacity:1}
.hbh2o-cf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.hbh2o-cc{position:relative;width:min(340px,90vw);padding:18px 16px 18px;border-radius:30px;text-align:center;z-index:2;
  background:linear-gradient(180deg,#ffffff 0%,#e3f4ff 45%,#b9e2ff 100%);border:4px solid #fff;
  box-shadow:0 10px 0 rgba(20,90,170,.35),0 24px 50px rgba(5,20,60,.5),inset 0 -6px 0 rgba(30,100,200,.12);
  transform:scale(.4) translateY(40px);opacity:0;transition:transform .6s cubic-bezier(.2,1.6,.4,1),opacity .3s ease}
.hbh2o-cel.on .hbh2o-cc{transform:none;opacity:1}
.hbh2o-rays{position:absolute;left:50%;top:118px;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;opacity:.75;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,90,.55) 0deg 9deg,rgba(255,255,255,0) 9deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:hbh2ospin 9s linear infinite}
@keyframes hbh2ospin{to{transform:rotate(360deg)}}
.hbh2o-ch{position:relative;z-index:1;height:226px;display:flex;justify-content:center;align-items:flex-end}
.hbh2o-ch img{height:226px;width:auto;filter:drop-shadow(0 8px 10px rgba(10,40,90,.35));transform-origin:50% 100%;animation:hbh2ojump 1.1s cubic-bezier(.3,1.5,.5,1) .25s both,hbh2obob 1.6s ease-in-out 1.4s infinite}
@keyframes hbh2ojump{0%{transform:translateY(160px) scale(.6,.6)}55%{transform:translateY(-18px) scale(.94,1.08)}75%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
@keyframes hbh2obob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
.hbh2o-sp{position:absolute;font-size:26px;opacity:0;animation:hbh2otw 1.6s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,220,100,.9))}
.hbh2o-sp.s1{top:18px;right:34px;animation-delay:.9s}.hbh2o-sp.s2{top:70px;left:26px;animation-delay:1.3s;font-size:20px}
.hbh2o-sp.s3{top:120px;right:18px;animation-delay:1.6s}.hbh2o-sp.s4{top:8px;left:58px;animation-delay:2s;font-size:22px}
@keyframes hbh2otw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
.hbh2o-bub{position:relative;z-index:1;margin:10px auto 0;padding:12px 14px;border-radius:20px;background:linear-gradient(180deg,#1E64C8,#0f4aa0);color:#fff;
  font:800 1.22rem/1.35 Rubik,Arial,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.18);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 6px 14px rgba(15,74,160,.35);
  opacity:0;transform:scale(.6);animation:hbh2obub .5s cubic-bezier(.2,1.6,.4,1) 1.05s forwards}
.hbh2o-bub::before{content:"";position:absolute;top:-10px;left:50%;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom-color:#1E64C8}
@keyframes hbh2obub{to{opacity:1;transform:none}}
.hbh2o-row8{position:relative;z-index:1;display:flex;justify-content:center;gap:6px;margin-top:12px}
.hbh2o-row8 i{width:22px;height:28px;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);background:linear-gradient(180deg,#7fd0ff,#1E64C8);border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);opacity:0;transform:translateY(14px) scale(.5);animation:hbh2ocup .4s cubic-bezier(.2,1.7,.4,1) forwards;animation-delay:calc(1.4s + var(--i) * .12s)}
@keyframes hbh2ocup{to{opacity:1;transform:none}}
.hbh2o-cx{position:absolute;top:8px;left:8px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(13,42,85,.12);color:#0d2a55;font-size:18px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.hbh2o-rays,.hbh2o-ch img,.hbh2o-sp{animation:none}.hbh2o-bub,.hbh2o-row8 i{animation-duration:.01s;animation-delay:0s}}
.hb-water .hbh2o-add[hidden]{display:none!important}