/* Colour Lab — real paint mixing game (Desktop N Draw / Desktop N Draw Jr) */
.clab{position:fixed;inset:0;z-index:9000;display:none;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
 font-family:inherit;color:#1d1230;
 background:radial-gradient(900px 600px at 0% -10%,#ffe7a8 0%,transparent 55%),radial-gradient(800px 700px at 110% 10%,#f9c9ff 0%,transparent 55%),radial-gradient(900px 700px at 50% 120%,#b9e3ff 0%,transparent 60%),#fff8ef}
.clab.on{display:block;animation:clabIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes clabIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
body.clab-open{overflow:hidden}
.clab *{box-sizing:border-box}
.clab button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.clab .cl-cw{max-width:980px;margin:0 auto;padding:12px 16px 40px}
.clab .cl-ctop{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5;padding:10px 0;background:linear-gradient(#fff8efee,#fff8ef00)}
.clab .cl-clogo{width:46px;height:46px;border-radius:15px;flex:none;display:grid;place-items:center;font-size:24px;
 background:conic-gradient(from 210deg,#ff5f6d,#ffc371,#ffe259,#7be495,#36d1dc,#5b86e5,#b06ab3,#ff5f6d);box-shadow:0 8px 18px -6px #7b3fb080,inset 0 2px 0 #ffffff70}
.clab .cl-clogo span{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:inset 0 -2px 4px #0001}
.clab .cl-ctt{flex:1;min-width:0}
.clab .cl-ctt b{display:block;font-size:clamp(20px,5vw,26px);line-height:1.05;font-weight:900;letter-spacing:-.4px;
 background:linear-gradient(90deg,#e0245e,#ff8a00 30%,#16a34a 60%,#2563eb 80%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.clab .cl-ctt small{display:block;font-size:12.5px;color:#6b5a80;font-weight:600;margin-top:2px}
.clab .cl-cx{width:42px;height:42px;border-radius:14px;border:0;background:#fff;box-shadow:0 6px 16px -8px #3a1d5c55;font-size:20px;color:#3a1d5c}
.clab .cl-ctabs{display:flex;gap:6px;background:#ffffffb0;backdrop-filter:blur(8px);border:1px solid #fff;border-radius:18px;padding:5px;box-shadow:0 10px 26px -18px #3a1d5c70;margin:2px 0 14px}
.clab .cl-ctabs button{flex:1;border:0;background:transparent;border-radius:14px;padding:10px 6px;font-weight:800;font-size:14px;color:#5b4a70;white-space:nowrap}
.clab .cl-ctabs button[aria-selected=true]{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;box-shadow:0 8px 18px -8px #db2777}
.clab .cl-cgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.clab .cl-cgrid>*{min-width:0}
@media(min-width:820px){.clab .cl-cgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.clab .cl-ccard{background:#ffffffd9;backdrop-filter:blur(10px);border:1px solid #fff;border-radius:26px;padding:14px;box-shadow:0 24px 50px -30px #3a1d5c66}
/* the mixing tile */
.clab .cl-tilewrap{position:relative;border-radius:24px;padding:10px;background:linear-gradient(145deg,#ffffff,#efe7f7);box-shadow:inset 0 2px 0 #fff,0 18px 40px -24px #3a1d5c88}
.clab .cl-tile{position:relative;aspect-ratio:1/1;width:100%;border-radius:18px;overflow:hidden;background:#fffdf8;touch-action:none;
 box-shadow:inset 0 0 0 1px #00000010,inset 0 10px 24px -14px #0000002a}
.clab .cl-tile canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.clab .cl-tile .cl-hint{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:#9a8aae;font-weight:700;font-size:15px;pointer-events:none;transition:opacity .4s}
.clab .cl-tile .cl-hint i{font-style:normal;font-size:40px;display:block;margin-bottom:6px;animation:clabBob 1.8s ease-in-out infinite}
@keyframes clabBob{50%{transform:translateY(-6px)}}
.clab .cl-ripple{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid currentColor;pointer-events:none;animation:clabRip .6s ease-out forwards}
@keyframes clabRip{to{transform:scale(4);opacity:0}}
.clab .cl-tools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.clab .cl-tools button{flex:1 1 0;min-width:64px;border:0;border-radius:14px;padding:10px 6px;font-weight:800;font-size:13px;background:#fff;color:#3a1d5c;box-shadow:0 6px 14px -10px #3a1d5c80,inset 0 0 0 1px #ece3f5}
.clab .cl-tools button[aria-pressed=true]{background:#3a1d5c;color:#fff}
.clab .cl-tools .cl-sz{display:flex;gap:4px;flex:1 1 120px;background:#fff;border-radius:14px;padding:4px;box-shadow:inset 0 0 0 1px #ece3f5}
.clab .cl-tools .cl-sz button{box-shadow:none;padding:6px 0;min-width:0}
/* palette of paint blobs */
.clab .cl-pal{display:flex;gap:10px;overflow-x:auto;padding:14px 4px 10px;scrollbar-width:none;scroll-snap-type:x proximity}
.clab .cl-pal::-webkit-scrollbar{display:none}
@media(min-width:820px){.clab .cl-pal{flex-wrap:wrap;overflow:visible}}
.clab .cl-blob{flex:none;width:52px;height:58px;border:0;padding:0;background:transparent;position:relative;scroll-snap-align:start;transition:transform .18s cubic-bezier(.2,.9,.3,1.4)}
.clab .cl-blob i{position:absolute;left:4px;right:4px;top:6px;bottom:2px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:var(--c);
 box-shadow:inset -6px -8px 12px -4px #00000040,inset 5px 6px 10px -4px #ffffff70,0 8px 14px -8px var(--c)}
.clab .cl-blob i:after{content:"";position:absolute;left:22%;top:16%;width:30%;height:22%;border-radius:50%;background:#ffffffc0;filter:blur(1px);transform:rotate(-25deg)}
.clab .cl-blob.cl-light i{box-shadow:inset -6px -8px 12px -4px #00000022,inset 5px 6px 10px -4px #ffffff,0 0 0 1px #e6dcef,0 8px 14px -10px #3a1d5c50}
.clab .cl-blob span{position:absolute;left:-6px;right:-6px;bottom:-16px;font-size:10px;font-weight:700;color:#6b5a80;text-align:center;white-space:nowrap;opacity:0;transition:opacity .2s}
.clab .cl-blob[aria-pressed=true]{transform:translateY(-8px) scale(1.08)}
.clab .cl-blob[aria-pressed=true] span{opacity:1}
.clab .cl-blob[aria-pressed=true]:before{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#3a1d5c}
.clab .cl-finger i{background:linear-gradient(145deg,#fff,#f0e8f8);display:grid;place-items:center;font-style:normal;font-size:24px}
.clab .cl-finger i:after{display:none}
/* result */
.clab .cl-res{display:flex;gap:14px;align-items:center}
.clab .cl-swatch{width:96px;height:96px;flex:none;border-radius:50%;background:var(--c,#fffdf8);position:relative;transition:background .35s;
 box-shadow:inset -10px -12px 18px -6px #00000035,inset 8px 10px 16px -6px #ffffff80,0 16px 30px -14px var(--c,#ccc),0 0 0 6px #fff,0 0 0 7px #ece3f5}
.clab .cl-swatch:after{content:"";position:absolute;left:20%;top:14%;width:28%;height:20%;border-radius:50%;background:#ffffffa8;filter:blur(2px);transform:rotate(-25deg)}
.clab .cl-rinfo{min-width:0;flex:1}
.clab .cl-rinfo small{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;color:#9a6bd0;text-transform:uppercase}
.clab .cl-rname{font-size:22px;font-weight:900;line-height:1.15;margin:2px 0 6px;color:#1d1230}
.clab .cl-recipe{display:flex;flex-wrap:wrap;gap:6px}
.clab .cl-recipe span{display:inline-flex;align-items:center;gap:6px;background:#f6f0fb;border-radius:999px;padding:4px 10px 4px 5px;font-size:12.5px;font-weight:800;color:#3a1d5c}
.clab .cl-recipe span i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset -2px -2px 3px #0003,0 0 0 1px #0001}
.clab .cl-ract{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.clab .cl-btnp{border:0;border-radius:14px;padding:11px 14px;font-weight:900;font-size:14px;color:#fff;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 10px 20px -10px #db2777;flex:1 1 auto}
.clab .cl-btns{border:0;border-radius:14px;padding:11px 14px;font-weight:800;font-size:14px;color:#3a1d5c;background:#fff;box-shadow:inset 0 0 0 1.5px #e4d8f0;flex:1 1 auto}
.clab .cl-hex{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;letter-spacing:.5px}
.clab .cl-vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.clab .cl-vs div{border-radius:16px;padding:10px;background:#f8f4fc;text-align:center;font-size:12px;font-weight:700;color:#5b4a70}
.clab .cl-vs b{display:block;height:46px;border-radius:12px;margin-bottom:6px;background:var(--c);box-shadow:inset 0 -6px 12px -6px #0003}
.clab .cl-vsnote{font-size:12.5px;color:#6b5a80;margin:8px 2px 0;line-height:1.45}
.clab .cl-mine{margin-top:14px}
.clab .cl-mine h4{margin:0 0 8px;font-size:14px;color:#3a1d5c}
.clab .cl-mrow{display:flex;gap:8px;flex-wrap:wrap}
.clab .cl-mrow button{width:38px;height:38px;border-radius:12px;border:0;background:var(--c);box-shadow:inset 0 -5px 8px -4px #0003,0 0 0 2px #fff,0 0 0 3px #eadff4}
.clab .cl-mrow em{font-size:12.5px;color:#9a8aae;font-style:normal}
.clab .cl-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#1d1230;color:#fff;font-weight:800;font-size:14px;border-radius:14px;padding:10px 16px;opacity:0;transition:.3s;z-index:9002;pointer-events:none;max-width:90vw;text-align:center}
.clab .cl-toast.on{opacity:1;transform:translateX(-50%)}
/* challenge */
.clab .cl-target{display:flex;gap:14px;align-items:center}
.clab .cl-target .cl-swatch{width:84px;height:84px}
.clab .cl-lvl{display:flex;gap:6px;margin:0 0 12px}
.clab .cl-lvl button{flex:1;border:0;border-radius:12px;padding:8px 4px;font-weight:800;font-size:13px;background:#fff;color:#5b4a70;box-shadow:inset 0 0 0 1.5px #ece3f5}
.clab .cl-lvl button[aria-pressed=true]{background:#1d1230;color:#fff;box-shadow:none}
.clab .cl-meter{margin-top:12px}
.clab .cl-meter .cl-bar{height:14px;border-radius:999px;background:#efe7f7;overflow:hidden;box-shadow:inset 0 1px 3px #0001}
.clab .cl-meter .cl-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e);transition:width .35s}
.clab .cl-meter p{display:flex;justify-content:space-between;margin:6px 2px 0;font-weight:800;font-size:13px;color:#5b4a70}
.clab .cl-stars{font-size:34px;letter-spacing:4px;text-align:center;margin:6px 0;min-height:44px}
.clab .cl-stars span{display:inline-block;animation:clabPop .5s cubic-bezier(.2,.9,.3,1.6) both}
@keyframes clabPop{from{transform:scale(0) rotate(-40deg)}}
/* quiz */
.clab .cl-qeq{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 6px;font-size:30px;font-weight:900;color:#3a1d5c}
.clab .cl-qeq .cl-swatch{width:78px;height:78px}
.clab .cl-qq{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:repeating-conic-gradient(#f2eaf9 0 25%,#fff 0 50%) 50%/20px 20px;box-shadow:0 0 0 6px #fff,0 0 0 7px #ece3f5}
.clab .cl-qnames{text-align:center;font-weight:800;color:#5b4a70;font-size:14px;margin-bottom:10px}
.clab .cl-qopts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.clab .cl-qopts button{border:0;background:#fff;border-radius:20px;padding:14px 8px 10px;box-shadow:inset 0 0 0 2px #ece3f5;display:grid;place-items:center;gap:8px;font-weight:800;font-size:13px;color:#3a1d5c;transition:transform .15s}
.clab .cl-qopts button b{width:64px;height:64px;border-radius:50%;background:var(--c);box-shadow:inset -8px -10px 14px -6px #0004,inset 6px 8px 12px -6px #fff8}
.clab .cl-qopts button.cl-ok{box-shadow:inset 0 0 0 3px #22c55e;background:#effcf3;transform:scale(1.04)}
.clab .cl-qopts button.cl-no{box-shadow:inset 0 0 0 3px #f43f5e;background:#fff1f3;animation:clabShake .35s}
@keyframes clabShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.clab .cl-qtop{display:flex;justify-content:space-between;font-weight:800;color:#6b5a80;font-size:13px}
.clab .cl-qdots{display:flex;gap:5px;justify-content:center;margin:10px 0 2px}
.clab .cl-qdots i{width:9px;height:9px;border-radius:50%;background:#e9def4}
.clab .cl-qdots i.cl-ok{background:#22c55e}.clab .cl-qdots i.cl-no{background:#f43f5e}.clab .cl-qdots i.cl-cur{background:#7c3aed}
.clab .cl-learn{font-size:13px;color:#5b4a70;line-height:1.5;margin:10px 2px 0}
.clab .cl-confetti{position:fixed;inset:0;pointer-events:none;z-index:9001}
/* kids (Desktop N Draw Jr) */
.clab.kids{background:radial-gradient(800px 600px at 0% 0%,#fff3a0 0%,transparent 55%),radial-gradient(700px 600px at 100% 20%,#d6c4ff 0%,transparent 55%),radial-gradient(800px 600px at 50% 120%,#b6f0c8 0%,transparent 60%),#fffbe6;color:#0A0136}
.clab.kids .cl-ctt b{font-size:clamp(22px,6vw,28px)}
.clab.kids .cl-ctabs button{font-size:15px;padding:12px 4px}
.clab.kids .cl-ctabs button[aria-selected=true]{background:linear-gradient(135deg,#6328B6,#e53935)}
.clab.kids .cl-blob{width:66px;height:74px}
.clab.kids .cl-blob span{font-size:12px;opacity:1;bottom:-18px}
.clab.kids .cl-blob[aria-pressed=true]:before{display:none}
.clab.kids .cl-blob[aria-pressed=true] i{outline:4px solid #6328B6;outline-offset:3px}
.clab.kids .cl-pal{gap:26px 14px;padding-bottom:22px;flex-wrap:wrap;justify-content:center;overflow:visible}
.clab.kids .cl-tools button{font-size:15px;padding:12px 6px}
.clab.kids .cl-rname{font-size:26px}
.clab.kids .cl-btnp{background:linear-gradient(135deg,#6328B6,#e53935);font-size:16px}
@media(prefers-reduced-motion:reduce){.clab *{animation:none!important;transition:none!important}}
/* home / play card that opens the game */
.clab-card{position:relative;overflow:hidden;border-radius:24px;padding:16px;margin:8px 0 18px;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;max-width:620px;
 background:radial-gradient(120% 140% at 0% 0%,#fff5c2 0%,transparent 55%),radial-gradient(120% 140% at 100% 100%,#ffd6f0 0%,transparent 55%),linear-gradient(135deg,#ffffff,#f4ecff);
 border:1px solid #fff;box-shadow:0 22px 44px -26px #7c3aed90,inset 0 1px 0 #fff;color:#1d1230}
.clab-card .clc-art{position:relative;width:118px;height:118px}
.clab-card .clc-art i{position:absolute;width:66px;height:66px;border-radius:50%;mix-blend-mode:multiply;box-shadow:inset -6px -8px 12px -6px #0003,inset 6px 6px 10px -6px #fff9;animation:clcF 4s ease-in-out infinite}
.clab-card .clc-art i:nth-child(1){left:6px;top:8px;background:#FFC61A}
.clab-card .clc-art i:nth-child(2){right:4px;top:22px;background:#1FA6D6;animation-delay:-1.3s}
.clab-card .clc-art i:nth-child(3){left:26px;bottom:2px;background:#F06292;animation-delay:-2.6s}
.clab-card .clc-art b{position:absolute;right:0;bottom:0;background:#1d1230;color:#fff;font-size:11px;font-weight:900;border-radius:999px;padding:4px 8px;letter-spacing:.5px}
@keyframes clcF{50%{transform:translate(3px,-5px) scale(1.04)}}
.clab-card small{display:block;font-size:11px;font-weight:900;letter-spacing:1.4px;color:#db2777}
.clab-card h3{margin:2px 0 4px;font-size:22px;font-weight:900;line-height:1.1;background:linear-gradient(90deg,#e0245e,#ff8a00 35%,#16a34a 65%,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent}
.clab-card p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:#4b3d5e}
.clab-card button{border:0;border-radius:14px;padding:11px 16px;font:inherit;font-weight:900;font-size:14px;color:#fff;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 12px 22px -12px #db2777;cursor:pointer}
@media(max-width:380px){.clab-card{grid-template-columns:90px 1fr}.clab-card .clc-art{transform:scale(.78);transform-origin:left center;width:92px}}
.clab-card.kids{background:radial-gradient(120% 140% at 0% 0%,#fff3a0 0%,transparent 55%),radial-gradient(120% 140% at 100% 100%,#d6c4ff 0%,transparent 55%),#fff;border:3px solid #0A0136;box-shadow:0 5px 0 #0A0136;color:#0A0136}
.clab-card.kids h3{font-size:24px}
.clab-card.kids button{background:linear-gradient(135deg,#6328B6,#e53935);font-size:16px;padding:12px 18px}