/* Coloring only. Everything else comes from ../shared/game.css. */
#screen{touch-action:manipulation;user-select:none;-webkit-user-select:none}
canvas#world{cursor:pointer}
canvas#world:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* the bar fills spot by spot: a crayon-box rainbow */
.progress-fill{background:linear-gradient(90deg,#ff5a5f,#ff9a3c,#ffd23f,#4cc96a,#3d8bff,#9b6bff);transition:width .25s ease-out}
/* the paint pots: big round buttons under the game, one per paint, numbered */
.palette{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:nowrap;min-height:60px}
.pot{position:relative;flex:0 1 58px;width:58px;height:auto;aspect-ratio:1;min-width:0;border-radius:50%;border:3px solid #ffffff33;cursor:pointer;touch-action:manipulation;
  background:radial-gradient(circle at 34% 30%,var(--pot-light) 0 18%,var(--pot) 55%);box-shadow:inset 0 -5px 0 #0000002e,0 3px 0 #00000055;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;padding:0}
.pot b{display:grid;place-items:center;width:30px;height:30px;margin:auto;border-radius:50%;background:#fff;color:#3b2f52;
  font:800 17px/1 "Plus Jakarta Sans",system-ui,sans-serif;box-shadow:0 1px 0 #0003}
.pot.on{border-color:#fff;transform:translateY(-6px) scale(1.1);box-shadow:inset 0 -5px 0 #0000002e,0 0 0 4px #ffffff55,0 8px 0 #00000044}
.pot.done{opacity:.4}
.pot.done::after{content:"✓";position:absolute;right:-4px;top:-6px;width:20px;height:20px;border-radius:50%;background:#4cc96a;color:#fff;
  font:800 13px/20px "Plus Jakarta Sans",system-ui,sans-serif}
.pot:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.pot.next{flex:0 0 auto;margin-left:8px;width:auto;height:48px;aspect-ratio:auto;border-radius:24px;padding:0 20px;
  background:#ffd23f;color:#3b2f52;border-color:#fff;font:800 15px "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 4px 0 #00000055}
.pot.next[hidden]{display:none}
@media (max-width:560px){.palette{gap:6px;min-height:54px}.pot{width:46px;flex-basis:46px}.pot b{width:25px;height:25px;font-size:15px}
  .pot.next{position:absolute;right:8px;bottom:calc(100% + 14px);z-index:2;margin:0;height:44px;padding:0 16px;font-size:13px}}   /* phones: floats over the paper's corner */
@media (prefers-reduced-motion:reduce){.pot{transition:none}.pot.on{transform:none}}