/* ColorEngine styles: shared by every game. */ [hidden]{display:none!important} :root{ color-scheme: light; --wall:#f4f5f8; --panel:#fff; --ink:#1f2330; --muted:#80869a; --line:#e3e6ec; --track:#e8eaef; --on-ink:#fff; --muted2:#4a5061; --soft:#f1f2f5; --chip-a:#f1f2f5; --chip-b:#dfe1e6; --paper-ink:#23283a; --shadow:0 1px 2px rgba(20,24,40,.06),0 8px 24px rgba(20,24,40,.07); /* UI is black and white on purpose: all color belongs to the game itself */ --ok:var(--ink); --warn:var(--ink); --accent:var(--ink); --gold:var(--ink); } /* Dark mode: follows the device unless the player picked Light or Dark (data-theme on ). */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ color-scheme: dark; --wall:#111318; --panel:#1b1e26; --ink:#eceef3; --muted:#8b90a3; --line:#2c303b; --track:#2a2e38; --on-ink:#15171d; --muted2:#b4b9c8; --soft:#262a35; --chip-a:#2a2e38; --chip-b:#1f222a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); }} :root[data-theme="dark"]{ color-scheme: dark; --wall:#111318; --panel:#1b1e26; --ink:#eceef3; --muted:#8b90a3; --line:#2c303b; --track:#2a2e38; --on-ink:#15171d; --muted2:#b4b9c8; --soft:#262a35; --chip-a:#2a2e38; --chip-b:#1f222a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); } *{box-sizing:border-box} /* The page itself never scrolls (no rubber band on iPhone): each scene is a fixed column whose bar stays put, and only its content area scrolls. --w is the content width; side padding centers it inside the scroller. */ html,body{height:100%;overflow:hidden;overscroll-behavior:none} body{margin:0;position:fixed;inset:0;background:var(--wall);color:var(--ink);font:500 15px/1.4 "Inter",system-ui,sans-serif;-webkit-tap-highlight-color:transparent} .wrap{--w:520px;height:100%;display:flex;flex-direction:column;gap:14px;padding-top:16px} .wrap>.gamebar,.home>.topbar{flex:none;width:min(calc(100% - 32px),var(--w));margin:0 auto} .board,.homeMain,.gallery{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-inline:max(16px,calc((100% - var(--w)) / 2))} .board{padding-bottom:12px} header{display:flex;align-items:center;justify-content:space-between;gap:12px} .brandname{font:800 16px/1 "Inter",system-ui,sans-serif;letter-spacing:-.2px} .titlebar{text-align:center;display:flex;flex-direction:column;gap:4px} h1{font:800 26px/1.15 "Inter",system-ui,sans-serif;margin:0;letter-spacing:-.4px} h1 .tstars{color:var(--gold);font-size:.85em;letter-spacing:1px;margin-left:6px;white-space:nowrap} h1 .tstars .off{color:var(--line)} .brand{display:flex;align-items:center;gap:10px} .brand img{height:30px;width:auto;mix-blend-mode:multiply;transform:rotate(-4deg);flex:none} .sub{color:var(--muted);font-size:14px} .levels{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none} .lvl{appearance:none;flex:1 0 auto;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:99px;padding:7px 12px;font:600 13px "Inter",system-ui,sans-serif;cursor:pointer;display:flex;gap:6px;align-items:center;justify-content:center;white-space:nowrap} .lvl[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .lvl:disabled{opacity:.45;cursor:default} .lvl .st{color:var(--gold);font-size:11px;letter-spacing:1px} .hud{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center} .pill{font:700 13px "Inter",system-ui,sans-serif;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap;font-variant-numeric:tabular-nums} .paintgauge{display:flex;align-items:center;gap:8px;font:600 13px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums} .paintgauge .bar{height:6px} .paintgauge .bar i{background:var(--accent)} .frame{background:var(--panel);border-radius:22px;padding:8px;box-shadow:var(--shadow)} svg.scene{display:block;width:100%;height:auto;border-radius:15px} .credit{font-size:12px;color:var(--muted);text-align:center;margin-top:-4px;min-height:16px} .credit i{font-style:italic} .credit:empty{display:none} #game .credit{display:none} /* art credit shows on the result card instead, to keep the play screen on one phone screen */ .region{cursor:pointer;transition:fill .7s ease,stroke .7s ease} .region.sel{animation:pulse 1.1s ease-in-out infinite} .region.sel:not(.done){fill-opacity:.9} .region.done{cursor:default} @keyframes pulse{50%{filter:brightness(.94)}} .selOutline{fill:none;stroke:var(--paper-ink);stroke-width:2.5;stroke-dasharray:6 5;pointer-events:none;animation:dash 1s linear infinite} .selOutline.thick{stroke-dasharray:none;opacity:.35;animation:none} @keyframes dash{to{stroke-dashoffset:-22}} .crack{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;transition:opacity .5s} .crack.gone{opacity:0} .mixer{background:var(--panel);border-radius:22px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)} .swatches{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px} .sw{display:flex;flex-direction:column;align-items:center;gap:10px} .sw .lab{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)} .chip{width:100%;max-width:132px;aspect-ratio:1;border-radius:50%;border:7px solid var(--panel);box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(20,24,40,.12),inset 0 2px 6px rgba(0,0,0,.08);transition:background .25s} .chip.empty{background:radial-gradient(circle at 50% 35%,var(--chip-a),var(--chip-b))} .chip.shake{animation:shake .4s} @keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}} .target-name{font:700 18px "Inter",system-ui,sans-serif;text-align:center} .eq{display:none} .meter{display:flex;align-items:center;gap:14px} .bar{flex:1;height:10px;border-radius:99px;background:var(--track);overflow:hidden} .bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--warn);transition:width .3s,background .3s} .pct{display:flex;flex-direction:column;align-items:flex-end;line-height:1;min-width:58px;font-variant-numeric:tabular-nums} .pct b{font:800 22px "Inter",system-ui,sans-serif} .pct small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-top:3px} .drops{display:flex;flex-wrap:wrap;gap:5px;min-height:18px;justify-content:center} .drops span{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 1px rgba(20,24,40,.18)} .drops em{font-style:normal;color:var(--muted);font-size:13px} .paints{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:6px;padding:12px 6px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .paint{appearance:none;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font:600 12px "Inter",system-ui,sans-serif;color:var(--muted2)} /* Flat paint dots: plain color, no gloss or shadow. White gets a hairline so it shows on the white panel. */ .paint .blob{width:100%;max-width:48px;aspect-ratio:1;border-radius:50%;transition:transform .1s} .paint[data-k="W"] .blob{box-shadow:inset 0 0 0 1.5px #d6d9e1} .paint{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .ghost{position:fixed;left:0;top:0;width:48px;height:48px;border-radius:50%;pointer-events:none;z-index:8;box-shadow:0 10px 24px rgba(20,24,40,.25);opacity:.95} .ghost.white{box-shadow:inset 0 0 0 1.5px #d6d9e1,0 10px 24px rgba(20,24,40,.25)} .chip.dropping{transform:scale(1.12);box-shadow:0 0 0 3px var(--accent),0 6px 16px rgba(20,24,40,.12)} .chip{transition:background .25s,transform .15s,box-shadow .15s} .paint:active .blob{transform:scale(.9)} .paint:focus-visible .blob,.btn:focus-visible,.lvl:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .actions{display:flex;gap:6px;align-items:center} .actions .btn{flex:1 1 0;min-width:0;position:relative} .actions .btn.primary{flex:1.5 1 0} .btn.boost{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;font:600 12px "Inter",system-ui,sans-serif;background:none;border:0;box-shadow:none;color:var(--muted2)} .btn.boost .ico{width:46px;height:46px;padding:12px;border-radius:50%;background:var(--panel);box-shadow:0 0 0 1px var(--line),0 3px 10px rgba(20,24,40,.1);color:var(--ink);transition:transform .1s} .btn.boost:active{transform:none}.btn.boost:active .ico{transform:scale(.92)} .btn.boost.on .ico{background:var(--accent);color:var(--on-ink)} .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .btn.locked{color:var(--muted)} .btn.locked .ico{background:var(--soft);box-shadow:0 0 0 1px var(--line);color:var(--muted)} .btn.locked:active{transform:none} .dot{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(20,24,40,.2);vertical-align:-2px} .card .booster .ico{width:18px;height:18px;vertical-align:-4px;margin-right:4px} .badge{position:absolute;top:-6px;left:calc(50% + 10px);background:var(--gold);color:var(--on-ink);border:2px solid var(--panel);border-radius:99px;padding:0 6px;font:700 11px/16px "Inter",system-ui,sans-serif;white-space:nowrap;display:flex;align-items:center;gap:3px} .badge.buy{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line)} .btn.on:not(.boost){background:var(--accent);color:var(--on-ink)} .coin{display:inline-block;width:.95em;height:.95em;border-radius:50%;background:var(--panel);border:1.5px solid var(--ink);box-shadow:inset 0 0 0 1.5px var(--panel),inset 0 0 0 2.6px var(--ink);vertical-align:-2px;flex:none} .badge .coin{width:10px;height:10px;border-width:1.2px;box-shadow:inset 0 0 0 1.2px var(--panel),inset 0 0 0 2.1px var(--ink)} .pill.coins{display:flex;align-items:center;gap:6px} .pill.tier{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-size:12px;padding:5px 10px} .gtier{font-style:normal;font-size:11px;font-weight:700;background:var(--ink);color:var(--on-ink);border-radius:99px;padding:1px 7px;margin-left:4px;vertical-align:1px} .pill.bump{animation:bump .4s} @keyframes bump{40%{transform:scale(1.15)}} .drops.picking span{cursor:pointer;animation:wig .5s ease-in-out infinite;outline:2px dashed var(--accent);outline-offset:2px} @keyframes wig{50%{transform:rotate(-45deg) scale(1.2)}} .card .booster{background:var(--wall);border:0;border-radius:14px;padding:10px;text-align:left;font-size:14px} .card .booster b{font-weight:700} .card .col{display:flex;flex-direction:column;gap:8px} .btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:99px;padding:12px 14px;font:700 15px "Inter",system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 6px rgba(20,24,40,.06);transition:transform .1s,background .2s} .btn:active{transform:scale(.97)} .btn:disabled{opacity:.45;cursor:default} .btn.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .btn.primary.ready{background:var(--ok);border-color:var(--ok)} .actions .btn.primary{align-self:stretch;margin-bottom:17px} .msg{min-height:20px;text-align:center;font-weight:600;font-size:14px;color:var(--muted)} .msg.good{color:var(--ok)} .msg.bad{color:var(--warn)} .hint{display:none;justify-content:center;gap:6px;align-items:center;font-size:13px;color:var(--muted);text-align:center} .hint.on{display:flex} .overlay{position:fixed;inset:0;background:rgba(20,24,40,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:5} .overlay[hidden]{display:none} .card{background:var(--panel);border-radius:26px;padding:26px 22px 22px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(20,24,40,.25);display:flex;flex-direction:column;gap:12px} .card h2{font:800 23px "Inter",system-ui,sans-serif;margin:0;letter-spacing:-.3px} .card p{margin:0;color:var(--muted)} .card .stars{font-size:28px;letter-spacing:2px;color:var(--gold)} .card .row{display:flex;gap:8px}.card .row .btn{flex:1} .toast{position:fixed;z-index:7;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:99px;font:600 14px "Inter",system-ui,sans-serif;transition:.3s;pointer-events:none;white-space:nowrap} .toast{white-space:normal;text-align:center;max-width:calc(100vw - 32px);width:max-content;border-radius:18px} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* Forced-undo coach */ .coachDim{position:fixed;inset:0;background:rgba(20,24,40,.55);z-index:4} .coachTip{position:relative;z-index:5;background:var(--panel);border-radius:16px;padding:12px 14px;font-weight:600;font-size:14px;text-align:center;box-shadow:var(--shadow)} .coachTip.nudge{animation:shake .4s} .lift{position:relative;z-index:5;background:var(--panel);border-radius:16px;padding:8px} .actions .btn.coach{z-index:5}.actions .btn.coach .ico{animation:ring 1.1s ease-out infinite} @keyframes ring{0%{box-shadow:0 0 0 1px var(--line),0 0 0 0 rgba(31,35,48,.55)}100%{box-shadow:0 0 0 1px var(--line),0 0 0 16px rgba(31,35,48,0)}} /* Challenge */ .chbar{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 12px;font:600 14px "Inter",system-ui,sans-serif;text-align:center} .share{display:flex;flex-direction:column;gap:8px} .share input{font:600 15px "Inter",system-ui,sans-serif;border:1px solid var(--line);border-radius:99px;padding:9px 12px;text-align:center;background:var(--panel);color:var(--ink)} .btn.accent{background:var(--accent);color:var(--on-ink)} .card .note{font-size:14px;color:var(--ink);font-weight:700} /* Celebration */ .frame{position:relative;transition:border-color .5s,box-shadow .5s} .frame.celebrate{box-shadow:0 0 0 3px var(--ink),0 0 0 9px rgba(31,35,48,.08);animation:framepop .7s cubic-bezier(.2,1.6,.4,1)} @keyframes framepop{40%{transform:scale(1.035)}} .region.flash{animation:flash .7s ease both} @keyframes flash{35%{filter:brightness(1.45) saturate(1.4)}} .shine{animation:shine 1.3s .2s ease-in-out both} @keyframes shine{from{transform:translateX(0) skewX(-20deg)}to{transform:translateX(600px) skewX(-20deg)}} .spark{fill:#fff;stroke:var(--gold);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:twinkle 1.1s ease-in-out 2 both} @keyframes twinkle{0%{transform:scale(0) rotate(0)}50%{transform:scale(1.3) rotate(90deg)}100%{transform:scale(0) rotate(180deg)}} .stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-10deg);font:700 32px/1 "Inter",system-ui,sans-serif;color:var(--paper-ink);border:4px solid var(--paper-ink);border-radius:10px;padding:8px 18px;letter-spacing:4px;text-transform:uppercase;background:rgba(255,255,255,.8);pointer-events:none;animation:stamp .45s cubic-bezier(.2,1.8,.5,1) both} @keyframes stamp{from{transform:translate(-50%,-50%) rotate(-10deg) scale(3);opacity:0}} .stars span{display:inline-block;animation:starpop .55s cubic-bezier(.2,1.8,.5,1) both} .stars span.off{color:var(--line)} @keyframes starpop{from{transform:scale(0) rotate(-120deg);opacity:0}} .overlay:not([hidden]) .card{animation:cardin .45s cubic-bezier(.2,1.4,.5,1)} @keyframes cardin{from{transform:translateY(40px) scale(.9);opacity:0}} .overlay.low{align-items:flex-end;background:rgba(20,24,40,.12);-webkit-backdrop-filter:none;backdrop-filter:none;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} #fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6} /* ---------- Scenes ---------- */ .iconbtn{appearance:none;width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;padding:0;box-shadow:0 2px 6px rgba(20,24,40,.06)} .iconbtn .ico{width:20px;height:20px} .card .row .btn.iconbtn{flex:none;width:48px;height:auto} /* Home */ .home{--w:520px;height:100%;display:flex;flex-direction:column;gap:12px;padding-top:16px} .homeMain,.gallery{padding-bottom:84px} .topbar{display:flex;justify-content:space-between;align-items:center} .homeMain{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} /* centered while it fits, scrolls from the top when it doesn't (justify-content:center would cut off the top) */ .homeMain::before,.homeMain::after{content:""} .homeMain::before{margin:auto 0 -10px}.homeMain::after{margin:-10px 0 auto} .homeMain .logo{height:clamp(110px,19dvh,190px);width:auto;mix-blend-mode:multiply;transform:rotate(-4deg);margin-bottom:6px} .nextPic{appearance:none;border:0;padding:8px;background:var(--panel);border-radius:22px;box-shadow:var(--shadow);width:min(100%,340px,calc((100dvh - 470px) * 4 / 3 + 16px));min-width:200px;cursor:pointer} .nextPic svg,.gcard svg{display:block;width:100%;height:auto;border-radius:15px;pointer-events:none} .nextLabel{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px} .nextTitle{font:800 28px/1.1 "Inter",system-ui,sans-serif;letter-spacing:-.5px} .nextTitle .tstars{color:var(--gold);font-size:.7em;margin-left:6px;letter-spacing:1px}.nextTitle .off{color:var(--line)} .btn.play{background:var(--accent);border-color:var(--accent);color:var(--on-ink);font-size:20px;padding:16px;width:min(100%,320px);margin-top:8px;box-shadow:0 8px 20px rgba(20,24,40,.22)} .home .chbar{max-width:340px} .tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:3} .tab{appearance:none;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 26px;border-radius:14px;font:600 12px "Inter",system-ui,sans-serif;color:var(--muted);cursor:pointer} .tab[aria-current="true"]{color:var(--ink);background:var(--wall)} .gallery h2{font:800 24px "Inter",system-ui,sans-serif;margin:6px 0 2px;letter-spacing:-.4px} .ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .gcard{appearance:none;border:0;background:var(--panel);border-radius:18px;padding:6px 6px 10px;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:inherit;position:relative} .gcard b{font-size:14px;padding:0 4px}.gcard small{padding:0 4px;color:var(--gold);letter-spacing:1px;min-height:16px}.gcard small .off{color:var(--line)} .gcard:disabled{cursor:default}.gcard:disabled>svg{opacity:.35;filter:grayscale(1)} .gcard .lockico{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--panel);box-shadow:var(--shadow);color:var(--muted)} /* Game: compact bar + compact mixer so it all fits a phone screen */ #game{gap:8px} .gamebar{display:flex;align-items:center;gap:10px} .gamebar .paintgauge{flex:1} .mixer{padding:12px;gap:8px} .swatches{grid-template-columns:1fr 1fr;align-items:start;gap:12px} .sw{gap:6px} .chip{max-width:84px;border-width:6px} .target-name{font-size:16px;line-height:1.2} .mixer .meter{display:block;padding:0 4px} .mixer .meter .bar{height:8px} .drops{gap:4px;min-height:16px}.drops span{width:12px;height:12px}.drops em{font-size:13px} .msg{font-size:13px;min-height:18px} .paints{padding:8px 4px;gap:4px} .paint{font-size:12px;gap:6px} .paint .blob{max-width:50px} .btn.boost .ico{width:46px;height:46px;padding:12px} .btn.boost{font-size:12px;gap:4px} /* Boosters get their own evenly spaced row (painting happens automatically on a match) */ .actions{flex-direction:column;align-items:stretch;gap:12px} .boosters{display:flex;justify-content:space-around;padding-top:8px} .boosters .btn.boost{flex:0 0 64px;position:relative} .actions .btn.primary{flex:none;margin:0;padding:13px;font-size:16px} .stamp{font-size:26px} /* Taller phones get the full-size controls */ @media (min-height:760px) and (max-width:899px){.mixer{padding:18px 14px;gap:14px}.chip{max-width:116px}.paint .blob{max-width:56px}.btn.boost .ico{width:52px;height:52px;padding:14px}} @media (max-height:640px){.frame{padding:5px;border-radius:18px}.chip{max-width:84px}.paint .blob{max-width:42px}.btn.boost .ico{width:42px;height:42px;padding:10px}} /* Layout: stacked on phones, side by side on wide landscape screens */ .board,.stage{display:flex;flex-direction:column;gap:12px} /* phones: the picture shrinks a little on short screens so bar + picture + mixer fit with no scrolling (4:3 picture; ~446px for the rest) */ .stage{width:100%;max-width:max(260px,calc((100dvh - 446px) * 4 / 3));align-self:center} @media (min-width:900px) and (orientation:landscape){ .wrap{--w:1240px;gap:14px;padding-top:20px} .board{padding-bottom:20px} .board{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start} /* keep the whole picture on screen: 4:3 picture, header + title + level bar + hud take ~250px */ .stage{width:100%;max-width:calc((100vh - 110px) * 4 / 3);justify-self:center;min-width:420px} .chip{max-width:116px} .home{--w:1000px} .gallery .ggrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .mixer{position:sticky;top:0} /* sticky makes its own stacking context, which would trap the coach tip and Undo under the dim layer */ body.coaching .mixer{position:static} /* result card sits over the mixer, so the restored picture stays in view */ .overlay.low{align-items:center;justify-content:flex-end;padding-right:max(16px,calc((100vw - 1240px) / 2 + 36px))} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------- Art quiz (games with G.quiz) ---------- */ .btn.quizbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:min(100%,320px);background:var(--panel);font-size:15px} .btn.quizbtn .ico,.btn.accent .ico{width:18px;height:18px} #quizOfferBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px} #quizOfferBtn[hidden]{display:none} .home.hasQuiz .nextPic{width:min(100%,340px,calc((100dvh - 530px) * 4 / 3 + 16px))} .home.hasDaily .nextPic{width:min(100%,340px,calc((100dvh - 530px) * 4 / 3 + 16px))} .btn.quizbtn.done{color:var(--muted)} .btn.quizbtn .dlab{display:flex;flex-direction:column;line-height:1.2;text-align:left} .btn.quizbtn .dlab small{font-size:13px;font-weight:600;color:var(--muted)} #dailyPicBtn{padding-top:8px;padding-bottom:8px} .quizcard{gap:10px} .quizImg{margin:0 auto;width:min(100%,260px)} .quizImg svg{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--line)} .quizTitleCard{aspect-ratio:4/3;display:grid;place-items:center;border-radius:12px;background:var(--wall);font:800 22px/1.2 "Inter",system-ui,sans-serif;padding:16px;box-shadow:0 0 0 1px var(--line)} .quizEyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .quizTitle{font-size:14px;color:var(--muted);margin-top:-6px} .quizcard h2{font-size:20px} .quizOpts{display:flex;flex-direction:column;gap:8px} .btn.qopt{padding:11px 14px;font-size:15px;text-align:center} .btn.qopt:disabled{opacity:1} .btn.qopt.right{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .btn.qopt.wrong{text-decoration:line-through;color:var(--muted)} .quizResult{font-size:14px;color:var(--ink)!important;text-align:center} /* ---------- Dark mode details ---------- */ .themebtn .ico{width:18px;height:18px} .topr{display:flex;align-items:center;gap:8px} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .homeMain .logo,:root:not([data-theme="light"]) .brand img{mix-blend-mode:normal;border-radius:8px} :root:not([data-theme="light"]) .paint[data-k="K"] .blob{box-shadow:inset 0 0 0 1.5px #3a3f4f}} :root[data-theme="dark"] .homeMain .logo,:root[data-theme="dark"] .brand img{mix-blend-mode:normal;border-radius:8px} :root[data-theme="dark"] .paint[data-k="K"] .blob{box-shadow:inset 0 0 0 1.5px #3a3f4f} /* ---------- Settings ---------- */ .settings{gap:14px;text-align:left} .settings h2{text-align:center} .setrow{display:flex;flex-direction:column;gap:6px} .setrow>span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--soft);border-radius:14px;padding:4px} .seg button{appearance:none;border:0;background:none;flex:1 1 auto;padding:9px 8px;border-radius:10px;font:600 14px "Inter",system-ui,sans-serif;color:var(--muted2);cursor:pointer} .seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)} .setrow:has(.switch){flex-direction:row;align-items:center;justify-content:space-between} .switch{appearance:none;border:0;width:52px;height:30px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;padding:0;transition:background .2s} .switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s} .switch[aria-checked="true"]{background:var(--ink)} .switch[aria-checked="true"] i{transform:translateX(22px)} .switch:disabled{opacity:.4;cursor:default} .setnote{font-size:13px;margin:-6px 0 0!important} /* ---------- Empty: the bowl tips, drains and the drops fall away ---------- */ .chip{position:relative} .chip::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--chip-a),var(--chip-b));opacity:0;pointer-events:none} .chip.pour{animation:pour .62s ease-in-out} .chip.pour::after{animation:drain .62s ease-in forwards} @keyframes pour{35%,75%{transform:rotate(-32deg)}100%{transform:rotate(0)}} @keyframes drain{0%,25%{opacity:1;clip-path:inset(0 0 100% 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}} .drops span.fall{animation:dropfall .5s ease-in forwards} @keyframes dropfall{from{transform:rotate(-45deg)}to{transform:translate(-18px,46px) rotate(-160deg);opacity:0}} /* ---------- Gallery hall (dramatic: the hall is part of the picture world, always dark) ---------- */ .hallMode .homeMain{justify-content:flex-start;gap:8px} .hallMode .homeMain::before{display:none} .hallWrap{width:100%;display:flex;flex-direction:column;gap:8px} .hallRoom{display:flex;flex-direction:column;align-items:center;gap:1px} .hallRoom small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .hallRoom b{font:800 19px/1.2 "Inter",system-ui,sans-serif;letter-spacing:-.3px} .hallRoom span{font-size:12px;color:var(--muted)} .hall{position:relative;height:clamp(236px,39dvh,360px);border-radius:22px;overflow:hidden;background:#17181e;box-shadow:var(--shadow)} .hall::before{content:"";position:absolute;left:0;right:0;top:14px;height:3px;background:#2b2e37;z-index:1} .hall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:#0d0e12;border-top:2px solid #23252d;pointer-events:none} .hallTrack{position:relative;z-index:2;display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 21%} .hallTrack::-webkit-scrollbar{display:none} .slot{appearance:none;border:0;background:none;padding:0;flex:0 0 58%;scroll-snap-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .3s,opacity .3s;transform:scale(.86);opacity:.6;color:#c9ccd6;font:inherit} .slot.center{transform:scale(1);opacity:1} .slot .lamp{position:absolute;top:14px;left:50%;width:12px;height:8px;margin-left:-6px;border-radius:2px;background:#3a3d47} .slot .lamp::after{content:"";position:absolute;left:50%;top:7px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff4d6;box-shadow:0 0 10px 3px rgba(255,244,214,.6)} .slot .cone{position:absolute;top:20px;left:-8%;right:-8%;height:82%;background:linear-gradient(#fff4d61f,#fff4d608);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);pointer-events:none} .slot.center .cone{background:linear-gradient(#fff4d633,#fff4d60d)} .slot.locked .cone{opacity:.35} .hframe{position:relative;width:82%;margin-top:18px;border:6px solid #08090b;background:#08090b;box-shadow:0 14px 30px rgba(0,0,0,.6)} .hframe svg{display:block;width:100%;height:auto} .slot.next .hframe{outline:2px solid #c9a45a;outline-offset:-10px} .cloth{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px)} .slot.locked .hframe svg:first-child{visibility:hidden} .hplaque{font:600 11px/1 "Inter",system-ui,sans-serif;background:#1c1e26;color:#c9ccd6;border-radius:4px;padding:5px 9px;letter-spacing:.02em} .hplaque .off{color:#4a4e5c} .slot.next .hplaque{background:#f3efe4;color:#101116} .rope{position:absolute;bottom:4%;width:86%;height:auto} .hallDots{display:flex;justify-content:center;gap:6px} .hallDots i{width:6px;height:6px;border-radius:50%;background:var(--line)} .hallDots i.got{background:var(--muted)} .hallDots i.on{width:16px;border-radius:9px;background:var(--ink)} .hallPlaque{background:var(--panel);border-radius:16px;padding:10px 14px;box-shadow:0 0 0 1px var(--line);text-align:left} .hallPlaque .t{font:700 15px/1.25 "Inter",system-ui,sans-serif} .hallPlaque .s{font-size:12px;color:var(--muted);margin-top:2px} .hallMode .btn.play{margin-top:2px;padding:14px} .hallMode .btn.play:disabled{opacity:.45}