/* ---------- Trò 4: Tô màu ---------- */
.page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vmin, 24px); width: min(720px, 100%); }
.page-card { position: relative; padding: 10px; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .05s); }
.page-thumb { display: block; width: 100%; aspect-ratio: 1; }
.page-thumb .color-svg { width: 100%; height: 100%; }
.page-card.locked .page-thumb { opacity: .35; filter: grayscale(1); }
.need {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px; padding: 4px 12px; border-radius: 99px;
  background: #fff; box-shadow: 0 4px 0 var(--card-edge); font-size: 20px; font-weight: 800; color: #e0a200;
}
.color-svg { display: block; }
.color-svg [data-part] { fill: #fff; stroke: #3b3355; stroke-width: 5; stroke-linejoin: round; transition: fill .35s; }
.color-svg .ink { fill: none; stroke: #3b3355; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.color-svg .dot { fill: #3b3355; pointer-events: none; }
.color-svg .shine { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: .85; pointer-events: none; }
.canvas { padding: clamp(8px, 1.5vmin, 14px); }
.canvas .color-svg { width: clamp(220px, 52vmin, 440px); height: auto; cursor: pointer; }
.canvas .color-svg [data-part] { cursor: pointer; }
.canvas .color-svg .target { animation: target 1.1s ease-in-out infinite; }
@keyframes target { 50% { stroke: #ff9f1c; stroke-width: 10; } }
.canvas .color-svg.nope { animation: shake .45s ease; }
.palette { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(6px, 1.4vmin, 12px); max-width: 720px; }
.pal { border-radius: 50%; padding: 4px; transition: transform .15s; }
.pal:active { transform: scale(.9); }
.pal.on { box-shadow: 0 0 0 5px #fff, 0 0 0 9px #3b3355; transform: translateY(-6px) scale(1.08); }
.pal.hint { animation: hop .6s ease infinite; }
@media (orientation: portrait) {
  .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canvas .color-svg { width: min(84vw, 46vh); }
  .palette .pic.md { --s: 52px; }
}