/* Moloko Game — web port of the native milk game. Everything is scoped to #mg-root / .mg-*. The level map follows the page palette (--milk --cream --ink --ink-soft --line --accent), the way the native screen follows the app theme; the playfield is always the dark cocoa "video player". */ #mg-root{ --mg-ink:var(--ink,#2c2318); --mg-cream:var(--cream,#fffdf7); --mg-milk:var(--milk,#f7efdf); --mg-milk2:var(--milk-2,#efe3cd); --mg-line:var(--line,#e6d9c0); --mg-accent:var(--accent,#c8925a); --mg-accent-b:#eaa964; --mg-soft:rgba(44,35,24,.66); --mg-mute:rgba(44,35,24,.56); --mg-glass:rgba(44,35,24,.045); --mg-glass2:rgba(44,35,24,.075); --mg-glass-border:rgba(44,35,24,.16); --mg-chip:rgba(200,146,90,.16); --mg-accent-text:#9c7348; --mg-gold-text:#8d6b1c; --mg-display:'Unbounded','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; position:fixed;inset:0;z-index:300;display:flex;justify-content:center;overflow:hidden; background:linear-gradient(180deg,var(--mg-cream) 0%,var(--mg-milk) 55%,var(--mg-milk2) 100%); color:var(--mg-ink);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.35; -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent; overscroll-behavior:contain;text-align:left;animation:mg-in .22s ease-out; } @supports (color:color-mix(in srgb,red 50%,blue)){ #mg-root{ --mg-soft:color-mix(in srgb,var(--mg-ink) 66%,transparent); --mg-mute:color-mix(in srgb,var(--mg-ink) 56%,transparent); --mg-glass:color-mix(in srgb,var(--mg-ink) 4.5%,transparent); --mg-glass2:color-mix(in srgb,var(--mg-ink) 7.5%,transparent); --mg-glass-border:color-mix(in srgb,var(--mg-ink) 16%,transparent); --mg-chip:color-mix(in srgb,var(--mg-accent) 16%,transparent); --mg-accent-text:color-mix(in srgb,var(--mg-accent) 72%,var(--mg-ink)); --mg-gold-text:color-mix(in srgb,#c9971f 62%,var(--mg-ink)); } } #mg-root,#mg-root *{box-sizing:border-box} #mg-root [hidden]{display:none !important} #mg-root:focus{outline:none} #mg-root button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none} #mg-root button:focus-visible,#mg-root .mg-field:focus-visible{outline:2px solid var(--mg-accent);outline-offset:3px} #mg-root .mg-ico{display:block;flex:0 0 auto} /* ambient glow — native GlowBackground: two soft blobs drifting over 9s */ #mg-root .mg-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden} #mg-root .mg-blob{position:absolute;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle closest-side,rgba(201,138,70,.18) 0 38%,rgba(201,138,70,.107) 38% 67.6%,rgba(201,138,70,.05) 67.6% 100%,transparent 100%); animation:mg-drift-a 9s cubic-bezier(.455,.03,.515,.955) infinite alternate} #mg-root .mg-blob-a{top:-90px;left:-70px} #mg-root .mg-blob-b{bottom:-70px;right:-80px;animation-name:mg-drift-b; background:radial-gradient(circle closest-side,rgba(210,86,76,.18) 0 38%,rgba(210,86,76,.107) 38% 67.6%,rgba(210,86,76,.05) 67.6% 100%,transparent 100%)} #mg-root.mg-playing .mg-blob{animation-play-state:paused} @keyframes mg-drift-a{from{transform:translate(-30px,-20px) scale(1)}to{transform:translate(4px,14px) scale(1.14)}} @keyframes mg-drift-b{from{transform:translate(30px,24px) scale(1.12)}to{transform:translate(0,-6px) scale(1)}} @keyframes mg-in{from{opacity:0}to{opacity:1}} @keyframes mg-fade{from{opacity:0}to{opacity:1}} @keyframes mg-fade-down{from{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:none}} /* column: full screen on phones (safe areas), a centred 480px strip on desktop */ #mg-root .mg-col{position:relative;display:flex;flex-direction:column;width:100%;max-width:480px;height:100%; padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)} #mg-root .mg-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px} #mg-root .mg-titles{flex:1 1 auto;min-width:0} #mg-root .mg-h2{margin:0;font:700 20px/1.2 var(--mg-display);letter-spacing:-.02em;color:var(--mg-ink)} #mg-root .mg-sub{margin:3px 0 0;font-size:14px;line-height:20px;color:var(--mg-soft)} #mg-root .mg-iconbtn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--mg-glass);border:1px solid var(--mg-glass-border);color:var(--mg-ink);transition:transform .2s cubic-bezier(.2,.9,.3,1.35)} #mg-root .mg-iconbtn:active{transform:scale(.88)} /* buttons — native Btn primary (caramel gradient pill) / glass */ #mg-root .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;padding:17px 30px; font-weight:800;font-size:17px;line-height:1.2;white-space:nowrap; transition:transform .2s cubic-bezier(.2,.9,.3,1.35),box-shadow .2s,filter .2s} #mg-root .mg-btn:active{transform:scale(.97)} #mg-root .mg-btn-primary{width:100%;color:#241708;background:linear-gradient(135deg,var(--mg-accent-b),var(--mg-accent)); box-shadow:0 8px 20px -6px rgba(232,167,101,.55)} #mg-root .mg-btn-glass{flex:0 0 auto;padding:12px 20px;font-size:16px;color:var(--mg-ink);background:var(--mg-glass2);border:1px solid var(--mg-glass-border)} @media (hover:hover){ #mg-root .mg-btn-primary:hover{filter:brightness(1.04);box-shadow:0 12px 26px -8px rgba(232,167,101,.7)} #mg-root .mg-btn-glass:hover,#mg-root .mg-iconbtn:hover{background:var(--mg-glass2)} #mg-root .mg-lvl:not(.mg-locked):hover{background:var(--mg-glass2)} } /* level map */ #mg-root .mg-map{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;outline:none} #mg-root .mg-list{display:flex;flex-direction:column;gap:14px;padding:18px 18px 40px} #mg-root .mg-result{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:4px;animation:mg-fade .3s ease both} #mg-root .mg-result-drop{color:var(--mg-accent-b)} #mg-root .mg-result-score{font:700 34px/1.1 var(--mg-display);letter-spacing:-.02em;color:var(--mg-ink);font-variant-numeric:tabular-nums} #mg-root .mg-soft{font-size:14px;line-height:20px;color:var(--mg-soft)} #mg-root .mg-mute{font-size:12.5px;line-height:1.45;color:var(--mg-mute)} #mg-root .mg-center{text-align:center} #mg-root .mg-label{margin-top:8px;font-size:14px;line-height:20px;font-weight:800;letter-spacing:.02em;color:var(--mg-soft)} #mg-root .mg-label-levels{margin-top:14px} #mg-root .mg-levels-hint{margin-top:-8px} #mg-root .mg-champs{display:flex;flex-direction:column;gap:14px} #mg-root .mg-champs:empty{display:none} #mg-root .mg-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:28px; background:var(--mg-glass);border:1px solid var(--mg-glass-border);color:var(--mg-ink);text-align:left} #mg-root .mg-row::before{content:"";position:absolute;top:-1px;left:14px;right:14px;height:1px;background:rgba(255,255,255,.72);pointer-events:none} #mg-root .mg-champ{animation:mg-fade-down .3s ease both} #mg-root .mg-rank{flex:0 0 28px;text-align:center;font-weight:900;font-size:16px;color:var(--mg-mute)} #mg-root .mg-rank-1{color:#b88a0f} #mg-root .mg-rank-2{color:#8f887a} #mg-root .mg-rank-3{color:#b0703a} #mg-root .mg-name{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700} #mg-root .mg-name.mg-me{font-weight:900;color:var(--mg-accent-text)} #mg-root .mg-best{flex:0 0 auto;font-weight:800;font-variant-numeric:tabular-nums} #mg-root .mg-lvl{transition:transform .2s cubic-bezier(.2,.9,.3,1.35),background .15s} #mg-root .mg-lvl:active{transform:scale(.98)} #mg-root .mg-lvl.mg-locked{opacity:.45;cursor:default} #mg-root .mg-lvl.mg-locked:active{transform:none} #mg-root .mg-badge{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center; background:var(--mg-chip);color:var(--mg-accent-text);font-weight:900;font-size:15px} #mg-root .mg-locked .mg-badge{background:transparent;border:1px solid var(--mg-line);color:var(--mg-mute)} #mg-root .mg-lvl-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} #mg-root .mg-lvl-name{font-weight:800;font-size:15px;color:var(--mg-ink)} #mg-root .mg-lvl-tip{margin-top:1px;font-size:12.5px;line-height:1.35;color:var(--mg-mute)} #mg-root .mg-stars{flex:0 0 auto;font-size:15px;letter-spacing:2px;color:var(--mg-mute)} #mg-root .mg-stars.on{color:var(--mg-gold-text)} /* playfield */ #mg-root .mg-play{flex:1 1 auto;min-height:0;display:flex;padding:12px} #mg-root .mg-frame{position:relative;flex:1 1 auto;min-height:0;border-radius:34px;overflow:hidden;background:var(--mg-glass2); isolation:isolate;transform:translateZ(0)} #mg-root .mg-field{position:absolute;inset:0;overflow:hidden;touch-action:none;-webkit-touch-callout:none;outline:none;cursor:grab} #mg-root .mg-field:active{cursor:grabbing} #mg-root .mg-shake{position:absolute;inset:0;background:#140d06;will-change:transform} #mg-root .mg-flash{position:absolute;inset:0;background:#e0645a;opacity:0;visibility:hidden;pointer-events:none} #mg-root .mg-hud{position:absolute;top:4px;left:0;right:0;display:flex;justify-content:center;gap:8px;pointer-events:none} #mg-root .mg-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;background:rgba(255,250,240,.09); color:#fffdf7;font-weight:800;font-size:14px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap} #mg-root .mg-chip b{font-weight:800} #mg-root .mg-chip-drop .mg-ico,#mg-root .mg-chip-rung .mg-ico{color:#eaa964} #mg-root .mg-chip-cup .mg-ico{color:#fffdf7} #mg-root .mg-heart-solid path{fill:currentColor;stroke:currentColor} #mg-root .mg-chip-lvl{background:rgba(234,169,100,.18);color:#eaa964;font-size:12px} #mg-root .mg-lives{position:absolute;top:34px;right:12px;display:flex;gap:4px;pointer-events:none} #mg-root .mg-heart .mg-ico{width:17px;height:17px} #mg-root .mg-heart path{fill:none;stroke:rgba(255,250,240,.22)} #mg-root .mg-heart.on path{fill:#e0645a;stroke:#e0645a} #mg-root .mg-lives-many{gap:3px} #mg-root .mg-lives-many .mg-heart .mg-ico{width:14px;height:14px} #mg-root .mg-combo{position:absolute;top:36px;left:0;right:0;text-align:center;color:#ffd479;font-weight:900;font-size:15px; letter-spacing:.5px;opacity:0;visibility:hidden;pointer-events:none} #mg-root .mg-bolt{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none} #mg-root .mg-bolt-tint{position:absolute;inset:0;background:#ffd479;opacity:.16} #mg-root .mg-bolt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #mg-root .mg-cv{position:absolute;inset:0;width:100%;height:100%;display:block} #mg-root .mg-banner{position:absolute;top:34%;left:20px;right:20px;display:flex;flex-direction:column;align-items:center;padding:18px 14px; border-radius:22px;background:rgba(20,14,8,.92);border:1px solid rgba(234,169,100,.4);text-align:center; opacity:0;visibility:hidden;pointer-events:none} #mg-root .mg-banner-stars{margin-bottom:6px;color:#ffd479;font-size:22px;line-height:1.2;letter-spacing:4px} #mg-root .mg-banner-lvl{color:#eaa964;font-weight:900;font-size:12px;letter-spacing:2px} #mg-root .mg-banner-name{margin-top:4px;color:#fffdf7;font:700 21px/1.25 var(--mg-display);letter-spacing:-.01em} #mg-root .mg-banner-tip{margin-top:4px;color:rgba(255,250,240,.6);font-size:13px;line-height:1.4} #mg-root .mg-sound{position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(255,250,240,.10);color:rgba(255,250,240,.55);transition:transform .2s cubic-bezier(.2,.9,.3,1.35)} #mg-root .mg-sound.on{color:#eaa964} #mg-root .mg-sound:active{transform:scale(.9)} @media (max-width:440px){ #mg-root .mg-hud{gap:5px} #mg-root .mg-chip{padding:4px 8px;font-size:13px} #mg-root .mg-chip-lvl{font-size:11.5px} } @media (prefers-reduced-motion:reduce){ #mg-root,#mg-root .mg-result{animation:none} #mg-root .mg-blob{animation:none} #mg-root .mg-champ{animation-name:mg-fade} } /* upload mode (MolokoGame.embed): the playfield fills the box under "Pouring your circle…" */ #mg-root.mg-embed{position:absolute;inset:0;z-index:auto;background:none;animation:none;} #mg-root.mg-embed .mg-glow,#mg-root.mg-embed .mg-head,#mg-root.mg-embed .mg-map{display:none !important;} #mg-root.mg-embed .mg-col{max-width:none;} #mg-root.mg-embed .mg-play{padding:0;} #mg-root.mg-embed .mg-frame{border:0;border-radius:0;background:none;box-shadow:none;}