/* Basis */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
[hidden]{display:none!important}

/* Layout: one-screen game — header with level, a lab rack of tubes filling the middle, tools at the bottom. Deliberately single dark theme (night lab bench). */
:root{
  color-scheme: dark;
  --bg:#0d1422;
  --bg-raise:#152036;
  --line:#27354f;
  --text:#edf2fa;
  --muted:#8e9db8;
  --accent:#7ee4cf;
  --accent-ink:#0a2a25;
  --glass:rgba(206,224,255,.36);
  --rack:#25314a;
  --rack-hi:#3a4a6a;
  --cork:#cf9b5e;
  --cork-dark:#9a6a36;
  --toast-bg:#e9eef7;
  --toast-fg:#0d1422;
  --f-display:"Fredoka","Nunito","Trebuchet MS",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(110% 60% at 50% -5%, #1b2944 0%, transparent 62%),
    radial-gradient(70% 45% at 50% 108%, #13213b 0%, transparent 70%);
  color:var(--text);
  font-family:var(--f-display);
  font-size:15px;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.app{
  height:100%;
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-block:14px 16px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.45rem;letter-spacing:.005em;margin:0}
.brand svg{width:20px;height:34px;flex:none}
.levelnav{display:flex;align-items:center;gap:8px}
.navbtn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg-raise);color:var(--text);
  font:500 1.1rem var(--f-display);cursor:pointer;display:grid;place-items:center;
}
.navbtn:hover:not(:disabled){border-color:var(--accent)}
.navbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navbtn:disabled{opacity:.3;cursor:default}
.lvl{min-width:92px;text-align:center;line-height:1}
.lvl small,.moves small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.lvl b,.moves b{font-family:var(--f-mono);font-weight:700;font-size:1.55rem;font-variant-numeric:tabular-nums}
.moves{text-align:right;line-height:1;min-width:64px}
.meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:26px}
.chip{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-variant-numeric:tabular-nums}
.chip.diff{color:#0d1422;background:var(--dc,#a5d63d);border-color:transparent;font-weight:600}

/* ---------- board & rack ---------- */
.board{
  flex:1;min-height:300px;position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:calc(var(--tw,50px) * .9);
  padding-top:calc(var(--tw,50px) * .45);
}
.board.won .tube{animation:hop .55s calc(var(--i) * 55ms) cubic-bezier(.3,.7,.3,1) both}
@keyframes hop{40%{transform:translateY(calc(var(--tw) * -.32))}}
.loading{color:var(--muted);font-size:1rem}
.row{
  position:relative;display:flex;justify-content:center;align-items:flex-end;
  gap:calc(var(--tw) * .5);padding:0 calc(var(--tw) * .5);
}
.row::after{ /* rack base */
  content:"";position:absolute;left:0;right:0;bottom:calc(var(--tw) * -.2);height:calc(var(--tw) * .26);
  border-radius:calc(var(--tw) * .13);
  background:linear-gradient(var(--rack-hi),var(--rack));
  box-shadow:0 10px 22px rgba(0,0,0,.4);
}
.row::before{ /* rack crossbar behind the glass */
  content:"";position:absolute;left:calc(var(--tw) * .2);right:calc(var(--tw) * .2);
  top:calc(var(--tw) * 1.05);height:calc(var(--tw) * .13);border-radius:99px;background:var(--rack);
}

/* ---------- tube ---------- */
.tube{
  position:relative;z-index:1;flex:none;
  width:var(--tw);height:calc(var(--tw) * 3.35);
  padding:0;margin:0;border:0;background:none;cursor:pointer;
  transform-origin:50% 0;transition:transform .2s cubic-bezier(.3,.7,.3,1);
  outline:none;
}
.tube.lifted{transform:translateY(calc(var(--tw) * -.38))}
.tube.pouring{z-index:5}
.lip{
  position:absolute;top:calc(var(--tw) * .06);left:-3px;right:-3px;height:calc(var(--tw) * .16);
  border:2px solid var(--glass);border-radius:calc(var(--tw) * .08);background:rgba(255,255,255,.05);
}
.glass{
  position:absolute;left:0;right:0;top:calc(var(--tw) * .2);bottom:0;
  border:2px solid var(--glass);border-top:0;
  border-radius:0 0 calc(var(--tw) * .5) calc(var(--tw) * .5);
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.09) 35%,rgba(255,255,255,.02));
  display:flex;flex-direction:column-reverse;
  padding-top:calc(var(--tw) * .3);
}
.glass::after{
  content:"";position:absolute;left:17%;top:7%;width:11%;bottom:14%;border-radius:99px;
  background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.04));pointer-events:none;
}
.tube.lifted .glass,.tube.lifted .lip{border-color:rgba(230,240,255,.7)}
.tube:focus-visible .glass,.tube:focus-visible .lip{border-color:var(--accent)}
.slot{
  flex:1 1 0;position:relative;display:grid;place-items:center;
  background:var(--c);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--c) 78%,#000) 0%,
    var(--c) 38%,
    color-mix(in srgb,var(--c) 82%,#fff) 66%,
    color-mix(in srgb,var(--c) 90%,#000) 100%);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform 150ms linear;
}
.slot.on{transform:scaleY(1)}
.slot.top::before{
  content:"";position:absolute;top:0;left:0;right:0;height:max(2px,calc(var(--tw) * .05));
  background:rgba(255,255,255,.38);
}
.slot::after{
  content:attr(data-sym);display:none;
  font-size:calc(var(--tw) * .34);line-height:1;color:rgba(10,14,24,.55);
  font-family:"Segoe UI Symbol","Apple Symbols","DejaVu Sans",sans-serif;
}
.symbols .slot.on::after{display:block}
.cork{
  position:absolute;z-index:2;left:13%;right:13%;top:calc(var(--tw) * -.2);height:calc(var(--tw) * .42);
  border-radius:calc(var(--tw) * .1) calc(var(--tw) * .1) calc(var(--tw) * .05) calc(var(--tw) * .05);
  background:linear-gradient(90deg,var(--cork-dark),var(--cork) 42%,var(--cork-dark));
  box-shadow:inset 0 calc(var(--tw) * -.06) 0 rgba(0,0,0,.18);
  opacity:0;transform:translateY(calc(var(--tw) * -.7));
  transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .15s;
}
.tube.done .cork{opacity:1;transform:translateY(0)}

/* hint & feedback */
.tube.hint-from .glass,.tube.hint-from .lip{border-color:var(--accent);animation:glow 1s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}}
.tube.hint-to::before{
  content:"";position:absolute;left:50%;top:calc(var(--tw) * -.62);
  width:calc(var(--tw) * .36);height:calc(var(--tw) * .3);
  background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%);
  transform:translateX(-50%);animation:bob .8s ease-in-out infinite;
}
@keyframes bob{50%{transform:translate(-50%,calc(var(--tw) * .12))}}
.tube.shake{animation:shake .32s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.stream{
  position:fixed;z-index:6;pointer-events:none;border-radius:99px;
  background:var(--c);transform-origin:50% 0;
}

/* ---------- overlay ---------- */
.overlay{
  position:absolute;inset:0;z-index:10;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fade .3s ease;
}
@keyframes fade{from{opacity:0}}
.panel{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:22px;
  padding:26px 28px 22px;text-align:center;display:grid;gap:12px;
  width:min(340px,100%);box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.panel .eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0}
.panel h2{font-size:1.7rem;font-weight:600;margin:0;text-wrap:balance}
.panel p{margin:0;color:var(--muted);line-height:1.45}
.panel .bands{display:flex;justify-content:center;gap:4px;margin:2px 0 4px}
.panel .bands i{width:12px;height:22px;border-radius:3px 3px 6px 6px;background:var(--c)}
.primary{
  font:600 1.02rem var(--f-display);background:var(--accent);color:var(--accent-ink);
  border:0;border-radius:999px;padding:13px 22px;cursor:pointer;
}
.primary:focus-visible,.ghost:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.ghost{font:500 .92rem var(--f-display);background:none;border:0;color:var(--muted);cursor:pointer;padding:6px}
.ghost:hover{color:var(--text)}

/* ---------- tools ---------- */
.howto{margin:0;text-align:center;color:var(--muted);font-size:.92rem;line-height:1.45;max-width:46ch;align-self:center;text-wrap:balance}
.tools{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.tool{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border-radius:999px;border:1px solid var(--line);background:var(--bg-raise);color:var(--text);
  font:500 .95rem var(--f-display);cursor:pointer;transition:border-color .15s,color .15s;
}
.tool:hover:not(:disabled){border-color:var(--accent)}
.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool:disabled{opacity:.38;cursor:default}
.tool svg{width:18px;height:18px;flex:none}
.tool[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.badge{font-family:var(--f-mono);font-size:.74rem;background:var(--line);color:var(--text);border-radius:99px;padding:1px 7px}
@media (max-width:560px){
  .top{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand moves" "nav nav";gap:6px 12px}
  .brand{grid-area:brand}
  .moves{grid-area:moves}
  .levelnav{grid-area:nav;justify-self:center}
}
@media (max-width:460px){
  .tool{padding:0 12px;font-size:.88rem;gap:6px}
  .brand{font-size:1.25rem}
  .moves b,.lvl b{font-size:1.35rem}
}

.toast{
  position:fixed;left:50%;z-index:20;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  max-width:min(420px,calc(100% - 32px));
  background:var(--toast-bg);color:var(--toast-fg);
  padding:11px 16px;border-radius:14px;font-size:.93rem;line-height:1.35;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  .tube,.slot,.cork,.toast{transition:none}
  .board.won .tube,.tube.hint-from .glass,.tube.hint-from .lip,.tube.hint-to::before,.tube.shake,.overlay{animation:none}
}