/* colour.css — the colouring activity. */
.cl{ padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,90px) }
.cl-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:clamp(18px,2.6vw,32px) }
.cl-head .pr-switch{ flex:0 1 auto; min-width:0; max-width:100% }
.cl h2{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 96; font-size:clamp(1.9rem,4vw,3.2rem); letter-spacing:-.01em; line-height:1.05; margin:0 0 .3em; max-width:none }
.cl .lede{ margin:0; max-width:56ch }
.cl-stage{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(22px,3.4vw,52px); align-items:center }
.cl-sheet{ background:#fff; border:3px solid var(--ink); border-radius:24px; box-shadow:var(--sh-sticker); padding:clamp(16px,2.4vw,32px); display:grid; place-items:center }
.cl-flower{ width:min(100%,520px); height:auto; display:block; touch-action:none }
.cl-flower [data-petal]{ cursor:pointer; transition:fill .18s var(--ease-out) }
.cl-flower [data-petal]:hover{ filter:brightness(.96) }
.cl-flower [data-petal]:focus-visible{ outline:none; stroke:var(--ink); stroke-width:9 }
.cl-flower .cl-num{ font-family:var(--font-display); font-weight:600; font-size:15px; fill:var(--ink); pointer-events:none; text-anchor:middle; dominant-baseline:central }
/* the paints */
.cl-palette{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; list-style:none; margin:0; padding:0 }
.cl-paint{ display:flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill); box-shadow:var(--sh-chip); cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:.84rem; text-align:left; color:var(--ink); transition:transform var(--dur-fast) var(--ease-out) }
.cl-paint:hover{ transform:translateY(-2px) }
.cl-paint[aria-pressed="true"]{ background:var(--paint); box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px var(--ink), var(--sh-chip) }
.cl-paint[aria-pressed="true"] .cl-paint__blob{ background:#fff }
.cl-paint__blob{ width:20px; height:20px; flex:none; background:var(--paint); border:2px solid var(--ink); border-radius:56% 44% 48% 52% / 52% 56% 44% 48% }
.cl-tools{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.cl-tools .btn{ font-size:.92rem }
.cl-status{ margin:10px 0 0; font-size:var(--fs-sm); color:var(--ink-soft); min-height:1.4em }
.cl-side h3{ font-size:1.05rem; margin:0 0 10px }
.cl-now{ display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; font-size:var(--fs-sm); color:var(--ink-soft) }
.cl-now::before{ content:""; width:18px; height:18px; border-radius:50%; background:var(--cl-current,#fff); border:2px solid var(--ink) }
@media (max-width:820px){ .cl-stage{ grid-template-columns:1fr } }

/* 1 · the colouring page: nothing fancy, the sheet and the paints */
/* 2 · paint by number */
.cl-keys{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px }
.cl-key{ display:flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill); box-shadow:var(--sh-chip); cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:.84rem; color:var(--ink); text-align:left }
.cl-key__n{ width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--ground); display:grid; place-items:center; font-size:.72rem; flex:none }
.cl-key.is-done{ background:var(--paint) }
.cl-key.is-done .cl-key__n{ background:#fff; color:var(--ink) }
/* 3 · the garden */
.cl--garden .cl-sheet{ background:linear-gradient(180deg, #F3FAFF 0 55%, #DDF0C9 55% 100%); align-items:end; min-height:420px; overflow:hidden }
.cl-bed{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(8px,2vw,28px); flex-wrap:wrap; width:100% }
.cl-plant{ width:calc(min(100%,520px) * var(--size,1) * .42); flex:none }
.cl-plant .cl-flower{ width:100% }
.cl-plant::after{ content:""; display:block; width:5px; height:calc(60px * var(--size,1)); margin:-6px auto 0; background:#5E7A18; border-radius:3px }
/* 4 · the brush and the round palette */
.cl--brush .cl-palette{ grid-template-columns:repeat(4,1fr); padding:18px; background:#FDF1E4; border:3px solid var(--ink); border-radius:50% 45% 50% 45% / 55% 50% 45% 50%; box-shadow:var(--sh-sticker) }
.cl--brush .cl-paint{ justify-content:center; padding:6px; border-radius:50%; aspect-ratio:1/1; background:var(--paint) }
.cl--brush .cl-paint .cl-paint__name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.cl--brush .cl-paint .cl-paint__blob{ display:none }
.cl--brush .cl-paint[aria-pressed="true"]{ box-shadow:0 0 0 3px var(--card), 0 0 0 5.5px var(--ink) }
.cl--brush .cl-flower{ cursor:crosshair }
/* 5 · the sticker strip */
.cl--sticker .cl-strip-wrap{ margin-top:clamp(22px,3vw,40px); padding:18px; background-color:var(--ground-2); background-image:radial-gradient(circle, rgba(51,43,66,.085) 1.15px, transparent 1.3px); background-size:26px 26px; border:2.5px dashed var(--ink); border-radius:18px; min-height:150px }
.cl-strip{ display:flex; flex-wrap:wrap; gap:14px; list-style:none; margin:0; padding:0 }
.cl-sticker{ width:110px; transform:rotate(var(--tilt,0deg)); filter:drop-shadow(0 6px 8px rgba(51,43,66,.22)) }
.cl-sticker svg{ width:100%; height:auto; display:block }
.cl-sticker svg [data-petal], .cl-sticker svg path{ pointer-events:none }

/* ---- series 2: the painter's palette, and everything small ---- */
.cl-pal{ display:block; width:100%; height:auto }
.cl-pal .cl-blob{ cursor:pointer; stroke:#332B42; stroke-width:3; transition:transform .15s var(--ease-out); transform-box:fill-box; transform-origin:center }
.cl-pal .cl-blob:hover{ transform:scale(1.12) }
.cl-pal .cl-blob[aria-pressed="true"]{ stroke-width:5; transform:scale(1.18) }
.cl-pal .cl-blob:focus-visible{ outline:none; stroke:#000; stroke-width:5 }
.cl-mini{ padding:clamp(18px,2.4vw,30px) 0 clamp(30px,4vw,56px) }
.cl-mini h2{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin:0 0 .2em }
.cl-mini .lede{ font-size:var(--fs-sm) }
.cl-mini .cl-tools{ margin-top:10px; gap:6px }
.cl-mini .cl-tools .btn{ font-size:.78rem; padding:7px 13px }
.cl-mini .cl-status{ font-size:.74rem; margin-top:6px }
/* 6 · side by side */
.cl--mini1 .cl-row{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(14px,2.4vw,30px); align-items:center; max-width:820px; padding:14px 18px; background:#fff; border:2.5px solid var(--ink); border-radius:20px; box-shadow:var(--sh-sticker) }
.cl--mini1 .cl-pal{ width:250px }
.cl--mini1 .cl-flower{ width:170px }
/* 7 · the flower sits on the palette */
.cl--mini2 .cl-onpal{ position:relative; width:min(100%,360px); margin:0 }
.cl--mini2 .cl-onpal .cl-flower{ position:absolute; width:31%; left:43%; top:26% }
/* 8 · a small card */
.cl--mini3 .cl-card{ max-width:560px; padding:14px 16px 16px; background:#fff; border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--sh-sticker) }
.cl--mini3 .cl-card__row{ display:flex; align-items:center; gap:14px }
.cl--mini3 .cl-pal{ width:210px; flex:none }
.cl--mini3 .cl-flower{ width:120px; flex:none }
/* 9 · a pop-out from a palette button */
.cl--mini4 .cl-pop{ position:relative; display:inline-block }
.cl--mini4 .cl-pop__btn{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill); box-shadow:var(--sh-chip); cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.9rem }
.cl--mini4 .cl-pop__btn svg{ width:44px; height:auto }
.cl--mini4 .cl-pop__panel{ display:none; margin-top:10px; padding:14px; background:#fff; border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--sh-sticker); width:min(100%,430px) }
.cl--mini4 .cl-pop.is-open .cl-pop__panel{ display:block }
.cl--mini4 .cl-pop__panel .cl-row{ display:flex; align-items:center; gap:12px }
.cl--mini4 .cl-pal{ width:220px } .cl--mini4 .cl-flower{ width:130px }
/* 10 · a strip */
.cl--mini5 .cl-strip{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); padding:8px 16px; background:#fff; border:2.5px solid var(--ink); border-radius:999px; box-shadow:var(--sh-sticker); max-width:900px }
.cl--mini5 .cl-pal{ width:190px; flex:none } .cl--mini5 .cl-flower{ width:96px; flex:none }
.cl--mini5 .cl-strip p{ margin:0; font-size:var(--fs-sm); color:var(--ink-soft) }
.cl--mini5 .cl-tools{ margin:0; margin-left:auto }
@media (max-width:640px){ .cl--mini1 .cl-row, .cl--mini5 .cl-strip{ flex-wrap:wrap; grid-template-columns:1fr; justify-items:center; border-radius:20px } }

/* ---- series 3: side by side, done properly ---- */
.cl-box{ background:#fff; border:2.5px solid var(--ink); border-radius:20px; box-shadow:var(--sh-sticker) }
.cl-tiny{ display:flex; gap:6px; flex-wrap:wrap }
.cl-tiny .btn{ font-size:.74rem; padding:6px 11px }
.cl-hint{ margin:0; font-size:.78rem; color:var(--ink-soft) }
/* 11 · balanced pair: palette and flower close, caption and buttons tucked beneath */
.cl--mini6 .cl-box{ display:grid; grid-template-columns:auto auto; gap:8px clamp(14px,2vw,28px); align-items:center; justify-content:center; padding:16px 22px 14px; width:fit-content; max-width:100% }
.cl--mini6 .cl-pal{ width:230px } .cl--mini6 .cl-flower{ width:190px }
.cl--mini6 .cl-foot{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1.5px dashed var(--hairline); padding-top:10px }
/* 12 · a title inside, the flower larger on the right */
.cl--mini7 .cl-box{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; gap:6px 22px; padding:16px 22px; width:fit-content; max-width:100% }
.cl--mini7 .cl-box h3{ grid-column:1/-1; margin:0; font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'opsz' 40; font-size:1.25rem }
.cl--mini7 .cl-pal{ width:210px } .cl--mini7 .cl-flower{ width:210px; grid-row:2/4 }
.cl--mini7 .cl-side{ display:grid; gap:8px; align-content:start }
/* 13 · stacked card: flower up top, palette under it */
.cl--mini8 .cl-box{ display:grid; justify-items:center; gap:4px; padding:16px 18px 14px; width:300px; max-width:100% }
.cl--mini8 .cl-flower{ width:170px } .cl--mini8 .cl-pal{ width:250px }
.cl--mini8 .cl-tiny{ justify-content:center; margin-top:4px }
/* 14 · a sticker: the flower overlaps the palette's edge, a bloom in the corner */
.cl--mini9 .cl-box{ position:relative; display:flex; align-items:center; padding:18px 28px 16px 20px; width:fit-content; max-width:100%; border-radius:26px; border-width:3px }
.cl--mini9 .cl-pal{ width:250px; filter:drop-shadow(0 6px 8px rgba(51,43,66,.18)) } .cl--mini9 .cl-flower{ width:190px; margin-left:-38px; filter:drop-shadow(0 6px 8px rgba(51,43,66,.22)) }
.cl--mini9 .cl-corner{ position:absolute; right:-16px; top:-16px }
.cl--mini9 .cl-tiny{ position:absolute; right:18px; bottom:12px }
/* 15 · with a few words on the left */
.cl--mini10 .cl-box{ display:grid; grid-template-columns:minmax(150px,200px) auto auto; gap:clamp(14px,2vw,26px); align-items:center; padding:16px 22px; width:fit-content; max-width:100% }
.cl--mini10 .cl-words h3{ margin:0 0 4px; font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'opsz' 40; font-size:1.2rem }
.cl--mini10 .cl-words p{ margin:0 0 10px; font-size:.82rem; color:var(--ink-soft); max-width:none }
.cl--mini10 .cl-pal{ width:210px } .cl--mini10 .cl-flower{ width:170px }
@media (max-width:640px){ .cl--mini6 .cl-box, .cl--mini7 .cl-box, .cl--mini10 .cl-box{ grid-template-columns:1fr; justify-items:center } .cl--mini7 .cl-flower{ grid-row:auto } .cl--mini9 .cl-box{ flex-wrap:wrap; justify-content:center; padding-bottom:52px } .cl--mini9 .cl-flower{ margin-left:0 } }

/* no box around a tapped petal; keyboard focus still shows as a thicker ink ring */
.cl-flower [data-petal], .cl-flower [data-petal]:focus{ outline:none }

/* ---- series 4: in the about block, with the prettier palette ---- */
.cl-pal2{ display:block; height:auto; filter:drop-shadow(0 8px 10px rgba(51,43,66,.2)) }
.cl-pal2 .cl-blob{ cursor:pointer; transition:transform .15s var(--ease-out); transform-box:fill-box; transform-origin:center }
.cl-pal2 .cl-blob:hover{ transform:scale(1.1) }
.cl-pal2 .cl-blob[aria-pressed="true"]{ transform:scale(1.2) }
.cl-pal2 .cl-blob:focus-visible{ outline:none; stroke:#332B42; stroke-width:5 }
.ab-play{ margin-top:18px }
.ab-play .cl-hint{ margin:0 0 6px; font-size:.78rem }
.ab-play .cl-tiny{ margin-top:6px }
.ab-play .cl-flower{ width:150px }
.ab-play .cl-pal2{ width:220px }
/* 16 · under the words */
.cl--about1 .ab-play{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
/* 17 · a sticker card in the corner of the text column */
.cl--about2 .ab-play{ display:inline-flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--sh-sticker); position:relative }
.cl--about2 .ab-play .cl-corner{ position:absolute; right:-14px; top:-14px }
.cl--about2 .ab-play .cl-flower{ width:120px } .cl--about2 .ab-play .cl-pal2{ width:190px }
.cl--about2 .ab-play .cl-tiny{ position:absolute; right:12px; bottom:8px }
/* 18 · a slim strip under the whole about block */
.cl--about3 .ab-play{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); flex-wrap:wrap; margin:clamp(22px,3vw,40px) auto 0; max-width:1040px; padding:10px 22px; background:#fff; border:2.5px solid var(--ink); border-radius:999px; box-shadow:var(--sh-sticker) }
.cl--about3 .ab-play .cl-pal2{ width:180px } .cl--about3 .ab-play .cl-flower{ width:96px }
.cl--about3 .ab-play .cl-hint{ margin:0 }
.cl--about3 .ab-play .cl-tiny{ margin:0 0 0 auto }
/* 19 · beside the signature: the flower next to the name, the dabs in a curve above */
.cl--about4 .ab-play{ display:grid; grid-template-columns:auto auto; align-items:center; gap:4px 18px; margin-top:8px }
.cl--about4 .ab-play .cl-pal2{ width:230px; grid-column:1/-1 }
.cl--about4 .ab-play .cl-flower{ width:130px }
.cl--about4 .ab-play .ab-sig{ margin:0 }
/* 20 · a chip that opens the game under the words */
.cl--about5 .cl-pop__btn{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:8px 16px 8px 10px; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill); box-shadow:var(--sh-chip); cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.88rem }
.cl--about5 .cl-pop__btn svg{ width:40px; height:auto }
.cl--about5 .cl-pop__panel{ display:none; margin-top:12px; align-items:center; gap:16px; flex-wrap:wrap }
.cl--about5 .cl-pop.is-open .cl-pop__panel{ display:flex }
.cl--about5 .cl-pop__panel .cl-flower{ width:140px } .cl--about5 .cl-pop__panel .cl-pal2{ width:210px }
@media (max-width:760px){ .cl--about2 .ab-play{ display:flex; flex-wrap:wrap; padding-bottom:50px } .cl--about4 .ab-play{ grid-template-columns:1fr } }
/* inside the about text column, the game's own lines stay small */
.ab-text .ab-play p, .ab-text .cl-pop p{ font-size:.78rem; line-height:1.4; color:var(--ink-soft); margin:0 0 6px; max-width:none }
/* beside the signature: the palette on its own row, then the name and the flower side by side */
.cl--about4 .ab-play{ display:grid; grid-template-columns:auto auto; justify-content:start; align-items:center; gap:6px 22px; margin-top:8px }
.cl--about4 .ab-play .cl-pal2{ grid-column:1/-1; width:230px }

/* ---- the palette comparison page ---- */
.pl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:clamp(18px,2.4vw,32px) }
.pl-card{ display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:center; padding:16px 18px; background:#fff; border:2.5px solid var(--ink); border-radius:20px; box-shadow:var(--sh-sticker) }
.pl-card h3{ grid-column:1/-1; margin:0; font-family:var(--font-display); font-weight:600; font-size:1rem; display:flex; align-items:center; gap:8px }
.pl-card h3 .pr-switch__n{ flex:none }
.pl-card .pl-note{ grid-column:1/-1; margin:0; font-size:.8rem; color:var(--ink-soft); max-width:none }
.pl-card .cl-flower{ width:120px }
.pl-card svg.pl{ display:block; width:100%; max-width:260px; height:auto }
.pl .cl-blob{ cursor:pointer; transition:transform .15s var(--ease-out); transform-box:fill-box; transform-origin:center }
.pl .cl-blob:hover{ transform:scale(1.1) }
.pl .cl-blob[aria-pressed="true"]{ transform:scale(1.16); filter:drop-shadow(0 0 0 #332B42) }
.pl .cl-blob:focus-visible{ outline:none; stroke:#000; stroke-width:4 }
.pl .cl-ring{ pointer-events:none }

/* ---- the about block: a chip under the signature that opens the game in a popup ---- */
.cl-pop--dlg{ display:block; margin-top:16px }
.cl-pop--dlg .cl-pop__btn{ display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 9px; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill); box-shadow:var(--sh-chip); cursor:pointer; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:.88rem; transition:transform .15s var(--ease-out) }
.cl-pop--dlg .cl-pop__btn:hover{ transform:translateY(-2px) }
.cl-pop--dlg .cl-pop__btn svg{ width:46px; height:auto; flex:none }
.cl-dlg{ border:0; padding:0; background:transparent; color:var(--ink); width:min(600px,94vw); max-width:94vw; margin:auto }
.cl-dlg::backdrop{ background:rgba(42,33,54,.72) }
.cl-dlg__panel{ position:relative; background:#fff; border:2.5px solid var(--ink); border-radius:24px; box-shadow:0 0 0 6px rgba(255,249,242,.10), var(--sh-sticker); padding:26px 28px 24px }
.cl-dlg__panel h3{ margin:0 0 4px; padding-right:48px; font-family:var(--font-display); font-weight:600; font-size:1.35rem; line-height:1.15 }
.ab-text .cl-dlg__panel .cl-hint{ margin:0 0 16px; font-size:.86rem; line-height:1.5; color:var(--ink-soft) }
.cl-dlg__row{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap }
.cl-dlg__row svg.pl{ display:block; width:min(320px,100%); height:auto }
.cl-dlg__row .cl-flower{ width:170px; flex:none }
.cl-dlg__panel .cl-tiny{ margin-top:16px; justify-content:center }
.cl-dlg__close{ position:absolute; right:12px; top:12px; z-index:5; width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:50%; background:var(--ground); color:var(--ink); border:2.5px solid var(--ink); box-shadow:var(--sh-chip); cursor:pointer; font-family:var(--font-display); font-size:1.05rem; line-height:1 }
.cl-dlg__close:hover{ transform:translateY(-2px) }
@media (max-width:520px){ .cl-dlg__panel{ padding:20px 16px 18px } .cl-dlg__row .cl-flower{ width:140px } }