/* color-mix.css (26 Oct 2026): Color Mix, the ink kitchen game. The night of the other games; a draw-down card (the target above, your
   mix below, as an ink proof), the can seen from above where the drops land and swirl, the recipe slip, the base ink pots in a row. */
body.page-color-mix,body.page-color-mix main{background:#0e0f11}
body.page-color-mix .header.site-nav,body.page-color-mix .header.site-nav.is-scrolled{background:#0e0f11!important;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:rgba(255,255,255,.08)!important}
body.page-color-mix .site-nav .brand img{content:url(assets/logo-white.png)}
body.page-color-mix .site-nav .nav-links a{color:#e8e8ed}
body.page-color-mix .site-nav .nav-links a[aria-current="page"]{color:#fff}
body.page-color-mix .site-nav .button.small.nav-demo{color:#fff!important;border-color:rgba(255,255,255,.35)!important;background:transparent!important}
body.page-color-mix .site-nav .button.small:not(.nav-demo){background:#fff!important;color:#141416!important;border-color:#fff!important}
body.page-color-mix .site-nav .menu-symbol i{background:#fff}

.cmx{padding:clamp(40px,6vw,88px) var(--pg-gut,24px) clamp(56px,7vw,96px);color:#f5f5f7}
.cmx-head{max-width:1080px;margin:0 auto clamp(24px,3.5vw,40px)}
.cmx-head h1{margin:0;font-size:clamp(52px,7.5vw,104px);line-height:.92;letter-spacing:-.04em;font-weight:600;color:#fff}
.cmx-head h1 span{color:#F50C0C}
.cmx-head p{margin:14px 0 0;max-width:36em;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:#a1a1a6}

.mx{max-width:1080px;margin:0 auto;padding:clamp(14px,2vw,24px);border-radius:28px;background:#16171a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 80px -50px #000}
.mx-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 4px 16px}
.mx-round,.mx-total{margin:0;font-size:14px;color:#a1a1a6;font-variant-numeric:tabular-nums}
.mx-round b,.mx-total b{color:#fff}
.mx-pips{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.mx-pips li{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.mx-pips li.is-on{background:#fff}.mx-pips li.is-done{background:#64A932}

.mx-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(12px,1.6vw,20px)}
/* the draw-down: one card, two inks */
.mx-draw{display:grid;grid-template-rows:1fr 1fr;min-height:clamp(300px,34vw,420px);border-radius:20px;overflow:hidden;background:#f4f3ee;padding:10px;gap:0}
.mx-tgt,.mx-you{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:18px 20px;background:var(--c,#2a2b30);transition:background-color .35s ease,color .35s ease}
.mx-tgt{border-radius:12px 12px 0 0}
.mx-you{border-radius:0 0 12px 12px}
.mx-lab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.mx-tgt b,.mx-you b{font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.01em}
.mx-de{position:absolute;right:16px;top:16px;padding:6px 12px;border-radius:999px;background:rgba(14,15,17,.82);color:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.mx-de[data-ok="y"]{background:#2f8a1f}.mx-de[data-ok="m"]{background:#a86a00}
.mx-de[hidden]{display:none}

/* the can seen from above and the recipe slip */
.mx-side{display:grid;grid-template-rows:auto 1fr;gap:14px;min-width:0}
.mx-can{position:relative;justify-self:center;width:min(100%,200px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#2a2b30 58%,#9a9ca3 60%,#d9dbe0 64%,#7d8087 68%,#3a3b40 70%,transparent 71%)}
.mx-ink{position:absolute;inset:15%;border-radius:50%;transition:background-color .35s ease;box-shadow:inset 0 8px 18px rgba(0,0,0,.35)}
.mx-swirl{position:absolute;inset:15%;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,rgba(255,255,255,.28),transparent 20%,rgba(0,0,0,.18) 45%,transparent 65%,rgba(255,255,255,.2) 85%,transparent)}
.mx-swirl.is-on{animation:cm-swirl 1.1s cubic-bezier(.23,1,.32,1)}
@keyframes cm-swirl{0%{opacity:.9;transform:rotate(0) scale(.6)}100%{opacity:0;transform:rotate(320deg) scale(1)}}
.mx-drop{position:absolute;left:50%;top:-14%;width:14px;height:18px;margin-left:-7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c,#fff);opacity:0;pointer-events:none}
.mx-drop.is-on{animation:cm-drop .45s cubic-bezier(.55,0,.9,.5)}
@keyframes cm-drop{0%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(110px) scale(.8)}100%{opacity:0;transform:translateY(118px) scale(.4)}}
.mx-recipe{min-width:0;padding:14px 16px;border-radius:16px;background:#0f1012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mx-rk{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8e8e93}
.mx-rl{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.mx-rl li{display:grid;grid-template-columns:14px minmax(0,1fr) auto auto 28px;align-items:center;gap:10px;font-size:14px;color:#e8e8ed;font-variant-numeric:tabular-nums}
.mx-rl i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.mx-rl i.is-ext,.mx-pot i.is-ext{background:repeating-linear-gradient(45deg,#e9e8e2 0 3px,#cfcdc5 3px 6px)}
.mx-rl b{font-weight:600}
.mx-rl em{font-style:normal;color:#8e8e93;font-size:13px;min-width:5.5em;text-align:right}
.mx-rl button{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px;line-height:1;cursor:pointer}
.mx-rl button:hover{background:rgba(255,255,255,.16)}
.mx-empty{margin:0;font-size:14px;color:#8e8e93}
.mx-empty[hidden]{display:none}

/* the base ink pots */
.mx-inks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none}
.mx-inks li{margin:0;min-width:0}
.mx-pot{display:grid;justify-items:center;gap:8px;width:100%;padding:12px 4px 10px;border:0;border-radius:16px;background:rgba(255,255,255,.04);color:#c9cbd1;font:inherit;font-size:12.5px;line-height:1.2;cursor:pointer;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background-color .2s ease,transform .14s cubic-bezier(.23,1,.32,1)}
.mx-pot i{width:clamp(30px,3.6vw,44px);aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),0 0 0 3px #2a2b30,0 0 0 4px rgba(255,255,255,.14)}
.mx-pot:hover{background:rgba(255,255,255,.08);color:#fff}
.mx-pot:active{transform:scale(.95)}
.mx-pot:focus-visible{outline:2px solid #fff;outline-offset:2px}

.mx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.mx-acts[hidden]{display:none}
.mx-sp{flex:1}
.mx-ghost{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;color:#a1a1a6;font:inherit;font-size:15px;cursor:pointer}
.mx-ghost:hover{color:#fff}
.mx-btn{min-height:48px;padding:0 24px;border:0;border-radius:999px;background:#fff;color:#141416;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),opacity .2s}
.mx-btn.mx-sec{background:rgba(255,255,255,.1);color:#fff}
.mx-btn:active{transform:scale(.96)}
.mx-btn:disabled{opacity:.35;cursor:default;transform:none}
.mx-btn:focus-visible,.mx-ghost:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mx-res{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-top:16px}
.mx-res[hidden]{display:none}
.mx-pct{margin:0;font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.mx-pct span{font-size:20px;color:#a1a1a6;margin-left:2px}
.mx-verdict{margin:0;font-size:15px;color:#a1a1a6}
.mx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mx[data-state="end"] .mx-top,.mx[data-state="end"] .mx-stage,.mx[data-state="end"] .mx-inks,.mx[data-state="end"] .mx-acts,.mx[data-state="end"] .mx-res{display:none}
.mx-end{display:grid;justify-items:center;gap:10px;text-align:center;padding:clamp(12px,3vw,32px) 0}
.mx-end-k{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#a1a1a6}
.mx-end-num{margin:0;font-size:clamp(72px,10vw,120px);line-height:.9;font-weight:600;letter-spacing:-.05em;color:#fff}
.mx-end-num span{font-size:.35em;color:#a1a1a6}
.mx-end-line{margin:0;font-size:17px;color:#a1a1a6;max-width:30em}
.mx-recap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%;max-width:700px;margin:18px 0 0;padding:0;list-style:none}
.mx-recap li{display:grid;justify-items:center;gap:4px;font-size:13px;color:#a1a1a6}
.mx-recap b{color:#fff;font-size:15px}.mx-recap em{font-style:normal;font-size:12px}
.mx-rc{width:100%;max-width:96px;aspect-ratio:1;border-radius:14px;background:linear-gradient(var(--a) 50%,var(--b) 50%)}
.mx-link{margin-top:8px;padding:0;border:0;background:none;color:#fff;font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
@media (max-width:860px){
  .mx-stage{grid-template-columns:1fr}
  .mx-side{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto;align-items:start}
  .mx-can{width:120px}
  .mx-inks{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mx-pips{display:none}
  .mx-recap{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
}
@media (max-width:520px){.mx-res{grid-template-columns:auto 1fr}.mx-res .mx-btn{grid-column:1/-1}.mx-sp{display:none}.mx-acts .mx-btn{flex:1}}
@media (prefers-reduced-motion:reduce){.mx-tgt,.mx-you,.mx-ink,.mx-pot,.mx-btn{transition:none}}
@media (max-width:860px){
  .mx-side{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .mx-can{width:96px}
  .mx-recipe{padding:12px}
  .mx-rl li{grid-template-columns:12px minmax(0,1fr) auto 26px;gap:8px;font-size:13px}
  .mx-rl i{width:12px;height:12px}
  .mx-rl em{display:none}
  .mx-rl button{width:26px;height:26px}
  .mx-draw{min-height:260px}
}

/* Correct with ColorLoop (27 Oct 2026): the five dots of ColorLoop on the button; the chip says what ColorLoop added */
.mx-btn.mx-lp{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#141416}
.mx-dots{display:inline-flex;gap:3px}
.mx-dots i{width:7px;height:7px;border-radius:50%;background:#F50C0C}
.mx-dots i:nth-child(2){background:#FAA1DB}.mx-dots i:nth-child(3){background:#19AAE3}.mx-dots i:nth-child(4){background:#64A932}.mx-dots i:nth-child(5){background:#FBCB05}
.mx-acts .mx-btn[data-approve]{background:#64A932;color:#fff}
.mx-fixed{position:absolute;left:16px;top:16px;max-width:calc(100% - 140px);padding:6px 12px;border-radius:999px;background:rgba(14,15,17,.82);color:#fff;font-size:13px;font-weight:500}
.mx-fixed[hidden]{display:none}
@media (max-width:520px){.mx-btn.mx-lp{flex-basis:100%;justify-content:center}}

/* v2 (27 Oct 2026, Hugues: nothing moves when you add ink; the two colors big, no white frame; on a phone the pots stay put) */
.mx-draw{padding:0;background:none;min-height:clamp(320px,38vw,460px);border-radius:20px}
.mx-tgt{border-radius:20px 20px 0 0}.mx-you{border-radius:0 0 20px 20px}
.mx-side{grid-template-rows:auto minmax(0,1fr)}
.mx-recipe{height:clamp(170px,16vw,220px);overflow-y:auto;overscroll-behavior:contain}
.mx-dock{margin-top:16px}
.mx-dock .mx-inks{margin-top:0}
@media (max-width:860px){
  .mx{padding:12px 12px 0;border-radius:22px}
  .mx-top{margin:0 2px 10px}
  .mx-draw{min-height:0;height:min(40svh,340px)}
  .mx-tgt,.mx-you{padding:14px 16px}
  .mx-side{grid-template-columns:84px minmax(0,1fr);gap:10px;margin-top:10px}
  .mx-can{width:84px}
  .mx-recipe{height:104px;padding:10px 12px}
  .mx-rk{margin-bottom:6px}
  /* the dock: pots and actions stuck to the bottom of the screen */
  .mx-dock{position:sticky;bottom:0;z-index:5;margin:12px -12px 0;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(22,23,26,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 22px 22px}
  .mx-inks{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .mx-pot{gap:4px;padding:6px 2px;font-size:11px;border-radius:12px}
  .mx-pot i{width:30px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 0 0 2px #2a2b30,0 0 0 3px rgba(255,255,255,.14)}
  .mx-acts{gap:6px;margin-top:8px}
  .mx-ghost{min-height:40px;padding:0 10px;font-size:14px}
  .mx-btn{min-height:44px;padding:0 16px;font-size:15px}
  .mx-res{margin-top:8px}
}
@media (max-width:520px){
  .mx-acts{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"fix fix" "measure approve" "undo clear"}
  .mx-acts [data-fix]{grid-area:fix}.mx-acts [data-measure]{grid-area:measure}.mx-acts [data-approve]{grid-area:approve}
  .mx-acts [data-undo]{grid-area:undo}.mx-acts [data-clear]{grid-area:clear}
  .mx-acts .mx-ghost{min-height:30px}
  .mx-sp{display:none}
}

/* v3: Undo and Empty in the recipe header; one row of actions; a compact dock on phones */
.mx-rk{display:flex;align-items:center;gap:4px}
.mx-rk span{flex:1}
.mx-rk .mx-ghost{min-height:28px;padding:0 8px;font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:#a1a1a6;border-radius:999px}
.mx-rk .mx-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.mx-acts{justify-content:flex-end}
.mx-acts [data-fix]{margin-right:auto}
@media (max-width:860px){
  .mx-draw{height:min(32svh,270px)}
  .mx-pot{padding:4px 2px;font-size:10px}
  .mx-pot i{width:26px}
  .mx-acts{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:none;gap:6px}
  .mx-acts [data-fix]{grid-area:auto;margin:0;padding:0 12px;font-size:14px}
  .mx-acts [data-measure],.mx-acts [data-approve]{grid-area:auto}
  .mx-btn.mx-lp{flex-basis:auto;gap:6px}
  .mx-dots i{width:5px;height:5px}
  .mx-recipe{height:92px}
}
@media (max-width:400px){.mx-acts [data-fix]{font-size:13px}.mx-acts .mx-btn{padding:0 12px}}
@media (max-width:860px){.mx-lp-l{display:none}body.page-color-mix .chat-widget{display:none}.mx-acts [data-fix]{white-space:nowrap}}

/* v4 (27 Oct 2026, Hugues): two buttons, the same size: Find the solution (ColorLoop) and Validate */
.mx-acts{display:grid!important;grid-template-columns:1fr 1fr;grid-template-areas:none!important;gap:10px}
.mx-acts .mx-btn{width:100%;margin:0!important;justify-content:center;min-height:52px;font-size:16px;padding:0 14px;white-space:nowrap}
.mx-acts [data-fix]{grid-area:auto!important}
@media (max-width:860px){.mx-acts .mx-btn{min-height:50px;font-size:15px}.mx-dots i{width:6px;height:6px}}

/* v5 (27 Oct 2026): room between the pots and the two buttons; Find the solution on the left */
.mx-acts{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:860px){.mx-acts{margin-top:12px;padding-top:12px}}
.mx-fixed{max-width:calc(100% - 120px)}

/* v6 (27 Oct 2026): Find the solution on black; v7 the result as on dialed.gg: the score big in the corner of the draw-down */
.mx-btn.mx-lp{background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.mx-btn.mx-lp:hover{background:#0a0a0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.mx-draw{position:relative}
.mx-big{position:absolute;right:22px;top:14px;z-index:3;margin:0;color:#fff;font-size:clamp(64px,8vw,104px);line-height:1;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;text-shadow:0 2px 24px rgba(0,0,0,.18)}
.mx-big span{font-size:.38em;margin-left:2px;opacity:.75}
.mx-big[hidden]{display:none}
.mx[data-state="result"] .mx-res .mx-pct{display:none}
.mx[data-state="result"] .mx-res{grid-template-columns:1fr auto}
@media (max-width:860px){.mx-big{right:16px;top:10px}}
.mx-acts[hidden]{display:none!important}
.mx-draw:has(.mx-reveal.is-roll) .mx-de,.mx-draw:has(.mx-reveal.is-boom) .mx-de{visibility:hidden}

/* v8 (27 Oct 2026, Hugues: make the end of a color obvious): ΔE big under the score, Next color on the card, the pots fade */
.mx-big{display:grid;justify-items:end;gap:8px}
.mx-big-n{margin:0;font-size:inherit;line-height:1}
.mx-big-de{margin:0;padding:8px 16px;border-radius:999px;background:#F50C0C;color:#fff;font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:none}
.mx-big-de[data-ok="y"]{background:#2f8a1f}.mx-big-de[data-ok="m"]{background:#b07a00}
.mx-go{position:absolute;right:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:999px;background:#fff;color:#141416;
  font:inherit;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);transition:transform .16s cubic-bezier(.23,1,.32,1),gap .2s cubic-bezier(.23,1,.32,1)}
.mx-go span{font-size:20px;line-height:1}
.mx-go:hover{gap:14px}.mx-go:active{transform:scale(.96)}
.mx-go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mx-go[hidden]{display:none}
.mx[data-state="result"] .mx-de,.mx[data-state="result"] .mx-res .mx-btn{display:none}
.mx[data-state="result"] .mx-res{grid-template-columns:1fr}
.mx[data-state="result"] .mx-inks,.mx[data-state="result"] .mx-side{opacity:.35;pointer-events:none;transition:opacity .3s ease}
@media (max-width:860px){.mx-go{right:12px;bottom:12px;min-height:46px;padding:0 18px;font-size:15px}.mx-big-de{font-size:18px;padding:6px 12px}}
.mx-big .mx-big-n,.mx-big .mx-big-n b,.mx-big .mx-big-n span{color:inherit!important}
.mx-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:1100;pointer-events:none}   /* above the full screen on a phone (7 Nov 2026) */

/* Play with friends (27 Oct 2026) and the average ΔE at the end */
.mx-who{color:#fff;font-weight:600}
.mx-more{margin:14px 0 0;text-align:center}
.mx[data-state="end"] .mx-more{display:none}
.mx-end-de{margin:0;font-size:15px;color:#a1a1a6;font-variant-numeric:tabular-nums}.mx-end-de b{color:#fff;font-weight:600}
.mx-fr{color:#f5f5f7}
.mx-fr .fr-btn{background:#fff;color:#141416}
.mx-frt-w{width:100%;max-width:640px;overflow-x:auto}
.mx-frt{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;color:#d1d1d6}
.mx-frt th,.mx-frt td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;font-weight:500}
.mx-frt thead th{font-size:12px;color:#a1a1a6}.mx-frt thead th span{margin-left:6px}
.mx-frt tbody th{display:flex;align-items:center;gap:8px;color:#fff}
.mx-frt td i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;background:var(--g);vertical-align:-1px}
.mx-frs{flex:none;width:14px;height:14px;border-radius:4px;background:var(--c)}

/* fourteen base inks (27 Oct 2026, FX): two rows of seven on every screen; the names stay readable on a phone */
/* 30 Oct 2026: fifteen pots (Blue 072 added), eight per row */
.mx-inks{grid-template-columns:repeat(8,minmax(0,1fr))!important}
.mx-pot span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.mx-inks{gap:4px 3px!important}.mx-pot{padding:5px 1px 4px!important;font-size:9.5px!important;letter-spacing:-.1px}.mx-pot i{width:28px!important}}
@media (max-width:560px){.mx-pot span{white-space:normal;overflow:visible;text-overflow:clip;min-height:2.2em;line-height:1.1;font-size:9.5px;letter-spacing:-.2px;hyphens:manual;text-align:center}}
/* phones: the recipe shows three inks at once, compact rows (27 Oct 2026) */
@media (max-width:560px){
  .mx .mx-recipe{height:128px}
  .mx .mx-draw{height:min(36svh,320px)}
  .mx .mx-rl{gap:2px}
  .mx .mx-rl li{min-height:26px}
  .mx .mx-rl button{width:24px;height:24px;min-height:0;align-self:center}
}
/* 30 Oct 2026 (FX: "for UPS the list is long, the window must adapt; the minus buttons are oval, not round"): the recipe shows four
   inks at once and nothing moves when ink is added; past that it scrolls, with a dark scrollbar. The minus buttons are round (the
   site's 44px button height made them oval). */
.mx .mx-rl button{min-height:0;aspect-ratio:1;align-self:center;justify-self:end}
.mx .mx-recipe{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
@media (min-width:861px){
  .mx-can{width:clamp(120px,15vw,200px)}
  .mx-recipe{height:auto;contain:size}   /* fills the height the draw-down leaves under the can */
}
@media (max-width:860px){
  .mx .mx-recipe{height:184px}
  .mx .mx-rl{gap:2px}
  .mx .mx-rl li{min-height:26px}
}
@media (max-width:560px){.mx .mx-draw{height:min(32svh,290px)}}
/* 30 Oct 2026 (FX): the clock on the target, sixty seconds from the first drop, red for the last ten; the first measure says what is
   off and stays on the mix ("Before:" once the mix changes); Calculate formula turns red and asks before it costs the color */
.mx-clock{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(14,15,17,.82);color:#fff;font-size:14px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;transition:background-color .2s ease,opacity .2s ease}
.mx-tgt .mx-clock b{font-size:inherit;font-weight:inherit;letter-spacing:0}
.mx-clock svg{width:18px;height:18px;transform:rotate(-90deg)}
.mx-clock circle{fill:none;stroke-width:3}
.mx-ck-bg{stroke:rgba(255,255,255,.22)}
.mx-ck-fg{stroke:#fff;stroke-dasharray:44 44;stroke-dashoffset:calc(44px * (1 - var(--k,1)));transition:stroke-dashoffset .2s linear}
.mx-clock[data-idle]{opacity:.72}
.mx-clock[data-low="y"]{background:#F50C0C}
.mx-clock[data-low="y"] svg{animation:mx-beat 1s cubic-bezier(.23,1,.32,1) infinite}
@keyframes mx-beat{0%,100%{scale:1}14%{scale:1.2}}
.mx[data-state="result"] .mx-clock{display:none}
.mx-de[data-old]{opacity:.7}
.mx-btn.mx-lp.is-armed,.mx-btn.mx-lp.is-armed:hover{background:#F50C0C;box-shadow:none}
.mx-btn.mx-lp.is-armed .mx-dots{display:none}
@media (max-width:560px){.mx-clock{font-size:13px;padding:5px 10px 5px 7px}.mx-clock svg{width:16px;height:16px}.mx-de{font-size:13px;padding:5px 10px}}
@media (prefers-reduced-motion:reduce){.mx-ck-fg,.mx-clock{transition:none}.mx-clock[data-low="y"] svg{animation:none}}
html[data-motion="paused"] .mx-ck-fg,html[data-motion="paused"] .mx-clock{transition:none}
html[data-motion="paused"] .mx-clock[data-low="y"] svg{animation:none}
/* phones: Calculate formula and Final measure side by side in 300px (14px, tighter padding, smaller dots; no dots under 370px) */
@media (max-width:560px){
  .mx .mx-acts{gap:8px}
  .mx .mx-acts .mx-btn{padding:0 10px;font-size:14px}
  .mx .mx-btn.mx-lp{gap:6px}
  .mx .mx-acts .mx-dots{gap:2px}
  .mx .mx-acts .mx-dots i{width:5px;height:5px}
}
@media (max-width:370px){.mx .mx-btn.mx-lp .mx-dots{display:none}}
/* Play with friends, Pass the can (31 Oct 2026, FX): one can from player to player, thirty seconds a turn. Measure alone (no Calculate
   formula); the player's dot before the name and the colors won top right; the drops of the turn marked +N, the only ones that come
   back out; the winner's name big on the draw-down; the recipe stays readable while the can waits for the next player */
.mx[data-mode="relay"] .mx-acts{grid-template-columns:1fr}
.mx[data-mode="relay"] .mx-acts [data-fix]{display:none}
.mx[data-mode="relay"] .mx-acts [data-approve]{grid-area:auto}
.mx-who .fr-dot{display:inline-block;margin-right:6px;vertical-align:-1px}
.mx-total .mx-sb{display:inline-flex;align-items:center;gap:6px;margin-left:12px}
.mx-mine{margin-left:4px;font-size:12px;font-weight:600;color:#9fd18b;font-variant-numeric:tabular-nums}
.mx-big.is-name{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.03em}
.mx-big.is-name .mx-big-n span{display:none}
.mx-rk .mx-ghost:disabled{opacity:.35;cursor:default;background:none}
.mx[data-mode="relay"][data-state="result"] .mx-side{opacity:1}
.mx-frt td i.fr-dot{background:var(--p)}
.mx-frt td small{margin-left:6px;font-size:12px;color:#8e8e93}
.mx[data-state="end"] .mx-acts{display:none!important}   /* behind the pass, setup and end screens (the grid!important of v4 showed them) */
/* while the can waits for the next player: no recipe buttons (nothing to press), and on phones the button with the name takes the place
   of the mix label it would cover */
.mx[data-mode="relay"][data-state="result"] .mx-rl button,.mx[data-mode="relay"][data-state="result"] .mx-rk .mx-ghost{visibility:hidden}
@media (max-width:560px){.mx[data-mode="relay"][data-state="result"] .mx-you .mx-lab,.mx[data-mode="relay"][data-state="result"] .mx-you [data-recipe-short]{visibility:hidden}}
/* phones: the colors of a Pass the can game fit the screen, names on two lines when long, the turn under the winner */
@media (max-width:560px){
  .mx-frt{font-size:13px}
  .mx-frt th,.mx-frt td{padding:8px 6px}
  .mx-frt th{white-space:normal}
  .mx-frt td small{display:block;margin:2px 0 0}
}
.mx-frt tbody th{display:table-cell}   /* the row line under the color when a row grows; the swatch and name sit in .mx-frc */
.mx-frc{display:flex;align-items:center;gap:8px}
.mx-frw{white-space:nowrap}
/* four players and long names on a phone: the colors won go whole to a second line, on the right, instead of breaking both halves */
.mx[data-mode="relay"] .mx-top{flex-wrap:wrap;row-gap:6px}
.mx[data-mode="relay"] .mx-round,.mx[data-mode="relay"] .mx-total{white-space:nowrap}
.mx[data-mode="relay"] .mx-total{margin-left:auto}
/* characters (31 Oct 2026, FX): the player's character before the name, in the colors won, on the draw-down when a turn ends (happy
   or surprised), and the winner above the standings (.fr-crown, cg-friends.css) */
.mx-who .fr-av{width:24px;height:24px;margin-right:6px;vertical-align:-7px}
.mx-total .mx-sb .fr-av{width:22px;height:22px}
.mx-big-av{margin:0}
.mx-big .fr-av{width:64px;height:64px;margin:0;opacity:1;font-size:inherit}
.mx-big .fr-av img{filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}   /* on the target's color */
.mx-frt .fr-av{width:20px;height:20px;margin-right:6px}
@media (max-width:560px){.mx-big .fr-av{width:52px;height:52px}.mx-who .fr-av{width:22px;height:22px;margin-right:5px}.mx-total .mx-sb .fr-av{width:20px;height:20px}.mx-total .mx-sb{margin-left:8px;gap:4px}}
@media (max-width:560px){.mx-fr .fr-standings li{gap:8px;padding:12px 14px}.mx-fr .fr-standings .fr-av{width:24px;height:24px}.mx-fr .fr-standings b{font-size:16px}}   /* the names fit next to the characters */
/* the characters move (31 Oct 2026, FX: "can you animate them? when we click on them, when they lose or win"), in the site's agent
   language (agents.css), from the floor with squash and stretch: a tap makes any character hop (fr-hop, cg-friends.css); a won color, a
   double hop with the happy face, and the winner again above the standings; a miss, a shiver and a slump with the surprised face.
   Nothing moves with reduced motion or the global pause: the faces still tell it */
.mx .fr-av{transform-origin:50% 100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mx .fr-av.is-win{animation:mx-av-win 1.15s cubic-bezier(.33,.9,.4,1) .15s both}
.mx .fr-crown .fr-av.is-win{animation-delay:.45s;animation-iteration-count:2}
.mx-big-av{padding-top:12px}   /* room for the jump inside the draw-down, which clips its corners */
.mx .fr-av.is-oops{animation:mx-av-oops .9s cubic-bezier(.33,.9,.4,1) .1s both}
.mx .fr-av.is-hop{animation:fr-hop .8s cubic-bezier(.33,.9,.4,1) both}
@keyframes mx-av-win{0%{transform:none}10%{transform:scale(1.12,.86)}30%{transform:translateY(-26%) scale(.92,1.1) rotate(-6deg)}50%{transform:translateY(0) scale(1.1,.9)}
  64%{transform:translateY(-14%) scale(.96,1.05) rotate(5deg)}80%{transform:translateY(0) scale(1.05,.95)}90%{transform:scale(.99,1.01)}100%{transform:none}}
@keyframes mx-av-oops{0%{transform:none}12%{transform:scale(1.06,.94)}24%{transform:translateX(-7%) rotate(-7deg)}36%{transform:translateX(6%) rotate(6deg)}
  48%{transform:translateX(-4%) rotate(-4deg)}60%{transform:translateX(2%) rotate(2deg) scale(1.04,.92)}78%{transform:scale(1.08,.88)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.mx .fr-av.is-win,.mx .fr-av.is-oops,.mx .fr-av.is-hop{animation:none}}
html[data-motion="paused"] .mx .fr-av.is-win,html[data-motion="paused"] .mx .fr-av.is-oops,html[data-motion="paused"] .mx .fr-av.is-hop{animation:none}
/* the ways into Play with friends (31 Oct 2026, FX: "Play with friends is hard to see; a sticker, Better with friends"): a yellow
   sticker by the title, two agents peeking out of it, that pops in once; a real button under the game; at the end of a solo game,
   Challenge a friend (a link: the same five colors, the score to beat) beside Pass the can, and the result of a challenge on top */
.cmx-head{position:relative}
.mx-st{position:absolute;right:-14px;bottom:-62px;z-index:4;display:grid;place-items:center;width:128px;height:128px;padding:0;border:0;background:none;color:#141416;cursor:pointer;
  transform:rotate(9deg);filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));-webkit-tap-highlight-color:transparent;animation:mx-st-in .7s cubic-bezier(.33,.9,.4,1) 1s both}
.mx-st[hidden]{display:none}
.mx-st::before{content:'';position:absolute;inset:0;background:#FBCB05;clip-path:polygon(50.0% 0.0%,60.1% 5.6%,71.7% 5.0%,78.4% 14.4%,89.1% 18.8%,91.0% 30.3%,98.7% 38.9%,95.5% 50.0%,98.7% 61.1%,91.0% 69.7%,89.1% 81.2%,78.4% 85.6%,71.7% 95.0%,60.1% 94.4%,50.0% 100.0%,39.9% 94.4%,28.3% 95.0%,21.6% 85.6%,10.9% 81.2%,9.0% 69.7%,1.3% 61.1%,4.5% 50.0%,1.3% 38.9%,9.0% 30.3%,10.9% 18.8%,21.6% 14.4%,28.3% 5.0%,39.9% 5.6%)}
.mx-st-t{position:relative;display:grid;gap:3px;margin-top:-20px;font-size:15px;font-weight:700;line-height:1.05;letter-spacing:-.01em;text-align:center}
.mx-st-t small{font-size:11px;font-weight:600;opacity:.72}
.mx-st-f{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center}
.mx-st-f img{width:40px;height:36px;object-fit:contain;margin:0 -6px}
.mx-st:hover{animation:mx-st-wiggle .6s cubic-bezier(.33,.9,.4,1)}
.mx-st:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:50%}
@keyframes mx-st-in{0%{transform:rotate(-30deg) scale(.3);opacity:0}60%{transform:rotate(14deg) scale(1.08);opacity:1}100%{transform:rotate(9deg) scale(1)}}
@keyframes mx-st-wiggle{0%,100%{transform:rotate(9deg)}25%{transform:rotate(2deg) scale(1.05)}50%{transform:rotate(14deg) scale(1.05)}75%{transform:rotate(6deg)}}
@media (max-width:860px){.mx-st{width:108px;height:108px;bottom:-52px;right:-8px}.mx-st-t{font-size:13px;margin-top:-18px}.mx-st-t small{font-size:10px}.mx-st-f img{width:34px;height:30px}}
@media (max-width:560px){.mx-st{width:88px;height:88px;top:-6px;bottom:auto;right:-6px}.mx-st-t{font-size:11px;margin-top:-16px}.mx-st-t small{font-size:9px}.mx-st-f img{width:28px;height:25px;margin:0 -5px}}
.mx-friends{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px 0 12px;border:0;border-radius:999px;background:#fff;color:#141416;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  transition:transform .16s cubic-bezier(.23,1,.32,1)}
.mx-friends:active{transform:scale(.97)}
.mx-friends:focus-visible{outline:2px solid #19AAE3;outline-offset:3px}
.mx-friends small{font-size:13px;font-weight:500;color:#6e6e73}
.mx-faces{display:flex;padding-right:2px}
.mx-faces img{width:30px;height:28px;object-fit:contain;margin-right:-9px}
@media (max-width:420px){.mx-friends small{display:none}}
.mx-vs{margin:0 4px 12px;padding:10px 14px;border-radius:12px;background:rgba(251,203,5,.12);color:#FBCB05;font-size:15px;font-weight:600;line-height:1.35}
.mx-vs[hidden],.mx[data-state="end"] .mx-vs{display:none}
.mx-vs-r{margin:0 0 4px;font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;color:#fff}
.mx-vs-r[data-ok="y"]{color:#9fd18b}.mx-vs-r[data-ok="n"]{color:#ff9b8f}
.mx-social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px 0 2px}
.mx-end .mx-ch{min-height:50px;background:#fff;color:#141416}
.mx-share{width:min(100%,440px);padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px}
@media (prefers-reduced-motion:reduce){.mx-st,.mx-st:hover{animation:none}.mx-friends{transition:none}}
html[data-motion="paused"] .mx-st,html[data-motion="paused"] .mx-st:hover{animation:none}
@media (max-width:560px){.cmx-head p{padding-right:84px}}   /* phones: the subtitle wraps before the sticker */
/* the color of the day (31 Oct 2026, FX): a chip under the title (the number, Play or the result, the streak); one color with the solo
   rules, then a result to share and the time to the next color. Badges: the five costumes under the end of a game, won ones in color,
   the new ones hop; the line under them says what is new, or the next badge and how to win it */
.mx-day{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:16px;padding:8px 16px 8px 10px;border:1px solid rgba(251,203,5,.45);border-radius:999px;background:rgba(251,203,5,.08);
  color:#f5f5f7;font:inherit;font-size:15px;line-height:1.3;text-align:left;cursor:pointer;transition:background-color .2s ease}
.mx-day:hover{background:rgba(251,203,5,.16)}
.mx-day:focus-visible{outline:2px solid #FBCB05;outline-offset:3px}
.mx-day b{color:#fff;font-weight:600}
.mx-day em{font-style:normal;font-weight:600;color:#FBCB05}
.mx-day small{font-size:13px;color:#a1a1a6}
.mx-day-dot{flex:none;width:14px;height:14px;border-radius:50%;background:conic-gradient(#F50C0C,#FAA1DB,#19AAE3,#64A932,#FBCB05,#F50C0C)}
.mx[data-mode="daily"] .mx-pips,.mx[data-mode="daily"] .mx-of{display:none}
.mx-day-sw{display:flex;align-items:center;gap:12px;margin:8px 0 0;color:#fff;font-size:17px;font-weight:600}
.mx-day-sw .mx-rc{flex:none;width:56px}
.mx-day-streak{margin:0;color:#FBCB05;font-weight:600}
.mx-day-next{margin:2px 0 0;color:#a1a1a6;font-size:14px}
.mx-badges{width:100%;max-width:560px;margin:18px 0 6px}
.mx-badges ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.mx-badges li{display:grid;justify-items:center;gap:6px;color:#6e6e73;font-size:12px;line-height:1.2;text-align:center}
.mx-badges img{width:54px;height:48px;object-fit:contain;filter:grayscale(1) brightness(.6);opacity:.45;transform-origin:50% 100%}
.mx-badges li.is-on{color:#f5f5f7}
.mx-badges li.is-on img{filter:none;opacity:1}
.mx-badges li.is-new img{animation:mx-av-win 1.15s cubic-bezier(.33,.9,.4,1) .7s both}
.mx-badges b{font-weight:600}
.mx-badges p{margin:12px 0 0;color:#a1a1a6;font-size:14px;line-height:1.4}
.mx-fr .mx-badges{max-width:460px}
@media (max-width:560px){.mx-badges img{width:44px;height:40px}.mx-badges li{font-size:11px}.mx-day{font-size:14px}}
@media (prefers-reduced-motion:reduce){.mx-badges li.is-new img{animation:none}.mx-day{transition:none}}
html[data-motion="paused"] .mx-badges li.is-new img{animation:none}

/* ---------------------------------------------------------------- on a phone, a web app (7 Nov 2026, FX; game-app.js and game-app.css)
   The game fills the screen: the draw-down takes the room left, the can and the recipe under it, the inks and actions in the dock at
   the bottom, Play with friends last. */
[data-color-mix].ga-on{background:#0e0f11;color:#f5f5f7}
.ga-on .mx{flex:1 0 auto;display:flex;flex-direction:column;width:100%;max-width:none;padding:10px 10px 0;margin:0}
.ga-on .mx-top{margin:0 2px 8px}
.ga-on .mx-stage{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.ga-on .mx-draw{flex:1 1 0;height:auto;min-height:150px}
.ga-on .mx-side{flex:none}
.ga-on .mx-more{margin:10px 0 0}
.ga-on .mx-end{flex:none}
.ga-on .mx .mx-recipe{height:118px}
.ga-on .mx-more{display:none}   /* in the bar instead (game-app.js) */
.ga-on .mx-dock{margin-top:10px}
@media (max-height:700px){.ga-on .mx-draw{min-height:120px}.ga-on .mx-top{margin-bottom:6px}}

/* Play again under the score (9 Nov 2026, FX: the replay button was hard to find) */
.mx-replay{margin:18px 0 6px}
.mx-end .mx-replay .fr-btn{background:#fff;color:#141416}