/* بطول الألوان — own look: glass bottles on a wooden shelf, sunny kitchen window */
:root{--ink:#1d2b3a;--muted:#5c6f82;--line:#1d2b3a;--main:#2b9ac8;--main2:#22c1a4;--wood:#c88a4b;--bw:58px;--bh:170px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:var(--ink);font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{background:radial-gradient(circle at 80% 0,#fff6c9 0,#0000 35%),linear-gradient(180deg,#c8ecff 0,#e9f8ff 55%,#fff4e3 100%)}
.page{position:relative;max-width:560px;margin:0 auto;padding:10px 12px calc(12px + env(safe-area-inset-bottom));height:100dvh;display:flex;flex-direction:column;gap:8px}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:2.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:17px;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.hud{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}
.chip{background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:2px 10px;text-align:center;box-shadow:0 3px 0 var(--line)}
.chip small{display:block;font-size:11px;color:var(--muted);line-height:1.3}.chip b{font-size:21px;line-height:1.15}
.shelf{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.bottles{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:26px 14px;width:100%;padding:24px 4px 6px}
.row-shelf{flex-basis:100%;height:0}
/* one bottle */
.bottle{position:relative;width:var(--bw);height:var(--bh);cursor:pointer;transition:transform .28s cubic-bezier(.3,1.4,.5,1),opacity .4s;transform-origin:50% 100%;z-index:1}
.bottle::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-14px;height:12px;border-radius:6px;background:linear-gradient(#d99a58,#a96a2f);border:2px solid var(--line);z-index:-1}
.glass{position:absolute;inset:18px 0 0;border:3px solid var(--line);border-radius:12px 12px 26px 26px;background:linear-gradient(90deg,#ffffff55,#ffffff22 40%,#ffffff66);overflow:hidden;box-shadow:inset 0 -6px 0 #0001}
.neck{position:absolute;left:50%;top:0;width:44%;height:22px;translate:-50% 0;border:3px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:#ffffff66}
.liq{position:absolute;inset:auto 0 0 0;height:100%;display:flex;flex-direction:column-reverse}
.seg{flex:none;height:0;background:var(--c);transition:height .45s ease;box-shadow:inset 0 3px 0 #ffffff40,inset 0 -2px 0 #0000001a;position:relative}
.seg.top::before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:50%;background:var(--c);filter:brightness(1.15)}
.shine{position:absolute;left:18%;top:10%;width:12%;height:70%;border-radius:8px;background:#ffffff80;pointer-events:none}
.bottle.sel{transform:translateY(-22px)}
.bottle.sel .glass{box-shadow:0 0 0 4px #ffe066,inset 0 -6px 0 #0001}
.bottle.shake{animation:shake .3s}
@keyframes shake{25%{translate:-5px 0}75%{translate:5px 0}}
.bottle.pouring{z-index:5;transition:transform .32s ease}
.cork{position:absolute;left:50%;top:-14px;width:34%;height:20px;translate:-50% 0;border:2.5px solid var(--line);border-radius:6px 6px 3px 3px;background:repeating-linear-gradient(90deg,#c48a4a 0 4px,#b37938 4px 7px);opacity:0;transform:translateY(-40px);transition:all .35s cubic-bezier(.3,1.6,.5,1)}
.bottle.done .cork{opacity:1;transform:none}
.bottle.done .glass{box-shadow:0 0 18px 4px #fff7,inset 0 -6px 0 #0001}
.bottle.fly{transform:translateY(-120vh) rotate(-20deg)!important;opacity:0;transition:transform .9s ease-in,opacity .9s ease-in}
.spark{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffe066;pointer-events:none;animation:spark .7s ease-out forwards;z-index:6}
@keyframes spark{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.stream{position:absolute;width:8px;border-radius:4px;background:var(--c);z-index:4;pointer-events:none;transform-origin:top center}
.stream[hidden]{display:none}
.tools{display:flex;gap:8px;justify-content:center}
.tool{border:2.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:800;padding:7px 12px;box-shadow:0 3px 0 var(--line);cursor:pointer}
.tool b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--main);color:#fff;font-size:13px}
.tool:disabled{opacity:.45}
.panel{position:absolute;inset:56px 0 0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;background:#eef9fff2;backdrop-filter:blur(3px);border-radius:22px}
.panel[hidden]{display:none}
.panel h1{margin:0;font-size:42px;line-height:1.1;color:var(--main);-webkit-text-stroke:1.2px var(--line);text-shadow:0 3px 0 var(--line)}
.panel h2{margin:0;font-size:30px}
.lead{margin:0;color:var(--muted);font-size:16px;max-width:330px}
.logo{display:flex;gap:14px;align-items:flex-end;height:110px}
.logo i{position:relative;width:40px;height:96px;border:3px solid var(--line);border-radius:10px 10px 20px 20px;background:linear-gradient(to top,var(--a) 0 50%,var(--b) 50% 100%);box-shadow:0 4px 0 var(--line);overflow:hidden}
.logo i::after{content:"";position:absolute;left:18%;top:8%;width:14%;height:70%;border-radius:6px;background:#fff8}
.logo i:nth-child(2){animation:tilt 2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes tilt{50%{rotate:-14deg}}
.btn{width:min(280px,100%);border:3px solid var(--line);border-radius:16px;padding:12px;font:inherit;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--line);color:var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.btn-main{background:linear-gradient(135deg,var(--main),var(--main2));color:#fff}
.btn-ghost{background:#fff;font-size:16px}
.best-line{margin:0;font-size:15px}
.howto{margin:4px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted);line-height:1.7}
.win-emo{font-size:58px;line-height:1}
.toast{position:absolute;left:50%;top:40%;translate:-50% 0;padding:6px 16px;border:2.5px solid var(--line);border-radius:999px;background:#ffe066;font-weight:800;font-size:20px;z-index:8;pointer-events:none;animation:toastIn 1.1s ease forwards;white-space:nowrap}
.toast[hidden]{display:none}
@keyframes toastIn{0%{scale:.5;opacity:0}18%{scale:1.1;opacity:1}70%{scale:1;opacity:1}100%{opacity:0;translate:-50% -24px}}
@media (max-height:680px){.howto{display:none}}

/* 2026-10-28 owner «عدل شكل زجاجات»: real-looking glass bottles; the board stays on the shelf while the bottle tilts */
.bt{position:absolute;inset:0;transition:transform .28s cubic-bezier(.3,1.4,.5,1),opacity .4s;transform-origin:50% 100%}
.bottle{transition:opacity .4s}
.bottle.sel{transform:none}.bottle.sel .bt{transform:translateY(-22px)}
.bottle.pouring .bt{transition:transform .32s ease}
.bottle.fly{transform:none!important;opacity:1}
.bottle.fly .bt{transform:translateY(-120vh) rotate(-20deg)!important;opacity:0;transition:transform .9s ease-in,opacity .9s ease-in}
.bottle::after{left:-9px;right:-9px;bottom:-13px;height:11px;border-radius:5px;border:0;background:linear-gradient(#e6ad6c,#b9773a 60%,#8f5626);box-shadow:0 3px 0 #6b3d17,0 8px 10px #0003}
/* glass body: round shoulders, thick clear base, soft edge refraction */
.glass{inset:20px 0 0;border:0;border-radius:42% 42% 24px 24px/16% 16% 24px 24px;
  background:linear-gradient(90deg,#ffffff70 0,#ffffff18 18%,#ffffff08 45%,#ffffff22 75%,#ffffff80 100%);
  box-shadow:inset 0 0 0 2px #1d2b3a55,inset 3px 0 6px #ffffffaa,inset -4px 0 8px #5c7a9a55,inset 0 -10px 0 #ffffff55,inset 0 -12px 8px #9cc4e066,0 8px 14px #1d2b3a22;backdrop-filter:blur(1px)}
.liq{inset:auto 0 9px 0;height:calc(100% - 9px)}
.seg{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff) 0,var(--c) 22%,var(--c) 62%,color-mix(in srgb,var(--c) 70%,#000) 100%);box-shadow:none}
.seg+.seg{border-bottom:1px solid #0000000f}
.seg.top::before{left:3%;right:3%;top:-4px;height:8px;background:color-mix(in srgb,var(--c) 70%,#fff);filter:none;box-shadow:inset 0 -2px 0 #0000001a}
.seg:first-child{border-radius:0 0 20px 20px}
/* bubbles rising in the liquid */
.liq::after{content:"";position:absolute;left:30%;bottom:6%;width:5px;height:5px;border-radius:50%;background:#ffffffb0;box-shadow:9px 14px 0 -1px #ffffff90,-4px 26px 0 -1.5px #ffffffa0;animation:bub 3.2s linear infinite;opacity:0}
.bottle:nth-child(2n) .liq::after{animation-delay:-1.4s;left:52%}
.bottle:nth-child(3n) .liq::after{animation-delay:-2.3s;left:40%}
@keyframes bub{0%{opacity:0;transform:translateY(0)}15%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:translateY(-120px)}}
.shine{left:13%;top:12%;width:9%;height:66%;border-radius:10px;background:linear-gradient(#ffffffd0,#ffffff40);z-index:2}
.shine2{position:absolute;right:14%;top:20%;width:5%;height:40%;border-radius:6px;background:#ffffff60;pointer-events:none;z-index:2}
/* neck with a rolled glass lip */
.neck{top:2px;width:42%;height:24px;border:0;border-radius:4px 4px 0 0;background:linear-gradient(90deg,#ffffff80,#ffffff20 40%,#ffffff40 70%,#ffffff90);box-shadow:inset 0 0 0 2px #1d2b3a55}
.neck::before{content:"";position:absolute;left:-14%;right:-14%;top:-3px;height:8px;border-radius:5px;background:linear-gradient(90deg,#e8f4ff,#ffffff 30%,#c9dceb 80%);box-shadow:inset 0 0 0 2px #1d2b3a66,0 2px 2px #0002}
.cork{top:-15px;width:36%;height:21px;border:0;border-radius:5px 5px 3px 3px;background:linear-gradient(90deg,#9b6633,#d39a5c 35%,#c58a4b 65%,#8a5a2b);box-shadow:inset 0 0 0 1.5px #5c3a17,inset 0 4px 0 #ffffff30}
.bottle.sel .glass{box-shadow:inset 0 0 0 2px #1d2b3a55,inset 3px 0 6px #ffffffaa,inset -4px 0 8px #5c7a9a55,inset 0 -10px 0 #ffffff55,0 0 0 3px #ffe066,0 0 18px 4px #ffe06699}
.bottle.done .glass{box-shadow:inset 0 0 0 2px #1d2b3a55,inset 3px 0 6px #ffffffaa,inset 0 -10px 0 #ffffff55,0 0 22px 6px #fff9}
/* the poured stream: glossy, wobbling */
.stream{width:7px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 75%,#000));box-shadow:0 0 6px color-mix(in srgb,var(--c) 50%,transparent);animation:wob .12s linear infinite alternate}
@keyframes wob{to{transform:scaleX(.75)}}

/* finished bottle: its place stays empty, board stays */
.bottle.gone{cursor:default;pointer-events:none}.bottle.gone .bt{display:none}