:root {
  --bg: #0b0f1f;
  --panel: rgba(30, 37, 66, 0.82);
  --panel-hi: rgba(46, 56, 96, 0.9);
  --text: #f3f5fb;
  --muted: #a2abc6;
  --accent: #5cd0ff;
  --good: #5be38f;
  --bad: #ff7a7a;
  --hint: #ffe08a;
  --glass: rgba(214, 232, 255, 0.5);
  /* set by app.js from the board size */
  --w: 52px;
  --u: 43px;
  --lh: 7px;
  --gh: 198px;
  --lift: 22px;
  --rg: 10px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text); overflow: hidden;
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { background: radial-gradient(ellipse 90% 55% at 50% 0%, #1c2a5c 0%, transparent 70%),
  radial-gradient(ellipse 80% 50% at 50% 105%, #2b1650 0%, transparent 70%), var(--bg); }
.bg { position: fixed; inset: 0; pointer-events: none; background: center / cover no-repeat; opacity: 0; }
.bg.on { background-image: url(img/bg.webp); opacity: 0.42; }
#app { position: relative; height: 100vh; height: 100dvh; max-width: 620px; margin: 0 auto;
  display: flex; flex-direction: column; padding: 8px 10px 10px; gap: 6px; }

.top { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.title { font-weight: 800; font-size: 20px; letter-spacing: 0.2px;
  background: linear-gradient(90deg, #6fe3ff, #b98bff 55%, #ff8fcf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip { margin-left: auto; background: var(--panel); border: 1px solid rgba(140, 160, 230, 0.25); border-radius: 99px;
  padding: 5px 12px; font-size: 13px; color: #dfe4f3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip b { color: #fff; }
.msg { text-align: center; min-height: 20px; font-size: 14px; color: var(--muted); transition: color 0.2s; }
.msg.good { color: var(--good); font-weight: 700; }
.msg.bad { color: var(--bad); }
.msg.hint { color: var(--hint); }

/* ---------- board ---------- */
.board { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--rg); }
.row { display: flex; justify-content: center; }
.slot { position: relative; width: calc(var(--w) * 1.5); height: calc(var(--lift) + var(--lh) + var(--gh));
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.slot.pouring { z-index: 10; }
.tube { position: absolute; bottom: 0; left: calc(var(--w) * 0.25); width: var(--w); transform-origin: 50% 0;
  transition: transform 0.23s cubic-bezier(0.3, 0.7, 0.4, 1); }
.tube.up { transform: translateY(calc(var(--lift) * -1)); }
.lip { position: relative; height: var(--lh); margin: 0 calc(var(--w) * -0.08); border: 2px solid var(--glass);
  border-radius: calc(var(--lh) * 0.6); background: rgba(255, 255, 255, 0.07); }
.glass { position: relative; height: var(--gh); margin-top: -1px; border: 2.5px solid var(--glass); border-top: 0;
  border-radius: 0 0 calc(var(--w) * 0.46) calc(var(--w) * 0.46); overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 45%, rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.25); transition: border-color 0.2s, box-shadow 0.3s; }
.glass::after { content: ''; position: absolute; z-index: 2; top: 5%; bottom: 14%; left: 13%; width: 13%; border-radius: 99px;
  background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.06)); pointer-events: none; }
.liq { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column-reverse; }
.u { flex: none; height: var(--u); transition: height 0.3s ease; }
.u.z { height: 0; }
.slot:hover .glass { border-color: rgba(230, 240, 255, 0.7); }
.tube.up .glass, .tube.up .lip { border-color: #fff; }
.tube.up .glass { box-shadow: 0 0 18px rgba(120, 210, 255, 0.45), inset 0 -6px 14px rgba(0, 0, 0, 0.25); }

/* sorted tube: cork + glow in its colour */
.cork { position: absolute; z-index: 3; left: 20%; right: 20%; top: calc(var(--w) * -0.2); height: calc(var(--w) * 0.34);
  border-radius: 5px 5px 3px 3px; background: linear-gradient(90deg, #8a5a2e, #d8a46a 40%, #a8743f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); transform: scale(0); transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tube.done .cork { transform: scale(1); }
.tube.done .glass { box-shadow: 0 0 16px -3px var(--glow), inset 0 -6px 14px rgba(0, 0, 0, 0.25); }

/* hint: glowing source, bobbing arrow over the target */
.tube.hf .glass { animation: glow 0.9s ease-in-out infinite alternate; }
.slot.ht::before { content: '▼'; position: absolute; top: 0; left: 50%; z-index: 4; color: var(--hint);
  font-size: calc(var(--w) * 0.34); line-height: 1; transform: translateX(-50%); animation: bob 0.8s ease-in-out infinite alternate; }
.tube.shake { animation: shake 0.35s; }
.solved .tube { animation: hop 0.5s ease calc(var(--k) * 60ms) both; }

.stream { position: absolute; z-index: 6; width: calc(var(--w) * 0.16); border-radius: 3px; pointer-events: none;
  opacity: 0; transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.12s ease-out, opacity 0.15s; }
.stream.on { opacity: 1; transform: scaleY(1); }

/* ---------- buttons ---------- */
.bar { display: flex; gap: 8px; }
.bar button { flex: 1; min-width: 0; height: 40px; padding: 0 4px; border: 1px solid rgba(140, 160, 230, 0.2); border-radius: 10px;
  background: var(--panel); color: var(--text); font: 600 14px system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  touch-action: manipulation; transition: background 0.15s, opacity 0.2s; }
.bar button:not(:disabled):hover { background: var(--panel-hi); }
.bar button:disabled { opacity: 0.38; cursor: default; }
.bar button.flash { animation: flash 0.5s 2; }
@media (max-width: 380px) { .bar button { font-size: 13px; } .title { font-size: 18px; } }

@keyframes glow { from { box-shadow: 0 0 4px rgba(255, 224, 138, 0.3); border-color: var(--glass); }
  to { box-shadow: 0 0 20px rgba(255, 224, 138, 0.8); border-color: var(--hint); } }
@keyframes bob { from { transform: translate(-50%, -2px); } to { transform: translate(-50%, 4px); } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes hop { 40% { transform: translateY(calc(var(--w) * -0.25)); } }
@keyframes flash { 50% { background: #3d5bb8; } }
@media (prefers-reduced-motion: reduce) { .solved .tube, .slot.ht::before, .tube.hf .glass { animation: none; } }