/* Milk bar — the web twin of the app's game. Two themes via the page tokens (--p-*). */
.mb-root{position:fixed;inset:0;z-index:900;background:var(--p-bg);color:var(--p-text);font-family:'Manrope',system-ui,sans-serif;
  opacity:0;transform:scale(.985);transition:opacity .26s ease,transform .42s cubic-bezier(.23,1,.32,1);--mb-ghost:rgba(255,250,240,.10);}
html:not([data-theme="cocoa"]) .mb-root{--mb-ghost:rgba(44,35,24,.10);}
.mb-root.on{opacity:1;transform:none;}
.mb-root.hidden{display:none;}
html.mb-open body{overflow:hidden;}
.mb-light{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.mb-light::before{content:"";position:absolute;width:140vmax;height:140vmax;left:50%;top:18%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(var(--p-glow),.34),rgba(var(--p-glow),.12) 45%,transparent 72%);opacity:.9;animation:mbBreathe 12s ease-in-out infinite alternate;}
.mb-light::after{content:"";position:absolute;inset:0;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@keyframes mbBreathe{from{transform:translate(-50%,-50%) scale(1);}to{transform:translate(-50%,-48%) scale(1.06);}}
.mb-view{position:relative;max-width:520px;margin:0 auto;height:100%;display:flex;flex-direction:column;}
.mb-view.in>*{animation:mbRise .44s cubic-bezier(.23,1,.32,1) both;}
.mb-view.in>*:nth-child(2){animation-delay:.04s;}.mb-view.in>*:nth-child(3){animation-delay:.08s;}
@keyframes mbRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.mb-top{display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px 4px;}
.mb-top.play{padding-bottom:0;}
.mb-tt{flex:1;min-width:0;display:flex;flex-direction:column;}
.mb-tt small{font:800 11px/14px 'Manrope';letter-spacing:1.8px;text-transform:uppercase;color:var(--p-mute);}
.mb-tt b{font:600 16px/21px 'Unbounded',sans-serif;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mb-ib{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:var(--p-text);
  background:var(--p-glass2);border:1px solid var(--p-line);cursor:pointer;transition:transform .2s cubic-bezier(.23,1,.32,1);}
.mb-ib:active{transform:scale(.9);}
.mb-tip{margin:6px 20px 0;font:500 14.5px/20.5px 'Manrope';color:var(--p-soft);}
.mb-box{flex:1;position:relative;min-height:0;margin-top:8px;padding-bottom:env(safe-area-inset-bottom);}
.mb-scroll{flex:1;overflow-y:auto;padding:0 20px 44px;-webkit-overflow-scrolling:touch;}
.mb-h{margin:6px 0 0;font:600 36px/40px 'Unbounded',sans-serif;letter-spacing:-1.1px;}
.mb-sub{margin:8px 0 0;font:500 14.5px/20.5px 'Manrope';color:var(--p-soft);}
.mb-poster{position:relative;width:240px;height:190px;margin:22px auto 0;}
.mb-pf{position:absolute;left:18px;top:16px;}.mb-pg{position:absolute;left:104px;top:50px;}
.mb-poster>i{position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:6px;background:#c8925a;}
html[data-theme="cocoa"] .mb-poster>i{background:#5a3818;}
.mb-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:17px 26px;border-radius:100px;cursor:pointer;
  font:800 16px 'Manrope';color:var(--p-on);background:linear-gradient(135deg,var(--p-accentB),var(--p-accent));box-shadow:0 10px 36px rgba(var(--p-glow),.35);
  transition:transform .2s cubic-bezier(.23,1,.32,1);}
.mb-cta:active{transform:scale(.97);}
.mb-cta.ghost{background:var(--p-glass);color:var(--p-text);border:1.5px solid var(--p-line);box-shadow:none;}
.mb-cap{margin:10px 0 0;text-align:center;font:600 12.5px/17px 'Manrope';color:var(--p-mute);}
.mb-cap.left{text-align:left;margin-top:14px;}
.mb-row{display:flex;align-items:baseline;margin:30px 0 12px;}
.mb-row b{flex:1;font:800 11px 'Manrope';letter-spacing:1.8px;text-transform:uppercase;color:var(--p-mute);}
.mb-row span{font:600 12.5px 'Manrope';color:var(--p-mute);}
.mb-map{display:grid;grid-template-columns:repeat(5,1fr);row-gap:14px;}
.mb-node{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:inherit;cursor:pointer;padding:0;}
.mb-node .mb-n{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 17px 'Unbounded',sans-serif;
  background:var(--p-glass);border:1.5px solid var(--p-line);transition:transform .2s cubic-bezier(.23,1,.32,1);}
.mb-node:active .mb-n{transform:scale(.92);}
.mb-node.next .mb-n{border-color:var(--p-accentB);box-shadow:0 0 0 4px rgba(var(--p-glow),.14);}
.mb-node.locked{opacity:.5;cursor:default;}.mb-node.locked .mb-n{background:transparent;color:var(--p-mute);}
.mb-st{display:flex;gap:1px;}.mb-st em{width:11px;height:11px;color:var(--p-mute);}.mb-st em.on{color:var(--p-gold);}
.mb-late{display:flex;align-items:center;gap:14px;width:100%;margin-top:22px;padding:16px;border-radius:20px;text-align:left;cursor:pointer;color:inherit;
  background:var(--p-glass);border:1px solid var(--p-accentB);}
.mb-late.locked{border-color:var(--p-line);opacity:.6;cursor:default;}
.mb-li{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--p-chip);color:var(--p-accentB);flex:none;}
.mb-lt{display:flex;flex-direction:column;gap:2px;}.mb-lt b{font:600 16px 'Unbounded',sans-serif;}.mb-lt small{font:600 12.5px 'Manrope';color:var(--p-mute);}
.mb-book{display:grid;grid-template-columns:repeat(4,1fr);row-gap:16px;}
.mb-bk{display:flex;flex-direction:column;align-items:center;gap:6px;}
.mb-bk span{font:600 11.5px/14px 'Manrope';color:var(--p-soft);text-align:center;padding:0 4px;}
.mb-bk.missing span{color:var(--p-mute);}
/* ---- the result card */
.mb-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 40px;text-align:center;}
.mb-h2{margin:0;font:600 28px/34px 'Unbounded',sans-serif;letter-spacing:-.8px;}
.mb-stars{display:flex;gap:10px;margin-top:16px;}
.mb-stars em{width:40px;height:40px;color:var(--p-line);animation:mbPop .5s cubic-bezier(.23,1,.32,1) both;animation-delay:var(--d);}
.mb-stars em.on{color:var(--p-gold);}
@keyframes mbPop{from{opacity:0;transform:scale(.6) translateY(8px);}to{opacity:1;transform:none;}}
.mb-big{margin-top:18px;font:600 44px 'Unbounded',sans-serif;font-variant-numeric:tabular-nums;}
.mb-lbl{font:800 11px 'Manrope';letter-spacing:1.8px;text-transform:uppercase;color:var(--p-mute);}
.mb-line{margin:14px 0 0;font:500 14.5px/20.5px 'Manrope';color:var(--p-soft);}
.mb-new{margin-top:22px;}.mb-new>div{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.mb-btns{width:100%;margin-top:26px;display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.mb-btns .mb-cta{margin-top:0;}
.mb-text{background:none;border:0;color:var(--p-soft);font:700 14.5px 'Manrope';padding:10px;cursor:pointer;}

/* ---- the bar itself */
.mb-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;cursor:grab;}
.mb-stage:active{cursor:grabbing;}
.mb-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--p-accentB);}
.mb-stage.warm{position:relative;height:100%;min-height:320px;}
.mb-hud{position:absolute;top:8px;left:16px;right:16px;display:flex;align-items:center;z-index:3;pointer-events:none;}
.mb-lives{display:flex;gap:4px;min-width:64px;}.mb-lives span{color:var(--p-mute);}.mb-lives span.on{color:var(--p-accentB);}
.mb-tray{flex:1;display:flex;justify-content:center;gap:5px;}
.mb-tray i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--p-line);}
.mb-tray i.now{border-color:var(--p-accentB);}
.mb-tray i.right{background:var(--p-accentB);border-color:transparent;}
.mb-tray i.clink{background:#ffd479;border-color:transparent;}
.mb-tray i.bad{background:var(--p-live);border-color:transparent;}
.mb-tray i.done{background:var(--p-mute);border-color:transparent;}
.mb-score{min-width:64px;display:flex;flex-direction:column;align-items:flex-end;}
.mb-score b{font:600 20px 'Unbounded',sans-serif;font-variant-numeric:tabular-nums;}
.mb-score i{font:800 10px 'Manrope';letter-spacing:1.4px;color:var(--p-mute);font-style:normal;}
.mb-sign{position:absolute;left:0;right:0;text-align:center;font-family:'Unbounded',sans-serif;font-weight:600;letter-spacing:-.5px;pointer-events:none;
  color:rgba(138,82,32,.16);}
html[data-theme="cocoa"] .mb-sign{color:rgba(234,169,100,.30);text-shadow:0 0 22px rgba(234,169,100,.55);animation:mbNeon 7s ease-in-out infinite;}
@keyframes mbNeon{0%,100%{opacity:1;}47%{opacity:1;}48%{opacity:.82;}49%{opacity:1;}}
.mb-counter{position:absolute;left:-20px;right:-20px;bottom:-20px;border-radius:18px 18px 0 0;background:linear-gradient(#c8925a,#9b6a38);}
.mb-counter::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,240,215,.28);}
html[data-theme="cocoa"] .mb-counter{background:linear-gradient(#5a3818,#2c1a0b);}
.mb-guest{position:absolute;inset:0;will-change:transform;}
.mb-face,.mb-glass,.mb-spark,.mb-bubble,.mb-puddle,.mb-splash,.mb-mine{position:absolute;}
.mb-face svg{width:100%;height:100%;display:block;}
.mb-spark{pointer-events:none;animation:mbTwinkle 2.4s ease-in-out infinite;}
@keyframes mbTwinkle{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.8);opacity:.7;}}
.mb-bubble{padding:7px 12px;border-radius:16px 16px 16px 4px;background:#fffdf7;color:#2c2318;font:800 13px 'Manrope';white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.mb-smoke{fill:rgba(28,19,11,.62);}
.mb-milk{fill:#fffdf7;}.mb-foam{fill:#f3e9d6;}
.mb-band{transition:opacity .26s;}.mb-band rect{fill:#c8925a;opacity:.3;}.mb-band line{stroke:#c8925a;stroke-width:2.4;}
.hiding .mb-band{opacity:.05;transition-duration:.22s;}
.mb-shine{stroke:rgba(255,255,255,.18);stroke-width:5;stroke-linecap:round;fill:none;}
.mb-rim{fill:none;stroke:rgba(44,35,24,.55);stroke-width:3.4;stroke-linejoin:round;}
html[data-theme="cocoa"] .mb-rim{stroke:rgba(255,250,240,.72);}
.mb-handle{stroke-width:6;stroke-linecap:round;}
.mb-puddle{height:22px;border-radius:30px;background:#fffdf7;opacity:0;transform:scale(.3);transition:opacity .42s,transform .42s cubic-bezier(.23,1,.32,1);pointer-events:none;}
.mb-puddle.on{opacity:.9;transform:none;}
.mb-splash{width:80px;height:40px;opacity:0;pointer-events:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M40 36c-6-10-16-10-22-4M40 36c6-10 16-10 22-4' stroke='%23fffdf7' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='14' r='4' fill='%23fffdf7'/%3E%3Ccircle cx='66' cy='12' r='3.4' fill='%23fffdf7'/%3E%3Ccircle cx='40' cy='8' r='3' fill='%23fffdf7'/%3E%3C/svg%3E");}
.mb-splash.on{animation:mbSplash .68s cubic-bezier(.23,1,.32,1) both;}
@keyframes mbSplash{0%{opacity:0;transform:scale(.6);}25%{opacity:1;}100%{opacity:0;transform:scale(1.2);}}
.mb-mine{opacity:0;transform:translateX(var(--from));transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .2s;pointer-events:none;}
.mb-mine.in{opacity:1;transform:translateX(var(--to)) rotate(14deg);}
.mb-stream{position:absolute;width:10px;border-radius:5px;background:#fffdf7;opacity:0;transform:scaleX(.75);transition:opacity .14s,transform .09s;pointer-events:none;
  box-shadow:0 0 12px rgba(255,253,247,.35);}
.mb-stream.on{opacity:1;transform:none;transition-duration:.09s;}
.mb-jug{position:absolute;width:84px;height:84px;transition:transform .38s cubic-bezier(.23,1,.32,1);pointer-events:none;}
.mb-jug-line{stroke:rgba(44,35,24,.55);}html[data-theme="cocoa"] .mb-jug-line{stroke:#fffdf7;}
.mb-jug-milk{fill:#fffdf7;transition:y .5s;}
.mb-word{position:absolute;left:0;right:0;text-align:center;opacity:0;pointer-events:none;z-index:2;}
.mb-word b{display:block;font:600 26px 'Unbounded',sans-serif;color:var(--p-text);}
.mb-word i{display:block;margin-top:2px;font:800 14px 'Manrope';color:var(--p-soft);font-style:normal;}
.mb-word.good b{color:var(--p-accentB);}.mb-word.gold b{color:var(--p-gold);}.mb-word.bad b{color:var(--p-live);}
.mb-word.show{animation:mbWord .5s cubic-bezier(.23,1,.32,1) both;}
@keyframes mbWord{from{opacity:0;transform:translateY(18px) scale(.9);}to{opacity:1;transform:none;}}
.mb-hint{position:absolute;left:16px;right:16px;bottom:7%;text-align:center;font:700 14px 'Manrope';color:rgba(44,35,24,.86);pointer-events:none;}
html[data-theme="cocoa"] .mb-hint{color:rgba(255,240,215,.84);}
@media (prefers-reduced-motion: reduce){
  .mb-light::before,.mb-spark,.mb-sign{animation:none!important;}
  .mb-view.in>*,.mb-word.show,.mb-stars em{animation-duration:.01s!important;}
  .mb-jug,.mb-mine,.mb-puddle{transition-duration:.01s!important;}
}