/* Paint — game-specific */
.canvas-wrap { flex:1; display:flex; align-items:center; justify-content:center; min-height:0; }
#paint {
  width:100%; max-width:720px; height:auto; aspect-ratio:4/3; max-height:60vh;
  background:#fff; border:5px solid var(--stroke); border-radius:16px; box-shadow:0 6px 0 var(--stroke);
  touch-action:none; cursor:crosshair;
}

.palette {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0 10px;
}
.swatch {
  width:34px; height:34px; border-radius:50%; border:3px solid var(--stroke); cursor:pointer;
  box-shadow:0 3px 0 var(--stroke); transition:transform 0.12s var(--bounce);
}
.swatch:active { transform:translateY(3px); box-shadow:0 0 0 var(--stroke); }
.swatch.active { outline:4px solid var(--stroke); outline-offset:2px; transform:scale(1.1); }

.tools { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.tool, .size {
  min-width:48px; height:48px; font-size:22px; cursor:pointer;
  background:var(--card); border:4px solid var(--stroke); border-radius:14px; box-shadow:var(--sh);
  display:flex; align-items:center; justify-content:center; color:var(--stroke);
  transition:transform 0.1s, box-shadow 0.1s, background 0.2s;
}
.tool:active, .size:active { transform:translateY(4px); box-shadow:0 0 0 var(--stroke); }
.tool.active, .size.active { background:var(--yellow); }
.size[data-size="5"]  { font-size:12px; }
.size[data-size="14"] { font-size:20px; }
.size[data-size="28"] { font-size:30px; }
.divider { width:3px; height:30px; background:var(--wood-deep); border-radius:2px; }